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

Merge pull request #2504 from yetone/fix-admin-settings-darkmode

Browse Source 
fix(admin/settings): make tab shell readable in dark mode
This commit is contained in:
Wesley Liddick 2026-05-19 09:55:01 +08:00 committed by GitHub
commit 8584b8f7cf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
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;
}
: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 {
@apply overflow-x-auto;
-ms-overflow-style: none;
@ -9063,10 +9055,6 @@ watch(
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 {
@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;
}
: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 {
opacity: 0;
}
@ -9116,3 +9098,26 @@ watch(
@apply min-w-0 overflow-hidden text-ellipsis whitespace-nowrap leading-none;
}
</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>