mirror of
https://github.com/kiddin9/op-packages.git
synced 2026-11-01 01:05:13 +08:00
🍓 Sync 2026-05-17 08:40:00
This commit is contained in:
github-actions[bot] committed
1 parent
22f46d41d8
commit
05e46fe61a
10 files changed
+457
-230
No files matched your search
@@ -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);
|
||||
}
|
||||
@@ -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:=
|
||||
|
||||
@@ -0,0 +1,2 @@
|
||||
/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
|
||||
@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-content:"";--tw-font-weight:initial;--tw-tracking:initial}}:root,:host{--font-sans:var(--font-sans);--font-mono:var(--font-mono);--spacing:var(--spacing);--container-md:28rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--font-weight-medium:500;--font-weight-semibold:600;--tracking-tight:-.025em;--tracking-widest:.1em;--radius-2xl:calc(var(--radius-base)*2);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--container-max-width:var(--container-max-width)}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-Line truncated
|
||||
@@ -1,2 +1,2 @@
|
||||
/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
|
||||
@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0;--tw-leading:initial;--tw-font-weight:initial;--tw-duration:initial;--tw-tracking:initial;--tw-border-style:solid;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-ease:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-content:"";--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-space-y-reverse:0;--tw-border-spacing-x:0;--tw-border-spacing-y:0}}:root,:host{--font-sans:var(--font-sans);--font-mono:var(--font-mono);--spacing:var(--spacing);--container-xs:20rem;--container-md:28rem;--container-5xl:64rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25/1.875);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wider:.05em;--leading-tight:1.25;--leading-snug:1.375;--leading-normal:1.5;--leading-relaxed:1.625;--ease-out:cubic-bezier(0,0,.2,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--animate-spin:spin 1s linear infinite;--blur-sm:8px;--blur-md:12px;--blur-lg:16px;--blur-xl:24px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--container-max-width:var(--container-max-width)}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,Line truncated
|
||||
@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0;--tw-leading:initial;--tw-font-weight:initial;--tw-duration:initial;--tw-tracking:initial;--tw-border-style:solid;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-ease:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-content:"";--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-space-y-reverse:0;--tw-border-spacing-x:0;--tw-border-spacing-y:0}}:root,:host{--font-sans:var(--font-sans);--font-mono:var(--font-mono);--spacing:var(--spacing);--container-xs:20rem;--container-md:28rem;--container-5xl:64rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25/1.875);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wider:.05em;--leading-tight:1.25;--leading-snug:1.375;--leading-normal:1.5;--leading-relaxed:1.625;--radius-2xl:calc(var(--radius-base)*2);--ease-out:cubic-bezier(0,0,.2,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--animate-spin:spin 1s linear infinite;--blur-sm:8px;--blur-md:12px;--blur-lg:16px;--blur-xl:24px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--container-max-width:var(--container-max-width)}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{lisLine truncated
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user