jobdone-shared-files 0.0.1-beta.8 → 0.0.1-beta.80

package/style/scss/Settings/_Mixins.scss

@@ -1,229 +1,229 @@
-// ====================================
-// Custom Mixins 清單 (依順序排序)
-// ====================================
-
-// Layout 各種置中方法
-// scrollbar樣式
-
-// 尺寸設定: rwd-square / size / solid-size
-// Text: 文字溢排
-// List Style: 數字標號
-
-// Image 背景 2x 3x 設定
-
-// ====================================
-// Layout 各種置中方法
-// ====================================
-
-// 使用 flex 上下左右置中
-@mixin flex-center() {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-// 使用 position 上下左右置中
-@mixin position-center() {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: auto;
-}
-
-// 使用inline-block:before垂直至中
-@mixin vertical-middle() {
-    // 加在父層
-    &:before {
-        content: "";
-        display: inline-block;
-        vertical-align: middle;
-        width: 0;
-        height: 100%;
-    }
-}
-
-@mixin vertical-middle-item() {
-    // 加在要置中的項目
-    display: inline-block;
-    vertical-align: middle;
-}
-
-// ====================================
-// scrollbar樣式
-// ====================================
-
-:root {
-    --scrollbar-width: 10px;
-    --scrollbar-hover-color: var(--bs-primary);
-}
-@mixin scrollbar(
-    $background: rgba(var(--bs-emphasis-color-rgb), 0.05),
-    $default-color: rgba(var(--bs-emphasis-color-rgb), 0.2),
-    $hover-color: var(--scrollbar-hover-color),
-    $width: var(--scrollbar-width),
-    $height: var(--scrollbar-width),
-    $border-radius: var(--scrollbar-width),
-    $y: auto,
-    $x: hidden
-) {
-    overflow-y: $y;
-    overflow-x: $x;
-
-    // for FireFox
-    scrollbar-width: auto;
-    scrollbar-color: $default-color $background;
-
-    &::-webkit-scrollbar {
-        width: $width;
-        height: $height;
-    }
-    &::-webkit-scrollbar,
-    &::-webkit-scrollbar-track {
-        background-color: $background;
-    }
-    &::-webkit-scrollbar-thumb {
-        background-color: $default-color;
-        border-radius: $border-radius;
-    }
-    &:hover {
-        // for FireFox
-        scrollbar-color: $hover-color $background;
-
-        &::-webkit-scrollbar-thumb {
-            border-radius: $border-radius;
-            background-color: $hover-color;
-        }
-    }
-}
-
-// ====================================
-// 尺寸設定: rwd-square / size / solid-width
-// ====================================
-
-@mixin rwd-square($size) {
-    width: $size;
-    height: auto;
-    &:before {
-        content: "";
-        display: block;
-        padding-bottom: 100%;
-    }
-}
-
-@mixin size($w, $h: $w) {
-    width: $w;
-    height: $h;
-}
-
-@mixin solid-size($w, $h: $w) {
-    width: $w;
-    max-width: $w;
-    min-width: $w;
-    height: $h;
-}
-
-// ====================================
-// Text: 文字溢排
-// ====================================
-
-// 單行
-@mixin text-overflow() {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-// 多行
-@mixin text-line-clamp($line-clamp) {
-    display: -webkit-box;
-    -webkit-line-clamp: $line-clamp;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-}
-
-// ====================================
-// List Style: 數字標號
-// ====================================
-
-// 數字標號
-@mixin list-counter() {
-    list-style-type: none;
-    padding: 0;
-    margin: auto;
-    li {
-        counter-increment: step-counter;
-        &:before {
-            content: counter(step-counter);
-            display: inline-block;
-            vertical-align: top;
-            font-size: 16px;
-            text-align: center;
-        }
-    }
-}
-
-// ====================================
-// Image 背景 2x 3x 設定
-// ====================================
-@mixin background-image-retina($file, $type) {
-    background-image: url($file + "." + $type);
-    @media screen and (-webkit-min-device-pixel-ratio: 2),
-        (-moz-min-device-pixel-ratio: 2),
-        screen and (min--moz-device-pixel-ratio: 2) {
-        background-image: url($file + "@2x." + $type);
-    }
-    @media screen and (-webkit-min-device-pixel-ratio: 3),
-        (-moz-min-device-pixel-ratio: 3),
-        screen and (min--moz-device-pixel-ratio: 3) {
-        background-image: url($file + "@3x." + $type);
-    }
-}
-
-@mixin background-image-retina-amp($file, $type) {
-    background-image: url($file + "." + $type);
-    @media screen and (-webkit-min-device-pixel-ratio: 2),
-        (-moz-min-device-pixel-ratio: 2),
-        screen and (min-resolution: 2dppx) {
-        background-image: url($file + "@2x." + $type);
-    }
-    @media screen and (-webkit-min-device-pixel-ratio: 3),
-        (-moz-min-device-pixel-ratio: 3),
-        screen and (min-resolution: 3dppx) {
-        background-image: url($file + "@3x." + $type);
-    }
-}
-
-// ====================================
-// Construction Mixins
-// ====================================
-
-@mixin tableHeadTH() {
-    border-radius: 0;
-    background-color: $gray-200;
-    font-size: 0.85rem;
-    font-weight: normal;
-    letter-spacing: 0.5px;
-    color: $gray-600;
-    padding-left: 0.75rem;
-}
-
-@mixin tableTdNum() {
-    color: $gray-500;
-    font-size: 0.85rem;
-    vertical-align: middle !important;
-}
-
-// TODO: 待刪除，已改成 LayoutBase 的 .btn-link-light-bg
-@mixin linkBtn() {
-    text-decoration: none;
-    letter-spacing: 0.5px;
-    display: flex;
-    align-items: center;
-    margin-right: 0.5rem;
-    &:hover {
-        color: $primary;
-        background-color: rgba($primary, 0.1);
-    }
-}
+// ====================================
+// Custom Mixins 清單 (依順序排序)
+// ====================================
+
+// Layout 各種置中方法
+// scrollbar樣式
+
+// 尺寸設定: rwd-square / size / solid-size
+// Text: 文字溢排
+// List Style: 數字標號
+
+// Image 背景 2x 3x 設定
+
+// ====================================
+// Layout 各種置中方法
+// ====================================
+
+// 使用 flex 上下左右置中
+@mixin flex-center() {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+// 使用 position 上下左右置中
+@mixin position-center() {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+}
+
+// 使用inline-block:before垂直至中
+@mixin vertical-middle() {
+    // 加在父層
+    &:before {
+        content: "";
+        display: inline-block;
+        vertical-align: middle;
+        width: 0;
+        height: 100%;
+    }
+}
+
+@mixin vertical-middle-item() {
+    // 加在要置中的項目
+    display: inline-block;
+    vertical-align: middle;
+}
+
+// ====================================
+// scrollbar樣式
+// ====================================
+
+:root {
+    --scrollbar-width: 10px;
+    --scrollbar-hover-color: var(--bs-primary);
+}
+@mixin scrollbar(
+    $background: rgba(var(--bs-emphasis-color-rgb), 0.05),
+    $default-color: rgba(var(--bs-emphasis-color-rgb), 0.2),
+    $hover-color: var(--scrollbar-hover-color),
+    $width: var(--scrollbar-width),
+    $height: var(--scrollbar-width),
+    $border-radius: var(--scrollbar-width),
+    $y: auto,
+    $x: hidden
+) {
+    overflow-y: $y;
+    overflow-x: $x;
+
+    // for FireFox
+    scrollbar-width: auto;
+    scrollbar-color: $default-color $background;
+
+    &::-webkit-scrollbar {
+        width: $width;
+        height: $height;
+    }
+    &::-webkit-scrollbar,
+    &::-webkit-scrollbar-track {
+        background-color: $background;
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: $default-color;
+        border-radius: $border-radius;
+    }
+    &:hover {
+        // for FireFox
+        scrollbar-color: $hover-color $background;
+
+        &::-webkit-scrollbar-thumb {
+            border-radius: $border-radius;
+            background-color: $hover-color;
+        }
+    }
+}
+
+// ====================================
+// 尺寸設定: rwd-square / size / solid-width
+// ====================================
+
+@mixin rwd-square($size) {
+    width: $size;
+    height: auto;
+    &:before {
+        content: "";
+        display: block;
+        padding-bottom: 100%;
+    }
+}
+
+@mixin size($w, $h: $w) {
+    width: $w;
+    height: $h;
+}
+
+@mixin solid-size($w, $h: $w) {
+    width: $w;
+    max-width: $w;
+    min-width: $w;
+    height: $h;
+}
+
+// ====================================
+// Text: 文字溢排
+// ====================================
+
+// 單行
+@mixin text-overflow() {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+// 多行
+@mixin text-line-clamp($line-clamp) {
+    display: -webkit-box;
+    -webkit-line-clamp: $line-clamp;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+// ====================================
+// List Style: 數字標號
+// ====================================
+
+// 數字標號
+@mixin list-counter() {
+    list-style-type: none;
+    padding: 0;
+    margin: auto;
+    li {
+        counter-increment: step-counter;
+        &:before {
+            content: counter(step-counter);
+            display: inline-block;
+            vertical-align: top;
+            font-size: 16px;
+            text-align: center;
+        }
+    }
+}
+
+// ====================================
+// Image 背景 2x 3x 設定
+// ====================================
+@mixin background-image-retina($file, $type) {
+    background-image: url($file + "." + $type);
+    @media screen and (-webkit-min-device-pixel-ratio: 2),
+        (-moz-min-device-pixel-ratio: 2),
+        screen and (min--moz-device-pixel-ratio: 2) {
+        background-image: url($file + "@2x." + $type);
+    }
+    @media screen and (-webkit-min-device-pixel-ratio: 3),
+        (-moz-min-device-pixel-ratio: 3),
+        screen and (min--moz-device-pixel-ratio: 3) {
+        background-image: url($file + "@3x." + $type);
+    }
+}
+
+@mixin background-image-retina-amp($file, $type) {
+    background-image: url($file + "." + $type);
+    @media screen and (-webkit-min-device-pixel-ratio: 2),
+        (-moz-min-device-pixel-ratio: 2),
+        screen and (min-resolution: 2dppx) {
+        background-image: url($file + "@2x." + $type);
+    }
+    @media screen and (-webkit-min-device-pixel-ratio: 3),
+        (-moz-min-device-pixel-ratio: 3),
+        screen and (min-resolution: 3dppx) {
+        background-image: url($file + "@3x." + $type);
+    }
+}
+
+// ====================================
+// Construction Mixins
+// ====================================
+
+@mixin tableHeadTH() {
+    border-radius: 0;
+    background-color: $gray-200;
+    font-size: 0.85rem;
+    font-weight: normal;
+    letter-spacing: 0.5px;
+    color: $gray-600;
+    padding-left: 0.75rem;
+}
+
+@mixin tableTdNum() {
+    color: $gray-500;
+    font-size: 0.85rem;
+    vertical-align: middle !important;
+}
+
+// TODO: 待刪除，已改成 LayoutBase 的 .btn-link-light-bg
+@mixin linkBtn() {
+    text-decoration: none;
+    letter-spacing: 0.5px;
+    display: flex;
+    align-items: center;
+    margin-right: 0.5rem;
+    &:hover {
+        color: $primary;
+        background-color: rgba($primary, 0.1);
+    }
+}

package/style/scss/Settings/_MobileVariables.scss

@@ -0,0 +1,12 @@
+$safe-area-inset-top: env(safe-area-inset-top);
+$safe-area-inset-bottom: env(safe-area-inset-bottom);
+
+$gradient-bg: linear-gradient(138deg, rgba(100, 148, 241, 0.05) 26.2%, rgba(165, 185, 255, 0.29) 88.06%), var(--gray-000);
+
+$gradient-main: linear-gradient(270deg, #647AF1 33.33%, #0084E4 100%);
+$gradient-main-translucent: linear-gradient(270deg, rgba(63, 90, 233, 0.8) 33.33%, rgba(0, 130, 220, 0.8) 100%);
+
+$gradient-glow: linear-gradient(131deg, rgba(17, 198, 245, 0.55) 0%, rgba(24, 196, 255, 0.00) 100%);
+$gradient-glow-2end: linear-gradient(131deg, rgba(17, 198, 245, 0.20) 0%, rgba(24, 196, 255, 0.00) 45.31%, rgba(17, 198, 245, 0.20) 100%);
+
+$backdrop-blur-base: blur(5px);

package/style/scss/Settings/_basic-import.scss

@@ -1,5 +1,6 @@
-@import "../Bootstrap/functions";
-@import "../Bootstrap/mixins";
-@import "./bs-variables";
-@import "./custom-variables";
+@import "../../../../bootstrap/scss/functions";
+@import "../../../../bootstrap/scss/mixins";
+@import "./bs-variables";
+@import "./custom-variables";
+@import "./color-mode";
 @import "./Mixins";

package/style/scss/Settings/_bs-variables-dark.scss

@@ -1,70 +1,70 @@
-// Dark color mode variables
-//
-// Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
-
-//
-// Global colors
-//
-
-// scss-docs-start sass-dark-mode-vars
-$primary-text-dark:                 $blue-300 !default;
-$secondary-text-dark:               $gray-300 !default;
-$success-text-dark:                 $green-300 !default;
-$info-text-dark:                    $cyan-300 !default;
-$warning-text-dark:                 $yellow-300 !default;
-$danger-text-dark:                  $red-300 !default;
-$light-text-dark:                   $gray-100 !default;
-$dark-text-dark:                    $gray-300 !default;
-
-$primary-bg-subtle-dark:            $blue-900 !default;
-$secondary-bg-subtle-dark:          $gray-900 !default;
-$success-bg-subtle-dark:            $green-900 !default;
-$info-bg-subtle-dark:               $cyan-900 !default;
-$warning-bg-subtle-dark:            $yellow-900 !default;
-$danger-bg-subtle-dark:             $red-900 !default;
-$light-bg-subtle-dark:              $gray-800 !default;
-$dark-bg-subtle-dark:               mix($gray-800, $black) !default;
-
-$primary-border-subtle-dark:        $blue-700 !default;
-$secondary-border-subtle-dark:      $gray-700 !default;
-$success-border-subtle-dark:        $green-700 !default;
-$info-border-subtle-dark:           $cyan-800 !default;
-$warning-border-subtle-dark:        $yellow-800 !default;
-$danger-border-subtle-dark:         $red-700 !default;
-$light-border-subtle-dark:          $gray-700 !default;
-$dark-border-subtle-dark:           $gray-800 !default;
-
-$body-color-dark:                   $gray-500 !default;
-$body-bg-dark:                      $gray-900 !default;
-$body-emphasis-color-dark:          $gray-100 !default;
-$body-secondary-color-dark:         rgba($body-color-dark, .75) !default;
-$body-secondary-bg-dark:            $gray-800 !default;
-$body-tertiary-color-dark:          rgba($body-color-dark, .5) !default;
-$body-tertiary-bg-dark:             mix($gray-800, $gray-900, 50%) !default;
-$emphasis-color-dark:               $white !default;
-$border-color-dark:                 $gray-700 !default;
-$border-color-translucent-dark:     rgba($white, .15) !default;
-$headings-color-dark:               #fff !default;
-$link-color-dark:                   $blue-300 !default;
-$link-hover-color-dark:             $blue-200 !default;
-$code-color-dark:                   $pink-300 !default;
-
-
-//
-// Forms
-//
-
-$form-select-indicator-color-dark:  $body-color-dark !default;
-$form-select-indicator-dark:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
-
-$form-switch-color-dark:            rgba($white, .25) !default;
-$form-switch-bg-image-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
-
-
-//
-// Accordion
-//
-
-$accordion-button-icon-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-text-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
-$accordion-button-active-icon-dark:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-text-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
-// scss-docs-end sass-dark-mode-vars
+// Dark color mode variables
+//
+// Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
+
+//
+// Global colors
+//
+
+// scss-docs-start sass-dark-mode-vars
+$primary-text-dark:                 $blue-300 !default;
+$secondary-text-dark:               $gray-300 !default;
+$success-text-dark:                 $green-300 !default;
+$info-text-dark:                    $cyan-300 !default;
+$warning-text-dark:                 $yellow-300 !default;
+$danger-text-dark:                  $red-300 !default;
+$light-text-dark:                   $gray-100 !default;
+$dark-text-dark:                    $gray-300 !default;
+
+$primary-bg-subtle-dark:            $blue-900 !default;
+$secondary-bg-subtle-dark:          $gray-900 !default;
+$success-bg-subtle-dark:            $green-900 !default;
+$info-bg-subtle-dark:               $cyan-900 !default;
+$warning-bg-subtle-dark:            $yellow-900 !default;
+$danger-bg-subtle-dark:             $red-900 !default;
+$light-bg-subtle-dark:              $gray-800 !default;
+$dark-bg-subtle-dark:               mix($gray-800, $black) !default;
+
+$primary-border-subtle-dark:        $blue-700 !default;
+$secondary-border-subtle-dark:      $gray-700 !default;
+$success-border-subtle-dark:        $green-700 !default;
+$info-border-subtle-dark:           $cyan-800 !default;
+$warning-border-subtle-dark:        $yellow-800 !default;
+$danger-border-subtle-dark:         $red-700 !default;
+$light-border-subtle-dark:          $gray-700 !default;
+$dark-border-subtle-dark:           $gray-800 !default;
+
+$body-color-dark:                   $gray-500 !default;
+$body-bg-dark:                      $gray-900 !default;
+$body-emphasis-color-dark:          $gray-100 !default;
+$body-secondary-color-dark:         rgba($body-color-dark, .75) !default;
+$body-secondary-bg-dark:            $gray-800 !default;
+$body-tertiary-color-dark:          rgba($body-color-dark, .5) !default;
+$body-tertiary-bg-dark:             mix($gray-800, $gray-900, 50%) !default;
+$emphasis-color-dark:               $white !default;
+$border-color-dark:                 $gray-700 !default;
+$border-color-translucent-dark:     rgba($white, .15) !default;
+$headings-color-dark:               #fff !default;
+$link-color-dark:                   $blue-300 !default;
+$link-hover-color-dark:             $blue-200 !default;
+$code-color-dark:                   $pink-300 !default;
+
+
+//
+// Forms
+//
+
+$form-select-indicator-color-dark:  $body-color-dark !default;
+$form-select-indicator-dark:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
+
+$form-switch-color-dark:            rgba($white, .25) !default;
+$form-switch-bg-image-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
+
+
+//
+// Accordion
+//
+
+$accordion-button-icon-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-text-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+$accordion-button-active-icon-dark:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-text-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+// scss-docs-end sass-dark-mode-vars