commit 8430a8ecdb7a09f8a14fa5c85e097b8e39462fa6 Author: Alex Rennie-Lis Date: Wed Oct 28 13:41:46 2026 +0000 First commit diff --git a/unblue/login/resources/css/custom.css b/unblue/login/resources/css/custom.css new file mode 100644 index 0000000..d4c7049 --- /dev/null +++ b/unblue/login/resources/css/custom.css @@ -0,0 +1,349 @@ +@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap'); + +/* ========================================================================== + 1. RESET PATTERNFLY LOGIN GRID & ASYMMETRIC PADDING + ========================================================================== */ +:root { + --pf-v5-c-login--PaddingTop: 0 !important; + --pf-v5-c-login--PaddingRight: 0 !important; + --pf-v5-c-login--PaddingBottom: 0 !important; + --pf-v5-c-login--PaddingLeft: 0 !important; + --pf-v5-c-login__container--PaddingLeft: 0 !important; + --pf-v5-c-login__container--PaddingRight: 0 !important; + --pf-v5-c-login__container--MaxWidth: 100% !important; + --pf-v5-c-login__container--xl--GridColumnGap: 0 !important; + --pf-v5-c-login__container--xl--GridTemplateColumns: none !important; + --pf-v5-c-login__main--MaxWidth: 480px !important; + + /* PatternFly v4 fallbacks */ + --pf-c-login--PaddingTop: 0 !important; + --pf-c-login--PaddingRight: 0 !important; + --pf-c-login--PaddingBottom: 0 !important; + --pf-c-login--PaddingLeft: 0 !important; + --pf-c-login__container--PaddingLeft: 0 !important; + --pf-c-login__container--PaddingRight: 0 !important; + --pf-c-login__container--MaxWidth: 100% !important; + --pf-c-login__main--MaxWidth: 480px !important; + + /* Theme Design Tokens */ + --primary-color: #385a4f; + --primary-hover: #2b473e; + --primary-focus: rgba(56, 90, 79, 0.22); + --card-bg: rgba(255, 255, 255, 0.82); + --card-border: rgba(255, 255, 255, 0.95); + --input-bg: #ffffff; + --input-border: #d2ddd8; + --input-focus-border: #385a4f; + --text-main: #1f2d27; + --text-muted: #53645e; + --radius-card: 28px; + --radius-input: 12px; +} + +/* ========================================================================== + 2. VIEWPORT CENTERING & BACKGROUND + ========================================================================== */ +html, body { + min-height: 100vh !important; + width: 100% !important; + margin: 0 !important; + padding: 0 !important; + font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; + color: var(--text-main) !important; + overflow-x: hidden !important; +} + +body.login-pf, +.login-pf body, +body { + background: url('../img/background.jpg') no-repeat center center fixed !important; + background-size: cover !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; +} + +/* Strip PatternFly layout wrappers to enforce absolute centering */ +.login-pf-page, +.pf-v5-c-login, +.pf-c-login { + background: transparent !important; + min-height: 100vh !important; + width: 100% !important; + display: flex !important; + flex-direction: column !important; + align-items: center !important; + justify-content: center !important; + padding: 24px !important; + margin: 0 !important; + box-sizing: border-box !important; +} + +.pf-v5-c-login__container, +.pf-c-login__container { + display: flex !important; + flex-direction: column !important; + align-items: center !important; + justify-content: center !important; + width: 100% !important; + max-width: 480px !important; + padding: 0 !important; + margin: 0 auto !important; + grid-template-columns: none !important; + grid-template-areas: none !important; +} + +/* Hide unused PatternFly header and footer rows */ +.pf-v5-c-login__header, +.pf-c-login__header, +.pf-v5-c-login__footer, +.pf-c-login__footer, +#kc-header { + display: none !important; +} + +/* ========================================================================== + 3. GLASSMORPHIC LOGIN CARD + ========================================================================== */ +.card-pf, +.pf-v5-c-login__main, +.pf-c-login__main, +#kc-content { + background: var(--card-bg) !important; + backdrop-filter: blur(28px) saturate(180%) !important; + -webkit-backdrop-filter: blur(28px) saturate(180%) !important; + border-radius: var(--radius-card) !important; + border: 1px solid var(--card-border) !important; + box-shadow: 0 24px 60px rgba(15, 30, 24, 0.16), 0 4px 16px rgba(0, 0, 0, 0.04) !important; + width: 100% !important; + max-width: 480px !important; + padding: 48px 42px !important; + box-sizing: border-box !important; + margin: 0 auto !important; +} + +.pf-v5-c-login__main-header, +.pf-c-login__main-header, +.pf-v5-c-login__main-body, +.pf-c-login__main-body, +.pf-v5-c-login__main-footer, +.pf-c-login__main-footer { + padding: 0 !important; + background: transparent !important; +} + +/* Title & Heading */ +#kc-page-title, +.pf-v5-c-title, +.pf-c-title { + text-align: center !important; + font-size: 1.75rem !important; + font-weight: 700 !important; + color: var(--text-main) !important; + margin: 0 0 28px 0 !important; + letter-spacing: -0.025em !important; + line-height: 1.25 !important; +} + +/* ========================================================================== + 4. FORM CONTROLS & UNIFIED PASSWORD EYE INPUT + ========================================================================== */ +.form-group, +.pf-v5-c-form__group, +.pf-c-form__group { + margin-bottom: 20px !important; +} + +/* Strip default pseudo-elements */ +.pf-v5-c-form-control::before, +.pf-v5-c-form-control::after, +.pf-c-form-control::before, +.pf-c-form-control::after { + display: none !important; +} + +/* Standalone Input (Username / Email) */ +.pf-v5-c-form-control:not(.pf-v5-c-input-group *), +.pf-c-form-control:not(.pf-c-input-group *), +input[type="text"]:not(.pf-v5-c-input-group *):not(.pf-c-input-group *) { + background: var(--input-bg) !important; + border: 1.5px solid var(--input-border) !important; + border-radius: var(--radius-input) !important; + height: 48px !important; + box-sizing: border-box !important; + transition: border-color 0.15s ease, box-shadow 0.15s ease !important; +} + +/* Grouped Input Container (Password + Eye button) */ +.pf-v5-c-input-group, +.pf-c-input-group { + background: var(--input-bg) !important; + border: 1.5px solid var(--input-border) !important; + border-radius: var(--radius-input) !important; + height: 48px !important; + display: flex !important; + align-items: stretch !important; + box-sizing: border-box !important; + overflow: hidden !important; + transition: border-color 0.15s ease, box-shadow 0.15s ease !important; +} + +/* Strip inner input box styling inside the input group */ +.pf-v5-c-input-group .pf-v5-c-form-control, +.pf-c-input-group .pf-c-form-control, +.pf-v5-c-input-group input, +.pf-c-input-group input { + background: transparent !important; + border: none !important; + border-radius: 0 !important; + box-shadow: none !important; + height: 100% !important; + flex: 1 1 auto !important; + width: auto !important; + min-width: 0 !important; + padding: 0 16px !important; + color: var(--text-main) !important; + font-size: 0.95rem !important; + outline: none !important; +} + +/* Inner text input inside standalone form-control */ +.pf-v5-c-form-control:not(.pf-v5-c-input-group *) input, +.pf-c-form-control:not(.pf-c-input-group *) input, +input[type="text"]:not(.pf-v5-c-input-group *) { + background: transparent !important; + border: none !important; + outline: none !important; + box-shadow: none !important; + width: 100% !important; + height: 100% !important; + padding: 0 16px !important; + box-sizing: border-box !important; + font-size: 0.95rem !important; + color: var(--text-main) !important; +} + +/* Focus States */ +.pf-v5-c-form-control:not(.pf-v5-c-input-group *):focus-within, +.pf-v5-c-input-group:focus-within, +.pf-c-input-group:focus-within { + border-color: var(--input-focus-border) !important; + box-shadow: 0 0 0 4px var(--primary-focus) !important; +} + +/* Password Eye Button */ +.pf-v5-c-input-group button, +.pf-c-input-group button, +.pf-v5-c-input-group .pf-v5-c-button, +.pf-c-input-group .pf-c-button { + background: transparent !important; + border: none !important; + border-radius: 0 !important; + box-shadow: none !important; + color: var(--text-muted) !important; + padding: 0 16px !important; + cursor: pointer !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + height: 100% !important; +} + +.pf-v5-c-input-group button:hover, +.pf-c-input-group button:hover { + color: var(--text-main) !important; +} + +/* Autofill styling cleanup */ +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus { + -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important; + -webkit-text-fill-color: var(--text-main) !important; +} + +/* Labels */ +label.control-label, +label, +.pf-v5-c-form__label-text, +.pf-c-form__label-text { + color: var(--text-muted) !important; + font-size: 0.85rem !important; + font-weight: 600 !important; + margin-bottom: 7px !important; + display: inline-block !important; +} + +/* ========================================================================== + 5. BUTTONS, OPTIONS & FOOTERS + ========================================================================== */ +#kc-form-options, +.login-pf-settings { + display: flex !important; + justify-content: space-between !important; + align-items: center !important; + margin: 14px 0 24px 0 !important; + font-size: 0.875rem !important; + color: var(--text-muted) !important; +} + +.pf-v5-c-check, +.pf-c-check { + display: flex !important; + align-items: center !important; +} + +input[type="checkbox"] { + accent-color: var(--primary-color) !important; + margin-right: 8px !important; +} + +.btn-primary, +.pf-v5-c-button.pf-m-primary, +.pf-c-button.pf-m-primary, +#kc-login { + background-color: var(--primary-color) !important; + border: none !important; + border-radius: var(--radius-input) !important; + height: 52px !important; + font-size: 1rem !important; + font-weight: 600 !important; + color: #ffffff !important; + box-shadow: 0 8px 20px rgba(45, 78, 68, 0.28) !important; + cursor: pointer !important; + transition: all 0.2s ease !important; + width: 100% !important; + margin-top: 10px !important; +} + +.btn-primary:hover, +#kc-login:hover { + background-color: var(--primary-hover) !important; + box-shadow: 0 10px 24px rgba(45, 78, 68, 0.38) !important; + transform: translateY(-1px) !important; +} + +.btn-primary:active, +#kc-login:active { + transform: translateY(0) !important; +} + +a { + color: var(--primary-color) !important; + text-decoration: none !important; + font-weight: 500 !important; +} + +a:hover { + text-decoration: underline !important; +} + +#kc-registration-container, +#kc-info, +.pf-v5-c-login__main-footer-band, +.pf-c-login__main-footer-band { + margin-top: 26px !important; + text-align: center !important; + font-size: 0.9rem !important; + color: var(--text-muted) !important; +} diff --git a/unblue/login/resources/img/background.jpg b/unblue/login/resources/img/background.jpg new file mode 100644 index 0000000..f116891 Binary files /dev/null and b/unblue/login/resources/img/background.jpg differ diff --git a/unblue/login/theme.properties b/unblue/login/theme.properties new file mode 100644 index 0000000..e3195e6 --- /dev/null +++ b/unblue/login/theme.properties @@ -0,0 +1,4 @@ +parent=keycloak.v2 +import=common/keycloak + +styles=css/custom.css