DemonGatanjieuandClaude Opus 5.5
bbe9d8a8c4
The compact views set the card labels' padding with !important, so the room kept for the versions tab was lost and the pin and title slid under it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
167 lines
6.6 KiB
CSS
167 lines
6.6 KiB
CSS
/* Versions of one model (ui_model_versions.js, ui_civitai_versions.js): a folded model's card (a
|
|
stack, with a tab on its right edge), an open model's cards side by side (one colour, a pin each,
|
|
the tab on the last), the "open all" switch, the details' row of the versions here and the box
|
|
listing the versions on Civitai. */
|
|
|
|
.anomalous-card-version-row { display: flex; align-items: center; gap: 5px; min-width: 0; }
|
|
.anomalous-card-version-row .anomalous-card-version { min-width: 0; }
|
|
|
|
.anomalous-card.is-version-folded {
|
|
box-shadow: 5px -5px 0 -1px var(--amb-bg-card), 5px -5px 0 0 var(--amb-border-strong), 0 4px 14px rgba(0, 0, 0, 0.4);
|
|
}
|
|
.anomalous-card.is-version-folded:hover {
|
|
box-shadow: 5px -5px 0 -1px var(--amb-bg-card), 5px -5px 0 0 var(--amb-border-strong), 0 8px 24px rgba(0, 0, 0, 0.58);
|
|
}
|
|
.anomalous-card.is-version-open { border-color: color-mix(in srgb, var(--amb-accent) 60%, var(--amb-border)); }
|
|
/* On a light page a thin pale orange edge goes unseen: the whole accent, doubled by a ring. */
|
|
html.amb-theme-light .anomalous-card.is-version-open {
|
|
border-color: var(--amb-accent);
|
|
box-shadow: 0 0 0 1px var(--amb-accent), 0 4px 14px rgba(0, 0, 0, 0.4);
|
|
}
|
|
html.amb-theme-light .anomalous-card.is-version-open:hover {
|
|
box-shadow: 0 0 0 1px var(--amb-accent), 0 8px 24px rgba(0, 0, 0, 0.58);
|
|
}
|
|
.anomalous-card.is-version-open::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0 0 auto 0;
|
|
height: 3px;
|
|
background: var(--amb-accent);
|
|
z-index: 6;
|
|
pointer-events: none;
|
|
}
|
|
/* The compact views set the labels' padding with !important: the tab's room has to outrank it. */
|
|
#anomalous-container .anomalous-card.has-versions-tab .anomalous-card-labels { padding-right: 28px !important; }
|
|
|
|
/* The labels over the cover let clicks through to the card; the tab and the pin are their own. */
|
|
.anomalous-card-versions-tab {
|
|
position: absolute;
|
|
top: 42px;
|
|
bottom: 8px;
|
|
right: 0;
|
|
width: 20px;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-right: none;
|
|
border-radius: 7px 0 0 7px;
|
|
background: rgba(16, 16, 18, 0.72);
|
|
backdrop-filter: blur(6px);
|
|
color: var(--amb-text-main);
|
|
font: inherit;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
z-index: 7;
|
|
transition: width 0.2s ease, background 0.2s ease, border-color 0.2s ease;
|
|
}
|
|
.anomalous-card-versions-tab svg { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
|
|
.anomalous-card-versions-tab[aria-expanded="true"] svg { transform: rotate(180deg); }
|
|
.anomalous-card-versions-tab:hover,
|
|
.anomalous-card-versions-tab:focus-visible {
|
|
width: 26px;
|
|
border-color: var(--amb-accent);
|
|
background: color-mix(in srgb, var(--amb-accent) 38%, rgba(16, 16, 18, 0.8));
|
|
}
|
|
.anomalous-card-versions-tab:hover svg { transform: translateX(2px); }
|
|
.anomalous-card-versions-tab[aria-expanded="true"]:hover svg { transform: rotate(180deg) translateX(2px); }
|
|
.anomalous-card-versions-count { font-variant-numeric: tabular-nums; }
|
|
|
|
.anomalous-card-version-pin {
|
|
flex: none;
|
|
width: 20px;
|
|
height: 20px;
|
|
padding: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 50%;
|
|
background: rgba(0, 0, 0, 0.45);
|
|
color: var(--amb-text-muted);
|
|
cursor: pointer;
|
|
pointer-events: auto;
|
|
opacity: 0.55;
|
|
transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease;
|
|
}
|
|
.anomalous-card:hover .anomalous-card-version-pin { opacity: 1; }
|
|
.anomalous-card-version-pin:hover { color: var(--amb-text-main); border-color: var(--amb-accent); }
|
|
.anomalous-card-version-pin[aria-pressed="true"] {
|
|
opacity: 1;
|
|
border-color: var(--amb-accent);
|
|
background: var(--amb-accent);
|
|
color: #fff;
|
|
cursor: default;
|
|
}
|
|
|
|
.anomalous-versions-all { margin-left: auto; }
|
|
.anomalous-versions-all[aria-pressed="true"] { cursor: pointer; }
|
|
|
|
.anomalous-detail-versions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
|
|
.anomalous-detail-versions-label { color: var(--amb-text-muted); font-size: 0.85em; }
|
|
.anomalous-detail-version {
|
|
max-width: 220px;
|
|
padding: 2px 10px;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 999px;
|
|
background: none;
|
|
color: var(--amb-text-main);
|
|
font: inherit;
|
|
font-size: 0.85em;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
cursor: pointer;
|
|
}
|
|
.anomalous-detail-version:hover { border-color: var(--amb-accent); }
|
|
.anomalous-detail-version.is-current { border-color: var(--amb-accent); background: color-mix(in srgb, var(--amb-accent) 16%, transparent); cursor: default; }
|
|
|
|
.anomalous-civitai-versions { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; }
|
|
.anomalous-civitai-versions-ask {
|
|
align-self: flex-start;
|
|
padding: 4px 12px;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 6px;
|
|
background: none;
|
|
color: var(--amb-text-main);
|
|
font: inherit;
|
|
font-size: 0.85em;
|
|
cursor: pointer;
|
|
}
|
|
.anomalous-civitai-versions-ask:hover:not(:disabled) { border-color: var(--amb-accent); }
|
|
.anomalous-civitai-versions-ask:disabled { opacity: 0.6; cursor: default; }
|
|
.anomalous-civitai-versions-list { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
|
|
.anomalous-civitai-version {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 6px 10px;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 6px;
|
|
}
|
|
.anomalous-civitai-version.is-here { border-color: color-mix(in srgb, var(--amb-accent) 45%, var(--amb-border)); }
|
|
.anomalous-civitai-version-about { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
|
|
.anomalous-civitai-version-name { color: var(--amb-text-main); font-weight: 600; overflow-wrap: anywhere; }
|
|
.anomalous-civitai-version-facts,
|
|
.anomalous-civitai-version-note { color: var(--amb-text-muted); font-size: 0.85em; line-height: 1.5; }
|
|
.anomalous-civitai-version-note.is-error { color: var(--amb-warn); }
|
|
.anomalous-civitai-version-action {
|
|
flex: none;
|
|
max-width: 50%;
|
|
padding: 3px 10px;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 6px;
|
|
background: none;
|
|
color: var(--amb-text-main);
|
|
font: inherit;
|
|
font-size: 0.85em;
|
|
overflow-wrap: anywhere;
|
|
cursor: pointer;
|
|
}
|
|
.anomalous-civitai-version-action:hover:not(:disabled) { border-color: var(--amb-accent); }
|
|
.anomalous-civitai-version-action:disabled { opacity: 0.6; cursor: default; }
|