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

package/style/scss/Layout/LayoutBase.scss

@@ -1,942 +1,1015 @@
-// ====================================
-// Plugin
-// ====================================
-
-// Custom Bootstrap
-@import "../Bootstrap/functions";
-@import "../Settings/bs-variables";
-@import "../Bootstrap/bootstrap.scss";
-
-
-// ====================================
-// Helpers
-// ====================================
-
-// Mixins
-@import "../Settings/Mixins";
-
-
-// ====================================
-// Custom Style
-// ====================================
-
-@import "../Settings/color-mode";
-@import "../Settings/custom-variables";
-
-
-@mixin gradient-bg(){
-    &:before{
-        content: "";
-        display: block;
-        @include position-center();
-        z-index: 0;
-        background: $gradient-blue-light;
-        pointer-events: none;
-        transition: $transition-base;
-    }
-}
-
-@mixin gradient-bg-hover-to-show($opacity: 1){
-    @include gradient-bg();
-    &:before{ opacity: 0; }
-    &:hover:before{ opacity: $opacity; }
-}
-
-// general ------------------------------------------
-[v-cloak]{
-    display: none !important;
-}
-
-body,
-.overflow-auto, .overflow-scroll,
-.overflow-y-auto, .overflow-y-scroll,
-.offcanvas-body, textarea{
-    @include scrollbar();
-}
-
-.overflow-x-auto, .overflow-x-scroll, .scrollbar-sm, .table-responsive{
-    @include scrollbar();
-    --scrollbar-width: 6px;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-}
-
-.scrollbar-gutter-stable{
-    // Safari 暫不支援
-    scrollbar-gutter: stable;
-}
-
-body{
-    background-color: var(--gray-200);
-    --maz-color-primary: var(--bs-primary);
-    --maz-color-secondary: var(--bs-secondary);
-    --maz-color-info: var(--bs-info);
-    --maz-color-success: var(--bs-success);
-    --maz-color-warning: var(--bs-warning);
-    --maz-color-danger: var(--bs-danger);
-    --maz-color-bg: var(--bs-body-bg);
-    --maz-color-text: var(--bs-body-color);
-    --maz-color-muted: var(--bs-secondary-color);
-}
-
-ul, ol{
-    &.list-reset{
-        list-style-type: none;
-        padding-left: 0;
-    }
-}
-// general ------------------------------------------
-
-
-// text / link ------------------------------------------
-a{
-    text-decoration: none;
-    // 如果需要底線使用 <u></u> tag
-    transition: $transition-base;
-    &.a-reset-color{
-        color: inherit;
-    }
-    &.a-hover-gradient{
-        position: relative;
-        @include gradient-bg-hover-to-show();
-    }
-}
-
-.text-link{
-    color: var(--bs-link-color);
-    &:hover{
-        color: var(--bs-link-hover-color);
-    }
-}
-
-.text-overflow{
-    @include text-overflow();
-}
-
-@for $i from 1 through 5 {
-    .text-line-clamp-#{$i} {
-        @include text-line-clamp(#{$i});
-    }
-}
-
-@for $i from 1 through 5 {
-    .letter-spacing-#{$i} {
-        letter-spacing: #{$i}px;
-    }
-}
-
-// text / link ------------------------------------------
-
-
-
-// badge outline ------------------------------------------
-
-@each $color, $value in $colors {
-    .badge-outline-#{$color}{
-        color: $value;
-        border: $border-width solid rgba($value, .5);
-        background-color: rgba($value, .1);
-    }
-}
-
-// badge outline ------------------------------------------
-
-
-
-// checkbox / radio ------------------------------------------
-
-.check-label{
-    cursor: pointer;
-    &, &:before, span{
-        vertical-align: middle;
-        transition: $transition-base;
-    }
-    &:before{
-        content: "check_box_outline_blank";
-        display: inline-block;
-        margin-right: .1em;
-        color: var(--gray-500);
-        font-family: 'Material Icons';
-        font-size: 120%;
-        line-height: inherit;
-        white-space: nowrap;
-        -webkit-font-feature-settings: 'liga';
-        -webkit-font-smoothing: antialiased;
-    }
-    &:not(.badge):hover{
-        &, &:before, span{
-            color: $primary;
-        }
-    }
-}
-
-.check-group{
-    position: relative;
-    display: inline-block;
-    vertical-align: middle;
-    &:not(:last-child){
-        margin-right: 1em;
-    }
-    > input[type="checkbox"], > input[type="radio"]{
-        position: absolute;
-        opacity: 0;
-        pointer-events: none;
-        &:checked ~ .check-label:before{
-            color: $primary;
-        }
-        // disabled style
-        &:disabled ~ .check-label{
-            cursor: not-allowed;
-            span, &:hover span,
-            &:before, &:hover &:before{
-                color: var(--gray-500);
-            }
-        }
-        &:checked:disabled ~ .check-label{
-            &:before, &:hover &:before{
-                color: var(--gray-600);
-            }
-        }
-    }
-    > input[type="checkbox"]         ~ .check-label:before{ content: "check_box_outline_blank"; }
-    > input[type="radio"]            ~ .check-label:before{ content: "radio_button_unchecked"; }
-    > input[type="checkbox"]:checked ~ .check-label:before{ content: "check_box"; }
-    > input[type="radio"]:checked    ~ .check-label:before{ content: "radio_button_checked"; }
-}
-// checkbox / radio ------------------------------------------
-
-// star ------------------------------------------
-.check-star-group{
-    > input[type="checkbox"], > input[type="radio"]{
-        ~ .check-label:before{
-            content: "star_border";
-            font-size: 1.5em;
-        }
-        ~ .check-label:hover:before{
-            color: $warning;
-        }
-        &:checked ~ .check-label:before{
-            content: "star";
-            color: $warning;
-        }
-    }
-}
-// star ------------------------------------------
-
-
-// switch ------------------------------------------
-
-:root{
-    --switch-w: 24px;
-    --switch-h: 12px;
-    --switch-padding: 2px;
-    --switch-ball-size: calc( var(--switch-h) - var(--switch-padding)*2);
-
-}
-.check-switch-group{
-    // reset
-    .check-label:before{ content: ""; }
-    .check-label .switch-item{
-        position: relative;
-        display: inline-block;
-        width: var(--switch-w);
-        height: var(--switch-h);
-        border-radius: var(--switch-h);
-        background-color: var(--gray-500);
-        vertical-align: middle;
-        &, &:before{
-            transition: $transition-base;
-        }
-        &:before{
-            content: "";
-            position: absolute;
-            top: 0;
-            left: var(--switch-padding);
-            bottom: 0;
-            margin: auto;
-            @include size(var(--switch-ball-size));
-            border-radius: 50%;
-            background-color: $white;
-        }
-    }
-    > input[type="checkbox"], > input[type="radio"]{
-        // reset
-        ~ .check-label:before{ content: ""; }
-        &:checked ~ .check-label:before{ content: ""; }
-
-        &:not(:disabled) ~ .check-label:hover .switch-item:before{
-            will-change: left;
-        }
-
-        &:checked ~ .check-label .switch-item:before{
-            left: calc( var(--switch-w) - var(--switch-padding) - var(--switch-ball-size));
-        }
-
-        // disabled style
-        &:disabled ~ .check-label .switch-item{
-            background-color: var(--gray-400);
-        }
-        &:checked:disabled ~ .check-label .switch-item{
-            background-color: var(--gray-600);
-        }
-    }
-    &-md{
-        --switch-w: 30px;
-        --switch-h: 15px;
-        --switch-padding: 3px;
-        --switch-ball-size: calc( var(--switch-h) - var(--switch-padding)*2);
-    }
-    &-lg{
-        --switch-w: 36px;
-        --switch-h: 18px;
-        --switch-padding: 3px;
-        --switch-ball-size: calc( var(--switch-h) - var(--switch-padding)*2);
-    }
-    &-with-description{
-        .switch-item{
-            margin-top: .35em;
-        }
-        .check-label{
-            display: flex;
-        }
-    }
-    &-display .check-label{
-            cursor: auto;
-    }
-}
-@each $color, $value in $colors {
-    .check-switch-group.check-switch-group-#{$color}{
-        &:hover .check-label .switch-item{
-            background-color: rgba($value, .5);
-        }
-        > input[type="checkbox"], > input[type="radio"]{
-            &:checked:not(:disabled) ~ .check-label .switch-item{
-                background-color: $value;
-            }
-        }
-        &.check-switch-group-display{
-            pointer-events: none;
-        }
-        &.check-switch-group-display.active .check-label .switch-item{
-            background-color: $value;
-            &:before{
-                left: calc( var(--switch-w) - var(--switch-padding) - var(--switch-ball-size));
-            }
-        }
-    }
-}
-
-// badge 版本
-.check-label.badge{
-    --bs-badge-padding-x: 1em;
-    --bs-badge-padding-y: 0.5em;
-    --bs-badge-font-size: var(--bs-body-font-size);
-    --bs-badge-font-weight: --bs-body-font-weight;
-}
-.check-switch-group.check-switch-group{
-    input:not(:checked) ~ .check-label.badge{
-        background-color: var(--gray-100);
-        border-color: var(--gray-300);
-        span{
-            color: var(--gray-500);
-        }
-    }
-    input:not(:checked):disabled ~ .check-label.badge{
-        &:hover{
-            background-color: var(--gray-100);
-            border-color: var(--gray-300);
-        }
-        &:hover span, span{
-            color: var(--gray-400);
-        }
-    }
-    input:checked ~ .check-label.badge{
-        &:hover span, span{
-            color: currentColor;
-        }
-        .switch-item{
-            background-color: currentColor;
-        }
-    }
-}
-@each $color, $value in $colors {
-    .check-switch-group.check-switch-group-#{$color}{
-        input:not(:disabled):not(:checked) ~ .check-label.badge:hover{
-            background-color: rgba($value, .05);
-            border-color: rgba($value, .25);
-            .switch-item{
-                background-color: rgba($value, .5);
-            }
-            span{
-                color: rgba($value, .75);
-            }
-        }
-    }
-}
-// switch ------------------------------------------
-
-
-
-
-// table ------------------------------------------
-th, td{
-    transition: $transition-base;
-}
-.table > .thead-default:not(caption) > * > *{
-    font-size: $font-size-sm;
-    background-color: var(--gray-200);
-    letter-spacing: 0.5px;
-}
-
-// firefox 暫不支援
-.table tr:has(.dropdown-delete:hover){
-    th:not([scope="col"]), td:not([scope="col"]){
-        --bs-table-accent-bg: transparent;
-        --bs-table-bg: transparent;
-        background-color: $table-danger-bg;
-        color: var(--bs-danger);
-    }
-}
-
-// table ------------------------------------------
-
-
-
-// icon ------------------------------------------
-.text-with-icon > *{
-    vertical-align: middle;
-}
-
-.material-icons{
-    $icon-sizes: 14, 18, 24, 28, 32;
-
-    font-size: 24px;
-    @each $size in $icon-sizes{
-        &.icon-#{$size} { font-size: #{$size}px; }
-    }
-}
-// icon ------------------------------------------
-
-
-// button ------------------------------------------
-.btn > *{
-    vertical-align: middle;
-}
-
-.btn-round-effect{
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    @include size(2em);
-    padding: 0;
-    text-decoration: none;
-    *{
-        z-index: 2;
-    }
-    &:before{
-        content: "";
-        display: block;
-        @include position-center();
-        border-radius: 50%;
-        background-color: var(--bs-link-color);
-        z-index: 1;
-        opacity: 0;
-        transform: scale(0);
-        transition: $transition-base;
-    }
-    &:hover:before{
-        opacity: .1;
-        transform: scale(1);
-    }
-}
-
-.btn-link-light-bg {
-    &:hover {
-        color: var(--bs-btn-color)
-        background-color: rgba(var(--bs-link-color-rgb), .1);
-        text-decoration: none;
-    }
-}
-
-
-@keyframes gradient-position {
-    0% {
-        transform: translateX(0);
-    }
-    50% {
-        transform: translateX(-50%);
-    }
-    100% {
-        transform: translateX(0);
-    }
-}
-.btn-gradient-effect{
-    --bs-btn-color: #fff;
-    --bs-btn-hover-color: #fff;
-    --bs-btn-active-color: #fff;
-
-    position: relative;
-    overflow: hidden;
-    border: 0;
-
-    &:before{
-        content: "";
-        display: block;
-        position: absolute;
-        top: 0; left: 0;
-        width: 200%; height: 100%;
-        background: linear-gradient(110deg, $cyan 0%, $purple 50%, $cyan 100%);
-        animation: gradient-position 3s ease-in-out infinite;
-        animation-fill-mode: both;
-        z-index: 1;
-        transition: $transition-base;
-    }
-    &, &:hover, &:hover:active{
-        background-color: $primary;
-    }
-    &:hover:before{
-        opacity: .4;
-    }
-    &:focus{
-        box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
-    }
-    > *{
-        position: relative;
-        z-index: 2;
-    }
-}
-// button ------------------------------------------
-
-
-// input ------------------------------------------
-.form-group{
-    > label, .form-label{
-        margin-bottom: 0.25rem;
-        color: var(--gray-500);
-        font-size: $font-size-sm;
-        font-weight: $font-weight-bold;
-    }
-}
-
-.form-group-frame{
-    padding: 1rem;
-    border-bottom: $border-width solid $border-color;
-}
-// input ------------------------------------------
-
-
-// image ------------------------------------------
-.thumbnail-content{
-    $thumbnail-sizes: 32, 50, 100, 150;
-
-    @include size(50px);
-    background-color: $white;
-    background-position: 50% 50%;
-    background-size: cover;
-    border: $border-width solid var(--#{$prefix}border-color);
-    border-radius: 50%;
-    overflow: hidden;
-    @each $size in $thumbnail-sizes{
-        &.thumbnail-#{$size} { @include solid-size(#{$size}px); }
-    }
-    &.thumbnail-rwd{
-        @include rwd-square(100%);
-    }
-}
-// image ------------------------------------------
-
-
-// dropdown ------------------------------------------
-.dropdown-menu{
-    box-shadow: $box-shadow;
-}
-.dropdown-delete{
-    color: $danger;
-    &:hover{
-        --bs-dropdown-link-hover-bg: var(--bs-danger);
-        background-color: $danger;
-    }
-}
-.dropdown-menu{
-    --scrollbar-width: 8px;
-    --scrollbar-hover-color: rgba(var(--bs-link-color-rgb), 0.5);
-    overflow: auto;
-    overscroll-behavior: contain;
-    @include scrollbar();
-}
-// dropdown ------------------------------------------
-
-
-// modal ------------------------------------------
-.modal{
-    backdrop-filter: blur(2px);
-}
-
-.modal-md{
-    min-width: 650px;
-}
-// modal ------------------------------------------
-
-
-// offcanvas ------------------------------------------
-.offcanvas{
-    &-md-size{
-        --bs-offcanvas-width: 550px;
-    }
-    &-lg-size{
-        --bs-offcanvas-width: 800px;
-    }
-    &-xl-size{
-        --bs-offcanvas-width: 1000px;
-    }
-}
-// offcanvas ------------------------------------------
-
-
-// navbar ------------------------------------------
-$navbar-h: 60px;
-.navbar-main{
-    &, .btn.btn-normal, .navbar-line-item {
-        min-height: $navbar-h;
-    }
-    .btn.btn-normal{
-        @include flex-center();
-        border-radius: 0;
-        color: var(--bs-nav-link-color);
-        &:hover{
-            color: var(--bs-link-color);
-            background-color: $primary-bg-light;
-        }
-    }
-    .btn-square{
-        @include size($navbar-h);
-    }
-}
-// navbar ------------------------------------------
-
-
-// 側邊的清單 ------------------------------------------
-
-$list-highlight-border-w: .4rem;
-
-@mixin list-group-active(){
-    font-weight: $font-weight-medium;
-    border-left-color: currentColor;
-    --bs-list-group-active-color: var(--bs-link-color);
-    --bs-list-group-active-bg: transparent;
-    @include gradient-bg();
-}
-
-.list-group{
-    overflow: hidden;
-    > li{
-        position: relative;
-    }
-    .material-icon-more{
-        transition: $transition-base;
-    }
-}
-
-// 一般選單 style
-$list-item-padding-x: 1rem;
-
-.list-group-aside{
-    border-radius: 0;
-    .list-group-item{
-        display: flex;
-        align-items: center;
-        padding: .8rem $list-item-padding-x;
-        border-right: 0;
-        border-color: transparent;
-        border-left: $list-highlight-border-w solid transparent;
-        background-color: var(--bs-body-bg);
-        cursor: pointer;
-        transition: $transition-base;
-        &:before{ content: ""; }
-        &.active{
-            @include list-group-active();
-        }
-        &:not(.active):hover{
-            border-top-color: var(--bs-body-bg);
-            border-bottom-color: rgba(var(--bs-link-color-rgb), .1);
-            border-left-color: $primary-sub-highlight;
-            --bs-list-group-action-hover-color: rgba(var(--bs-link-color-rgb), .8);
-            --bs-list-group-action-hover-bg: transparent;
-            @include gradient-bg-hover-to-show(.7);
-        }
-        &:hover .material-icon-more{
-            color: var(--bs-link-color);
-        }
-    }
-}
-
-// 子選單 style
-.child-body, .child-container{
-    width: 100%;
-}
-.child-body{
-    background: var(--gray-100);
-}
-.child-container{
-    border-left: $list-highlight-border-w solid var(--gray-400);
-}
-.child-list-head{
-    padding: .25rem $list-item-padding-x;
-    color: var(--gray-500);
-    background-color: var(--gray-200);
-    font-weight: $font-weight-bold;
-    border-bottom: $border-width solid var(--gray-400);
-}
-a.child-list-item{
-    position: relative;
-    display: block;
-    padding: .5rem $list-item-padding-x;
-    font-size: $font-size-sm;
-    
-    &:hover{
-        color: var(--bs-link-color);
-    }
-    &.active{
-        color: var(--bs-link-color);
-        @include gradient-bg();
-    }
-    &.disabled, &:disabled{
-        color: var(--bs-list-group-disabled-color);
-        pointer-events: none;
-    }
-    @include gradient-bg-hover-to-show(.7);
-}
-
-
-// 子選單開合
-// https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css
-$list-toogle-speed: .35s;
-$list-toogle-in-background: $list-toogle-speed linear;
-
-.list-group-haschild:hover ~ .child-body{
-    &:after{             will-change: height, max-height; }
-    > .child-container { will-change: max-height, margin-bottom; }
-}
-
-.child-body{
-    position: relative;
-    display: flex;
-    overflow: hidden;
-    &:after { content: ''; }
-    // 關閉 -----------------
-    &:after{
-        height: 0;
-        max-height: 50px;
-        transition: height $list-toogle-in-background;
-    }
-    > .child-container {
-        margin-bottom: -2000px;
-        visibility: hidden;
-        max-height: 0;
-        transition: margin-bottom $list-toogle-speed cubic-bezier(1, 0, 1, 1),
-                    visibility 0s $list-toogle-speed,
-                    max-height 0s $list-toogle-speed;
-    }
-    // 關閉 -----------------
-}
-
-.list-group-haschild-input:checked{
-    ~ .list-group-item{
-        @include list-group-active();
-        .material-icon-more{
-            transform: rotate(-180deg);
-        }
-    }
-    ~ .child-body{
-        // 打開 -----------------
-        &:after {
-            height: 50px;
-            transition: height $list-toogle-in-background,
-                        max-height 0s $list-toogle-in-background;
-            max-height: 0px;
-        }
-        > .child-container{
-            transition: margin-bottom $list-toogle-speed cubic-bezier(0, 0, 0, 1);
-            margin-bottom: 0;
-            visibility: visible;
-            max-height: 1000000px;
-        }
-        // 打開 -----------------
-    }
-}
-
-// 側邊的清單 ------------------------------------------
-
-
-
-// navbar ------------------------------------------
-.nav-link.active{
-    font-weight: $font-weight-bold;
-}
-// navbar ------------------------------------------
-
-
-// 有底線的 tab bar ------------------------------------------
-.navbar-line{
-    &:hover .navbar-line-item{
-        &:before {                  will-change: width, left; }
-        ~ .navbar-line-item:before{ will-change: left; }
-    }
-    // LG 版本 (底線較粗)
-    &.navbar-line-lg .navbar-line-item:before{
-        border-bottom-width: 4px;
-    }
-}
-
-a.navbar-line-item{
-    --bs-link-color-rgb: 100, 122, 241;
-}
-.navbar-line-item{
-    position: relative;
-    @include flex-center();
-    --bs-navbar-nav-link-padding-x: 1.5rem;
-    color: var(--bs-nav-link-color);
-    &:before{
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 100%;
-        width: 0;
-        height: 100%;
-        border-bottom: 2px solid var(--bs-link-color);
-        transition: $transition-base;
-        pointer-events: none;
-        z-index: 1;
-    }
-    &:hover{
-        background: $primary-bg-light;
-        &:before {
-            width: 100%;
-            left: 0;
-        }
-        ~ .navbar-line-item:before{
-            left: 0;
-        }
-    }
-    &:not(.active):hover:before{
-        border-color: $primary-sub-highlight;
-    }
-    &.active:before{
-        width: 100%;
-        left: 0;
-    }
-}
-// dropdown 版本
-.navbar-line-item.dropdown{
-    padding: 0;
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-    // (firefox 暫不支援)
-    &:has(.dropdown-toggle[aria-expanded="true"]){
-        background: $primary-bg-light;
-        &:before{
-            width: 100%;
-            left: 0;
-            border-bottom-color: $primary-sub-highlight;
-        }
-    }
-    &:not(.active) .dropdown-link{
-        color: var(--bs-nav-link-color);
-    }
-    .dropdown-link{
-        @include flex-center();
-        height: 100%;
-        padding: var(--bs-nav-link-padding-y) var(--bs-navbar-nav-link-padding-x);
-    }
-    .dropdown-toggle[aria-expanded="true"]{
-        color: $primary;
-    }
-}
-
-
-.navbar[data-bs-theme="dark"]{
-    .navbar-line-item.dropdown:not(.active) .dropdown-link{
-        color: lighten($primary, 15%);
-    }
-    .navbar-nav .show > .nav-link, .navbar-nav .nav-link.active{
-        &, a{
-            color: $white;
-        }
-    }
-    .navbar-line-item:before{
-        border-bottom-color: lighten($primary, 15%);
-    }
-    .navbar-line-item.dropdown:not(.active) .dropdown-link,
-    .navbar-line-item:before{
-        opacity: .9;
-    }
-}
-// 有底線的 tab bar ------------------------------------------
-
-
-
-// 固定寬度 ------------------------------------------
-.w-33{
-    width: 33.33%;
-}
-.w-66{
-    width: 66.66%;
-}
-@for $i from 1 through 10 {
-    .w-#{$i}rem {
-        width: #{$i}rem;
-    }
-}
-
-// 固定寬度 ------------------------------------------
-
-
-
-// 無內容物 UI ------------------------------------------
-.no-content{
-    padding-top: 10rem;
-    .content-img > .material-icons, p{
-        opacity: .7;
-    }
-    .content-img > .material-icons{
-        font-size: 7rem;
-        opacity: .5;
-    }
-    p{
-        font-size: 1.25rem;
-    }
-}
-// 無內容物 UI ------------------------------------------
-
-
-
-// 暫定：螢幕寬度小於 992px 不可使用 ------------------------------------------
-.mobile-forbidden{
-    display: none;
-}
-@media (max-width: 992px) {
-    body{
-        overflow: hidden;
-    }
-    .mobile-forbidden{
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        margin: auto;
-        @include flex-center();
-        flex-direction: column;
-        padding: 2rem;
-        font-size: $font-size-lg;
-        text-align: center;
-        color: var(--gray-500);
-        background: $white $gradient-blue-light;
-        z-index: $zindex-max;
-        img {
-            width: 20rem;
-        }
-    }
-}
-// 暫定：螢幕寬度小於 992px 不可使用 ------------------------------------------
+// ====================================
+// Plugin
+// ====================================
+
+// Custom Bootstrap
+@import "../../../../bootstrap/scss/functions";
+@import "../Settings/bs-variables";
+@import "../../../../bootstrap/scss/bootstrap.scss";
+
+
+// ====================================
+// Helpers
+// ====================================
+
+// Mixins
+@import "../Settings/Mixins";
+
+
+// ====================================
+// Custom Style
+// ====================================
+
+@import "../Settings/color-mode";
+@import "../Settings/custom-variables";
+
+
+@mixin gradient-bg(){
+    &:before{
+        content: "";
+        display: block;
+        @include position-center();
+        z-index: 0;
+        background: $gradient-blue-light;
+        pointer-events: none;
+        transition: $transition-base;
+    }
+}
+
+@mixin gradient-bg-hover-to-show($opacity: 1){
+    @include gradient-bg();
+    &:before{ opacity: 0; }
+    &:hover:before{ opacity: $opacity; }
+}
+
+// general ------------------------------------------
+[v-cloak]{
+    display: none !important;
+}
+
+body,
+.overflow-auto, .overflow-scroll,
+.overflow-y-auto, .overflow-y-scroll,
+.offcanvas-body, textarea{
+    @include scrollbar();
+}
+
+.overflow-x-auto, .overflow-x-scroll, .scrollbar-sm, .table-responsive{
+    @include scrollbar();
+    --scrollbar-width: 6px;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+.scrollbar-gutter-stable{
+    // Safari 暫不支援
+    scrollbar-gutter: stable;
+}
+
+body{
+    background-color: var(--gray-200);
+    --maz-color-primary: var(--bs-primary);
+    --maz-color-secondary: var(--bs-secondary);
+    --maz-color-info: var(--bs-info);
+    --maz-color-success: var(--bs-success);
+    --maz-color-warning: var(--bs-warning);
+    --maz-color-danger: var(--bs-danger);
+    --maz-color-bg: var(--bs-body-bg);
+    --maz-color-text: var(--bs-body-color);
+    --maz-color-muted: var(--bs-secondary-color);
+}
+
+ul, ol{
+    &.list-reset{
+        list-style-type: none;
+        padding-left: 0;
+    }
+}
+// general ------------------------------------------
+
+
+// text / link ------------------------------------------
+a{
+    text-decoration: none;
+    // 如果需要底線使用 <u></u> tag
+    transition: $transition-base;
+    &.a-reset-color{
+        color: inherit;
+    }
+    &.a-hover-gradient{
+        position: relative;
+        @include gradient-bg-hover-to-show();
+    }
+}
+
+.text-link{
+    color: var(--bs-link-color);
+    &:hover{
+        color: var(--bs-link-hover-color);
+    }
+}
+
+.text-pre-wrap{
+    white-space: pre-wrap;
+}
+
+.fs-min{
+    font-size: 12px;
+}
+
+.text-overflow{
+    @include text-overflow();
+}
+
+@for $i from 1 through 5 {
+    .text-line-clamp-#{$i} {
+        @include text-line-clamp(#{$i});
+    }
+}
+
+@for $i from 1 through 5 {
+    .letter-spacing-#{$i} {
+        letter-spacing: #{$i}px;
+    }
+}
+
+// text / link ------------------------------------------
+
+
+// border ------------------------------------------
+.hover-border{
+    transition: $transition-base;
+    &:hover{
+        box-shadow: $focus-ring-box-shadow;
+    }
+}
+.active-border{
+    box-shadow: $focus-ring-box-shadow;
+}
+// border ------------------------------------------
+
+
+// badge outline ------------------------------------------
+
+@each $color, $value in $colors {
+    .badge-outline-#{$color}{
+        color: $value;
+        border: $border-width solid rgba($value, .5);
+        background-color: rgba($value, .1);
+    }
+}
+
+// badge outline ------------------------------------------
+
+
+// input ------------------------------------------
+.form-control{
+    caret-color: $primary;
+}
+// input ------------------------------------------
+
+
+// checkbox / radio ------------------------------------------
+
+.check-label{
+    cursor: pointer;
+    &, &:before, span{
+        vertical-align: middle;
+        transition: $transition-base;
+    }
+    &:before{
+        content: "check_box_outline_blank";
+        display: inline-block;
+        margin-right: .1em;
+        color: var(--gray-500);
+        font-family: 'Material Icons';
+        font-size: 120%;
+        line-height: inherit;
+        white-space: nowrap;
+        -webkit-font-feature-settings: 'liga';
+        -webkit-font-smoothing: antialiased;
+    }
+    &:not(.badge):hover{
+        &, &:before, span{
+            color: $primary;
+        }
+    }
+}
+
+.check-group{
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+    &:not(:last-child){
+        margin-right: 1em;
+    }
+    > input[type="checkbox"], > input[type="radio"]{
+        position: absolute;
+        opacity: 0;
+        pointer-events: none;
+        &:checked ~ .check-label:before{
+            color: $primary;
+        }
+        // disabled style
+        &:disabled ~ .check-label{
+            cursor: not-allowed;
+            span, &:hover span,
+            &:before, &:hover &:before{
+                color: var(--gray-500);
+            }
+        }
+        &:checked:disabled ~ .check-label{
+            &:before, &:hover &:before{
+                color: var(--gray-600);
+            }
+        }
+    }
+    > input[type="checkbox"]         ~ .check-label:before{ content: "check_box_outline_blank"; }
+    > input[type="radio"]            ~ .check-label:before{ content: "radio_button_unchecked"; }
+    > input[type="checkbox"]:checked ~ .check-label:before{ content: "check_box"; }
+    > input[type="radio"]:checked    ~ .check-label:before{ content: "radio_button_checked"; }
+}
+// checkbox / radio ------------------------------------------
+
+// star ------------------------------------------
+.check-star-group{
+    > input[type="checkbox"], > input[type="radio"]{
+        ~ .check-label:before{
+            content: "star_border";
+            font-size: 1.5em;
+        }
+        ~ .check-label:hover:before{
+            color: $warning;
+        }
+        &:checked ~ .check-label:before{
+            content: "star";
+            color: $warning;
+        }
+    }
+}
+// star ------------------------------------------
+
+
+// switch ------------------------------------------
+
+:root{
+    --switch-w: 24px;
+    --switch-h: 12px;
+    --switch-padding: 2px;
+    --switch-ball-size: calc( var(--switch-h) - var(--switch-padding)*2);
+
+}
+.check-switch-group{
+    // reset
+    .check-label:before{ content: ""; }
+    .check-label .switch-item{
+        position: relative;
+        display: inline-block;
+        width: var(--switch-w);
+        height: var(--switch-h);
+        border-radius: var(--switch-h);
+        background-color: var(--gray-500);
+        vertical-align: middle;
+        &, &:before{
+            transition: $transition-base;
+        }
+        &:before{
+            content: "";
+            position: absolute;
+            top: 0;
+            left: var(--switch-padding);
+            bottom: 0;
+            margin: auto;
+            @include size(var(--switch-ball-size));
+            border-radius: 50%;
+            background-color: $white;
+        }
+    }
+    > input[type="checkbox"], > input[type="radio"]{
+        // reset
+        ~ .check-label:before{ content: ""; }
+        &:checked ~ .check-label:before{ content: ""; }
+
+        &:not(:disabled) ~ .check-label:hover .switch-item:before{
+            will-change: left;
+        }
+
+        &:checked ~ .check-label .switch-item:before{
+            left: calc( var(--switch-w) - var(--switch-padding) - var(--switch-ball-size));
+        }
+
+        // disabled style
+        &:disabled ~ .check-label .switch-item{
+            background-color: var(--gray-400);
+        }
+        &:checked:disabled ~ .check-label .switch-item{
+            background-color: var(--gray-600);
+        }
+    }
+    &-md{
+        --switch-w: 30px;
+        --switch-h: 15px;
+        --switch-padding: 3px;
+        --switch-ball-size: calc( var(--switch-h) - var(--switch-padding)*2);
+    }
+    &-lg{
+        --switch-w: 36px;
+        --switch-h: 18px;
+        --switch-padding: 3px;
+        --switch-ball-size: calc( var(--switch-h) - var(--switch-padding)*2);
+    }
+    &-with-description{
+        .switch-item{
+            margin-top: .35em;
+        }
+        .check-label{
+            display: flex;
+        }
+    }
+    &-display .check-label{
+            cursor: auto;
+    }
+}
+@each $color, $value in $colors {
+    .check-switch-group.check-switch-group-#{$color}{
+        &:hover .check-label .switch-item{
+            background-color: rgba($value, .5);
+        }
+        > input[type="checkbox"], > input[type="radio"]{
+            &:checked:not(:disabled) ~ .check-label .switch-item{
+                background-color: $value;
+            }
+        }
+        &.check-switch-group-display{
+            pointer-events: none;
+        }
+        &.check-switch-group-display.active .check-label .switch-item{
+            background-color: $value;
+            &:before{
+                left: calc( var(--switch-w) - var(--switch-padding) - var(--switch-ball-size));
+            }
+        }
+    }
+}
+
+// badge 版本
+.check-label.badge{
+    --bs-badge-padding-x: 1em;
+    --bs-badge-padding-y: 0.5em;
+    --bs-badge-font-size: var(--bs-body-font-size);
+    --bs-badge-font-weight: --bs-body-font-weight;
+}
+.check-switch-group.check-switch-group{
+    input:not(:checked) ~ .check-label.badge{
+        background-color: var(--gray-100);
+        border-color: var(--gray-300);
+        span{
+            color: var(--gray-500);
+        }
+    }
+    input:not(:checked):disabled ~ .check-label.badge{
+        &:hover{
+            background-color: var(--gray-100);
+            border-color: var(--gray-300);
+        }
+        &:hover span, span{
+            color: var(--gray-400);
+        }
+    }
+    input:checked ~ .check-label.badge{
+        &:hover span, span{
+            color: currentColor;
+        }
+        .switch-item{
+            background-color: currentColor;
+        }
+    }
+}
+@each $color, $value in $colors {
+    .check-switch-group.check-switch-group-#{$color}{
+        input:not(:disabled):not(:checked) ~ .check-label.badge:hover{
+            background-color: rgba($value, .05);
+            border-color: rgba($value, .25);
+            .switch-item{
+                background-color: rgba($value, .5);
+            }
+            span{
+                color: rgba($value, .75);
+            }
+        }
+    }
+}
+// switch ------------------------------------------
+
+
+
+
+// table ------------------------------------------
+th, td{
+    transition: $transition-base;
+}
+.table > .thead-default:not(caption) > * > *{
+    font-size: $font-size-sm;
+    background-color: var(--gray-200);
+    letter-spacing: 0.5px;
+}
+
+// firefox 暫不支援
+.table tr:has(.dropdown-delete:hover){
+    th:not([scope="col"]), td:not([scope="col"]){
+        --bs-table-accent-bg: transparent;
+        --bs-table-bg: transparent;
+        background-color: $table-danger-bg;
+        color: var(--bs-danger);
+        box-shadow: none;
+    }
+}
+
+// table ------------------------------------------
+
+
+
+// icon ------------------------------------------
+.text-with-icon > *{
+    vertical-align: middle;
+}
+
+.material-icons{
+    $icon-sizes: 14, 18, 24, 28, 32;
+
+    font-size: 24px;
+    @each $size in $icon-sizes{
+        &.icon-#{$size} { font-size: #{$size}px; }
+    }
+}
+// icon ------------------------------------------
+
+
+// button ------------------------------------------
+.btn > *{
+    vertical-align: middle;
+}
+
+.btn-round-effect{
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    @include size(2em);
+    padding: 0;
+    text-decoration: none;
+    *{
+        z-index: 2;
+    }
+    &:before{
+        content: "";
+        display: block;
+        @include position-center();
+        border-radius: 50%;
+        background-color: var(--bs-link-color);
+        z-index: 1;
+        opacity: 0;
+        transform: scale(0);
+        transition: $transition-base;
+    }
+    &:hover:before{
+        opacity: .1;
+        transform: scale(1);
+    }
+}
+
+.btn-link-light-bg {
+    text-decoration: none;
+    &:hover {
+        color: var(--bs-btn-color);
+        background-color: rgba(var(--bs-link-color-rgb), .1);
+    }
+}
+
+
+@keyframes gradient-position {
+    0% {
+        transform: translateX(0);
+    }
+    50% {
+        transform: translateX(-50%);
+    }
+    100% {
+        transform: translateX(0);
+    }
+}
+.btn-gradient-effect{
+    --bs-btn-color: #fff;
+    --bs-btn-hover-color: #fff;
+    --bs-btn-active-color: #fff;
+
+    position: relative;
+    overflow: hidden;
+    border: 0;
+
+    &:before{
+        content: "";
+        display: block;
+        position: absolute;
+        top: 0; left: 0;
+        width: 200%; height: 100%;
+        background: linear-gradient(110deg, $cyan 0%, $purple 50%, $cyan 100%);
+        animation: gradient-position 3s ease-in-out infinite;
+        animation-fill-mode: both;
+        z-index: 1;
+        transition: $transition-base;
+    }
+    &, &:hover, &:hover:active{
+        background-color: $primary;
+    }
+    &:hover:before{
+        opacity: .4;
+    }
+    &:focus{
+        box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
+    }
+    > *{
+        position: relative;
+        z-index: 2;
+    }
+}
+// button ------------------------------------------
+
+
+// input ------------------------------------------
+.form-group{
+    > label, .form-label{
+        margin-bottom: 0.25rem;
+        color: var(--gray-500);
+        font-size: $font-size-sm;
+        font-weight: $font-weight-bold;
+    }
+}
+
+.form-group-frame{
+    padding: 1rem;
+    border-bottom: $border-width solid $border-color;
+}
+// input ------------------------------------------
+
+
+// image ------------------------------------------
+.thumbnail-content{
+    $thumbnail-sizes: 32, 50, 100, 150;
+
+    @include size(50px);
+    background-color: $white;
+    background-position: 50% 50%;
+    background-size: cover;
+    border: $border-width solid var(--#{$prefix}border-color);
+    border-radius: 50%;
+    overflow: hidden;
+    @each $size in $thumbnail-sizes{
+        &.thumbnail-#{$size} { @include solid-size(#{$size}px); }
+    }
+    &.thumbnail-rwd{
+        @include rwd-square(100%);
+    }
+}
+// image ------------------------------------------
+
+
+// dropdown ------------------------------------------
+.dropdown-menu{
+    box-shadow: $box-shadow;
+}
+.dropdown-delete{
+    color: $danger;
+    &:hover{
+        --bs-dropdown-link-hover-bg: var(--bs-danger);
+        background-color: $danger;
+    }
+}
+.dropdown-menu{
+    --scrollbar-width: 8px;
+    --scrollbar-hover-color: rgba(var(--bs-link-color-rgb), 0.5);
+    overflow: auto;
+    overscroll-behavior: contain;
+    @include scrollbar();
+}
+// dropdown ------------------------------------------
+
+
+// modal ------------------------------------------
+.modal{
+    backdrop-filter: var(--backdrop-blur);
+}
+
+.modal-md{
+    min-width: 650px;
+}
+
+.modal-long-content .overflow-y-auto{
+    height: 75vh;
+}
+// modal ------------------------------------------
+
+
+// offcanvas ------------------------------------------
+.offcanvas-backdrop{
+    background-color: rgba($offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
+    &.show{
+        backdrop-filter: var(--backdrop-blur);
+        opacity: 1;
+    }
+}
+.offcanvas{
+    &-md-size{
+        --bs-offcanvas-width: 550px;
+    }
+    &-lg-size{
+        --bs-offcanvas-width: 800px;
+    }
+    &-xl-size{
+        --bs-offcanvas-width: 1000px;
+    }
+}
+// offcanvas ------------------------------------------
+
+
+// navbar ------------------------------------------
+$navbar-h: 60px;
+.navbar-main{
+    &, .btn.btn-normal, .navbar-line-item {
+        min-height: $navbar-h;
+    }
+    .btn.btn-normal{
+        @include flex-center();
+        border-radius: 0;
+        color: var(--bs-nav-link-color);
+        &:hover{
+            color: var(--bs-link-color);
+            background-color: $primary-bg-light;
+        }
+    }
+    .btn-square{
+        @include size($navbar-h);
+    }
+}
+// navbar ------------------------------------------
+
+
+// 側邊的清單 ------------------------------------------
+
+$list-highlight-border-w: .4rem;
+
+@mixin list-group-active(){
+    font-weight: $font-weight-medium;
+    border-left-color: currentColor;
+    --bs-list-group-active-color: var(--bs-link-color);
+    --bs-list-group-active-bg: transparent;
+    @include gradient-bg();
+}
+
+.list-group{
+    overflow: hidden;
+    > li{
+        position: relative;
+    }
+    .material-icon-more{
+        transition: $transition-base;
+    }
+}
+
+// 一般選單 style
+$list-item-padding-x: 1rem;
+
+.list-group-aside{
+    border-radius: 0;
+    .list-group-item{
+        display: flex;
+        align-items: center;
+        padding: .8rem $list-item-padding-x;
+        border-right: 0;
+        border-color: transparent;
+        border-left: $list-highlight-border-w solid transparent;
+        background-color: var(--bs-body-bg);
+        cursor: pointer;
+        transition: $transition-base;
+        &:before{ content: ""; }
+        &.active{
+            @include list-group-active();
+        }
+        &:not(.active):hover{
+            border-top-color: var(--bs-body-bg);
+            border-bottom-color: rgba(var(--bs-link-color-rgb), .1);
+            border-left-color: $primary-sub-highlight;
+            --bs-list-group-action-hover-color: rgba(var(--bs-link-color-rgb), .8);
+            --bs-list-group-action-hover-bg: transparent;
+            @include gradient-bg-hover-to-show(.7);
+        }
+        &:hover .material-icon-more{
+            color: var(--bs-link-color);
+        }
+    }
+}
+
+// 子選單 style
+.child-body, .child-container{
+    width: 100%;
+}
+.child-body{
+    background: var(--gray-100);
+}
+.child-container{
+    border-left: $list-highlight-border-w solid var(--gray-400);
+}
+.child-list-head{
+    padding: .25rem $list-item-padding-x;
+    color: var(--gray-500);
+    background-color: var(--gray-200);
+    font-weight: $font-weight-bold;
+    border-bottom: $border-width solid var(--gray-400);
+}
+a.child-list-item{
+    position: relative;
+    display: block;
+    padding: .5rem $list-item-padding-x;
+    font-size: $font-size-sm;
+    
+    &:hover{
+        color: var(--bs-link-color);
+    }
+    &.active{
+        color: var(--bs-link-color);
+        @include gradient-bg();
+    }
+    &.disabled, &:disabled{
+        color: var(--bs-list-group-disabled-color);
+        pointer-events: none;
+    }
+    @include gradient-bg-hover-to-show(.7);
+}
+
+
+// 子選單開合
+// https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css
+$list-toogle-speed: .35s;
+$list-toogle-in-background: $list-toogle-speed linear;
+
+.list-group-haschild:hover ~ .child-body{
+    &:after{             will-change: height, max-height; }
+    > .child-container { will-change: max-height, margin-bottom; }
+}
+
+.child-body{
+    position: relative;
+    display: flex;
+    overflow: hidden;
+    &:after { content: ''; }
+    // 關閉 -----------------
+    &:after{
+        height: 0;
+        max-height: 50px;
+        transition: height $list-toogle-in-background;
+    }
+    > .child-container {
+        margin-bottom: -2000px;
+        visibility: hidden;
+        max-height: 0;
+        transition: margin-bottom $list-toogle-speed cubic-bezier(1, 0, 1, 1),
+                    visibility 0s $list-toogle-speed,
+                    max-height 0s $list-toogle-speed;
+    }
+    // 關閉 -----------------
+}
+
+.list-group-haschild-input:checked{
+    ~ .list-group-item{
+        @include list-group-active();
+        .material-icon-more{
+            transform: rotate(-180deg);
+        }
+    }
+    ~ .child-body{
+        // 打開 -----------------
+        &:after {
+            height: 50px;
+            transition: height $list-toogle-in-background,
+                        max-height 0s $list-toogle-in-background;
+            max-height: 0px;
+        }
+        > .child-container{
+            transition: margin-bottom $list-toogle-speed cubic-bezier(0, 0, 0, 1);
+            margin-bottom: 0;
+            visibility: visible;
+            max-height: 1000000px;
+        }
+        // 打開 -----------------
+    }
+}
+
+// 側邊的清單 ------------------------------------------
+
+
+
+// navbar ------------------------------------------
+.nav-link.active{
+    font-weight: $font-weight-bold;
+}
+// navbar ------------------------------------------
+
+
+// 有底線的 tab bar ------------------------------------------
+.navbar-line{
+    &:hover .navbar-line-item{
+        &:before {                  will-change: width, left; }
+        ~ .navbar-line-item:before{ will-change: left; }
+    }
+    // LG 版本 (底線較粗)
+    &.navbar-line-lg .navbar-line-item:before{
+        border-bottom-width: 4px;
+    }
+}
+
+a.navbar-line-item{
+    --bs-link-color-rgb: 100, 122, 241;
+}
+.navbar-line-item{
+    position: relative;
+    @include flex-center();
+    --bs-navbar-nav-link-padding-x: 1.5rem;
+    color: var(--bs-nav-link-color);
+    &:before{
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 100%;
+        width: 0;
+        height: 100%;
+        border-bottom: 2px solid var(--bs-link-color);
+        transition: $transition-base;
+        pointer-events: none;
+        z-index: 1;
+    }
+    &:hover{
+        background: $primary-bg-light;
+        &:before {
+            width: 100%;
+            left: 0;
+        }
+        ~ .navbar-line-item:before{
+            left: 0;
+        }
+    }
+    &:not(.active):hover:before{
+        border-color: $primary-sub-highlight;
+    }
+    &.active:before{
+        width: 100%;
+        left: 0;
+    }
+}
+// dropdown 版本
+.navbar-line-item.dropdown{
+    padding: 0;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    // (firefox 暫不支援)
+    &:has(.dropdown-toggle[aria-expanded="true"]){
+        background: $primary-bg-light;
+        &:before{
+            width: 100%;
+            left: 0;
+            border-bottom-color: $primary-sub-highlight;
+        }
+    }
+    &:not(.active) .dropdown-link{
+        color: var(--bs-nav-link-color);
+    }
+    .dropdown-link{
+        @include flex-center();
+        height: 100%;
+        padding: var(--bs-nav-link-padding-y) var(--bs-navbar-nav-link-padding-x);
+    }
+    .dropdown-toggle[aria-expanded="true"]{
+        color: $primary;
+    }
+}
+
+
+.navbar[data-bs-theme="dark"]{
+    --dark-theme-primary: #bec9ff;
+    .navbar-line-item.dropdown:not(.active) .dropdown-link{
+        color: var(--dark-theme-primary);
+    }
+    .navbar-nav .show > .nav-link, .navbar-nav .nav-link.active{
+        &, a{
+            color: $white;
+        }
+    }
+    .navbar-line-item:before{
+        border-bottom-color: var(--dark-theme-primary);
+    }
+    .navbar-line-item.dropdown:not(.active) .dropdown-link,
+    .navbar-line-item:before{
+        opacity: .9;
+    }
+}
+// 有底線的 tab bar ------------------------------------------
+
+
+
+// 固定寬度 ------------------------------------------
+.w-33{
+    width: 33.33%;
+}
+.w-66{
+    width: 66.66%;
+}
+@for $i from 1 through 25 {
+    .w-#{$i}rem {
+        width: #{$i}rem;
+    }
+}
+
+// 固定寬度 ------------------------------------------
+
+
+
+// 無內容物 UI ------------------------------------------
+.no-content{
+    padding-top: 10rem;
+    .content-img > .material-icons, p{
+        opacity: .7;
+    }
+    .content-img > .material-icons{
+        font-size: 6rem;
+        margin-bottom: 0.5rem;
+        opacity: .5;
+    }
+    p{
+        font-size: 1.25rem;
+    }
+}
+// 無內容物 UI ------------------------------------------
+
+
+
+// 暫定：螢幕寬度小於 992px 不可使用 ------------------------------------------
+.mobile-forbidden{
+    display: none;
+}
+@media only screen and (max-width: 992px) {
+    body{
+        overflow: hidden;
+    }
+    .mobile-forbidden{
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        margin: auto;
+        @include flex-center();
+        flex-direction: column;
+        padding: 2rem;
+        font-size: $font-size-lg;
+        text-align: center;
+        color: var(--gray-500);
+        background: $white $gradient-blue-light;
+        z-index: $zindex-max;
+        img {
+            width: 20rem;
+        }
+    }
+}
+// 暫定：螢幕寬度小於 992px 不可使用 ------------------------------------------
+
+
+
+// sweet alert ------------------------------------------
+.swal2-container{
+    &.swal2-backdrop-show, &.swal2-noanimation{
+        backdrop-filter: var(--backdrop-blur);
+    }
+}
+
+div:where(.swal2-container){
+    .swal2-html-container{
+        font-size: 1rem !important;
+        color: var(--bs-body-color) !important;
+    }
+    h2:where(.swal2-title){
+        font-size: 1.5rem !important;
+        color: var(--bs-emphasis-color) !important;
+    }
+    .swal2-actions{
+        flex-direction: row-reverse;
+        width: 100%;
+    }
+    button:where(.swal2-styled){
+        margin-left: .5rem !important;
+        margin-right: .5rem !important;
+    }
+    
+    button:where(.swal2-styled).swal2-cancel{
+        background-color: $secondary !important;
+    }
+}
+// sweet alert ------------------------------------------