@loftyshaky/shared 1.0.2 → 1.1.0

package/scss/shared/themes/general/template.scss

@@ -2,6 +2,10 @@
 
 @import 'template_focus';
 
+@mixin link_colors_standard {
+    @include link_colors($ycp, $ptn, $cop, $uzf);
+}
+
 ::selection {
     background-color: $nqp !important;
     color: white !important;
@@ -10,17 +14,16 @@
 :not(html, body, select) {
     &::-webkit-scrollbar-corner,
     &::-webkit-resizer {
-        background-color: $hev;
-        border-color: $hev;
+        background-color: $hyn;
+        border-color: $hyn;
     }
 
     &::-webkit-scrollbar-track {
-        background-color: $gaq;
-        border-color: $gaq;
+        background-color: $npw;
     }
 
     &::-webkit-scrollbar-thumb {
-        background-color: $hev;
+        background-color: $fxm;
     }
 
     &::-webkit-scrollbar-thumb:hover {
@@ -29,7 +32,27 @@
 
     &::-webkit-scrollbar-track:horizontal,
     &::-webkit-scrollbar-track:vertical {
-        border-color: $hev;
+        border-color: $fxm;
+    }
+}
+
+.link {
+    @include link_colors_standard();
+}
+
+.link_btn {
+    @include link_colors_standard();
+}
+
+textarea {
+    &::-webkit-scrollbar-corner,
+    &::-webkit-resizer {
+        background-color: $nur;
+        border-color: $vqo;
+    }
+
+    &::-webkit-scrollbar-track {
+        background-color: $hcx;
     }
 }
 
@@ -48,29 +71,29 @@
 }
 
 body {
-    background-color: $gaq;
+    background: $gqb;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+
+    .main_2 {
+        background-color: $hfb;
+    }
 
     .btn {
         &.text {
-            outline-color: $hev;
-            background-color: $gaq;
+            background-color: $npw;
+            outline-color: $hyn;
 
             &:hover {
                 background-color: $qgp;
             }
         }
+    }
 
-        &.icon {
-            background-color: transparent;
-
-            &:not(:first-child) {
-                margin-left: $gap;
-            }
-
-            svg {
-                display: block;
-                fill: $lpe;
-            }
+    .btn,
+    .link.svg {
+        svg {
+            fill: $lpe;
         }
     }
 }
@@ -84,18 +107,37 @@ textarea {
 }
 
 hr {
-    background-color: $hev;
+    background-color: $hyn;
+}
+
+.btn_options {
+    background-color: $npw;
+    border-color: $hyn;
+
+    .btn_option {
+        hr {
+            background-color: $hyn;
+        }
+
+        &:hover {
+            background-color: $qgp;
+        }
+    }
 }
 
 .sections {
-    background-color: $htc;
+    background-color: $tbn;
+
+    .section_name {
+        border-color: $hyn;
+    }
 }
 
 .section_btns {
-    background-color: $gaq;
+    background-color: $gvb;
 
     .section_btn {
-        background-color: $gaq;
+        background-color: $hfb;
 
         &.selected::before {
             background-color: $ycp;
@@ -109,15 +151,19 @@ hr {
 
 .input_item {
     .inset_border::before {
-        outline-color: $hev;
+        outline-color: $hyn;
     }
 
     .input {
-        background-color: $gaq;
+        background-color: $npw;
+
+        &::placeholder {
+            color: $mdc;
+        }
     }
 
     .btn.text_input {
-        background-color: $gaq;
+        background-color: $npw;
 
         svg {
             fill: $lpe;
@@ -126,13 +172,20 @@ hr {
 
     .palette {
         background-color: $htc;
+        color: $rbp;
     }
 
     .input_w {
-        .visualization,
+        .visualization {
+            background-color: $npw;
+        }
+
+        .palette_visualization_w.inset_border::before {
+            outline-color: $hev;
+        }
+
         .palette_visualization {
-            border-color: $hev;
-            background-color: $gaq;
+            background-color: $npw;
         }
     }
 
@@ -140,6 +193,10 @@ hr {
         background-image: linear-gradient(45deg, transparent 50%, $lpe 50%),
             linear-gradient(135deg, $lpe 50%, transparent 50%),
             linear-gradient(to right, $lpe, $lpe);
+
+        option {
+            color: $rbp;
+        }
     }
 
     .range {
@@ -153,14 +210,14 @@ hr {
             }
 
             &::-webkit-slider-runnable-track {
-                box-shadow: inset 0 0 0 1px $hev, inset -1px 0 0 0 $hev;
+                box-shadow: inset 0 0 0 1px $hyn;
             }
         }
     }
 
     .checkbox .box {
-        outline-color: $hev;
-        background-color: $gaq;
+        outline-color: $hyn;
+        background-color: $npw;
 
         svg {
             fill: $lpe;
@@ -168,11 +225,11 @@ hr {
     }
 
     .upload_box {
-        outline-color: $hev;
+        outline-color: $hyn;
 
         .background {
             &.upload_box_idle {
-                background-color: $gaq;
+                background-color: $npw;
             }
 
             &.upload_box_hover {
@@ -180,27 +237,32 @@ hr {
             }
 
             &.loading {
+                background-color: transparent;
                 /* stylelint-disable-next-line function-parentheses-newline-inside */
                 background-image: repeating-linear-gradient(-45deg,
-                $gaq,
-                $gaq 14px,
+                $npw,
+                $npw 14px,
                 $qgp 14px,
                 $qgp 28px);  /* stylelint-disable-line function-parentheses-newline-inside */
             }
         }
     }
 
+    &.color .link_btn {
+        @include link_colors($iub, $dwk, $yun, $hap);
+    }
+
     .color_picker_w {
         *:not(.pcr-last-color, .pcr-current-color) {
-            color: $lpe !important;
+            color: $rbp !important;
         }
 
         input {
-            background-color: $gaq !important;
+            background-color: $npw !important;
             outline-color: $hev !important;
 
             &:hover:not(.pcr-result, .active) {
-                background-color: $qgp !important;
+                background-color: $hyv !important;
             }
         }
     }
@@ -218,40 +280,12 @@ hr {
     }
 
     .pcr-type.active {
-        background-color: $yos !important;
+        background-color: $nep !important;
     }
 }
 
-.link {
-    color: $ycp;
-
-    &:visited {
-        color: $ptn;
-    }
-
-    &:hover {
-        color: $cop;
-    }
-
-    &:active {
-        color: $uzf;
-    }
-}
-
-.link_btn {
-    color: $ycp;
-
-    &:visited {
-        color: $ptn;
-    }
-
-    &:hover {
-        color: $cop;
-    }
-
-    &:active {
-        color: $uzf;
-    }
+.input_error {
+    color: $rqb;
 }
 
 .ext_version {

package/scss/shared/themes/general/template_focus.scss

@@ -6,45 +6,57 @@
             outline-color: $cop;
         }
 
-        &.is_in_warn_state:not(.select)::before {
+        &.is_in_warn_state:not(.select)::before,
+        &.is_in_warn_state.upload_box {
             outline-color: $rqb;
         }
     }
 
-    .visualization_w.opened .visualization,
+    .visualization_w.opened .visualization {
+        outline-color: $ycp;
+    }
+
     .palette_visualization_w.opened .palette_visualization,
     .palette_visualization_w.selected .palette_visualization {
-        outline-color: $ycp;
+        outline-color: $iub;
     }
 }
 
 .keyboard .btn.text_input::before,
 body.keyboard .btn.text:focus,
 .keyboard .help_btn:focus,
-.keyboard .btn.icon:focus,
+.keyboard .icon_btn:focus,
 .keyboard .input_item .checkbox .box:focus,
 .keyboard .link:focus,
 .keyboard .link_btn:focus,
 .keyboard .input_item .input_w:not(.text, .textarea).is_in_focus_state::before,
 .keyboard .input_item.range .input.is_in_focus_state,
 .keyboard .input_item .visualization_w .visualization:focus,
-.keyboard .input_item .palette_visualization_w .palette_visualization:focus {
+.keyboard .btn_options .btn_option:focus {
     outline-color: $ptn;
 }
 
+.keyboard .input_item.color .btn.text:focus {
+    outline-color: $dwk;
+}
+
+.keyboard .input_item .palette_visualization_w .palette_visualization:focus {
+    outline-color: $dwk;
+}
+
 .keyboard .input_item .pcr-palette:focus,
 .keyboard .input_item .pcr-slider:focus,
 .keyboard .input_item .pcr-picker:focus,
 .keyboard .input_item .color_picker_w input:not(.pcr-result):focus {
-    outline-color: $ptn !important;
+    outline-color: $dwk !important;
 }
 
 .input_item .pcr-result:focus {
-    outline-color: $cop !important;
+    outline-color: $yun !important;
 }
 
 .keyboard .input_item .pcr-result:focus {
-    outline-color: $ptn !important;
+    outline-color: $dwk !important;
 }
 
 .keyboard .section_btn:not(.selected):focus {

package/scss/shared/themes/general/very_dark_theme.scss

@@ -1,7 +1,9 @@
 @import '../../vars';
+@import '../../mixins';
+@import '../../functions';
 @import '../colors/very_dark';
 @import 'template';
 
 .main_2 {
-    box-shadow: rgb(0 102 255 / 85%) 0 0 36px, rgb(255 255 255 / 40%) 0 0 10px;
+    box-shadow: $blue_neon_very_dark;
 }

package/scss/shared/transitions.scss

@@ -4,17 +4,19 @@
 .checkbox .box svg,
 .color_picker_w,
 .palette_w,
-.color_help_w {
+.color_help_w,
+.btn_options {
     transition: var(--transition);
     transition-property: opacity;
 }
 
-.upload_box .background {
+.upload_box .background,
+.btn_options .btn_option {
     transition: var(--transition);
     transition-property: background-color;
 }
 
-.btn:not(.reload_ui, .link_btn) {
+.btn:not(.reload_ui, .link_btn), {
     transition: var(--transition);
     transition-property: opacity, background-color;
 }
@@ -23,6 +25,22 @@
 .link_btn {
     transition: var(--transition);
     transition-property: color;
+
+    &:active {
+        transition: none;
+    }
+}
+
+.btn.icon_btn,
+.link.svg {
+    svg {
+        transition: var(--transition);
+        transition-property: fill;
+
+        &:active {
+            transition: none;
+        }
+    }
 }
 
 .color_picker_w input {

package/scss/shared/upload_box.scss

@@ -1,67 +1,81 @@
-$upload_box_text_z_index: 2;
-$upload_box_loading_animation_size: 40px;
-
-$backgrond_margin: 2px;
-$backgrond_dim_offset: 2px * 2;
-
-.input_item {
-    .upload_box {
-        @include border_transparent;
-
-        position: relative;
-        height: 104px;
-        text-align: center;
-        outline-width: 3px;
-        outline-style: dashed;
-        outline-offset: -3px;
-
-        .what_to_do_msg {
-            @include center_translate;
-
-            position: absolute;
-            padding-right: $gap;
-            padding-left: $gap;
-            z-index: $upload_box_text_z_index;
-            width: 100%;
-            box-sizing: border-box;
-        }
-
-        .browse {
-            display: inline;
-            font-size: $font_main;
-            opacity: 1 !important; // needed to keep default color when element is is_enabled
-        }
-
-        .status_msg {
-            width: 100%;
-            font-size: $font_small;
-            margin-bottom: 5px;
-            z-index: $upload_box_text_z_index;
-        }
-
-        .background {
-            position: absolute;
-            width: calc(100% - #{$backgrond_dim_offset});
-            height: calc(100% - #{$backgrond_dim_offset});
-            display: flex;
-            align-items: end;
-            box-sizing: border-box;
-            margin: $backgrond_margin;
-
-            &.loading {
-                animation: move 450ms linear infinite;
-                background-size: $upload_box_loading_animation_size $upload_box_loading_animation_size;
-            }
-        }
-    }
-}
-
-@keyframes move {
-    0% {
-        background-position: 0 0;
-    }
-
-    100% {
-        background-position: 40px 0;
-    }
-}
+$upload_box_text_z_index: 2;
+$upload_box_loading_animation_size: 40px;
+
+$backgrond_margin: 2px;
+$backgrond_dim_offset: 2px * 2;
+
+$status_msg_offset: 5px;
+
+.input_item {
+    .upload_box {
+        @include border_transparent;
+
+        position: relative;
+        height: 104px;
+        text-align: center;
+        outline-width: 3px;
+        outline-style: dashed;
+        outline-offset: -3px;
+
+        .what_to_do_msg {
+            @include center_translate;
+
+            position: absolute;
+            padding-right: $gap;
+            padding-left: $gap;
+            z-index: $upload_box_text_z_index;
+            width: 100%;
+            box-sizing: border-box;
+        }
+
+        .browse {
+            display: inline;
+            font-size: $font_main;
+            opacity: 1 !important; // needed to keep default color when element is is_enabled
+        }
+
+        .status_msg {
+            position: absolute;
+            width: 100%;
+            font-size: $font_small;
+            margin-bottom: $status_msg_offset;
+            z-index: $upload_box_text_z_index;
+
+            &.filenames {
+                align-self: start;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+                margin-top: $status_msg_offset;
+                width: calc(100% - $status_msg_offset * 2);
+                padding-left: $status_msg_offset;
+                cursor: help;
+            }
+        }
+
+        .background {
+            position: absolute;
+            width: calc(100% - #{$backgrond_dim_offset});
+            height: calc(100% - #{$backgrond_dim_offset});
+            display: flex;
+            align-items: end;
+            box-sizing: border-box;
+            margin: $backgrond_margin;
+
+            &.loading {
+                animation: move 450ms linear infinite;
+                background-size: $upload_box_loading_animation_size $upload_box_loading_animation_size;
+            }
+        }
+    }
+}
+
+@keyframes move {
+    0% {
+        background-position: 0 0;
+    }
+
+    100% {
+        background-position: 40px 0;
+    }
+}

package/scss/shared/vars.scss

@@ -4,16 +4,23 @@ $font_small: 13px;
 $gap: 10px;
 $gap_small: 4px;
 $border_width: 1px;
-$outline_offset: 2px;
 $input_height: 28px;
-$color_input_height: $input_height + ($border_width * 4);
+$color_input_height: $input_height + ($border_width * 4) - 2;
 $input_content_gap: 8px;
 $input_inner_padding: 7px;
 $input_content_gap_2: $input_content_gap - ($border_width * 2);
 $main_margin: 16px;
+$ext_name_offset: 7px;
+$error_msg_offset_top: 40px;
 $main_margin_2: $main_margin * 2;
 $main_margin_4: $main_margin * 4;
 $black: #212121;
 $yellow: #fbff75;
 $light_orange: #fff7c7;
 $blue: #3892ff;
+$black_shadow: rgb(0 0 0 / 30%) 0 0 30px, rgb(0 0 0 / 30%) 0 4px 8px;
+$black_shadow_2: 0 20px 30px rgb(0 0 0 / 20%);
+$blue_neon_dark: rgb(0 115 255 / 100%) 0 0 33px, rgb(255 255 255 / 40%) 0 0 10px;
+$blue_neon_very_dark: rgb(0 102 255 / 85%) 0 0 36px, rgb(255 255 255 / 40%) 0 0 10px;
+$glass_color: rgb(255 255 255 / 20%);
+$glass_blur: blur(8px);

package/settings.d.ts

@@ -1,2 +1,2 @@
 import "./ts/shared/internal";
-export { c_settings, o_schema, d_settings, d_optional_permissions, d_schema, s_settings, i_optional_permissions, } from "./ts/settings/internal";
+export { c_settings, d_settings, d_optional_permissions, s_settings, i_optional_permissions, } from "./ts/settings/internal";

package/settings.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var main=require("./chunk-main-536b8e4c.js");require("react");var main$1=require("./chunk-main-4661c4ad.js");require("react-dom");var index$6=Object.freeze({__proto__:null,Body:main.Body$2});var index$5=Object.freeze({__proto__:null,TransformItem:class{constructor(obj){this.create_property_if_it_doesnt_exist=!0,Object.assign(this,obj),this.old_key=obj.old_key,this.new_key=obj.new_key,this.new_val=obj.new_val}}}),index$4=Object.freeze({__proto__:null,BackUp:main.BackUp,Sections:main.Sections});var index$3=Object.freeze({__proto__:null,Main:class{constructor(){this.set_permission=({name:name,optional_permission_checkbox_dict:optional_permission_checkbox_dict})=>err_async((()=>main.__awaiter(this,void 0,void 0,(function*(){const permissions=optional_permission_checkbox_dict[name];if(yield we.permissions.contains(permissions)){(yield we.permissions.remove(permissions))&&this.set_checkbox_val({name:name,val:!1})}else{(yield we.permissions.request(permissions))&&this.set_checkbox_val({name:name,val:!0})}}))),"shr_1221"),this.set_checkbox_val=({name:name,val:val})=>err((()=>{data.ui[name]=val}),"shr_1222"),main.makeObservable(this,{set_checkbox_val:main.action})}static i(){return this.i0||(this.i0=new this)}}});var index$2=Object.freeze({__proto__:null,Main:class{constructor(){this.transform=({settings:settings,transform_items:transform_items})=>err_async((()=>main.__awaiter(this,void 0,void 0,(function*(){const properties_to_remove=[];return transform_items.forEach((transform_item=>err((()=>{n(transform_item.new_key)&&!n(settings[transform_item.new_key])&&(transform_item.create_property_if_it_doesnt_exist||!transform_item.create_property_if_it_doesnt_exist&&n(transform_item.old_key)&&n(settings[transform_item.old_key]))&&(n(transform_item.new_val)?settings[transform_item.new_key]=transform_item.new_val:n(transform_item.old_key)&&(settings[transform_item.new_key]=settings[transform_item.old_key])),n(transform_item.old_key)&&!properties_to_remove.includes(transform_item.old_key)&&properties_to_remove.push(transform_item.old_key)}),"shr_1227"))),properties_to_remove.forEach((property_to_remove=>err((()=>{delete settings[property_to_remove]}),"shr_1228"))),yield ext.storage_remove(properties_to_remove),settings}))),"shr_1226"),main.makeObservable(this,{transform:main.action})}static i(){return this.i0||(this.i0=new this)}}});var index$1=Object.freeze({__proto__:null,Theme:class{constructor(){this.change=({input:input,name:name,additional_theme_callback:additional_theme_callback})=>err((()=>{"options_page_theme"===input.name&&main$1.Main$1.i().set({name:name,additional_theme_callback:additional_theme_callback})}),"shr_1088")}static i(){return this.i0||(this.i0=new this)}}}),index=Object.freeze({__proto__:null});exports.c_settings=index$6,exports.d_optional_permissions=index$3,exports.d_schema=index$2,exports.d_settings=index$4,exports.i_optional_permissions=index,exports.o_schema=index$5,exports.s_settings=index$1;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var main=require("./chunk-main-f5f33db9.js");require("react");var main$1=require("./chunk-main-d37cdd45.js");require("react-dom");var index$4=Object.freeze({__proto__:null,Body:main.Body$2}),index$3=Object.freeze({__proto__:null,BackUp:main.BackUp,Sections:main.Sections});var index$2=Object.freeze({__proto__:null,Main:class{constructor(){this.set_permission=({name:name,optional_permission_checkbox_dict:optional_permission_checkbox_dict})=>err_async((()=>main.__awaiter(this,void 0,void 0,(function*(){const permissions=optional_permission_checkbox_dict[name];if(yield we.permissions.contains(permissions)){(yield we.permissions.remove(permissions))&&this.set_checkbox_val({name:name,val:!1})}else{(yield we.permissions.request(permissions))&&this.set_checkbox_val({name:name,val:!0})}}))),"shr_1221"),this.set_checkbox_val=({name:name,val:val})=>err((()=>{data.ui[name]=val}),"shr_1222"),main.makeObservable(this,{set_checkbox_val:main.action})}static i(){return this.i0||(this.i0=new this)}}});var index$1=Object.freeze({__proto__:null,Theme:class{constructor(){this.change=({input:input,name:name,additional_theme_callback:additional_theme_callback})=>err((()=>{"options_page_theme"===input.name&&main$1.Main$1.i().set({name:name,additional_theme_callback:additional_theme_callback})}),"shr_1088")}static i(){return this.i0||(this.i0=new this)}}}),index=Object.freeze({__proto__:null});exports.c_settings=index$4,exports.d_optional_permissions=index$2,exports.d_settings=index$3,exports.i_optional_permissions=index,exports.s_settings=index$1;

package/ts/error_modules/error/data/main.d.ts

@@ -5,6 +5,6 @@ export declare class Main {
     private constructor();
     hide_delay: number;
     private highlight_time;
-    show_error: (error_obj: i_error.ErrorObj | undefined, error_code: string | undefined, { error_msg_key, silent, persistent, exit, hide_delay, is_notification, notification_msg_key, }?: i_error.ShowError) => void;
+    show_error: (error_obj: i_error.ErrorObj | undefined, error_code: string | undefined, { error_msg_key, notification_type, hide_delay, silent, persistent, exit, }?: i_error.ShowError) => void;
     output_error: (error_obj: i_error.ErrorObj, error_code: string) => void;
 }

package/ts/error_modules/error/data/msg.d.ts

@@ -5,10 +5,8 @@ export declare class Msg {
     private advanced_msg_is_visible;
     basic_msg: string;
     advanced_msg: string;
-    notification_msg_key: string;
     get advanced_msg_is_visible_cls(): string;
     get more_info_btn_is_visible_cls(): string;
-    get main_msg(): string;
     change_visibility_of_advanced_msg: ({ is_visible }: {
         is_visible: boolean;
     }) => void;

package/ts/error_modules/error/data/state.d.ts

@@ -6,10 +6,9 @@ export declare class State {
     private is_loaded;
     private is_visible;
     private is_highlighted;
-    is_notification: boolean;
+    notification_type: i_error.NotificationType;
     get is_visible_style(): string;
     get is_highlighted_cls(): string;
-    get is_notification_cls(): string;
     private is_visible_timeout;
     private is_highlighted_timeout;
     change_state: ({ observable_key, state, }: {

package/ts/error_modules/error/interfaces/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./error_obj";
 export * from "./error";
+export * from "./notification_type";
 export * from "./observable_keys";
 export * from "./show_error";
 export * from "./timeout_observable_keys";

package/ts/error_modules/error/interfaces/notification_type.d.ts

@@ -0,0 +1 @@
+export declare type NotificationType = 'error' | 'positive' | 'negative' | 'neutral';

package/ts/error_modules/error/interfaces/observable_keys.d.ts

@@ -1 +1 @@
-export declare type ObservableKeys = 'is_loaded' | 'is_visible' | 'is_highlighted' | 'is_notification';
+export declare type ObservableKeys = 'is_loaded' | 'is_visible' | 'is_highlighted';