@loftyshaky/shared-app 1.0.1 → 1.1.0

package/scss/settings/transitions.scss

@@ -1,5 +1,5 @@
-.input_item,
-.input_w,
+.section,
+.section_inner,
 .help, {
     transition: var(--transition);
     transition-property: opacity;
@@ -9,13 +9,3 @@
     transition: var(--transition);
     transition-property: background-color;
 }
-
-.link,
-.link_btn {
-    transition: var(--transition);
-    transition-property: color;
-}
-
-.link:active {
-    transition: none;
-}

package/scss/shared/btns.scss

@@ -3,37 +3,90 @@ $icon_btn_size: 20px;
 .btn {
     @include btn;
 
+    position: relative;
+
+    .shadow {
+        @include full_spread;
+
+        position: absolute;
+    }
+
+    svg {
+        display: block;
+    }
+}
+
+.btn.icon_btn {
     border-radius: 0;
     position: relative;
     vertical-align: bottom;
+    background-color: transparent;
 
-    &.text {
-        @include btn;
-        @include border_transparent;
-        @include outline_solid;
+    &:not(:first-child) {
+        margin-left: $gap !important;
+    }
 
-        display: block;
-        height: $input_height + ($border_width * 2);
-        padding: 0 $input_inner_padding 0 $input_inner_padding;
-        outline-offset: -1px;
+    svg {
+        width: $icon_btn_size;
+        height: $icon_btn_size;
+    }
+}
 
-        &:not(:first-child) {
-            margin-top: $gap;
-        }
+.btn.text {
+    @include border_transparent;
+    @include outline_solid;
 
-        &::before {
-            display: none;
-        }
+    border-radius: 0;
+    height: $input_height;
+    padding: 0 $input_inner_padding 0 $input_inner_padding;
+    display: table;
+    box-sizing: border-box;
+
+    &:not(:first-child) {
+        margin-top: $gap;
     }
 
     &.color_ok_btn {
-        margin-left: auto;
+        margin-left: auto !important;
     }
 
-    &.icon {
+    &.icon_btn {
         svg {
             width: $icon_btn_size;
             height: $icon_btn_size;
         }
     }
 }
+
+.btn_options {
+    @include border;
+
+    backdrop-filter: $glass_blur;
+    box-shadow: $black_shadow;
+
+    .btn_option {
+        @include btn;
+
+        display: block;
+        width: 100%;
+        padding: 3px 6px;
+        border: 0;
+        text-align: left;
+        background-color: transparent;
+        cursor: pointer;
+        box-sizing: border-box;
+        color: unset;
+        text-decoration: none;
+        white-space: nowrap;
+    }
+
+    hr {
+        margin-top: 0;
+    }
+}
+
+.keyboard .btn_options .btn_option:focus {
+    @include outline_solid_thick;
+
+    outline-offset: -1px;
+}

package/scss/shared/checkboxes.scss

@@ -1,38 +1,38 @@
-$box_size: 20px;
-$checkmark_size: 16px;
-
-.input_item {
-    &.checkbox {
-        input {
-            display: none;
-        }
-
-        .wrap_label {
-            @include border_transparent;
-
-            margin-right: $input_content_gap;
-        }
-
-        .box {
-            @include center_flex;
-            @include outline_solid;
-
-            height: $box_size;
-            width: $box_size;
-            cursor: pointer;
-        }
-
-        .box svg {
-            width: $checkmark_size;
-            height: $checkmark_size;
-        }
-
-        input + .box svg {
-            opacity: 0;
-        }
-
-        input:checked + .box svg {
-            opacity: 1;
-        }
-    }
-}
+$box_size: 20px;
+$checkmark_size: 16px;
+
+.input_item {
+    &.checkbox {
+        input {
+            display: none;
+        }
+
+        .wrap_label {
+            @include border_transparent;
+
+            margin-right: $input_content_gap;
+        }
+
+        .box {
+            @include center_flex;
+            @include outline_solid;
+
+            height: $box_size;
+            width: $box_size;
+            cursor: pointer;
+        }
+
+        .box svg {
+            width: $checkmark_size;
+            height: $checkmark_size;
+        }
+
+        input + .box svg {
+            opacity: 0;
+        }
+
+        input:checked + .box svg {
+            opacity: 1;
+        }
+    }
+}

package/scss/shared/close_btn.scss

@@ -0,0 +1,18 @@
+.close_btn {
+    @include btn();
+
+    margin-top: $ext_name_offset;
+    margin-right: $ext_name_offset;
+    margin-left: $gap;
+
+    &:focus {
+        outline-offset: 2px;
+    }
+
+    svg {
+        display: block;
+        fill: white;
+        height: 20px;
+        width: 20px;
+    }
+}

package/scss/shared/color_pickers.scss

@@ -1,93 +1,93 @@
-/* stylelint-disable selector-class-pattern */
-
-$pcr_picker_size: 16px;
-$btn_padding: 6px;
-
-.input_item {
-    .pcr-app,
-    .pcr-last-color,
-    .pcr-palette,
-    .pcr-current-color,
-    .pcr-slider,
-    .color_picker_w input {
-        border-radius: 0 !important;
-    }
-
-    .pcr-palette,
-    .pcr-slider {
-        @include border;
-    }
-
-    .color_picker_w {
-        position: absolute;
-        z-index: 2;
-        top: $input_height + $input_content_gap;
-        left: 0;
-        user-select: none;
-
-        input {
-            @include outline_solid;
-
-            filter: initial !important;
-
-            &:not(.pcr-result) {
-                padding: $btn_padding $btn_padding 5px $btn_padding;
-            }
-        }
-    }
-
-    .color_picker {
-        position: fixed;
-    }
-
-    .pcr-app {
-        @include box_shadow_important;
-
-        position: relative !important;
-        left: initial !important;
-        top: initial !important;
-        width: fit-content !important;
-        padding: $gap !important;
-        transition: none !important;
-    }
-
-    .pcr-picker {
-        width: $pcr_picker_size !important;
-        height: $pcr_picker_size !important;
-        border-width: 1px !important;
-    }
-
-    .pcr-color-preview {
-        @include border;
-
-        margin-bottom: $gap !important;
-    }
-
-    .pcr-swatches {
-        margin-top: 2px !important;
-    }
-
-    .pcr-interaction {
-        margin-left: -2px !important;
-        margin-right: -1px !important;
-        margin-bottom: 1px !important;
-        white-space: nowrap;
-        display: unset !important;
-    }
-
-    .pcr-result {
-        width: calc(100% - 5px);
-        display: block;
-        margin-top: 9px !important;
-        padding-top: 6px !important;
-        margin-bottom: 2px !important;
-    }
-
-    .pcr-color-chooser {
-        margin-top: $gap !important;
-    }
-
-    .pcr-type {
-        margin-right: 5px !important;
-    }
-}
+/* stylelint-disable selector-class-pattern */
+
+$pcr_picker_size: 16px;
+$btn_padding: 6px;
+
+.input_item {
+    .pcr-app,
+    .pcr-last-color,
+    .pcr-palette,
+    .pcr-current-color,
+    .pcr-slider,
+    .color_picker_w input {
+        border-radius: 0 !important;
+    }
+
+    .pcr-palette,
+    .pcr-slider {
+        @include border;
+    }
+
+    .color_picker_w {
+        position: absolute;
+        z-index: 3;
+        top: $input_height + $input_content_gap;
+        left: 0;
+        user-select: none;
+
+        input {
+            @include outline_solid;
+
+            filter: initial !important;
+
+            &:not(.pcr-result) {
+                padding: $btn_padding $btn_padding 5px $btn_padding;
+            }
+        }
+    }
+
+    .color_picker {
+        position: fixed;
+    }
+
+    .pcr-app {
+        @include box_shadow_important;
+
+        position: relative !important;
+        left: initial !important;
+        top: initial !important;
+        width: fit-content !important;
+        padding: $gap !important;
+        transition: none !important;
+    }
+
+    .pcr-picker {
+        width: $pcr_picker_size !important;
+        height: $pcr_picker_size !important;
+        border-width: 1px !important;
+    }
+
+    .pcr-color-preview {
+        @include border;
+
+        margin-bottom: $gap !important;
+    }
+
+    .pcr-swatches {
+        margin-top: 2px !important;
+    }
+
+    .pcr-interaction {
+        margin-left: -2px !important;
+        margin-right: -1px !important;
+        margin-bottom: 1px !important;
+        white-space: nowrap;
+        display: unset !important;
+    }
+
+    .pcr-result {
+        width: calc(100% - 5px);
+        display: block;
+        margin-top: 9px !important;
+        padding-top: 6px !important;
+        margin-bottom: 2px !important;
+    }
+
+    .pcr-color-chooser {
+        margin-top: $gap !important;
+    }
+
+    .pcr-type {
+        margin-right: 5px !important;
+    }
+}

package/scss/shared/colors.scss

@@ -1,84 +1,90 @@
-.input_item {
-    &.color .label {
-        align-self: normal;
-    }
-
-    .inner_w {
-        position: absolute;
-        height: $color_input_height;
-        align-self: center;
-        order: -1;
-    }
-
-    .visualization_w {
-        display: flex;
-        align-items: center;
-    }
-
-    .visualization {
-        @include border;
-
-        outline: none;
-        margin-right: $input_content_gap;
-        min-width: $color_input_height;
-        height: $color_input_height;
-        cursor: pointer;
-        border-radius: 0;
-    }
-
-    .palette_visualization_w {
-        display: inline-flex;
-        padding: 0;
-        margin-right: $gap;
-        margin-bottom: $gap;
-        cursor: pointer;
-
-        &:nth-child(10),
-        &:nth-child(20),
-        &:nth-child(30) {
-            margin-right: 0;
-        }
-
-        &:nth-child(n + 21) {
-            margin-bottom: 0;
-        }
-    }
-
-    .palette_visualization {
-        @include border;
-
-        outline: none;
-        width: $color_input_height;
-        height: $color_input_height;
-        cursor: pointer;
-        border-radius: 0;
-    }
-
-    .fill_shadow_w {
-        position: absolute;
-        top: $input_content_gap + $input_content_gap;
-        left: 0;
-    }
-
-    .fill_shadow {
-        position: fixed;
-        display: block;
-        visibility: hidden;
-    }
-
-    .palette_w {
-        z-index: 2;
-        position: absolute;
-        top: $input_content_gap + $input_content_gap;
-        left: 0;
-    }
-
-    .palette {
-        @include box_shadow;
-
-        position: fixed;
-        padding: 10px;
-        width: 410px;
-        line-height: 0;
-    }
-}
+$palette_visualization_w_border_offset: 1 * 2;
+
+.input_item {
+    &.color .label_in_input_item {
+        align-self: normal;
+    }
+
+    .inner_w {
+        position: absolute;
+        height: $color_input_height;
+        align-self: center;
+        order: -1;
+    }
+
+    .main_visualization_w {
+        height: fit-content;
+        display: flex;
+        align-self: center;
+    }
+
+    .visualization_w {
+        display: flex;
+        align-items: center;
+        margin-right: $input_content_gap;
+    }
+
+    .visualization {
+        border: 0;
+        outline: none;
+        min-width: $color_input_height;
+        height: $color_input_height;
+        cursor: pointer;
+        border-radius: 0;
+    }
+
+    .palette_visualization_w {
+        display: inline-flex;
+        padding: 0;
+        margin-right: $gap + $palette_visualization_w_border_offset;
+        margin-bottom: $gap + $palette_visualization_w_border_offset;
+        cursor: pointer;
+
+        &:nth-child(10),
+        &:nth-child(20),
+        &:nth-child(30) {
+            margin-right: 0;
+        }
+
+        &:nth-child(n + 21) {
+            margin-bottom: 0;
+        }
+    }
+
+    .palette_visualization {
+        border: 0;
+        outline: none;
+        width: $color_input_height;
+        height: $color_input_height;
+        cursor: pointer;
+        border-radius: 0;
+    }
+
+    .fill_shadow_w {
+        position: absolute;
+        top: $input_content_gap + $input_content_gap;
+        left: 0;
+    }
+
+    .fill_shadow {
+        position: fixed;
+        display: block;
+        visibility: hidden;
+    }
+
+    .palette_w {
+        z-index: 3;
+        position: absolute;
+        top: $input_content_gap + $input_content_gap;
+        left: 0;
+    }
+
+    .palette {
+        @include box_shadow;
+
+        position: fixed;
+        padding: 10px;
+        width: 410px;
+        line-height: 0;
+    }
+}

package/scss/shared/embed/error.scss

@@ -5,8 +5,7 @@
 @import '../mods';
 @import '../text';
 @import '../crash_handler';
-
-$ext_name_offset: 7px;
+@import '../close_btn';
 
 body,
 button {
@@ -28,38 +27,52 @@ button {
 }
 
 .error {
-    .msg {
-        white-space: pre-wrap;
-        text-align: center;
-        padding: 10px;
-        padding-top: 40px;
-    }
+    .body {
+        position: relative;
 
-    .ext_name {
-        position: absolute;
-        top: $ext_name_offset;
-        left: $ext_name_offset;
-    }
+        .top_stuff {
+            display: flex;
+            align-items: start;
 
-    .close_btn {
-        @include btn();
+            .ext_name_and_keep_visible_msg {
+                flex-grow: 1;
+            }
+        }
+    }
 
-        position: absolute;
-        top: $ext_name_offset;
-        right: $ext_name_offset;
+    .progress {
+        appearance: none;
+        display: block;
+        width: 100%;
+        height: 8px;
 
-        &:focus {
-            outline-offset: $outline_offset;
+        &::-webkit-progress-bar {
+            background-color: transparent;
         }
 
-        svg {
-            display: block;
-            fill: white;
-            height: 20px;
-            width: 20px;
+        &::-webkit-progress-value {
+            background-color: #ffe81a;
         }
     }
 
+    .keep_visible_msg {
+        font-size: $font_small;
+        margin-left: $ext_name_offset;
+        margin-top: 2px;
+    }
+
+    .msg {
+        white-space: pre-wrap;
+        text-align: center;
+        padding: 10px;
+        padding-top: 12px;
+    }
+
+    .ext_name {
+        margin-top: $ext_name_offset;
+        margin-left: $ext_name_offset;
+    }
+
     .more_info_btn {
         @include btn();
         @include outline_solid();
@@ -86,7 +99,11 @@ button {
         outline-color: $black;
     }
 
-    &.is_notification {
+    &.positive {
+        background-color: #40af49;
+    }
+
+    &.neutral {
         background-color: #4d94ea;
     }