style(web): use minimal custom svg icons for theme switch button

This commit is contained in:
kory
2026-09-28 08:49:09 +08:00
parent b9a43e78ee
commit a7b23b760a
6 changed files with 130 additions and 4 deletions
+7
View File
@@ -9,3 +9,10 @@ header strong{font-size:18px}header span{margin-left:12px;color:var(--text-muted
@media(max-width:680px){header{align-items:flex-start;padding-top:12px;padding-bottom:12px}header span{display:none}.brand-wrap{padding-top:2px}.brand-logo{width:32px;height:32px}.header-actions{flex-direction:column;align-items:stretch;width:112px}.header-actions button{width:100%;padding:8px 9px}.devices{grid-template-columns:1fr}.cardhead{flex-direction:column;align-items:stretch;gap:8px}.cardhead h2{margin-bottom:0}.cardhead button,#device{width:100%;min-width:0}.actions button{flex:1 1 calc(50% - 4px)}}
@media(max-width:450px){main{padding:9px}.card{padding:13px;border-radius:12px}.actions{display:grid;grid-template-columns:1fr 1fr}.actions button{width:100%;min-width:0}.login form{padding:22px}.header-actions{width:104px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}
/* 主题切换极简矢量图标按钮 */
.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border-radius:9px;background:var(--bg-sub);border:1px solid var(--border-strong);color:var(--text-main);cursor:pointer;transition:background .2s,border-color .2s}
.btn-icon:hover{filter:brightness(1.1)}
.theme-svg{display:none;width:18px;height:18px}
:root[data-theme="dark"] .svg-sun{display:block;color:#facc15}
:root[data-theme="light"] .svg-moon{display:block;color:#475569}