bachir/drupal-figli-compta
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix dark mode readability + replace error-row fill with thin red outline

Browse Source 
Gin dark mode (html.gin--dark-mode) is on by default and the previous CSS
relied on Gin custom properties that didn't resolve here, causing
black-on-black/white-on-white text. Now uses self-contained explicit
colors with a dark-mode override block. Error rows get a thin red border
instead of a background fill, as requested.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
bachir
2026-09-03 22:55:11 +02:00
co-authored by Claude Sonnet 5
parent 10f6271fec
commit a6626e023a
2 changed files with 93 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/modules/custom/figli_compta_ledger/css/dashboard.css
+33 -9
View File
@@ -1,17 +1,39 @@
/* Self-contained colors + explicit dark-mode overrides, since Gin's dark
mode (html.gin--dark-mode) is enabled by default here. */
#figli-dashboard-app {
font-family: var(--gin-font-family, Inter, -apple-system, sans-serif);
--figli-bg: #ffffff;
--figli-bg-alt: #f5f6f8;
--figli-text: #1a1a1a;
--figli-text-light: #6b7280;
--figli-border: #dcdee2;
--figli-error: #c9312b;
--figli-positive: #1a7f37;
font-family: Inter, -apple-system, sans-serif;
max-width: 1200px;
margin: 1rem 0;
color: var(--figli-text);
}
html.gin--dark-mode #figli-dashboard-app {
--figli-bg: #232426;
--figli-bg-alt: #2c2d30;
--figli-text: #e8e9ea;
--figli-text-light: #a1a5ab;
--figli-border: #3d3e42;
--figli-error: #ff6b6b;
--figli-positive: #4ade80;
}
#figli-dashboard-app h2 {
font-size: 1.25rem;
font-weight: 600;
margin: 2rem 0 0.75rem;
color: var(--figli-text);
}
#figli-dashboard-app .figli-note {
color: var(--gin-color-text-light, #6b7280);
color: var(--figli-text-light);
font-size: 0.875rem;
margin-bottom: 1rem;
}
@@ -19,8 +41,9 @@
#figli-dashboard-app table {
width: 100%;
border-collapse: collapse;
background: var(--gin-bg-layer2, #fff);
border: 1px solid var(--gin-border-color, #dcdee2);
background: var(--figli-bg);
color: var(--figli-text);
border: 1px solid var(--figli-border);
border-radius: 6px;
overflow: hidden;
}
@@ -29,11 +52,12 @@
#figli-dashboard-app td {
text-align: left;
padding: 0.5rem 0.85rem;
border-bottom: 1px solid var(--gin-border-color, #eceef1);
border-bottom: 1px solid var(--figli-border);
color: var(--figli-text);
}
#figli-dashboard-app th {
background: var(--gin-bg-layer, #f5f6f8);
background: var(--figli-bg-alt);
font-weight: 600;
font-size: 0.85rem;
}
@@ -43,9 +67,9 @@
font-variant-numeric: tabular-nums;
}
#figli-dashboard-app tr.positive td.amount { color: #1a7f37; }
#figli-dashboard-app tr.negative td.amount { color: #c9312b; }
#figli-dashboard-app tr.total td { font-weight: 700; border-top: 2px solid var(--gin-border-color, #333); }
#figli-dashboard-app tr.positive td.amount { color: var(--figli-positive); }
#figli-dashboard-app tr.negative td.amount { color: var(--figli-error); }
#figli-dashboard-app tr.total td { font-weight: 700; border-top: 2px solid var(--figli-border); }
#figli-dashboard-app .figli-error {
background: #fde8e8;