/* ========================================================== DRK Rottenburg Wiki Login-Design ähnlich Nextcloud Login ========================================================== */ body.drk-login-page { min-height: 100vh !important; background: radial-gradient(circle at 50% 20%, rgba(176, 0, 32, 0.22), transparent 32%), radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.05), transparent 24%), radial-gradient(circle at 82% 14%, rgba(255, 255, 255, 0.045), transparent 26%), linear-gradient(135deg, #241014 0%, #33171d 45%, #1b0d10 100%) !important; color: #ffffff !important; } /* Den roten BookStack-Header auf Login-Seite optisch zurücknehmen */ body.drk-login-page header, body.drk-login-page .header, body.drk-login-page .top-bar { background: transparent !important; box-shadow: none !important; } /* Falls dein globaler Header trotzdem sichtbar ist */ body.drk-login-page .primary-background, body.drk-login-page .tri-layout-right, body.drk-login-page .tri-layout-left { background: transparent !important; } /* Hauptbereich mittig */ body.drk-login-page main, body.drk-login-page .content-wrap, body.drk-login-page .container { position: relative !important; z-index: 1 !important; } /* Wrapper wie bei Nextcloud: Logo über Karte */ .drk-login-wrapper { width: min(92vw, 430px) !important; margin: 90px auto 0 auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; } /* Großes rundes Logo über der Karte */ .drk-login-logo-top { position: relative !important; z-index: 5 !important; width: 148px !important; height: 148px !important; margin: 0 0 -34px 0 !important; border-radius: 50% !important; background: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.82) !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 20px 46px rgba(0, 0, 0, 0.38), 0 0 0 8px rgba(255, 255, 255, 0.055) !important; } .drk-login-logo-top img { display: block !important; width: 126px !important; height: 126px !important; object-fit: contain !important; } /* Login-Karte */ body.drk-login-page .drk-login-card { position: relative !important; overflow: hidden !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border-radius: 24px !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0.052) 50%, rgba(255, 255, 255, 0.035) 100% ) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; box-shadow: 0 24px 68px rgba(0, 0, 0, 0.36) !important; } /* Dezente Formen in der Karte */ body.drk-login-page .drk-login-card::before { content: "" !important; position: absolute !important; top: -72px !important; right: -64px !important; width: 210px !important; height: 210px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.065) !important; pointer-events: none !important; z-index: 1 !important; } body.drk-login-page .drk-login-card::after { content: "" !important; position: absolute !important; left: -56px !important; bottom: -44px !important; width: 230px !important; height: 82px !important; border-radius: 70px !important; background: rgba(176, 0, 32, 0.26) !important; transform: rotate(-7deg) !important; pointer-events: none !important; z-index: 1 !important; } /* Originaltitel ausblenden */ body.drk-login-page .drk-login-original-title, body.drk-login-page .drk-login-card h1, body.drk-login-page .drk-login-card h2, body.drk-login-page .drk-login-card h3 { display: none !important; } /* Karteninhalt */ body.drk-login-page .drk-login-card > * { position: relative !important; z-index: 2 !important; } body.drk-login-page .drk-login-card > *:not(.drk-login-original-title) { margin-left: 26px !important; margin-right: 26px !important; } body.drk-login-page .drk-login-card > *:first-child { margin-top: 54px !important; } body.drk-login-page .drk-login-card > *:last-child { margin-bottom: 24px !important; } /* Keycloak/Login-Button */ body.drk-login-page .drk-login-card a, body.drk-login-page .drk-login-card button, body.drk-login-page .drk-login-card .button, body.drk-login-page .drk-login-card input[type="submit"] { position: relative !important; z-index: 3 !important; width: 100% !important; min-height: 56px !important; margin: 38px 0 22px 0 !important; padding: 14px 20px !important; border-radius: 15px !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; background: linear-gradient( 135deg, #b00020 0%, #cf0026 58%, #8a001a 100% ) !important; color: #ffffff !important; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important; font-size: 1rem !important; font-weight: 800 !important; text-align: center !important; text-decoration: none !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important; } body.drk-login-page .drk-login-card a:hover, body.drk-login-page .drk-login-card button:hover, body.drk-login-page .drk-login-card .button:hover, body.drk-login-page .drk-login-card input[type="submit"]:hover { transform: translateY(-2px) !important; filter: brightness(1.06) !important; box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.20) !important; } /* Keycloak-Icon im Button weiß */ body.drk-login-page .drk-login-card a svg, body.drk-login-page .drk-login-card button svg, body.drk-login-page .drk-login-card .button svg { color: #ffffff !important; fill: currentColor !important; } /* Inputs, falls irgendwann normales Login aktiv ist */ body.drk-login-page .drk-login-card input:not([type="submit"]) { border-radius: 12px !important; } /* Footer-Links etwas dezenter */ body.drk-login-page footer, body.drk-login-page footer a { color: rgba(255, 255, 255, 0.62) !important; } /* Mobile */ @media screen and (max-width: 700px) { .drk-login-wrapper { width: auto !important; margin: 56px 18px 0 18px !important; } .drk-login-logo-top { width: 118px !important; height: 118px !important; margin-bottom: -28px !important; } .drk-login-logo-top img { width: 100px !important; height: 100px !important; } body.drk-login-page .drk-login-card { border-radius: 22px !important; } body.drk-login-page .drk-login-card > *:first-child { margin-top: 44px !important; } body.drk-login-page .drk-login-card a, body.drk-login-page .drk-login-card button, body.drk-login-page .drk-login-card .button, body.drk-login-page .drk-login-card input[type="submit"] { min-height: 52px !important; margin-top: 32px !important; } } /* ========================================================== DRK Login Feinschliff Hintergrund dezenter + Header reparieren ========================================================== */ /* Hintergrund weniger rot/leuchtend */ body.drk-login-page { background: radial-gradient(circle at 50% 18%, rgba(176, 0, 32, 0.10), transparent 28%), radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.035), transparent 22%), radial-gradient(circle at 82% 14%, rgba(255, 255, 255, 0.030), transparent 24%), linear-gradient(135deg, #221114 0%, #2b1519 45%, #180d0f 100%) !important; } /* BookStack-Header auf Login-Seite wieder sauber darstellen */ body.drk-login-page header, body.drk-login-page .header, body.drk-login-page .primary-background { background: linear-gradient(135deg, #b00020 0%, #cf0026 58%, #7d0018 100%) !important; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22) !important; } /* Header-Inhalt nicht transparent/kaputt machen */ body.drk-login-page header *, body.drk-login-page .header *, body.drk-login-page .primary-background * { color: #ffffff !important; } /* Header-Dekoformen etwas dezenter */ body.drk-login-page header::before, body.drk-login-page header::after, body.drk-login-page .header::before, body.drk-login-page .header::after, body.drk-login-page .primary-background::before, body.drk-login-page .primary-background::after { opacity: 0.38 !important; } /* Header-Höhe und Ausrichtung stabilisieren */ body.drk-login-page header .container, body.drk-login-page .header .container, body.drk-login-page .primary-background .container { min-height: 54px !important; display: flex !important; align-items: center !important; } /* Login-Link rechts nicht zerquetschen */ body.drk-login-page header a, body.drk-login-page .header a, body.drk-login-page .primary-background a { color: #ffffff !important; text-decoration: none !important; opacity: 0.95 !important; } /* Login-Karte minimal weniger rot spiegeln */ body.drk-login-page .drk-login-card::after { background: rgba(176, 0, 32, 0.14) !important; } /* Große Hintergrundformen auf Login-Seite reduzieren */ body.drk-login-page .drk-login-card::before { background: rgba(255, 255, 255, 0.045) !important; }