/* * ============================================================================= * The Roster — Kundenbereich von Perfex CRM * ============================================================================= * * Diese Datei macht die eigentliche Arbeit. Die PHP-Dateien des Themes aendern * nur den Rahmen, die Navigation, die Fusszeile, die Anmeldeseiten und das * Dashboard — alles andere (Rechnungen, Angebote, Vertraege, Projekte, * Tickets, Wissensdatenbank, Profil) kommt unveraendert aus dem Standardtheme * und sieht trotzdem anders aus, weil hier Bootstrap 3, DataTables und die * Tailwind-Hilfsklassen von Perfex ueberschrieben werden. * * Aufbau * ------ * 00 Farben, Schriften, Masse * 01 Grundlagen: Seite, Schrift, Links, Fokus * 02 Rahmen: wrapper, Inhalt, Fusszeile * 03 Navigation * 04 Karten (panel_s und Verwandte) * 05 Schaltflaechen * 06 Formulare * 07 Meldungen und Etiketten * 08 Tabellen und DataTables * 09 Reiter, Listen, Fortschritt, Seitenzahlen * 10 Anmeldebereich * 11 Dashboard * 12 Tickets, Projekte, Wissensdatenbank * 13 Rechnungs- und Angebotsansicht * 14 Fremdbausteine: Auswahlfelder, Kalender, Dropzone, Modal, Tooltip * 15 Tailwind-Hilfsklassen von Perfex * 16 Bewegung, Druck, schmale Bildschirme * * Grundsatz: keine Regel ohne Grund, kein !important ohne Vermerk. Alles haengt * an `body.roster`, damit die Spezifitaet ueber Bootstrap liegt, ohne dass * jede Zeile mit !important zugenagelt werden muss. */ /* =========================================================================== * 00 Farben, Schriften, Masse * * Die Werte stammen aus src/styles/variable.css der Webseite. Umbenannt auf * deutsche, sprechende Namen — `--color-background-6` sagt nicht, wofuer es da * ist, `--r-grund` schon. * ======================================================================== */ :root { /* Flaechen, von hinten nach vorn */ --r-grund: #0d1017; --r-grund-tief: #090b11; --r-flaeche: #11141d; --r-flaeche-hoch: #12161f; --r-flaeche-hoeher: #191d2a; --r-flaeche-aktiv: #252a32; /* Raender */ --r-rand: rgba(124, 142, 165, 0.18); --r-rand-leise: rgba(148, 174, 207, 0.11); --r-rand-stark: rgba(148, 174, 207, 0.35); /* Schrift */ --r-text: #fcfcfc; --r-text-90: rgba(255, 255, 255, 0.9); --r-text-80: rgba(255, 255, 255, 0.8); --r-text-70: rgba(255, 255, 255, 0.7); --r-text-60: rgba(255, 255, 255, 0.6); /* * Die leiseste Stufe, die noch Text sein darf. * * Die Webseite arbeitet an dieser Stelle mit 40 Prozent Weiss. Das ergibt * gegen den Seitengrund 3,8:1 und faellt damit unter die 4,5:1, die kleiner * Text braucht. Auf einer Schauseite mit grossen Ueberschriften faellt das * nicht ins Gewicht - hier stehen darin die Abschnittsbeschriftungen, die * Spaltenkoepfe der Rechnungstabelle und das Datum. 50 Prozent bringen * 5,1:1 und sehen zwei Meter vom Bildschirm entfernt genauso aus. */ --r-text-50: rgba(255, 255, 255, 0.5); /* Nur fuer Dekoration und abgeschaltete Bedienelemente - nie fuer Text, den jemand lesen koennen muss. */ --r-text-25: rgba(255, 255, 255, 0.25); /* * Marke. Kontrast gegen den Seitengrund #0d1017, gemessen: * Salbei #6f9682 5,9:1 als Text zulaessig * Creme #ebdeb9 13,9:1 als Text zulaessig * Petrol #3e6f70 3,2:1 nur Flaeche, Rahmen, grosse Schrift * Navy #204659 1,9:1 nur Flaeche, nie Schrift */ --r-navy: #204659; --r-petrol: #3e6f70; --r-salbei: #6f9682; --r-creme: #ebdeb9; /* * Statusfarben. Die Marke hat dafuer keine — vier Toene reichen nicht fuer * "bezahlt", "ueberfaellig", "teilweise bezahlt" und "Hinweis". Die drei * ergaenzten Toene sind so gewaehlt, dass sie neben Salbei und Creme nicht * schreien und trotzdem ueber 4,5:1 gegen den Grund liegen: * Erfolg Salbei 5,9:1 * Fehler #c97a6d 5,8:1 * Warnung #d9a441 8,4:1 * Hinweis #5d97a0 5,8:1 */ --r-erfolg: #6f9682; --r-fehler: #c97a6d; --r-warnung: #d9a441; --r-hinweis: #5d97a0; /* Helle Schaltflaeche, wie der Hauptknopf der Webseite */ --r-knopf-hell: #f8f9fa; --r-knopf-hell-schrift: #11141d; /* Schriften */ --r-schrift: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif; --r-schrift-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; --r-schrift-titel: 'Sora', 'Inter Tight', system-ui, sans-serif; --r-schrift-serif: 'Instrument Serif', Georgia, serif; /* Rundungen und Uebergaenge */ --r-radius: 8px; --r-radius-gross: 14px; --r-radius-pille: 999px; --r-ease: cubic-bezier(0.4, 0, 0.2, 1); --r-dauer: 300ms; } /* =========================================================================== * 01 Grundlagen * ======================================================================== */ /* * Wurzelgroesse zuerst. * * Bootstrap 3 setzt `html { font-size: 10px }`. Bliebe das stehen, waeren alle * rem-Angaben in dieser Datei und alle rem-Angaben der Tailwind-Klassen von * Perfex auf 62,5 Prozent geschrumpft - eine Beschriftung mit 0.8125rem waere * 8 statt 13 Pixel gross. Das Standardtheme setzt an derselben Stelle * ebenfalls 16px zurueck; ohne diese Zeile ist der ganze Kundenbereich * unlesbar klein. */ html, body.roster { font-size: 16px; } html, body.roster { background-color: var(--r-grund); } /* * Die Seite als Spalte: Inhalt oben, Fusszeile unten am Rand. Die Fusszeile * ist im Perfex-Aufbau ein Geschwister von #wrapper und nicht darin, sie muss * also hier eingehaengt werden - sonst haengt sie bei kurzen Seiten in der * Mitte des Bildschirms. * * Der Verlauf unten steht `fixed` und ist damit kein Flex-Element, kippt das * Layout also nicht. */ body.roster { display: flex; flex-direction: column; min-height: 100vh; font-family: var(--r-schrift); line-height: 1.55; color: var(--r-text-70); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 0.1px; } /* Fliesstext eine Spur kleiner als die Wurzel, wie im Standardtheme */ body.roster #wrapper, body.roster footer { font-size: 0.9375rem; } /* * Der Verlauf im Hintergrund. * * Auf der Webseite sitzt hinter der Startseite ein weiches Leuchten. Hier * dasselbe, aber deutlich zurueckgenommen: das hier ist ein Arbeitsbereich, * kein Schaufenster. `fixed` statt einer Grafik, damit beim Scrollen nichts * nachgeladen wird und nichts ruckelt. */ body.roster::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60rem 30rem at 15% -10%, rgba(32, 70, 89, 0.35), transparent 65%), radial-gradient(45rem 25rem at 90% 0%, rgba(62, 111, 112, 0.22), transparent 60%); } /* * Der Inhalt muss ueber den Verlauf. * * Bewusst nur die beiden Behaelter und nicht `body.roster > *`: die * Sprungmarke ist ebenfalls ein direktes Kind des body und muss `fixed` * bleiben. Eine Sammelregel waere spezifischer als ihre eigene und wuerde sie * zu einem Flex-Element machen, das sich ueber die ganze Breite zieht. * Die Navigation steht ohnehin `fixed` mit eigener Ebene. */ body.roster > #wrapper, body.roster > footer { position: relative; z-index: 1; } body.roster h1, body.roster h2, body.roster h3, body.roster h4, body.roster h5, body.roster h6 { font-family: var(--r-schrift); color: var(--r-text-90); font-weight: 500; letter-spacing: -0.01em; margin-top: 0; } body.roster h1 { font-family: var(--r-schrift-titel); font-size: 2rem; line-height: 1.2; font-weight: 400; letter-spacing: -0.03em; color: var(--r-text); } body.roster h2 { font-size: 1.5rem; line-height: 1.3; } body.roster h3 { font-size: 1.25rem; } body.roster h4 { font-size: 1.0625rem; } body.roster h5 { font-size: 0.9375rem; } body.roster p { color: var(--r-text-60); } body.roster a { color: var(--r-salbei); text-decoration: none; transition: color var(--r-dauer) var(--r-ease); } body.roster a:hover, body.roster a:focus { color: var(--r-text); text-decoration: none; } body.roster a:visited { color: var(--r-salbei); } body.roster hr { border-top: 1px solid var(--r-rand); margin: 24px 0; } body.roster small, body.roster .small { color: var(--r-text-50); } body.roster strong, body.roster b, body.roster .bold { color: var(--r-text-90); font-weight: 600; } body.roster code, body.roster pre { font-family: var(--r-schrift-mono); background: var(--r-flaeche); border: 1px solid var(--r-rand-leise); /* Salbei statt Petrol: Petrol kommt auf der Kartenflaeche nur auf 3,3:1, und das hier ist kleiner Text. */ color: var(--r-salbei); border-radius: 6px; } body.roster ::selection { background: var(--r-salbei); color: var(--r-grund); } /* * Sichtbarer Fokus. * * Bootstrap 3 setzt an vielen Stellen `outline: none` und markiert den Fokus * nur ueber eine andere Rahmenfarbe. Fuer Tastaturbedienung ist das kein * erkennbarer Fokus. `:focus-visible` blendet den Ring bei Mausklicks aus, wo * er stoert, und zeigt ihn bei der Tabulatortaste, wo er gebraucht wird. */ body.roster :focus-visible { outline: 2px solid var(--r-salbei); outline-offset: 2px; border-radius: 4px; } /* Bildlaufleiste, damit sie nicht als heller Streifen stehenbleibt */ body.roster * { scrollbar-color: var(--r-flaeche-aktiv) transparent; scrollbar-width: thin; } body.roster ::-webkit-scrollbar { width: 10px; height: 10px; } body.roster ::-webkit-scrollbar-track { background: transparent; } body.roster ::-webkit-scrollbar-thumb { background: var(--r-flaeche-aktiv); border-radius: 999px; border: 2px solid var(--r-grund); } body.roster ::-webkit-scrollbar-thumb:hover { background: var(--r-rand-stark); } /* * Die kleine Beschriftung in Grossbuchstaben, wie ueber jedem Abschnitt der * Webseite. Mit `body.roster` davor, weil sie meist an einem

haengt und * `body.roster p` sonst die Farbe zurueckholt - Elementselektoren mit * Body-Klasse sind spezifischer als eine Klasse allein. */ body.roster .roster-augbrauen { font-family: var(--r-schrift-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--r-salbei); margin: 0 0 10px; } /* Leiser Nebenlink — Textgroesse klein, Farbe zurueckgenommen */ .roster-link-leise { font-family: var(--r-schrift-mono); font-size: 0.8125rem; color: var(--r-text-50); } .roster-link-leise:hover { color: var(--r-text); } /* * Sprungmarke aus head.php. * * Mit `body.roster >` davor: sie ist ein , und `body.roster a` weiter oben * ist spezifischer als eine Klasse allein. Ohne das steht hier salbeigruene * Schrift auf fast weissem Grund - 3,1:1, also unlesbar. */ body.roster > .roster-sprungmarke { position: fixed; top: 16px; left: 16px; z-index: 2000; transform: translateY(-200%); background: var(--r-knopf-hell); color: var(--r-knopf-hell-schrift); font-family: var(--r-schrift-mono); font-size: 0.875rem; padding: 12px 20px; border-radius: var(--r-radius-pille); transition: transform 200ms var(--r-ease); } body.roster > .roster-sprungmarke:focus { transform: translateY(0); color: var(--r-knopf-hell-schrift); } /* =========================================================================== * 02 Rahmen * ======================================================================== */ body.roster #wrapper { background: transparent; flex: 1 0 auto; } body.roster #content { background: transparent; /* * Platz fuer die schwebende Navigation. Die Pille steht `fixed` ueber dem * Inhalt; ohne diesen Abstand liegt die erste Ueberschrift darunter. */ padding: 120px 0 80px; } body.roster.roster-anmeldung #content { padding: 108px 0 60px; } body.roster .roster-inhalt { display: block; } /* Fusszeile */ body.roster .roster-fusszeile { background: transparent; border-top: 1px solid var(--r-rand-leise); padding: 28px 0; margin-top: 40px; } .roster-fusszeile-reihe { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .roster-fusszeile-marke img { height: 18px; width: auto; opacity: 0.75; transition: opacity var(--r-dauer) var(--r-ease); } .roster-fusszeile-marke:hover img { opacity: 1; } .roster-fusszeile-zeilen { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font-family: var(--r-schrift-mono); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--r-text-50); } .roster-fusszeile-zeilen a { color: var(--r-text-50); position: relative; } .roster-fusszeile-zeilen a::after { content: ''; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 500ms var(--r-ease); } .roster-fusszeile-zeilen a:hover { color: var(--r-text); } .roster-fusszeile-zeilen a:hover::after { transform: scaleX(1); transform-origin: left; } /* =========================================================================== * 03 Navigation * * Die schwebende Pille der Webseite. Bootstrap bringt fuer .navbar eine ganze * Reihe fester Werte mit (Hoehe, Rahmen, Rundung, Hintergrund) — die werden * hier abgeraeumt und durch die Pille ersetzt. * ======================================================================== */ .roster-kopf { position: fixed; top: 20px; left: 0; right: 0; z-index: 1030; padding: 0 16px; pointer-events: none; } body.roster .roster-navigation { background: transparent; border: 0; margin: 0; min-height: 0; border-radius: 0; max-width: 1080px; margin-left: auto; margin-right: auto; pointer-events: auto; } .roster-navigation-pille { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: rgba(13, 16, 23, 0.92); border: 1px solid var(--r-rand); border-radius: var(--r-radius-pille); padding: 6px 8px 6px 22px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 9px 33px rgba(0, 0, 0, 0.25); } /* * Bootstrap 3 haengt an .navbar-header, .navbar-collapse, .nav und .nav-tabs * Clearfix-Pseudoelemente (`content: " "; display: table`). In einem * Flex-Container werden daraus zwei zusaetzliche Flex-Elemente: die Wortmarke * rutscht aus dem linken Rand, und zwischen den Menuepunkten steht Luft, die * niemand gesetzt hat. Das faellt erst auf schmalen Bildschirmen auf, wo mit * `space-between` gearbeitet wird - deshalb der Hinweis hier. */ body.roster .roster-navigation .navbar-header::before, body.roster .roster-navigation .navbar-header::after, body.roster .roster-navigation .navbar-collapse::before, body.roster .roster-navigation .navbar-collapse::after, body.roster .roster-navigation .navbar-nav::before, body.roster .roster-navigation .navbar-nav::after, body.roster .submenu::before, body.roster .submenu::after, body.roster .nav-tabs::before, body.roster .nav-tabs::after { display: none; } /* Wortmarke */ body.roster .roster-navigation .navbar-brand.roster-marke { display: flex; align-items: center; height: auto; padding: 6px 0; margin: 0; float: none; } body.roster .roster-navigation .navbar-brand.roster-marke img { height: 18px; width: auto; display: block; } body.roster .roster-navigation .navbar-header { display: flex; align-items: center; float: none; } /* Menuepunkte */ body.roster .roster-navigation .navbar-nav { display: flex; align-items: center; gap: 4px; margin: 0; float: none; } body.roster .roster-navigation .navbar-nav > li { float: none; } body.roster .roster-navigation .navbar-nav > li > a { font-family: var(--r-schrift-mono); font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.01em; color: var(--r-text-60); background: transparent; padding: 9px 14px; border-radius: var(--r-radius-pille); line-height: 1.4; transition: color var(--r-dauer) var(--r-ease), background-color var(--r-dauer) var(--r-ease); } body.roster .roster-navigation .navbar-nav > li > a:hover, body.roster .roster-navigation .navbar-nav > li > a:focus { color: var(--r-text); background: rgba(255, 255, 255, 0.06); } body.roster .roster-navigation .navbar-nav > li.active > a, body.roster .roster-navigation .navbar-nav > li.active > a:hover, body.roster .roster-navigation .navbar-nav > li.active > a:focus { color: var(--r-text); background: rgba(111, 150, 130, 0.14); } body.roster .roster-navigation .navbar-nav > li > a i { margin-right: 6px; opacity: 0.7; } /* Profilknopf mit Bild und Vorname */ body.roster .roster-navigation .roster-profil-knopf { display: flex; align-items: center; gap: 9px; padding: 5px 14px 5px 5px; background: rgba(255, 255, 255, 0.05); border-radius: var(--r-radius-pille); position: relative; } body.roster .roster-navigation .roster-profil-knopf:hover, body.roster .roster-navigation .open > .roster-profil-knopf { background: rgba(255, 255, 255, 0.11); } body.roster .client-profile-image-small { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid var(--r-rand); } .roster-profil-name { font-family: var(--r-schrift-mono); font-size: 0.8125rem; color: var(--r-text-80); } /* Der Punkt zeigt ungelesene Ankuendigungen — ohne Zahl, die Zahl steht im Menue */ .roster-profil-punkt { position: absolute; top: 4px; left: 26px; width: 8px; height: 8px; border-radius: 50%; background: var(--r-creme); border: 2px solid var(--r-grund); } /* Menueknopf auf schmalen Bildschirmen */ body.roster .roster-navigation .roster-menue-knopf { border: 0; background: transparent; margin: 0 0 0 12px; padding: 10px 8px; border-radius: var(--r-radius-pille); order: 2; } body.roster .roster-navigation .roster-menue-knopf .icon-bar { background-color: var(--r-text-80); width: 18px; height: 1.5px; border-radius: 2px; transition: transform 250ms var(--r-ease), opacity 250ms var(--r-ease); } body.roster .roster-navigation .roster-menue-knopf .icon-bar + .icon-bar { margin-top: 4px; } /* Aufgeklappt: aus drei Strichen wird ein Kreuz */ body.roster .roster-navigation .roster-menue-knopf:not(.collapsed) .icon-bar:nth-child(2) { transform: translateY(5.5px) rotate(45deg); } body.roster .roster-navigation .roster-menue-knopf:not(.collapsed) .icon-bar:nth-child(3) { opacity: 0; } body.roster .roster-navigation .roster-menue-knopf:not(.collapsed) .icon-bar:nth-child(4) { transform: translateY(-5.5px) rotate(-45deg); } /* Aufklappmenue */ body.roster .roster-navigation .navbar-collapse { border: 0; box-shadow: none; padding: 0; } /* Ausklappmenues (Profil, Sprache) */ body.roster .dropdown-menu { background: var(--r-flaeche-hoch); border: 1px solid var(--r-rand); border-radius: var(--r-radius); box-shadow: 0 9px 33px rgba(0, 0, 0, 0.45); padding: 6px; min-width: 210px; margin-top: 10px; } body.roster .dropdown-menu > li > a { color: var(--r-text-70); font-size: 0.875rem; padding: 9px 12px; border-radius: 6px; display: flex; align-items: center; justify-content: space-between; gap: 10px; white-space: nowrap; } body.roster .dropdown-menu > li > a:hover, body.roster .dropdown-menu > li > a:focus { background: var(--r-flaeche-hoeher); color: var(--r-text); } body.roster .dropdown-menu > li.active > a, body.roster .dropdown-menu > li.active > a:hover { background: rgba(111, 150, 130, 0.16); color: var(--r-text); } body.roster .dropdown-menu .divider { background-color: var(--r-rand-leise); margin: 6px 0; } /* =========================================================================== * 04 Karten * * `panel_s` ist der Grundbaustein des Kundenbereichs — jede Liste, jedes * Formular, jede Rechnung sitzt darin. Wird der richtig gesetzt, ist der * groesste Teil der Arbeit getan. * ======================================================================== */ body.roster .panel_s, body.roster .panel { background: var(--r-flaeche); border: 1px solid var(--r-rand); border-radius: var(--r-radius-gross); box-shadow: none; margin-bottom: 24px; overflow: hidden; } body.roster .panel_s > .panel-body, body.roster .panel > .panel-body { padding: 26px; background: transparent; } body.roster .panel-heading { background: transparent; border-bottom: 1px solid var(--r-rand-leise); padding: 18px 26px; color: var(--r-text-90); font-weight: 500; } body.roster .panel-footer { background: rgba(255, 255, 255, 0.02); border-top: 1px solid var(--r-rand-leise); padding: 16px 26px; } body.roster .well { background: var(--r-flaeche-hoch); border: 1px solid var(--r-rand-leise); border-radius: var(--r-radius); box-shadow: none; color: var(--r-text-70); } /* =========================================================================== * 05 Schaltflaechen * * Pillenform, Beschriftung in IBM Plex Mono — wie auf der Webseite. Der * Hauptknopf ist hell auf dunklem Grund, der zweite nur ein Rahmen. * ======================================================================== */ body.roster .btn { font-family: var(--r-schrift-mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em; border-radius: var(--r-radius-pille); padding: 11px 22px; border: 1px solid transparent; line-height: 1.4; text-shadow: none; box-shadow: none; transition: background-color var(--r-dauer) var(--r-ease), border-color var(--r-dauer) var(--r-ease), color var(--r-dauer) var(--r-ease), transform 120ms var(--r-ease); } body.roster .btn:active { transform: translateY(1px); } body.roster .btn-lg { padding: 14px 28px; font-size: 0.875rem; } body.roster .btn-sm, body.roster .btn-xs { padding: 7px 15px; font-size: 0.75rem; } /* Hauptknopf */ body.roster .btn-primary { background: var(--r-knopf-hell); border-color: var(--r-knopf-hell); color: var(--r-knopf-hell-schrift); } body.roster .btn-primary:hover, body.roster .btn-primary:focus, body.roster .btn-primary:active, body.roster .btn-primary.active, body.roster .open > .dropdown-toggle.btn-primary { background: #ffffff; border-color: #ffffff; color: var(--r-knopf-hell-schrift); } /* Zweiter Knopf: nur Rahmen */ body.roster .btn-default, body.roster .btn-secondary { background: transparent; border-color: var(--r-rand-stark); color: var(--r-text-90); } body.roster .btn-default:hover, body.roster .btn-default:focus, body.roster .btn-default:active, body.roster .btn-default.active, body.roster .open > .dropdown-toggle.btn-default { background: var(--r-flaeche-hoeher); border-color: var(--r-rand-stark); color: var(--r-text); } /* Statusknoepfe */ body.roster .btn-success { background: rgba(111, 150, 130, 0.16); border-color: rgba(111, 150, 130, 0.5); color: var(--r-erfolg); } body.roster .btn-success:hover, body.roster .btn-success:focus, body.roster .btn-success:active { background: var(--r-erfolg); border-color: var(--r-erfolg); color: var(--r-grund); } body.roster .btn-danger { background: rgba(201, 122, 109, 0.14); border-color: rgba(201, 122, 109, 0.5); color: var(--r-fehler); } body.roster .btn-danger:hover, body.roster .btn-danger:focus, body.roster .btn-danger:active { background: var(--r-fehler); border-color: var(--r-fehler); color: var(--r-grund); } body.roster .btn-warning { background: rgba(217, 164, 65, 0.14); border-color: rgba(217, 164, 65, 0.45); color: var(--r-warnung); } body.roster .btn-warning:hover, body.roster .btn-warning:focus, body.roster .btn-warning:active { background: var(--r-warnung); border-color: var(--r-warnung); color: var(--r-grund); } body.roster .btn-info { background: rgba(93, 151, 160, 0.14); border-color: rgba(93, 151, 160, 0.45); color: var(--r-hinweis); } body.roster .btn-info:hover, body.roster .btn-info:focus, body.roster .btn-info:active { background: var(--r-hinweis); border-color: var(--r-hinweis); color: var(--r-grund); } body.roster .btn-link { color: var(--r-salbei); border: 0; padding-left: 4px; padding-right: 4px; } body.roster .btn-link:hover { color: var(--r-text); text-decoration: none; } body.roster .btn.disabled, body.roster .btn[disabled] { opacity: 0.4; box-shadow: none; } body.roster .btn-block + .btn-block { margin-top: 10px; } /* Kleine Symbolknoepfe in Tabellen */ body.roster .btn-icon { padding: 8px 12px; } /* =========================================================================== * 06 Formulare * ======================================================================== */ body.roster label, body.roster .control-label { font-family: var(--r-schrift); font-size: 0.8125rem; font-weight: 400; color: var(--r-text-80); margin-bottom: 8px; letter-spacing: 0.01em; } body.roster .form-group { margin-bottom: 20px; } body.roster .form-control { background: var(--r-grund); border: 1px solid var(--r-rand-leise); border-radius: var(--r-radius); color: var(--r-text); font-family: var(--r-schrift); font-size: 0.9375rem; height: auto; padding: 11px 14px; box-shadow: none; transition: border-color var(--r-dauer) var(--r-ease), background-color var(--r-dauer) var(--r-ease); } body.roster .form-control:hover { border-color: var(--r-rand); } body.roster .form-control:focus { background: var(--r-grund-tief); border-color: var(--r-rand-stark); box-shadow: none; outline: 2px solid var(--r-salbei); outline-offset: 1px; } /* Platzhalter auf 3,5:1 gegen den Feldgrund - unter 3:1 ist er auf einem Notebook im Tageslicht nicht mehr zu lesen. */ body.roster .form-control::placeholder { color: rgba(255, 255, 255, 0.38); } body.roster .form-control[disabled], body.roster .form-control[readonly] { background: var(--r-flaeche-hoch); color: var(--r-text-50); cursor: not-allowed; } body.roster textarea.form-control { min-height: 110px; resize: vertical; } /* * Auswahlfelder. * * Der Pfeil des Betriebssystems ist auf dunklem Grund oft schwarz auf schwarz. * Deshalb eigener Pfeil als Hintergrundbild und `appearance: none`. */ body.roster select.form-control { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='rgba(255,255,255,0.5)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; } body.roster select.form-control option { background: var(--r-flaeche-hoch); color: var(--r-text); } /* * Ankreuz- und Auswahlfelder. * * Hier wird bewusst nur die Farbe angefasst, nicht die Bauform. * * Perfex zeichnet das Kaestchen nicht mit dem nativen Element, sondern mit * `label::before`: das echte Feld steht unsichtbar und absolut positioniert * daneben, das Label hat links Platz dafuer. Wer daran Groesse, Position oder * Innenabstand aendert, verschiebt Kaestchen und Beschriftung gegeneinander. * Die Farben des gezeichneten Kaestchens stehen in Abschnitt 15b. */ body.roster .checkbox label, body.roster .radio label { color: var(--r-text-70); font-weight: 400; cursor: pointer; } /* Felder ausserhalb der Perfex-Huelle - dort zeichnet der Browser selbst */ body.roster input[type='checkbox'], body.roster input[type='radio'] { accent-color: var(--r-salbei); } /* Hilfetext und Fehler */ body.roster .help-block { font-size: 0.8125rem; color: var(--r-text-50); margin-top: 8px; } body.roster .has-error .form-control, body.roster .form-control.has-error { border-color: var(--r-fehler); } body.roster .has-error .help-block, body.roster .has-error .control-label, body.roster .text-danger, body.roster .alert-validation { color: var(--r-fehler); } body.roster .text-success { color: var(--r-erfolg); } body.roster .text-warning { color: var(--r-warnung); } body.roster .text-info, body.roster .text-primary { color: var(--r-hinweis); } body.roster .text-muted { color: var(--r-text-50); } body.roster .text-white, body.roster .color-white { color: var(--r-text); } /* Eingabegruppen (Feld plus Knopf) */ body.roster .input-group-addon { background: var(--r-flaeche-hoeher); border: 1px solid var(--r-rand-leise); color: var(--r-text-60); border-radius: var(--r-radius); } /* * Der Honigtopf im Registrierungsformular muss unsichtbar bleiben — er faengt * Formularroboter. Bootstrap versteckt ihn ueber eine eigene Klasse; hier nur * die Sicherung, falls eine der Regeln oben ihn wieder sichtbar macht. */ body.roster .honey-element { position: absolute !important; left: -9999px !important; opacity: 0 !important; } /* =========================================================================== * 07 Meldungen und Etiketten * ======================================================================== */ body.roster .alert { border-radius: var(--r-radius); border: 1px solid transparent; border-left-width: 2px; padding: 15px 18px; font-size: 0.9375rem; text-shadow: none; box-shadow: none; } body.roster .alert-success { background: rgba(111, 150, 130, 0.1); border-color: rgba(111, 150, 130, 0.25); border-left-color: var(--r-erfolg); color: var(--r-erfolg); } body.roster .alert-danger { background: rgba(201, 122, 109, 0.1); border-color: rgba(201, 122, 109, 0.25); border-left-color: var(--r-fehler); color: var(--r-fehler); } body.roster .alert-warning { background: rgba(217, 164, 65, 0.1); border-color: rgba(217, 164, 65, 0.25); border-left-color: var(--r-warnung); color: var(--r-warnung); } body.roster .alert-info { background: rgba(93, 151, 160, 0.1); border-color: rgba(93, 151, 160, 0.25); border-left-color: var(--r-hinweis); color: var(--r-hinweis); } body.roster .alert .close { color: currentColor; opacity: 0.6; text-shadow: none; } body.roster .alert .close:hover { opacity: 1; } /* Etiketten und Zaehler */ body.roster .label, body.roster .badge { font-family: var(--r-schrift-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em; padding: 4px 10px; border-radius: var(--r-radius-pille); text-shadow: none; } body.roster .badge { background: rgba(255, 255, 255, 0.1); color: var(--r-text-80); } body.roster .label-default { background: rgba(255, 255, 255, 0.08); color: var(--r-text-70); } body.roster .label-success { background: rgba(111, 150, 130, 0.16); color: var(--r-erfolg); } body.roster .label-danger { background: rgba(201, 122, 109, 0.16); color: var(--r-fehler); } body.roster .label-warning { background: rgba(217, 164, 65, 0.16); color: var(--r-warnung); } body.roster .label-info { background: rgba(93, 151, 160, 0.16); color: var(--r-hinweis); } body.roster .label-primary { background: rgba(235, 222, 185, 0.16); color: var(--r-creme); } /* Die Flaechen-Hilfsklassen des Standardthemes */ body.roster .bgwhite { background: var(--r-flaeche); color: var(--r-text-70); } body.roster .success-bg { background: rgba(111, 150, 130, 0.16); color: var(--r-erfolg); } body.roster .danger-bg { background: rgba(201, 122, 109, 0.16); color: var(--r-fehler); } body.roster .warning-bg { background: rgba(217, 164, 65, 0.16); color: var(--r-warnung); } body.roster .info-bg, body.roster .primary-bg { background: rgba(93, 151, 160, 0.16); color: var(--r-hinweis); } /* Ankuendigungen */ body.roster .announcement { border-left: 2px solid var(--r-creme); } body.roster .announcement-name { color: var(--r-text-90); } /* =========================================================================== * 08 Tabellen und DataTables * * Rechnungen, Angebote, Vertraege, Tickets — alles Tabellen. Hier entscheidet * sich, ob der Kundenbereich aufgeraeumt wirkt oder nicht. * ======================================================================== */ body.roster .table { color: var(--r-text-70); margin-bottom: 0; border-collapse: separate; border-spacing: 0; } body.roster .table > thead > tr > th { background: transparent; border-bottom: 1px solid var(--r-rand); border-top: 0; font-family: var(--r-schrift-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--r-text-50); padding: 14px 12px; white-space: nowrap; } body.roster .table > tbody > tr > td, body.roster .table > tfoot > tr > td { border-top: 1px solid var(--r-rand-leise); padding: 15px 12px; vertical-align: middle; font-size: 0.9375rem; color: var(--r-text-70); } body.roster .table > tbody > tr:first-child > td { border-top: 0; } body.roster .table > tbody > tr:hover > td { background: rgba(255, 255, 255, 0.025); } body.roster .table-striped > tbody > tr:nth-of-type(odd) > td { background: rgba(255, 255, 255, 0.015); } body.roster .table-bordered, body.roster .table-bordered > thead > tr > th, body.roster .table-bordered > tbody > tr > td { border-color: var(--r-rand-leise); } body.roster .table a { color: var(--r-text-90); } body.roster .table a:hover { color: var(--r-salbei); } /* Positionstabelle in Rechnungen und Angeboten */ body.roster .table.items > thead > tr > th { background: rgba(255, 255, 255, 0.03); } /* DataTables: Suchfeld, Laengenauswahl, Info, Seitenzahlen */ body.roster .dataTables_wrapper { color: var(--r-text-60); } body.roster .dataTables_wrapper .dataTables_filter, body.roster .dataTables_wrapper .dataTables_length { margin-bottom: 14px; } body.roster .dataTables_wrapper .dataTables_filter label, body.roster .dataTables_wrapper .dataTables_length label { font-family: var(--r-schrift-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--r-text-50); display: flex; align-items: center; gap: 10px; } body.roster .dataTables_wrapper .dataTables_filter input, body.roster .dataTables_wrapper .dataTables_length select { background: var(--r-grund); border: 1px solid var(--r-rand-leise); border-radius: var(--r-radius-pille); color: var(--r-text); font-family: var(--r-schrift); font-size: 0.875rem; letter-spacing: normal; text-transform: none; padding: 8px 16px; margin: 0; } body.roster .dataTables_wrapper .dataTables_info, body.roster .dataTables_wrapper .dataTables_empty { font-size: 0.8125rem; color: var(--r-text-50); padding-top: 16px; } /* Sortierpfeile: die Standardgrafiken sind fuer helle Tabellen gedacht */ body.roster table.dataTable thead .sorting, body.roster table.dataTable thead .sorting_asc, body.roster table.dataTable thead .sorting_desc { background-image: none; position: relative; cursor: pointer; } body.roster table.dataTable thead .sorting::after, body.roster table.dataTable thead .sorting_asc::after, body.roster table.dataTable thead .sorting_desc::after { content: ''; position: absolute; right: 8px; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: currentColor; opacity: 0.35; -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 0 7 3H1zM4 8 1 5h6z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 0 7 3H1zM4 8 1 5h6z'/%3E%3C/svg%3E") center / contain no-repeat; } body.roster table.dataTable thead .sorting_asc::after, body.roster table.dataTable thead .sorting_desc::after { opacity: 0.9; color: var(--r-salbei); } body.roster table.dataTable thead .sorting_asc::after { -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 1 7 5H1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 1 7 5H1z'/%3E%3C/svg%3E") center / contain no-repeat; } body.roster table.dataTable thead .sorting_desc::after { -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 7 1 3h6z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 7 1 3h6z'/%3E%3C/svg%3E") center / contain no-repeat; } /* =========================================================================== * 09 Reiter, Untermenue, Fortschritt, Seitenzahlen * ======================================================================== */ /* Untermenue unter der Navigation (Dateien, Kalender) */ body.roster .submenu { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 26px; border-bottom: 0; width: 100%; } body.roster .submenu li { display: block; margin: 0; } body.roster .submenu li a { display: inline-flex; align-items: center; font-family: var(--r-schrift-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--r-text-50); background: transparent; border: 1px solid var(--r-rand-leise); border-radius: var(--r-radius-pille); padding: 8px 16px; transition: all var(--r-dauer) var(--r-ease); } body.roster .submenu li a:hover, body.roster .submenu li a:focus { color: var(--r-text); border-color: var(--r-rand-stark); background: var(--r-flaeche-hoeher); } /* Reiter innerhalb von Projekten und Tickets */ body.roster .nav-tabs { border-bottom: 1px solid var(--r-rand); display: flex; flex-wrap: wrap; gap: 2px; } body.roster .nav-tabs > li { float: none; margin-bottom: -1px; } body.roster .nav-tabs > li > a { border: 0; border-bottom: 1px solid transparent; border-radius: 0; margin: 0; padding: 12px 18px; font-family: var(--r-schrift-mono); font-size: 0.8125rem; color: var(--r-text-50); background: transparent; } body.roster .nav-tabs > li > a:hover { background: transparent; color: var(--r-text-80); border-bottom-color: var(--r-rand-stark); } body.roster .nav-tabs > li.active > a, body.roster .nav-tabs > li.active > a:hover, body.roster .nav-tabs > li.active > a:focus { background: transparent; border: 0; border-bottom: 1px solid var(--r-salbei); color: var(--r-text); } body.roster .nav-pills > li > a { border-radius: var(--r-radius-pille); color: var(--r-text-60); font-family: var(--r-schrift-mono); font-size: 0.8125rem; } body.roster .nav-pills > li.active > a, body.roster .nav-pills > li.active > a:hover { background: rgba(111, 150, 130, 0.16); color: var(--r-text); } /* Fortschrittsbalken */ body.roster .progress { background: rgba(255, 255, 255, 0.06); border-radius: var(--r-radius-pille); box-shadow: none; height: 6px; margin-bottom: 0; overflow: hidden; } body.roster .progress-bar { box-shadow: none; background: var(--r-salbei); transition: width 800ms var(--r-ease); } body.roster .progress-bar-success { background: var(--r-erfolg); } body.roster .progress-bar-danger { background: var(--r-fehler); } body.roster .progress-bar-warning { background: var(--r-warnung); } body.roster .progress-bar-info { background: var(--r-hinweis); } /* Seitenzahlen */ body.roster .pagination > li > a, body.roster .pagination > li > span { background: transparent; border: 1px solid var(--r-rand-leise); color: var(--r-text-60); font-family: var(--r-schrift-mono); font-size: 0.8125rem; padding: 8px 14px; margin: 0 3px; border-radius: var(--r-radius-pille); } body.roster .pagination > li:first-child > a, body.roster .pagination > li:last-child > a { border-radius: var(--r-radius-pille); } body.roster .pagination > li > a:hover { background: var(--r-flaeche-hoeher); border-color: var(--r-rand-stark); color: var(--r-text); } body.roster .pagination > .active > a, body.roster .pagination > .active > span, body.roster .pagination > .active > a:hover { background: rgba(111, 150, 130, 0.18); border-color: rgba(111, 150, 130, 0.5); color: var(--r-text); } body.roster .pagination > .disabled > span, body.roster .pagination > .disabled > a { background: transparent; border-color: var(--r-rand-leise); color: var(--r-text-25); } /* =========================================================================== * 10 Anmeldebereich * * Die einzige Stelle, an der das Theme wirklich ein eigenes Layout baut. Links * die Marke und der Grund, rechts das Formular — dieselbe Aufteilung wie die * Buchungsstrecke der Webseite. * ======================================================================== */ .roster-anmeldung-buehne { max-width: 1150px; margin: 0 auto; padding: 24px 20px 0; } .roster-anmeldung-raster { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; min-height: calc(100vh - 300px); } @media (min-width: 992px) { .roster-anmeldung-raster { grid-template-columns: 1.05fr 0.95fr; gap: 80px; } } .roster-anmeldung-wortmarke { height: 32px; width: auto; margin-bottom: 34px; display: block; } /* `body.roster` davor: der Titel ist ein

, und `body.roster h1` weiter oben waere sonst spezifischer und setzte die Groesse zurueck. */ body.roster .roster-anmeldung-titel { font-family: var(--r-schrift-titel); font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.15; letter-spacing: -0.035em; font-weight: 400; color: var(--r-text); margin: 0 0 22px; max-width: 16ch; } .roster-anmeldung-punkte { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 20px; max-width: 30rem; } .roster-anmeldung-punkte li { display: grid; gap: 4px; padding-left: 18px; position: relative; } /* Der kurze senkrechte Strich vor jedem Punkt — dasselbe Motiv wie in den Zitaten der Webseite. */ .roster-anmeldung-punkte li::before { content: ''; position: absolute; left: 0; top: 5px; bottom: 5px; width: 2px; border-radius: 2px; background: var(--r-petrol); } .roster-punkt-label { font-family: var(--r-schrift-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--r-salbei); } .roster-punkt-text { font-size: 0.9375rem; color: var(--r-text-60); } /* Die Formularkarte */ body.roster .roster-anmeldung-formular .panel_s { margin-bottom: 0; background: var(--r-flaeche-hoch); border-radius: var(--r-radius-gross); /* * Ein schmaler heller Streifen an der Oberkante. Auf der Webseite haben die * hervorgehobenen Karten denselben — er hebt die Karte vom Grund ab, ohne * einen zweiten Rahmen zu brauchen. */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } body.roster .roster-anmeldung-formular .panel-body { padding: 34px; } @media (max-width: 767px) { body.roster .roster-anmeldung-formular .panel-body { padding: 24px; } } .roster-anmeldung-zeile { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 4px; } body.roster .roster-knopfreihe { margin-top: 26px; margin-bottom: 0; } /* Schmale Fassung fuer "Passwort vergessen" und "Passwort neu setzen" */ .roster-anmeldung-schmal { max-width: 460px; margin: 0 auto; padding-top: 40px; } .roster-anmeldung-schmal .roster-anmeldung-titel { font-size: clamp(1.6rem, 3.5vw, 2.2rem); max-width: none; } .roster-anmeldung-zurueck { display: inline-block; font-family: var(--r-schrift-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--r-text-50); margin-bottom: 22px; } .roster-anmeldung-zurueck::before { content: '\2190'; margin-right: 8px; } /* Registrierung: das geerbte Markup bekommt wenigstens den richtigen Rahmen */ body.roster.register .register-heading { font-family: var(--r-schrift-titel); font-weight: 400; letter-spacing: -0.03em; text-align: left; color: var(--r-text); } body.roster.register .register-contact-info-heading, body.roster.register .register-company-info-heading { font-family: var(--r-schrift-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--r-salbei); font-weight: 500; margin-bottom: 20px; } /* =========================================================================== * 11 Dashboard * ======================================================================== */ .roster-dashboard-kopf { margin-bottom: 44px; } body.roster .roster-dashboard-gruss { font-family: var(--r-schrift-titel); font-size: clamp(1.7rem, 3.5vw, 2.6rem); line-height: 1.15; letter-spacing: -0.035em; font-weight: 400; color: var(--r-text); margin: 0; /* Bis das Skript den Gruss setzt, hat das Element keine Hoehe und der Inhalt darunter springt beim Laden nach unten. */ min-height: 1.15em; } .roster-abschnitt { margin-bottom: 44px; } .roster-abschnitt-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } body.roster .roster-abschnitt-titel { font-family: var(--r-schrift-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--r-text-50); margin: 0 0 16px; } .roster-abschnitt-kopf .roster-abschnitt-titel { margin-bottom: 0; } .roster-dashboard-filter { display: flex; gap: 16px; flex-wrap: wrap; margin: 22px 0 8px; } .roster-dashboard-filter .form-group { min-width: 160px; margin-bottom: 0; } .roster-diagramm { max-height: 400px; margin-top: 10px; } /* Rechnungszahlen */ body.roster .invoice-quick-info .stats-status a { font-family: var(--r-schrift); font-size: 0.9375rem; color: var(--r-text-70); } body.roster .invoice-quick-info .stats-status a:hover { color: var(--r-text); } body.roster .invoice-quick-info .stats-numbers { font-family: var(--r-schrift-mono); font-size: 0.9375rem; color: var(--r-text-90); /* Ziffern gleicher Breite: sonst wackeln die Zahlen beim Aktualisieren */ font-variant-numeric: tabular-nums; } body.roster .invoice-quick-info h5 { color: var(--r-text-80); } /* =========================================================================== * 12 Tickets, Projekte, Wissensdatenbank * ======================================================================== */ body.roster .ticket-message, body.roster .client-reply .panel-body { background: var(--r-flaeche-hoch); border-radius: var(--r-radius); } body.roster .tickets table tr.text-danger a { color: var(--r-fehler); } /* Kacheln der Projektuebersicht */ body.roster .section-client-dashboard dl a { display: block; transition: background-color var(--r-dauer) var(--r-ease), border-color var(--r-dauer) var(--r-ease), transform var(--r-dauer) var(--r-ease); } body.roster .section-client-dashboard dl a:hover { transform: translateY(-2px); } /* Diskussionen: jquery-comments bringt eigene helle Farben mit */ body.roster .jquery-comments, body.roster .jquery-comments * { color: var(--r-text-70); } body.roster .jquery-comments .textarea, body.roster .jquery-comments textarea { background: var(--r-grund); color: var(--r-text); border: 1px solid var(--r-rand-leise); border-radius: var(--r-radius); } /* Gantt-Diagramm */ body.roster .gantt .grid-background { fill: transparent; } body.roster .gantt .grid-row { fill: var(--r-flaeche); } body.roster .gantt .grid-row:nth-child(even) { fill: var(--r-flaeche-hoch); } body.roster .gantt .row-line, body.roster .gantt .tick { stroke: var(--r-rand-leise); } body.roster .gantt text { fill: var(--r-text-60); } body.roster .gantt .bar { fill: var(--r-flaeche-aktiv); } body.roster .gantt .bar-progress { fill: var(--r-salbei); } /* =========================================================================== * 13 Rechnungs- und Angebotsansicht * * `body.viewinvoice` und Verwandte zeigen ein Dokument. Der Kunde liest es am * Bildschirm dunkel und druckt es hell — Abschnitt 16 kuemmert sich um den * Druck. * ======================================================================== */ body.roster.viewinvoice .alert, body.roster.viewestimate .alert { margin-bottom: 24px; } body.roster .invoice-html, body.roster .estimate-html, body.roster .contract-html { color: var(--r-text-70); } body.roster .invoice-html h1, body.roster .invoice-html h2, body.roster .invoice-html h3 { color: var(--r-text); } /* Der Betragsblock am Ende einer Rechnung */ body.roster .table.items tfoot td, body.roster .invoice-total-row { font-family: var(--r-schrift-mono); font-variant-numeric: tabular-nums; color: var(--r-text-90); } /* =========================================================================== * 14 Fremdbausteine * ======================================================================== */ /* * bootstrap-select baut aus einem