/* Stadt Leipzig — GitLab-Anmeldeseite (/users/sign_in) * * ZIEL * - Formular einspaltig und zentriert (wie beim Wiki), statt zwei Spalten * mit Text links und Formular rechts. * - Logo passend zum Theme: die in Admin -> Appearance hochgeladene Datei * ist die weisse Negativ-Variante ("...1C-Negativ-RGB..."). Im hellen * Theme ist sie unsichtbar (weiss auf weiss). * - Farben werden NICHT angefasst: keine Regel setzt color/background. * * WIRD PER nginx sub_filter in die Seite eingehaengt (GitLab hat kein Feld * fuer eigenes CSS). Siehe nginx-gitlab-login-inject.conf. */ /* --------------------------------------------------------------------------- * 1. Logo je nach Theme * GitLab setzt bei dunklem Theme die Klasse .gl-dark auf (Modus * "gl-system" folgt der Systemeinstellung). Das Logo ist einfarbig weiss, * invert(1) macht daraus exakt schwarz — kein zweites Bild noetig. * ------------------------------------------------------------------------- */ html:not(.gl-dark) .login-page img.js-portrait-logo-detection, html:not(.gl-dark) .login-page .gl-text-center > img { filter: invert(1); } /* --------------------------------------------------------------------------- * 2. Zwei Spalten -> eine zentrierte Spalte * display:contents loest die beiden Bootstrap-Wrapper (.col-md, .col-sm-12) * auf, sodass Logo, Titel, Beschreibung und Formular direkte Flex-Kinder * von .row werden und einzeln sortiert werden koennen. * ------------------------------------------------------------------------- */ .login-page .row > .col-md, .login-page .row > .col-md > .col-sm-12 { display: contents; } .login-page .row { flex-direction: column; align-items: center; width: 100%; max-width: 460px; margin-left: auto; margin-right: auto; row-gap: 0; } /* Reihenfolge: Logo -> Titel -> Beschreibung -> Formular/OAuth */ .login-page .row .gl-text-center:has(img) { order: 1; width: 100%; margin-bottom: 1.5rem; } .login-page .row h1 { order: 2; width: 100%; text-align: center; margin-bottom: 0.5rem; } /* Die Beschreibung ist gerendertes Markdown (.md) — GitLab richtet die * Absaetze darin links aus, deshalb auch die Kinder zentrieren. */ .login-page .row #js-custom-sign-in-description, .login-page .row #js-custom-sign-in-description > * { order: 3; width: 100%; text-align: center; margin-bottom: 1.5rem; } .login-page .row .js-non-oauth-login, .login-page .row .omniauth-container, .login-page .row .js-oauth-login { order: 4; width: 100%; } /* Achtung: GitLab rendert ZWEI h1 — eines nur fuer kleine Viewports * (md:gl-hidden), eines nur fuer grosse (gl-hidden md:gl-block). Deren * Sichtbarkeit nicht anfassen, sonst erscheint der Titel doppelt. */ /* Tabs (MPZ AD / Standard) spannen sonst ueber die alte Spaltenbreite. */ .login-page .row #js-signin-tabs { margin-left: 0; margin-right: 0; } @media (max-width: 575px) { .login-page .row { max-width: 100%; } }