You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
211 lines
4.2 KiB
211 lines
4.2 KiB
:root{ |
|
--bg:#0b0f19; |
|
--card:#101826; |
|
--line:#1c2a40; |
|
--text:#e7eefc; |
|
--muted:#9ab0d1; |
|
--good:#41d17d; |
|
--warn:#ffcc66; |
|
|
|
--toggle-off:#1c2a40; |
|
--toggle-on:#2f6fff; |
|
} |
|
|
|
[data-theme="light"]{ |
|
--bg:#f3f6fb; |
|
--card:#ffffff; |
|
--line:#dfe6f2; |
|
--text:#111827; |
|
--muted:#5b6472; |
|
--good:#1f9d55; |
|
--warn:#b26a00; |
|
|
|
--toggle-off:#dfe6f2; |
|
--toggle-on:#2f6fff; |
|
} |
|
|
|
*{box-sizing:border-box} |
|
html,body{height:100%} |
|
body{ |
|
margin:0; |
|
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial, sans-serif; |
|
background: var(--bg); |
|
color:var(--text); |
|
} |
|
|
|
.wrap{max-width:980px;margin:28px auto;padding:0 16px} |
|
.top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px} |
|
.title{font-size:28px;font-weight:800;letter-spacing:.2px} |
|
.sub{color:var(--muted);margin-top:6px;font-size:13px} |
|
|
|
.top-right{ |
|
display:flex; |
|
align-items:center; |
|
gap:10px; |
|
} |
|
|
|
.status-pill{ |
|
font-size:12px; |
|
font-weight:800; |
|
padding:6px 10px; |
|
border-radius:999px; |
|
border:1px solid rgba(255,255,255,.10); |
|
background: rgba(0,0,0,.18); |
|
} |
|
[data-theme="light"] .status-pill{ |
|
border:1px solid rgba(0,0,0,.10); |
|
background: rgba(255,255,255,.65); |
|
} |
|
|
|
.cycle{ |
|
font-size:12px; |
|
color:var(--muted); |
|
max-width:340px; |
|
white-space:nowrap; |
|
overflow:hidden; |
|
text-overflow:ellipsis; |
|
} |
|
|
|
.card{ |
|
background: var(--card); |
|
border:1px solid rgba(255,255,255,.06); |
|
border-radius:18px; |
|
padding:16px; |
|
box-shadow: 0 18px 70px rgba(0,0,0,.22); |
|
} |
|
|
|
.section-title{ |
|
font-size:14px; |
|
letter-spacing:.12em; |
|
text-transform:uppercase; |
|
color:var(--muted); |
|
margin:8px 6px 10px; |
|
} |
|
|
|
.sep{ |
|
height:1px; |
|
background: rgba(255,255,255,.10); |
|
margin:14px 4px; |
|
} |
|
[data-theme="light"] .sep{ |
|
background: rgba(0,0,0,.10); |
|
} |
|
|
|
.rows{display:flex;flex-direction:column;gap:10px} |
|
|
|
.row{ |
|
display:flex; |
|
align-items:center; |
|
justify-content:space-between; |
|
gap:12px; |
|
padding:10px 10px; |
|
border:1px solid rgba(255,255,255,.06); |
|
border-radius:14px; |
|
background: rgba(0,0,0,.12); |
|
} |
|
[data-theme="light"] .row{ |
|
background: rgba(255,255,255,.55); |
|
border:1px solid rgba(0,0,0,.06); |
|
} |
|
|
|
.left{display:flex;align-items:center;gap:10px;min-width:0} |
|
.ic{ |
|
width:34px;height:34px; |
|
display:flex;align-items:center;justify-content:center; |
|
border-radius:12px; |
|
background: rgba(255,255,255,.06); |
|
border:1px solid rgba(255,255,255,.06); |
|
font-weight:800; |
|
} |
|
[data-theme="light"] .ic{ |
|
background: rgba(0,0,0,.03); |
|
border:1px solid rgba(0,0,0,.06); |
|
} |
|
.mid{min-width:0} |
|
.val{font-size:18px;font-weight:800;letter-spacing:.2px} |
|
.subline{font-size:12px;color:var(--muted);margin-top:2px} |
|
.right{display:flex;align-items:center;justify-content:flex-end} |
|
|
|
/* Spark canvas uses current 'color' for stroke + hover dot */ |
|
canvas.spark{ |
|
width:96px; |
|
height:26px; |
|
display:block; |
|
color: var(--muted); |
|
} |
|
|
|
/* Theme switch (no text) */ |
|
.switch{ |
|
position:relative; |
|
display:inline-block; |
|
width:44px; |
|
height:24px; |
|
} |
|
.switch input{ |
|
opacity:0; |
|
width:0; |
|
height:0; |
|
} |
|
.slider{ |
|
position:absolute; |
|
cursor:pointer; |
|
inset:0; |
|
background: var(--toggle-off); |
|
border:1px solid rgba(255,255,255,.10); |
|
transition: .2s; |
|
border-radius: 999px; |
|
} |
|
[data-theme="light"] .slider{ |
|
border:1px solid rgba(0,0,0,.10); |
|
} |
|
.slider:before{ |
|
position:absolute; |
|
content:""; |
|
height:18px; |
|
width:18px; |
|
left:3px; |
|
top:50%; |
|
transform: translateY(-50%); |
|
background: #fff; |
|
transition: .2s; |
|
border-radius: 50%; |
|
box-shadow: 0 6px 18px rgba(0,0,0,.25); |
|
} |
|
.switch input:checked + .slider{ |
|
background: var(--toggle-on); |
|
} |
|
.switch input:checked + .slider:before{ |
|
transform: translateY(-50%) translateX(20px); |
|
} |
|
|
|
/* Tooltip for spark hover */ |
|
.spark-tip{ |
|
position:fixed; |
|
z-index:9999; |
|
display:none; |
|
padding:8px 10px; |
|
border-radius:12px; |
|
background: var(--card); |
|
border:1px solid rgba(255,255,255,.08); |
|
color: var(--text); |
|
pointer-events:none; |
|
box-shadow: 0 18px 50px rgba(0,0,0,.35); |
|
} |
|
[data-theme="light"] .spark-tip{ |
|
border:1px solid rgba(0,0,0,.10); |
|
box-shadow: 0 18px 40px rgba(0,0,0,.18); |
|
} |
|
.spark-tip-date{ |
|
font-size:12px; |
|
color: var(--muted); |
|
margin-bottom:2px; |
|
} |
|
.spark-tip-val{ |
|
font-size:13px; |
|
font-weight:900; |
|
} |
|
.spark-tip-vs{ |
|
font-weight:700; |
|
color: var(--toggle-on); |
|
margin-left:4px; |
|
}
|
|
|