/** * EnergyExperts Portal — Rahmen fuer /portal/{bereich} * * Vollstaendig auf .ee-portal gescoped, damit nichts in Theme- oder * Shortcode-Styles hineinregnet. Die Tokens folgen dem Plugin-Design * (vgl. ee-deleads-search.css): Marke #1f6f43, weiche Flaeche #e7f3ec, * Radius 14px. Keine Icon-Bibliothek. * * Zwei Zustaende steuert ee-portal-nav.js ueber Klassen auf : * .ee-portal-collapsed schmale Sidebar (Desktop, persistent) * .ee-portal-mobile-open Off-canvas-Sidebar sichtbar (Mobil) */ /* --------------------------------------------------------------------- DIE MARKE. Eine Quelle der Wahrheit fuer das ganze Portal. Wer die Portalfarbe drehen will, dreht --ee-portal-brand und die Ableitungen darunter — sonst nichts. Alle Bereichs-Tokens (--dls-brand, --primary-color, --org-accent, --ee-tn-primary, --dash-accent ...) haengen weiter unten daran. ZWEI TRAEGER, mit Absicht: .ee-portal ist die Huelle, aber mehrere Dialoge und Aufklapp-Listen haengen sich per document.body.appendChild() NEBEN die Huelle (ee-activity-modal.js, ee-tasks-notes.js). Die Klasse ee-portal-page steht seit jeher am jeder Portalseite (PortalRouter::render_page/render_entry) und traegt die Tokens deshalb auch dorthin. Ausserhalb von /portal fehlt sie — Bestandsseiten mit denselben Shortcodes bleiben damit unberuehrt. --------------------------------------------------------------------- */ body.ee-portal-page, .ee-portal { --ee-portal-brand: #1f6f43; /* Grundton — Huelle, Primaerknopf, aktiv */ --ee-portal-brand-ink: #14532d; /* dunkler — Hover, Text auf weicher Flaeche */ --ee-portal-brand-hi: #2b8b57; /* heller — zweiter Halt in Verlaeufen */ --ee-portal-brand-soft: #e7f3ec; /* weiche Flaeche — Chips, Hover-Zeilen */ --ee-portal-brand-line: #b9ddc9; /* weicher Rand auf weicher Flaeche */ --ee-portal-brand-on: #ffffff; /* Schrift auf dem Grundton */ --ee-portal-brand-ring: rgba(31, 111, 67, .18); /* Fokusring */ --ee-portal-brand-veil: rgba(31, 111, 67, .08); /* Schleier, Hover-Fuellung */ --ee-portal-brand-veil-strong: rgba(31, 111, 67, .16); } .ee-portal { --dls-card: #ffffff; --dls-ink: #0f172a; --dls-muted: #64748b; --dls-line: #e5e9f2; --dls-brand: var(--ee-portal-brand); --dls-brand-soft: var(--ee-portal-brand-soft); --dls-brand-ink: var(--ee-portal-brand-ink); --dls-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .06); --dls-radius: 14px; --dls-sidebar: 248px; /* Lesbarkeits-Obergrenze des Inhalts. Bewusst KEIN Deckel mehr (2.25.314): das Portal nutzt die volle verfuegbare Breite, auch auf breiten Monitoren. Der seitliche Rand kommt weiterhin allein aus --ee-portal-gutter. */ --ee-portal-maxw: 100%; --ee-portal-gutter: clamp(16px, 4vw, 40px); display: flex; align-items: stretch; min-height: 100vh; background: #f6f8fa; color: var(--dls-ink); line-height: 1.5; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .ee-portal *, .ee-portal *::before, .ee-portal *::after { box-sizing: border-box; } /* ---- Sidebar ---- */ .ee-portal-sidebar { flex: 0 0 var(--dls-sidebar); width: var(--dls-sidebar); display: flex; flex-direction: column; gap: 20px; padding: 20px 14px; background: var(--dls-card); border-right: 1px solid var(--dls-line); transition: flex-basis .18s ease, width .18s ease, transform .22s ease; overflow-x: hidden; } .ee-portal-sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; } .ee-portal-brand { display: flex; align-items: center; gap: 10px; padding: 0 4px; text-decoration: none; color: var(--dls-ink); min-width: 0; } .ee-portal-brand:hover, .ee-portal-brand:focus { text-decoration: none; color: var(--dls-ink); } .ee-portal-brand-mark { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: var(--dls-brand); color: #ffffff; font-size: .78rem; font-weight: 700; letter-spacing: .04em; } /* Echtes Logo (500x320): Hoehe an der Kopfzeile, Breite proportional. */ .ee-portal-brand-logo { display: block; height: 34px; width: auto; max-width: 100%; object-fit: contain; } .ee-portal-brand-text { font-size: .95rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; } /* ---- Ein-/Ausklappen ---- */ .ee-portal-collapse, .ee-portal-burger { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--dls-line); border-radius: 9px; background: var(--dls-card); color: var(--dls-muted); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; } .ee-portal-collapse:hover, .ee-portal-collapse:focus, .ee-portal-burger:hover, .ee-portal-burger:focus { background: #f1f5f9; border-color: #cbd5e1; } /* Drei Striche, per ::before/::after — kein Icon-Font, kein SVG-Asset. */ .ee-portal-collapse-icon, .ee-portal-burger-icon { position: relative; display: block; width: 14px; height: 2px; border-radius: 2px; background: currentColor; } .ee-portal-collapse-icon::before, .ee-portal-collapse-icon::after, .ee-portal-burger-icon::before, .ee-portal-burger-icon::after { content: ""; position: absolute; left: 0; width: 14px; height: 2px; border-radius: 2px; background: currentColor; } .ee-portal-collapse-icon::before, .ee-portal-burger-icon::before { top: -5px; } .ee-portal-collapse-icon::after, .ee-portal-burger-icon::after { top: 5px; } /* Burger lebt nur auf schmalen Viewports. */ .ee-portal-burger { display: none; } /* ---- Navigation ---- */ .ee-portal-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .ee-portal-navgroup + .ee-portal-navgroup { margin-top: 18px; } .ee-portal-navgroup-title { margin: 0 0 6px; padding: 0 10px; color: var(--dls-muted); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; } .ee-portal-navlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .ee-portal-navlist li { margin: 0; padding: 0; list-style: none; } .ee-portal-navitem { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--dls-muted); font-size: .9rem; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color .15s ease, color .15s ease; } .ee-portal-navitem:hover, .ee-portal-navitem:focus { background: #f1f5f9; color: var(--dls-ink); text-decoration: none; } .ee-portal-navitem.is-active { background: var(--dls-brand-soft); color: var(--dls-brand-ink); font-weight: 600; } .ee-portal-navmark { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #f1f5f9; color: inherit; font-size: .62rem; font-weight: 700; letter-spacing: .03em; } /* Inline-SVG erbt ueber currentColor die Farbe des Menuepunkts. */ .ee-portal-navicon { display: block; width: 18px; height: 18px; color: inherit; } .ee-portal-navitem.is-active .ee-portal-navmark { background: #ffffff; color: var(--dls-brand-ink); } .ee-portal-navlabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* ---- Hauptbereich ---- */ .ee-portal-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .ee-portal-head { display: flex; align-items: center; gap: 14px; padding: 20px 32px 16px; background: var(--dls-card); border-bottom: 1px solid var(--dls-line); } .ee-portal-head-text { min-width: 0; } .ee-portal-eyebrow { display: inline-flex; align-items: center; background: var(--dls-brand-soft); color: var(--dls-brand-ink); font-size: .68rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .05em; } .ee-portal-title { margin: 8px 0 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; color: var(--dls-ink); } /* ---- Kopfleiste oben rechts: Aufgaben/Notizen/Glocke + Abmelden ---- */ .ee-portal-head-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto; } /* Bezugsrahmen fuer das absolut gesetzte Dropdown UND fuer die Badge. */ .ee-portal-head-action { position: relative; } .ee-portal-head-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--dls-line); border-radius: 10px; background: var(--dls-card); color: var(--dls-muted); cursor: pointer; text-decoration: none; transition: background .15s ease, color .15s ease, border-color .15s ease; } .ee-portal-head-btn:hover, .ee-portal-head-btn:focus-visible, .ee-portal-head-btn.is-open { background: var(--dls-brand-soft); border-color: var(--dls-brand-soft); color: var(--dls-brand-ink); text-decoration: none; } .ee-portal-head-btn--logout:hover, .ee-portal-head-btn--logout:focus-visible { background: #f1f5f9; border-color: var(--dls-line); color: var(--dls-brand); } .ee-portal-head-icon { display: block; pointer-events: none; } /* Zaehler an der Glocke — sitzt am Knopf, nicht am Icon, damit er beim Hover-Wechsel nicht mitwandert. */ .ee-portal-head-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: #dc2626; color: #fff; font-size: .62rem; font-weight: 700; line-height: 17px; text-align: center; pointer-events: none; } .ee-portal-head-badge[hidden] { display: none; } .ee-portal-head-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 900; width: 360px; max-width: calc(100vw - 32px); max-height: min(70vh, 520px); overflow-y: auto; background: var(--dls-card); border: 1px solid var(--dls-line); border-radius: var(--dls-radius); box-shadow: var(--dls-shadow); } .ee-portal-head-panel[hidden] { display: none; } /* ---- Benachrichtigungen: Dropdown-Inhalt ---- */ /* Der Panel-Rahmen scrollt (overflow-y oben), deshalb bleibt die Kopfzeile per sticky stehen statt ueber ein zweites Scroll-Element zu laufen. */ .ee-portal-np-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: var(--dls-card); border-bottom: 1px solid var(--dls-line); } .ee-portal-np-heading { font-size: .82rem; font-weight: 600; color: var(--dls-ink); } .ee-portal-np-tools { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; } .ee-portal-np-tool { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 28px; padding: 0 9px; border: 1px solid var(--dls-line); border-radius: 8px; background: var(--dls-card); color: var(--dls-muted); font: inherit; font-size: .74rem; line-height: 1; white-space: nowrap; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .ee-portal-np-tool:hover, .ee-portal-np-tool:focus-visible { background: var(--dls-brand-soft); border-color: var(--dls-brand-soft); color: var(--dls-brand-ink); } .ee-portal-np-tool--icon { width: 28px; padding: 0; } .ee-portal-np-toolicon { display: block; width: 15px; height: 15px; pointer-events: none; } .ee-portal-np-list { padding: 6px 0; } /* Laden, Leerzustand und Fehler teilen sich eine Darstellung — der Text kommt aus dem JS, die Huelle ist immer dieselbe. */ .ee-portal-np-state { margin: 0; padding: 18px 14px; color: var(--dls-muted); font-size: .82rem; text-align: center; } .ee-portal-nitem { display: flex; align-items: flex-start; gap: 9px; padding: 10px 14px; border-bottom: 1px solid #f1f4f9; cursor: pointer; transition: background .15s ease; } .ee-portal-nitem:last-child { border-bottom: 0; } .ee-portal-nitem:hover, .ee-portal-nitem:focus-visible { background: #f6f8fa; outline: none; } .ee-portal-nitem-dot { flex: 0 0 auto; width: 7px; height: 7px; margin-top: 6px; border-radius: 999px; background: transparent; } .ee-portal-nitem.is-unread { background: var(--dls-brand-soft); } .ee-portal-nitem.is-unread .ee-portal-nitem-dot { background: var(--dls-brand); } .ee-portal-nitem.is-unread .ee-portal-nitem-title { font-weight: 600; color: var(--dls-ink); } /* Dringlichkeit sitzt als schmaler Rand links, damit sie die Ungelesen-Flaeche nicht ueberschreibt. */ .ee-portal-nitem.is-high, .ee-portal-nitem.is-urgent { box-shadow: inset 3px 0 0 #dc2626; } .ee-portal-nitem-main { min-width: 0; flex: 1 1 auto; } .ee-portal-nitem-title { margin: 0; font-size: .82rem; font-weight: 500; color: var(--dls-ink); overflow-wrap: anywhere; } .ee-portal-nitem-msg { margin: 2px 0 0; font-size: .78rem; color: var(--dls-muted); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ee-portal-nitem-msg.is-full { display: block; overflow: visible; } .ee-portal-nitem-meta { margin: 4px 0 0; font-size: .7rem; color: var(--dls-muted); overflow-wrap: anywhere; } /* ---- Aufgaben/Notizen: Dropdown-Inhalt ---- */ /* Panel begrenzt, Kopf fest, nur die Liste scrollt. Der Panel-Rahmen scrollt fuer diese beiden Panels bewusst NICHT: sonst laegen zwei Scrollflaechen uebereinander und das Rad wuerde je nach Zeigerposition mal die eine, mal die andere bewegen. */ .ee-portal-head-panel[data-ee-portal-panel-body="tasks"], .ee-portal-head-panel[data-ee-portal-panel-body="notes"] { overflow: hidden; } .ee-portal-tn { display: flex; flex-direction: column; max-height: min(70vh, 520px); } .ee-portal-tn-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; } /* Ein Eintrag der Kurzliste. Aufbau und Masse folgen bewusst .ee-portal-nitem: alle drei Dropdowns sollen gleich aussehen. */ .ee-portal-tnitem { display: flex; align-items: flex-start; gap: 9px; padding: 10px 14px; border-bottom: 1px solid #f1f4f9; cursor: pointer; transition: background .15s ease; } .ee-portal-tnitem:last-child { border-bottom: 0; } .ee-portal-tnitem:hover, .ee-portal-tnitem:focus-visible { background: #f6f8fa; outline: none; } .ee-portal-tnitem-dot { flex: 0 0 auto; width: 7px; height: 7px; margin-top: 6px; border-radius: 999px; background: var(--dls-brand); } /* Ueberfaellig sitzt als schmaler Rand links — dieselbe Sprache, in der die Benachrichtigungen ihre Dringlichkeit zeigen. */ .ee-portal-tnitem.is-overdue { box-shadow: inset 3px 0 0 #dc2626; } .ee-portal-tnitem.is-overdue .ee-portal-tnitem-dot { background: #dc2626; } .ee-portal-tnitem.is-overdue .ee-portal-tnitem-meta { color: #dc2626; } .ee-portal-tnitem-main { min-width: 0; flex: 1 1 auto; } /* Im 360px-Dropdown ist Platz knapp: lange Titel brechen um statt die Zeile zu sprengen. */ .ee-portal-tnitem-title { margin: 0; font-size: .82rem; font-weight: 500; color: var(--dls-ink); overflow-wrap: anywhere; } .ee-portal-tnitem-meta { margin: 4px 0 0; font-size: .7rem; color: var(--dls-muted); overflow-wrap: anywhere; } /* ---- Benachrichtigungen: Vollbild ---- */ .ee-portal-nx { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; } .ee-portal-nx[hidden] { display: none; } .ee-portal-nx-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); } .ee-portal-nx-dialog { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 720px; max-height: min(82vh, 760px); background: var(--dls-card); border-radius: var(--dls-radius); box-shadow: 0 24px 64px rgba(15, 23, 42, .28); overflow: hidden; } .ee-portal-nx-dialog:focus { outline: none; } .ee-portal-nx-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--dls-line); } .ee-portal-nx-title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--dls-ink); } .ee-portal-nx-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 0; } .ee-portal-nx-body .ee-portal-nitem { padding: 12px 18px; } /* Kein Hintergrund-Scrollen, solange das Vollbild offen ist. Die Klasse setzt ee-portal-header.js auf . */ html.ee-portal-nx-open, html.ee-portal-nx-open body { overflow: hidden; } /* Der Aussenrahmen gibt nur noch den vertikalen Rhythmus vor. Die seitlichen Abstaende sitzen im .ee-portal-area, damit Rand UND Breitendeckel aus derselben Regel kommen (sonst waere der Deckel visuell verschoben). */ .ee-portal-body { flex: 1 1 auto; min-width: 0; padding: 24px 0 48px; } /* ---- Platzhalter-/Hinweis-Panel ---- */ .ee-portal-panel { max-width: 560px; background: var(--dls-card); border: 1px solid var(--dls-line); border-radius: var(--dls-radius); box-shadow: var(--dls-shadow); padding: 28px; } .ee-portal-panel-title { margin: 0 0 8px; font-size: 1.1rem; font-weight: 600; letter-spacing: -.01em; color: var(--dls-ink); } .ee-portal-panel-text { margin: 0; color: var(--dls-muted); font-size: .92rem; } .ee-portal-panel--denied { border-left: 3px solid var(--dls-brand); } .ee-portal-cta { display: inline-block; margin-top: 18px; padding: 9px 18px; border-radius: 10px; background: var(--dls-brand); color: #ffffff; font-size: .88rem; font-weight: 600; text-decoration: none; } .ee-portal-cta:hover, .ee-portal-cta:focus { background: var(--dls-brand-ink); color: #ffffff; text-decoration: none; } /* ---- Bereichs-Container ---- Der EINE Inhalts-Container des Portals. Er haelt breite Inhalte im Content-Bereich, ohne den jeweiligen Shortcode selbst anzufassen. Responsiv: durchgehend voll fluid, KEIN Breiten-Deckel mehr (2.25.314, --ee-portal-maxw: 100%). Der Innenabstand waechst mit dem Viewport (16px auf dem Telefon, 40px am grossen Monitor) — deshalb clamp() statt Breakpoint-Treppe. */ .ee-portal-area { width: 100%; max-width: var(--ee-portal-maxw); margin-inline: auto; padding-inline: var(--ee-portal-gutter); min-width: 0; box-sizing: border-box; } /* Das MaStR-Dashboard bricht per Full-Bleed (width:100vw + negative Aussenabstaende) bewusst aus dem Divi-Content-Container aus. Im Portal ist der Content-Bereich schmaler als der Viewport — die Regel schoebe den Inhalt also unter die Sidebar und ueber den rechten Rand hinaus. Hier ausschliesslich im Portal-Kontext zurueckgenommen; die Shortcode-CSS bleibt fuer die Bestandsseiten unveraendert. */ .ee-portal .ee-mastr-dashboard { width: 100%; max-width: 100%; margin: 0; padding: 0; } /* Rueckfall fuer alles, was trotzdem breiter baut (feste Tabellen/Grids): scrollen statt das Layout sprengen. */ .ee-portal-area--mastr-dashboard, .ee-portal-area--analyse, .ee-portal-area--b2b { overflow-x: auto; } .ee-portal-area table { max-width: 100%; } /* ---- Einstiegsseite /portal ---- */ .ee-portal--entry { align-items: center; justify-content: center; padding: 24px; } .ee-portal-entry { display: flex; align-items: center; justify-content: center; width: 100%; } .ee-portal-entry-card { display: flex; flex-direction: column; align-items: center; gap: 14px; background: var(--dls-card); border: 1px solid var(--dls-line); border-radius: var(--dls-radius); box-shadow: var(--dls-shadow); padding: 32px 36px; text-align: center; } .ee-portal-entry-card .ee-portal-brand-logo { height: 46px; } .ee-portal-entry-text { margin: 0; color: var(--dls-muted); font-size: .92rem; } .ee-portal-entry-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .ee-portal-entry-list a { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--dls-brand-soft); color: var(--dls-brand-ink); font-size: .82rem; text-decoration: none; } /* ========================================================================= Login-Seite [ee-portal-login] Eigenstaendig: sie lebt auf einer normalen WP-Seite, nicht im Portal-Rahmen — deshalb bringt sie ihre eigenen Tokens mit. ========================================================================= */ .ee-portal-login { --dls-card: #ffffff; --dls-ink: #0f172a; --dls-muted: #64748b; --dls-line: #e5e9f2; --dls-brand: #1f6f43; --dls-brand-soft: #e7f3ec; --dls-brand-ink: #14532d; --dls-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .06); --dls-radius: 14px; display: flex; justify-content: center; padding: 40px 16px; color: var(--dls-ink); line-height: 1.5; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .ee-portal-login *, .ee-portal-login *::before, .ee-portal-login *::after { box-sizing: border-box; } .ee-portal-login-card { width: 100%; max-width: 420px; background: var(--dls-card); border: 1px solid var(--dls-line); border-radius: var(--dls-radius); box-shadow: var(--dls-shadow); padding: 32px 28px; text-align: center; } .ee-portal-login-logo { display: block; height: 52px; width: auto; margin: 0 auto 18px; object-fit: contain; } .ee-portal-login-title { margin: 0 0 6px; font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; color: var(--dls-ink); } .ee-portal-login-text { margin: 0 0 22px; color: var(--dls-muted); font-size: .9rem; } /* wp_login_form() liefert eigenes Markup — hier nur eingekleidet. */ .ee-portal-login .login-username, .ee-portal-login .login-password, .ee-portal-login .login-remember, .ee-portal-login .login-submit { margin: 0 0 14px; text-align: left; } .ee-portal-login .login-username label, .ee-portal-login .login-password label { display: block; margin-bottom: 5px; color: var(--dls-muted); font-size: .78rem; font-weight: 600; } .ee-portal-login input[type="text"], .ee-portal-login input[type="password"] { width: 100%; padding: 10px 12px; border: 1px solid var(--dls-line); border-radius: 10px; background: #fff; color: var(--dls-ink); font-size: .92rem; } .ee-portal-login input[type="text"]:focus, .ee-portal-login input[type="password"]:focus { outline: none; border-color: var(--dls-brand); box-shadow: 0 0 0 3px var(--dls-brand-soft); } .ee-portal-login .login-remember { color: var(--dls-muted); font-size: .82rem; } .ee-portal-login .login-remember label { display: inline-flex; align-items: center; gap: 6px; } .ee-portal-login .login-submit { margin-bottom: 0; } .ee-portal-login input[type="submit"] { width: 100%; padding: 11px 18px; border: none; border-radius: 10px; background: var(--dls-brand); color: #fff; font-size: .92rem; font-weight: 600; cursor: pointer; } .ee-portal-login input[type="submit"]:hover, .ee-portal-login input[type="submit"]:focus { background: var(--dls-brand-ink); } .ee-portal-login-cta { display: inline-block; padding: 10px 20px; border-radius: 10px; background: var(--dls-brand); color: #fff; font-size: .9rem; font-weight: 600; text-decoration: none; } .ee-portal-login-cta:hover, .ee-portal-login-cta:focus { background: var(--dls-brand-ink); color: #fff; text-decoration: none; } .ee-portal-login-foot { margin: 18px 0 0; font-size: .8rem; } .ee-portal-login-foot a { color: var(--dls-muted); text-decoration: none; } .ee-portal-login-foot a:hover, .ee-portal-login-foot a:focus { color: var(--dls-brand); text-decoration: underline; } .ee-portal-login-error { margin: 0 0 16px; padding: 10px 12px; border-radius: 10px; border-left: 3px solid #b91c1c; background: #fef2f2; color: #7f1d1d; font-size: .85rem; text-align: left; } /* Abdunkelung hinter der Off-canvas-Sidebar — nur mobil sichtbar. */ .ee-portal-scrim { display: none; } /* ========================================================================= Desktop: eingeklappte Sidebar ========================================================================= */ @media (min-width: 769px) { .ee-portal-collapsed .ee-portal { --dls-sidebar: 74px; } .ee-portal-collapsed .ee-portal-sidebar { padding-left: 12px; padding-right: 12px; } .ee-portal-collapsed .ee-portal-sidebar-top { flex-direction: column; gap: 12px; } .ee-portal-collapsed .ee-portal-brand { padding: 0; justify-content: center; width: 100%; } /* Schmale Sidebar: Logo kleiner und zentriert, damit es in die 50px Innenbreite passt (500x320 -> 26px hoch entspricht 41px breit). */ .ee-portal-collapsed .ee-portal-brand-logo { height: 26px; margin: 0 auto; } .ee-portal-collapsed .ee-portal-brand-text, .ee-portal-collapsed .ee-portal-navlabel, .ee-portal-collapsed .ee-portal-navgroup-title { display: none; } .ee-portal-collapsed .ee-portal-navitem { justify-content: center; gap: 0; padding-left: 6px; padding-right: 6px; } /* Ohne Ueberschrift braucht die Gruppentrennung eine sichtbare Linie. */ .ee-portal-collapsed .ee-portal-navgroup + .ee-portal-navgroup { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--dls-line); } } /* ========================================================================= Mobil: Off-canvas-Sidebar ========================================================================= */ @media (max-width: 768px) { .ee-portal { position: relative; } .ee-portal-sidebar { position: fixed; top: 0; left: 0; z-index: 1001; height: 100vh; width: 264px; flex-basis: 264px; transform: translateX(-100%); box-shadow: 0 0 40px rgba(15, 23, 42, .18); } .ee-portal-mobile-open .ee-portal-sidebar { transform: translateX(0); } .ee-portal-mobile-open .ee-portal-scrim { display: block; position: fixed; inset: 0; z-index: 1000; background: rgba(15, 23, 42, .42); } .ee-portal-burger { display: inline-flex; } .ee-portal-head { padding: 14px 18px 12px; } .ee-portal-title { font-size: 1.25rem; } .ee-portal-body { padding: 18px 0 36px; } } /* ========================================================================= Schmale Telefone: Dropdowns ueber die volle Breite ========================================================================= */ @media (max-width: 479px) { .ee-portal-head-actions { gap: 4px; } .ee-portal-head-btn { width: 34px; height: 34px; } /* Kein Platz mehr fuer ein 360px-Panel am rechten Rand — es loest sich vom Knopf und spannt sich fest ueber die Viewport-Breite. */ .ee-portal-head-panel { position: fixed; top: auto; left: 8px; right: 8px; width: auto; max-width: none; max-height: 70vh; } /* Auf schmalen Geraeten wandert der Text-Knopf unter die Ueberschrift, statt die Kopfzeile zu sprengen. */ .ee-portal-np-head { flex-wrap: wrap; padding: 10px 12px; } .ee-portal-nitem { padding: 10px 12px; } /* Vollbild heisst hier wirklich Vollbild — fuer Randabstaende ist auf einem Telefon kein Platz. */ .ee-portal-nx { padding: 0; } .ee-portal-nx-dialog { max-width: none; max-height: none; height: 100%; border-radius: 0; } .ee-portal-nx-head { padding: 12px 14px; } .ee-portal-nx-body .ee-portal-nitem { padding: 12px 14px; } } /* ========================================================================= BEREICHS-ANGLEICH — Design-Fundament des Portals ========================================================================= Alles hier ist auf .ee-portal-area gescoped. Dieser Wrapper existiert AUSSCHLIESSLICH in PortalRouter::render_page() — Bestandsseiten ausserhalb von /portal bleiben dadurch garantiert unveraendert, obwohl wir hier fremde Shortcode-Selektoren anfassen. Drei Regeln, die fuer JEDEN Bereich gelten: 1. Die Breite kommt vom Portal, nicht vom Bereich. 2. Der Hintergrund kommt vom Portal, nicht vom Bereich. Weiss entsteht aus Karten/Panels, nie aus einer Bereichsflaeche. 3. Der Seitentitel kommt aus .ee-portal-head, nicht aus dem Bereich. Die Reihenfolge im Stylesheet ist zweitrangig: jede Regel schlaegt den Bestand ueber die Spezifitaet (mind. zwei Klassen), damit sie auch dann greift, wenn die Bereichs-CSS spaeter ausgeliefert wird. ========================================================================= */ /* ---- 1) Breite: bereichseigene Deckel weichen dem Portal-Container ---- 760px (.ee-dls), 860px (.ee-changelog), 1280px (.ee-b2b), 1400px (.ee-mastr-search) und 1600px (#settings-container) haben im Portal keine Aufgabe mehr — der Deckel sitzt jetzt zentral im .ee-portal-area. Die Innenabstaende fallen mit, sonst summierten sie sich mit dem Gutter des Portals zu Doppelraendern. BEWUSST NICHT hier: .ee-dls-mkt (820px) und die Popup-/Drawer-Deckel (.ee-b2b-drawer-inner, .popup-container, .shop-popup-container) — das sind gewollte Lesebreiten bzw. Dialogmasse, keine Seitencontainer. */ .ee-portal .ee-portal-area .ee-dls, .ee-portal .ee-portal-area .ee-changelog, .ee-portal .ee-portal-area .ee-b2b, .ee-portal .ee-portal-area .ee-mastr-search, .ee-portal .ee-portal-area .ee-dashboard, .ee-portal .ee-portal-area .ee-bm, .ee-portal .ee-portal-area #settings-container { width: 100%; max-width: 100%; margin: 0; padding: 0; } /* Das B2B-Board schiebt sich auf der Bestandsseite /b2b/ um 120px nach unten, weil Divis Kopfzeile dort FIXIERT darueber liegt. Im Portal gibt es diese Kopfzeile nicht — der Abstand waere ein leeres Loch ganz oben. ID + Klasse sind noetig, um die Bestandsregel zu ueberstimmen. */ .ee-portal .ee-portal-area #ee-b2b-partners.ee-b2b { padding-top: 0; } /* Account bringt eine EIGENE Sidebar im Grid mit (.dashboard-container). Deshalb faellt hier nur der 1400er-Deckel — der Innenabstand bleibt, er ist die einzige Trennung zwischen Sidebar und Inhalt. Der eigentliche Umbau des Account-Grids ist eine eigene Etappe. */ .ee-portal .ee-portal-area .main-content { max-width: 100%; } /* ---- 2) Hintergrund: eine Flaeche fuer das ganze Portal ---- Die Bereichs-Hintergruende laufen ueber eigene Tokens, die jeweils GENAU EINMAL benutzt werden (verifiziert) — sie hier auf transparent zu setzen ist praeziser und nebenwirkungsfreier, als einzelne Regeln zu ueberschreiben. */ .ee-portal .ee-portal-area { --mastr-bg: transparent; --bm-bg: transparent; --hw-background: transparent; } /* Das Analyse-Dashboard traegt seinen Verlauf hart im Regelwerk (kein Token) und erzwingt zusaetzlich volle Viewport-Hoehe. Im Portal steht darueber noch die Kopfzeile — 100vh erzeugte dort garantiert eine zweite, unnoetige Scrollstrecke. */ .ee-portal .ee-portal-area .ee-dashboard { background: transparent; min-height: 0; } .ee-portal .ee-portal-area .ee-mastr-dashboard, .ee-portal .ee-portal-area .ee-bm, .ee-portal .ee-portal-area #settings-container { background: transparent; min-height: 0; } /* ---- 3) Ein Seiten-Header ---- Der Portal-Kopf (.ee-portal-head mit AREAS['label']) ist die EINZIGE Titelquelle. Ausgeblendet wird deshalb gezielt nur die TITEL-ZEILE — NICHT der Header-Container. An ihm haengen Bedienelemente, die erhalten bleiben muessen (verifiziert am Markup): .ee-dash-header -> Zeitraum-Auswahl, Aktualisieren, CSV-Export, Organisationsname, "zuletzt aktualisiert" .ee-mastr-header -> Aktualisierungs-Badge + Filterleiste .ee-bm-header -> Untertitel + "+ Neuer Artikel" Aus .ee-dash-header-titles faellt Titel UND Untertitel, weil beide in einem gemeinsamen Kasten sitzen; Organisationsname und Zeitstempel liegen daneben und bleiben. */ .ee-portal .ee-portal-area .ee-dash-header-titles, .ee-portal .ee-portal-area .ee-mastr-title, .ee-portal .ee-portal-area .ee-bm-header__title, .ee-portal .ee-portal-area .ee-changelog__title, .ee-portal .ee-portal-area .ee-dls-head h1 { display: none; } /* Das Abzeichen "DoppelErnte - Partner-Portal" beschriftet auf der Bestandsseite den Kontext. Im Portal IST der Kontext bereits die Umgebung — es bliebe eine Dopplung. */ .ee-portal .ee-portal-area .ee-dls-head .ee-dls-badge { display: none; } /* Damit bleibt vom DE-Leads-Kopf im Portal nichts mehr uebrig: Titel und Abzeichen sind ausgeblendet, der Erklaertext ist als Abschnitts-Kopf in die Suchkarte gewandert (.ee-dls-section-head). Der leere Container wuerde nur noch eine Leerzeile erzeugen. Ausserhalb des Portals traegt er weiterhin Abzeichen und H1 und bleibt sichtbar. */ .ee-portal .ee-portal-area .ee-dls-head { display: none; } /* Was vom Header uebrig bleibt, ist eine Bedienzeile — also enger gesetzt als eine Titelzone und links buendig zum Portal-Raster. */ .ee-portal .ee-portal-area .ee-dash-header, .ee-portal .ee-portal-area .ee-mastr-header, .ee-portal .ee-portal-area .ee-bm-header, .ee-portal .ee-portal-area .ee-changelog__header { margin-bottom: 18px; } .ee-portal .ee-portal-area .ee-changelog__header { text-align: left; } /* ---- 4) Karten und Panels aus einem Guss ---- Angeglichen wird ueber die TOKENS der Bereiche, nicht ueber einzelne Regeln: ein Wert pro Bereich statt Dutzender Ueberschreibungen, und Zustaende (hover/aktiv) bleiben unangetastet. Karten laufen auf --dls-radius (14px) und --dls-shadow, kleine Elemente auf 10px. Pill-Formen (--ee-radius-pill) bleiben bewusst rund. */ .ee-portal .ee-portal-area { /* Analyse-Dashboard */ --dash-radius: var(--dls-radius); --dash-radius-lg: var(--dls-radius); --dash-radius-sm: 10px; --dash-shadow: var(--dls-shadow); --dash-border: var(--dls-line); /* MaStR-Dashboard */ --mastr-radius: var(--dls-radius); --mastr-shadow: var(--dls-shadow); --mastr-border: var(--dls-line); /* Blog-Manager */ --bm-radius: var(--dls-radius); --bm-shadow: var(--dls-shadow); --bm-border: var(--dls-line); /* Hardware */ --hw-radius: var(--dls-radius); --hw-radius-sm: 10px; --hw-shadow: var(--dls-shadow); --hw-border: var(--dls-line); /* B2B-CRM: dort nur als var(...)-Rueckfall benutzt, hier erstmals tatsaechlich gesetzt. */ --ee-radius-sm: var(--dls-radius); --ee-shadow-card: var(--dls-shadow); --ee-shadow-md: var(--dls-shadow); /* Account (ee-create-account.css :root, 12px/20px). --radius wird dort 19x benutzt und NIRGENDWO sonst im Repo deklariert (verifiziert) — die Ueberschreibung ist damit auf den Account-Bereich begrenzt. --radius-large existiert zusaetzlich in ee-analytics-styles.css, die im Portal aber auf keinem Bereich laedt. */ --radius: var(--dls-radius); --radius-large: var(--dls-radius); /* Organisationen (ee-organization-styles.css :root Z1343). -lg ist bereits 14px, -md bereits 10px — nur der 6er-Wert fiel aus dem Raster. Deklaration liegt auf :root, unsere Regel auf zwei Klassen gewinnt daher fuer alles im Bereich. */ --org-radius-sm: 8px; --org-radius-md: 10px; --org-radius-lg: var(--dls-radius); } /* ---- 5) Kein horizontaler Ueberlauf ---- Der Container darf nie breiter werden als der Inhaltsbereich, egal was ein Bereich an festen Breiten mitbringt. */ .ee-portal-area > *:first-child { margin-top: 0; } .ee-portal-area > *:last-child { margin-bottom: 0; } /* BEWUSST OHNE : Chart.js schreibt Breite UND Hoehe als Inline-Stil an die Zeichenflaeche. Ein max-width wuerde nur die Breite kappen, die Hoehe bliebe stehen — das Diagramm wuerde verzerrt statt kleiner. Fuer zu breite Diagramme greift der vorhandene overflow-x-Rueckfall der Bereiche. */ .ee-portal-area img { max-width: 100%; height: auto; } /* ========================================================================= LADEZUSTAENDE — ein Muster fuer alle Bereiche ========================================================================= Zwei Dinge werden hier zentral geloest: 1) SCOPE. Mehrere Bereiche bringen einen VOLLBILD-Lader mit (position:fixed; inset:0) — allen voran das Dashboard (#dashboardLoading .ee-dash-loading, ee-analysis-dashboard.css Z83) und der Blog-Manager (.ee-bm-loading, ee-blog-manager-pro.css Z1601). Im Portal legte sich diese Folie damit auch ueber die Seitenleiste. Hier werden sie auf position:absolute gezogen, decken also nur noch den Inhaltsbereich ab. 2) OPTIK. Jeder Bereich brachte seinen eigenen Spinner mit: 36px gruen (Dashboard/Blog), 60px mit 8px Rand auf dunkler 40%-Folie (Konto), 200px-Ring mit Logo (Projektansicht), 60px blau (Analytics), reiner Text ohne Spinner (B2B, Bug-Tracker). Alle ziehen jetzt dieselben Tokens. POSITIONS-REFERENZ: .ee-portal-body ist relativ. Bringt der Bereichs- Container selbst schon position:relative mit (.ee-dashboard, .ee-bm), ist dieser der naehere Anker — in beiden Faellen liegt die Folie im Inhalt und nie ueber der Seitenleiste. BEWUSST NICHT GESETZT: display. Die Bereiche schalten ihre Lader auf voellig verschiedenen Wegen sichtbar (.active, .hidden, opacity, inline style.display). Ein display:flex von hier wuerde z.B. den Konto-Lader (.loadingOverlay, per Vorgabe display:none) dauerhaft einblenden. ========================================================================= */ .ee-portal { --ee-portal-loading-bg: rgba(246, 248, 250, .82); --ee-portal-loading-blur: 3px; /* Unter der Kopfzeilen-Klappe (900) und der mobilen Off-canvas-Leiste (1000/1001), aber ueber jedem Bereichs-Inhalt. */ --ee-portal-loading-z: 400; --ee-portal-spinner-size: 36px; --ee-portal-spinner-width: 3px; --ee-portal-spinner-track: #dde5ee; --ee-portal-spinner-head: var(--dls-brand); --ee-portal-spinner-speed: .75s; --ee-portal-skeleton-base: #e8edf3; --ee-portal-skeleton-shine: #f6f8fb; } .ee-portal .ee-portal-body { position: relative; } @keyframes ee-portal-spin { to { transform: rotate(360deg); } } @keyframes ee-portal-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ---- 1) Bereichseigene Vollbild-Folien auf den Inhalt zaehmen ---- Hinweis zum Konto-Bereich: #editTeamMemberOverlay nutzt dieselbe Klasse .loadingOverlay, traegt seine position:fixed aber INLINE (AccountTeamManager, AccountDashboardRenderer). Inline gewinnt gegen diese Regel — der Dialog bleibt also bewusst ein Vollbild-Dialog. Genau deshalb steht hier nirgends ein !important. */ .ee-portal .ee-portal-body .ee-dash-loading, .ee-portal .ee-portal-body .ee-bm-loading, .ee-portal .ee-portal-body .loadingOverlay, .ee-portal .ee-portal-body .loading-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: auto; height: auto; max-width: none; margin: 0; border-radius: 0; background: var(--ee-portal-loading-bg); -webkit-backdrop-filter: blur(var(--ee-portal-loading-blur)); backdrop-filter: blur(var(--ee-portal-loading-blur)); z-index: var(--ee-portal-loading-z); } /* Die Phasen-Heatmap benutzt .ee-dash-loading als reinen Platzhalter INNERHALB einer Karte (ee-analysis-dashboard.js, renderPhaseHeatmap). Dort war die Folie bisher sogar fix ueber der ganzen Seite. Hier wird sie wieder zu dem, was sie sein soll: ein normaler Block im Kartenfluss. */ .ee-portal .ee-portal-body #phaseHeatmap .ee-dash-loading { position: static; inset: auto; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; z-index: auto; } /* ---- 2) EIN Spinner ---- .spinnerOverlay-container/.logoOverlay gehoeren zum 200px-Logo-Ring der Projektansicht; der Ring wird auf Spinner-Groesse gestutzt und das Logo darin ausgeblendet, weil es bei 36px nicht mehr lesbar waere. */ .ee-portal .ee-portal-body .ee-dash-spinner, .ee-portal .ee-portal-body .ee-bm-spinner, .ee-portal .ee-portal-body .ee-timeline-loading-spinner, .ee-portal .ee-portal-body .loading-spinner, .ee-portal .ee-portal-body .loadingOverlay .spinner, .ee-portal .ee-portal-body .spinnerOverlay { box-sizing: border-box; width: var(--ee-portal-spinner-size); height: var(--ee-portal-spinner-size); border: var(--ee-portal-spinner-width) solid var(--ee-portal-spinner-track); border-top: var(--ee-portal-spinner-width) solid var(--ee-portal-spinner-head); border-radius: 50%; animation: ee-portal-spin var(--ee-portal-spinner-speed) linear infinite; } .ee-portal .ee-portal-body .spinnerOverlay-container { width: var(--ee-portal-spinner-size); height: var(--ee-portal-spinner-size); } .ee-portal .ee-portal-body .logoOverlay { display: none; } /* Kleine Inline-Spinner (neben Text/in Knoepfen) — gleiche Farben, eigene Groesse, damit sie in der Zeile bleiben. */ .ee-portal .ee-portal-body .ee-dash-spinner-sm, .ee-portal .ee-portal-body .ee-bm-spinner-sm, .ee-portal .ee-portal-body .ee-dls-spinner, .ee-portal .ee-portal-body .ee-pipeline-loading__spinner { box-sizing: border-box; border-color: var(--ee-portal-spinner-track); border-top-color: var(--ee-portal-spinner-head); animation: ee-portal-spin var(--ee-portal-spinner-speed) linear infinite; } /* ---- 3) Reine Text-Lader bekommen denselben Spinner ---- Nur Bereiche, deren Lade-Markup nachweislich KEIN eigenes Spinner-Element enthaelt (B2B-Board/-Drawer/-Aktivitaeten, Bug-Tracker, Funnel- Einstellungen). .ee-pipeline-loading ist bewusst NICHT dabei: die JS-Variante bringt ein eigenes .ee-pipeline-loading__spinner mit. */ .ee-portal .ee-portal-body .ee-b2b-loading, .ee-portal .ee-portal-body .ee-bt-loading, .ee-portal .ee-portal-body .ee-settings-loading { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--dls-muted); } .ee-portal .ee-portal-body .ee-b2b-loading::before, .ee-portal .ee-portal-body .ee-bt-loading::before, .ee-portal .ee-portal-body .ee-settings-loading::before { content: ""; flex: 0 0 auto; box-sizing: border-box; width: 18px; height: 18px; border: 2px solid var(--ee-portal-spinner-track); border-top-color: var(--ee-portal-spinner-head); border-radius: 50%; animation: ee-portal-spin var(--ee-portal-spinner-speed) linear infinite; } /* ---- 4) EIN Skelett-Schimmer ---- Vier Bereiche brachten vier Paletten und drei Laufrichtungen mit. Das MaStR-Dashboard schiebt zusaetzlich ein ::after-Glanzlicht durch das Element — das wird abgeschaltet, damit alle Skelette dieselbe Bewegung zeigen. */ .ee-portal .ee-portal-body .ee-mastr-skeleton, .ee-portal .ee-portal-body .ee-result-skeleton, .ee-portal .ee-portal-body .ee-dash-skeleton-line, .ee-portal .ee-portal-body .ee-dash-skeleton-host .ee-dash-skeleton-bar, .ee-portal .ee-portal-body .skeleton-item { background: linear-gradient( 90deg, var(--ee-portal-skeleton-base) 25%, var(--ee-portal-skeleton-shine) 50%, var(--ee-portal-skeleton-base) 75% ); background-size: 200% 100%; animation: ee-portal-shimmer 1.4s linear infinite; } .ee-portal .ee-portal-body .ee-mastr-skeleton::after { display: none; } /* ---- 5) Ruhiger Modus ---- */ @media (prefers-reduced-motion: reduce) { .ee-portal .ee-portal-body .ee-dash-spinner, .ee-portal .ee-portal-body .ee-dash-spinner-sm, .ee-portal .ee-portal-body .ee-bm-spinner, .ee-portal .ee-portal-body .ee-bm-spinner-sm, .ee-portal .ee-portal-body .ee-dls-spinner, .ee-portal .ee-portal-body .ee-timeline-loading-spinner, .ee-portal .ee-portal-body .ee-pipeline-loading__spinner, .ee-portal .ee-portal-body .loading-spinner, .ee-portal .ee-portal-body .loadingOverlay .spinner, .ee-portal .ee-portal-body .spinnerOverlay, .ee-portal .ee-portal-body .ee-b2b-loading::before, .ee-portal .ee-portal-body .ee-bt-loading::before, .ee-portal .ee-portal-body .ee-settings-loading::before, .ee-portal .ee-portal-body .ee-mastr-skeleton, .ee-portal .ee-portal-body .ee-result-skeleton, .ee-portal .ee-portal-body .ee-dash-skeleton-line, .ee-portal .ee-portal-body .ee-dash-skeleton-host .ee-dash-skeleton-bar, .ee-portal .ee-portal-body .skeleton-item { animation: none; } } /* ========================================================================= BEREICHS-ANGLEICH — Hardware (/portal/einstellungen) ========================================================================= ee-hardware-settings.css stammt aus der "Project View"-Zeit: Grasgruen (#3FA14D / rgb(63,161,77)) als Flaechenfarbe, Pillen-Knoepfe in Grossbuchstaben, ein dunkler Tabellenkopf und eine gruene Balken- Ueberschrift je Abschnitt. Im Portal ist das der einzige Bereich, der noch so aussieht. Alles hier ist auf .ee-portal .ee-portal-area gescoped — die Bestands- seite mit [ee-general-settings] ausserhalb von /portal bleibt exakt wie sie ist. Der Scope ist hier besonders wichtig, weil ee-hardware-settings.css nackte Element-Selektoren benutzt (h2, table, thead, tbody), die sonst ueberall hin ausstrahlen wuerden. Es werden ausschliesslich vorhandene Portal-Tokens verwendet: --dls-brand (Akzent), --dls-brand-soft/-ink (aktiver Zustand, wie im Menue), --dls-line, --dls-ink, --dls-muted, --dls-card, --dls-radius, --dls-shadow. Keine neuen Farbwerte. KEIN Markup, KEIN JS angefasst: Klassen, IDs, data-Attribute und die Reihenfolge der Kinder bleiben unveraendert. Die Aktionszeile entsteht ueber Grid-Bereiche, nicht ueber verschobene Elemente. ========================================================================= */ /* ---- Typografie: der Bereich erbt die Portal-Schrift ---- #settings-container setzt 'Exo' fest; alle anderen Bereiche laufen auf der Systemschrift des Portals. Breite/Padding/Hintergrund sind bereits weiter oben (Fundament) neutralisiert. */ .ee-portal .ee-portal-area #settings-container { font-family: inherit; } /* ---- 1) Tab-Leiste: vom gruenen Kachel-Block zu Unterstrich-Reitern ---- Muster identisch zum Blog-Manager (.ee-bm-tabs): neutrale Leiste auf einer Trennlinie, aktiver Reiter nur durch Farbe + Unterstrich markiert. position:sticky faellt bewusst weg — kein anderer Portal-Bereich hat eine klebende Leiste, und mit der Portal-Kopfzeile darueber entstuende ein zweiter, konkurrierender Fixpunkt. Damit entfaellt auch der backdrop-filter, der sonst einen containing block aufspannt. */ .ee-portal .ee-portal-area .hw-tab-navigation { position: static; z-index: auto; display: flex; flex-wrap: nowrap; gap: 2px; padding: 0; margin: 0 0 22px; background: transparent; border: 0; border-bottom: 1px solid var(--dls-line); border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .ee-portal .ee-portal-area .hw-tab-navigation::-webkit-scrollbar { display: none; } .ee-portal .ee-portal-area .hw-tab-btn { flex: 0 0 auto; min-width: 0; padding: 11px 16px; background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 0; font-family: inherit; font-size: .9rem; font-weight: 500; line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--dls-muted); box-shadow: none; white-space: nowrap; transition: color .15s ease, border-color .15s ease; } .ee-portal .ee-portal-area .hw-tab-btn:hover, .ee-portal .ee-portal-area .hw-tab-btn:focus-visible { background: transparent; border-color: transparent; border-bottom-color: var(--dls-line); color: var(--dls-ink); } /* Aktiver Reiter traegt dieselbe Farbsprache wie der aktive Menuepunkt in der Sidebar (--dls-brand-ink auf --dls-brand-Unterstrich) — statt einer vollflaechig grasgruenen Kachel. */ .ee-portal .ee-portal-area .hw-tab-btn.active { background: transparent; border-color: transparent; border-bottom-color: var(--dls-brand); color: var(--dls-brand-ink); font-weight: 600; box-shadow: none; } /* Die Emoji-Reiterzeichen sind seit 2.25.299 aus dem Markup entfernt (HardwareSettingsShortcode). Die Regel bleibt als Riegel stehen: taucht irgendwo noch ein .tab-icon in einem Hardware-Reiter auf (aelterer Cache, fremde Vorlage), bleibt es im Portal unsichtbar statt bunt. */ .ee-portal .ee-portal-area .hw-tab-btn .tab-icon { display: none; } /* ---- 2) Abschnitts-Kopf: aus dem gruenen Balken wird eine Aktionszeile ---- Das

steht im Markup VOR der Tabelle, der "+ hinzufuegen"-Knopf DAHINTER. Statt das Markup umzubauen, bekommt der Abschnitt ein Raster mit benannten Feldern: Titel links, Aktion rechts, Tabelle darunter. Damit sitzt der Knopf oben rechts wie in den anderen Bereichen, ohne dass ein Element im DOM verschoben wird (JS bindet an .add-item und .hw-section, beides bleibt unberuehrt). .hw-section ohne .active bleibt display:none — nur der sichtbare Abschnitt wird zum Raster. */ .ee-portal .ee-portal-area .hw-section.active { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "hwtitle hwaction" "hwtable hwtable"; align-items: center; column-gap: 16px; row-gap: 14px; } .ee-portal .ee-portal-area .hw-section > h2 { grid-area: hwtitle; } .ee-portal .ee-portal-area .hw-section > .table-container { grid-area: hwtable; } .ee-portal .ee-portal-area .hw-section > .add-item { grid-area: hwaction; } /* Der Seitentitel steht im Portal-Kopf, die Kategorie im aktiven Reiter — die Ueberschrift ist damit reine Wiederholung. Sie bleibt als Gliederungsmarke erhalten, aber eingedampft auf eine schlanke Zeile: kein gruener Unterstrich, kein Farbbalken davor. */ .ee-portal .ee-portal-area .hw-section > h2 { margin: 0; padding: 0; border: 0; font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--dls-ink); display: block; } .ee-portal .ee-portal-area .hw-section > h2::before { content: none; display: none; } /* ---- 3) Knoepfe auf das Portal-Muster ---- Aus der grossen, mittig zentrierten Pille in Grossbuchstaben mit Farbverlauf und Schwebe-Effekt wird ein normal grosser Primaerknopf rechts in der Aktionszeile. */ .ee-portal .ee-portal-area .add-item { display: inline-flex; align-items: center; justify-content: center; gap: 8px; justify-self: end; width: auto; margin: 0; padding: 10px 18px; background: var(--dls-brand); border: 1px solid var(--dls-brand); border-radius: 10px; box-shadow: none; color: #ffffff; font-family: inherit; font-size: .9rem; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease; } .ee-portal .ee-portal-area .add-item:hover, .ee-portal .ee-portal-area .add-item:focus-visible { background: var(--dls-brand-ink); border-color: var(--dls-brand-ink); box-shadow: none; transform: none; } .ee-portal .ee-portal-area .add-item:active { transform: none; } /* Zeilen-Aktionen (Bearbeiten/Duplizieren/Loeschen) waren drei vollflaechige Farbkacheln pro Zeile — bei sechs Kategorien x n Zeilen das lauteste Element der Seite. Jetzt: neutrale Umrissknoepfe, Farbe nur dort, wo sie etwas bedeutet (Loeschen). */ .ee-portal .ee-portal-area .action-btn { margin: 0 2px; padding: 6px 12px; background: var(--dls-card); border: 1px solid var(--dls-line); border-radius: 8px; box-shadow: none; color: var(--dls-ink); font-family: inherit; font-size: .78rem; font-weight: 500; line-height: 1.3; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .ee-portal .ee-portal-area .action-btn:hover { background: #f1f5f9; border-color: var(--dls-muted); box-shadow: none; transform: none; } .ee-portal .ee-portal-area .action-btn.edit { background: var(--dls-brand-soft); border-color: var(--dls-brand-soft); color: var(--dls-brand-ink); } .ee-portal .ee-portal-area .action-btn.edit:hover { background: var(--dls-brand); border-color: var(--dls-brand); color: #ffffff; } .ee-portal .ee-portal-area .action-btn.duplicate { background: var(--dls-card); border-color: var(--dls-line); color: var(--dls-ink); } .ee-portal .ee-portal-area .action-btn.duplicate:hover { background: #f1f5f9; border-color: var(--dls-muted); color: var(--dls-ink); } /* Loeschen bleibt rot, aber als Umriss — gefuellt erst beim Zeigen. */ .ee-portal .ee-portal-area .action-btn.delete { background: var(--dls-card); border-color: #fecaca; color: #b91c1c; } .ee-portal .ee-portal-area .action-btn.delete:hover { background: #b91c1c; border-color: #b91c1c; color: #ffffff; } /* ---- 4) Tabellen-Karte in Portal-Optik ---- Radius und Schatten kommen bereits ueber die Token-Ueberschreibung (--hw-radius/--hw-shadow im Fundament). Hier fallen die Reste: der milchige Rahmen (rgba(255,255,255,.3)), der backdrop-filter und die halbtransparente Kartenflaeche. overflow: auto statt hidden ist kein Geschmack, sondern noetig: die Tabelle hat min-width:800px und ihre letzte Spalte ist position:sticky nach rechts — beides setzt einen scrollbaren Container voraus. Mit overflow:hidden war die Tabelle auf schmalen Inhaltsbreiten schlicht abgeschnitten. */ .ee-portal .ee-portal-area .hw-section .table-container { margin: 0; background: var(--dls-card); border: 1px solid var(--dls-line); border-radius: var(--dls-radius); box-shadow: var(--dls-shadow); backdrop-filter: none; -webkit-backdrop-filter: none; overflow: auto; } .ee-portal .ee-portal-area .hw-section .table-container:hover { box-shadow: var(--dls-shadow); } /* Der dunkle Kopfbalken (rgb(43,62,75)) ist das zweite Erbstueck aus der Projektansicht. Im Portal traegt die Karte den Kontrast, nicht der Tabellenkopf — vgl. .ee-bm-performance-table. */ .ee-portal .ee-portal-area .hw-section .table-container thead { background: #f8fafc; } .ee-portal .ee-portal-area .hw-section .table-container thead th { background: #f8fafc; padding: 12px 14px; border-bottom: 1px solid var(--dls-line); color: var(--dls-muted) !important; font-size: .72rem; font-weight: 600; letter-spacing: .04em; } /* Die letzte Kopfzelle klebt rechts und braucht deshalb eine eigene, deckende Flaeche — sonst scheint die scrollende Tabelle durch. */ .ee-portal .ee-portal-area .hw-section .table-container thead th:last-child { box-shadow: -8px 0 12px -8px rgba(15, 23, 42, .12); } .ee-portal .ee-portal-area .hw-section .table-container tbody tr { border-bottom: 1px solid var(--dls-line); } .ee-portal .ee-portal-area .hw-section .table-container tbody tr:last-child { border-bottom: 0; } .ee-portal .ee-portal-area .hw-section .table-container tbody tr:nth-child(even) { background: #fbfcfe; } .ee-portal .ee-portal-area .hw-section .table-container tbody tr:hover { background: var(--dls-brand-soft); } .ee-portal .ee-portal-area .hw-section .table-container tbody td { padding: 12px 14px; font-size: .85rem; color: var(--dls-ink); } /* Die Aktionsspalte fiel unter die allgemeine Zellenregel (max-width:200px; overflow:hidden) und wurde bei drei Knoepfen mit Ellipse gekappt — "Duplizieren" und "Loeschen" waren dann schlicht nicht erreichbar. Sie bekommt ihre natuerliche Breite zurueck und nimmt als schmalste Spalte (width:1%) den Rest nicht weg. */ .ee-portal .ee-portal-area .hw-section .table-container tbody td:last-child, .ee-portal .ee-portal-area .hw-section .table-container thead th:last-child { width: 1%; max-width: none; overflow: visible; text-overflow: clip; } /* Die Aktionsspalte klebt rechts (position:sticky) und braucht deshalb eine DECKENDE Flaeche. Im Bestand steht dort background:inherit — in ungeraden Zeilen ist das transparent, die darunter wegscrollende Spalte schien durch. Die drei Zeilenzustaende bekommen ihre Farbe explizit. */ .ee-portal .ee-portal-area .hw-section .table-container tbody tr td:last-child { background: var(--dls-card); box-shadow: -8px 0 12px -8px rgba(15, 23, 42, .1); } .ee-portal .ee-portal-area .hw-section .table-container tbody tr:nth-child(even) td:last-child { background: #fbfcfe; } .ee-portal .ee-portal-area .hw-section .table-container tbody tr:hover td:last-child { background: var(--dls-brand-soft); } /* Leerzustand ruhiger: keine graue Extraflaeche in der weissen Karte. */ .ee-portal .ee-portal-area .hw-section .table-container tbody tr td[colspan] { background: transparent; padding: 48px 20px; color: var(--dls-muted); font-size: .9rem; } /* Bildlaufleisten der Karte in Portal-Grau statt Gruen. */ .ee-portal .ee-portal-area .table-container::-webkit-scrollbar-thumb, .ee-portal .ee-portal-area .popup-form::-webkit-scrollbar-thumb { background: #cbd5e1; } .ee-portal .ee-portal-area .table-container::-webkit-scrollbar-thumb:hover, .ee-portal .ee-portal-area .popup-form::-webkit-scrollbar-thumb:hover { background: var(--dls-muted); } /* Mobile Kartenliste (JS-Ersatz fuer die Tabelle) auf dieselbe Optik. */ .ee-portal .ee-portal-area .ee-hardware-card { background: var(--dls-card); border: 1px solid var(--dls-line); border-radius: var(--dls-radius); box-shadow: var(--dls-shadow); } .ee-portal .ee-portal-area .ee-hardware-card__title, .ee-portal .ee-portal-area .ee-hardware-card__value { color: var(--dls-ink); } .ee-portal .ee-portal-area .ee-hardware-card__header, .ee-portal .ee-portal-area .ee-hardware-card__field { border-bottom-color: var(--dls-line); } .ee-portal .ee-portal-area .ee-hardware-card__label { color: var(--dls-muted); } /* ---- 5) Dialog: gleiche Sprache wie die Portal-Dialoge ---- Vorbild ist .ee-portal-nx-dialog: weisser Kopf mit Trennlinie statt dunklem Balken, dezenter Schliessknopf ohne Drehung, Primaerknopf im Portal-Format statt Farbverlauf-Pille in Grossbuchstaben. */ .ee-portal .ee-portal-area .popup-container { background: var(--dls-card); border: 0; border-radius: var(--dls-radius); box-shadow: 0 24px 64px rgba(15, 23, 42, .28); backdrop-filter: none; -webkit-backdrop-filter: none; } .ee-portal .ee-portal-area .popup-header { padding: 14px 22px; background: var(--dls-card); border-bottom: 1px solid var(--dls-line); color: var(--dls-ink); } .ee-portal .ee-portal-area .popup-title { font-family: inherit; font-size: 1rem; font-weight: 600; color: var(--dls-ink); } .ee-portal .ee-portal-area .popup-close { width: 32px; height: 32px; background: transparent; border: 1px solid var(--dls-line); border-radius: 8px; color: var(--dls-muted); font-size: 18px; } .ee-portal .ee-portal-area .popup-close:hover { background: #f1f5f9; border-color: var(--dls-muted); color: var(--dls-ink); transform: none; } /* Die Upload-Zone war ein gruener Verlauf mit gruen gestricheltem Rand. Gestrichelt bleibt (es ist eine Ablageflaeche), die Farbe wird ruhig. */ .ee-portal .ee-portal-area .file-upload-section { background: #f8fafc; border: 1px dashed var(--dls-line); border-radius: 10px; padding: 18px; margin: 18px 22px 0; } .ee-portal .ee-portal-area .file-upload-section:hover { background: var(--dls-brand-soft); border-color: var(--dls-brand); } .ee-portal .ee-portal-area .file-upload-section h4 { font-family: inherit; font-size: .95rem; color: var(--dls-ink); } .ee-portal .ee-portal-area .upload-info { color: var(--dls-muted); font-size: .8rem; } /* "Daten extrahieren" ist die Zweitaktion im Dialog — Umriss, nicht Blau-Verlauf. */ .ee-portal .ee-portal-area .extract-btn { padding: 10px 18px; background: var(--dls-card); border: 1px solid var(--dls-line); border-radius: 10px; box-shadow: none; color: var(--dls-ink); font-family: inherit; font-size: .9rem; font-weight: 600; } .ee-portal .ee-portal-area .extract-btn:hover { background: #f1f5f9; border-color: var(--dls-muted); box-shadow: none; transform: none; } .ee-portal .ee-portal-area .popup-form { padding: 22px; } .ee-portal .ee-portal-area .form-label { font-family: inherit; font-size: .78rem; font-weight: 600; letter-spacing: .03em; color: var(--dls-muted); } .ee-portal .ee-portal-area .popup-form .form-input { border: 1px solid var(--dls-line); border-radius: 10px; font-family: inherit; font-size: .9rem; color: var(--dls-ink); } .ee-portal .ee-portal-area .popup-form .form-input:hover:not(:focus) { border-color: var(--dls-muted); } .ee-portal .ee-portal-area .popup-form .form-input:focus { border-color: var(--dls-brand); box-shadow: 0 0 0 3px var(--dls-brand-soft); } .ee-portal .ee-portal-area .submit-btn { align-self: flex-end; margin: 0 22px 22px; padding: 11px 22px; background: var(--dls-brand); border: 1px solid var(--dls-brand); border-radius: 10px; box-shadow: none; color: #ffffff; font-family: inherit; font-size: .9rem; font-weight: 600; letter-spacing: 0; text-transform: none; } .ee-portal .ee-portal-area .submit-btn:hover { background: var(--dls-brand-ink); border-color: var(--dls-brand-ink); box-shadow: none; transform: none; } /* ---- 6) Schmale Breiten ---- Unter 640px verliert die zweispaltige Aktionszeile ihren Sinn: der Titel wuerde auf wenige Zeichen zusammenschrumpfen. Dann stapeln sich Titel, Knopf und Tabelle, der Knopf laeuft ueber die volle Breite. */ @media (max-width: 640px) { .ee-portal .ee-portal-area .hw-section.active { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hwtitle" "hwaction" "hwtable"; align-items: stretch; } .ee-portal .ee-portal-area .add-item { justify-self: stretch; width: 100%; margin: 0; } .ee-portal .ee-portal-area .hw-tab-navigation { margin-bottom: 18px; } .ee-portal .ee-portal-area .hw-tab-btn { padding: 10px 14px; font-size: .85rem; } .ee-portal .ee-portal-area .submit-btn { align-self: stretch; margin: 0 16px 16px; } } /* ========================================================================= KOMPONENTEN-KANON — Knoepfe, Formularfelder, Chips ========================================================================= Ausgangslage (auditiert, nicht geraten): jeder Bereich ist ein eigener Shortcode und bringt seine eigenen Knopfstile mit. Gezaehlt wurden VIER verschiedene Primaerfarben und SIEBEN verschiedene Radien: DE-Leads .ee-dls-btn 12px #1f6f43 Dashboard .ee-dash-btn 10px #3FA14D (--dash-green-brand) Blog .ee-bm-btn 14px #3FA14D (--ee-bm-primary) B2B .ee-b2b-*-btn Pille #3FA14D + Verlauf + Schwebe MaStR .ee-mastr-btn-primary 8px #4F46E5 (Indigo) MaStR-Suche .ee-filter-apply-btn 8px #4F46E5 Account .btn 12px var(--primary-color) Organis. .buttonStyling 5px var(--primary-color), VERSALIEN Hardware .add-item / .submit-btn 10px #1f6f43 (bereits kanonisiert) Der Kanon uebernimmt die Werte, die mit c556b9ff fuer Hardware bereits geschrieben wurden (Radius 10px, Polsterung 10px/18px, .9rem, 600) — dadurch bleibt der Hardware-Block unveraendert gueltig und muss nicht doppelt gepflegt werden. Als Markenfarbe gilt --dls-brand: die Portal-Huelle (Seitenleiste, aktiver Menuepunkt, Marke) traegt sie bereits, die Bereiche sind hier zu Gast. ZWEI BEWUSSTE AUSLASSUNGEN in der Grundregel: - KEIN display. Die Bestandsknoepfe stehen auf inline-block, flex und inline-flex. .buttonStyling (Organisationen) ist display:flex und damit blockbreit; auf inline-flex gezogen wuerde er ueberall schrumpfen — eine Layoutaenderung, kein Angleich. - KEIN min-height. Gleiche Polsterung + gleiche Schriftgroesse ergeben ohnehin dieselbe Hoehe, ohne dass Knoepfe ohne Flex-Zentrierung ihren Text an den oberen Rand kleben. ========================================================================= */ .ee-portal .ee-portal-area { --ee-portal-btn-radius: 10px; --ee-portal-btn-radius-sm: 8px; --ee-portal-btn-pad: 10px 18px; --ee-portal-btn-pad-sm: 6px 12px; --ee-portal-btn-font: .9rem; --ee-portal-btn-font-sm: .78rem; --ee-portal-field-radius: 10px; --ee-portal-field-pad: 10px 14px; --ee-portal-chip-radius: 999px; --ee-portal-btn-shift: background-color .15s ease, border-color .15s ease, color .15s ease; } /* ---- 1) Eine Knopf-Grundform ---- Nur Form und Schrift, keine Farbe — die kommt aus den Varianten darunter. Aufgefuehrt sind ausschliesslich Klassen, die im Markup wirklich vorkommen (gegen src/ und assets/js/ geprueft). KORREKTUR ZUM ERSTEN AUDIT: .ee-bt-btn stand hier als "tote CSS". Das war falsch — der erste Durchlauf hat nur assets/js/ durchsucht. Die beiden Kopf-Knoepfe des Bug-Trackers ("CSV Export", "Alle archivierten loeschen") stehen im PHP-Markup (BugReporter::render_bug_tracker_shortcode) und tragen .ee-bt-btn. Sie sind hier jetzt aufgefuehrt. NICHT dabei und warum: .ee-toolbar-btn, .ee-match-resolve-btn = tote CSS, kein Markup .add-item, .action-btn, .submit-btn, .extract-btn = bereits im Hardware-Block auf genau diese Werte gesetzt .btn-icon (Account) = ist ein SVG-Mass, kein Knopf Segmentierte Umschalter (.ee-search-view-toggle button, .ee-date-btn, .ee-pipeline-filter-btn, .ee-chv2-range-btn, .ee-dss-btn, .ee-gran-btn-group ...) = Gruppen mit bewusst geteilten Ecken; die bekommen weiter unten nur den Radius, nicht die Grundform. */ .ee-portal .ee-portal-area .ee-dls-btn, .ee-portal .ee-portal-area .ee-dash-btn, .ee-portal .ee-portal-area .ee-dash-retry-btn, .ee-portal .ee-portal-area .ee-pipeline-btn-primary, .ee-portal .ee-portal-area .ee-filter-apply-btn, .ee-portal .ee-portal-area .ee-filter-reset-btn, .ee-portal .ee-portal-area .ee-mastr-btn-primary, .ee-portal .ee-portal-area .ee-mastr-search-btn, .ee-portal .ee-portal-area .ee-match-confirm-btn, .ee-portal .ee-portal-area .ee-match-reject-btn, .ee-portal .ee-portal-area .ee-match-reopen-btn, .ee-portal .ee-portal-area .ee-bm-btn, .ee-portal .ee-portal-area .ee-b2b-bulk-btn, .ee-portal .ee-portal-area .ee-b2b-multi-btn, .ee-portal .ee-portal-area .ee-b2b-all-done-btn, .ee-portal .ee-portal-area .ee-bt-btn, .ee-portal .ee-portal-area .buttonStyling, .ee-portal .ee-portal-area .btn { padding: var(--ee-portal-btn-pad); border: 1px solid transparent; border-radius: var(--ee-portal-btn-radius); box-shadow: none; font-family: inherit; font-size: var(--ee-portal-btn-font); font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap; cursor: pointer; transition: var(--ee-portal-btn-shift); } /* ---- 2) Neutral / Zweitaktion ---- Steht VOR der Primaervariante, weil .ee-bm-btn (Grundklasse, neutral) und .ee-bm-btn--primary dieselbe Spezifitaet haben: bei Gleichstand entscheidet die Reihenfolge im Stylesheet. */ .ee-portal .ee-portal-area .ee-dls-btn-ghost, .ee-portal .ee-portal-area .ee-dash-btn.secondary, .ee-portal .ee-portal-area .ee-filter-reset-btn, .ee-portal .ee-portal-area .ee-match-reopen-btn, .ee-portal .ee-portal-area .ee-bm-btn, .ee-portal .ee-portal-area .ee-b2b-multi-btn, .ee-portal .ee-portal-area .ee-b2b-bulk-btn.is-ghost, .ee-portal .ee-portal-area .ee-bt-btn.ee-bt-btn-secondary, .ee-portal .ee-portal-area .btn-secondary, .ee-portal .ee-portal-area .btn-outline { background: var(--dls-card); border-color: var(--dls-line); color: var(--dls-ink); } .ee-portal .ee-portal-area .ee-dls-btn-ghost:hover, .ee-portal .ee-portal-area .ee-dash-btn.secondary:hover, .ee-portal .ee-portal-area .ee-filter-reset-btn:hover, .ee-portal .ee-portal-area .ee-match-reopen-btn:hover, .ee-portal .ee-portal-area .ee-bm-btn:hover, .ee-portal .ee-portal-area .ee-b2b-multi-btn:hover, .ee-portal .ee-portal-area .ee-b2b-bulk-btn.is-ghost:hover, .ee-portal .ee-portal-area .ee-bt-btn.ee-bt-btn-secondary:hover, .ee-portal .ee-portal-area .btn-secondary:hover, .ee-portal .ee-portal-area .btn-outline:hover { background: #f1f5f9; border-color: var(--dls-muted); color: var(--dls-ink); box-shadow: none; transform: none; } /* ---- 3) Primaer ---- Erfolg (.btn-success, .ee-bm-btn--success) faellt mit hierher: die Portal-Marke IST gruen, zwei Gruentoene nebeneinander waeren genau der Bruch, der abgestellt werden soll. */ .ee-portal .ee-portal-area .ee-dls-btn-primary, .ee-portal .ee-portal-area .ee-dash-btn, .ee-portal .ee-portal-area .ee-dash-retry-btn, .ee-portal .ee-portal-area .ee-pipeline-btn-primary, .ee-portal .ee-portal-area .ee-filter-apply-btn, .ee-portal .ee-portal-area .ee-mastr-btn-primary, .ee-portal .ee-portal-area .ee-mastr-search-btn, .ee-portal .ee-portal-area .ee-match-confirm-btn, .ee-portal .ee-portal-area .ee-bm-btn--primary, .ee-portal .ee-portal-area .ee-bm-btn-primary, .ee-portal .ee-portal-area .ee-bm-btn--success, .ee-portal .ee-portal-area .ee-bm-btn-success, .ee-portal .ee-portal-area .ee-b2b-bulk-btn.is-primary, .ee-portal .ee-portal-area .ee-b2b-all-done-btn, .ee-portal .ee-portal-area .buttonStyling, .ee-portal .ee-portal-area .btn-primary, .ee-portal .ee-portal-area .btn-success { background: var(--dls-brand); border-color: var(--dls-brand); color: #ffffff; } .ee-portal .ee-portal-area .ee-dls-btn-primary:hover, .ee-portal .ee-portal-area .ee-dash-btn:hover, .ee-portal .ee-portal-area .ee-dash-retry-btn:hover, .ee-portal .ee-portal-area .ee-pipeline-btn-primary:hover, .ee-portal .ee-portal-area .ee-filter-apply-btn:hover, .ee-portal .ee-portal-area .ee-mastr-btn-primary:hover, .ee-portal .ee-portal-area .ee-mastr-search-btn:hover, .ee-portal .ee-portal-area .ee-match-confirm-btn:hover, .ee-portal .ee-portal-area .ee-bm-btn--primary:hover, .ee-portal .ee-portal-area .ee-bm-btn-primary:hover, .ee-portal .ee-portal-area .ee-bm-btn--success:hover, .ee-portal .ee-portal-area .ee-bm-btn-success:hover, .ee-portal .ee-portal-area .ee-b2b-bulk-btn.is-primary:hover, .ee-portal .ee-portal-area .ee-b2b-all-done-btn:hover, .ee-portal .ee-portal-area .buttonStyling:hover, .ee-portal .ee-portal-area .btn-primary:hover, .ee-portal .ee-portal-area .btn-success:hover { background: var(--dls-brand-ink); border-color: var(--dls-brand-ink); color: #ffffff; box-shadow: none; transform: none; } .ee-portal .ee-portal-area .ee-dash-btn:active, .ee-portal .ee-portal-area .buttonStyling:active, .ee-portal .ee-portal-area .btn-primary:active { background: var(--dls-brand-ink); transform: none; } /* ---- 4) Gefahr ---- Umriss statt Flaeche, gefuellt erst beim Zeigen — dieselbe Sprache wie .action-btn.delete im Hardware-Block. */ .ee-portal .ee-portal-area .ee-match-reject-btn, .ee-portal .ee-portal-area .ee-bm-btn--danger, .ee-portal .ee-portal-area .ee-bm-btn-danger, .ee-portal .ee-portal-area .ee-bt-btn.ee-bt-btn-danger, .ee-portal .ee-portal-area .btn-danger { background: var(--dls-card); border-color: #fecaca; color: #b91c1c; } .ee-portal .ee-portal-area .ee-match-reject-btn:hover, .ee-portal .ee-portal-area .ee-bm-btn--danger:hover, .ee-portal .ee-portal-area .ee-bm-btn-danger:hover, .ee-portal .ee-portal-area .ee-bt-btn.ee-bt-btn-danger:hover, .ee-portal .ee-portal-area .btn-danger:hover { background: #b91c1c; border-color: #b91c1c; color: #ffffff; box-shadow: none; transform: none; } /* ---- 5) Warnung und flache Textknoepfe ---- Warnung behaelt ihre Bedeutung (Bernstein), aber in derselben Umriss-Logik wie Gefahr. */ .ee-portal .ee-portal-area .ee-bm-btn--warning, .ee-portal .ee-portal-area .ee-bm-btn-warning { background: var(--dls-card); border-color: #fde68a; color: #92400e; } .ee-portal .ee-portal-area .ee-bm-btn--warning:hover, .ee-portal .ee-portal-area .ee-bm-btn-warning:hover { background: #92400e; border-color: #92400e; color: #ffffff; } .ee-portal .ee-portal-area .ee-bm-btn--text, .ee-portal .ee-portal-area .ee-bm-btn-text { background: transparent; border-color: transparent; color: var(--dls-muted); } .ee-portal .ee-portal-area .ee-bm-btn--text:hover, .ee-portal .ee-portal-area .ee-bm-btn-text:hover { background: #f1f5f9; border-color: transparent; color: var(--dls-ink); } /* ---- 6) Groessen ---- Steht ganz am Ende der Knopfregeln: die Klassen haben dieselbe Spezifitaet wie die Grundform, die Reihenfolge entscheidet. */ .ee-portal .ee-portal-area .btn-sm, .ee-portal .ee-portal-area .ee-dash-btn-sm, .ee-portal .ee-portal-area .ee-bm-btn--sm, .ee-portal .ee-portal-area .ee-bm-btn-sm, .ee-portal .ee-portal-area .ee-bm-btn--xs { padding: var(--ee-portal-btn-pad-sm); border-radius: var(--ee-portal-btn-radius-sm); font-size: var(--ee-portal-btn-font-sm); } .ee-portal .ee-portal-area .btn-large, .ee-portal .ee-portal-area .ee-bm-btn--lg { padding: 13px 24px; font-size: 1rem; } /* ---- 7) Zustaende fuer alle Knopfklassen ---- */ .ee-portal .ee-portal-area .ee-dls-btn:disabled, .ee-portal .ee-portal-area .ee-dash-btn:disabled, .ee-portal .ee-portal-area .ee-filter-apply-btn:disabled, .ee-portal .ee-portal-area .ee-mastr-btn-primary:disabled, .ee-portal .ee-portal-area .ee-match-confirm-btn:disabled, .ee-portal .ee-portal-area .ee-match-reject-btn:disabled, .ee-portal .ee-portal-area .ee-match-reopen-btn:disabled, .ee-portal .ee-portal-area .ee-bm-btn:disabled, .ee-portal .ee-portal-area .ee-b2b-bulk-btn:disabled, .ee-portal .ee-portal-area .ee-bt-btn:disabled, .ee-portal .ee-portal-area .buttonStyling:disabled, .ee-portal .ee-portal-area .btn:disabled { opacity: .5; box-shadow: none; cursor: not-allowed; transform: none; } .ee-portal .ee-portal-area .ee-dls-btn:focus-visible, .ee-portal .ee-portal-area .ee-dash-btn:focus-visible, .ee-portal .ee-portal-area .ee-dash-retry-btn:focus-visible, .ee-portal .ee-portal-area .ee-pipeline-btn-primary:focus-visible, .ee-portal .ee-portal-area .ee-filter-apply-btn:focus-visible, .ee-portal .ee-portal-area .ee-filter-reset-btn:focus-visible, .ee-portal .ee-portal-area .ee-mastr-btn-primary:focus-visible, .ee-portal .ee-portal-area .ee-mastr-search-btn:focus-visible, .ee-portal .ee-portal-area .ee-match-confirm-btn:focus-visible, .ee-portal .ee-portal-area .ee-match-reject-btn:focus-visible, .ee-portal .ee-portal-area .ee-match-reopen-btn:focus-visible, .ee-portal .ee-portal-area .ee-bm-btn:focus-visible, .ee-portal .ee-portal-area .ee-b2b-bulk-btn:focus-visible, .ee-portal .ee-portal-area .ee-b2b-multi-btn:focus-visible, .ee-portal .ee-portal-area .ee-b2b-all-done-btn:focus-visible, .ee-portal .ee-portal-area .ee-bt-btn:focus-visible, .ee-portal .ee-portal-area .ee-bt-action:focus-visible, .ee-portal .ee-portal-area .buttonStyling:focus-visible, .ee-portal .ee-portal-area .btn:focus-visible, .ee-portal .ee-portal-area .add-item:focus-visible, .ee-portal .ee-portal-area .action-btn:focus-visible, .ee-portal .ee-portal-area .submit-btn:focus-visible, .ee-portal .ee-portal-area .extract-btn:focus-visible { outline: 2px solid var(--dls-brand); outline-offset: 2px; } /* ---- 8) Segmentierte Umschalter: nur der Radius ---- Das sind Gruppen (aktiv/inaktiv), keine Aktionsknoepfe. Sie behalten Groesse, Farblogik und Gruppenverhalten und werden lediglich auf den kleinen Radius des Kanons gezogen (Bestand: 4px, 6px, 8px, 20px). */ .ee-portal .ee-portal-area .ee-search-view-toggle, .ee-portal .ee-portal-area .ee-style-switch, .ee-portal .ee-portal-area .ee-gran-btn-group { border-radius: var(--ee-portal-btn-radius); } .ee-portal .ee-portal-area .ee-search-view-toggle button, .ee-portal .ee-portal-area .ee-style-switch button, .ee-portal .ee-portal-area .ee-pagination button, .ee-portal .ee-portal-area .ee-date-btn, .ee-portal .ee-portal-area .ee-pipeline-filter-btn, .ee-portal .ee-portal-area .ee-chv2-range-btn, .ee-portal .ee-portal-area .ee-dss-btn, .ee-portal .ee-portal-area .ee-mastr-filter-btn, .ee-portal .ee-portal-area .ee-bm-filter-pill, .ee-portal .ee-portal-area .ee-pipeline-timeline-gran-btn { border-radius: var(--ee-portal-btn-radius-sm); font-family: inherit; } /* Die Filter-Pillen des Blogs bleiben bewusst rund — sie sind als Chips gesetzt, nicht als Knopfgruppe. */ .ee-portal .ee-portal-area .ee-bm-filter-pill { border-radius: var(--ee-portal-chip-radius); } /* ---- 9) Formularfelder ---- ELEMENT-basiert, damit alle elf Bereiche auf einmal erfasst sind, aber bewusst OHNE padding: die DE-Leads-Suche haelt mit `padding: 14px 78px 14px 16px` rechts Platz fuer Lupe und Leeren-Knopf frei (b1f2e519). Ein zentrales Polster wuerde den Text unter die Lupe schieben. Polsterung setzen wir nur auf den benannten Formularklassen weiter unten. Die Typliste ist eine ERLAUBNISLISTE — checkbox, radio, range, color und file haben eigene Darstellung und bleiben unberuehrt. `input:not([type])` faengt Felder ohne Typ-Attribut (= implizit text). */ .ee-portal .ee-portal-area input:not([type]), .ee-portal .ee-portal-area input[type="text"], .ee-portal .ee-portal-area input[type="email"], .ee-portal .ee-portal-area input[type="tel"], .ee-portal .ee-portal-area input[type="url"], .ee-portal .ee-portal-area input[type="search"], .ee-portal .ee-portal-area input[type="number"], .ee-portal .ee-portal-area input[type="password"], .ee-portal .ee-portal-area input[type="date"], .ee-portal .ee-portal-area input[type="datetime-local"], .ee-portal .ee-portal-area input[type="month"], .ee-portal .ee-portal-area input[type="time"], .ee-portal .ee-portal-area select, .ee-portal .ee-portal-area textarea { border-width: 1px; border-style: solid; border-color: var(--dls-line); border-radius: var(--ee-portal-field-radius); font-family: inherit; color: var(--dls-ink); } .ee-portal .ee-portal-area input:not([type]):focus, .ee-portal .ee-portal-area input[type="text"]:focus, .ee-portal .ee-portal-area input[type="email"]:focus, .ee-portal .ee-portal-area input[type="tel"]:focus, .ee-portal .ee-portal-area input[type="url"]:focus, .ee-portal .ee-portal-area input[type="search"]:focus, .ee-portal .ee-portal-area input[type="number"]:focus, .ee-portal .ee-portal-area input[type="password"]:focus, .ee-portal .ee-portal-area input[type="date"]:focus, .ee-portal .ee-portal-area input[type="datetime-local"]:focus, .ee-portal .ee-portal-area input[type="month"]:focus, .ee-portal .ee-portal-area input[type="time"]:focus, .ee-portal .ee-portal-area select:focus, .ee-portal .ee-portal-area textarea:focus { outline: none; border-color: var(--dls-brand); box-shadow: 0 0 0 3px var(--dls-brand-soft); } /* Polsterung nur dort, wo es wirklich Formularzeilen sind — nicht auf kompakten Werkzeugleisten-Feldern. */ .ee-portal .ee-portal-area .form-input, .ee-portal .ee-portal-area .form-select, .ee-portal .ee-portal-area .form-textarea, .ee-portal .ee-portal-area .markup-input, .ee-portal .ee-portal-area .ee-settings-input, .ee-portal .ee-portal-area .ee-bm-input, .ee-portal .ee-portal-area .ee-bm-textarea { padding: var(--ee-portal-field-pad); font-size: .9rem; } /* EINZIGES !important in diesem Block, und es ist unvermeidbar: ee-create-account.css Z383 setzt `padding: 0.875rem 1rem !important; border: 2px solid ... !important;` auf .form-input/.form-select/.form-textarea. Gegen !important hilft keine Spezifitaet — ohne diese Zeilen behielte ausgerechnet der Account-Bereich als einziger 2px-Rahmen und ein eigenes Polster. Bewusst NUR diese beiden Eigenschaften, nicht der ganze Block. */ .ee-portal .ee-portal-area .form-input, .ee-portal .ee-portal-area .form-select, .ee-portal .ee-portal-area .form-textarea { padding: var(--ee-portal-field-pad) !important; border: 1px solid var(--dls-line) !important; } .ee-portal .ee-portal-area .form-input:focus, .ee-portal .ee-portal-area .form-select:focus, .ee-portal .ee-portal-area .form-textarea:focus { border-color: var(--dls-brand) !important; } /* ---- 10) Chips und Abzeichen: eine Form ---- Nur der Radius, keine Farben — die Farbcodierung (gruen/gelb/rot je Status) traegt Bedeutung und bleibt. Bestand reichte von 3px ueber 4/6/8/12/16px bis zu bereits runden Pillen. */ .ee-portal .ee-portal-area .ee-dls-pill, .ee-portal .ee-portal-area .ee-rc-type-badge, .ee-portal .ee-portal-area .ee-mastr-badge, .ee-portal .ee-portal-area .ee-mastr-update-badge, .ee-portal .ee-portal-area .ee-dash-tab-badge, .ee-portal .ee-portal-area .ee-dash-count-badge, .ee-portal .ee-portal-area .ee-dash-intel-badge, .ee-portal .ee-portal-area .ee-dash-ai-source-pill, .ee-portal .ee-portal-area .ee-dash-intel-source-pill, .ee-portal .ee-portal-area .ee-pipeline-lost-tag, .ee-portal .ee-portal-area .ee-bm-tab-badge, .ee-portal .ee-portal-area .ee-bm-seo-badge, .ee-portal .ee-portal-area .ee-bm-status-badge, .ee-portal .ee-portal-area .ee-bm-type-badge, .ee-portal .ee-portal-area .ee-b2b-badge, .ee-portal .ee-portal-area .ee-bt-status-badge, .ee-portal .ee-portal-area .ee-bt-prio-badge, .ee-portal .ee-portal-area .ee-cl-badge { border-radius: var(--ee-portal-chip-radius); } /* ========================================================================= EINE MARKE — Farb-Kanon fuer das ganze Portal ========================================================================= Nach dem Komponenten-Kanon (Form) fehlte die FARBE. Auditiert wurden im Portal fuenf konkurrierende Akzentfarben: Portal-Huelle #1f6f43 gruen (Sidebar, aktiver Menuepunkt, Marke) Blog/Dashboard #3FA14D hellgruen (--ee-bm-primary, --dash-green-brand) MaStR #4F46E5 indigo (Regler, Chips, Links, Aktiv-Zustaende) Organisationen #007AFF blau (--org-accent, Fokusringe, Umschalter) Pipeline/Blog #3B82F6 / #2563eb blau (Schritte, Fortschritt, Quellen) Ab hier gilt genau eine: --ee-portal-brand. Alles darunter zieht darauf. ZWEI EBENEN, bewusst getrennt: 1) TOKEN-KAPERUNG (Block A). Die Bereiche deklarieren ihre Akzent-Tokens auf :root. Eine eigene Deklaration auf .ee-portal gewinnt fuer den gesamten Portal-Teilbaum, weil der Kaskaden-Wettstreit pro ELEMENT entschieden wird: :root trifft , .ee-portal trifft den Portal- Container — dessen eigene Deklaration schlaegt jeden geerbten Wert, unabhaengig von Spezifitaet und Ladereihenfolge. Ein Dutzend Zeilen raeumt so mehrere hundert Fundstellen ab. 2) EINZELREGELN (Bloecke B ff.) nur dort, wo die Farbe hartkodiert ist und es kein Token gibt. WAS BLEIBT (Farbe traegt Bedeutung, nicht Marke): - Statusfarben rot/gelb/gruen und die Fehler-/Warnfarben - Energietraeger-Legende (.ee-legend-dot/.ee-ms-dot: wind blau, speicher violett) und --mastr-wind/--mastr-speicher - Phasen-/Bucket-Farben (.ee-search-phase--*, .ee-focus-*.week/.today, --ee-module-* der Modulfarben) - "extern erstellt"-Markierungen in Aufgaben/Notizen und Kontakten - Prioritaetsskala des Segment-Editors (.ee-se-seo-priority--*) KEIN Markup, kein PHP, kein JS. Ausschliesslich auf .ee-portal gescoped, damit dieselben Shortcodes ausserhalb von /portal unveraendert bleiben. ========================================================================= */ /* ---- A) Fremde Akzent-Tokens auf die Marke umbiegen ---- Deklariert auf .ee-portal (nicht .ee-portal-area), damit auch die Huelle und die Kopf-Panels fuer Aufgaben/Notizen/Benachrichtigungen erfasst sind. --ee-tn-primary muss explizit mitgenannt werden: es steht in ee-tasks-notes.css als `var(--primary-color, #3B82F6)` auf :root und wird damit BEREITS DORT aufgeloest — ein spaeteres --primary-color wuerde es nicht mehr erreichen. */ body.ee-portal-page, .ee-portal { /* frontend.css / style.css / ee-analytics-styles.css (drei :root-Blocks, je nach Ladelage war die Portalfarbe navy, tuerkis oder Apple-Blau) */ --primary-color: var(--ee-portal-brand); --primary-color-70: rgba(31, 111, 67, .7); --secondary-color: var(--ee-portal-brand-hi); /* ee-organization-styles.css:1332ff — Apple-Blau */ --org-accent: var(--ee-portal-brand); --org-accent-light: var(--ee-portal-brand-veil-strong); --org-surface-hover: rgba(31, 111, 67, .05); /* ee-tasks-notes.css:11ff */ --ee-tn-primary: var(--ee-portal-brand); --ee-tn-primary-hover: var(--ee-portal-brand-ink); /* ee-analysis-dashboard.css — --dash-accent/--dash-primary werden nur als Rueckfall benutzt (#3b82f6) und nirgends deklariert; hier zum ersten Mal gesetzt. --dash-green-brand ist das zweite Gruen. */ --dash-accent: var(--ee-portal-brand); --dash-primary: var(--ee-portal-brand); --dash-green-brand: var(--ee-portal-brand); /* ee-blog-manager-pro.css:15ff — das zweite Gruen im Blog. --ee-bm-blue (#0069B3) bleibt: es faerbt ausschliesslich Hinweis-Meldungen (.ee-bm-toast--info und Verwandte), ist also Bedeutung und keine Marke. */ --ee-bm-primary: var(--ee-portal-brand); --ee-bm-primary-hover: var(--ee-portal-brand-ink); --ee-bm-primary-light: var(--ee-portal-brand-soft); } /* ---- B) MaStR-Suche ---- Sieben hartkodierte Indigo-Stellen ohne Token. Bewusst NICHT hier: .ee-legend-dot/.ee-ms-dot (Energietraeger-Legende). */ .ee-portal .ee-portal-area .ee-filter-section label input[type="checkbox"] { accent-color: var(--ee-portal-brand); } .ee-portal .ee-portal-area .ee-search-sidebar select:focus, .ee-portal .ee-portal-area .ee-search-sidebar input:focus { border-color: var(--ee-portal-brand); box-shadow: 0 0 0 3px var(--ee-portal-brand-ring); } .ee-portal .ee-portal-area .ee-result-card:hover { border-color: var(--ee-portal-brand-line); } .ee-portal .ee-portal-area .ee-pagination button.active, .ee-portal .ee-portal-area .ee-style-switch button.active { background: var(--ee-portal-brand); border-color: var(--ee-portal-brand); color: var(--ee-portal-brand-on); } /* ---- C) MaStR-Dashboard ---- Die beiden Schieberegler brauchen je Browser-Engine eine eigene Regel; die ID-Selektoren im Bestand (1,0,0) werden von .ee-portal .ee-portal-area #id (1,2,0) sicher geschlagen. --track-pct setzt das JS per style.setProperty(), der Verlauf wird darum unveraendert gespiegelt. */ .ee-portal .ee-portal-area .ee-kw-filter-label strong, .ee-portal .ee-portal-area .ee-mastr-import-header:hover .ee-mastr-section-title, .ee-portal .ee-portal-area .has-file .ee-upload-dropzone-text, .ee-portal .ee-portal-area .ee-match-link, .ee-portal .ee-portal-area .ee-mastr-badge.api .badge-value { color: var(--ee-portal-brand); } .ee-portal .ee-portal-area #ee-kw-slider::-webkit-slider-runnable-track, .ee-portal .ee-portal-area #ee-year-from-slider::-webkit-slider-runnable-track { background: linear-gradient( to right, var(--ee-portal-brand) 0%, var(--ee-portal-brand) var(--track-pct, 4%), #D1D5DB var(--track-pct, 4%), #D1D5DB 100% ); } .ee-portal .ee-portal-area #ee-kw-slider::-moz-range-progress, .ee-portal .ee-portal-area #ee-year-from-slider::-moz-range-progress { background: var(--ee-portal-brand); } .ee-portal .ee-portal-area #ee-kw-slider::-webkit-slider-thumb, .ee-portal .ee-portal-area #ee-year-from-slider::-webkit-slider-thumb { background: var(--ee-portal-brand); box-shadow: 0 1px 5px var(--ee-portal-brand-ring); } .ee-portal .ee-portal-area #ee-kw-slider::-moz-range-thumb, .ee-portal .ee-portal-area #ee-year-from-slider::-moz-range-thumb { background: var(--ee-portal-brand); box-shadow: 0 1px 5px var(--ee-portal-brand-ring); } .ee-portal .ee-portal-area .ee-mastr-upload-card.has-file, .ee-portal .ee-portal-area .ee-upload-dropzone:hover, .ee-portal .ee-portal-area .ee-upload-dropzone.dragover { border-color: var(--ee-portal-brand); background: var(--ee-portal-brand-soft); } /* Ein Fortschrittsbalken statt drei. Der Bestand wechselte je Phase die Farbfamilie (blau -> indigo -> violett); die Phase wird ohnehin ueber die Beschriftung mitgeteilt. */ .ee-portal .ee-portal-area .ee-upload-progress-fill, .ee-portal .ee-portal-area .ee-upload-progress-fill.uploading { background: linear-gradient(90deg, var(--ee-portal-brand-hi), var(--ee-portal-brand)); } .ee-portal .ee-portal-area .ee-match-reopen-btn:hover { background: var(--ee-portal-brand-soft); border-color: var(--ee-portal-brand-line); color: var(--ee-portal-brand-ink); } /* ---- D) Organisationen und B2B ---- Block A raeumt hier bereits alles ab, was ueber --org-accent oder var(--secondary-color, #6366f1) laeuft (rund 90 Fundstellen). Es folgt nur, was direkt als Hexwert im Stylesheet steht. */ .ee-portal .ee-portal-area .ee-status-btn.ee-bulk-toggle-btn, .ee-portal .ee-portal-area .ee-fu-day-today, .ee-portal .ee-portal-area .ee-reasons-section .ee-add-reason-btn, .ee-portal .ee-portal-area .settings-action-btn.merge-btn, .ee-portal .ee-portal-area .contact-action-btn.invite { color: var(--ee-portal-brand); } .ee-portal .ee-portal-area .ee-status-btn.ee-bulk-toggle-btn:hover, .ee-portal .ee-portal-area .ee-status-btn.ee-bulk-toggle-btn.active, .ee-portal .ee-portal-area .ee-fu-day:hover, .ee-portal .ee-portal-area .ee-phase-prev:hover, .ee-portal .ee-portal-area .ee-phase-next:hover { background: var(--ee-portal-brand-soft); color: var(--ee-portal-brand-ink); } .ee-portal .ee-portal-area .ee-phase-prev:hover, .ee-portal .ee-portal-area .ee-phase-next:hover, .ee-portal .ee-portal-area .settings-action-btn.merge-btn:hover { border-color: var(--ee-portal-brand-line); } .ee-portal .ee-portal-area .ee-fu-day-selected, .ee-portal .ee-portal-area .ee-fu-day-selected:hover, .ee-portal .ee-portal-area .ee-fu-btn, .ee-portal .ee-portal-area .ee-solateur-add-btn, .ee-portal .ee-portal-area .ee-solateur-form-save, .ee-portal .ee-portal-area .contact-notif-checkbox:checked + .contact-notif-slider, .ee-portal .ee-portal-area .project-visibility-toggle:has(input:checked) .toggle-slider { background: var(--ee-portal-brand); border-color: var(--ee-portal-brand); color: var(--ee-portal-brand-on); } .ee-portal .ee-portal-area .ee-fu-btn:hover, .ee-portal .ee-portal-area .ee-solateur-add-btn:hover, .ee-portal .ee-portal-area .ee-solateur-form-save:hover { background: var(--ee-portal-brand-ink); border-color: var(--ee-portal-brand-ink); } /* Beide tragen !important im Bestand — dagegen hilft keine Spezifitaet. */ .ee-portal .ee-portal-area .ee-bulk-followup-save { background: var(--ee-portal-brand) !important; } .ee-portal .ee-portal-area .ee-search-tab { background: var(--ee-portal-brand-soft) !important; color: var(--ee-portal-brand-ink) !important; } .ee-portal .ee-portal-area .ee-mehrfach-toggle-btn.active { background: var(--ee-portal-brand-veil); border-color: var(--ee-portal-brand-line); color: var(--ee-portal-brand-ink); } .ee-portal .ee-portal-area .ee-mehrfach-toggle-btn.active:hover { background: var(--ee-portal-brand-veil-strong); } .ee-portal .ee-portal-area .project-visibility-toggle { background: var(--ee-portal-brand-soft); border-color: var(--ee-portal-brand-line); color: var(--ee-portal-brand-ink); } .ee-portal .ee-portal-area .ee-solateur-widget { background: var(--ee-portal-brand-soft); } .ee-portal .ee-portal-area .favIcon.active:hover { fill: var(--ee-portal-brand-ink); } /* Die drei Verlaufs-Knoepfe wechselten im Hover von Gruen nach Indigo. */ .ee-portal .ee-portal-area .send-message-button:hover, .ee-portal .ee-portal-area .projects-popup-contact-button:hover, .ee-portal .ee-portal-area .project-button:hover { background: linear-gradient(135deg, var(--ee-portal-brand) 0%, var(--ee-portal-brand-ink) 100%); } .ee-portal .ee-portal-area .org-new-badge { background: linear-gradient(135deg, var(--ee-portal-brand-hi) 0%, var(--ee-portal-brand) 100%); box-shadow: 0 1px 3px var(--ee-portal-brand-ring); } /* ---- E) Dashboard und Vertriebstrichter ---- .ee-pipeline-btn-primary traegt bereits die Kanon-Farbe; hier fehlen Fortschritt, aktiver Filter und ausgewaehlte Zeile. */ .ee-portal .ee-portal-area .ee-pipeline-filter-btn.active { background: var(--ee-portal-brand); border-color: var(--ee-portal-brand); color: var(--ee-portal-brand-on); } .ee-portal .ee-portal-area .ee-pipeline-sub-prog, .ee-portal .ee-portal-area .ee-pipeline-brief-phase-fill, .ee-portal .ee-portal-area .ee-dash-velocity-item .velocity-bar { background: var(--ee-portal-brand); } .ee-portal .ee-portal-area .ee-pipeline-detail-phase-dates .ee-pipeline-sub-prog { color: var(--ee-portal-brand-ink); } .ee-portal .ee-portal-area .ee-pipeline-detail-row-selected { border-left-color: var(--ee-portal-brand); } /* ---- F) Blog ---- Der Redaktions-Assistent kam durchgehend in Blau, die Kategoriefilter in Indigo. */ .ee-portal .ee-portal-area .ee-bm-filter-pill--category.active { background: var(--ee-portal-brand); border-color: var(--ee-portal-brand); color: var(--ee-portal-brand-on); } .ee-portal .ee-portal-area .ee-bm-btn-analysis, .ee-portal .ee-portal-area .ee-bm-suggestion-rank, .ee-portal .ee-portal-area .ee-bm-step.active .ee-bm-step-num { background: linear-gradient(135deg, var(--ee-portal-brand-hi), var(--ee-portal-brand)); color: var(--ee-portal-brand-on); } .ee-portal .ee-portal-area .ee-bm-progress-fill { background: linear-gradient(90deg, var(--ee-portal-brand-hi), var(--ee-portal-brand)); } .ee-portal .ee-portal-area .ee-bm-step.active .ee-bm-step-label, .ee-portal .ee-portal-area .ee-bm-source-num, .ee-portal .ee-portal-area .ee-bm-research-sources a, .ee-portal .ee-portal-area .ee-bm-final-sources a, .ee-portal .ee-portal-area .ee-sources a { color: var(--ee-portal-brand); } .ee-portal .ee-portal-area .ee-bm-pipeline .ee-bm-spinner, .ee-portal .ee-portal-area .ee-bm-spinner-sm { border-top-color: var(--ee-portal-brand); } .ee-portal .ee-portal-area .ee-bm-pipeline-form .ee-bm-input:focus { border-color: var(--ee-portal-brand); } /* ---- G) Account ---- */ .ee-portal .ee-portal-area .logo-upload-container:hover { border-color: var(--ee-portal-brand); } /* ---- H) Aufgaben, Notizen und Benachrichtigungen im Kopfbereich ---- Diese Panels haengen in der Portal-Huelle, NICHT in .ee-portal-area. Traeger ist body.ee-portal-page und nicht .ee-portal, weil ee-tasks-notes.js einen Teil seiner Aufklapp-Listen und Dialoge per document.body.appendChild() neben die Huelle setzt (im Kurztest blieb der Privat-Abzeichen-Verlauf sonst indigo). Die Blau-Toene fuer "extern erstellt" bleiben: sie unterscheiden Herkunft, nicht Marke. */ body.ee-portal-page .ee-tn-view-private-badge { background: linear-gradient(135deg, var(--ee-portal-brand-hi) 0%, var(--ee-portal-brand) 100%); } body.ee-portal-page .ee-tn-timeline-info-btn:hover, body.ee-portal-page .ee-tn-timeline-action-btn.restore:hover, body.ee-portal-page .ee-tn-info-btn:hover { background: var(--ee-portal-brand-ink); } body.ee-portal-page .ee-tn-status-btn.complete, body.ee-portal-page .ee-tn-info-btn, body.ee-portal-page .ee-tn-list-info-btn, body.ee-portal-page .ee-tn-view-info-btn, body.ee-portal-page .ee-tn-explanation-title { color: var(--ee-portal-brand); } body.ee-portal-page .ee-tn-switch:hover { border-color: var(--ee-portal-brand); } body.ee-portal-page .ee-tn-switch input:checked + .ee-tn-switch-slider { background: var(--ee-portal-brand); } body.ee-portal-page .ee-tn-switch input:checked ~ .ee-tn-switch-label { color: var(--ee-portal-brand); } /* ---- I) Changelog ---- Der Zeitstrahl lief von Gruen ueber Blau nach Violett — drei Familien auf einer Linie. Jetzt ein Verlauf innerhalb der Marke. */ .ee-portal .ee-portal-area .ee-changelog__timeline::before { background: linear-gradient(180deg, var(--ee-portal-brand-hi) 0%, var(--ee-portal-brand) 50%, var(--ee-portal-brand-ink) 100%); } /* ---- J) Ein Fokusring fuer das ganze Portal ---- Der Bestand hatte pro Bereich einen eigenen (blau, indigo, gar keinen) oder liess den Browser-Standard stehen. :focus-visible statt :focus, damit Mausklicks keinen Ring hinterlassen. Die Formularfelder behalten zusaetzlich ihren farbigen Rand aus dem Komponenten-Kanon. */ .ee-portal .ee-portal-area a:focus-visible, .ee-portal .ee-portal-area button:focus-visible, .ee-portal .ee-portal-area input:focus-visible, .ee-portal .ee-portal-area select:focus-visible, .ee-portal .ee-portal-area textarea:focus-visible, .ee-portal .ee-portal-area [tabindex]:not([tabindex="-1"]):focus-visible { outline: 2px solid var(--ee-portal-brand); outline-offset: 2px; } /* ---- K) Auswahl und Bildlaufleisten ---- Kleinigkeiten, die sonst die Theme- oder Browserfarbe zeigen und den Gesamteindruck brechen. */ .ee-portal ::selection { background: var(--ee-portal-brand-veil-strong); color: var(--ee-portal-brand-ink); } .ee-portal .ee-portal-area input[type="checkbox"], .ee-portal .ee-portal-area input[type="radio"], .ee-portal .ee-portal-area input[type="range"], .ee-portal .ee-portal-area progress { accent-color: var(--ee-portal-brand); } /* ---- L) Restliche Indigo-Schleier in Organisationen ---- Was Block D nicht erfasst hat: Fokus-Schimmer, Schlagschatten und halbtransparente Fuellungen, die als rgba(99, 102, 241, x) direkt im Stylesheet stehen. Traeger ist hier body.ee-portal-page, damit auch die an den gehaengten Dialoge erfasst sind. */ body.ee-portal-page .searchField:focus, body.ee-portal-page .ee-global-search-wrap #ee-global-search:focus, body.ee-portal-page .org-perpage-select:focus, body.ee-portal-page .org-page-input:focus, body.ee-portal-page div#chatInputContainer:focus-within, body.ee-portal-page .chat-input-container:focus-within, body.ee-portal-page .date-picker-container input#chat-date-input:focus, body.ee-portal-page .status-select-container select:focus, body.ee-portal-page select.project-organization-dropdown:focus, body.ee-portal-page .contact-input:focus, body.ee-portal-page .notes-actions input.date-picker:focus { box-shadow: 0 0 0 3px var(--ee-portal-brand-ring); } /* Schlagschatten trugen die Akzentfarbe mit. Ein neutraler Schatten traegt die Erhebung genauso, ohne eine zweite Farbe einzufuehren. */ body.ee-portal-page span.chat-message-name, body.ee-portal-page .send-message-button, body.ee-portal-page .projects-popup-contact-button, body.ee-portal-page .project-button, body.ee-portal-page .project-button:active, body.ee-portal-page .contact-list-item:hover { box-shadow: 0 2px 8px rgba(15, 23, 42, .10); } body.ee-portal-page .send-message-button:hover, body.ee-portal-page .projects-popup-contact-button:hover, body.ee-portal-page .project-button:hover { box-shadow: 0 6px 20px rgba(15, 23, 42, .16); } body.ee-portal-page .project-row:hover { border-color: var(--ee-portal-brand-line); } body.ee-portal-page .spinner { border-color: var(--ee-portal-brand-veil); border-top-color: var(--ee-portal-brand); } body.ee-portal-page button.toggle-more { background: var(--ee-portal-brand-veil); border-color: var(--ee-portal-brand-line); color: var(--ee-portal-brand-ink); } body.ee-portal-page button.toggle-more:hover { background: var(--ee-portal-brand-veil-strong); border-color: var(--ee-portal-brand-line); } body.ee-portal-page span.chat-message-icon:hover, body.ee-portal-page .chat-message-icon.active, body.ee-portal-page .message-type-icons .icon.active, body.ee-portal-page #aiSvgIcon.active, body.ee-portal-page .favIcon:hover { background: var(--ee-portal-brand-veil); } /* ---- M) Aktivitaeten-Dialog ---- ee-activity-modal.js haengt seinen Wurzelknoten per document.body.appendChild() an — ausserhalb von .ee-portal. Deshalb ebenfalls ueber die Body-Klasse. Der Anhang-Bereich war komplett in Indigo gehalten (Ablegeflaeche, Dateisymbole, Aufgabenblase). */ body.ee-portal-page .ee-am-btn--ai { background: linear-gradient(135deg, var(--ee-portal-brand-hi), var(--ee-portal-brand)); } body.ee-portal-page .ee-am-dropzone:hover, body.ee-portal-page .ee-am-dropzone:focus-visible, body.ee-portal-page .ee-am-dropzone.is-dragover { border-color: var(--ee-portal-brand); } body.ee-portal-page .ee-am-dropzone:focus-visible, body.ee-portal-page .ee-am-dropzone.is-dragover { box-shadow: 0 0 0 3px var(--ee-portal-brand-ring); } body.ee-portal-page .ee-am-dropzone.is-dragover, body.ee-portal-page .ee-am-dropzone-icon, body.ee-portal-page .ee-am-file-icon--img { background: var(--ee-portal-brand-soft); } body.ee-portal-page .ee-am-dropzone-icon, body.ee-portal-page .ee-am-file-icon--img { color: var(--ee-portal-brand); } body.ee-portal-page .ee-am-file-item:hover, body.ee-portal-page .ee-am-task-dropdown { border-color: var(--ee-portal-brand-line); } body.ee-portal-page .ee-am-task-bubble { background: var(--ee-portal-brand-veil); border-color: var(--ee-portal-brand-line); color: var(--ee-portal-brand-ink); } body.ee-portal-page .ee-am-task-bubble:hover, body.ee-portal-page .ee-am-task-bubble.has-suggestions { background: var(--ee-portal-brand-veil-strong); color: var(--ee-portal-brand-ink); } /* ========================================================================= B2B-PARTNER: DIESELBE HANDSCHRIFT WIE "KUNDEN" Ausgangslage (geprueft, nicht geraten): "Kunden" ([ee-organization-view]) und "B2B-Partner" ([ee_b2b_partners]) sind ZWEI Renderer auf DERSELBEN Datenbasis (wp_energyExperts_organization). Die Detailansicht ist bereits 1:1 dieselbe (OrganizationShortcode::render_popup_shell + openProjectsPopup im b2bDetail-Modus), und Werkzeugleiste, Spalten und Karten des B2B-Boards geben bereits die .ee-pipeline-*-Klassen des Kunden-Boards aus. Uebrig bleibt genau EIN sichtbarer Bruch: die Kategorie-Reiter. "Kunden" hat Unterstrich-Reiter (.org-tabs / .org-tab-button / .org-tab-count), B2B hatte gruene Pillen. Das wird hier angeglichen — ohne eine Zeile Markup, ausschliesslich im Portal-Kontext. Bewusst NICHT angefasst: der Aufbau (Reiter -> Steuerelemente -> Inhalt) stimmt bereits ueberein, und die Breite kommt seit 2.25.296 aus .ee-portal-area. Ein Umbau des Datenmodells findet hier nicht statt. ========================================================================= */ /* ---- 1) Kategorie-Reiter: von der Pille zum Unterstrich-Reiter ---- Masse und Zustaende aus .org-tabs/.org-tab-button (ee-organization-styles.css Z4361-4408) uebernommen, die Farben aber aus den Portal-Tokens statt aus --secondary-color — so bleibt es bei EINER Marke. */ .ee-portal .ee-portal-area--b2b .ee-b2b-cats { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; border-bottom: 1px solid var(--dls-line); margin: 0 0 16px; } .ee-portal .ee-portal-area--b2b .ee-b2b-cats::-webkit-scrollbar { display: none; } .ee-portal .ee-portal-area--b2b .ee-b2b-cat { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 14px 16px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; box-shadow: none; font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1.2; color: var(--dls-muted); white-space: nowrap; transition: color .15s ease, border-color .15s ease, background-color .15s ease; } .ee-portal .ee-portal-area--b2b .ee-b2b-cat:hover { background: var(--ee-portal-brand-veil); color: var(--dls-ink); } .ee-portal .ee-portal-area--b2b .ee-b2b-cat.is-active { background: transparent; box-shadow: none; border-bottom-color: var(--dls-brand); color: var(--dls-brand-ink); font-weight: 600; } /* Zaehler = .org-tab-count (ee-analysis-dashboard.css Z3046). */ .ee-portal .ee-portal-area--b2b .ee-b2b-cat .ee-b2b-cat-c { display: inline-block; padding: 1px 6px; border-radius: 10px; background: rgba(100, 116, 139, .15); color: #475569; font-size: 11px; font-weight: 600; } /* PFLICHT, kein Feinschliff: der Bestand faerbt den Zaehler im aktiven Reiter weiss — das war fuer die gruene Pille gedacht. Ohne gefuellten Hintergrund waere er jetzt weiss auf weiss, also unsichtbar. */ .ee-portal .ee-portal-area--b2b .ee-b2b-cat.is-active .ee-b2b-cat-c { background: var(--ee-portal-brand-soft); color: var(--ee-portal-brand-ink); } /* ---- 2) Karten: eine Kartenform statt drei gestapelter Schwebekarten ---- .ee-b2b-top traegt gleich drei Bausteine (Werkzeugleiste, Kennzahlenband, Board-Rahmen). Radius und Schatten kommen bereits ueber die Tokens aus dem Karten-Kanon; hier fehlt nur die Portal-Kante, damit die drei Flaechen als eine Familie lesbar sind und nicht als drei uebereinandergelegte Karten. */ .ee-portal .ee-portal-area--b2b .ee-b2b-top { border: 1px solid var(--dls-line); } /* ========================================================================= ICON-KANON: EINFARBIG ODER WEG Befund der Durchsicht: die Symbole des Portal-Rahmens (Menue, Kopfleiste) sind Inline-SVG aus PortalRouter::ICONS und laufen bereits vollstaendig auf currentColor. Auch die Bereichs-Shortcodes geben KEIN einziges SVG mit fest verdrahteter Farbe aus (geprueft ueber alle Portal-Bereiche: null Treffer fuer fill="#"/stroke="#"). Die einzigen MEHRFARBIGEN Symbole im Portal sind daher Emojis — sie werden vom Betriebssystem gezeichnet, erben weder currentColor noch die Marke und sehen auf Mac, Windows und Android jeweils anders aus. Die Emojis der Hardware-Reiter sind aus dem Markup entfernt (siehe HardwareSettingsShortcode). Was hier folgt, sind die restlichen Emojis, die im Portal in einem EIGENEN Element stecken und reine Dekoration sind: sie fliegen raus. Emojis, die MITTEN IM TEXT stehen (Aufgaben/Notizen- Panel, Account-Posteingang), bleiben unberuehrt — sie liessen sich nur im JavaScript entfernen, und dieselben Dateien laufen auch auf den Bestandsseiten ausserhalb des Portals. Bedeutungstragende Symbole (Statusfarben, Energietraeger-Legende, Phasenfarben) sind ausdruecklich NICHT betroffen. Zwei Traeger wie ueberall in dieser Datei: .ee-portal fuer alles im Rahmen, body.ee-portal-page zusaetzlich fuer Dialoge, die sich per appendChild NEBEN den Rahmen haengen. ========================================================================= */ .ee-portal .merge-search-icon, .ee-portal .ee-ki-dump-popup__icon, .ee-portal .ee-focus-empty-icon, body.ee-portal-page .merge-search-icon, body.ee-portal-page .ee-ki-dump-popup__icon, body.ee-portal-page .ee-focus-empty-icon { display: none; } /* ========================================================================= BEREICHS-ANGLEICH — Bug-Tracker (/portal/bug-tracker) Ausgangslage (am Markup geprueft, nicht geraten): ee-bug-reporter.css ist ZWEI Stylesheets in einem. Der obere Teil gehoert dem schwebenden Melde- Knopf und seinem Popup (dunkles Glas-Thema, laeuft auf JEDER Seite fuer eingeloggte Nutzer). Der untere Teil ist die Tracker-Seite in einem hellen Thema — und aus dieser Doppelnutzung stammen die Brueche: .ee-bug-tracker-wrapper eigene 1200px-Karte MIT Schatten und eigener Schriftfamilie -> Karte in Karte .ee-bt-header h2 zweiter Seitentitel unter dem Portal-Kopf .ee-bt-btn-secondary rgba(255,255,255,.08) auf #ccc — ein Rest des DUNKLEN Themas; auf hellem Grund ist "CSV Export" praktisch unlesbar #3FA14D Hellgruen als Akzent (Reiter, Zaehler, Fix-Hinweis, Links) — die alte fuenfte Portalfarbe Radien 12/10/9/6/4/3px sechs Werte in einem Bereich Alles hier ist gescoped. ZWEI Traeger, wie ueberall in dieser Datei: .ee-portal .ee-portal-area fuer die Seite selbst body.ee-portal-page fuer Detail-Dialog und Lightbox — die haengt ee-bug-tracker.js per document.body.appendChild() NEBEN den Portal-Rahmen, .ee-portal-area erreicht sie also nicht. Die Bestandsseite mit [ee-bug-tracker] ausserhalb von /portal und der schwebende Melde-Knopf auf allen anderen Seiten bleiben unveraendert. Bedeutungstragend und deshalb NICHT angefasst: die vier Prioritaets- farben (kritisch/hoch/mittel/niedrig) und die Status-Abzeichen der Jarvis-Synchronisierung. Sie bekommen nur die Chip-Form aus dem Kanon. ========================================================================= */ /* ---- 1) Der Bereich ist keine eigene Karte ---- Breite, Rand und Hintergrund kommen aus dem Portal (Fundament-Regel 1 und 2). Weiss entsteht weiter unten aus der Inhalts-Karte. */ .ee-portal .ee-portal-area .ee-bug-tracker-wrapper { max-width: 100%; margin: 0; padding: 0; background: transparent; border-radius: 0; box-shadow: none; color: var(--dls-ink); font-family: inherit; } /* ---- 2) Ein Seiten-Header ---- Der Titel steht im Portal-Kopf (AREAS['label'] = "Bug-Tracker"). Der eigene

waere die zweite Ueberschrift derselben Seite. Er wird per CSS ausgeblendet und NICHT aus dem Markup entfernt: die Bestandsseite braucht ihn, und ee-bug-tracker.js schreibt ihn beim Umschalten auf "Feature-Tracker" um (updateTitle()). Diese Information geht nicht verloren — der aktive Umschalter oben zeigt sie an. Der Header-CONTAINER bleibt: an ihm haengen CSV-Export und "Alle archivierten loeschen". Ohne Titel ist er eine Bedienzeile und wird deshalb rechtsbuendig gesetzt. */ .ee-portal .ee-portal-area .ee-bt-header h2 { display: none; } .ee-portal .ee-portal-area .ee-bt-header { justify-content: flex-end; margin-bottom: 16px; } /* ---- 3) Typ-Umschalter (Bugs | Features) ---- Bleibt ein segmentierter Umschalter — nur Radius und Farbe folgen dem Kanon. Aktiv ist die Marke, nicht mehr das Hellgruen. */ .ee-portal .ee-portal-area .ee-bt-typeswitch { background: #f1f5f9; border: 1px solid var(--dls-line); border-radius: var(--ee-portal-btn-radius); padding: 3px; } .ee-portal .ee-portal-area .ee-bt-type { border-radius: var(--ee-portal-btn-radius-sm); padding: 8px 18px; font-family: inherit; font-size: .9rem; font-weight: 600; color: var(--dls-muted); transition: var(--ee-portal-btn-shift); } .ee-portal .ee-portal-area .ee-bt-type:hover { color: var(--dls-ink); } .ee-portal .ee-portal-area .ee-bt-type.active { background: var(--dls-card); color: var(--dls-brand); box-shadow: 0 1px 2px rgba(15, 23, 42, .08); } .ee-portal .ee-portal-area .ee-bt-type span, .ee-portal .ee-portal-area .ee-bt-tab span { border-radius: var(--ee-portal-chip-radius); background: rgba(100, 116, 139, .15); color: #475569; font-size: 11px; font-weight: 600; } .ee-portal .ee-portal-area .ee-bt-type.active span, .ee-portal .ee-portal-area .ee-bt-tab.active span { background: var(--dls-brand-soft); color: var(--dls-brand-ink); } /* ---- 4) Phasen-Reiter ---- Unterstrich-Reiter wie bei "Kunden" und B2B — die Form stimmte schon, nur die Farbe und die Linienstaerke fielen aus dem Rahmen. */ .ee-portal .ee-portal-area .ee-bt-tabs { border-bottom: 1px solid var(--dls-line); margin-bottom: 16px; } .ee-portal .ee-portal-area .ee-bt-tab { padding: 10px 16px; font-family: inherit; font-size: .9rem; font-weight: 600; color: var(--dls-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: var(--ee-portal-btn-shift); } .ee-portal .ee-portal-area .ee-bt-tab:hover { color: var(--dls-ink); } .ee-portal .ee-portal-area .ee-bt-tab.active { color: var(--dls-brand); border-bottom-color: var(--dls-brand); } .ee-portal .ee-portal-area .ee-bt-type:focus-visible, .ee-portal .ee-portal-area .ee-bt-tab:focus-visible { outline: 2px solid var(--dls-brand); outline-offset: 2px; } /* ---- 5) Die Liste ist die Karte ---- Hier — und nur hier — entsteht das Weiss des Bereichs. Dieselbe Form wie jede andere Portal-Karte: --dls-card, --dls-line, --dls-radius, --dls-shadow. */ .ee-portal .ee-portal-area .ee-bt-content { background: var(--dls-card); border: 1px solid var(--dls-line); border-radius: var(--dls-radius); box-shadow: var(--dls-shadow); overflow: hidden; } .ee-portal .ee-portal-area .ee-bt-table thead th { padding: 12px 16px; background: #f8fafc; border-bottom: 1px solid var(--dls-line); color: var(--dls-muted); font-size: .68rem; } .ee-portal .ee-portal-area .ee-bt-row { border-bottom: 1px solid var(--dls-line); } .ee-portal .ee-portal-area .ee-bt-row:hover { background: var(--ee-portal-brand-veil); } .ee-portal .ee-portal-area .ee-bt-row td { padding: 12px 16px; } .ee-portal .ee-portal-area .ee-bt-title-text { color: var(--dls-ink); } .ee-portal .ee-portal-area .ee-bt-title-desc, .ee-portal .ee-portal-area .ee-bt-cell-id, .ee-portal .ee-portal-area .ee-bt-cell-reporter, .ee-portal .ee-portal-area .ee-bt-cell-date, .ee-portal .ee-portal-area .ee-bt-cell-view { color: var(--dls-muted); } .ee-portal .ee-portal-area .ee-bt-loading, .ee-portal .ee-portal-area .ee-bt-empty { color: var(--dls-muted); font-size: .9rem; } /* ---- 6) Zeilen-Aktionen ---- 28x28-Quadrate, aber in der Farblogik des Kanons: Primaer traegt die Marke, Gefahr ist Umriss und fuellt sich erst beim Zeigen. */ .ee-portal .ee-portal-area .ee-bt-btn-sm { border-radius: var(--ee-portal-btn-radius-sm); border: 1px solid transparent; transition: var(--ee-portal-btn-shift); } .ee-portal .ee-portal-area .ee-bt-btn-sm.ee-bt-btn-primary { background: var(--dls-brand-soft); border-color: var(--ee-portal-brand-line); color: var(--dls-brand-ink); } .ee-portal .ee-portal-area .ee-bt-btn-sm.ee-bt-btn-primary:hover { background: var(--dls-brand); border-color: var(--dls-brand); color: #ffffff; } .ee-portal .ee-portal-area .ee-bt-btn-sm.ee-bt-btn-secondary { background: var(--dls-card); border-color: var(--dls-line); color: var(--dls-muted); } .ee-portal .ee-portal-area .ee-bt-btn-sm.ee-bt-btn-secondary:hover { background: #f1f5f9; border-color: var(--dls-muted); color: var(--dls-ink); } .ee-portal .ee-portal-area .ee-bt-btn-sm.ee-bt-btn-danger { background: var(--dls-card); border-color: #fecaca; color: #b91c1c; } .ee-portal .ee-portal-area .ee-bt-btn-sm.ee-bt-btn-danger:hover { background: #b91c1c; border-color: #b91c1c; color: #ffffff; } /* Die Aktions-Symbole sind seit diesem Schritt einfarbige Inline-SVG (ee-bug-tracker.js) statt Zeichen-Entities. 14px passt in das 28x28-Quadrat und erbt ueber currentColor die Knopffarbe. */ .ee-portal .ee-portal-area .ee-bt-action svg { display: block; width: 14px; height: 14px; pointer-events: none; } /* ---- 7) Detail-Dialog und Lightbox ---- Traeger ist body.ee-portal-page: beide werden per appendChild an den gehaengt und stehen damit AUSSERHALB von .ee-portal-area. Vorbild ist der Portal-Dialog (.popup-container weiter oben): weisser Kopf mit Trennlinie, Portal-Radius, ruhiger Schatten. */ body.ee-portal-page .ee-bt-detail-panel { border-radius: var(--dls-radius); box-shadow: 0 24px 64px rgba(15, 23, 42, .28); padding: 0; } body.ee-portal-page .ee-bt-detail-header { padding: 14px 22px; margin-bottom: 0; border-bottom: 1px solid var(--dls-line); } /* Der Schliessen-Knopf traegt seit diesem Schritt ein einfarbiges Inline-SVG (ee-bug-tracker.js) statt eines ×. Deshalb Flex-Zentrierung statt font-size: die Zeichengroesse steuert hier nichts mehr. */ body.ee-portal-page .ee-bt-detail-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--dls-line); border-radius: 8px; color: var(--dls-muted); } body.ee-portal-page .ee-bt-detail-close svg { display: block; width: 16px; height: 16px; pointer-events: none; } body.ee-portal-page .ee-bt-detail-close:hover { background: #f1f5f9; border-color: var(--dls-muted); color: var(--dls-ink); } /* Der Kopf hat jetzt sein eigenes Polster — der Rest des Dialogs braucht es deshalb einzeln, sonst klebte alles am Rand. */ body.ee-portal-page .ee-bt-detail-title { margin: 18px 22px 8px; font-size: 1.15rem; font-weight: 600; color: var(--dls-ink); } body.ee-portal-page .ee-bt-detail-desc { margin: 0 22px 16px; color: var(--dls-muted); } body.ee-portal-page .ee-bt-detail-fix, body.ee-portal-page .ee-bt-detail-screenshot, body.ee-portal-page .ee-bt-detail-meta, body.ee-portal-page .ee-bt-detail-section { margin-left: 22px; margin-right: 22px; } body.ee-portal-page .ee-bt-detail-section:last-child { margin-bottom: 22px; } body.ee-portal-page .ee-bt-detail-fix { background: var(--ee-portal-brand-soft); border-radius: var(--ee-portal-btn-radius-sm); color: var(--dls-ink); } body.ee-portal-page .ee-bt-detail-fix strong, body.ee-portal-page .ee-bt-bc-target, body.ee-portal-page .ee-bt-meta-value a { color: var(--ee-portal-brand-ink); } body.ee-portal-page .ee-bt-detail-meta { background: #f8fafc; border: 1px solid var(--dls-line); border-radius: var(--ee-portal-btn-radius); } body.ee-portal-page .ee-bt-detail-breadcrumbs, body.ee-portal-page .ee-bt-detail-console { background: #f8fafc; border: 1px solid var(--dls-line); border-radius: var(--ee-portal-btn-radius-sm); } body.ee-portal-page .ee-bt-detail-screenshot img { border-radius: var(--ee-portal-btn-radius-sm); border-color: var(--dls-line); } body.ee-portal-page .ee-bt-lightbox img { border-radius: var(--ee-portal-btn-radius-sm); } /* ========================================================================= ALTER LINKER SCHWEBE-LAUNCHER — im Portal stillgelegt ========================================================================= org-settings.js -> initOrganizationSideMenu() haengt beim DOMContentLoaded der Kunden-/B2B-Seite ein festes Leistchen mit drei Knoepfen an den : #orgSideMenu (.ee-org-side-menu) mit Aufgaben, Notizen und Benachrichtigungen. Es klebt position:fixed am linken Rand und legt sich damit ueber die Portal-Navigation. Im Portal wohnen diese drei Funktionen oben rechts im Kopf (.ee-portal-head-actions / .ee-portal-head-btn aus render_head_actions() und ee-portal-header.js). Der linke Launcher ist dort also doppelt. Traeger ist body.ee-portal-page und NICHT .ee-portal: der Launcher wird neben die Portal-Huelle gehaengt (body.appendChild bzw. vor #globalProjectsPopup), ist also kein Nachfahre von .ee-portal. Ausserhalb des Portals fehlt die Body-Klasse — die alte Standalone-Organisationsseite behaelt ihr Leistchen unveraendert. Der Selektor trifft ausschliesslich .ee-org-side-menu* und niemals .ee-portal-head-* — die Kopf-Knoepfe bleiben unberuehrt. */ body.ee-portal-page #orgSideMenu, body.ee-portal-page .ee-org-side-menu { display: none; }