Files
kaffeekasse-saas/assets/css/app.css
T
clemensandClaude Opus 5 b244451c42 Schalter fuer den Hinweis auf die Kaffeeliste
Der Hinweis unten rechts laesst sich ab einem bezahlten Tarif in den
Mandant-Einstellungen abschalten (neue Spalte tenant_settings.
watermark_enabled, Standard an). Im kostenlosen Tarif bleibt er fest
eingeschaltet: das Kaestchen ist angehakt und disabled, daneben steht der
Grund. Zusaetzlich erzwingt saas_update_tenant_settings() den Wert dort noch
einmal, damit ein nachgebauter POST ihn nicht abschalten kann.

Der Titel des Wasserzeichens spricht nicht mehr vom kostenlosen Tarif -
zahlende Mandanten koennen es jetzt freiwillig zeigen.

Der Smoke-Test prueft die Einstellungsseite jetzt auch angemeldet. Sein
Muster fuer PHP-Meldungen verlangt dafuer einen Doppelpunkt, sonst haette
das Feld "negative_warning" als Warnung gezaehlt.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-21 00:27:44 +02:00

232 lines
6.9 KiB
CSS

/*
* Anpassungen der Kaffeeliste gegenueber dem HTML5-UP-Template (main.css).
* Bewusst eine eigene Datei, damit main.css unveraendert bleibt und bei einem
* Template-Update nicht mit eigenen Aenderungen kollidiert. Wird in header.php
* NACH main.css geladen.
*/
/* ---------------------------------------------------------------------------
* Formular-Abstaende
*
* Im Template hat das Label 1em Abstand nach unten, das Eingabefeld aber gar
* keinen. In einem Formular mit mehreren Feldern klebte das naechste Label
* dadurch direkt am Feld darueber und wirkte, als gehoere es zu diesem statt
* zum eigenen Feld. Jetzt gilt: Label eng am eigenen Feld, deutlicher Abstand
* zur naechsten Gruppe.
* ------------------------------------------------------------------------ */
label {
margin-bottom: 0.5em;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="file"],
select,
textarea {
margin-bottom: 1.5em;
}
/* Achtung: hier bewusst KEIN ".row > * > :last-child { margin-bottom: 0 }".
In einer Grid-Spalte ist das Eingabefeld das letzte Kind - genau dessen
unterer Abstand erzeugt die Trennung zur naechsten Formularzeile. */
/* In Tabellen und nebeneinanderliegenden Bedienelementen wuerde der
zusaetzliche Abstand die Zeilen auseinanderziehen. */
td label,
td input,
td select,
td textarea,
.form-inline label,
.form-inline input,
.form-inline select {
margin-bottom: 0;
}
/* ---------------------------------------------------------------------------
* Zahlen-, Datums- und Dateifelder
*
* main.css stylt diese Typen nicht, sie erschienen deshalb als kleine native
* Kaestchen zwischen den sonst einheitlich gestalteten Feldern. Hier wird das
* Aussehen der Textfelder uebernommen.
* ------------------------------------------------------------------------ */
input[type="number"],
input[type="date"],
input[type="datetime-local"] {
background: #ffffff;
border: solid 1px rgba(210, 215, 217, 0.75);
border-radius: 0.375em;
color: inherit;
display: block;
height: 2.75em;
outline: 0;
padding: 0 1em;
text-decoration: none;
width: 100%;
}
input[type="number"]:focus,
input[type="date"]:focus {
border-color: #38761d;
box-shadow: 0 0 0 1px #38761d;
}
/* In Tabellen (Striche/Einzahlungen erfassen) bleiben die Zahlenfelder
kompakt, sonst sprengen sie die Spaltenbreite. */
td input[type="number"] {
width: 100%;
min-width: 5em;
}
input[type="file"] {
display: block;
width: 100%;
}
/* ---------------------------------------------------------------------------
* Checkbox-Zeilen
*
* Checkbox und zugehoeriges Label stehen nebeneinander; ohne Ausgleich sitzt
* die Beschriftung nicht auf einer Linie mit den Feldern der Nachbarspalte.
* ------------------------------------------------------------------------ */
input[type="checkbox"] + label,
input[type="radio"] + label {
margin-bottom: 1.5em;
}
/* ---------------------------------------------------------------------------
* Hinweisboxen
*
* main.css definiert den Grundstil und die Varianten .info/.warning/.success,
* aber keine .error-Variante - obwohl sie in der App am haeufigsten verwendet
* wird. Ohne sie erscheinen Fehlermeldungen ungefaerbt wie neutrale Hinweise.
* Farbgebung analog zu den vorhandenen Varianten.
* ------------------------------------------------------------------------ */
.hint-box.error {
background: #fdecea;
border-left: 5px solid #d32f2f;
color: #7f1d1d;
}
/* Der Grundstil ist ein Flex-Container; Absaetze darin sollen unten keinen
zusaetzlichen Abstand erzeugen. */
.hint-box > :last-child {
margin-bottom: 0;
}
/* Mehrere Absaetze/Listen in einer Box sollen untereinander stehen statt
nebeneinander (Flex-Grundstil).
Bewusst auf div eingegrenzt: .hint-box macht aus einem Element einen
Flex-Container. Auf einer Tabellenzeile zerstoert das die Spalten - fuer
hervorgehobene Zeilen gibt es .tarif-aktuell weiter unten. */
div.hint-box {
flex-direction: column;
}
/* ---------------------------------------------------------------------------
* Kopfzeile mit Mandanten-Logo (headerline.php)
*
* Das Logo soll erkennbar, aber kein Blickfang sein - die Kaffeeliste bleibt
* eine Arbeitsoberflaeche. Feste Maximalhoehe, damit ein hochkantes oder sehr
* grosses Logo nicht die halbe Seite einnimmt.
* ------------------------------------------------------------------------ */
.tenant-brand-line {
margin-bottom: 1.5em;
padding-bottom: 1em;
}
.tenant-brand-logo {
display: block;
max-height: 60px;
max-width: 100%;
width: auto;
}
/* ---------------------------------------------------------------------------
* Hervorgehobene Tabellenzeile (aktuell gebuchter Tarif)
*
* Muss eine normale Tabellenzeile bleiben, damit die Zellen unter ihren
* Spaltenueberschriften stehen.
* ------------------------------------------------------------------------ */
tr.tarif-aktuell > td {
background: #e8fbe8;
color: #1b5e20;
font-weight: 600;
}
tr.tarif-aktuell > td:first-child {
box-shadow: inset 5px 0 0 0 #4caf50;
}
/* ---------------------------------------------------------------------------
* Wasserzeichen im kostenlosen Tarif (app/plan-watermark.php)
*
* Fest unten rechts, damit es unabhaengig von der Seitenlaenge sichtbar
* bleibt. Zurueckhaltend gehalten: die Kaffeeliste ist eine Arbeitsflaeche,
* der Hinweis soll erkennbar sein, aber nichts verdecken - deshalb halb
* transparent, erst beim Darueberfahren voll sichtbar.
* ------------------------------------------------------------------------ */
.plan-watermark {
align-items: center;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 999px;
bottom: 0.9rem;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
color: #4a4a4a;
display: inline-flex;
font-size: 0.7rem;
gap: 0.4em;
letter-spacing: 0.02em;
line-height: 1;
opacity: 0.65;
padding: 0.45em 0.8em;
position: fixed;
right: 0.9rem;
text-decoration: none;
transition: opacity 0.2s ease;
z-index: 900;
}
a.plan-watermark {
border-bottom: 0;
}
.plan-watermark:hover,
.plan-watermark:focus {
color: #4a4a4a;
opacity: 1;
}
.plan-watermark-logo {
flex: 0 0 auto;
}
/* Auf schmalen Bildschirmen bleibt nur das Logo - der Schriftzug wuerde dort
ueber den Inhalt laufen. */
@media screen and (max-width: 480px) {
.plan-watermark-text {
display: none;
}
}
/* ---------------------------------------------------------------------------
* Festgestellte Kaestchen (z. B. der Hinweis auf die Kaffeeliste im
* kostenlosen Tarif)
*
* Das Theme zeichnet das Kaestchen ueber das folgende <label>; ein disabled
* gesetztes Feld saehe sonst genauso aus wie ein bedienbares. Der gedimmte
* Zustand macht sichtbar, dass hier nichts zu klicken ist - die Begruendung
* steht als Hinweis daneben.
* ------------------------------------------------------------------------ */
input[type="checkbox"]:disabled + label {
cursor: not-allowed;
opacity: 0.6;
}