zfc/sub2api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(admin/settings): make tab shell readable in dark mode

Browse Source 
Vue's scoped-CSS compiler was dropping the `:global(.dark) .settings-tabs-shell`
rules in the production build, so the tab strip kept its light-mode white
background and the inactive tab labels (text-gray-300) showed at ~1.6:1
contrast — effectively unreadable.

Hoist the three dark-mode overrides into an unscoped `<style>` block so they
survive the scoped-CSS transform.
This commit is contained in:
yetone 2026-05-16 00:50:35 +08:00
parent 6e66edbb09
commit b0c7723393
No known key found for this signature in database
GPG Key ID: 222BA52B342D52AA
1 changed files with 23 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/views/admin/SettingsView.vue
View File

@ -9012,14 +9012,6 @@ watch(
0 1px 0 rgb(255 255 255 / 0.9) inset; 0 1px 0 rgb(255 255 255 / 0.9) inset;
} }
:global(.dark) .settings-tabs-shell {
border-color: rgb(51 65 85 / 0.65);
background: rgb(15 23 42 / 0.86);
box-shadow:
0 16px 36px rgb(0 0 0 / 0.28),
0 1px 0 rgb(255 255 255 / 0.06) inset;
}
.settings-tabs-scroll { .settings-tabs-scroll {
@apply overflow-x-auto; @apply overflow-x-auto;
-ms-overflow-style: none; -ms-overflow-style: none;
@ -9063,10 +9055,6 @@ watch(
opacity: 1; opacity: 1;
} }
:global(.dark) .settings-tab::before {
background: linear-gradient(135deg, rgb(30 41 59 / 0.9), rgb(51 65 85 / 0.62));
}
.settings-tab:focus-visible { .settings-tab:focus-visible {
@apply ring-2 ring-primary-500/40 ring-offset-2 ring-offset-white dark:ring-offset-dark-900; @apply ring-2 ring-primary-500/40 ring-offset-2 ring-offset-white dark:ring-offset-dark-900;
} }
@ -9078,12 +9066,6 @@ watch(
0 1px 0 rgb(255 255 255 / 0.92) inset; 0 1px 0 rgb(255 255 255 / 0.92) inset;
} }
:global(.dark) .settings-tab-active {
box-shadow:
0 12px 26px rgb(0 0 0 / 0.22),
0 1px 0 rgb(255 255 255 / 0.08) inset;
}
.settings-tab-active::before { .settings-tab-active::before {
opacity: 0; opacity: 0;
} }
@ -9116,3 +9098,26 @@ watch(
@apply min-w-0 overflow-hidden text-ellipsis whitespace-nowrap leading-none; @apply min-w-0 overflow-hidden text-ellipsis whitespace-nowrap leading-none;
} }
</style> </style>
<style>
/* Dark-mode overrides for the settings tabs shell. Kept in an UNSCOPED block
because Vue's scoped-CSS compiler was dropping the `:global(.dark) ...`
rules in the production build, leaving inactive tabs unreadable on dark. */
.dark .settings-tabs-shell {
border-color: rgb(51 65 85 / 0.65);
background: rgb(15 23 42 / 0.86);
box-shadow:
0 16px 36px rgb(0 0 0 / 0.28),
0 1px 0 rgb(255 255 255 / 0.06) inset;
}
.dark .settings-tab::before {
background: linear-gradient(135deg, rgb(30 41 59 / 0.9), rgb(51 65 85 / 0.62));
}
.dark .settings-tab-active {
box-shadow:
0 12px 26px rgb(0 0 0 / 0.22),
0 1px 0 rgb(255 255 255 / 0.08) inset;
}
</style>