@loftyshaky/shared-app 1.0.2 → 1.2.0

package/scss/shared/mixins.scss

@@ -1,5 +1,11 @@
 $border_width_thick: 2px;
 
+@mixin hidden {
+    position: fixed !important;
+    visibility: hidden !important;
+    top: -99999px !important;
+}
+
 @mixin full_dims {
     width: 100%;
     height: 100%;
@@ -32,6 +38,14 @@ $border_width_thick: 2px;
     transform: translate(-50%, -50%);
 }
 
+@mixin center_horizontal_variable_width {
+    // max-width should be set
+    left: calc(-50vw + 50%);
+    right: calc(-50vw + 50%);
+    margin-left: auto;
+    margin-right: auto;
+}
+
 @mixin btn {
     background-color: transparent;
     outline: none;
@@ -51,7 +65,9 @@ $border_width_thick: 2px;
     outline: none;
 }
 
-$box_shadow_for_mixin: rgb(0 0 0 / 30%) 0 0 2px, rgb(0 0 0 / 30%) 0 4px 8px;
+$box_shadow_for_mixin:
+    rgb(0 0 0 / 30%) 0 0 2px,
+    rgb(0 0 0 / 30%) 0 4px 8px;
 
 @mixin box_shadow {
     box-shadow: $box_shadow_for_mixin;
@@ -104,11 +120,6 @@ $box_shadow_for_mixin: rgb(0 0 0 / 30%) 0 0 2px, rgb(0 0 0 / 30%) 0 4px 8px;
     border: $border_width solid $blue;
 }
 
-@mixin border_bottom {
-    border-bottom-width: $border_width;
-    border-bottom-style: solid;
-}
-
 @mixin outline_solid {
     outline-width: $border_width;
     outline-style: solid;
@@ -128,3 +139,46 @@ $box_shadow_for_mixin: rgb(0 0 0 / 30%) 0 0 2px, rgb(0 0 0 / 30%) 0 4px 8px;
     outline-width: $border_width_thick;
     outline-style: dashed;
 }
+
+@mixin folding_text {
+    max-width: 700px;
+    font-size: $font_small;
+    margin: 0;
+    margin-top: $gap_small;
+    white-space: pre-wrap;
+}
+
+@mixin glass {
+    border: 1px solid $yuv;
+    box-shadow: $black_shadow_2;
+}
+
+@mixin link_colors($main, $visited, $hover, $active) {
+    color: $main;
+
+    &:visited {
+        color: $visited;
+    }
+
+    &:hover {
+        color: $hover;
+    }
+
+    &:active {
+        color: $active;
+    }
+}
+
+@mixin backdrop_filter_before {
+    @include full_spread;
+
+    content: '';
+    position: absolute;
+    z-index: -1;
+    backdrop-filter: $glass_blur;
+}
+
+@mixin is_disabled {
+    opacity: 0.3 !important;
+    pointer-events: none !important;
+}

package/scss/shared/mods.scss

@@ -11,9 +11,11 @@
 }
 
 .hidden {
-    position: fixed !important;
+    @include hidden;
+}
+
+.visibility_hidden {
     visibility: hidden !important;
-    top: -99999px !important;
 }
 
 .overflow_auto {
@@ -25,9 +27,8 @@
     border-style: solid !important;
 }
 
-.is_disabled {
-    opacity: 0.3 !important;
-    pointer-events: none !important;
+.is_disabled:not(.input_item.group) {
+    @include is_disabled;
 }
 
 .pointer_events_none {
@@ -37,3 +38,8 @@
 .cursor_default {
     cursor: default !important;
 }
+
+.fullscreen {
+    width: 100vw;
+    height: 100vh;
+}

package/scss/shared/offers.scss

@@ -0,0 +1,37 @@
+.offers {
+    overflow: auto;
+    flex-shrink: 0;
+
+    .top_bar {
+        display: flex;
+        justify-content: end;
+        margin-bottom: $gap;
+
+        .visible {
+            position: absolute;
+        }
+
+        .shadow {
+            visibility: hidden;
+        }
+    }
+
+    .offer {
+        img {
+            @include border;
+
+            display: block;
+            margin-right: $main_margin;
+        }
+
+        p {
+            margin: 0;
+
+            + a {
+                margin-top: $gap_small;
+                display: block;
+                width: fit-content;
+            }
+        }
+    }
+}

package/scss/shared/scrollbar.scss

@@ -1,35 +1,35 @@
-$thumb_border_left: 5px solid transparent;
-$thumb_border_right: 4px solid transparent;
-
-:not(html, body, select) {
-    &::-webkit-scrollbar {
-        width: 17px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background-clip: content-box;
-    }
-
-    &::-webkit-resizer {
-        @include border_top;
-        @include border_left;
-    }
-
-    &::-webkit-scrollbar-track:vertical {
-        @include border_left;
-    }
-
-    &::-webkit-scrollbar-track:horizontal {
-        @include border_top;
-    }
-
-    &::-webkit-scrollbar-thumb:vertical {
-        border-left: $thumb_border_left;
-        border-right: $thumb_border_right;
-    }
-
-    &::-webkit-scrollbar-thumb:horizontal {
-        border-top: $thumb_border_left;
-        border-bottom: $thumb_border_right;
-    }
-}
+$thumb_border_left: 5px solid transparent;
+$thumb_border_right: 4px solid transparent;
+
+:not(html, body, select) {
+    &::-webkit-scrollbar {
+        width: 17px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-clip: content-box;
+    }
+
+    &::-webkit-resizer {
+        @include border_top;
+        @include border_left;
+    }
+
+    &::-webkit-scrollbar-track:vertical {
+        @include border_left;
+    }
+
+    &::-webkit-scrollbar-track:horizontal {
+        @include border_top;
+    }
+
+    &::-webkit-scrollbar-thumb:vertical {
+        border-left: $thumb_border_left;
+        border-right: $thumb_border_right;
+    }
+
+    &::-webkit-scrollbar-thumb:horizontal {
+        border-top: $thumb_border_left;
+        border-bottom: $thumb_border_right;
+    }
+}

package/scss/shared/selects.scss

@@ -6,9 +6,15 @@ $separator_offset: 7px;
     -webkit-appearance: none;
     /* stylelint-disable-next-line property-no-vendor-prefix */
     -moz-appearance: none;
-    background-position: calc(100% - 16px) $arrow_offset, calc(100% - 10px) $arrow_offset,
+    background-position:
+        calc(100% - 16px) $arrow_offset,
+        calc(100% - 10px) $arrow_offset,
         calc(100% - 33px) $separator_offset;
-    background-size: 6px 6px, 6px 6px, 1px 14px;
+    background-size:
+        6px 6px,
+        6px 6px,
+        1px 14px;
     background-repeat: no-repeat;
     padding-right: 44px;
+    line-height: $input_height; /* Fix text being cut from the bottom of selects. */
 }

package/scss/shared/themes/colors/aqua.scss

@@ -0,0 +1,48 @@
+$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(39 61 213) 0%, rgb(225 5 34 / 0%) 70%) repeat scroll 0% 0%,
+    linear-gradient(135deg, rgb(12 255 7) 10%, rgb(49 5 209 / 0%) 80%) repeat scroll 0% 0%,
+    linear-gradient(190deg, rgb(135 23 255) 10%, rgb(10 219 216 / 0%) 80%) repeat scroll 0% 0%,
+    rgb(0 0 0 / 0%) linear-gradient(315deg, rgb(51 205 196) 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: #16d3f5;
+$nep: #90efff;
+$htm: #ffa96c;
+$qgp: #28dd57;
+$hyv: #66ff8e;
+$ycp: #000da1;
+$iub: #2e8cff;
+$cop: #303f00;
+$yun: #14bf0a;
+$ptn: #62008f;
+$dwk: #d046e9;
+$uzf: #572b00;
+$hap: #f17442;
+$rqb: #e7121c;
+$thm: #6f0005;
+$suc: #d0111a;
+$pxd: #0014ff;
+$ksu: #be1;
+$upd: #ae00ff;
+$fpw: #ff8f1f;
+$dfp: #0cbea4;
+$nqp: rgb(57 124 249 / 99%);
+$hgb: rgb(255 77 85 / 99%);
+$beu: rgb(255 255 255 / 75%);

package/scss/shared/themes/colors/dark.scss

@@ -1,14 +1,53 @@
-$htc: #2a3038;
-$gaq: #1d2329;
-$hev: #42505e;
-$lpe: white;
-$yos: #144581;
+$theme_color_ynq: #2a3038;
+$theme_color_ytb: #1d2329;
+$theme_color_hbt: #42505e;
+$theme_color_kdc: white;
+$theme_color_ecm: #1b5a17;
+$theme_color_uvr: #144581;
+$theme_color_kxn: #308af9;
+$theme_color_tjn: #09a700;
+$theme_color_bvc: #b938c7;
+$theme_color_wnc: #ce7209;
+$theme_color_yhn: #bb141c;
+$theme_color_gsl: rgb(174 35 43 / 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: #b1b1b1;
+$yos: $theme_color_uvr;
+$nep: $theme_color_uvr;
 $htm: #8d4816;
-$qgp: #1b5a17;
-$ycp: #308af9;
-$cop: #09a700;
-$ptn: #b938c7;
-$uzf: #ce7209;
-$rqb: #bb141c;
+$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: #29394d;
-$nqp: rgb(174 35 43 / 99%);
+$nqp: $theme_color_gsl;
+$hgb: $theme_color_gsl;
+$beu: rgb(0 0 0 / 90%);

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

@@ -0,0 +1,52 @@
+$theme_color_jqv: rgb(255 255 255 / 0.1%);
+$theme_color_udj: #19f4ff;
+$theme_color_kvo: #4bff1f;
+$theme_color_ftp: #fbff12;
+$theme_color_oyq: #ff8400;
+$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: $theme_color_udj;
+$iub: #2e8cff;
+$cop: $theme_color_kvo;
+$yun: #14bf0a;
+$ptn: $theme_color_ftp;
+$dwk: #d046e9;
+$uzf: $theme_color_oyq;
+$hap: #f17442;
+$rqb: #ff471a;
+$thm: #ffa993;
+$suc: #d0111a;
+$pxd: $theme_color_udj;
+$ksu: $theme_color_kvo;
+$upd: $theme_color_ftp;
+$fpw: $theme_color_oyq;
+$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,53 @@
-$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;
+$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: #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,53 @@
-$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;
+$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: 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;
 }