@loftyshaky/shared 2.6.0 → 2.7.0

package/scss/shared/themes/general/template.scss

@@ -1,38 +1,39 @@
 /* stylelint-disable selector-class-pattern */
 
-@import 'template_focus';
+@use '../../mixins' as mixins;
+@use 'template_focus';
 
 @mixin link_colors_standard {
-    @include link_colors($ycp, $ptn, $cop, $uzf);
+    @include mixins.link_colors(var(--ycp), var(--ptn), var(--cop), var(--uzf));
 }
 
 ::selection {
-    background-color: $nqp !important;
+    background-color: var(--nqp) !important;
     color: white !important;
 }
 
 :not(html, body, select) {
     &::-webkit-scrollbar-corner,
     &::-webkit-resizer {
-        background-color: $hyn;
-        border-color: $hyn;
+        background-color: var(--hyn);
+        border-color: var(--hyn);
     }
 
     &::-webkit-scrollbar-track {
-        background-color: $npw;
+        background-color: var(--npw);
     }
 
     &::-webkit-scrollbar-thumb {
-        background-color: $fxm;
+        background-color: var(--fxm);
     }
 
     &::-webkit-scrollbar-thumb:hover {
-        background-color: $lpe;
+        background-color: var(--lpe);
     }
 
     &::-webkit-scrollbar-track:horizontal,
     &::-webkit-scrollbar-track:vertical {
-        border-color: $fxm;
+        border-color: var(--fxm);
     }
 }
 
@@ -47,31 +48,31 @@
 textarea {
     &::-webkit-scrollbar-corner,
     &::-webkit-resizer {
-        background-color: $nur;
-        border-color: $vqo;
+        background-color: var(--nur);
+        border-color: var(--vqo);
     }
 
     &::-webkit-scrollbar-track {
-        background-color: $hcx;
+        background-color: var(--hcx);
     }
 }
 
 .loading_screen {
     &.main {
-        background-color: $dfp;
+        background-color: var(--dfp);
     }
 
     svg {
-        stroke: $tgp;
+        stroke: var(--tgp);
     }
 }
 
 .help_btn svg {
-    fill: $lpe;
+    fill: var(--lpe);
 }
 
 body::before {
-    background: $gqb;
+    background: var(--gqb);
 }
 
 .main,
@@ -79,145 +80,143 @@ button,
 select,
 input,
 textarea {
-    color: $lpe;
+    color: var(--lpe);
 }
 
 hr {
-    background-color: $hyn;
+    background-color: var(--hyn);
 }
 
 .dependencies hr {
-    background-color: $lpe;
-}
-
-.btn_options {
-    background-color: $npw;
-    border-color: $hyn;
-
-    .btn_option {
-        hr {
-            background-color: $hyn;
-        }
-
-        &:hover {
-            background-color: $qgp;
-        }
-    }
+    background-color: var(--lpe);
 }
 
 .sections_and_offers {
-    background-color: $tbn;
+    background-color: var(--tbn);
 
     .offers {
-        border-color: $hyn;
+        border-color: var(--hyn);
+
+        .top_bar .btn_w.icon_btn svg {
+            fill: var(--lpe);
+        }
     }
 }
 
 .sections .section_name {
-    border-color: $hyn;
+    border-color: var(--hyn);
 }
 
 .section_btns {
-    background-color: $gvb;
+    background-color: var(--gvb);
 
     .section_btn {
-        background-color: $hfb;
+        background-color: var(--hfb);
 
         &.selected::before {
-            background-color: $pxd;
+            background-color: var(--pxd);
         }
 
         &:not(.selected):hover::before {
-            background-color: $ksu;
+            background-color: var(--ksu);
         }
     }
 }
 
 .input_item {
     .inset_border::before {
-        outline-color: $hyn;
+        outline-color: var(--hyn);
     }
 
     .input {
-        background-color: $npw;
+        background-color: var(--npw);
 
         &::placeholder {
-            color: $mdc;
+            color: var(--mdc);
         }
     }
 
-    .btn.text_input {
-        background-color: $npw;
+    .btn {
+        &.text_input {
+            background-color: var(--npw);
 
-        svg {
-            fill: $lpe;
+            svg {
+                fill: var(--lpe);
+            }
         }
     }
 
     .palette {
-        background-color: $htc;
-        color: $rbp;
+        background-color: var(--htc);
+        color: var(--rbp);
     }
 
     .input_w {
         .visualization {
-            background-color: $npw;
+            background-color: var(--npw);
         }
 
         .palette_visualization_w.inset_border::before {
-            outline-color: $hev;
+            outline-color: var(--hev);
         }
 
         .palette_visualization {
-            background-color: $npw;
+            background-color: var(--npw);
         }
     }
 
+    &.select .input_w::after {
+        border-top-color: var(--lpe);
+    }
+
     select {
-        background-image: linear-gradient(45deg, transparent 50%, $lpe 50%),
-            linear-gradient(135deg, $lpe 50%, transparent 50%),
-            linear-gradient(to right, $lpe, $lpe);
+        background-image:
+            linear-gradient(45deg, transparent 50%, var(--lpe) 50%),
+            linear-gradient(135deg, var(--lpe) 50%, transparent 50%),
+            linear-gradient(to right, var(--lpe), var(--lpe));
 
         option {
-            color: $rbp;
+            color: var(--rbp);
         }
     }
 
     .range {
         .lower_fill {
-            background-color: $lpe;
+            background-color: var(--lpe);
         }
 
         .input {
-            &::-webkit-slider-thumb {
-                background-color: $lpe;
+            &::-webkit-slider-thumb,
+            &::-moz-range-thumb {
+                background-color: var(--lpe);
             }
 
-            &::-webkit-slider-runnable-track {
-                box-shadow: inset 0 0 0 1px $hyn;
+            &::-webkit-slider-runnable-track,
+            &::-moz-range-track {
+                box-shadow: inset 0 0 0 1px var(--hyn);
             }
         }
     }
 
     .checkbox .box {
-        outline-color: $hyn;
-        background-color: $npw;
+        outline-color: var(--hyn);
+        background-color: var(--npw);
 
         svg {
-            fill: $lpe;
+            fill: var(--lpe);
         }
     }
 
     .upload_box {
-        outline-color: $hyn;
+        outline-color: var(--hyn);
 
         .background {
             &.upload_box_idle {
-                background-color: $npw;
+                background-color: var(--npw);
             }
 
             &.upload_box_hover {
-                background-color: $qgp;
+                background-color: var(--qgp);
             }
 
             &.loading {
@@ -225,36 +224,36 @@ hr {
                 /* stylelint-disable-next-line function-parentheses-newline-inside */
                 background-image: repeating-linear-gradient(
                     -45deg,
-                    $npw,
-                    $npw 14px,
-                    $qgp 14px,
-                    $qgp 28px
+                    var(--npw),
+                    var(--npw) 14px,
+                    var(--qgp) 14px,
+                    var(--qgp) 28px
                 ); /* stylelint-disable-line function-parentheses-newline-inside */
             }
         }
     }
 
     &.color .link_btn {
-        @include link_colors($iub, $dwk, $yun, $hap);
+        @include mixins.link_colors(var(--iub), var(--dwk), var(--yun), var(--hap));
     }
 
     .color_picker_w {
         *:not(.pcr-last-color, .pcr-current-color) {
-            color: $rbp !important;
+            color: var(--rbp) !important;
         }
 
         input {
-            background-color: $npw !important;
-            outline-color: $hev !important;
+            background-color: var(--npw) !important;
+            outline-color: var(--hev) !important;
 
             &:hover:not(.pcr-result, .active) {
-                background-color: $hyv !important;
+                background-color: var(--hyv) !important;
             }
         }
     }
 
     .pcr-app {
-        background-color: $htc !important;
+        background-color: var(--htc) !important;
     }
 
     .pcr-color-preview,
@@ -262,26 +261,26 @@ hr {
     .pcr-slider,
     .pcr-picker,
     .pcr-result {
-        border-color: $hev !important;
+        border-color: var(--hev) !important;
     }
 
     .pcr-type.active {
-        background-color: $nep !important;
+        background-color: var(--nep) !important;
     }
 }
 
 .main:not(.loading_screen) {
     .main_2 {
-        background-color: $hfb;
+        background-color: var(--hfb);
     }
 
     .btn {
         &.text {
-            background-color: $npw;
-            outline-color: $hyn;
+            background-color: var(--npw);
+            outline-color: var(--hyn);
 
             &:hover {
-                background-color: $qgp;
+                background-color: var(--qgp);
             }
         }
     }
@@ -289,23 +288,43 @@ hr {
     .btn,
     .link.svg {
         svg {
-            fill: $lpe;
+            fill: var(--lpe);
+        }
+    }
+
+    .icon_btn .btn {
+        background-color: var(--dlf);
+
+        svg {
+            fill: var(--lpe);
+        }
+    }
+
+    .input_item .side_btn {
+        background-color: var(--hyp);
+
+        &.is_disabled {
+            background-color: var(--tdu);
+        }
+
+        svg {
+            fill: var(--pgs);
         }
     }
 }
 
 .offer img {
-    border-color: $hyn;
+    border-color: var(--hyn);
 }
 
 .input_error {
-    color: $thm;
+    color: var(--thm);
 }
 
 .ext_version {
-    color: $lpe;
+    color: var(--lpe);
 }
 
 .ad_label {
-    outline-color: $lpe;
+    outline-color: var(--lpe);
 }

package/scss/shared/themes/general/template_focus.scss

@@ -3,64 +3,64 @@
 .input_item {
     .input_w {
         &.is_in_focus_state:not(.select)::before {
-            outline-color: $ksu;
+            outline-color: var(--ksu);
         }
 
         &.is_in_warn_state:not(.select)::before,
         &.is_in_warn_state.upload_box {
-            outline-color: $rqb;
+            outline-color: var(--rqb);
         }
     }
 
     .visualization_w.opened .visualization {
-        outline-color: $pxd;
+        outline-color: var(--pxd);
     }
 
     .palette_visualization_w.opened .palette_visualization,
     .palette_visualization_w.selected .palette_visualization {
-        outline-color: $iub;
+        outline-color: var(--iub);
     }
 }
 
 .keyboard .btn.text_input::before,
 body.keyboard .btn.text:focus,
 .keyboard .help_btn:focus,
-.keyboard .icon_btn:focus,
+.keyboard .icon_btn .btn:focus,
+.keyboard .side_btn:focus,
 .keyboard .input_item .checkbox .box:focus,
 .keyboard .link:focus,
 .keyboard .link_btn:focus,
 .keyboard .input_item .input_w:not(.text, .textarea).is_in_focus_state::before,
 .keyboard .input_item.range .input.is_in_focus_state,
-.keyboard .input_item .visualization_w .visualization:focus,
-.keyboard .btn_options .btn_option:focus {
-    outline-color: $upd;
+.keyboard .input_item .visualization_w .visualization:focus {
+    outline-color: var(--upd);
 }
 
 .keyboard .input_item.color .btn.text:focus {
-    outline-color: $dwk;
+    outline-color: var(--dwk);
 }
 
 .keyboard .input_item .palette_visualization_w .palette_visualization:focus {
-    outline-color: $dwk;
+    outline-color: var(--dwk);
 }
 
 .keyboard .input_item .pcr-palette:focus,
 .keyboard .input_item .pcr-slider:focus,
 .keyboard .input_item .pcr-picker:focus,
 .keyboard .input_item .color_picker_w input:not(.pcr-result):focus {
-    outline-color: $dwk !important;
+    outline-color: var(--dwk) !important;
 }
 
 .input_item .pcr-result:focus {
-    outline-color: $yun !important;
+    outline-color: var(--yun) !important;
 }
 
 .keyboard .input_item .pcr-result:focus {
-    outline-color: $dwk !important;
+    outline-color: var(--dwk) !important;
 }
 
 .keyboard .section_btn:not(.selected):focus {
     box-shadow:
-        inset 0 0 0 2px $upd,
-        inset -2px 0 0 0 $upd;
+        inset 0 0 0 2px var(--upd),
+        inset -2px 0 0 0 var(--upd);
 }

package/scss/shared/themes/general/very_dark_theme.scss

@@ -1,9 +1,10 @@
-@import '../../vars';
-@import '../../mixins';
-@import '../../functions';
-@import '../colors/very_dark';
-@import 'template';
+@use '../colors/very_dark';
+@use 'template';
+
+$blue_neon:
+    rgb(0 102 255 / 85%) 0 0 36px,
+    rgb(255 255 255 / 40%) 0 0 10px;
 
 .main_2 {
-    box-shadow: $blue_neon_very_dark;
+    box-shadow: $blue_neon;
 }

package/scss/shared/transitions.scss

@@ -1,58 +1,57 @@
-/* stylelint-disable selector-class-pattern */
-
-.loading_screen,
-.input_item,
-.input_w,
-.checkbox .box svg,
-.color_picker_w,
-.palette_w,
-.color_help_w,
-.btn_options,
-.offers {
-    transition: var(--transition);
-    transition-property: opacity;
-}
-
-.upload_box .background,
-.btn_options .btn_option {
-    transition: var(--transition);
-    transition-property: background-color;
-}
-
-.btn_w,
-.btn:not(.reload_ui, .link_btn) {
-    transition: var(--transition);
-    transition-property: opacity, background-color;
-}
-
-.link,
-.link_btn {
-    transition: var(--transition);
-    transition-property: color;
-
-    &:active {
-        transition: none;
-    }
-}
-
-.btn.icon_btn,
-.link.svg {
-    svg {
-        transition: var(--transition);
-        transition-property: fill;
-
-        &:active {
-            transition: none;
-        }
-    }
-}
-
-.color_picker_w input {
-    transition: var(--transition) !important;
-    transition-property: background-color !important;
-}
-
-.pcr-last-color,
-.pcr-result {
-    transition: none !important;
-}
+/* stylelint-disable selector-class-pattern */
+
+.loading_screen,
+.input_item,
+.input_w,
+.checkbox .box svg,
+.color_picker_w,
+.palette_w,
+.color_help_w,
+.offers {
+    transition: var(--transition);
+    transition-property: opacity;
+}
+
+.upload_box .background {
+    transition: var(--transition);
+    transition-property: background-color;
+}
+
+.btn_w,
+.btn:not(.reload_ui, .link_btn) {
+    transition: var(--transition);
+    transition-property: opacity, background-color;
+}
+
+.link,
+.link_btn,
+.help .link {
+    transition: var(--transition);
+    transition-property: color;
+
+    &:active {
+        transition: none;
+    }
+}
+
+.btn.icon_btn,
+.link.svg {
+    svg {
+        transition: var(--transition);
+        transition-property: fill;
+
+        &:active {
+            transition: none;
+        }
+    }
+}
+
+.color_picker_w input {
+    transition: var(--transition) !important;
+    transition-property: background-color !important;
+}
+
+.pcr-last-color,
+.pcr-result {
+    transition: none !important;
+}

package/scss/shared/upload_box.scss

@@ -1,12 +1,15 @@
-$upload_box_text_z_index: 2;
-$upload_box_loading_animation_size: 40px;
+@use 'vars';
+@use 'mixins';
+
+$text_z_index: 2;
+$loading_animation_size: 40px;
 $backgrond_margin: 2px;
 $backgrond_dim_offset: 2px * 2;
 $status_msg_offset: 5px;
 
 .input_item {
     .upload_box {
-        @include border_transparent;
+        @include mixins.border_transparent;
 
         position: relative;
         height: 104px;
@@ -16,28 +19,32 @@ $status_msg_offset: 5px;
         outline-offset: -3px;
 
         .what_to_do_msg {
-            @include center_translate;
+            @include mixins.center_translate;
 
             position: absolute;
-            padding-right: $gap;
-            padding-left: $gap;
-            z-index: $upload_box_text_z_index;
+            padding-right: vars.$gap;
+            padding-left: vars.$gap;
+            z-index: $text_z_index;
             width: 100%;
             box-sizing: border-box;
+
+            .link_btn {
+                display: unset;
+            }
         }
 
         .browse {
             display: inline;
-            font-size: $font_main;
+            font-size: vars.$font_main;
             opacity: 1 !important; // needed to keep default color when element is is_enabled
         }
 
         .status_msg {
             position: absolute;
             width: 100%;
-            font-size: $font_small;
+            font-size: vars.$font_small;
             margin-bottom: $status_msg_offset;
-            z-index: $upload_box_text_z_index;
+            z-index: $text_z_index;
 
             &.filenames {
                 align-self: start;
@@ -62,8 +69,7 @@ $status_msg_offset: 5px;
 
             &.loading {
                 animation: move 450ms linear infinite;
-                background-size: $upload_box_loading_animation_size
-                    $upload_box_loading_animation_size;
+                background-size: $loading_animation_size $loading_animation_size;
             }
         }
     }