@loftyshaky/shared-app 0.0.1

package/scss/shared/embed/error.scss

@@ -0,0 +1,96 @@
+@import 'normalize.css';
+@import '../all';
+@import '../vars';
+@import '../mixins';
+@import '../mods';
+@import '../text';
+@import '../crash_handler';
+
+$ext_name_offset: 7px;
+
+body,
+button {
+    color: white;
+}
+
+.main {
+    @include max_z_index;
+
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    margin: 0;
+    border: 0;
+    overflow: hidden;
+    background-color: #da4747;
+    color: white;
+}
+
+.error {
+    .msg {
+        white-space: pre-wrap;
+        text-align: center;
+        padding: 10px;
+        padding-top: 40px;
+    }
+
+    .ext_name {
+        position: absolute;
+        top: $ext_name_offset;
+        left: $ext_name_offset;
+    }
+
+    .close_btn {
+        @include btn();
+
+        position: absolute;
+        top: $ext_name_offset;
+        right: $ext_name_offset;
+
+        &:focus {
+            outline-offset: $outline_offset;
+        }
+
+        svg {
+            display: block;
+            fill: white;
+            height: 20px;
+            width: 20px;
+        }
+    }
+
+    .more_info_btn {
+        @include btn();
+        @include outline_solid();
+
+        outline-color: white;
+        background-color: transparent;
+        display: table;
+        margin: auto;
+        margin-top: 6px;
+        padding: 3px 6px;
+        cursor: pointer;
+        white-space: nowrap;
+    }
+
+    .more_info_btn:hover {
+        color: $black;
+        background-color: white;
+    }
+
+    .more_info_btn:focus,
+    .close_btn:focus {
+        @include outline_solid_thick;
+
+        outline-color: $black;
+    }
+
+    &.is_notification {
+        background-color: #4d94ea;
+    }
+
+    &.is_highlighted {
+        background-color: #e28036;
+    }
+}

package/scss/shared/embed/font_face.scss

@@ -0,0 +1,5 @@
+@font-face {
+    font-family: 'u6Pgzb39sNF';
+    src: url('../../../fonts/noto_sans.woff2')
+        format('woff2');
+}

package/scss/shared/embed/loading_screen.scss

@@ -0,0 +1,36 @@
+@import 'normalize.css';
+@import '../all';
+@import '../vars';
+@import '../mixins';
+@import '../transitions';
+@import '../mods';
+@import '../crash_handler';
+
+$svg_size: 110px;
+$window_mode_svg_size: 64px;
+
+.main {
+    @include full_spread;
+    @include max_z_index;
+
+    position: fixed;
+    top: 0;
+    margin: 0;
+    background-color: white;
+    border-style: solid;
+    border-width: 0;
+    cursor: wait;
+}
+
+svg {
+    @include center_translate;
+
+    position: absolute;
+    height: $svg_size;
+    width: $svg_size;
+}
+
+.small_svg svg {
+    height: $window_mode_svg_size;
+    width: $window_mode_svg_size;
+}

package/scss/shared/embed/no_tr.scss

@@ -0,0 +1,3 @@
+* {
+    transition: none !important;
+}

package/scss/shared/focus.scss

@@ -0,0 +1,80 @@
+/* stylelint-disable no-descending-specificity, selector-class-pattern */
+
+$text_input_outline_size: 20px;
+
+.input_item .pcr-interaction input:focus {
+    box-shadow: none !important;
+}
+
+.keyboard .input_item .pcr-palette:focus,
+.keyboard .input_item .pcr-slider:focus,
+.keyboard .input_item .pcr-picker:focus,
+.input_item .pcr-result:focus,
+.keyboard .input_item .color_picker_w input:not(.pcr-result):focus {
+    box-shadow: none;
+}
+
+.keyboard .input_item .pcr-palette:focus,
+.keyboard .input_item .pcr-slider:focus,
+.keyboard .input_item .pcr-picker:focus,
+.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 .input_item .checkbox .box:focus,
+.keyboard .link:focus,
+.keyboard .link_btn:focus,
+.keyboard .help_btn:focus,
+.keyboard .input_item .input_w:not(.text):not(.textarea).is_in_focus_state::before,
+.keyboard .input_item.range .input.is_in_focus_state {
+    @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 .input_item.range .input.is_in_focus_state {
+    outline-offset: $outline_offset;
+}
+
+.input_item .palette_visualization_w.selected:not(.opened) .palette_visualization {
+    @include outline_solid_thick;
+
+    outline-offset: $outline_offset;
+}
+
+.input_item .visualization_w.opened .visualization,
+.input_item .palette_visualization_w.opened .palette_visualization {
+    @include outline_dashed_thick;
+
+    outline-offset: $outline_offset;
+}
+
+.keyboard .input_item .visualization_w .visualization:focus,
+.keyboard .input_item .palette_visualization_w .palette_visualization:focus {
+    @include outline_solid_thick;
+
+    outline-offset: $outline_offset;
+}
+
+.keyboard .input_item .visualization_w.opened .visualization:focus,
+.keyboard .input_item .palette_visualization_w.opened .palette_visualization:focus {
+    @include outline_dashed_thick;
+}
+
+.keyboard .btn.text_input:focus::before {
+    content: '';
+    position: absolute;
+    width: $text_input_outline_size;
+    height: $text_input_outline_size;
+    top: 4px;
+    left: -2px;
+}
+
+.reload_ui_btn_w .keyboard .btn:focus {
+    @include blue_border;
+}

package/scss/shared/group.scss

@@ -0,0 +1,18 @@
+.input_item.group {
+    .input_item {
+        margin-top: 0;
+
+        &.range {
+            width: 100%;
+        }
+    }
+
+    .input_w.group {
+        display: flex;
+        align-items: center;
+
+        .input_w.range {
+            width: 100%;
+        }
+    }
+}

package/scss/shared/help.scss

@@ -0,0 +1,66 @@
+.help,
+.color_help {
+    max-width: 700px;
+    font-size: $font_small;
+    margin: 0;
+    margin-top: $gap_small;
+    white-space: pre-wrap;
+}
+
+.help_btn {
+    @include btn;
+
+    margin-left: var(--help_btn_margin);
+    display: flex;
+    order: 1;
+
+    svg {
+        display: block;
+        width: var(--help_btn_size);
+        height: var(--help_btn_size);
+    }
+}
+
+.section_help {
+    display: flex;
+
+    + .subsection {
+        margin-top: $gap;
+    }
+
+    .help {
+        max-width: unset;
+        margin-top: 0;
+        margin-right: 15px;
+    }
+
+    .help_btn {
+        margin-left: auto;
+        align-self: flex-start;
+    }
+}
+
+.input_item {
+    .color_help_w {
+        margin-bottom: $gap;
+    }
+
+    .color_help {
+        margin: 0;
+        line-height: initial;
+    }
+
+    &:not(.textarea) .help_btn {
+        align-self: center;
+    }
+
+    &.textarea {
+        .input_w_and_help_btn {
+            align-items: normal;
+        }
+
+        .help_btn {
+            margin-top: 5px;
+        }
+    }
+}

package/scss/shared/hr.scss

@@ -0,0 +1,6 @@
+hr {
+    margin: 0;
+    margin-top: $gap;
+    border: 0;
+    height: 1px;
+}

package/scss/shared/index.scss

@@ -0,0 +1,29 @@
+@import 'normalize.css';
+@import '~@simonwep/pickr/dist/themes/monolith.min.css';
+@import 'vars';
+@import 'mixins';
+@import 'themes/general/light_theme';
+@import 'all';
+@import 'btns';
+@import 'checkboxes';
+@import 'color_pickers';
+@import 'colors';
+@import 'crash_handler';
+@import 'css_vars';
+@import 'focus';
+@import 'hr';
+@import 'group';
+@import 'help';
+@import 'input_btns';
+@import 'inputs';
+@import 'inset_border';
+@import 'link_btns';
+@import 'links';
+@import 'mods';
+@import 'range';
+@import 'scrollbar';
+@import 'selects';
+@import 'text';
+@import 'textareas';
+@import 'transitions';
+@import 'upload_box';

package/scss/shared/input_btns.scss

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

package/scss/shared/inputs.scss

@@ -0,0 +1,70 @@
+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;
+        }
+    }
+}

package/scss/shared/inset_border.scss

@@ -0,0 +1,20 @@
+.inset_border {
+    position: relative;
+
+    &::before {
+        @include outline_solid;
+
+        content: '';
+        position: absolute;
+        pointer-events: none;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 1;
+    }
+}
+
+.input_item.color .inset_border::before {
+    outline: none;
+}

package/scss/shared/link_btns.scss

@@ -0,0 +1,12 @@
+.link_btn {
+    display: block;
+    font-size: $font_small;
+
+    &.hide {
+        margin-top: 4px;
+    }
+}
+
+.palette_link_btns .link_btn {
+    margin-bottom: $gap;
+}

package/scss/shared/links.scss

@@ -0,0 +1,11 @@
+.link {
+    display: table;
+    text-decoration: none;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+}
+
+.link:not(:first-child) {
+    margin-top: $gap;
+}

package/scss/shared/mixins.scss

@@ -0,0 +1,130 @@
+$border_width_thick: 2px;
+
+@mixin full_dims {
+    width: 100%;
+    height: 100%;
+}
+
+@mixin top_left {
+    top: 0;
+    left: 0;
+}
+
+@mixin full_spread {
+    @include full_dims;
+    @include top_left;
+}
+
+@mixin max_z_index {
+    z-index: 2147483647;
+}
+
+@mixin center_flex {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+@mixin center_translate {
+    margin: auto;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+@mixin btn {
+    background-color: transparent;
+    outline: none;
+    cursor: pointer;
+    border: 0;
+    padding: 0;
+}
+
+@mixin text_btn_svg {
+    height: 16px;
+    width: 16px;
+    display: block;
+}
+
+@mixin input_basic {
+    border: 0;
+    outline: none;
+}
+
+$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;
+}
+
+@mixin box_shadow_important {
+    box-shadow: $box_shadow_for_mixin !important;
+}
+
+@mixin border {
+    border-width: $border_width;
+    border-style: solid;
+}
+
+@mixin border_transparent {
+    @include border;
+
+    border-color: transparent;
+}
+
+@mixin border_top {
+    border-top-width: $border_width;
+    border-top-style: solid;
+}
+
+@mixin border_bottom {
+    border-bottom-width: $border_width;
+    border-bottom-style: solid;
+}
+
+@mixin border_left {
+    border-left-width: $border_width;
+    border-left-style: solid;
+}
+
+@mixin border_right {
+    border-right-width: $border_width;
+    border-right-style: solid;
+}
+
+@mixin white_border {
+    border: $border_width solid white;
+}
+
+@mixin black_border {
+    border: $border_width solid $black;
+}
+
+@mixin blue_border {
+    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;
+}
+
+@mixin outline_dashed {
+    outline-width: $border_width;
+    outline-style: dashed;
+}
+
+@mixin outline_solid_thick {
+    outline-width: $border_width_thick;
+    outline-style: solid;
+}
+
+@mixin outline_dashed_thick {
+    outline-width: $border_width_thick;
+    outline-style: dashed;
+}

package/scss/shared/mods.scss

@@ -0,0 +1,39 @@
+.opacity_1 {
+    opacity: 1 !important;
+}
+
+.opacity_0 {
+    opacity: 0 !important;
+}
+
+.none {
+    display: none !important;
+}
+
+.hidden {
+    position: fixed !important;
+    visibility: hidden !important;
+    top: -99999px !important;
+}
+
+.overflow_auto {
+    overflow: auto;
+}
+
+.border {
+    border-width: 1px !important;
+    border-style: solid !important;
+}
+
+.is_disabled {
+    opacity: 0.3 !important;
+    pointer-events: none !important;
+}
+
+.pointer_events_none {
+    pointer-events: none !important;
+}
+
+.cursor_default {
+    cursor: default !important;
+}

package/scss/shared/range.scss

@@ -0,0 +1,43 @@
+$range_track_height: 12px;
+$lower_fill_offset_top: 8px;
+
+.input_item {
+    .range {
+        .input {
+            min-width: inherit;
+            appearance: none;
+            padding: 0;
+            background-color: transparent;
+            cursor: pointer;
+
+            &::-webkit-slider-thumb {
+                appearance: none;
+                width: $range_track_height;
+                height: $input_height;
+                margin-top: -$lower_fill_offset_top;
+            }
+
+            &::-webkit-slider-runnable-track {
+                height: $range_track_height;
+            }
+        }
+
+        .lower_fill {
+            position: absolute;
+            height: $range_track_height;
+            top: $lower_fill_offset_top;
+            pointer-events: none;
+        }
+    }
+
+    .displayed_val {
+        font-size: $font_small;
+        width: max-content;
+        margin-left: auto;
+        margin-top: $gap_small;
+
+        &.help_is_present {
+            margin-right: $input_height;
+        }
+    }
+}