103 lines
10 KiB
CSS
103 lines
10 KiB
CSS
/* Top-navigation workspace and streamlined account screens. */
|
|
.admin-shell--top-nav > .admin-card { width: 100%; max-width: none; padding: 24px 0; }
|
|
.settings-top-navigation { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 0 0 20px; border-bottom: 1px solid var(--ops-line-soft); }
|
|
.settings-top-navigation a { color: var(--ops-muted); font-size: 13px; text-decoration: none; }
|
|
.settings-top-navigation label { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; }
|
|
.settings-top-navigation label span { color: var(--ops-faint); font: 12px Inter, sans-serif; text-transform: none; }
|
|
.settings-top-navigation select { width: 260px; min-height: 42px; font: 13px Inter, sans-serif; padding: 10px 12px; border-radius: 8px; }
|
|
.admin-supplemental { margin-top: 28px; border-top: 1px solid var(--ops-line-soft); padding-top: 20px; }
|
|
.admin-supplemental > summary { cursor: pointer; color: var(--ops-muted); font-size: 13px; margin-bottom: 18px; }
|
|
.admin-supplemental .admin-rail-stack { display: block; max-width: 960px; }
|
|
.account-eyebrow { font: 10px "JetBrains Mono", monospace; color: var(--ops-faint); }
|
|
.account-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
|
|
.account-identity > div { display: grid; gap: 4px; min-width: 0; }
|
|
.account-identity strong { font-size: 14px; overflow-wrap: anywhere; }
|
|
.account-identity > div > span { font-size: 12px; color: var(--ops-faint); }
|
|
.account-avatar { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border: 1px solid #45434f; border-radius: 14px; background: #25242c; color: #dedaff; font: 600 20px "DM Sans", sans-serif; }
|
|
.account-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--ops-line-soft); margin-bottom: 24px; }
|
|
.account-tabs button { min-height: 46px; padding: 0 2px; border: 0; border-radius: 0 !important; border-bottom: 2px solid transparent; border-color: transparent !important; background: transparent !important; color: var(--ops-muted); font: 500 14px "DM Sans", sans-serif; box-shadow: none; text-transform: none; }
|
|
.account-tabs button[aria-selected=true] { color: #dedaff; border-bottom-color: #bcb3ff !important; }
|
|
.account-page [hidden] { display: none !important; }
|
|
.account-panel { border: 1px solid var(--ops-line); border-radius: 14px; background: var(--ops-panel); padding: 32px; animation: account-appear .18s ease-out; }
|
|
.account-section-intro { margin-bottom: 26px; }
|
|
.account-section-intro h2 { margin: 0 0 8px; font-size: 21px; }
|
|
.account-section-intro p { margin: 0; font-size: 13px; color: var(--ops-muted); line-height: 1.6; }
|
|
.account-form { display: grid; gap: 10px; max-width: 500px; }
|
|
.account-form fieldset { display: grid; gap: 10px; min-width: 0; padding: 0; margin: 0; border: 0; }
|
|
.account-form label { display: block; padding: 0; margin: 0; border: 0; background: none; color: var(--ops-text); font: 500 13px "DM Sans", sans-serif; text-transform: none; }
|
|
.account-form input { display: block; width: 100%; min-width: 0; min-height: 46px; padding: 11px 13px; margin: 0; border: 1px solid var(--ops-line); border-radius: 8px; font: 14px Inter, sans-serif; }
|
|
.account-form fieldset label:not(:first-child) { margin-top: 10px; }
|
|
.account-form .account-hint { margin: 0; color: var(--ops-faint); font-size: 12px; line-height: 1.6; }
|
|
.account-form-actions { display: flex; gap: 10px; margin-top: 14px; }
|
|
button.account-primary { min-height: 44px; padding: 11px 20px; border: 1px solid #c7bdff !important; border-radius: 8px; background: #c7bdff !important; color: #1c172c !important; font: 700 13px "DM Sans", sans-serif; text-transform: none; transition: background .15s, opacity .15s; }
|
|
button.account-primary:hover:not(:disabled) { background: #d8d1ff !important; }
|
|
button.account-primary:disabled { opacity: .4; cursor: not-allowed; }
|
|
button.account-secondary { min-height: 44px; padding: 11px 16px; border: 1px solid var(--ops-line); background: transparent !important; color: var(--ops-muted); font: 500 13px "DM Sans", sans-serif; text-transform: none; }
|
|
.account-notice { margin: 8px 0 0; padding: 12px 14px; border: 1px solid var(--ops-line); border-radius: 8px; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
|
|
.account-notice.is-error { color: #ffb6b6; border-color: #763d44; background: #311e23; }
|
|
.account-notice.is-status { color: #aae0cb; border-color: #365c50; background: #1b2924; }
|
|
.account-login-message { color: #ded8ed; border-color: #514a60; background: #26222d; white-space: pre-line; }
|
|
.account-connected { display: flex; align-items: center; gap: 9px; border-top: 1px solid var(--ops-line-soft); margin-top: 32px; padding-top: 20px; color: var(--ops-faint); font-size: 12px; }
|
|
.account-connection-dot { width: 6px; height: 6px; background: #83bda7; border-radius: 50%; flex-shrink: 0; }
|
|
.account-request-summary { display: flex; gap: 40px; align-items: center; padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--ops-line-soft); }
|
|
.account-request-summary > div { display: grid; gap: 5px; }
|
|
.account-request-summary strong { font: 600 25px "DM Sans", sans-serif; }
|
|
.account-request-summary span { color: var(--ops-muted); font-size: 12px; }
|
|
.account-request-summary a { margin-left: auto; font-size: 13px; color: #d0c8ff; text-decoration: none; }
|
|
.account-list-heading { font-size: 14px; margin: 0 0 8px; }
|
|
.account-access-list { list-style: none; padding: 0; margin: 0; }
|
|
.account-access-list > li { padding: 18px 0; border-bottom: 1px solid var(--ops-line-soft); }
|
|
.account-access-list > li:last-child { border: 0; }
|
|
.account-access-summary { display: flex; justify-content: space-between; gap: 16px; }
|
|
.account-access-summary strong { font-size: 13px; font-weight: 500; }
|
|
.account-access-summary time { font-size: 12px; color: var(--ops-muted); text-align: right; }
|
|
.account-access-list details { margin-top: 8px; font-size: 12px; color: var(--ops-faint); }
|
|
.account-access-list summary { cursor: pointer; }
|
|
.account-access-list dl { display: grid; gap: 8px; margin-bottom: 0; }
|
|
.account-access-list dl > div { display: flex; gap: 12px; flex-wrap: wrap; }
|
|
.account-access-list dd { margin: 0; color: var(--ops-muted); overflow-wrap: anywhere; }
|
|
.account-empty { color: var(--ops-muted); font-size: 14px; line-height: 1.6; padding: 16px 0; }
|
|
.account-empty button { margin-top: 8px; }
|
|
.page:has(> .login-page) { padding: 0; background: #121214; }
|
|
.page > main.login-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100dvh; width: 100%; max-width: none; margin: 0; padding: 40px 20px; background: radial-gradient(ellipse at 50% 15%, #24202e 0, transparent 60%); }
|
|
.login-card { width: 100%; max-width: 430px; border: 1px solid #3a3841; border-radius: 20px; padding: 32px; background: #1c1b1f; box-shadow: 0 22px 90px #0003; }
|
|
.login-brand { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 36px; }
|
|
.login-brand > a { display: flex; align-items: center; gap: 10px; color: #eeeaf5; text-decoration: none; font: 600 23px "DM Sans", sans-serif; }
|
|
.magent-mark { width: 38px; height: 38px; }
|
|
.login-beta { padding: 4px 8px; border: 1px solid #44404d; border-radius: 6px; font: 10px "JetBrains Mono", monospace; color: #bdb5cf; text-transform: uppercase; }
|
|
.login-card header { margin-bottom: 24px; }
|
|
.login-card h1 { margin: 0 0 8px; font-size: 30px; line-height: 1.2; color: #f1edf6; }
|
|
.login-card header p { margin: 0; color: #aba5b7; font-size: 13px; }
|
|
.login-methods { display: flex; gap: 4px; padding: 4px; margin: 0 0 16px; background: #151417; border: 1px solid #3b3842; border-radius: 9px; }
|
|
.login-methods button { flex: 1; min-height: 36px; padding: 8px; border: 0; border-radius: 6px !important; background: transparent !important; color: #b3adbf; font: 500 13px "DM Sans", sans-serif; text-transform: none; }
|
|
.login-methods button[aria-pressed=true] { background: #36313f !important; color: #eee7ff; }
|
|
.login-method-help { font-size: 12px; line-height: 1.5; margin: 0 0 10px; color: #aba5b7; }
|
|
.login-form input { background: #151417 !important; border-color: #46414e !important; }
|
|
.login-password-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
|
|
.login-password-label a { color: #c4b9e5; font-size: 12px; text-decoration: none; }
|
|
.login-password-field { position: relative; }
|
|
.login-password-field input { padding-right: 48px; }
|
|
.login-password-field .password-visibility { position: absolute; top: 1px; right: 1px; width: 44px; height: calc(100% - 2px); min-height: 42px; padding: 12px; border: 0; background: transparent !important; color: #aba5b7; box-shadow: none; }
|
|
.password-visibility svg { width: 19px; height: 19px; display: block; }
|
|
.login-form .login-submit { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; min-height: 46px; }
|
|
.login-card footer { border-top: 1px solid #36323c; margin-top: 28px; padding-top: 22px; text-align: center; color: #aaa3b5; font-size: 12px; }
|
|
.login-card footer a { margin-left: 4px; color: #d4c7ff; text-decoration: none; font-weight: 500; }
|
|
.login-credit { color: #87818f; font-size: 11px; margin: 24px 0 0; }
|
|
.account-page :focus-visible, .login-page :focus-visible, .settings-top-navigation :focus-visible { outline: 2px solid #c7bdff; outline-offset: 3px; }
|
|
@keyframes account-appear { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
|
|
@media (prefers-reduced-motion: reduce) { .account-panel { animation: none; } }
|
|
@media (max-width: 680px) {
|
|
.account-identity strong { max-width: 130px; }
|
|
.account-avatar { display: none; }
|
|
.account-panel { padding: 22px 20px; }
|
|
.account-request-summary { gap: 24px; flex-wrap: wrap; }
|
|
.account-request-summary a { width: 100%; margin: 0; }
|
|
.account-access-summary { flex-direction: column; gap: 6px; }
|
|
.account-access-summary time { text-align: left; }
|
|
.settings-top-navigation { gap: 14px; flex-wrap: wrap; }
|
|
.settings-top-navigation label { flex: 1; min-width: 220px; }
|
|
.settings-top-navigation select { flex: 1; width: 100%; }
|
|
.login-card { padding: 26px 24px; }
|
|
.page > main.login-page { padding: 24px 16px; }
|
|
}
|