106 lines
3.4 KiB
CSS
Executable File
106 lines
3.4 KiB
CSS
Executable File
/* Catppuccin Mocha / Latte. Local assets only; Dex forms/templates unchanged. */
|
|
:root {
|
|
color-scheme: dark;
|
|
--base: #1e1e2e;
|
|
--mantle: #181825;
|
|
--surface: #313244;
|
|
--border: #585b70;
|
|
--text: #cdd6f4;
|
|
--muted: #a6adc8;
|
|
--accent: #cba6f7;
|
|
--accent-hover: #b4befe;
|
|
--error: #f38ba8;
|
|
--focus: #fab387;
|
|
}
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
color-scheme: light;
|
|
--base: #eff1f5;
|
|
--mantle: #e6e9ef;
|
|
--surface: #fff;
|
|
--border: #9ca0b0;
|
|
--text: #4c4f69;
|
|
--muted: #5c5f77;
|
|
--accent: #8839ef;
|
|
--accent-hover: #7287fd;
|
|
--error: #d20f39;
|
|
--focus: #fe640b;
|
|
}
|
|
}
|
|
* { box-sizing: border-box; }
|
|
.theme-body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
background: var(--base);
|
|
color: var(--text);
|
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
line-height: 1.6;
|
|
}
|
|
.theme-navbar {
|
|
background: var(--mantle);
|
|
border-bottom: 1px solid var(--border);
|
|
padding: 1.4rem;
|
|
text-align: center;
|
|
}
|
|
.theme-navbar__logo-wrap { display: inline-block; max-width: 100%; }
|
|
.theme-navbar__logo { display: block; width: 240px; height: 72px; max-width: 100%; }
|
|
.dex-container {
|
|
color: var(--text);
|
|
width: min(500px, calc(100% - 2rem));
|
|
min-width: 0;
|
|
margin: clamp(2rem, 8vh, 5rem) auto;
|
|
}
|
|
.theme-panel {
|
|
padding: clamp(1.4rem, 5vw, 2.6rem);
|
|
background: var(--mantle);
|
|
border: 1px solid var(--border);
|
|
border-radius: 1.25rem;
|
|
box-shadow: 0 12px 40px rgb(0 0 0 / 10%);
|
|
}
|
|
.theme-heading { font-size: 1.6rem; font-weight: 750; line-height: 1.25; margin: 0 0 1.2rem; }
|
|
.theme-form-row { display: block; margin: 1.1rem auto; }
|
|
.theme-form-label { display: block; text-align: left; width: 100%; max-width: 320px; margin: 0 auto .4rem; font-size: .95rem; font-weight: 600; }
|
|
.theme-form-input {
|
|
display: block;
|
|
width: 100%;
|
|
max-width: 320px;
|
|
min-height: 48px;
|
|
margin: auto;
|
|
padding: .75rem 1rem;
|
|
background: var(--base);
|
|
color: var(--text);
|
|
border: 1px solid var(--border);
|
|
border-radius: .65rem;
|
|
font: inherit;
|
|
}
|
|
.theme-form-input::placeholder { color: var(--muted); }
|
|
.dex-btn { border-radius: .65rem; box-shadow: none; font: inherit; max-width: 100%; }
|
|
.theme-btn--primary, .theme-btn--success, .theme-btn-provider {
|
|
background: var(--accent);
|
|
color: var(--mantle);
|
|
border: 1px solid transparent;
|
|
min-height: 48px;
|
|
min-width: 0;
|
|
width: 100%;
|
|
max-width: 320px;
|
|
padding: .5rem 1rem;
|
|
font-weight: 700;
|
|
}
|
|
.theme-btn-provider { background: var(--surface); color: var(--text); border-color: var(--border); }
|
|
.theme-btn--primary:hover, .theme-btn--success:hover { background: var(--accent-hover); }
|
|
.theme-btn-provider:hover { border-color: var(--accent); }
|
|
.dex-btn-icon { border-radius: .3rem; margin: 0 .5rem 0 0; }
|
|
.dex-btn-text { line-height: 2rem; padding: .2rem; }
|
|
a { color: var(--accent); text-underline-offset: .2em; }
|
|
a:hover { color: var(--accent-hover); }
|
|
.theme-link-back { margin-top: 1rem; }
|
|
.dex-subtle-text, .dex-separator, .dex-list { color: var(--muted); }
|
|
.dex-error-box { background: var(--surface); color: var(--error); border: 1px solid var(--error); border-radius: .6rem; padding: .7rem; max-width: 100%; }
|
|
.theme-form-input:focus-visible, .dex-btn:focus-visible, a:focus-visible {
|
|
outline: 3px solid var(--focus);
|
|
outline-offset: 3px;
|
|
}
|
|
@media (prefers-color-scheme: light) {
|
|
.theme-btn--primary, .theme-btn--success { color: #fff; }
|
|
}
|