ivanch/transmission-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adding velocity control
All checks were successful
Build and Deploy (internal) / Build Transmission Manager Image (push) Successful in 1m28s
Details
Build and Deploy (internal) / Deploy Transmission Manager (internal) (push) Successful in 15s
Details

Browse Source
This commit is contained in:
Jose Henrique
2026-07-09 18:15:27 -03:00
parent 41cc37d85e
commit 44889338c2
5 changed files with 276 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
web/styles.css
View File

@@ -140,6 +140,61 @@ button { font-family: inherit; }
.stat-pill.download .stat-ico { color: var(--accent); }
.stat-pill.upload .stat-ico { color: var(--ok); }
.speed-controls {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
min-width: 0;
}
.speed-toggle {
display: inline-flex;
align-items: center;
gap: 7px;
border: 1px solid var(--border-strong);
border-radius: 999px;
background: var(--bg-2);
color: var(--text-2);
cursor: pointer;
font-size: 11px;
font-weight: 700;
padding: 7px 11px;
white-space: nowrap;
transition: background .15s, border-color .15s, color .15s, opacity .15s;
}
.speed-toggle:hover:not(:disabled) { border-color: var(--border-hover); color: var(--text-0); }
.speed-toggle[aria-pressed="true"] {
background: var(--accent-soft);
border-color: rgba(0, 212, 255, 0.3);
color: var(--accent);
}
.speed-toggle:disabled { cursor: wait; opacity: 0.6; }
.speed-toggle-state {
color: var(--text-3);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.speed-toggle[aria-pressed="true"] .speed-toggle-state { color: var(--text-1); }
.speed-caps { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.speed-cap {
display: inline-flex;
align-items: center;
gap: 4px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--bg-2);
color: var(--text-2);
font-size: 11px;
font-variant-numeric: tabular-nums;
padding: 6px 9px;
white-space: nowrap;
}
.speed-cap strong { color: var(--text-0); font-weight: 700; }
.speed-cap:first-child { color: var(--accent); }
.speed-cap:last-child { color: var(--ok); }
.speed-control-status { color: var(--red); font-size: 11px; max-width: 180px; }
/* ---------- Container / Toolbar ---------- */
.container {
max-width: var(--maxw);
@@ -470,6 +525,7 @@ button { font-family: inherit; }
@media (max-width: 720px) {
.header-inner { flex-wrap: wrap; padding: 12px 16px; gap: 12px; }
.header-stats { width: 100%; }
.speed-controls { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
.stat-pill { padding: 5px 10px; font-size: 12px; }
.container { padding: 16px 14px 36px; }
.toolbar { gap: 8px; }
@@ -484,6 +540,7 @@ button { font-family: inherit; }
@media (max-width: 440px) {
.brand-text h1 { font-size: 15px; }
.stat-pill .stat-label { display: none; }
.speed-control-status { max-width: 100%; width: 100%; }
.card-top { flex-wrap: wrap; }
.card-body { flex-basis: calc(100% - 42px); }
.card-actions { width: 100%; flex-direction: row; justify-content: space-between; }