Dark theme improvements
This commit is contained in:
Nick Beckley
parent
69fb21c5eb
commit
8f860f6124
@ -25,6 +25,17 @@
|
||||
--plotline-panel: var(--plotline-surface);
|
||||
--plotline-line: var(--plotline-border-soft);
|
||||
--plotline-soft: var(--plotline-accent-soft);
|
||||
--app-bg: var(--plotline-bg);
|
||||
--app-surface: var(--plotline-surface);
|
||||
--app-surface-alt: var(--plotline-surface-elevated);
|
||||
--app-text: var(--plotline-text);
|
||||
--app-text-muted: var(--plotline-text-muted);
|
||||
--app-border: var(--plotline-border-soft);
|
||||
--app-link: var(--plotline-accent-dark);
|
||||
--app-input-bg: rgba(255, 253, 248, 0.9);
|
||||
--app-input-text: var(--plotline-text);
|
||||
--app-card-bg: var(--plotline-surface);
|
||||
--app-timeline-bg: var(--plotline-timeline-bg);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
@ -53,6 +64,34 @@
|
||||
--plotline-panel: var(--plotline-surface);
|
||||
--plotline-line: var(--plotline-border-soft);
|
||||
--plotline-soft: var(--plotline-accent-soft);
|
||||
--app-bg: #14110f;
|
||||
--app-surface: rgba(35, 29, 25, 0.96);
|
||||
--app-surface-alt: #2a231e;
|
||||
--app-text: #f4eadc;
|
||||
--app-text-muted: #cdbba7;
|
||||
--app-border: rgba(231, 214, 190, 0.2);
|
||||
--app-link: #f1c38f;
|
||||
--app-input-bg: #211b17;
|
||||
--app-input-text: #f4eadc;
|
||||
--app-card-bg: rgba(35, 29, 25, 0.96);
|
||||
--app-timeline-bg: #211b17;
|
||||
--bs-body-bg: var(--app-bg);
|
||||
--bs-body-color: var(--app-text);
|
||||
--bs-secondary-color: var(--app-text-muted);
|
||||
--bs-tertiary-color: #a99886;
|
||||
--bs-border-color: var(--app-border);
|
||||
--bs-link-color: var(--app-link);
|
||||
--bs-link-hover-color: #ffd5a6;
|
||||
--bs-card-bg: var(--app-card-bg);
|
||||
--bs-card-color: var(--app-text);
|
||||
--bs-modal-bg: var(--app-surface-alt);
|
||||
--bs-modal-color: var(--app-text);
|
||||
--bs-dropdown-bg: var(--app-surface-alt);
|
||||
--bs-dropdown-color: var(--app-text);
|
||||
--bs-list-group-bg: var(--app-surface);
|
||||
--bs-list-group-color: var(--app-text);
|
||||
--bs-table-color: var(--app-text);
|
||||
--bs-table-bg: transparent;
|
||||
}
|
||||
|
||||
body {
|
||||
@ -952,21 +991,59 @@ a:focus-visible {
|
||||
}
|
||||
|
||||
[data-theme="dark"] body {
|
||||
color: var(--app-text);
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(212, 154, 98, 0.12), transparent 34rem),
|
||||
linear-gradient(135deg, var(--plotline-bg-warm), var(--plotline-bg) 52%, #0f0d0c);
|
||||
}
|
||||
|
||||
[data-theme="dark"] a:not(.btn) {
|
||||
color: var(--app-link);
|
||||
text-decoration-color: rgba(241, 195, 143, 0.36);
|
||||
}
|
||||
|
||||
[data-theme="dark"] a:not(.btn):hover,
|
||||
[data-theme="dark"] a:not(.btn):focus {
|
||||
color: var(--bs-link-hover-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .text-muted,
|
||||
[data-theme="dark"] .form-text,
|
||||
[data-theme="dark"] .lead-text,
|
||||
[data-theme="dark"] .scene-summary,
|
||||
[data-theme="dark"] .timeline-chapter-title span,
|
||||
[data-theme="dark"] .timeline-book-title span,
|
||||
[data-theme="dark"] .plotline-nav .nav-link,
|
||||
[data-theme="dark"] .plotline-nav .navbar-text,
|
||||
[data-theme="dark"] .plain-card p,
|
||||
[data-theme="dark"] .inspector-empty,
|
||||
[data-theme="dark"] .plotline-confirm-modal .modal-body,
|
||||
[data-theme="dark"] .timeline-setting-card small {
|
||||
color: var(--app-text-muted) !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .plotline-nav {
|
||||
background: rgba(29, 23, 20, 0.92) !important;
|
||||
border-bottom-color: var(--plotline-border-soft) !important;
|
||||
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .plotline-nav .nav-link:hover,
|
||||
[data-theme="dark"] .plotline-nav .nav-link:focus,
|
||||
[data-theme="dark"] .plotline-nav .nav-link.active {
|
||||
color: var(--app-link) !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .navbar-toggler {
|
||||
border-color: var(--plotline-border-soft);
|
||||
}
|
||||
|
||||
[data-theme="dark"] h1,
|
||||
[data-theme="dark"] h2,
|
||||
[data-theme="dark"] h3,
|
||||
[data-theme="dark"] h4,
|
||||
[data-theme="dark"] h5,
|
||||
[data-theme="dark"] h6,
|
||||
[data-theme="dark"] .page-heading h1,
|
||||
[data-theme="dark"] .workspace-heading h1,
|
||||
[data-theme="dark"] .timeline-scene-card strong,
|
||||
@ -976,16 +1053,24 @@ a:focus-visible {
|
||||
[data-theme="dark"] .plain-card h3,
|
||||
[data-theme="dark"] .context-title strong,
|
||||
[data-theme="dark"] .asset-card h2,
|
||||
[data-theme="dark"] .character-card h2 {
|
||||
color: var(--plotline-text);
|
||||
[data-theme="dark"] .character-card h2,
|
||||
[data-theme="dark"] .inspector-header h2,
|
||||
[data-theme="dark"] .inspector-empty h2,
|
||||
[data-theme="dark"] .inspector-section h3,
|
||||
[data-theme="dark"] .story-bible-card h3,
|
||||
[data-theme="dark"] .timeline-setting-card strong {
|
||||
color: var(--app-text);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .plain-card,
|
||||
[data-theme="dark"] .card,
|
||||
[data-theme="dark"] .empty-panel,
|
||||
[data-theme="dark"] .edit-panel,
|
||||
[data-theme="dark"] .list-section,
|
||||
[data-theme="dark"] .list-group-item,
|
||||
[data-theme="dark"] .story-bible-section,
|
||||
[data-theme="dark"] .story-bible-card,
|
||||
[data-theme="dark"] .story-bible-nav,
|
||||
[data-theme="dark"] .archive-item-card,
|
||||
[data-theme="dark"] .warning-card,
|
||||
[data-theme="dark"] .warning-mini-card,
|
||||
@ -1005,11 +1090,22 @@ a:focus-visible {
|
||||
[data-theme="dark"] .timeline-preset-panel,
|
||||
[data-theme="dark"] .attachment-card,
|
||||
[data-theme="dark"] .attachment-preview-row,
|
||||
[data-theme="dark"] .attachment-thumb,
|
||||
[data-theme="dark"] .asset-mini-item,
|
||||
[data-theme="dark"] .archive-empty {
|
||||
color: var(--plotline-text);
|
||||
background: var(--plotline-surface);
|
||||
border-color: var(--plotline-border-soft);
|
||||
[data-theme="dark"] .archive-empty,
|
||||
[data-theme="dark"] .writer-dashboard-panel,
|
||||
[data-theme="dark"] .writer-dashboard-panel:first-child,
|
||||
[data-theme="dark"] .writer-queue-card,
|
||||
[data-theme="dark"] .writer-mini-card,
|
||||
[data-theme="dark"] .timeline-setting-card,
|
||||
[data-theme="dark"] .timeline-setting-card:has(input:checked),
|
||||
[data-theme="dark"] .scene-overview-card,
|
||||
[data-theme="dark"] .inspector-section,
|
||||
[data-theme="dark"] .inspector-quick-nav,
|
||||
[data-theme="dark"] .inspector-accordion-toggle {
|
||||
color: var(--app-text);
|
||||
background: var(--app-surface);
|
||||
border-color: var(--app-border);
|
||||
box-shadow: var(--plotline-shadow-subtle);
|
||||
}
|
||||
|
||||
@ -1017,20 +1113,23 @@ a:focus-visible {
|
||||
[data-theme="dark"] .timeline-shell {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(42, 35, 30, 0.96), rgba(29, 24, 21, 0.96)),
|
||||
var(--plotline-timeline-bg);
|
||||
border-color: var(--plotline-border-soft);
|
||||
var(--app-timeline-bg);
|
||||
border-color: var(--app-border);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .timeline-section-header,
|
||||
[data-theme="dark"] .metric-lane-label,
|
||||
[data-theme="dark"] .metric-shape-controls,
|
||||
[data-theme="dark"] .metric-chart-frame,
|
||||
[data-theme="dark"] .lane-board-heading,
|
||||
[data-theme="dark"] .plot-lane-board-heading,
|
||||
[data-theme="dark"] .pacing-heading,
|
||||
[data-theme="dark"] .lane-group-heading,
|
||||
[data-theme="dark"] .timeline-chapter-title,
|
||||
[data-theme="dark"] .timeline-book-title {
|
||||
color: var(--plotline-accent-dark);
|
||||
color: var(--app-link);
|
||||
background: rgba(37, 31, 27, 0.96);
|
||||
border-color: var(--plotline-border-soft);
|
||||
border-color: var(--app-border);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .timeline-project-title {
|
||||
@ -1050,9 +1149,9 @@ a:focus-visible {
|
||||
[data-theme="dark"] .timeline-placeholder-cell,
|
||||
[data-theme="dark"] .metric-graph-points,
|
||||
[data-theme="dark"] .timeline-minimap {
|
||||
color: var(--plotline-text);
|
||||
color: var(--app-text);
|
||||
background: rgba(42, 35, 30, 0.9);
|
||||
border-color: var(--plotline-border-soft);
|
||||
border-color: var(--app-border);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .timeline-scene-card,
|
||||
@ -1087,28 +1186,46 @@ a:focus-visible {
|
||||
[data-theme="dark"] .location-pill,
|
||||
[data-theme="dark"] .archive-pill,
|
||||
[data-theme="dark"] .badge,
|
||||
[data-theme="dark"] .badge.text-bg-light,
|
||||
[data-theme="dark"] .status-pill,
|
||||
[data-theme="dark"] .scenario-tag,
|
||||
[data-theme="dark"] .plain-preview {
|
||||
color: var(--plotline-text);
|
||||
[data-theme="dark"] .plain-preview,
|
||||
[data-theme="dark"] .soft-count,
|
||||
[data-theme="dark"] .attachment-kind,
|
||||
[data-theme="dark"] .preset-chip,
|
||||
[data-theme="dark"] .story-bible-meta span {
|
||||
color: var(--app-text);
|
||||
background: rgba(212, 154, 98, 0.14);
|
||||
border-color: rgba(212, 154, 98, 0.24);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .badge.text-bg-warning,
|
||||
[data-theme="dark"] .warning-placeholder.active {
|
||||
color: #ffe4b8 !important;
|
||||
background: rgba(224, 173, 101, 0.22) !important;
|
||||
border-color: rgba(224, 173, 101, 0.36);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .badge.text-bg-success {
|
||||
color: #c8f0ce !important;
|
||||
background: rgba(145, 201, 154, 0.16) !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .form-control,
|
||||
[data-theme="dark"] .form-select,
|
||||
[data-theme="dark"] textarea,
|
||||
[data-theme="dark"] input,
|
||||
[data-theme="dark"] select {
|
||||
color: var(--plotline-text);
|
||||
background-color: #211b17;
|
||||
border-color: var(--plotline-border-soft);
|
||||
color: var(--app-input-text);
|
||||
background-color: var(--app-input-bg);
|
||||
border-color: var(--app-border);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .form-control::placeholder,
|
||||
[data-theme="dark"] textarea::placeholder,
|
||||
[data-theme="dark"] input::placeholder {
|
||||
color: #8f8172;
|
||||
color: #a99886;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .form-control:focus,
|
||||
@ -1118,26 +1235,37 @@ a:focus-visible {
|
||||
box-shadow: 0 0 0 0.2rem rgba(212, 154, 98, 0.2);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .form-control:disabled,
|
||||
[data-theme="dark"] .form-select:disabled,
|
||||
[data-theme="dark"] input:disabled,
|
||||
[data-theme="dark"] select:disabled,
|
||||
[data-theme="dark"] textarea:disabled {
|
||||
color: #a99886;
|
||||
background-color: #1b1613;
|
||||
border-color: rgba(231, 214, 190, 0.12);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .table {
|
||||
--bs-table-color: var(--plotline-text);
|
||||
--bs-table-color: var(--app-text);
|
||||
--bs-table-bg: transparent;
|
||||
--bs-table-border-color: var(--plotline-border-soft);
|
||||
--bs-table-striped-color: var(--plotline-text);
|
||||
--bs-table-border-color: var(--app-border);
|
||||
--bs-table-striped-color: var(--app-text);
|
||||
--bs-table-striped-bg: rgba(255, 255, 255, 0.035);
|
||||
--bs-table-hover-color: var(--plotline-text);
|
||||
--bs-table-hover-color: var(--app-text);
|
||||
--bs-table-hover-bg: rgba(212, 154, 98, 0.1);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .modal-content,
|
||||
[data-theme="dark"] .plotline-confirm-modal {
|
||||
color: var(--plotline-text);
|
||||
background: var(--plotline-surface-elevated);
|
||||
border-color: var(--plotline-border-soft);
|
||||
color: var(--app-text);
|
||||
background: var(--app-surface-alt);
|
||||
border-color: var(--app-border);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .modal-header,
|
||||
[data-theme="dark"] .modal-footer {
|
||||
border-color: var(--plotline-border-soft);
|
||||
border-color: var(--app-border);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .btn-close {
|
||||
@ -1145,12 +1273,46 @@ a:focus-visible {
|
||||
}
|
||||
|
||||
[data-theme="dark"] .dropdown-menu {
|
||||
--bs-dropdown-color: var(--plotline-text);
|
||||
--bs-dropdown-bg: var(--plotline-surface-elevated);
|
||||
--bs-dropdown-border-color: var(--plotline-border-soft);
|
||||
--bs-dropdown-link-color: var(--plotline-text);
|
||||
--bs-dropdown-link-hover-color: var(--plotline-accent-dark);
|
||||
--bs-dropdown-color: var(--app-text);
|
||||
--bs-dropdown-bg: var(--app-surface-alt);
|
||||
--bs-dropdown-border-color: var(--app-border);
|
||||
--bs-dropdown-link-color: var(--app-text);
|
||||
--bs-dropdown-link-hover-color: var(--app-link);
|
||||
--bs-dropdown-link-hover-bg: rgba(212, 154, 98, 0.12);
|
||||
--bs-dropdown-link-active-color: #1c120d;
|
||||
--bs-dropdown-link-active-bg: var(--plotline-accent-dark);
|
||||
--bs-dropdown-link-disabled-color: #8f8172;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .btn-outline-primary,
|
||||
[data-theme="dark"] .btn-outline-secondary,
|
||||
[data-theme="dark"] .btn-outline-info {
|
||||
--bs-btn-color: var(--app-link);
|
||||
--bs-btn-border-color: rgba(241, 195, 143, 0.46);
|
||||
--bs-btn-hover-color: #1c120d;
|
||||
--bs-btn-hover-bg: var(--app-link);
|
||||
--bs-btn-hover-border-color: var(--app-link);
|
||||
--bs-btn-active-color: #1c120d;
|
||||
--bs-btn-active-bg: var(--app-link);
|
||||
--bs-btn-active-border-color: var(--app-link);
|
||||
--bs-btn-disabled-color: #9c8d7d;
|
||||
--bs-btn-disabled-border-color: rgba(231, 214, 190, 0.18);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .btn-outline-danger {
|
||||
--bs-btn-color: #ffb2aa;
|
||||
--bs-btn-border-color: rgba(238, 142, 131, 0.5);
|
||||
--bs-btn-hover-color: #2a1210;
|
||||
--bs-btn-hover-bg: #ffb2aa;
|
||||
--bs-btn-hover-border-color: #ffb2aa;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .nav-tabs {
|
||||
--bs-nav-tabs-border-color: var(--app-border);
|
||||
--bs-nav-tabs-link-hover-border-color: rgba(241, 195, 143, 0.28);
|
||||
--bs-nav-tabs-link-active-color: var(--app-text);
|
||||
--bs-nav-tabs-link-active-bg: var(--app-surface);
|
||||
--bs-nav-tabs-link-active-border-color: var(--app-border);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .alert-info {
|
||||
|
||||
@ -605,6 +605,7 @@ body.timeline-inspector-resizing {
|
||||
flex: 0 0 auto;
|
||||
width: calc((var(--chapter-scene-count) * var(--timeline-scene-width)) + ((var(--chapter-scene-count) - 1) * var(--timeline-grid-gap)));
|
||||
min-width: var(--timeline-scene-width);
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
background: rgba(238, 245, 242, 0.7);
|
||||
outline: 1px solid #d4ded8;
|
||||
@ -629,8 +630,10 @@ body.timeline-inspector-resizing {
|
||||
|
||||
.timeline-scenes {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--chapter-scene-count), var(--timeline-scene-width));
|
||||
grid-template-columns: repeat(var(--chapter-scene-count), minmax(0, 1fr));
|
||||
gap: var(--timeline-grid-gap);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
min-height: 190px;
|
||||
padding: 0;
|
||||
}
|
||||
@ -640,8 +643,9 @@ body.timeline-inspector-resizing {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
width: var(--timeline-scene-width);
|
||||
min-width: var(--timeline-scene-width);
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--plotline-line);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user