@loftyshaky/shared 0.0.40 → 0.0.43

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

@@ -1,244 +1,259 @@
-/* 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 {
-                /* stylelint-disable-next-line function-parentheses-newline-inside */
-                background-image: repeating-linear-gradient(-45deg,
-                $gaq,
-                $gaq 14px,
-                $qgp 14px,
-                $qgp 28px);  /* stylelint-disable-line function-parentheses-newline-inside */
-            }
-        }
-    }
-
-    .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;
-}
+/* 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;
+    }
+}
+
+.help_btn svg {
+    fill: $lpe;
+}
+
+body {
+    background-color: $gaq;
+
+    .btn {
+        &.text {
+            outline-color: $hev;
+            background-color: $gaq;
+
+            &:hover {
+                background-color: $qgp;
+            }
+        }
+
+        &.icon {
+            background-color: transparent;
+
+            &:not(:first-child) {
+                margin-left: $gap;
+            }
+
+            svg {
+                display: block;
+                fill: $lpe;
+            }
+        }
+    }
+}
+
+.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;
+        }
+    }
+}
+
+.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 {
+                /* stylelint-disable-next-line function-parentheses-newline-inside */
+                background-image: repeating-linear-gradient(-45deg,
+                $gaq,
+                $gaq 14px,
+                $qgp 14px,
+                $qgp 28px);  /* stylelint-disable-line function-parentheses-newline-inside */
+            }
+        }
+    }
+
+    .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,51 +1,52 @@
-/* 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;
-}
+/* 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 .btn.icon: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/transitions.scss

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