Add theme variables: --theme-fab-bg, --theme-fab-color, --offline-card-bg
Customizable via theme files: - Dark: FAB uses accent-primary (#3f8ff0), card rgba(0,0,0,0.6) - Light: FAB uses color-primary (#112855), card rgba(0,0,0,0.55) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -42,7 +42,7 @@
|
|||||||
.moko-offline-card {
|
.moko-offline-card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 720px;
|
max-width: 720px;
|
||||||
background: rgba(0, 0, 0, 0.6);
|
background: var(--offline-card-bg, rgba(0, 0, 0, 0.6));
|
||||||
backdrop-filter: blur(8px);
|
backdrop-filter: blur(8px);
|
||||||
-webkit-backdrop-filter: blur(8px);
|
-webkit-backdrop-filter: blur(8px);
|
||||||
border-radius: 0.875rem;
|
border-radius: 0.875rem;
|
||||||
|
|||||||
@@ -17095,17 +17095,13 @@ form .form-select {
|
|||||||
padding: .4rem .6rem;
|
padding: .4rem .6rem;
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
border: none;
|
border: none;
|
||||||
background: var(--color-primary, #112855);
|
background: var(--theme-fab-bg, var(--color-primary, #112855));
|
||||||
|
color: var(--theme-fab-color, #fff);
|
||||||
box-shadow: var(--box-shadow, 0 .5rem 1rem #00000066);
|
box-shadow: var(--box-shadow, 0 .5rem 1rem #00000066);
|
||||||
font: inherit;
|
font: inherit;
|
||||||
color: #fff;
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root[data-bs-theme="dark"] #mokoThemeFab {
|
|
||||||
background: var(--accent-color-primary, #3f8ff0);
|
|
||||||
}
|
|
||||||
|
|
||||||
#mokoThemeFab.pos-br {
|
#mokoThemeFab.pos-br {
|
||||||
right: 2.5rem;
|
right: 2.5rem;
|
||||||
bottom: 1rem;
|
bottom: 1rem;
|
||||||
|
|||||||
@@ -827,6 +827,13 @@ color-scheme: dark;
|
|||||||
--backdrop-zindex: 1040;
|
--backdrop-zindex: 1040;
|
||||||
--backdrop-bg: hsl(0, 0%, 0%);
|
--backdrop-bg: hsl(0, 0%, 0%);
|
||||||
--backdrop-opacity: 0.5;
|
--backdrop-opacity: 0.5;
|
||||||
|
|
||||||
|
/* ===== THEME FAB ===== */
|
||||||
|
--theme-fab-bg: var(--accent-color-primary, #3f8ff0);
|
||||||
|
--theme-fab-color: #fff;
|
||||||
|
|
||||||
|
/* ===== OFFLINE PAGE ===== */
|
||||||
|
--offline-card-bg: rgba(0, 0, 0, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
|
|||||||
@@ -826,6 +826,13 @@ color-scheme: light;
|
|||||||
--backdrop-zindex: 1040;
|
--backdrop-zindex: 1040;
|
||||||
--backdrop-bg: hsl(0, 0%, 0%);
|
--backdrop-bg: hsl(0, 0%, 0%);
|
||||||
--backdrop-opacity: 0.5;
|
--backdrop-opacity: 0.5;
|
||||||
|
|
||||||
|
/* ===== THEME FAB ===== */
|
||||||
|
--theme-fab-bg: var(--color-primary, #112855);
|
||||||
|
--theme-fab-color: #fff;
|
||||||
|
|
||||||
|
/* ===== OFFLINE PAGE ===== */
|
||||||
|
--offline-card-bg: rgba(0, 0, 0, 0.55);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
|
|||||||
Reference in New Issue
Block a user