@loftyshaky/shared-app 1.0.1 → 1.1.0

package/scss/shared/focus.scss

@@ -1,6 +1,9 @@
 /* stylelint-disable no-descending-specificity, selector-class-pattern */
 
 $text_input_outline_size: 20px;
+$text_input_outline_offset: 4px;
+$outline_offset_1: 2px;
+$outline_offset_2: 3px;
 
 .input_item .pcr-interaction input:focus {
     box-shadow: none !important;
@@ -20,8 +23,7 @@ $text_input_outline_size: 20px;
 .input_item .pcr-result:focus,
 .keyboard .input_item .color_picker_w input:not(.pcr-result):focus,
 .keyboard .btn.text_input:focus::before,
-body.keyboard .btn.text:focus,
-.keyboard .btn.icon:focus,
+.keyboard .icon_btn:focus,
 .keyboard .input_item .checkbox .box:focus,
 .keyboard .link:focus,
 .keyboard .link_btn:focus,
@@ -31,34 +33,38 @@ body.keyboard .btn.text:focus,
     @include outline_solid_thick;
 }
 
+body.keyboard .btn.text:focus {
+    @include outline_solid_thick;
+}
+
 .keyboard .input_item .pcr-palette:focus,
 .keyboard .input_item .pcr-slider:focus,
 .keyboard .link:focus,
 .keyboard .link_btn:focus,
 .keyboard .help_btn:focus,
-.keyboard .btn.icon:focus,
+.keyboard .icon_btn:focus,
 .keyboard .input_item.range .input.is_in_focus_state {
-    outline-offset: $outline_offset;
+    outline-offset: $outline_offset_1;
 }
 
 .input_item .palette_visualization_w.selected:not(.opened) .palette_visualization {
     @include outline_solid_thick;
 
-    outline-offset: $outline_offset;
+    outline-offset: $outline_offset_2;
 }
 
 .input_item .visualization_w.opened .visualization,
 .input_item .palette_visualization_w.opened .palette_visualization {
     @include outline_dashed_thick;
 
-    outline-offset: $outline_offset;
+    outline-offset: $outline_offset_2;
 }
 
 .keyboard .input_item .visualization_w .visualization:focus,
 .keyboard .input_item .palette_visualization_w .palette_visualization:focus {
     @include outline_solid_thick;
 
-    outline-offset: $outline_offset;
+    outline-offset: $outline_offset_2;
 }
 
 .keyboard .input_item .visualization_w.opened .visualization:focus,
@@ -71,8 +77,8 @@ body.keyboard .btn.text:focus,
     position: absolute;
     width: $text_input_outline_size;
     height: $text_input_outline_size;
-    top: 4px;
-    left: -2px;
+    top: $text_input_outline_offset;
+    right: $text_input_outline_offset;
 }
 
 .reload_ui_btn_w .keyboard .btn:focus {

package/scss/shared/functions.scss

@@ -0,0 +1,5 @@
+@function two_color_gradient($color_1, $color_2) {
+    $result: linear-gradient(97deg, $color_1, $color_2);
+
+    @return $result;
+}

package/scss/shared/help.scss

@@ -1,10 +1,6 @@
 .help,
 .color_help {
-    max-width: 700px;
-    font-size: $font_small;
-    margin: 0;
-    margin-top: $gap_small;
-    white-space: pre-wrap;
+    @include folding_text;
 }
 
 .help_btn {
@@ -61,6 +57,8 @@
 
         .help_btn {
             margin-top: 5px;
+            display: inline-block;
+            height: max-content;
         }
     }
 }

package/scss/shared/index.scss

@@ -2,10 +2,12 @@
 @import '~@simonwep/pickr/dist/themes/monolith.min.css';
 @import 'vars';
 @import 'mixins';
+@import 'functions';
 @import 'themes/general/light_theme';
 @import 'all';
 @import 'btns';
 @import 'checkboxes';
+@import 'close_btn';
 @import 'color_pickers';
 @import 'colors';
 @import 'crash_handler';
@@ -14,11 +16,13 @@
 @import 'hr';
 @import 'group';
 @import 'help';
+@import 'input_error';
 @import 'input_btns';
 @import 'inputs';
 @import 'inset_border';
 @import 'link_btns';
 @import 'links';
+@import 'main';
 @import 'mods';
 @import 'range';
 @import 'scrollbar';
@@ -27,3 +31,4 @@
 @import 'textareas';
 @import 'transitions';
 @import 'upload_box';
+@import 'offers';

package/scss/shared/input_btns.scss

@@ -1,11 +1,12 @@
-.btn {
-    &.text_input {
-        @include btn;
-
-        padding: $input_content_gap_2 $input_content_gap_2 $input_content_gap_2 0;
-
-        svg {
-            @include text_btn_svg;
-        }
-    }
-}
+.btn {
+    &.text_input {
+        @include btn;
+
+        position: relative;
+        padding: $input_content_gap_2 $input_content_gap_2 $input_content_gap_2 0;
+
+        svg {
+            @include text_btn_svg;
+        }
+    }
+}

package/scss/shared/input_error.scss

@@ -0,0 +1,3 @@
+.input_error {
+    @include folding_text;
+}

package/scss/shared/inputs.scss

@@ -1,70 +1,87 @@
-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;
+
+        width: inherit;
+        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,10 +1,18 @@
 .link_btn {
+    @include btn;
+
     display: block;
     font-size: $font_small;
 
     &.hide {
         margin-top: 4px;
     }
+
+    &.show_content,
+    &.hide_content {
+        margin-bottom: $gap;
+        font-size: $font_main;
+    }
 }
 
 .palette_link_btns .link_btn {

package/scss/shared/links.scss

@@ -4,6 +4,18 @@
     border: 0;
     padding: 0;
     cursor: pointer;
+
+    &.offer {
+        display: unset;
+    }
+
+    &.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,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

@@ -16,6 +16,10 @@
     top: -99999px !important;
 }
 
+.visibility_hidden {
+    visibility: hidden !important;
+}
+
 .overflow_auto {
     overflow: auto;
 }
@@ -25,9 +29,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 +40,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/themes/colors/aqua.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(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%);
+$beu: rgb(255 255 255 / 75%);

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

@@ -1,14 +1,49 @@
-$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;
+$suc: $theme_color_yhn;
 $dfp: #29394d;
-$nqp: rgb(174 35 43 / 99%);
+$nqp: $theme_color_gsl;
+$hgb: $theme_color_gsl;
+$beu: rgb(0 0 0 / 90%);