@loftyshaky/shared 0.0.32 → 0.0.36

package/scss/shared/themes/general/light_theme.scss

@@ -1,7 +1,7 @@
-@import '../../vars';
-@import '../colors/light';
-@import 'template';
-
-.main_2 {
-    box-shadow: rgba(0, 0, 0, 0.3) 0 0 30px, rgba(0, 0, 0, 0.3) 0 4px 8px;
-}
+@import '../../vars';
+@import '../colors/light';
+@import 'template';
+
+.main_2 {
+    box-shadow: rgba(0, 0, 0, 0.3) 0 0 30px, rgba(0, 0, 0, 0.3) 0 4px 8px;
+}

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

@@ -1,229 +1,243 @@
-/* stylelint-disable selector-class-pattern */
-
-@import 'template_focus';
-
-::selection {
-    background-color: $nqp !important;
-    color: white !important;
-}
-
-::-webkit-scrollbar-thumb {
-    background-color: $lpe;
-}
-
-::-webkit-scrollbar-track {
-    background-color: $gaq;
-    border-color: $lpe;
-}
-
-::-webkit-scrollbar-corner,
-::-webkit-resizer {
-    background-color: $lpe;
-}
-
-.main {
-    border-color: $lpe;
-}
-
-.loading_screen {
-    &.main {
-        background-color: $dfp;
-    }
-
-    svg {
-        stroke: $lpe;
-    }
-}
-
-body {
-    background-color: $gaq;
-
-    .btn.text {
-        background-color: $gaq;
-
-        &:hover {
-            background-color: $yos;
-        }
-    }
-}
-
-.main,
-button,
-select,
-input,
-textarea {
-    color: $lpe;
-}
-
-.sections {
-    background-color: $htc;
-}
-
-.section_btns {
-    background-color: $nrf;
-
-    .filler::after {
-        background-color: $lpe;
-    }
-}
-
-.section_btn {
-    border-color: $lpe;
-    background-color: $nrf;
-
-    &.selected {
-        background-color: $htc;
-    }
-
-    &:not(.selected):hover {
-        background-color: $cop;
-    }
-
-    &::after {
-        background-color: $lpe;
-    }
-}
-
-.help_btn svg {
-    fill: $lpe;
-}
-
-.input_item {
-    .input {
-        background-color: $gaq;
-    }
-
-    .btn.text_input {
-        background-color: $gaq;
-
-        svg {
-            fill: $lpe;
-        }
-    }
-
-    .palette {
-        background-color: $htc;
-    }
-
-    .input_w {
-        .visualization,
-        .palette_visualization {
-            border-color: $lpe;
-            background-color: $gaq;
-        }
-    }
-
-    select {
-        background-image: linear-gradient(45deg, transparent 50%, $lpe 50%),
-            linear-gradient(135deg, $lpe 50%, transparent 50%),
-            linear-gradient(to right, $lpe, $lpe);
-    }
-
-    .range {
-        .lower_fill {
-            background-color: $lpe;
-        }
-
-        .input {
-            &::-webkit-slider-thumb {
-                background-color: $lpe;
-            }
-
-            &::-webkit-slider-runnable-track {
-                outline-color: $lpe;
-            }
-        }
-    }
-
-    .checkbox .box {
-        background-color: $gaq;
-
-        svg {
-            fill: $lpe;
-        }
-    }
-
-    .upload_box {
-        border-color: $lpe;
-
-        .background {
-            background-color: $nrf;
-
-            &.loading {
-                background-image: repeating-linear-gradient(-45deg,
-                $nrf,
-                $nrf 14px,
-                $gaq 14px,
-                $gaq 28px);
-            }
-        }
-    }
-
-    .color_picker_w {
-        *:not(.pcr-last-color):not(.pcr-current-color) {
-            color: $lpe !important;
-        }
-
-        input {
-            background-color: $gaq !important;
-            border-color: $lpe !important;
-
-            &:hover:not(.pcr-result):not(.active) {
-                background-color: $yos !important;
-            }
-        }
-    }
-
-    .pcr-app {
-        border-color: $lpe !important;
-        background-color: $htc !important;
-    }
-
-    .pcr-color-preview,
-    .pcr-palette,
-    .pcr-slider,
-    .pcr-picker,
-    .pcr-result {
-        border-color: $lpe !important;
-    }
-
-    .pcr-type.active {
-        background-color: $nrf !important;
-    }
-}
-
-.link {
-    color: $pdv;
-
-    &:visited {
-        color: $pec;
-    }
-
-    &:hover {
-        color: $bvs;
-    }
-
-    &:active {
-        color: $nmy;
-    }
-}
-
-.link_btn {
-    color: $pdv;
-
-    &:visited {
-        color: $pec;
-    }
-
-    &:hover {
-        color: $bvs;
-    }
-
-    &:active {
-        color: $nmy;
-    }
-}
-
-.ext_version {
-    color: $lpe;
-}
+/* stylelint-disable selector-class-pattern */
+
+@import 'template_focus';
+
+::selection {
+    background-color: $nqp !important;
+    color: white !important;
+}
+
+:not(html):not(body):not(select) {
+    &::-webkit-scrollbar-corner,
+    &::-webkit-resizer {
+        background-color: $hev;
+        border-color: $hev;
+    }
+
+    &::-webkit-scrollbar-track {
+        background-color: $gaq;
+        border-color: $gaq;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: $hev;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+        background-color: $lpe;
+    }
+
+    &::-webkit-scrollbar-track:horizontal,
+    &::-webkit-scrollbar-track:vertical {
+        border-color: $hev;
+    }
+}
+
+.loading_screen {
+    &.main {
+        background-color: $dfp;
+    }
+
+    svg {
+        stroke: $lpe;
+    }
+}
+
+body {
+    background-color: $gaq;
+
+    .btn.text {
+        outline-color: $hev;
+        background-color: $gaq;
+
+        &:hover {
+            background-color: $qgp;
+        }
+    }
+}
+
+.main,
+button,
+select,
+input,
+textarea {
+    color: $lpe;
+}
+
+hr {
+    background-color: $hev;
+}
+
+.sections {
+    background-color: $htc;
+}
+
+.section_btns {
+    background-color: $gaq;
+
+    .section_btn {
+        background-color: $gaq;
+
+        &.selected::before {
+            background-color: $ycp;
+        }
+
+        &:not(.selected):hover::before {
+            background-color: $cop;
+        }
+    }
+}
+
+.help_btn svg {
+    fill: $lpe;
+}
+
+.input_item {
+    .inset_border::before {
+        outline-color: $hev;
+    }
+
+    .input {
+        background-color: $gaq;
+    }
+
+    .btn.text_input {
+        background-color: $gaq;
+
+        svg {
+            fill: $lpe;
+        }
+    }
+
+    .palette {
+        background-color: $htc;
+    }
+
+    .input_w {
+        .visualization,
+        .palette_visualization {
+            border-color: $hev;
+            background-color: $gaq;
+        }
+    }
+
+    select {
+        background-image: linear-gradient(45deg, transparent 50%, $lpe 50%),
+            linear-gradient(135deg, $lpe 50%, transparent 50%),
+            linear-gradient(to right, $lpe, $lpe);
+    }
+
+    .range {
+        .lower_fill {
+            background-color: $lpe;
+        }
+
+        .input {
+            &::-webkit-slider-thumb {
+                background-color: $lpe;
+            }
+
+            &::-webkit-slider-runnable-track {
+                box-shadow: inset 0 0 0 1px $hev, inset -1px 0 0 0 $hev;
+            }
+        }
+    }
+
+    .checkbox .box {
+        outline-color: $hev;
+        background-color: $gaq;
+
+        svg {
+            fill: $lpe;
+        }
+    }
+
+    .upload_box {
+        outline-color: $hev;
+
+        .background {
+            &.upload_box_idle {
+                background-color: $gaq;
+            }
+
+            &.upload_box_hover {
+                background-color: $qgp;
+            }
+
+            &.loading {
+                background-image: repeating-linear-gradient(-45deg,
+                $gaq,
+                $gaq 14px,
+                $qgp 14px,
+                $qgp 28px);
+            }
+        }
+    }
+
+    .color_picker_w {
+        *:not(.pcr-last-color):not(.pcr-current-color) {
+            color: $lpe !important;
+        }
+
+        input {
+            background-color: $gaq !important;
+            outline-color: $hev !important;
+
+            &:hover:not(.pcr-result):not(.active) {
+                background-color: $qgp !important;
+            }
+        }
+    }
+
+    .pcr-app {
+        background-color: $htc !important;
+    }
+
+    .pcr-color-preview,
+    .pcr-palette,
+    .pcr-slider,
+    .pcr-picker,
+    .pcr-result {
+        border-color: $hev !important;
+    }
+
+    .pcr-type.active {
+        background-color: $yos !important;
+    }
+}
+
+.link {
+    color: $ycp;
+
+    &:visited {
+        color: $ptn;
+    }
+
+    &:hover {
+        color: $cop;
+    }
+
+    &:active {
+        color: $uzf;
+    }
+}
+
+.link_btn {
+    color: $ycp;
+
+    &:visited {
+        color: $ptn;
+    }
+
+    &:hover {
+        color: $cop;
+    }
+
+    &:active {
+        color: $uzf;
+    }
+}
+
+.ext_version {
+    color: $lpe;
+}

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

@@ -1,54 +1,51 @@
-/* stylelint-disable selector-class-pattern */
-
-.btn.text,
-.input_item .checkbox .box {
-    outline-color: $lpe;
-    background-color: $gaq;
-}
-
-.input_item {
-    .input_w {
-        &.is_in_focus_state:not(.select)::before {
-            outline-color: $myo;
-        }
-
-        &.is_in_warn_state:not(.select)::before {
-            outline-color: $ptn;
-        }
-    }
-
-    .visualization_w.opened .visualization,
-    .palette_visualization_w.opened .palette_visualization,
-    .palette_visualization_w.selected .palette_visualization {
-        outline-color: $ycp;
-    }
-}
-
-.keyboard .btn.text_input::before,
-body.keyboard .btn.text:focus,
-.keyboard .input_item .help_btn:focus,
-.keyboard .input_item .checkbox .box:focus,
-.keyboard .link:focus,
-.keyboard .link_btn:focus,
-.keyboard .input_item .input_w:not(.text):not(.textarea).is_in_focus_state::before,
-.keyboard .input_item.range .input.is_in_focus_state,
-.keyboard .input_item .visualization_w .visualization:focus,
-.keyboard .input_item .palette_visualization_w .palette_visualization:focus {
-    outline-color: $uzf;
-}
-
-.keyboard .input_item .pcr-palette:focus,
-.keyboard .input_item .pcr-slider:focus,
-.keyboard .input_item .pcr-picker:focus,
-.input_item .pcr-result:focus,
-.keyboard .input_item .color_picker_w input:not(.pcr-result):focus {
-    outline-color: $uzf !important;
-}
-
-.input_item .pcr-result:focus {
-    border-color: $uzf !important;
-}
-
-.keyboard .section_btn:not(.selected):focus {
-    box-shadow: inset 0 0 0 2px $uzf, inset -3px 0 0 0 $uzf;
-}
+/* stylelint-disable selector-class-pattern */
+
+.input_item {
+    .input_w {
+        &.is_in_focus_state:not(.select)::before {
+            outline-color: $cop;
+        }
+
+        &.is_in_warn_state:not(.select)::before {
+            outline-color: $ptn;
+        }
+    }
+
+    .visualization_w.opened .visualization,
+    .palette_visualization_w.opened .palette_visualization,
+    .palette_visualization_w.selected .palette_visualization {
+        outline-color: $ycp;
+    }
+}
+
+.keyboard .btn.text_input::before,
+body.keyboard .btn.text:focus,
+.keyboard .help_btn:focus,
+.keyboard .input_item .checkbox .box:focus,
+.keyboard .link:focus,
+.keyboard .link_btn:focus,
+.keyboard .input_item .input_w:not(.text):not(.textarea).is_in_focus_state::before,
+.keyboard .input_item.range .input.is_in_focus_state,
+.keyboard .input_item .visualization_w .visualization:focus,
+.keyboard .input_item .palette_visualization_w .palette_visualization:focus {
+    outline-color: $uzf;
+}
+
+.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: $uzf !important;
+}
+
+.input_item .pcr-result:focus {
+    outline-color: $cop !important;
+}
+
+.keyboard .input_item .pcr-result:focus {
+    outline-color: $uzf !important;
+}
+
+.keyboard .section_btn:not(.selected):focus {
+    box-shadow: inset 0 0 0 2px $uzf, inset -2px 0 0 0 $uzf;
+}

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

@@ -1,7 +1,7 @@
-@import '../../vars';
-@import '../colors/very_dark';
-@import 'template';
-
-.main_2 {
-    box-shadow: rgba(0, 102, 255, 0.7) 0 0 36px, rgba(255, 255, 255, 0.4) 0 0 10px;
-}
+@import '../../vars';
+@import '../colors/very_dark';
+@import 'template';
+
+.main_2 {
+    box-shadow: rgba(0, 102, 255, 0.85) 0 0 36px, rgba(255, 255, 255, 0.4) 0 0 10px;
+}

package/scss/shared/transitions.scss

@@ -1,30 +1,31 @@
-/* stylelint-disable selector-class-pattern */
-
-.loading_screen,
-.checkbox .box svg,
-.color_picker_w,
-.palette_w,
-.color_help_w {
-    transition: var(--transition);
-    transition-property: opacity;
-}
-
-.btn:not(.link_btn):not(.reload_ui) {
-    transition: var(--transition);
-    transition-property: background-color;
-}
-
-.link_btn {
-    transition: var(--transition);
-    transition-property: color;
-}
-
-.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,
+.checkbox .box svg,
+.color_picker_w,
+.palette_w,
+.color_help_w {
+    transition: var(--transition);
+    transition-property: opacity;
+}
+
+.btn:not(.link_btn):not(.reload_ui),
+.upload_box .background {
+    transition: var(--transition);
+    transition-property: background-color;
+}
+
+.link_btn {
+    transition: var(--transition);
+    transition-property: color;
+}
+
+.color_picker_w input {
+    transition: var(--transition) !important;
+    transition-property: background-color !important;
+}
+
+.pcr-last-color,
+.pcr-result {
+    transition: none !important;
+}