05a1941aa3
S3 has no rename, so files, folders and drives kept the name they were made with. s3d copies objects in its own database (the copy points at the same data on Sia), so a rename is a copy to the new name and a delete of the old: quick, and it uses no extra storage. A drive rename makes a new bucket, moves every file, rebuilds public access for the new name (a policy names its bucket) and removes the old one. Names that already exist are refused. Drives on Silent Mode encrypt with keys tied to each name, so their client gets no rename until it can re-encrypt. The drives page and Overview now show how much of the Sia account is used and how much is free. s3d does not report it; the indexer's GET /account does, signed with the app key s3d registered (read from its database for this one request, BLAKE2b-256 + Ed25519 as indexd expects).
423 lines
24 KiB
CSS
423 lines
24 KiB
CSS
:root {
|
|
--bg: #f6f7f8;
|
|
--surface: #ffffff;
|
|
--surface-2: #f0f2f4;
|
|
--border: #dfe3e7;
|
|
--text: #15191d;
|
|
--muted: #5d6873;
|
|
--accent: #1e9e72;
|
|
--accent-ink: #ffffff;
|
|
--accent-soft: #e2f5ed;
|
|
--danger: #c93a3a;
|
|
--danger-soft: #fbe9e9;
|
|
--warn: #b7791f;
|
|
--warn-soft: #fdf3e1;
|
|
--mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
|
|
--radius: 10px;
|
|
color-scheme: light;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg: #0f1214;
|
|
--surface: #171b1f;
|
|
--surface-2: #1e2328;
|
|
--border: #2a3036;
|
|
--text: #e6eaee;
|
|
--muted: #8d98a3;
|
|
--accent: #3ddc97;
|
|
--accent-ink: #06231a;
|
|
--accent-soft: #123327;
|
|
--danger: #ef6b6b;
|
|
--danger-soft: #3a1c1c;
|
|
--warn: #e0a84a;
|
|
--warn-soft: #3a2c14;
|
|
color-scheme: dark;
|
|
}
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html, body { margin: 0; height: 100%; }
|
|
body {
|
|
background: var(--bg); color: var(--text);
|
|
font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
}
|
|
[hidden] { display: none !important; }
|
|
a { color: var(--accent); }
|
|
h1 { font-size: 22px; margin: 0 0 4px; font-weight: 650; }
|
|
h2 { font-size: 16px; margin: 0 0 12px; font-weight: 600; }
|
|
h3 { font-size: 14px; margin: 0 0 8px; font-weight: 600; }
|
|
code, .mono { font-family: var(--mono); font-size: 12.5px; }
|
|
.muted { color: var(--muted); }
|
|
.error { color: var(--danger); }
|
|
.small { font-size: 12.5px; }
|
|
|
|
/* layout */
|
|
.app { display: grid; grid-template-columns: 220px 1fr; min-height: 100%; }
|
|
.sidebar {
|
|
background: var(--surface); border-right: 1px solid var(--border);
|
|
display: flex; flex-direction: column; padding: 16px 12px; gap: 16px;
|
|
position: sticky; top: 0; height: 100vh;
|
|
}
|
|
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; padding: 0 8px; }
|
|
nav { display: flex; flex-direction: column; gap: 2px; }
|
|
nav a {
|
|
color: var(--text); text-decoration: none; padding: 8px 10px; border-radius: 8px;
|
|
}
|
|
nav a:hover { background: var(--surface-2); }
|
|
nav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
|
|
.daemon-pill {
|
|
margin-top: auto; display: flex; align-items: center; gap: 8px;
|
|
padding: 8px 10px; border-radius: 8px; background: var(--surface-2); font-size: 13px;
|
|
}
|
|
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
|
|
.dot.running { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
|
|
.dot.starting, .dot.stopping { background: var(--warn); }
|
|
.dot.crashed { background: var(--danger); }
|
|
|
|
main { padding: 28px 32px 48px; max-width: 1100px; width: 100%; min-width: 0; }
|
|
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
|
|
.page-head p { margin: 0; }
|
|
|
|
.grid { display: grid; gap: 16px; }
|
|
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
|
|
.card {
|
|
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
|
|
padding: 18px 20px;
|
|
}
|
|
.card + .card { margin-top: 16px; }
|
|
.grid > .card + .card { margin-top: 0; }
|
|
|
|
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
|
.row.spread { justify-content: space-between; }
|
|
.stack { display: flex; flex-direction: column; gap: 10px; }
|
|
|
|
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
|
|
dl.kv dt { color: var(--muted); }
|
|
dl.kv dd { margin: 0; overflow-wrap: anywhere; }
|
|
|
|
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; }
|
|
.stat { background: var(--surface-2); border-radius: 8px; padding: 12px 14px; }
|
|
.stat .v { font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; }
|
|
.stat .l { color: var(--muted); font-size: 12.5px; }
|
|
.stat.bad .v { color: var(--danger); }
|
|
|
|
/* controls */
|
|
.btn {
|
|
appearance: none; border: 1px solid var(--border); background: var(--surface);
|
|
color: var(--text); padding: 7px 14px; border-radius: 8px; font: inherit; cursor: pointer;
|
|
display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
|
|
}
|
|
.btn:hover:not(:disabled) { background: var(--surface-2); }
|
|
.btn:disabled { opacity: .5; cursor: default; }
|
|
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
|
|
.btn.primary:hover:not(:disabled) { filter: brightness(1.06); background: var(--accent); }
|
|
.btn.danger { color: var(--danger); }
|
|
.btn.danger:hover:not(:disabled) { background: var(--danger-soft); }
|
|
.btn.small { padding: 3px 9px; font-size: 12.5px; }
|
|
.btn.link { border: none; background: none; color: var(--accent); padding: 0; }
|
|
|
|
input[type=text], input[type=password], input[type=number], input[type=url], select, textarea {
|
|
font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border);
|
|
border-radius: 8px; padding: 7px 10px; width: 100%;
|
|
}
|
|
textarea { resize: vertical; min-height: 70px; }
|
|
input:focus, select:focus, textarea:focus, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
label.field { display: flex; flex-direction: column; gap: 4px; }
|
|
label.field > span { font-weight: 550; font-size: 13px; }
|
|
label.field > small { color: var(--muted); }
|
|
label.check { display: flex; align-items: center; gap: 8px; }
|
|
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; }
|
|
|
|
/* tables */
|
|
table { width: 100%; border-collapse: collapse; }
|
|
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
|
|
th { color: var(--muted); font-weight: 550; font-size: 12.5px; }
|
|
tr:last-child td { border-bottom: none; }
|
|
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
|
|
td.actions { text-align: right; white-space: nowrap; }
|
|
tr.clickable { cursor: pointer; }
|
|
tr.clickable:hover td { background: var(--surface-2); }
|
|
.empty { text-align: center; color: var(--muted); padding: 28px 10px; }
|
|
|
|
.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; background: var(--surface-2); color: var(--muted); }
|
|
.badge.ok { background: var(--accent-soft); color: var(--accent); }
|
|
.badge.warn { background: var(--warn-soft); color: var(--warn); }
|
|
|
|
.banner { border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
|
|
.banner.warn { background: var(--warn-soft); color: var(--text); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); }
|
|
.banner.info { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
|
|
|
|
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 15px; }
|
|
.crumbs button { border: none; background: none; color: var(--accent); cursor: pointer; font: inherit; padding: 2px 4px; border-radius: 4px; }
|
|
.crumbs button:hover { background: var(--surface-2); }
|
|
.crumbs .sep { color: var(--muted); }
|
|
|
|
.dropzone { position: relative; }
|
|
.dropzone.over::after {
|
|
content: "Drop files to upload"; position: absolute; inset: 0; display: grid; place-items: center;
|
|
background: color-mix(in srgb, var(--accent-soft) 85%, transparent); border: 2px dashed var(--accent);
|
|
border-radius: var(--radius); font-weight: 600; color: var(--accent);
|
|
}
|
|
|
|
.uploads { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
|
|
.upload { display: grid; grid-template-columns: 1fr 160px 70px; gap: 10px; align-items: center; font-size: 13px; }
|
|
.bar { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
|
|
.bar > i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .2s; }
|
|
|
|
.logs {
|
|
font-family: var(--mono); font-size: 12px; background: var(--surface); border: 1px solid var(--border);
|
|
border-radius: var(--radius); padding: 12px; height: calc(100vh - 170px); overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
|
|
}
|
|
.logs .err { color: var(--danger); }
|
|
.logs .sys { color: var(--muted); font-style: italic; }
|
|
|
|
.secret { display: flex; gap: 6px; align-items: center; }
|
|
.secret code { background: var(--surface-2); padding: 3px 8px; border-radius: 6px; overflow-wrap: anywhere; }
|
|
pre.snippet { background: var(--surface-2); padding: 10px 12px; border-radius: 8px; overflow: auto; margin: 0; font-family: var(--mono); font-size: 12px; }
|
|
|
|
.phrase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; counter-reset: w; }
|
|
.phrase span { background: var(--surface-2); padding: 6px 8px; border-radius: 6px; font-family: var(--mono); counter-increment: w; }
|
|
.phrase span::before { content: counter(w) ". "; color: var(--muted); }
|
|
|
|
.steps { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
|
|
.steps span { padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 12.5px; }
|
|
.steps span.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
|
|
|
|
/* modal + toasts */
|
|
.modal-backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / .45); display: grid; place-items: center; padding: 16px; z-index: 25; }
|
|
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 22px; width: min(560px, 100%); max-height: 90vh; overflow: auto; }
|
|
.modal h2 { margin-bottom: 14px; }
|
|
.modal .foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
|
|
|
|
.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 20; }
|
|
.toast { background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: 8px; max-width: 380px; box-shadow: 0 6px 20px rgb(0 0 0 / .2); }
|
|
.toast.error { background: var(--danger); color: #fff; }
|
|
|
|
.signin { display: grid; place-items: center; min-height: 100%; padding: 16px; }
|
|
.signin-card { width: min(340px, 100%); display: flex; flex-direction: column; gap: 12px; align-items: stretch; text-align: center; }
|
|
.signin-card img { align-self: center; }
|
|
|
|
.spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; }
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
|
|
.nav-toggle, .brand .here { display: none; }
|
|
|
|
/* Narrow hosts (the Theseus sidebar, phones): one compact bar on top with the
|
|
page name, s3d status and a menu button; the menu folds down over the page. */
|
|
@media (max-width: 760px) {
|
|
.app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
|
|
.sidebar { position: sticky; top: 0; z-index: 5; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center;
|
|
padding: 8px 12px; gap: 8px; border-right: none; border-bottom: 1px solid var(--border); }
|
|
.brand { flex: 1; min-width: 0; padding: 0; font-size: 15px; gap: 8px; }
|
|
.brand img { width: 22px; height: 22px; }
|
|
.brand .here { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-weight: 500; }
|
|
.brand .here:not(:empty)::before { content: "· "; }
|
|
.nav-toggle { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px;
|
|
background: var(--surface); color: var(--text); font: inherit; font-size: 17px; cursor: pointer; }
|
|
/* ☰ opens the menu over the page, from the top-right corner. */
|
|
nav { display: none; position: absolute; top: calc(100% + 4px); right: 10px; z-index: 30; width: min(240px, calc(100vw - 20px));
|
|
flex-direction: column; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
|
|
box-shadow: 0 10px 28px rgb(0 0 0 / .22); }
|
|
.sidebar.nav-open nav { display: flex; }
|
|
.sidebar.nav-open .nav-toggle { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
|
|
nav .nav-sep { display: block; height: 1px; background: var(--border); margin: 6px 4px; }
|
|
nav a.nav-action { display: block; color: var(--muted); }
|
|
.host-controls { display: none; }
|
|
.daemon-pill { margin: 0; padding: 5px 9px; font-size: 12px; }
|
|
main { padding: 16px 14px 40px; }
|
|
.upload { grid-template-columns: 1fr 80px 50px; }
|
|
.hide-sm, .wide-only { display: none; }
|
|
.page-head { margin-bottom: 14px; }
|
|
.page-head > .row { width: 100%; }
|
|
.page-head > .row > label { flex: 1 1 100%; min-width: 0; }
|
|
.page-head h1:only-child, .page-head > div > h1 { display: none; }
|
|
.tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
|
|
.page-head > .row > label > span[style] { width: auto !important; flex: 1; min-width: 0; }
|
|
.card { padding: 14px; }
|
|
h1 { font-size: 19px; }
|
|
th, td { padding: 7px 6px; }
|
|
.modal { padding: 16px; }
|
|
.modal-backdrop { padding: 8px; }
|
|
}
|
|
@media (max-width: 420px) {
|
|
.daemon-pill .label { display: none; }
|
|
.daemon-pill { padding: 8px; }
|
|
}
|
|
|
|
/* Theseus sidebar: widen / open-in-tab controls */
|
|
.host-controls { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
|
|
.host-controls + .daemon-pill { margin-top: 0; }
|
|
@media (max-width: 760px) { .host-controls { display: none; } }
|
|
@media (max-width: 420px) { .host-controls .btn { padding: 3px 7px; } }
|
|
|
|
/* Narrow hosts (Theseus sidebar): never scroll sideways. */
|
|
html, body { overflow-x: hidden; }
|
|
.card { min-width: 0; }
|
|
|
|
/* Get started wizard */
|
|
.wizard { max-width: 720px; }
|
|
.wizard h2 { margin-top: 6px; }
|
|
.wizard-progress { margin-bottom: 18px; }
|
|
.wizard-progress .bar { margin-top: 6px; }
|
|
.wizard-nav { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--border); }
|
|
.wizard-list { margin: 0 0 8px 1.2em; padding: 0; display: grid; gap: 4px; }
|
|
|
|
.account-line { margin-top: 4px; }
|
|
.account-line a { color: var(--accent); }
|
|
|
|
/* Buckets as folder tiles */
|
|
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: 12px; }
|
|
.tile { border: 1px solid var(--border); border-radius: 10px; padding: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; background: var(--surface-2); }
|
|
.tile:hover, .tile:focus-visible { border-color: var(--accent); outline: none; }
|
|
.tile-icon { font-size: 34px; line-height: 1; }
|
|
.tile-name { font-weight: 600; overflow-wrap: anywhere; }
|
|
.tile-actions { display: flex; gap: 6px; margin-top: 4px; }
|
|
|
|
/* Viewer */
|
|
.modal:has(.viewer) { width: min(920px, 100%); }
|
|
.viewer-media { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: 8px; background: var(--surface-2); }
|
|
.viewer-audio { width: 100%; }
|
|
.viewer-text { max-height: 60vh; white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
|
|
/* Drive icon (a bucket): a small disk with a status light */
|
|
.drive-icon { width: 46px; height: 30px; border-radius: 7px; position: relative;
|
|
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
|
|
border: 2px solid var(--muted); box-shadow: inset 0 -7px 0 color-mix(in srgb, var(--muted) 25%, transparent); }
|
|
.drive-icon::after { content: ""; position: absolute; right: 7px; bottom: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
|
|
.tile:hover .drive-icon { border-color: var(--accent); }
|
|
|
|
/* View types: Icons / List / Details */
|
|
.view-bar { display: flex; justify-content: flex-end; margin: -6px 0 8px; }
|
|
.view-bar:empty { display: none; }
|
|
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); }
|
|
.seg button { appearance: none; border: none; background: none; color: var(--muted); font: inherit; font-size: 15px; line-height: 1; padding: 6px 10px; cursor: pointer; }
|
|
.seg button + button { border-left: 1px solid var(--border); }
|
|
.seg button:hover { background: var(--surface-2); color: var(--text); }
|
|
.seg button.on { background: var(--accent-soft); color: var(--accent); }
|
|
|
|
table.files td.name { max-width: 0; width: 100%; white-space: normal; }
|
|
table.files td, table.files th { white-space: nowrap; }
|
|
table.files td.name > * { vertical-align: middle; }
|
|
table.files td.name > .drive-icon { display: inline-block; margin-right: 8px; }
|
|
.cell-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
|
/* File names wrap to two lines at most, then end in "…" */
|
|
.cell-name .label, ul.rows .label { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
|
|
overflow-wrap: anywhere; line-height: 1.35; min-width: 0; }
|
|
.ficon { flex: none; width: 1.4em; text-align: center; }
|
|
.drive-icon.sm { width: 26px; height: 17px; border-radius: 4px; border-width: 1.5px; box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--muted) 25%, transparent); flex: none; }
|
|
.drive-icon.sm::after { width: 4px; height: 4px; right: 4px; bottom: 2px; }
|
|
|
|
ul.rows { list-style: none; margin: 0; padding: 0; }
|
|
ul.rows li { display: flex; align-items: center; gap: 10px; padding: 6px 6px; border-radius: 6px; min-width: 0; }
|
|
ul.rows li + li { border-top: 1px solid var(--border); }
|
|
ul.rows li:hover, ul.rows li:focus-visible { background: var(--surface-2); outline: none; }
|
|
ul.rows .label { flex: 1; }
|
|
ul.rows .meta { color: var(--muted); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
|
|
.clickable { cursor: pointer; }
|
|
tr.clickable:focus-visible td { background: var(--surface-2); }
|
|
tr.clickable:focus-visible { outline: none; }
|
|
|
|
.tile { position: relative; }
|
|
.tile-more { position: absolute; top: 6px; right: 6px; }
|
|
.tile .tile-more .more { opacity: .55; }
|
|
.tile:hover .tile-more .more, .tile:focus-within .tile-more .more { opacity: 1; }
|
|
.tiles.files { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
|
|
.tiles.files .tile { padding: 8px; gap: 4px; align-items: stretch; text-align: center; }
|
|
.tiles.files .tile-name { font-weight: 500; font-size: 13px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
|
|
.thumb { aspect-ratio: 4 / 3; border-radius: 6px; background: var(--surface); display: grid; place-items: center; overflow: hidden; }
|
|
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
|
.big-icon { font-size: 38px; line-height: 1; }
|
|
.usage { display: block; white-space: nowrap; }
|
|
|
|
.more { padding: 1px 8px; font-size: 15px; line-height: 1.2; }
|
|
.menu { position: fixed; z-index: 30; min-width: 150px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
|
|
box-shadow: 0 8px 24px rgb(0 0 0 / .18); padding: 4px; display: flex; flex-direction: column; }
|
|
.menu button { appearance: none; border: none; background: none; color: var(--text); font: inherit; text-align: left; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
|
|
.menu button:hover, .menu button:focus-visible { background: var(--surface-2); outline: none; }
|
|
.menu button.danger { color: var(--danger); }
|
|
|
|
/* Music player, docked at the bottom; stays while you browse */
|
|
.player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: flex; align-items: center; gap: 12px;
|
|
padding: 8px 14px; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgb(0 0 0 / .12); }
|
|
@media (min-width: 761px) { .player { left: 220px; } }
|
|
body.has-player main { padding-bottom: 96px; }
|
|
body.has-player .toasts { bottom: 84px; }
|
|
.pl-controls { display: flex; align-items: center; gap: 2px; flex: none; }
|
|
.pl-btn { appearance: none; border: none; background: none; color: var(--text); font: inherit; font-size: 16px; width: 32px; height: 32px;
|
|
border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
|
|
.pl-btn:hover:not(:disabled) { background: var(--surface-2); }
|
|
.pl-btn:disabled { opacity: .35; cursor: default; }
|
|
.pl-main { width: 38px; height: 38px; background: var(--accent); color: var(--accent-ink); font-size: 15px; }
|
|
.pl-main:hover:not(:disabled) { background: var(--accent); filter: brightness(1.08); }
|
|
.pl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
|
|
.pl-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
|
|
.pl-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
|
|
.pl-where { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 0; min-width: 0; }
|
|
.pl-seek { display: flex; align-items: center; gap: 8px; }
|
|
.pl-seek input { flex: 1; min-width: 0; accent-color: var(--accent); margin: 0; }
|
|
.pl-time { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 2.6em; text-align: center; }
|
|
@media (max-width: 420px) {
|
|
.player { gap: 6px; padding: 6px 8px; }
|
|
.pl-where { display: none; }
|
|
.pl-btn { width: 28px; height: 28px; font-size: 14px; }
|
|
.pl-main { width: 34px; height: 34px; }
|
|
}
|
|
|
|
/* Footer: pithos.sia, the version and the updater (like Aegis's) */
|
|
.brandfoot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 14; height: 28px; display: flex; align-items: center;
|
|
justify-content: space-between; padding: 0 12px; background: var(--surface); border-top: 1px solid var(--border);
|
|
font-size: 11.5px; color: var(--muted); }
|
|
@media (min-width: 761px) { .brandfoot { left: 220px; } }
|
|
.brandlink { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); text-decoration: none; padding: 2px 4px; border-radius: 4px; }
|
|
.brandlink:hover { color: var(--accent); }
|
|
.brandfoot-right { display: inline-flex; align-items: center; gap: 8px; }
|
|
.brandver { font-variant-numeric: tabular-nums; letter-spacing: .3px; }
|
|
.brandcheck { appearance: none; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 2px; font: inherit;
|
|
font-size: 13px; line-height: 1; opacity: .75; }
|
|
.brandcheck:hover { color: var(--accent); opacity: 1; }
|
|
.brandcheck.spin { animation: spin 1s linear infinite; }
|
|
.brandupd { appearance: none; border: 0; font: inherit; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
|
|
background: var(--accent-soft); color: var(--accent); cursor: pointer; white-space: nowrap; }
|
|
.brandupd:disabled { cursor: default; }
|
|
.brandupd.ok, .brandupd.wait { background: var(--surface-2); color: var(--muted); font-weight: 500; }
|
|
.brandupd.err { background: var(--danger-soft); color: var(--danger); font-weight: 500; }
|
|
body.has-foot main { padding-bottom: 64px; }
|
|
body.has-foot .player { bottom: 28px; }
|
|
body.has-foot .toasts { bottom: 44px; }
|
|
body.has-foot.has-player main { padding-bottom: 124px; }
|
|
body.has-foot.has-player .toasts { bottom: 112px; }
|
|
|
|
/* Download / Share as icons on narrow screens */
|
|
.nav-sep, .nav-action { display: none; }
|
|
.narrow-only { display: none; }
|
|
.icon-row { gap: 2px; }
|
|
.btn.icon { padding: 4px 6px; color: var(--muted); }
|
|
.btn.icon:hover:not(:disabled) { color: var(--accent); }
|
|
.btn.icon svg { display: block; }
|
|
.row-actions { display: inline-flex; align-items: center; gap: 2px; flex: none; }
|
|
@media (max-width: 760px) {
|
|
.narrow-only { display: inline-flex; align-items: center; }
|
|
table.files td.actions { padding-left: 2px; }
|
|
}
|
|
|
|
/* Player volume */
|
|
.pl-volume { position: relative; display: flex; align-items: center; gap: 4px; flex: none; }
|
|
.pl-volpop { display: flex; align-items: center; }
|
|
.pl-volpop > .pl-btn { display: none; }
|
|
.pl-vol { width: 90px; accent-color: var(--accent); margin: 0; }
|
|
.pl-volbtn { font-size: 15px; }
|
|
@media (max-width: 760px) {
|
|
.pl-volpop { display: none; position: absolute; bottom: calc(100% + 10px); right: -6px; padding: 8px 10px; gap: 6px;
|
|
background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgb(0 0 0 / .2); }
|
|
.pl-volume.open .pl-volpop { display: flex; }
|
|
.pl-volpop > .pl-btn { display: grid; }
|
|
.pl-vol { width: 120px; }
|
|
}
|
|
/* "More options" disclosure in dialogs */
|
|
details.more-opts > summary { cursor: pointer; color: var(--muted); font-size: 13px; }
|
|
details.more-opts > summary:hover { color: var(--text); }
|
|
|
|
/* Free space on the Sia account */
|
|
.space { margin-top: 6px; max-width: 420px; }
|
|
.space-bar { margin-top: 4px; height: 6px; }
|
|
.space-bar.full > i { background: var(--warn); }
|