/* Thorwesten-Branding fürs Elastic-Skin: Farben aus panel/frontend/tailwind.config.js * (primary #003d9b) und dem Sidebar-Mark aus Layout.tsx (Navy #091c35, * Creme #f1ede4, Koralle-Akzent #e85f3e). */ :root { --thorwesten-accent: #003d9b; --thorwesten-accent-hover: #002e78; --thorwesten-bg: #f4f5f7; --thorwesten-card: #ffffff; --thorwesten-card-border: #dde0e6; } /* Alles hier auf body.task-login scopen: #layout-content ist auch der * Haupt-Container der Mail-App nach dem Login (3-Spalten-Ansicht) – ohne * das Scoping würde die Login-Card-Optik dort die ganze Oberfläche zerschießen. * Verifiziert gegen die live gerenderte Login-Seite: */ body.task-login { background-color: var(--thorwesten-bg); } body.task-login #layout-content { /* Ursache tatsächlich gefunden (Elastic-CSS im Container inspiziert): * #layout { display:flex; height:100% } – kein flex-direction, also * row. #layout-content ist ein Flex-Item darin. Ohne eigenes align-self * greift das Default-align-items:stretch des Elternelements und zieht * die Karte auf die volle Höhe von #layout, egal was man bei * #layout-content selbst für height/position setzt (height:auto ist im * Flexbox-Modell genau der Wert, der Stretch erst auslöst – das war der * Fehler im letzten Versuch). align-self:flex-start ist der korrekte Hebel. */ align-self: flex-start !important; flex: none !important; max-width: 380px !important; width: calc(100% - 40px) !important; margin: 12vh auto 0 !important; background: var(--thorwesten-card) !important; border: 1px solid var(--thorwesten-card-border) !important; border-radius: 16px !important; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px -12px rgba(16, 24, 40, 0.14) !important; padding: 36px 32px 28px !important; } body.task-login #logo { /* Elastic setzt .task-login #logo { position:relative; top:16vh } und * #login-form { position:relative; top:20vh } – der Trick, mit dem * Elastic Logo/Formular über eine volle Bildschirmhöhe "verteilt". Setzt * voraus, dass #layout-content die volle Höhe hat. Seit align-self: * flex-start oben ist die Karte kompakt, die vh-Offsets schieben Logo * und Formular aber weiterhin nach unten -> sie rutschen aus der Karte. * Beide hier auf die normale Fluss-Position zurücksetzen. */ position: static !important; top: auto !important; max-height: 44px; margin: 0 auto 24px; display: block; } body.task-login #login-form { position: static !important; top: auto !important; margin: 0 auto !important; width: 100% !important; max-width: 100% !important; } body.task-login #login-form td.title label { font-size: 12px; font-weight: 600; color: #6b6f7b; } body.task-login #login-form .form-control { border-radius: 8px !important; } body.task-login #login-form .form-control:focus { border-color: var(--thorwesten-accent) !important; box-shadow: 0 0 0 3px rgba(0, 61, 155, 0.18) !important; } body.task-login #login-footer { margin-top: 20px; text-align: center; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #9a9da8; } #login-form .button.mainaction, #login-form button[type="submit"], #login-form input[type="submit"], .mainscreen .button.mainaction, .btn-primary { background-color: var(--thorwesten-accent) !important; border-color: var(--thorwesten-accent) !important; border-radius: 8px !important; } #login-form .button.mainaction:hover, #login-form button[type="submit"]:hover, .btn-primary:hover { background-color: var(--thorwesten-accent-hover) !important; border-color: var(--thorwesten-accent-hover) !important; } a, a:visited { color: var(--thorwesten-accent); }