DemonGatanjieuandClaude Opus 5.5
054cb91b9b
Pages made at different times used their own greys (slate here, neutral there) and accents (sky, violet, indigo), and most ignored the Abyssal Scarlet theme. About 1,850 literal colours in web/styles and in CSS and inline styles written from JS now use the --amb-* tokens by what they are for: surfaces, text (new --amb-text-soft and --amb-text-dim), borders (new --amb-border-strong), the primary button, and one accent (new --amb-link, tinted with color-mix). Both themes define the new tokens. Literal colours stay where the colour is the meaning: status, prompt roles, voice emotions, canvas node colours, shadows and overlays; theme override rules are untouched. The share-code dialogs move from inline styles to .anomalous-share-* classes. Stylesheet versions are bumped. Checked: text contrast on every rail page, Prompt Studio, Prompt Notes, Model Sources, settings, model detail and editor, share codes, in both themes; structure check and JS tests pass. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
327 lines
7.6 KiB
CSS
327 lines
7.6 KiB
CSS
/* =============================================================================
|
|
Version line (update guide) and the "Version & updates" panel
|
|
============================================================================= */
|
|
|
|
/* Row under the update guide header ("!" button). */
|
|
.anomalous-version-line {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 20px;
|
|
border-bottom: 1px solid var(--amb-border);
|
|
font-size: 12px;
|
|
color: var(--amb-text-muted);
|
|
}
|
|
|
|
.anomalous-version-line-value {
|
|
color: var(--amb-text-main);
|
|
font: 600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
}
|
|
|
|
.anomalous-version-line-open {
|
|
margin-left: auto;
|
|
padding: 4px 10px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 6px;
|
|
color: var(--amb-text-main);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-version-line-open:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.anomalous-version-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1000000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
background: rgba(0, 0, 0, 0.55);
|
|
backdrop-filter: blur(3px);
|
|
}
|
|
|
|
.anomalous-version-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
width: min(620px, 100%);
|
|
max-height: min(760px, 100%);
|
|
padding: 18px 20px;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
background: var(--amb-bg-panel, var(--amb-bg-panel));
|
|
color: var(--amb-text-main, var(--amb-text-main));
|
|
border: 1px solid var(--amb-border-hover, var(--amb-border-strong));
|
|
border-radius: var(--amb-radius-panel, 10px);
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.anomalous-version-panel.is-busy {
|
|
cursor: progress;
|
|
}
|
|
|
|
.anomalous-version-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.anomalous-version-title {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.anomalous-version-close {
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 0;
|
|
background: transparent;
|
|
color: var(--amb-text-muted, var(--amb-text-muted));
|
|
border: 1px solid transparent;
|
|
border-radius: var(--amb-radius-control, 6px);
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-version-close:hover {
|
|
color: var(--amb-text-main, var(--amb-text-main));
|
|
border-color: var(--amb-border-hover, var(--amb-border-strong));
|
|
}
|
|
|
|
.anomalous-version-current {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
padding: 12px 14px;
|
|
background: var(--amb-bg-card, var(--amb-bg-card));
|
|
border: 1px solid var(--amb-border, var(--amb-border));
|
|
border-radius: var(--amb-radius-card, 8px);
|
|
}
|
|
|
|
.anomalous-version-current-line {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
}
|
|
|
|
.anomalous-version-current-line strong {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.anomalous-version-current-label,
|
|
.anomalous-version-meta,
|
|
.anomalous-version-date,
|
|
.anomalous-version-release-name,
|
|
.anomalous-version-empty {
|
|
color: var(--amb-text-muted, var(--amb-text-muted));
|
|
}
|
|
|
|
.anomalous-version-meta {
|
|
font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
}
|
|
|
|
.anomalous-version-warning {
|
|
padding: 8px 10px;
|
|
color: #fcd34d;
|
|
background: rgba(245, 158, 11, 0.1);
|
|
border: 1px solid rgba(245, 158, 11, 0.35);
|
|
border-radius: var(--amb-radius-control, 6px);
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.anomalous-version-actions,
|
|
.anomalous-version-release-footer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.anomalous-version-action {
|
|
height: 30px;
|
|
padding: 0 12px;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
color: var(--amb-text-main, var(--amb-text-main));
|
|
border: 1px solid var(--amb-border-hover, var(--amb-border-strong));
|
|
border-radius: var(--amb-radius-control, 6px);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-version-action:hover:not(:disabled) {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.anomalous-version-action.primary {
|
|
background: var(--amb-btn-primary-bg, var(--amb-btn-primary-bg));
|
|
color: var(--amb-btn-primary-text, var(--amb-btn-primary-text));
|
|
border-color: transparent;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.anomalous-version-action.primary:hover:not(:disabled) {
|
|
background: var(--amb-btn-primary-hover, #ffffff);
|
|
}
|
|
|
|
.anomalous-version-action:disabled {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.anomalous-version-status {
|
|
min-height: 18px;
|
|
color: var(--amb-text-muted, var(--amb-text-muted));
|
|
line-height: 1.45;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.anomalous-version-status:empty {
|
|
display: none;
|
|
}
|
|
|
|
.anomalous-version-status.is-error {
|
|
color: #fca5a5;
|
|
}
|
|
|
|
.anomalous-version-prerelease {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: var(--amb-text-muted, var(--amb-text-muted));
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-version-prerelease[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.anomalous-version-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding-right: 2px;
|
|
}
|
|
|
|
.anomalous-version-empty {
|
|
padding: 22px 10px;
|
|
text-align: center;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.anomalous-version-release {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
padding: 10px 12px;
|
|
background: var(--amb-bg-card, var(--amb-bg-card));
|
|
border: 1px solid var(--amb-border, var(--amb-border));
|
|
border-radius: var(--amb-radius-card, 8px);
|
|
}
|
|
|
|
.anomalous-version-release.is-current {
|
|
border-color: var(--amb-accent-line, rgba(229, 231, 235, 0.35));
|
|
}
|
|
|
|
.anomalous-version-release-top {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.anomalous-version-release-title {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.anomalous-version-release-name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-version-badges {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.anomalous-version-badge {
|
|
padding: 2px 7px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--amb-border-hover, var(--amb-border-strong));
|
|
}
|
|
|
|
.anomalous-version-badge.is-current {
|
|
color: var(--amb-btn-primary-text, var(--amb-btn-primary-text));
|
|
background: var(--amb-btn-primary-bg, var(--amb-btn-primary-bg));
|
|
border-color: transparent;
|
|
}
|
|
|
|
.anomalous-version-badge.is-latest {
|
|
color: #86efac;
|
|
border-color: rgba(34, 197, 94, 0.45);
|
|
}
|
|
|
|
.anomalous-version-badge.is-pre {
|
|
color: #fcd34d;
|
|
border-color: rgba(245, 158, 11, 0.45);
|
|
}
|
|
|
|
.anomalous-version-link {
|
|
padding: 0;
|
|
background: none;
|
|
border: none;
|
|
color: var(--amb-text-muted, var(--amb-text-muted));
|
|
font-size: 12px;
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-version-link:hover {
|
|
color: var(--amb-text-main, var(--amb-text-main));
|
|
}
|
|
|
|
.anomalous-version-release-footer .anomalous-version-action {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.anomalous-version-notes {
|
|
max-height: 220px;
|
|
margin: 0;
|
|
padding: 8px 10px;
|
|
overflow: auto;
|
|
background: var(--amb-bg-input, var(--amb-bg-page));
|
|
border-radius: var(--amb-radius-control, 6px);
|
|
font: 12px/1.5 system-ui, sans-serif;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.anomalous-version-notes[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.anomalous-version-panel button:focus-visible,
|
|
.anomalous-version-panel a:focus-visible,
|
|
.anomalous-version-line-open:focus-visible {
|
|
outline: 2px solid var(--amb-accent, #f59e0b);
|
|
outline-offset: 2px;
|
|
}
|