Harlekin/AfiS-Aktensystem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity
Files
42dbf0f6b1f500c45a4d9d86d647ad06aacaf1c0
AfiS-Aktensystem/web/app/globals.css
T
Harlekin 6b2b4c4c8c
Prüfung / Lint, Typen, Tests (push) Canceled after 0s
Details
Prüfung / Images bauen (pdf) (push) Canceled after 0s
Details
Prüfung / Images bauen (web) (push) Canceled after 0s
Details
Prüfung / Images bauen (worker) (push) Canceled after 0s
Details
Images / bauen (pdf, docker/pdf.Dockerfile) (push) Canceled after 0s
Details
Images / bauen (web, docker/web.Dockerfile) (push) Canceled after 0s
Details
Images / bauen (worker, docker/worker.Dockerfile) (push) Canceled after 0s
Details
Personalakten und Abteilungen als vollstaendiges Dossier speichern 
Bisher liess sich eine einzelne Fallakte und ein einzelnes Dokument als PDF
sichern. Wer den Stand zu einer Person brauchte, rief beides einzeln ab,
legte es von Hand zusammen und wusste danach nicht, ob er alles hatte.

Ein Dossier ist die Personalakte, dahinter alle ihre Dokumente, dahinter
alle Fallakten, in denen die Person vorkommt - jeweils in derselben
Druckdarstellung wie einzeln. Fuer eine Abteilung dasselbe, je Mitglied
getrennt: eine Abteilung hat keine eigenen Fallakten, sie hat Mitglieder,
die in Fallakten vorkommen. Alles in einen Topf geschuettet staende dieselbe
Akte mehrfach da, ohne dass man saehe, ueber wen sie dort steht.

Der Abrufer waehlt die hoechste Stufe, die aufgenommen wird. Das ist keine
Zugriffspruefung, sondern eine Entscheidung ueber den Umfang - und beides
darf nie durcheinandergeraten:

  - Was ueber der Freigabestufe des Abrufers liegt, existiert fuer ihn
    nicht. Es steht nicht im Abzug, wird nicht gezaehlt und nicht erwaehnt.
  - Was er selbst ausgeschlossen hat, steht als Vermerk im PDF, nach Stufe
    aufgeschluesselt. Eine gekuerzte Mappe darf nicht wie eine
    vollstaendige aussehen, und der Deckel steht zusaetzlich auf jeder
    Seite im Wasserzeichen.

Beide Grenzen laufen in der Datenbankabfrage, nicht danach in JavaScript.

Alles wird als eine Druckseite gerendert statt als mehrere
zusammengeheftete PDFs. So laufen Seitenzahlen, Kopfzeile und Wasserzeichen
durch, und es gibt keinen zweiten Weg, der irgendwann anders aussieht als
der erste. Dafuer sind die vorhandenen Druckansichten zu Bausteinen
geworden - CaseSheet und DocumentSheet stehen jetzt in components/print und
werden von den alten Seiten wie vom Dossier benutzt.

Der Zwischenspeicherschluessel traegt den Deckel, sonst bekaeme ein Abruf
bis Stufe 1 die Datei eines Abrufs bis Stufe 4. Und der Stand ist der
spaeteste ueber alle enthaltenen Akten, nicht der der Kopfdaten allein -
sonst gaebe der Zwischenspeicher einen Abzug heraus, in dem ein
inzwischen geaendertes Dokument im alten Wortlaut steht.

Jeder Abruf steht mit seinem Deckel im Protokoll. Ohne den sagt der
Eintrag, dass jemand etwas ausser Haus gegeben hat, aber nicht wie viel.
2026-09-04 15:34:32 +02:00

1015 lines
27 KiB
CSS
Raw Blame History

@import 'tailwindcss';
@import './fonts.css';
/* ---------------------------------------------------------------------------
Design-Tokens. Fachliche Grundlage: docs/10-design-system.md.
Bezugspunkt ist eine Registratur im Nachtdienst: lackierter Stahl,
Aktenpapier, Stempelfarbe. Die einzige Farbe kommt von der Klassifizierung.
--------------------------------------------------------------------------- */
@theme {
/* Grundpalette, dunkel ist der Auslieferungszustand */
--color-ink-900: #15181a; /* Grundflaeche, kuehles Anthrazit, leicht gruenstichig */
--color-ink-800: #1d2124; /* Panel */
--color-ink-700: #262b2f; /* erhoehte Flaeche, Eingabefelder */
--color-ink-500: #3a4147; /* Linien und Rahmen */
--color-paper: #e4e7e4; /* Primaertext, papierfarbenes Off-White */
--color-paper-dim: #939c99; /* Sekundaertext */
--color-steel: #7a97a6; /* interaktiv: Links, Fokus, aktive Zustaende */
/* Klassifizierungsfarben. Das einzige Buntsystem, nirgends sonst benutzt. */
--color-stamp-0: #8a918d; /* Offen, Grau */
--color-stamp-1: #6d8a9c; /* Intern, Stahlblau */
--color-stamp-2: #4e8f72; /* Vertraulich, Gruenspan */
--color-stamp-3: #b08637; /* Geheim, Messing */
--color-stamp-4: #b4543c; /* Streng geheim, Oxidrot */
--color-stamp-5: #7e5e96; /* Leitungssache, Tiefviolett */
/* Semantische Ebene. Das helle Thema tauscht nur diese Werte. */
--color-surface: var(--color-ink-900);
--color-panel: var(--color-ink-800);
--color-raised: var(--color-ink-700);
--color-line: var(--color-ink-500);
--color-text: var(--color-paper);
--color-text-dim: var(--color-paper-dim);
--color-accent: var(--color-steel);
/* Schrift. IBM Plex, selbst gehostet, drei Rollen aus einer Familie. */
--font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
--font-condensed: 'IBM Plex Sans Condensed', 'IBM Plex Sans', ui-sans-serif, sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, monospace;
/* Skala 12 / 13 / 15 / 18 / 24 px */
--text-2xs: 0.75rem; /* 12 */
--text-xs: 0.8125rem; /* 13 */
--text-sm: 0.9375rem; /* 15 */
--text-base: 0.9375rem; /* 15, Fliesstext */
--text-lg: 1.125rem; /* 18 */
--text-xl: 1.5rem; /* 24 */
--text-2xs--line-height: 1.4;
--text-xs--line-height: 1.45;
--text-sm--line-height: 1.6;
--text-base--line-height: 1.6;
--text-lg--line-height: 1.45;
--text-xl--line-height: 1.3;
/* Struktur: Flaechen bleiben eckig, Bedienelemente sind rund.
Eine Akte ist ein Blatt und hat scharfe Kanten. Was man druecken oder
ausfuellen kann, ist rund - daran erkennt man es, bevor man es beruehrt. */
--radius-none: 0px;
--radius-sm: 2px;
--radius-DEFAULT: 2px;
--radius-md: 2px;
--radius-lg: 2px;
--radius-xl: 2px;
/* Eingabefelder: weich gerundet. Ein mehrzeiliges Feld kann keine Pille sein. */
--radius-field: 10px;
/* Knoepfe, Suchbalken, Marken, Profilbild: voll gerundet. */
--radius-control: 999px;
/* Keine Schatten ausser dem Fokusring. */
--shadow-sm: none;
--shadow-DEFAULT: none;
--shadow-md: none;
--shadow-lg: none;
/* Zeilenlaenge hoechstens 72 Zeichen */
--container-measure: 72ch;
/* Die 3 px breite Klassifizierungskante links am Objekt */
--spacing-edge: 3px;
}
/* Helles Thema.
*
* Es tauscht **nur die semantische Ebene**, nie die Grundpalette und nie die
* Klassifizierungsfarben: eine Stufe muss in beiden Themen dieselbe Farbe
* haben, sonst lernt man sie zweimal. Siehe docs/10-design-system.md.
*
* Kein warmes Cremeweiss, sondern ein leicht kühles Papierweiss - dieselbe
* Anmutung wie das dunkle Thema, nur andersherum. Die Kontraste sind auf
* mindestens 4,5:1 für Fliesstext ausgelegt. */
[data-theme='light'] {
--color-surface: #eceeea;
--color-panel: #e2e5e1;
--color-raised: #f7f8f5;
--color-line: #b0b6ae;
--color-text: #1b1f21;
--color-text-dim: #4d5551;
--color-accent: #35586a;
}
/* Die Klassifizierungsfarben sind für hellen Grund eine Spur dunkler, damit
Stempel und Kante lesbar bleiben. Der Farbton bleibt derselbe. */
[data-theme='light'] {
--color-stamp-0: #6b716d;
--color-stamp-1: #4a6577;
--color-stamp-2: #34694f;
--color-stamp-3: #856024;
--color-stamp-4: #8d3c28;
--color-stamp-5: #5c4270;
}
/* Ohne ausdrückliche Wahl folgt die Anwendung dem System. Der Auslieferungs-
zustand bleibt dunkel: `prefers-color-scheme: light` muss gesetzt sein. */
@media (prefers-color-scheme: light) {
:root:not([data-theme='dark']) {
--color-surface: #eceeea;
--color-panel: #e2e5e1;
--color-raised: #f7f8f5;
--color-line: #b0b6ae;
--color-text: #1b1f21;
--color-text-dim: #4d5551;
--color-accent: #35586a;
--color-stamp-0: #6b716d;
--color-stamp-1: #4a6577;
--color-stamp-2: #34694f;
--color-stamp-3: #856024;
--color-stamp-4: #8d3c28;
--color-stamp-5: #5c4270;
}
}
@layer base {
*,
*::before,
*::after {
border-color: var(--color-line);
}
html {
color-scheme: dark;
background-color: var(--color-surface);
}
[data-theme='light'] {
color-scheme: light;
}
body {
background-color: var(--color-surface);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* Spaltenkoepfe, Stempel und Reiter tragen den schmalen Schnitt.
Kein Versalsatz: der Stempelcharakter kommt aus Schnitt, Rahmen und Farbe. */
th,
legend {
font-family: var(--font-condensed);
font-weight: 500;
text-transform: none;
}
/* Aktenzeichen, Zeitstempel, Hashes und Dienstnummern in Mono. */
code,
kbd,
samp,
time {
font-family: var(--font-mono);
}
h1,
h2,
h3 {
font-weight: 500;
text-wrap: balance;
}
h1 {
font-size: var(--text-xl);
}
h2 {
font-size: var(--text-lg);
}
h3 {
font-size: var(--text-base);
}
a {
color: var(--color-accent);
text-underline-offset: 2px;
}
/* Auch Kaestchen und Schalter gehoeren zur interaktiven Ebene. */
input[type='checkbox'],
input[type='radio'] {
accent-color: var(--color-accent);
}
/* Sichtbarer Fokusring in --steel, der einzige Schatten im System. */
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
border-radius: 2px;
}
::selection {
background-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
}
}
@layer components {
/* ---------------------------------------------------------------------
Bedienelemente.
Zwei Regeln, beide aus dem Betrieb heraus:
**Ein Knopf muss vor der Beruehrung als Knopf erkennbar sein.** Deshalb
traegt jeder einen Rahmen und eine eigene Grundflaeche, auch der
unscheinbarste. Ein Text, der sich erst beim Ueberfahren als Knopf
entpuppt, wird nicht gefunden.
**Und er muss beim Druecken zurueckmelden, dass er getroffen wurde.**
Beim Druecken zieht sich der Knopf leicht zusammen und bekommt einen
inneren Ring - er wirkt kurz dicker, ohne dass sich die Rahmenbreite
wirklich aendert, sonst wuerde das Umfeld springen. Die Rueckmeldung
setzt ohne Verzoegerung ein und klingt langsam ab: ein kurzer Klick
bliebe sonst unsichtbar. Siehe docs/10-design-system.md.
--------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
border: 1px solid var(--color-line);
border-radius: var(--radius-control);
background-color: var(--color-raised);
color: var(--color-text);
padding: 0.35rem 0.95rem;
font-family: var(--font-condensed);
font-size: var(--text-xs);
line-height: 1.45;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
/* Abklingen langsam, damit der Druck sichtbar bleibt. */
transition:
background-color 240ms ease-out,
border-color 240ms ease-out,
color 240ms ease-out,
transform 240ms ease-out,
box-shadow 240ms ease-out;
}
.btn:hover:not(:disabled):not([aria-disabled='true']) {
background-color: var(--color-panel);
border-color: var(--color-accent);
color: var(--color-accent);
transition-duration: 90ms;
}
.btn:active:not(:disabled):not([aria-disabled='true']) {
transform: scale(0.96);
border-color: var(--color-accent);
box-shadow: inset 0 0 0 1.5px var(--color-accent);
/* Sofort einsetzen, damit auch ein schneller Klick sichtbar wird. */
transition-duration: 0ms;
}
.btn:disabled,
.btn[aria-disabled='true'] {
color: var(--color-text-dim);
border-style: dashed;
cursor: not-allowed;
}
/* Der Knopf, der die Sache erledigt. Einer je Formular, nie zwei. */
.btn-primary {
color: var(--color-accent);
border-color: var(--color-accent);
}
.btn-primary:hover:not(:disabled) {
background-color: color-mix(in srgb, var(--color-accent) 14%, var(--color-raised));
}
/* Fuer dichte Zeilen: Etikettenleisten, Werkzeuge an einem Eintrag. */
.btn-sm {
padding: 0.22rem 0.75rem;
font-size: var(--text-2xs);
}
/* Ein Knopf, dessen Zustand er selbst ist: Etikett an oder aus,
Reaktion gesetzt oder nicht, Reiter offen oder nicht. */
.btn[aria-current='page'],
.btn[aria-pressed='true'] {
/* Der gefuellte Zustand traegt hellen Text, nicht die Akzentfarbe: auf der
getoenten Flaeche waere Akzent auf Akzent, und der Kontrast faellt unter
die Untergrenze aus docs/10-design-system.md. */
background-color: color-mix(in srgb, var(--color-accent) 26%, var(--color-raised));
border-color: var(--color-accent);
color: var(--color-text);
}
.btn[aria-current='page']:hover,
.btn[aria-pressed='true']:hover {
color: var(--color-text);
background-color: color-mix(in srgb, var(--color-accent) 34%, var(--color-raised));
}
/* ---------------------------------------------------------------------
Die Zeile einer Liste.
Jede Liste in dieser Anwendung zeigt dasselbe Gebilde: eine Kennung, ein
Titel, etwas Beiwerk, eine Stempelmarke. Bisher bestimmte **jede Zeile
ihre Spaltenbreiten selbst** - die Kennung war so breit wie ihr Text, und
damit fing der Titel in jeder Zeile woanders an. Bei „ETHIK" und „WS"
untereinander sieht man das sofort.
Die Breiten stehen deshalb hier und nicht an den Aufrufstellen. Sie sind
Variablen: eine Liste von Abteilungskuerzeln braucht keine vierzehn
Zeichen, eine Liste von Aktenzeichen schon. Was gleich bleibt, ist dass
**innerhalb einer Liste** alles buendig steht.
--------------------------------------------------------------------- */
.record-row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: 1rem;
row-gap: 0.25rem;
}
/* Die Kennung: Aktenzeichen, Dokumentnummer, Abteilungskuerzel. Mono mit
Tabellenziffern, damit auch die Ziffern untereinander stehen. */
.record-key {
flex: none;
width: var(--record-key, 14ch);
overflow: hidden;
font-family: var(--font-mono);
font-size: var(--text-xs);
font-variant-numeric: tabular-nums;
color: var(--color-text-dim);
text-overflow: ellipsis;
white-space: nowrap;
}
/* Wie die Kennung, aber fuer eine Bezeichnung aus einer festen Liste:
die Rolle eines Beteiligten, die Art eines Auftrags. Kein Mono - es ist
Sprache, keine Nummer. */
.record-label {
flex: none;
width: var(--record-label, 11rem);
overflow: hidden;
font-family: var(--font-condensed);
font-size: var(--text-2xs);
color: var(--color-text-dim);
text-overflow: ellipsis;
white-space: nowrap;
}
/* Der Dienstgrad vor einem Namen. In derselben Groesse wie der Name, denn
er gehoert zu ihm - aber in einer eigenen Spalte, sonst faengt jeder Name
woanders an. */
.record-rank {
flex: none;
width: var(--record-rank, 6rem);
overflow: hidden;
font-size: var(--text-sm);
color: var(--color-text-dim);
text-overflow: ellipsis;
white-space: nowrap;
}
/* Der Titel nimmt den Rest. `min-width: 0` ist noetig, damit ein langer
Titel die Zeile nicht aufblaeht, statt zu kuerzen. */
.record-title {
flex: 1 1 10rem;
min-width: 0;
}
/* Beiwerk am rechten Rand: Status, Datum, Anzahl. Rechtsbuendig, damit die
Spalte eine Kante hat. */
.record-meta {
flex: none;
width: var(--record-meta, 7rem);
font-family: var(--font-condensed);
font-size: var(--text-2xs);
color: var(--color-text-dim);
text-align: right;
}
/* Auf schmalen Schirmen gibt es keine Spalten, nur noch Zeilen. Feste
Breiten wuerden dort ueberlaufen. */
@media (max-width: 40rem) {
.record-key,
.record-label,
.record-rank,
.record-meta {
width: auto;
text-align: left;
}
}
/* Die Stempelmarke: ueberall gleich breit, siehe components/StampMark.tsx. */
.stamp-mark {
display: inline-flex;
flex: none;
align-items: center;
gap: 0.375rem;
width: var(--stamp-width, 11.5rem);
max-width: 100%;
border: 1px solid;
border-radius: var(--radius-control);
padding: 0.1rem 0.6rem;
font-family: var(--font-condensed);
font-size: var(--text-2xs);
line-height: 1.5;
}
.stamp-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Der Ladepunkt in einem Link, solange der Wechsel laeuft. Kein Kreisel:
eine ruhig pulsierende Scheibe in der Groesse eines Satzzeichens, die
nichts verdeckt und nichts aufhaelt. */
.pending-dot {
display: inline-block;
width: 0.45rem;
height: 0.45rem;
flex: none;
border-radius: var(--radius-control);
background-color: currentColor;
animation: pending-pulse 900ms ease-in-out infinite;
}
@keyframes pending-pulse {
0%,
100% {
opacity: 0.25;
transform: scale(0.75);
}
50% {
opacity: 1;
transform: scale(1);
}
}
/* Die Zahl in einem Knopf: eine Angabe, kein Teil der Beschriftung. Sie
sitzt deshalb ruhiger und in Mono. */
.btn-count {
font-family: var(--font-mono);
font-size: 0.9em;
color: var(--color-text-dim);
}
.btn[aria-current='page'] .btn-count {
color: var(--color-text);
}
/* Waehrend eine Aktion laeuft. Kein Spinner, nur ein ruhiger Zustand:
der Knopf bleibt stehen, wo er ist, und nimmt keine zweite Eingabe an. */
.btn[aria-busy='true'] {
color: var(--color-text-dim);
border-style: dashed;
cursor: progress;
}
/* Eingabefelder. Weich gerundet statt voll: ein mehrzeiliges Feld als
Pille waere unlesbar. */
.field {
border: 1px solid var(--color-line);
border-radius: var(--radius-field);
background-color: var(--color-raised);
color: var(--color-text);
padding: 0.4rem 0.7rem;
font-family: inherit;
font-size: var(--text-sm);
line-height: 1.5;
transition:
border-color 120ms ease-out,
background-color 120ms ease-out;
}
.field:hover:not(:disabled) {
border-color: var(--color-accent);
}
.field:disabled {
color: var(--color-text-dim);
cursor: not-allowed;
}
/* -------------------------------------------------------------------
Beschriftung und Bedienelement.
Der Abstand dazwischen war kleiner als die Polsterung **innerhalb** des
Feldes, und genau daran erkennt das Auge einen zu engen Satz: das Wort
steht naeher am Rahmen als der Inhalt des Rahmens an demselben Rahmen,
also wirkt es angeklebt. Die Regel daraus: **der Abstand nach aussen ist
groesser als die Polsterung nach innen.**
Deshalb stehen beide Werte hier und nicht an den Aufrufstellen. Sie waren
dort ein Dutzend Mal von Hand gesetzt, mit drei verschiedenen Werten, und
keiner davon reichte. Siehe docs/10-design-system.md.
------------------------------------------------------------------- */
.field-label {
display: block;
/* Mehr als die 0.4rem Polsterung des Feldes nach oben und unten. */
margin-block-end: 0.5rem;
font-family: var(--font-condensed);
font-size: var(--text-2xs);
line-height: 1.4;
color: var(--color-text-dim);
}
/* Beschriftung daneben statt darueber. Waagerecht braucht es mehr Luft als
senkrecht: das Feld polstert innen 0.7rem, aussen sind es 0.85rem. */
.field-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.85rem;
font-family: var(--font-condensed);
font-size: var(--text-2xs);
color: var(--color-text-dim);
}
/* Der Hinweis unter einem Feld gehoert naeher an das Feld als an das
naechste. */
.field-hint {
display: block;
margin-block-start: 0.4rem;
font-size: var(--text-2xs);
line-height: 1.45;
color: var(--color-text-dim);
}
/* Einzeilige Felder, die wie ein Knopf aussehen duerfen: Suchbalken,
Schnellfilter. */
.field-pill {
border-radius: var(--radius-control);
padding-inline: 0.9rem;
}
select.field {
padding-block: 0.35rem;
}
/* Steckt das Bild in einem Knopf, traegt der Knopf den Rahmen. Zwei
ineinander waeren ein Doppelring. */
.btn > .avatar {
border: 0;
}
/* Das Profilbild oben rechts und ueberall sonst, wo eine Person auftaucht. */
.avatar {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
border: 1px solid var(--color-line);
border-radius: var(--radius-control);
background-color: var(--color-raised);
color: var(--color-text-dim);
font-family: var(--font-condensed);
overflow: hidden;
object-fit: cover;
}
/* Der eine mutige Moment: die Schwaerzung. Ein massiver Balken mit feiner
Rahmenlinie, der beim ersten Erscheinen einmal von links nach rechts
durchwischt. Sonst bewegt sich in der Oberflaeche nichts von selbst. */
.redaction {
display: inline-block;
position: relative;
overflow: hidden;
vertical-align: baseline;
background-color: var(--color-ink-900);
border: 1px solid var(--color-line);
border-radius: 2px;
color: transparent;
user-select: none;
}
.redaction::after {
content: '';
position: absolute;
inset: 0;
background-color: var(--color-ink-700);
transform-origin: left center;
animation: redaction-wipe 150ms ease-out 1 both;
}
@keyframes redaction-wipe {
from {
transform: scaleX(1);
}
to {
transform: scaleX(0);
}
}
/* Zeitachse des Verlaufs: durchgehende senkrechte Linie. Der Chat hat keine.
Der Unterschied muss ohne Beschriftung erkennbar sein. */
.timeline {
position: relative;
padding-left: 1.5rem;
}
.timeline::before {
content: '';
position: absolute;
left: 0.4375rem;
top: 0;
bottom: 0;
width: 1px;
background-color: var(--color-line);
}
/* ---------------------------------------------------------------------
Das Aktenblatt.
Bewusst **ausserhalb** des Design-Systems der Oberflaeche: schwarz auf
weiss, harte Rahmen, Massangaben in Millimetern. Es ist kein Bildschirm-
element, sondern ein Formular, das gedruckt und weitergereicht wird und
auf Papier genauso aussehen muss wie hier. Deshalb steht hier kein
einziger Farb-Token der Anwendung.
Nachgebaut nach dem Formular, das die Personalabteilung bislang von Hand
ausgefuellt hat. Siehe docs/13-entscheidungen.md.
--------------------------------------------------------------------- */
.sheet {
width: 210mm;
min-height: 297mm;
box-sizing: border-box;
margin: 0 auto;
padding: 10mm;
background: #ffffff;
color: #000000;
font-family: var(--font-sans, sans-serif);
}
.sheet-frame {
border: 4px solid #000;
min-height: calc(297mm - 20mm);
display: flex;
flex-direction: column;
}
.sheet-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 15px;
border-bottom: 4px solid #000;
}
.sheet-head h1 {
margin: 0 0 5px;
font-size: 28px;
font-weight: 900;
letter-spacing: 1px;
line-height: 1.1;
text-transform: uppercase;
color: #000;
}
.sheet-head h2 {
margin: 0;
font-size: 14px;
font-weight: 900;
letter-spacing: 2px;
text-transform: uppercase;
color: #000;
}
.sheet-mark {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
}
/* Rein dekorativ, deshalb aria-hidden im Markup. */
.sheet-barcode {
width: 140px;
height: 25px;
background: repeating-linear-gradient(
90deg,
#000,
#000 2px,
#fff 2px,
#fff 5px,
#000 5px,
#000 8px,
#fff 8px,
#fff 10px
);
}
.sheet-classbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 10px 15px;
border-bottom: 4px solid #000;
color: #fff;
font-size: 14px;
font-weight: 900;
text-transform: uppercase;
}
.sheet-grid {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.sheet-grid td {
border: 2px solid #000;
padding: 10px;
vertical-align: top;
word-wrap: break-word;
overflow-wrap: anywhere;
}
.sheet-label {
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
margin-bottom: 4px;
color: #000;
}
.sheet-value {
font-size: 14px;
font-weight: 700;
min-height: 20px;
color: #000;
}
.sheet-value-emphasis {
color: #7f1d1d;
}
.sheet-photo {
width: 120px;
height: 160px;
margin: 0 auto;
border: 2px solid #000;
background: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 10px;
font-weight: 700;
color: #555;
position: relative;
overflow: hidden;
}
.sheet-photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.sheet-signature {
border-bottom: 2px solid #000;
min-height: 30px;
display: flex;
align-items: flex-end;
font-family: 'Times New Roman', Times, serif;
font-style: italic;
font-size: 18px;
color: #000;
}
.sheet-foot {
margin-top: auto;
border-top: 4px solid #000;
padding: 10px 15px;
display: flex;
justify-content: space-between;
gap: 1rem;
font-family: var(--font-mono, monospace);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
color: #000;
}
/* Schmale Fenster: das Blatt behaelt seine Proportionen und wird als Ganzes
verkleinert, statt umzubrechen. Ein umgebrochenes Formular waere ein
anderes Formular. */
@media (max-width: 230mm) {
.sheet-scroll {
overflow-x: auto;
}
}
/* ---------------------------------------------------------------------
Die Druckansicht einer Akte.
Schwarz auf weiss wie das Aktenblatt, aber im Aufbau eines Berichts:
Deckblatt, Kopfdaten, Abschnitte, Verlauf, Anhangsverzeichnis. Das
Wasserzeichen setzt der PDF-Dienst in Kopf- und Fusszeile jeder Seite.
Ein Export darf nie sauberer aussehen als die Akte ist: geänderte
Einträge sind gekennzeichnet, zurückgezogene stehen als Grabstein, und
gesperrte Felder erscheinen als Balken mit Vermerk statt zu fehlen.
Siehe docs/08-suche-und-export.md.
--------------------------------------------------------------------- */
/* Der Grund unter einer Druckansicht.
Ohne ihn liegt ein weisses Blatt auf dem dunklen Thema der Anwendung, und
die Ansicht sieht kaputt aus, obwohl sie stimmt. Beim Drucken faellt er
weg - Papier bringt seinen eigenen Grund mit. */
.print-page {
min-height: 100dvh;
background: #f2f2f0;
}
.print-sheet {
max-width: 180mm;
margin: 0 auto;
padding: 12mm 0;
background: #fff;
color: #000;
font-size: 10pt;
line-height: 1.45;
/* Am Bildschirm auf schmalen Geraeten: die Tabellen darin scrollen in
sich, statt die Seite breiter zu machen. Auf Papier greift das nicht. */
overflow-x: auto;
}
.print-meta {
min-width: 0;
}
.print-sheet h1 {
font-size: 18pt;
font-weight: 900;
margin: 0 0 2mm;
color: #000;
}
.print-sheet h2 {
font-size: 12pt;
font-weight: 900;
margin: 8mm 0 2mm;
padding-bottom: 1mm;
border-bottom: 1.5pt solid #000;
color: #000;
break-after: avoid;
}
.print-sheet h3 {
font-size: 10pt;
font-weight: 900;
margin: 4mm 0 1mm;
color: #000;
break-after: avoid;
}
.print-cover {
border: 3pt solid #000;
padding: 8mm;
margin-bottom: 8mm;
}
.print-stamp {
display: inline-block;
border: 2pt solid #000;
padding: 1mm 3mm;
font-weight: 900;
letter-spacing: 1pt;
text-transform: uppercase;
}
.print-meta {
width: 100%;
border-collapse: collapse;
margin-top: 3mm;
}
.print-meta th,
.print-meta td {
border: 0.75pt solid #000;
padding: 1.5mm 2mm;
text-align: left;
vertical-align: top;
font-size: 9pt;
}
.print-meta th {
width: 38mm;
font-weight: 900;
}
/* Ein Eintrag soll nicht über den Seitenrand zerrissen werden. */
.print-entry {
break-inside: avoid;
padding: 2mm 0;
border-bottom: 0.5pt dotted #666;
}
.print-label {
font-size: 8pt;
font-weight: 900;
text-transform: uppercase;
color: #000;
}
.print-note {
font-size: 8pt;
color: #444;
}
/* Der Kopf einer Akte **innerhalb** eines Dossiers. Kein voller Deckel: der
steht vorn, einer je Abzug. Hier genügt eine Marke, die sagt, was jetzt
anfängt. */
.print-runin {
border-top: 2pt solid #000;
border-bottom: 0.75pt solid #000;
padding: 3mm 0;
margin: 0 0 4mm;
break-after: avoid;
}
/* Was der Abrufer bewusst weggelassen hat. Auffällig, weil eine gekürzte
Mappe nicht wie eine vollständige aussehen darf - siehe docs/08. */
.print-omitted {
border: 1.5pt dashed #000;
padding: 3mm 4mm;
margin: 4mm 0;
}
/* Die Schwärzung im Druck: ein voller Balken, kein Weglassen. */
.print-redacted {
display: inline-block;
min-width: 30mm;
background: #000;
color: #000;
user-select: none;
}
}
/* Drucken: nur das Blatt, ohne Rahmenwerk der Anwendung. Kopf- und Fusszeile
mit dem Wasserzeichen setzt der PDF-Dienst, siehe docs/08. */
@media print {
.no-print {
display: none !important;
}
body {
background: #fff !important;
}
.sheet {
margin: 0;
padding: 0;
width: auto;
}
.sheet-frame {
min-height: auto;
}
.sheet-classbar,
.print-redacted,
.print-stamp {
/* Sonst drucken die Flächen weiss auf weiss. */
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
.print-sheet {
max-width: none;
padding: 0;
}
.print-page {
min-height: 0;
background: #fff;
}
}
@media (prefers-reduced-motion: reduce) {
.redaction::after {
animation: none;
transform: scaleX(0);
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
Reference in New Issue View Git Blame Copy Permalink