mirror of
https://github.com/nimbold/Firelink.git
synced 2026-08-10 11:37:21 +00:00
fix(properties): stabilize diagnostics and refresh download properties UI
This commit is contained in:
NimBold
+346
@@ -571,6 +571,352 @@ html[data-list-density="relaxed"] {
|
||||
background: hsl(var(--accent-color) / 0.9);
|
||||
}
|
||||
|
||||
.properties-window-shell {
|
||||
--properties-header-surface: hsl(var(--surface-raised) / 0.88);
|
||||
--properties-card-surface: hsl(var(--bg-input) / 0.42);
|
||||
}
|
||||
|
||||
.properties-window-header {
|
||||
background:
|
||||
radial-gradient(circle at 100% 0%, hsl(var(--accent-color) / 0.1), transparent 38%),
|
||||
var(--properties-header-surface);
|
||||
box-shadow: inset 0 -1px 0 hsl(0 0% 100% / 0.025);
|
||||
}
|
||||
|
||||
.properties-window-hero-top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.properties-window-title-block {
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.properties-window-title-line {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
}
|
||||
|
||||
.properties-window-title-line h1 {
|
||||
min-width: 0;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
|
||||
.properties-window-queue {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
margin-top: 5px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.properties-status-pill {
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
min-height: 20px;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
border: 1px solid hsl(var(--border-modal));
|
||||
border-radius: 999px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.properties-status-downloading { color: hsl(var(--status-downloading)); background: hsl(var(--status-downloading) / 0.1); }
|
||||
.properties-status-paused { color: hsl(var(--status-paused)); background: hsl(var(--status-paused) / 0.1); }
|
||||
.properties-status-seeding { color: hsl(262 83% 62%); background: hsl(262 83% 58% / 0.12); }
|
||||
.properties-status-failed { color: hsl(var(--status-failed)); background: hsl(var(--status-failed) / 0.1); }
|
||||
.properties-status-completed { color: hsl(var(--status-completed)); background: hsl(var(--status-completed) / 0.1); }
|
||||
.properties-status-processing { color: hsl(199 89% 58%); background: hsl(199 89% 48% / 0.1); }
|
||||
.properties-status-queued { color: hsl(var(--status-queued)); background: hsl(var(--status-queued) / 0.1); }
|
||||
.properties-status-retrying { color: hsl(var(--status-retrying)); background: hsl(var(--status-retrying) / 0.1); }
|
||||
|
||||
.properties-window-command-bar,
|
||||
.properties-secondary-actions {
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.properties-primary-action {
|
||||
min-height: 32px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 3px 10px hsl(var(--accent-color) / 0.2);
|
||||
}
|
||||
|
||||
.properties-command-button {
|
||||
min-height: 32px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.properties-command-overflow {
|
||||
position: relative;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.properties-command-overflow > summary {
|
||||
list-style: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.properties-command-overflow > summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.properties-command-menu {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
inset-inline-end: 0;
|
||||
top: calc(100% + 7px);
|
||||
display: grid;
|
||||
min-width: 190px;
|
||||
gap: 2px;
|
||||
padding: 5px;
|
||||
border: 1px solid hsl(var(--border-modal));
|
||||
border-radius: 9px;
|
||||
background: hsl(var(--surface-overlay) / 0.98);
|
||||
box-shadow: 0 12px 28px hsl(var(--shadow-color));
|
||||
}
|
||||
|
||||
.properties-command-menu button {
|
||||
display: flex;
|
||||
min-height: 30px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 5px 8px;
|
||||
border-radius: 6px;
|
||||
color: hsl(var(--text-primary));
|
||||
font-size: 12px;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.properties-command-menu button:hover:not(:disabled),
|
||||
.properties-command-menu button:focus-visible {
|
||||
background: hsl(var(--item-hover));
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.properties-window-progress-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.properties-window-progress-track {
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
height: 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
background: hsl(var(--border-color));
|
||||
box-shadow: inset 0 1px 2px hsl(0 0% 0% / 0.25);
|
||||
}
|
||||
|
||||
.properties-window-progress-fill {
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
transition: width 180ms ease;
|
||||
}
|
||||
|
||||
.properties-progress-downloading { background: hsl(var(--status-downloading)); }
|
||||
.properties-progress-paused { background: hsl(var(--status-paused)); }
|
||||
.properties-progress-seeding { background: hsl(262 83% 58%); }
|
||||
.properties-progress-failed { background: hsl(var(--status-failed)); }
|
||||
.properties-progress-completed { background: hsl(var(--status-completed)); }
|
||||
.properties-progress-processing { background: hsl(199 89% 48%); }
|
||||
.properties-progress-queued { background: hsl(var(--status-queued)); }
|
||||
.properties-progress-retrying { background: hsl(var(--status-retrying)); }
|
||||
|
||||
.properties-window-progress-percent {
|
||||
min-width: 42px;
|
||||
color: hsl(var(--text-secondary));
|
||||
font-size: 11px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.properties-window-metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
|
||||
gap: 7px;
|
||||
margin-top: 11px;
|
||||
}
|
||||
|
||||
.properties-metric-card {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid hsl(var(--border-modal) / 0.72);
|
||||
border-radius: 8px;
|
||||
background: hsl(var(--bg-input) / 0.28);
|
||||
}
|
||||
|
||||
.properties-metric-card > svg {
|
||||
flex: 0 0 auto;
|
||||
margin-top: 2px;
|
||||
color: hsl(var(--accent-color));
|
||||
}
|
||||
|
||||
.properties-metric-card > div {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.properties-metric-card span {
|
||||
overflow: hidden;
|
||||
color: hsl(var(--text-muted));
|
||||
font-size: 10px;
|
||||
font-weight: 650;
|
||||
letter-spacing: 0.025em;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.properties-metric-card strong {
|
||||
overflow: hidden;
|
||||
color: hsl(var(--text-primary));
|
||||
font-size: 12px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: 650;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.properties-window-destination {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: 10px;
|
||||
color: hsl(var(--text-muted));
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.properties-window-destination span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
direction: ltr;
|
||||
text-align: start;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.properties-window-panel {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.properties-window-panel .app-control {
|
||||
min-height: 34px;
|
||||
padding: 7px 11px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.properties-window-panel textarea.app-control {
|
||||
min-height: 104px;
|
||||
resize: vertical;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.properties-window-panel label:not(:has(> input[type="checkbox"])) {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.properties-window-panel label:not(:has(> input[type="checkbox"])) > .app-control {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.properties-window-panel label:has(> input[type="checkbox"]) {
|
||||
min-width: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.properties-window-panel label:has(> input[type="checkbox"]) input {
|
||||
flex: 0 0 auto;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.properties-window-panel > div > p,
|
||||
.properties-window-panel .text-text-muted {
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.properties-window-panel table th,
|
||||
.properties-window-panel table td {
|
||||
padding-inline: 10px;
|
||||
padding-block: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.properties-window-hero-top {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
gap: 11px;
|
||||
}
|
||||
|
||||
.properties-window-command-bar {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.properties-secondary-actions {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.properties-command-overflow {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.properties-window-metrics {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 440px) {
|
||||
.properties-window-header {
|
||||
padding-inline: 14px;
|
||||
}
|
||||
|
||||
.properties-window-panel {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.properties-window-metrics {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.properties-command-label {
|
||||
max-width: 26vw;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.properties-window-progress-fill {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.app-icon-button {
|
||||
display: inline-flex;
|
||||
width: 28px;
|
||||
|
||||
Reference in New Issue
Block a user