新class612
This commit is contained in:
+3
-3
@@ -1,5 +1,5 @@
|
||||
// This file is auto-generated by the `update-kc-gen` command. Do not edit it manually.
|
||||
// Hash: 822f146dfd89023346d41d4f77fba9745b7f55365c95ca37f85806c01ab23dc4
|
||||
// Hash: 7dbbfb317418e9799cdce9a990519799f98af7dbfe27f1d0438c6738cffb7515
|
||||
|
||||
/* eslint-disable */
|
||||
|
||||
@@ -9,9 +9,9 @@
|
||||
|
||||
import { lazy, Suspense, type ReactNode } from "react";
|
||||
|
||||
export type ThemeName = "keycloakify-starter";
|
||||
export type ThemeName = "keycloakify-starter" | "class";
|
||||
|
||||
export const themeNames: ThemeName[] = ["keycloakify-starter"];
|
||||
export const themeNames: ThemeName[] = ["keycloakify-starter", "class"];
|
||||
|
||||
export type KcEnvName = never;
|
||||
|
||||
|
||||
+46
-2
@@ -5,6 +5,7 @@ import { useI18n } from "./i18n";
|
||||
import DefaultPage from "keycloakify/login/DefaultPage";
|
||||
import Template from "./Template";
|
||||
import "./theme.css";
|
||||
import "./class-theme.css";
|
||||
const UserProfileFormFields = lazy(
|
||||
() => import("keycloakify/login/UserProfileFormFields")
|
||||
);
|
||||
@@ -25,7 +26,11 @@ export default function KcPage(props: { kcContext: KcContext }) {
|
||||
<DefaultPage
|
||||
kcContext={kcContext}
|
||||
i18n={i18n}
|
||||
classes={classes}
|
||||
classes={
|
||||
kcContext.themeName === "class"
|
||||
? classThemeClasses
|
||||
: nexusThemeClasses
|
||||
}
|
||||
Template={Template}
|
||||
doUseDefaultCss={false}
|
||||
UserProfileFormFields={UserProfileFormFields}
|
||||
@@ -38,7 +43,7 @@ export default function KcPage(props: { kcContext: KcContext }) {
|
||||
);
|
||||
}
|
||||
|
||||
const classes = {
|
||||
const nexusThemeClasses = {
|
||||
kcBodyClass: "nexus-body",
|
||||
kcLoginClass: "nexus-login",
|
||||
kcHeaderClass: "nexus-header",
|
||||
@@ -76,3 +81,42 @@ const classes = {
|
||||
kcLocaleItemClass: "nexus-locale__item",
|
||||
kcInputErrorMessageClass: "nexus-field__error"
|
||||
} satisfies { [key in ClassKey]?: string };
|
||||
|
||||
const classThemeClasses = {
|
||||
kcBodyClass: "class-body",
|
||||
kcLoginClass: "class-login",
|
||||
kcHeaderClass: "class-header",
|
||||
kcHeaderWrapperClass: "class-header__name",
|
||||
kcFormCardClass: "class-card",
|
||||
kcFormHeaderClass: "class-card__header",
|
||||
kcFormGroupClass: "class-field",
|
||||
kcLabelClass: "class-label",
|
||||
kcInputClass: "class-input",
|
||||
kcInputGroup: "class-input-group",
|
||||
kcFormSettingClass: "class-form-settings",
|
||||
kcFormOptionsWrapperClass: "class-form-options",
|
||||
kcFormPasswordVisibilityButtonClass: "class-password-toggle",
|
||||
kcButtonClass: "class-button",
|
||||
kcButtonBlockClass: "class-button--block",
|
||||
kcButtonLargeClass: "class-button--large",
|
||||
kcButtonPrimaryClass: "class-button--primary",
|
||||
kcButtonSecondaryClass: "class-button--secondary",
|
||||
kcButtonDefaultClass: "class-button--default",
|
||||
kcAlertClass: "class-alert",
|
||||
kcFeedbackErrorIcon: "class-feedback class-feedback--error",
|
||||
kcFeedbackWarningIcon: "class-feedback class-feedback--warning",
|
||||
kcFeedbackSuccessIcon: "class-feedback class-feedback--success",
|
||||
kcFeedbackInfoIcon: "class-feedback class-feedback--info",
|
||||
kcFormSocialAccountSectionClass: "class-social",
|
||||
kcFormSocialAccountListClass: "class-social__list",
|
||||
kcFormSocialAccountListButtonClass: "class-social__button",
|
||||
kcFormSocialAccountNameClass: "class-social__name",
|
||||
kcSignUpClass: "class-signup",
|
||||
kcInfoAreaWrapperClass: "class-signup__inner",
|
||||
kcLocaleMainClass: "class-locale",
|
||||
kcLocaleDropDownClass: "class-locale__dropdown",
|
||||
kcLocaleListClass: "class-locale__list",
|
||||
kcLocaleListItemClass: "class-locale__list-item",
|
||||
kcLocaleItemClass: "class-locale__item",
|
||||
kcInputErrorMessageClass: "class-field__error"
|
||||
} satisfies { [key in ClassKey]?: string };
|
||||
|
||||
@@ -5,8 +5,54 @@ import type { I18n } from "./i18n";
|
||||
|
||||
export default function Template(props: TemplateProps<KcContext, I18n>) {
|
||||
const { msg } = props.i18n;
|
||||
const isClassTheme = props.kcContext.themeName === "class";
|
||||
|
||||
return (
|
||||
<>
|
||||
{isClassTheme ? (
|
||||
<>
|
||||
<div className="class-atmosphere" aria-hidden="true">
|
||||
<span className="class-registration-mark class-registration-mark--top" />
|
||||
<span className="class-registration-mark class-registration-mark--bottom" />
|
||||
<div className="class-mobile-brand">
|
||||
<span>612</span>
|
||||
<b>{msg("classArchiveName")}</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside className="class-record" aria-hidden="true">
|
||||
<div className="class-record__index">
|
||||
<span>ARCHIVE NO. 612</span>
|
||||
<span>{msg("classSchoolCohort")}</span>
|
||||
</div>
|
||||
|
||||
<div className="class-record__copy">
|
||||
<p>{msg("classIdentityArchive")}</p>
|
||||
<h2>
|
||||
{msg("classMemoriesRemain")}
|
||||
<span>{msg("classWelcomeBack")}</span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="class-record__ledger">
|
||||
<div>
|
||||
<strong>1095+</strong>
|
||||
<span>{msg("classDaysTogether")}</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>612</strong>
|
||||
<span>{msg("classArchiveNumber")}</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>∞</strong>
|
||||
<span>{msg("classMomentsRemembered")}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="class-record__stamp">612</div>
|
||||
</aside>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="nexus-atmosphere" aria-hidden="true">
|
||||
<div className="nexus-grid" />
|
||||
@@ -38,6 +84,8 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
|
||||
<span className="nexus-system-status__state">{msg("nexusSystemOnline")}</span>
|
||||
</div>
|
||||
</aside>
|
||||
</>
|
||||
)}
|
||||
|
||||
<BaseTemplate {...props} />
|
||||
</>
|
||||
|
||||
@@ -0,0 +1,770 @@
|
||||
:root {
|
||||
--class-ink: #18324a;
|
||||
--class-muted: #617387;
|
||||
--class-line: #b9cedd;
|
||||
--class-paper: #f7fbff;
|
||||
--class-surface: #ffffff;
|
||||
--class-soft: #e5f3ff;
|
||||
--class-blue: #3f7fd6;
|
||||
--class-blue-deep: #2868c7;
|
||||
--class-green: #23966f;
|
||||
--class-sun: #f6c54c;
|
||||
--class-coral: #f05a47;
|
||||
--class-danger: #c93636;
|
||||
--class-display: "Arial Narrow", "DIN Condensed", "Noto Sans SC", "Microsoft YaHei",
|
||||
sans-serif;
|
||||
--class-body-font: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
|
||||
--class-utility: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
|
||||
}
|
||||
|
||||
html.login-pf:has(body.class-body) {
|
||||
min-height: 100%;
|
||||
background: var(--class-paper);
|
||||
}
|
||||
|
||||
body.class-body {
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
color: var(--class-ink);
|
||||
background: var(--class-paper);
|
||||
font-family: var(--class-body-font);
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.class-body button,
|
||||
.class-body input,
|
||||
.class-body select,
|
||||
.class-body textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.class-atmosphere {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
background-image: linear-gradient(rgba(24, 50, 74, 0.035) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(24, 50, 74, 0.035) 1px, transparent 1px);
|
||||
background-position: calc(52% + 24px) 24px;
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
|
||||
.class-registration-mark {
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.class-registration-mark::before,
|
||||
.class-registration-mark::after {
|
||||
position: absolute;
|
||||
background: var(--class-coral);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.class-registration-mark::before {
|
||||
top: 11px;
|
||||
left: 0;
|
||||
width: 24px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.class-registration-mark::after {
|
||||
top: 0;
|
||||
left: 11px;
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.class-registration-mark--top {
|
||||
top: 24px;
|
||||
}
|
||||
|
||||
.class-registration-mark--bottom {
|
||||
bottom: 24px;
|
||||
}
|
||||
|
||||
.class-mobile-brand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.class-record {
|
||||
position: fixed;
|
||||
inset: 0 48% 0 0;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: clamp(32px, 4.5vw, 72px);
|
||||
color: #f7faf8;
|
||||
background: linear-gradient(rgba(247, 250, 248, 0.075) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(247, 250, 248, 0.075) 1px, transparent 1px),
|
||||
var(--class-blue);
|
||||
background-size: 44px 44px;
|
||||
}
|
||||
|
||||
.class-record::before {
|
||||
position: absolute;
|
||||
right: clamp(28px, 4vw, 62px);
|
||||
bottom: -0.18em;
|
||||
color: rgba(255, 255, 255, 0.1);
|
||||
font-family: var(--class-display);
|
||||
font-size: clamp(16rem, 32vw, 37rem);
|
||||
font-weight: 950;
|
||||
letter-spacing: -0.12em;
|
||||
line-height: 0.75;
|
||||
content: "612";
|
||||
}
|
||||
|
||||
.class-record::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 9px;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
var(--class-coral) 0 33.333%,
|
||||
var(--class-sun) 33.333% 66.666%,
|
||||
var(--class-green) 66.666%
|
||||
);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.class-record__index,
|
||||
.class-record__copy,
|
||||
.class-record__ledger,
|
||||
.class-record__stamp {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.class-record__index {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
padding-bottom: 13px;
|
||||
border-bottom: 1px solid rgba(247, 250, 248, 0.48);
|
||||
color: rgba(247, 250, 248, 0.74);
|
||||
font: 700 0.68rem/1.4 var(--class-utility);
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.class-record__index span:first-child {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.class-record__copy {
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.class-record__copy p {
|
||||
margin: 0 0 18px;
|
||||
color: var(--class-sun);
|
||||
font: 700 0.72rem/1.5 var(--class-utility);
|
||||
letter-spacing: 0.07em;
|
||||
}
|
||||
|
||||
.class-record__copy h2 {
|
||||
max-width: 7.8em;
|
||||
margin: 0;
|
||||
font-family: var(--class-display);
|
||||
font-size: clamp(3.6rem, 6.5vw, 7.4rem);
|
||||
font-weight: 950;
|
||||
letter-spacing: -0.06em;
|
||||
line-height: 0.92;
|
||||
}
|
||||
|
||||
.class-record__copy h2 span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.class-record__copy h2::after {
|
||||
display: block;
|
||||
width: 70px;
|
||||
height: 8px;
|
||||
margin-top: 25px;
|
||||
background: var(--class-coral);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.class-record__ledger {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
border-top: 1px solid rgba(247, 250, 248, 0.48);
|
||||
border-bottom: 1px solid rgba(247, 250, 248, 0.48);
|
||||
}
|
||||
|
||||
.class-record__ledger div {
|
||||
min-width: 0;
|
||||
padding: 16px 16px 17px 0;
|
||||
}
|
||||
|
||||
.class-record__ledger div + div {
|
||||
padding-left: 16px;
|
||||
border-left: 1px solid rgba(247, 250, 248, 0.48);
|
||||
}
|
||||
|
||||
.class-record__ledger strong,
|
||||
.class-record__ledger span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.class-record__ledger strong {
|
||||
font-family: var(--class-display);
|
||||
font-size: clamp(1.8rem, 3vw, 3rem);
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.class-record__ledger span {
|
||||
margin-top: 7px;
|
||||
color: rgba(247, 250, 248, 0.72);
|
||||
font: 700 0.58rem/1.35 var(--class-utility);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.class-record__stamp {
|
||||
position: absolute;
|
||||
top: clamp(92px, 13vh, 140px);
|
||||
right: clamp(32px, 5vw, 78px);
|
||||
display: grid;
|
||||
width: 72px;
|
||||
height: 58px;
|
||||
place-items: center;
|
||||
color: #ffffff;
|
||||
background: var(--class-coral);
|
||||
font: 900 1.35rem/1 var(--class-utility);
|
||||
letter-spacing: 0.04em;
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
|
||||
.class-login {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
width: 48%;
|
||||
margin-left: 52%;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: clamp(42px, 6vw, 96px);
|
||||
}
|
||||
|
||||
.class-header {
|
||||
width: min(100%, 500px);
|
||||
margin: 0 auto 13px;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.class-header__name#kc-header-wrapper {
|
||||
padding: 0;
|
||||
color: var(--class-muted);
|
||||
background: none;
|
||||
font: 700 0.68rem/1.5 var(--class-utility);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.class-header__name#kc-header-wrapper::before {
|
||||
color: var(--class-blue-deep);
|
||||
content: "ARCHIVE ACCESS / ";
|
||||
}
|
||||
|
||||
.class-card {
|
||||
position: relative;
|
||||
width: min(100%, 500px);
|
||||
margin: 0 auto;
|
||||
padding: clamp(30px, 4vw, 50px);
|
||||
border: 1px solid var(--class-ink);
|
||||
border-radius: 0;
|
||||
color: var(--class-ink);
|
||||
background: var(--class-surface);
|
||||
box-shadow: 16px 16px 0 var(--class-soft);
|
||||
}
|
||||
|
||||
.class-card::before {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
left: -1px;
|
||||
height: 7px;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--class-blue) 0 54%,
|
||||
var(--class-coral) 54% 72%,
|
||||
var(--class-sun) 72% 88%,
|
||||
var(--class-green) 88%
|
||||
);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.class-card__header {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.class-card__header #kc-page-title {
|
||||
margin: 0;
|
||||
color: var(--class-ink);
|
||||
font-family: var(--class-display);
|
||||
font-size: clamp(2.25rem, 3.8vw, 3.4rem);
|
||||
font-weight: 950;
|
||||
letter-spacing: -0.045em;
|
||||
line-height: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.class-card__header #kc-page-title::after {
|
||||
display: block;
|
||||
width: 52px;
|
||||
height: 6px;
|
||||
margin-top: 16px;
|
||||
background: var(--class-coral);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.class-card a {
|
||||
color: var(--class-blue-deep);
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.class-card a:hover {
|
||||
color: var(--class-coral);
|
||||
}
|
||||
|
||||
.class-field {
|
||||
margin: 0 0 21px;
|
||||
}
|
||||
|
||||
.class-label {
|
||||
display: inline-block;
|
||||
margin-bottom: 8px;
|
||||
color: var(--class-ink);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
.class-input,
|
||||
.class-card textarea.form-control,
|
||||
.class-card select.form-control {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid var(--class-line);
|
||||
border-radius: 0;
|
||||
color: var(--class-ink);
|
||||
outline: 0;
|
||||
background: #fbfdff;
|
||||
box-shadow: none;
|
||||
font-size: 0.94rem;
|
||||
transition:
|
||||
border-color 150ms ease,
|
||||
box-shadow 150ms ease,
|
||||
background 150ms ease;
|
||||
}
|
||||
|
||||
.class-input:hover {
|
||||
border-color: var(--class-ink);
|
||||
}
|
||||
|
||||
.class-input:focus,
|
||||
.class-card textarea.form-control:focus,
|
||||
.class-card select.form-control:focus {
|
||||
border-color: var(--class-blue-deep);
|
||||
background: #ffffff;
|
||||
box-shadow: inset 5px 0 0 var(--class-blue);
|
||||
}
|
||||
|
||||
.class-input[aria-invalid="true"] {
|
||||
border-color: var(--class-danger);
|
||||
box-shadow: inset 5px 0 0 var(--class-danger);
|
||||
}
|
||||
|
||||
.class-input-group {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.class-input-group .class-input {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.class-password-toggle,
|
||||
.class-input-group .pf-c-button.pf-m-control {
|
||||
display: grid;
|
||||
width: 48px;
|
||||
min-width: 48px;
|
||||
place-items: center;
|
||||
border: 1px solid var(--class-line);
|
||||
border-left: 0;
|
||||
border-radius: 0;
|
||||
color: var(--class-muted);
|
||||
background: var(--class-soft);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.class-password-toggle i::before {
|
||||
content: "\25C9";
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.class-field__error {
|
||||
display: block;
|
||||
margin-top: 7px;
|
||||
color: var(--class-danger);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.class-form-settings.class-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin: -1px 0 25px;
|
||||
color: var(--class-muted);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.class-form-settings.class-field #kc-form-options,
|
||||
.class-form-settings.class-field > div {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.class-form-settings input[type="checkbox"] {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin: 0 7px 0 0;
|
||||
accent-color: var(--class-blue);
|
||||
vertical-align: -2px;
|
||||
}
|
||||
|
||||
.class-button {
|
||||
min-height: 48px;
|
||||
border: 1px solid var(--class-ink);
|
||||
border-radius: 0;
|
||||
color: var(--class-ink);
|
||||
background: var(--class-soft);
|
||||
box-shadow: none;
|
||||
font-size: 0.84rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.035em;
|
||||
transition:
|
||||
color 150ms ease,
|
||||
background 150ms ease,
|
||||
transform 150ms ease;
|
||||
}
|
||||
|
||||
.class-button--primary {
|
||||
color: var(--class-ink);
|
||||
background: var(--class-sun);
|
||||
}
|
||||
|
||||
.class-button--block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.class-button:hover:not(:disabled) {
|
||||
color: #ffffff;
|
||||
background: var(--class-blue-deep);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.class-button:disabled {
|
||||
cursor: wait;
|
||||
opacity: 0.62;
|
||||
}
|
||||
|
||||
.class-button:focus-visible,
|
||||
.class-card a:focus-visible,
|
||||
.class-card button:focus-visible,
|
||||
.class-card input:focus-visible {
|
||||
outline: 3px solid rgba(240, 90, 71, 0.42);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.class-alert {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin: 0 0 24px;
|
||||
padding: 12px 13px;
|
||||
border: 1px solid var(--class-line);
|
||||
border-left: 6px solid var(--class-blue);
|
||||
border-radius: 0;
|
||||
color: var(--class-ink);
|
||||
background: var(--class-soft);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.class-alert.pf-m-danger {
|
||||
border-left-color: var(--class-danger);
|
||||
background: #fff1ef;
|
||||
}
|
||||
|
||||
.class-alert.pf-m-success {
|
||||
border-left-color: var(--class-green);
|
||||
background: #eefaf5;
|
||||
}
|
||||
|
||||
.class-feedback {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-top: 6px;
|
||||
background: var(--class-blue);
|
||||
}
|
||||
|
||||
.class-feedback--error,
|
||||
.class-feedback--warning {
|
||||
background: var(--class-danger);
|
||||
}
|
||||
|
||||
.class-feedback--success {
|
||||
background: var(--class-green);
|
||||
}
|
||||
|
||||
.class-social {
|
||||
margin-top: 29px;
|
||||
}
|
||||
|
||||
.class-social hr {
|
||||
height: 1px;
|
||||
margin: 0 0 23px;
|
||||
border: 0;
|
||||
background: var(--class-line);
|
||||
}
|
||||
|
||||
.class-social h2 {
|
||||
margin: 0 0 12px;
|
||||
color: var(--class-muted);
|
||||
font: 700 0.64rem/1.5 var(--class-utility);
|
||||
letter-spacing: 0.07em;
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.class-social__list,
|
||||
.class-social__list.pf-l-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.class-social__list li,
|
||||
.class-social__list .pf-l-grid__item {
|
||||
width: auto;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.class-social__button {
|
||||
display: flex;
|
||||
min-height: 42px;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 9px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid var(--class-line);
|
||||
border-radius: 0;
|
||||
color: var(--class-ink);
|
||||
background: #ffffff;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.class-social__button:hover {
|
||||
border-color: var(--class-blue);
|
||||
background: var(--class-soft);
|
||||
}
|
||||
|
||||
.class-signup {
|
||||
margin: 27px 0 0;
|
||||
color: var(--class-muted);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.class-signup__inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.class-locale {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: 18px;
|
||||
}
|
||||
|
||||
.class-locale #kc-current-locale-link {
|
||||
padding: 7px 10px;
|
||||
border: 1px solid var(--class-line);
|
||||
border-radius: 0;
|
||||
color: var(--class-muted);
|
||||
background: rgba(247, 251, 255, 0.94);
|
||||
font: 700 0.66rem/1.4 var(--class-utility);
|
||||
}
|
||||
|
||||
.class-locale__list {
|
||||
right: 0;
|
||||
left: auto;
|
||||
min-width: 150px;
|
||||
border: 1px solid var(--class-ink);
|
||||
color: var(--class-ink);
|
||||
background: #ffffff;
|
||||
box-shadow: 8px 8px 0 var(--class-soft);
|
||||
}
|
||||
|
||||
.class-locale__list:not([hidden]) {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: calc(100% + 6px);
|
||||
display: none;
|
||||
margin: 0;
|
||||
padding: 6px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.class-locale__dropdown:hover .class-locale__list,
|
||||
.class-locale__dropdown:focus-within .class-locale__list {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.class-locale__item {
|
||||
display: block;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
#kc-username {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 11px 13px;
|
||||
border: 1px solid var(--class-line);
|
||||
background: var(--class-soft);
|
||||
}
|
||||
|
||||
.class-card .select-auth-container,
|
||||
.class-card .pf-c-tile,
|
||||
.class-card .kc-recovery-codes-list {
|
||||
color: var(--class-ink);
|
||||
}
|
||||
|
||||
.class-card .select-auth-box-parent,
|
||||
.class-card .pf-c-tile {
|
||||
border-color: var(--class-line);
|
||||
border-radius: 0;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
@media (max-width: 1020px) {
|
||||
.class-record {
|
||||
inset: 0 54% 0 0;
|
||||
}
|
||||
|
||||
.class-login {
|
||||
width: 54%;
|
||||
margin-left: 46%;
|
||||
padding: 56px 38px;
|
||||
}
|
||||
|
||||
.class-record__ledger span {
|
||||
font-size: 0.52rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
.class-record {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.class-atmosphere {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.class-mobile-brand {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
width: max-content;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: var(--class-ink);
|
||||
font: 800 0.72rem/1.3 var(--class-utility);
|
||||
letter-spacing: 0.04em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.class-mobile-brand > span {
|
||||
display: grid;
|
||||
width: 40px;
|
||||
height: 32px;
|
||||
place-items: center;
|
||||
color: #ffffff;
|
||||
background: var(--class-coral);
|
||||
}
|
||||
|
||||
.class-mobile-brand b {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.class-login {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
padding: 88px 24px 44px;
|
||||
}
|
||||
|
||||
.class-header,
|
||||
.class-card {
|
||||
width: min(100%, 540px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.class-login {
|
||||
justify-content: flex-start;
|
||||
padding: 82px 16px 30px;
|
||||
}
|
||||
|
||||
.class-card {
|
||||
padding: 31px 22px 28px;
|
||||
box-shadow: 9px 9px 0 var(--class-soft);
|
||||
}
|
||||
|
||||
.class-card__header #kc-page-title {
|
||||
font-size: 2.35rem;
|
||||
}
|
||||
|
||||
.class-social__list,
|
||||
.class-social__list.pf-l-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.class-form-settings.class-field {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 9px;
|
||||
}
|
||||
|
||||
.class-registration-mark {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.class-body *,
|
||||
.class-body *::before,
|
||||
.class-body *::after {
|
||||
scroll-behavior: auto !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
+27
-3
@@ -11,21 +11,45 @@ const { useI18n, ofTypeI18n } = i18nBuilder
|
||||
nexusSecureAccess: "Secure access.",
|
||||
nexusPreciselyOrchestrated: "Precisely orchestrated.",
|
||||
nexusSecureChannel: "SECURE CHANNEL",
|
||||
nexusSystemOnline: "SYSTEM ONLINE"
|
||||
nexusSystemOnline: "SYSTEM ONLINE",
|
||||
classArchiveName: "GAOPING NO.1 · CLASS 612",
|
||||
classSchoolCohort: "CLASS OF 2024 · GAOPING NO.1",
|
||||
classIdentityArchive: "CLASS MEMORY · IDENTITY ARCHIVE",
|
||||
classMemoriesRemain: "The memories remain.",
|
||||
classWelcomeBack: "Welcome back.",
|
||||
classDaysTogether: "DAYS TOGETHER",
|
||||
classArchiveNumber: "ARCHIVE NUMBER",
|
||||
classMomentsRemembered: "MOMENTS REMEMBERED"
|
||||
},
|
||||
"zh-CN": {
|
||||
nexusIdentityAccessLayer: "身份访问层",
|
||||
nexusSecureAccess: "安全访问。",
|
||||
nexusPreciselyOrchestrated: "精准编排。",
|
||||
nexusSecureChannel: "安全通道",
|
||||
nexusSystemOnline: "系统在线"
|
||||
nexusSystemOnline: "系统在线",
|
||||
classArchiveName: "高平一中 · 612班",
|
||||
classSchoolCohort: "2024届 · 高平一中",
|
||||
classIdentityArchive: "班级记忆 · 身份档案",
|
||||
classMemoriesRemain: "记忆仍在，",
|
||||
classWelcomeBack: "欢迎回来。",
|
||||
classDaysTogether: "一起经过的日子",
|
||||
classArchiveNumber: "班级档案编号",
|
||||
classMomentsRemembered: "还会被想起的瞬间"
|
||||
},
|
||||
"zh-TW": {
|
||||
nexusIdentityAccessLayer: "身分存取層",
|
||||
nexusSecureAccess: "安全存取。",
|
||||
nexusPreciselyOrchestrated: "精準編排。",
|
||||
nexusSecureChannel: "安全通道",
|
||||
nexusSystemOnline: "系統在線"
|
||||
nexusSystemOnline: "系統在線",
|
||||
classArchiveName: "高平一中 · 612班",
|
||||
classSchoolCohort: "2024屆 · 高平一中",
|
||||
classIdentityArchive: "班級記憶 · 身分檔案",
|
||||
classMemoriesRemain: "記憶仍在，",
|
||||
classWelcomeBack: "歡迎回來。",
|
||||
classDaysTogether: "一起經過的日子",
|
||||
classArchiveNumber: "班級檔案編號",
|
||||
classMomentsRemembered: "還會被想起的瞬間"
|
||||
}
|
||||
})
|
||||
.build();
|
||||
|
||||
@@ -36,6 +36,17 @@ export const TraditionalChinese: Story = {
|
||||
)
|
||||
};
|
||||
|
||||
export const ClassTheme: Story = {
|
||||
render: () => (
|
||||
<KcPageStory
|
||||
kcContext={{
|
||||
themeName: "class",
|
||||
locale: { currentLanguageTag: "zh-CN" }
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
export const WithInvalidCredential: Story = {
|
||||
render: () => (
|
||||
<KcPageStory
|
||||
|
||||
@@ -7,6 +7,7 @@ export default defineConfig({
|
||||
plugins: [
|
||||
react(),
|
||||
keycloakify({
|
||||
themeName: ["keycloakify-starter", "class"],
|
||||
accountThemeImplementation: "Single-Page"
|
||||
})
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user