/* ========================================================================= Login-Seite im lozi-Look. Warum eine eigene Datei: Das Branding aus setup-branding.py hängt am Event (event.stylesheet) und greift deshalb nur unterhalb von /event//. Login, Registrierung und Passwort-Reset sind globale Indico-Seiten — die erreicht nur eine Datei aus /css/, die Indico in jede Seite einhängt (base.html, '__custom.css'). Genau deshalb ist hier alles auf `.login-page` eingegrenzt: Diese Klasse setzt layout/auth_base.html, und nur die Auth-Seiten erben davon. Ohne die Eingrenzung würde dasselbe Stylesheet auch die Indico-Verwaltung einfärben, in der die Orga arbeitet — ein halbfertiges Dunkeldesign wäre dort schlechter als der Standard. Getestet gegen Indico 3.3.12. Nach einem Indico-Update kurz nachsehen, ob die Klassennamen noch stimmen. ========================================================================= */ /* Die Farben stehen in 05-farben.css. Den Seitenhintergrund setzt 30-oeffentlich.css — `.login-page` liegt einige Ebenen unter , ohne die Regel dort bliebe rund um den Kasten das Standardweiß stehen. */ .login-page { min-height: 100vh; background: var(--lozi-bg); color: var(--lozi-text); font-family: var(--lozi-mono); letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; } /* Der Kasten mit Logo und Formular. Der Innenabstand muss hier stehen: Indico bringt für `.login-container` in keinem seiner Bundles eine eigene Regel mit (der Kasten ist im Standardlook unsichtbar). Ohne ihn stoßen die Eingabefelder — die Indico auf 100 % Breite setzt — hart an die abgerundete Kante. */ .login-page .login-container { background: var(--lozi-card); border: 1px solid var(--lozi-line); border-radius: 14px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45); color: var(--lozi-text); padding: 26px 24px 22px; } /* Das Logo hat einen hellen Bildhintergrund — auf dunklem Grund braucht es dieselbe weiße Platte wie im Kopf der Event-Seiten. */ .login-page .login-container .header-logo { max-height: 96px; width: auto; background: none; border-radius: 0; padding: 0; /* Rechts im Kasten statt mittig, so verlangt es der BWI-Styleguide. Indico zentriert den ganzen Kasten per text-align; als Block mit automatischem linken Rand steht das Logo trotzdem an der rechten Kante. */ display: block; margin-left: auto; } /* Die Eingabefelder hängen an `#form-wrapper`, nicht an `.login-page`, und das ist Absicht: Indico stylt sie über `.login-page form input:not([type=submit])` und setzt dort `color: #555` und `border: 1px solid #bbb`. Dieser Selektor ist spezifischer als `.login-page input[type=…]` (ein Element mehr), das Grau gewinnt also — dunkelgrauer Text auf fast schwarzem Feld. Die ID hebt uns sicher darüber, ohne `!important`. `#form-wrapper` deckt auch das Formular ab, das Indico bei einem zweiten Anmeldedienst per AJAX nachlädt. Die versteckten Felder (CSRF, Provider) trifft der Selektor mit, sie werden aber ohnehin nicht dargestellt. */ .login-page #form-wrapper input:not([type="submit"]) { background: var(--lozi-card2); border: 1px solid var(--lozi-line2); border-radius: 8px; color: var(--lozi-text); font-family: var(--lozi-mono); margin-top: 8px; } .login-page #form-wrapper input:not([type="submit"]):focus { border-color: var(--lozi-accent); outline: none; } .login-page input::placeholder { color: var(--lozi-muted); } /* Chrome malt automatisch ausgefüllte Felder hellgelb und den Text dunkel — auf dunklem Grund wäre das ein weißer Balken mitten im Formular. Die Hintergrundfarbe lässt sich dort nur über einen Inset-Schatten setzen. */ .login-page #form-wrapper input:-webkit-autofill, .login-page #form-wrapper input:-webkit-autofill:hover, .login-page #form-wrapper input:-webkit-autofill:focus { -webkit-text-fill-color: var(--lozi-text); -webkit-box-shadow: 0 0 0 1000px var(--lozi-card2) inset; caret-color: var(--lozi-text); } .login-page .i-button { background: var(--lozi-accent); border: 1px solid var(--lozi-accent); border-radius: 8px; color: #ffffff; font-family: var(--lozi-mono); font-weight: 600; text-shadow: none; } .login-page .i-button:hover { background: var(--lozi-accent2); border-color: var(--lozi-accent2); } /* Zweitrangige Wege (anderer Anmeldedienst) sollen den Hauptknopf nicht überstrahlen. */ .login-page .login-providers .i-button.provider-with-form, .login-page .login-providers.external .i-button { background: var(--lozi-card2); border-color: var(--lozi-line2); color: var(--lozi-text2); } .login-page a { color: var(--lozi-accent); } .login-page a:hover { color: var(--lozi-accent2); } .login-page .forgot-my-password a, .login-page .register, .login-page .link a { color: var(--lozi-muted); } .login-page .titled-rule { color: var(--lozi-muted); border-color: var(--lozi-line); } .login-page .login-reason-box, .login-page .message-box { background: var(--lozi-card2); border: 1px solid var(--lozi-line); border-radius: 10px; color: var(--lozi-text2); } /* Fließtext in der Prosa-Schrift — Mono ist für ganze Sätze zu unruhig. */ .login-page .login-reason-box, .login-page .message-box, .login-page .register { font-family: var(--lozi-sans); } /* login_page.html bindet footer.html innerhalb des Inhaltsblocks ein, der Footer steht also mit in `.login-page`. Er bleibt stehen (MIT verlangt das zwar nicht, wir lassen ihn aber drin) — nur die Farben werden angeglichen. */ .login-page footer { background: transparent; color: var(--lozi-muted); border-top: 1px solid var(--lozi-line); } /* Hier ist die Zeile der Fußzeile nur so breit wie ihr Inhalt und steht mittig — das Logo landete damit in der Mitte statt am rechten Rand, wo der BWI-Styleguide es will. Volle Breite, wie auf allen anderen Seiten. */ .login-page footer.footer > .flexrow { width: 100%; } /* ---- Am Handy ----------------------------------------------------------- Indicos Anmeldestrecke ist auf feste Pixel gebaut: .centered-column-wrapper { width: 800px } @media (max-width: 800px) { width: 400px } — immer noch fest .centered-column { width: 350px } 400 px sind breiter als ein 390-px-Telefon. Die Seite passt also nicht in den Viewport, und der Browser zoomt so weit heraus, bis sie hineinpasst — daher die winzige Anmeldeseite. `width: auto` mit einer Obergrenze laesst sie stattdessen mitgehen. Und beim Antippen eines Feldes zoomt iOS heran, sobald dessen Schrift kleiner als 16 px ist, und bleibt danach zu nah dran. 16 px ist kein Schoenheitswert, sondern genau die Schwelle, die Safari prueft. */ @media (max-width: 48rem) { .login-page .centered-column-wrapper, .lozi-auth-page .centered-column-wrapper { width: auto !important; max-width: 100%; padding: 0 1rem; } .login-page .centered-column, .lozi-auth-page .centered-column, .login-page .centered-column.wide, .lozi-auth-page .centered-column.wide { width: auto !important; max-width: 22rem; margin-left: auto !important; margin-right: auto !important; } .login-page input:not([type="checkbox"]):not([type="radio"]), .lozi-auth-page input:not([type="checkbox"]):not([type="radio"]), .login-page select, .lozi-auth-page select { font-size: 16px !important; } } /* Indico stellt die Fusszeile der Anmeldestrecke absolut an den unteren Rand (`position: absolute; bottom: 0`). Auf einem hohen Schirm sieht das aufgeraeumt aus; auf einem kurzen legt sie sich ueber das Formular. Am Handy laeuft sie deshalb im Fluss mit, hinter dem Kasten. */ @media (max-width: 48rem) { .login-page .centered-column-wrapper > .footer, .login-page footer.footer { position: static !important; width: auto !important; margin-top: 2rem; } /* Das Tabellen-Layout, mit dem Indico den Kasten senkrecht mittet, braucht auf dem Handy keine volle Schirmhoehe — sonst steht der Kasten in der Mitte und die Fusszeile weit darunter im Leeren. */ .login-page { display: block !important; position: static !important; height: auto !important; min-height: 100vh; padding: 2rem 0; } .login-page .middle { display: block !important; } }