.downloads-view { display: grid; grid-template-columns: 270px minmax(0, 1fr); min-height: 0; height: 100%; overflow: hidden; background: var(--ui-canvas); } .downloads-side-column { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--ui-border); background: var(--ui-surface); } .downloads-sidebar, .downloads-sidebar-status, .downloads-toolbar, .downloads-content, .downloads-footer { user-select: none; } .downloads-copyable, .downloads-search-input, .downloads-rename-input { user-select: text; } .downloads-sidebar { display: flex; flex: 1; flex-direction: column; gap: 14px; height: 100%; min-height: 0; padding: 14px 12px 6px; } .downloads-mode-title { display: flex; min-height: 36px; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid var(--ui-border); border-radius: 6px; color: #0a0f1a; background: #90cdf4; text-align: center; font-weight: 700; } .downloads-sidebar nav button, .downloads-sidebar-actions button { min-height: 36px; border: 1px solid transparent; border-radius: 4px; color: var(--ui-text); background: transparent; text-align: left; } .downloads-sidebar nav button:not(.is-active):hover, .downloads-sidebar-actions button:hover:not(:disabled), .downloads-clipboard-toggle:hover { border-color: var(--ui-border); background: var(--ui-hover); } .downloads-sidebar nav button.is-active { color: #ffffff; background: transparent; } .downloads-sidebar nav { display: grid; gap: 3px; --ui-sliding-selection-background: var(--ui-accent); --ui-sliding-selection-border: transparent; --ui-sliding-selection-radius: 4px; } .downloads-sidebar nav button { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; } .downloads-provider-filter, .downloads-sidebar-search { display: grid; gap: 5px; color: var(--ui-text-muted); font-size: 12px; } .downloads-provider-filter select, .downloads-sidebar-search input, .downloads-schedule-controls input, .downloads-rename-input { height: 36px; border: 1px solid var(--ui-border); border-radius: 5px; padding: 0 10px; color: var(--ui-text); background: var(--ui-input); } .downloads-sidebar-actions { display: grid; gap: 5px; } .downloads-sidebar-actions button { border: 1px solid var(--ui-border); background: var(--ui-input); padding: 0 10px; cursor: pointer; } .downloads-sidebar-actions button:disabled { opacity: 0.45; cursor: default; } .downloads-clipboard-toggle { display: flex; align-items: center; gap: 8px; margin-top: auto; min-height: 36px; padding: 0 8px; border: 1px solid var(--ui-border); border-radius: 4px; background: var(--ui-input); white-space: nowrap; } .downloads-sidebar-status { display: grid; gap: 6px; padding: 12px; border-top: 1px solid var(--ui-border); } .downloads-sidebar-status div { display: flex; justify-content: space-between; gap: 10px; color: var(--ui-text-muted); font-size: 12px; } .downloads-sidebar-status .has-tooltip { cursor: help; } .downloads-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap; } .downloads-sidebar-status strong { color: var(--ui-text); font-weight: 600; text-align: right; } .downloads-rolling-value { display: inline-grid; height: 1.35em; min-width: 0; align-items: center; justify-items: end; overflow: hidden; font-variant-numeric: tabular-nums; line-height: 1.35; } .downloads-rolling-value-layer { grid-area: 1 / 1; min-width: 0; white-space: nowrap; } .downloads-main-column { display: grid; grid-template-rows: auto minmax(0, 1fr) 60px; min-width: 0; min-height: 0; overflow: hidden; } .downloads-toolbar { display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 8px 10px; border-bottom: 1px solid var(--ui-border); background: var(--ui-surface); } .downloads-toolbar button, .downloads-footer button, .downloads-action-cell button, .downloads-collapse-button, .downloads-column-sort { min-height: 36px; height: 36px; border: 1px solid var(--ui-border); border-radius: 5px; padding: 0 10px; color: var(--ui-text); background: var(--ui-modal-secondary); } .downloads-toolbar button:disabled, .downloads-footer button:disabled { opacity: 0.42; } .downloads-toolbar-divider { width: 1px; align-self: stretch; margin: 1px 2px; background: var(--ui-border); } .downloads-toolbar-toggle-all { margin-left: auto; } .downloads-schedule-slot { display: grid; grid-template-columns: 0fr; min-width: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: grid-template-columns 180ms ease, opacity 140ms ease; } .downloads-schedule-slot.is-open { grid-template-columns: 1fr; opacity: 1; pointer-events: auto; } .downloads-schedule-controls { display: flex; align-items: center; gap: 5px; min-width: 0; width: max-content; overflow: hidden; white-space: nowrap; transform: translateX(-10px); transition: transform 180ms ease; } .downloads-schedule-slot.is-open .downloads-schedule-controls { transform: translateX(0); } .downloads-schedule-slot.is-motion-disabled, .downloads-schedule-slot.is-motion-disabled .downloads-schedule-controls { transition: none !important; } .downloads-schedule-controls input, .downloads-schedule-controls select { height: 36px; } .downloads-sidebar-search span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } .downloads-content { min-width: 0; min-height: 0; height: 100%; overflow: hidden; background: var(--ui-canvas); } .downloads-table { --downloads-package-row-height: 40px; --downloads-file-row-height: 38px; width: 100%; height: 100%; min-width: 0; overflow-x: auto; overflow-y: auto; scrollbar-gutter: stable; } .downloads-table-header, .downloads-table-body { box-sizing: border-box; width: 100%; min-width: var(--downloads-table-min-width, 1191px); } .downloads-table-header { display: grid; align-items: center; height: 41px; position: sticky; top: 0; z-index: 2; border-bottom: 1px solid var(--ui-border); color: var(--ui-text); background: var(--ui-table-header); font-size: 11px; font-weight: 700; text-transform: uppercase; } .downloads-table-header, .downloads-package-row, .downloads-item-row { transition-property: none; } .downloads-table-body { overflow: visible; contain: layout style; } .downloads-virtual-spacer { position: relative; height: var(--downloads-virtual-total-height); min-height: 0; transition: height 1500ms cubic-bezier(0.22, 1, 0.36, 1); } .downloads-virtual-row { position: absolute; inset: 0 0 auto 0; height: var(--downloads-virtual-row-height); transform: translateY(var(--downloads-virtual-row-top)); overflow: hidden; transition: height 1500ms cubic-bezier(0.22, 1, 0.36, 1), transform 1500ms cubic-bezier(0.22, 1, 0.36, 1), opacity 1500ms cubic-bezier(0.22, 1, 0.36, 1); } .downloads-table-body.is-download-motion-disabled .downloads-virtual-spacer, .downloads-table-body.is-download-motion-disabled .downloads-virtual-row { transition: none !important; } .downloads-virtual-row > .downloads-package-card { height: var(--downloads-virtual-row-height); } .downloads-disclosure-item-group { width: 100%; } .downloads-package-card { box-sizing: border-box; width: 100%; min-width: 0; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 72%, transparent); border-radius: 0; padding: 0; background: transparent; box-shadow: none; } .downloads-package-card.is-disabled { opacity: 0.58; } .downloads-package-card.is-selected, .downloads-package-card:has(.downloads-package-items-inner > .downloads-item-row:last-child.is-selected) { position: relative; } .downloads-package-items { height: auto; overflow: hidden; opacity: 1; } .downloads-package-items.is-collapsed { height: 0; opacity: 0; pointer-events: none; } .downloads-package-items-inner { min-height: 0; } .downloads-view :where(button, input, select):focus-visible { outline: 1px solid #7B8492; outline-offset: 1px; } .downloads-item-row, .downloads-package-row { display: grid; align-items: center; height: var(--downloads-package-row-height); box-sizing: border-box; width: 100%; min-width: 0; color: var(--ui-text); background: transparent; border-color: var(--ui-border); border-left: 3px solid transparent; contain: layout paint style; content-visibility: auto; contain-intrinsic-size: var(--downloads-package-row-height); } .downloads-item-row { height: var(--downloads-file-row-height); contain-intrinsic-size: var(--downloads-file-row-height); border-top: 1px solid var(--ui-border); color: var(--ui-text-muted); } .downloads-item-row.is-selected, .downloads-package-card.is-selected > .downloads-package-row { position: relative; background: color-mix(in srgb, var(--ui-success) 14%, var(--ui-canvas)); border-left-color: var(--ui-success); } .downloads-item-row.is-selected::before { content: ""; position: absolute; z-index: 1; inset: -1px auto -1px -3px; width: 3px; background: var(--ui-success); pointer-events: none; } .downloads-package-card.is-selected::before { content: ""; position: absolute; z-index: 3; inset: 0 auto auto 0; width: 3px; height: 41px; background: var(--ui-success); pointer-events: none; } .downloads-package-card:has(.downloads-package-items-inner > .downloads-item-row:last-child.is-selected)::after { content: ""; position: absolute; z-index: 3; inset: auto auto -1px 0; width: 3px; height: 1px; background: var(--ui-success); pointer-events: none; } .downloads-package-row:hover, .downloads-item-row:hover { background: var(--ui-hover); } .downloads-item-row.is-selected:hover, .downloads-package-card.is-selected > .downloads-package-row:hover { background: color-mix(in srgb, var(--ui-success) 18%, var(--ui-canvas)); } .downloads-cell-slot { display: flex; align-items: center; justify-content: center; height: 100%; min-width: 0; } .downloads-cell-slot > .downloads-cell { justify-content: center; width: 100%; height: 100%; text-align: center; } .downloads-cell-slot[data-download-column="name"] > .downloads-name-cell { justify-content: flex-start; text-align: left; } .downloads-cell-slot > :is(.downloads-status-cell, .downloads-service-cell) { justify-content: center; text-align: center; } .downloads-cell, .downloads-name-cell { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 0 7px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .downloads-name-cell strong { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .downloads-name-cell .downloads-rename-input { flex: 1 1 auto; width: 100%; min-width: 0; } .downloads-selection-cell, .downloads-action-cell { display: flex; align-items: center; justify-content: center; min-width: 0; } .downloads-hoster-cell { gap: 6px; } .downloads-hoster-icon { display: block; flex: 0 0 18px; width: 18px; height: 18px; object-fit: contain; } .downloads-hoster-icon[data-hoster="rapidgator"] { transform: translateY(-4px) scale(2); } .downloads-selection-cell input[type="checkbox"] { box-sizing: border-box; width: 18px; height: 18px; margin: 0; accent-color: var(--ui-success); cursor: pointer; } .downloads-action-cell button { box-sizing: border-box; width: 30px; height: 30px; min-height: 30px; padding: 0; } .downloads-collapse-button { box-sizing: border-box; flex: 0 0 30px; width: 30px; min-width: 30px; max-width: 30px; height: 30px; min-height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .downloads-name-cell > input[type="checkbox"] { box-sizing: border-box; flex: 0 0 14px; width: 14px; height: 14px; margin: 0; } .downloads-column-header { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; padding: 0 9px; overflow: hidden; white-space: nowrap; text-align: center; text-overflow: ellipsis; touch-action: none; cursor: grab; } .downloads-table.is-column-drag-active [data-download-column] { position: relative; transform: translate3d(var(--downloads-column-drag-x, 0px), 0, 0); transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .downloads-table [data-download-column="name"] { --downloads-column-drag-x: var(--downloads-column-drag-name, 0px); } .downloads-table [data-download-column="size"] { --downloads-column-drag-x: var(--downloads-column-drag-size, 0px); } .downloads-table [data-download-column="progress"] { --downloads-column-drag-x: var(--downloads-column-drag-progress, 0px); } .downloads-table [data-download-column="hoster"] { --downloads-column-drag-x: var(--downloads-column-drag-hoster, 0px); } .downloads-table [data-download-column="account"] { --downloads-column-drag-x: var(--downloads-column-drag-account, 0px); } .downloads-table [data-download-column="prio"] { --downloads-column-drag-x: var(--downloads-column-drag-prio, 0px); } .downloads-table [data-download-column="status"] { --downloads-column-drag-x: var(--downloads-column-drag-status, 0px); } .downloads-table [data-download-column="speed"] { --downloads-column-drag-x: var(--downloads-column-drag-speed, 0px); } .downloads-table [data-download-column="availability"] { --downloads-column-drag-x: var(--downloads-column-drag-availability, 0px); } .downloads-table [data-download-column="added"] { --downloads-column-drag-x: var(--downloads-column-drag-added, 0px); } .downloads-table.is-column-drag-active [data-column-dragging="true"] { --downloads-column-drag-x: var(--downloads-active-drag-x, 0px); z-index: 4; transition: none; cursor: grabbing; } .downloads-table.is-column-drag-active .downloads-column-header[data-column-dragging="true"] { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--ui-text-muted) 58%, transparent), inset -2px 0 0 color-mix(in srgb, var(--ui-text-muted) 58%, transparent); } @media (prefers-reduced-motion: reduce) { .downloads-virtual-spacer { transition-duration: 1500ms !important; } .downloads-virtual-row { transition-duration: 1500ms, 1500ms, 1500ms !important; } .downloads-table.is-column-drag-active [data-download-column] { transition-duration: 220ms !important; } .downloads-table.is-column-drag-active [data-column-dragging="true"] { transition-duration: 0s !important; } } .downloads-table.is-column-drag-motion-disabled.is-column-drag-active [data-download-column] { transition: none !important; } .downloads-column-sort { width: 100%; border: 0; padding: 0; background: transparent; text-align: center; text-transform: inherit; } .downloads-column-header[data-download-column="name"] { justify-content: flex-start; text-align: left; } .downloads-column-header[data-download-column="name"] .downloads-column-sort { text-align: left; } .downloads-column-move-controls { position: absolute; inset: 50% 2px auto auto; display: flex; gap: 2px; padding: 2px; border: 1px solid var(--ui-border); border-radius: 4px; opacity: 0; background: var(--ui-table-header); box-shadow: 0 1px 4px color-mix(in srgb, var(--ui-text) 18%, transparent); pointer-events: none; transform: translateY(-50%); } .downloads-column-header:hover .downloads-column-move-controls, .downloads-column-header:focus-within .downloads-column-move-controls { opacity: 1; pointer-events: auto; } .downloads-column-move-controls button { display: inline-flex; width: 22px; height: 24px; min-height: 24px; align-items: center; justify-content: center; border: 0; border-radius: 3px; padding: 0; color: var(--ui-text); background: var(--ui-modal-secondary); } .downloads-column-move-controls button:hover, .downloads-column-move-controls button:focus-visible { background: var(--ui-hover); } .downloads-link-state { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-text-muted); } .downloads-link-state.online { background: var(--ui-success); } .downloads-link-state.offline { background: var(--ui-danger); } .downloads-link-state.checking { background: var(--ui-warning); } .downloads-availability { display: grid; grid-template-columns: 16px 7ch; gap: 0; justify-content: center; font-weight: 700; } .downloads-availability.has-counts { display: grid; grid-template-columns: 16px 4ch 1ch 3ch auto; font-variant-numeric: tabular-nums; } .downloads-availability-symbol { width: 16px; font-size: 15px; line-height: 1; text-align: center; } .downloads-availability-count.is-online-count { text-align: right; } .downloads-availability-count.is-total-count { text-align: left; } .downloads-availability-separator { text-align: center; } .downloads-availability-label { padding-left: 3px; text-align: left; } .downloads-availability.is-online { color: var(--ui-success-text); } .downloads-availability.is-partial { color: var(--ui-warning-text); } .downloads-availability.is-offline { color: var(--ui-danger-text); } .downloads-availability.is-checking { color: var(--ui-text-muted); } .downloads-meter { position: relative; display: block; width: 100%; height: 20px; overflow: hidden; border: 1px solid var(--ui-border); border-radius: 4px; background: var(--ui-modal-secondary); } .downloads-meter-fill { position: absolute; inset: 0 auto 0 0; width: var(--downloads-progress); background: var(--ui-success); } .downloads-meter-label { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; height: 100%; font-size: 11px; font-weight: 700; } .downloads-meter-label.is-track { clip-path: inset(0 0 0 var(--downloads-progress)); color: var(--ui-progress-track-text, #fff); } .downloads-meter-filled-clip { position: absolute; inset: 0; z-index: 2; clip-path: inset(0 calc(100% - var(--downloads-progress)) 0 0); pointer-events: none; } .downloads-meter-label.is-filled { color: var(--ui-progress-fill-text, #171a1f); } .downloads-status-cell { container-type: inline-size; } .downloads-service-cell { container-type: inline-size; } :is(.downloads-status-full, .downloads-status-compact, .downloads-service-full, .downloads-service-compact) { display: block; width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .downloads-status-compact, .downloads-service-compact { display: none; } .md-shell.is-compact .downloads-content, .md-shell.is-minimum .downloads-content { --downloads-table-min-width: 1016px; --downloads-name-min: 180px; --downloads-size-min: 96px; --downloads-progress-min: 78px; --downloads-hoster-min: 62px; --downloads-service-min: 78px; --downloads-priority-min: 65px; --downloads-status-min: 90px; --downloads-speed-min: 84px; --downloads-availability-min: 82px; --downloads-added-min: 105px; } @container (max-width: 150px) { .downloads-status-full { display: none; } .downloads-status-compact { display: block; } .downloads-service-full { display: none; } .downloads-service-compact { display: block; } } .downloads-empty-state, .downloads-table-message { display: flex; align-items: center; justify-content: center; min-height: 240px; color: var(--ui-text-muted); } .downloads-empty-state > div, .downloads-table-message > div { display: grid; gap: 4px; text-align: center; } .downloads-empty-state strong, .downloads-table-message strong { color: var(--ui-text); } .downloads-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; padding: 0 12px 0 60px; border-top: 1px solid var(--ui-border); color: var(--ui-text-muted); background: var(--ui-surface); font-size: 12px; } @media (max-width: 1366px) { .downloads-view { grid-template-columns: 56px minmax(0, 1fr); } .downloads-side-column { overflow: hidden; } } @media (max-width: 1120px) { .downloads-toolbar, .downloads-footer { overflow-x: auto; } }