mirror of
https://github.com/kiddin9/op-packages.git
synced 2026-07-27 10:31:38 +08:00
🍓 Sync 2026-05-17 08:40:00
This commit is contained in:
github-actions[bot]
parent
5d454a6531
commit
5334a5a02c
226
luci-theme-aurora/.dev/src/media/_tokens.css
Normal file
226
luci-theme-aurora/.dev/src/media/_tokens.css
Normal file
@ -0,0 +1,226 @@
|
||||
/**
|
||||
* luci-theme-aurora: design tokens
|
||||
* Copyright 2025 eamonxg <eamonxiong@gmail.com>
|
||||
* Licensed to the public under the Apache License 2.0.
|
||||
*
|
||||
* Shared between main.css and login.css.
|
||||
* aurora-config writes UCI overrides that target the same --* variable
|
||||
* names, so customizations apply automatically to both stylesheets.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--background: oklch(0.968 0.007 247.896);
|
||||
--foreground: oklch(0.208 0.042 265.755);
|
||||
|
||||
--primary: oklch(0.68 0.11 233);
|
||||
--primary-foreground: oklch(1 0 0);
|
||||
|
||||
--secondary: oklch(0.929 0.013 255.508);
|
||||
--secondary-foreground: oklch(0.372 0.044 257.287);
|
||||
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.446 0.043 257.281);
|
||||
|
||||
--destructive: oklch(0.94 0.05 25);
|
||||
--destructive-foreground: oklch(0.35 0.12 25);
|
||||
|
||||
--accent: oklch(0.62 0.22 25);
|
||||
--accent-foreground: oklch(0.97 0.02 25);
|
||||
|
||||
--default: oklch(0.97 0 0);
|
||||
--default-foreground: oklch(0.205 0 0);
|
||||
|
||||
--info: oklch(0.94 0.05 230);
|
||||
--info-foreground: oklch(0.35 0.08 240);
|
||||
|
||||
--warning: oklch(0.95 0.05 90);
|
||||
--warning-foreground: oklch(0.35 0.08 60);
|
||||
|
||||
--success: oklch(0.94 0.05 160);
|
||||
--success-foreground: oklch(0.32 0.09 165);
|
||||
|
||||
--error: oklch(0.94 0.05 25);
|
||||
--error-foreground: oklch(0.35 0.12 25);
|
||||
|
||||
--border: oklch(0.92 0 0);
|
||||
|
||||
--link: oklch(0.74 0.238 322.16);
|
||||
|
||||
--input-checked: oklch(1 0 0);
|
||||
|
||||
--label-surface: oklch(from var(--panel-bg) calc(l - 0.02) c h);
|
||||
|
||||
--login-aurora-1: oklch(0.70 0.26 148);
|
||||
--login-aurora-2: oklch(0.65 0.22 190);
|
||||
--login-aurora-3: oklch(0.58 0.24 268);
|
||||
--login-aurora-4: oklch(0.62 0.26 312);
|
||||
|
||||
--terminal-bg: oklch(0.24 0.02 260);
|
||||
--terminal-foreground: oklch(1 0 0);
|
||||
|
||||
--overlay-base: oklch(0 0 0);
|
||||
|
||||
--progress-bar-start: oklch(0.68 0.11 233);
|
||||
--progress-bar-end: oklch(0.7535 0.1034 198.37);
|
||||
|
||||
--header-bg: oklch(from var(--background) l c h);
|
||||
--header-interactive: oklch(from var(--header-bg) calc(l - 0.12) c h);
|
||||
|
||||
--page-bg: oklch(1 0 0);
|
||||
|
||||
--panel-bg: oklch(1 0 0);
|
||||
|
||||
--tooltip-bg: oklch(from var(--page-bg) calc(l - 0.015) c h);
|
||||
|
||||
--font-sans: "Lato", ui-sans-serif, system-ui, sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
|
||||
|
||||
--spacing: 0.25rem;
|
||||
--container-max-width: 80rem;
|
||||
--radius-base: 0.5rem;
|
||||
}
|
||||
|
||||
[data-darkmode="true"] {
|
||||
--background: oklch(0.32 0.059 188.42);
|
||||
--foreground: oklch(0.968 0.007 247.896);
|
||||
|
||||
--primary: oklch(0.6 0.13 188.745);
|
||||
--primary-foreground: oklch(1 0 0);
|
||||
|
||||
--secondary: oklch(0.372 0.044 257.287);
|
||||
--secondary-foreground: oklch(0.928 0.006 264.531);
|
||||
|
||||
--muted: oklch(0.373 0.026 259.733);
|
||||
--muted-foreground: oklch(0.704 0.04 256.788);
|
||||
|
||||
--destructive: oklch(0.258 0.092 26.042);
|
||||
--destructive-foreground: oklch(0.88 0.14 26.042);
|
||||
|
||||
--accent: oklch(0.35 0.12 25);
|
||||
--accent-foreground: oklch(0.88 0.14 25);
|
||||
|
||||
--default: oklch(0.274 0.006 286.033/0.5);
|
||||
--default-foreground: oklch(0.985 0.01 285.805);
|
||||
|
||||
--info: oklch(0.391 0.09 240.876/0.5);
|
||||
--info-foreground: oklch(0.88 0.06 230);
|
||||
|
||||
--warning: oklch(0.414 0.112 45.904/0.5);
|
||||
--warning-foreground: oklch(0.924 0.12 95.746);
|
||||
|
||||
--success: oklch(0.378 0.077 168.94/0.5);
|
||||
--success-foreground: oklch(0.92 0.09 160);
|
||||
|
||||
--error: oklch(0.41 0.159 10.272/0.5);
|
||||
--error-foreground: oklch(0.88 0.14 25);
|
||||
|
||||
--border: oklch(0.38 0.041 260.031);
|
||||
|
||||
--link: oklch(0.702 0.183 293.541);
|
||||
|
||||
--input-checked: oklch(1 0 0);
|
||||
|
||||
--label-surface: oklch(from var(--panel-bg) calc(l + 0.04) c h);
|
||||
|
||||
--login-aurora-1: oklch(0.76 0.28 148);
|
||||
--login-aurora-2: oklch(0.70 0.23 192);
|
||||
--login-aurora-3: oklch(0.63 0.25 268);
|
||||
--login-aurora-4: oklch(0.67 0.27 312);
|
||||
|
||||
--terminal-bg: oklch(0.18 0.03 260);
|
||||
--terminal-foreground: oklch(1 0 0);
|
||||
|
||||
--overlay-base: oklch(0 0 0);
|
||||
|
||||
--progress-bar-start: oklch(0.4318 0.0865 166.91);
|
||||
--progress-bar-end: oklch(62.1% 0.145 189.632);
|
||||
|
||||
--header-bg: oklch(from var(--page-bg) l c h);
|
||||
--header-interactive: oklch(from var(--header-bg) calc(l + 0.24) c h);
|
||||
|
||||
--page-bg: oklch(0.21 0.034 264.665);
|
||||
|
||||
--panel-bg: oklch(0.279 0.041 260.031);
|
||||
|
||||
--tooltip-bg: oklch(from var(--page-bg) calc(l + 0.06) c h);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
/* Base Colors */
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
|
||||
--color-page-bg: var(--page-bg);
|
||||
|
||||
--color-panel-bg: var(--panel-bg);
|
||||
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
|
||||
--color-border: var(--border);
|
||||
|
||||
/* Component Colors */
|
||||
|
||||
--color-header-bg: var(--header-bg);
|
||||
--color-header-interactive: var(--header-interactive);
|
||||
|
||||
--color-progress-bar-start: var(--progress-bar-start);
|
||||
--color-progress-bar-end: var(--progress-bar-end);
|
||||
|
||||
--color-terminal-bg: var(--terminal-bg);
|
||||
--color-terminal-foreground: var(--terminal-foreground);
|
||||
|
||||
--color-tooltip-bg: var(--tooltip-bg);
|
||||
|
||||
--color-overlay-base: var(--overlay-base);
|
||||
|
||||
--color-link: var(--link);
|
||||
|
||||
--color-input-checked: var(--input-checked);
|
||||
|
||||
--color-label-surface: var(--label-surface);
|
||||
|
||||
/* Semantic & Status Colors */
|
||||
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
|
||||
--color-default: var(--default);
|
||||
--color-default-foreground: var(--default-foreground);
|
||||
|
||||
--color-info: var(--info);
|
||||
--color-info-foreground: var(--info-foreground);
|
||||
|
||||
--color-warning: var(--warning);
|
||||
--color-warning-foreground: var(--warning-foreground);
|
||||
|
||||
--color-success: var(--success);
|
||||
--color-success-foreground: var(--success-foreground);
|
||||
|
||||
--color-error: var(--error);
|
||||
--color-error-foreground: var(--error-foreground);
|
||||
|
||||
--font-sans: var(--font-sans);
|
||||
--font-mono: var(--font-mono);
|
||||
|
||||
--spacing: var(--spacing);
|
||||
--container-max-width: var(--container-max-width);
|
||||
|
||||
--radius-sm: calc(var(--radius-base) * 0.25);
|
||||
--radius: calc(var(--radius-base) * 0.5);
|
||||
--radius-md: calc(var(--radius-base) * 0.75);
|
||||
--radius-lg: var(--radius-base);
|
||||
--radius-xl: calc(var(--radius-base) * 1.5);
|
||||
--radius-2xl: calc(var(--radius-base) * 2);
|
||||
--radius-3xl: calc(var(--radius-base) * 3);
|
||||
--radius-4xl: calc(var(--radius-base) * 4);
|
||||
}
|
||||
193
luci-theme-aurora/.dev/src/media/login.css
Normal file
193
luci-theme-aurora/.dev/src/media/login.css
Normal file
@ -0,0 +1,193 @@
|
||||
/**
|
||||
* luci-theme-aurora: login page stylesheet
|
||||
* Copyright 2025 eamonxg <eamonxiong@gmail.com>
|
||||
* Licensed to the public under the Apache License 2.0.
|
||||
*
|
||||
* Separate Tailwind entry — only generates utilities used by the login
|
||||
* page, resulting in ~8 KB vs the 200 KB of main.css.
|
||||
*
|
||||
* aurora-config compatibility: all styles reference the same CSS custom
|
||||
* properties (--primary, --panel-bg, etc.) defined in _tokens.css and
|
||||
* overridden at runtime by the UCI token <style> block in header.ut.
|
||||
*/
|
||||
|
||||
@import "tailwindcss";
|
||||
@import "./_tokens.css";
|
||||
|
||||
@custom-variant dark (&:where([data-darkmode=true], [data-darkmode=true] *));
|
||||
|
||||
@keyframes aurora {
|
||||
from {
|
||||
background-position:
|
||||
50% 50%,
|
||||
50% 50%;
|
||||
}
|
||||
to {
|
||||
background-position:
|
||||
350% 50%,
|
||||
350% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
@apply bg-background h-full font-sans;
|
||||
}
|
||||
|
||||
body {
|
||||
/* Intentionally no transition-all: causes full-page repaint on any property change */
|
||||
@apply text-foreground bg-background min-h-full;
|
||||
}
|
||||
}
|
||||
|
||||
@layer login {
|
||||
.login-screen {
|
||||
@apply relative flex min-h-dvh flex-col items-center justify-center px-5 pb-14;
|
||||
}
|
||||
|
||||
.login-shell {
|
||||
@apply relative z-10 flex w-full max-w-md flex-col items-stretch gap-5;
|
||||
}
|
||||
|
||||
/* No backdrop-blur or overflow:hidden — both force an expensive compositing layer */
|
||||
.login-card {
|
||||
@apply bg-panel-bg border-border relative flex flex-col gap-7 rounded-4xl border p-14 shadow-lg max-md:rounded-3xl max-md:p-9;
|
||||
}
|
||||
|
||||
/* Aurora animated background ─────────────────────────────────── */
|
||||
.login-aurora {
|
||||
/* contain:paint isolates repaint to this element — input events don't invalidate it */
|
||||
@apply pointer-events-none absolute inset-0 overflow-hidden [contain:paint];
|
||||
}
|
||||
|
||||
.login-aurora-inner {
|
||||
/* Custom-property gradients: acceptable raw CSS (not styling utilities) */
|
||||
--aurora-gradient: repeating-linear-gradient(
|
||||
100deg,
|
||||
var(--login-aurora-1) 10%,
|
||||
var(--login-aurora-2) 15%,
|
||||
var(--login-aurora-3) 20%,
|
||||
var(--login-aurora-4) 25%,
|
||||
var(--login-aurora-1) 30%
|
||||
);
|
||||
--light-stripe: repeating-linear-gradient(
|
||||
100deg,
|
||||
oklch(1 0 0) 0%,
|
||||
oklch(1 0 0) 7%,
|
||||
transparent 10%,
|
||||
transparent 12%,
|
||||
oklch(1 0 0) 16%
|
||||
);
|
||||
--dark-stripe: repeating-linear-gradient(
|
||||
100deg,
|
||||
oklch(0 0 0) 0%,
|
||||
oklch(0 0 0) 7%,
|
||||
transparent 10%,
|
||||
transparent 12%,
|
||||
oklch(0 0 0) 16%
|
||||
);
|
||||
|
||||
/* will-change:transform promotes to its own compositor layer — blur filter stays cached */
|
||||
@apply absolute -inset-[10px] opacity-50 blur-[10px] will-change-transform;
|
||||
@apply [background-image:var(--light-stripe),var(--aurora-gradient)];
|
||||
@apply dark:[background-image:var(--dark-stripe),var(--aurora-gradient)];
|
||||
@apply [background-size:300%,_200%] [background-position:50%_50%,50%_50%];
|
||||
@apply [mask-image:radial-gradient(ellipse_at_100%_0%,black_10%,transparent_70%)];
|
||||
|
||||
&::after {
|
||||
@apply absolute inset-0 content-[''] [animation:aurora_60s_linear_infinite];
|
||||
@apply [background-image:var(--light-stripe),var(--aurora-gradient)] [background-size:200%,_100%];
|
||||
@apply dark:[background-image:var(--dark-stripe),var(--aurora-gradient)] dark:mix-blend-difference;
|
||||
}
|
||||
}
|
||||
|
||||
.login-brand {
|
||||
@apply flex items-center gap-3.5;
|
||||
}
|
||||
|
||||
/* Lens-shaped divider: full-width at center, tapers to 0 at both ends */
|
||||
.login-divider {
|
||||
@apply bg-border h-0.5 border-0 [clip-path:ellipse(44%_50%_at_50%_50%)];
|
||||
}
|
||||
|
||||
.login-logo {
|
||||
@apply bg-primary/15 ring-primary/20 flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl ring-1;
|
||||
|
||||
& img {
|
||||
@apply h-6 w-6;
|
||||
}
|
||||
}
|
||||
|
||||
.login-title {
|
||||
@apply flex flex-col gap-1;
|
||||
}
|
||||
|
||||
.login-hostname {
|
||||
@apply text-foreground text-xl font-semibold tracking-tight;
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
@apply text-default-foreground text-sm;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
@apply flex flex-col gap-5;
|
||||
}
|
||||
|
||||
.login-fields {
|
||||
@apply flex flex-col gap-4;
|
||||
}
|
||||
|
||||
.login-field {
|
||||
@apply flex flex-col gap-2;
|
||||
}
|
||||
|
||||
.login-label {
|
||||
@apply text-default-foreground text-[0.6875rem] font-semibold tracking-widest uppercase;
|
||||
}
|
||||
|
||||
.input-wrap {
|
||||
@apply relative [contain:layout_style];
|
||||
}
|
||||
|
||||
/* Focus ring on ::after whose only changing property is opacity — runs entirely on the
|
||||
compositor thread, eliminating the ~400 ms INP Presentation delay on pointer events */
|
||||
.input-wrap::after {
|
||||
@apply border-primary pointer-events-none absolute -inset-0.5 rounded-[calc(var(--radius-2xl)+var(--spacing)*0.5)] border-2 opacity-0 [will-change:opacity] content-[''] [transition:opacity_120ms_ease];
|
||||
}
|
||||
|
||||
.input-wrap:focus-within::after {
|
||||
@apply opacity-100;
|
||||
}
|
||||
|
||||
/* No focus styles here — handled by .input-wrap::after */
|
||||
.login-input {
|
||||
@apply bg-panel-bg border-border text-foreground placeholder:text-muted-foreground/60 w-full appearance-none rounded-2xl border px-3 py-2.5 text-base outline-none;
|
||||
}
|
||||
|
||||
.login-error {
|
||||
@apply bg-error text-error-foreground border-error/40 rounded-2xl border px-3 py-2 text-center text-sm;
|
||||
}
|
||||
|
||||
.login-actions {
|
||||
@apply pt-4;
|
||||
}
|
||||
|
||||
/* opacity hover/active run on the compositor — no repaint */
|
||||
.login-submit {
|
||||
@apply bg-primary text-primary-foreground w-full cursor-pointer rounded-2xl border-0 py-2.5 text-base font-medium [will-change:opacity] [transition:opacity_120ms_ease] hover:opacity-90 active:opacity-80;
|
||||
}
|
||||
|
||||
/* Absolute at viewport bottom; outside .login-shell so it positions relative to .login-screen */
|
||||
.login-footer {
|
||||
@apply text-muted-foreground absolute right-0 bottom-5 left-0 px-5 text-center text-xs;
|
||||
|
||||
& p {
|
||||
@apply whitespace-normal;
|
||||
}
|
||||
|
||||
& a {
|
||||
@apply text-primary hover:underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -13,212 +13,7 @@
|
||||
|
||||
@import "tw-animate-css";
|
||||
|
||||
:root {
|
||||
--background: oklch(0.968 0.007 247.896);
|
||||
--foreground: oklch(0.208 0.042 265.755);
|
||||
|
||||
--primary: oklch(0.68 0.11 233);
|
||||
--primary-foreground: oklch(1 0 0);
|
||||
|
||||
--secondary: oklch(0.929 0.013 255.508);
|
||||
--secondary-foreground: oklch(0.372 0.044 257.287);
|
||||
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.446 0.043 257.281);
|
||||
|
||||
--destructive: oklch(0.94 0.05 25);
|
||||
--destructive-foreground: oklch(0.35 0.12 25);
|
||||
|
||||
--accent: oklch(0.62 0.22 25);
|
||||
--accent-foreground: oklch(0.97 0.02 25);
|
||||
|
||||
--default: oklch(0.97 0 0);
|
||||
--default-foreground: oklch(0.205 0 0);
|
||||
|
||||
--info: oklch(0.94 0.05 230);
|
||||
--info-foreground: oklch(0.35 0.08 240);
|
||||
|
||||
--warning: oklch(0.95 0.05 90);
|
||||
--warning-foreground: oklch(0.35 0.08 60);
|
||||
|
||||
--success: oklch(0.94 0.05 160);
|
||||
--success-foreground: oklch(0.32 0.09 165);
|
||||
|
||||
--error: oklch(0.94 0.05 25);
|
||||
--error-foreground: oklch(0.35 0.12 25);
|
||||
|
||||
--border: oklch(0.92 0 0);
|
||||
|
||||
--link: oklch(0.74 0.238 322.16);
|
||||
|
||||
--input-checked: oklch(1 0 0);
|
||||
|
||||
--label-surface: oklch(from var(--panel-bg) calc(l - 0.02) c h);
|
||||
|
||||
--terminal-bg: oklch(0.24 0.02 260);
|
||||
--terminal-foreground: oklch(1 0 0);
|
||||
|
||||
--overlay-base: oklch(0 0 0);
|
||||
|
||||
--progress-bar-start: oklch(0.68 0.11 233);
|
||||
--progress-bar-end: oklch(0.7535 0.1034 198.37);
|
||||
|
||||
--header-bg: oklch(from var(--background) l c h);
|
||||
--header-interactive: oklch(from var(--header-bg) calc(l - 0.12) c h);
|
||||
|
||||
--page-bg: oklch(1 0 0);
|
||||
|
||||
--panel-bg: oklch(1 0 0);
|
||||
|
||||
--tooltip-bg: oklch(from var(--page-bg) calc(l - 0.015) c h);
|
||||
|
||||
--font-sans: "Lato", ui-sans-serif, system-ui, sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
|
||||
|
||||
--spacing: 0.25rem;
|
||||
--container-max-width: 80rem;
|
||||
--radius-base: 0.5rem;
|
||||
}
|
||||
|
||||
[data-darkmode="true"] {
|
||||
--background: oklch(0.32 0.059 188.42);
|
||||
--foreground: oklch(0.968 0.007 247.896);
|
||||
|
||||
--primary: oklch(0.6 0.13 188.745);
|
||||
--primary-foreground: oklch(1 0 0);
|
||||
|
||||
--secondary: oklch(0.372 0.044 257.287);
|
||||
--secondary-foreground: oklch(0.928 0.006 264.531);
|
||||
|
||||
--muted: oklch(0.373 0.026 259.733);
|
||||
--muted-foreground: oklch(0.704 0.04 256.788);
|
||||
|
||||
--destructive: oklch(0.258 0.092 26.042);
|
||||
--destructive-foreground: oklch(0.88 0.14 26.042);
|
||||
|
||||
--accent: oklch(0.35 0.12 25);
|
||||
--accent-foreground: oklch(0.88 0.14 25);
|
||||
|
||||
--default: oklch(0.274 0.006 286.033/0.5);
|
||||
--default-foreground: oklch(0.985 0.01 285.805);
|
||||
|
||||
--info: oklch(0.391 0.09 240.876/0.5);
|
||||
--info-foreground: oklch(0.88 0.06 230);
|
||||
|
||||
--warning: oklch(0.414 0.112 45.904/0.5);
|
||||
--warning-foreground: oklch(0.924 0.12 95.746);
|
||||
|
||||
--success: oklch(0.378 0.077 168.94/0.5);
|
||||
--success-foreground: oklch(0.92 0.09 160);
|
||||
|
||||
--error: oklch(0.41 0.159 10.272/0.5);
|
||||
--error-foreground: oklch(0.88 0.14 25);
|
||||
|
||||
--border: oklch(0.38 0.041 260.031);
|
||||
|
||||
--link: oklch(0.702 0.183 293.541);
|
||||
|
||||
--input-checked: oklch(1 0 0);
|
||||
|
||||
--label-surface: oklch(from var(--panel-bg) calc(l + 0.04) c h);
|
||||
|
||||
--terminal-bg: oklch(0.18 0.03 260);
|
||||
--terminal-foreground: oklch(1 0 0);
|
||||
|
||||
--overlay-base: oklch(0 0 0);
|
||||
|
||||
--progress-bar-start: oklch(0.4318 0.0865 166.91);
|
||||
--progress-bar-end: oklch(62.1% 0.145 189.632);
|
||||
|
||||
--header-bg: oklch(from var(--page-bg) l c h);
|
||||
--header-interactive: oklch(from var(--header-bg) calc(l + 0.24) c h);
|
||||
|
||||
--page-bg: oklch(0.21 0.034 264.665);
|
||||
|
||||
--panel-bg: oklch(0.279 0.041 260.031);
|
||||
|
||||
--tooltip-bg: oklch(from var(--page-bg) calc(l + 0.06) c h);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
/* Base Colors */
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
|
||||
--color-page-bg: var(--page-bg);
|
||||
|
||||
--color-panel-bg: var(--panel-bg);
|
||||
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
|
||||
--color-border: var(--border);
|
||||
|
||||
/* Component Colors */
|
||||
|
||||
--color-header-bg: var(--header-bg);
|
||||
--color-header-interactive: var(--header-interactive);
|
||||
|
||||
--color-progress-bar-start: var(--progress-bar-start);
|
||||
--color-progress-bar-end: var(--progress-bar-end);
|
||||
|
||||
--color-terminal-bg: var(--terminal-bg);
|
||||
--color-terminal-foreground: var(--terminal-foreground);
|
||||
|
||||
--color-tooltip-bg: var(--tooltip-bg);
|
||||
|
||||
--color-overlay-base: var(--overlay-base);
|
||||
|
||||
--color-link: var(--link);
|
||||
|
||||
--color-input-checked: var(--input-checked);
|
||||
|
||||
--color-label-surface: var(--label-surface);
|
||||
|
||||
/* Semantic & Status Colors */
|
||||
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
|
||||
--color-default: var(--default);
|
||||
--color-default-foreground: var(--default-foreground);
|
||||
|
||||
--color-info: var(--info);
|
||||
--color-info-foreground: var(--info-foreground);
|
||||
|
||||
--color-warning: var(--warning);
|
||||
--color-warning-foreground: var(--warning-foreground);
|
||||
|
||||
--color-success: var(--success);
|
||||
--color-success-foreground: var(--success-foreground);
|
||||
|
||||
--color-error: var(--error);
|
||||
--color-error-foreground: var(--error-foreground);
|
||||
|
||||
--font-sans: var(--font-sans);
|
||||
--font-mono: var(--font-mono);
|
||||
|
||||
--spacing: var(--spacing);
|
||||
--container-max-width: var(--container-max-width);
|
||||
|
||||
--radius-sm: calc(var(--radius-base) * 0.25);
|
||||
--radius: calc(var(--radius-base) * 0.5);
|
||||
--radius-md: calc(var(--radius-base) * 0.75);
|
||||
--radius-lg: var(--radius-base);
|
||||
--radius-xl: calc(var(--radius-base) * 1.5);
|
||||
--radius-2xl: calc(var(--radius-base) * 2);
|
||||
--radius-3xl: calc(var(--radius-base) * 3);
|
||||
--radius-4xl: calc(var(--radius-base) * 4);
|
||||
}
|
||||
@import "./_tokens.css";
|
||||
|
||||
@layer base {
|
||||
*:not(html) {
|
||||
@ -1833,7 +1628,7 @@
|
||||
@apply relative z-10 flex w-full max-w-md flex-col items-stretch gap-6;
|
||||
|
||||
.login-card {
|
||||
@apply border-border bg-panel-bg relative overflow-hidden rounded-4xl border p-10 shadow-xl backdrop-blur-xl max-md:rounded-3xl max-md:p-6;
|
||||
@apply border-border bg-panel-bg relative overflow-hidden rounded-4xl border p-10 shadow-xl max-md:rounded-3xl max-md:p-6;
|
||||
|
||||
.login-brand {
|
||||
@apply flex items-center gap-4;
|
||||
@ -1877,7 +1672,7 @@
|
||||
}
|
||||
|
||||
.login-input {
|
||||
@apply border-border bg-panel-bg/70 text-foreground focus:border-primary rounded-2xl border px-3 py-2.5 text-base;
|
||||
@apply border-border bg-panel-bg text-foreground focus:border-primary focus:ring-0 focus:shadow-sm rounded-2xl border px-3 py-2.5 text-base shadow-sm transition-none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -99,6 +99,7 @@ function createLocalServePlugin(): Plugin {
|
||||
css: {
|
||||
routes: {
|
||||
"/luci-static/aurora/main.css": "/src/media/main.css",
|
||||
"/luci-static/aurora/login.css": "/src/media/login.css",
|
||||
},
|
||||
shouldRewrite: true,
|
||||
hmrMessage: "CSS file changed",
|
||||
@ -396,6 +397,7 @@ export default defineConfig(({ mode }) => {
|
||||
rollupOptions: {
|
||||
input: {
|
||||
main: resolve(CURRENT_DIR, "src/media/main.css"),
|
||||
login: resolve(CURRENT_DIR, "src/media/login.css"),
|
||||
},
|
||||
output: {
|
||||
assetFileNames: "aurora/[name].[ext]",
|
||||
|
||||
@ -8,8 +8,8 @@ include $(TOPDIR)/rules.mk
|
||||
LUCI_TITLE:=Aurora Theme (A modern browser theme built with Vite and Tailwind CSS)
|
||||
LUCI_DEPENDS:=+luci-base
|
||||
|
||||
PKG_VERSION:=0.11.7
|
||||
PKG_RELEASE:=9
|
||||
PKG_VERSION:=0.11.8
|
||||
PKG_RELEASE:=10
|
||||
PKG_LICENSE:=Apache-2.0
|
||||
|
||||
LUCI_MINIFY_CSS:=
|
||||
|
||||
2
luci-theme-aurora/htdocs/luci-static/aurora/login.css
Normal file
2
luci-theme-aurora/htdocs/luci-static/aurora/login.css
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -101,8 +101,12 @@
|
||||
<meta name="theme-color" content="#f8fafc" media="(prefers-color-scheme: light)">
|
||||
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">
|
||||
<meta name="color-scheme" content="light dark">
|
||||
{% if (blank_page): %}
|
||||
<link rel="stylesheet" href="{{ media }}/login.css">
|
||||
{% else %}
|
||||
<link rel="stylesheet" href="{{ media }}/main.css">
|
||||
<link rel="stylesheet" href="{{ media }}/fonts/aurora-font.css?v={{ icon_cache_version }}">
|
||||
{% endif %}
|
||||
<link rel="icon" href="{{ media }}/images/{{ logo_png }}?v={{ icon_cache_version }}" sizes="32x32">
|
||||
<link rel="icon" href="{{ media }}/images/{{ logo_svg }}?v={{ icon_cache_version }}" sizes="any">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="{{ media }}/images/favicon-16x16.png">
|
||||
|
||||
@ -11,6 +11,9 @@
|
||||
{% include('header', { blank_page: true }) %}
|
||||
|
||||
<div class="login-screen">
|
||||
<div class="login-aurora" aria-hidden="true">
|
||||
<div class="login-aurora-inner"></div>
|
||||
</div>
|
||||
<div class="login-shell">
|
||||
<form method="post" class="login-card">
|
||||
<div class="login-brand">
|
||||
@ -23,34 +26,38 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="login-divider" aria-hidden="true"></div>
|
||||
<hr class="login-divider">
|
||||
|
||||
<div class="login-form">
|
||||
<div class="login-fields">
|
||||
<div class="login-field">
|
||||
<label class="login-label" for="luci_username">{{ _('Username') }}</label>
|
||||
<input name="luci_username" id="luci_username" type="text" class="login-input" value="{{ entityencode(duser ?? '', true) }}" autocomplete="username">
|
||||
<div class="input-wrap">
|
||||
<input name="luci_username" id="luci_username" type="text" class="login-input" value="{{ entityencode(duser ?? '', true) }}" autocomplete="username">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="login-field">
|
||||
<label class="login-label" for="luci_password">{{ _('Password') }}</label>
|
||||
<input name="luci_password" id="luci_password" type="password" class="login-input" autocomplete="current-password">
|
||||
<div class="input-wrap">
|
||||
<input name="luci_password" id="luci_password" type="password" class="login-input" autocomplete="current-password">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if (fuser): %}
|
||||
<div class="alert-message error" role="alert">{{ _('Invalid username and/or password! Please try again.') }}</div>
|
||||
<div class="login-error" role="alert">{{ _('Invalid username and/or password! Please try again.') }}</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="login-actions">
|
||||
<button type="submit" class="btn primary login-submit">{{ _('Log in') }}</button>
|
||||
<button type="submit" class="login-submit">{{ _('Log in') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="login-footer">
|
||||
<p>© <a href="https://github.com/eamonxg/luci-theme-aurora/graphs/contributors" target="_blank" rel="noreferrer">Aurora Theme Contributors</a> · Powered by <a href="{{ entityencode(version.disturl ?? '#', true) }}" target="_blank" rel="noreferrer">{{ version.distname }}</a> & <a href="https://github.com/openwrt/luci" target="_blank" rel="noreferrer">{{ version.luciname }}</a></p>
|
||||
</div>
|
||||
<div class="login-footer">
|
||||
<p>© <a href="https://github.com/eamonxg/luci-theme-aurora/graphs/contributors" target="_blank" rel="noreferrer">Aurora Theme Contributors</a> · Powered by <a href="{{ entityencode(version.disturl ?? '#', true) }}" target="_blank" rel="noreferrer">{{ version.distname }}</a> & <a href="https://github.com/openwrt/luci" target="_blank" rel="noreferrer">{{ version.luciname }}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -2169,7 +2169,9 @@ body.sidebar-open header {
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
position: sticky;
|
||||
height: calc(100vh - var(--material3-header-height));
|
||||
margin-bottom: calc(var(--material3-header-height) - 100vh);
|
||||
top: var(--material3-header-height);
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
@ -2236,6 +2238,10 @@ body.sidebar-open header {
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
height: auto;
|
||||
float: none;
|
||||
margin-bottom: 0;
|
||||
transform: translateX(-100%);
|
||||
z-index: 900;
|
||||
border-radius: 0 1rem 1rem 0;
|
||||
@ -2441,14 +2447,6 @@ body.sidebar-open header {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.nav .dropdown-menu,
|
||||
header {
|
||||
border: none;
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
background: var(--md-sys-color-surface-translucent);
|
||||
}
|
||||
|
||||
.nav .dropdown-menu>li {
|
||||
position: relative;
|
||||
border-radius: 2rem;
|
||||
@ -3800,7 +3798,7 @@ form.inline {
|
||||
width: 100%;
|
||||
color: var(--text-color-highest);
|
||||
margin-bottom: 18px;
|
||||
font-family: monospace;
|
||||
font-family: Consolas, Monaco, "Courier New", Menlo, monospace;
|
||||
}
|
||||
|
||||
.cbi-section-table .tr:hover .td,
|
||||
@ -4654,4 +4652,4 @@ div.cbi-value var.cbi-tooltip-container,
|
||||
[data-darkmode="true"] :is(body[data-page="admin-dashboard"], body[data-page="admin"], body[data-page=""]) .Dashboard img.svgmonotone,
|
||||
[data-mode="dark"] :is(body[data-page="admin-dashboard"], body[data-page="admin"], body[data-page=""]) .Dashboard img.svgmonotone {
|
||||
filter: invert(1) brightness(1.65) contrast(.82) opacity(.86);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user