bvandeusenandClaude Opus 5
4c9a637507
CI & Build / Python lint (push) Successful in 4s
CI & Build / Plugin hooks (push) Successful in 13s
CI & Build / integration (push) Successful in 29s
CI & Build / TypeScript typecheck (push) Successful in 33s
CI & Build / Python tests (push) Successful in 55s
CI & Build / Build & push image (push) Successful in 41s
76 hardcoded `color: #fff` now resolve to --fs-text-on-action, a new token that is parchment in BOTH modes. The design system said they should supersede to --fs-text-primary, on the recorded reasoning that "there is no 'text on action' colour, there is just the text colour." That is true on dark and wrong on light. --fs-text-primary inverts to #14171A; the surfaces underneath it do not invert at all — every one of these 76 sits on an action colour, a semantic colour, the accent, or the CTA gradient, all of which hold a single value across modes. Sweeping as recorded would have put obsidian text on moss green: roughly 2.4:1, against a house style whose stated floor is WCAG AA. It would have looked correct to me, because I checked it in the mode where it was correct. --color-accent-fg had the same defect independently and is repointed too. The token check now reports zero superseded literals, down from 30 files, and raw colour literals drop 246 -> 169. Closes #2275. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UaYUaouG9jjhATyuxCKrQs
643 lines
14 KiB
CSS
643 lines
14 KiB
CSS
/* ── Layout ── */
|
|
.editor-page {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
.editor-header {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
padding: 1rem 1.5rem 0.5rem;
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
.editor-body {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
.editor-main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow-y: auto;
|
|
padding: 0.75rem 1.5rem 1.5rem;
|
|
}
|
|
|
|
/* ── Toolbar & inputs ── */
|
|
.toolbar {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
}
|
|
.btn-back {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.45rem 1rem;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
background: none;
|
|
color: var(--color-text-secondary);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
}
|
|
.btn-back:hover {
|
|
border-color: var(--color-primary);
|
|
color: var(--color-primary);
|
|
}
|
|
/* Save: Moss action-primary per the Hybrid rule. Saving is "operating
|
|
the software" — not a brand moment. Accent gradient is reserved for
|
|
Send / empty-state CTAs. */
|
|
.btn-save {
|
|
padding: 0.45rem 1.1rem;
|
|
background: var(--color-action-primary);
|
|
color: var(--fs-text-on-action);
|
|
border: none;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
font-size: 0.875rem;
|
|
transition: background 0.15s, opacity 0.15s;
|
|
}
|
|
.btn-save:hover:not(:disabled) {
|
|
background: var(--color-action-primary-hover);
|
|
}
|
|
.btn-save:disabled {
|
|
opacity: 0.55;
|
|
cursor: default;
|
|
}
|
|
/* Delete: Oxblood action-destructive per Hybrid rule. Should be paired
|
|
with a Trash icon at the call site to reinforce intent. */
|
|
.btn-delete {
|
|
padding: 0.45rem 1rem;
|
|
background: var(--color-action-destructive);
|
|
color: var(--fs-text-on-action);
|
|
border: none;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
font-weight: 500;
|
|
}
|
|
.btn-delete:hover { background: var(--color-action-destructive-hover); }
|
|
.btn-assist-toggle {
|
|
margin-left: auto;
|
|
padding: 0.4rem 0.9rem;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
background: none;
|
|
color: var(--color-text-secondary);
|
|
cursor: pointer;
|
|
font-size: 0.85rem;
|
|
}
|
|
.btn-assist-toggle.active {
|
|
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
|
|
border-color: var(--color-primary);
|
|
color: var(--color-primary);
|
|
}
|
|
.title-input {
|
|
padding: 0.4rem 0;
|
|
border: none;
|
|
border-bottom: 1.5px solid var(--color-border);
|
|
border-radius: 0;
|
|
font-size: 1.5rem;
|
|
font-weight: 500;
|
|
font-family: "Fraunces", Georgia, serif;
|
|
background: transparent;
|
|
color: var(--color-text);
|
|
width: 100%;
|
|
transition: border-color 0.15s;
|
|
}
|
|
.title-input:focus {
|
|
outline: none;
|
|
border-bottom-color: var(--color-primary);
|
|
}
|
|
.title-input::placeholder {
|
|
color: var(--color-text-muted);
|
|
font-weight: 400;
|
|
}
|
|
.editor-tabs {
|
|
display: flex;
|
|
gap: 0;
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
.tab {
|
|
padding: 0.45rem 1rem;
|
|
border: none;
|
|
background: none;
|
|
color: var(--color-text-secondary);
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
border-bottom: 2px solid transparent;
|
|
}
|
|
.tab.active {
|
|
color: var(--color-primary);
|
|
border-bottom-color: var(--color-primary);
|
|
}
|
|
.preview-pane {
|
|
padding: 0.75rem;
|
|
border: 1px solid var(--color-input-border);
|
|
border-radius: var(--radius-sm);
|
|
min-height: 200px;
|
|
background: var(--color-bg-card);
|
|
}
|
|
|
|
/* ── Tag suggestions ── */
|
|
.tag-suggest-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
}
|
|
.btn-suggest-tags {
|
|
padding: 0.3rem 0.7rem;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-bg-card);
|
|
color: var(--color-text-secondary);
|
|
cursor: pointer;
|
|
font-size: 0.8rem;
|
|
}
|
|
.btn-suggest-tags:hover:not(:disabled) {
|
|
border-color: var(--color-primary);
|
|
color: var(--color-primary);
|
|
}
|
|
.btn-suggest-tags:disabled {
|
|
opacity: 0.6;
|
|
cursor: wait;
|
|
}
|
|
.tag-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.2rem;
|
|
padding: 0.2rem 0.55rem;
|
|
border: 1px solid var(--color-primary);
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
color: var(--color-primary);
|
|
font-size: 0.8rem;
|
|
cursor: pointer;
|
|
transition: background 0.15s, color 0.15s;
|
|
}
|
|
.tag-pill:hover:not(:disabled) {
|
|
background: var(--color-primary);
|
|
color: var(--fs-text-on-action);
|
|
}
|
|
.tag-pill.applied {
|
|
background: var(--color-success, #2ecc71);
|
|
border-color: var(--color-success, #2ecc71);
|
|
color: var(--fs-text-on-action);
|
|
cursor: default;
|
|
}
|
|
.tag-check {
|
|
font-size: 0.7rem;
|
|
}
|
|
.btn-dismiss-tags {
|
|
padding: 0.1rem 0.4rem;
|
|
border: none;
|
|
background: none;
|
|
color: var(--color-text-muted);
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
line-height: 1;
|
|
}
|
|
.btn-dismiss-tags:hover {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
/* ── Assist panel ── */
|
|
.assist-panel {
|
|
width: 320px;
|
|
flex-shrink: 0;
|
|
border-left: 1px solid var(--color-border);
|
|
background: var(--color-bg-secondary);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
.assist-panel-header {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.65rem 0.9rem;
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
.assist-panel-title {
|
|
flex: 1;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
color: var(--color-text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.btn-proofread {
|
|
padding: 0.3rem 0.65rem;
|
|
font-size: 0.78rem;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
background: none;
|
|
color: var(--color-text-secondary);
|
|
cursor: pointer;
|
|
}
|
|
.btn-proofread:hover:not(:disabled) {
|
|
border-color: var(--color-primary);
|
|
color: var(--color-primary);
|
|
}
|
|
.btn-proofread:disabled {
|
|
opacity: 0.5;
|
|
cursor: default;
|
|
}
|
|
.btn-close-assist {
|
|
padding: 0.1rem 0.4rem;
|
|
border: none;
|
|
background: none;
|
|
color: var(--color-text-muted);
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
line-height: 1;
|
|
}
|
|
.assist-panel-body {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding: 0.75rem 0.9rem 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.6rem;
|
|
}
|
|
|
|
/* Section list */
|
|
.assist-sections-label {
|
|
font-size: 0.72rem;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: var(--color-text-muted);
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
.assist-sections {
|
|
border: 1px solid var(--color-input-border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-bg);
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
.assist-section-item {
|
|
padding: 0.35rem 0.7rem;
|
|
cursor: pointer;
|
|
font-size: 0.82rem;
|
|
border-left: 3px solid transparent;
|
|
color: var(--color-text);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.assist-section-item:hover {
|
|
background: var(--color-bg-secondary);
|
|
}
|
|
.assist-section-item.selected {
|
|
border-left-color: var(--color-primary);
|
|
background: var(--color-bg-secondary);
|
|
font-weight: 500;
|
|
}
|
|
.assist-empty,
|
|
.assist-hint {
|
|
padding: 0.6rem 0.7rem;
|
|
font-size: 0.82rem;
|
|
color: var(--color-text-muted);
|
|
}
|
|
.assist-target-preview {
|
|
font-size: 0.8rem;
|
|
color: var(--color-text-secondary);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.assist-target-preview em {
|
|
font-style: normal;
|
|
color: var(--color-text);
|
|
}
|
|
.assist-instruction {
|
|
width: 100%;
|
|
padding: 0.5rem 0.65rem;
|
|
border: 1px solid var(--color-input-border);
|
|
border-radius: var(--radius-sm);
|
|
font-size: 0.88rem;
|
|
font-family: inherit;
|
|
resize: vertical;
|
|
background: var(--color-bg);
|
|
color: var(--color-text);
|
|
box-sizing: border-box;
|
|
min-height: 3.5rem;
|
|
}
|
|
.assist-input-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
.btn-generate {
|
|
padding: 0.4rem 0.9rem;
|
|
background: var(--color-primary);
|
|
color: var(--fs-text-on-action);
|
|
border: none;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
font-size: 0.85rem;
|
|
}
|
|
.btn-generate:disabled {
|
|
opacity: 0.5;
|
|
cursor: default;
|
|
}
|
|
.btn-clear {
|
|
padding: 0.4rem 0.9rem;
|
|
background: none;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
font-size: 0.85rem;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* Streaming */
|
|
.assist-streaming-label {
|
|
font-size: 0.8rem;
|
|
color: var(--color-text-secondary);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.assist-preview-box {
|
|
padding: 0.65rem;
|
|
border: 1px solid var(--color-input-border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-bg);
|
|
font-size: 0.9rem;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
.typing-indicator {
|
|
color: var(--color-text-muted);
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.15em;
|
|
animation: blink 1s step-end infinite;
|
|
}
|
|
@keyframes blink {
|
|
50% { opacity: 0; }
|
|
}
|
|
|
|
/* Active hint shown in the panel while output is inline */
|
|
.assist-active-hint {
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: 0.8rem;
|
|
color: var(--color-text-muted);
|
|
text-align: center;
|
|
}
|
|
|
|
/* Error */
|
|
.assist-error {
|
|
padding: 0.5rem 0.75rem;
|
|
background: color-mix(in srgb, var(--color-danger) 10%, transparent);
|
|
border: 1px solid var(--color-danger);
|
|
border-radius: var(--radius-sm);
|
|
font-size: 0.85rem;
|
|
color: var(--color-danger);
|
|
}
|
|
|
|
/* Review / diff */
|
|
.assist-review-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
.btn-toggle-view {
|
|
font-size: 0.75rem;
|
|
color: var(--color-primary);
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
}
|
|
.diff-view {
|
|
border: 1px solid var(--color-input-border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-bg);
|
|
font-size: 0.82rem;
|
|
font-family: monospace;
|
|
max-height: 340px;
|
|
overflow-y: auto;
|
|
padding: 0.4rem 0;
|
|
}
|
|
.diff-line {
|
|
display: flex;
|
|
align-items: baseline;
|
|
padding: 0.05rem 0.5rem;
|
|
line-height: 1.5;
|
|
}
|
|
.diff-delete {
|
|
background: color-mix(in srgb, var(--color-danger) 12%, transparent);
|
|
color: var(--color-danger);
|
|
}
|
|
.diff-insert {
|
|
background: color-mix(in srgb, var(--color-success) 12%, transparent);
|
|
color: var(--color-success);
|
|
}
|
|
.diff-equal {
|
|
color: var(--color-text-muted);
|
|
}
|
|
.diff-marker {
|
|
flex-shrink: 0;
|
|
width: 1rem;
|
|
text-align: center;
|
|
user-select: none;
|
|
font-weight: 500;
|
|
}
|
|
.diff-text {
|
|
flex: 1;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
.diff-empty {
|
|
padding: 0.5rem;
|
|
color: var(--color-text-muted);
|
|
font-size: 0.82rem;
|
|
}
|
|
.assist-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
.btn-accept {
|
|
padding: 0.4rem 1rem;
|
|
background: var(--color-success);
|
|
color: var(--fs-text-on-action);
|
|
border: none;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
font-size: 0.85rem;
|
|
}
|
|
.btn-reject {
|
|
padding: 0.4rem 1rem;
|
|
background: none;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
font-size: 0.85rem;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* ── Modal ── */
|
|
.modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: var(--color-overlay);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 200;
|
|
}
|
|
.modal-card {
|
|
background: var(--color-bg-card);
|
|
border-radius: var(--radius-md);
|
|
padding: 1.5rem;
|
|
max-width: 400px;
|
|
width: 90%;
|
|
box-shadow: 0 8px 32px var(--color-shadow);
|
|
}
|
|
.modal-title {
|
|
margin: 0 0 0.5rem;
|
|
font-size: 1.1rem;
|
|
}
|
|
.modal-message {
|
|
margin: 0 0 1.25rem;
|
|
color: var(--color-text-secondary);
|
|
font-size: 0.95rem;
|
|
}
|
|
.modal-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
justify-content: flex-end;
|
|
}
|
|
.modal-btn {
|
|
padding: 0.45rem 1rem;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-bg-card);
|
|
color: var(--color-text);
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
}
|
|
.modal-btn-danger {
|
|
background: var(--color-danger);
|
|
color: var(--fs-text-on-action);
|
|
border-color: var(--color-danger);
|
|
}
|
|
|
|
/* ── Floating inline assist button (teleported to body) ── */
|
|
.inline-assist-btn {
|
|
position: fixed;
|
|
z-index: 100;
|
|
transform: translateX(-50%);
|
|
padding: 0.3rem 0.75rem;
|
|
background: var(--color-primary);
|
|
color: var(--fs-text-on-action);
|
|
border: none;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
font-size: 0.8rem;
|
|
box-shadow: 0 2px 8px var(--color-shadow);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* ── Sidebar shared styles ── */
|
|
.sidebar-toggle {
|
|
display: none;
|
|
width: 100%;
|
|
padding: 0.6rem 1rem;
|
|
background: var(--color-bg-secondary);
|
|
border: none;
|
|
border-bottom: 1px solid var(--color-border);
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
color: var(--color-text-secondary);
|
|
cursor: pointer;
|
|
text-align: left;
|
|
font-family: inherit;
|
|
}
|
|
.sidebar-content {
|
|
padding: 0.75rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.65rem;
|
|
}
|
|
.sb-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
.sb-label {
|
|
font-size: 0.78rem;
|
|
font-weight: 500;
|
|
color: var(--color-text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.sb-select,
|
|
.sb-input {
|
|
width: 100%;
|
|
padding: 0.35rem 0.5rem;
|
|
border: 1px solid var(--color-input-border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-bg-card);
|
|
color: var(--color-text);
|
|
font-size: 0.875rem;
|
|
font-family: inherit;
|
|
box-sizing: border-box;
|
|
}
|
|
.sb-select:focus,
|
|
.sb-input:focus {
|
|
outline: none;
|
|
border-color: var(--color-primary);
|
|
}
|
|
.sb-divider {
|
|
height: 1px;
|
|
background: var(--color-border);
|
|
margin: 0.15rem 0;
|
|
}
|
|
@media (max-width: 720px) {
|
|
.sidebar-toggle { display: block; }
|
|
.sidebar-content {
|
|
display: none;
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
.sidebar-content.sidebar-open { display: flex; }
|
|
}
|
|
|
|
/* ── Mobile ── */
|
|
@media (max-width: 768px) {
|
|
.editor-body {
|
|
flex-direction: column;
|
|
}
|
|
.assist-panel {
|
|
width: auto;
|
|
flex: 0 0 45%;
|
|
border-left: none;
|
|
border-top: 1px solid var(--color-border);
|
|
border-radius: var(--radius-md) var(--radius-md) 0 0;
|
|
}
|
|
.editor-header {
|
|
padding: 0.75rem 1rem 0.5rem;
|
|
}
|
|
.editor-main {
|
|
padding: 0.5rem 1rem 1rem;
|
|
}
|
|
}
|