clemensandClaude Opus 5
1d53b66e3f
Mandanten im Tarif "free" (bis 10 Teilnehmer) zeigen unten rechts eine kleine Marke mit Logo und Adresse der Kaffeeliste; zahlende Mandanten behalten ihre Oberflaeche ohne fremdes Logo. Die Sichtbarkeit haengt allein an tenant_billing.plan_code und wird als reine Leseabfrage geprueft - billing_fetch_or_init() waere ein Schreibzugriff im Seitenaufbau. Laesst sich der Tarif nicht lesen, bleibt die Marke aus. Das Logo ist ein Inline-SVG, das Linkziel kommt aus APP_MARKETING_URL bzw. aus APP_HOST ohne App-Subdomain. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
218 lines
6.3 KiB
CSS
218 lines
6.3 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;
|
|
}
|
|
}
|