@loftyshaky/shared 0.0.30 → 0.0.34

package/scss/shared/themes/colors/very_dark.scss

@@ -1,17 +1,17 @@
-$gaq: black;
-$nrf: #1d293b;
-$yos: #262b33;
-$htc: #0d0d0d;
-$lpe: #e5e5e5;
-$nqp: rgba(120, 30, 34, 0.99);
-$uvi: #1f1f1f;
-$cop: #1d4025;
-$pdv: #e1e56a;
-$pec: #e57a7a;
-$bvs: #6be565;
-$nmy: #dc85e5;
-$dfp: #121a21;
-$myo: #089200;
-$ptn: #bd141c;
-$uzf: #af22bf;
-$ycp: #2176de;
+$gaq: #000308;
+$nrf: #1d293b;
+$qhv: #264061;
+$yos: #262c33;
+$htc: #0a0e14;
+$lpe: #e5e5e5;
+$nqp: rgba(120, 30, 34, 0.99);
+$cop: #1d4025;
+$pdv: #e1e56a;
+$pec: #e57a7a;
+$bvs: #6be565;
+$nmy: #dc85e5;
+$dfp: #0f1721;
+$myo: #089200;
+$ptn: #bd141c;
+$uzf: #af22bf;
+$ycp: #2176de;

package/scss/shared/themes/general/dark_theme.scss

@@ -1,7 +1,7 @@
-@import '../../vars';
-@import '../colors/dark';
-@import 'template';
-
-.main_2 {
-    box-shadow: rgba(0, 106, 255, 0.7) 0 0 33px, rgba(255, 255, 255, 0.4) 0 0 10px;
-}
+@import '../../vars';
+@import '../colors/dark';
+@import 'template';
+
+.main_2 {
+    box-shadow: rgb(0, 115, 255, 70%) 0 0 33px, rgba(255, 255, 255, 0.4) 0 0 10px;
+}

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,212 +1,241 @@
-/* stylelint-disable selector-class-pattern */
-
-@import 'template_focus';
-
-::selection {
-    background-color: $nqp !important;
-    color: white !important;
-}
-
-.main {
-    border-color: $lpe;
-
-    ::-webkit-scrollbar-thumb {
-        background-color: $uvi;
-    }
-
-    ::-webkit-scrollbar-track {
-        background-color: $gaq;
-    }
-
-    ::-webkit-scrollbar-corner,
-    ::-webkit-resizer {
-        background-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;
-        }
-    }
-
-    .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;
+}
+
+::-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 {
+        outline-color: $lpe;
+        background-color: $gaq;
+
+        &:hover {
+            background-color: $yos;
+        }
+    }
+}
+
+.main,
+button,
+select,
+input,
+textarea {
+    color: $lpe;
+}
+
+hr {
+    background-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 {
+        outline-color: $lpe;
+        background-color: $gaq;
+
+        svg {
+            fill: $lpe;
+        }
+    }
+
+    .upload_box {
+        outline-color: $lpe;
+
+        .background {
+            &.upload_box_idle {
+                background-color: $nrf;
+            }
+
+            &.upload_box_hover {
+                background-color: $qhv;
+            }
+
+            &.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;
+}

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

@@ -1,54 +1,48 @@
-/* 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 .input_item .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: $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 .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;
+}

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.7) 0 0 36px, rgba(255, 255, 255, 0.4) 0 0 10px;
+}