style: tie FAB colors to per-module accent tokens
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -4,6 +4,11 @@
|
||||
* Abhängigkeiten: tokens.css, layout.css
|
||||
*/
|
||||
|
||||
/* --------------------------------------------------------
|
||||
* Modul-Akzent
|
||||
* -------------------------------------------------------- */
|
||||
.budget-page { --module-accent: var(--module-budget); }
|
||||
|
||||
/* --------------------------------------------------------
|
||||
* Seiten-Layout
|
||||
* -------------------------------------------------------- */
|
||||
|
||||
@@ -4,6 +4,11 @@
|
||||
* Abhängigkeiten: tokens.css, layout.css
|
||||
*/
|
||||
|
||||
/* --------------------------------------------------------
|
||||
* Modul-Akzent
|
||||
* -------------------------------------------------------- */
|
||||
.contacts-page { --module-accent: var(--module-contacts); }
|
||||
|
||||
/* --------------------------------------------------------
|
||||
* Seiten-Layout
|
||||
* -------------------------------------------------------- */
|
||||
|
||||
@@ -4,6 +4,13 @@
|
||||
* Abhängigkeiten: tokens.css, layout.css
|
||||
*/
|
||||
|
||||
/* --------------------------------------------------------
|
||||
* Modul-Akzent
|
||||
* -------------------------------------------------------- */
|
||||
.dashboard {
|
||||
--module-accent: var(--module-dashboard);
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------
|
||||
* Dashboard-Layout
|
||||
* -------------------------------------------------------- */
|
||||
@@ -761,7 +768,7 @@
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: var(--radius-full);
|
||||
background-color: var(--color-accent);
|
||||
background-color: var(--module-accent, var(--color-accent));
|
||||
color: #ffffff;
|
||||
box-shadow: var(--shadow-lg);
|
||||
display: flex;
|
||||
@@ -783,7 +790,7 @@
|
||||
}
|
||||
|
||||
.fab-main:hover {
|
||||
background-color: var(--color-accent-hover);
|
||||
background-color: color-mix(in srgb, var(--module-accent, var(--color-accent)) 85%, black);
|
||||
}
|
||||
|
||||
.fab-main:active {
|
||||
|
||||
@@ -192,7 +192,7 @@
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: var(--radius-full);
|
||||
background-color: var(--color-accent);
|
||||
background-color: var(--module-accent, var(--color-accent));
|
||||
color: #ffffff;
|
||||
box-shadow: var(--shadow-lg);
|
||||
display: flex;
|
||||
@@ -206,7 +206,7 @@
|
||||
}
|
||||
|
||||
.page-fab:hover {
|
||||
background-color: var(--color-accent-hover);
|
||||
background-color: color-mix(in srgb, var(--module-accent, var(--color-accent)) 85%, black);
|
||||
}
|
||||
|
||||
.page-fab:active {
|
||||
@@ -774,7 +774,7 @@
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: var(--radius-full);
|
||||
background-color: var(--color-accent);
|
||||
background-color: var(--module-accent, var(--color-btn-primary));
|
||||
color: #ffffff;
|
||||
box-shadow: var(--shadow-lg);
|
||||
display: flex;
|
||||
@@ -787,6 +787,7 @@
|
||||
}
|
||||
|
||||
.fab:hover {
|
||||
background-color: color-mix(in srgb, var(--module-accent, var(--color-btn-primary)) 85%, black);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
|
||||
@@ -4,6 +4,11 @@
|
||||
* Abhängigkeiten: tokens.css, layout.css
|
||||
*/
|
||||
|
||||
/* --------------------------------------------------------
|
||||
* Modul-Akzent
|
||||
* -------------------------------------------------------- */
|
||||
.meals-page { --module-accent: var(--module-meals); }
|
||||
|
||||
/* --------------------------------------------------------
|
||||
* Seiten-Layout
|
||||
* -------------------------------------------------------- */
|
||||
|
||||
@@ -4,6 +4,11 @@
|
||||
* Abhängigkeiten: tokens.css, layout.css
|
||||
*/
|
||||
|
||||
/* --------------------------------------------------------
|
||||
* Modul-Akzent
|
||||
* -------------------------------------------------------- */
|
||||
.notes-page { --module-accent: var(--module-notes); }
|
||||
|
||||
/* --------------------------------------------------------
|
||||
* Seiten-Layout
|
||||
* -------------------------------------------------------- */
|
||||
|
||||
@@ -4,6 +4,11 @@
|
||||
* Abhängigkeiten: tokens.css, layout.css
|
||||
*/
|
||||
|
||||
/* --------------------------------------------------------
|
||||
* Modul-Akzent
|
||||
* -------------------------------------------------------- */
|
||||
.shopping-page { --module-accent: var(--module-shopping); }
|
||||
|
||||
/* --------------------------------------------------------
|
||||
* Seiten-Layout
|
||||
* -------------------------------------------------------- */
|
||||
|
||||
@@ -4,6 +4,11 @@
|
||||
* Abhängigkeiten: tokens.css, layout.css
|
||||
*/
|
||||
|
||||
/* --------------------------------------------------------
|
||||
* Modul-Akzent
|
||||
* -------------------------------------------------------- */
|
||||
.tasks-page { --module-accent: var(--module-tasks); }
|
||||
|
||||
/* --------------------------------------------------------
|
||||
* Seiten-Layout
|
||||
* -------------------------------------------------------- */
|
||||
|
||||
Reference in New Issue
Block a user