/* Central One — Redsis login theme. * * Layered on top of the stock Keycloak stylesheet: colour, type and the mark * only. Deliberately no template forks, so a Keycloak upgrade does not break * the sign-in page. * * Palette from the official marks at redsis.com/_logos/redsis — * green #06A442 (inside the logo artwork), yellow #FFD500, brand black #1D1D1B. */ :root{ --r-ink:#100F0C; --r-ink2:#1A1A1A; --r-black:#1D1D1B; --r-green:#06A442; --r-green-lo:#048537; --r-yellow:#FFD500; --r-line:#2A2A26; --r-txt:#F2F2F0; --r-dim:#9A9A94; } /* ---------------------------------------------------------------- canvas */ .login-pf, .login-pf body, body.redsis{ background:var(--r-ink) !important; color:var(--r-txt); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Open Sans",Helvetica,Arial,sans-serif; } /* The orbital arc from the logo, as ambient light. Hung off .login-pf-page, not body: kcHtmlClass lands on , so body has no class of ours to hook and body.redsis never matches anything. */ .login-pf-page:before, .login-pf-page:after{ content:"";position:fixed;border-radius:50%;pointer-events:none;z-index:0; } .login-pf-page:before{ width:760px;height:760px;top:-380px;right:-260px; background:radial-gradient(circle,rgba(255,213,0,.10) 0%,transparent 62%); } .login-pf-page:after{ width:680px;height:680px;bottom:-360px;left:-240px; background:radial-gradient(circle,rgba(6,164,66,.13) 0%,transparent 62%); } /* Keycloak lets the card run full width; give it a real card shape. */ .login-pf-page{ position:relative;z-index:1;padding-top:40px; max-width:470px;margin:0 auto; } .login-pf-page .card-pf{margin:0 auto;max-width:470px} /* ------------------------------------------------------------------ mark */ /* Replace the Keycloak wordmark with the Redsis logo. */ #kc-header, #kc-header-wrapper{ background:none !important;border:0 !important; padding:0 !important;margin:0 auto 26px !important; font-size:0 !important;letter-spacing:0 !important;text-transform:none !important; } #kc-header-wrapper:before{ content:"";display:block;width:190px;height:64px;margin:0 auto; background:url("../img/redsis.svg") center/contain no-repeat; } /* ------------------------------------------------------------------ card */ .card-pf{ background:linear-gradient(180deg,rgba(29,29,27,.96),rgba(16,15,12,.96)) !important; border:1px solid var(--r-line) !important; border-radius:18px !important; box-shadow:0 24px 70px rgba(0,0,0,.6) !important; padding:38px 36px 30px !important; position:relative;overflow:hidden; } /* the one accent: a yellow-to-green hairline */ .card-pf:before{ content:"";position:absolute;left:36px;right:36px;top:0;height:2px; background:linear-gradient(90deg,transparent,var(--r-yellow),var(--r-green),transparent); border-radius:2px; } #kc-page-title{ color:var(--r-txt);font-size:20px;font-weight:650;letter-spacing:-.3px;text-align:center; } /* ----------------------------------------------------------------- forms */ /* Keycloak 26 ships PatternFly v4 — the classes are pf-c-*, not pf-v5-c-*. Targeting the wrong generation is why the button stayed blue and the password field stayed grey; verify against the live DOM, not the docs. */ .form-control, .pf-c-form-control, input[type="text"], input[type="password"], input[type="email"]{ background:rgba(0,0,0,.34) !important; border:1px solid var(--r-line) !important; border-radius:10px !important; color:var(--r-txt) !important; height:auto !important;padding:11px 13px !important; box-shadow:none !important; } .form-control:focus, .pf-c-form-control:focus{ border-color:var(--r-green) !important; box-shadow:0 0 0 3px rgba(6,164,66,.18) !important; } .form-control::placeholder, .pf-c-form-control::placeholder{color:#6E6E68 !important} /* The password field sits in an input-group with a show/hide toggle; the group and the toggle are separately styled and stay white unless caught here. */ .pf-c-input-group{background:transparent !important;border-radius:10px} .pf-c-input-group > .pf-c-form-control{border-right:0 !important;border-radius:10px 0 0 10px !important} .pf-c-input-group .pf-c-button, .pf-c-input-group button{ background:rgba(0,0,0,.34) !important; border:1px solid var(--r-line) !important; border-left:0 !important; border-radius:0 10px 10px 0 !important; color:var(--r-dim) !important; box-shadow:none !important; } .pf-c-input-group .pf-c-button:hover{color:var(--r-yellow) !important} .pf-c-input-group .pf-c-button svg{fill:currentColor !important} label, .control-label, #kc-form-options span, .login-pf-page .login-pf-signup{color:var(--r-dim) !important} /* primary action — Redsis green. PatternFly drives this from a custom property; set the property AND the declaration, so neither specificity nor a future class rename can put the default blue back. */ :root,.login-pf-page{ --pf-c-button--m-primary--BackgroundColor:var(--r-green); --pf-c-button--m-primary--hover--BackgroundColor:var(--r-green-lo); --pf-c-button--m-primary--focus--BackgroundColor:var(--r-green-lo); --pf-c-button--m-primary--active--BackgroundColor:var(--r-green-lo); --pf-global--primary-color--100:var(--r-green); --pf-global--link--Color:var(--r-yellow); } .btn-primary, input[type="submit"].btn-primary, .pf-c-button.pf-m-primary, button.pf-m-primary, input.pf-m-primary{ background:var(--r-green) !important; border-color:var(--r-green) !important; color:#fff !important; font-weight:650 !important; border-radius:11px !important; padding:12px 16px !important; transition:background .14s,box-shadow .14s,transform .14s; } .btn-primary:hover, .pf-c-button.pf-m-primary:hover, button.pf-m-primary:hover, input.pf-m-primary:hover{ background:var(--r-green-lo) !important; box-shadow:0 8px 22px rgba(6,164,66,.28) !important; transform:translateY(-1px); } a{color:var(--r-yellow)} a:hover{color:#FFE352} /* --------------------------------------------------- identity providers */ /* The Microsoft button is the primary path, so it should not look secondary. */ #kc-social-providers{margin-top:22px;padding-top:20px;border-top:1px solid var(--r-line)} #kc-social-providers h2, #kc-social-providers hr{display:none} #kc-social-providers ul{list-style:none;margin:0;padding:0} #kc-social-providers li{margin:0 0 10px} #kc-social-providers a.zocial, #kc-social-providers a, #kc-social-providers .pf-c-button{ display:flex !important;align-items:center;justify-content:center;gap:10px; width:100%;padding:12px 16px !important; background:rgba(255,255,255,.05) !important; border:1px solid var(--r-line) !important; border-radius:11px !important; color:var(--r-txt) !important; font-weight:600 !important;font-size:14.5px !important; text-decoration:none !important;text-shadow:none !important; transition:border-color .14s,background .14s; } #kc-social-providers a:hover{ background:rgba(255,255,255,.08) !important; border-color:var(--r-yellow) !important; color:#fff !important; } /* zocial ships its own colours and icon font; neutralise both */ a.zocial:before{display:none !important} a.zocial span{background:none !important;box-shadow:none !important} /* ---------------------------------------------------------------- alerts */ .alert-error,.pf-m-danger,.pf-v5-c-alert.pf-m-danger{ background:rgba(211,16,43,.12) !important; border:1px solid rgba(211,16,43,.45) !important; color:#FFC4CC !important;border-radius:10px !important; } .alert-warning{background:rgba(255,213,0,.10) !important;border:1px solid rgba(255,213,0,.4) !important;color:#FFE9A3 !important} .alert-success{background:rgba(6,164,66,.12) !important;border:1px solid rgba(6,164,66,.45) !important;color:#B7F0CC !important} #kc-info,#kc-info-wrapper{color:var(--r-dim) !important;background:none !important} @media (max-width:480px){ .card-pf{padding:28px 22px 24px !important} #kc-header-wrapper:before{width:150px;height:52px} }