349 lines
8.4 KiB
CSS
349 lines
8.4 KiB
CSS
:root {
|
|
--plotline-bg: #f4efe6;
|
|
--plotline-bg-warm: #fbf8f0;
|
|
--plotline-surface: rgba(255, 252, 246, 0.94);
|
|
--plotline-surface-elevated: #fffdf8;
|
|
--plotline-border-soft: rgba(84, 68, 48, 0.14);
|
|
--plotline-text: #241f1b;
|
|
--plotline-text-muted: #74695d;
|
|
--plotline-accent: #7a4d2c;
|
|
--plotline-accent-dark: #59371f;
|
|
--plotline-accent-soft: #f2e2cf;
|
|
--plotline-secondary: #315f67;
|
|
--plotline-secondary-soft: #dfecef;
|
|
--plotline-danger: #963f36;
|
|
--plotline-warning: #b8762b;
|
|
--plotline-success: #4d7654;
|
|
--plotline-timeline-bg: #ede2d3;
|
|
--plotline-shadow-card: 0 14px 32px rgba(62, 45, 28, 0.08);
|
|
--plotline-shadow-subtle: 0 8px 20px rgba(62, 45, 28, 0.06);
|
|
--plotline-radius: 12px;
|
|
--plotline-radius-sm: 9px;
|
|
--plotline-ink: var(--plotline-text);
|
|
--plotline-muted: var(--plotline-text-muted);
|
|
--plotline-paper: var(--plotline-bg-warm);
|
|
--plotline-panel: var(--plotline-surface);
|
|
--plotline-line: var(--plotline-border-soft);
|
|
--plotline-soft: var(--plotline-accent-soft);
|
|
}
|
|
|
|
body {
|
|
color: var(--plotline-text);
|
|
background:
|
|
radial-gradient(circle at top left, rgba(185, 134, 83, 0.18), transparent 34rem),
|
|
linear-gradient(135deg, var(--plotline-bg-warm), var(--plotline-bg) 52%, #efe6d8);
|
|
font-family: "Segoe UI", "Aptos", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
.navbar-brand,
|
|
.context-title strong {
|
|
font-family: Georgia, "Times New Roman", serif;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
a {
|
|
color: var(--plotline-accent-dark);
|
|
text-decoration-color: rgba(122, 77, 44, 0.28);
|
|
text-underline-offset: 0.18em;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--plotline-secondary);
|
|
}
|
|
|
|
.plotline-nav {
|
|
background: rgba(255, 251, 243, 0.9) !important;
|
|
border-bottom: 1px solid rgba(84, 68, 48, 0.13) !important;
|
|
box-shadow: 0 8px 28px rgba(62, 45, 28, 0.06);
|
|
}
|
|
|
|
.navbar-brand {
|
|
color: var(--plotline-accent-dark) !important;
|
|
font-size: 1.35rem;
|
|
}
|
|
|
|
.plotline-nav .nav-link {
|
|
border-radius: 999px;
|
|
color: var(--plotline-text-muted) !important;
|
|
font-weight: 650;
|
|
padding-inline: 0.82rem;
|
|
}
|
|
|
|
.plotline-nav .nav-link:hover,
|
|
.plotline-nav .nav-link:focus {
|
|
color: var(--plotline-accent-dark) !important;
|
|
background: rgba(122, 77, 44, 0.1);
|
|
}
|
|
|
|
.page-heading h1,
|
|
.workspace-heading h1 {
|
|
color: #201a16;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.eyebrow {
|
|
color: var(--plotline-accent);
|
|
font-size: 0.72rem;
|
|
letter-spacing: 0.11em;
|
|
}
|
|
|
|
.lead-text,
|
|
.muted {
|
|
color: var(--plotline-text-muted) !important;
|
|
}
|
|
|
|
.plain-card,
|
|
.empty-panel,
|
|
.edit-panel,
|
|
.list-section,
|
|
.story-bible-section,
|
|
.story-bible-card,
|
|
.archive-item-card,
|
|
.warning-card,
|
|
.warning-mini-card,
|
|
.scenario-chapter,
|
|
.drag-drop-panel {
|
|
background: var(--plotline-surface);
|
|
border-color: var(--plotline-border-soft);
|
|
border-radius: var(--plotline-radius);
|
|
box-shadow: var(--plotline-shadow-subtle);
|
|
}
|
|
|
|
.plain-card,
|
|
.story-bible-card,
|
|
.archive-item-card,
|
|
.timeline-scene-card,
|
|
.inspector-section {
|
|
transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
|
|
}
|
|
|
|
.plain-card:hover,
|
|
.story-bible-card:hover,
|
|
.archive-item-card:hover {
|
|
border-color: rgba(122, 77, 44, 0.24);
|
|
box-shadow: var(--plotline-shadow-card);
|
|
}
|
|
|
|
.empty-panel {
|
|
background:
|
|
linear-gradient(135deg, rgba(255, 253, 248, 0.96), rgba(244, 229, 209, 0.72)),
|
|
var(--plotline-surface);
|
|
}
|
|
|
|
.btn {
|
|
border-radius: 999px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.01em;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.btn-primary {
|
|
--bs-btn-bg: var(--plotline-accent);
|
|
--bs-btn-border-color: var(--plotline-accent);
|
|
--bs-btn-hover-bg: var(--plotline-accent-dark);
|
|
--bs-btn-hover-border-color: var(--plotline-accent-dark);
|
|
--bs-btn-active-bg: var(--plotline-accent-dark);
|
|
--bs-btn-active-border-color: var(--plotline-accent-dark);
|
|
}
|
|
|
|
.btn-outline-primary,
|
|
.btn-outline-secondary {
|
|
--bs-btn-color: var(--plotline-accent-dark);
|
|
--bs-btn-border-color: rgba(122, 77, 44, 0.26);
|
|
--bs-btn-hover-color: var(--plotline-accent-dark);
|
|
--bs-btn-hover-bg: rgba(122, 77, 44, 0.12);
|
|
--bs-btn-hover-border-color: rgba(122, 77, 44, 0.38);
|
|
background: rgba(255, 252, 246, 0.72);
|
|
}
|
|
|
|
.btn-outline-danger {
|
|
--bs-btn-color: var(--plotline-danger);
|
|
--bs-btn-border-color: rgba(150, 63, 54, 0.34);
|
|
--bs-btn-hover-bg: var(--plotline-danger);
|
|
--bs-btn-hover-border-color: var(--plotline-danger);
|
|
}
|
|
|
|
.status-pill,
|
|
.purpose-chip,
|
|
.location-badge,
|
|
.archived-badge,
|
|
.severity-pill,
|
|
.overview-chip,
|
|
.story-bible-card-title span {
|
|
border: 1px solid rgba(84, 68, 48, 0.13);
|
|
border-radius: 999px;
|
|
background: rgba(255, 250, 241, 0.82);
|
|
color: var(--plotline-text-muted);
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
|
|
font-weight: 750;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.status-pill {
|
|
background: var(--plotline-secondary-soft);
|
|
color: #284f56;
|
|
}
|
|
|
|
.purpose-chip {
|
|
background: var(--plotline-accent-soft);
|
|
color: var(--plotline-accent-dark);
|
|
}
|
|
|
|
.severity-pill.warning,
|
|
.warning-placeholder.active {
|
|
background: #fbecd3;
|
|
color: #7b4b13;
|
|
border-color: rgba(184, 118, 43, 0.28);
|
|
}
|
|
|
|
.context-header {
|
|
background: rgba(255, 251, 243, 0.78);
|
|
border: 1px solid var(--plotline-border-soft);
|
|
border-radius: var(--plotline-radius);
|
|
box-shadow: var(--plotline-shadow-subtle);
|
|
}
|
|
|
|
.context-nav a {
|
|
border-radius: 999px;
|
|
color: var(--plotline-text-muted);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.context-nav a:hover,
|
|
.context-nav a:focus {
|
|
background: rgba(122, 77, 44, 0.1);
|
|
color: var(--plotline-accent-dark);
|
|
}
|
|
|
|
.timeline-workspace {
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 251, 244, 0.84), rgba(237, 226, 211, 0.66)),
|
|
var(--plotline-timeline-bg);
|
|
border: 1px solid rgba(84, 68, 48, 0.16);
|
|
border-radius: var(--plotline-radius);
|
|
box-shadow: 0 18px 44px rgba(62, 45, 28, 0.1);
|
|
}
|
|
|
|
.timeline-chapter {
|
|
background: rgba(255, 250, 242, 0.68);
|
|
border-color: rgba(84, 68, 48, 0.15);
|
|
border-radius: var(--plotline-radius);
|
|
}
|
|
|
|
.timeline-chapter-title,
|
|
.lane-board-heading,
|
|
.plot-lane-board-heading,
|
|
.lane-group-heading {
|
|
background: linear-gradient(135deg, rgba(255, 252, 246, 0.96), rgba(244, 229, 209, 0.86));
|
|
border-color: rgba(84, 68, 48, 0.16);
|
|
color: var(--plotline-accent-dark);
|
|
}
|
|
|
|
.timeline-scene-card {
|
|
background: linear-gradient(180deg, #fffdf8, #fbf3e8);
|
|
border: 1px solid rgba(84, 68, 48, 0.16);
|
|
border-radius: var(--plotline-radius-sm);
|
|
box-shadow: 0 10px 24px rgba(62, 45, 28, 0.08);
|
|
}
|
|
|
|
.timeline-scene-card:hover,
|
|
.timeline-scene-card.selected,
|
|
.timeline-scene-card.focus-match,
|
|
.timeline-scene-card.keyboard-focus {
|
|
border-color: rgba(122, 77, 44, 0.42);
|
|
box-shadow: 0 0 0 3px rgba(122, 77, 44, 0.11), 0 16px 30px rgba(62, 45, 28, 0.12);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.plot-lane-label,
|
|
.asset-lane-label,
|
|
.character-lane-label,
|
|
.plot-lane-slot,
|
|
.asset-lane-slot,
|
|
.character-lane-slot {
|
|
background: rgba(255, 251, 244, 0.74);
|
|
border-color: rgba(84, 68, 48, 0.14);
|
|
}
|
|
|
|
.thread-marker,
|
|
.asset-marker,
|
|
.character-appearance-pill {
|
|
box-shadow: 0 4px 12px rgba(62, 45, 28, 0.12);
|
|
}
|
|
|
|
.scene-inspector-panel,
|
|
.scene-inspector-root {
|
|
background: rgba(255, 251, 243, 0.72);
|
|
}
|
|
|
|
.inspector-section {
|
|
background: var(--plotline-surface-elevated);
|
|
border-color: var(--plotline-border-soft);
|
|
border-radius: var(--plotline-radius);
|
|
box-shadow: var(--plotline-shadow-subtle);
|
|
}
|
|
|
|
.scene-overview-card {
|
|
background: linear-gradient(135deg, #fffaf1, #f2e2cf);
|
|
}
|
|
|
|
.inspector-quick-nav,
|
|
.inspector-accordion-toggle {
|
|
background: rgba(255, 251, 243, 0.88);
|
|
border-color: rgba(84, 68, 48, 0.14);
|
|
}
|
|
|
|
.inspector-accordion-toggle {
|
|
color: var(--plotline-accent-dark);
|
|
border-radius: var(--plotline-radius-sm);
|
|
}
|
|
|
|
.inspector-accordion-toggle:hover {
|
|
background: rgba(122, 77, 44, 0.08);
|
|
}
|
|
|
|
.form-control,
|
|
.form-select {
|
|
border-color: rgba(84, 68, 48, 0.2);
|
|
border-radius: 10px;
|
|
background-color: rgba(255, 253, 248, 0.9);
|
|
}
|
|
|
|
.form-control:focus,
|
|
.form-select:focus,
|
|
.btn:focus-visible,
|
|
a:focus-visible {
|
|
border-color: rgba(122, 77, 44, 0.56);
|
|
box-shadow: 0 0 0 0.22rem rgba(122, 77, 44, 0.17);
|
|
outline: none;
|
|
}
|
|
|
|
.plotline-confirm-modal {
|
|
background: #fffaf2;
|
|
border: 1px solid rgba(84, 68, 48, 0.16);
|
|
border-radius: var(--plotline-radius);
|
|
box-shadow: 0 24px 60px rgba(38, 30, 22, 0.2);
|
|
}
|
|
|
|
.plotline-confirm-modal .modal-header,
|
|
.plotline-confirm-modal .modal-footer {
|
|
border-color: rgba(84, 68, 48, 0.12);
|
|
}
|
|
|
|
.alert-info,
|
|
.alert-warning {
|
|
border-color: rgba(84, 68, 48, 0.16);
|
|
border-radius: var(--plotline-radius-sm);
|
|
background: rgba(255, 250, 241, 0.92);
|
|
color: var(--plotline-text);
|
|
}
|
|
|
|
.table {
|
|
--bs-table-bg: transparent;
|
|
--bs-table-color: var(--plotline-text);
|
|
--bs-table-border-color: rgba(84, 68, 48, 0.12);
|
|
}
|