Files
Azornes-Comfyui-Model-Resolver/web/css/resolver-main.css
T

9649 lines
241 KiB
CSS

#model-resolver-modal,
#model-resolver-modal button,
#model-resolver-modal input,
#model-resolver-modal textarea,
#model-resolver-modal select {
font-family: var(--mr-font-family-sans);
}
#model-resolver-modal {
/* Keep third-party ComfyUI rules that target .comfy-modal on our own palette. */
--input-text: var(--mr-text, #f3f3f3);
--comfy-input-bg: var(--mr-panel-bg, #202020);
--comfy-menu-bg: var(--mr-panel-bg-strong, #262626);
--border-color: var(--mr-border-strong, rgba(255, 255, 255, 0.14));
--primary-color: var(--mr-accent, #72d38a);
color: var(--mr-text, #f3f3f3) !important;
color-scheme: dark;
font-size: var(--mr-font-base, 13px);
line-height: var(--mr-line-height-normal, 1.5);
}
#model-resolver-modal button {
font-size: var(--mr-spacing-15);
}
.mr-hidden-initial {
display: none;
}
.mr-hidden {
display: none !important;
}
.mr-is-hidden {
display: none !important;
}
.mr-is-visible {
display: block !important;
}
.mr-is-inline-flex {
display: inline-flex !important;
}
.mr-is-muted {
color: var(--mr-text-muted) !important;
}
.mr-is-error {
color: var(--mr-color-error-light, #f44336) !important;
}
.mr-is-active-text {
color: var(--mr-text) !important;
}
.mr-is-success-action {
background: var(--mr-accent, #72d38a) !important;
border-color: var(--mr-accent, #72d38a) !important;
color: #101010 !important;
box-shadow: none !important;
}
.mr-icon-img {
vertical-align: middle;
}
.mr-meta-line {
margin-top: var(--mr-spacing-4);
font-size: var(--mr-font-md);
}
.mr-meta-secondary {
color: var(--mr-text-muted);
}
.mr-stack-md {
display: flex;
flex-direction: column;
gap: var(--mr-spacing-10);
}
.mr-stack-sm {
display: flex;
flex-direction: column;
gap: var(--mr-spacing-4);
margin-top: var(--mr-spacing-8);
}
.mr-loaded-filters {
padding: 0;
}
.mr-loaded-filter-row {
display: flex;
gap: var(--mr-spacing-8);
flex-wrap: wrap;
justify-content: flex-end;
margin-bottom: 0;
}
.mr-btn-filter,
.mr-copy-mode,
.mr-btn-copy-compact,
.mr-copy-main-btn,
#model-resolver-modal .mr-btn-filter,
#model-resolver-modal .mr-copy-mode,
#model-resolver-modal .mr-btn-copy-compact,
#model-resolver-modal .mr-copy-main-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--mr-spacing-5);
min-height: var(--mr-button-height-md);
height: var(--mr-button-height-md);
padding: 0 var(--mr-spacing-12);
color: var(--mr-text);
background: var(--mr-missing-control-bg, rgba(255, 255, 255, 0.035));
border: 1px solid var(--mr-missing-control-border, rgba(255, 255, 255, 0.105));
border-radius: var(--mr-missing-control-radius, 7px);
box-shadow: var(--mr-missing-control-shadow, none);
box-sizing: border-box;
cursor: pointer;
font-size: var(--mr-font-md);
font-weight: 700;
line-height: 1;
text-decoration: none;
transition: var(--mr-missing-control-transition, background 0.15s ease, border-color 0.15s ease, color 0.15s ease);
white-space: nowrap;
}
.mr-btn-filter:hover:not(:disabled),
.mr-copy-mode:hover:not(:disabled),
.mr-btn-copy-compact:hover:not(:disabled),
.mr-copy-main-btn:hover:not(:disabled),
#model-resolver-modal .mr-btn-filter:hover:not(:disabled),
#model-resolver-modal .mr-copy-mode:hover:not(:disabled),
#model-resolver-modal .mr-btn-copy-compact:hover:not(:disabled),
#model-resolver-modal .mr-copy-main-btn:hover:not(:disabled) {
color: var(--mr-text);
background: var(--mr-missing-control-bg-hover, rgba(255, 255, 255, 0.06));
border-color: var(--mr-missing-control-border-hover, rgba(255, 255, 255, 0.17));
transform: none;
}
.mr-btn-filter:focus-visible,
.mr-copy-mode:focus-visible,
.mr-btn-copy-compact:focus-visible,
.mr-copy-main-btn:focus-visible,
#model-resolver-modal .mr-btn-filter:focus-visible,
#model-resolver-modal .mr-copy-mode:focus-visible,
#model-resolver-modal .mr-btn-copy-compact:focus-visible,
#model-resolver-modal .mr-copy-main-btn:focus-visible {
outline: none;
border-color: var(--mr-missing-control-focus-border, rgba(114, 211, 138, 0.30));
box-shadow: 0 0 0 2px var(--mr-missing-control-focus-ring, rgba(114, 211, 138, 0.08));
}
.mr-btn-filter.active,
.mr-copy-mode.active,
#model-resolver-modal .mr-btn-filter.active,
#model-resolver-modal .mr-copy-mode.active {
color: var(--mr-accent);
background: rgba(114, 211, 138, 0.13);
border-color: rgba(114, 211, 138, 0.32);
}
.mr-btn-filter.active:hover:not(:disabled),
.mr-copy-mode.active:hover:not(:disabled),
#model-resolver-modal .mr-btn-filter.active:hover:not(:disabled),
#model-resolver-modal .mr-copy-mode.active:hover:not(:disabled) {
background: rgba(114, 211, 138, 0.17);
border-color: rgba(114, 211, 138, 0.42);
}
.mr-models-list-pad {
padding: 0 var(--mr-spacing-12);
}
.mr-model-section {
margin-bottom: var(--mr-spacing-8);
padding: var(--mr-spacing-10);
background: var(--mr-card-bg-alt, #1d1d1d);
border: 1px solid rgba(255, 255, 255, 0.055);
border-radius: var(--mr-ui-radius-sm);
}
.mr-model-section-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mr-spacing-10);
margin-bottom: var(--mr-spacing-6);
padding-bottom: var(--mr-spacing-5);
border-bottom: 1px solid var(--mr-color-gray-900);
}
.mr-model-section-heading {
display: flex;
align-items: baseline;
gap: var(--mr-spacing-8);
min-width: 0;
}
.mr-model-section-title {
color: var(--mr-text);
font-size: var(--mr-font-lg);
font-weight: 600;
}
.mr-model-section-total {
color: var(--mr-text-dim);
font-size: var(--mr-font-xs);
font-weight: 600;
white-space: nowrap;
}
.mr-model-section-counts {
display: flex;
align-items: center;
gap: var(--mr-spacing-5);
flex-wrap: wrap;
justify-content: flex-end;
}
.mr-model-count-pill {
display: inline-flex;
align-items: center;
min-height: 18px;
padding: 0 var(--mr-spacing-7);
border-radius: var(--mr-missing-chip-radius);
border: 1px solid rgba(255, 255, 255, 0.09);
color: var(--mr-text-muted);
background: var(--mr-missing-control-bg);
font-size: var(--mr-font-xs);
font-weight: 700;
white-space: nowrap;
}
.mr-model-count-pill.is-active {
color: var(--mr-type-lora-text);
border-color: rgba(114, 211, 138, 0.25);
background: rgba(114, 211, 138, 0.09);
}
.mr-model-count-pill.is-inactive {
color: var(--mr-text-dim);
}
.mr-model-group {
margin-bottom: var(--mr-spacing-6);
}
.mr-model-group-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--mr-spacing-8);
margin-bottom: var(--mr-spacing-5);
}
.mr-model-group-label {
display: inline-flex;
align-items: center;
gap: var(--mr-spacing-5);
font-size: var(--mr-font-sm);
font-weight: 600;
}
.mr-model-group-dot {
width: 6px;
height: 6px;
border-radius: var(--mr-missing-chip-radius);
background: currentColor;
}
.mr-model-group-count {
color: var(--mr-text-dim);
font-size: var(--mr-font-xs);
font-weight: 700;
}
.mr-model-group-label-active {
color: var(--mr-color-success-action);
}
.mr-model-group-label-inactive {
color: var(--mr-color-gray-500);
}
.mr-btn-copy-compact {
font-size: var(--mr-font-md);
}
.mr-copy-btn-icon {
width: 13px;
height: 13px;
}
.mr-btn-copy-compact.is-muted {
opacity: 1;
}
.mr-model-chip-list {
display: flex;
flex-wrap: wrap;
gap: var(--mr-spacing-5);
}
.mr-model-chip-list-inactive {
opacity: 0.5;
}
.mr-copy-section {
position: sticky;
bottom: 0;
z-index: 2;
padding: var(--mr-spacing-10) var(--mr-spacing-12) var(--mr-spacing-12);
background: var(--mr-bg);
border-top: 1px solid var(--mr-border);
}
.mr-copy-label {
margin: 0;
font-size: var(--mr-font-md);
font-weight: 700;
color: var(--mr-text);
}
.mr-copy-meta {
margin-top: var(--mr-spacing-2);
font-size: var(--mr-font-xs);
color: var(--mr-text-muted);
}
.mr-copy-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mr-spacing-10);
margin-bottom: var(--mr-spacing-8);
}
.mr-copy-heading {
min-width: 0;
}
.mr-copy-actions {
display: flex;
align-items: center;
gap: var(--mr-spacing-6);
flex-wrap: wrap;
justify-content: flex-end;
}
.mr-copy-mode {
font-size: var(--mr-font-md);
}
.mr-copy-main-btn {
font-size: var(--mr-font-md);
}
.mr-copy-code {
display: block;
width: 100%;
max-height: 92px;
box-sizing: border-box;
padding: var(--mr-spacing-8) var(--mr-spacing-12);
background: var(--mr-card-bg);
border-radius: var(--mr-radius-md);
font-family: var(--mr-font-family-mono);
font-size: var(--mr-font-sm);
line-height: 1.45;
color: var(--mr-color-code-blue);
overflow: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
@media (max-width: 720px) {
.mr-loaded-models-header,
.mr-copy-toolbar,
.mr-model-section-header {
align-items: stretch;
flex-direction: column;
}
.mr-loaded-filter-row,
.mr-copy-actions,
.mr-model-section-counts {
justify-content: flex-start;
}
}
.mr-error-text {
color: red;
}
.mr-info-accent-text {
color: var(--mr-color-blue-info);
}
.mr-progress-row {
display: flex;
align-items: center;
gap: var(--mr-spacing-8);
}
.mr-progress-bar-grow {
flex: 1;
}
.mr-download-progress-slot {
margin-top: var(--mr-spacing-8);
display: none;
}
.mr-download-progress-list {
display: flex;
flex-direction: column;
gap: var(--mr-spacing-8);
}
.mr-download-progress-item {
padding: var(--mr-spacing-8);
border: 1px solid var(--mr-border);
border-radius: var(--mr-radius-xl);
background: rgba(255, 255, 255, 0.025);
}
.mr-download-progress-item-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mr-spacing-8);
margin-bottom: var(--mr-spacing-5);
color: var(--mr-text-muted);
font-size: var(--mr-font-sm);
font-weight: 700;
}
.mr-download-progress-item-head > span:first-child {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mr-download-progress-item-head > span:last-child {
flex: 0 0 auto;
color: var(--mr-text);
}
.mr-download-progress-item .mr-progress-container {
margin-top: 0;
}
.mr-civitai-open-btn {
background: transparent;
color: var(--mr-color-civitai);
border: 1px solid var(--mr-color-civitai);
font-weight: 700;
cursor: pointer;
}
.mr-civitai-download-btn {
background: var(--mr-color-civitai);
}
.mr-missing-summary {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--mr-spacing-12);
margin-bottom: var(--mr-spacing-10);
padding: var(--mr-spacing-10) var(--mr-spacing-12);
border-radius: var(--mr-ui-radius-lg);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
border: 1px solid var(--mr-border-strong);
box-shadow: var(--mr-shadow-elevated);
}
.mr-missing-summary-title {
display: flex;
align-items: baseline;
gap: var(--mr-spacing-10);
flex-wrap: wrap;
}
.mr-missing-summary-count {
font-size: var(--mr-spacing-15);
font-weight: 700;
color: var(--mr-text);
letter-spacing: -0.02em;
}
.mr-missing-summary-meta {
font-size: var(--mr-font-sm);
color: var(--mr-text-muted);
}
@property --mr-missing-detail-track {
syntax: "<length-percentage>";
inherits: false;
initial-value: 42%;
}
.mr-missing-browser {
--mr-missing-bg: #111;
--mr-missing-surface: rgba(255, 255, 255, 0.03);
--mr-missing-surface-raised: rgba(255, 255, 255, 0.052);
--mr-missing-surface-muted: rgba(255, 255, 255, 0.02);
--mr-missing-line: rgba(255, 255, 255, 0.075);
--mr-missing-line-strong: rgba(255, 255, 255, 0.13);
--mr-missing-radius: 6px;
--mr-missing-splitter-track: 10px;
--mr-missing-list-min-width: 340px;
--mr-missing-list-track: calc(100% - var(--mr-missing-splitter-track) - var(--mr-missing-detail-track, 42%));
position: relative;
display: flex;
gap: 0;
height: 100%;
min-height: 0;
min-width: 0;
overflow: hidden;
border: 1px solid var(--mr-missing-line);
background: var(--mr-missing-bg);
contain: layout paint style;
}
.mr-missing-list-pane,
.mr-missing-detail-pane {
min-width: 0;
min-height: 0;
overflow: hidden;
contain: size layout paint style;
background: var(--mr-missing-bg);
}
.mr-missing-list-pane {
flex: 1 1 0;
min-width: var(--mr-missing-list-min-width);
display: grid;
grid-template-rows: auto minmax(0, 1fr);
border-right: 0;
background: var(--mr-missing-bg);
}
.mr-missing-browser-splitter {
position: relative;
z-index: 2;
flex: 0 0 var(--mr-missing-splitter-track);
min-width: var(--mr-missing-splitter-track);
width: var(--mr-missing-splitter-track);
cursor: col-resize;
user-select: none;
touch-action: none;
background: var(--mr-missing-bg);
border-left: 1px solid var(--mr-missing-line);
border-right: 1px solid var(--mr-missing-line);
outline: none;
}
.mr-missing-browser-splitter::before {
content: "";
position: absolute;
top: 16px;
bottom: 16px;
left: 50%;
width: 2px;
border-radius: var(--mr-missing-chip-radius);
background: rgba(255, 255, 255, 0.13);
transform: translateX(-50%);
transition: var(--mr-transition-smooth);
}
.mr-missing-browser-splitter:hover::before,
.mr-missing-browser-splitter:focus-visible::before,
.mr-missing-browser-splitter.is-resizing::before {
background: rgba(114, 211, 138, 0.78);
box-shadow: var(--mr-shadow-focus-ring);
transition: none;
}
.mr-missing-list-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mr-spacing-12);
padding: 14px var(--mr-spacing-16);
border-bottom: 1px solid var(--mr-missing-line);
background: var(--mr-missing-surface);
}
.mr-missing-list-title {
font-size: var(--mr-font-lg);
font-weight: 750;
color: var(--mr-text);
}
.mr-missing-list-meta {
margin-top: var(--mr-spacing-3);
font-size: var(--mr-font-sm);
color: var(--mr-text-muted);
}
.mr-missing-list-stats {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--mr-spacing-6);
flex-wrap: wrap;
}
.mr-missing-list-tools {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--mr-spacing-8);
flex-wrap: wrap;
}
.mr-missing-resolved-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--mr-spacing-6);
min-height: var(--mr-button-height-sm);
padding: 0 var(--mr-spacing-8);
color: var(--mr-text-muted);
background: var(--mr-missing-control-bg, rgba(255, 255, 255, 0.035));
border: 1px solid var(--mr-missing-control-border, rgba(255, 255, 255, 0.105));
border-radius: var(--mr-missing-control-radius, 7px);
cursor: pointer;
font-size: var(--mr-font-sm);
font-weight: 700;
line-height: 1;
white-space: nowrap;
transition: var(--mr-missing-control-transition, background 0.15s ease, border-color 0.15s ease, color 0.15s ease);
}
.mr-missing-resolved-toggle:hover {
color: var(--mr-text);
background: var(--mr-missing-control-bg-hover, rgba(255, 255, 255, 0.06));
border-color: var(--mr-missing-control-border-hover, rgba(255, 255, 255, 0.17));
}
.mr-missing-resolved-toggle input {
width: 13px;
height: 13px;
margin: 0;
accent-color: #72d38a;
}
.mr-missing-resolved-toggle em {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 16px;
height: 16px;
padding: 0 var(--mr-spacing-4);
border-radius: var(--mr-missing-chip-radius);
color: var(--mr-type-lora-text);
background: rgba(114, 211, 138, 0.12);
font-style: normal;
font-size: var(--mr-font-xs);
}
.mr-missing-refresh-btn,
#model-resolver-modal .mr-missing-refresh-btn {
min-height: var(--mr-button-height-sm);
padding: 0 var(--mr-spacing-8);
gap: var(--mr-spacing-5);
font-size: var(--mr-font-sm);
}
.mr-missing-refresh-btn svg {
width: 13px;
height: 13px;
}
.mr-missing-stat {
display: inline-flex;
align-items: center;
min-height: 20px;
padding: var(--mr-spacing-2) var(--mr-spacing-7);
border-radius: var(--mr-missing-chip-radius);
background: var(--mr-missing-surface-raised);
border: 1px solid var(--mr-missing-line);
color: var(--mr-text-muted);
font-size: var(--mr-font-xs);
font-weight: 700;
white-space: nowrap;
}
.mr-missing-stat-exact {
color: #72d38a;
}
.mr-missing-stat-partial {
color: var(--mr-warning);
}
.mr-missing-list-head,
#model-resolver-modal .mr-missing-list-row {
display: grid;
grid-template-columns: 38px 22px minmax(170px, var(--mr-missing-model-col, 280px)) minmax(66px, var(--mr-missing-type-col, 112px)) minmax(150px, 1fr) 58px 106px;
align-items: center;
gap: var(--mr-spacing-8);
}
.mr-missing-list-head {
position: sticky;
top: 0;
z-index: 10;
padding: var(--mr-spacing-10) var(--mr-spacing-12) var(--mr-spacing-10) var(--mr-spacing-8);
border-bottom: 1px solid var(--mr-missing-line);
background-color: var(--mr-missing-bg, #111);
background-image: linear-gradient(var(--mr-missing-surface, rgba(255, 255, 255, 0.03)), var(--mr-missing-surface, rgba(255, 255, 255, 0.03)));
color: var(--mr-text-muted);
font-size: var(--mr-font-sm);
font-weight: 700;
}
.mr-missing-list-head>span {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
text-align: center;
}
.mr-missing-list-head>span:nth-child(3),
.mr-missing-list-head>span:nth-child(5) {
justify-content: flex-start;
text-align: left;
}
.mr-missing-list {
min-height: 0;
overflow-y: auto;
scrollbar-gutter: stable;
scrollbar-width: auto;
background: var(--mr-missing-bg);
}
.mr-missing-browser.is-resizing::after {
content: "";
position: absolute;
z-index: var(--mr-z-dialog);
inset: 0;
cursor: col-resize;
pointer-events: auto;
}
#model-resolver-body.is-resizing::after {
content: "";
position: absolute;
z-index: var(--mr-z-dialog);
inset: 0;
cursor: col-resize;
pointer-events: auto;
}
#model-resolver-modal .mr-missing-list-row {
content-visibility: auto;
contain-intrinsic-size: 70px;
width: 100%;
height: 70px;
min-height: 70px;
padding: 9px var(--mr-spacing-12) 9px var(--mr-spacing-8);
overflow: hidden;
border: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.052);
border-radius: 0;
box-sizing: border-box;
background: transparent;
color: var(--mr-text);
cursor: pointer;
font-family: inherit;
font-size: var(--mr-font-sm);
text-align: left;
contain: layout paint style;
transition: var(--mr-transition-smooth);
}
#model-resolver-modal .mr-missing-list-row:hover {
background: var(--mr-missing-control-bg);
}
#model-resolver-modal .mr-missing-list-row:focus-visible {
outline: none;
box-shadow: inset 3px 0 0 rgba(114, 211, 138, 0.72), inset 0 0 0 1px rgba(114, 211, 138, 0.16);
}
#model-resolver-modal .mr-missing-list-row.is-selected,
#model-resolver-modal .mr-missing-detail-pane .model-resolver-selected {
background: linear-gradient(90deg, rgba(114, 211, 138, 0.12) 0%, rgba(114, 211, 138, 0.055) 42%, rgba(114, 211, 138, 0.018) 100%);
box-shadow: inset 3px 0 0 rgba(114, 211, 138, 0.92), inset 0 0 0 1px rgba(114, 211, 138, 0.12);
}
.mr-missing-list-row.is-resolved {
opacity: 0.72;
}
.mr-missing-list-row.is-batch-selected {
background: rgba(78, 161, 255, 0.055);
}
.mr-missing-list-row.is-selected.is-batch-selected {
background: linear-gradient(90deg, rgba(114, 211, 138, 0.13) 0%, rgba(78, 161, 255, 0.065) 58%, rgba(78, 161, 255, 0.025) 100%);
}
#model-resolver-modal .mr-missing-list-row.is-menu-preview {
background: linear-gradient(90deg, rgba(255, 204, 102, 0.11) 0%, rgba(255, 204, 102, 0.052) 56%, rgba(255, 204, 102, 0.018) 100%);
box-shadow: inset 3px 0 0 rgba(255, 204, 102, 0.74), inset 0 0 0 1px rgba(255, 204, 102, 0.12);
}
#model-resolver-modal .mr-missing-list-row.is-selected.is-menu-preview,
#model-resolver-modal .mr-missing-list-row.is-batch-selected.is-menu-preview {
background: linear-gradient(90deg, rgba(255, 204, 102, 0.13) 0%, rgba(78, 161, 255, 0.07) 58%, rgba(114, 211, 138, 0.028) 100%);
box-shadow: inset 3px 0 0 rgba(255, 204, 102, 0.82), inset 0 0 0 1px rgba(255, 204, 102, 0.14);
}
.mr-missing-row-select {
display: flex;
justify-content: center;
align-items: center;
}
.mr-missing-head-select {
display: flex;
justify-content: center;
align-items: center;
}
.mr-missing-select-all-check,
.mr-missing-row-check {
width: 14px;
height: 14px;
margin: 0;
accent-color: #72d38a;
cursor: pointer;
}
.mr-missing-row-index {
display: block;
width: 100%;
color: rgba(255, 255, 255, 0.55);
font-size: var(--mr-font-base);
font-weight: 700;
line-height: 1;
text-align: center;
justify-self: stretch;
}
.mr-missing-row-best {
min-width: 0;
display: grid;
gap: var(--mr-spacing-2);
}
.mr-missing-row-model {
min-width: 0;
display: flex;
align-items: center;
gap: var(--mr-spacing-8);
}
.mr-missing-row-resolved-icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
color: #72d38a;
width: 20px;
height: 20px;
}
.mr-missing-row-resolved-icon svg {
width: 20px;
height: 20px;
}
.mr-missing-row-model-details {
min-width: 0;
flex: 1 1 auto;
display: grid;
gap: var(--mr-spacing-2);
}
.mr-missing-row-meta-line {
min-width: 0;
display: flex;
align-items: center;
gap: var(--mr-spacing-6);
}
.mr-missing-row-name,
.mr-missing-row-node,
.mr-missing-row-best {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mr-missing-row-name {
color: var(--mr-text);
font-size: var(--mr-font-base);
font-weight: 700;
}
.mr-missing-row-node {
color: var(--mr-text-muted);
font-size: var(--mr-font-xs);
}
.mr-missing-row-node-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mr-missing-row-type {
justify-self: center;
max-width: 100%;
min-width: 0;
padding: var(--mr-spacing-2) var(--mr-spacing-7);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-radius: var(--mr-missing-chip-radius);
background: var(--mr-missing-surface-raised);
color: #d4d4d4;
font-size: var(--mr-font-xs);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.mr-missing-row-match {
justify-self: center;
display: flex;
justify-content: center;
text-align: center;
width: 100%;
align-items: center;
color: var(--mr-text-muted);
}
.mr-missing-row-match strong {
display: inline-flex;
align-items: center;
min-height: 18px;
padding: var(--mr-spacing-2) var(--mr-spacing-6);
border-radius: var(--mr-missing-chip-radius);
background: var(--mr-missing-surface-raised);
font-size: var(--mr-font-xs);
font-weight: 800;
line-height: 1;
white-space: nowrap;
}
.mr-missing-row-best {
color: var(--mr-text-muted);
font-size: var(--mr-font-sm);
line-height: 1.25;
white-space: normal;
overflow-wrap: anywhere;
word-break: normal;
}
.mr-missing-row-none {
color: var(--mr-text-dim);
}
.mr-missing-row-match-exact strong {
color: #72d38a;
background: rgba(114, 211, 138, 0.12);
}
.mr-missing-row-match-partial strong {
color: var(--mr-warning);
background: rgba(241, 207, 100, 0.13);
}
.mr-missing-row-match-none strong {
color: rgba(255, 255, 255, 0.42);
}
.mr-missing-row-sources {
position: relative;
display: block;
justify-self: center;
min-width: 0;
width: 104px;
height: 50px;
}
.mr-missing-source-dot {
--mr-source-rgb: 168, 174, 181;
--mr-source-fill-alpha: 0.08;
--mr-source-border-hi-alpha: 0.52;
--mr-source-border-alpha: 0.34;
--mr-source-glow-alpha: 0.08;
position: absolute;
display: inline-flex;
align-items: center;
justify-content: center;
width: 29px;
height: 33px;
border: 0;
border-radius: 0;
background: transparent;
color: rgb(var(--mr-source-rgb));
font-size: var(--mr-font-xs);
font-weight: 800;
filter:
drop-shadow(0 2px 3px rgba(0, 0, 0, 0.44)) drop-shadow(0 0 4px rgba(var(--mr-source-rgb), var(--mr-source-glow-alpha)));
isolation: isolate;
z-index: 1;
}
.mr-missing-source-dot::before,
.mr-missing-source-dot::after {
content: "";
position: absolute;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 114'%3E%3Cpath fill='black' d='M50 1 Q53 1 56 3 L94 25 Q99 28 99 34 L99 80 Q99 86 94 89 L56 111 Q50 114 44 111 L6 89 Q1 86 1 80 L1 34 Q1 28 6 25 L44 3 Q47 1 50 1 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 114'%3E%3Cpath fill='black' d='M50 1 Q53 1 56 3 L94 25 Q99 28 99 34 L99 80 Q99 86 94 89 L56 111 Q50 114 44 111 L6 89 Q1 86 1 80 L1 34 Q1 28 6 25 L44 3 Q47 1 50 1 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
pointer-events: none;
}
.mr-missing-source-dot::before {
inset: 0;
background:
linear-gradient(145deg,
rgba(var(--mr-source-rgb), var(--mr-source-border-hi-alpha)),
rgba(var(--mr-source-rgb), var(--mr-source-border-alpha)) 42%,
rgba(255, 255, 255, 0.08));
}
.mr-missing-source-dot::after {
inset: 1.5px;
background:
radial-gradient(circle at 35% 22%, rgba(var(--mr-source-rgb), 0.18), transparent 48%),
linear-gradient(145deg,
rgba(var(--mr-source-rgb), var(--mr-source-fill-alpha)),
rgba(25, 27, 30, 0.94) 54%,
rgba(13, 14, 16, 0.97));
}
.mr-missing-row-sources .mr-missing-source-dot:nth-child(1) {
left: 22px;
top: -7px;
}
.mr-missing-row-sources .mr-missing-source-dot:nth-child(2) {
left: 52px;
top: -7px;
}
.mr-missing-row-sources .mr-missing-source-dot:nth-child(3) {
left: 7px;
top: 18px;
z-index: 2;
}
.mr-missing-row-sources .mr-missing-source-dot:nth-child(4) {
left: 37px;
top: 18px;
z-index: 2;
}
.mr-missing-row-sources .mr-missing-source-dot:nth-child(5) {
left: 67px;
top: 18px;
z-index: 2;
}
.mr-missing-row-sources .mr-missing-source-dot:nth-child(3):last-child {
left: 37px;
}
.mr-missing-source-icon {
position: relative;
z-index: 1;
display: block;
width: 15px;
height: 15px;
flex: 0 0 15px;
}
.mr-missing-source-found,
.mr-missing-source-exact {
--mr-source-rgb: 114, 211, 138;
--mr-source-fill-alpha: 0.16;
--mr-source-border-hi-alpha: 0.76;
--mr-source-border-alpha: 0.58;
--mr-source-glow-alpha: 0.20;
}
.mr-missing-source-partial {
--mr-source-rgb: 241, 207, 100;
--mr-source-fill-alpha: 0.18;
--mr-source-border-hi-alpha: 0.82;
--mr-source-border-alpha: 0.62;
--mr-source-glow-alpha: 0.24;
}
.mr-missing-source-none {
--mr-source-rgb: 150, 155, 162;
--mr-source-fill-alpha: 0.05;
--mr-source-border-hi-alpha: 0.32;
--mr-source-border-alpha: 0.22;
--mr-source-glow-alpha: 0.02;
}
.mr-missing-source-running,
.mr-missing-source-pending {
--mr-source-rgb: 96, 190, 255;
--mr-source-fill-alpha: 0.16;
--mr-source-border-hi-alpha: 0.78;
--mr-source-border-alpha: 0.6;
--mr-source-glow-alpha: 0.24;
}
.mr-missing-source-error {
--mr-source-rgb: 255, 138, 128;
--mr-source-fill-alpha: 0.16;
--mr-source-border-hi-alpha: 0.82;
--mr-source-border-alpha: 0.62;
--mr-source-glow-alpha: 0.22;
}
.mr-missing-detail-pane {
flex: 0 0 var(--mr-missing-detail-track, 42%);
overflow-y: auto;
scrollbar-gutter: stable;
background: var(--mr-missing-bg);
}
.mr-missing-browser.is-list-pinned .mr-missing-list-pane {
flex: 0 0 var(--mr-missing-list-min-width) !important;
}
.mr-missing-browser.is-list-pinned .mr-missing-detail-pane {
flex: 1 1 0 !important;
}
.mr-missing-detail-pane .mr-card {
margin: 0;
padding: var(--mr-spacing-20);
background: transparent;
box-shadow: none;
}
.mr-missing-detail-pane .mr-card:hover {
box-shadow: none;
}
.mr-missing-detail-pane .mr-card-header {
margin-bottom: var(--mr-spacing-10);
}
.mr-missing-detail-pane .mr-card-title {
font-size: var(--mr-font-xl);
letter-spacing: 0;
}
.mr-missing-detail-pane .mr-card-subtitle {
margin-top: var(--mr-spacing-1);
}
.mr-missing-detail-pane .mr-columns {
grid-template-columns: minmax(0, 1fr);
gap: var(--mr-spacing-10);
}
.mr-missing-detail-pane .mr-column {
padding: var(--mr-spacing-12);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0%, rgba(255, 255, 255, 0.014) 100%);
border: 1px solid var(--mr-missing-line);
border-radius: var(--mr-missing-radius);
box-shadow: none;
}
/* Card Styles */
.mr-card {
background: var(--mr-card-bg);
border: 1px solid transparent;
border-radius: 0;
padding: var(--mr-spacing-10) var(--mr-spacing-12);
margin-bottom: var(--mr-spacing-4);
transition: var(--mr-transition-smooth);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.018);
font-family: var(--mr-font-family-sans);
}
.mr-card:nth-child(even) {
background: var(--mr-card-bg-alt);
}
.mr-card:hover {
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.05),
0 10px 24px rgba(0, 0, 0, 0.14);
}
/* Card Header */
.mr-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--mr-spacing-10);
margin-bottom: var(--mr-spacing-6);
}
.mr-card-title-wrap {
min-width: 0;
flex: 1;
display: grid;
gap: var(--mr-spacing-4);
}
.mr-card-title-meta {
display: grid;
gap: var(--mr-spacing-2);
}
.mr-card-title {
font-size: var(--mr-spacing-15);
line-height: 1.24;
font-weight: 700;
color: var(--mr-text);
margin: 0;
min-width: 0;
word-break: break-word;
letter-spacing: -0.01em;
}
.mr-card-title-eyebrow {
display: block;
font-family: var(--mr-font-family-mono);
font-size: var(--mr-font-xs);
line-height: 1.35;
color: var(--mr-text-dim);
word-break: break-all;
}
.mr-card-title-primary {
display: block;
min-width: 0;
color: var(--mr-text-soft);
overflow-wrap: anywhere;
word-break: normal;
}
.mr-card-title-secondary {
display: block;
font-size: var(--mr-font-md);
line-height: 1.4;
color: var(--mr-text-muted);
word-break: break-word;
}
.mr-card-subtitle {
margin-top: 0;
display: flex;
align-items: center;
gap: var(--mr-spacing-4);
flex-wrap: wrap;
}
.mr-node-chip {
display: inline-flex;
align-items: center;
gap: var(--mr-spacing-4);
padding: var(--mr-spacing-2) var(--mr-spacing-7);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--mr-missing-control-bg-hover);
border-radius: var(--mr-missing-chip-radius);
font-size: var(--mr-font-xs);
color: #c8c8c8;
white-space: nowrap;
flex-shrink: 0;
}
.mr-missing-browser .mr-node-chip,
.mr-missing-browser .mr-category-chip:not(.mr-type-chip),
.mr-missing-browser .mr-search-source-pill {
background: var(--mr-missing-chip-bg, var(--mr-missing-surface-raised, rgba(255, 255, 255, 0.04)));
border-color: var(--mr-missing-chip-border, var(--mr-missing-line, rgba(255, 255, 255, 0.075)));
box-shadow: none;
}
.mr-missing-browser .mr-badge {
border-radius: var(--mr-missing-chip-radius);
box-shadow: none;
}
.mr-missing-browser .mr-badge-neutral {
background: var(--mr-missing-surface-raised, rgba(255, 255, 255, 0.04));
border-color: var(--mr-missing-line, rgba(255, 255, 255, 0.075));
}
.mr-node-chip.is-locatable {
cursor: pointer;
padding-right: var(--mr-spacing-8);
color: #f1f1f1;
background: var(--mr-border);
border-color: rgba(255, 255, 255, 0.12);
transition: var(--mr-missing-control-transition);
}
.mr-missing-browser .mr-node-chip.is-locatable {
background: var(--mr-missing-chip-bg, var(--mr-missing-surface-raised, rgba(255, 255, 255, 0.04)));
border-color: var(--mr-missing-chip-border, var(--mr-missing-line-strong, rgba(255, 255, 255, 0.12)));
transform: none;
}
.mr-node-chip.is-locatable:hover {
background: rgba(255, 255, 255, 0.12);
border-color: var(--mr-missing-chip-border-hover);
color: var(--mr-color-white);
transform: translateY(-1px);
}
.mr-node-folder-count-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 var(--mr-spacing-5);
border-radius: var(--mr-missing-chip-radius);
border: 1px solid rgba(114, 211, 138, 0.28);
background: rgba(114, 211, 138, 0.105);
color: var(--mr-type-lora-text);
font-size: var(--mr-font-xs);
font-weight: 800;
line-height: 1;
cursor: help;
flex-shrink: 0;
}
.mr-node-folder-count-badge:hover,
.mr-node-folder-count-badge:focus-visible {
border-color: rgba(114, 211, 138, 0.46);
background: rgba(114, 211, 138, 0.16);
color: #e6ffe9;
outline: none;
}
.mr-auto-download-badge {
display: inline-flex;
align-items: center;
justify-content: center;
height: 18px;
padding: 0 var(--mr-spacing-7);
border-radius: var(--mr-missing-chip-radius);
border: 1px solid rgba(89, 170, 255, 0.3);
background: rgba(89, 170, 255, 0.11);
color: #c7e2ff;
font-size: var(--mr-font-xs);
font-weight: 800;
line-height: 1;
letter-spacing: 0.01em;
cursor: help;
white-space: nowrap;
flex-shrink: 0;
}
.mr-auto-download-badge.is-compact {
width: 20px;
height: 20px;
padding: 0;
}
.mr-auto-download-badge-icon {
width: 13px;
height: 13px;
display: block;
}
.mr-auto-download-badge:hover,
.mr-auto-download-badge:focus-visible {
border-color: rgba(89, 170, 255, 0.5);
background: rgba(89, 170, 255, 0.17);
color: #ecf6ff;
outline: none;
}
.mr-missing-browser .mr-node-chip.is-locatable:hover {
background: var(--mr-missing-chip-bg-hover, rgba(255, 255, 255, 0.06));
border-color: var(--mr-missing-chip-border-hover, rgba(255, 255, 255, 0.18));
transform: none;
}
.mr-node-chip-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--mr-missing-chip-icon-size, var(--mr-spacing-12));
height: var(--mr-missing-chip-icon-size, var(--mr-spacing-12));
opacity: 0.95;
}
.mr-node-chip-icon svg {
width: var(--mr-missing-chip-icon-size, var(--mr-spacing-12));
height: var(--mr-missing-chip-icon-size, var(--mr-spacing-12));
display: block;
}
#model-resolver-modal .mr-missing-row-locate {
all: unset;
display: inline-flex;
align-items: center;
box-sizing: border-box;
grid-column: 1;
justify-self: start;
max-width: 100%;
min-width: 0;
min-height: var(--mr-missing-chip-height, 20px);
margin: 0;
padding: var(--mr-spacing-2) var(--mr-spacing-8);
gap: var(--mr-spacing-4);
background: var(--mr-missing-chip-bg, rgba(255, 255, 255, 0.045));
border: 1px solid var(--mr-missing-chip-border, rgba(255, 255, 255, 0.08));
border-radius: var(--mr-missing-chip-radius, 999px);
box-shadow: none;
color: #f1f1f1;
font-family: inherit;
font-size: var(--mr-font-xs);
font-weight: 400;
line-height: normal;
white-space: nowrap;
cursor: pointer;
flex-shrink: 1;
overflow: hidden;
vertical-align: middle;
transition: var(--mr-missing-control-transition, background 0.15s ease, border-color 0.15s ease, color 0.15s ease), transform 0.15s ease;
}
#model-resolver-modal .mr-missing-row-locate:hover {
background: var(--mr-missing-chip-bg-hover, rgba(255, 255, 255, 0.06));
border-color: var(--mr-missing-chip-border-hover, rgba(255, 255, 255, 0.18));
color: var(--mr-color-white);
transform: none;
}
#model-resolver-modal .mr-missing-row-locate:focus-visible {
outline: none;
border-color: var(--mr-missing-control-focus-border, rgba(114, 211, 138, 0.24));
box-shadow: 0 0 0 1px var(--mr-missing-control-focus-ring, rgba(114, 211, 138, 0.10));
}
#model-resolver-modal .mr-missing-row-locate .mr-node-chip-icon,
#model-resolver-modal .mr-missing-row-locate .mr-node-chip-icon svg {
width: var(--mr-missing-chip-icon-size, var(--mr-spacing-12));
height: var(--mr-missing-chip-icon-size, var(--mr-spacing-12));
}
.mr-category-chip {
display: inline-flex;
padding: var(--mr-spacing-2) var(--mr-spacing-7);
background: rgba(255, 255, 255, 0.045);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: var(--mr-missing-chip-radius);
font-size: var(--mr-font-xs);
color: #d3d3d3;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
}
.mr-model-format-chip {
background: rgba(67, 160, 255, 0.12);
border-color: rgba(104, 184, 255, 0.3);
color: #b9ddff;
}
/* ComfyUI node_slot-inspired type chips. */
.mr-type-chip,
.mr-info-tag.mr-type-chip,
.mr-category-chip.mr-type-chip,
.mr-missing-row-type {
--mr-type-rgb: var(--mr-type-generic-rgb, 176, 176, 176);
--mr-type-text: var(--mr-type-generic-text, #d6d6d6);
--mr-type-bg-alpha-strong: var(--mr-type-chip-bg-alpha-strong, 0.155);
--mr-type-bg-alpha: var(--mr-type-chip-bg-alpha, 0.12);
--mr-type-border-alpha: var(--mr-type-chip-border-alpha, 0.26);
--mr-type-glow-alpha: var(--mr-type-chip-glow-alpha, 0.045);
background:
linear-gradient(180deg,
rgba(var(--mr-type-rgb), var(--mr-type-bg-alpha-strong)) 0%,
rgba(var(--mr-type-rgb), var(--mr-type-bg-alpha)) 100%);
border: 1px solid rgba(var(--mr-type-rgb), var(--mr-type-border-alpha));
color: var(--mr-type-text);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.026),
0 0 12px rgba(var(--mr-type-rgb), var(--mr-type-glow-alpha));
}
.mr-type-chip.mr-type-chip--model {
--mr-type-rgb: var(--mr-type-model-rgb, 179, 157, 219);
--mr-type-text: var(--mr-type-model-text, #dbcfff);
}
.mr-type-chip.mr-type-chip--lora {
--mr-type-rgb: var(--mr-type-lora-rgb, 194, 255, 174);
--mr-type-text: var(--mr-type-lora-text, #d7ffcb);
}
.mr-type-chip.mr-type-chip--style-model {
--mr-type-rgb: var(--mr-type-style-model-rgb, 194, 255, 174);
--mr-type-text: var(--mr-type-style-model-text, #d7ffcb);
}
.mr-type-chip.mr-type-chip--clip {
--mr-type-rgb: var(--mr-type-clip-rgb, 255, 213, 0);
--mr-type-text: var(--mr-type-clip-text, #ffe678);
}
.mr-type-chip.mr-type-chip--clip-vision {
--mr-type-rgb: var(--mr-type-clip-vision-rgb, 168, 218, 220);
--mr-type-text: var(--mr-type-clip-vision-text, #c7eff0);
}
.mr-type-chip.mr-type-chip--clip-vision-output {
--mr-type-rgb: var(--mr-type-clip-vision-output-rgb, 173, 116, 82);
--mr-type-text: var(--mr-type-clip-vision-output-text, #e8b79a);
}
.mr-type-chip.mr-type-chip--conditioning {
--mr-type-rgb: var(--mr-type-conditioning-rgb, 255, 169, 49);
--mr-type-text: var(--mr-type-conditioning-text, #ffd08c);
}
.mr-type-chip.mr-type-chip--controlnet {
--mr-type-rgb: var(--mr-type-controlnet-rgb, 110, 231, 183);
--mr-type-text: var(--mr-type-controlnet-text, #b1f4db);
}
.mr-type-chip.mr-type-chip--image {
--mr-type-rgb: var(--mr-type-image-rgb, 100, 181, 246);
--mr-type-text: var(--mr-type-image-text, #b9dcff);
}
.mr-type-chip.mr-type-chip--latent {
--mr-type-rgb: var(--mr-type-latent-rgb, 255, 156, 249);
--mr-type-text: var(--mr-type-latent-text, #ffc8fb);
}
.mr-type-chip.mr-type-chip--mask {
--mr-type-rgb: var(--mr-type-mask-rgb, 129, 199, 132);
--mr-type-text: var(--mr-type-mask-text, #bdebc0);
}
.mr-type-chip.mr-type-chip--vae {
--mr-type-rgb: var(--mr-type-vae-rgb, 255, 110, 110);
--mr-type-text: var(--mr-type-vae-text, #ffb8b8);
}
.mr-type-chip.mr-type-chip--noise {
--mr-type-rgb: var(--mr-type-noise-rgb, 176, 176, 176);
--mr-type-text: var(--mr-type-noise-text, #d6d6d6);
}
.mr-type-chip.mr-type-chip--sampler {
--mr-type-rgb: var(--mr-type-sampler-rgb, 236, 180, 180);
--mr-type-text: var(--mr-type-sampler-text, #f2cccc);
}
.mr-type-chip.mr-type-chip--sigmas {
--mr-type-rgb: var(--mr-type-sigmas-rgb, 205, 255, 205);
--mr-type-text: var(--mr-type-sigmas-text, #dcffdc);
}
.mr-type-chip.mr-type-chip--guider {
--mr-type-rgb: var(--mr-type-guider-rgb, 102, 255, 255);
--mr-type-text: var(--mr-type-guider-text, #c7ffff);
}
.mr-type-chip.mr-type-chip--taesd {
--mr-type-rgb: var(--mr-type-taesd-rgb, 220, 194, 116);
--mr-type-text: var(--mr-type-taesd-text, #efd991);
}
.mr-card-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--mr-spacing-6);
flex-wrap: wrap;
flex-shrink: 0;
}
.mr-inline-civitai-link {
color: var(--mr-text-soft);
font-size: var(--mr-font-lg);
font-weight: 700;
text-decoration: none;
letter-spacing: -0.01em;
}
.mr-inline-civitai-link:hover {
color: var(--mr-color-white);
text-decoration: none;
}
/* Two-Column Layout */
.mr-columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--mr-spacing-8);
}
@media (max-width: 700px) {
.mr-missing-summary {
flex-direction: column;
align-items: flex-start;
}
.mr-columns {
grid-template-columns: 1fr;
}
.mr-card-header {
flex-direction: column;
}
.mr-card-actions {
justify-content: flex-start;
}
}
.mr-column {
min-width: 0;
background: var(--mr-panel-bg);
border: 1px solid transparent;
border-radius: 0;
padding: var(--mr-spacing-10);
box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.06);
}
.mr-column-header {
font-size: var(--mr-font-xs);
font-weight: 700;
color: var(--mr-text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: var(--mr-spacing-8);
padding-bottom: var(--mr-spacing-6);
border-bottom: 1px solid var(--mr-divider);
}
.mr-muted-note,
.mr-no-matches {
padding: var(--mr-spacing-8) var(--mr-spacing-10);
border-radius: var(--mr-ui-radius-sm);
background: rgba(255, 255, 255, 0.018);
border: 1px solid transparent;
color: var(--mr-text-muted);
font-size: var(--mr-font-sm);
}
.mr-missing-browser .mr-column-header {
margin-bottom: var(--mr-spacing-8);
padding-bottom: var(--mr-spacing-8);
border-bottom: 1px solid var(--mr-missing-line, var(--mr-divider));
color: var(--mr-text-muted);
font-size: var(--mr-font-lg);
letter-spacing: 0.08em;
}
.mr-local-matches-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mr-spacing-8);
}
.mr-local-matches-header>span {
min-width: 0;
}
.mr-local-matches-refresh-btn,
#model-resolver-modal .mr-local-matches-refresh-btn {
width: 26px;
min-width: 26px;
max-width: 26px;
height: 24px;
min-height: 24px;
padding: 0;
flex: 0 0 26px;
font-size: 0;
line-height: 1;
}
.mr-local-matches-refresh-btn .mr-combo-refresh-icon,
#model-resolver-modal .mr-local-matches-refresh-btn .mr-combo-refresh-icon {
width: 13px;
height: 13px;
display: block;
}
.mr-missing-browser .mr-muted-note,
.mr-missing-browser .mr-no-matches {
padding: 9px var(--mr-spacing-10);
background: var(--mr-missing-surface-muted, rgba(255, 255, 255, 0.018));
border: 1px solid transparent;
border-radius: var(--mr-missing-control-radius, var(--mr-ui-radius-sm));
}
.mr-inline-note-action {
transition: var(--mr-transition-bg);
}
.mr-inline-note-action:hover {
color: var(--mr-text);
background: rgba(255, 255, 255, 0.05);
}
/* Filename Chips */
.mr-chip {
display: inline-flex;
align-items: center;
padding: var(--mr-spacing-5) var(--mr-spacing-10);
background: rgba(255, 255, 255, 0.07);
border: 1px solid var(--mr-border);
border-radius: var(--mr-missing-chip-radius);
font-family: var(--mr-font-family-mono);
font-size: var(--mr-font-md);
color: var(--mr-text);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mr-chip:hover {
background: #444;
}
/* Confidence Badges */
.mr-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--mr-spacing-1) var(--mr-spacing-7);
border-radius: var(--mr-missing-chip-radius);
font-size: var(--mr-font-xs);
font-weight: 600;
min-width: 36px;
text-align: center;
border: 1px solid transparent;
}
.mr-badge-high {
background: rgba(114, 211, 138, 0.14);
color: #a7e6b6;
border-color: rgba(114, 211, 138, 0.22);
}
.mr-badge-medium {
background: rgba(225, 178, 77, 0.15);
color: #efd391;
border-color: rgba(225, 178, 77, 0.2);
}
.mr-badge-low {
background: rgba(224, 106, 106, 0.14);
color: #efb1b1;
border-color: rgba(224, 106, 106, 0.2);
}
.mr-badge-neutral {
background: var(--mr-missing-control-bg-hover);
color: #d4d4d4;
border-color: rgba(255, 255, 255, 0.1);
}
/* Match Row */
.mr-match-row {
display: flex;
align-items: center;
gap: var(--mr-spacing-8);
padding: var(--mr-spacing-6) var(--mr-spacing-8);
border-radius: var(--mr-ui-radius-sm);
margin-bottom: var(--mr-spacing-4);
background: rgba(255, 255, 255, 0.016);
border: 1px solid transparent;
transition: var(--mr-transition-smooth);
}
.mr-missing-browser .mr-match-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
align-items: center;
min-height: 44px;
margin-bottom: var(--mr-spacing-7);
padding: 9px var(--mr-spacing-10);
background: var(--mr-missing-surface-muted, rgba(255, 255, 255, 0.016));
border: 1px solid var(--mr-missing-line, transparent);
border-radius: var(--mr-missing-control-radius, var(--mr-ui-radius-sm));
box-shadow: none;
}
.mr-match-row:hover {
background: var(--mr-missing-control-bg);
box-shadow: inset 0 0 0 1px var(--mr-border);
}
.mr-missing-browser .mr-match-row:hover {
background: var(--mr-missing-control-bg);
border-color: var(--mr-missing-line-strong, rgba(255, 255, 255, 0.12));
box-shadow: none;
}
.mr-match-row.mr-best-match {
background: rgba(114, 211, 138, 0.08);
box-shadow: inset 0 0 0 1px rgba(114, 211, 138, 0.16);
}
.mr-match-row.mr-local-match-hash-highlight,
.mr-match-row.mr-best-match.mr-local-match-hash-highlight,
.mr-match-row.mr-local-match-hash-highlight:hover,
.mr-match-row.mr-best-match.mr-local-match-hash-highlight:hover {
background: rgba(114, 211, 138, 0.13);
border-color: rgba(114, 211, 138, 0.58);
box-shadow:
inset 0 0 0 2px rgba(114, 211, 138, 0.72),
0 0 0 1px rgba(114, 211, 138, 0.16);
}
.mr-missing-browser .mr-match-row.mr-best-match {
background: rgba(114, 211, 138, 0.085);
border-color: rgba(114, 211, 138, 0.24);
box-shadow: none;
}
.mr-missing-browser .mr-match-row.mr-local-match-hash-highlight,
.mr-missing-browser .mr-match-row.mr-best-match.mr-local-match-hash-highlight,
.mr-missing-browser .mr-match-row.mr-local-match-hash-highlight:hover,
.mr-missing-browser .mr-match-row.mr-best-match.mr-local-match-hash-highlight:hover {
background: rgba(114, 211, 138, 0.13);
border-color: rgba(114, 211, 138, 0.62);
box-shadow: inset 0 0 0 2px rgba(114, 211, 138, 0.72);
}
.mr-match-filename {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--mr-font-family-mono);
font-size: var(--mr-font-sm);
color: var(--mr-text-soft);
}
.mr-missing-browser .mr-match-filename {
color: var(--mr-text-soft);
}
.mr-match-status {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 20px;
padding: var(--mr-spacing-2) var(--mr-spacing-7);
border-radius: var(--mr-missing-control-radius, var(--mr-ui-radius-sm));
font-size: var(--mr-font-xs);
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
.mr-match-status-group {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: var(--mr-spacing-5);
min-width: 0;
flex-wrap: wrap;
}
.mr-match-status-exact {
color: #72d38a;
background: rgba(114, 211, 138, 0.10);
}
.mr-match-status-hash {
color: #7dd3fc;
background: rgba(125, 211, 252, 0.12);
box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.22);
}
.mr-match-status-hash:focus-visible {
outline: 2px solid rgba(114, 211, 138, 0.62);
outline-offset: 2px;
}
.mr-match-status-partial {
color: var(--mr-warning);
background: rgba(241, 207, 100, 0.10);
}
.mr-match-status-bad-folder,
.mr-match-status-bad-type {
color: #fca5a5;
background: rgba(248, 113, 113, 0.12);
box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.22);
cursor: help;
}
.mr-match-status-downloading {
color: #67e8f9;
background: rgba(6, 182, 212, 0.12);
box-shadow: inset 0 0 0 1px rgba(6, 182, 212, 0.24);
cursor: help;
}
.mr-match-status-bad-folder:focus-visible,
.mr-match-status-bad-type:focus-visible {
outline: 2px solid rgba(248, 113, 113, 0.58);
outline-offset: 2px;
}
.mr-match-status-downloading:focus-visible {
outline: 2px solid rgba(6, 182, 212, 0.58);
outline-offset: 2px;
}
.mr-local-alternatives-toggle {
display: flex;
align-items: center;
width: 100%;
min-height: 32px;
margin: var(--mr-spacing-6) 0 var(--mr-spacing-7);
padding: 0 var(--mr-spacing-8);
gap: var(--mr-spacing-8);
color: var(--mr-text-muted);
background: rgba(255, 255, 255, 0.022);
border: 1px solid rgba(255, 255, 255, 0.045);
border-radius: var(--mr-missing-control-radius, var(--mr-ui-radius-sm));
font-family: inherit;
font-size: var(--mr-font-sm);
cursor: pointer;
outline: none;
box-sizing: border-box;
transition: var(--mr-missing-control-transition);
}
.mr-local-alternatives-toggle:hover {
color: var(--mr-text-soft);
background: var(--mr-missing-control-bg);
border-color: var(--mr-missing-control-bg-hover);
}
.mr-local-alternatives-toggle:focus-visible {
background: var(--mr-missing-control-bg);
box-shadow: none;
}
.mr-local-alternatives-label {
color: var(--mr-text-muted);
font-weight: 650;
font-size: var(--mr-font-xs);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.mr-local-alternatives-state {
margin-left: auto;
color: var(--mr-text-dim);
font-size: var(--mr-font-xs);
font-weight: 650;
}
.mr-local-alternatives-chevron {
width: 7px;
height: 7px;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: rotate(45deg) translateY(-1px);
transition: var(--mr-transition-transform);
}
.mr-local-alternatives-toggle[aria-expanded="true"] .mr-local-alternatives-chevron {
transform: rotate(225deg) translateY(-1px);
}
/* Buttons */
.mr-btn,
#model-resolver-modal .mr-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--mr-spacing-5);
min-height: var(--mr-missing-search-button-height, 34px);
height: var(--mr-missing-search-button-height, 34px);
padding: 0 var(--mr-spacing-12);
color: var(--mr-text);
background: var(--mr-missing-control-bg, rgba(255, 255, 255, 0.035));
border: 1px solid var(--mr-missing-control-border, rgba(255, 255, 255, 0.105));
border-radius: var(--mr-missing-control-radius, 7px);
box-shadow: var(--mr-missing-control-shadow, none);
box-sizing: border-box;
margin: 0;
font-size: var(--mr-font-md);
font-weight: 700;
line-height: 1;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition: var(--mr-missing-control-transition, background 0.15s ease, border-color 0.15s ease, color 0.15s ease);
white-space: nowrap;
text-decoration: none;
vertical-align: middle;
}
.mr-btn>svg,
#model-resolver-modal .mr-btn>svg {
display: block;
width: 14px;
height: 14px;
flex: 0 0 auto;
}
.mr-btn:hover:not(:disabled),
#model-resolver-modal .mr-btn:hover:not(:disabled) {
color: var(--mr-text);
background: var(--mr-missing-control-bg-hover, rgba(255, 255, 255, 0.06));
border-color: var(--mr-missing-control-border-hover, rgba(255, 255, 255, 0.17));
transform: none;
}
.mr-missing-browser .mr-btn,
#model-resolver-modal .mr-missing-browser .mr-btn {
border-radius: var(--mr-missing-control-radius, var(--mr-ui-radius-sm));
box-shadow: var(--mr-missing-control-shadow, none);
}
.mr-missing-browser .mr-btn:hover:not(:disabled),
#model-resolver-modal .mr-missing-browser .mr-btn:hover:not(:disabled) {
transform: none;
}
.mr-btn:disabled,
#model-resolver-modal .mr-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.mr-btn:focus-visible,
#model-resolver-modal .mr-btn:focus-visible {
outline: none;
border-color: var(--mr-missing-control-focus-border, rgba(114, 211, 138, 0.30));
box-shadow: 0 0 0 2px var(--mr-missing-control-focus-ring, rgba(114, 211, 138, 0.08));
}
@keyframes mr-refresh-spin {
to {
transform: rotate(360deg);
}
}
@keyframes mr-suggest-lightbulb-flash {
0% {
color: var(--mr-text);
stroke: var(--mr-text);
filter: none;
transform: scale(1);
}
35% {
color: #ffd84d;
stroke: #ffd84d;
filter: drop-shadow(0 0 7px rgba(255, 216, 77, 0.75));
transform: scale(1.12);
}
70% {
color: #ffe680;
stroke: #ffe680;
filter: drop-shadow(0 0 4px rgba(255, 216, 77, 0.45));
transform: scale(1.04);
}
100% {
color: var(--mr-text);
stroke: var(--mr-text);
filter: none;
transform: scale(1);
}
}
.mr-refresh-spin-target,
#model-resolver-modal .mr-refresh-spin-target {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.mr-btn.mr-is-refreshing>svg,
#model-resolver-modal .mr-btn.mr-is-refreshing>svg,
.mr-btn.mr-is-refreshing .mr-refresh-spin-target,
#model-resolver-modal .mr-btn.mr-is-refreshing .mr-refresh-spin-target {
animation: mr-refresh-spin 0.62s linear infinite;
transform-origin: center;
}
@media (prefers-reduced-motion: reduce) {
.mr-btn.mr-is-refreshing>svg,
#model-resolver-modal .mr-btn.mr-is-refreshing>svg,
.mr-btn.mr-is-refreshing .mr-refresh-spin-target,
#model-resolver-modal .mr-btn.mr-is-refreshing .mr-refresh-spin-target {
animation: mr-refresh-spin 0.9s linear 1;
}
}
.mr-btn-primary,
#model-resolver-modal .mr-btn-primary {
background: var(--mr-accent);
border-color: rgba(114, 211, 138, 0.42);
color: white;
}
.mr-btn-primary:hover:not(:disabled),
#model-resolver-modal .mr-btn-primary:hover:not(:disabled) {
background: var(--mr-accent-hover);
border-color: rgba(114, 211, 138, 0.55);
color: white;
}
.mr-btn-secondary,
.mr-btn-link,
#model-resolver-modal .mr-btn-secondary,
#model-resolver-modal .mr-btn-link {
background: var(--mr-missing-control-bg, rgba(255, 255, 255, 0.035));
color: var(--mr-text);
border-color: var(--mr-missing-control-border, rgba(255, 255, 255, 0.105));
box-shadow: var(--mr-missing-control-shadow, none);
}
.mr-missing-browser .mr-btn-secondary,
#model-resolver-modal .mr-missing-browser .mr-btn-secondary {
background: var(--mr-missing-control-bg, rgba(255, 255, 255, 0.035));
border-color: var(--mr-missing-control-border, var(--mr-missing-line-strong, rgba(255, 255, 255, 0.12)));
}
.mr-btn-secondary:hover:not(:disabled),
.mr-btn-link:hover:not(:disabled),
#model-resolver-modal .mr-btn-secondary:hover:not(:disabled),
#model-resolver-modal .mr-btn-link:hover:not(:disabled) {
background: var(--mr-missing-control-bg-hover, rgba(255, 255, 255, 0.06));
color: var(--mr-text);
border-color: var(--mr-missing-control-border-hover, rgba(255, 255, 255, 0.17));
transform: none;
}
.mr-missing-browser .mr-btn-secondary:hover:not(:disabled),
#model-resolver-modal .mr-missing-browser .mr-btn-secondary:hover:not(:disabled) {
background: var(--mr-missing-control-bg-hover, rgba(255, 255, 255, 0.055));
border-color: var(--mr-missing-control-border-hover, rgba(255, 255, 255, 0.18));
transform: none;
}
.mr-btn-download,
#model-resolver-modal .mr-btn-download {
background: var(--mr-accent);
border-color: rgba(114, 211, 138, 0.42);
color: #101010;
box-shadow: 0 8px 18px rgba(114, 211, 138, 0.18);
}
.mr-btn-download:hover:not(:disabled),
#model-resolver-modal .mr-btn-download:hover:not(:disabled) {
background: var(--mr-accent-hover);
border-color: rgba(114, 211, 138, 0.55);
color: #101010;
transform: none;
}
.mr-btn-danger,
#model-resolver-modal .mr-btn-danger {
background: var(--mr-color-danger-bright);
border-color: rgba(244, 67, 54, 0.52);
color: white;
}
.mr-btn-danger:hover:not(:disabled),
#model-resolver-modal .mr-btn-danger:hover:not(:disabled) {
background: #d32f2f;
border-color: rgba(211, 47, 47, 0.62);
color: white;
}
.mr-btn-sm,
#model-resolver-modal .mr-btn-sm {
min-height: var(--mr-missing-search-button-height, 34px);
height: var(--mr-missing-search-button-height, 34px);
padding: 0 var(--mr-spacing-12);
border-radius: var(--mr-missing-control-radius, 7px);
font-size: var(--mr-font-md);
font-weight: 700;
line-height: 1;
}
.mr-btn-ghost {
background: rgba(255, 255, 255, 0.018);
color: var(--mr-text-muted);
border-color: var(--mr-border);
box-shadow: none;
}
.mr-btn-ghost:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.04);
color: var(--mr-text);
border-color: var(--mr-border-strong);
}
.mr-btn-utility {
padding-inline: 6px;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--mr-text-soft);
}
.mr-btn-link-compact {
min-width: 58px;
gap: var(--mr-spacing-4);
padding-inline: 5px;
font-size: var(--mr-font-xs);
}
.mr-missing-browser .mr-local-link-btn,
.mr-missing-browser .mr-btn-link-compact {
position: relative;
flex: 0 0 46px;
width: 46px;
min-width: 46px;
height: 28px;
min-height: 28px;
padding: 0 var(--mr-spacing-8);
overflow: hidden;
gap: 0;
color: var(--mr-text-muted);
font-size: 0;
font-weight: 650;
background: var(--mr-missing-control-bg, rgba(255, 255, 255, 0.035));
border-color: var(--mr-missing-control-border, rgba(255, 255, 255, 0.09));
}
.mr-missing-browser .mr-local-link-btn::before,
.mr-missing-browser .mr-btn-link-compact::before {
content: "Link";
display: block;
width: auto;
height: auto;
background: transparent;
font-size: var(--mr-font-xs);
line-height: 1;
}
.mr-missing-browser .mr-local-link-btn>*,
.mr-missing-browser .mr-btn-link-compact>* {
display: none;
}
.mr-missing-browser .mr-local-link-btn:hover:not(:disabled),
.mr-missing-browser .mr-btn-link-compact:hover:not(:disabled) {
color: var(--mr-text);
background: var(--mr-missing-control-bg-hover, rgba(255, 255, 255, 0.06));
border-color: var(--mr-missing-control-border-hover, rgba(255, 255, 255, 0.16));
}
.mr-missing-browser .mr-local-link-btn {
flex: 0 0 30px;
width: 30px;
min-width: 30px;
height: var(--mr-button-height-md);
min-height: var(--mr-button-height-md);
padding: 0;
}
.mr-missing-browser .mr-local-link-btn>* {
display: none;
}
.mr-missing-browser .mr-local-link-btn::before {
content: none;
display: none;
}
.mr-missing-browser .mr-local-link-btn>svg {
display: block !important;
width: 14px;
height: 14px;
}
.mr-btn-icon-only,
#model-resolver-modal .mr-btn-icon-only {
width: var(--mr-missing-search-button-height, 34px);
min-width: var(--mr-missing-search-button-height, 34px);
height: var(--mr-missing-search-button-height, 34px);
min-height: var(--mr-missing-search-button-height, 34px);
padding: 0;
aspect-ratio: 1;
}
.mr-btn-icon,
#model-resolver-modal .mr-btn-icon {
font-size: var(--mr-font-md);
}
.mr-btn-icon svg,
#model-resolver-modal .mr-btn-icon svg {
width: var(--mr-font-base);
height: var(--mr-font-base);
display: block;
}
.mr-card-actions .mr-btn,
.mr-match-row .mr-btn,
.mr-combo-row .mr-btn {
min-height: 28px;
}
.mr-search-source-btn {
border-radius: var(--mr-missing-chip-radius);
padding-inline: 11px;
background: rgba(255, 255, 255, 0.03);
color: var(--mr-text);
border-color: rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.mr-search-source-btn.mr-btn-primary {
background: rgba(255, 255, 255, 0.03);
color: var(--mr-text);
border-color: rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.mr-search-source-btn:hover:not(:disabled),
.mr-search-source-btn.mr-btn-primary:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.05);
color: var(--mr-text);
border-color: rgba(255, 255, 255, 0.16);
}
/* Download Section */
.mr-download-section {
--mr-download-control-height: 36px;
display: grid;
gap: var(--mr-spacing-10);
padding: var(--mr-spacing-10);
background: var(--mr-surface-elevated);
border-radius: 0;
border: 1px solid transparent;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.mr-missing-browser .mr-download-section {
padding: var(--mr-spacing-10);
gap: var(--mr-spacing-10);
background: rgba(255, 255, 255, 0.012);
border: 1px solid rgba(255, 255, 255, 0.045);
border-radius: var(--mr-missing-control-radius, var(--mr-ui-radius-sm));
box-shadow: none;
}
.mr-status-inline {
display: flex;
align-items: center;
gap: var(--mr-spacing-8);
flex-wrap: wrap;
}
.mr-download-info {
font-size: var(--mr-font-sm);
color: var(--mr-text-muted);
margin-top: 0;
line-height: 1.55;
}
.mr-missing-browser .mr-status-inline {
gap: var(--mr-spacing-7);
}
.mr-missing-browser .mr-download-info {
font-size: var(--mr-font-sm);
}
.mr-download-size {
color: var(--mr-text-dim);
margin-left: var(--mr-spacing-8);
}
.mr-search-source-bar {
display: grid;
grid-template-columns: 82px minmax(0, 0.85fr) minmax(0, 1fr);
align-items: end;
gap: var(--mr-spacing-10);
margin-bottom: 0;
}
.mr-custom-url-bar {
display: grid;
grid-template-columns: 82px minmax(0, 1fr);
align-items: end;
gap: var(--mr-spacing-10);
margin-top: var(--mr-spacing-8);
}
.mr-search-button-picker {
width: 82px;
min-width: 82px;
}
.mr-custom-url-button-picker {
width: 82px;
min-width: 82px;
}
.mr-download-section .mr-search-button-picker>.mr-btn {
height: var(--mr-download-control-height);
min-height: var(--mr-download-control-height);
width: 100%;
padding: 0 var(--mr-spacing-10);
border-radius: var(--mr-radius-xl);
font-size: var(--mr-font-md);
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--mr-spacing-8);
white-space: normal;
}
.mr-download-section .mr-custom-url-button-picker>.mr-btn {
height: var(--mr-download-control-height);
min-height: var(--mr-download-control-height);
width: 100%;
padding: 0 var(--mr-spacing-10);
border-radius: var(--mr-radius-xl);
font-size: var(--mr-font-md);
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--mr-spacing-8);
}
.mr-search-btn-text {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--mr-spacing-2);
line-height: 1.05;
text-align: center;
}
.mr-search-btn-line {
display: block;
}
.mr-missing-browser .mr-download-section .mr-search-button-picker>.mr-btn,
.mr-missing-browser .mr-download-section .mr-custom-url-button-picker>.mr-btn {
background: var(--mr-missing-control-bg, rgba(255, 255, 255, 0.035));
border-color: var(--mr-missing-control-border, rgba(255, 255, 255, 0.105));
border-radius: var(--mr-missing-control-radius, 7px);
box-shadow: var(--mr-missing-control-shadow, none);
}
.mr-missing-browser .mr-download-section .mr-search-button-picker>.mr-btn:hover:not(:disabled),
.mr-missing-browser .mr-download-section .mr-custom-url-button-picker>.mr-btn:hover:not(:disabled) {
background: var(--mr-missing-control-bg-hover, rgba(255, 255, 255, 0.06));
border-color: var(--mr-missing-control-border-hover, rgba(255, 255, 255, 0.17));
transform: none;
}
.mr-search-source-picker {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: var(--mr-spacing-6);
min-width: 0;
width: 100%;
}
.mr-search-source-picker-label {
display: flex;
align-items: center;
min-height: 14px;
color: var(--mr-text-muted);
font-size: var(--mr-font-xs);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
.mr-search-source-picker-label .mr-search-model-help {
width: 14px;
height: 14px;
margin-left: var(--mr-spacing-3);
font-size: var(--mr-font-xs);
line-height: 1;
transform: translateY(-1px);
}
.mr-search-source-select,
.mr-search-base-select,
.mr-custom-url-input {
width: 100%;
height: var(--mr-download-control-height);
min-height: var(--mr-download-control-height);
padding: 0 var(--mr-spacing-10);
background: rgba(255, 255, 255, 0.04);
color: var(--mr-text);
border: 1px solid var(--mr-border);
border-radius: var(--mr-radius-xl);
font-size: var(--mr-font-md);
line-height: 1;
outline: none;
appearance: none;
box-sizing: border-box;
}
.mr-missing-browser .mr-search-source-select,
.mr-missing-browser .mr-search-base-select,
.mr-missing-browser .mr-custom-url-input {
background: var(--mr-missing-control-bg, rgba(255, 255, 255, 0.035));
border-color: var(--mr-missing-control-border, var(--mr-missing-line-strong, rgba(255, 255, 255, 0.12)));
border-radius: var(--mr-missing-control-radius, 7px);
}
.mr-missing-browser .mr-search-source-select:focus,
.mr-missing-browser .mr-search-base-select:focus,
.mr-missing-browser .mr-custom-url-input:focus {
border-color: var(--mr-missing-control-focus-border, rgba(114, 211, 138, 0.4));
box-shadow: 0 0 0 2px var(--mr-missing-control-focus-ring, rgba(114, 211, 138, 0.12));
}
.mr-search-source-select:focus,
.mr-search-base-select:focus,
.mr-custom-url-input:focus {
border-color: rgba(114, 211, 138, 0.4);
box-shadow: var(--mr-shadow-focus-ring);
}
@media (max-width: 720px) {
.mr-search-source-bar,
.mr-custom-url-bar {
grid-template-columns: 1fr;
}
.mr-download-section .mr-search-source-bar>.mr-btn,
.mr-download-section .mr-custom-url-bar>.mr-btn {
justify-self: start;
}
}
.mr-search-results {
margin-top: var(--mr-spacing-8);
display: none;
}
.mr-search-results-table-wrap {
margin-top: var(--mr-spacing-8);
overflow-x: auto;
background: rgba(255, 255, 255, 0.025);
border: 1px solid var(--mr-border);
border-radius: var(--mr-radius-xl);
}
.mr-missing-browser .mr-search-results-table-wrap {
background: rgba(255, 255, 255, 0.018);
border-color: rgba(255, 255, 255, 0.052);
border-radius: var(--mr-missing-radius, 7px);
}
.mr-search-results-table {
width: 100%;
min-width: var(--mr-table-min, 520px);
border-collapse: collapse;
table-layout: fixed;
font-size: var(--mr-font-sm);
}
.mr-search-results-table th,
.mr-search-results-table td {
padding: var(--mr-spacing-7) var(--mr-spacing-10);
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.065);
vertical-align: middle;
}
.mr-search-results-table th {
color: var(--mr-text-muted);
font-size: var(--mr-font-xs);
font-weight: 700;
text-align: center;
background: var(--mr-missing-control-bg);
}
.mr-missing-browser .mr-search-results-table th {
background: var(--mr-missing-surface-raised, rgba(255, 255, 255, 0.04));
color: var(--mr-text-muted);
}
.mr-search-results-table tr:last-child td {
border-bottom: 0;
}
.mr-search-col-source {
width: var(--mr-source-col, 118px);
}
.mr-search-col-model {
width: auto;
}
.mr-search-col-match {
width: var(--mr-match-col, 64px);
}
.mr-search-col-size {
width: var(--mr-size-col, 64px);
}
.mr-search-col-actions {
width: var(--mr-actions-col, 72px);
}
.mr-search-results-table td:nth-child(3) {
text-align: center;
}
.mr-search-source-pill {
display: inline-flex;
gap: var(--mr-spacing-5);
max-width: 100%;
min-height: 18px;
align-items: center;
padding: var(--mr-spacing-2) var(--mr-spacing-7);
overflow: hidden;
color: var(--mr-text);
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--mr-border);
border-radius: var(--mr-missing-chip-radius);
font-size: var(--mr-font-xs);
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.mr-search-source-cell {
display: inline-grid;
max-width: 100%;
gap: var(--mr-spacing-3);
justify-items: start;
}
.mr-search-source-pill>span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.mr-search-source-date {
display: block;
max-width: 100%;
overflow: hidden;
color: var(--mr-text-muted);
font-size: var(--mr-font-xs);
font-weight: 600;
line-height: 1.15;
text-overflow: ellipsis;
white-space: nowrap;
}
.mr-search-source-icon {
display: block;
flex: 0 0 12px;
width: 12px;
height: 12px;
}
.mr-search-result-model {
display: grid;
min-width: 0;
gap: var(--mr-spacing-2);
}
.mr-search-result-model span,
.mr-search-result-model small {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mr-search-result-model span {
color: var(--mr-text);
font-weight: 650;
}
.mr-model-version {
color: var(--mr-text-secondary);
font-style: italic;
font-weight: 500;
}
.mr-search-result-model small,
.mr-search-size,
.mr-search-result-empty {
color: var(--mr-text-muted);
font-size: var(--mr-font-xs);
}
.mr-search-size {
min-width: 0;
text-align: center;
white-space: nowrap;
}
.mr-search-match {
font-weight: 750;
}
.mr-search-match-strong {
color: #72d38a;
}
.mr-search-match-hash {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 20px;
padding: var(--mr-spacing-2) var(--mr-spacing-7);
border: 1px solid rgba(125, 211, 252, 0.22);
border-radius: var(--mr-missing-control-radius, var(--mr-ui-radius-sm));
line-height: 1;
color: #7dd3fc;
background: rgba(125, 211, 252, 0.12);
}
.mr-search-match-has-local-target {
cursor: default;
}
.mr-search-match-has-local-target:focus-visible {
outline: 2px solid rgba(114, 211, 138, 0.62);
outline-offset: 2px;
}
.mr-search-results-table tr.mr-search-result-hash-highlight td {
background: rgba(114, 211, 138, 0.10);
border-bottom-color: rgba(114, 211, 138, 0.34);
box-shadow:
inset 0 2px 0 rgba(114, 211, 138, 0.72),
inset 0 -2px 0 rgba(114, 211, 138, 0.72);
}
.mr-search-results-table tr.mr-search-result-hash-highlight td:first-child {
box-shadow:
inset 2px 0 0 rgba(114, 211, 138, 0.72),
inset 0 2px 0 rgba(114, 211, 138, 0.72),
inset 0 -2px 0 rgba(114, 211, 138, 0.72);
}
.mr-search-results-table tr.mr-search-result-hash-highlight td:last-child {
box-shadow:
inset -2px 0 0 rgba(114, 211, 138, 0.72),
inset 0 2px 0 rgba(114, 211, 138, 0.72),
inset 0 -2px 0 rgba(114, 211, 138, 0.72);
}
.mr-search-match-linked-highlight {
border-color: rgba(114, 211, 138, 0.58);
box-shadow: inset 0 0 0 1px rgba(114, 211, 138, 0.55);
}
.mr-search-match-medium {
color: var(--mr-warning);
}
.mr-search-match-weak {
color: #8fd0ff;
}
.mr-search-match-neutral {
color: var(--mr-text-muted);
}
.mr-search-result-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--mr-spacing-8);
min-height: 24px;
min-width: 0;
width: 100%;
}
#model-resolver-modal .mr-search-result-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
min-width: 24px;
min-height: 24px;
max-width: 24px;
flex: 0 0 24px;
margin: 0;
padding: 0;
border: 1px solid var(--mr-missing-control-border, rgba(255, 255, 255, 0.105));
border-radius: var(--mr-missing-control-radius, 7px);
background: var(--mr-missing-control-bg, rgba(255, 255, 255, 0.03));
color: var(--mr-text);
box-shadow: var(--mr-missing-control-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.02));
box-sizing: border-box;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
line-height: 1;
font-family: inherit;
font-size: 0;
font-weight: 600;
text-decoration: none;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
transition: var(--mr-missing-control-transition, background 0.15s ease, border-color 0.15s ease, color 0.15s ease);
}
#model-resolver-modal .mr-search-result-action-btn:hover:not(:disabled) {
background: var(--mr-missing-control-bg-hover, rgba(255, 255, 255, 0.06));
border-color: var(--mr-missing-control-border-hover, rgba(255, 255, 255, 0.16));
transform: none;
}
#model-resolver-modal .mr-search-result-action-btn svg {
width: var(--mr-missing-icon-size, 13px);
height: var(--mr-missing-icon-size, 13px);
display: block;
flex: 0 0 var(--mr-missing-icon-size, 13px);
pointer-events: none;
}
.mr-search-progress-list {
display: grid;
gap: var(--mr-spacing-6);
margin: var(--mr-spacing-8) 0;
}
.mr-search-progress-list-compact {
display: flex;
gap: var(--mr-spacing-6);
align-items: center;
margin: var(--mr-spacing-6) 0;
overflow-x: auto;
scrollbar-width: thin;
}
.mr-search-progress-item {
padding: var(--mr-spacing-6) var(--mr-spacing-8);
background: var(--mr-missing-control-bg);
border: 1px solid var(--mr-border);
border-radius: var(--mr-radius-xl);
}
.mr-search-progress-list-compact .mr-search-progress-item {
display: inline-flex;
align-items: center;
gap: var(--mr-spacing-6);
flex: 0 0 auto;
max-width: 190px;
min-height: 24px;
padding: var(--mr-spacing-3) var(--mr-spacing-8);
border-radius: var(--mr-missing-chip-radius);
}
.mr-missing-browser .mr-search-progress-list-compact .mr-search-progress-item {
background: var(--mr-missing-surface, rgba(255, 255, 255, 0.024));
border-color: var(--mr-missing-line, rgba(255, 255, 255, 0.075));
}
.mr-search-progress-list-compact .mr-search-progress-item::before {
content: "";
flex: 0 0 6px;
width: 6px;
height: 6px;
border-radius: var(--mr-missing-chip-radius);
background: var(--mr-text-muted);
}
.mr-search-progress-list-compact .mr-search-progress-found::before {
background: #72d38a;
}
.mr-search-progress-list-compact .mr-search-progress-none::before {
background: rgba(255, 255, 255, 0.48);
}
.mr-search-progress-list-compact .mr-search-progress-error::before {
background: var(--mr-color-error-lighter);
}
.mr-search-progress-list-compact .mr-search-progress-cancelled::before {
background: rgba(255, 255, 255, 0.38);
}
.mr-search-progress-list-compact .mr-search-progress-source,
.mr-search-progress-list-compact .mr-search-progress-status {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--mr-font-xs);
}
.mr-search-progress-list-compact .mr-search-progress-source {
color: var(--mr-text);
font-weight: 700;
}
.mr-search-progress-list-compact .mr-search-progress-status {
color: var(--mr-text-muted);
}
.mr-search-progress-list-compact .mr-search-progress-found .mr-search-progress-status {
color: #72d38a;
}
.mr-search-progress-list-compact .mr-search-progress-error .mr-search-progress-status {
color: var(--mr-color-error-lighter);
}
.mr-search-progress-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mr-spacing-8);
margin-bottom: var(--mr-spacing-5);
font-size: var(--mr-font-sm);
color: var(--mr-text-muted);
}
.mr-search-progress-head span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mr-search-progress-head span:first-child {
color: var(--mr-text);
font-weight: 600;
}
.mr-search-progress-head .mr-search-progress-status {
flex: 0 1 auto;
max-width: 55%;
text-align: right;
}
#model-resolver-modal .mr-search-result-action-btn.mr-search-progress-cancel,
#model-resolver-modal .mr-missing-detail-pane .mr-search-result-action-btn.mr-search-progress-cancel {
width: 16px;
height: 16px;
min-width: 16px;
min-height: 16px;
max-width: 16px;
max-height: 16px;
flex: 0 0 16px;
border-radius: var(--mr-radius-md);
border-color: rgba(255, 120, 112, 0.28);
background: rgba(255, 120, 112, 0.055);
color: var(--mr-color-error-lighter);
}
#model-resolver-modal .mr-search-result-action-btn.mr-search-progress-cancel:hover:not(:disabled),
#model-resolver-modal .mr-missing-detail-pane .mr-search-result-action-btn.mr-search-progress-cancel:hover:not(:disabled) {
background: rgba(255, 120, 112, 0.12);
border-color: rgba(255, 120, 112, 0.48);
color: #ffd2ce;
}
#model-resolver-modal .mr-search-result-action-btn.mr-search-progress-cancel svg,
#model-resolver-modal .mr-missing-detail-pane .mr-search-result-action-btn.mr-search-progress-cancel svg {
width: 9px;
height: 9px;
flex: 0 0 9px;
color: currentColor;
stroke: currentColor;
}
.mr-search-progress-bar {
height: 5px;
overflow: hidden;
background: var(--mr-border);
border-radius: var(--mr-radius-md);
}
.mr-search-progress-fill {
height: 100%;
background: var(--mr-accent);
border-radius: inherit;
transition: var(--mr-transition-bg);
}
.mr-search-progress-running .mr-search-progress-fill {
background: linear-gradient(90deg, rgba(114, 211, 138, 0.62), var(--mr-accent));
}
.mr-search-progress-found .mr-search-progress-fill {
background: #72d38a;
}
.mr-search-progress-none .mr-search-progress-fill {
background: rgba(255, 255, 255, 0.32);
}
.mr-search-progress-error .mr-search-progress-fill {
background: var(--mr-color-error-lighter);
}
.mr-search-progress-cancelled .mr-search-progress-fill {
background: rgba(255, 255, 255, 0.28);
}
.mr-combo-section {
position: relative;
margin-top: var(--mr-spacing-8);
padding-top: var(--mr-spacing-8);
border-top: 1px solid var(--mr-divider);
}
.mr-missing-browser .mr-combo-section {
border-top-color: var(--mr-missing-line, var(--mr-divider));
}
.mr-combo-row {
display: flex;
align-items: center;
gap: var(--mr-spacing-6);
margin-bottom: var(--mr-spacing-4);
}
.mr-combo-label {
opacity: 0.9;
font-size: var(--mr-font-xs);
color: var(--mr-text-muted);
font-weight: 600;
min-width: 42px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.mr-combo-input {
flex: 1;
min-width: 0;
min-height: var(--mr-button-height-md);
padding: var(--mr-spacing-5) var(--mr-spacing-10);
background: rgba(255, 255, 255, 0.04);
color: var(--mr-text);
border: 1px solid var(--mr-border);
border-radius: var(--mr-radius-2xl);
font-size: var(--mr-font-md);
outline: none;
transition: var(--mr-transition-smooth);
}
.mr-missing-browser .mr-combo-input {
min-height: 34px;
background: var(--mr-missing-control-bg);
border-color: var(--mr-missing-line-strong, rgba(255, 255, 255, 0.12));
border-radius: var(--mr-missing-control-radius, 7px);
}
.mr-combo-input:focus {
border-color: rgba(114, 211, 138, 0.4);
box-shadow: var(--mr-shadow-focus-ring);
}
.mr-combo-list {
position: absolute;
top: calc(100% + 4px);
left: 44px;
right: 0;
width: auto;
max-height: 220px;
overflow: auto;
display: none;
z-index: var(--mr-z-notification);
background: linear-gradient(180deg, var(--mr-panel-bg-strong) 0%, var(--mr-card-bg) 100%);
border: 1px solid var(--mr-border-strong);
border-radius: var(--mr-radius-2xl);
box-shadow: var(--mr-shadow-elevated);
}
.mr-missing-browser .mr-combo-list {
background: #1b1b1b;
border-color: var(--mr-missing-line-strong, rgba(255, 255, 255, 0.12));
border-radius: var(--mr-missing-radius, 7px);
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
}
.mr-combo-option {
padding: var(--mr-spacing-8) var(--mr-spacing-10);
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
font-size: var(--mr-font-md);
color: var(--mr-text);
background: transparent;
transition: var(--mr-transition-smooth);
}
.mr-combo-option:last-child {
border-bottom: none;
}
.mr-combo-option:hover,
.mr-combo-option.is-highlighted {
background: rgba(114, 211, 138, 0.12);
}
.mr-combo-option-row {
display: flex;
align-items: center;
gap: var(--mr-spacing-6);
}
.mr-combo-option code {
flex: 1 1 0%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--mr-text);
}
.mr-combo-folder {
margin-top: var(--mr-spacing-4);
font-size: var(--mr-font-xs);
color: var(--mr-text-dim);
opacity: 0.9;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mr-combo-list.mr-local-model-browser {
box-sizing: border-box;
left: auto;
right: auto;
width: min(760px, calc(100vw - 48px));
max-height: none;
overflow: hidden;
padding: 0;
z-index: var(--mr-z-context-menu);
}
.mr-local-model-browser-scroll {
box-sizing: border-box;
overflow: auto;
padding: var(--mr-spacing-6);
}
.mr-local-model-browser .mr-folder-browser-root.is-preferred {
border-color: rgba(114, 211, 138, 0.18);
background: rgba(114, 211, 138, 0.035);
}
.mr-local-model-browser .mr-folder-browser-root-title {
font-size: var(--mr-font-sm);
}
.mr-local-model-row {
min-height: var(--mr-button-height-md);
}
.mr-local-model-file-icon {
color: rgba(120, 170, 255, 0.95);
}
.mr-local-model-folder-tag {
min-width: 0;
max-width: 42%;
padding: var(--mr-spacing-2) var(--mr-spacing-6);
border-radius: var(--mr-missing-chip-radius);
background: rgba(255, 255, 255, 0.045);
color: var(--mr-text-muted);
font-size: var(--mr-font-xs);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mr-local-model-folder-row {
font-weight: 700;
}
/* Status Messages */
.mr-status {
display: flex;
align-items: flex-start;
gap: var(--mr-spacing-10);
padding: var(--mr-spacing-10) 14px;
border-radius: var(--mr-radius-2xl);
font-size: var(--mr-font-base);
margin-top: var(--mr-spacing-8);
border: 1px solid var(--mr-missing-control-bg-hover);
}
.mr-status-icon {
font-size: var(--mr-font-xl);
flex-shrink: 0;
}
.mr-status-error {
background: rgba(244, 67, 54, 0.1);
border: 1px solid rgba(244, 67, 54, 0.3);
color: #ef9a9a;
}
.mr-status-success {
background: rgba(76, 175, 80, 0.1);
border: 1px solid rgba(76, 175, 80, 0.3);
color: var(--mr-accent-hover);
}
.mr-status-info {
background: rgba(33, 150, 243, 0.1);
border: 1px solid rgba(33, 150, 243, 0.3);
color: var(--mr-color-code-blue);
}
.mr-status-warning {
background: rgba(255, 152, 0, 0.1);
border: 1px solid rgba(255, 152, 0, 0.3);
color: #ffcc80;
}
/* Progress Bar */
.mr-progress-container {
margin-top: var(--mr-spacing-8);
}
.mr-progress-bar {
height: 6px;
background: #333;
border-radius: var(--mr-radius-md);
overflow: hidden;
}
.mr-progress-fill {
height: 100%;
background: var(--mr-accent);
transition: var(--mr-transition-width);
}
.mr-progress-text {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--mr-spacing-8);
margin-top: var(--mr-spacing-6);
font-size: var(--mr-font-sm);
color: var(--mr-text-muted);
}
.mr-progress-text>span:first-child {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.mr-progress-text>span:last-child {
flex: 0 0 auto;
text-align: right;
white-space: nowrap;
}
/* Scrollbar */
.mr-scrollable {
overflow-y: auto;
}
.mr-scrollable::-webkit-scrollbar {
width: 8px;
}
.mr-scrollable::-webkit-scrollbar-track {
background: transparent;
}
.mr-scrollable::-webkit-scrollbar-thumb {
background: #444;
border-radius: var(--mr-radius-md);
}
.mr-scrollable::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* Footer */
.mr-footer {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: var(--mr-spacing-10);
flex-wrap: wrap;
padding: 0 var(--mr-spacing-16);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0%, var(--mr-missing-control-bg) 100%);
border-top: 1px solid var(--mr-border);
}
.mr-footer.mr-footer-is-missing {
justify-content: flex-end;
}
.mr-footer-actions {
display: flex;
justify-content: flex-end;
align-items: center;
gap: var(--mr-spacing-10);
flex: 1 1 auto;
flex-wrap: wrap;
margin-left: auto;
min-width: 0;
}
.mr-footer:not(.mr-footer-is-missing) .mr-footer-actions {
display: none;
}
.mr-footer-star-link {
display: flex;
align-items: center;
gap: var(--mr-spacing-7);
min-width: 0;
color: var(--mr-color-gray-400);
font-size: var(--mr-font-sm);
line-height: 1.2;
text-decoration: none;
flex: 0 1 auto;
white-space: nowrap;
}
.mr-footer.mr-footer-is-missing .mr-footer-star-link {
flex: 0 0 auto;
margin-right: auto;
}
.mr-footer-star-link.mr-footer-star-hidden {
display: none;
}
.mr-footer-star-link:hover,
.mr-footer-star-link:focus-visible {
color: #d7d7d7;
}
.mr-footer-star-link:focus-visible {
outline: none;
}
.mr-footer-star-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex: 0 0 18px;
border-radius: 50%;
color: #f2cc60;
background: rgba(242, 204, 96, 0.14);
border: 1px solid rgba(242, 204, 96, 0.42);
box-shadow: none;
}
.mr-footer-star-icon svg {
width: 10px;
height: 10px;
display: block;
flex: 0 0 auto;
}
.mr-footer-star-text {
min-width: 0;
}
.mr-footer-star-text span {
color: #f2cc60;
font-weight: 700;
}
.mr-footer-btn {
min-height: 34px;
min-width: 138px;
padding: 0 var(--mr-spacing-12);
font-size: var(--mr-font-md);
border-radius: var(--mr-radius-lg);
line-height: 1;
backdrop-filter: none;
}
.mr-footer-menu-wrap {
position: relative;
display: inline-flex;
}
.mr-footer-menu-button {
justify-content: center;
}
.mr-footer-menu-button::after {
content: "";
width: 9px;
height: 7px;
margin-left: var(--mr-spacing-10);
background: currentColor;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
opacity: 0.78;
transform: rotate(0deg);
transition: var(--mr-transition-popover);
}
.mr-footer-menu-button[aria-expanded="true"]::after {
transform: rotate(180deg);
opacity: 0.95;
}
.mr-footer-menu {
display: none;
position: absolute;
right: 0;
bottom: calc(100% + 8px);
min-width: 212px;
max-height: min(420px, calc(100vh - 140px));
overflow-y: auto;
padding: var(--mr-spacing-5);
border: 1px solid var(--mr-missing-control-border);
border-radius: var(--mr-radius-xl);
background: rgba(31, 31, 35, 0.98);
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34);
z-index: var(--mr-z-dropdown, 10020);
}
.mr-footer-menu.is-open {
display: grid;
gap: var(--mr-spacing-2);
}
.mr-footer-menu-item {
min-height: var(--mr-button-height-md);
padding: 0 var(--mr-spacing-10);
border: 0;
border-radius: var(--mr-radius-lg);
background: transparent;
color: var(--mr-text);
font: inherit;
font-size: var(--mr-font-md);
text-align: left;
cursor: pointer;
}
#model-resolver-modal .mr-footer-menu .mr-footer-menu-item {
width: 100%;
min-height: var(--mr-button-height-md);
margin: 0;
padding: 0 var(--mr-spacing-10);
appearance: none;
-webkit-appearance: none;
border: 0 !important;
border-radius: var(--mr-radius-lg);
background: transparent !important;
box-shadow: none !important;
color: var(--mr-text);
font: inherit;
font-size: var(--mr-font-md);
line-height: 1.25;
text-align: left;
justify-content: flex-start;
}
.mr-footer-menu-checkbox,
#model-resolver-modal .mr-footer-menu .mr-footer-menu-checkbox {
display: inline-flex;
align-items: center;
gap: var(--mr-spacing-8);
cursor: pointer;
}
.mr-footer-menu-checkbox-input {
width: 13px;
height: 13px;
margin: 0;
accent-color: #72d38a;
flex: 0 0 auto;
}
.mr-footer-menu-item:hover,
.mr-footer-menu-item:focus-visible {
outline: none;
background: rgba(255, 255, 255, 0.07);
}
.mr-footer-menu-item:disabled,
.mr-footer-menu-item.mr-btn-is-disabled {
color: rgba(255, 255, 255, 0.34);
cursor: not-allowed;
}
.mr-footer-menu-item:disabled:hover,
.mr-footer-menu-item.mr-btn-is-disabled:hover,
.mr-footer-menu-item:disabled:focus-visible,
.mr-footer-menu-item.mr-btn-is-disabled:focus-visible {
background: transparent;
}
#model-resolver-modal .mr-footer-menu .mr-footer-menu-item:hover,
#model-resolver-modal .mr-footer-menu .mr-footer-menu-item:focus-visible {
outline: none;
background: rgba(255, 255, 255, 0.07) !important;
}
#model-resolver-modal .mr-footer-menu .mr-footer-menu-item:disabled,
#model-resolver-modal .mr-footer-menu .mr-footer-menu-item.mr-btn-is-disabled {
color: rgba(255, 255, 255, 0.34);
cursor: not-allowed;
}
#model-resolver-modal .mr-footer-menu .mr-footer-menu-item:disabled:hover,
#model-resolver-modal .mr-footer-menu .mr-footer-menu-item.mr-btn-is-disabled:hover,
#model-resolver-modal .mr-footer-menu .mr-footer-menu-item:disabled:focus-visible,
#model-resolver-modal .mr-footer-menu .mr-footer-menu-item.mr-btn-is-disabled:focus-visible {
background: transparent !important;
}
#model-resolver-modal .mr-footer-menu .mr-footer-menu-danger {
color: var(--mr-color-error-light, #f55);
}
#model-resolver-modal .mr-footer-menu .mr-footer-menu-danger:hover,
#model-resolver-modal .mr-footer-menu .mr-footer-menu-danger:focus-visible {
background: var(--mr-bg-error-10, rgba(255, 0, 0, 0.1)) !important;
}
.mr-footer-menu-divider {
height: 1px;
margin: var(--mr-spacing-4) var(--mr-spacing-2);
background: var(--mr-border);
}
.mr-btn.mr-footer-btn,
.mr-btn.mr-btn-primary.mr-footer-btn,
.mr-btn.mr-btn-download.mr-footer-btn {
background: var(--mr-missing-control-bg);
color: var(--mr-text);
border-color: rgba(255, 255, 255, 0.11);
box-shadow: none;
}
.mr-btn.mr-footer-btn:hover:not(:disabled),
.mr-btn.mr-btn-primary.mr-footer-btn:hover:not(:disabled),
.mr-btn.mr-btn-download.mr-footer-btn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.05);
color: var(--mr-text);
border-color: rgba(255, 255, 255, 0.16);
box-shadow: none;
transform: none;
}
.mr-btn.mr-footer-btn:disabled,
.mr-btn.mr-btn-primary.mr-footer-btn:disabled,
.mr-btn.mr-btn-download.mr-footer-btn:disabled {
opacity: 1;
color: rgba(255, 255, 255, 0.34);
background: rgba(255, 255, 255, 0.016);
border-color: rgba(255, 255, 255, 0.055);
box-shadow: none;
cursor: not-allowed;
}
.mr-btn.mr-footer-btn.mr-btn-is-disabled,
.mr-btn.mr-btn-primary.mr-footer-btn.mr-btn-is-disabled,
.mr-btn.mr-btn-download.mr-footer-btn.mr-btn-is-disabled {
opacity: 1;
color: rgba(255, 255, 255, 0.34);
background: rgba(255, 255, 255, 0.016);
border-color: rgba(255, 255, 255, 0.055);
box-shadow: none;
cursor: not-allowed;
}
/* Tabs */
.mr-tabs {
display: flex;
align-self: stretch;
align-items: flex-end;
gap: 0;
min-width: 0;
height: 100%;
padding: 0;
margin: 0;
background: transparent;
overflow: visible;
position: relative;
z-index: 2;
--mr-tab-active-bg: var(--mr-bg, #121212);
--mr-tab-corner-size: 15px;
--mr-tab-hover-bg: rgba(255, 255, 255, 0.075);
--mr-tab-separator: rgba(255, 255, 255, 0.125);
cursor: default;
}
.mr-tab {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
align-self: flex-end;
height: 36px;
min-height: 36px;
box-sizing: border-box;
padding: 0 var(--mr-spacing-24) var(--mr-spacing-5);
margin-bottom: 0;
background: transparent !important;
border: 0;
border-radius: 0;
overflow: visible;
color: rgba(255, 255, 255, 0.68);
font-size: var(--mr-font-md);
font-weight: 600;
line-height: 1;
cursor: pointer;
white-space: nowrap;
box-shadow: none;
transform: none;
opacity: 1;
appearance: none;
-webkit-appearance: none;
transition: none;
}
.mr-tab-label {
position: relative;
z-index: 2;
pointer-events: none;
transform: translateZ(0);
backface-visibility: hidden;
}
.mr-tab:not(.mr-tab-active):hover {
padding: 0 var(--mr-spacing-24) var(--mr-spacing-5) !important;
background: transparent !important;
border-radius: 0;
transform: none !important;
}
.mr-tab:not(.mr-tab-active):focus,
.mr-tab:not(.mr-tab-active):active {
padding: 0 var(--mr-spacing-24) var(--mr-spacing-5) !important;
transform: none !important;
}
.mr-tab:not(.mr-tab-active)::after {
content: "";
position: absolute;
inset: 1px 5px 6px;
border-radius: var(--mr-radius-xl);
background: var(--mr-tab-hover-bg);
opacity: 0;
pointer-events: none;
z-index: 1;
}
.mr-tab:not(.mr-tab-active):hover::after {
opacity: 1;
}
.mr-tab:not(.mr-tab-active):hover::before,
.mr-tab:not(.mr-tab-active):hover+.mr-tab:not(.mr-tab-active)::before {
opacity: 0;
}
.mr-tab:not(.mr-tab-active)+.mr-tab:not(.mr-tab-active)::before {
content: "";
position: absolute;
left: 0;
top: 8px;
bottom: 14px;
width: 1px;
background: var(--mr-tab-separator);
pointer-events: none;
}
.mr-tab.mr-tab-active {
height: 36px;
min-height: 36px;
padding: 0 var(--mr-spacing-24) var(--mr-spacing-5);
margin-bottom: 0;
color: var(--mr-text, #eef2f7);
background: var(--mr-tab-active-bg) !important;
border-radius: var(--mr-radius-2xl) var(--mr-radius-2xl) 0 0;
cursor: default;
pointer-events: none;
box-shadow: 0 1px 0 var(--mr-tab-active-bg) !important;
transform: none;
z-index: 4;
transition: none;
}
.mr-tab.mr-tab-active:hover,
.mr-tab.mr-tab-active:focus,
.mr-tab.mr-tab-active:active {
color: var(--mr-text, #eef2f7);
background: var(--mr-tab-active-bg) !important;
box-shadow: 0 1px 0 var(--mr-tab-active-bg) !important;
}
.mr-tab.mr-tab-active::before,
.mr-tab.mr-tab-active::after {
content: "";
position: absolute;
bottom: -1px;
width: var(--mr-tab-corner-size);
height: var(--mr-tab-corner-size);
background: var(--mr-tab-active-bg);
pointer-events: none;
}
.mr-tab.mr-tab-active::before {
left: -13px;
-webkit-mask: radial-gradient(circle at 0 0, transparent 13px, #000 13px);
mask: radial-gradient(circle at 0 0, transparent 13px, #000 13px);
}
.mr-tab.mr-tab-active::after {
right: -13px;
-webkit-mask: radial-gradient(circle at 100% 0, transparent 13px, #000 13px);
mask: radial-gradient(circle at 100% 0, transparent 13px, #000 13px);
}
#model-resolver-modal .mr-tab,
#model-resolver-modal .mr-footer-btn,
#model-resolver-modal .mr-local-link-btn,
#model-resolver-modal .mr-local-alternatives-toggle {
box-shadow: none !important;
outline: none;
}
#model-resolver-modal .mr-tab {
border-width: 0 !important;
margin: 0 !important;
color: rgba(255, 255, 255, 0.68) !important;
font-family: inherit !important;
font-size: var(--mr-font-lg) !important;
line-height: 1 !important;
}
#model-resolver-modal .mr-tab:not(.mr-tab-active) {
background: transparent !important;
border-radius: 0 !important;
}
#model-resolver-modal .mr-tab:not(.mr-tab-active):hover {
background: transparent !important;
border-radius: 0 !important;
}
#model-resolver-modal .mr-tab.mr-tab-active {
margin-bottom: 0 !important;
color: var(--mr-text, #eef2f7) !important;
box-shadow: 0 1px 0 var(--mr-tab-active-bg) !important;
}
#model-resolver-modal .mr-tab.mr-tab-active:hover,
#model-resolver-modal .mr-tab.mr-tab-active:focus,
#model-resolver-modal .mr-tab.mr-tab-active:active {
color: var(--mr-text, #eef2f7) !important;
}
/* Form controls must keep the resolver palette when ComfyUI themes change. */
#model-resolver-modal input:not([type="checkbox"]):not([type="radio"]),
#model-resolver-modal textarea,
#model-resolver-modal select {
color: var(--mr-text, #f3f3f3) !important;
font-family: inherit !important;
}
#model-resolver-modal input::placeholder,
#model-resolver-modal textarea::placeholder {
color: var(--mr-text-muted, #b1b1b1) !important;
opacity: 1;
}
/* Loaded Models Tab */
.mr-loaded-models {
padding: 0;
}
.mr-loaded-models-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mr-spacing-12);
padding: var(--mr-spacing-10) var(--mr-spacing-12);
border-bottom: 1px solid var(--mr-border);
}
.mr-loaded-title-block {
min-width: 0;
}
.mr-loaded-models-title {
font-size: var(--mr-font-lg);
font-weight: 600;
color: var(--mr-text);
margin: 0;
}
.mr-loaded-total {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 20px;
margin-left: var(--mr-spacing-6);
padding: 0 var(--mr-spacing-7);
border-radius: var(--mr-missing-chip-radius);
background: rgba(114, 211, 138, 0.12);
color: var(--mr-accent);
font-size: var(--mr-font-xs);
}
.mr-loaded-models-subtitle {
margin: var(--mr-spacing-4) 0 0;
font-size: var(--mr-font-md);
color: var(--mr-text-muted);
}
.mr-models-list {
padding: var(--mr-spacing-8) var(--mr-spacing-12) var(--mr-spacing-10);
display: flex;
flex-direction: column;
gap: var(--mr-spacing-6);
}
.mr-model-chip {
display: inline-flex;
align-items: center;
padding: var(--mr-spacing-5) var(--mr-spacing-10);
background: #3a3a3a;
border-radius: var(--mr-radius-lg);
font-family: var(--mr-font-family-mono);
font-size: var(--mr-font-md);
color: var(--mr-text);
}
.mr-model-chip-category {
padding: var(--mr-spacing-2) var(--mr-spacing-6);
background: #555;
border-radius: var(--mr-radius-md);
font-size: var(--mr-font-xs);
color: #aaa;
margin-left: var(--mr-spacing-8);
text-transform: uppercase;
}
.mr-model-chip-strength {
padding: var(--mr-spacing-2) var(--mr-spacing-6);
background: #007d05;
border-radius: var(--mr-radius-md);
font-size: var(--mr-font-xs);
color: white;
margin-left: var(--mr-spacing-8);
}
@media (max-width: 720px) {
.mr-loaded-models-header {
align-items: stretch;
flex-direction: column;
}
}
.model-resolver-selected {
margin: var(--mr-spacing-8) 0;
padding: var(--mr-spacing-10) var(--mr-spacing-12);
background: rgba(78, 161, 255, 0.12);
border: 1px solid rgba(78, 161, 255, 0.28);
border-radius: 0;
color: var(--mr-text);
font-size: var(--mr-font-md);
}
/* Link styling */
.mr-link {
color: var(--mr-link-color);
text-decoration: none;
}
.mr-link:hover {
text-decoration: underline;
}
/* Context menu */
.mr-context-menu {
position: fixed;
background: var(--mr-panel-bg-strong, #262626);
border: 1px solid var(--mr-border-strong, rgba(255, 255, 255, 0.14));
border-radius: var(--mr-radius-lg);
box-shadow: 0 4px 16px var(--mr-overlay-dark-50);
z-index: var(--mr-z-context-menu-popup, calc(var(--mr-z-context-menu) + 1));
min-width: 160px;
overflow: hidden;
}
.mr-context-menu-item {
display: flex;
align-items: center;
gap: var(--mr-spacing-8);
padding: var(--mr-spacing-8) var(--mr-spacing-12);
font-size: var(--mr-font-md);
color: var(--mr-text, #e0e0e0);
cursor: pointer;
transition: var(--mr-transition-bg);
}
.mr-context-menu-hidden,
.mr-context-menu [hidden] {
display: none !important;
}
.mr-context-menu-item:hover {
background: rgba(255, 255, 255, 0.1);
}
.mr-context-menu-item-icon {
width: 20px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
color: currentColor;
flex: 0 0 20px;
}
.mr-context-menu-item-icon svg,
.mr-context-menu-item-svg {
width: 14px;
height: 14px;
display: block;
}
.mr-context-menu-divider {
height: 1px;
background: var(--mr-border-strong, rgba(255, 255, 255, 0.14));
margin: var(--mr-spacing-4) 0;
}
.mr-download-folder-context {
cursor: context-menu;
}
/* Model Info Dialog (similar to rgthree's RgthreeLoraInfoDialog) */
.mr-info-dialog-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.6);
z-index: var(--mr-z-info-dialog);
display: flex;
align-items: center;
justify-content: center;
padding: var(--mr-spacing-8);
box-sizing: border-box;
}
.mr-info-dialog {
background: var(--mr-panel-bg-strong, #262626);
border: 2px solid var(--mr-border-strong, rgba(255, 255, 255, 0.14));
border-radius: var(--mr-radius-xl);
width: 640px;
max-width: 92vw;
max-height: calc(100vh - 16px);
min-width: min(520px, 92vw);
min-height: 320px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 8px 32px var(--mr-overlay-dark-50);
resize: both;
}
.mr-info-dialog-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--mr-spacing-16);
padding: 18px var(--mr-spacing-20) var(--mr-spacing-10);
border-bottom: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0));
}
.mr-info-dialog-header h3 {
margin: 0;
font-size: var(--mr-font-xl);
line-height: 1.35;
color: var(--mr-text, #e0e0e0);
min-width: 0;
}
.mr-info-header-actions {
display: flex;
align-items: flex-start;
gap: var(--mr-spacing-10);
flex: 0 0 auto;
}
.mr-info-dialog-close {
background: none;
border: none;
font-size: var(--mr-font-4xl);
color: var(--mr-text, #e0e0e0);
cursor: pointer;
padding: 0;
width: 30px;
height: var(--mr-button-height-md);
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--mr-radius-md);
}
.mr-info-dialog-close:hover {
background: rgba(255, 255, 255, 0.1);
}
.mr-info-dialog-content {
padding: var(--mr-spacing-8) var(--mr-spacing-20) var(--mr-spacing-16);
overflow-y: auto;
flex: 1;
}
.mr-info-dialog-loading {
text-align: center;
color: var(--mr-text-muted, #b1b1b1);
padding: var(--mr-spacing-20);
}
.mr-info-section {
margin-bottom: var(--mr-spacing-16);
padding-bottom: var(--mr-spacing-16);
border-bottom: 1px solid var(--mr-border-strong, rgba(255, 255, 255, 0.14));
}
.mr-info-section-header {
font-size: var(--mr-font-md);
font-weight: 600;
color: var(--mr-text-muted, #b1b1b1);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--mr-spacing-12);
}
.mr-info-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--mr-spacing-6) 0;
}
.mr-info-label {
color: var(--mr-text-muted, #b1b1b1);
font-size: var(--mr-font-base);
}
.mr-info-value {
color: var(--mr-text, #e0e0e0);
font-size: var(--mr-font-base);
font-weight: 500;
}
.mr-info-value.mr-info-active {
color: var(--mr-color-success-action);
}
.mr-info-value.mr-info-inactive {
color: #888;
}
.mr-info-section-civitai {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.mr-info-civitai-link {
display: inline-flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: var(--mr-spacing-8);
min-height: var(--mr-button-height-md);
}
.mr-info-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--mr-spacing-7);
min-height: var(--mr-button-height-md);
padding: var(--mr-spacing-5) var(--mr-spacing-10);
border: 1px solid rgba(255, 255, 255, 0.22);
background: rgba(255, 255, 255, 0.055);
color: var(--mr-text, #e0e0e0);
border-radius: var(--mr-radius-lg);
text-decoration: none;
font-size: var(--mr-font-md);
font-weight: 700;
white-space: nowrap;
box-shadow: 0 1px 0 var(--mr-border) inset;
cursor: pointer;
}
.mr-info-link:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.32);
color: var(--mr-color-white);
}
button.mr-info-link {
font: inherit;
}
button.mr-info-link:disabled {
cursor: wait;
opacity: 0.72;
}
.mr-info-external-link-icon {
width: 14px;
height: 14px;
}
.mr-info-loading-small {
color: var(--mr-text-muted, #b1b1b1);
font-size: var(--mr-font-md);
font-style: italic;
}
.mr-info-not-found {
color: #888;
font-size: var(--mr-font-md);
}
/* Info Area (type/base model tags) */
.mr-info-area {
display: flex;
flex-wrap: wrap;
gap: var(--mr-spacing-8);
margin-bottom: var(--mr-spacing-16);
}
.mr-info-tag {
display: inline-flex;
align-items: center;
padding: var(--mr-spacing-4) var(--mr-spacing-10);
background: rgba(255, 255, 255, 0.1);
border-radius: var(--mr-radius-md);
font-size: var(--mr-font-sm);
font-weight: 600;
color: var(--mr-text, #e0e0e0);
}
.mr-info-tag.-type-lora {
background: rgba(var(--mr-type-lora-rgb, 194, 255, 174), 0.16);
color: var(--mr-type-lora-text, #d7ffcb);
}
.mr-info-tag.-type-checkpoint {
background: rgba(var(--mr-type-model-rgb, 179, 157, 219), 0.16);
color: var(--mr-type-model-text, #dbcfff);
}
.mr-info-tag.-type-vae {
background: rgba(var(--mr-type-vae-rgb, 255, 110, 110), 0.16);
color: var(--mr-type-vae-text, #ffb8b8);
}
.mr-info-tag.-basemodel-sd1 {
background: rgba(244, 67, 54, 0.2);
color: #EF9A9A;
}
.mr-info-tag.-basemodel-sdxl {
background: rgba(33, 150, 243, 0.2);
color: var(--mr-color-primary);
}
.mr-info-tag.-basemodel-sdxl-turbo {
background: rgba(33, 150, 243, 0.2);
color: var(--mr-color-primary);
}
.mr-info-tag.-basemodel-flux\.1 {
background: rgba(255, 152, 0, 0.2);
color: #FFB74D;
}
.mr-info-tag.-basemodel-flux\.1-d {
background: rgba(255, 152, 0, 0.2);
color: #FFB74D;
}
.mr-info-tags-row {
display: flex;
align-items: flex-start;
gap: var(--mr-spacing-10);
margin: 0 0 var(--mr-spacing-20);
}
.mr-info-tags-label {
flex: 0 0 auto;
padding-top: var(--mr-spacing-5);
color: var(--mr-text-muted, #b1b1b1);
font-size: var(--mr-font-xs);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.mr-info-tags {
display: flex;
flex-wrap: wrap;
gap: var(--mr-spacing-6);
min-width: 0;
}
.mr-info-model-tag {
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border: 1px solid var(--mr-border);
background: var(--mr-missing-control-bg-hover);
color: var(--mr-text-muted, #c8c8c8);
font-size: var(--mr-font-xs);
}
/* Info Table */
.mr-info-table {
--mr-info-label-width: 156px;
width: 100%;
display: block;
border-collapse: separate;
border-spacing: 0;
margin-bottom: var(--mr-spacing-20);
border: 1px solid var(--mr-border);
border-radius: var(--mr-radius-xl);
overflow: hidden;
background: rgba(255, 255, 255, 0.018);
}
.mr-info-table tbody {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(220px, 0.74fr);
}
.mr-info-table tr {
display: grid;
grid-template-columns: var(--mr-info-label-width) minmax(0, 1fr);
min-height: 38px;
border-right: 1px solid var(--mr-missing-control-bg-hover);
border-bottom: 1px solid var(--mr-missing-control-bg-hover);
background: rgba(255, 255, 255, 0.018);
}
.mr-info-table tr:nth-child(even) {
border-right: none;
}
.mr-info-table tr.mr-info-row-wide,
.mr-info-table tr.mr-info-trainedwords-row,
.mr-info-table tr.mr-info-clipskip-row,
.mr-info-table tr.mr-info-description-row {
grid-column: 1 / -1;
border-right: none;
}
.mr-info-table tr.mr-info-trainedwords-row,
.mr-info-table tr.mr-info-clipskip-row,
.mr-info-table tr.mr-info-description-row {
margin-top: var(--mr-spacing-10);
border-top: 1px solid var(--mr-border);
border-radius: var(--mr-radius-xl);
overflow: hidden;
background: rgba(255, 255, 255, 0.015);
}
.mr-info-table tr.mr-info-description-row {
grid-template-columns: 1fr;
}
.mr-info-table tr:last-child {
border-bottom: none;
}
.mr-info-table td {
box-sizing: border-box;
display: flex;
align-items: center;
min-width: 0;
padding: var(--mr-spacing-6) var(--mr-spacing-10);
font-size: var(--mr-font-base);
}
.mr-info-table td:first-child {
color: var(--mr-text-muted, #b1b1b1);
white-space: normal;
width: auto;
min-width: 0;
border-right: 1px solid var(--mr-missing-control-bg-hover);
font-size: var(--mr-font-md);
font-weight: 700;
}
.mr-info-description-row td:first-child {
border-right: none;
border-bottom: 1px solid var(--mr-missing-control-bg-hover);
padding-bottom: var(--mr-spacing-5);
}
.mr-info-description-row td:last-child {
display: block;
padding-top: var(--mr-spacing-8);
}
.mr-info-table td:last-child {
color: var(--mr-text, #e0e0e0);
font-weight: 650;
word-break: break-word;
}
.mr-info-hash-control {
display: flex;
align-items: center;
gap: var(--mr-spacing-8);
min-width: 0;
width: 100%;
flex-wrap: wrap;
}
.mr-info-hash {
min-width: 0;
overflow-wrap: anywhere;
}
.mr-info-hash.is-empty {
display: none;
}
.mr-info-hash-calculate {
flex: 0 0 auto;
min-height: var(--mr-button-height-sm);
padding: var(--mr-spacing-4) 9px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--mr-radius-lg);
background: rgba(255, 255, 255, 0.055);
color: rgba(255, 255, 255, 0.86);
font-size: var(--mr-font-sm);
font-weight: 800;
cursor: pointer;
}
.mr-info-hash-calculate:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.09);
border-color: var(--mr-missing-chip-border-hover);
}
.mr-info-hash-calculate:disabled {
cursor: wait;
opacity: 0.72;
}
.mr-info-hash-progress {
display: grid;
grid-template-columns: minmax(84px, 1fr) auto;
align-items: center;
gap: var(--mr-spacing-7);
min-width: min(240px, 100%);
flex: 1 1 220px;
}
.mr-info-hash-progress.mr-hidden-initial,
.mr-info-hash-progress[hidden] {
display: none !important;
}
.mr-info-hash-progress-bar {
height: 7px;
overflow: hidden;
border-radius: var(--mr-missing-chip-radius);
background: var(--mr-border);
}
.mr-info-hash-progress-bar span {
display: block;
width: 0%;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, rgba(114,211,138,0.74), rgba(100,181,246,0.82));
transition: var(--mr-transition-width);
}
.mr-info-hash-progress small {
color: rgba(255, 255, 255, 0.62);
font-size: var(--mr-font-xs);
font-weight: 800;
white-space: nowrap;
}
.mr-info-field-label {
display: grid;
grid-template-columns: 14px minmax(0, 1fr) auto;
align-items: center;
gap: var(--mr-spacing-8);
min-width: 0;
max-width: 100%;
width: 100%;
line-height: 1.25;
white-space: nowrap;
}
.mr-info-label-icon {
width: 14px;
height: 14px;
color: var(--mr-text-muted, #b1b1b1);
opacity: 0.82;
}
.mr-info-label-text {
min-width: 0;
overflow: hidden;
text-overflow: clip;
}
.mr-info-field-label .mr-tooltip-badge {
justify-self: end;
}
.mr-info-location {
font-family: var(--mr-font-family-mono);
font-size: var(--mr-font-md);
font-weight: 500;
line-height: 1.45;
word-break: break-all;
width: 100%;
}
.mr-info-location-button {
display: inline-flex;
align-items: center;
gap: var(--mr-spacing-8);
max-width: 100%;
padding: var(--mr-spacing-2) var(--mr-spacing-6);
margin: -2px -6px;
border: 1px solid transparent;
border-radius: var(--mr-radius-md);
background: transparent;
color: inherit;
font: inherit;
line-height: inherit;
text-align: left;
cursor: pointer;
}
.mr-info-location-button span {
min-width: 0;
word-break: break-all;
}
.mr-info-location-button:hover,
.mr-info-location-button:focus-visible {
border-color: rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.055);
color: var(--mr-color-white);
}
.mr-info-location-icon {
flex: 0 0 auto;
width: 14px;
height: 14px;
opacity: 0.78;
}
.mr-info-trained-words-label {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--mr-spacing-8);
width: 100%;
min-width: 0;
}
.mr-info-trained-words-meta {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: var(--mr-spacing-8);
font-size: var(--mr-font-sm);
color: var(--mr-text-muted, #b1b1b1);
}
.mr-info-trainedwords-row td {
align-items: flex-start;
}
.mr-info-trainedwords-row td:first-child {
align-items: flex-start;
flex-direction: column;
gap: var(--mr-spacing-7);
}
.mr-info-trainedwords-row td:last-child {
align-items: center;
justify-content: flex-start;
}
.mr-info-trained-words-hint {
margin-bottom: var(--mr-spacing-8);
font-size: var(--mr-font-sm);
color: var(--mr-text-muted, #b1b1b1);
}
.mr-info-trainedwords-row .mr-info-trained-words-hint {
display: none;
}
.mr-info-copy-trained-words {
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.05);
color: var(--mr-link-color, #8fc2ff);
border-radius: var(--mr-missing-chip-radius);
padding: var(--mr-spacing-2) var(--mr-spacing-10);
font-size: var(--mr-font-sm);
cursor: pointer;
transition: var(--mr-missing-control-transition);
}
.mr-info-copy-trained-words:hover:not(:disabled) {
background: rgba(78, 161, 255, 0.14);
border-color: rgba(78, 161, 255, 0.28);
color: #d6eaff;
}
.mr-info-copy-trained-words:disabled {
opacity: 0.45;
cursor: default;
}
.mr-info-trained-words-list {
display: flex;
flex-wrap: wrap;
gap: var(--mr-spacing-8);
align-items: center;
justify-content: flex-start;
}
.mr-info-trained-word {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.04);
color: var(--mr-text);
border-radius: var(--mr-missing-chip-radius);
padding: var(--mr-spacing-6) var(--mr-spacing-10);
font-size: var(--mr-font-md);
line-height: 1.2;
cursor: pointer;
transition: var(--mr-transition-smooth);
}
.mr-info-trained-word:hover {
transform: translateY(-1px);
background: rgba(255, 255, 255, 0.07);
border-color: var(--mr-missing-chip-border-hover);
}
.mr-info-trained-word.is-selected {
background: rgba(78, 161, 255, 0.18);
border-color: rgba(78, 161, 255, 0.4);
color: #d8ebff;
box-shadow: 0 0 0 1px rgba(78, 161, 255, 0.15) inset;
}
.mr-info-description-wrap {
display: flex;
flex-direction: column;
gap: var(--mr-spacing-8);
width: 100%;
min-width: 0;
}
.mr-info-description-actions {
display: flex;
justify-content: flex-end;
width: 100%;
}
.mr-info-description {
line-height: 1.55;
color: var(--mr-text, #e0e0e0);
max-height: 220px;
overflow: hidden;
position: relative;
}
.mr-info-description:not(.is-expanded)::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 56px;
background: linear-gradient(180deg, rgba(32, 32, 32, 0) 0%, rgba(32, 32, 32, 0.92) 100%);
pointer-events: none;
}
.mr-info-description.is-expanded {
max-height: none;
overflow: visible;
}
.mr-info-description p,
.mr-info-description ul,
.mr-info-description ol,
.mr-info-description blockquote,
.mr-info-description pre {
margin: 0 0 var(--mr-spacing-10) 0;
}
.mr-info-description h1,
.mr-info-description h2,
.mr-info-description h3,
.mr-info-description h4,
.mr-info-description h5,
.mr-info-description h6 {
margin: 14px 0 var(--mr-spacing-8) 0;
color: var(--mr-text);
line-height: 1.3;
}
.mr-info-description ul,
.mr-info-description ol {
padding-left: var(--mr-spacing-20);
}
.mr-info-description code,
.mr-info-description pre {
background: rgba(255, 255, 255, 0.05);
border-radius: var(--mr-radius-lg);
}
.mr-info-description code {
padding: var(--mr-spacing-1) var(--mr-spacing-5);
font-family: var(--mr-font-family-mono);
font-size: var(--mr-font-md);
}
.mr-info-description pre {
padding: var(--mr-spacing-10) var(--mr-spacing-12);
overflow-x: auto;
white-space: pre-wrap;
}
.mr-info-description a {
color: var(--mr-link-color, #8fc2ff);
text-decoration: none;
}
.mr-info-description a:hover {
text-decoration: underline;
}
.mr-info-description-actions {
display: flex;
justify-content: flex-end;
}
.mr-info-description-toggle {
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.05);
color: var(--mr-link-color, #8fc2ff);
border-radius: var(--mr-missing-chip-radius);
padding: var(--mr-spacing-4) var(--mr-spacing-12);
font-size: var(--mr-font-sm);
cursor: pointer;
transition: var(--mr-missing-control-transition);
}
.mr-info-description-toggle:hover {
background: rgba(78, 161, 255, 0.14);
border-color: rgba(78, 161, 255, 0.28);
color: #d6eaff;
}
/* Images Section */
.mr-info-images {
margin-top: var(--mr-spacing-16);
padding-top: var(--mr-spacing-16);
border-top: 1px solid var(--mr-border-strong, rgba(255, 255, 255, 0.14));
}
.mr-info-images-header {
font-size: var(--mr-font-md);
font-weight: 600;
color: var(--mr-text-muted, #b1b1b1);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--mr-spacing-12);
}
.mr-info-images-layout {
column-count: 3;
column-gap: var(--mr-spacing-15);
}
.mr-info-image-item {
border-radius: var(--mr-radius-lg);
overflow: hidden;
background: var(--mr-overlay-dark-20);
border: 1px solid var(--mr-missing-control-bg-hover);
break-inside: avoid;
margin-bottom: var(--mr-spacing-15);
}
.mr-info-image-item figure {
margin: 0;
position: relative;
display: block;
background: rgba(0, 0, 0, 0.3);
}
.mr-info-image-preview-btn {
position: relative;
display: block;
width: 100%;
padding: 0;
border: 0;
background: transparent;
color: inherit;
cursor: zoom-in;
}
.mr-info-image-item img,
.mr-info-image-item video {
width: 100%;
height: auto;
display: block;
object-fit: contain;
transition: var(--mr-transition-transform);
}
.mr-info-image-preview-label {
position: absolute;
top: 8px;
right: 8px;
display: inline-flex;
align-items: center;
gap: var(--mr-spacing-5);
padding: var(--mr-spacing-5) var(--mr-spacing-7);
border-radius: var(--mr-missing-chip-radius);
background: rgba(10, 12, 16, 0.78);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #f2f4f7;
font-size: var(--mr-font-sm);
font-weight: 700;
opacity: 0;
transform: translateY(-4px);
transition: var(--mr-transition-opacity);
pointer-events: none;
}
.mr-info-image-civitai-badge {
position: absolute;
top: 8px;
left: 8px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: var(--mr-spacing-5);
padding: var(--mr-spacing-5) var(--mr-spacing-7);
border-radius: var(--mr-missing-chip-radius);
background: rgba(10, 12, 16, 0.78);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #f2f4f7;
font-size: var(--mr-font-sm);
font-weight: 700;
text-decoration: none;
opacity: 0;
transform: translateY(-4px);
transition: var(--mr-transition-opacity);
}
.mr-info-image-civitai-badge:hover,
.mr-info-image-civitai-badge:focus-visible {
background: rgba(18, 132, 247, 0.88);
border-color: rgba(255, 255, 255, 0.24);
color: var(--mr-color-white);
}
.mr-info-image-preview-label svg {
width: 13px;
height: 13px;
}
.mr-info-image-civitai-icon {
width: 13px;
height: 13px;
}
.mr-info-image-item figcaption {
position: absolute;
inset: auto 0 0 0;
max-height: 60%;
overflow-y: auto;
padding: var(--mr-spacing-10);
font-size: var(--mr-font-sm);
color: var(--mr-text);
background: linear-gradient(180deg, rgba(7, 10, 14, 0) 0%, rgba(7, 10, 14, 0.82) 16%, rgba(7, 10, 14, 0.94) 100%);
opacity: 0;
transform: translateY(10px);
transition: var(--mr-transition-opacity);
pointer-events: none;
}
.mr-info-image-item figcaption span {
display: block;
margin-bottom: var(--mr-spacing-4);
line-height: 1.4;
}
.mr-info-image-item figcaption span label {
font-weight: 600;
color: #b9c8d8;
margin-right: var(--mr-spacing-4);
text-transform: lowercase;
}
.mr-info-image-link {
color: #8fc2ff;
text-decoration: none;
display: inline-flex;
margin-bottom: var(--mr-spacing-6);
pointer-events: auto;
font-weight: 700;
}
.mr-info-image-item:hover img,
.mr-info-image-item:hover video {
transform: scale(1.01);
filter: brightness(0.82);
}
.mr-info-image-item:hover .mr-info-image-preview-label,
.mr-info-image-item:hover .mr-info-image-civitai-badge,
.mr-info-image-civitai-badge:focus-visible,
.mr-info-image-preview-btn:focus-visible .mr-info-image-preview-label {
opacity: 1;
transform: translateY(0);
}
.mr-info-image-item:hover figcaption,
.mr-info-image-item:focus-within figcaption {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 900px) {
.mr-info-images-layout {
column-count: 2;
}
}
@media (max-width: 640px) {
.mr-info-dialog-header {
flex-direction: column;
align-items: stretch;
}
.mr-info-header-actions {
justify-content: space-between;
width: 100%;
}
.mr-info-table tbody {
grid-template-columns: 1fr;
}
.mr-info-table tr,
.mr-info-table tr:nth-child(even) {
border-right: none;
}
.mr-info-table tr {
grid-template-columns: var(--mr-info-label-width) minmax(0, 1fr);
}
.mr-info-trainedwords-row td:last-child,
.mr-info-trained-words-list {
justify-content: flex-start;
}
.mr-info-images-layout {
column-count: 1;
}
}
/* CivitAI Logo */
.mr-info-civitai-logo {
width: 16px;
height: 16px;
}
/* Footer */
.mr-info-dialog-footer {
padding: var(--mr-spacing-12) var(--mr-spacing-20);
border-top: 1px solid var(--mr-border-strong, rgba(255, 255, 255, 0.14));
display: flex;
justify-content: flex-end;
gap: var(--mr-spacing-8);
}
.mr-info-dialog-close-btn {
padding: var(--mr-spacing-8) var(--mr-spacing-16);
}
.mr-info-error {
color: var(--mr-color-danger-bright);
font-size: var(--mr-font-md);
}
/* Image Preview */
.mr-image-preview-backdrop {
position: fixed;
inset: 0;
z-index: var(--mr-z-image-preview);
background: rgba(8, 9, 11, 0.96);
color: var(--mr-text, #f3f3f3);
display: flex;
align-items: stretch;
justify-content: center;
font-family: var(--mr-font-family-sans);
}
.mr-image-preview-shell {
width: 100%;
height: 100%;
display: grid;
grid-template-rows: 56px minmax(0, 1fr);
min-width: 0;
min-height: 0;
}
.mr-image-preview-topbar {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto;
align-items: center;
gap: var(--mr-spacing-12);
padding: var(--mr-spacing-10) 18px;
border-bottom: 1px solid var(--mr-border);
}
.mr-image-preview-icon-btn,
.mr-image-preview-nav {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: var(--mr-missing-chip-radius);
background: rgba(255, 255, 255, 0.12);
color: #f4f4f4;
cursor: pointer;
transition: var(--mr-transition-bg);
}
.mr-image-preview-icon-btn {
width: 36px;
height: 36px;
}
.mr-image-preview-icon-btn svg {
width: 18px;
height: 18px;
}
.mr-image-preview-icon-btn:hover,
.mr-image-preview-nav:hover {
background: rgba(255, 255, 255, 0.2);
}
.mr-image-preview-counter {
color: var(--mr-text-muted, #b1b1b1);
font-size: var(--mr-font-md);
font-weight: 700;
}
.mr-image-preview-actions {
display: inline-flex;
align-items: center;
gap: var(--mr-spacing-8);
}
.mr-image-preview-action,
.mr-image-preview-copy {
display: inline-flex;
align-items: center;
gap: var(--mr-spacing-6);
min-height: var(--mr-button-height-md);
padding: var(--mr-spacing-6) 9px;
border-radius: var(--mr-missing-control-radius);
border: 1px solid rgba(255, 255, 255, 0.12);
background: var(--mr-border);
color: #f3f3f3;
text-decoration: none;
font-size: var(--mr-font-sm);
font-weight: 800;
cursor: pointer;
}
.mr-image-preview-action svg,
.mr-image-preview-copy svg {
width: 13px;
height: 13px;
}
.mr-image-preview-action:hover,
.mr-image-preview-copy:hover,
.mr-image-preview-copy.is-copied {
background: rgba(114, 211, 138, 0.16);
border-color: rgba(114, 211, 138, 0.28);
}
.mr-image-preview-main {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
min-width: 0;
min-height: 0;
}
.mr-image-preview-stage {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
min-height: 0;
padding: var(--mr-spacing-20);
background: #0b0c0e;
}
.mr-image-preview-stage img,
.mr-image-preview-stage video {
max-width: 100%;
max-height: 100%;
object-fit: contain;
box-shadow: var(--mr-shadow-card);
}
.mr-image-preview-nav {
position: absolute;
top: 50%;
width: 42px;
height: 42px;
transform: translateY(-50%);
font-size: var(--mr-font-30);
line-height: 1;
}
.mr-image-preview-nav.is-left {
left: 18px;
}
.mr-image-preview-nav.is-right {
right: 18px;
}
.mr-image-preview-panel {
min-width: 0;
overflow-y: auto;
padding: 18px 14px var(--mr-spacing-32);
background: #18191d;
border-left: 1px solid var(--mr-border);
}
.mr-image-preview-card {
padding: var(--mr-spacing-15);
margin-bottom: var(--mr-spacing-12);
border-radius: var(--mr-radius-xl);
background: #24252b;
border: 1px solid rgba(255, 255, 255, 0.07);
}
.mr-image-preview-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mr-spacing-10);
margin-bottom: var(--mr-spacing-10);
}
.mr-image-preview-card h4 {
margin: 0;
color: #d8d8dc;
font-size: var(--mr-font-lg);
font-weight: 800;
}
.mr-image-preview-tags {
display: flex;
flex-wrap: wrap;
gap: var(--mr-spacing-6);
}
.mr-image-preview-tags span {
display: inline-flex;
align-items: center;
min-height: 21px;
padding: var(--mr-spacing-3) var(--mr-spacing-7);
border-radius: var(--mr-radius-md);
background: rgba(255, 255, 255, 0.09);
border: 1px solid rgba(255, 255, 255, 0.11);
color: #f1f1f3;
font-size: var(--mr-font-sm);
font-weight: 800;
text-transform: uppercase;
}
.mr-image-preview-data {
display: grid;
gap: var(--mr-spacing-7);
}
.mr-image-preview-data-row {
display: grid;
grid-template-columns: 80px minmax(0, 1fr);
gap: var(--mr-spacing-10);
align-items: start;
font-size: var(--mr-font-md);
}
.mr-image-preview-data-row span {
color: var(--mr-text-muted, #b1b1b1);
}
.mr-image-preview-data-row strong {
color: #ededf0;
font-weight: 700;
overflow-wrap: anywhere;
}
.mr-image-preview-resources {
display: grid;
gap: var(--mr-spacing-8);
}
.mr-image-preview-resource {
display: grid;
gap: var(--mr-spacing-4);
padding: var(--mr-spacing-8) 0;
border-bottom: 1px solid var(--mr-border);
}
.mr-image-preview-resource:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.mr-image-preview-resource-main {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mr-spacing-12);
min-width: 0;
}
.mr-image-preview-resource-name {
color: var(--mr-text);
font-size: var(--mr-font-md);
font-weight: 800;
min-width: 0;
overflow-wrap: anywhere;
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, 0.34);
text-underline-offset: 2px;
}
.mr-image-preview-resource-name:not(a) {
text-decoration: none;
}
.mr-image-preview-resource-badges {
display: inline-flex;
align-items: center;
gap: var(--mr-spacing-5);
flex: 0 0 auto;
}
.mr-image-preview-resource-badges span {
display: inline-flex;
align-items: center;
min-height: 19px;
padding: var(--mr-spacing-2) var(--mr-spacing-7);
border-radius: var(--mr-radius-md);
background: rgba(78, 161, 255, 0.16);
border: 1px solid rgba(78, 161, 255, 0.18);
color: #cfe5ff;
font-size: var(--mr-font-xs);
font-weight: 800;
}
.mr-image-preview-resource-version {
color: var(--mr-text-muted, #b1b1b1);
font-size: var(--mr-font-sm);
min-width: 0;
overflow-wrap: anywhere;
text-decoration: none;
}
a.mr-image-preview-resource-version:hover,
a.mr-image-preview-resource-name:hover {
color: var(--mr-link-color, #8fc2ff);
}
.mr-image-preview-other-metadata {
display: inline-flex;
align-items: center;
gap: var(--mr-spacing-7);
padding: var(--mr-spacing-5) var(--mr-spacing-7);
border-radius: var(--mr-radius-lg);
background: rgba(46, 144, 230, 0.14);
border: 1px solid rgba(80, 170, 255, 0.2);
color: #b9d9ff;
font-size: var(--mr-font-sm);
font-weight: 800;
}
.mr-image-preview-workflow-copy {
min-height: 24px;
padding: var(--mr-spacing-3) var(--mr-spacing-7);
border-color: rgba(80, 170, 255, 0.25);
background: rgba(46, 144, 230, 0.16);
color: #dceeff;
}
.mr-image-preview-workflow-copy:hover,
.mr-image-preview-workflow-copy.is-copied {
background: rgba(46, 144, 230, 0.3);
border-color: rgba(80, 170, 255, 0.48);
}
.mr-image-preview-card p {
margin: 0;
color: var(--mr-text-muted);
font-size: var(--mr-font-md);
line-height: 1.55;
white-space: pre-wrap;
}
.mr-image-preview-empty {
color: var(--mr-text-dim, #7b7b7b);
font-size: var(--mr-font-md);
}
@media (max-width: 900px) {
.mr-image-preview-main {
grid-template-columns: 1fr;
grid-template-rows: minmax(260px, 58vh) minmax(0, 1fr);
}
.mr-image-preview-panel {
border-left: 0;
border-top: 1px solid var(--mr-border);
}
}
/* Source model details */
.mr-model-details-backdrop {
position: fixed;
inset: 0;
z-index: var(--mr-z-image-preview);
background: #151619;
color: var(--mr-text, #f3f3f3);
font-family: var(--mr-font-family-sans);
}
.mr-model-details-shell {
display: grid;
grid-template-rows: 60px minmax(0, 1fr);
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
}
.mr-model-details-topbar {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto;
align-items: center;
gap: var(--mr-spacing-12);
padding: var(--mr-spacing-10) 18px;
background: #1b1c20;
border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.mr-model-details-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 0;
border-radius: var(--mr-missing-chip-radius);
background: rgba(255, 255, 255, 0.09);
color: #f4f4f4;
cursor: pointer;
}
.mr-model-details-icon-btn:hover {
background: rgba(255, 255, 255, 0.16);
}
.mr-model-details-icon-btn svg {
width: 18px;
height: 18px;
}
.mr-model-details-title {
min-width: 0;
}
.mr-model-details-title h2 {
margin: 0;
color: #f1f1f3;
font-size: var(--mr-font-3xl);
line-height: 1.15;
font-weight: 800;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mr-model-details-title span {
display: block;
margin-top: var(--mr-spacing-3);
color: rgba(255, 255, 255, 0.58);
font-size: var(--mr-font-md);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mr-model-details-actions {
display: inline-flex;
align-items: center;
gap: var(--mr-spacing-8);
}
.mr-model-details-action {
display: inline-flex;
align-items: center;
gap: var(--mr-spacing-7);
min-height: 34px;
padding: 0 var(--mr-spacing-10);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--mr-missing-control-radius);
background: rgba(255, 255, 255, 0.07);
color: #f3f3f3;
font-size: var(--mr-font-md);
font-weight: 800;
text-decoration: none;
}
.mr-model-details-action:hover {
background: rgba(114, 211, 138, 0.15);
border-color: rgba(114, 211, 138, 0.3);
}
.mr-model-details-action svg {
width: 14px;
height: 14px;
}
.mr-model-details-main {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
min-width: 0;
min-height: 0;
}
.mr-model-details-content {
min-width: 0;
min-height: 0;
overflow-y: auto;
padding: var(--mr-spacing-10) var(--mr-spacing-1) var(--mr-spacing-1) var(--mr-spacing-10);
}
.mr-model-details-side {
min-width: 0;
min-height: 0;
overflow-y: auto;
padding: var(--mr-spacing-5);
background: #1d1e22;
border-left: 1px solid var(--mr-border);
}
.mr-model-details-main.is-huggingface {
display: block;
overflow: hidden;
}
.mr-model-details-main.is-huggingface .mr-model-details-content {
display: none;
}
.mr-model-details-side.is-huggingface {
width: 100%;
height: 100%;
padding: var(--mr-spacing-12);
border-left: 0;
box-sizing: border-box;
}
.mr-model-details-side.is-huggingface .mr-model-details-summary-panel {
padding: var(--mr-spacing-10) var(--mr-spacing-12);
}
.mr-model-details-side.is-huggingface .mr-model-details-kv {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--mr-spacing-1);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: var(--mr-radius-lg);
background: rgba(255, 255, 255, 0.07);
}
.mr-model-details-side.is-huggingface .mr-model-details-kv div {
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
padding: var(--mr-spacing-7) 9px;
background: #25262b;
}
.mr-model-details-side.is-huggingface .mr-model-details-tags {
margin-top: var(--mr-spacing-8);
}
.mr-model-details-side.is-huggingface .mr-model-details-variants-panel {
padding: var(--mr-spacing-10) var(--mr-spacing-12) var(--mr-spacing-12);
}
.mr-model-details-version-tabs {
display: flex;
gap: var(--mr-spacing-7);
overflow-x: auto;
padding-bottom: var(--mr-spacing-8);
}
.mr-model-details-version-tab {
display: inline-grid;
gap: var(--mr-spacing-2);
flex: 0 0 auto;
min-width: max-content;
max-width: 230px;
min-height: 38px;
padding: var(--mr-spacing-6) 11px;
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: var(--mr-radius-lg);
background: var(--mr-missing-control-bg-hover);
color: var(--mr-text);
cursor: pointer;
text-align: left;
}
.mr-model-details-version-tab.is-active {
background: rgba(46, 144, 230, 0.32);
border-color: rgba(80, 170, 255, 0.55);
}
.mr-model-details-version-tab span,
.mr-model-details-version-tab small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mr-model-details-version-tab span {
font-size: var(--mr-font-md);
font-weight: 800;
}
.mr-model-details-version-tab small {
color: rgba(255, 255, 255, 0.62);
font-size: var(--mr-font-xs);
font-weight: 700;
}
.mr-model-details-gallery {
position: relative;
min-height: 320px;
height: min(520px, calc(100vh - 270px));
margin-top: 0;
overflow: hidden;
}
.mr-model-details-gallery.is-single {
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
.mr-model-details-gallery-strip {
display: flex;
align-items: flex-start;
gap: var(--mr-spacing-16);
width: 100%;
height: 100%;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
scrollbar-width: none;
cursor: grab;
user-select: none;
-webkit-user-select: none;
padding: 0 var(--mr-spacing-2);
}
.mr-model-details-gallery-strip::-webkit-scrollbar {
display: none;
}
.mr-model-details-gallery-strip.is-dragging {
cursor: grabbing;
scroll-behavior: auto;
}
.mr-model-details-image {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 min(var(--mr-image-width, 330px), 82vw);
width: min(var(--mr-image-width, 330px), 82vw);
height: min(var(--mr-image-height, 430px), 100%);
min-width: 0;
min-height: 0;
margin: 0;
padding: 0;
border: 1px solid var(--mr-border);
border-radius: var(--mr-missing-control-radius);
background: #101114;
overflow: hidden;
cursor: zoom-in;
aspect-ratio: var(--mr-image-ratio, 0.72);
}
.mr-model-details-gallery-strip.is-dragging .mr-model-details-image {
cursor: grabbing;
}
.mr-model-details-image img,
.mr-model-details-image video {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
}
.mr-model-details-image-meta {
position: absolute;
left: 8px;
right: 8px;
bottom: 8px;
display: flex;
flex-wrap: wrap;
gap: var(--mr-spacing-5);
justify-content: flex-start;
pointer-events: none;
}
.mr-model-details-image-meta span {
display: inline-flex;
align-items: center;
min-height: 18px;
padding: var(--mr-spacing-2) var(--mr-spacing-5);
border-radius: var(--mr-radius-md);
background: rgba(12, 13, 16, 0.72);
color: #f2f2f3;
font-size: var(--mr-font-xs);
font-weight: 800;
}
.mr-model-details-gallery-nav {
position: absolute;
top: 50%;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: 0;
border-radius: var(--mr-missing-chip-radius);
background: rgba(238, 238, 238, 0.86);
color: #202124;
font-size: var(--mr-font-4xl);
line-height: 1;
cursor: pointer;
transform: translateY(-50%);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}
.mr-model-details-gallery-nav:hover {
background: #ffffff;
}
.mr-model-details-gallery-nav.is-left {
left: 12px;
}
.mr-model-details-gallery-nav.is-right {
right: 12px;
}
.mr-model-details-description {
margin-top: var(--mr-spacing-10);
padding-top: var(--mr-spacing-10);
border-top: 1px solid var(--mr-border);
color: #cfd1d8;
font-size: var(--mr-font-base);
line-height: 1.55;
}
.mr-model-details-description h3,
.mr-model-details-panel h3 {
margin: 0 0 var(--mr-spacing-10);
color: #f0f0f2;
font-size: var(--mr-font-lg);
font-weight: 800;
}
.mr-model-details-description p {
margin: 0 0 var(--mr-spacing-10);
}
.mr-model-details-description a {
color: #8fc2ff;
}
.mr-model-details-panel {
margin-bottom: var(--mr-spacing-12);
padding: var(--mr-spacing-5);
border: 1px solid var(--mr-border);
border-radius: var(--mr-radius-xl);
background: #25262b;
}
.mr-model-details-kv {
display: grid;
gap: var(--mr-spacing-8);
}
.mr-model-details-kv div {
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
gap: var(--mr-spacing-10);
align-items: start;
font-size: var(--mr-font-md);
}
.mr-model-details-kv span {
color: rgba(255, 255, 255, 0.54);
}
.mr-model-details-kv strong {
color: #f0f0f2;
font-weight: 700;
overflow-wrap: anywhere;
}
.mr-model-details-tags {
display: flex;
flex-wrap: wrap;
gap: var(--mr-spacing-6);
margin-top: var(--mr-spacing-12);
}
.mr-model-details-tags span {
display: inline-flex;
align-items: center;
min-height: 22px;
padding: var(--mr-spacing-3) var(--mr-spacing-7);
border-radius: var(--mr-radius-md);
background: var(--mr-border);
color: var(--mr-text);
font-size: var(--mr-font-sm);
font-weight: 800;
}
.mr-model-details-files {
display: grid;
gap: var(--mr-spacing-8);
}
.mr-model-details-files.is-table {
gap: 0;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: var(--mr-missing-control-radius);
}
.mr-model-details-file-table-header,
.mr-model-details-file-table-row {
display: grid;
grid-template-columns:
minmax(220px, 1.45fr)
minmax(240px, 1.35fr)
minmax(180px, 0.9fr)
minmax(132px, 0.55fr);
gap: var(--mr-spacing-15);
align-items: center;
min-width: 0;
}
.mr-model-details-file-table-header {
min-height: var(--mr-button-height-md);
padding: 0 var(--mr-spacing-10);
background: rgba(255, 255, 255, 0.055);
color: rgba(255, 255, 255, 0.48);
font-size: var(--mr-font-xs);
font-weight: 850;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.mr-model-details-file-table-row {
min-height: 52px;
padding: var(--mr-spacing-7) 11px;
border-top: 1px solid rgba(255, 255, 255, 0.07);
background: rgba(255, 255, 255, 0.025);
}
.mr-model-details-file-table-row:nth-child(odd) {
background: rgba(255, 255, 255, 0.04);
}
.mr-model-details-file-table-row.is-primary {
background: rgba(114, 211, 138, 0.055);
}
.mr-model-details-file-table-row.is-target {
background: rgba(114, 211, 138, 0.09);
box-shadow: inset 3px 0 0 rgba(114, 211, 138, 0.78);
}
.mr-model-details-file-table-name,
.mr-model-details-file-table-summary {
min-width: 0;
}
.mr-model-details-file-table-name strong {
display: block;
overflow: hidden;
color: #f3f3f5;
font-size: var(--mr-font-md);
font-weight: 800;
text-overflow: ellipsis;
white-space: nowrap;
}
.mr-model-details-file-table-summary {
overflow: hidden;
color: rgba(255, 255, 255, 0.6);
font-size: var(--mr-font-sm);
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.mr-model-details-file-table-badges {
display: flex;
align-items: center;
gap: var(--mr-spacing-5);
min-width: 0;
overflow: hidden;
}
.mr-model-details-file-table-badges span {
display: inline-flex;
align-items: center;
flex: 0 1 auto;
min-width: 0;
min-height: 20px;
padding: var(--mr-spacing-2) var(--mr-spacing-6);
overflow: hidden;
border-radius: var(--mr-radius-md);
background: var(--mr-border);
color: rgba(255, 255, 255, 0.78);
font-size: var(--mr-font-xs);
font-weight: 800;
line-height: 1;
text-overflow: ellipsis;
white-space: nowrap;
}
.mr-model-details-file-table-row.is-target .mr-model-details-file-table-badges span:first-child {
background: rgba(114, 211, 138, 0.18);
color: var(--mr-accent-hover);
}
.mr-model-details-file-table-badges .is-empty {
color: rgba(255, 255, 255, 0.42);
}
.mr-model-details-file-table-use {
width: 100%;
min-width: 0;
white-space: nowrap;
}
.mr-model-details-file-table-mirrors {
grid-column: 1 / -1;
}
.mr-model-details-file {
display: block;
min-width: 0;
padding: 0;
border: 1px solid var(--mr-border);
border-radius: var(--mr-missing-control-radius);
background: rgba(255, 255, 255, 0.04);
overflow: hidden;
}
.mr-model-details-file.is-primary {
border-color: rgba(114, 211, 138, 0.28);
background: rgba(114, 211, 138, 0.08);
}
.mr-model-details-file.is-target {
border-color: rgba(114, 211, 138, 0.42);
background: rgba(114, 211, 138, 0.095);
box-shadow: inset 3px 0 0 rgba(114, 211, 138, 0.78);
}
.mr-model-details-file-summary {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
gap: var(--mr-spacing-8);
align-items: center;
min-width: 0;
padding: var(--mr-spacing-10);
cursor: pointer;
list-style: none;
}
.mr-model-details-file-summary::-webkit-details-marker {
display: none;
}
.mr-model-details-file-summary:hover {
background: var(--mr-missing-control-bg);
}
.mr-model-details-file-chevron {
position: relative;
width: 18px;
height: 18px;
color: rgba(255, 255, 255, 0.54);
}
.mr-model-details-file-chevron::before {
content: "";
position: absolute;
left: 6px;
top: 4px;
width: 7px;
height: 7px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(-45deg);
transition: var(--mr-transition-transform);
}
.mr-model-details-file[open] .mr-model-details-file-chevron::before {
transform: rotate(45deg);
}
.mr-model-details-file-heading {
display: block;
min-width: 0;
}
.mr-model-details-file-summary-badges {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: var(--mr-spacing-5);
grid-column: 2;
min-width: 0;
flex-wrap: wrap;
}
.mr-model-details-file-summary-badges span {
display: inline-flex;
align-items: center;
min-height: 20px;
max-width: 92px;
padding: var(--mr-spacing-2) var(--mr-spacing-6);
border-radius: var(--mr-missing-chip-radius);
background: rgba(255, 255, 255, 0.075);
color: rgba(255, 255, 255, 0.76);
font-size: var(--mr-font-xs);
font-weight: 850;
line-height: 1;
white-space: nowrap;
}
.mr-model-details-file.is-target .mr-model-details-file-summary-badges span:first-child {
background: rgba(114, 211, 138, 0.18);
color: var(--mr-accent-hover);
}
.mr-model-details-file-body {
display: grid;
gap: var(--mr-spacing-8);
padding: 0 var(--mr-spacing-10) var(--mr-spacing-10);
}
.mr-model-details-file strong,
.mr-model-details-file span {
display: block;
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
.mr-model-details-file strong {
color: #f3f3f5;
font-size: var(--mr-font-md);
font-weight: 800;
}
.mr-model-details-file span {
margin-top: var(--mr-spacing-3);
color: rgba(255, 255, 255, 0.58);
font-size: var(--mr-font-sm);
line-height: 1.35;
}
.mr-model-details-file .mr-model-details-file-summary-badges {
display: inline-flex;
margin-top: 0;
overflow: visible;
white-space: normal;
}
.mr-model-details-file .mr-model-details-file-summary-badges span {
display: inline-flex;
margin-top: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: normal;
}
.mr-model-details-file-badges {
display: flex;
flex-wrap: wrap;
gap: var(--mr-spacing-5);
margin-top: var(--mr-spacing-7);
}
.mr-model-details-file-badges span {
display: inline-flex;
align-items: center;
min-height: 20px;
max-width: 100%;
padding: var(--mr-spacing-2) var(--mr-spacing-6);
border-radius: var(--mr-radius-md);
background: rgba(255, 255, 255, 0.075);
color: rgba(255, 255, 255, 0.78);
font-size: var(--mr-font-xs);
font-weight: 800;
line-height: 1;
}
.mr-model-details-mirrors {
display: grid;
gap: var(--mr-spacing-10);
margin-top: 0;
padding-top: var(--mr-spacing-8);
border-top: 1px solid var(--mr-border);
}
.mr-model-details-mirrors-title {
color: rgba(255, 255, 255, 0.62);
font-size: var(--mr-font-xs);
font-weight: 900;
letter-spacing: 0;
text-transform: uppercase;
}
.mr-model-details-mirror-group {
display: grid;
gap: var(--mr-spacing-7);
}
.mr-model-details-mirror-group-title {
display: inline-flex;
align-items: center;
gap: var(--mr-spacing-7);
min-width: 0;
color: rgba(255, 255, 255, 0.56);
font-size: var(--mr-font-sm);
font-weight: 800;
}
.mr-model-details-mirror-platform-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex: 0 0 18px;
}
.mr-model-details-mirror-platform-icon svg {
width: 18px;
height: 18px;
}
.mr-model-details-mirror-list {
display: grid;
gap: var(--mr-spacing-6);
padding-left: 0;
}
.mr-model-details-mirror {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--mr-spacing-10);
align-items: center;
min-width: 0;
width: 100%;
min-height: 48px;
padding: 9px var(--mr-spacing-10);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: var(--mr-radius-lg);
background: rgba(0, 0, 0, 0.15);
color: inherit;
text-align: left;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition: var(--mr-transition-smooth);
}
.mr-model-details-mirror:hover {
border-color: rgba(255, 255, 255, 0.13);
background: rgba(255, 255, 255, 0.07);
}
.mr-model-details-mirror.is-dead {
border-color: rgba(185, 28, 28, 0.58);
background: rgba(127, 29, 29, 0.36);
}
.mr-model-details-mirror.is-dead:hover {
border-color: rgba(248, 113, 113, 0.74);
background: rgba(153, 27, 27, 0.54);
}
.mr-model-details-mirror.is-gated {
border-color: rgba(202, 138, 4, 0.62);
background: rgba(113, 63, 18, 0.38);
}
.mr-model-details-mirror.is-gated:hover {
border-color: rgba(250, 204, 21, 0.7);
background: rgba(133, 77, 14, 0.56);
}
.mr-model-details-mirror-info {
min-width: 0;
}
.mr-model-details-mirror-info strong,
.mr-model-details-mirror-info small {
display: block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mr-model-details-mirror-info strong {
color: #f0f0f2;
font-size: var(--mr-font-sm);
font-weight: 800;
}
.mr-model-details-mirror-info small {
margin-top: var(--mr-spacing-3);
color: rgba(255, 255, 255, 0.42);
font-size: var(--mr-font-xs);
}
.mr-model-details-mirror.is-dead .mr-model-details-mirror-info small {
color: rgba(254, 202, 202, 0.72);
}
.mr-model-details-mirror.is-gated .mr-model-details-mirror-info small {
color: rgba(254, 240, 138, 0.72);
}
.mr-model-details-mirror-action {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
color: rgba(255, 255, 255, 0.56);
}
.mr-model-details-mirror-action svg {
width: 17px;
height: 17px;
}
.mr-model-details-mirror.is-dead .mr-model-details-mirror-action {
color: var(--mr-color-error-lighter);
}
.mr-model-details-mirror.is-gated .mr-model-details-mirror-action {
color: #facc15;
}
.mr-model-details-use {
min-height: 31px;
padding: 0 var(--mr-spacing-10);
border-radius: var(--mr-radius-lg);
font-size: var(--mr-font-sm);
}
.mr-model-details-mirror.mr-model-details-use {
min-height: 48px;
padding: 9px var(--mr-spacing-10);
font-size: inherit;
}
.mr-model-details-loading {
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.68);
font-size: var(--mr-font-base);
}
.mr-model-details-error {
color: #ff9a90;
}
.mr-model-details-empty {
padding: var(--mr-spacing-15);
border: 1px dashed rgba(255, 255, 255, 0.13);
border-radius: var(--mr-missing-control-radius);
color: rgba(255, 255, 255, 0.55);
font-size: var(--mr-font-md);
}
@media (max-width: 980px) {
.mr-model-details-main {
grid-template-columns: 1fr;
grid-template-rows: minmax(0, 1fr) auto;
}
.mr-model-details-side {
border-left: 0;
border-top: 1px solid var(--mr-border);
}
.mr-model-details-file-table-header,
.mr-model-details-file-table-row {
grid-template-columns:
minmax(190px, 1.2fr)
minmax(210px, 1.2fr)
minmax(150px, 0.8fr)
minmax(120px, 0.55fr);
gap: var(--mr-spacing-10);
}
}
@media (max-width: 720px) {
.mr-model-details-topbar {
grid-template-columns: 38px minmax(0, 1fr);
}
.mr-model-details-actions {
display: none;
}
.mr-model-details-title h2 {
font-size: var(--mr-font-2xl);
}
.mr-model-details-gallery {
min-height: 300px;
height: min(480px, calc(100vh - 230px));
}
.mr-model-details-image {
flex-basis: min(var(--mr-image-width, 330px), 88vw);
width: min(var(--mr-image-width, 330px), 88vw);
}
.mr-model-details-file {
display: block;
}
.mr-model-details-file-summary {
grid-template-columns: 18px minmax(0, 1fr);
}
.mr-model-details-file-summary-badges {
grid-column: 2;
justify-content: flex-start;
}
.mr-model-details-file-body {
padding-left: var(--mr-spacing-10);
}
.mr-model-details-file-table-header {
display: none;
}
.mr-model-details-file-table-row {
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--mr-spacing-5) var(--mr-spacing-10);
padding: 9px var(--mr-spacing-10);
}
.mr-model-details-file-table-name,
.mr-model-details-file-table-summary,
.mr-model-details-file-table-badges {
grid-column: 1;
}
.mr-model-details-file-table-use {
grid-column: 2;
grid-row: 1 / span 3;
width: auto;
min-width: 112px;
}
.mr-model-details-mirror {
grid-template-columns: 1fr;
}
.mr-model-details-mirror-list {
padding-left: 0;
}
}
.mr-options-wrap {
max-width: 1120px;
margin: 0 auto;
padding: 0 0 0 0;
height: 100%;
}
.mr-options-shell {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: 0;
height: 100%;
border: 1px solid var(--mr-border);
border-radius: var(--mr-radius-3xl);
overflow: hidden;
background: #171717;
}
.mr-options-sidebar {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--mr-spacing-15);
height: 100%;
padding: var(--mr-spacing-16) var(--mr-spacing-8) var(--mr-spacing-12);
background: #252525;
border-right: 1px solid var(--mr-border);
overflow: hidden;
min-width: 0;
}
.mr-options-sidebar-title {
margin: 0;
padding: 0 var(--mr-spacing-12);
color: rgba(255, 255, 255, 0.58);
font-size: var(--mr-font-sm);
font-weight: 800;
letter-spacing: 0.02em;
line-height: 1.2;
text-transform: uppercase;
}
.mr-options-sidebar-group {
display: grid;
gap: var(--mr-spacing-10);
min-height: 0;
align-content: start;
flex: 0 0 auto;
}
.mr-options-sidebar-label {
padding: 0 var(--mr-spacing-12);
font-size: var(--mr-font-xs);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.34);
}
.mr-options-nav {
display: grid;
gap: var(--mr-spacing-2);
align-content: start;
grid-auto-rows: min-content;
}
.mr-options-nav-btn,
#model-resolver-modal .mr-options-nav-btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mr-spacing-8);
width: 100%;
min-height: 44px;
padding: 0 var(--mr-spacing-12) 0 14px;
border: 1px solid transparent;
border-radius: var(--mr-radius-lg);
background: transparent;
color: rgba(255, 255, 255, 0.86);
box-shadow: none;
font-size: var(--mr-font-lg);
font-weight: 700;
line-height: 1;
text-align: left;
cursor: pointer;
transition: var(--mr-missing-control-transition, background 0.15s ease, border-color 0.15s ease, color 0.15s ease);
}
.mr-options-nav-btn:hover,
#model-resolver-modal .mr-options-nav-btn:hover {
color: var(--mr-text);
background: rgba(255, 255, 255, 0.085);
border-color: transparent;
}
.mr-options-nav-btn:focus-visible,
#model-resolver-modal .mr-options-nav-btn:focus-visible {
outline: none;
border-color: rgba(255, 255, 255, 0.12);
box-shadow: 0 0 0 2px var(--mr-missing-control-bg-hover);
}
.mr-options-nav-btn.is-active,
#model-resolver-modal .mr-options-nav-btn.is-active {
color: var(--mr-color-white);
background: #3d3d44;
border-color: transparent;
}
.mr-options-nav-main,
#model-resolver-modal .mr-options-nav-main {
display: inline-flex;
align-items: center;
min-width: 0;
gap: var(--mr-spacing-10);
}
.mr-options-nav-icon,
#model-resolver-modal .mr-options-nav-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
flex: 0 0 16px;
color: currentColor;
}
.mr-options-nav-icon svg,
#model-resolver-modal .mr-options-nav-icon svg {
display: block;
width: 15px;
height: 15px;
}
.mr-options-provider-icon-civitai svg path:nth-of-type(1),
#model-resolver-modal .mr-options-provider-icon-civitai svg path:nth-of-type(1) {
fill: transparent;
stroke: rgba(255, 255, 255, 0.2);
stroke-width: 3;
}
.mr-options-provider-icon-civitai svg path:nth-of-type(2),
.mr-options-provider-icon-civitai svg path:nth-of-type(3),
#model-resolver-modal .mr-options-provider-icon-civitai svg path:nth-of-type(2),
#model-resolver-modal .mr-options-provider-icon-civitai svg path:nth-of-type(3) {
fill: #ffffff;
}
.mr-options-provider-icon-huggingface svg path,
#model-resolver-modal .mr-options-provider-icon-huggingface svg path {
fill: #ffffff;
stroke: rgba(0, 0, 0, 0.42);
stroke-width: 1.4;
paint-order: stroke fill;
vector-effect: non-scaling-stroke;
}
.mr-options-provider-icon-huggingface svg path:nth-of-type(3),
.mr-options-provider-icon-huggingface svg path:nth-of-type(4),
.mr-options-provider-icon-huggingface svg path:nth-of-type(5),
#model-resolver-modal .mr-options-provider-icon-huggingface svg path:nth-of-type(3),
#model-resolver-modal .mr-options-provider-icon-huggingface svg path:nth-of-type(4),
#model-resolver-modal .mr-options-provider-icon-huggingface svg path:nth-of-type(5) {
fill: #202024;
stroke: rgba(255, 255, 255, 0.22);
}
.mr-options-nav-meta,
#model-resolver-modal .mr-options-nav-meta {
display: none;
}
.mr-options-nav-btn.is-active .mr-options-nav-meta,
#model-resolver-modal .mr-options-nav-btn.is-active .mr-options-nav-meta {
display: none;
}
.mr-options-main {
display: grid;
gap: 0;
min-height: 0;
min-width: 0;
height: 100%;
align-content: start;
align-items: start;
padding: var(--mr-spacing-20) var(--mr-spacing-24) 0px var(--mr-spacing-24);
background: #171717;
overflow-y: auto;
overflow-x: hidden;
scrollbar-gutter: stable;
scrollbar-width: auto;
scrollbar-color: rgba(255, 255, 255, 0.34) var(--mr-border);
}
.mr-options-main::-webkit-scrollbar {
width: 12px;
}
.mr-options-main::-webkit-scrollbar-track {
background: var(--mr-missing-control-bg-hover);
border-radius: var(--mr-missing-chip-radius);
}
.mr-options-main::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.34);
border-radius: var(--mr-missing-chip-radius);
border: 2px solid rgba(23, 23, 23, 0.95);
}
.mr-options-main::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.48);
}
.mr-options-main.mr-options-main-fill-section {
grid-auto-rows: minmax(0, 1fr);
align-content: stretch;
align-items: stretch;
overflow-y: hidden;
}
.mr-options-card {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
box-shadow: none;
align-self: start;
}
.mr-options-title {
margin: 0;
font-size: var(--mr-font-xl);
font-weight: 700;
color: var(--mr-text);
}
.mr-options-section {
display: grid;
gap: 0;
align-content: start;
align-items: start;
scroll-margin-top: 24px;
min-width: 0;
}
.mr-options-section.is-hidden {
display: none;
}
.mr-options-section-head {
display: block;
padding: 0 0 var(--mr-spacing-10) 0;
}
.mr-options-section-title {
margin: 0;
font-size: var(--mr-font-3xl);
font-weight: 700;
color: var(--mr-text);
}
.mr-options-collapse-title {
display: inline-flex;
align-items: center;
gap: var(--mr-spacing-6);
min-height: 28px;
padding: 0;
border: 0;
border-radius: 0;
box-shadow: none;
background: transparent;
text-align: left;
cursor: pointer;
}
#model-resolver-modal .mr-options-collapse-title {
font-size: var(--mr-font-3xl);
font-weight: 700;
color: var(--mr-text);
background: transparent;
border: 0;
box-shadow: none;
}
.mr-options-collapse-title:hover {
color: var(--mr-text);
background: transparent;
border: 0;
box-shadow: none;
}
.mr-options-collapse-title:focus-visible {
outline: none;
color: var(--mr-text);
}
.mr-options-collapse-chevron {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 18px;
width: 18px;
height: 18px;
border: 0;
border-radius: 0;
color: var(--mr-text-secondary);
background: transparent;
box-shadow: none;
transition: var(--mr-transition-color);
}
.mr-options-collapse-chevron svg {
width: 16px;
height: 16px;
}
.mr-options-collapse-title:hover .mr-options-collapse-chevron {
color: var(--mr-text);
}
.mr-options-collapse-title[aria-expanded="false"] .mr-options-collapse-chevron {
transform: rotate(-90deg);
}
.mr-options-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0;
align-content: start;
align-items: start;
min-width: 0;
}
.mr-options-stack {
display: grid;
gap: 0;
align-content: start;
min-width: 0;
}
.mr-options-panel {
display: grid;
gap: 0;
align-content: start;
padding: 0;
border: none;
background: transparent;
min-width: 0;
}
.mr-options-section-fill {
grid-template-rows: auto minmax(0, 1fr);
align-self: stretch;
align-content: stretch;
align-items: stretch;
height: 100%;
min-height: 0;
}
.mr-options-section-fill .mr-options-grid,
.mr-options-section-fill .mr-options-panel {
height: 100%;
min-height: 0;
align-content: stretch;
align-items: stretch;
}
.mr-options-section-fill .mr-options-stack {
grid-template-rows: auto auto auto minmax(0, 1fr);
height: 100%;
min-height: 0;
align-content: stretch;
}
.mr-options-section-fill .mr-options-build-stack {
grid-template-rows: auto auto minmax(0, 1fr);
}
.mr-options-section-fill .mr-options-metadata-size-stack {
grid-template-rows: auto minmax(0, 1fr);
}
.mr-options-section-fill .mr-options-metadata-size-stack.is-controls-collapsed {
grid-template-rows: minmax(0, 1fr);
}
.mr-options-build-stack {
--mr-options-build-surface: #121212;
--mr-tab-active-bg: var(--mr-options-build-surface);
}
.mr-options-metadata-build-controls,
.mr-options-metadata-size-controls {
display: grid;
gap: 0;
min-width: 0;
}
.mr-options-metadata-build-controls[hidden],
.mr-options-metadata-size-controls[hidden] {
display: none;
}
.mr-options-build-stack,
.mr-options-metadata-size-stack {
container-type: inline-size;
}
.mr-options-panel-title {
margin: 0 0 var(--mr-spacing-6) 0;
font-size: var(--mr-font-xl);
font-weight: 700;
color: var(--mr-text);
}
.mr-options-comfyui-icon svg,
.mr-options-comfyui-icon svg path {
fill: currentColor;
}
.mr-options-db-summary {
display: grid;
gap: var(--mr-spacing-1);
border: 1px solid var(--mr-border);
border-radius: var(--mr-radius-lg);
overflow: hidden;
background: rgba(255, 255, 255, 0.03);
}
#mr-options-hf-index-authors {
display: contents;
}
.mr-options-db-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mr-spacing-12);
min-height: 34px;
padding: var(--mr-spacing-7) var(--mr-spacing-10);
background: rgba(0, 0, 0, 0.16);
color: var(--mr-text-secondary);
font-size: var(--mr-font-md);
}
.mr-options-db-row strong {
color: var(--mr-text);
font-size: var(--mr-font-md);
font-weight: 700;
text-align: right;
}
.mr-options-db-row strong.is-pending {
color: var(--mr-text-secondary);
}
.mr-options-db-row strong.is-valid {
color: var(--mr-color-success);
}
.mr-options-db-row strong.is-invalid {
color: var(--mr-color-error-light);
}
.mr-options-metadata-build-summary,
.mr-options-metadata-size-summary {
gap: var(--mr-spacing-1);
padding: var(--mr-spacing-1);
border-color: rgba(255, 255, 255, 0.12);
border-radius: var(--mr-radius-xl);
overflow: hidden;
background: rgba(255, 255, 255, 0.09);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.mr-options-metadata-build-summary {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
padding: 0;
background: transparent;
}
.mr-options-metadata-size-summary {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}
.mr-options-db-summary.mr-options-metadata-size-summary {
background: #ffffff00;
}
.mr-options-metadata-build-summary .mr-options-db-row,
.mr-options-metadata-size-summary .mr-options-db-row {
position: relative;
justify-content: flex-start;
min-width: 0;
min-height: 70px;
padding: var(--mr-spacing-6);
border-top: 0 !important;
background: rgba(18, 18, 18, 0.96);
}
.mr-options-metadata-build-summary .mr-options-db-row::after,
.mr-options-metadata-size-summary .mr-options-db-row::after {
content: none !important;
display: none !important;
}
.mr-options-overview-stat-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 28px;
width: 28px;
height: 28px;
color: rgba(255, 255, 255, 0.9);
}
.mr-options-overview-stat-icon svg {
width: 24px;
height: 24px;
stroke-width: 1.9;
}
.mr-options-overview-stat-copy {
display: grid;
min-width: 0;
gap: var(--mr-spacing-3);
}
.mr-options-overview-stat-copy span {
overflow-wrap: normal;
word-break: normal;
color: var(--mr-text-secondary);
font-size: var(--mr-font-md);
font-weight: 600;
line-height: 1.2;
}
.mr-options-metadata-build-summary .mr-options-db-row strong,
.mr-options-metadata-size-summary .mr-options-db-row strong {
color: var(--mr-text);
font-size: var(--mr-font-3xl);
font-weight: 800;
line-height: 1.05;
text-align: left;
}
@container (min-width: 700px) {
.mr-options-metadata-build-summary {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@container (min-width: 860px) {
.mr-options-metadata-size-summary {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
@container (max-width: 560px) {
.mr-options-metadata-build-summary,
.mr-options-metadata-size-summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
background: rgba(255, 255, 255, 0.09);
}
.mr-options-metadata-build-summary {
background: transparent;
}
.mr-options-metadata-build-summary .mr-options-db-row,
.mr-options-metadata-size-summary .mr-options-db-row {
min-height: 66px;
padding: var(--mr-spacing-6);
}
}
@container (max-width: 360px) {
.mr-options-metadata-build-summary,
.mr-options-metadata-size-summary {
grid-template-columns: 1fr;
}
.mr-options-metadata-build-summary {
padding: 0;
}
.mr-options-metadata-size-summary {
padding: var(--mr-spacing-8);
}
.mr-options-metadata-build-summary .mr-options-db-row,
.mr-options-metadata-size-summary .mr-options-db-row {
min-height: 56px;
padding: var(--mr-spacing-6);
}
}
.mr-options-aria2-summary .mr-options-db-row {
align-items: flex-start;
}
.mr-options-aria2-daemon-cell {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: var(--mr-spacing-8);
min-width: 0;
}
.mr-options-db-message {
margin-top: var(--mr-spacing-10);
color: var(--mr-text-secondary);
font-size: var(--mr-font-md);
line-height: 1.35;
}
.mr-options-db-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--mr-spacing-8);
margin-top: var(--mr-spacing-12);
}
.mr-options-db-actions .mr-btn {
gap: var(--mr-spacing-6);
}
.mr-options-db-actions .mr-btn svg {
width: 14px;
height: 14px;
}
.mr-options-export-status {
display: inline-flex;
align-items: center;
min-height: 32px;
margin-top: 0;
}
.mr-options-db-message.is-pending {
color: var(--mr-text-secondary);
}
.mr-options-db-message.is-valid {
color: var(--mr-color-success);
}
.mr-options-db-message.is-invalid {
color: var(--mr-color-error-light);
}
.mr-options-inline-hint {
display: block;
margin-top: var(--mr-spacing-3);
}
.mr-options-build-tabs {
align-self: flex-start;
align-items: flex-end;
width: fit-content;
height: 36px;
min-height: 36px;
margin-top: var(--mr-spacing-12);
margin-left: var(--mr-spacing-15);
overflow: visible;
--mr-tab-active-bg: var(--mr-options-build-surface);
}
.mr-options-build-stack.is-controls-collapsed .mr-options-build-tabs {
margin-top: 0;
}
.mr-options-build-tabs .mr-options-build-tab {
gap: var(--mr-spacing-5);
min-width: 94px;
padding-right: var(--mr-spacing-20);
padding-left: var(--mr-spacing-20);
}
.mr-options-build-tabs .mr-options-build-tab:not(.mr-tab-active):hover,
.mr-options-build-tabs .mr-options-build-tab:not(.mr-tab-active):focus,
.mr-options-build-tabs .mr-options-build-tab:not(.mr-tab-active):active,
.mr-options-build-tabs .mr-options-build-tab.mr-tab-active {
padding-right: var(--mr-spacing-20) !important;
padding-left: var(--mr-spacing-20) !important;
}
.mr-options-build-tab-count {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 var(--mr-spacing-6);
border-radius: var(--mr-missing-chip-radius);
color: var(--mr-text);
background: rgba(255, 255, 255, 0.1);
font-size: var(--mr-font-sm);
font-weight: 700;
line-height: 1;
pointer-events: none;
}
.mr-options-build-tab.mr-tab-active .mr-options-build-tab-count {
background: var(--mr-border-strong);
}
.mr-options-build-tab-panel {
min-width: 0;
min-height: 0;
height: 100%;
}
.mr-options-build-tab-panel.is-hidden {
display: none;
}
#mr-options-metadata-build-progress-panel,
#mr-options-metadata-build-history-panel {
grid-row: 3;
grid-column: 1;
min-height: 0;
padding: var(--mr-spacing-10);
overflow: hidden;
border: 1px solid var(--mr-border);
border-radius: 0 var(--mr-radius-lg) var(--mr-radius-lg) var(--mr-radius-lg);
background: var(--mr-tab-active-bg, var(--mr-options-build-surface));
}
#mr-options-metadata-build-progress-panel {
display: grid;
grid-template-rows: minmax(0, 1fr);
}
#mr-options-metadata-build-history-panel {
display: flex;
flex-direction: column;
}
#mr-options-metadata-build-progress-panel:not(.is-hidden),
#mr-options-metadata-build-history-panel:not(.is-hidden) {
opacity: 1;
pointer-events: auto;
z-index: 1;
}
#mr-options-metadata-build-progress-panel.is-hidden {
display: grid;
opacity: 0;
pointer-events: none;
z-index: 0;
}
#mr-options-metadata-build-history-panel.is-hidden {
display: flex;
opacity: 0;
pointer-events: none;
z-index: 0;
}
.mr-options-build-progress {
display: grid;
gap: var(--mr-spacing-8);
grid-template-rows: auto auto auto minmax(0, 1fr);
height: 100%;
margin-top: 0;
min-width: 0;
min-height: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
.mr-options-build-progress[hidden] {
display: none;
}
.mr-options-build-progress-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mr-spacing-12);
color: var(--mr-text-secondary);
font-size: var(--mr-font-md);
}
.mr-options-build-progress-head strong {
color: var(--mr-text);
font-size: var(--mr-font-md);
}
.mr-options-build-progress-bar {
height: 7px;
overflow: hidden;
border-radius: var(--mr-missing-chip-radius);
background: var(--mr-border);
}
.mr-options-build-progress-bar span {
display: block;
width: 0;
height: 100%;
border-radius: inherit;
background: var(--mr-accent);
transition: var(--mr-transition-width);
}
.mr-options-build-current {
display: grid;
gap: var(--mr-spacing-3);
min-width: 0;
color: var(--mr-text-secondary);
font-size: var(--mr-font-md);
line-height: 1.35;
}
.mr-options-build-current span,
.mr-options-build-current code {
overflow-wrap: anywhere;
}
.mr-options-build-current code {
color: var(--mr-text-muted);
font-family: var(--mr-font-family-mono);
font-size: var(--mr-font-sm);
}
.mr-options-build-worker-list {
display: grid;
gap: var(--mr-spacing-8);
align-content: start;
height: 100%;
max-height: none;
min-height: 0;
overflow: auto;
padding-right: var(--mr-spacing-2);
}
.mr-options-build-worker-list[hidden] {
display: none;
}
.mr-options-build-worker {
display: grid;
gap: var(--mr-spacing-5);
min-width: 0;
padding: var(--mr-spacing-8) 9px;
border: 1px solid var(--mr-border);
border-radius: var(--mr-radius-lg);
background: var(--mr-missing-control-bg);
}
.mr-options-build-worker-head,
.mr-options-build-worker-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mr-spacing-10);
min-width: 0;
color: var(--mr-text-secondary);
font-size: var(--mr-font-sm);
}
.mr-options-build-worker-head strong {
color: var(--mr-text);
font-size: var(--mr-font-sm);
}
.mr-options-build-worker-name {
min-width: 0;
overflow: hidden;
color: var(--mr-text);
font-size: var(--mr-font-md);
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.mr-options-build-worker code {
min-width: 0;
overflow: hidden;
color: var(--mr-text-muted);
font-family: var(--mr-font-family-mono);
font-size: var(--mr-font-sm);
text-overflow: ellipsis;
white-space: nowrap;
}
.mr-options-build-worker-bar {
height: 5px;
overflow: hidden;
border-radius: var(--mr-missing-chip-radius);
background: var(--mr-border);
}
.mr-options-build-worker-bar span {
display: block;
width: 0;
height: 100%;
border-radius: inherit;
background: var(--mr-color-success);
transition: var(--mr-transition-width);
}
.mr-options-history-action {
display: inline-flex;
align-items: center;
min-height: 20px;
padding: var(--mr-spacing-2) var(--mr-spacing-7);
border-radius: var(--mr-missing-chip-radius);
color: var(--mr-text);
background: var(--mr-border);
font-size: var(--mr-font-sm);
font-weight: 700;
}
.mr-options-history-action.is-created {
color: var(--mr-color-success);
background: var(--mr-badge-success-bg);
}
.mr-options-history-action.is-updated {
color: var(--mr-accent);
background: var(--mr-badge-info-bg);
}
.mr-options-history-action.is-skipped,
.mr-options-history-action.is-checked {
color: var(--mr-text-secondary);
}
.mr-options-history-action.is-error {
color: var(--mr-color-error-light);
background: rgba(248, 113, 113, 0.1);
}
.mr-options-history-action.is-cancelled {
color: var(--mr-text-secondary);
background: var(--mr-missing-control-bg-hover);
}
.mr-options-history-action-filter-cell {
overflow: visible;
}
.mr-options-history-action-filter-wrap {
position: relative;
display: inline-flex;
min-width: 0;
}
.mr-options-history-action-filter-button {
display: inline-flex;
align-items: center;
gap: var(--mr-spacing-5);
max-width: 100%;
min-height: 20px;
padding: 0 var(--mr-spacing-15) 0 0;
border: 0 !important;
border-radius: 0;
color: var(--mr-text);
background: transparent !important;
box-shadow: none !important;
font: inherit;
font-weight: 700;
line-height: 1.1;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}
.mr-options-history-action-filter-button::after {
content: "";
position: absolute;
right: 1px;
width: 0;
height: 0;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
border-top: 5px solid currentColor;
opacity: 0.72;
}
.mr-options-history-action-filter-button:hover,
.mr-options-history-action-filter-button:focus-visible {
color: var(--mr-text);
outline: none;
}
.mr-options-history-filter-chip {
display: inline-flex;
align-items: center;
min-width: 0;
max-width: 78px;
height: auto;
padding: 0;
border-radius: 0;
color: var(--mr-text-muted);
background: transparent;
font-size: var(--mr-font-sm);
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mr-options-history-filter-menu {
position: absolute;
top: calc(100% + 5px);
left: -9px;
z-index: 8;
display: grid;
gap: 0;
min-width: 160px;
padding: var(--mr-spacing-5);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--mr-radius-lg);
background: #121212;
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.38);
}
.mr-options-history-filter-menu[hidden] {
display: none;
}
#model-resolver-modal .mr-options-history-filter-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mr-spacing-10);
min-height: var(--mr-button-height-sm);
padding: var(--mr-spacing-5) var(--mr-spacing-7);
border: 0 !important;
border-radius: var(--mr-radius-md);
color: var(--mr-text-secondary);
background: transparent !important;
box-shadow: none !important;
font-size: var(--mr-font-md);
font-weight: 500;
line-height: 1.1;
text-align: left;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}
#model-resolver-modal .mr-options-history-filter-option:hover,
#model-resolver-modal .mr-options-history-filter-option:focus-visible {
color: var(--mr-text);
background: rgba(255, 255, 255, 0.055) !important;
outline: none;
}
#model-resolver-modal .mr-options-history-filter-option.is-active {
color: var(--mr-text);
background: rgba(255, 255, 255, 0.075) !important;
}
#model-resolver-modal .mr-options-history-filter-option span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
#model-resolver-modal .mr-options-history-filter-option strong {
min-width: 34px;
color: var(--mr-text-muted);
font-size: var(--mr-font-sm);
font-weight: 700;
text-align: right;
}
#model-resolver-modal .mr-options-history-filter-option.is-active strong {
color: var(--mr-text);
}
.mr-options-build-tab-panel .mr-options-audit-results:not([hidden]) {
display: flex;
flex: 1 1 auto;
flex-direction: column;
height: 100%;
min-height: 0;
margin-top: 0;
}
.mr-options-build-tab-panel .mr-options-audit-results[hidden] {
display: none;
}
.mr-options-build-tab-panel .mr-options-audit-table-wrap,
.mr-options-build-tab-panel .mr-options-audit-empty {
border-top-left-radius: 0;
background: transparent;
}
.mr-options-audit-loading {
padding: var(--mr-spacing-12);
color: var(--mr-text-secondary);
font-size: var(--mr-font-md);
}
.mr-options-audit-results {
margin-top: var(--mr-spacing-12);
min-width: 0;
}
.mr-options-section-fill .mr-options-audit-results:not([hidden]) {
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
.mr-options-audit-table-wrap {
overflow: auto;
border: 1px solid var(--mr-border);
border-radius: var(--mr-radius-lg);
background: rgba(0, 0, 0, 0.14);
}
.mr-options-section-fill .mr-options-audit-table-wrap {
flex: 1 1 auto;
min-height: 160px;
max-height: none;
}
.mr-options-audit-table {
width: 100%;
min-width: 780px;
border-collapse: collapse;
table-layout: fixed;
font-size: var(--mr-font-md);
}
.mr-options-audit-table th,
.mr-options-audit-table td {
padding: var(--mr-spacing-8) var(--mr-spacing-10);
border-bottom: 1px solid var(--mr-missing-control-bg-hover);
color: var(--mr-text-secondary);
vertical-align: top;
text-align: left;
}
.mr-options-audit-table th {
position: sticky;
top: 0;
z-index: 1;
color: var(--mr-text);
font-weight: 700;
background: rgba(20, 20, 24, 0.96);
}
.mr-options-audit-table tr:last-child td {
border-bottom: none;
}
.mr-options-audit-row.is-context-menu {
cursor: context-menu;
}
.mr-options-audit-row.is-context-menu:hover td {
background: rgba(255, 255, 255, 0.045);
}
.mr-options-audit-table th:nth-child(1),
.mr-options-audit-table td:nth-child(1) {
width: 28%;
}
.mr-options-audit-table th:nth-child(2),
.mr-options-audit-table td:nth-child(2) {
width: 11%;
}
.mr-options-audit-table th:nth-child(3),
.mr-options-audit-table td:nth-child(3),
.mr-options-audit-table th:nth-child(4),
.mr-options-audit-table td:nth-child(4),
.mr-options-audit-table th:nth-child(5),
.mr-options-audit-table td:nth-child(5) {
width: 12%;
}
.mr-options-history-table {
min-width: 900px;
}
.mr-options-history-table .mr-options-audit-row {
content-visibility: auto;
contain-intrinsic-size: auto 58px;
}
.mr-options-history-table tr[hidden] {
display: none;
}
#model-resolver-modal .mr-options-history-show-more {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 34px;
padding: 0 var(--mr-spacing-12);
border: 1px solid rgba(255, 255, 255, 0.09) !important;
border-radius: var(--mr-radius-lg);
color: var(--mr-text-secondary);
background: var(--mr-missing-control-bg) !important;
box-shadow: none !important;
font-size: var(--mr-font-md);
font-weight: 700;
cursor: pointer;
}
#model-resolver-modal .mr-options-history-show-more:hover,
#model-resolver-modal .mr-options-history-show-more:focus-visible {
color: var(--mr-text);
background: var(--mr-missing-control-bg-hover) !important;
outline: none;
}
.mr-options-history-table th:nth-child(1),
.mr-options-history-table td:nth-child(1) {
width: 30%;
}
.mr-options-history-table th:nth-child(2),
.mr-options-history-table td:nth-child(2) {
width: 12%;
}
.mr-options-history-table th:nth-child(3),
.mr-options-history-table td:nth-child(3) {
width: 11%;
}
.mr-options-history-table th:nth-child(4),
.mr-options-history-table td:nth-child(4) {
width: 13%;
}
.mr-options-history-table th:nth-child(5),
.mr-options-history-table td:nth-child(5) {
width: 8%;
}
.mr-options-history-table th:nth-child(6),
.mr-options-history-table td:nth-child(6) {
width: 26%;
}
.mr-options-audit-model {
color: var(--mr-text);
font-weight: 700;
word-break: break-word;
}
.mr-options-audit-path {
margin-top: var(--mr-spacing-3);
color: var(--mr-text-muted);
font-size: var(--mr-font-sm);
line-height: 1.3;
overflow-wrap: anywhere;
}
.mr-options-audit-delta {
font-weight: 700;
}
.mr-options-audit-delta.is-positive {
color: var(--mr-color-success);
}
.mr-options-audit-delta.is-negative {
color: var(--mr-color-error-light);
}
.mr-options-audit-empty {
padding: var(--mr-spacing-12);
border: 1px solid var(--mr-badge-success-border);
border-radius: var(--mr-radius-lg);
color: var(--mr-color-success);
background: rgba(34, 197, 94, 0.08);
font-size: var(--mr-font-md);
}
.mr-options-audit-errors {
margin-top: var(--mr-spacing-12);
padding: var(--mr-spacing-10) var(--mr-spacing-12);
border: 1px solid rgba(248, 113, 113, 0.22);
border-radius: var(--mr-radius-lg);
background: rgba(248, 113, 113, 0.08);
}
.mr-options-audit-errors-title {
margin-bottom: var(--mr-spacing-6);
color: var(--mr-color-error-light);
font-size: var(--mr-font-md);
font-weight: 700;
}
.mr-options-audit-errors ul {
display: grid;
gap: var(--mr-spacing-6);
margin: 0;
padding: 0;
list-style: none;
}
.mr-options-audit-errors li {
display: grid;
gap: var(--mr-spacing-2);
color: var(--mr-text-secondary);
font-size: var(--mr-font-md);
}
.mr-options-audit-errors code {
color: var(--mr-text-muted);
font-family: var(--mr-font-family-mono);
font-size: var(--mr-font-sm);
overflow-wrap: anywhere;
}
#model-resolver-modal .mr-options-shell .mr-btn.mr-btn-primary,
#model-resolver-modal .mr-options-shell .mr-btn.mr-btn-primary:hover:not(:disabled) {
color: #101010;
}
.mr-options-field {
display: flex;
flex-direction: column;
gap: 0;
align-items: stretch;
padding-bottom: var(--mr-spacing-15);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mr-options-help,
#model-resolver-modal .mr-options-help {
margin: var(--mr-spacing-8) 0 0;
color: var(--mr-text-muted);
font-size: var(--mr-font-sm);
line-height: 1.45;
}
.mr-options-help summary,
#model-resolver-modal .mr-options-help summary {
width: fit-content;
color: var(--mr-text-secondary);
cursor: pointer;
font-weight: 700;
}
.mr-options-help summary:hover,
#model-resolver-modal .mr-options-help summary:hover {
color: var(--mr-accent);
}
.mr-options-help ol,
#model-resolver-modal .mr-options-help ol {
margin: var(--mr-spacing-8) 0 0 18px;
padding: 0;
}
.mr-options-help li,
#model-resolver-modal .mr-options-help li {
margin: var(--mr-spacing-4) 0;
}
.mr-options-help p,
#model-resolver-modal .mr-options-help p {
margin: var(--mr-spacing-8) 0 0;
}
.mr-options-help code,
#model-resolver-modal .mr-options-help code {
color: var(--mr-text);
font-size: var(--mr-font-xs);
}
.mr-options-token-check,
#model-resolver-modal .mr-options-token-check {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--mr-spacing-10);
margin-top: var(--mr-spacing-10);
}
.mr-options-token-check-status,
#model-resolver-modal .mr-options-token-check-status {
color: var(--mr-text-muted);
font-size: var(--mr-font-sm);
font-weight: 600;
}
.mr-options-token-check-status.is-pending,
#model-resolver-modal .mr-options-token-check-status.is-pending {
color: var(--mr-text-secondary);
}
.mr-options-token-check-status.is-valid,
#model-resolver-modal .mr-options-token-check-status.is-valid {
color: var(--mr-color-success);
}
.mr-options-token-check-status.is-invalid,
#model-resolver-modal .mr-options-token-check-status.is-invalid {
color: var(--mr-color-error-light);
}
.mr-options-label {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--mr-spacing-8);
font-size: var(--mr-font-base);
font-weight: 600;
color: #d8d8dd;
}
.mr-options-inline-link {
border: none;
background: none;
font-size: var(--mr-font-sm);
font-weight: 700;
padding: 0;
cursor: pointer;
text-decoration: none;
color: rgba(255, 255, 255, 0.6);
}
.mr-options-inline-link:hover {
color: var(--mr-color-white);
text-decoration: underline;
}
.mr-tooltip-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: var(--mr-missing-chip-radius);
border: 1px solid rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.7);
font-size: var(--mr-font-sm);
font-weight: 700;
background: rgba(255, 255, 255, 0.03);
cursor: help;
flex: 0 0 auto;
margin-left: var(--mr-spacing-4);
vertical-align: middle;
user-select: none;
}
.mr-tooltip-badge:hover,
.mr-tooltip-badge:focus-visible {
background: rgba(78, 161, 255, 0.18);
color: #d9ecff;
border-color: var(--mr-badge-info-border);
outline: none;
}
.mr-global-tooltip {
position: fixed;
min-width: 220px;
max-width: min(320px, calc(100vw - 24px));
padding: var(--mr-spacing-8) var(--mr-spacing-10);
border-radius: var(--mr-radius-2xl);
background: rgba(34, 34, 38, 0.98);
border: 1px solid var(--mr-border);
color: var(--mr-text);
font-size: var(--mr-font-md);
font-weight: 400;
line-height: 1.5;
white-space: pre-line;
overflow-wrap: anywhere;
text-align: left;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
pointer-events: none;
z-index: var(--mr-z-tooltip);
}
.mr-global-tooltip.mr-global-tooltip-with-image {
width: min(300px, calc(100vw - 24px));
padding: var(--mr-spacing-8);
white-space: normal;
}
.mr-tooltip-preview {
display: block;
width: 100%;
max-height: min(360px, 55vh);
object-fit: contain;
border-radius: var(--mr-missing-control-radius);
background: rgba(0, 0, 0, 0.28);
}
.mr-tooltip-label {
padding: var(--mr-spacing-8) var(--mr-spacing-3) var(--mr-spacing-2);
white-space: pre-line;
overflow-wrap: anywhere;
}
.mr-global-tooltip-with-image .mr-tooltip-label {
width: 100%;
box-sizing: border-box;
text-align: center;
}
.mr-options-input-row {
display: grid;
grid-template-columns: minmax(150px, 1fr) minmax(0, 380px) 42px;
align-items: center;
gap: var(--mr-spacing-10);
padding: var(--mr-spacing-15) 0 0;
min-width: 0;
}
.mr-options-input-row>.mr-options-label {
min-width: 0;
padding-right: var(--mr-spacing-8);
}
.mr-options-input,
#model-resolver-modal select.mr-options-input {
width: 100%;
min-width: 0;
min-height: 42px;
padding: var(--mr-spacing-10) var(--mr-spacing-15);
background: #0f1013;
color: var(--mr-text);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: var(--mr-radius-xl);
font-size: var(--mr-font-base);
outline: none;
transition: var(--mr-transition-bg);
}
.mr-options-input:focus,
#model-resolver-modal select.mr-options-input:focus {
background: #0f1013;
border-color: rgba(78, 161, 255, 0.45);
box-shadow: none;
}
.mr-options-textarea {
min-height: 150px;
resize: vertical;
line-height: 1.45;
}
.mr-options-template-list {
display: grid;
gap: var(--mr-spacing-12);
}
.mr-options-subsection-head {
display: flex;
align-items: center;
gap: var(--mr-spacing-8);
margin: 18px 0 var(--mr-spacing-2);
padding-bottom: var(--mr-spacing-10);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.mr-options-subsection-head:first-of-type {
margin-top: var(--mr-spacing-8);
}
.mr-options-subsection-head-actions {
justify-content: space-between;
gap: var(--mr-spacing-12);
}
.mr-options-subsection-title-wrap {
display: inline-flex;
align-items: center;
gap: var(--mr-spacing-8);
min-width: 0;
}
.mr-options-subsection-title {
margin: 0;
color: var(--mr-text);
font-size: var(--mr-font-xl);
font-weight: 700;
line-height: 1.2;
}
.mr-options-placeholder-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--mr-spacing-8);
margin: var(--mr-spacing-12) 0 var(--mr-spacing-4);
color: var(--mr-text-muted);
font-size: var(--mr-font-md);
font-weight: 600;
}
.mr-options-template-detect-status {
min-height: 28px;
display: flex;
align-items: center;
padding: var(--mr-spacing-7) var(--mr-spacing-10);
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: var(--mr-radius-md);
background: rgba(255, 255, 255, 0.025);
color: var(--mr-text-muted);
font-size: var(--mr-font-md);
line-height: 1.35;
}
.mr-options-template-detect-status.is-pending {
color: #cfe8ff;
border-color: rgba(78, 161, 255, 0.28);
background: rgba(78, 161, 255, 0.08);
}
.mr-options-template-detect-status.is-valid {
color: var(--mr-type-lora-text);
border-color: rgba(114, 211, 138, 0.28);
background: rgba(114, 211, 138, 0.08);
}
.mr-options-template-detect-status.is-invalid {
color: #ffd8a8;
border-color: rgba(255, 184, 77, 0.28);
background: rgba(255, 184, 77, 0.08);
}
.mr-options-mapping-section {
display: grid;
gap: var(--mr-spacing-10);
}
.mr-options-mapping-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mr-spacing-12);
}
.mr-options-mapping-list {
display: grid;
gap: var(--mr-spacing-8);
padding: var(--mr-spacing-12);
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: var(--mr-radius-lg);
background: rgba(15, 23, 42, 0.20);
}
.mr-options-mapping-row {
display: grid;
grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) 40px;
align-items: center;
gap: var(--mr-spacing-8);
}
.mr-options-mapping-row .mr-options-input {
height: 32px;
min-height: 32px;
padding: 0 var(--mr-spacing-10);
}
.mr-options-mapping-remove {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 0, 0, 0.82);
border-radius: var(--mr-radius-md);
background: rgba(255, 0, 0, 0.08);
color: var(--mr-color-danger-bright);
cursor: pointer;
font-size: var(--mr-font-xl);
font-weight: 800;
line-height: 1;
}
.mr-options-mapping-remove:hover {
background: rgba(255, 0, 0, 0.18);
color: var(--mr-color-danger-bright);
}
.mr-options-placeholder-badge {
display: inline-flex;
align-items: center;
min-height: 20px;
padding: var(--mr-spacing-3) var(--mr-spacing-7);
border-radius: var(--mr-radius-md);
background: rgba(0, 122, 204, 0.9);
color: var(--mr-text);
font-family: var(--mr-font-family-mono);
font-size: var(--mr-font-sm);
font-weight: 700;
line-height: 1;
}
.mr-options-template-row {
display: grid;
gap: var(--mr-spacing-8);
padding: var(--mr-spacing-12) 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mr-options-template-main {
display: grid;
grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
align-items: center;
gap: var(--mr-spacing-12);
}
.mr-options-template-custom.is-hidden {
display: none;
}
.mr-options-template-preview {
min-height: 32px;
display: flex;
align-items: center;
gap: var(--mr-spacing-6);
padding: var(--mr-spacing-8) var(--mr-spacing-10);
border: 1px solid rgba(148, 163, 184, 0.24);
border-radius: var(--mr-radius-md);
background: rgba(15, 23, 42, 0.36);
color: rgba(226, 232, 240, 0.72);
font-size: var(--mr-font-md);
line-height: 1.4;
word-break: break-word;
}
.mr-options-template-preview span {
color: rgba(226, 232, 240, 0.62);
font-weight: 600;
}
.mr-options-template-preview code {
color: #00a8ff;
font-family: var(--mr-font-family-mono);
font-size: var(--mr-font-md);
white-space: normal;
word-break: break-word;
}
@media (max-width: 820px) {
.mr-options-template-main {
grid-template-columns: 1fr;
}
.mr-options-subsection-head-actions {
align-items: flex-start;
flex-direction: column;
}
.mr-options-mapping-head {
align-items: flex-start;
flex-direction: column;
}
.mr-options-mapping-row {
grid-template-columns: 1fr 1fr 36px;
}
}
.mr-options-visibility-btn,
#model-resolver-modal .mr-options-visibility-btn {
width: 42px;
min-width: 42px;
height: 42px;
min-height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid var(--mr-missing-control-border, rgba(255, 255, 255, 0.105));
border-radius: var(--mr-missing-control-radius, 7px);
background: var(--mr-missing-control-bg, rgba(255, 255, 255, 0.035));
color: var(--mr-text);
box-shadow: var(--mr-missing-control-shadow, none);
cursor: pointer;
transition: var(--mr-missing-control-transition, background 0.15s ease, border-color 0.15s ease, color 0.15s ease);
}
.mr-options-visibility-btn:hover,
#model-resolver-modal .mr-options-visibility-btn:hover {
background: var(--mr-missing-control-bg-hover, rgba(255, 255, 255, 0.06));
color: var(--mr-text);
border-color: var(--mr-missing-control-border-hover, rgba(255, 255, 255, 0.17));
}
.mr-options-visibility-btn[aria-pressed="true"],
#model-resolver-modal .mr-options-visibility-btn[aria-pressed="true"] {
color: var(--mr-accent);
border-color: rgba(114, 211, 138, 0.32);
background: rgba(114, 211, 138, 0.13);
}
.mr-options-visibility-btn:focus-visible,
#model-resolver-modal .mr-options-visibility-btn:focus-visible {
outline: none;
border-color: var(--mr-missing-control-focus-border, rgba(114, 211, 138, 0.30));
box-shadow: 0 0 0 2px var(--mr-missing-control-focus-ring, rgba(114, 211, 138, 0.08));
}
.mr-options-visibility-btn.mr-is-muted,
#model-resolver-modal .mr-options-visibility-btn.mr-is-muted {
color: var(--mr-text-muted);
}
.mr-options-visibility-btn svg,
#model-resolver-modal .mr-options-visibility-btn svg {
width: var(--mr-font-base);
height: var(--mr-font-base);
display: block;
}
.mr-options-toggle-list {
display: grid;
gap: 0;
}
.mr-options-dependent-block,
#model-resolver-modal .mr-options-dependent-block {
display: grid;
gap: var(--mr-spacing-10);
margin: 0 0 var(--mr-spacing-8) var(--mr-spacing-16);
padding: var(--mr-spacing-12) 0 var(--mr-spacing-4) 14px;
border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.mr-options-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mr-spacing-16);
padding: var(--mr-spacing-16) 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0;
border-top: none;
border-left: none;
border-right: none;
background: transparent;
cursor: pointer;
transition: var(--mr-transition-bg);
min-width: 0;
}
.mr-options-toggle-row:hover {
background: transparent;
}
.mr-options-compact-toggle-row {
padding: var(--mr-spacing-10) 0;
}
.mr-options-toggle-copy {
display: grid;
gap: 0;
min-width: 0;
}
.mr-options-toggle-title {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--mr-spacing-8);
font-size: var(--mr-font-base);
font-weight: 500;
color: #d8d8dd;
}
.mr-options-source-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
flex: 0 0 16px;
color: currentColor;
}
.mr-options-source-icon svg {
display: block;
width: 16px;
height: 16px;
}
.mr-options-toggle-control {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 46px;
padding-top: var(--mr-spacing-1);
flex: 0 0 auto;
margin-left: auto;
}
.mr-options-switch-input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.mr-options-switch {
position: relative;
width: 46px;
height: var(--mr-button-height-sm);
border-radius: var(--mr-missing-chip-radius);
background: var(--mr-color-gray-700);
border: 1px solid var(--mr-missing-control-bg-hover);
transition: var(--mr-transition-smooth);
}
.mr-options-switch::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
border-radius: var(--mr-missing-chip-radius);
background: #f2f6fb;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
transition: var(--mr-transition-transform);
}
.mr-options-switch-input:checked+.mr-options-switch {
background: var(--mr-color-primary);
border-color: var(--mr-color-primary);
box-shadow: none;
}
.mr-options-switch-input:checked+.mr-options-switch::after {
transform: translateX(20px);
}
.mr-options-number-row {
display: grid;
grid-template-columns: minmax(150px, 1fr) minmax(72px, 118px);
gap: var(--mr-spacing-12);
align-items: center;
padding: var(--mr-spacing-16) 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
min-width: 0;
}
.mr-options-number-copy {
display: grid;
gap: 0;
min-width: 0;
}
.mr-options-number-row .mr-options-input {
width: 100%;
min-width: 0;
}
.mr-options-wide-row {
grid-template-columns: minmax(150px, 220px) minmax(260px, 1fr);
}
.mr-options-aria2-setting[hidden] {
display: none !important;
}
.mr-options-path-mode-row {
grid-template-columns: minmax(150px, 1fr) minmax(220px, 280px);
}
.mr-options-actions {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-end;
margin-top: auto;
padding-top: var(--mr-spacing-10);
border-top: 1px solid var(--mr-border);
gap: var(--mr-spacing-10);
flex: 0 0 auto;
}
.mr-options-actions .mr-footer-btn {
width: 100%;
min-width: 0;
}
.mr-options-actions .mr-btn.mr-btn-primary.mr-footer-btn {
background: var(--mr-missing-control-bg, rgba(255, 255, 255, 0.035));
border-color: var(--mr-missing-control-border, rgba(255, 255, 255, 0.105));
border-radius: var(--mr-missing-control-radius, 7px);
color: var(--mr-text);
box-shadow: var(--mr-missing-control-shadow, none);
}
.mr-options-actions .mr-btn.mr-btn-primary.mr-footer-btn:hover:not(:disabled) {
background: var(--mr-missing-control-bg-hover, rgba(255, 255, 255, 0.06));
border-color: var(--mr-missing-control-border-hover, rgba(255, 255, 255, 0.17));
color: var(--mr-text);
}
.mr-options-status {
font-size: var(--mr-font-md);
color: var(--mr-text-muted);
text-align: left;
}
.mr-options-status.is-dirty {
color: #ffd48a;
}
.mr-options-status.is-saved {
color: var(--mr-accent-hover);
}
@media (max-width: 980px) {
.mr-options-shell {
grid-template-columns: 1fr;
border-radius: var(--mr-radius-3xl);
}
.mr-options-sidebar {
border-right: none;
border-bottom: 1px solid var(--mr-border);
height: auto;
}
}
@media (max-width: 900px) {
.mr-options-main {
padding: var(--mr-spacing-16) 18px 0px 18px;
}
.mr-options-input-row {
grid-template-columns: minmax(120px, 1fr) minmax(0, 1fr) 42px;
gap: var(--mr-spacing-8);
}
.mr-options-number-row {
grid-template-columns: minmax(120px, 1fr) minmax(64px, 96px);
gap: var(--mr-spacing-8);
}
.mr-options-path-mode-row {
grid-template-columns: minmax(120px, 1fr) minmax(220px, 260px);
}
.mr-options-wide-row {
grid-template-columns: minmax(120px, 180px) minmax(220px, 1fr);
}
.mr-options-toggle-row {
gap: var(--mr-spacing-10);
}
.mr-options-metadata-build-summary,
.mr-options-metadata-size-summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
background: rgba(255, 255, 255, 0.09);
}
.mr-options-metadata-build-summary {
background: transparent;
}
}
@media (max-width: 760px) {
.mr-options-input-row {
grid-template-columns: 1fr;
}
.mr-options-input-row>.mr-options-label {
padding-right: 0;
}
.mr-options-visibility-btn {
justify-self: start;
}
.mr-options-toggle-row,
.mr-options-number-row {
grid-template-columns: 1fr;
flex-direction: column;
align-items: flex-start;
}
.mr-options-toggle-control {
min-width: 0;
margin-left: 0;
}
.mr-options-number-row {
grid-template-columns: 1fr;
}
.mr-options-metadata-build-summary,
.mr-options-metadata-size-summary {
grid-template-columns: 1fr;
}
.mr-options-metadata-build-summary {
padding: 0;
}
.mr-options-metadata-size-summary {
padding: var(--mr-spacing-8);
}
.mr-options-metadata-build-summary .mr-options-db-row,
.mr-options-metadata-size-summary .mr-options-db-row {
min-height: 56px;
padding: var(--mr-spacing-6);
}
}
@media (max-width: 640px) {
.mr-options-section-head,
.mr-options-actions,
.mr-options-toggle-row,
.mr-options-number-row {
grid-template-columns: 1fr;
flex-direction: column;
align-items: flex-start;
}
.mr-options-toggle-control {
min-width: 0;
}
.mr-options-number-row {
grid-template-columns: 1fr;
}
.mr-options-input {
width: 100%;
}
}
.mr-download-target {
margin-top: 0;
padding-top: var(--mr-spacing-10);
border-top: 1px solid var(--mr-missing-control-bg-hover);
display: grid;
gap: var(--mr-spacing-8);
}
.mr-missing-browser .mr-download-target {
border-top-color: var(--mr-missing-line, rgba(255, 255, 255, 0.075));
}
.mr-download-target-grid {
display: grid;
grid-template-columns: minmax(120px, 33%) minmax(0, 1fr) auto;
grid-template-areas:
"folder-label subfolder-label suggest-label"
"folder-control subfolder-control suggest-control";
gap: var(--mr-spacing-8) var(--mr-spacing-10);
align-items: start;
}
.mr-download-target-row {
display: grid;
gap: var(--mr-spacing-6);
}
@media (max-width: 720px) {
.mr-download-target-grid {
grid-template-columns: 1fr;
grid-template-areas:
"folder-label"
"folder-control"
"subfolder-label"
"subfolder-control"
"suggest-label"
"suggest-control";
}
}
.mr-download-target-label {
display: flex;
align-items: flex-end;
font-size: var(--mr-font-sm);
font-weight: 700;
color: var(--mr-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1.2;
}
.mr-download-target-label .mr-download-folder-help,
.mr-download-target-label .mr-download-subfolder-help {
width: 14px;
height: 14px;
margin-left: var(--mr-spacing-3);
font-size: var(--mr-font-xs);
line-height: 1;
transform: translateY(-1px);
}
.mr-download-target-label-folder {
grid-area: folder-label;
}
.mr-download-target-label-subfolder {
grid-area: subfolder-label;
}
.mr-download-target-label-suggest {
grid-area: suggest-label;
justify-content: center;
}
.mr-download-target-folder-wrap {
grid-area: folder-control;
}
.mr-download-target-subfolder-wrap {
grid-area: subfolder-control;
}
.mr-download-target-input,
.mr-download-target-select {
display: block;
width: 100%;
height: var(--mr-download-control-height, 36px);
min-height: var(--mr-download-control-height, 36px);
margin: 0;
padding: 0 var(--mr-spacing-10);
background: rgba(255, 255, 255, 0.04);
color: var(--mr-text);
border: 1px solid var(--mr-border);
border-radius: var(--mr-radius-xl);
font-size: var(--mr-font-md);
line-height: 1;
outline: none;
box-sizing: border-box;
}
.mr-missing-browser .mr-download-target-input,
.mr-missing-browser .mr-download-target-select {
background: var(--mr-missing-control-bg);
border-color: var(--mr-missing-line-strong, rgba(255, 255, 255, 0.12));
border-radius: var(--mr-missing-control-radius, 7px);
}
.mr-download-target-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
}
.mr-search-source-select {
cursor: pointer;
}
.mr-download-target-input:focus,
.mr-download-target-select:focus {
border-color: rgba(114, 211, 138, 0.4);
box-shadow: var(--mr-shadow-focus-ring);
}
.mr-download-target-wrap {
position: relative;
display: flex;
align-items: stretch;
min-width: 0;
width: 100%;
}
.mr-download-subfolder-control {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--mr-spacing-6);
width: 100%;
min-width: 0;
}
.mr-download-suggest-btn,
#model-resolver-modal .mr-download-suggest-btn {
grid-area: suggest-control;
justify-self: center;
width: var(--mr-download-control-height, 36px);
min-width: var(--mr-download-control-height, 36px);
height: var(--mr-download-control-height, 36px);
min-height: var(--mr-download-control-height, 36px);
padding: 0;
border-radius: var(--mr-missing-control-radius, 7px);
font-size: var(--mr-font-sm);
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.mr-download-suggest-icon {
width: 16px;
height: 16px;
flex: none;
}
.mr-download-suggest-btn.mr-is-suggesting,
.mr-download-suggest-btn.mr-is-suggesting:hover,
.mr-download-suggest-btn.mr-is-suggesting:focus,
#model-resolver-modal .mr-download-suggest-btn.mr-is-suggesting,
#model-resolver-modal .mr-download-suggest-btn.mr-is-suggesting:hover,
#model-resolver-modal .mr-download-suggest-btn.mr-is-suggesting:focus {
color: #ffd84d !important;
}
.mr-download-suggest-btn.mr-is-suggesting:disabled,
#model-resolver-modal .mr-download-suggest-btn.mr-is-suggesting:disabled {
opacity: 1;
}
.mr-download-suggest-btn.mr-is-suggesting .mr-download-suggest-icon,
#model-resolver-modal .mr-download-suggest-btn.mr-is-suggesting .mr-download-suggest-icon {
color: #ffd84d;
stroke: #ffd84d;
animation: mr-suggest-lightbulb-flash 650ms ease-out;
transform-origin: 50% 58%;
}
@media (max-width: 720px) {
.mr-download-target-label {
min-height: 0;
}
}
.mr-download-target-list {
box-sizing: border-box;
position: absolute;
top: calc(100% + 4px);
left: 0;
right: auto;
width: 100%;
min-width: 100%;
max-height: 220px;
overflow-x: hidden;
overflow-y: auto;
display: none;
z-index: var(--mr-z-notification);
background: linear-gradient(180deg, var(--mr-panel-bg-strong) 0%, var(--mr-card-bg) 100%);
border: 1px solid var(--mr-border-strong);
border-radius: var(--mr-radius-2xl);
box-shadow: var(--mr-shadow-elevated);
}
.mr-missing-browser .mr-download-target-list {
background: #1b1b1b;
border-color: var(--mr-missing-line-strong, rgba(255, 255, 255, 0.12));
border-radius: var(--mr-missing-radius, 7px);
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
}
.mr-download-target-list.mr-download-target-floating {
position: fixed;
top: auto;
left: auto;
right: auto;
z-index: var(--mr-z-context-menu);
}
.mr-download-target-option {
box-sizing: border-box;
max-width: 100%;
padding: var(--mr-spacing-8) var(--mr-spacing-10);
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
color: var(--mr-text);
font-size: var(--mr-font-md);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mr-download-target-option:last-child {
border-bottom: none;
}
.mr-download-target-option:hover,
.mr-download-target-option.is-highlighted {
background: rgba(114, 211, 138, 0.12);
}
.mr-download-target-list.mr-download-folder-browser {
box-sizing: border-box;
right: auto;
width: min(560px, calc(100vw - 48px));
min-width: 100%;
max-height: none;
overflow: hidden;
padding: 0;
}
.mr-folder-browser-preview-label,
.mr-folder-browser-root-path,
.mr-folder-browser-count,
.mr-folder-browser-root-count {
color: var(--mr-text-muted);
font-size: var(--mr-font-xs);
line-height: 1.3;
}
.mr-folder-browser-preview {
display: grid;
gap: var(--mr-spacing-3);
padding: 9px var(--mr-spacing-12);
border-bottom: 1px solid var(--mr-missing-control-bg-hover);
}
.mr-folder-browser-preview-path {
color: var(--mr-text);
font-size: var(--mr-font-sm);
line-height: 1.35;
word-break: break-all;
}
.mr-folder-browser-scroll {
box-sizing: border-box;
overflow: auto;
padding: var(--mr-spacing-6);
}
.mr-folder-browser-root {
border: 1px solid rgba(255, 255, 255, 0.065);
border-radius: var(--mr-radius-xl);
background: rgba(255, 255, 255, 0.018);
}
.mr-folder-browser-root+.mr-folder-browser-root {
margin-top: var(--mr-spacing-6);
}
.mr-folder-browser-root-head {
width: 100%;
border: 0;
color: var(--mr-text);
background: transparent;
text-align: left;
cursor: pointer;
}
.mr-folder-browser-root-head {
display: flex;
align-items: center;
gap: var(--mr-spacing-7);
min-height: var(--mr-button-height-md);
padding: var(--mr-spacing-6) var(--mr-spacing-8);
}
.mr-folder-browser-root-head:hover,
.mr-folder-browser-row:hover {
background: rgba(114, 211, 138, 0.095);
}
.mr-folder-browser-root-title {
min-width: 0;
flex: 1;
font-size: var(--mr-font-sm);
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mr-folder-browser-root-path {
padding: 0 var(--mr-spacing-10) var(--mr-spacing-7) 31px;
word-break: break-all;
}
.mr-folder-browser-tree,
.mr-folder-browser-children {
display: none;
}
.mr-folder-browser-tree.is-expanded,
.mr-folder-browser-children.is-expanded {
display: block;
}
.mr-folder-browser-tree {
padding: var(--mr-spacing-2) var(--mr-spacing-4) var(--mr-spacing-6);
}
.mr-folder-browser-children {
margin-left: var(--mr-spacing-20);
}
.mr-folder-browser-row {
display: flex;
align-items: center;
gap: var(--mr-spacing-6);
min-height: 28px;
padding: var(--mr-spacing-4) var(--mr-spacing-7);
border-radius: var(--mr-radius-lg);
cursor: pointer;
color: var(--mr-text);
}
.mr-folder-browser-row.is-selected {
background: rgba(114, 211, 138, 0.15);
box-shadow: inset 0 0 0 1px rgba(114, 211, 138, 0.32);
}
.mr-folder-browser-toggle {
box-sizing: border-box;
width: 18px;
height: 18px;
min-width: 18px;
padding: 0;
border: 0;
border-radius: var(--mr-radius-md);
background: transparent;
color: var(--mr-text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.mr-folder-browser-row.is-expandable .mr-folder-browser-toggle {
width: 29px;
min-width: 29px;
margin-left: -7px;
margin-right: -4px;
padding-left: var(--mr-spacing-7);
}
.mr-folder-browser-toggle:hover {
background: var(--mr-missing-control-bg-hover);
color: var(--mr-text);
}
.mr-folder-browser-toggle-empty {
pointer-events: none;
opacity: 0;
}
.mr-folder-browser-chevron {
width: 0;
height: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 5px solid currentColor;
transition: var(--mr-transition-transform);
}
.mr-folder-browser-toggle.is-expanded .mr-folder-browser-chevron,
.mr-folder-browser-root-head.is-expanded .mr-folder-browser-chevron {
transform: rotate(90deg);
}
.mr-folder-browser-folder-icon {
width: 16px;
height: 16px;
min-width: 16px;
color: rgba(114, 211, 138, 0.95);
display: inline-flex;
align-items: center;
justify-content: center;
}
.mr-folder-browser-svg {
width: 15px;
height: 15px;
}
.mr-folder-browser-name {
min-width: 0;
flex: 1;
color: var(--mr-text);
font-size: var(--mr-font-sm);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mr-folder-browser-count,
.mr-folder-browser-root-count {
padding: var(--mr-spacing-2) var(--mr-spacing-6);
border-radius: var(--mr-missing-chip-radius);
background: rgba(255, 255, 255, 0.045);
}
.mr-folder-browser-empty {
display: grid;
gap: var(--mr-spacing-6);
padding: var(--mr-spacing-24) var(--mr-spacing-12);
color: var(--mr-text-muted);
text-align: center;
font-size: var(--mr-font-sm);
}
.mr-folder-browser-empty-path {
justify-self: center;
max-width: 100%;
padding: var(--mr-spacing-5) var(--mr-spacing-7);
border-radius: var(--mr-radius-lg);
background: rgba(114, 211, 138, 0.08);
color: var(--mr-text);
font-family: var(--mr-font-family-mono);
font-size: var(--mr-font-xs);
overflow-wrap: anywhere;
word-break: break-word;
}
@media (max-width: 720px) {
.mr-download-target-list.mr-download-folder-browser {
width: min(100%, calc(100vw - 32px));
}
}
/* Missing detail panel polish */
#model-resolver-modal .mr-missing-detail-pane {
background: var(--mr-missing-bg);
}
#model-resolver-modal .mr-missing-detail-pane .mr-card {
padding: var(--mr-spacing-20) 0;
}
#model-resolver-modal .mr-missing-detail-pane .mr-card-header {
margin-bottom: var(--mr-spacing-12);
}
#model-resolver-modal .mr-missing-detail-pane .mr-card-title {
font-size: var(--mr-font-xl);
font-weight: 750;
}
#model-resolver-modal .mr-missing-detail-pane .mr-node-chip,
#model-resolver-modal .mr-missing-detail-pane .mr-category-chip {
min-height: var(--mr-missing-chip-height, 20px);
padding: var(--mr-spacing-2) var(--mr-spacing-8);
font-size: var(--mr-font-xs);
}
#model-resolver-modal .mr-missing-detail-pane .mr-node-chip,
#model-resolver-modal .mr-missing-detail-pane .mr-category-chip:not(.mr-type-chip) {
background: var(--mr-missing-chip-bg, rgba(255, 255, 255, 0.045));
border-color: var(--mr-missing-chip-border, rgba(255, 255, 255, 0.08));
}
#model-resolver-modal .mr-missing-detail-pane .mr-category-chip.mr-type-chip {
background:
linear-gradient(180deg,
rgba(var(--mr-type-rgb), var(--mr-type-bg-alpha-strong)) 0%,
rgba(var(--mr-type-rgb), var(--mr-type-bg-alpha)) 100%);
border-color: rgba(var(--mr-type-rgb), var(--mr-type-border-alpha));
color: var(--mr-type-text);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.026),
0 0 12px rgba(var(--mr-type-rgb), var(--mr-type-glow-alpha));
}
#model-resolver-modal .mr-missing-detail-pane .mr-column {
padding: var(--mr-spacing-15);
background: transparent;
border-color: transparent;
border-radius: 0;
}
#model-resolver-modal .mr-missing-detail-pane .mr-column-header {
margin-bottom: var(--mr-spacing-12);
padding-bottom: var(--mr-spacing-10);
color: #c3c3c3;
border-bottom-color: rgba(255, 255, 255, 0.075);
font-size: var(--mr-font-lg);
letter-spacing: 0.075em;
}
#model-resolver-modal .mr-missing-detail-pane .mr-match-row {
min-height: 42px;
margin-bottom: var(--mr-spacing-8);
padding: var(--mr-spacing-7) var(--mr-spacing-10);
background: var(--mr-missing-control-bg);
border-color: rgba(255, 255, 255, 0.065);
border-radius: var(--mr-missing-control-radius);
}
@supports (content-visibility: auto) {
#model-resolver-modal .mr-missing-detail-pane .mr-match-row {
content-visibility: auto;
contain-intrinsic-size: auto 42px;
}
#model-resolver-modal .mr-missing-detail-pane .mr-search-results-table-wrap {
content-visibility: auto;
contain-intrinsic-size: auto 220px;
}
}
#model-resolver-modal .mr-missing-detail-pane .mr-match-row.mr-best-match {
background: linear-gradient(90deg, rgba(114, 211, 138, 0.135) 0%, rgba(114, 211, 138, 0.07) 55%, rgba(114, 211, 138, 0.035) 100%);
border-color: rgba(114, 211, 138, 0.26);
}
#model-resolver-modal .mr-missing-detail-pane .mr-match-row:hover {
background: rgba(255, 255, 255, 0.042);
border-color: rgba(255, 255, 255, 0.10);
}
#model-resolver-modal .mr-missing-detail-pane .mr-match-row.mr-best-match:hover {
background: linear-gradient(90deg, rgba(114, 211, 138, 0.15) 0%, rgba(114, 211, 138, 0.08) 55%, rgba(114, 211, 138, 0.04) 100%);
border-color: rgba(114, 211, 138, 0.32);
}
#model-resolver-modal .mr-missing-detail-pane .mr-match-filename {
font-family: var(--mr-font-family-sans);
font-size: var(--mr-font-sm);
font-weight: 650;
color: var(--mr-text-soft);
}
#model-resolver-modal .mr-missing-detail-pane .mr-badge,
#model-resolver-modal .mr-missing-detail-pane .mr-match-status {
min-height: 20px;
padding: var(--mr-spacing-2) var(--mr-spacing-7);
border-radius: var(--mr-radius-lg);
font-size: var(--mr-font-xs);
font-weight: 750;
}
#model-resolver-modal .mr-missing-detail-pane .mr-local-link-btn,
#model-resolver-modal .mr-missing-detail-pane .mr-combo-refresh-btn,
#model-resolver-modal .mr-missing-detail-pane .mr-local-matches-refresh-btn,
#model-resolver-modal .mr-missing-detail-pane .mr-search-result-action-btn,
#model-resolver-modal .mr-missing-detail-pane .mr-download-section .mr-search-button-picker>.mr-btn {
background: var(--mr-missing-control-bg, rgba(255, 255, 255, 0.035));
border: 1px solid var(--mr-missing-control-border, rgba(255, 255, 255, 0.105));
border-radius: var(--mr-missing-control-radius, 7px);
box-shadow: var(--mr-missing-control-shadow, none);
color: var(--mr-text);
transition: var(--mr-missing-control-transition, background 0.15s ease, border-color 0.15s ease, color 0.15s ease);
}
#model-resolver-modal .mr-missing-detail-pane .mr-local-link-btn:hover:not(:disabled),
#model-resolver-modal .mr-missing-detail-pane .mr-combo-refresh-btn:hover:not(:disabled),
#model-resolver-modal .mr-missing-detail-pane .mr-local-matches-refresh-btn:hover:not(:disabled),
#model-resolver-modal .mr-missing-detail-pane .mr-search-result-action-btn:hover:not(:disabled),
#model-resolver-modal .mr-missing-detail-pane .mr-download-section .mr-search-button-picker>.mr-btn:hover:not(:disabled) {
background: var(--mr-missing-control-bg-hover, rgba(255, 255, 255, 0.06));
border-color: var(--mr-missing-control-border-hover, rgba(255, 255, 255, 0.17));
color: var(--mr-text);
transform: none;
}
#model-resolver-modal .mr-missing-detail-pane .mr-local-link-btn:focus-visible,
#model-resolver-modal .mr-missing-detail-pane .mr-combo-refresh-btn:focus-visible,
#model-resolver-modal .mr-missing-detail-pane .mr-local-matches-refresh-btn:focus-visible,
#model-resolver-modal .mr-missing-detail-pane .mr-search-result-action-btn:focus-visible,
#model-resolver-modal .mr-missing-detail-pane .mr-download-section .mr-search-button-picker>.mr-btn:focus-visible {
outline: none;
border-color: var(--mr-missing-control-focus-border, rgba(114, 211, 138, 0.30));
box-shadow: 0 0 0 2px var(--mr-missing-control-focus-ring, rgba(114, 211, 138, 0.08)) !important;
}
#model-resolver-modal .mr-missing-detail-pane .mr-local-link-btn {
width: var(--mr-missing-icon-button-size, 28px);
min-width: var(--mr-missing-icon-button-size, 28px);
max-width: var(--mr-missing-icon-button-size, 28px);
height: var(--mr-missing-icon-button-size, 28px);
min-height: var(--mr-missing-icon-button-size, 28px);
flex: 0 0 var(--mr-missing-icon-button-size, 28px);
padding: 0;
}
#model-resolver-modal .mr-missing-detail-pane .mr-local-link-btn>svg {
display: block !important;
width: var(--mr-missing-icon-size, 13px) !important;
height: var(--mr-missing-icon-size, 13px) !important;
flex: 0 0 var(--mr-missing-icon-size, 13px);
pointer-events: none;
}
#model-resolver-modal .mr-missing-detail-pane .mr-local-alternatives-toggle {
min-height: 28px;
margin: var(--mr-spacing-6) 0;
padding: 0 var(--mr-spacing-8);
background: rgba(255, 255, 255, 0.027);
border: 1px solid rgba(255, 255, 255, 0.065) !important;
border-radius: var(--mr-missing-control-radius);
box-shadow: none !important;
}
#model-resolver-modal .mr-missing-detail-pane .mr-local-alternatives-toggle:hover,
#model-resolver-modal .mr-missing-detail-pane .mr-local-alternatives-toggle:focus,
#model-resolver-modal .mr-missing-detail-pane .mr-local-alternatives-toggle:focus-visible {
background: rgba(255, 255, 255, 0.038);
border-color: rgba(255, 255, 255, 0.095) !important;
box-shadow: none !important;
}
#model-resolver-modal .mr-missing-detail-pane .mr-combo-section {
margin-top: var(--mr-spacing-10);
padding-top: var(--mr-spacing-10);
border-top-color: rgba(255, 255, 255, 0.07);
}
#model-resolver-modal .mr-missing-detail-pane .mr-combo-row {
align-items: stretch;
}
#model-resolver-modal .mr-missing-detail-pane .mr-combo-label {
display: flex;
align-items: center;
}
#model-resolver-modal .mr-missing-detail-pane .mr-combo-input,
#model-resolver-modal .mr-missing-detail-pane .mr-search-source-select,
#model-resolver-modal .mr-missing-detail-pane .mr-search-base-select,
#model-resolver-modal .mr-missing-detail-pane .mr-download-target-input,
#model-resolver-modal .mr-missing-detail-pane .mr-download-target-select {
box-sizing: border-box;
min-height: var(--mr-missing-field-height, 38px);
height: var(--mr-missing-field-height, 38px);
margin-block: 0;
background: var(--mr-missing-control-bg, rgba(255, 255, 255, 0.035));
border-color: var(--mr-missing-control-border, rgba(255, 255, 255, 0.10));
border-radius: var(--mr-missing-control-radius, 7px);
box-shadow: none;
font-size: var(--mr-font-base);
}
#model-resolver-modal .mr-missing-detail-pane .mr-combo-input:focus,
#model-resolver-modal .mr-missing-detail-pane .mr-search-source-select:focus,
#model-resolver-modal .mr-missing-detail-pane .mr-search-base-select:focus,
#model-resolver-modal .mr-missing-detail-pane .mr-download-target-input:focus,
#model-resolver-modal .mr-missing-detail-pane .mr-download-target-select:focus {
background: var(--mr-missing-control-bg-hover, rgba(255, 255, 255, 0.045));
border-color: var(--mr-missing-control-focus-border, rgba(114, 211, 138, 0.34));
box-shadow: 0 0 0 2px var(--mr-missing-control-focus-ring, rgba(114, 211, 138, 0.08));
}
#model-resolver-modal .mr-missing-detail-pane .mr-combo-refresh-btn {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
align-self: stretch;
flex: 0 0 var(--mr-missing-field-height, 38px);
width: var(--mr-missing-field-height, 38px);
min-width: var(--mr-missing-field-height, 38px);
height: auto;
min-height: 0;
margin: 0;
padding: 0;
aspect-ratio: auto;
font-size: 0;
line-height: 1;
overflow: hidden;
}
#model-resolver-modal .mr-missing-detail-pane .mr-combo-refresh-icon {
width: var(--mr-missing-icon-size, 13px);
height: var(--mr-missing-icon-size, 13px);
display: block;
}
#model-resolver-modal .mr-missing-detail-pane .mr-download-section {
--mr-download-control-height: var(--mr-missing-field-height, 38px);
padding: 0;
background: transparent;
border-color: transparent;
border-radius: 0;
}
#model-resolver-modal .mr-missing-detail-pane .mr-download-section .mr-search-button-picker>.mr-btn,
#model-resolver-modal .mr-missing-detail-pane .mr-download-section .mr-custom-url-button-picker>.mr-btn {
--mr-missing-search-button-height: var(--mr-missing-field-height, 38px);
width: 82px;
min-width: 82px;
min-height: var(--mr-missing-search-button-height);
height: var(--mr-missing-search-button-height);
padding: 0 var(--mr-spacing-10);
font-size: var(--mr-font-md);
font-weight: 700;
justify-content: center;
gap: var(--mr-spacing-8);
}
#model-resolver-modal .mr-missing-detail-pane .mr-download-section .mr-search-button-picker>.mr-btn .mr-btn-icon,
#model-resolver-modal .mr-missing-detail-pane .mr-download-section .mr-custom-url-button-picker>.mr-btn .mr-btn-icon {
position: static;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 var(--mr-missing-icon-size, 13px);
width: var(--mr-missing-icon-size, 13px);
height: var(--mr-missing-icon-size, 13px);
font-size: var(--mr-missing-icon-size, 13px);
}
#model-resolver-modal .mr-missing-detail-pane .mr-download-section .mr-search-button-picker>.mr-btn .mr-btn-icon svg,
#model-resolver-modal .mr-missing-detail-pane .mr-download-section .mr-custom-url-button-picker>.mr-btn .mr-btn-icon svg {
width: var(--mr-missing-icon-size, 13px);
height: var(--mr-missing-icon-size, 13px);
display: block;
}
#model-resolver-modal .mr-missing-detail-pane .mr-download-target {
padding-top: var(--mr-spacing-12);
border-top-color: rgba(255, 255, 255, 0.07);
}
#model-resolver-modal .mr-missing-detail-pane .mr-download-target-grid {
gap: var(--mr-spacing-10) var(--mr-spacing-12);
}
#model-resolver-modal .mr-missing-detail-pane .model-resolver-selected {
margin: 0 0 var(--mr-spacing-12);
padding: 0;
width: 100%;
height: 70px;
min-height: 70px;
max-height: 70px;
box-sizing: border-box;
overflow: hidden;
border: 0;
border-radius: 0;
color: var(--mr-text-soft);
font-size: var(--mr-font-md);
}
/* Flatten right-side sections */
#model-resolver-modal .mr-missing-detail-pane .mr-columns {
gap: 0;
}
#model-resolver-modal .mr-missing-detail-pane .mr-column+.mr-column {
position: relative;
margin-top: var(--mr-spacing-8);
padding-top: var(--mr-spacing-20);
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
#model-resolver-modal .mr-missing-detail-pane .mr-column+.mr-column::before {
content: "";
position: absolute;
top: -2px;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, rgba(114, 211, 138, 0.28), var(--mr-border) 34%, transparent 100%);
}
#model-resolver-modal .mr-missing-detail-pane .mr-column-header {
background: transparent;
}
#model-resolver-modal .mr-missing-detail-pane [id^="local-matches-body-"] {
background: rgba(255, 255, 255, 0.014);
border-color: var(--mr-missing-control-bg-hover);
}
#model-resolver-modal .mr-missing-detail-pane .mr-download-section .mr-status-inline {
margin-bottom: var(--mr-spacing-10);
}
#model-resolver-modal .mr-missing-detail-pane .mr-download-section .mr-search-source-bar,
#model-resolver-modal .mr-missing-detail-pane .mr-download-target {
padding: 0;
}
#model-resolver-modal .mr-missing-detail-pane .mr-download-section .mr-search-source-bar {
padding-bottom: 0;
border-bottom: 0;
}
#model-resolver-modal .mr-missing-detail-pane .mr-download-section .mr-custom-url-bar {
padding-bottom: var(--mr-spacing-12);
border-bottom: 1px solid rgba(255, 255, 255, 0.065);
}
#model-resolver-modal .mr-missing-detail-pane .mr-download-target {
padding-top: var(--mr-spacing-12);
border-top: 0;
}
#model-resolver-modal .mr-missing-detail-pane .mr-selected-bar-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
width: 100%;
height: 100%;
min-height: 0;
box-sizing: border-box;
padding: 9px var(--mr-spacing-12);
gap: var(--mr-spacing-15);
}
#model-resolver-modal .mr-missing-detail-pane .mr-selected-summary {
display: flex;
flex-direction: column;
align-items: flex-start;
align-self: center;
min-width: 0;
gap: var(--mr-spacing-4);
}
#model-resolver-modal .mr-missing-detail-pane .mr-selected-label {
display: inline-flex;
align-items: center;
gap: var(--mr-spacing-7);
color: #72d38a;
font-size: var(--mr-font-md);
font-weight: 650;
line-height: 1;
white-space: nowrap;
}
#model-resolver-modal .mr-missing-detail-pane .mr-selected-status-icon {
display: inline-flex;
width: 17px;
height: 17px;
color: var(--mr-badge-success-text);
}
#model-resolver-modal .mr-missing-detail-pane .mr-selected-status-icon svg {
width: 100%;
height: 100%;
}
#model-resolver-modal .mr-missing-detail-pane .mr-selected-code {
display: block;
width: 100%;
min-width: 0;
padding: 0;
overflow: hidden;
background: transparent;
color: var(--mr-text);
font-family: var(--mr-font-family-sans);
font-size: var(--mr-font-lg);
font-weight: 700;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
#model-resolver-modal .mr-missing-detail-pane .mr-selected-actions {
display: inline-flex;
align-items: center;
align-self: center;
gap: var(--mr-spacing-10);
margin-left: 0;
}
#model-resolver-modal .mr-missing-detail-pane .model-resolver-selected .mr-btn {
min-height: 40px;
height: 40px;
padding: 0 var(--mr-spacing-16);
margin-left: 0;
background: var(--mr-missing-control-bg, rgba(255, 255, 255, 0.035));
border-color: var(--mr-missing-control-border, rgba(255, 255, 255, 0.105));
border-radius: var(--mr-missing-control-radius, 7px);
color: var(--mr-text);
box-shadow: var(--mr-missing-control-shadow, none) !important;
font-size: var(--mr-font-md);
font-weight: 700;
}
#model-resolver-modal .mr-missing-detail-pane .model-resolver-selected .mr-btn:hover:not(:disabled) {
background: var(--mr-missing-control-bg-hover, rgba(255, 255, 255, 0.06));
border-color: var(--mr-missing-control-border-hover, rgba(255, 255, 255, 0.17));
color: var(--mr-text);
}
#model-resolver-modal .mr-missing-detail-pane .model-resolver-selected .mr-btn-primary {
background: var(--mr-gradient-blue-primary);
border-color: rgba(88, 151, 255, 0.46);
color: #edf5ff;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.11),
0 4px 12px rgba(16, 72, 156, 0.18) !important;
}
#model-resolver-modal .mr-missing-detail-pane .model-resolver-selected .mr-btn-primary:hover:not(:disabled) {
background: var(--mr-gradient-blue-hover);
border-color: rgba(111, 170, 255, 0.62);
color: var(--mr-color-white);
}
#model-resolver-modal .mr-missing-detail-pane .model-resolver-selected .mr-btn-danger {
background: var(--mr-badge-error-bg);
border-color: var(--mr-badge-error-border);
color: #fee2e2;
}
#model-resolver-modal .mr-missing-detail-pane .model-resolver-selected .mr-btn-danger:hover:not(:disabled) {
background: rgba(239, 68, 68, 0.24);
border-color: rgba(239, 68, 68, 0.48);
color: var(--mr-color-white);
}
#model-resolver-modal .mr-missing-detail-pane .mr-search-progress-list-compact {
gap: var(--mr-spacing-7);
margin: var(--mr-spacing-10) 0 var(--mr-spacing-8);
padding-bottom: var(--mr-spacing-1);
}
#model-resolver-modal .mr-missing-detail-pane .mr-search-progress-list-compact .mr-search-progress-item {
min-height: 24px;
padding: var(--mr-spacing-3) 9px;
background: rgba(255, 255, 255, 0.028);
border-color: rgba(255, 255, 255, 0.07);
border-radius: var(--mr-missing-chip-radius);
}
#model-resolver-modal .mr-missing-detail-pane .mr-search-progress-list-compact .mr-search-progress-source {
font-size: var(--mr-font-xs);
font-weight: 750;
}
#model-resolver-modal .mr-missing-detail-pane .mr-search-progress-list-compact .mr-search-progress-status {
font-size: var(--mr-font-xs);
}
#model-resolver-modal .mr-missing-detail-pane .mr-search-results-table-wrap {
margin-top: var(--mr-spacing-8);
background: rgba(255, 255, 255, 0.018);
border-color: rgba(255, 255, 255, 0.065);
border-radius: var(--mr-missing-control-radius);
box-shadow: none;
}
#model-resolver-modal .mr-missing-detail-pane .mr-search-results-table {
font-size: var(--mr-font-sm);
}
#model-resolver-modal .mr-missing-detail-pane .mr-search-results-table th {
padding: 9px var(--mr-spacing-10);
background: rgba(255, 255, 255, 0.04);
color: var(--mr-text-muted);
font-size: var(--mr-font-xs);
letter-spacing: 0.02em;
}
#model-resolver-modal .mr-missing-detail-pane .mr-search-results-table td {
padding: 9px var(--mr-spacing-10);
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}
#model-resolver-modal .mr-missing-detail-pane .mr-search-results-table tr:hover td {
background: rgba(255, 255, 255, 0.016);
}
#model-resolver-modal .mr-missing-detail-pane .mr-search-results-table tr.mr-search-result-hash-highlight td,
#model-resolver-modal .mr-missing-detail-pane .mr-search-results-table tr.mr-search-result-hash-highlight:hover td {
background: rgba(114, 211, 138, 0.12);
border-bottom-color: rgba(114, 211, 138, 0.36);
box-shadow:
inset 0 2px 0 rgba(114, 211, 138, 0.76),
inset 0 -2px 0 rgba(114, 211, 138, 0.76);
}
#model-resolver-modal .mr-missing-detail-pane .mr-search-results-table tr.mr-search-result-hash-highlight td:first-child,
#model-resolver-modal .mr-missing-detail-pane .mr-search-results-table tr.mr-search-result-hash-highlight:hover td:first-child {
box-shadow:
inset 2px 0 0 rgba(114, 211, 138, 0.76),
inset 0 2px 0 rgba(114, 211, 138, 0.76),
inset 0 -2px 0 rgba(114, 211, 138, 0.76);
}
#model-resolver-modal .mr-missing-detail-pane .mr-search-results-table tr.mr-search-result-hash-highlight td:last-child,
#model-resolver-modal .mr-missing-detail-pane .mr-search-results-table tr.mr-search-result-hash-highlight:hover td:last-child {
box-shadow:
inset -2px 0 0 rgba(114, 211, 138, 0.76),
inset 0 2px 0 rgba(114, 211, 138, 0.76),
inset 0 -2px 0 rgba(114, 211, 138, 0.76);
}
#model-resolver-modal .mr-missing-detail-pane .mr-search-source-pill {
min-height: 21px;
padding: var(--mr-spacing-2) var(--mr-spacing-8);
background: rgba(255, 255, 255, 0.055);
border-color: var(--mr-border);
border-radius: var(--mr-missing-chip-radius);
font-size: var(--mr-font-xs);
}
#model-resolver-modal .mr-missing-detail-pane .mr-search-result-model span {
font-size: var(--mr-font-md);
font-weight: 700;
}
#model-resolver-modal .mr-missing-detail-pane .mr-search-result-model small,
#model-resolver-modal .mr-missing-detail-pane .mr-search-size {
font-size: var(--mr-font-xs);
color: #a9a9a9;
}
#model-resolver-modal .mr-missing-detail-pane .mr-search-result-action-btn {
width: var(--mr-missing-icon-button-size, 28px);
height: var(--mr-missing-icon-button-size, 28px);
min-width: var(--mr-missing-icon-button-size, 28px);
min-height: var(--mr-missing-icon-button-size, 28px);
max-width: var(--mr-missing-icon-button-size, 28px);
}
#model-resolver-modal #queue-toggle-icon {
right: 0;
min-width: 12px;
width: 12px;
height: 76px;
padding: 0;
color: #cfcfcf;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
#model-resolver-modal #queue-toggle-icon:hover {
background: transparent;
}
#model-resolver-modal #model-resolver-content,
#model-resolver-modal .mr-missing-detail-pane,
#model-resolver-modal .mr-missing-list,
#model-resolver-modal .mr-search-results-table-wrap {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.20) transparent;
}
#model-resolver-modal #model-resolver-content::-webkit-scrollbar,
#model-resolver-modal .mr-missing-detail-pane::-webkit-scrollbar,
#model-resolver-modal .mr-missing-list::-webkit-scrollbar,
#model-resolver-modal .mr-search-results-table-wrap::-webkit-scrollbar {
width: 8px;
height: 8px;
}
#model-resolver-modal #model-resolver-content::-webkit-scrollbar-track,
#model-resolver-modal .mr-missing-detail-pane::-webkit-scrollbar-track,
#model-resolver-modal .mr-missing-list::-webkit-scrollbar-track,
#model-resolver-modal .mr-search-results-table-wrap::-webkit-scrollbar-track {
background: transparent;
}
#model-resolver-modal #model-resolver-content::-webkit-scrollbar-thumb,
#model-resolver-modal .mr-missing-detail-pane::-webkit-scrollbar-thumb,
#model-resolver-modal .mr-missing-list::-webkit-scrollbar-thumb,
#model-resolver-modal .mr-search-results-table-wrap::-webkit-scrollbar-thumb {
background: var(--mr-missing-chip-border-hover);
border: 2px solid transparent;
border-radius: var(--mr-missing-chip-radius);
background-clip: content-box;
}
#model-resolver-modal #model-resolver-content::-webkit-scrollbar-thumb:hover,
#model-resolver-modal .mr-missing-detail-pane::-webkit-scrollbar-thumb:hover,
#model-resolver-modal .mr-missing-list::-webkit-scrollbar-thumb:hover,
#model-resolver-modal .mr-search-results-table-wrap::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.28);
background-clip: content-box;
}
/* Local matches as one compact table-like list */
#model-resolver-modal .mr-missing-detail-pane [id^="local-matches-body-"] {
overflow: hidden;
background: rgba(255, 255, 255, 0.018);
border: 1px solid rgba(255, 255, 255, 0.075);
border-radius: var(--mr-missing-control-radius);
}
#model-resolver-modal .mr-missing-detail-pane [id^="local-matches-body-"] .mr-match-row {
min-height: 42px;
margin: 0;
padding: var(--mr-spacing-8) var(--mr-spacing-10);
background: rgba(255, 255, 255, 0.018);
border: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.058);
border-radius: 0;
}
#model-resolver-modal .mr-missing-detail-pane [id^="local-matches-body-"] .mr-match-row:hover {
background: rgba(255, 255, 255, 0.034);
border-bottom-color: rgba(255, 255, 255, 0.07);
}
#model-resolver-modal .mr-missing-detail-pane [id^="local-matches-body-"] .mr-match-row.mr-best-match {
background: linear-gradient(90deg, rgba(114, 211, 138, 0.13) 0%, rgba(114, 211, 138, 0.065) 58%, rgba(114, 211, 138, 0.025) 100%);
border-bottom-color: rgba(114, 211, 138, 0.20);
}
#model-resolver-modal .mr-missing-detail-pane [id^="local-matches-body-"] .mr-match-row.mr-best-match:hover {
background: linear-gradient(90deg, rgba(114, 211, 138, 0.15) 0%, rgba(114, 211, 138, 0.075) 58%, rgba(114, 211, 138, 0.03) 100%);
}
#model-resolver-modal .mr-missing-detail-pane [id^="local-matches-body-"] .mr-match-row.mr-local-match-hash-highlight,
#model-resolver-modal .mr-missing-detail-pane [id^="local-matches-body-"] .mr-match-row.mr-best-match.mr-local-match-hash-highlight,
#model-resolver-modal .mr-missing-detail-pane [id^="local-matches-body-"] .mr-match-row.mr-local-match-hash-highlight:hover,
#model-resolver-modal .mr-missing-detail-pane [id^="local-matches-body-"] .mr-match-row.mr-best-match.mr-local-match-hash-highlight:hover {
position: relative;
z-index: 1;
background: linear-gradient(90deg, rgba(114, 211, 138, 0.17) 0%, rgba(114, 211, 138, 0.095) 58%, rgba(114, 211, 138, 0.04) 100%);
border-bottom-color: rgba(114, 211, 138, 0.36);
box-shadow:
inset 0 0 0 2px rgba(114, 211, 138, 0.78),
0 0 0 1px rgba(114, 211, 138, 0.18);
}
#model-resolver-modal .mr-missing-detail-pane [id^="local-matches-body-"]>.mr-match-row:last-child,
#model-resolver-modal .mr-missing-detail-pane [id^="local-matches-body-"]>.mr-stack-sm:last-child .mr-match-row:last-child {
border-bottom: 0;
}
#model-resolver-modal .mr-missing-detail-pane [id^="local-matches-body-"]>.mr-stack-sm {
display: grid;
gap: 0;
margin: 0;
}
#model-resolver-modal .mr-missing-detail-pane [id^="local-matches-body-"] .mr-local-alternatives-toggle {
min-height: 32px;
margin: 0;
padding: 0 var(--mr-spacing-10);
background: rgba(255, 255, 255, 0.026);
border: 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.058) !important;
border-radius: 0;
}
#model-resolver-modal .mr-missing-detail-pane [id^="local-matches-body-"] .mr-local-alternatives-toggle:hover,
#model-resolver-modal .mr-missing-detail-pane [id^="local-matches-body-"] .mr-local-alternatives-toggle:focus,
#model-resolver-modal .mr-missing-detail-pane [id^="local-matches-body-"] .mr-local-alternatives-toggle:focus-visible {
background: rgba(255, 255, 255, 0.034);
border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}
#model-resolver-modal .mr-missing-detail-pane [id^="local-matches-body-"] .mr-local-alternatives-label {
color: var(--mr-text-muted);
}
.litegraph.litecontextmenu .litemenu-entry.mr-model-resolver-node-menu::before {
margin-right: var(--mr-spacing-6);
}