🎈 Sync 2026-05-25 08:43:38

2026-07-27 10:31:38 +08:00 · 2026-05-25 08:43:38 +08:00 · 2026-05-25 08:43:38 +08:00 · 6a3fdbbd43
commit 6a3fdbbd43
parent 619da961e6
21 changed files with 87 additions and 141 deletions
--- a/luci-theme-aurora/.dev/public/aurora/images/pwa/app.webmanifest
+++ b/luci-theme-aurora/.dev/public/aurora/images/pwa/app.webmanifest
@ -5,17 +5,19 @@
  "scope": "/",
  "display": "standalone",
  "background_color": "#f8fafc",
-  "theme_color": "#0f172a",
+  "theme_color": "#f8fafc",
  "icons": [
    {
      "src": "/luci-static/aurora/images/pwa/app-icon-192x192.png",
      "sizes": "192x192",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any"
    },
    {
      "src": "/luci-static/aurora/images/pwa/app-icon-512x512.png",
      "sizes": "512x512",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any maskable"
    }
  ]
 }
--- a/luci-theme-aurora/.dev/src/media/components/_badge.css
+++ b/luci-theme-aurora/.dev/src/media/components/_badge.css
@ -19,7 +19,7 @@
 }

 .zonebadge {
-  @apply border-secondary bg-secondary text-secondary-foreground inline-flex items-center gap-1.5 overflow-visible rounded-full border px-1 py-1.5 text-sm font-medium shadow-sm transition-all duration-200 hover:shadow-md max-md:gap-1 max-md:text-xs;
+  @apply border-secondary bg-secondary text-secondary-foreground inline-flex items-center gap-1.5 overflow-visible rounded-full border px-1 py-1.5 text-sm font-medium shadow-sm hover:shadow-md max-md:gap-1 max-md:text-xs;

  &[style*="--zone-color-rgb"] {
    @apply bg-[rgb(var(--zone-color-rgb),.7)]!;
@ -35,7 +35,7 @@
 }

 .ifacebadge {
-  @apply border-border bg-label-surface text-default-foreground hover:border-border hover:bg-label-surface inline-flex cursor-default flex-wrap items-center gap-2 rounded-2xl border px-3 py-2 text-sm font-normal shadow-sm transition-all duration-200 hover:shadow-md max-md:gap-1.5 max-md:px-2.5 max-md:py-1.5 max-md:text-xs;
+  @apply border-border bg-label-surface text-default-foreground hover:border-border hover:bg-label-surface inline-flex cursor-default flex-wrap items-center gap-2 rounded-2xl border px-3 py-2 text-sm font-normal shadow-sm hover:shadow-md max-md:gap-1.5 max-md:px-2.5 max-md:py-1.5 max-md:text-xs;

  .cbi-dropdown &,
  .cbi-tooltip & {
--- a/luci-theme-aurora/.dev/src/media/components/_button.css
+++ b/luci-theme-aurora/.dev/src/media/components/_button.css
@ -1,7 +1,7 @@
 button,
 .btn,
 .cbi-button {
-  @apply inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-2xl border px-3 py-1.5 text-sm font-medium antialiased shadow-sm transition-all duration-200 max-md:text-base max-md:font-medium;
+  @apply inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-2xl border px-3 py-1.5 text-sm font-medium antialiased shadow-sm max-md:text-base max-md:font-medium;
  &[disabled] {
    @apply cursor-not-allowed opacity-40 dark:opacity-30;
  }
--- a/luci-theme-aurora/.dev/src/media/components/_card.css
+++ b/luci-theme-aurora/.dev/src/media/components/_card.css
@ -70,7 +70,7 @@
  }

  & .ifacebox-head {
-    @apply border-border bg-label-surface text-foreground max-md:border-border/80 w-full rounded-t-2xl border-b px-4 py-3 text-center font-semibold tracking-tight transition-all duration-200 max-md:rounded-t-3xl max-md:px-3 max-md:py-2.5 max-md:text-sm max-md:leading-5 max-md:font-medium;
+    @apply border-border bg-label-surface text-foreground max-md:border-border/80 w-full rounded-t-2xl border-b px-4 py-3 text-center font-semibold tracking-tight transition-transform duration-200 max-md:rounded-t-3xl max-md:px-3 max-md:py-2.5 max-md:text-sm max-md:leading-5 max-md:font-medium;

    &[style*="--zone-color-rgb"] {
      @apply bg-[rgb(var(--zone-color-rgb),.75)]!;
--- a/luci-theme-aurora/.dev/src/media/components/_dropdown.css
+++ b/luci-theme-aurora/.dev/src/media/components/_dropdown.css
@ -1,5 +1,5 @@
 .cbi-dropdown {
-  @apply inline-flex h-fit max-w-full min-w-fit shrink-0 items-center p-0 whitespace-nowrap shadow-sm transition-all duration-200;
+  @apply inline-flex h-fit max-w-full min-w-fit shrink-0 items-center p-0 whitespace-nowrap shadow-sm;

  &[disabled] {
    @apply pointer-events-none opacity-40 dark:opacity-30;
--- a/luci-theme-aurora/.dev/src/media/components/_form.css
+++ b/luci-theme-aurora/.dev/src/media/components/_form.css
@ -43,7 +43,7 @@
  @apply inline-flex w-max max-w-120 flex-col items-start gap-3 max-md:max-w-full!;

  & .item {
-    @apply border-border/40 bg-panel-bg pointer-events-auto relative inline-flex cursor-move flex-col items-start gap-2 self-stretch overflow-hidden rounded-2xl border py-3 pr-10 pl-4 break-all shadow-sm transition-all duration-200 select-text max-md:w-full max-md:py-2.5 max-md:pr-8 max-md:pl-3;
+    @apply border-border/40 bg-panel-bg pointer-events-auto relative inline-flex cursor-move flex-col items-start gap-2 self-stretch overflow-hidden rounded-2xl border py-3 pr-10 pl-4 break-all shadow-sm select-text max-md:w-full max-md:py-2.5 max-md:pr-8 max-md:pl-3;
    @apply after:bg-muted after:text-muted-foreground after:absolute after:top-2.5 after:right-2 after:inline-flex after:h-6 after:w-6 after:shrink-0 after:cursor-pointer after:items-center after:justify-center after:rounded-xl after:text-sm after:font-medium after:content-['\00D7'];

    &.dragging {
@ -65,7 +65,7 @@
  }

  & .add-item {
-    @apply border-border/70 hover:border-border hover:bg-page-bg/50 inline-flex items-center gap-1.5 self-stretch rounded-2xl border border-dashed bg-transparent px-1 py-1 transition-all duration-200;
+    @apply border-border/70 hover:border-border hover:bg-page-bg/50 inline-flex items-center gap-1.5 self-stretch rounded-2xl border border-dashed bg-transparent px-1 py-1;

    & > input {
      @apply min-w-61 flex-1;
--- a/luci-theme-aurora/.dev/src/media/components/_input.css
+++ b/luci-theme-aurora/.dev/src/media/components/_input.css
@ -6,7 +6,7 @@ input[type="text"],
 input[type="password"],
 .cbi-input-text,
 .cbi-input {
-  @apply text-foreground border-border/70 bg-page-bg placeholder-muted-foreground/70 focus:border-primary focus:ring-primary/20 relative rounded-2xl border px-3 py-1.5 text-sm font-normal shadow-sm transition-all duration-200 focus:ring-2 focus:outline-none;
+  @apply text-foreground border-border/70 bg-page-bg placeholder-muted-foreground/70 focus:border-primary focus:ring-primary/20 relative rounded-2xl border px-3 py-1.5 text-sm font-normal shadow-sm focus:ring-2 focus:outline-none;

  .table.cbi-section-table & {
    @apply w-full;
@ -23,7 +23,7 @@ input[type="password"],

 input[type="radio"],
 input[type="checkbox"] {
-  @apply focus:before:border-primary focus:before:ring-primary/20 checked:before:border-primary checked:before:bg-primary before:border-border/70 before:bg-page-bg after:bg-input-checked hover:before:border-border relative mr-3 inline-block h-4 w-4 cursor-pointer appearance-none before:absolute before:top-0 before:left-0 before:h-4 before:w-4 before:border before:transition-all before:duration-200 after:absolute after:top-0.5 after:left-0.5 after:h-3 after:w-3 after:opacity-0 after:transition-opacity after:duration-200 checked:after:opacity-100 focus:before:ring-2 focus:before:outline-none disabled:cursor-not-allowed;
+  @apply focus:before:border-primary focus:before:ring-primary/20 checked:before:border-primary checked:before:bg-primary before:border-border/70 before:bg-page-bg after:bg-input-checked hover:before:border-border relative mr-3 inline-block h-4 w-4 cursor-pointer appearance-none before:absolute before:top-0 before:left-0 before:h-4 before:w-4 before:border after:absolute after:top-0.5 after:left-0.5 after:h-3 after:w-3 after:opacity-0 after:transition-opacity after:duration-200 checked:after:opacity-100 focus:before:ring-2 focus:before:outline-none disabled:cursor-not-allowed;
 }

 input[type="radio"] {
--- a/luci-theme-aurora/.dev/src/media/components/_overlay.css
+++ b/luci-theme-aurora/.dev/src/media/components/_overlay.css
@ -1,5 +1,5 @@
 .mobile-menu-overlay {
-  @apply max-md:bg-overlay-base/60 max-md:invisible max-md:fixed max-md:inset-0 max-md:z-60 max-md:opacity-0 max-md:transition-all max-md:duration-300 md:hidden;
+  @apply max-md:bg-overlay-base/60 max-md:invisible max-md:fixed max-md:inset-0 max-md:z-60 max-md:opacity-0 max-md:transition-opacity max-md:duration-300 md:hidden;

  &.mobile-menu-open {
    @apply max-md:visible max-md:opacity-100 max-md:backdrop-blur-md;
@ -20,7 +20,7 @@
      }

      & .mobile-nav-close {
-        @apply max-md:cursor-pointer max-md:transition-all max-md:duration-200 max-md:hover:scale-105 max-md:active:scale-95;
+        @apply max-md:cursor-pointer max-md:transition-opacity max-md:duration-200 max-md:hover:scale-105 max-md:active:scale-95;

        & svg {
          @apply max-md:text-foreground size-5 max-md:transition-transform max-md:duration-200;
@ -33,16 +33,16 @@

      & .mobile-nav-item {
        & .mobile-nav-link {
-          @apply max-md:text-default-foreground max-md:hover:text-foreground max-md:flex max-md:w-full max-md:items-center max-md:px-0 max-md:py-4 max-md:text-base max-md:font-medium max-md:no-underline max-md:transition-all max-md:duration-300 max-md:hover:translate-x-1;
+          @apply max-md:text-default-foreground max-md:hover:text-foreground max-md:flex max-md:w-full max-md:items-center max-md:px-0 max-md:py-4 max-md:text-base max-md:font-medium max-md:no-underline max-md:transition-opacity max-md:duration-300 max-md:hover:translate-x-1;
        }

        & .mobile-nav-submenu {
-          @apply max-md:m-0 max-md:list-none max-md:overflow-hidden max-md:p-0 max-md:transition-all max-md:duration-300 max-md:ease-in-out;
+          @apply max-md:m-0 max-md:list-none max-md:overflow-hidden max-md:p-0 max-md:transition-opacity max-md:duration-300 max-md:ease-in-out;

          & .mobile-nav-subitem {
            @apply max-md:border-border/20 max-md:border-b max-md:last:border-b-0;
            & .mobile-nav-sublink {
-              @apply max-md:text-default-foreground max-md:hover:text-foreground max-md:flex max-md:w-full max-md:items-center max-md:py-3 max-md:pr-0 max-md:pl-4 max-md:text-sm max-md:font-normal max-md:no-underline max-md:transition-all max-md:duration-300 max-md:hover:translate-x-1;
+              @apply max-md:text-default-foreground max-md:hover:text-foreground max-md:flex max-md:w-full max-md:items-center max-md:py-3 max-md:pr-0 max-md:pl-4 max-md:text-sm max-md:font-normal max-md:no-underline max-md:transition-opacity max-md:duration-300 max-md:hover:translate-x-1;
            }
          }
        }
@ -53,7 +53,7 @@

 [data-nav-type="mega-menu"] {
  & .desktop-menu-overlay {
-    @apply bg-overlay-base/35 pointer-events-none fixed inset-0 z-50 opacity-0 transition-all duration-300 max-md:hidden;
+    @apply bg-overlay-base/35 pointer-events-none fixed inset-0 z-50 opacity-0 transition-opacity duration-300 max-md:hidden;

    &.active {
      @apply pointer-events-auto opacity-100 backdrop-blur-sm;
--- a/luci-theme-aurora/.dev/src/media/components/_progress.css
+++ b/luci-theme-aurora/.dev/src/media/components/_progress.css
@ -5,6 +5,6 @@
  }

  & > div {
-    @apply from-progress-bar-start to-progress-bar-end h-full bg-linear-to-r transition-all duration-300;
+    @apply from-progress-bar-start to-progress-bar-end h-full bg-linear-to-r transition-opacity duration-300;
  }
 }
--- a/luci-theme-aurora/.dev/src/media/components/_select.css
+++ b/luci-theme-aurora/.dev/src/media/components/_select.css
@ -1,5 +1,5 @@
 select {
-  @apply text-foreground border-border/70 bg-page-bg focus:border-primary focus:ring-primary/20 appearance-none rounded-2xl border px-3 py-1.5 pr-10 text-sm font-normal shadow-sm transition-all duration-200 focus:ring-2 focus:outline-none;
+  @apply text-foreground border-border/70 bg-page-bg focus:border-primary focus:ring-primary/20 appearance-none rounded-2xl border px-3 py-1.5 pr-10 text-sm font-normal shadow-sm focus:ring-2 focus:outline-none;
  @apply bg-[url('@assets/icons/arrow-down.svg')] bg-size-[16px] bg-position-[right_0.75rem_center] bg-no-repeat dark:bg-[url('@assets/icons/arrow-down-dark.svg')];
  &[disabled] {
    @apply cursor-not-allowed opacity-40 dark:opacity-30;
--- a/luci-theme-aurora/.dev/src/media/components/_switcher.css
+++ b/luci-theme-aurora/.dev/src/media/components/_switcher.css
@ -1,21 +1,21 @@
 .theme-switcher {
-  @apply bg-page-bg relative inline-flex items-center gap-0 rounded-full shadow-sm backdrop-blur-sm transition-all duration-300 max-md:py-0.5;
+  @apply bg-page-bg relative inline-flex items-center gap-0 rounded-full shadow-sm backdrop-blur-sm transition-transform duration-300 max-md:py-0.5;
  @apply border-border/70 border;
-  @apply before:bg-border/50 before:ring-border/60 before:absolute before:top-1 before:left-1 before:z-0 before:h-[calc(100%-0.5rem)] before:w-[calc(33.333%-0.5rem)] before:rounded-full before:shadow-md before:ring-1 before:transition-all before:duration-300;
+  @apply before:bg-border/50 before:ring-border/60 before:absolute before:top-1 before:left-1 before:z-0 before:h-[calc(100%-0.5rem)] before:w-[calc(33.333%-0.5rem)] before:rounded-full before:shadow-md before:ring-1 before:transition-transform before:duration-300;

  footer & {
    @apply max-md:hidden;
  }

  & .theme-option {
-    @apply relative z-10 flex cursor-pointer items-center justify-center gap-1.5 rounded-full px-3 py-1.5 transition-all duration-300 hover:scale-105 active:scale-95;
+    @apply relative z-10 flex cursor-pointer items-center justify-center gap-1.5 rounded-full px-3 py-1.5 transition-transform duration-300 hover:scale-105 active:scale-95;

    & input[type="radio"] {
      @apply sr-only;
    }

    & .theme-icon {
-      @apply text-muted-foreground flex items-center justify-center transition-all duration-300;
+      @apply text-muted-foreground flex items-center justify-center transition-transform duration-300;

      & svg {
        @apply size-4 transition-transform duration-300;
--- a/luci-theme-aurora/.dev/src/media/components/_table.css
+++ b/luci-theme-aurora/.dev/src/media/components/_table.css
@ -35,7 +35,7 @@ table.table,

  & tr,
  & .tr {
-    @apply hover:bg-label-surface max-md:border-border transition-colors duration-200 max-md:flex max-md:flex-wrap max-md:border-b max-md:px-2 max-md:py-2;
+    @apply hover:bg-label-surface max-md:border-border max-md:flex max-md:flex-wrap max-md:border-b max-md:px-2 max-md:py-2;
    @apply has-[.cbi-progressbar]:max-md:flex has-[.cbi-progressbar]:max-md:items-center has-[.cbi-progressbar]:max-md:justify-center;

    &:first-child {
@ -130,7 +130,7 @@ table.table,

  & th,
  & .th {
-    @apply border-border bg-label-surface border-b px-3 py-3 text-left text-base font-medium backdrop-blur-sm max-md:flex-[1_1_50%] max-md:border-0 max-md:text-sm;
+    @apply border-border bg-label-surface border-b px-3 py-3 text-left text-base font-medium max-md:flex-[1_1_50%] max-md:border-0 max-md:text-sm;

    #cbi-samba4 & {
      @apply px-0.5 py-1.5;
--- a/luci-theme-aurora/.dev/src/media/components/_textarea.css
+++ b/luci-theme-aurora/.dev/src/media/components/_textarea.css
@ -1,5 +1,5 @@
 textarea {
-  @apply text-foreground border-border/70 bg-page-bg placeholder-muted-foreground/70 focus:border-primary focus:ring-primary/20 min-h-24 w-full resize-y rounded-2xl border px-3 py-2 text-sm font-normal shadow-sm transition-all duration-200 focus:ring-2 focus:outline-none;
+  @apply text-foreground border-border/70 bg-page-bg placeholder-muted-foreground/70 focus:border-primary focus:ring-primary/20 min-h-24 w-full resize-y rounded-2xl border px-3 py-2 text-sm font-normal shadow-sm focus:ring-2 focus:outline-none;
  &[disabled] {
    @apply cursor-not-allowed opacity-40 dark:opacity-30;
  }
--- a/luci-theme-aurora/.dev/src/media/login.css
+++ b/luci-theme-aurora/.dev/src/media/login.css
@ -2,13 +2,6 @@
 * 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";
@ -16,26 +9,12 @@

@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;
  }
 }
@ -46,68 +25,25 @@
  }

  .login-shell {
-    @apply relative z-10 flex w-full max-w-md flex-col items-stretch gap-5;
+    @apply w-full max-w-md;
+  }
+
+  /* Fixed sibling layer (not form ancestor) on its own GPU surface so input
+     paints don't re-sample the bg image. DOM order keeps the form on top. */
+  .login-bg {
+    @apply pointer-events-none fixed inset-0 bg-cover bg-center bg-no-repeat bg-(image:--login-bg) transform-[translateZ(0)];
  }

-  /* 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;
-    }
+    @apply bg-panel-bg border-border flex flex-col gap-7 rounded-4xl border p-14 max-md:rounded-3xl max-md:p-9;
  }

  .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%)];
+    @apply bg-border h-px border-0;
  }

  .login-logo {
@ -147,22 +83,15 @@
  }

  .input-wrap {
-    @apply relative [contain:layout_style];
+    @apply border-border bg-panel-bg rounded-2xl border;
+
+    &:focus-within {
+      @apply border-primary;
+    }
  }

-  /* 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;
+    @apply text-foreground placeholder:text-muted-foreground/60 w-full appearance-none rounded-2xl border-0 bg-transparent px-3 py-2.5 text-base outline-none;
  }

  .login-error {
@ -173,12 +102,10 @@
    @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;
+    @apply bg-primary text-primary-foreground w-full cursor-pointer rounded-2xl border-0 py-2.5 text-base font-medium 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;

--- a/luci-theme-aurora/Makefile
+++ b/luci-theme-aurora/Makefile
@ -9,7 +9,7 @@ LUCI_TITLE:=Aurora Theme (A modern browser theme built with Vite and Tailwind CS
 LUCI_DEPENDS:=+luci-base

 PKG_VERSION:=0.11.9
-PKG_RELEASE:=11
+PKG_RELEASE:=12
 PKG_LICENSE:=Apache-2.0

 LUCI_MINIFY_CSS:=
--- a/luci-theme-aurora/htdocs/luci-static/aurora/images/pwa/app.webmanifest
+++ b/luci-theme-aurora/htdocs/luci-static/aurora/images/pwa/app.webmanifest
@ -5,17 +5,19 @@
  "scope": "/",
  "display": "standalone",
  "background_color": "#f8fafc",
-  "theme_color": "#0f172a",
+  "theme_color": "#f8fafc",
  "icons": [
    {
      "src": "/luci-static/aurora/images/pwa/app-icon-192x192.png",
      "sizes": "192x192",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any"
    },
    {
      "src": "/luci-static/aurora/images/pwa/app-icon-512x512.png",
      "sizes": "512x512",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any maskable"
    }
  ]
 }
--- a/luci-theme-aurora/htdocs/luci-static/aurora/login.css
+++ b/luci-theme-aurora/htdocs/luci-static/aurora/login.css
--- a/luci-theme-aurora/htdocs/luci-static/aurora/main.css
+++ b/luci-theme-aurora/htdocs/luci-static/aurora/main.css
--- a/luci-theme-aurora/ucode/template/themes/aurora/header.ut
+++ b/luci-theme-aurora/ucode/template/themes/aurora/header.ut
@ -20,7 +20,6 @@
 	const toolbar_enabled = tokens.toolbar_enabled ? tokens.toolbar_enabled == '1' : true;
 	const icon_cache_version = tokens.icon_cache_version || '0';
 	const logo_svg = tokens.logo_svg || 'logo.svg';
-	const logo_png = tokens.logo_png || 'logo_32.png';

 	let toolbar_items = [
 		{ url: '/cgi-bin/luci/admin/status/overview', icon: 'overview.svg', title: 'Overview' },
@ -28,7 +27,7 @@
 		{ url: '/cgi-bin/luci/admin/network/network', icon: 'network.svg', title: 'Network' }
 	];

-	if (toolbar_enabled) {
+	if (!blank_page && toolbar_enabled) {
 		let has_config = false;
 		const custom_items = [];

@ -56,6 +55,15 @@
 	<head>
 		<meta charset="utf-8">
 		<title>{{ striptags(`${dispatched?.title ?  `${_(dispatched.title)} - ` : ''}${boardinfo.hostname ?? '?'}`) }}</title>
+		{% if (blank_page): %}
+		<script>
+			(function () {
+				const theme = localStorage.getItem('aurora.theme') || 'device';
+				const isDark = theme === 'dark' || (theme === 'device' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+				document.documentElement.setAttribute('data-darkmode', isDark);
+			})();
+		</script>
+		{% else %}
 		<script>
 			const setTheme = (theme) => {
 				const current = ['light', 'dark', 'device'].includes(theme) ? theme : 'device';
@ -97,6 +105,7 @@
 				}
 			});
 		</script>
+		{% endif %}
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 		<meta name="theme-color" content="#f8fafc" media="(prefers-color-scheme: light)">
 		<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">
@ -107,12 +116,9 @@
 		<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">
-		<link rel="icon" type="image/png" sizes="32x32" href="{{ media }}/images/favicon-32x32.png">
-		<link rel="shortcut icon" href="{{ media }}/images/favicon.ico">
-		<link rel="apple-touch-icon" sizes="180x180" href="{{ media }}/images/pwa/apple-touch-icon.png">
+		<link rel="icon" href="{{ media }}/images/{{ logo_svg }}?v={{ icon_cache_version }}" sizes="any" type="image/svg+xml">
+		<link rel="icon" href="{{ media }}/images/favicon.ico" sizes="32x32">
+		<link rel="apple-touch-icon" href="{{ media }}/images/pwa/apple-touch-icon.png?v={{ icon_cache_version }}">
 		<link rel="manifest" href="{{ media }}/images/pwa/app.webmanifest">
 		<meta name="application-name" content="LuCI Aurora">
 		<meta name="apple-mobile-web-app-capable" content="yes">
@ -143,8 +149,10 @@
 			}
 		</style>
 		{% endif %}
+		{% if (!blank_page): %}
 		<script src="{{ dispatcher.build_url('admin/translations', dispatcher.lang) }}"></script>
 		<script src="{{ resource }}/cbi.js"></script>
+		{% endif %}
 	</head>

 	<body class="lang_{{ dispatcher.lang }} {{ entityencode(striptags(node?.title ?? ''), true) }}" data-page="{{ entityencode(join('-', ctx.request_path), true) }}" data-nav-type="{{ nav_submenu_type }}">
--- a/luci-theme-aurora/ucode/template/themes/aurora/sysauth.ut
+++ b/luci-theme-aurora/ucode/template/themes/aurora/sysauth.ut
@ -7,18 +7,25 @@
 Licensed to the public under the Apache License 2.0.
 -#}

-{%const boardinfo = ubus.call('system', 'board');-%}
+{%
+import { cursor } from 'uci';
+const boardinfo = ubus.call('system', 'board');
+const themeTokens = cursor().get_all('aurora', 'theme') || {};
+const loginLogoSvg = themeTokens.logo_svg || 'logo.svg';
+const loginIconVer = themeTokens.icon_cache_version || '0';
+-%}
 {% include('header', { blank_page: true }) %}

-<div class="login-screen">
-	<div class="login-aurora" aria-hidden="true">
-		<div class="login-aurora-inner"></div>
-	</div>
+{% if (themeTokens.struct_login_bg): %}
+<div class="login-bg" aria-hidden="true"></div>
+{% endif %}
+
+<main class="login-screen">
 	<div class="login-shell">
 		<form method="post" class="login-card">
 			<div class="login-brand">
 				<div class="login-logo">
-					<img src="{{ media }}/images/logo.svg" alt="">
+					<img src="{{ media }}/images/{{ loginLogoSvg }}?v={{ loginIconVer }}" alt="">
 				</div>
 				<div class="login-title">
 					<span class="login-hostname">{{ striptags(boardinfo?.hostname ?? '?') }}</span>
@ -56,10 +63,10 @@
 		</form>
 	</div>

-	<div class="login-footer">
+	<footer 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>
+	</footer>
+</main>

 <script>
 document.getElementById('luci_username').value ? document.getElementById('luci_password').focus() : document.getElementById('luci_username').focus();
--- a/ua2f/Makefile
+++ b/ua2f/Makefile
@ -6,8 +6,8 @@
 include $(TOPDIR)/rules.mk

 PKG_NAME:=UA2F
-PKG_VERSION:=5.0.0
-PKG_RELEASE:=2
+PKG_VERSION:=5.1.0
+PKG_RELEASE:=3

 PKG_SOURCE:=$(PKG_NAME)-$(PKG_VERSION).tar.gz
 PKG_SOURCE_URL:=https://codeload.github.com/Zxilly/UA2F/tar.gz/v$(PKG_VERSION)?