DogFatherGit
a378b126fe
Die aufgeklappte Liste eines <select> zeichnet der Browser selbst, CSS erreicht sie nicht. Ohne Hinweis geht er von einer hellen Seite aus und malt sie weiss -- die helle Schrift darauf war praktisch unlesbar (gemeldet mit Screenshot). Behebung ueber color-scheme: dark auf <html>. Das ist der Schalter fuer alles, was der Browser selbst zeichnet: Auswahllisten, Datumskalender, Bildlaufleisten, Textmarkierung. Zusaetzlich sind Hintergrund und Schriftfarbe an <option> gesetzt, weil aeltere Browser und manche Linux-Oberflaechen color-scheme nur teilweise beachten. Damit entfallen die beiden filter: invert(.75) am Kalendersymbol der Datumsfelder -- der Browser zeichnet es jetzt schon hell, invert haette es wieder verdunkelt. Nur statische Dateien, kein Neustart noetig.
69 lines
2.1 KiB
CSS
69 lines
2.1 KiB
CSS
/* ===================================================================
|
|
Creator-Profil (Onboarding).
|
|
=================================================================== */
|
|
|
|
.gruppe {
|
|
margin: 0 0 22px;
|
|
padding: 20px 22px 22px;
|
|
background: rgba(255, 255, 255, .03);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.gruppe__titel {
|
|
padding: 0 6px;
|
|
font-size: .96rem; font-weight: 700;
|
|
color: var(--text);
|
|
}
|
|
.gruppe__text { margin: 2px 0 18px; font-size: .86rem; color: var(--text-still); }
|
|
|
|
.gruppe .feld-schild { margin-top: 14px; }
|
|
.gruppe .feld-schild:first-of-type { margin-top: 0; }
|
|
|
|
.gruppe textarea, .gruppe input {
|
|
width: 100%; padding: 10px 12px;
|
|
background: rgba(255, 255, 255, .045);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
color: var(--text); font: inherit;
|
|
transition: border-color var(--tempo), box-shadow var(--tempo);
|
|
}
|
|
.gruppe textarea { resize: vertical; min-height: 46px; }
|
|
.gruppe textarea:focus, .gruppe input:focus {
|
|
outline: none; border-color: rgba(63, 189, 245, .7);
|
|
box-shadow: 0 0 0 3px rgba(63, 189, 245, .16);
|
|
}
|
|
/* Siehe aufgaben.css: color-scheme: dark erledigt das Aufhellen. */
|
|
.gruppe input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }
|
|
|
|
.gruppe__raster {
|
|
display: grid; gap: 14px; margin-top: 16px;
|
|
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
|
|
}
|
|
|
|
/* Die interne Notiz hebt sich deutlich ab, damit im Gespräch mit dem
|
|
Creator niemand versehentlich hineinschreibt, was er lesen soll. */
|
|
.gruppe--intern {
|
|
border-color: rgba(224, 163, 60, .38);
|
|
background: rgba(224, 163, 60, .05);
|
|
}
|
|
.gruppe--intern .gruppe__titel { color: #e6b45c; }
|
|
|
|
#auswahl-block select {
|
|
min-width: 210px; padding: 10px 12px;
|
|
background: rgba(255, 255, 255, .045);
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
color: var(--text); font: inherit;
|
|
}
|
|
|
|
.speicher-leiste {
|
|
position: sticky; bottom: 0;
|
|
display: flex; align-items: center; gap: 14px;
|
|
margin-top: 26px; padding: 14px 0;
|
|
background: linear-gradient(180deg, transparent, var(--tinte) 34%);
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
.gruppe { padding: 16px 15px 18px; }
|
|
}
|