mirror of
https://github.com/nimbold/Firelink.git
synced 2026-08-12 12:37:04 +00:00
feat(ui): modernize add download window
This commit is contained in:
NimBold
+347
@@ -376,6 +376,353 @@
|
||||
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: translateY(1px);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.app-toast {
|
||||
border: 1px solid hsl(var(--border-modal));
|
||||
border-radius: 8px;
|
||||
|
||||
Reference in New Issue
Block a user