360 lines
15 KiB
CSS
360 lines
15 KiB
CSS
#find-models-launcher {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
margin-inline: 4px;
|
|
padding: 7px 12px;
|
|
border: 1px solid #4b5563;
|
|
border-radius: 8px;
|
|
color: #e5e7eb;
|
|
background: #24262b;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
transition: 0.15s ease;
|
|
}
|
|
|
|
#find-models-launcher:hover { background: #30333a; border-color: #6b7280; }
|
|
#find-models-launcher.has-missing { color: #fff; background: #7f1d1d; border-color: #ef4444; }
|
|
#find-models-launcher.toolbar-fallback { position: fixed; top: 8px; right: 220px; z-index: 1000; }
|
|
|
|
#find-models-panel {
|
|
--fm-bg: #0d1116;
|
|
--fm-surface: #141920;
|
|
--fm-surface-raised: #191f28;
|
|
--fm-line: #303742;
|
|
--fm-muted: #929baa;
|
|
--fm-text: #edf1f7;
|
|
display: none;
|
|
position: fixed;
|
|
top: 12px;
|
|
right: 12px;
|
|
z-index: 1001;
|
|
width: min(600px, calc(100vw - 24px));
|
|
height: calc(100vh - 24px);
|
|
max-height: calc(100vh - 24px);
|
|
box-sizing: border-box;
|
|
padding: 0 16px 18px;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
color: var(--fm-text);
|
|
background: radial-gradient(circle at 78% 0%, #1c212b 0, #11151b 36%, var(--fm-bg) 100%);
|
|
border: 1px solid #343b48;
|
|
border-radius: 8px;
|
|
box-shadow: 0 24px 80px #000c;
|
|
font: 13px/1.45 Inter, ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
|
|
#find-models-panel.open { display: block; }
|
|
#find-models-panel.native-docked {
|
|
display: block;
|
|
position: relative;
|
|
inset: auto;
|
|
width: 100% !important;
|
|
height: 100%;
|
|
max-height: none;
|
|
margin: 0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
#find-models-panel button {
|
|
padding: 6px 9px;
|
|
color: #e5e7eb;
|
|
background: #292f39;
|
|
border: 1px solid #4b5361;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#find-models-panel button:hover { background: #373e49; border-color: #697382; }
|
|
#find-models-panel button:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
#find-models-panel::-webkit-scrollbar { width: 8px; }
|
|
#find-models-panel::-webkit-scrollbar-thumb {
|
|
border: 2px solid transparent;
|
|
border-radius: 999px;
|
|
background: #4a5363;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
.fm-header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 5;
|
|
display: flex;
|
|
min-height: 36px;
|
|
margin: 0 -16px;
|
|
padding: 14px 16px;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: #11151bef;
|
|
border-bottom: 1px solid var(--fm-line);
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
|
|
.fm-header-copy { display: grid; gap: 2px; min-width: 0; }
|
|
.fm-header-copy strong { font-size: 18px; letter-spacing: 0.2px; }
|
|
.fm-header-copy span { display: none; }
|
|
.fm-window-actions { display: flex; gap: 6px; }
|
|
.fm-window-actions button { padding: 2px 8px !important; border: 0 !important; background: transparent !important; font-size: 17px; }
|
|
|
|
.fm-resize-handle {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: -5px;
|
|
z-index: 8;
|
|
width: 10px;
|
|
cursor: ew-resize;
|
|
}
|
|
|
|
.fm-resize-handle::after {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 5px;
|
|
width: 1px;
|
|
background: transparent;
|
|
content: "";
|
|
}
|
|
|
|
.fm-resize-handle:hover::after { width: 2px; background: #7470ff; }
|
|
#find-models-panel.native-docked .fm-resize-handle { display: none; }
|
|
|
|
.fm-scan-state {
|
|
display: flex;
|
|
margin: 12px 0 6px;
|
|
padding: 10px 12px;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: #aeb7c5;
|
|
background: linear-gradient(90deg, #171d25, #141920);
|
|
border: 1px solid #29313c;
|
|
border-radius: 9px;
|
|
}
|
|
|
|
.fm-scan-state [data-scan-status] { flex: 1; min-width: 0; }
|
|
.fm-scan-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #4e93ff; box-shadow: 0 0 0 4px #4e93ff18; }
|
|
|
|
.fm-tabs {
|
|
position: sticky;
|
|
top: 64px;
|
|
z-index: 4;
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
margin: 0 -16px 14px;
|
|
padding: 8px 16px 0;
|
|
background: #10141aee;
|
|
border-bottom: 1px solid #343b46;
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
|
|
.fm-tabs button {
|
|
display: flex;
|
|
min-width: 0;
|
|
padding: 12px 4px !important;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
color: #9ca3af !important;
|
|
background: transparent !important;
|
|
border: 0 !important;
|
|
border-bottom: 2px solid transparent !important;
|
|
border-radius: 0 !important;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.fm-tabs button.active,
|
|
.fm-tabs button:hover { color: #dfe5ff !important; border-bottom-color: #746dff !important; }
|
|
.fm-tabs .fm-tab-icon { display: none; }
|
|
.fm-tabs .fm-tab-label { overflow: hidden; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
|
|
.fm-tabs button b,
|
|
.fm-section-toolbar em {
|
|
display: inline-grid;
|
|
min-width: 18px;
|
|
height: 18px;
|
|
padding: 0 4px;
|
|
place-items: center;
|
|
color: #fff;
|
|
background: #e4515c;
|
|
border-radius: 5px;
|
|
font-size: 11px;
|
|
font-style: normal;
|
|
}
|
|
|
|
.fm-summary { display: flex; margin: 8px 0 18px; padding: 0 2px; align-items: center; gap: 9px; color: #939dab; font-size: 12px; }
|
|
.fm-summary i { width: 1px; height: 14px; margin: 0 4px; background: #3b424d; }
|
|
.fm-summary-ok { display: grid; width: 17px; height: 17px; place-items: center; color: #57d475; border: 1px solid #3db55e; border-radius: 50%; }
|
|
.fm-tab-panel { display: none; min-height: 360px; padding: 4px 0 16px; animation: fm-fade-in 0.16s ease-out; }
|
|
.fm-tab-panel.active { display: block; }
|
|
|
|
.fm-section-toolbar { display: flex; margin: 0 0 10px; align-items: flex-start; justify-content: space-between; gap: 12px; }
|
|
.fm-section-toolbar > div { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
|
|
.fm-section-toolbar > div:first-child { align-items: baseline; }
|
|
.fm-section-toolbar > div:first-child strong { font-size: 16px; }
|
|
.fm-section-toolbar > div:first-child span { display: none; }
|
|
.fm-section-toolbar > div:last-child { justify-content: flex-end; }
|
|
.fm-section-toolbar button { min-height: 34px; padding: 7px 12px !important; }
|
|
.fm-primary { color: #fff !important; background: linear-gradient(135deg, #5962f4, #765cff) !important; border-color: #6863ff !important; box-shadow: 0 5px 18px #615cff35; }
|
|
.fm-primary:hover { background: linear-gradient(135deg, #6870ff, #846cff) !important; }
|
|
|
|
.fm-table-head {
|
|
display: grid;
|
|
grid-template-columns: minmax(170px, 1.2fr) minmax(150px, 1fr) minmax(160px, auto);
|
|
padding: 9px 11px;
|
|
gap: 10px;
|
|
color: #9aa5b4;
|
|
background: #1b2028;
|
|
border: 1px solid var(--fm-line);
|
|
border-bottom: 0;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.fm-table-foot { padding: 6px 12px; color: #8c96a5; background: #1a1f27; border: 1px solid var(--fm-line); border-top: 0; text-align: center; font-size: 11px; }
|
|
.fm-model-list,
|
|
.fm-node-list { display: block !important; min-height: 0; }
|
|
|
|
.fm-item,
|
|
.fm-model-card {
|
|
display: grid !important;
|
|
grid-template-columns: minmax(170px, 1.2fr) minmax(150px, 1fr) minmax(160px, auto);
|
|
min-height: 0;
|
|
margin: 0;
|
|
padding: 10px 11px;
|
|
align-items: center;
|
|
gap: 5px 10px;
|
|
background: var(--fm-surface);
|
|
border: 1px solid var(--fm-line);
|
|
border-radius: 0;
|
|
}
|
|
|
|
.fm-item + .fm-item { border-top: 0; }
|
|
.fm-missing { border-color: #5b2a2e; }
|
|
.fm-adaptable { border-color: #5b4723; }
|
|
.fm-item-title { display: flex; min-width: 0; grid-column: 1; align-items: center; gap: 7px; }
|
|
.fm-item-title .fm-status-icon { display: none; }
|
|
.fm-item-title strong { flex: 0 1 auto; min-width: 0; overflow: visible; color: #f3f4f6; font-size: 12px; font-weight: 600; overflow-wrap: anywhere; word-break: break-all; white-space: normal; }
|
|
.fm-copy-name { width: 22px; height: 22px; flex: 0 0 22px; padding: 0 !important; overflow: hidden; color: #b7bbc4 !important; background: transparent !important; border-color: transparent !important; font-size: 0 !important; }
|
|
.fm-copy-name::before { content: "⧉"; font-size: 13px; line-height: 20px; }
|
|
.fm-copy-name:hover { color: #fff !important; border-color: #6b7280 !important; }
|
|
.fm-status-icon { display: inline-grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; color: #fff; background: #dc2626; border-radius: 50%; font-weight: 700; }
|
|
.fm-meta { display: flex; min-width: 0; grid-column: 2; margin: 0; align-items: center; flex-wrap: wrap; gap: 5px; color: var(--fm-muted); font-size: 11px; }
|
|
.fm-meta span:nth-child(2) { display: none; }
|
|
.fm-meta [data-model-size] { flex-basis: 100%; }
|
|
.fm-badge { padding: 2px 7px; color: #c7cfda; background: #1d232c; border: 1px solid #3c4552; border-radius: 999px; font-size: 11px; }
|
|
.fm-item-actions { display: flex; grid-column: 3; margin: 0; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
|
|
.fm-model-actions { white-space: nowrap; }
|
|
.fm-local-load,
|
|
.fm-external-move { color: #b9f6c9 !important; background: #193322 !important; border-color: #2f7546 !important; }
|
|
|
|
.fm-match,
|
|
.fm-external-candidates,
|
|
.fm-sources,
|
|
.fm-node-candidates,
|
|
.fm-node-types { grid-column: 1 / -1; margin-top: 5px; }
|
|
.fm-match { padding: 6px 8px; overflow-wrap: anywhere; color: #85df9e; background: #16251c; border: 1px solid #294a34; border-radius: 6px; font-size: 11px; }
|
|
.fm-sources,
|
|
.fm-node-candidates,
|
|
.fm-external-candidates { display: grid; gap: 6px; }
|
|
.fm-source { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 7px; align-items: center; gap: 7px; background: #171d25; border: 1px solid #303844; border-radius: 6px; }
|
|
.fm-source a,
|
|
.fm-source span { overflow-wrap: anywhere; font-size: 11px; }
|
|
.fm-source a,
|
|
.fm-node-actions a,
|
|
.fm-quark-links a { color: #93c5fd; }
|
|
.fm-external-source { background: #16231b; border-color: #315540; }
|
|
.fm-external-source span { min-width: 0; color: #bbf7d0; overflow-wrap: anywhere; word-break: break-word; }
|
|
.fm-external-source .fm-target-warning { grid-column: 1 / -1; }
|
|
.fm-external-source .fm-target-warning,
|
|
.fm-candidate-warning { color: #fbbf24; }
|
|
|
|
.fm-node-list .fm-node-types { grid-column: 1 / 3; }
|
|
.fm-node-list .fm-item-actions { grid-row: 1 / 3; }
|
|
.fm-node-types { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.fm-node-types span { padding: 4px 8px; color: #c8cbd1; background: #171a1f; border-radius: 6px; font-size: 12px; }
|
|
.fm-node-actions,
|
|
.fm-download-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
|
|
.fm-node-install-options { display: grid; margin: 0 0 12px; padding: 10px; gap: 8px; background: #151a21; border: 1px solid var(--fm-line); }
|
|
.fm-node-install-options label { display: flex; align-items: center; gap: 7px; color: #cbd2dc; }
|
|
.fm-node-install-options > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
|
|
.fm-node-install-options input[type="url"],
|
|
.fm-external-config input,
|
|
.fm-quark-auth-config input { min-width: 0; padding: 7px 9px; color: #e5e7eb; background: #10141a; border: 1px solid #444b58; border-radius: 6px; outline: none; }
|
|
|
|
.fm-download-jobs { display: grid; gap: 0; margin: 9px 0 12px; padding: 0; background: var(--fm-surface); border: 1px solid var(--fm-line); }
|
|
.fm-download-job { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; padding: 10px 12px; align-items: center; gap: 10px; color: #86efac; border-bottom: 1px solid var(--fm-line); }
|
|
.fm-download-job:last-child { border-bottom: 0; }
|
|
.fm-download-job-info { display: grid; min-width: 0; gap: 2px; }
|
|
.fm-download-job-info strong { overflow-wrap: anywhere; color: #d1fae5; }
|
|
.fm-download-job-info span { color: #9aa5b4; font-size: 11px; }
|
|
.fm-install-progress { height: 4px; margin-top: 4px; overflow: hidden; background: #26302a; border-radius: 999px; }
|
|
.fm-install-progress i { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, #86efac); border-radius: inherit; transition: width 0.25s ease; }
|
|
.fm-install-progress.active i { position: relative; min-width: 12%; }
|
|
.fm-install-progress.active i::after { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #ffffff55, transparent); content: ""; animation: fm-progress-shine 1.2s linear infinite; }
|
|
.fm-job-kind { align-self: start; padding: 2px 6px; color: #bbf7d0; background: #28543a; border-radius: 999px; font-size: 10px; }
|
|
.fm-job-node { color: #bfdbfe; background: #284561; }
|
|
.fm-download-progress { min-height: 14px; color: #86efac; font-size: 11px; }
|
|
.fm-download-paused { color: #fde68a; background: #292315; }
|
|
.fm-download-cancelled { color: #9ca3af; background: #202126; }
|
|
.fm-download-failed { color: #fca5a5; }
|
|
|
|
.fm-settings-card { display: grid; margin-top: 8px; padding: 12px; gap: 8px; background: #151a21; border: 1px solid var(--fm-line); }
|
|
.fm-settings-card > strong { font-size: 14px; }
|
|
.fm-settings-card > span { color: var(--fm-muted); font-size: 11px; }
|
|
.fm-external-config { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
|
|
.fm-quark-auth-config { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; }
|
|
.fm-quark-libraries { display: grid; gap: 6px; }
|
|
.fm-quark-library { display: flex; padding: 8px; align-items: center; justify-content: space-between; gap: 8px; background: #10151b; border: 1px solid #303844; border-radius: 6px; }
|
|
.fm-quark-library > div { display: grid; min-width: 0; gap: 2px; }
|
|
.fm-quark-library a { overflow-wrap: anywhere; color: #93c5fd; font-size: 11px; }
|
|
.fm-quark-library > span { flex: 0 0 auto; color: #86efac; font-size: 11px; }
|
|
.fm-quark-library > span.failed { color: #fca5a5; }
|
|
.fm-empty { display: grid; min-height: 80px; padding: 24px; place-items: center; gap: 4px; color: var(--fm-muted); background: linear-gradient(145deg, #171a20, #13161b); border: 1px dashed #353c48; }
|
|
.fm-empty strong { color: #e5e7eb; font-size: 15px; }
|
|
|
|
#find-models-panel.native-docked .fm-table-head { display: none; }
|
|
#find-models-panel.native-docked .fm-item,
|
|
#find-models-panel.native-docked .fm-model-card { grid-template-columns: minmax(0, 1fr); gap: 6px; }
|
|
#find-models-panel.native-docked .fm-item-title,
|
|
#find-models-panel.native-docked .fm-meta,
|
|
#find-models-panel.native-docked .fm-match,
|
|
#find-models-panel.native-docked .fm-external-candidates,
|
|
#find-models-panel.native-docked .fm-sources,
|
|
#find-models-panel.native-docked .fm-node-candidates,
|
|
#find-models-panel.native-docked .fm-node-types,
|
|
#find-models-panel.native-docked .fm-item-actions { grid-column: 1 / -1; grid-row: auto; }
|
|
#find-models-panel.native-docked .fm-item-actions { justify-content: flex-start; }
|
|
#find-models-panel.native-docked .fm-node-list .fm-item-actions { grid-row: auto; }
|
|
|
|
@keyframes fm-fade-in {
|
|
from { opacity: 0; transform: translateY(2px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes fm-progress-shine {
|
|
from { transform: translateX(-100%); }
|
|
to { transform: translateX(100%); }
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
#find-models-panel { right: 6px; width: calc(100vw - 12px); }
|
|
.fm-table-head { display: none; }
|
|
.fm-item,
|
|
.fm-model-card { grid-template-columns: minmax(0, 1fr); gap: 6px; }
|
|
.fm-item-title,
|
|
.fm-meta,
|
|
.fm-item-actions,
|
|
.fm-node-list .fm-node-types { grid-column: 1; grid-row: auto; }
|
|
.fm-item-actions { justify-content: flex-start; }
|
|
.fm-section-toolbar { flex-direction: column; }
|
|
.fm-section-toolbar > div:last-child { justify-content: flex-start; }
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
#find-models-panel { right: 0; width: 100vw !important; }
|
|
.fm-resize-handle { display: none; }
|
|
.fm-tab-label { display: none; }
|
|
.fm-external-config,
|
|
.fm-quark-auth-config { grid-template-columns: 1fr; }
|
|
.fm-node-install-options > div { grid-template-columns: 1fr; }
|
|
}
|