DemonGatanjieuandClaude Opus 5.5
6a61682d2a
Opening, closing and changing pages jumped; now they take a short transition. Styles alone do it, since a dozen modules open the window: anything leaving display: none starts its animation. The rail's highlight is one piece that slides between the entries. Going between docked, floating and full window lays the page out once and moves only its picture, where the docked rule used to animate the width and lay it out on every frame. Only opacity and position move, and all of it stays off under reduced motion. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
791 lines
18 KiB
CSS
791 lines
18 KiB
CSS
/* Shell: the left icon rail, the list column beside it, the header title and the home page. */
|
|
|
|
/* Rail */
|
|
#anomalous-container > #anomalous-rail {
|
|
position: relative;
|
|
z-index: 3;
|
|
}
|
|
|
|
#anomalous-rail {
|
|
flex: 0 0 60px;
|
|
width: 60px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2px;
|
|
padding: 10px 0;
|
|
box-sizing: border-box;
|
|
border-right: 1px solid var(--amb-border);
|
|
background: var(--amb-lt-panel, rgba(16, 16, 19, 0.92));
|
|
}
|
|
|
|
.anomalous-rail-brand {
|
|
flex-shrink: 0;
|
|
width: 32px;
|
|
height: 32px;
|
|
margin-bottom: 8px;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 9px;
|
|
background: var(--amb-lt-brand, linear-gradient(135deg, #3a3a42, #1c1c22));
|
|
color: var(--amb-text-main);
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
transition: transform 0.12s ease;
|
|
}
|
|
|
|
.anomalous-rail-nav,
|
|
.anomalous-rail-tools,
|
|
.anomalous-rail-foot {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2px;
|
|
width: 100%;
|
|
}
|
|
|
|
.anomalous-rail-nav {
|
|
position: relative;
|
|
}
|
|
|
|
/* The current page's highlight: one piece that slides between the entries (ui_shell_rail.js). */
|
|
.anomalous-rail-marker {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 4px;
|
|
width: 52px;
|
|
border-radius: 9px;
|
|
background: rgba(var(--amb-ink-rgb), 0.1);
|
|
box-shadow: inset 2px 0 0 var(--amb-link);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: translate 0.2s var(--amb-ease-out), height 0.2s var(--amb-ease-out), opacity 0.15s ease;
|
|
}
|
|
|
|
.anomalous-rail-marker.is-shown {
|
|
opacity: 1;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.anomalous-rail-marker { transition: none; }
|
|
}
|
|
|
|
.anomalous-rail-sep {
|
|
flex-shrink: 0;
|
|
width: 28px;
|
|
height: 1px;
|
|
margin: 6px 0;
|
|
background: rgba(var(--amb-ink-rgb), 0.08);
|
|
}
|
|
|
|
.anomalous-rail-spacer {
|
|
flex: 1;
|
|
}
|
|
|
|
.anomalous-rail-item,
|
|
.anomalous-rail-tools button,
|
|
.anomalous-rail-foot button {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: none;
|
|
border-radius: 9px;
|
|
background: transparent;
|
|
color: var(--amb-text-muted);
|
|
cursor: pointer;
|
|
transition: background 0.15s ease, color 0.15s ease;
|
|
}
|
|
|
|
.anomalous-rail-item {
|
|
position: relative;
|
|
width: 52px;
|
|
gap: 3px;
|
|
padding: 7px 0 5px;
|
|
}
|
|
|
|
.anomalous-rail-tools button,
|
|
.anomalous-rail-foot button {
|
|
width: 40px;
|
|
height: 36px;
|
|
padding: 0;
|
|
}
|
|
|
|
.anomalous-rail-item:hover,
|
|
.anomalous-rail-tools button:hover,
|
|
.anomalous-rail-foot button:hover {
|
|
background: rgba(var(--amb-ink-rgb), 0.06);
|
|
color: var(--amb-text-main);
|
|
}
|
|
|
|
.anomalous-rail-item.active {
|
|
color: var(--amb-text-main);
|
|
}
|
|
|
|
.anomalous-rail-tools button.is-active,
|
|
.anomalous-rail-foot button.is-active {
|
|
background: rgba(var(--amb-ink-rgb), 0.1);
|
|
color: var(--amb-text-main);
|
|
}
|
|
|
|
.anomalous-rail-label {
|
|
max-width: 56px;
|
|
overflow: hidden;
|
|
font-size: 10.5px;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
#anomalous-rail.is-compact .anomalous-rail-label {
|
|
display: none;
|
|
}
|
|
|
|
#anomalous-rail.is-compact .anomalous-rail-item {
|
|
padding: 8px 0;
|
|
}
|
|
|
|
/* Older id rules style these as bottom-bar buttons (with !important); the rail's look wins. */
|
|
#anomalous-rail #anomalous-scan-btn {
|
|
width: 40px !important;
|
|
height: 36px !important;
|
|
border-radius: 9px !important;
|
|
}
|
|
|
|
#anomalous-rail #anomalous-materials-btn.active {
|
|
background: rgba(var(--amb-ink-rgb), 0.1) !important;
|
|
color: var(--amb-text-main) !important;
|
|
}
|
|
|
|
/* List column: beside the page, or gone when closed. It also steps aside while a workspace
|
|
(recipes, notes, materials) is open, whichever button opened it. */
|
|
#anomalous-container.anomalous-has-rail #anomalous-sidebar-wrapper {
|
|
width: 250px;
|
|
transition: width 0.25s ease, margin 0.25s ease, opacity 0.2s ease;
|
|
}
|
|
|
|
/* Voice-over: the cast column is narrower (11-audio-studio.css). */
|
|
#anomalous-container.anomalous-has-rail[data-page="script"]:not(.anomalous-shell-narrow) #anomalous-sidebar-wrapper {
|
|
width: 176px;
|
|
}
|
|
|
|
#anomalous-container.anomalous-has-rail.anomalous-sidebar-closed #anomalous-sidebar-wrapper,
|
|
#anomalous-container.anomalous-has-rail.anomalous-workspace-open #anomalous-sidebar-wrapper {
|
|
width: 0;
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
border-width: 0;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Narrow window (docked, or small): the open list is a drawer against the rail, over a
|
|
dimmed page; pressing the dimmed page closes it (ui_shell_nav.js). Open or closing, it stays
|
|
out of the page's layout, so the page never shifts while it slides. */
|
|
#anomalous-container.anomalous-shell-narrow #anomalous-sidebar-wrapper {
|
|
position: absolute;
|
|
top: 48px;
|
|
bottom: 0;
|
|
left: 60px;
|
|
z-index: 20;
|
|
height: auto;
|
|
margin: 0;
|
|
border-width: 0 1px 0 0;
|
|
border-radius: 0;
|
|
box-shadow: 16px 0 36px rgba(0, 0, 0, 0.55);
|
|
}
|
|
|
|
#anomalous-container.anomalous-shell-narrow:not(.anomalous-sidebar-closed) #anomalous-sidebar-wrapper {
|
|
width: 270px;
|
|
}
|
|
|
|
.anomalous-list-scrim {
|
|
display: none;
|
|
}
|
|
|
|
#anomalous-container.anomalous-shell-narrow:not(.anomalous-sidebar-closed) > .anomalous-list-scrim {
|
|
position: absolute;
|
|
top: 48px;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 60px;
|
|
z-index: 19;
|
|
display: block;
|
|
background: var(--amb-lt-scrim, rgba(0, 0, 0, 0.45));
|
|
}
|
|
|
|
/* Workspaces (recipes, notes, materials) leave the rail visible. */
|
|
#anomalous-container.anomalous-has-rail > .anomalous-nb-modal {
|
|
left: 60px;
|
|
width: calc(100% - 60px);
|
|
}
|
|
|
|
#anomalous-container.anomalous-docked.anomalous-has-rail > .anomalous-nb-modal {
|
|
width: calc(100% - 66px); /* stops at the right edge (00-foundation-models.css) */
|
|
}
|
|
|
|
/* Header: list button and page title on the left. */
|
|
.anomalous-header-left {
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Looks like the other header buttons; greyed out on pages without a list. */
|
|
#anomalous-header #anomalous-list-toggle:disabled {
|
|
opacity: 0.3;
|
|
cursor: default;
|
|
}
|
|
|
|
.anomalous-page-title {
|
|
overflow: hidden;
|
|
color: var(--amb-text-main);
|
|
font-size: 0.92em;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* Home page */
|
|
#anomalous-home-panel {
|
|
flex: 1;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.anomalous-home {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
width: min(780px, 100%);
|
|
margin: auto;
|
|
padding: 36px 28px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.anomalous-home-title {
|
|
margin: 0;
|
|
color: var(--amb-text-main);
|
|
font-size: 1.75em;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
}
|
|
|
|
.anomalous-home-lead {
|
|
max-width: 540px;
|
|
margin: 0 auto;
|
|
color: var(--amb-text-muted);
|
|
font-size: 0.88em;
|
|
line-height: 1.7;
|
|
text-align: center;
|
|
}
|
|
|
|
.anomalous-home-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
|
gap: 10px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.anomalous-home-card {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
padding: 14px;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 12px;
|
|
background: rgba(var(--amb-ink-rgb), 0.03);
|
|
color: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
|
|
}
|
|
|
|
.anomalous-home-card:hover {
|
|
border-color: color-mix(in srgb, var(--amb-link) 35%, transparent);
|
|
background: rgba(var(--amb-ink-rgb), 0.07);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.anomalous-home-card-icon {
|
|
display: flex;
|
|
flex: 0 0 34px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 34px;
|
|
border-radius: 9px;
|
|
background: color-mix(in srgb, var(--amb-link) 12%, transparent);
|
|
color: var(--amb-text-main);
|
|
}
|
|
|
|
.anomalous-home-card-icon svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.anomalous-home-card-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.anomalous-home-card-title {
|
|
color: var(--amb-text-main);
|
|
font-size: 0.92em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.anomalous-home-card-body {
|
|
color: var(--amb-text-muted);
|
|
font-size: 0.8em;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.anomalous-home-start {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px 14px;
|
|
margin-top: 6px;
|
|
color: var(--amb-text-dim);
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.anomalous-home-link {
|
|
padding: 2px 0;
|
|
border: none;
|
|
background: none;
|
|
color: var(--amb-link);
|
|
font-size: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-home-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* The first-run setup above the task cards (ui_first_run.js): four steps, then Set up for me. */
|
|
.anomalous-first-run {
|
|
padding: 18px 20px;
|
|
border: 1px solid color-mix(in srgb, var(--amb-link) 35%, var(--amb-border));
|
|
border-radius: 12px;
|
|
background: color-mix(in srgb, var(--amb-link) 6%, var(--amb-bg-card));
|
|
}
|
|
|
|
.anomalous-first-run:empty {
|
|
display: none;
|
|
}
|
|
|
|
.anomalous-first-run-head {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.anomalous-first-run-title {
|
|
margin: 0;
|
|
color: var(--amb-text-main);
|
|
font-size: 1.15em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.anomalous-first-run-lead {
|
|
margin: 4px 0 0;
|
|
color: var(--amb-text-muted);
|
|
font-size: 0.85em;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.anomalous-first-run-steps {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.anomalous-first-run-step {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 8px;
|
|
background: var(--amb-bg-card);
|
|
}
|
|
|
|
.anomalous-first-run-step.is-current {
|
|
border-color: var(--amb-link);
|
|
}
|
|
|
|
.anomalous-first-run-icon {
|
|
flex: none;
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
.anomalous-first-run-copy {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.anomalous-first-run-step-title {
|
|
color: var(--amb-text-main);
|
|
font-size: 0.9em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.anomalous-first-run-step-body {
|
|
color: var(--amb-text-muted);
|
|
font-size: 0.8em;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.anomalous-first-run-aside {
|
|
display: flex;
|
|
flex: none;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 6px;
|
|
max-width: 45%;
|
|
}
|
|
|
|
.anomalous-first-run-pill {
|
|
padding: 3px 10px;
|
|
border-radius: 999px;
|
|
background: rgba(var(--amb-ink-rgb), 0.08);
|
|
color: var(--amb-text-soft);
|
|
font-size: 0.75em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-first-run-pill.is-ok {
|
|
background: color-mix(in srgb, var(--amb-lt-ok, #4ade80) 16%, transparent);
|
|
color: var(--amb-lt-ok, #4ade80);
|
|
}
|
|
|
|
.anomalous-first-run-pill.is-bad {
|
|
background: color-mix(in srgb, var(--amb-lt-danger, #ff6b6b) 16%, transparent);
|
|
color: var(--amb-lt-danger, #ff6b6b);
|
|
}
|
|
|
|
.anomalous-first-run-btn,
|
|
.anomalous-first-run-later {
|
|
padding: 4px 12px;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 6px;
|
|
background: rgba(var(--amb-ink-rgb), 0.06);
|
|
color: var(--amb-text-main);
|
|
font: inherit;
|
|
font-size: 0.78em;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-first-run-btn:hover,
|
|
.anomalous-first-run-later:hover {
|
|
background: rgba(var(--amb-ink-rgb), 0.12);
|
|
}
|
|
|
|
.anomalous-first-run-later {
|
|
flex: none;
|
|
border-color: transparent;
|
|
background: transparent;
|
|
color: var(--amb-text-muted);
|
|
}
|
|
|
|
.anomalous-first-run-track {
|
|
height: 4px;
|
|
margin-top: 6px;
|
|
overflow: hidden;
|
|
border-radius: 2px;
|
|
background: rgba(var(--amb-ink-rgb), 0.1);
|
|
}
|
|
|
|
.anomalous-first-run-fill {
|
|
width: 0;
|
|
height: 100%;
|
|
border-radius: 2px;
|
|
background: var(--amb-link);
|
|
transition: width 0.4s ease;
|
|
}
|
|
|
|
/* Preparing: no count yet, the bar sweeps. */
|
|
.anomalous-first-run-track.is-waiting .anomalous-first-run-fill {
|
|
width: 30%;
|
|
animation: anomalous-first-run-sweep 1.2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes anomalous-first-run-sweep {
|
|
from { transform: translateX(-100%); }
|
|
to { transform: translateX(340%); }
|
|
}
|
|
|
|
.anomalous-first-run-count {
|
|
color: var(--amb-link);
|
|
font-size: 0.78em;
|
|
font-variant-numeric: tabular-nums;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-first-run-foot {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 8px 14px;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.anomalous-first-run-go {
|
|
padding: 8px 20px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
background: var(--amb-link);
|
|
color: var(--amb-bg-page);
|
|
font: inherit;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-first-run-go:hover:not(:disabled) { filter: brightness(1.12); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amb-link) 30%, transparent); }
|
|
|
|
.anomalous-first-run-go:disabled {
|
|
opacity: 0.5;
|
|
cursor: default;
|
|
}
|
|
|
|
.anomalous-first-run-note {
|
|
color: var(--amb-text-dim);
|
|
font-size: 0.78em;
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
.anomalous-first-run-step {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.anomalous-first-run-aside {
|
|
justify-content: flex-start;
|
|
max-width: none;
|
|
}
|
|
}
|
|
|
|
/* "Found a problem, or have an idea?": the way to GitHub, in view on Home. */
|
|
.anomalous-home-feedback {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 12px 18px;
|
|
margin-top: 18px;
|
|
padding: 14px 18px;
|
|
border: 1px solid color-mix(in srgb, var(--amb-link) 30%, transparent);
|
|
border-radius: 12px;
|
|
background: color-mix(in srgb, var(--amb-link) 7%, transparent);
|
|
}
|
|
|
|
.anomalous-home-feedback-copy {
|
|
display: flex;
|
|
flex: 1 1 260px;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.anomalous-home-feedback-title {
|
|
color: var(--amb-text-main);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.anomalous-home-feedback-lead {
|
|
color: var(--amb-text-muted);
|
|
font-size: 12.5px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.anomalous-home-feedback-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.anomalous-home-feedback-btn {
|
|
padding: 6px 14px;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 8px;
|
|
background: rgba(var(--amb-ink-rgb), 0.04);
|
|
color: var(--amb-text-main);
|
|
font: inherit;
|
|
font-size: 12.5px;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-home-feedback-btn:hover {
|
|
border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
|
|
}
|
|
|
|
/* The feedback window (ui_feedback_dialog.js): one text box, then GitHub. */
|
|
.anomalous-feedback-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1000001;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
background: var(--amb-lt-scrim, rgba(0, 0, 0, 0.6));
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.anomalous-feedback-dialog {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
width: min(480px, 100%);
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
padding: 22px;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 14px;
|
|
background: var(--amb-bg-panel, var(--amb-bg-card));
|
|
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.anomalous-feedback-title {
|
|
margin: 0;
|
|
color: var(--amb-text-main);
|
|
font-size: 17px;
|
|
}
|
|
|
|
.anomalous-feedback-lead,
|
|
.anomalous-feedback-hint {
|
|
margin: 0;
|
|
color: var(--amb-text-muted);
|
|
font-size: 12.5px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.anomalous-feedback-text {
|
|
width: 100%;
|
|
min-height: 110px;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 10px;
|
|
background: var(--amb-lt-sunken, rgba(0, 0, 0, 0.25));
|
|
color: var(--amb-text-main);
|
|
font: inherit;
|
|
font-size: 13.5px;
|
|
line-height: 1.6;
|
|
resize: vertical;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.anomalous-feedback-text:focus {
|
|
border-color: color-mix(in srgb, var(--amb-link) 55%, transparent);
|
|
outline: none;
|
|
}
|
|
|
|
.anomalous-feedback-attach {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
color: var(--amb-text-soft);
|
|
font-size: 12.5px;
|
|
line-height: 1.5;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-feedback-attach input {
|
|
margin-top: 3px;
|
|
accent-color: var(--amb-link);
|
|
}
|
|
|
|
.anomalous-feedback-link {
|
|
align-self: flex-start;
|
|
padding: 0 0 0 24px;
|
|
border: none;
|
|
background: none;
|
|
color: var(--amb-link);
|
|
font: inherit;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-feedback-preview {
|
|
margin: 0 0 0 24px;
|
|
padding: 8px 10px;
|
|
border-radius: 8px;
|
|
background: var(--amb-lt-sunken, rgba(0, 0, 0, 0.25));
|
|
color: var(--amb-text-muted);
|
|
font-size: 11.5px;
|
|
line-height: 1.6;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.anomalous-feedback-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.anomalous-feedback-cancel,
|
|
.anomalous-feedback-submit {
|
|
padding: 8px 16px;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 9px;
|
|
background: transparent;
|
|
color: var(--amb-text-main);
|
|
font: inherit;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-feedback-submit {
|
|
border-color: transparent;
|
|
background: var(--amb-btn-primary-bg);
|
|
color: var(--amb-btn-primary-text);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.anomalous-feedback-submit:disabled {
|
|
opacity: 0.45;
|
|
cursor: default;
|
|
}
|
|
|
|
.anomalous-home-feedback-btn.is-primary {
|
|
border-color: transparent;
|
|
background: var(--amb-btn-primary-bg);
|
|
color: var(--amb-btn-primary-text);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Opened from another device (remote_view.js): a quiet "view only" chip beside the page title,
|
|
pressed for how cloud users can change things; yellow when remote changes are on. A span, not a
|
|
button: the header's button rules are !important. */
|
|
.anomalous-remote-chip {
|
|
flex-shrink: 0;
|
|
margin-left: 8px;
|
|
padding: 2px 9px;
|
|
border: 1px dashed var(--amb-border-strong);
|
|
border-radius: 999px;
|
|
color: var(--amb-text-muted);
|
|
font-size: 11.5px;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-remote-chip:hover { color: var(--amb-text-main); }
|
|
|
|
.anomalous-remote-chip.is-open {
|
|
border-style: solid;
|
|
border-color: color-mix(in srgb, var(--amb-warn-text) 45%, transparent);
|
|
color: var(--amb-warn-text);
|
|
}
|