@loftyshaky/shared-app 1.0.1 → 1.1.0

package/scss/shared/themes/colors/lavender.scss

@@ -0,0 +1,39 @@
+$theme_color_jqv: rgb(255 255 255 / 0.1%);
+
+$htc: white;
+$tbn: $glass_color;
+$gaq: #efefef;
+/* stylelint-disable-next-line max-line-length */
+$gqb: linear-gradient(45deg, rgb(52 15 189) 0%, rgb(225 5 34 / 0%) 70%) repeat scroll 0% 0%, linear-gradient(135deg, rgb(241 22 168) 10%, rgb(49 5 209 / 0%) 80%) repeat scroll 0% 0%, linear-gradient(190deg, rgb(26 211 208) 10%, rgb(10 219 216 / 0%) 80%) repeat scroll 0% 0%, rgb(0 0 0 / 0%) linear-gradient(315deg, rgb(163 34 203) 100%, rgb(9 245 5 / 0%) 70%) repeat scroll 0% 0%;
+$hfb: transparent;
+$gvb: rgb(255 255 255 / 36%);
+$npw: rgb(255 255 255 / 20%);
+$hcx: $theme_color_jqv;
+$hev: #bbb;
+$hyn: rgb(255 255 255 / 50%);
+$fxm: rgb(255 255 255 / 37.5%);
+$nur: rgb(255 255 255 / 20.8%);
+$yuv: rgb(255 255 255 / 60%);
+$vqo: $theme_color_jqv;
+$lpe: white;
+$rbp: $black;
+$mdc: #d9d9d9;
+$yos: #39c2db;
+$nep: #90efff;
+$htm: #ffa96c;
+$qgp: #3ea559;
+$hyv: #66ff8e;
+$ycp: #19f4ff;
+$iub: #2e8cff;
+$cop: #4bff1f;
+$yun: #14bf0a;
+$ptn: #20f;
+$dwk: #d046e9;
+$uzf: #fbff12;
+$hap: #f17442;
+$rqb: #ff471a;
+$suc: #d0111a;
+$dfp: #842fa9;
+$nqp: rgb(244 96 62 / 99%);
+$hgb: rgb(255 77 85 / 99%);
+$beu: rgb(255 255 255 / 75%);

package/scss/shared/themes/colors/light.scss

@@ -1,14 +1,49 @@
-$htc: white;
-$gaq: #efefef;
-$hev: #bbb;
-$lpe: $black;
-$yos: #90efff;
+$theme_color_ynq: white;
+$theme_color_ytb: #efefef;
+$theme_color_hbt: #bbb;
+$theme_color_kdc: $black;
+$theme_color_ecm: #66ff8e;
+$theme_color_uvr: #90efff;
+$theme_color_kxn: #2e8cff;
+$theme_color_tjn: #14bf0a;
+$theme_color_bvc: #d046e9;
+$theme_color_wnc: #f17442;
+$theme_color_yhn: #d0111a;
+$theme_color_gsl: rgb(255 77 85 / 99%);
+
+$htc: $theme_color_ynq;
+$tbn: $theme_color_ynq;
+$gaq: $theme_color_ytb;
+$gqb: $theme_color_ytb;
+$hfb: $theme_color_ytb;
+$gvb: $theme_color_ytb;
+$npw: $theme_color_ytb;
+$hcx: $theme_color_ytb;
+$hev: $theme_color_hbt;
+$hyn: $theme_color_hbt;
+$fxm: $theme_color_hbt;
+$nur: $theme_color_hbt;
+$yuv: $theme_color_hbt;
+$vqo: $theme_color_hbt;
+$lpe: $theme_color_kdc;
+$rbp: $theme_color_kdc;
+$mdc: #878787;
+$yos: $theme_color_uvr;
+$nep: $theme_color_uvr;
 $htm: #ffa96c;
-$qgp: #66ff8e;
-$ycp: #2e8cff;
-$cop: #14bf0a;
-$ptn: #ca26dd;
-$uzf: #e8720c;
-$rqb: #d0111a;
+$qgp: $theme_color_ecm;
+$hyv: $theme_color_ecm;
+$ycp: $theme_color_kxn;
+$iub: $theme_color_kxn;
+$cop: $theme_color_tjn;
+$yun: $theme_color_tjn;
+$ptn: $theme_color_bvc;
+$dwk: $theme_color_bvc;
+$uzf: $theme_color_wnc;
+$hap: $theme_color_wnc;
+$rqb: $theme_color_yhn;
+$suc: $theme_color_yhn;
 $dfp: #a2d4ff;
-$nqp: rgb(255 77 85 / 99%);
+$nqp: $theme_color_gsl;
+$hgb: $theme_color_gsl;
+$beu: rgb(255 255 255 / 75%);

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

@@ -1,14 +1,49 @@
-$htc: #0a0e14;
-$gaq: #000308;
-$hev: #1f2c40;
-$lpe: #e5e5e5;
-$yos: #0e2e54;
+$theme_color_ynq: #0a0e14;
+$theme_color_ytb: #000308;
+$theme_color_hbt: #1f2c40;
+$theme_color_kdc: #e5e5e5;
+$theme_color_ecm: #133e10;
+$theme_color_uvr: #0e2e54;
+$theme_color_kxn: #2176de;
+$theme_color_tjn: #089200;
+$theme_color_bvc: #af22bf;
+$theme_color_wnc: #c96b00;
+$theme_color_yhn: #b1131a;
+$theme_color_gsl: rgb(120 30 34 / 99%);
+
+$htc: $theme_color_ynq;
+$tbn: $theme_color_ynq;
+$gaq: $theme_color_ytb;
+$gqb: $theme_color_ytb;
+$hfb: $theme_color_ytb;
+$gvb: $theme_color_ytb;
+$npw: $theme_color_ytb;
+$hcx: $theme_color_ytb;
+$hev: $theme_color_hbt;
+$hyn: $theme_color_hbt;
+$fxm: $theme_color_hbt;
+$nur: $theme_color_hbt;
+$yuv: $theme_color_hbt;
+$vqo: $theme_color_hbt;
+$lpe: $theme_color_kdc;
+$rbp: $theme_color_kdc;
+$mdc: #8d8d8d;
+$yos: $theme_color_uvr;
+$nep: $theme_color_uvr;
 $htm: #583013;
-$qgp: #133e10;
-$ycp: #2176de;
-$cop: #089200;
-$ptn: #af22bf;
-$uzf: #c96b00;
-$rqb: #b1131a;
+$qgp: $theme_color_ecm;
+$hyv: $theme_color_ecm;
+$ycp: $theme_color_kxn;
+$iub: $theme_color_kxn;
+$cop: $theme_color_tjn;
+$yun: $theme_color_tjn;
+$ptn: $theme_color_bvc;
+$dwk: $theme_color_bvc;
+$uzf: $theme_color_wnc;
+$hap: $theme_color_wnc;
+$rqb: $theme_color_yhn;
+$suc: $theme_color_yhn;
 $dfp: #0f1721;
-$nqp: rgb(120 30 34 / 99%);
+$nqp: $theme_color_gsl;
+$hgb: $theme_color_gsl;
+$beu: rgb(0 0 0 / 90%);

package/scss/shared/themes/general/aqua_theme.scss

@@ -0,0 +1,9 @@
+@import '../../vars';
+@import '../../mixins';
+@import '../../functions';
+@import '../colors/aqua';
+@import 'template';
+
+body .main_2.settings {
+    @include glass;
+}

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

@@ -1,7 +1,9 @@
 @import '../../vars';
+@import '../../mixins';
+@import '../../functions';
 @import '../colors/dark';
 @import 'template';
 
 .main_2 {
-    box-shadow: rgb(0 115 255 / 100%) 0 0 33px, rgb(255 255 255 / 40%) 0 0 10px;
+    box-shadow: $blue_neon_dark;
 }

package/scss/shared/themes/general/lavender_theme.scss

@@ -0,0 +1,9 @@
+@import '../../vars';
+@import '../../mixins';
+@import '../../functions';
+@import '../colors/lavender';
+@import 'template';
+
+body .main_2.settings {
+    @include glass;
+}

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

@@ -1,7 +1,9 @@
 @import '../../vars';
+@import '../../mixins';
+@import '../../functions';
 @import '../colors/light';
 @import 'template';
 
 .main_2 {
-    box-shadow: rgb(0 0 0 / 30%) 0 0 30px, rgb(0 0 0 / 30%) 0 4px 8px;
+    box-shadow: $black_shadow;
 }

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

@@ -2,6 +2,10 @@
 
 @import 'template_focus';
 
+@mixin link_colors_standard {
+    @include link_colors($ycp, $ptn, $cop, $uzf);
+}
+
 ::selection {
     background-color: $nqp !important;
     color: white !important;
@@ -10,17 +14,16 @@
 :not(html, body, select) {
     &::-webkit-scrollbar-corner,
     &::-webkit-resizer {
-        background-color: $hev;
-        border-color: $hev;
+        background-color: $hyn;
+        border-color: $hyn;
     }
 
     &::-webkit-scrollbar-track {
-        background-color: $gaq;
-        border-color: $gaq;
+        background-color: $npw;
     }
 
     &::-webkit-scrollbar-thumb {
-        background-color: $hev;
+        background-color: $fxm;
     }
 
     &::-webkit-scrollbar-thumb:hover {
@@ -29,7 +32,27 @@
 
     &::-webkit-scrollbar-track:horizontal,
     &::-webkit-scrollbar-track:vertical {
-        border-color: $hev;
+        border-color: $fxm;
+    }
+}
+
+.link {
+    @include link_colors_standard();
+}
+
+.link_btn {
+    @include link_colors_standard();
+}
+
+textarea {
+    &::-webkit-scrollbar-corner,
+    &::-webkit-resizer {
+        background-color: $nur;
+        border-color: $vqo;
+    }
+
+    &::-webkit-scrollbar-track {
+        background-color: $hcx;
     }
 }
 
@@ -48,29 +71,29 @@
 }
 
 body {
-    background-color: $gaq;
+    background: $gqb;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+
+    .main_2 {
+        background-color: $hfb;
+    }
 
     .btn {
         &.text {
-            outline-color: $hev;
-            background-color: $gaq;
+            background-color: $npw;
+            outline-color: $hyn;
 
             &:hover {
                 background-color: $qgp;
             }
         }
+    }
 
-        &.icon {
-            background-color: transparent;
-
-            &:not(:first-child) {
-                margin-left: $gap;
-            }
-
-            svg {
-                display: block;
-                fill: $lpe;
-            }
+    .btn,
+    .link.svg {
+        svg {
+            fill: $lpe;
         }
     }
 }
@@ -84,18 +107,41 @@ textarea {
 }
 
 hr {
-    background-color: $hev;
+    background-color: $hyn;
 }
 
-.sections {
-    background-color: $htc;
+.btn_options {
+    background-color: $npw;
+    border-color: $hyn;
+
+    .btn_option {
+        hr {
+            background-color: $hyn;
+        }
+
+        &:hover {
+            background-color: $qgp;
+        }
+    }
+}
+
+.sections_and_offers {
+    background-color: $tbn;
+
+    .offers {
+        border-color: $hyn;
+    }
+}
+
+.sections .section_name {
+    border-color: $hyn;
 }
 
 .section_btns {
-    background-color: $gaq;
+    background-color: $gvb;
 
     .section_btn {
-        background-color: $gaq;
+        background-color: $hfb;
 
         &.selected::before {
             background-color: $ycp;
@@ -109,15 +155,19 @@ hr {
 
 .input_item {
     .inset_border::before {
-        outline-color: $hev;
+        outline-color: $hyn;
     }
 
     .input {
-        background-color: $gaq;
+        background-color: $npw;
+
+        &::placeholder {
+            color: $mdc;
+        }
     }
 
     .btn.text_input {
-        background-color: $gaq;
+        background-color: $npw;
 
         svg {
             fill: $lpe;
@@ -126,13 +176,20 @@ hr {
 
     .palette {
         background-color: $htc;
+        color: $rbp;
     }
 
     .input_w {
-        .visualization,
+        .visualization {
+            background-color: $npw;
+        }
+
+        .palette_visualization_w.inset_border::before {
+            outline-color: $hev;
+        }
+
         .palette_visualization {
-            border-color: $hev;
-            background-color: $gaq;
+            background-color: $npw;
         }
     }
 
@@ -140,6 +197,10 @@ hr {
         background-image: linear-gradient(45deg, transparent 50%, $lpe 50%),
             linear-gradient(135deg, $lpe 50%, transparent 50%),
             linear-gradient(to right, $lpe, $lpe);
+
+        option {
+            color: $rbp;
+        }
     }
 
     .range {
@@ -153,14 +214,14 @@ hr {
             }
 
             &::-webkit-slider-runnable-track {
-                box-shadow: inset 0 0 0 1px $hev, inset -1px 0 0 0 $hev;
+                box-shadow: inset 0 0 0 1px $hyn;
             }
         }
     }
 
     .checkbox .box {
-        outline-color: $hev;
-        background-color: $gaq;
+        outline-color: $hyn;
+        background-color: $npw;
 
         svg {
             fill: $lpe;
@@ -168,11 +229,11 @@ hr {
     }
 
     .upload_box {
-        outline-color: $hev;
+        outline-color: $hyn;
 
         .background {
             &.upload_box_idle {
-                background-color: $gaq;
+                background-color: $npw;
             }
 
             &.upload_box_hover {
@@ -180,27 +241,32 @@ hr {
             }
 
             &.loading {
+                background-color: transparent;
                 /* stylelint-disable-next-line function-parentheses-newline-inside */
                 background-image: repeating-linear-gradient(-45deg,
-                $gaq,
-                $gaq 14px,
+                $npw,
+                $npw 14px,
                 $qgp 14px,
                 $qgp 28px);  /* stylelint-disable-line function-parentheses-newline-inside */
             }
         }
     }
 
+    &.color .link_btn {
+        @include link_colors($iub, $dwk, $yun, $hap);
+    }
+
     .color_picker_w {
         *:not(.pcr-last-color, .pcr-current-color) {
-            color: $lpe !important;
+            color: $rbp !important;
         }
 
         input {
-            background-color: $gaq !important;
+            background-color: $npw !important;
             outline-color: $hev !important;
 
             &:hover:not(.pcr-result, .active) {
-                background-color: $qgp !important;
+                background-color: $hyv !important;
             }
         }
     }
@@ -218,40 +284,16 @@ hr {
     }
 
     .pcr-type.active {
-        background-color: $yos !important;
+        background-color: $nep !important;
     }
 }
 
-.link {
-    color: $ycp;
-
-    &:visited {
-        color: $ptn;
-    }
-
-    &:hover {
-        color: $cop;
-    }
-
-    &:active {
-        color: $uzf;
-    }
+.offer img {
+    border-color: $hyn;
 }
 
-.link_btn {
-    color: $ycp;
-
-    &:visited {
-        color: $ptn;
-    }
-
-    &:hover {
-        color: $cop;
-    }
-
-    &:active {
-        color: $uzf;
-    }
+.input_error {
+    color: $rqb;
 }
 
 .ext_version {

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

@@ -6,45 +6,57 @@
             outline-color: $cop;
         }
 
-        &.is_in_warn_state:not(.select)::before {
+        &.is_in_warn_state:not(.select)::before,
+        &.is_in_warn_state.upload_box {
             outline-color: $rqb;
         }
     }
 
-    .visualization_w.opened .visualization,
+    .visualization_w.opened .visualization {
+        outline-color: $ycp;
+    }
+
     .palette_visualization_w.opened .palette_visualization,
     .palette_visualization_w.selected .palette_visualization {
-        outline-color: $ycp;
+        outline-color: $iub;
     }
 }
 
 .keyboard .btn.text_input::before,
 body.keyboard .btn.text:focus,
 .keyboard .help_btn:focus,
-.keyboard .btn.icon:focus,
+.keyboard .icon_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 .input_item .palette_visualization_w .palette_visualization:focus {
+.keyboard .btn_options .btn_option:focus {
     outline-color: $ptn;
 }
 
+.keyboard .input_item.color .btn.text:focus {
+    outline-color: $dwk;
+}
+
+.keyboard .input_item .palette_visualization_w .palette_visualization:focus {
+    outline-color: $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: $ptn !important;
+    outline-color: $dwk !important;
 }
 
 .input_item .pcr-result:focus {
-    outline-color: $cop !important;
+    outline-color: $yun !important;
 }
 
 .keyboard .input_item .pcr-result:focus {
-    outline-color: $ptn !important;
+    outline-color: $dwk !important;
 }
 
 .keyboard .section_btn:not(.selected):focus {

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

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

package/scss/shared/transitions.scss

@@ -1,20 +1,25 @@
 /* stylelint-disable selector-class-pattern */
 
 .loading_screen,
+.input_item,
+.input_w,
 .checkbox .box svg,
 .color_picker_w,
 .palette_w,
-.color_help_w {
+.color_help_w,
+.btn_options,
+.offers {
     transition: var(--transition);
     transition-property: opacity;
 }
 
-.upload_box .background {
+.upload_box .background,
+.btn_options .btn_option {
     transition: var(--transition);
     transition-property: background-color;
 }
 
-.btn:not(.reload_ui, .link_btn) {
+.btn:not(.reload_ui, .link_btn), {
     transition: var(--transition);
     transition-property: opacity, background-color;
 }
@@ -23,6 +28,22 @@
 .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 {