@loftyshaky/shared 1.0.1 → 1.1.0

package/scss/shared/inputs.scss

@@ -1,70 +1,86 @@
-input[type='file'] {
-    display: none;
-}
-
-.input_item {
-    padding-right: $main_margin;
-    margin-left: unset;
-    justify-content: unset;
-    align-items: center;
-    flex-direction: column;
-    display: table;
-    width: auto;
-
-    &.child {
-        margin-left: 28px;
-    }
-
-    &:not(:first-child) {
-        margin-top: $gap;
-    }
-
-    .label {
-        display: flex;
-        align-items: center;
-        height: unset;
-        margin-right: 0;
-        white-space: normal;
-    }
-
-    &.text .label,
-    &.textarea .label,
-    &.select .label,
-    &.range .label {
-        margin-bottom: $gap_small;
-    }
-
-    .input {
-        @include input_basic;
-
-        opacity: 1; // needed to keep default color when element is is_enabled
-        height: $input_height;
-        padding: 0 $input_inner_padding 0 $input_inner_padding;
-        flex-grow: 1;
-        border-radius: 0;
-        box-sizing: border-box;
-    }
-
-    .input_w_and_help_btn {
-        display: flex;
-        align-items: center;
-    }
-
-    .input_w {
-        position: relative;
-        display: flex;
-        flex-shrink: 0;
-        box-sizing: border-box;
-
-        &.text,
-        &.textarea,
-        &.select {
-            @include border_transparent;
-        }
-
-        &.is_in_focus_state:not(.select)::before,
-        &.is_in_warn_state:not(.select)::before {
-            @include outline_solid_thick;
-        }
-    }
-}
+input[type='file'] {
+    display: none;
+}
+
+.input_item_form {
+    margin-bottom: 0;
+}
+
+.label:not(:first-child) {
+    margin-top: $gap;
+}
+
+.input_item {
+    padding-right: $main_margin;
+    margin-left: unset;
+    justify-content: unset;
+    align-items: center;
+    flex-direction: column;
+    display: table;
+    width: auto;
+
+    &.child {
+        margin-left: 28px;
+    }
+
+    &:not(:first-child) {
+        margin-top: $gap;
+    }
+
+    .label_in_input_item {
+        display: flex;
+        align-items: center;
+        height: unset;
+        margin-right: 0;
+        white-space: normal;
+    }
+
+    &.text,
+    &.textarea,
+    &.select,
+    &.range,
+    &.upload_box,
+    &.group {
+        .label_in_input_item:not(:empty) {
+            margin-bottom: $gap_small;
+        }
+    }
+
+    .input {
+        @include input_basic;
+
+        opacity: 1; // needed to keep default color when element is is_enabled
+        height: $input_height;
+        padding: 0 $input_inner_padding 0 $input_inner_padding;
+        flex-grow: 1;
+        border-radius: 0;
+        box-sizing: border-box;
+    }
+
+    .input_w_and_help_btn {
+        display: flex;
+        align-items: center;
+    }
+
+    .input_w {
+        position: relative;
+        display: flex;
+        flex-shrink: 0;
+        box-sizing: border-box;
+
+        &.text,
+        &.textarea,
+        &.select {
+            @include border_transparent;
+        }
+
+        .main_visualization_w {
+            @include border_transparent;
+        }
+
+        &.is_in_focus_state:not(.select)::before,
+        &.is_in_warn_state:not(.select)::before {
+            @include outline_solid_thick;
+        }
+    }
+}

package/scss/shared/inset_border.scss

@@ -14,7 +14,3 @@
         z-index: 1;
     }
 }
-
-.input_item.color .inset_border::before {
-    outline: none;
-}

package/scss/shared/link_btns.scss

@@ -1,4 +1,6 @@
 .link_btn {
+    @include btn;
+
     display: block;
     font-size: $font_small;
 

package/scss/shared/links.scss

@@ -4,6 +4,14 @@
     border: 0;
     padding: 0;
     cursor: pointer;
+
+    &.svg {
+        svg {
+            display: block;
+            width: $icon_btn_size;
+            height: $icon_btn_size;
+        }
+    }
 }
 
 .link:not(:first-child) {

package/scss/shared/main.scss

@@ -0,0 +1,3 @@
+.main_2 {
+    box-sizing: border-box;
+}

package/scss/shared/mixins.scss

@@ -32,6 +32,13 @@ $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;
@@ -128,3 +135,41 @@ $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;
+}

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/themes/colors/aqua.scss

@@ -0,0 +1,38 @@
+$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: #0014ff;
+$iub: #2e8cff;
+$cop: #be1;
+$yun: #14bf0a;
+$ptn: #ae00ff;
+$dwk: #d046e9;
+$uzf: #ff8f1f;
+$hap: #f17442;
+$rqb: #e7121c;
+$suc: #d0111a;
+$dfp: #0cbea4;
+$nqp: rgb(57 124 249 / 99%);
+$hgb: rgb(255 77 85 / 99%);

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

@@ -1,13 +1,48 @@
-$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;
+$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: #29394d;
-$nqp: rgb(174 35 43 / 99%);
+$nqp: $theme_color_gsl;
+$hgb: $theme_color_gsl;

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

@@ -0,0 +1,38 @@
+$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%);

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

@@ -1,13 +1,48 @@
-$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;
+$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;

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

@@ -1,13 +1,48 @@
-$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;
+$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;

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;
 }