@loftyshaky/shared-app 1.0.2 → 1.2.0

package/js/webpack.config.js

@@ -12,6 +12,7 @@ const shared_config = ({
     MiniCssExtractPlugin,
     CssMinimizerPlugin,
     CopyWebpackPlugin,
+    LicensePlugin,
     copy_patters,
     minimize = true,
     enable_anouncement,
@@ -41,9 +42,16 @@ const shared_config = ({
                 from: path.join(app_root, 'node_modules', '@loftyshaky', 'shared', 'html'),
                 noErrorOnMissing: true,
                 globOptions: {
-                    ignore: enable_anouncement ? [] : ['**/announcement.html'],
+                    ignore: [
+                        ...(enable_anouncement ? [] : ['**/announcement.html']),
+                        ...(env.browser === 'edge' ? ['**/dependencies.html'] : []),
+                    ],
                 },
             },
+            {
+                from: path.join(app_root, 'node_modules', '@loftyshaky', 'shared', 'imgs'),
+                noErrorOnMissing: true,
+            },
             {
                 from: path.join(app_root, 'src', 'html'),
             },
@@ -74,6 +82,9 @@ const shared_config = ({
             ...(enable_anouncement && {
                 announcement: path.join(paths.ts, 'announcement', 'announcement.ts'),
             }),
+            ...(env.browser !== 'edge' && {
+                dependencies: path.join(paths.ts, 'dependencies', 'dependencies.ts'),
+            }),
             font_face: path.join(paths.embed, 'font_face.scss'),
             no_tr: path.join(paths.embed, 'no_tr.scss'),
             hidden_roots: path.join(paths.embed, 'hidden_roots.scss'),
@@ -90,9 +101,22 @@ const shared_config = ({
                     'index.scss',
                 ),
             }),
+            ...(env.browser !== 'edge' && {
+                dependencies_css: path.join(
+                    app_root,
+                    'node_modules',
+                    '@loftyshaky',
+                    'shared',
+                    'scss',
+                    'dependencies',
+                    'index.scss',
+                ),
+            }),
             light_theme: path.join(paths.themes, 'light_theme.scss'),
             dark_theme: path.join(paths.themes, 'dark_theme.scss'),
             very_dark_theme: path.join(paths.themes, 'very_dark_theme.scss'),
+            lavender_theme: path.join(paths.themes, 'lavender_theme.scss'),
+            aqua_theme: path.join(paths.themes, 'aqua_theme.scss'),
         },
         output: {
             filename: '[name].js',
@@ -111,8 +135,12 @@ const shared_config = ({
                 ...(enable_anouncement && {
                     announcement: path.join(paths.ts, 'announcement'),
                 }),
+                dependencies: path.join(paths.ts, 'dependencies'),
             },
             extensions: ['.js', '.jsx', '.ts', '.tsx'],
+            fallback: {
+                crypto: false,
+            },
         },
         module: {
             rules: [
@@ -129,10 +157,10 @@ const shared_config = ({
                     use: ['@svgr/webpack'],
                 },
                 {
-                    test: /\.woff2?$/,
+                    test: /\.ttf?$/,
                     type: 'asset/resource',
                     generator: {
-                        filename: '[name][ext]',
+                        filename: './[name][ext]',
                     },
                 },
             ],
@@ -149,6 +177,10 @@ const shared_config = ({
                     compiler.hooks.done.tap('done', callback_done);
                 },
             },
+            new LicensePlugin({
+                outputFilename: 'dependencies.json',
+                replenishDefaultLicenseTexts: true,
+            }),
         ],
         target: 'web',
         devtool: false,

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@loftyshaky/shared-app",
     "description": "-",
-    "version": "1.0.2",
+    "version": "1.2.0",
     "author": "loftyshaky",
     "license": "MIT",
     "repository": {
@@ -11,4 +11,4 @@
     "scripts": {
         "pub": "npm publish --access public"
     }
-}
+}

package/scss/dependencies/body.scss

@@ -0,0 +1,3 @@
+.header {
+    margin-bottom: 0;
+}

package/scss/dependencies/hr.scss

@@ -0,0 +1,3 @@
+hr {
+    margin-top: 0;
+}

package/scss/dependencies/index.scss

@@ -0,0 +1,5 @@
+@import '../announcement/index';
+@import 'body';
+@import 'hr';
+@import 'links';
+@import 'main';

package/scss/dependencies/links.scss

@@ -0,0 +1,3 @@
+.link {
+    display: unset;
+}

package/scss/dependencies/main.scss

@@ -0,0 +1,3 @@
+.main {
+    max-width: 600px;
+}

package/scss/settings/section_btns.scss

@@ -1,52 +1,52 @@
-.section_btns {
-    flex-shrink: 0;
-    display: flex;
-    flex-flow: column;
-    overflow: auto;
-
-    .filler {
-        position: relative;
-        height: 100%;
-    }
-
-    .section_btn {
-        @include input_basic;
-
-        position: relative;
-        text-align: left;
-        padding: 10px;
-        padding-right: 11px;
-        cursor: pointer;
-
-        &.selected {
-            cursor: default;
-        }
-
-        &.selected::before,
-        &:not(.selected):hover::before {
-            content: '';
-            height: 33px;
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 3px;
-            margin: auto;
-            width: 3px;
-        }
-
-        &:not(.selected):hover::before {
-            animation: var(--animation);
-            animation-name: fade_in;
-        }
-    }
-}
-
-@keyframes fade_in {
-    0% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}
+.section_btns {
+    flex-shrink: 0;
+    display: flex;
+    flex-flow: column;
+    overflow: auto;
+
+    .filler {
+        position: relative;
+        height: 100%;
+    }
+
+    .section_btn {
+        @include input_basic;
+
+        position: relative;
+        text-align: left;
+        padding: 10px;
+        padding-right: 11px;
+        cursor: pointer;
+
+        &.selected {
+            cursor: default;
+        }
+
+        &.selected::before,
+        &:not(.selected):hover::before {
+            content: '';
+            height: 33px;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 3px;
+            margin: auto;
+            width: 3px;
+        }
+
+        &:not(.selected):hover::before {
+            animation: var(--animation);
+            animation-name: fade_in;
+        }
+    }
+}
+
+@keyframes fade_in {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}

package/scss/settings/sections.scss

@@ -1,3 +1,10 @@
+.sections_and_offers {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
 .sections {
     flex-grow: 1;
     height: 100%;
@@ -8,6 +15,21 @@
     margin: $main_margin;
 }
 
+.offers {
+    @include border_top;
+
+    order: 1;
+
+    .offers_inner {
+        margin: $main_margin;
+        margin-top: $gap;
+    }
+
+    + .sections .section {
+        margin-bottom: $gap;
+    }
+}
+
 .subsection {
     .name {
         margin: 0;

package/scss/settings/transitions.scss

@@ -1,6 +1,6 @@
-.input_item,
-.input_w,
-.help, {
+.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: 22px;
+$checkmark_size: 18px;
+
+.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;
+    }
+}