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

new ui changes
All checks were successful
Build and Deploy (internal) / Build Transmission Manager Image (push) Successful in 1m27s
Details
Build and Deploy (internal) / Deploy Transmission Manager (internal) (push) Successful in 9s
Details

Browse Source
This commit is contained in:
Jose Henrique
2026-07-08 19:39:58 -03:00
parent eaade84817
commit 44d2f1a5e9
4 changed files with 139 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
web/styles.css
View File

@@ -69,6 +69,17 @@ body {
h1 { margin: 0; font-weight: 700; letter-spacing: -0.02em; }
button { font-family: inherit; }
[hidden], .hidden { display: none !important; }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ---------- Header ---------- */
.app-header {
@@ -181,31 +192,59 @@ button { font-family: inherit; }
.sort-btn:hover { color: var(--text-0); }
.sort-btn.active { color: var(--bg-0); background: var(--accent); }
.toolbar-actions {
display: inline-flex;
align-items: center;
gap: 10px;
margin-left: auto;
}
.interval-control { display: inline-flex; align-items: center; }
.refresh-select {
color-scheme: dark;
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-1);
cursor: pointer;
font-size: 12px;
font-weight: 700;
outline: none;
padding: 7px 9px;
transition: border-color .2s, box-shadow .2s, background .2s, color .2s;
}
.refresh-select:hover {
border-color: var(--border-strong);
color: var(--text-0);
}
.refresh-select:focus {
border-color: var(--border-hover);
box-shadow: 0 0 0 3px var(--accent-soft);
background: var(--bg-3);
}
.refresh-indicator {
display: inline-flex; align-items: center; gap: 7px;
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px;
color: var(--text-3);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
margin-left: auto;
}
.refresh-indicator .dot {
width: 7px; height: 7px; border-radius: 50%;
width: 8px; height: 8px; border-radius: 50%;
background: var(--ok);
box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6);
animation: pulse 2s infinite;
animation: heartbeat 1.6s ease-in-out infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.45); }
70% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
@keyframes heartbeat {
0%, 28%, 70%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.28); opacity: 0.82; }
14% { transform: scale(1.35); box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); opacity: 1; }
42% { transform: scale(1.18); box-shadow: 0 0 0 4px rgba(52, 211, 153, 0); opacity: 0.95; }
}
.refresh-indicator.syncing .dot { background: var(--accent); animation: pulse-fast .7s infinite; }
@keyframes pulse-fast {
0% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.55); }
70% { box-shadow: 0 0 0 5px rgba(0, 212, 255, 0); }
100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0); }
.refresh-indicator.syncing .dot { background: var(--accent); animation: heartbeat-sync .7s ease-in-out infinite; }
@keyframes heartbeat-sync {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.4); opacity: 0.82; }
45% { transform: scale(1.35); box-shadow: 0 0 0 5px rgba(0, 212, 255, 0); opacity: 1; }
}
/* ---------- Torrent list / cards ---------- */
@@ -272,6 +311,8 @@ button { font-family: inherit; }
gap: 10px;
}
.action-btn {
position: relative;
margin-left: 6px;
min-width: 78px;
border: 1px solid var(--border-strong);
border-radius: 999px;
@@ -285,6 +326,17 @@ button { font-family: inherit; }
text-transform: uppercase;
transition: background .15s, border-color .15s, color .15s, transform .15s, opacity .15s;
}
.action-btn::before {
content: "";
position: absolute;
left: -11px;
top: 50%;
width: 1px;
height: 24px;
background: var(--border-strong);
transform: translateY(-50%);
pointer-events: none;
}
.action-btn:hover:not(:disabled) {
border-color: var(--border-hover);
color: var(--text-0);
@@ -422,7 +474,7 @@ button { font-family: inherit; }
.stat-pill { padding: 5px 10px; font-size: 12px; }
.container { padding: 16px 14px 36px; }
.toolbar { gap: 8px; }
.refresh-indicator { margin-left: 0; width: 100%; justify-content: flex-end; }
.toolbar-actions { margin-left: 0; width: 100%; justify-content: flex-end; }
.sort-group { width: 100%; overflow-x: auto; }
.card { padding: 14px; }
.card-top { align-items: flex-start; }