nick/PlotDirector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

PD-013C: Dark Theme Contrast Fixes.

Browse Source
This commit is contained in:
Nick Beckley 2026-06-18 20:21:11 +01:00
parent 99f7ce163e
commit 4acd72229f
3 changed files with 144 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
PlotLine/Views/Admin/ThemeAudit.cshtml
View File

@ -554,8 +554,8 @@
<section class="theme-audit-section">
<h2>Modals and Overlays</h2>
<button class="btn btn-primary btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#darkThemeAuditModal">Open modal</button>
<button class="plotline-help-icon ms-2" type="button" data-help-icon data-help-key="theme.audit" data-help-title="Help popover" data-help-summary="Sample help popover content." data-help-micro="Help trigger">?</button>
<div class="popover plotline-help-popover theme-audit-popover-sample bs-popover-bottom" role="tooltip">
<button class="plotline-help-icon ms-2" type="button" data-help-icon data-help-key="theme.audit" data-help-title="Help popover" data-help-summary="Sample help popover content." data-help-micro="Help trigger" data-theme-audit-dark-popover="true">?</button>
<div class="popover plotline-help-popover theme-audit-popover-sample bs-popover-bottom" role="tooltip" data-theme="dark" data-bs-theme="dark">
<div class="popover-arrow"></div>
<h3 class="popover-header">Help popover</h3>
<div class="popover-body">
@ -647,3 +647,21 @@
</section>
</section>
</div>
@section Scripts {
<script>
(() => {
document.querySelectorAll("[data-theme-audit-dark-popover]").forEach((trigger) => {
trigger.addEventListener("shown.bs.popover", () => {
const popoverId = trigger.getAttribute("aria-describedby");
const popover = popoverId ? document.getElementById(popoverId) : null;
if (!popover) return;
popover.dataset.theme = "dark";
popover.dataset.bsTheme = "dark";
popover.classList.add("theme-audit-dark-popover");
});
});
})();
</script>
}

150
PlotLine/wwwroot/css/plotline-theme.css
View File

@ -1249,13 +1249,59 @@ a:focus-visible {
[data-theme="dark"] .scene-overview-card,
[data-theme="dark"] .inspector-section,
[data-theme="dark"] .inspector-quick-nav,
[data-theme="dark"] .inspector-accordion-toggle {
[data-theme="dark"] .inspector-accordion-toggle,
[data-theme="dark"] .thread-event-item,
[data-theme="dark"] .asset-event-item,
[data-theme="dark"] .story-asset-event-item {
color: var(--app-text);
background: var(--app-surface);
border-color: var(--app-border);
box-shadow: var(--plotline-shadow-subtle);
}
[data-theme="dark"] .scene-inspector-root {
color: var(--app-text);
background: transparent;
}
[data-theme="dark"] .inspector-nav-links a {
color: #ead8c4;
background: rgba(231, 214, 190, 0.08);
border-color: rgba(231, 214, 190, 0.28);
}
[data-theme="dark"] .inspector-nav-links a:hover,
[data-theme="dark"] .inspector-nav-links a:focus,
[data-theme="dark"] .inspector-nav-links a.active {
color: #fff4e8;
background: rgba(241, 195, 143, 0.16);
border-color: rgba(241, 195, 143, 0.52);
}
[data-theme="dark"] .thread-event-item,
[data-theme="dark"] .asset-event-item,
[data-theme="dark"] .story-asset-event-item {
color: var(--app-text);
background: #211b17;
border-color: rgba(241, 195, 143, 0.24);
}
[data-theme="dark"] .thread-event-item p,
[data-theme="dark"] .asset-event-item p,
[data-theme="dark"] .story-asset-event-item p,
[data-theme="dark"] .thread-event-item .muted,
[data-theme="dark"] .asset-event-item .muted,
[data-theme="dark"] .story-asset-event-item .muted {
color: var(--app-text-muted) !important;
}
[data-theme="dark"] .thread-event-marker,
[data-theme="dark"] .asset-event-marker {
color: #21160f;
background: #d49a62;
border-color: rgba(255, 213, 166, 0.72);
}
[data-theme="dark"] .timeline-workspace,
[data-theme="dark"] .timeline-shell {
background:
@ -1335,15 +1381,29 @@ a:focus-visible {
[data-theme="dark"] .badge,
[data-theme="dark"] .badge.text-bg-light,
[data-theme="dark"] .status-pill,
[data-theme="dark"] .archived-badge,
[data-theme="dark"] .overview-chip,
[data-theme="dark"] .breadcrumb-trail a,
[data-theme="dark"] .breadcrumb-trail span,
[data-theme="dark"] .scenario-tag,
[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);
color: #f4eadc !important;
background: rgba(212, 154, 98, 0.18) !important;
border-color: rgba(241, 195, 143, 0.36) !important;
box-shadow: none;
}
[data-theme="dark"] .badge.text-bg-light,
[data-theme="dark"] .soft-count,
[data-theme="dark"] .status-pill,
[data-theme="dark"] .archived-badge {
color: #ead8c4 !important;
background: rgba(205, 187, 167, 0.16) !important;
border-color: rgba(231, 214, 190, 0.36) !important;
}
[data-theme="dark"] .badge.text-bg-warning,
@ -1466,29 +1526,35 @@ a:focus-visible {
[data-theme="dark"] .btn-outline-primary,
[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-color: #ffd5a6;
--bs-btn-border-color: rgba(241, 195, 143, 0.58);
--bs-btn-bg: rgba(241, 195, 143, 0.08);
--bs-btn-hover-color: #fff4e8;
--bs-btn-hover-bg: rgba(241, 195, 143, 0.18);
--bs-btn-hover-border-color: rgba(255, 213, 166, 0.72);
--bs-btn-active-color: #fff4e8;
--bs-btn-active-bg: rgba(241, 195, 143, 0.24);
--bs-btn-active-border-color: rgba(255, 213, 166, 0.82);
--bs-btn-disabled-color: #9c8d7d;
--bs-btn-disabled-border-color: rgba(231, 214, 190, 0.18);
background-color: var(--bs-btn-bg);
}
[data-theme="dark"] .btn-outline-secondary {
--bs-btn-color: #d2c2b1;
--bs-btn-border-color: rgba(210, 194, 177, 0.38);
[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn-outline-dark,
[data-theme="dark"] .btn-outline-light {
--bs-btn-color: #ead8c4;
--bs-btn-border-color: rgba(231, 214, 190, 0.46);
--bs-btn-bg: rgba(231, 214, 190, 0.08);
--bs-btn-hover-color: #fff4e8;
--bs-btn-hover-bg: rgba(210, 194, 177, 0.12);
--bs-btn-hover-border-color: rgba(241, 220, 196, 0.56);
--bs-btn-hover-bg: rgba(231, 214, 190, 0.16);
--bs-btn-hover-border-color: rgba(241, 220, 196, 0.68);
--bs-btn-active-color: #fff4e8;
--bs-btn-active-bg: rgba(210, 194, 177, 0.18);
--bs-btn-active-bg: rgba(231, 214, 190, 0.22);
--bs-btn-active-border-color: rgba(241, 220, 196, 0.64);
--bs-btn-disabled-color: #8f8172;
--bs-btn-disabled-border-color: rgba(231, 214, 190, 0.16);
background-color: var(--bs-btn-bg);
}
[data-theme="dark"] .btn-outline-danger {
@ -1745,7 +1811,9 @@ a:focus-visible {
color: #e7a09a !important;
}
[data-theme="dark"] .popover {
[data-theme="dark"] .popover,
.popover[data-theme="dark"],
.popover.theme-audit-dark-popover {
--bs-popover-bg: var(--app-surface-alt);
--bs-popover-border-color: rgba(231, 214, 190, 0.18);
--bs-popover-header-bg: rgba(241, 195, 143, 0.08);
@ -1755,43 +1823,71 @@ a:focus-visible {
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
}
[data-theme="dark"] .popover .popover-arrow::before {
[data-theme="dark"] .popover .popover-arrow::before,
.popover[data-theme="dark"] .popover-arrow::before,
.popover.theme-audit-dark-popover .popover-arrow::before {
border-color: var(--bs-popover-border-color);
}
[data-theme="dark"] .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after,
[data-theme="dark"] .bs-popover-top > .popover-arrow::after {
[data-theme="dark"] .bs-popover-top > .popover-arrow::after,
.popover[data-theme="dark"].bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after,
.popover[data-theme="dark"].bs-popover-top > .popover-arrow::after,
.popover.theme-audit-dark-popover.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after,
.popover.theme-audit-dark-popover.bs-popover-top > .popover-arrow::after {
border-top-color: var(--bs-popover-bg);
}
[data-theme="dark"] .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after,
[data-theme="dark"] .bs-popover-end > .popover-arrow::after {
[data-theme="dark"] .bs-popover-end > .popover-arrow::after,
.popover[data-theme="dark"].bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after,
.popover[data-theme="dark"].bs-popover-end > .popover-arrow::after,
.popover.theme-audit-dark-popover.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after,
.popover.theme-audit-dark-popover.bs-popover-end > .popover-arrow::after {
border-right-color: var(--bs-popover-bg);
}
[data-theme="dark"] .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after,
[data-theme="dark"] .bs-popover-bottom > .popover-arrow::after {
[data-theme="dark"] .bs-popover-bottom > .popover-arrow::after,
.popover[data-theme="dark"].bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after,
.popover[data-theme="dark"].bs-popover-bottom > .popover-arrow::after,
.popover.theme-audit-dark-popover.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after,
.popover.theme-audit-dark-popover.bs-popover-bottom > .popover-arrow::after {
border-bottom-color: var(--bs-popover-bg);
}
[data-theme="dark"] .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after,
[data-theme="dark"] .bs-popover-start > .popover-arrow::after {
[data-theme="dark"] .bs-popover-start > .popover-arrow::after,
.popover[data-theme="dark"].bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after,
.popover[data-theme="dark"].bs-popover-start > .popover-arrow::after,
.popover.theme-audit-dark-popover.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after,
.popover.theme-audit-dark-popover.bs-popover-start > .popover-arrow::after {
border-left-color: var(--bs-popover-bg);
}
[data-theme="dark"] .plotline-help-popover .popover-header {
[data-theme="dark"] .plotline-help-popover .popover-header,
.popover[data-theme="dark"] .popover-header,
.popover.theme-audit-dark-popover .popover-header {
color: #fff0df;
background: rgba(241, 195, 143, 0.08);
border-bottom-color: rgba(231, 214, 190, 0.16);
}
[data-theme="dark"] .plotline-help-more,
[data-theme="dark"] .popover a {
.popover[data-theme="dark"] .plotline-help-more,
.popover.theme-audit-dark-popover .plotline-help-more,
[data-theme="dark"] .popover a,
.popover[data-theme="dark"] a,
.popover.theme-audit-dark-popover a {
color: var(--app-link);
}
[data-theme="dark"] .plotline-help-more:hover,
[data-theme="dark"] .popover a:hover {
.popover[data-theme="dark"] .plotline-help-more:hover,
.popover.theme-audit-dark-popover .plotline-help-more:hover,
[data-theme="dark"] .popover a:hover,
.popover[data-theme="dark"] a:hover,
.popover.theme-audit-dark-popover a:hover {
color: #ffd5a6;
}

2
PlotLine/wwwroot/css/plotline-theme.min.css vendored
View File

File diff suppressed because one or more lines are too long