@loftyshaky/shared-app 2.1.0 → 2.7.0

package/scss/shared/themes/colors/ruby.scss

@@ -0,0 +1,55 @@
+@use '../../vars';
+
+$theme_color_ynq: white;
+$theme_color_jqv: rgb(255 255 255 / 0.1%);
+$theme_color_tdh: #67ff5f;
+$theme_color_udj: #19f4ff;
+
+:root {
+    --htc: #{$theme_color_ynq};
+    --gaq: #efefef;
+    --tbn: #{vars.$glass_color};
+    --gqb: linear-gradient(128deg, #ad1734 0%, #97286a 100%);
+    --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: #{$theme_color_ynq};
+    --rbp: #{vars.$black};
+    --tgp: #{$theme_color_ynq};
+    --mdc: #a9a9a9;
+    --yos: #42b326;
+    --nep: #90efff;
+    --htm: #ff974d;
+    --qgp: #1f90ff;
+    --hyv: #89ff84;
+    --ycp: #fbff12;
+    --iub: #2e8cff;
+    --cop: #{$theme_color_tdh};
+    --yun: #14bf0a;
+    --ptn: #1a44ff;
+    --dwk: #d046e9;
+    --uzf: #4bfcff;
+    --hap: #f15f41;
+    --rqb: #ff8513;
+    --thm: #ffa78f;
+    --suc: #d0111a;
+    --pxd: #fff900;
+    --ksu: #{$theme_color_tdh};
+    --upd: #{$theme_color_udj};
+    --fpw: #{$theme_color_udj};
+    --dfp: #c71538;
+    --pgs: #{$theme_color_ynq};
+    --tdu: rgb(255 141 34 / 50%);
+    --hyp: rgb(13 255 0 / 40%);
+    --dlf: rgb(0 191 255 / 50%);
+    --nqp: rgb(255 84 169 / 99%);
+    --hgb: rgb(255 77 85 / 99%);
+    --beu: rgb(255 255 255 / 75%);
+}

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

@@ -1,53 +1,61 @@
-$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: $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;
-$thm: $theme_color_yhn;
-$suc: $theme_color_yhn;
-$pxd: $theme_color_kxn;
-$ksu: $theme_color_tjn;
-$upd: $theme_color_bvc;
-$fpw: $theme_color_wnc;
-$dfp: #0f1721;
-$nqp: $theme_color_gsl;
-$hgb: $theme_color_gsl;
-$beu: rgb(0 0 0 / 90%);
+$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%);
+
+:root {
+    --htc: #{$theme_color_ynq};
+    --tbn: #{$theme_color_ynq};
+    --gqb: #{$theme_color_ytb};
+    --hfb: #{$theme_color_ytb};
+    --gvb: #{$theme_color_ytb};
+    --npw: #{$theme_color_ytb};
+    --hcx: #{$theme_color_ytb};
+    --gaq: #{$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};
+    --tgp: #{$theme_color_kdc};
+    --mdc: #252525;
+    --yos: #{$theme_color_uvr};
+    --nep: #{$theme_color_uvr};
+    --htm: #583013;
+    --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};
+    --thm: #{$theme_color_yhn};
+    --suc: #{$theme_color_yhn};
+    --pxd: #{$theme_color_kxn};
+    --ksu: #{$theme_color_tjn};
+    --upd: #{$theme_color_bvc};
+    --fpw: #{$theme_color_bvc};
+    --dfp: #0f1721;
+    --pgs: white;
+    --tdu: #7b1a1f;
+    --hyp: #285d25;
+    --dlf: #144378;
+    --nqp: #{$theme_color_gsl};
+    --hgb: #{$theme_color_gsl};
+    --beu: rgb(0 0 0 / 90%);
+}

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

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

package/scss/shared/themes/general/blaze_theme.scss

@@ -0,0 +1,7 @@
+@use '../../mixins';
+@use '../colors/blaze';
+@use 'template';
+
+body .main_2.settings {
+    @include mixins.glass;
+}

package/scss/shared/themes/general/clover_theme.scss

@@ -0,0 +1,7 @@
+@use '../../mixins';
+@use '../colors/clover';
+@use 'template';
+
+body .main_2.settings {
+    @include mixins.glass;
+}

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

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

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

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

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

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

package/scss/shared/themes/general/ruby_theme.scss

@@ -0,0 +1,7 @@
+@use '../../mixins';
+@use '../colors/ruby';
+@use 'template';
+
+body .main_2.settings {
+    @include mixins.glass;
+}

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,27 +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: $lpe;
+        stroke: var(--tgp);
     }
 }
 
 .help_btn svg {
-    fill: $lpe;
+    fill: var(--lpe);
+}
+
+body::before {
+    background: var(--gqb);
 }
 
 .main,
@@ -75,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 {
@@ -221,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,
@@ -258,30 +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) {
-    background: $gqb;
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-
     .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);
 }