Fix invisible text in light mode (hardcoded white on now-white backgrounds)

.proj-name, .detail-title und die mobile Karten-Bezeichnung (.td-bez) hatten
color:#fff fix codiert statt var(--text) - auf dunklem Grund unsichtbar
unproblematisch, im neuen Hell-Modus aber weiße Schrift auf weißer Karte.
Zusätzlich die native <select>-Options-Liste (label.field select option) auf
Hell umgestellt, war sonst dunkler Hintergrund mit jetzt ebenfalls dunklem
(unlesbarem) Text.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Fidelis Huber
2026-08-22 17:38:36 +02:00
co-authored by Claude Sonnet 5
parent 901e383899
commit f8374c3324
2 changed files with 17 additions and 3 deletions
+5 -3
View File
@@ -34,6 +34,7 @@ button,input,select,textarea{font-family:inherit}
:root[data-theme="light"] .badge-h07{background:rgba(120,0,180,.14);color:#7a1fae}
:root[data-theme="light"] .badge-ysly{background:rgba(210,40,40,.14);color:#b32a2a}
:root[data-theme="light"] .badge-schlauch{background:rgba(20,150,90,.14);color:#0f7d4f}
:root[data-theme="light"] label.field select option{background:#fff;color:#0f2130}
@media(prefers-color-scheme:light){
:root:not([data-theme="dark"]){
@@ -48,6 +49,7 @@ button,input,select,textarea{font-family:inherit}
:root:not([data-theme="dark"]) .badge-h07{background:rgba(120,0,180,.14);color:#7a1fae}
:root:not([data-theme="dark"]) .badge-ysly{background:rgba(210,40,40,.14);color:#b32a2a}
:root:not([data-theme="dark"]) .badge-schlauch{background:rgba(20,150,90,.14);color:#0f7d4f}
:root:not([data-theme="dark"]) label.field select option{background:#fff;color:#0f2130}
}
/* Login */
@@ -176,7 +178,7 @@ table.reftab tr:hover td{background:rgba(0,200,216,.06);cursor:pointer}
.proj-list{display:flex;flex-direction:column;gap:10px}
.proj-card{background:var(--card);border:1px solid var(--bor);border-radius:12px;padding:16px 18px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;text-decoration:none;color:inherit}
.proj-card:hover{border-color:var(--cyan)}
.proj-name{font-size:15px;font-weight:800;color:#fff;margin-bottom:4px;word-break:break-word}
.proj-name{font-size:15px;font-weight:800;color:var(--text);margin-bottom:4px;word-break:break-word}
.proj-meta{font-size:11.5px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap}
.proj-status{font-size:10px;font-weight:800;padding:3px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.05em;flex-shrink:0}
.status-aktiv{background:rgba(0,230,118,.15);color:#50ffaa}
@@ -186,7 +188,7 @@ table.reftab tr:hover td{background:rgba(0,200,216,.06);cursor:pointer}
.detail-back{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.btn-back{background:rgba(255,255,255,.06);border:1px solid var(--bor);color:var(--text);border-radius:9px;padding:9px 14px;font-size:12px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.btn-back:hover{border-color:var(--cyan);color:var(--cyan)}
.detail-title{font-size:17px;font-weight:800;color:#fff;flex:1;min-width:150px}
.detail-title{font-size:17px;font-weight:800;color:var(--text);flex:1;min-width:150px}
.spin{width:22px;height:22px;border:2px solid var(--bor);border-top-color:var(--cyan);border-radius:50%;animation:sp .8s linear infinite;margin:0 auto}
@keyframes sp{to{transform:rotate(360deg)}}
@@ -299,7 +301,7 @@ table.pinfo td:last-child{text-align:right;font-weight:600}
.mat-table td.td-bez{
grid-area:bez;border-bottom:1px solid var(--bor);padding:8px 0 10px;margin-bottom:2px;
font-size:15px;font-weight:800;color:#fff;display:block
font-size:15px;font-weight:800;color:var(--text);display:block
}
.mat-table td.td-bez::before{content:none}