bvandeusenandClaude Fable 5
2a6c55dacb
CI & Build / Python lint (push) Successful in 4s
CI & Build / Plugin hooks (push) Successful in 9s
CI & Build / integration (push) Successful in 22s
CI & Build / TypeScript typecheck (push) Successful in 32s
CI & Build / Python tests (push) Successful in 57s
CI & Build / Build & push image (push) Successful in 16s
- assets/auth-shared.css: the five auth views carried byte-identical scoped
copies of the page/card/brand/footer/field/input/error rules (~60 lines
each); they now load one stylesheet the way the editors load
editor-shared.css. .closed-msg/.error-block/.success-msg (identical bodies)
are one .auth-note; the form rules are scoped under .auth-card so nothing
leaks into the rest of the app.
- api/client.apiErrorMessage(e, fallback): the one place the {"error"} envelope
is unpacked; replaces ten six-line `"body" in e` catch blocks.
- utils/dateFormat: fmtDate / fmtStamp / fmtLogStamp replace eight local
formatDate/formatTime copies (three byte-identical pairs); the file’s old
Calendar/Home helpers had no callers and are gone. useRelativeTime gains
relativeTimeOrDate for the two workspace panels’ identical variant.
- components.css now owns the .modal-* shape (overlay/card/title/message/
actions/btn/primary/danger). It was copied into four views and lived in
editor-shared.css, which ConfirmDialog — styleless, teleported to <body> —
silently depended on: opened from SnippetDetailView before any editor view
had loaded, it rendered unstyled. Views keep only their own overrides.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
511 lines
12 KiB
CSS
511 lines
12 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(--fs-border-color);
|
|
}
|
|
.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;
|
|
}
|
|
/* 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. */
|
|
/* Delete: Oxblood action-destructive per Hybrid rule. Should be paired
|
|
with a Trash icon at the call site to reinforce intent. */
|
|
.title-input:focus {
|
|
outline: none;
|
|
border-bottom-color: var(--fs-accent);
|
|
}
|
|
.title-input::placeholder {
|
|
color: var(--fs-text-tertiary);
|
|
font-weight: 400;
|
|
}
|
|
.editor-tabs {
|
|
display: flex;
|
|
gap: 0;
|
|
border-bottom: 1px solid var(--fs-border-color);
|
|
}
|
|
.tab {
|
|
padding: 0.45rem 1rem;
|
|
border: none;
|
|
background: none;
|
|
color: var(--fs-text-secondary);
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
border-bottom: 2px solid transparent;
|
|
}
|
|
.tab.active {
|
|
color: var(--fs-accent);
|
|
border-bottom-color: var(--fs-accent);
|
|
}
|
|
.preview-pane {
|
|
padding: 0.75rem;
|
|
border: 1px solid var(--fs-border-color);
|
|
border-radius: var(--fs-radius-sm);
|
|
min-height: 200px;
|
|
background: var(--fs-surface-raised);
|
|
}
|
|
|
|
/* ── Tag suggestions ── */
|
|
.tag-suggest-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
}
|
|
.tag-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.2rem;
|
|
padding: 0.2rem 0.55rem;
|
|
border: 1px solid var(--fs-accent);
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
color: var(--fs-accent);
|
|
font-size: 0.8rem;
|
|
cursor: pointer;
|
|
transition: background 0.15s, color 0.15s;
|
|
}
|
|
.tag-pill:hover:not(:disabled) {
|
|
background: var(--fs-accent);
|
|
color: var(--fs-text-on-action);
|
|
}
|
|
.tag-pill.applied {
|
|
background: var(--fs-success);
|
|
border-color: var(--fs-success);
|
|
color: var(--fs-text-on-action);
|
|
cursor: default;
|
|
}
|
|
.tag-check {
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
/* ── Assist panel ── */
|
|
.assist-panel {
|
|
width: 320px;
|
|
flex-shrink: 0;
|
|
border-left: 1px solid var(--fs-border-color);
|
|
background: var(--fs-surface-raised);
|
|
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(--fs-border-color);
|
|
}
|
|
.assist-panel-title {
|
|
flex: 1;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
color: var(--fs-text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.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(--fs-text-tertiary);
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
.assist-sections {
|
|
border: 1px solid var(--fs-border-color);
|
|
border-radius: var(--fs-radius-sm);
|
|
background: var(--fs-surface-page);
|
|
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(--fs-text-primary);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.assist-section-item:hover {
|
|
background: var(--fs-surface-raised);
|
|
}
|
|
.assist-section-item.selected {
|
|
border-left-color: var(--fs-accent);
|
|
background: var(--fs-surface-raised);
|
|
font-weight: 500;
|
|
}
|
|
.assist-empty,
|
|
.assist-hint {
|
|
padding: 0.6rem 0.7rem;
|
|
font-size: 0.82rem;
|
|
color: var(--fs-text-tertiary);
|
|
}
|
|
.assist-target-preview {
|
|
font-size: 0.8rem;
|
|
color: var(--fs-text-secondary);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.assist-target-preview em {
|
|
font-style: normal;
|
|
color: var(--fs-text-primary);
|
|
}
|
|
.assist-instruction {
|
|
width: 100%;
|
|
padding: 0.5rem 0.65rem;
|
|
border: 1px solid var(--fs-border-color);
|
|
border-radius: var(--fs-radius-sm);
|
|
font-size: 0.88rem;
|
|
font-family: inherit;
|
|
resize: vertical;
|
|
background: var(--fs-surface-page);
|
|
color: var(--fs-text-primary);
|
|
box-sizing: border-box;
|
|
min-height: 3.5rem;
|
|
}
|
|
.assist-input-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* Streaming */
|
|
.assist-streaming-label {
|
|
font-size: 0.8rem;
|
|
color: var(--fs-text-secondary);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.assist-preview-box {
|
|
padding: 0.65rem;
|
|
border: 1px solid var(--fs-border-color);
|
|
border-radius: var(--fs-radius-sm);
|
|
background: var(--fs-surface-page);
|
|
font-size: 0.9rem;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
.typing-indicator {
|
|
color: var(--fs-text-tertiary);
|
|
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(--fs-text-tertiary);
|
|
text-align: center;
|
|
}
|
|
|
|
/* Error */
|
|
.assist-error {
|
|
padding: 0.5rem 0.75rem;
|
|
background: color-mix(in srgb, var(--fs-error) 10%, transparent);
|
|
border: 1px solid var(--fs-error);
|
|
border-radius: var(--fs-radius-sm);
|
|
font-size: 0.85rem;
|
|
color: var(--fs-error);
|
|
}
|
|
|
|
/* Review / diff */
|
|
.assist-review-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
color: var(--fs-text-secondary);
|
|
}
|
|
.diff-view {
|
|
border: 1px solid var(--fs-border-color);
|
|
border-radius: var(--fs-radius-sm);
|
|
background: var(--fs-surface-page);
|
|
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(--fs-error) 12%, transparent);
|
|
color: var(--fs-error);
|
|
}
|
|
.diff-insert {
|
|
background: color-mix(in srgb, var(--fs-success) 12%, transparent);
|
|
color: var(--fs-success);
|
|
}
|
|
.diff-equal {
|
|
color: var(--fs-text-tertiary);
|
|
}
|
|
.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(--fs-text-tertiary);
|
|
font-size: 0.82rem;
|
|
}
|
|
.assist-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* ── 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(--fs-action-primary);
|
|
color: var(--fs-text-on-action);
|
|
border: none;
|
|
border-radius: var(--fs-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(--fs-surface-raised);
|
|
border: none;
|
|
border-bottom: 1px solid var(--fs-border-color);
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
color: var(--fs-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(--fs-text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.sb-select,
|
|
.sb-input {
|
|
width: 100%;
|
|
padding: 0.35rem 0.5rem;
|
|
border: 1px solid var(--fs-border-color);
|
|
border-radius: var(--fs-radius-sm);
|
|
background: var(--fs-surface-raised);
|
|
color: var(--fs-text-primary);
|
|
font-size: 0.875rem;
|
|
font-family: inherit;
|
|
box-sizing: border-box;
|
|
}
|
|
.sb-select:focus,
|
|
.sb-input:focus {
|
|
outline: none;
|
|
border-color: var(--fs-accent);
|
|
}
|
|
.sb-divider {
|
|
height: 1px;
|
|
background: var(--fs-border-color);
|
|
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(--fs-border-color);
|
|
border-radius: var(--fs-radius-lg) var(--fs-radius-lg) 0 0;
|
|
}
|
|
.editor-header {
|
|
padding: 0.75rem 1rem 0.5rem;
|
|
}
|
|
.editor-main {
|
|
padding: 0.5rem 1rem 1rem;
|
|
}
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* Editor button aliases.
|
|
*
|
|
* These names are used across six views, so they alias onto the shared variants
|
|
* rather than every call site being rewritten — the class stays the app's, the
|
|
* appearance comes from components.css. Same reasoning as .btn-small: a name
|
|
* already in the templates is cheaper to point somewhere than to replace.
|
|
*
|
|
* They are @extend-shaped, which CSS lacks, so each carries the variant's own
|
|
* declarations. That is the one duplication this migration cannot remove — but
|
|
* it is duplication of a REFERENCE (a var()), not of a value, so a palette
|
|
* change still moves everything at once.
|
|
* ------------------------------------------------------------------------ */
|
|
|
|
.btn-accept,
|
|
.btn-generate,
|
|
.btn-save {
|
|
background: var(--fs-action-primary);
|
|
color: var(--fs-text-on-action);
|
|
border: none;
|
|
}
|
|
.btn-accept:not(:disabled):hover,
|
|
.btn-generate:not(:disabled):hover,
|
|
.btn-save:not(:disabled):hover {
|
|
background: var(--fs-action-primary-hover);
|
|
}
|
|
|
|
.btn-back,
|
|
.btn-clear,
|
|
.btn-reject,
|
|
.btn-proofread,
|
|
.btn-suggest-tags {
|
|
background: none;
|
|
border: var(--fs-border);
|
|
color: var(--fs-text-primary);
|
|
}
|
|
.btn-back:not(:disabled):hover,
|
|
.btn-clear:not(:disabled):hover,
|
|
.btn-reject:not(:disabled):hover,
|
|
.btn-proofread:not(:disabled):hover,
|
|
.btn-suggest-tags:not(:disabled):hover {
|
|
border: var(--fs-border-hover);
|
|
background: var(--fs-surface-hover);
|
|
}
|
|
|
|
.btn-delete {
|
|
background: var(--fs-action-destructive);
|
|
color: var(--fs-text-on-action);
|
|
border: none;
|
|
}
|
|
.btn-delete:not(:disabled):hover {
|
|
background: var(--fs-action-destructive-hover);
|
|
}
|
|
|
|
/* Shared geometry for every alias above. */
|
|
.btn-accept, .btn-generate, .btn-save, .btn-back, .btn-clear, .btn-reject,
|
|
.btn-delete, .btn-dismiss-tags, .btn-proofread, .btn-suggest-tags {
|
|
border-radius: var(--fs-radius-md);
|
|
font-family: var(--fs-font-body);
|
|
font-weight: var(--fs-weight-medium);
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
transition: background var(--fs-dur-fast) var(--fs-ease),
|
|
border-color var(--fs-dur-fast) var(--fs-ease),
|
|
color var(--fs-dur-fast) var(--fs-ease);
|
|
}
|
|
.btn-accept, .btn-generate, .btn-save, .btn-back, .btn-clear, .btn-reject,
|
|
.btn-delete {
|
|
padding: var(--fs-space-2) var(--fs-space-4);
|
|
font-size: var(--fs-size-label);
|
|
}
|
|
.btn-proofread, .btn-suggest-tags {
|
|
padding: var(--fs-space-1) var(--fs-space-3);
|
|
font-size: var(--fs-size-tiny);
|
|
}
|
|
.btn-dismiss-tags {
|
|
background: none;
|
|
border: none;
|
|
color: var(--fs-text-tertiary);
|
|
padding: 2px var(--fs-space-1);
|
|
font-size: var(--fs-size-tiny);
|
|
line-height: 1;
|
|
}
|
|
.btn-dismiss-tags:hover { color: var(--fs-text-primary); }
|
|
|
|
.btn-accept:disabled, .btn-generate:disabled, .btn-save:disabled,
|
|
.btn-back:disabled, .btn-clear:disabled, .btn-reject:disabled,
|
|
.btn-delete:disabled, .btn-proofread:disabled, .btn-suggest-tags:disabled,
|
|
.btn-dismiss-tags:disabled {
|
|
opacity: var(--fs-disabled-opacity);
|
|
cursor: not-allowed;
|
|
}
|