230 lines
3.1 KiB
CSS
230 lines
3.1 KiB
CSS
:root {
|
|
color-scheme: light dark;
|
|
--bg: #0b0f1a;
|
|
--card: rgba(255, 255, 255, 0.06);
|
|
--border: rgba(255, 255, 255, 0.12);
|
|
--text: rgba(255, 255, 255, 0.92);
|
|
--muted: rgba(255, 255, 255, 0.65);
|
|
--accent: #6ea8fe;
|
|
--danger: #ff6b6b;
|
|
--ok: #4ade80;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--bg: #f6f7fb;
|
|
--card: rgba(0, 0, 0, 0.03);
|
|
--border: rgba(0, 0, 0, 0.1);
|
|
--text: rgba(0, 0, 0, 0.88);
|
|
--muted: rgba(0, 0, 0, 0.6);
|
|
--accent: #1f6feb;
|
|
--danger: #b42318;
|
|
}
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font:
|
|
14px/1.4 system-ui,
|
|
-apple-system,
|
|
Segoe UI,
|
|
Roboto,
|
|
sans-serif;
|
|
}
|
|
|
|
body {
|
|
width: 380px;
|
|
min-width: 380px;
|
|
}
|
|
|
|
#app {
|
|
padding: 10px;
|
|
}
|
|
|
|
.panel {
|
|
background: transparent;
|
|
border-radius: 0;
|
|
padding: 12px;
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.brandIcon {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.title {
|
|
font-weight: 650;
|
|
letter-spacing: 0.2px;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.link {
|
|
background: transparent;
|
|
color: var(--accent);
|
|
border: 0;
|
|
padding: 6px 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.divider {
|
|
height: 1px;
|
|
background: transparent;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.subtitle {
|
|
font-weight: 600;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.label {
|
|
display: grid;
|
|
gap: 4px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.input {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 9px 10px;
|
|
border-radius: 0;
|
|
border: 1px solid var(--border);
|
|
background: rgba(0, 0, 0, 0.15);
|
|
color: var(--text);
|
|
outline: none;
|
|
}
|
|
|
|
.input:focus {
|
|
border: 1px solid var(--border);
|
|
outline: none;
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
border-radius: 0;
|
|
border: 0;
|
|
background: rgba(110, 168, 254, 0.18);
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn.danger {
|
|
background: rgba(255, 107, 107, 0.18);
|
|
}
|
|
|
|
.error {
|
|
color: var(--danger);
|
|
}
|
|
|
|
.body {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.login {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.statusRow {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.statusDot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 999px;
|
|
background: var(--ok);
|
|
}
|
|
|
|
.statusText {
|
|
font-size: 12px;
|
|
}
|
|
|
|
[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
.list {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.item {
|
|
display: grid;
|
|
grid-template-columns: 44px 1fr;
|
|
gap: 10px;
|
|
align-items: center;
|
|
padding: 8px;
|
|
border-radius: 10px;
|
|
border: 0;
|
|
}
|
|
|
|
.thumb {
|
|
width: 44px;
|
|
height: 62px;
|
|
border-radius: 8px;
|
|
object-fit: cover;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.meta {
|
|
display: grid;
|
|
gap: 4px;
|
|
}
|
|
|
|
.metaTitle {
|
|
font-weight: 650;
|
|
}
|
|
|
|
.metaSub {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.select {
|
|
padding: 8px 10px;
|
|
border-radius: 10px;
|
|
border: 0;
|
|
background: rgba(0, 0, 0, 0.15);
|
|
color: var(--text);
|
|
flex: 1;
|
|
}
|
|
|
|
.mini {
|
|
padding: 8px 10px;
|
|
border-radius: 10px;
|
|
border: 0;
|
|
background: rgba(110, 168, 254, 0.18);
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
}
|