Buriburizaemon/nodewarden
1
0
Fork 0
mirror of https://github.com/shuaiplus/nodewarden.git synced 2026-06-20 21:00:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: improve scrollbar styles and dark mode compatibility

Browse Source
This commit is contained in:
shuaiplus
2026-05-15 19:12:40 +08:00
parent bbad9d60a7
commit b7878ffe01
3 changed files with 77 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/src/styles.css
+60 -5
View File
@@ -18,8 +18,6 @@
.dialog-card,
.card,
.list-panel,
.sidebar-block,
.settings-subcard,
.backup-operations-sidebar,
.backup-destination-sidebar,
.backup-detail-panel,
@@ -110,7 +108,6 @@
:root[data-theme='dark'] .dialog-card,
:root[data-theme='dark'] .card,
:root[data-theme='dark'] .list-panel,
:root[data-theme='dark'] .sidebar-block,
:root[data-theme='dark'] .settings-subcard,
:root[data-theme='dark'] .backup-operations-sidebar,
:root[data-theme='dark'] .backup-destination-sidebar,
@@ -423,7 +420,6 @@ h4 {
.dialog-card,
.card,
.list-panel,
.sidebar-block,
.settings-subcard,
.backup-operations-sidebar,
.backup-destination-sidebar,
@@ -659,6 +655,40 @@ h4 {
padding: 14px;
}
.route-stage,
.sidebar,
.list-panel,
.detail-col,
.log-list,
.card.log-detail-panel,
.domain-rules-table,
.route-stage-fixed {
scrollbar-gutter: stable;
}
.route-stage,
.sidebar {
margin-right: -4px;
padding-right: 4px;
}
.list-panel,
.detail-col {
margin-right: -4px;
padding-right: 12px;
}
.log-list,
.domain-rules-table {
margin-right: -4px;
padding-right: calc(0.125rem + 4px);
}
.card.log-detail-panel {
margin-right: -4px;
padding-right: 18px;
}
.card h4,
.settings-module h3,
.section-head h3,
@@ -798,7 +828,6 @@ h4 {
:root[data-theme='dark'] .dialog-card,
:root[data-theme='dark'] .card,
:root[data-theme='dark'] .list-panel,
:root[data-theme='dark'] .sidebar-block,
:root[data-theme='dark'] .settings-subcard,
:root[data-theme='dark'] .backup-operations-sidebar,
:root[data-theme='dark'] .backup-destination-sidebar,
@@ -894,6 +923,32 @@ h4 {
gap: 8px;
}
.route-stage,
.sidebar,
.list-panel,
.detail-col,
.log-list,
.card.log-detail-panel,
.domain-rules-table,
.route-stage-fixed {
margin-right: 0;
scrollbar-gutter: auto;
}
.route-stage,
.sidebar {
padding-right: 0;
}
.log-list,
.domain-rules-table {
padding-right: 0.125rem;
}
.card.log-detail-panel {
padding-right: 14px;
}
.settings-modules-grid {
grid-template-columns: minmax(0, 1fr);
}
webapp/src/styles/base.css
+13 -4
View File
@@ -36,9 +36,14 @@ body.dialog-open {
}
/* --- custom scrollbar --- */
* {
scrollbar-color: color-mix(in srgb, var(--muted) 34%, transparent) transparent;
scrollbar-width: thin;
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
@@ -46,12 +51,16 @@ body.dialog-open {
}
::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--muted) 30%, transparent);
min-height: 44px;
border: 3px solid transparent;
border-radius: 999px;
background: color-mix(in srgb, var(--muted) 30%, transparent);
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background: color-mix(in srgb, var(--muted) 50%, transparent);
background: color-mix(in srgb, var(--primary) 38%, var(--muted) 22%);
background-clip: content-box;
}
::-webkit-scrollbar-corner {
webapp/src/styles/dark.css
+4 -2
View File
@@ -151,11 +151,13 @@
/* ── dark mode scrollbar ── */
:root[data-theme='dark'] ::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--muted) 24%, transparent);
background: color-mix(in srgb, var(--muted) 30%, transparent);
background-clip: content-box;
}
:root[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
background: color-mix(in srgb, var(--muted) 44%, transparent);
background: color-mix(in srgb, var(--primary) 40%, var(--muted) 22%);
background-clip: content-box;
}
/* ── dark mode backdrop-filter ── */