Keycloak theme for the sign-in and sign-out pages (PD-23, PD-26)
Realm petrolyst's login theme, on Keycloak's unstyled base: a slate panel with the logo and its line beside the form on a soft card; on a phone a slate band above it; light and dark. Satoshi stays out of Git by its licence (build.sh). The README adds the install steps. Not deployed. Bands: none (identity theme). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Nasim SadatandClaude Opus 5.5 committed
1 parent
d95e6e184a
commit
89b1709fd9
16 files changed
+835
No files matched your search
@@ -0,0 +1,190 @@
|
||||
:root {
|
||||
--brand-navy: #0B1D33;
|
||||
--brand-teal: #009688;
|
||||
--brand-cyan: #00B6E6;
|
||||
--brand-sand: #F2EBDD;
|
||||
--brand-graphite: #3F4752;
|
||||
/* PD-26: the Etihad-inspired restyle. Pearl carries tags and avatars; gold is an editorial
|
||||
accent only, never on controls and never carrying state. */
|
||||
--brand-gold: #AA8951;
|
||||
--brand-pearl: #EBE2D2;
|
||||
|
||||
/* The chrome: the dark slate shell (header, side menus, hero bands). The same in light and
|
||||
dark mode, like the reference design; only the content below it follows the device. */
|
||||
--surface-chrome: #2A3945;
|
||||
--surface-chrome-deep: #1F2A33;
|
||||
--surface-chrome-active: #334654;
|
||||
--border-chrome: #4D5562;
|
||||
--text-on-chrome: #F8FAFC;
|
||||
--text-on-chrome-muted: #B7C1C9;
|
||||
|
||||
--surface-page: #FFFFFF;
|
||||
--surface-subtle: #F9FAFB;
|
||||
--surface-card: #FFFFFF;
|
||||
--text-primary: #0B1D33;
|
||||
--text-secondary: #475569;
|
||||
--text-muted: #64748B;
|
||||
--border-default: #E3E7EA;
|
||||
--border-strong: #C9D0D6;
|
||||
|
||||
/* Actions wear the logo's green (PD-26, revised on the owner's word: the Y's colour is the
|
||||
brand's one strong colour, so the controls echo it). Gold stays an editorial accent only. */
|
||||
--action-primary: #00695C;
|
||||
--action-primary-foreground: #FFFFFF;
|
||||
--action-primary-hover: #005B50;
|
||||
--action-primary-active: #004D44;
|
||||
--action-link: #00695C;
|
||||
|
||||
--focus-ring-inner: #FFFFFF;
|
||||
--focus-ring-outer: #0B1D33;
|
||||
--focus-ring-inner-width: 2px;
|
||||
--focus-ring-outer-width: 2px;
|
||||
--focus-ring-offset: 2px;
|
||||
|
||||
--status-normal: #0F7B6C;
|
||||
--status-normal-foreground: #FFFFFF;
|
||||
--status-live: #007C91;
|
||||
--status-live-foreground: #FFFFFF;
|
||||
--status-warning: #B45309;
|
||||
--status-warning-foreground: #FFFFFF;
|
||||
--status-critical: #B3261E;
|
||||
--status-critical-foreground: #FFFFFF;
|
||||
--status-offline: #52606D;
|
||||
--status-offline-foreground: #FFFFFF;
|
||||
--status-stale: #7C8796;
|
||||
--status-stale-foreground: #0B1D33;
|
||||
--status-info: #2563EB;
|
||||
--status-info-foreground: #FFFFFF;
|
||||
|
||||
--font-display: "Satoshi", "Inter", system-ui, sans-serif;
|
||||
--font-ui: "Inter", system-ui, sans-serif;
|
||||
|
||||
--text-display-xl: 64px;
|
||||
--text-h1: 48px;
|
||||
--text-h2: 36px;
|
||||
--text-h3: 28px;
|
||||
--text-body-lg: 20px;
|
||||
--text-body: 16px;
|
||||
--text-ui: 14px;
|
||||
--text-caption: 12px;
|
||||
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-12: 48px;
|
||||
--space-16: 64px;
|
||||
--space-24: 96px;
|
||||
|
||||
/* PD-26 shapes: large soft cards, small chips, pill buttons. */
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 16px;
|
||||
--radius-lg: 20px;
|
||||
--radius-pill: 999px;
|
||||
|
||||
--shadow-card: 0 2px 4px rgb(11 29 51 / 0.04), 0 12px 28px -8px rgb(11 29 51 / 0.12);
|
||||
--shadow-pop: 0 6px 16px rgb(11 29 51 / 0.12), 0 20px 48px -12px rgb(11 29 51 / 0.28);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--surface-page: #1F2A33;
|
||||
--surface-subtle: #243038;
|
||||
--surface-card: #2A3945;
|
||||
--text-primary: #F8FAFC;
|
||||
--text-secondary: #C7CFD6;
|
||||
--text-muted: #9AA6AF;
|
||||
--border-default: #3C4854;
|
||||
--border-strong: #76828E;
|
||||
|
||||
--action-primary: #35C5B6;
|
||||
--action-primary-foreground: #0B1D33;
|
||||
--action-primary-hover: #4CD3C4;
|
||||
--action-primary-active: #2DB4A6;
|
||||
--action-link: #35C5B6;
|
||||
|
||||
--focus-ring-inner: #1F2A33;
|
||||
--focus-ring-outer: #F8FAFC;
|
||||
|
||||
--status-normal: #35C5B6;
|
||||
--status-normal-foreground: #0B1D33;
|
||||
--status-live: #48CFF2;
|
||||
--status-live-foreground: #0B1D33;
|
||||
--status-warning: #F59E0B;
|
||||
--status-warning-foreground: #0B1D33;
|
||||
--status-critical: #FF6B6B;
|
||||
--status-critical-foreground: #0B1D33;
|
||||
--status-offline: #94A3B8;
|
||||
--status-offline-foreground: #0B1D33;
|
||||
--status-stale: #CBD5E1;
|
||||
--status-stale-foreground: #0B1D33;
|
||||
--status-info: #60A5FA;
|
||||
--status-info-foreground: #0B1D33;
|
||||
|
||||
--shadow-card: 0 2px 4px rgb(0 0 0 / 0.2), 0 12px 28px -8px rgb(0 0 0 / 0.4);
|
||||
--shadow-pop: 0 6px 16px rgb(0 0 0 / 0.35), 0 20px 48px -12px rgb(0 0 0 / 0.55);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--surface-page: #1F2A33;
|
||||
--surface-subtle: #243038;
|
||||
--surface-card: #2A3945;
|
||||
--text-primary: #F8FAFC;
|
||||
--text-secondary: #C7CFD6;
|
||||
--text-muted: #9AA6AF;
|
||||
--border-default: #3C4854;
|
||||
--border-strong: #76828E;
|
||||
|
||||
--action-primary: #35C5B6;
|
||||
--action-primary-foreground: #0B1D33;
|
||||
--action-primary-hover: #4CD3C4;
|
||||
--action-primary-active: #2DB4A6;
|
||||
--action-link: #35C5B6;
|
||||
|
||||
--focus-ring-inner: #1F2A33;
|
||||
--focus-ring-outer: #F8FAFC;
|
||||
|
||||
--status-normal: #35C5B6;
|
||||
--status-normal-foreground: #0B1D33;
|
||||
--status-live: #48CFF2;
|
||||
--status-live-foreground: #0B1D33;
|
||||
--status-warning: #F59E0B;
|
||||
--status-warning-foreground: #0B1D33;
|
||||
--status-critical: #FF6B6B;
|
||||
--status-critical-foreground: #0B1D33;
|
||||
--status-offline: #94A3B8;
|
||||
--status-offline-foreground: #0B1D33;
|
||||
--status-stale: #CBD5E1;
|
||||
--status-stale-foreground: #0B1D33;
|
||||
--status-info: #60A5FA;
|
||||
--status-info-foreground: #0B1D33;
|
||||
|
||||
--shadow-card: 0 2px 4px rgb(0 0 0 / 0.2), 0 12px 28px -8px rgb(0 0 0 / 0.4);
|
||||
--shadow-pop: 0 6px 16px rgb(0 0 0 / 0.35), 0 20px 48px -12px rgb(0 0 0 / 0.55);
|
||||
}
|
||||
}
|
||||
|
||||
/* Recommended primary action implementation */
|
||||
.petrolyst-action-primary {
|
||||
background: var(--action-primary);
|
||||
color: var(--action-primary-foreground);
|
||||
border: 1px solid var(--action-primary);
|
||||
}
|
||||
|
||||
.petrolyst-action-primary:hover {
|
||||
background: var(--action-primary-hover);
|
||||
border-color: var(--action-primary-hover);
|
||||
}
|
||||
|
||||
.petrolyst-action-primary:active {
|
||||
background: var(--action-primary-active);
|
||||
border-color: var(--action-primary-active);
|
||||
}
|
||||
|
||||
.petrolyst-action-primary:focus-visible {
|
||||
outline: var(--focus-ring-outer-width) solid var(--focus-ring-outer);
|
||||
outline-offset: calc(var(--focus-ring-offset) + var(--focus-ring-inner-width));
|
||||
box-shadow: 0 0 0 var(--focus-ring-inner-width) var(--focus-ring-inner);
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
:root {
|
||||
--petroleum-50:#F7F9FA; --petroleum-100:#EEF2F4; --petroleum-200:#DDE5E9;
|
||||
--petroleum-300:#C3D0D7; --petroleum-400:#96A9B4; --petroleum-500:#6C818E;
|
||||
--petroleum-600:#506572; --petroleum-700:#394E5C; --petroleum-800:#233746;
|
||||
--petroleum-900:#132636; --petroleum-950:#0A1825;
|
||||
|
||||
--surface-live:#FFFFFF;
|
||||
--surface-live-alt:var(--petroleum-50);
|
||||
--surface-context:#F2EBDD;
|
||||
--surface-report:#F7F1E8;
|
||||
--surface-empty:#F5EFE4;
|
||||
|
||||
/* Active semantic override of the base Brand System */
|
||||
--surface-subtle:var(--petroleum-50);
|
||||
--text-secondary:var(--petroleum-600);
|
||||
--text-muted:var(--petroleum-600);
|
||||
--border-default:var(--petroleum-200);
|
||||
--border-subtle:var(--petroleum-200);
|
||||
--border-control:var(--petroleum-500);
|
||||
--border-strong:var(--petroleum-500);
|
||||
|
||||
--numeric-family:"Inter",system-ui,sans-serif;
|
||||
--numeric-weight:600;
|
||||
--numeric-unit-weight:500;
|
||||
--numeric-unit-color:var(--petroleum-600);
|
||||
--numeric-value-unit-ratio:.46;
|
||||
|
||||
--product-icon-color:#0B1D33;
|
||||
--product-icon-live:#007C91;
|
||||
--product-icon-action:#009688;
|
||||
--product-icon-warning:#B45309;
|
||||
--product-icon-critical:#B3261E;
|
||||
--product-icon-offline:#52606D;
|
||||
--product-icon-info:#2563EB;
|
||||
|
||||
--y-branch-angle-from-vertical:35deg;
|
||||
--y-divider-angle:12deg;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--surface-live:#2A3945;
|
||||
--surface-live-alt:#243038;
|
||||
--surface-context:#242A2F;
|
||||
--surface-report:#20272D;
|
||||
--surface-empty:#1C242B;
|
||||
|
||||
--surface-subtle:#1F2A33;
|
||||
--text-secondary:#C7CFD6;
|
||||
--text-muted:#9AA6AF;
|
||||
--border-default:#3C4854;
|
||||
--border-subtle:#3C4854;
|
||||
--border-control:#76828E;
|
||||
--border-strong:#8B96A1;
|
||||
|
||||
--numeric-unit-color:#C7CFD6;
|
||||
|
||||
--product-icon-color:#F8FAFC;
|
||||
--product-icon-live:#48CFF2;
|
||||
--product-icon-action:#35C5B6;
|
||||
--product-icon-warning:#F59E0B;
|
||||
--product-icon-critical:#FF6B6B;
|
||||
--product-icon-offline:#94A3B8;
|
||||
--product-icon-info:#60A5FA;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme:dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--surface-live:#2A3945;
|
||||
--surface-live-alt:#243038;
|
||||
--surface-context:#242A2F;
|
||||
--surface-report:#20272D;
|
||||
--surface-empty:#1C242B;
|
||||
--surface-subtle:#1F2A33;
|
||||
--text-secondary:#C7CFD6;
|
||||
--text-muted:#9AA6AF;
|
||||
--border-default:#3C4854;
|
||||
--border-subtle:#3C4854;
|
||||
--border-control:#76828E;
|
||||
--border-strong:#8B96A1;
|
||||
--numeric-unit-color:#C7CFD6;
|
||||
--product-icon-color:#F8FAFC;
|
||||
--product-icon-live:#48CFF2;
|
||||
--product-icon-action:#35C5B6;
|
||||
--product-icon-warning:#F59E0B;
|
||||
--product-icon-critical:#FF6B6B;
|
||||
--product-icon-offline:#94A3B8;
|
||||
--product-icon-info:#60A5FA;
|
||||
}
|
||||
}
|
||||
|
||||
.petrolyst-reading {
|
||||
display:inline-flex; align-items:baseline; gap:.14em;
|
||||
font-family:var(--numeric-family);
|
||||
font-variant-numeric:tabular-nums slashed-zero;
|
||||
font-feature-settings:"tnum" 1,"zero" 1;
|
||||
}
|
||||
.petrolyst-reading__value {font-weight:var(--numeric-weight);letter-spacing:-.025em;line-height:.95;}
|
||||
.petrolyst-reading__unit {
|
||||
font-size:calc(1em * var(--numeric-value-unit-ratio));
|
||||
font-weight:var(--numeric-unit-weight); color:var(--numeric-unit-color);
|
||||
}
|
||||
.petrolyst-surface--context {background:var(--surface-context);}
|
||||
.petrolyst-surface--live {background:var(--surface-live);}
|
||||
.petrolyst-divider--y {transform:skewY(var(--y-divider-angle)); transform-origin:left center;}
|
||||
|
||||
/* Functional controls require stronger non-text contrast than decorative dividers. */
|
||||
.petrolyst-control {
|
||||
border: 1px solid var(--border-control);
|
||||
}
|
||||
.petrolyst-divider {
|
||||
border-color: var(--border-subtle);
|
||||
}
|
||||
@@ -0,0 +1,237 @@
|
||||
/* Petrolyst's sign-in pages. Colours and type come from the brand tokens (css/brand/), light and dark; the form sits on a soft card
|
||||
beside the dark slate shell, which is the same in both (PD-26), as on the website and in the app. */
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
}
|
||||
/* Fetched at build time and never committed: Satoshi's licence forbids distributing the files (build.sh). Without it, Inter takes over. */
|
||||
@font-face {
|
||||
font-family: "Satoshi";
|
||||
src: url("../fonts/Satoshi-Variable.woff2") format("woff2");
|
||||
font-weight: 300 900;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html { color-scheme: light; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--surface-subtle);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-body);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.pl-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: 448px;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--space-6, 24px) var(--space-8, 32px);
|
||||
}
|
||||
|
||||
/* The logo; the realm's name is left out (messages: loginTitleHtml). On a phone a slate band, like the website's header; wide, the panel holds it. */
|
||||
.pl-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 64px;
|
||||
margin: 0 calc(var(--space-6, 24px) * -1) var(--space-8, 32px);
|
||||
padding: 0 var(--space-6, 24px);
|
||||
background: var(--surface-chrome);
|
||||
border-bottom: 1px solid var(--border-chrome);
|
||||
}
|
||||
#kc-header-wrapper {
|
||||
width: 160px;
|
||||
height: 22px;
|
||||
background: url("../img/petrolyst_wordmark_white_y.svg") left center / contain no-repeat;
|
||||
}
|
||||
|
||||
.pl-card {
|
||||
padding: var(--space-6, 24px);
|
||||
background: var(--surface-card);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
#kc-page-title {
|
||||
margin: 0 0 var(--space-6, 24px);
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-h3);
|
||||
font-weight: 400;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* --- The form --- */
|
||||
.pl-group { margin-bottom: var(--space-5, 20px); }
|
||||
.pl-label,
|
||||
#kc-content label {
|
||||
display: block;
|
||||
margin-bottom: var(--space-2, 8px);
|
||||
font-size: var(--text-ui);
|
||||
font-weight: 600;
|
||||
}
|
||||
.pl-input,
|
||||
#kc-content input[type="text"],
|
||||
#kc-content input[type="password"],
|
||||
#kc-content input[type="email"] {
|
||||
width: 100%;
|
||||
min-height: 44px;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid var(--border-control);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--surface-card);
|
||||
color: var(--text-primary);
|
||||
font: inherit;
|
||||
}
|
||||
.pl-input:focus,
|
||||
#kc-content input:focus-visible,
|
||||
.pl-eye:focus-visible,
|
||||
.pl-btn:focus-visible,
|
||||
#kc-content a:focus-visible {
|
||||
outline: 2px solid var(--action-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.pl-input[aria-invalid="true"] { border-color: var(--status-critical); }
|
||||
|
||||
.pl-input-group { position: relative; }
|
||||
.pl-input-group .pl-input { padding-right: 48px; }
|
||||
.pl-eye {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
border-radius: var(--radius-sm);
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
}
|
||||
.pl-eye:hover { color: var(--text-primary); }
|
||||
|
||||
.pl-icon {
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: currentColor;
|
||||
-webkit-mask: var(--pl-icon) center / contain no-repeat;
|
||||
mask: var(--pl-icon) center / contain no-repeat;
|
||||
}
|
||||
.pl-icon-show { --pl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
|
||||
.pl-icon-hide { --pl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.9 4.2A10 10 0 0 1 12 4c6.5 0 10 8 10 8a17 17 0 0 1-2.2 3.3M6.6 6.6A17 17 0 0 0 2 12s3.5 8 10 8a10 10 0 0 0 5.4-1.6M2 2l20 20M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E"); }
|
||||
.pl-icon-restart { --pl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E"); }
|
||||
|
||||
.pl-settings { margin-bottom: 0; font-size: var(--text-ui); }
|
||||
#kc-form-buttons { margin: var(--space-5, 20px) 0 0; }
|
||||
.pl-settings a,
|
||||
#kc-content a {
|
||||
color: var(--action-primary);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
#kc-content a:hover { text-decoration: underline; }
|
||||
#kc-form-options .checkbox label { display: inline-flex; align-items: center; gap: var(--space-2, 8px); font-weight: 400; margin: 0; }
|
||||
|
||||
.pl-btn,
|
||||
#kc-content input[type="submit"] {
|
||||
min-height: 44px;
|
||||
padding: 10px 24px;
|
||||
border: 1px solid var(--border-control);
|
||||
border-radius: var(--radius-pill);
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
font: inherit;
|
||||
font-size: var(--text-ui);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pl-btn-primary,
|
||||
#kc-content input[type="submit"].pl-btn-primary {
|
||||
border-color: var(--action-primary);
|
||||
background: var(--action-primary);
|
||||
color: var(--action-primary-foreground);
|
||||
}
|
||||
.pl-btn-primary:hover { background: var(--action-primary-hover); border-color: var(--action-primary-hover); }
|
||||
.pl-btn-primary:active { background: var(--action-primary-active); border-color: var(--action-primary-active); }
|
||||
.pl-btn-primary:disabled { opacity: 0.6; cursor: default; }
|
||||
.pl-btn-block { width: 100%; }
|
||||
|
||||
/* --- Messages --- */
|
||||
.pl-alert {
|
||||
display: flex;
|
||||
gap: var(--space-2, 8px);
|
||||
margin-bottom: var(--space-5, 20px);
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--border-default);
|
||||
border-left-width: 3px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--surface-subtle);
|
||||
font-size: var(--text-ui);
|
||||
}
|
||||
.pl-alert.alert-error { border-left-color: var(--status-critical); }
|
||||
.pl-alert.alert-warning { border-left-color: var(--status-warning, var(--border-strong)); }
|
||||
.pl-alert.alert-success { border-left-color: var(--action-primary); }
|
||||
.pl-alert.alert-info { border-left-color: var(--action-primary); }
|
||||
.pl-field-error {
|
||||
display: block;
|
||||
margin-top: var(--space-2, 8px);
|
||||
color: var(--status-critical);
|
||||
font-size: var(--text-ui);
|
||||
}
|
||||
.instruction,
|
||||
#kc-content p { color: var(--text-secondary); margin: 0 0 var(--space-5, 20px); }
|
||||
#kc-content p:last-child { margin-bottom: 0; }
|
||||
#kc-content ol, #kc-content ul { color: var(--text-secondary); padding-left: 20px; }
|
||||
#kc-content li { margin-bottom: var(--space-3, 12px); }
|
||||
#kc-content ul ul { margin-top: var(--space-2, 8px); }
|
||||
|
||||
/* The user's name on later steps, with the way back to the start. */
|
||||
#kc-username { display: flex; align-items: center; justify-content: space-between; margin: 0 0 var(--space-5, 20px); font-size: var(--text-ui); font-weight: 600; }
|
||||
#kc-attempted-username { margin: 0; }
|
||||
#reset-login { display: inline-flex; color: var(--text-secondary); }
|
||||
.kc-tooltip-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
|
||||
#kc-info { margin-top: var(--space-5, 20px); font-size: var(--text-ui); color: var(--text-secondary); }
|
||||
.subtitle { font-size: var(--text-caption); color: var(--text-muted); }
|
||||
.required { color: var(--status-critical); }
|
||||
.clearfix { clear: both; }
|
||||
|
||||
/* --- Dark --- */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html { color-scheme: dark; }
|
||||
}
|
||||
|
||||
/* --- Wide: the slate panel with the logo, the form on its card beside it. The logo appears once, so the form's own is hidden. --- */
|
||||
@media (min-width: 64rem) {
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0 50% 0 0;
|
||||
background:
|
||||
url("../img/petrolyst_logo_white_y.svg") center / clamp(300px, 30vw, 480px) auto no-repeat,
|
||||
radial-gradient(ellipse 34vw 40vw at 50% 50%, color-mix(in srgb, var(--petroleum-500) 45%, transparent) 0%, color-mix(in srgb, var(--petroleum-500) 20%, transparent) 45%, transparent 100%),
|
||||
var(--surface-chrome);
|
||||
}
|
||||
.pl-page {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
justify-content: center;
|
||||
width: 50%;
|
||||
max-width: none;
|
||||
margin: 0 0 0 50%;
|
||||
padding: var(--space-8, 32px) clamp(48px, 7vw, 128px);
|
||||
}
|
||||
.pl-header { display: none; }
|
||||
.pl-card { padding: var(--space-8, 32px); }
|
||||
}
|
||||
Reference in new issue
Block a user