ipfs storage for images and other nontext items. for use with etica - runs on etica network and currencys
https://collect.etica-stats.org
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.
134 lines
3.3 KiB
134 lines
3.3 KiB
/* -------- Theme tokens -------- */ |
|
:root { |
|
--bg: #ffffff; |
|
--fg: #0f172a; /* slate-900 */ |
|
--muted: #475569; /* slate-600 */ |
|
--card: #f8fafc; /* slate-50 */ |
|
--border: #e2e8f0; /* slate-200 */ |
|
--accent: #2563eb; /* blue-600 */ |
|
--accent-fg: #ffffff; |
|
--accent-muted: #dbeafe; /* blue-100 */ |
|
--shadow: 0 4px 20px rgba(2, 6, 23, .06); |
|
|
|
--btn-bg: var(--accent); |
|
--btn-fg: var(--accent-fg); |
|
--btn-hover: #1e40af; /* blue-800 */ |
|
--input-bg: #ffffff; |
|
--input-fg: var(--fg); |
|
--input-border: var(--border); |
|
|
|
color-scheme: light; |
|
} |
|
|
|
:root[data-theme="dark"] { |
|
--bg: #0b1020; /* deep navy */ |
|
--fg: #e5e7eb; /* slate-200 */ |
|
--muted: #9aa4b2; /* slate-400 */ |
|
--card: #101425; /* panel */ |
|
--border: #1f2937; /* slate-800 */ |
|
--accent: #60a5fa; /* blue-400 */ |
|
--accent-fg: #0b1020; |
|
--accent-muted: #0b1222; |
|
--shadow: 0 6px 28px rgba(0,0,0,.45); |
|
|
|
--btn-bg: var(--accent); |
|
--btn-fg: #0b1020; |
|
--btn-hover: #93c5fd; /* blue-300 */ |
|
--input-bg: #0e1426; |
|
--input-fg: var(--fg); |
|
--input-border: #25304a; |
|
|
|
color-scheme: dark; |
|
} |
|
|
|
/* -------- Base wiring -------- */ |
|
html, body { |
|
height: 100%; |
|
background: var(--bg); |
|
color: var(--fg); |
|
} |
|
body { |
|
margin: 0; |
|
font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji"; |
|
} |
|
|
|
/* Panels / cards */ |
|
.card { |
|
background: var(--card); |
|
border: 1px solid var(--border); |
|
border-radius: 16px; |
|
box-shadow: var(--shadow); |
|
} |
|
|
|
/* Inputs */ |
|
input[type="text"], |
|
input[type="file"], |
|
select, textarea { |
|
background: var(--input-bg); |
|
color: var(--input-fg); |
|
border: 1px solid var(--input-border); |
|
border-radius: 10px; |
|
padding: 10px 12px; |
|
outline: none; |
|
} |
|
input::file-selector-button { |
|
background: var(--btn-bg); |
|
color: var(--btn-fg); |
|
border: 0; |
|
border-radius: 8px; |
|
padding: 8px 10px; |
|
margin-right: 10px; |
|
cursor: pointer; |
|
} |
|
|
|
/* Buttons */ |
|
.button, button, .btn { |
|
appearance: none; |
|
background: var(--btn-bg); |
|
color: var(--btn-fg); |
|
border: 0; |
|
border-radius: 12px; |
|
padding: 10px 14px; |
|
font-weight: 600; |
|
cursor: pointer; |
|
box-shadow: var(--shadow); |
|
} |
|
.button:hover, button:hover, .btn:hover { |
|
background: var(--btn-hover); |
|
} |
|
|
|
/* Tables */ |
|
table { |
|
width: 100%; |
|
border-collapse: collapse; |
|
background: var(--card); |
|
border: 1px solid var(--border); |
|
border-radius: 12px; |
|
overflow: hidden; |
|
} |
|
th, td { padding: 10px 12px; } |
|
thead th { |
|
text-align: left; |
|
color: var(--muted); |
|
background: color-mix(in oklab, var(--card), var(--border) 35%); |
|
border-bottom: 1px solid var(--border); |
|
} |
|
tbody tr + tr td { border-top: 1px solid var(--border); } |
|
|
|
/* -------- Theme switcher -------- */ |
|
.theme-switch { |
|
display: inline-flex; align-items: center; gap: 8px; |
|
padding: 4px 6px; border-radius: 9999px; |
|
background: var(--card); border: 1px solid var(--border); |
|
} |
|
.theme-switch button { |
|
background: transparent; color: var(--fg); |
|
border: 0; padding: 6px 10px; border-radius: 9999px; |
|
} |
|
.theme-switch button:hover { background: var(--accent-muted); } |
|
.theme-switch .active { |
|
background: var(--accent); color: var(--accent-fg); |
|
} |
|
|
|
/* Small utility */ |
|
.muted { color: var(--muted); }
|
|
|