gsadmin/Firelink
1
0
Fork 0
mirror of https://github.com/nimbold/Firelink.git synced 2026-07-26 12:08:27 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
fdca17910a83ee800000ce40a8cc05e7443b4854
Firelink/src/index.css
T
NimBold fdca17910a fix(ui): align cross-platform chrome
2026-07-01 14:29:22 +03:30

1899 lines
43 KiB
CSS
Raw Blame History

@import "tailwindcss";
:root {
/* Default/fallback Light (macOS Light Mode) */
--main-bg: 0 0% 98%;
--sidebar-bg: 0 0% 95% / 0.8;
--sidebar-glass: 0 0% 95% / 0.8;
--border-color: 0 0% 88%;
--item-hover: 0 0% 0% / 0.05;
--item-selected: 211 100% 50%;
--accent-color: 211 100% 50%;
--stripe-bg: 0 0% 0% / 0.04;
--text-primary: 0 0% 10%;
--text-secondary: 0 0% 40%;
--text-muted: 0 0% 55%;
--bg-modal: 0 0% 100%;
--bg-input: 0 0% 100%;
--border-modal: 0 0% 85%;
--surface-raised: 0 0% 100%;
--surface-overlay: 0 0% 100% / 0.95;
--shadow-color: 220 10% 20% / 0.1;
--sidebar-shell-bg: 0 0% 92%;
--sidebar-panel-bg: 0 0% 95%;
--workspace-bg: 0 0% 98%;
--statusbar-bg: 0 0% 96%;
--status-completed: 136 62% 48%;
--status-paused: 0 0% 56%;
--status-downloading: 211 100% 56%;
--status-failed: 0 62% 58%;
--status-queued: 38 92% 50%;
--status-retrying: 50 100% 50%;
--sidebar-border: 0 0% 0% / 0.12;
--sidebar-hover: 0 0% 0% / 0.06;
}
.theme-light {
color-scheme: light;
--main-bg: 0 0% 98%;
--sidebar-bg: 0 0% 95% / 0.8;
--sidebar-glass: 0 0% 95% / 0.8;
--border-color: 0 0% 88%;
--item-hover: 0 0% 0% / 0.05;
--item-selected: 211 100% 50%;
--accent-color: 211 100% 50%;
--stripe-bg: 0 0% 0% / 0.04;
--text-primary: 0 0% 10%;
--text-secondary: 0 0% 40%;
--text-muted: 0 0% 55%;
--bg-modal: 0 0% 100%;
--bg-input: 0 0% 100%;
--border-modal: 0 0% 85%;
--surface-raised: 0 0% 100%;
--surface-overlay: 0 0% 100% / 0.95;
--shadow-color: 220 10% 20% / 0.1;
--sidebar-shell-bg: 0 0% 92%;
--sidebar-panel-bg: 0 0% 95%;
--workspace-bg: 0 0% 98%;
--statusbar-bg: 0 0% 96%;
--sidebar-border: 0 0% 0% / 0.12;
--sidebar-hover: 0 0% 0% / 0.06;
}
.theme-dark {
color-scheme: dark;
--main-bg: 0 0% 11%;
--sidebar-bg: 0 0% 13%;
--sidebar-glass: 0 0% 13%;
--surface-raised: 0 0% 12%;
--surface-overlay: 0 0% 14%;
--border-color: 0 0% 100% / 0.10;
--border-modal: 0 0% 100% / 0.14;
--item-hover: 0 0% 100% / 0.07;
--item-selected: 211 100% 56%;
--accent-color: 211 100% 56%;
--stripe-bg: 0 0% 100% / 0.04;
--text-primary: 0 0% 91%;
--text-secondary: 0 0% 75%;
--text-muted: 0 0% 50%;
--bg-modal: 0 0% 13%;
--bg-input: 0 0% 16%;
--shadow-color: 0 0% 0% / 0.30;
--status-completed: 136 62% 48%;
--status-paused: 0 0% 56%;
--status-downloading: 211 100% 56%;
--status-failed: 0 62% 58%;
--status-queued: 38 95% 55%;
--status-retrying: 50 100% 60%;
--sidebar-shell-bg: 0 0% 11%;
--sidebar-panel-bg: 0 0% 13%;
--workspace-bg: 0 0% 11%;
--statusbar-bg: 0 0% 11%;
--sidebar-border: 0 0% 100% / 0.11;
--sidebar-hover: 0 0% 100% / 0.07;
--add-window-bg: 0 0% 13%;
--add-left-bg: 0 0% 15%;
--add-settings-bg: 0 0% 12%;
--add-section-bg: 0 0% 17%;
--add-control-bg: 0 0% 12%;
--add-preview-bg: 0 0% 14%;
--add-header-bg: 0 0% 17%;
--add-footer-bg: 0 0% 15%;
--add-keyline: 0 0% 100% / 0.11;
--add-keyline-strong: 0 0% 100% / 0.16;
--add-shadow: 0 0% 0% / 0.28;
}
.theme-dracula {
color-scheme: dark;
--main-bg: 231 15% 18%;
--sidebar-bg: 232 14% 23%;
--sidebar-glass: 232 14% 23%;
--surface-raised: 232 14% 23%;
--surface-overlay: 231 15% 20%;
--border-color: 232 10% 55% / 0.24;
--border-modal: 232 10% 65% / 0.26;
--item-hover: 326 100% 74% / 0.10;
--item-selected: 326 100% 74%;
--accent-color: 326 100% 74%;
--stripe-bg: 0 0% 100% / 0.04;
--text-primary: 60 30% 96%;
--text-secondary: 228 14% 74%;
--text-muted: 229 12% 58%;
--bg-modal: 232 14% 23%;
--bg-input: 231 15% 20%;
--shadow-color: 231 20% 8% / 0.35;
--status-completed: 135 94% 65%;
--status-paused: 65 92% 76%;
--status-downloading: 191 97% 77%;
--status-failed: 0 100% 67%;
--status-queued: 38 95% 60%;
--status-retrying: 50 100% 65%;
--sidebar-shell-bg: 231 15% 15%;
--sidebar-panel-bg: 232 14% 23%;
--workspace-bg: 231 15% 18%;
--statusbar-bg: 231 15% 16%;
--sidebar-border: 326 100% 74% / 0.16;
--sidebar-hover: 326 100% 74% / 0.10;
--add-window-bg: 231 15% 18%;
--add-left-bg: 231 15% 20%;
--add-settings-bg: 231 16% 17%;
--add-section-bg: 232 14% 23%;
--add-control-bg: 231 16% 17%;
--add-preview-bg: 231 15% 19%;
--add-header-bg: 232 14% 23%;
--add-footer-bg: 231 15% 19%;
--add-keyline: 228 14% 74% / 0.14;
--add-keyline-strong: 228 14% 74% / 0.22;
--add-shadow: 231 30% 7% / 0.32;
}
.theme-nord {
color-scheme: dark;
--main-bg: 220 16% 22%;
--sidebar-bg: 220 17% 27%;
--sidebar-glass: 220 17% 27%;
--surface-raised: 220 17% 27%;
--surface-overlay: 220 16% 24%;
--border-color: 218 17% 51% / 0.28;
--border-modal: 218 17% 62% / 0.28;
--item-hover: 193 43% 67% / 0.12;
--item-selected: 193 43% 67%;
--accent-color: 193 43% 67%;
--stripe-bg: 0 0% 100% / 0.04;
--text-primary: 218 27% 92%;
--text-secondary: 219 28% 80%;
--text-muted: 218 17% 63%;
--bg-modal: 220 17% 27%;
--bg-input: 220 16% 24%;
--shadow-color: 220 25% 10% / 0.34;
--status-completed: 92 28% 65%;
--status-paused: 40 71% 73%;
--status-downloading: 193 43% 67%;
--status-failed: 354 42% 56%;
--status-queued: 40 71% 60%;
--status-retrying: 50 85% 55%;
--sidebar-shell-bg: 220 18% 18%;
--sidebar-panel-bg: 220 17% 27%;
--workspace-bg: 220 16% 22%;
--statusbar-bg: 220 18% 19%;
--sidebar-border: 193 43% 67% / 0.16;
--sidebar-hover: 193 43% 67% / 0.11;
--add-window-bg: 220 16% 22%;
--add-left-bg: 220 16% 24%;
--add-settings-bg: 220 18% 20%;
--add-section-bg: 220 17% 27%;
--add-control-bg: 220 18% 20%;
--add-preview-bg: 220 16% 23%;
--add-header-bg: 220 17% 27%;
--add-footer-bg: 220 17% 23%;
--add-keyline: 218 17% 75% / 0.15;
--add-keyline-strong: 218 17% 75% / 0.23;
--add-shadow: 220 28% 10% / 0.30;
}
@theme {
--color-sidebar-bg: hsl(var(--sidebar-bg));
--color-sidebar-glass: hsl(var(--sidebar-glass));
--color-main-bg: hsl(var(--main-bg));
--color-accent: hsl(var(--accent-color));
--color-border-color: hsl(var(--border-color));
--color-item-hover: hsl(var(--item-hover));
--color-item-selected: hsl(var(--item-selected));
--color-text-primary: hsl(var(--text-primary));
--color-text-secondary: hsl(var(--text-secondary));
--color-text-muted: hsl(var(--text-muted));
--color-bg-modal: hsl(var(--bg-modal));
--color-bg-input: hsl(var(--bg-input));
--color-border-modal: hsl(var(--border-modal));
--color-surface-raised: hsl(var(--surface-raised));
--color-surface-overlay: hsl(var(--surface-overlay));
--color-bg-context-menu: hsl(var(--surface-overlay));
/* Apple System Fonts */
--font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
@layer base {
html,
body {
width: 100%;
height: 100%;
}
body.is-resizing,
body.is-resizing * {
cursor: col-resize !important;
user-select: none !important;
}
body {
margin: 0;
background-color: transparent;
color: var(--color-text-primary);
font-family: var(--font-sans);
overflow: hidden;
user-select: none;
-webkit-user-select: none;
cursor: default;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background-color 0.2s ease, color 0.2s ease;
}
* {
box-sizing: border-box;
}
button,
input,
select,
textarea {
font: inherit;
}
button {
-webkit-tap-highlight-color: transparent;
}
button:disabled {
cursor: default;
}
input, textarea {
user-select: auto;
-webkit-user-select: auto;
cursor: text;
}
:focus-visible {
outline: 2px solid hsl(var(--accent-color) / 0.5);
outline-offset: 2px;
}
html[data-font-size="small"] { font-size: 13px; }
html[data-font-size="standard"] { font-size: 14px; }
html[data-font-size="large"] { font-size: 16px; }
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--color-border-color);
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-text-muted);
}
::selection {
background: hsl(var(--accent-color) / 0.3);
color: var(--color-text-primary);
}
}
@layer components {
/* macOS Surfaces */
.app-surface {
background: hsl(var(--surface-raised));
border: 1px solid hsl(var(--border-color));
box-shadow:
inset 0 1px 0 hsl(0 0% 100% / 0.055),
0 18px 50px hsl(var(--shadow-color));
border-radius: 10px;
}
.app-card {
background: hsl(var(--surface-raised));
border: 1px solid hsl(var(--border-color));
box-shadow:
inset 0 1px 0 hsl(0 0% 100% / 0.055),
0 18px 50px hsl(var(--shadow-color));
border-radius: 10px;
transition: none;
}
.app-control {
min-height: 28px;
border: 1px solid hsl(var(--border-modal));
border-radius: 6px;
background: hsl(var(--bg-input));
color: hsl(var(--text-primary));
transition: border-color 100ms ease;
}
.app-control:hover:not(:disabled) {
border-color: hsl(var(--text-muted));
}
.app-control:focus {
border-color: var(--color-accent);
box-shadow: 0 0 0 3px hsl(var(--accent-color) / 0.2);
outline: none;
}
.app-button {
display: inline-flex;
min-height: 28px;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid hsl(var(--border-modal));
border-radius: 6px;
background: hsl(var(--bg-input));
color: hsl(var(--text-primary));
font-weight: 500;
font-size: 13px;
transition: background-color 100ms ease, transform 100ms ease;
box-shadow: 0 1px 1px hsl(var(--shadow-color));
}
.app-button:hover:not(:disabled) {
background: hsl(var(--item-hover));
}
.app-button:active:not(:disabled) {
background: hsl(var(--border-color));
transform: scale(0.96);
}
.app-button-primary {
border-color: transparent;
background: var(--color-accent);
color: white;
}
.app-button-primary:hover:not(:disabled) {
background: hsl(var(--accent-color) / 0.9);
}
.app-icon-button {
display: inline-flex;
width: 28px;
height: 28px;
align-items: center;
justify-content: center;
border-radius: 6px;
color: hsl(var(--text-secondary));
transition: background-color 100ms ease, transform 100ms ease;
}
.app-icon-button:hover:not(:disabled) {
background: hsl(var(--item-hover));
color: hsl(var(--text-primary));
}
.app-icon-button:active:not(:disabled) {
background: hsl(var(--border-color));
transform: scale(0.94);
}
.download-cell-right .app-icon-button:hover:not(:disabled) {
background: hsl(var(--accent-color) / 0.15);
color: hsl(var(--accent-color));
}
.download-cell-right .app-icon-button:active:not(:disabled) {
background: hsl(var(--accent-color) / 0.25);
transform: scale(0.94);
}
.app-modal-backdrop {
background: hsl(0 0% 0% / 0.2);
animation: fade-in 150ms ease-out;
}
.app-modal {
background: hsl(var(--surface-overlay));
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
border: 1px solid hsl(var(--border-modal));
border-radius: 12px;
box-shadow: 0 20px 40px hsl(var(--shadow-color));
animation: modal-in 150ms ease-out;
}
/* Add Download window */
.add-download-modal {
--add-surface: hsl(var(--surface-raised) / 0.72);
--add-highlight: hsl(0 0% 100% / 0.08);
background:
linear-gradient(180deg, hsl(var(--surface-overlay) / 0.94), hsl(var(--bg-modal) / 0.98));
backdrop-filter: blur(22px) saturate(1.12);
-webkit-backdrop-filter: blur(22px) saturate(1.12);
border-color: hsl(var(--border-modal));
border-radius: 14px;
box-shadow:
inset 0 1px 0 hsl(0 0% 100% / 0.08),
0 28px 70px hsl(var(--shadow-color)),
0 2px 10px hsl(var(--shadow-color));
}
.add-download-left {
background:
radial-gradient(circle at 18% 0%, hsl(var(--accent-color) / 0.055), transparent 34%),
hsl(var(--main-bg) / 0.56);
}
.add-download-settings {
background: hsl(var(--bg-modal) / 0.7);
}
.add-download-section-title {
color: hsl(var(--text-primary));
font-size: 13px;
font-weight: 650;
letter-spacing: -0.005em;
}
.add-download-section {
border: 1px solid hsl(var(--border-modal));
border-radius: 11px;
background:
linear-gradient(180deg, var(--add-highlight), transparent 38%),
var(--add-surface);
padding: 14px;
box-shadow:
inset 0 1px 0 hsl(0 0% 100% / 0.045),
0 1px 2px hsl(var(--shadow-color));
}
.add-download-control {
min-height: 30px;
border: 1px solid hsl(var(--border-modal));
border-radius: 7px;
background:
linear-gradient(180deg, hsl(0 0% 100% / 0.035), transparent),
hsl(var(--bg-input) / 0.9);
color: hsl(var(--text-primary));
box-shadow:
inset 0 1px 2px hsl(var(--shadow-color)),
0 1px 0 hsl(0 0% 100% / 0.035);
transition:
border-color 120ms ease,
background-color 120ms ease,
box-shadow 120ms ease;
}
.add-download-control:hover:not(:disabled):not(:read-only) {
border-color: hsl(var(--text-muted) / 0.7);
}
.add-download-control:focus,
.add-download-control:focus-visible {
border-color: hsl(var(--accent-color) / 0.9);
outline: none;
box-shadow:
0 0 0 3px hsl(var(--accent-color) / 0.18),
inset 0 1px 2px hsl(var(--shadow-color));
}
.add-download-control:read-only {
background: hsl(var(--bg-input) / 0.62);
}
.add-download-control::placeholder {
color: hsl(var(--text-muted) / 0.82);
}
.add-download-links-input {
border-radius: 10px;
line-height: 1.55;
}
.add-download-link-button {
border-radius: 6px;
color: hsl(var(--accent-color));
padding: 3px 5px;
transition: background-color 120ms ease, color 120ms ease;
}
.add-download-link-button:hover {
background: hsl(var(--accent-color) / 0.1);
}
.add-download-summary-card {
min-width: 0;
padding: 10px 11px;
border: 1px solid hsl(var(--border-modal));
border-radius: 10px;
background:
linear-gradient(145deg, hsl(0 0% 100% / 0.055), transparent 55%),
var(--add-surface);
box-shadow:
inset 0 1px 0 hsl(0 0% 100% / 0.045),
0 1px 2px hsl(var(--shadow-color));
}
.add-download-preview {
border: 1px solid hsl(var(--border-modal));
border-radius: 11px;
background: hsl(var(--bg-input) / 0.35);
box-shadow: inset 0 1px 2px hsl(var(--shadow-color));
}
.add-download-preview-header {
border-bottom: 1px solid hsl(var(--border-modal));
background: hsl(var(--surface-raised) / 0.66);
}
.add-download-preview-row {
transition:
background-color 100ms ease,
border-color 100ms ease,
box-shadow 100ms ease;
}
.add-download-preview-row:hover {
background: hsl(var(--item-hover));
}
.add-download-preview-row.is-selected {
border-color: hsl(var(--accent-color) / 0.34);
background: hsl(var(--accent-color) / 0.11);
box-shadow: inset 3px 0 0 hsl(var(--accent-color) / 0.85);
}
.add-download-preview-row:focus-visible,
.add-download-format-row:focus-visible {
outline: 2px solid hsl(var(--accent-color) / 0.6);
outline-offset: -1px;
}
.add-download-empty {
color: hsl(var(--text-muted) / 0.86);
}
.add-download-media-section {
border-color: hsl(272 70% 62% / 0.28);
background:
radial-gradient(circle at 100% 0%, hsl(272 75% 60% / 0.09), transparent 46%),
var(--add-surface);
}
.add-download-format-row {
border-color: hsl(var(--border-modal));
border-radius: 8px;
background: hsl(var(--bg-input) / 0.7);
transition:
background-color 100ms ease,
border-color 100ms ease,
box-shadow 100ms ease;
}
.add-download-format-row:hover {
background: hsl(var(--item-hover));
border-color: hsl(var(--text-muted) / 0.55);
}
.add-download-format-row.is-selected {
border-color: hsl(272 74% 62% / 0.42);
background: hsl(272 74% 58% / 0.12);
box-shadow: inset 3px 0 0 hsl(272 74% 62% / 0.9);
}
.add-download-select {
appearance: auto;
cursor: default;
}
.add-download-value {
min-width: 25px;
padding: 2px 4px;
border: 1px solid hsl(var(--border-modal));
border-radius: 5px;
background: hsl(var(--bg-input) / 0.68);
}
.add-download-checkbox {
appearance: none;
width: 15px;
height: 15px;
flex: 0 0 15px;
border: 1px solid hsl(var(--border-modal));
border-radius: 4px;
background: hsl(var(--bg-input) / 0.92);
box-shadow: inset 0 1px 1px hsl(var(--shadow-color));
cursor: default;
transition:
border-color 100ms ease,
background-color 100ms ease,
box-shadow 100ms ease;
}
.add-download-checkbox:hover {
border-color: hsl(var(--text-muted) / 0.8);
}
.add-download-checkbox:checked {
border-color: hsl(var(--accent-color));
background-color: hsl(var(--accent-color));
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m2.4 6.2 2.2 2.2 5-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
}
.add-download-checkbox:focus-visible {
outline: none;
box-shadow:
0 0 0 3px hsl(var(--accent-color) / 0.2),
inset 0 1px 1px hsl(var(--shadow-color));
}
.add-download-range {
height: 16px;
accent-color: hsl(var(--accent-color));
}
.add-download-range:disabled {
opacity: 0.42;
}
.add-download-advanced {
padding: 0;
overflow: hidden;
}
.add-download-advanced-toggle {
min-height: 42px;
padding: 0 14px;
border-radius: 10px;
transition: background-color 100ms ease, color 100ms ease;
}
.add-download-advanced-toggle:hover {
background: hsl(var(--item-hover));
color: hsl(var(--accent-color));
}
.add-download-advanced > div {
padding: 0 14px 14px;
}
.add-download-footer {
border-top: 1px solid hsl(var(--border-modal));
background:
linear-gradient(180deg, hsl(0 0% 100% / 0.035), transparent),
hsl(var(--surface-raised) / 0.78);
box-shadow: 0 -1px 0 hsl(0 0% 100% / 0.025);
}
.add-download-button {
display: inline-flex;
min-height: 30px;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid transparent;
border-radius: 7px;
color: hsl(var(--text-primary));
font-weight: 560;
letter-spacing: -0.005em;
transition:
background-color 100ms ease,
border-color 100ms ease,
box-shadow 100ms ease,
transform 70ms ease,
opacity 100ms ease;
}
.add-download-button:active:not(:disabled) {
transform: scale(0.96);
}
.add-download-button-secondary {
border-color: hsl(var(--border-modal));
background:
linear-gradient(180deg, hsl(0 0% 100% / 0.055), transparent),
hsl(var(--bg-input) / 0.88);
box-shadow:
inset 0 1px 0 hsl(0 0% 100% / 0.055),
0 1px 2px hsl(var(--shadow-color));
}
.add-download-button-secondary:hover:not(:disabled) {
border-color: hsl(var(--text-muted) / 0.65);
background:
linear-gradient(hsl(var(--item-hover)), hsl(var(--item-hover))),
hsl(var(--bg-input));
}
.add-download-button-cancel {
color: hsl(var(--text-secondary));
}
.add-download-button-cancel:hover:not(:disabled) {
background: hsl(var(--item-hover));
color: hsl(var(--text-primary));
}
.add-download-button-primary {
border-color: hsl(var(--accent-color) / 0.86);
background:
linear-gradient(180deg, hsl(0 0% 100% / 0.16), transparent 52%),
hsl(var(--accent-color));
color: white;
box-shadow:
inset 0 1px 0 hsl(0 0% 100% / 0.18),
0 1px 2px hsl(var(--accent-color) / 0.32);
}
.add-download-button-primary:hover:not(:disabled) {
background:
linear-gradient(180deg, hsl(0 0% 100% / 0.2), transparent 52%),
hsl(var(--accent-color) / 0.92);
box-shadow:
inset 0 1px 0 hsl(0 0% 100% / 0.2),
0 2px 5px hsl(var(--accent-color) / 0.3);
}
.add-download-button:disabled {
opacity: 0.42;
filter: saturate(0.55);
}
.add-download-button:focus-visible,
.add-download-link-button:focus-visible,
.add-download-advanced-toggle:focus-visible {
outline: 2px solid hsl(var(--accent-color) / 0.65);
outline-offset: 2px;
}
:is(.theme-dark, .theme-dracula, .theme-nord) .add-download-modal {
--add-surface: hsl(var(--add-section-bg));
--add-highlight: transparent;
background: hsl(var(--add-window-bg));
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-color: hsl(var(--add-keyline-strong));
box-shadow:
0 24px 64px hsl(var(--add-shadow)),
0 1px 4px hsl(var(--add-shadow));
}
:is(.theme-dark, .theme-dracula, .theme-nord) .add-download-left {
background: hsl(var(--add-left-bg));
}
:is(.theme-dark, .theme-dracula, .theme-nord) .add-download-settings {
background: hsl(var(--add-settings-bg));
}
:is(.theme-dark, .theme-dracula, .theme-nord) .add-download-section,
:is(.theme-dark, .theme-dracula, .theme-nord) .add-download-summary-card {
border-color: hsl(var(--add-keyline));
background: hsl(var(--add-section-bg));
box-shadow: 0 1px 2px hsl(var(--add-shadow));
}
:is(.theme-dark, .theme-dracula, .theme-nord) .add-download-control {
border-color: hsl(var(--add-keyline));
background: hsl(var(--add-control-bg));
box-shadow: none;
}
:is(.theme-dark, .theme-dracula, .theme-nord) .add-download-control:hover:not(:disabled):not(:read-only) {
border-color: hsl(var(--add-keyline-strong));
background: hsl(var(--add-control-bg));
}
:is(.theme-dark, .theme-dracula, .theme-nord) .add-download-control:focus,
:is(.theme-dark, .theme-dracula, .theme-nord) .add-download-control:focus-visible {
border-color: hsl(var(--accent-color) / 0.88);
box-shadow: 0 0 0 3px hsl(var(--accent-color) / 0.2);
}
:is(.theme-dark, .theme-dracula, .theme-nord) .add-download-control:read-only {
background: hsl(var(--add-control-bg));
}
:is(.theme-dark, .theme-dracula, .theme-nord) .add-download-preview {
border-color: hsl(var(--add-keyline));
background: hsl(var(--add-preview-bg));
box-shadow: none;
}
:is(.theme-dark, .theme-dracula, .theme-nord) .add-download-preview-header {
border-color: hsl(var(--add-keyline));
background: hsl(var(--add-header-bg));
}
:is(.theme-dark, .theme-dracula, .theme-nord) .add-download-media-section {
border-color: hsl(var(--accent-color) / 0.25);
background: hsl(var(--add-section-bg));
}
:is(.theme-dark, .theme-dracula, .theme-nord) .add-download-format-row {
border-color: hsl(var(--add-keyline));
background: hsl(var(--add-control-bg));
}
:is(.theme-dark, .theme-dracula, .theme-nord) .add-download-format-row:hover {
border-color: hsl(var(--add-keyline-strong));
background: hsl(var(--item-hover));
}
:is(.theme-dark, .theme-dracula, .theme-nord) .add-download-value,
:is(.theme-dark, .theme-dracula, .theme-nord) .add-download-checkbox {
border-color: hsl(var(--add-keyline));
background-color: hsl(var(--add-control-bg));
box-shadow: none;
}
:is(.theme-dark, .theme-dracula, .theme-nord) .add-download-checkbox:checked {
border-color: hsl(var(--accent-color));
background-color: hsl(var(--accent-color));
}
:is(.theme-dark, .theme-dracula, .theme-nord) .add-download-footer {
border-color: hsl(var(--add-keyline));
background: hsl(var(--add-footer-bg));
box-shadow: none;
}
:is(.theme-dark, .theme-dracula, .theme-nord) .add-download-button-secondary {
border-color: hsl(var(--add-keyline));
background: hsl(var(--add-section-bg));
box-shadow: none;
}
:is(.theme-dark, .theme-dracula, .theme-nord) .add-download-button-secondary:hover:not(:disabled) {
border-color: hsl(var(--add-keyline-strong));
background: hsl(var(--item-hover));
}
:is(.theme-dark, .theme-dracula, .theme-nord) .add-download-button-primary {
border-color: hsl(var(--accent-color));
background: hsl(var(--accent-color));
box-shadow: none;
}
:is(.theme-dark, .theme-dracula, .theme-nord) .add-download-button-primary:hover:not(:disabled) {
background: hsl(var(--accent-color) / 0.9);
box-shadow: none;
}
:is(.theme-dark, .theme-dracula, .theme-nord) .add-download-button:disabled {
opacity: 0.36;
filter: none;
}
.app-toast-item {
animation: toast-in 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.app-shell {
background: hsl(var(--main-bg));
}
.app-sidebar-shell {
padding: 9px 0 9px 9px;
background: transparent;
}
.sidebar-resize-handle {
position: absolute;
top: 18px;
right: -4px;
bottom: 18px;
z-index: 60;
width: 8px;
cursor: col-resize;
}
.sidebar-resize-handle::after {
content: '';
position: absolute;
top: 0;
right: 3px;
bottom: 0;
width: 1px;
background: transparent;
transition: background-color 100ms ease;
}
.sidebar-resize-handle:hover::after,
body.is-resizing .sidebar-resize-handle::after {
background: hsl(var(--accent-color) / 0.55);
}
.app-sidebar-panel {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
background: hsl(var(--sidebar-panel-bg));
border: 1px solid hsl(var(--sidebar-border));
border-top-left-radius: 18px;
border-bottom-left-radius: 18px;
border-top-right-radius: 17px;
border-bottom-right-radius: 17px;
box-shadow:
inset 0 1px 0 hsl(0 0% 100% / 0.045),
2px 0 10px hsl(0 0% 0% / 0.20);
}
.app-workspace {
background: hsl(var(--workspace-bg));
}
.app-statusbar {
height: 26px;
font-size: 10px;
background: hsl(var(--statusbar-bg));
border-top: 1px solid hsl(var(--border-color));
box-shadow: none;
}
.sidebar-nav-item {
height: 31px;
border-radius: 8px;
padding: 0 12px;
margin-bottom: 2px;
font-size: 12px;
transition: background-color 100ms ease;
}
.sidebar-nav-item[data-active="true"] {
background: hsl(var(--accent-color)) !important;
color: white !important;
box-shadow:
inset 0 1px 0 hsl(0 0% 100% / 0.12),
0 1px 0 hsl(0 0% 0% / 0.10);
}
.sidebar-nav-item[data-active="true"] svg {
color: white !important;
}
.sidebar-nav-item[data-active="true"] .sidebar-count {
color: white !important;
background: hsl(0 0% 100% / 0.16) !important;
}
.sidebar-nav-item:not([data-active="true"]):hover {
background: hsl(var(--sidebar-hover));
color: hsl(var(--text-primary));
}
.sidebar-nav-item svg {
width: 15px;
height: 15px;
}
.sidebar-inner {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.sidebar-top-region {
height: 40px;
flex-shrink: 0;
position: relative;
}
.sidebar-scroll {
flex: 1;
overflow-y: auto;
padding: 6px 10px 10px;
-ms-overflow-style: none;
scrollbar-width: none;
}
.sidebar-scroll::-webkit-scrollbar {
display: none;
}
.sidebar-footer {
flex-shrink: 0;
padding: 7px 10px;
border-top: 1px solid hsl(var(--sidebar-border));
background: hsl(var(--sidebar-hover));
}
.sidebar-settings-button {
height: 31px;
border-radius: 8px;
font-size: 12px;
margin-bottom: 0;
}
.sidebar-section-label {
padding: 0 12px;
margin-bottom: 7px;
font-size: 9px;
line-height: 1;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: hsl(var(--text-muted));
}
.sidebar-section {
margin-bottom: 14px;
}
.sidebar-toggle-button {
position: absolute;
top: 11px;
right: 12px;
z-index: 50;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
color: hsl(var(--text-secondary));
background: transparent;
}
.sidebar-toggle-button:hover {
background: hsl(var(--sidebar-hover));
color: hsl(var(--text-primary));
}
.settings-view,
.settings-scroll {
background: transparent;
}
.settings-toolbar {
border-bottom: 1px solid hsl(var(--border-color));
}
.settings-tab-strip {
padding: 16px 32px;
}
.settings-tab-button {
min-height: 64px;
border-radius: 8px;
transition: none;
}
.settings-tab-button[data-active="true"] {
background: hsl(var(--accent-color));
box-shadow: none;
color: white;
}
.settings-pane {
padding: 0;
background: transparent;
}
.settings-content-shell {
padding: 32px;
}
.settings-title {
margin: 0 0 24px;
font-size: 28px;
line-height: 1.15;
font-weight: 650;
letter-spacing: -0.025em;
}
.settings-section-title {
margin: 0 0 7px 12px;
font-size: 12px;
line-height: 1.2;
font-weight: 600;
color: hsl(var(--text-secondary));
}
.mac-settings-group {
background: hsl(var(--bg-modal));
border-radius: 9px;
border: 1px solid hsl(var(--border-color));
box-shadow: none;
overflow: hidden;
margin-bottom: 24px;
}
.mac-settings-row {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 44px;
padding: 9px 14px;
border-bottom: 1px solid hsl(var(--border-color));
}
.mac-settings-row:last-child {
border-bottom: none;
}
.settings-row-label {
display: flex;
min-width: 0;
flex-direction: column;
gap: 2px;
font-size: 13px;
color: hsl(var(--text-primary));
}
.settings-row-label small {
font-size: 11px;
line-height: 1.25;
font-weight: 400;
color: hsl(var(--text-muted));
}
.settings-radio-group {
display: flex;
flex-direction: column;
gap: 7px;
font-size: 13px;
}
.settings-choice-row {
display: grid;
grid-template-columns: 180px minmax(0, 1fr);
align-items: start;
justify-content: initial;
}
.settings-radio-group label {
display: flex;
align-items: center;
gap: 7px;
}
.settings-radio-group input {
accent-color: hsl(var(--accent-color));
}
.theme-option-grid {
display: grid;
grid-template-columns: repeat(5, minmax(72px, 1fr));
gap: 7px;
width: 100%;
}
.theme-option {
position: relative;
display: flex;
min-width: 0;
min-height: 58px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 7px 6px;
border: 1px solid hsl(var(--border-modal));
border-radius: 7px;
background: hsl(var(--bg-input));
color: hsl(var(--text-secondary));
font-size: 11px;
font-weight: 500;
text-align: center;
}
.theme-option:hover {
background: hsl(var(--item-hover));
color: hsl(var(--text-primary));
}
.theme-option[data-active="true"] {
border-color: hsl(var(--accent-color));
color: hsl(var(--text-primary));
box-shadow: 0 0 0 1px hsl(var(--accent-color));
}
.theme-option input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.theme-option-preview {
display: flex;
width: 30px;
height: 16px;
overflow: hidden;
border: 1px solid hsl(var(--border-modal));
border-radius: 5px;
box-shadow: 0 1px 2px hsl(var(--shadow-color));
}
.theme-option-preview span {
flex: 1;
}
.settings-group-footer {
margin: 0;
padding: 9px 14px;
border-top: 1px solid hsl(var(--border-color));
font-size: 11px;
line-height: 1.35;
color: hsl(var(--text-muted));
}
/* macOS Switch */
.mac-switch {
appearance: none;
width: 36px;
height: 20px;
background: hsl(var(--border-color));
border-radius: 20px;
position: relative;
cursor: default;
outline: none;
transition: background 0.2s ease;
}
.mac-switch::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: white;
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mac-switch:checked {
background: var(--color-accent);
}
.mac-switch:checked::after {
transform: translateX(16px);
}
.downloads-view {
background: hsl(var(--main-bg));
}
.window-controls {
position: fixed;
top: 15px;
left: 22px;
z-index: 60;
display: inline-flex;
align-items: center;
gap: 8px;
-webkit-app-region: no-drag;
pointer-events: auto;
}
.window-control {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
color: hsl(0 0% 10% / 0);
border-radius: 999px;
border: 0.5px solid hsl(0 0% 0% / 0.28);
box-shadow:
inset 0 1px 0 hsl(0 0% 100% / 0.26),
0 1px 2px hsl(0 0% 0% / 0.16);
transition:
filter 120ms ease,
color 120ms ease,
transform 120ms ease;
-webkit-app-region: no-drag;
}
.window-control.close {
background: #ff5f57;
}
.window-control.minimize {
background: #ffbd2e;
}
.window-control.maximize {
background: #28c840;
}
.window-control:hover {
color: hsl(0 0% 8% / 0.68);
filter: saturate(1.14) brightness(1.05);
}
.window-control:active {
transform: scale(0.92);
filter: brightness(0.9);
}
.main-titlebar {
height: 52px;
display: flex;
align-items: center;
padding: 0 18px;
border-bottom: 1px solid hsl(var(--border-color));
background: hsl(var(--statusbar-bg));
}
.main-titlebar--custom-controls-collapsed {
padding-left: 124px;
}
.main-titlebar-title {
font-size: 14px;
font-weight: 700;
color: hsl(var(--text-primary));
letter-spacing: -0.01em;
}
.main-control-group {
margin-left: auto;
height: 28px;
display: inline-flex;
align-items: center;
overflow: hidden;
border-radius: 15px;
border: 1px solid hsl(var(--border-modal));
background: hsl(var(--bg-input));
}
.main-control-button {
width: 30px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
color: hsl(var(--text-secondary));
border-right: 1px solid hsl(var(--border-color));
}
.main-control-button svg {
width: 14px;
height: 14px;
}
.main-control-button:last-child {
border-right: 0;
}
.main-control-button:hover:not(:disabled) {
background: hsl(var(--item-hover));
color: hsl(var(--text-primary));
}
.main-control-button.primary {
color: hsl(var(--accent-color));
}
.main-control-button:disabled {
opacity: 0.38;
}
.downloads-content-header {
height: 58px;
display: flex;
align-items: center;
padding: 0 16px;
background: hsl(var(--main-bg));
}
.downloads-title {
display: flex;
align-items: center;
gap: 9px;
font-size: 17px;
line-height: 1;
font-weight: 700;
color: hsl(var(--text-primary));
letter-spacing: -0.02em;
}
.downloads-count {
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
color: hsl(var(--text-secondary));
background: hsl(var(--item-hover));
}
.downloads-table {
flex: 1;
min-height: 0;
overflow: hidden;
background: hsl(var(--main-bg));
}
.downloads-empty-state {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px;
color: hsl(var(--text-muted));
text-align: center;
}
.downloads-empty-state > svg {
width: 38px;
height: 38px;
margin-bottom: 12px;
stroke-width: 1.35;
color: hsl(var(--text-muted));
}
.downloads-empty-title {
margin-bottom: 5px;
color: hsl(var(--text-secondary));
font-size: 15px;
font-weight: 600;
}
.downloads-empty-description {
max-width: 360px;
font-size: 12px;
line-height: 1.45;
}
.keyboard-symbol {
color: hsl(var(--text-secondary));
font-size: 13px;
font-weight: 600;
}
.download-table-header {
height: 32px;
display: grid;
align-items: center;
column-gap: 0;
padding: 0 16px;
border-bottom: 1px solid hsl(var(--border-color));
color: hsl(var(--text-primary));
font-size: 12px;
font-weight: 600;
}
.download-table-scroll {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
min-width: 0;
overflow-x: hidden;
overflow-y: hidden;
}
.download-table-header,
.download-row {
box-sizing: border-box;
width: 100%;
min-width: 0;
}
.download-table-header > div {
position: relative;
height: 100%;
display: flex;
align-items: center;
min-width: 0;
overflow: hidden;
}
.download-table-header > div > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.download-table-header > div:not(:first-child) {
padding-left: 0;
}
.column-resize-handle {
position: absolute;
top: 0;
right: -4px;
bottom: 0;
z-index: 5;
width: 8px;
cursor: col-resize;
}
.column-resize-handle:hover {
background: hsl(var(--accent-color) / 0.18);
}
.download-table-body {
flex: 1;
min-height: 0;
overflow: hidden;
}
.download-table-list {
height: 100%;
overflow: auto;
display: flex;
flex-direction: column;
}
.download-row {
height: 32px;
display: grid;
align-items: center;
width: 100%;
padding: 0 16px;
margin: 2px 0;
border-radius: 6px;
color: hsl(var(--text-primary));
font-size: 12px;
user-select: none;
-webkit-user-select: none;
}
html[data-list-density="compact"] .download-row,
html[data-list-density="compact"] .download-ghost-row {
height: 26px;
margin-block: 1px;
}
html[data-list-density="relaxed"] .download-row,
html[data-list-density="relaxed"] .download-ghost-row {
height: 40px;
margin-block: 3px;
}
.download-row > div {
min-width: 0;
overflow: hidden;
}
.download-row.is-selected {
background: hsl(var(--accent-color) / 0.15) !important;
}
.download-row:hover {
background: hsl(var(--item-hover));
}
.download-file-cell {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
overflow: hidden;
}
.download-file-name {
display: block;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: hsl(var(--text-primary));
font-weight: 650;
}
.download-cell-truncate {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
overflow: hidden;
}
.download-cell-truncate > span,
.download-cell-right > span {
display: block;
text-align: center;
max-width: 100%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.download-cell-muted {
color: hsl(var(--text-muted));
}
.download-cell-right {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
min-width: 0;
overflow: hidden;
}
.download-empty-row {
color: hsl(var(--text-muted));
}
.download-empty-row .download-file-name {
color: hsl(var(--text-muted));
font-weight: 500;
}
.download-ghost-row {
height: 32px;
margin: 2px 0;
border-radius: 6px;
flex-shrink: 0;
}
.download-ghost-row.striped,
.download-row.striped {
background: hsl(var(--stripe-bg));
}
.download-status-cell {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 0;
overflow: hidden;
}
.download-status-cell > span {
min-width: 0;
max-width: 100%;
flex: 0 0 auto;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 10px;
line-height: 1.2;
font-variant-numeric: tabular-nums;
}
.download-progress-track {
flex: 1 1 auto;
width: auto;
min-width: 0;
height: 14px;
border-radius: 4px;
overflow: hidden;
background: hsl(var(--border-color));
box-shadow: inset 0 1px 1px hsl(0 0% 0% / 0.22);
}
.download-progress-fill {
height: 100%;
border-radius: inherit;
background: hsl(var(--status-downloading));
}
.download-progress-fill.paused {
background: hsl(28 95% 56%);
}
.download-progress-fill.processing {
background: hsl(199 89% 48%);
}
.download-progress-fill.queued {
background: hsl(var(--status-queued));
}
.download-progress-fill.retrying {
background: hsl(var(--status-retrying));
animation: pulse-progress 1.5s ease-in-out infinite;
}
.download-status {
font-weight: 500;
}
.download-status .truncate {
min-width: 0;
}
.download-status-paused {
color: hsl(var(--status-paused));
font-weight: 600;
}
.download-status-completed {
color: hsl(var(--status-completed));
font-weight: 700;
}
.download-status-failed {
color: hsl(var(--status-failed));
font-weight: 700;
}
.download-status-downloading {
color: hsl(var(--status-downloading));
font-weight: 600;
}
.download-status-processing {
color: hsl(199 89% 48%);
font-weight: 600;
}
.download-status-queued {
color: hsl(var(--status-queued));
font-weight: 600;
}
.download-status-retrying {
color: hsl(var(--status-retrying));
font-weight: 600;
}
}
.glass-panel {
background: var(--color-sidebar-glass);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
}
.glass-card {
background: hsl(var(--bg-modal) / 0.8);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--color-border-color);
box-shadow: 0 4px 12px hsl(var(--shadow-color));
border-radius: 8px;
}
.settings-tab-label {
font-size: 11px;
font-weight: 500;
}
@media (max-width: 900px) {
.settings-tab-label {
font-size: 9px;
letter-spacing: -0.01em;
}
.settings-tab-strip {
padding-inline: 20px;
}
.settings-choice-row {
grid-template-columns: 120px minmax(0, 1fr);
}
.theme-option-grid {
grid-template-columns: repeat(3, minmax(76px, 1fr));
}
}
/* Logs Console */
.logs-toolbar {
height: 42px;
border-bottom: 1px solid hsl(var(--border-color));
background: hsl(var(--statusbar-bg));
}
.logs-console {
background: hsl(0 0% 7%);
color: hsl(0 0% 82%);
font-family: "SF Mono", Monaco, "Cascadia Code", "Fira Code", "JetBrains Mono", monospace;
}
.logs-console .log-line {
display: flex;
gap: 8px;
padding: 0 4px;
min-height: 18px;
align-items: baseline;
border-radius: 2px;
white-space: pre-wrap;
word-break: break-all;
}
.logs-console .log-level-tag {
flex-shrink: 0;
font-weight: 600;
min-width: 52px;
font-size: 10px;
}
.logs-console .log-message {
flex: 1;
min-width: 0;
}
.logs-console .log-error .log-level-tag,
.logs-console .log-error .log-message {
color: hsl(0 72% 58%);
}
.logs-console .log-warn .log-level-tag,
.logs-console .log-warn .log-message {
color: hsl(45 100% 50%);
}
.logs-console .log-info .log-level-tag,
.logs-console .log-info .log-message {
color: hsl(0 0% 75%);
}
.logs-console .log-debug .log-level-tag,
.logs-console .log-debug .log-message {
color: hsl(0 0% 45%);
}
.logs-console .log-line:hover {
background: hsl(0 0% 100% / 0.04);
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes pulse-progress {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
@keyframes modal-in {
from { opacity: 0; transform: scale(0.98); }
to { opacity: 1; transform: scale(1); }
}
@keyframes toast-in {
from { opacity: 0; transform: translateY(12px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
Reference in New Issue View Git Blame Copy Permalink