feat: external capture queue and modal-first add flow (v0.1.1)
This commit is contained in:
331
src/style.css
331
src/style.css
@@ -235,6 +235,11 @@ body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.downloads-main {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -294,6 +299,46 @@ h1 { margin: 0; font-size: 1.16rem; font-weight: 600; }
|
||||
border: 1px solid rgba(39, 180, 122, 0.3);
|
||||
}
|
||||
|
||||
.app-toast {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 26px;
|
||||
transform: translateX(-50%);
|
||||
z-index: 160;
|
||||
min-width: 240px;
|
||||
max-width: 420px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
font-size: 0.82rem;
|
||||
border: 1px solid transparent;
|
||||
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
|
||||
pointer-events: none;
|
||||
animation: toast-in 180ms ease-out;
|
||||
}
|
||||
|
||||
.app-toast.success {
|
||||
background: #1f3a2f;
|
||||
border-color: #2e7050;
|
||||
color: #c2f1da;
|
||||
}
|
||||
|
||||
.app-toast.error {
|
||||
background: #4c2a31;
|
||||
border-color: #7a434f;
|
||||
color: #ffd3da;
|
||||
}
|
||||
|
||||
@keyframes toast-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(12px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.main-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
@@ -421,6 +466,187 @@ h1 { margin: 0; font-size: 1.16rem; font-weight: 600; }
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.task-info-panel {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: min(640px, 100%);
|
||||
height: 100%;
|
||||
background: #2f333a !important;
|
||||
border: 1px solid #4a4f5b !important;
|
||||
z-index: 30;
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 1fr auto;
|
||||
}
|
||||
|
||||
.task-info-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid #4a4f5b;
|
||||
}
|
||||
|
||||
.task-info-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
color: #d9deeb;
|
||||
}
|
||||
|
||||
.task-info-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid #4a4f5b;
|
||||
}
|
||||
|
||||
.task-info-tabs button {
|
||||
min-width: 34px;
|
||||
height: 32px;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
color: #9da8be;
|
||||
border-radius: 6px;
|
||||
padding: 0;
|
||||
font-weight: 700;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.task-info-tabs button.active {
|
||||
color: #dfe3ff;
|
||||
border-color: #5b62f3;
|
||||
background: #3a3f73;
|
||||
}
|
||||
|
||||
.task-info-body {
|
||||
padding: 12px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.task-info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 110px minmax(0, 1fr);
|
||||
gap: 10px 12px;
|
||||
align-items: center;
|
||||
font-size: 0.84rem;
|
||||
color: #d3d9e8;
|
||||
}
|
||||
|
||||
.task-info-grid .k {
|
||||
color: #aab4c8;
|
||||
}
|
||||
|
||||
.task-info-divider {
|
||||
margin: 14px 0 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid #4a4f5b;
|
||||
color: #bcc6da;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.inline-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.piece-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(24, 1fr);
|
||||
gap: 3px;
|
||||
padding: 8px;
|
||||
border: 1px solid #4a4f5b;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.piece-grid span {
|
||||
height: 9px;
|
||||
border-radius: 2px;
|
||||
background: #555b68;
|
||||
}
|
||||
|
||||
.piece-grid span.done {
|
||||
background: #35bf57;
|
||||
}
|
||||
|
||||
.task-info-progress-row {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.task-info-list {
|
||||
border: 1px solid #4a4f5b;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
background: #2b2f36;
|
||||
min-height: 240px;
|
||||
max-height: 560px;
|
||||
overflow: auto;
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.task-info-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.8rem;
|
||||
border: 1px solid #4a4f5b;
|
||||
}
|
||||
|
||||
.task-info-table th,
|
||||
.task-info-table td {
|
||||
border-bottom: 1px solid #454a56;
|
||||
padding: 8px;
|
||||
color: #cfd7e8;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.task-info-table th {
|
||||
background: #252930;
|
||||
color: #aeb8cc;
|
||||
}
|
||||
|
||||
.task-info-files-meta {
|
||||
margin-top: 8px;
|
||||
text-align: right;
|
||||
color: #98a2b8;
|
||||
font-size: 0.76rem;
|
||||
}
|
||||
|
||||
.task-info-slide-enter-active,
|
||||
.task-info-slide-leave-active {
|
||||
transition: transform 180ms ease, opacity 180ms ease;
|
||||
}
|
||||
|
||||
.task-info-slide-enter-from,
|
||||
.task-info-slide-leave-to {
|
||||
transform: translateX(16px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.task-info-footer {
|
||||
border-top: 1px solid #4a4f5b;
|
||||
padding: 10px 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.task-info-actions-pill {
|
||||
display: inline-flex;
|
||||
gap: 6px;
|
||||
justify-content: flex-start;
|
||||
background: #343844;
|
||||
border: 1px solid #505662;
|
||||
border-radius: 999px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.add-modal input,
|
||||
.add-modal textarea {
|
||||
height: 33px;
|
||||
@@ -622,11 +848,65 @@ button:disabled { opacity: 0.55; cursor: not-allowed; }
|
||||
.modal-footer {
|
||||
border-top: 1px solid #484f5b;
|
||||
padding: 10px 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.modal-footer-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.modal-advanced {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
border-top: 1px solid #3f4450;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.proxy-help-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.proxy-help-row a {
|
||||
color: #a8b2c8;
|
||||
font-size: 0.74rem;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.proxy-help-row a:hover {
|
||||
color: #d4dcf2;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.modal-advanced-toggle {
|
||||
font-size: 0.8rem;
|
||||
color: #c5cee2 !important;
|
||||
}
|
||||
|
||||
.modal-advanced-toggle input {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.expand-advanced-enter-active,
|
||||
.expand-advanced-leave-active {
|
||||
transition: opacity 140ms ease, transform 140ms ease;
|
||||
}
|
||||
|
||||
.expand-advanced-enter-from,
|
||||
.expand-advanced-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(6px);
|
||||
}
|
||||
|
||||
.settings-content {
|
||||
padding: 16px 18px;
|
||||
}
|
||||
@@ -776,7 +1056,8 @@ button:disabled { opacity: 0.55; cursor: not-allowed; }
|
||||
}
|
||||
|
||||
.settings-group input,
|
||||
.settings-group select {
|
||||
.settings-group select,
|
||||
.settings-group textarea {
|
||||
height: 33px;
|
||||
border: 1px solid #434955;
|
||||
border-radius: 4px;
|
||||
@@ -787,12 +1068,19 @@ button:disabled { opacity: 0.55; cursor: not-allowed; }
|
||||
}
|
||||
|
||||
.settings-group input:focus,
|
||||
.settings-group select:focus {
|
||||
.settings-group select:focus,
|
||||
.settings-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: #656cf5;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.settings-group textarea {
|
||||
min-height: 66px;
|
||||
height: auto;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.settings-group select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
@@ -848,6 +1136,45 @@ button:disabled { opacity: 0.55; cursor: not-allowed; }
|
||||
min-height: 33px;
|
||||
}
|
||||
|
||||
.inline-action-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.input-action-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.muted-line {
|
||||
color: #97a2ba;
|
||||
font-size: 0.74rem;
|
||||
}
|
||||
|
||||
.rpc-helper {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.rpc-test-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.rpc-ok {
|
||||
color: #8ad9af;
|
||||
}
|
||||
|
||||
.rpc-fail {
|
||||
color: #f0a3b1;
|
||||
}
|
||||
|
||||
.settings-placeholder {
|
||||
padding: 20px;
|
||||
background: #242831;
|
||||
|
||||
Reference in New Issue
Block a user