DemonGatanjieuandClaude Opus 5.5
915feff820
The manual was a long block of text that had fallen behind the window (it still called recipes and materials "in testing") and was reachable only from Settings. Pages explain themselves, Home lists what you can do and ! shows what changed, so Settings -> Help and feedback now offers the interface tour, what's new, the full guide (the README on GitHub, at its Chinese half in Chinese) and feedback. Removes ui_help.js, its strings and styles, and the recipe "beta" notice code that no longer had an element. The README's backup note no longer calls the features a test. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
479 lines
11 KiB
CSS
479 lines
11 KiB
CSS
/* Model Sources: the Models page's view of where each model is downloaded (ui_model_sources.js). */
|
|
.anomalous-msrc {
|
|
grid-column: 1 / -1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
min-width: 0;
|
|
padding: 4px 2px 12px;
|
|
container-type: inline-size;
|
|
color: var(--amb-text-main);
|
|
}
|
|
|
|
.anomalous-msrc-title {
|
|
margin: 0 0 4px;
|
|
font-size: 1.15rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.anomalous-msrc-lead {
|
|
max-width: 760px;
|
|
margin: 0;
|
|
color: var(--amb-text-muted);
|
|
font-size: 0.85rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.anomalous-msrc-bar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 8px 12px;
|
|
}
|
|
|
|
.anomalous-msrc-pills {
|
|
display: inline-flex;
|
|
gap: 3px;
|
|
padding: 3px;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 999px;
|
|
background: var(--amb-bg-input);
|
|
}
|
|
|
|
.anomalous-msrc-pill {
|
|
padding: 3px 11px;
|
|
border: none;
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
color: var(--amb-text-muted);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-msrc-pill:hover {
|
|
color: var(--amb-text-main);
|
|
}
|
|
|
|
.anomalous-msrc-pill.is-active {
|
|
background: color-mix(in srgb, var(--amb-link) 16%, transparent);
|
|
color: var(--amb-link);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.anomalous-msrc-search {
|
|
flex: 1;
|
|
min-width: 180px;
|
|
max-width: 320px;
|
|
height: 30px;
|
|
box-sizing: border-box;
|
|
padding: 0 12px;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 999px;
|
|
background: var(--amb-bg-input);
|
|
color: var(--amb-text-main);
|
|
font-size: 12px;
|
|
outline: none;
|
|
}
|
|
|
|
.anomalous-msrc-search:focus {
|
|
border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
|
|
}
|
|
|
|
.anomalous-msrc-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.anomalous-msrc-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(180px, 1fr) minmax(260px, 1.6fr);
|
|
align-items: center;
|
|
gap: 8px 16px;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: var(--amb-radius-card);
|
|
background: var(--amb-bg-card);
|
|
}
|
|
|
|
.anomalous-msrc-row.is-dirty {
|
|
border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
|
|
}
|
|
|
|
.anomalous-msrc-info {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: 4px 8px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.anomalous-msrc-name {
|
|
overflow: hidden;
|
|
max-width: 100%;
|
|
font-size: 0.88rem;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-msrc-where {
|
|
color: var(--amb-text-dim);
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.anomalous-msrc-tag {
|
|
padding: 1px 7px;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 999px;
|
|
color: var(--amb-text-muted);
|
|
font-size: 0.72rem;
|
|
}
|
|
|
|
.anomalous-msrc-tag.is-missing {
|
|
border-color: rgba(248, 113, 113, 0.45);
|
|
color: #f87171;
|
|
}
|
|
|
|
.anomalous-msrc-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.anomalous-msrc-site {
|
|
flex-shrink: 0;
|
|
padding: 1px 7px;
|
|
border: 1px solid;
|
|
border-radius: 999px;
|
|
font-size: 0.72rem;
|
|
}
|
|
|
|
.anomalous-msrc-input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
height: 30px;
|
|
box-sizing: border-box;
|
|
padding: 0 10px;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: var(--amb-radius-control);
|
|
background: var(--amb-bg-input);
|
|
color: var(--amb-text-main);
|
|
font-size: 12px;
|
|
outline: none;
|
|
}
|
|
|
|
.anomalous-msrc-input:focus {
|
|
border-color: color-mix(in srgb, var(--amb-link) 55%, transparent);
|
|
}
|
|
|
|
.anomalous-msrc-row.is-empty .anomalous-msrc-input:not(:focus) {
|
|
border-style: dashed;
|
|
}
|
|
|
|
.anomalous-msrc-btn {
|
|
flex-shrink: 0;
|
|
height: 30px;
|
|
padding: 0 12px;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: var(--amb-radius-control);
|
|
background: transparent;
|
|
color: var(--amb-text-soft);
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-msrc-btn:hover:not(:disabled) {
|
|
border-color: var(--amb-border-hover);
|
|
background: var(--amb-bg-card-hover);
|
|
color: var(--amb-text-main);
|
|
}
|
|
|
|
.anomalous-msrc-btn:disabled {
|
|
opacity: 0.45;
|
|
cursor: default;
|
|
}
|
|
|
|
.anomalous-msrc-btn.is-primary {
|
|
border-color: transparent;
|
|
background: var(--amb-btn-primary-bg);
|
|
color: var(--amb-btn-primary-text);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.anomalous-msrc-btn.is-primary:hover:not(:disabled) {
|
|
background: var(--amb-btn-primary-hover);
|
|
color: var(--amb-btn-primary-text);
|
|
}
|
|
|
|
.anomalous-msrc-btn[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.anomalous-msrc-components {
|
|
align-self: flex-start;
|
|
margin-top: 6px;
|
|
padding: 4px 0;
|
|
border: none;
|
|
background: none;
|
|
color: var(--amb-text-muted);
|
|
font-size: 0.8rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-msrc-components:hover {
|
|
color: var(--amb-text-main);
|
|
}
|
|
|
|
.anomalous-msrc-empty {
|
|
margin: 18px 0;
|
|
color: var(--amb-text-dim);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.anomalous-msrc-foot {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid var(--amb-border);
|
|
}
|
|
|
|
.anomalous-msrc-stats {
|
|
color: var(--amb-text-muted);
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.anomalous-msrc-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* Narrow (docked): the link goes under the name. */
|
|
@container (max-width: 640px) {
|
|
.anomalous-msrc-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* =============================================================================
|
|
UPDATE GUIDE NOTICE INDICATOR (CLEAN MONOCHROME TECH)
|
|
============================================================================= */
|
|
/* Header skin uses important padding/colors; keep this control square within that skin. */
|
|
#anomalous-header button.anomalous-update-notice-btn {
|
|
width: 32px;
|
|
min-width: 32px;
|
|
padding: 0 !important;
|
|
background: transparent !important;
|
|
border-color: var(--amb-border-strong) !important;
|
|
color: var(--amb-text-primary, var(--amb-text-main)) !important;
|
|
}
|
|
#anomalous-header button.anomalous-update-notice-btn:hover {
|
|
background: rgba(255, 255, 255, 0.08) !important;
|
|
}
|
|
.anomalous-update-notice-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 1px solid currentColor;
|
|
border-radius: 50%;
|
|
font: 700 12px/1 system-ui, sans-serif;
|
|
}
|
|
#anomalous-update-notice-btn:focus-visible,
|
|
.anomalous-update-guide button:focus-visible {
|
|
outline: 2px solid var(--amb-accent, var(--amb-link));
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* =============================================================================
|
|
UPDATE GUIDE MODAL (ELEGANT MONOCHROME OBSIDIAN GLASS)
|
|
============================================================================= */
|
|
dialog.anomalous-update-guide:not([open]) {
|
|
display: none !important;
|
|
}
|
|
|
|
dialog.anomalous-update-guide[open] {
|
|
display: flex !important;
|
|
flex-direction: column;
|
|
}
|
|
|
|
dialog.anomalous-update-guide {
|
|
position: fixed;
|
|
inset: 0;
|
|
margin: auto;
|
|
width: 480px;
|
|
max-width: calc(100vw - 32px);
|
|
height: fit-content;
|
|
max-height: 85vh;
|
|
padding: 0;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 16px;
|
|
background: linear-gradient(145deg, rgba(28, 30, 38, 0.98), rgba(16, 18, 24, 0.98));
|
|
backdrop-filter: blur(24px);
|
|
-webkit-backdrop-filter: blur(24px);
|
|
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8), 0 0 1px 1px rgba(255, 255, 255, 0.12);
|
|
color: var(--amb-text-main);
|
|
outline: none;
|
|
overflow-y: auto;
|
|
box-sizing: border-box;
|
|
z-index: 1000000;
|
|
animation: anomalous-guide-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
dialog.anomalous-update-guide > * { flex-shrink: 0; }
|
|
|
|
@keyframes anomalous-guide-pop {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
dialog.anomalous-update-guide::backdrop {
|
|
background: rgba(0, 0, 0, 0.65);
|
|
backdrop-filter: blur(6px);
|
|
-webkit-backdrop-filter: blur(6px);
|
|
animation: anomalous-fade-in 0.2s ease;
|
|
}
|
|
|
|
@keyframes anomalous-fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.anomalous-update-guide-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 14px 20px;
|
|
background: rgba(255, 255, 255, 0.02);
|
|
border-bottom: 1px solid var(--amb-border);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.5px;
|
|
color: var(--amb-text-muted);
|
|
}
|
|
|
|
.anomalous-update-guide-close {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--amb-text-muted);
|
|
font-size: 20px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
padding: 2px 6px;
|
|
border-radius: 6px;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.anomalous-update-guide-close:hover {
|
|
color: var(--amb-text-main);
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.anomalous-update-guide-icon {
|
|
width: 58px;
|
|
height: 58px;
|
|
margin: 24px auto 14px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid var(--amb-border-strong);
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24px;
|
|
color: var(--amb-text-main);
|
|
user-select: none;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
#anomalous-update-guide-title {
|
|
margin: 0 24px 10px;
|
|
font-size: 17px;
|
|
font-weight: 600;
|
|
color: var(--amb-text-main);
|
|
text-align: center;
|
|
letter-spacing: 0.2px;
|
|
}
|
|
|
|
#anomalous-update-guide-body {
|
|
margin: 0 24px 16px;
|
|
font-size: 13px;
|
|
line-height: 1.65;
|
|
color: var(--amb-text-soft);
|
|
text-align: center;
|
|
min-height: 60px;
|
|
}
|
|
|
|
.anomalous-update-guide-progress {
|
|
margin: 0 24px 20px;
|
|
font-size: 11px;
|
|
color: var(--amb-text-dim);
|
|
text-align: center;
|
|
font-weight: 500;
|
|
letter-spacing: 0.4px;
|
|
}
|
|
|
|
.anomalous-update-guide-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
padding: 14px 20px;
|
|
background: rgba(0, 0, 0, 0.28);
|
|
border-top: 1px solid var(--amb-border);
|
|
gap: 10px;
|
|
}
|
|
|
|
.anomalous-update-guide-footer .anomalous-btn-ghost {
|
|
padding: 7px 15px;
|
|
font-size: 12px;
|
|
border-radius: 6px;
|
|
color: var(--amb-text-muted);
|
|
background: transparent;
|
|
border: 1px solid var(--amb-border);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.anomalous-update-guide-footer .anomalous-btn-ghost:hover:not(:disabled) {
|
|
color: var(--amb-text-main);
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border-color: var(--amb-border-strong);
|
|
}
|
|
|
|
.anomalous-update-guide-footer .anomalous-btn-ghost:disabled {
|
|
opacity: 0.35;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.anomalous-update-guide-footer .anomalous-btn-primary {
|
|
padding: 7px 22px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
border-radius: 6px;
|
|
color: #0f172a;
|
|
background: #f1f5f9;
|
|
border: 1px solid #ffffff;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.anomalous-update-guide-footer .anomalous-btn-primary:hover {
|
|
background: #ffffff;
|
|
box-shadow: 0 4px 14px rgba(255, 255, 255, 0.25);
|
|
transform: translateY(-1px);
|
|
}
|