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

Unify mobile topbar controls

Browse Source
This commit is contained in:
shuaiplus
2026-06-22 22:30:29 +08:00
parent 4900de0444
commit 16bde22604
2 changed files with 46 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/src/components/ThemeSwitch.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ interface ThemeSwitchProps {
export default function ThemeSwitch(props: ThemeSwitchProps) { export default function ThemeSwitch(props: ThemeSwitchProps) {
return ( return (
<div className="theme-switch-wrap" title={props.title}> <div className="theme-switch-wrap" title={props.title}>
<label className="theme-switch" aria-label={props.title}> <label className={`theme-switch ${props.checked ? 'checked' : 'unchecked'}`} aria-label={props.title}>
<span className="sun" aria-hidden="true"> <span className="sun" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g fill="#ffd43b"> <g fill="#ffd43b">
webapp/src/styles/responsive.css
+45 -3
View File
@@ -133,7 +133,10 @@
} }
.topbar-actions > .network-status-badge { .topbar-actions > .network-status-badge {
@apply h-8 px-2 text-[0]; @apply inline-flex h-9 w-9 min-w-9 justify-center gap-0 rounded-xl p-0 text-[0];
background: color-mix(in srgb, var(--panel) 88%, transparent);
border-color: var(--line);
box-shadow: none;
} }
.topbar-actions > .network-status-badge svg { .topbar-actions > .network-status-badge svg {
@@ -142,7 +145,10 @@
.mobile-sidebar-toggle, .mobile-sidebar-toggle,
.mobile-lock-btn { .mobile-lock-btn {
@apply inline-flex h-9 w-9 min-w-9 justify-center gap-0 p-0 text-[0]; @apply inline-flex h-9 w-9 min-w-9 justify-center gap-0 rounded-xl p-0 text-[0];
background: color-mix(in srgb, var(--panel) 88%, transparent);
border-color: var(--line);
box-shadow: none;
} }
.mobile-sidebar-toggle .btn-icon, .mobile-sidebar-toggle .btn-icon,
@@ -155,10 +161,46 @@
} }
.mobile-theme-btn .theme-switch { .mobile-theme-btn .theme-switch {
transform: scale(0.8); @apply h-9 w-9 rounded-xl border;
background: color-mix(in srgb, var(--panel) 88%, transparent);
border-color: var(--line);
box-shadow: none;
transform: none;
transform-origin: center; transform-origin: center;
} }
.mobile-theme-btn .theme-switch-slider,
.mobile-theme-btn .theme-switch-slider::before {
@apply hidden;
}
.mobile-theme-btn .theme-switch .sun svg,
.mobile-theme-btn .theme-switch .moon svg {
@apply h-[18px] w-[18px];
top: 7px;
left: 8px;
z-index: 1;
opacity: 0;
transform: none;
}
.mobile-theme-btn .theme-switch.unchecked .sun svg,
.mobile-theme-btn .theme-switch.checked .moon svg {
opacity: 1;
}
.mobile-theme-btn .theme-switch.checked .moon svg {
fill: var(--primary);
}
.topbar-actions > .network-status-badge:hover,
.mobile-sidebar-toggle:hover,
.mobile-lock-btn:hover,
.mobile-theme-btn .theme-switch:hover {
background: var(--panel-subtle);
border-color: color-mix(in srgb, var(--primary) 28%, var(--line));
}
.app-main { .app-main {
@apply flex min-h-0 flex-col; @apply flex min-h-0 flex-col;
} }