/* ========================================================================== LotusTable login theme — layered over the classic `keycloak` (v1) login.css. Reskins every login-family page (login / register / reset / verify / OTP / error / info) to the LotusTable dark-jade aesthetic. CSS-only: no template overrides, so this survives Keycloak upgrades as long as the v1 parent exists. Palette + fonts mirror the lobby (lotustable.css / error.html). ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Nunito:wght@400;600;700;800&family=Noto+Sans+SC:wght@700;800&display=swap'); /* Palette mirrors the current lobby "Midnight Jade" theme (web lotustable.css :root): navy surfaces + warm gold text, gold links, jade primary action — matching the lacquer (Jade & Gold) brand logo above. */ :root { --lt-bg-0: #0a121b; /* deepest navy (below lobby --bg) */ --lt-bg-1: #0d1822; /* lobby --bg */ --lt-surface: #193040; /* lobby --card-bg */ --lt-surface-2: #21404c; /* lobby --panel-2 */ --lt-border: rgba(234,197,88,.40); /* lobby --border (gold hairline) */ --lt-text: #ecdfc6; /* lobby --fg */ --lt-muted: #9fb6b0; /* lobby --muted */ --lt-gold: #d9b04a; /* lobby --gold */ --lt-gold-bright: #f3c552; /* lobby --accent */ --lt-accent: #2e8b6f; /* jade (the "Jade" half of Jade & Gold) */ --lt-accent-bright: #3aa885; --lt-danger: #d9534f; --lt-radius: 16px; --lt-serif: "DM Serif Display", ui-serif, Georgia, serif; --lt-sans: "Nunito", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif; } /* ---- Page background ---------------------------------------------------- */ /* Paint the gradient on with min-height:100% so it covers the full scroll height (a taller-than-viewport page must not reveal the white default below the card); body stays transparent. */ html { min-height: 100%; background: radial-gradient(1200px 600px at 50% -10%, rgba(46,139,111,.28), transparent 60%), radial-gradient(900px 500px at 85% 110%, rgba(201,162,39,.14), transparent 55%), linear-gradient(180deg, var(--lt-bg-1), var(--lt-bg-0)) !important; background-attachment: fixed !important; background-color: var(--lt-bg-0) !important; } body.login-pf, body { background: transparent !important; min-height: 100vh; font-family: var(--lt-sans) !important; color: var(--lt-text); } .login-pf-page { padding-top: 4vh; } /* ---- Brand header (logo + wordmark) ------------------------------------ */ /* v1 renders the realm name text inside #kc-header-wrapper; we replace it with the lotus mark + a "LotusTable" wordmark so every page is on-brand. */ #kc-header-wrapper { font-size: 0 !important; /* hide the realm-name text node */ padding: 0 0 1.25rem !important; line-height: 1; } #kc-header-wrapper::before { content: ""; display: block; /* The lacquer emblem (viewBox 240×210) is wider than tall — give it room. */ width: 104px; height: 92px; margin: 0 auto .4rem; background: url('../img/logo.svg') center / contain no-repeat; filter: drop-shadow(0 6px 16px rgba(0,0,0,.5)); } #kc-header-wrapper::after { content: "LotusTable"; display: block; font-family: var(--lt-serif); font-size: 2rem; letter-spacing: .5px; color: var(--lt-text); text-align: center; } /* ---- The card ---------------------------------------------------------- */ .card-pf { background: var(--lt-surface) !important; border: 1px solid var(--lt-border) !important; border-radius: var(--lt-radius) !important; box-shadow: 0 18px 50px rgba(0,0,0,.45) !important; padding: 2.25rem 2rem 2rem !important; max-width: 30rem; margin: 0 auto; } /* Page title ("Sign in", "Register", …) */ #kc-page-title { font-family: var(--lt-serif) !important; font-weight: 400 !important; font-size: 1.6rem !important; color: var(--lt-text) !important; text-align: center; margin: 0 0 1.25rem !important; } /* Realm-name / "Log in to" sub-header, if shown */ #kc-content-wrapper { color: var(--lt-text); } /* ---- Labels & inputs --------------------------------------------------- */ label, .control-label, .pf-c-form__label, #kc-form-options span, .checkbox label { color: var(--lt-muted) !important; font-weight: 600 !important; } input.form-control, .pf-c-form-control, select.form-control, input[type="text"], input[type="password"], input[type="email"] { background: var(--lt-bg-0) !important; border: 1px solid var(--lt-border) !important; border-radius: 10px !important; color: var(--lt-text) !important; height: 2.85rem !important; padding: .55rem .85rem !important; box-shadow: none !important; transition: border-color .15s ease, box-shadow .15s ease; } input.form-control::placeholder { color: #6f857c !important; } input.form-control:focus, .pf-c-form-control:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus { border-color: var(--lt-accent) !important; box-shadow: 0 0 0 3px rgba(46,139,111,.30) !important; outline: none !important; } /* Password show/hide toggle (kc-password) */ .pf-c-button.pf-m-control, button[aria-label="Show password"], button[aria-label="Hide password"] { background: var(--lt-bg-0) !important; border: 1px solid var(--lt-border) !important; color: var(--lt-muted) !important; border-radius: 10px !important; } /* PatternFly draws .pf-m-control's border on a square, inset ::after overlay (grey outline + bottom accent) — a rectangle around our own border. Drop it everywhere the control variant appears: the password show/hide toggle AND the Google social button. */ .pf-c-button.pf-m-control::after, button[aria-label="Show password"]::after, button[aria-label="Hide password"]::after { display: none !important; } /* The .pf-c-input-group wrapper (password field + show/hide toggle) has a WHITE background with square corners by default. Its children (the input + the toggle) are dark with border-radius:10px, so the white parent peeks through at the four rounded corners = small white corner triangles. Make the wrapper transparent so only the dark rounded children show on the dark card. */ .pf-c-input-group { background: transparent !important; } /* ---- Primary / secondary buttons -------------------------------------- */ input.btn-primary, .pf-c-button.pf-m-primary, button.btn-primary, #kc-login { background: linear-gradient(180deg, var(--lt-accent-bright), var(--lt-accent)) !important; border: none !important; border-radius: 10px !important; color: #ffffff !important; font-weight: 800 !important; font-family: var(--lt-sans) !important; letter-spacing: .3px; height: 2.9rem !important; font-size: 1rem !important; box-shadow: 0 6px 18px rgba(46,139,111,.35) !important; transition: filter .15s ease, transform .05s ease; } input.btn-primary:hover, .pf-c-button.pf-m-primary:hover, #kc-login:hover { filter: brightness(1.08); } input.btn-primary:active, .pf-c-button.pf-m-primary:active, #kc-login:active { transform: translateY(1px); } .btn-default, .pf-c-button.pf-m-secondary { background: transparent !important; border: 1px solid var(--lt-border) !important; color: var(--lt-text) !important; border-radius: 10px !important; font-weight: 700 !important; } /* ---- Links ------------------------------------------------------------- */ a, a:visited { color: var(--lt-gold) !important; text-decoration: none; font-weight: 700; } a:hover { color: var(--lt-gold-bright) !important; text-decoration: underline; } /* ---- "New user? Register" / reset links footer ------------------------ */ #kc-registration, #kc-registration-container, #kc-info-wrapper { background: transparent !important; border: none !important; color: var(--lt-muted) !important; text-align: center; margin-top: 1rem; } #kc-info-wrapper { font-size: .95rem; } /* ---- Alerts / messages ------------------------------------------------- */ .alert, .pf-c-alert { border-radius: 10px !important; border: 1px solid var(--lt-border) !important; background: var(--lt-surface-2) !important; color: var(--lt-text) !important; } .alert-error, .pf-c-alert.pf-m-danger { border-color: rgba(217,83,79,.5) !important; background: rgba(217,83,79,.12) !important; } .alert-success, .pf-c-alert.pf-m-success { border-color: rgba(46,139,111,.5) !important; background: rgba(46,139,111,.12) !important; } .alert-warning, .pf-c-alert.pf-m-warning { border-color: rgba(201,162,39,.5) !important; background: rgba(201,162,39,.12) !important; } #input-error, .pf-c-form__helper-text.pf-m-error, .kc-feedback-text { color: #f1a3a0 !important; } /* ---- Checkbox (remember me) ------------------------------------------- */ input[type="checkbox"] { accent-color: var(--lt-accent); } /* ---- Language selector ------------------------------------------------- */ #kc-locale ul { background: var(--lt-surface) !important; border: 1px solid var(--lt-border) !important; border-radius: 10px !important; } #kc-locale li a { color: var(--lt-text) !important; } #kc-locale-dropdown a { color: var(--lt-muted) !important; } /* ---- Social / identity providers (Google, etc.) ----------------------- */ /* "Or sign in with" divider label + hairline. */ #kc-social-providers h2 { font-family: var(--lt-sans) !important; font-size: .9rem !important; font-weight: 700 !important; color: var(--lt-muted) !important; text-align: center; margin: .25rem 0 .75rem !important; } #kc-social-providers hr { border: 0; border-top: 1px solid rgba(234,197,88,.18) !important; margin: .25rem 0 !important; } #kc-social-providers .kc-social-links { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; gap: .6rem; } #kc-social-providers .kc-social-links li { width: 100%; } /* Each provider button matches the sign-in button's geometry (full width, 2.9rem, r10) but reads as a NEUTRAL secondary: dark input-fill + gold hairline (not the pale surface, not the primary jade gradient), with the logo + label centred as one group. */ #kc-social-providers a { display: flex !important; align-items: center !important; justify-content: center !important; gap: .6rem !important; width: 100% !important; height: 2.9rem !important; box-sizing: border-box !important; border: 1px solid var(--lt-border) !important; border-radius: 999px !important; background: var(--lt-bg-0) !important; color: var(--lt-text) !important; font-family: var(--lt-sans) !important; font-weight: 700 !important; font-size: 1rem !important; transition: border-color .15s ease, background .15s ease; } #kc-social-providers a:hover { background: var(--lt-surface) !important; border-color: var(--lt-accent) !important; } /* PatternFly's .pf-c-button.pf-m-control paints its border on an ::after overlay — an absolute, inset:0, SQUARE (border-radius:0) box with a grey outline + a grey/blue bottom accent. That's the rectangle sitting around our rounded pill; drop it (our own border on the element is the pill). */ #kc-social-providers a::after { display: none !important; } /* Replace the theme's monochrome Font Awesome glyph with the official multicolour Google "G" (its sanctioned sign-in-button mark), painted as a background image on the logo slot. The .fa glyph is rendered via ::before, so drop that; a fixed square carries the SVG. */ #kc-social-providers a .kc-social-provider-logo { flex: 0 0 auto !important; margin: 0 !important; width: 19px !important; height: 19px !important; font-size: 0 !important; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20fill%3D%22%23EA4335%22%20d%3D%22M24%209.5c3.54%200%206.71%201.22%209.21%203.6l6.85-6.85C35.9%202.38%2030.47%200%2024%200%2014.62%200%206.51%205.38%202.56%2013.22l7.98%206.19C12.43%2013.72%2017.74%209.5%2024%209.5z%22%2F%3E%3Cpath%20fill%3D%22%234285F4%22%20d%3D%22M46.98%2024.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58%202.96-2.26%205.48-4.78%207.18l7.73%206c4.51-4.18%207.09-10.36%207.09-17.65z%22%2F%3E%3Cpath%20fill%3D%22%23FBBC05%22%20d%3D%22M10.53%2028.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92%2016.46%200%2020.12%200%2024c0%203.88.92%207.54%202.56%2010.78l7.97-6.19z%22%2F%3E%3Cpath%20fill%3D%22%2334A853%22%20d%3D%22M24%2048c6.48%200%2011.93-2.13%2015.89-5.81l-7.73-6c-2.15%201.45-4.92%202.3-8.16%202.3-6.26%200-11.57-4.22-13.47-9.91l-7.98%206.19C6.51%2042.62%2014.62%2048%2024%2048z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat !important; } #kc-social-providers a .kc-social-provider-logo::before { content: "" !important; display: none !important; } /* The name span carries Keycloak's kc-social-icon-text, which is position:relative with left:-15px (to hug an absolutely-positioned icon in the stock layout) — that pulls the label onto the G. Neutralise the offset so our flex gap governs the spacing. */ #kc-social-providers a .kc-social-provider-name { font-weight: 700 !important; color: var(--lt-text) !important; position: static !important; left: auto !important; right: auto !important; margin: 0 !important; padding: 0 !important; } /* ---- Small print / footer --------------------------------------------- */ #kc-info { margin-top: 1.25rem; } .instruction, .pf-c-login__main-footer-band-item { color: var(--lt-muted) !important; } /* ---- "Continue as guest" link (injected by js/guest-link.js) ----------- */ /* A divider above + a jade-outlined pill that reads as an alternative to signing in, styled to match the lobby's guest sign-up chip. */ #kc-guest { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, 0.08); text-align: center; } #kc-guest .lt-guest-link { display: inline-block; padding: 0.5rem 1.1rem; border: 1px solid var(--lt-accent) !important; border-radius: 999px; background: rgba(46, 139, 111, 0.12); color: var(--lt-accent-bright) !important; font-weight: 700; text-decoration: none !important; } #kc-guest .lt-guest-link:hover { background: var(--lt-accent) !important; color: #07140f !important; }