DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
55450aa83f0dcf21b53247ddf9575c6a52a2b215
dogfather-universe/workspace/assets/css/gate.css
T
DogFatherGit 3a1ab64c26 Workspace: Suche ueber alle Bereiche (Phase 4) 
Auf JEDER Seite, nicht auf einer eigenen. kopf.js baut sie selbst in die
Kopfleiste ein -- eine Suche, die man nur auf einer Extraseite findet,
benutzt niemand. Mit "/" oeffnen, mit Esc schliessen.

Durchsucht: Aufgaben, Termine, Calls, Gespraechsprotokolle, Dateien, die
fuenf Betreuungsbereiche, die Scout-Pipeline und die offenen Felder der
Creator-Profile.

Zwei Dinge machen den Unterschied zwischen einer Suche und einer
brauchbaren Suche:

1. SIE DARF NICHTS FINDEN, WAS DIE SEITE VERBERGEN WUERDE.

Eine Suche ist die verlockendste Stelle fuer ein Datenleck: Man tippt
einen Namen und bekommt Treffer aus Bereichen, die man nie oeffnen
duerfte. Jede Quelle wird deshalb mit der Sichtbarkeitsregel ihres
eigenen Moduls abgefragt -- importiert, nicht abgeschrieben.

Die management-internen Profilfelder (admin_notiz, plan_start,
naechster_review) werden GAR NICHT durchsucht, auch nicht fuer das
Management: Ein Treffer daraus taucht sonst spaeter in einer Ansicht
auf, die diese Felder nicht zeigen darf. Wer die Notiz lesen will,
oeffnet das Profil.

Geprueft mit einem eigenen Leck-Test: "GEHEIM" (Inhalt einer internen
Notiz) findet niemand, auch der Chef nicht. Die Lead-Notiz eines Scouts
findet nur er selbst und das Management, nicht der andere Scout.

2. SIE MUSS SAGEN, WO ETWAS STEHT.

Jeder Treffer traegt einen Ausschnitt RUND UM die Fundstelle, nicht die
ersten Zeichen des Feldes -- man sieht sofort, warum etwas gefunden
wurde. Bei Profiltreffern steht dabei, welches Feld getroffen hat, bei
Protokollen ob es unter "Besprochen" oder "Entscheidung" stand. Und
jeder Treffer fuehrt an die Stelle, an der man weiterarbeiten kann.

LIKE-Sonderzeichen werden maskiert. Ohne das waere die Suche nach "100%"
eine Suche nach "100 gefolgt von irgendwas" und "a_b" faende auch "axb"
-- beides falsch und beides faellt erst spaet auf. Geprueft: "100%" und
"a_b" finden genau ihren Eintrag, "axb" findet nichts.

Bewusst kein Volltextindex (FTS5): Die Datenmengen sind klein, und LIKE
braucht keinen zweiten Datenstand, der irgendwann auseinanderlaeuft.

Kleinigkeiten aus dem Test:
- Das Overlay stand auf voller Hoehe, auch bei zwei Treffern -- der
  Schleier ist flex und stand auf dem voreingestellten stretch. Jetzt
  flex-start, das Fenster waechst mit dem Inhalt (417 statt 780 px bei
  drei Treffern).
- Das eingebaute Kreuz von type="search" sass direkt neben dem
  Esc-Knopf: zwei Wege fuer dasselbe, dicht nebeneinander. Entfernt.
- Das CSS liegt in gate.css, nicht in einer Seiten-Datei -- genau der
  Fehler, der bei .knopf-still schon einmal passiert ist.
2026-08-28 11:39:46 +02:00

493 lines
17 KiB
CSS
Raw Blame History

/* ===================================================================
Creator Workspace - Anmeldeseite
-------------------------------------------------------------------
Grundsatz: dunkel und ruhig. Die Farben stammen aus dem Motiv, sind
aber bewusst entsättigt - Neon als Stimmung, nicht als Blendung.
Kein reines Weiss auf Schwarz, keine harten Kanten, keine Blinker.
=================================================================== */
:root {
--tinte: #05070d;
--glas: rgba(10, 14, 23, 0.74);
--glas-tief: rgba(6, 9, 16, 0.86);
--rand: rgba(150, 186, 220, 0.16);
--rand-hell: rgba(150, 186, 220, 0.30);
--text: #dbe4ef; /* kein reines Weiss - schont die Augen */
--text-leise: #94a5bb;
--text-still: #6d7d92;
--akzent: #3fbdf5; /* aus dem Neon des Motivs, entsättigt */
--akzent-tief: #1f7fb0;
--violett: #8a76ff;
--warn: #ff9aa2; /* weiches Rot statt Signalrot */
--radius: 18px;
--radius-klein: 12px;
--schatten: 0 24px 60px -20px rgba(0, 0, 0, 0.75);
--tempo: .22s cubic-bezier(.4, 0, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
/* `color-scheme: dark` ist der eigentliche Schalter für alles, was der
Browser selbst zeichnet und was CSS nicht erreicht: die aufgeklappte
Liste eines <select>, den Kalender eines Datumsfeldes, Bildlaufleisten,
die Textmarkierung. Ohne diese Zeile geht der Browser von einer hellen
Seite aus und malt die Auswahlliste weiss -- die helle Schrift darauf
war dann praktisch unlesbar. */
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
/* Zusätzlich die Einträge selbst setzen. Ältere Browser und Linux-
Oberflächen ignorieren color-scheme teilweise; diese beiden Zeilen
wirken auch dort. */
option {
background-color: #0d131d;
color: var(--text);
}
/* WICHTIG. Das hidden-Attribut blendet ein Element nur über eine sehr
schwache Browserregel aus -- JEDE eigene display-Angabe schlägt sie.
Ohne diese Zeile blieben Elemente sichtbar, die per JavaScript
ausgeblendet wurden: das Ablegefeld für Dateien (display: grid) und
die Verwaltungsfelder im Creator-Profil (ebenfalls grid). Aufgefallen
erst im Screenshot -- eine Prüfung auf das Attribut allein hätte den
Fehler nie gezeigt, denn gesetzt war es ja. */
[hidden] { display: none !important; }
body.gate {
margin: 0;
min-height: 100svh;
display: flex;
align-items: center;
background: var(--tinte);
color: var(--text);
font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
line-height: 1.55;
letter-spacing: .01em;
overflow-x: hidden;
}
/* ---------- Bühne ---------------------------------------------------- */
.buehne { position: fixed; inset: 0; z-index: 0; }
.buehne__bild {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
/* Minimal abgedunkelt und entsättigt, damit der Text darüber ruhig liegt. */
filter: saturate(.92) brightness(.9);
transform: scale(1.03); /* Reserve für die Parallaxe */
transition: transform 1.4s cubic-bezier(.2, .7, .2, 1);
will-change: transform;
}
/* Der Schleier macht die linke Seite lesbar, ohne das Motiv zu erschlagen.
Rechts bleibt er fast durchsichtig - dort stehen Dogfather und Hasi Dog. */
.buehne__schleier {
position: absolute; inset: 0;
/* Viele weiche Stufen statt weniger harter - sonst zeichnet sich die Kante
des Verlaufs als sichtbare Diagonale quer durchs Bild. */
background:
linear-gradient(96deg,
rgba(3, 5, 10, 0.93) 0%,
rgba(3, 5, 10, 0.90) 18%,
rgba(3, 5, 10, 0.82) 28%,
rgba(4, 6, 12, 0.68) 36%,
rgba(4, 6, 12, 0.50) 44%,
rgba(4, 6, 12, 0.33) 52%,
rgba(4, 6, 12, 0.19) 60%,
rgba(4, 6, 12, 0.09) 68%,
rgba(4, 6, 12, 0.03) 78%,
rgba(4, 6, 12, 0.00) 88%),
radial-gradient(120% 90% at 50% 120%, rgba(0, 0, 0, .42), transparent 62%);
}
/* ---------- Tafel ---------------------------------------------------- */
.tafel {
position: relative;
z-index: 1;
margin-left: clamp(24px, 7vw, 104px);
width: min(452px, 44vw);
padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 36px) clamp(24px, 2.6vw, 32px);
background: var(--glas);
backdrop-filter: blur(22px) saturate(115%);
-webkit-backdrop-filter: blur(22px) saturate(115%);
border: 1px solid var(--rand);
border-radius: var(--radius);
box-shadow: var(--schatten);
animation: auftauchen .7s cubic-bezier(.2, .7, .2, 1) both;
}
/* Feine Lichtkante links - nimmt das Neon des Motivs auf, ohne zu leuchten. */
.tafel__kante {
position: absolute; left: -1px; top: 16%; bottom: 16%;
width: 2px; border-radius: 2px;
background: linear-gradient(180deg,
transparent, var(--akzent) 22%, var(--violett) 72%, transparent);
opacity: .55;
}
@keyframes auftauchen {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
/* ---------- Kopf ----------------------------------------------------- */
.marke {
margin: 0 0 6px;
font-size: .74rem; font-weight: 700;
letter-spacing: .18em; text-transform: uppercase;
color: var(--akzent);
}
.titel {
margin: 0 0 8px;
font-size: clamp(1.6rem, 2.5vw, 2rem);
font-weight: 700; line-height: 1.15;
letter-spacing: -.01em;
}
.unterzeile { margin: 0 0 26px; color: var(--text-leise); font-size: .94rem; }
/* ---------- Rollen --------------------------------------------------- */
.feldschild {
margin: 0 0 10px;
font-size: .78rem; font-weight: 600;
letter-spacing: .06em; text-transform: uppercase;
color: var(--text-still);
}
.rollen { margin-bottom: 22px; }
.rolle {
display: flex; align-items: center; gap: 13px;
width: 100%; margin-bottom: 8px; padding: 11px 14px;
background: rgba(255, 255, 255, .035);
border: 1px solid var(--rand);
border-radius: var(--radius-klein);
color: var(--text);
font: inherit; text-align: left; cursor: pointer;
transition: border-color var(--tempo), background var(--tempo), transform var(--tempo);
}
.rolle:hover { background: rgba(255, 255, 255, .06); border-color: var(--rand-hell); }
.rolle:active { transform: scale(.995); }
.rolle[aria-checked="true"] {
background: linear-gradient(100deg, rgba(63, 189, 245, .14), rgba(138, 118, 255, .10));
border-color: rgba(63, 189, 245, .55);
}
.rolle__zeichen {
flex: 0 0 auto; width: 21px; height: 21px;
fill: none; stroke: var(--text-still);
stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
transition: stroke var(--tempo);
}
.rolle__zeichen .strich { fill: none; }
.rolle[aria-checked="true"] .rolle__zeichen { stroke: var(--akzent); }
.rolle__text { display: flex; flex-direction: column; min-width: 0; }
.rolle__name { font-weight: 600; font-size: .95rem; }
.rolle__zusatz { font-size: .8rem; color: var(--text-still); }
/* ---------- Formular ------------------------------------------------- */
.fuer { color: var(--akzent); text-transform: none; letter-spacing: normal; }
.feld { position: relative; }
#code {
width: 100%; padding: 13px 46px 13px 15px;
background: rgba(255, 255, 255, .045);
border: 1px solid var(--rand);
border-radius: var(--radius-klein);
color: var(--text);
font: inherit; letter-spacing: .06em;
transition: border-color var(--tempo), background var(--tempo), box-shadow var(--tempo);
}
#code::placeholder { color: var(--text-still); letter-spacing: normal; }
#code:hover { border-color: var(--rand-hell); }
#code:focus {
outline: none;
border-color: rgba(63, 189, 245, .7);
background: rgba(255, 255, 255, .065);
box-shadow: 0 0 0 3px rgba(63, 189, 245, .16);
}
.feld__auge {
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
width: 36px; height: 36px; padding: 8px;
background: none; border: 0; border-radius: 9px;
cursor: pointer; color: var(--text-still);
transition: color var(--tempo), background var(--tempo);
}
.feld__auge:hover { color: var(--text-leise); background: rgba(255, 255, 255, .06); }
.feld__auge svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
stroke-width: 1.7; stroke-linecap: round; }
.feld__auge .durch { opacity: 0; transition: opacity var(--tempo); }
.feld__auge[aria-pressed="true"] .durch { opacity: 1; }
.hinweis, .fehler {
margin: 9px 2px 0; font-size: .84rem; min-height: 0;
}
.hinweis { color: var(--text-leise); }
.fehler { color: var(--warn); }
.fehler:empty { margin: 0; }
.knopf {
position: relative;
width: 100%; margin-top: 18px; padding: 13px 18px;
background: linear-gradient(100deg, var(--akzent-tief), #2f6fa8 55%, var(--violett));
border: 0; border-radius: var(--radius-klein);
color: #f2f7fc; font: inherit; font-weight: 650; letter-spacing: .02em;
cursor: pointer;
transition: filter var(--tempo), transform var(--tempo);
}
.knopf:hover { filter: brightness(1.1); }
.knopf:active { transform: scale(.99); }
.knopf[disabled] { cursor: progress; filter: saturate(.6) brightness(.85); }
.knopf__laden {
position: absolute; right: 16px; top: 50%; margin-top: -8px;
width: 16px; height: 16px; border-radius: 50%;
border: 2px solid rgba(255, 255, 255, .35);
border-top-color: #fff;
opacity: 0;
animation: dreh .8s linear infinite;
}
.knopf[disabled] .knopf__laden { opacity: 1; }
@keyframes dreh { to { transform: rotate(360deg); } }
.fuss {
margin: 22px 0 0; padding-top: 16px;
border-top: 1px solid var(--rand);
font-size: .78rem; color: var(--text-still); text-align: center;
}
/* ---------- Übergang beim erfolgreichen Anmelden ---------------------
Die Tafel tritt zurück, das Motiv wird kurz frei - als würde sich das
Tor öffnen. Bewusst kurz und ohne Aufblitzen. */
body.oeffnet .tafel {
opacity: 0; transform: translateY(-8px) scale(.985);
transition: opacity .26s ease, transform .26s ease;
}
body.oeffnet .buehne__schleier { opacity: .35; transition: opacity .26s ease; }
body.oeffnet .buehne__bild { filter: saturate(1) brightness(1); transition: filter .26s ease; }
/* ---------- Tastatur-Bedienung --------------------------------------- */
:where(button, input):focus-visible {
outline: 2px solid var(--akzent);
outline-offset: 2px;
}
/* ---------- Schmale oder hohe Fenster --------------------------------
Sobald das Fenster nicht mehr deutlich breiter als hoch ist, würde die
Tafel den Figuren zu nahe kommen. Dann wechselt die Seite auf das
Hochformat-Motiv und die Tafel rückt nach unten - die beiden bleiben
oben im Bild sichtbar. */
/* Gemeinsam: Tafel wandert nach unten, Motiv bleibt darüber frei. */
@media (max-width: 899px), (max-aspect-ratio: 7/5) {
body.gate { align-items: flex-end; justify-content: center; }
.tafel {
margin: 0 0 max(18px, env(safe-area-inset-bottom));
width: min(520px, calc(100vw - 32px));
}
.tafel__kante { display: none; }
}
/* Schmale Geräte: Hochformat-Ausschnitt. Die Bildfläche endet oberhalb der
Tafel - dadurch liegt ihr Seitenverhältnis nah am Ausschnitt und der
Browser muss seitlich kaum etwas wegschneiden. Beide Figuren bleiben ganz
im Bild, der Verlauf blendet nach unten ins Dunkle. */
@media (max-width: 899px) {
.buehne { bottom: auto; height: 66svh; }
.buehne__bild { object-position: center top; }
.buehne__schleier {
background:
linear-gradient(180deg,
rgba(3, 5, 10, 0.30) 0%,
rgba(3, 5, 10, 0.10) 20%,
rgba(3, 5, 10, 0.22) 46%,
rgba(3, 5, 10, 0.55) 66%,
rgba(5, 7, 13, 0.88) 82%,
/* Muss vor der Unterkante voll deckend sein und exakt der Seitenfarbe
entsprechen - sonst zeichnet sich dort eine feine Kante ab. */
rgba(5, 7, 13, 1.00) 94%);
}
}
/* Breite, aber hohe Fenster (z. B. 1100x980): Querformat bleibt und füllt die
ganze Fläche - sonst entsteht unten eine tote dunkle Zone. Weil hier
seitlich beschnitten wird, rückt das Motiv nach rechts, damit Dogfather und
Hasi Dog vollständig im Bild bleiben. */
@media (min-width: 900px) and (max-aspect-ratio: 7/5) {
.buehne__bild { object-position: 82% center; }
.buehne__schleier {
background:
linear-gradient(180deg,
rgba(3, 5, 10, 0.12) 0%,
rgba(3, 5, 10, 0.20) 34%,
rgba(3, 5, 10, 0.48) 56%,
rgba(3, 5, 10, 0.82) 74%,
rgba(3, 5, 10, 0.95) 90%);
}
}
@media (max-width: 420px) {
.tafel { padding: 22px 18px 20px; border-radius: 16px; }
.rolle__zusatz { display: none; }
}
/* Niedrige Bildschirme (iPhone 13 hat nur 664 px nutzbare Höhe): Die Tafel
würde fast alles verdecken. Sie wird kompakter, und die Bildfläche wird
flacher - dadurch skaliert der Ausschnitt nach BREITE statt nach Höhe und
zeigt genau den oberen Teil mit den Gesichtern. */
@media (max-width: 899px) and (max-height: 760px) {
.buehne { height: 46svh; }
.tafel { padding: 16px 18px 14px; }
.titel { font-size: 1.42rem; margin-bottom: 4px; }
.unterzeile { margin-bottom: 16px; font-size: .88rem; }
.marke { font-size: .68rem; margin-bottom: 3px; }
.feldschild { margin-bottom: 7px; font-size: .74rem; }
.rollen { margin-bottom: 14px; }
.rolle { padding: 8px 13px; margin-bottom: 6px; }
.rolle__name { font-size: .9rem; }
#code { padding: 11px 44px 11px 14px; }
.knopf { margin-top: 12px; padding: 11px 18px; }
.fuss { margin-top: 14px; padding-top: 10px; font-size: .73rem; }
}
/* ---------- Weniger Bewegung ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
.buehne__bild { transform: none; transition: none; }
}
/* ===================================================================
Suche über alle Bereiche.
Liegt bewusst hier und nicht in einer Seiten-Datei: kopf.js baut die
Suche auf JEDER Workspace-Seite ein, also muss auch das Aussehen
überall geladen sein. gate.css ist die einzige Datei, die das
erfüllt. (Genau der Fehler, der bei .knopf-still schon einmal
passiert ist -- Baustein in einer Seiten-Datei, prompt fehlte er
woanders.)
=================================================================== */
.suche-knopf {
display: inline-flex; align-items: center; gap: 7px;
padding: 7px 13px; cursor: pointer;
background: rgba(255, 255, 255, .04);
border: 1px solid var(--rand); border-radius: 999px;
color: var(--text-still); font: inherit; font-size: .82rem;
transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.suche-knopf:hover {
color: var(--text);
border-color: rgba(63, 189, 245, .4);
background: rgba(63, 189, 245, .08);
}
.suche-knopf__lupe {
width: 15px; height: 15px; flex: none;
fill: none; stroke: currentColor; stroke-width: 1.8;
stroke-linecap: round;
}
@media (max-width: 620px) { .suche-knopf__text { display: none; } }
.suche-schleier {
position: fixed; inset: 0; z-index: 80;
/* flex-start, nicht das voreingestellte stretch -- sonst zieht sich
das Fenster auf volle Hoehe, auch bei zwei Treffern. */
display: flex; justify-content: center; align-items: flex-start;
padding: 9vh 18px 18px;
background: rgba(3, 5, 10, .74);
backdrop-filter: blur(5px);
}
body.suche-offen { overflow: hidden; }
.suche-fenster {
width: min(680px, 100%); max-height: 78vh;
display: flex; flex-direction: column;
background: #0b111b;
border: 1px solid rgba(63, 189, 245, .26);
border-radius: var(--radius);
box-shadow: 0 28px 70px -22px rgba(0, 0, 0, .85);
overflow: hidden;
}
.suche-zeile {
display: flex; align-items: center; gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid var(--rand);
}
.suche-feld {
flex: 1; min-width: 0; padding: 6px 2px;
background: transparent; border: 0;
color: var(--text); font: inherit; font-size: 1.02rem;
}
.suche-feld:focus { outline: none; }
.suche-feld::placeholder { color: var(--text-still); }
/* Das eingebaute Kreuz von type="search" steht sonst direkt neben dem
Esc-Knopf -- zwei Wege, dasselbe zu tun, dicht nebeneinander. */
.suche-feld::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.suche-zu {
flex: none; padding: 4px 9px; cursor: pointer;
background: rgba(255, 255, 255, .05);
border: 1px solid var(--rand); border-radius: var(--radius-klein);
color: var(--text-still); font: inherit; font-size: .74rem; letter-spacing: .04em;
}
.suche-zu:hover { color: var(--text); border-color: rgba(255, 255, 255, .22); }
.suche-ergebnis { overflow-y: auto; padding: 6px 10px 12px; }
.suche-hinweis {
margin: 0; padding: 26px 8px; text-align: center;
color: var(--text-still); font-size: .88rem;
}
.suche-gruppe { margin-top: 10px; }
.suche-gruppe__titel {
margin: 0 0 5px; padding: 0 8px;
font-size: .71rem; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase; color: var(--akzent);
}
.suche-treffer {
display: block; padding: 9px 11px; margin-bottom: 3px;
border-radius: var(--radius-klein);
color: var(--text); text-decoration: none;
border: 1px solid transparent;
}
.suche-treffer:hover, .suche-treffer:focus-visible {
background: rgba(255, 255, 255, .05);
border-color: var(--rand);
outline: none;
}
.suche-treffer__titel { display: block; font-size: .92rem; font-weight: 600; }
.suche-treffer__zusatz {
display: block; margin-top: 1px;
font-size: .74rem; color: var(--text-still);
}
.suche-treffer__text {
display: block; margin-top: 3px;
font-size: .81rem; color: var(--text-leise); line-height: 1.45;
}
@media (prefers-reduced-motion: reduce) { .suche-knopf { transition: none; } }
Reference in New Issue View Git Blame Copy Permalink