/* Borlabs Cookie: Dialog und Inhaltssperren im Design der Website. Borlabs definiert die Variablen auf :root und laedt seine Datei nach dem Theme; :root:root gewinnt unabhaengig von der Reihenfolge. Regeln: Zustimmen und Ablehnen gleichwertig (gleiche Farbe und Groesse), 5 px fuer Bedienbares, 16 px fuer grosse Flaechen, Tuerkis-dunkel fuer Links, Schalter und Fokus (DESIGN.md 4 und 7). */ :root:root { --dialog-font-family: var(--font-primary); --dialog-font-size: 16px; --dialog-text-color: var(--color-text); --dialog-background-color: var(--color-base); --dialog-backdrop-background-color: var(--color-dark); --dialog-backdrop-background-opacity: 0.6; --dialog-border-radius-top-left: var(--radius-lg); --dialog-border-radius-top-right: var(--radius-lg); --dialog-border-radius-bottom-left: var(--radius-lg); --dialog-border-radius-bottom-right: var(--radius-lg); --dialog-card-border-radius-top-left: var(--standard-border-radius); --dialog-card-border-radius-top-right: var(--standard-border-radius); --dialog-card-border-radius-bottom-left: var(--standard-border-radius); --dialog-card-border-radius-bottom-right: var(--standard-border-radius); --dialog-list-border-radius-top-left: var(--standard-border-radius); --dialog-list-border-radius-top-right: var(--standard-border-radius); --dialog-list-border-radius-bottom-left: var(--standard-border-radius); --dialog-list-border-radius-bottom-right: var(--standard-border-radius); --dialog-table-border-radius-top-left: var(--standard-border-radius); --dialog-table-border-radius-top-right: var(--standard-border-radius); --dialog-table-border-radius-bottom-left: var(--standard-border-radius); --dialog-table-border-radius-bottom-right: var(--standard-border-radius); --dialog-button-border-radius-top-left: var(--standard-border-radius); --dialog-button-border-radius-top-right: var(--standard-border-radius); --dialog-button-border-radius-bottom-left: var(--standard-border-radius); --dialog-button-border-radius-bottom-right: var(--standard-border-radius); --dialog-checkbox-border-radius-top-left: 3px; --dialog-checkbox-border-radius-top-right: 3px; --dialog-checkbox-border-radius-bottom-left: 3px; --dialog-checkbox-border-radius-bottom-right: 3px; --dialog-search-bar-input-border-radius-top-left: var(--standard-border-radius); --dialog-search-bar-input-border-radius-top-right: var(--standard-border-radius); --dialog-search-bar-input-border-radius-bottom-left: var(--standard-border-radius); --dialog-search-bar-input-border-radius-bottom-right: var(--standard-border-radius); /* Zustimmen und Ablehnen identisch: primaerer Button des Themes */ --dialog-button-accept-all-color: var(--color-primary); --dialog-button-accept-all-color-hover: var(--color-accent-dark-wcag); --dialog-button-accept-all-text-color: var(--color-text); --dialog-button-accept-all-text-color-hover: var(--color-base); --dialog-button-accept-only-essential-color: var(--color-primary); --dialog-button-accept-only-essential-color-hover: var(--color-accent-dark-wcag); --dialog-button-accept-only-essential-text-color: var(--color-text); --dialog-button-accept-only-essential-text-color-hover: var(--color-base); /* Auswahl speichern, Einstellungen: zurueckhaltend auf Grau 20 */ --dialog-button-save-consent-color: var(--color-secondary-20); --dialog-button-save-consent-color-hover: var(--color-accent-dark-wcag); --dialog-button-save-consent-text-color: var(--color-text); --dialog-button-save-consent-text-color-hover: var(--color-base); --dialog-button-preferences-color: var(--color-secondary-20); --dialog-button-preferences-color-hover: var(--color-accent-dark-wcag); --dialog-button-preferences-text-color: var(--color-text); --dialog-button-preferences-text-color-hover: var(--color-base); --dialog-button-selection-color: var(--color-secondary-20); --dialog-button-selection-color-hover: var(--color-accent-dark-wcag); --dialog-button-selection-text-color: var(--color-text); --dialog-button-selection-text-color-hover: var(--color-base); --dialog-button-close-color: var(--color-secondary-20); --dialog-button-close-color-hover: var(--color-accent-dark-wcag); --dialog-button-close-text-color: var(--color-text); --dialog-button-close-text-color-hover: var(--color-base); --dialog-link-primary-color: var(--color-accent-dark-wcag); --dialog-link-primary-color-hover: var(--color-text); --dialog-link-secondary-color: var(--color-secondary); --dialog-link-secondary-color-hover: var(--color-accent-dark-wcag); --dialog-control-element-color: var(--color-accent-dark-wcag); --dialog-control-element-color-hover: var(--color-text); --dialog-checkbox-background-color-active: var(--color-accent-dark-wcag); --dialog-checkbox-background-color-inactive: var(--color-base); --dialog-checkbox-background-color-disabled: var(--color-secondary-20); --dialog-checkbox-border-color-active: var(--color-accent-dark-wcag); --dialog-checkbox-border-color-inactive: var(--color-secondary); --dialog-checkbox-border-color-disabled: var(--color-secondary); --dialog-checkbox-check-mark-color-active: var(--color-base); --dialog-checkbox-check-mark-color-disabled: var(--color-secondary); --dialog-switch-button-background-color-active: var(--color-accent-dark-wcag); --dialog-switch-button-background-color-inactive: var(--color-secondary); --dialog-switch-button-color-active: var(--color-base); --dialog-switch-button-color-inactive: var(--color-base); --dialog-separator-color: var(--color-line); --dialog-footer-background-color: var(--color-primary-light); --dialog-footer-text-color: var(--color-secondary); --dialog-card-background-color: var(--color-primary-light); --dialog-card-text-color: var(--color-text); --dialog-card-separator-color: var(--color-line); --dialog-card-control-element-color: var(--color-accent-dark-wcag); --dialog-card-control-element-color-hover: var(--color-text); --dialog-list-item-background-color-odd: var(--color-base); --dialog-list-item-background-color-even: var(--color-primary-light); --dialog-list-item-text-color-odd: var(--color-text); --dialog-list-item-text-color-even: var(--color-text); --dialog-list-item-separator-color: var(--color-line); --dialog-list-item-control-element-color: var(--color-accent-dark-wcag); --dialog-list-item-control-element-color-hover: var(--color-text); --dialog-list-item-control-element-separator-color: var(--color-line); --dialog-table-row-background-color-odd: var(--color-base); --dialog-table-row-background-color-even: var(--color-primary-light); --dialog-table-row-text-color-odd: var(--color-text); --dialog-table-row-text-color-even: var(--color-text); --dialog-table-row-border-color: var(--color-line); --dialog-tab-bar-tab-background-color-active: var(--color-base); --dialog-tab-bar-tab-background-color-inactive: var(--color-base); --dialog-tab-bar-tab-text-color-active: var(--color-accent-dark-wcag); --dialog-tab-bar-tab-text-color-inactive: var(--color-secondary); --dialog-tab-bar-tab-border-color-bottom-active: var(--color-accent-dark-wcag); --dialog-tab-bar-tab-border-color-bottom-inactive: var(--color-line); --dialog-search-bar-input-background-color: var(--color-base); --dialog-search-bar-input-text-color: var(--color-text); --dialog-search-bar-input-border-color-default: var(--color-secondary); --dialog-search-bar-input-border-color-focus: var(--color-accent-dark-wcag); /* Inhaltssperre vor Videos: dunkle Flaeche wie die Abschlusszaesur */ --content-blocker-font-family: var(--font-primary); --content-blocker-font-size: 16px; --content-blocker-background-color: var(--color-dark); --content-blocker-background-opacity: 0.85; /* Die Flaeche liest diese Sammelvariable, nicht Farbe und Deckkraft einzeln */ --content-blocker-background: color-mix(in srgb, var(--color-dark) 85%, transparent); --content-blocker-text-color: var(--color-base); --content-blocker-link-color: var(--color-base); --content-blocker-link-color-hover: var(--color-primary); --content-blocker-separator-color: var(--color-secondary); --content-blocker-button-color: var(--color-primary); --content-blocker-button-color-hover: var(--color-accent-dark-wcag); --content-blocker-button-text-color: var(--color-text); --content-blocker-button-text-color-hover: var(--color-base); --content-blocker-border-radius-top-left: var(--standard-border-radius); --content-blocker-border-radius-top-right: var(--standard-border-radius); --content-blocker-border-radius-bottom-left: var(--standard-border-radius); --content-blocker-border-radius-bottom-right: var(--standard-border-radius); --content-blocker-button-border-radius-top-left: var(--standard-border-radius); --content-blocker-button-border-radius-top-right: var(--standard-border-radius); --content-blocker-button-border-radius-bottom-left: var(--standard-border-radius); --content-blocker-button-border-radius-bottom-right: var(--standard-border-radius); } /* Ueberschrift in Lora wie die Ueberschriften der Website, linksbuendig */ #BorlabsCookieBox .brlbs-cmpnt-dialog-box-header { justify-content: flex-start; text-align: left; } #BorlabsCookieBox h2 { font-family: var(--font-secondary); font-size: 1.5rem; font-weight: 700; line-height: var(--line-height-heading); color: var(--color-text); } /* Borlabs setzt hier kein Leerzeichen zwischen die Saetze */ #BorlabsCookieBox .brlbs-cmpnt-text-more-information::before { content: " "; } /* Ohne Speichern-Button haben die Kaestchen auf der ersten Ebene keine Funktion; die Auswahl je Kategorie steht unter „Einstellungen“. */ #BorlabsCookieBox .brlbs-cmpnt-dialog-box-entrance form { display: none; } /* Die Auswahl je Kategorie erreicht man ueber den Link „Einstellungen“ in der Fusszeile des Dialogs; ein dritter Button daneben waere doppelt. */ #BorlabsCookieBox .brlbs-cmpnt-dialog-box-entrance .overflow-auto > div > div:has(#CookieBoxPreferencesButton) { display: none; } /* Zustimmen und Ablehnen gleich gross nebeneinander */ #BorlabsCookieBox .brlbs-cmpnt-dialog-box-entrance .overflow-auto > div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } #BorlabsCookieBox .brlbs-cmpnt-dialog-box-entrance .overflow-auto > div > div { margin: 0; } #BorlabsCookieBox .brlbs-cmpnt-dialog-box-entrance .overflow-auto > div > div:empty { display: none; } @media screen and (max-width: 480px) { #BorlabsCookieBox .brlbs-cmpnt-dialog-box-entrance .overflow-auto > div { grid-template-columns: 1fr; } } /* Borlabs gibt dem Text eine feste Hoehe von 40vh; ohne die Kaestchen bliebe darunter eine Luecke. Langer Text scrollt weiterhin. */ #BorlabsCookieBox .brlbs-cmpnt-dialog-box-description { height: auto; max-height: 40vh; } /* Die Pakete YouTube und Vimeo bringen Buttons in Markenfarbe und Pillenform mit (eigenes CSS in der Datenbank, kommt bei Paket-Updates zurueck). Der html-Praefix und .brlbs-cmpnt-cb-main schlagen deren Selektor; es gilt der primaere Button. */ html body div.brlbs-cmpnt-container.brlbs-cmpnt-content-blocker.brlbs-cmpnt-with-individual-styles[data-borlabs-cookie-content-blocker-id] .brlbs-cmpnt-cb-main .brlbs-cmpnt-cb-btn { background: var(--color-primary); color: var(--color-text); border-radius: var(--standard-border-radius); } html body div.brlbs-cmpnt-container.brlbs-cmpnt-content-blocker.brlbs-cmpnt-with-individual-styles[data-borlabs-cookie-content-blocker-id] .brlbs-cmpnt-cb-main .brlbs-cmpnt-cb-btn:is(:hover, :focus-visible) { background: var(--color-accent-dark-wcag); color: var(--color-base); } /* Die Videokacheln sind fuer zwei Buttons zu klein. „Immer erlauben“ ist Bequemlichkeit; dasselbe geht ueber die Cookie-Einstellungen. */ html body div.brlbs-cmpnt-container.brlbs-cmpnt-content-blocker[data-borlabs-cookie-content-blocker-id] .brlbs-cmpnt-cb-main [data-borlabs-cookie-accept-service] { display: none !important; /* Borlabs setzt display inline */ } html body div.brlbs-cmpnt-container.brlbs-cmpnt-content-blocker.brlbs-cmpnt-with-individual-styles[data-borlabs-cookie-content-blocker-id] .brlbs-cmpnt-cb-main .brlbs-cmpnt-cb-btn { min-height: var(--touch-min); }