133 lines
8.7 KiB
CSS
133 lines
8.7 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--canvas: #e9e7e3;
|
|
--paper: #f4f3f1;
|
|
--surface: #ffffff;
|
|
--surface-soft: #faf9f8;
|
|
--ink: #201d1a;
|
|
--ink-soft: #3d3833;
|
|
--muted: #8a857e;
|
|
--muted-light: #b3aea6;
|
|
--line: rgba(32, 29, 26, 0.08);
|
|
--line-strong: rgba(32, 29, 26, 0.14);
|
|
--accent: #c05a1e;
|
|
--accent-hover: #96431a;
|
|
--accent-soft: rgba(192, 90, 30, 0.1);
|
|
--copper: var(--accent);
|
|
--copper-deep: var(--accent-hover);
|
|
--paper-soft: var(--surface-soft);
|
|
--olive: #65765a;
|
|
--olive-deep: #4f6046;
|
|
--success: #3f9d63;
|
|
--danger: #b4482c;
|
|
--radius-sm: 8px;
|
|
--radius-md: 10px;
|
|
--radius-lg: 12px;
|
|
--font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
|
--font-display: var(--font-body);
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--paper);
|
|
--color-foreground: var(--ink);
|
|
--font-sans: var(--font-body);
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html { background: var(--canvas); }
|
|
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: var(--font-body); }
|
|
a { color: inherit; text-decoration: none; }
|
|
button, input, textarea, select { font: inherit; }
|
|
button { cursor: pointer; }
|
|
textarea { resize: none; }
|
|
*::-webkit-scrollbar { display: none; }
|
|
::selection { background: rgba(192, 90, 30, 0.18); }
|
|
|
|
.app-frame {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 430px;
|
|
min-height: 100dvh;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
background: var(--paper);
|
|
box-shadow: 0 0 0 1px rgba(32,29,26,.03);
|
|
}
|
|
.app-content { min-height: 100dvh; padding: 14px 14px 84px; }
|
|
.app-content.detail { padding-top: 0; padding-bottom: 24px; }
|
|
.app-stack { display: flex; flex-direction: column; gap: 12px; }
|
|
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 2px 0; }
|
|
.page-heading h1 { margin:0; font-size:20px; line-height:1.35; font-weight:700; letter-spacing:.01em; }
|
|
.page-heading p { margin:3px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
|
|
.avatar { display:flex; width:34px; height:34px; flex:none; align-items:center; justify-content:center; border:0; border-radius:50%; background:var(--ink); color:var(--paper); font-size:14px; font-weight:600; }
|
|
.detail-header { position:sticky; top:0; z-index:5; display:flex; min-height:54px; align-items:center; gap:6px; padding:10px 0; background:rgba(244,243,241,.96); backdrop-filter:blur(10px); }
|
|
.detail-header h1 { margin:0; flex:1; font-size:16px; font-weight:700; }
|
|
.back-button { display:flex; width:30px; height:30px; align-items:center; justify-content:center; border:0; background:transparent; color:var(--ink); }
|
|
.card { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); }
|
|
.card-pad { padding:13px 14px; }
|
|
.list-row { display:flex; width:100%; align-items:flex-start; gap:10px; padding:11px 14px; border:0; border-top:1px solid var(--line); background:transparent; color:var(--ink); text-align:left; }
|
|
.list-row:first-child { border-top:0; }
|
|
.list-row:hover { background:var(--surface-soft); }
|
|
.row-main { flex:1; min-width:0; }
|
|
.row-title { display:block; color:var(--ink); font-size:14px; line-height:1.5; font-weight:600; }
|
|
.row-meta { display:flex; align-items:center; gap:6px; margin-top:4px; color:var(--muted); font-size:12px; line-height:1.45; }
|
|
.dot { width:7px; height:7px; flex:none; margin-top:6px; border-radius:50%; background:var(--accent); }
|
|
.dot.online { background:var(--success); }
|
|
.dot.offline { background:#c7c2ba; }
|
|
.tag { display:inline-flex; align-items:center; border-radius:4px; padding:1px 5px; background:var(--accent-soft); color:var(--accent); font-size:10px; font-weight:600; }
|
|
.section-title { display:flex; align-items:baseline; justify-content:space-between; padding:0 2px 8px; }
|
|
.section-title h2 { margin:0; font-size:14px; font-weight:700; }
|
|
.section-title a { color:var(--accent); font-size:13px; font-weight:500; }
|
|
.stats { display:grid; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); }
|
|
.stat { padding:11px 4px; text-align:center; }
|
|
.stat + .stat { border-left:1px solid var(--line); }
|
|
.stat strong { display:block; font-size:20px; line-height:1.2; font-weight:700; }
|
|
.stat:first-child strong, .stat.accent strong { color:var(--accent); }
|
|
.stat span { display:block; margin-top:3px; color:var(--muted); font-size:11px; }
|
|
.button-row { display:flex; gap:10px; }
|
|
.btn { display:inline-flex; min-height:40px; align-items:center; justify-content:center; gap:6px; border:1px solid var(--line-strong); border-radius:var(--radius-md); padding:0 14px; background:var(--surface); color:var(--ink); font-size:13.5px; font-weight:600; }
|
|
.btn:hover { background:var(--surface-soft); }
|
|
.btn.primary { border-color:var(--accent); background:var(--accent); color:#fff; }
|
|
.btn.primary:hover { background:var(--accent-hover); }
|
|
.btn.dark { border-color:var(--ink); background:var(--ink); color:#fff; }
|
|
.btn.small { min-height:32px; border-radius:8px; padding:0 12px; font-size:13px; }
|
|
.btn.block { width:100%; }
|
|
.segment { display:flex; padding:2px; border-radius:9px; background:rgba(32,29,26,.06); }
|
|
.segment a, .segment button { flex:1; height:30px; border:0; border-radius:7px; background:transparent; color:var(--muted); font-size:13px; font-weight:600; text-align:center; line-height:30px; }
|
|
.segment .active { background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.06); }
|
|
.field { width:100%; height:44px; border:1px solid rgba(32,29,26,.12); border-radius:10px; padding:0 13px; outline:0; background:#fff; color:var(--ink); font-size:14px; }
|
|
.field:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
|
|
textarea.field { height:auto; min-height:84px; padding:9px 11px; line-height:1.5; background:var(--surface-soft); }
|
|
.empty { padding:34px 20px; color:var(--muted); text-align:center; font-size:13px; line-height:1.7; }
|
|
.muted-note { margin:0; color:var(--muted-light); font-size:11.5px; line-height:1.6; }
|
|
.bottom-nav { position:fixed; z-index:20; right:0; bottom:0; left:0; display:grid; grid-template-columns:repeat(4,1fr); width:100%; max-width:430px; margin:0 auto; padding:6px 0 calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:rgba(255,255,255,.96); backdrop-filter:blur(10px); }
|
|
.nav-item { position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px 0; color:var(--muted); font-size:10px; font-weight:600; }
|
|
.nav-item.active { color:var(--accent); }
|
|
.nav-badge { position:absolute; top:0; left:calc(50% + 6px); min-width:16px; height:16px; border-radius:8px; padding:0 4px; background:var(--accent); color:#fff; font-size:10px; line-height:16px; text-align:center; }
|
|
.device-icon { display:flex; width:40px; height:40px; flex:none; align-items:center; justify-content:center; border-radius:10px; background:rgba(192,90,30,.08); color:var(--accent); }
|
|
.timeline-item { padding:11px 14px; border-top:1px solid var(--line); }
|
|
.timeline-item:first-child { border-top:0; }
|
|
.timeline-top { display:flex; align-items:baseline; gap:8px; color:var(--muted); font-size:12px; font-weight:600; }
|
|
.timeline-time { margin-left:auto; color:var(--muted-light); font-size:11.5px; font-weight:400; white-space:nowrap; }
|
|
.timeline-body { margin:4px 0 0; color:var(--ink-soft); font-size:13.5px; line-height:1.55; }
|
|
.settings-controls > * { border:1px solid var(--line)!important; border-radius:12px!important; background:#fff!important; padding:14px!important; box-shadow:none!important; }
|
|
.settings-controls h2, .settings-controls h3 { font-family:var(--font-body)!important; font-size:15px!important; line-height:1.45!important; }
|
|
.settings-controls p { font-size:12px!important; line-height:1.65!important; }
|
|
.device-manage summary { list-style:none; }
|
|
.device-manage[open] summary { margin-bottom:10px; }
|
|
.device-manage > :not(summary) { border:1px solid var(--line)!important; border-radius:12px!important; background:#fff!important; padding:14px!important; box-shadow:none!important; }
|
|
.scan-panel > div { border:0!important; border-radius:0!important; background:transparent!important; padding:0!important; box-shadow:none!important; }
|
|
.scan-panel > div > p:first-child, .scan-panel > div > h2, .scan-panel > div > h2 + p { display:none!important; }
|
|
.scan-panel video { border-radius:14px; }
|
|
|
|
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
|
|
@keyframes route-progress-slide { 0%{transform:translateX(-140%)} 100%{transform:translateX(240%)} }
|
|
.route-progress-bar { animation:route-progress-slide 1.15s ease-in-out infinite; background:var(--accent)!important; }
|
|
|
|
@media (min-width: 700px) {
|
|
.app-frame { min-height:calc(100dvh - 32px); margin:16px auto; border-radius:18px; box-shadow:0 18px 60px rgba(32,29,26,.12); }
|
|
.app-content { min-height:calc(100dvh - 32px); }
|
|
.bottom-nav { bottom:16px; border-radius:0 0 18px 18px; }
|
|
}
|