🐍

* slimselect2 styling
a-sync · Feb 23, 2024 · f6228ff · f6228ff
1 parent f9a5b5a
commit f6228ff
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 36 deletions.
diff --git a/application/views/admin/add-alias.php b/application/views/admin/add-alias.php
@@ -121,10 +121,13 @@
 
 <script src="<?php echo base_url('public/slimselect.min.js'); ?>"></script>
 <script>
+    const ss2css = document.head.querySelector('link[href$="slimselect2.css"]');
+    ss2css.remove();
     const ss_css = document.createElement('link');
     ss_css.rel = 'stylesheet';
     ss_css.href = '<?php echo base_url('public/slimselect.css'); ?>';
     document.head.appendChild(ss_css);
+    // TODO: upd to slimselect2
 
     const player_id = <?php echo json_encode($player_id); ?>;
     const players = <?php echo json_encode($players); ?>;

diff --git a/application/views/admin/events.php b/application/views/admin/events.php
@@ -307,11 +307,6 @@
 <script src="https://unpkg.com/slim-select@2.8.1/dist/slimselect.min.js"></script>
 <script src="<?php echo base_url('public/events-filters.js'); ?>"></script>
 <script>
-    const ss_css = document.createElement('link');
-    ss_css.rel = 'stylesheet';
-    ss_css.href = '<?php echo base_url('public/slimselect2.css'); ?>';
-    document.head.appendChild(ss_css);
-
     const entities = <?php echo json_encode($op_entities); ?>;
     const sides = <?php echo json_encode($sides); ?>;
     const events_num = <?php echo json_encode($events_num); ?>;

diff --git a/application/views/admin/verify.php b/application/views/admin/verify.php
@@ -418,10 +418,13 @@ function print_cmd_entity_info($entity, $prospect = false)
 
 <script src="<?php echo base_url('public/slimselect.min.js'); ?>"></script>
 <script>
+    const ss2css = document.head.querySelector('link[href$="slimselect2.css"]');
+    ss2css.remove();
     const ss_css = document.createElement('link');
     ss_css.rel = 'stylesheet';
     ss_css.href = '<?php echo base_url('public/slimselect.css'); ?>';
     document.head.appendChild(ss_css);
+    // TODO: upd to slimselect2
 
     <?php
     foreach ($op_sides as $s => $pc) :

diff --git a/application/views/head.php b/application/views/head.php
@@ -19,8 +19,8 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css" crossorigin="anonymous" referrerpolicy="no-referrer">
 
     <link rel="stylesheet" href="<?php echo base_url('public/mdc.min.css'); ?>">
-
     <link rel="stylesheet" href="<?php echo base_url('public/sortable.css'); ?>">
+    <link rel="stylesheet" href="<?php echo base_url('public/slimselect2.css'); ?>">
     <link rel="stylesheet" href="<?php echo base_url('public/app.css'); ?>">
 </head>
 

diff --git a/application/views/op-events.php b/application/views/op-events.php
@@ -162,11 +162,6 @@
 <script src="https://unpkg.com/slim-select@2.8.1/dist/slimselect.min.js"></script>
 <script src="<?php echo base_url('public/events-filters.js'); ?>"></script>
 <script>
-    const ss_css = document.createElement('link');
-    ss_css.rel = 'stylesheet';
-    ss_css.href = '<?php echo base_url('public/slimselect2.css'); ?>';
-    document.head.appendChild(ss_css);
-
     const entities = <?php echo json_encode($op_entities); ?>;
     const sides = <?php echo json_encode($sides); ?>;
     const events_num = <?php echo json_encode($events_num); ?>;

diff --git a/public/app.css b/public/app.css
@@ -323,7 +323,7 @@ img.ocap-link {
 
     .ss-main .ss-multi-selected .ss-values .ss-value .ss-value-delete {
         color: var(--mdc-theme-text-primary-on-dark);
-        background-color: var(--mdc-theme-on-error);
+        background-color: var(--mdc-theme-error);
     }
 
     .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading, .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch, .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {

diff --git a/public/mdc.min.css b/public/mdc.min.css
diff --git a/public/slimselect2.css b/public/slimselect2.css
@@ -1,13 +1,14 @@
 :root{
     --ss-primary-color: var(--mdc-theme-secondary);
     --ss-bg-color: var(--mdc-theme-surface);
-    --ss-font-color: var(--mdc-theme-on-surface);
+    --ss-font-color: var(--mdc-theme-text-primary-on-background);
     --ss-font-placeholder-color: var(--mdc-theme-text-hint-on-background);
-    --ss-disabled-color: var(--mdc-theme-text-disabled-on-background);
-    --ss-border-color: var(--mdc-theme-text-secondary-on-background);
+    --ss-disabled-color: var(--mdc-theme-surface);
+    --ss-border-color: var(--mdc-theme-text-hint-on-background);
     --ss-highlight-color: var(--mdc-theme-primary);
+    --ss-highlight-font-color: var(--mdc-theme-text-primary-on-background);
     --ss-success-color: #00b755;
-    --ss-error-color: #dc3545;
+    --ss-error-color: var(--mdc-theme-error);
     --ss-focus-color: #5897fb;
     --ss-main-height: 30px;
     --ss-content-height: 300px;
@@ -63,10 +64,11 @@
 }
 .ss-main.ss-disabled{
     background-color:var(--ss-disabled-color);
-    cursor:not-allowed
+    cursor:not-allowed;
+    color:var(--ss-font-placeholder-color)
 }
 .ss-main.ss-disabled .ss-values .ss-disabled{
-    color:var(--ss-font-color)
+    color:var(--ss-font-placeholder-color)
 }
 .ss-main.ss-disabled .ss-values .ss-value .ss-value-delete{
     cursor:not-allowed
@@ -132,27 +134,36 @@
 }
 .ss-main .ss-values .ss-value .ss-value-text{
     font-size:12px;
-    color:var(--ss-bg-color);
+    color:var(--ss-highlight-font-color);
     line-height:1;
     padding:var(--ss-spacing-s) var(--ss-spacing-m)
 }
 .ss-main .ss-values .ss-value .ss-value-delete{
-    display:flex;
-    align-items:center;
-    height:var(--ss-spacing-l);
-    width:var(--ss-spacing-l);
-    padding:var(--ss-spacing-s) var(--ss-spacing-m);
-    cursor:pointer;
-    border-left:solid 1px var(--ss-bg-color);
-    box-sizing:content-box
+    margin: 0 1px 0 0px;
+    cursor: pointer;
+    color: var(--mdc-theme-on-error);
+    background-color: maroon;
+    width: 1rem;
+    height: 1rem;
+    font-family: monospace;
+    font-size: 0.75rem;
+    font-weight: bold;
+    line-height: 1rem;
+    text-align: center;
+    vertical-align: middle;
+    display: inline-block;
+    border-radius: 50%;
+}
+.ss-main .ss-values .ss-value .ss-value-delete:hover{
+    background-color: var(--mdc-theme-error);
 }
 .ss-main .ss-values .ss-value .ss-value-delete svg{
     height:var(--ss-spacing-l);
     width:var(--ss-spacing-l)
 }
 .ss-main .ss-values .ss-value .ss-value-delete svg path{
     fill:none;
-    stroke:var(--ss-bg-color);
+    stroke:var(--ss-font-color);
     stroke-width:18;
     stroke-linecap:round;
     stroke-linejoin:round
@@ -397,20 +408,19 @@
     user-select:none
 }
 .ss-content .ss-list .ss-option:hover{
-    color:var(--ss-bg-color);
+    color:var(--highlight-font-color);
     background-color:var(--ss-primary-color)
 }
 .ss-content .ss-list .ss-option.ss-highlighted,.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected{
-    color:var(--ss-bg-color);
+    color:var(--ss-highlight-font-color);
     background-color:var(--ss-primary-color)
 }
 .ss-content .ss-list .ss-option.ss-disabled{
     cursor:not-allowed;
-    background-color:var(--ss-disabled-color)
-}
-.ss-content .ss-list .ss-option.ss-disabled:hover{
-    color:var(--ss-font-color)
+    background-color:var(--ss-disabled-color);
+    color:var(--ss-font-placeholder-color)
 }
 .ss-content .ss-list .ss-option .ss-search-highlight{
-    background-color:var(--ss-highlight-color)
+    background-color:var(--ss-highlight-color);
+    color:var(--ss-highlight-font-color)
 }