feat: align motrix-style download UI/actions and stabilize aria2 ops
This commit is contained in:
tongki078
497
src/style.css
497
src/style.css
@@ -120,6 +120,121 @@ body {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.downloads-view {
|
||||
background: #f3f3f5;
|
||||
display: grid;
|
||||
grid-template-columns: 260px minmax(0, 1fr);
|
||||
gap: 22px;
|
||||
padding: 18px 20px;
|
||||
}
|
||||
|
||||
.downloads-view .card {
|
||||
background: #f3f3f5;
|
||||
border: 1px solid #dfdfe4;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.downloads-filter {
|
||||
padding: 16px;
|
||||
align-self: start;
|
||||
min-height: calc(100vh - 40px);
|
||||
}
|
||||
|
||||
.downloads-filter h2 {
|
||||
margin: 2px 0 14px;
|
||||
color: #2a2a2e;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.downloads-filter button {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 7px;
|
||||
background: transparent;
|
||||
color: #3f424a;
|
||||
font-size: 0.98rem;
|
||||
padding: 10px 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.downloads-filter button.active {
|
||||
background: #e9e9ee;
|
||||
color: #5b5fe9;
|
||||
}
|
||||
|
||||
.downloads-main .toolbar {
|
||||
border-bottom: 1px solid #d8d8de;
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.downloads-main h1 {
|
||||
color: #2f3136;
|
||||
font-size: 2.1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.downloads-main .icon-tool.ghost {
|
||||
background: transparent;
|
||||
color: #5f626b;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.downloads-main .icon-tool.ghost:hover {
|
||||
background: #ebecf1;
|
||||
color: #383b42;
|
||||
}
|
||||
|
||||
.downloads-main .task-pane {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.downloads-main .task-card {
|
||||
border: 1px solid #ceced6;
|
||||
border-radius: 10px;
|
||||
background: #f9f9fb;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.downloads-main .file-cell strong {
|
||||
color: #37393f;
|
||||
font-size: 1.08rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.downloads-main .task-actions-pill {
|
||||
background: #f5f5f8;
|
||||
border: 1px solid #dfdfe6;
|
||||
}
|
||||
|
||||
.downloads-main .icon-pill {
|
||||
color: #727782;
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.downloads-main .icon-pill:hover {
|
||||
background: #e7e8ee;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.downloads-main .bar {
|
||||
height: 8px;
|
||||
background: #e0e1ea;
|
||||
}
|
||||
|
||||
.downloads-main .bar span {
|
||||
background: #6268ee;
|
||||
}
|
||||
|
||||
.downloads-main .task-meta-row {
|
||||
color: #757b87;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -135,6 +250,17 @@ h1 { margin: 0; font-size: 1.16rem; font-weight: 600; }
|
||||
|
||||
.toolbar-right { display: flex; align-items: center; gap: 8px; }
|
||||
|
||||
.icon-tool {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 999px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
font-size: 0.96rem;
|
||||
}
|
||||
|
||||
.switcher {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -170,7 +296,7 @@ h1 { margin: 0; font-size: 1.16rem; font-weight: 600; }
|
||||
|
||||
.main-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 280px;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
@@ -193,27 +319,24 @@ h1 { margin: 0; font-size: 1.16rem; font-weight: 600; }
|
||||
color: #e0e3ff;
|
||||
}
|
||||
|
||||
.task-table-wrap { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
|
||||
|
||||
.task-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.84rem;
|
||||
.task-card-list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.task-table th,
|
||||
.task-table td {
|
||||
text-align: left;
|
||||
padding: 9px;
|
||||
border-bottom: 1px solid #2b2f37;
|
||||
.task-card {
|
||||
border: 1px solid #363b45;
|
||||
border-radius: 10px;
|
||||
background: #20242c;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.task-table th {
|
||||
font-size: 0.72rem;
|
||||
color: #8f9ab0;
|
||||
background: #1a1c22;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
.task-card-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.file-cell { display: flex; flex-direction: column; gap: 2px; }
|
||||
@@ -240,8 +363,8 @@ h1 { margin: 0; font-size: 1.16rem; font-weight: 600; }
|
||||
|
||||
.progress-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 8px;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@@ -259,35 +382,45 @@ h1 { margin: 0; font-size: 1.16rem; font-weight: 600; }
|
||||
background: linear-gradient(90deg, #5b86ff, #5860f0);
|
||||
}
|
||||
|
||||
.progress-row small { color: #a8b2c4; font-size: 0.72rem; }
|
||||
|
||||
.empty { text-align: center; color: var(--text-sub); }
|
||||
|
||||
.right-pane {
|
||||
padding: 10px;
|
||||
.task-actions-pill {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 7px;
|
||||
gap: 6px;
|
||||
justify-content: flex-start;
|
||||
background: #262b33;
|
||||
border: 1px solid #3a404c;
|
||||
border-radius: 999px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.right-pane h2 { margin: 0; font-size: 0.98rem; }
|
||||
.right-pane h3 { margin: 6px 0 2px; font-size: 0.86rem; }
|
||||
|
||||
.runtime { margin: 0; font-weight: 700; }
|
||||
.runtime.ok { color: var(--success); }
|
||||
.runtime.off { color: #949db0; }
|
||||
|
||||
.right-pane p { margin: 0; color: #9aa3b8; font-size: 0.8rem; }
|
||||
|
||||
.right-pane label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
font-size: 0.75rem;
|
||||
color: #a3acbe;
|
||||
.icon-pill {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 999px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.task-meta-row {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
color: #a5afc1;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.task-meta-right {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.right-pane input,
|
||||
.add-modal input,
|
||||
.add-modal textarea {
|
||||
height: 33px;
|
||||
@@ -305,7 +438,6 @@ h1 { margin: 0; font-size: 1.16rem; font-weight: 600; }
|
||||
min-height: 92px;
|
||||
}
|
||||
|
||||
.right-pane input:focus,
|
||||
.add-modal input:focus,
|
||||
.add-modal textarea:focus {
|
||||
outline: none;
|
||||
@@ -338,11 +470,19 @@ button.ghost:hover {
|
||||
}
|
||||
|
||||
button.small { padding: 4px 8px; font-size: 0.74rem; }
|
||||
button.tiny { padding: 3px 7px; font-size: 0.72rem; }
|
||||
button.ghost.danger {
|
||||
color: #ffbec8;
|
||||
border-color: #66414a;
|
||||
background: #4b2e35;
|
||||
}
|
||||
button.ghost.danger:hover {
|
||||
background: #5a3640;
|
||||
border-color: #7a4a55;
|
||||
}
|
||||
|
||||
button:disabled { opacity: 0.55; cursor: not-allowed; }
|
||||
|
||||
.engine-actions { display: flex; gap: 7px; margin: 4px 0 6px; }
|
||||
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
@@ -487,11 +627,278 @@ button:disabled { opacity: 0.55; cursor: not-allowed; }
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.settings-content {
|
||||
padding: 16px 18px;
|
||||
}
|
||||
|
||||
.settings-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 208px minmax(0, 1fr);
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.settings-nav {
|
||||
padding: 12px;
|
||||
position: sticky;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.settings-nav h2 {
|
||||
margin: 0;
|
||||
font-size: 1.05rem;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.settings-nav-sub {
|
||||
margin: 8px 0 14px;
|
||||
color: #97a2b9;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.settings-nav button {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 9px;
|
||||
margin-bottom: 8px;
|
||||
padding: 9px 10px;
|
||||
background: #23262d;
|
||||
color: #c9d1e3;
|
||||
}
|
||||
|
||||
.settings-nav button span {
|
||||
display: block;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.settings-nav button small {
|
||||
display: block;
|
||||
margin-top: 1px;
|
||||
color: #919db4;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.settings-nav button.active {
|
||||
border-color: #575ced;
|
||||
background: #2f345e;
|
||||
color: #eef1ff;
|
||||
}
|
||||
|
||||
.settings-nav button.active small {
|
||||
color: #c9d2ff;
|
||||
}
|
||||
|
||||
.settings-panel {
|
||||
padding: 18px 20px;
|
||||
min-height: 640px;
|
||||
}
|
||||
|
||||
.settings-header {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.settings-header h1 {
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.settings-header p {
|
||||
margin: 6px 0 0;
|
||||
color: #98a2b8;
|
||||
font-size: 0.81rem;
|
||||
}
|
||||
|
||||
.settings-form {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
max-width: 760px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.settings-group {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.settings-card-section {
|
||||
border: 1px solid #3a404c;
|
||||
border-radius: 10px;
|
||||
padding: 14px;
|
||||
background: #252a33;
|
||||
}
|
||||
|
||||
.group-title {
|
||||
color: #e5e9f7;
|
||||
font-size: 0.84rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.01em;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.group-title.full-row {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
color: #9aa6bf;
|
||||
font-size: 0.76rem;
|
||||
}
|
||||
|
||||
.theme-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.theme-tile {
|
||||
background: #2d313a;
|
||||
border: 1px solid #464d5b;
|
||||
color: #cdd4e6;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.theme-tile.active {
|
||||
background: #3a3f73;
|
||||
border-color: #646dff;
|
||||
color: #f0f3ff;
|
||||
}
|
||||
|
||||
.settings-group label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
color: #b1b9cb;
|
||||
font-size: 0.79rem;
|
||||
}
|
||||
|
||||
.settings-group input,
|
||||
.settings-group select {
|
||||
height: 33px;
|
||||
border: 1px solid #434955;
|
||||
border-radius: 4px;
|
||||
padding: 7px 10px;
|
||||
font-size: 0.81rem;
|
||||
color: var(--text-main);
|
||||
background: #1b1f27;
|
||||
}
|
||||
|
||||
.settings-group input:focus,
|
||||
.settings-group select:focus {
|
||||
outline: none;
|
||||
border-color: #656cf5;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.settings-group select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
background-image:
|
||||
linear-gradient(45deg, transparent 50%, #8e97aa 50%),
|
||||
linear-gradient(135deg, #8e97aa 50%, transparent 50%);
|
||||
background-position:
|
||||
calc(100% - 14px) calc(50% - 2px),
|
||||
calc(100% - 9px) calc(50% - 2px);
|
||||
background-size: 5px 5px, 5px 5px;
|
||||
background-repeat: no-repeat;
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.settings-group.two-col {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.check-row {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
align-items: center;
|
||||
gap: 6px !important;
|
||||
color: #c1c8d9 !important;
|
||||
}
|
||||
|
||||
.check-row input {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.settings-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #373d49;
|
||||
}
|
||||
|
||||
.folder-picker-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.folder-browse-btn {
|
||||
white-space: nowrap;
|
||||
padding: 7px 12px;
|
||||
min-height: 33px;
|
||||
}
|
||||
|
||||
.settings-placeholder {
|
||||
padding: 20px;
|
||||
background: #242831;
|
||||
border: 1px solid #3a404c;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.settings-placeholder h3 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 0.96rem;
|
||||
}
|
||||
|
||||
.settings-placeholder p {
|
||||
margin: 0;
|
||||
color: #9aa6bf;
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.main-grid { grid-template-columns: 1fr; }
|
||||
.settings-layout { grid-template-columns: 1fr; }
|
||||
.settings-nav {
|
||||
position: static;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
.settings-nav h2,
|
||||
.settings-nav-sub {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.settings-nav button {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.downloads-view {
|
||||
grid-template-columns: 1fr;
|
||||
min-height: auto;
|
||||
}
|
||||
.downloads-filter {
|
||||
min-height: auto;
|
||||
}
|
||||
.app-shell { grid-template-columns: 1fr; }
|
||||
.sidebar { display: none; }
|
||||
.settings-group.two-col {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.theme-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user