/* ============================================================ * DURUPRINT – lokale Fontbibliothek für den Canvas-Texteditor * * WICHTIG: * Diese Datei ergänzt ausschließlich die Font-Funktion. * Bestehende Theme-/Customizer-Regeln sollen Vorrang behalten. * ============================================================ */ /* ============================================================ * SCHRIFTART-BUTTON IM BESTEHENDEN TEXTEDITOR * ============================================================ */ #holocard-editors .dp-font-trigger { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: space-between; gap: .45rem; /* * Keine starre Mindestbreite mehr. * Der vorhandene .dp-toolbar darf weiterhin selbst umbrechen. */ flex: 0 1 10.5rem; width: 10.5rem; min-width: 0; max-width: 100%; min-height: 2rem; padding: .15rem .55rem; border: 1px solid #b8b8b8; border-radius: 4px; background: #fff; /* * Vorhandene Textfarbe/Grundschrift respektieren. */ color: inherit; font-family: inherit; font-size: .88rem; font-weight: inherit; line-height: 1.2; cursor: pointer; overflow: hidden; } #holocard-editors .dp-font-trigger:hover, #holocard-editors .dp-font-trigger:focus-visible { border-color: #111; } #holocard-editors .dp-font-trigger-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #holocard-editors .dp-font-trigger-chevron { flex: 0 0 auto; /* * Chevron soll nicht plötzlich mit dem * ausgewählten Google Font dargestellt werden. */ font-family: Arial, Helvetica, sans-serif; font-size: .75rem; } /* ============================================================ * FONT-POPOVER * Wird von JavaScript direkt in eingefügt. * ============================================================ */ .dp-font-popover { position: fixed; /* * Über dem Canvas-Toolbar. * Der Onboarding-Tooltip wird weiter unten separat * noch höher gesetzt. */ z-index: 2147483000; display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; border: 1px solid rgba(0, 0, 0, .16); border-radius: 10px; background: #fff; color: #111; box-shadow: 0 12px 40px rgba(0, 0, 0, .20); /* * Keine eigene globale Arial-Schrift mehr. * Die vorhandene Website-Schrift bleibt Grundlage. */ font-family: inherit; } .dp-font-popover *, .dp-font-popover *::before, .dp-font-popover *::after { box-sizing: border-box; } .dp-font-popover[hidden] { display: none !important; } /* ============================================================ * KOPFBEREICH / SUCHE * ============================================================ */ .dp-font-popover-head { display: flex; align-items: center; gap: .4rem; padding: .55rem; border-bottom: 1px solid #e5e5e5; } .dp-font-search { flex: 1 1 auto; min-width: 0; height: 2.25rem; padding: .35rem .6rem; border: 1px solid #cfcfcf; border-radius: 6px; background: #fff; color: inherit; /* * Vorhandene Website-Schrift verwenden. */ font: inherit; } .dp-font-search:focus { outline: 2px solid rgba(21, 158, 228, .22); outline-offset: 0; border-color: #159ee4; } /* ============================================================ * SCHLIESSEN-BUTTON * ============================================================ */ .dp-font-close { flex: 0 0 auto; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #333; font-family: Arial, Helvetica, sans-serif; font-size: 1.35rem; font-weight: 400; line-height: 1; cursor: pointer; } .dp-font-close:hover { background: #f1f1f1; } /* ============================================================ * KATEGORIEN * ============================================================ */ .dp-font-tabs { display: flex; flex-wrap: wrap; gap: .28rem; padding: .45rem .55rem .35rem; border-bottom: 1px solid #efefef; } .dp-font-tab { padding: .28rem .5rem; border: 1px solid #d7d7d7; border-radius: 999px; background: #fff; color: #333; /* * Theme-Schrift für die Bedienoberfläche. */ font-family: inherit; font-size: .75rem; font-weight: inherit; line-height: 1.1; cursor: pointer; } .dp-font-tab[data-active="1"] { border-color: #111; background: #111; color: #fff; } /* ============================================================ * STATUSZEILE * ============================================================ */ .dp-font-status { min-height: 1.65rem; padding: .35rem .6rem .15rem; color: #707070; font-family: inherit; font-size: .72rem; line-height: 1.2; } /* ============================================================ * FONTLISTE * ============================================================ */ .dp-font-list { flex: 1 1 auto; min-height: 220px; overflow: auto; overscroll-behavior: contain; padding: .2rem .35rem .55rem; } /* ============================================================ * EINZELNE SCHRIFT * ============================================================ */ .dp-font-option { display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: 3.2rem; padding: .48rem .6rem; border: 0; border-radius: 6px; background: #fff; color: #111; text-align: left; cursor: pointer; } .dp-font-option:hover, .dp-font-option:focus-visible { background: #f2f6f8; outline: none; } .dp-font-option--default { margin-bottom: .25rem; border-bottom: 1px solid #e8e8e8; border-radius: 6px 6px 0 0; } /* * Dieser Text erhält per JavaScript absichtlich * die jeweils dargestellte Google-Schrift. */ .dp-font-option-name { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.05rem; line-height: 1.3; } /* * Kategorie/Metadaten sollen NICHT ebenfalls * mit dem jeweiligen Vorschau-Font dargestellt werden. */ .dp-font-option-meta { display: block; margin-top: .08rem; color: #858585; font-family: Arial, Helvetica, sans-serif !important; font-size: .68rem; font-weight: 400; line-height: 1.2; } /* ============================================================ * MOBILE * ============================================================ */ @media (max-width: 640px) { #holocard-editors .dp-font-trigger { flex-basis: 9rem; width: 9rem; min-width: 0; max-width: 100%; } .dp-font-tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; } }