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

PD-013B: Dark Theme Polish Pass.

Browse Source
This commit is contained in:
Nick Beckley 2026-06-18 19:58:14 +01:00
parent 419b57c415
commit 99f7ce163e
3 changed files with 243 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -40,6 +40,30 @@
overflow-x: auto;
padding-bottom: .25rem;
}
.theme-audit-popover-sample,
.theme-audit-modal-sample {
margin-top: .75rem;
max-width: 100%;
}
.theme-audit-popover-sample.popover {
position: static;
display: block;
max-width: 22rem;
z-index: auto;
}
.theme-audit-inspector-sample {
display: grid;
gap: .75rem;
}
.theme-audit-inspector-sample .inspector-section,
.theme-audit-inspector-sample .warning-mini-card,
.theme-audit-inspector-sample .thread-event-item {
margin: 0;
}
</style>
<div class="page-heading compact">
@ -136,8 +160,9 @@
<div class="row g-2">
<div class="col-sm-6">
<label class="form-label" for="light-title">Text input</label>
<input class="form-control" id="light-title" value="The missing ledger" />
<input class="form-control is-invalid" id="light-title" value="The missing ledger" />
<span class="text-danger">Example validation message.</span>
<span class="field-validation-error d-block">Field validation error sample.</span>
</div>
<div class="col-sm-6">
<label class="form-label" for="light-date">Date input</label>
@ -196,6 +221,7 @@
<div class="alert alert-danger mb-3">Danger alert sample.</div>
<div class="theme-audit-button-stack">
<span class="badge text-bg-success">Active</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-warning">Review</span>
<span class="badge text-bg-danger">Blocked</span>
<span class="status-pill">Status pill</span>
@ -236,6 +262,7 @@
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
<li class="page-item disabled"><a class="page-link" href="#">Last</a></li>
</ul>
</nav>
</section>
@ -244,6 +271,23 @@
<h2>Modals and Overlays</h2>
<button class="btn btn-primary btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#lightThemeAuditModal">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">
<div class="popover-arrow"></div>
<h3 class="popover-header">Help popover</h3>
<div class="popover-body">
Sample popover content with a <a class="plotline-help-more" href="#">More...</a> link.
</div>
</div>
<div class="modal-content plotline-confirm-modal theme-audit-modal-sample">
<div class="modal-header">
<h2 class="modal-title fs-5">Visible modal content sample</h2>
</div>
<div class="modal-body">Inline modal surface for reviewing body contrast without opening the dialog.</div>
<div class="modal-footer">
<button class="btn btn-outline-secondary" type="button">Cancel</button>
<button class="btn btn-primary" type="button">Confirm</button>
</div>
</div>
<div class="modal fade" id="lightThemeAuditModal" tabindex="-1" aria-labelledby="lightThemeAuditModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content plotline-confirm-modal">
@ -287,7 +331,7 @@
<section class="theme-audit-section">
<h2>PlotDirector-Specific Components</h2>
<div class="scene-inspector-root">
<div class="scene-inspector-root theme-audit-inspector-sample">
<div class="inspector-quick-nav">
<input class="form-control form-control-sm inspector-search" type="search" placeholder="Find in scene..." />
<div class="inspector-nav-links">
@ -400,8 +444,9 @@
<div class="row g-2">
<div class="col-sm-6">
<label class="form-label" for="dark-title">Text input</label>
<input class="form-control" id="dark-title" value="The missing ledger" />
<input class="form-control is-invalid" id="dark-title" value="The missing ledger" />
<span class="text-danger">Example validation message.</span>
<span class="field-validation-error d-block">Field validation error sample.</span>
</div>
<div class="col-sm-6">
<label class="form-label" for="dark-date">Date input</label>
@ -460,6 +505,7 @@
<div class="alert alert-danger mb-3">Danger alert sample.</div>
<div class="theme-audit-button-stack">
<span class="badge text-bg-success">Active</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-warning">Review</span>
<span class="badge text-bg-danger">Blocked</span>
<span class="status-pill">Status pill</span>
@ -500,6 +546,7 @@
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
<li class="page-item disabled"><a class="page-link" href="#">Last</a></li>
</ul>
</nav>
</section>
@ -508,6 +555,23 @@
<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">
<div class="popover-arrow"></div>
<h3 class="popover-header">Help popover</h3>
<div class="popover-body">
Sample popover content with a <a class="plotline-help-more" href="#">More...</a> link.
</div>
</div>
<div class="modal-content plotline-confirm-modal theme-audit-modal-sample">
<div class="modal-header">
<h2 class="modal-title fs-5">Visible modal content sample</h2>
</div>
<div class="modal-body">Inline modal surface for reviewing body contrast without opening the dialog.</div>
<div class="modal-footer">
<button class="btn btn-outline-secondary" type="button">Cancel</button>
<button class="btn btn-primary" type="button">Confirm</button>
</div>
</div>
<div class="modal fade" id="darkThemeAuditModal" tabindex="-1" aria-labelledby="darkThemeAuditModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content plotline-confirm-modal">
@ -551,7 +615,7 @@
<section class="theme-audit-section">
<h2>PlotDirector-Specific Components</h2>
<div class="scene-inspector-root">
<div class="scene-inspector-root theme-audit-inspector-sample">
<div class="inspector-quick-nav">
<input class="form-control form-control-sm inspector-search" type="search" placeholder="Find in scene..." />
<div class="inspector-nav-links">

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

@ -1348,14 +1348,47 @@ a:focus-visible {
[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);
color: #f6d8a6 !important;
background: rgba(187, 126, 54, 0.24) !important;
border-color: rgba(224, 173, 101, 0.34);
}
[data-theme="dark"] .badge.text-bg-success {
color: #c8f0ce !important;
background: rgba(145, 201, 154, 0.16) !important;
color: #bddfc3 !important;
background: rgba(91, 143, 101, 0.22) !important;
border-color: rgba(145, 201, 154, 0.3);
}
[data-theme="dark"] .badge.text-bg-danger,
[data-theme="dark"] .badge.bg-danger {
color: #f0b8b2 !important;
background: rgba(151, 62, 54, 0.3) !important;
border-color: rgba(238, 142, 131, 0.35);
}
[data-theme="dark"] .badge.text-bg-info,
[data-theme="dark"] .badge.bg-info {
color: #b8dfe5 !important;
background: rgba(62, 125, 136, 0.28) !important;
border-color: rgba(120, 185, 194, 0.34);
}
[data-theme="dark"] .severity-pill.info {
color: #b8dfe5;
background: rgba(62, 125, 136, 0.24);
border-color: rgba(120, 185, 194, 0.34);
}
[data-theme="dark"] .severity-pill.warning {
color: #f6d8a6;
background: rgba(187, 126, 54, 0.24);
border-color: rgba(224, 173, 101, 0.34);
}
[data-theme="dark"] .severity-pill.error {
color: #f0b8b2;
background: rgba(151, 62, 54, 0.3);
border-color: rgba(238, 142, 131, 0.35);
}
[data-theme="dark"] .form-control,
@ -1432,7 +1465,6 @@ a:focus-visible {
}
[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);
@ -1446,6 +1478,19 @@ a:focus-visible {
--bs-btn-disabled-border-color: rgba(231, 214, 190, 0.18);
}
[data-theme="dark"] .btn-outline-secondary {
--bs-btn-color: #d2c2b1;
--bs-btn-border-color: rgba(210, 194, 177, 0.38);
--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-active-color: #fff4e8;
--bs-btn-active-bg: rgba(210, 194, 177, 0.18);
--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);
}
[data-theme="dark"] .btn-outline-danger {
--bs-btn-color: #ffb2aa;
--bs-btn-border-color: rgba(238, 142, 131, 0.5);
@ -1657,16 +1702,133 @@ a:focus-visible {
}
[data-theme="dark"] .alert-info {
--bs-alert-color: #cceaf0;
--bs-alert-bg: #17343a;
--bs-alert-border-color: #285c66;
--bs-alert-color: #c7e5ea;
--bs-alert-bg: #142e34;
--bs-alert-border-color: rgba(120, 185, 194, 0.34);
color: var(--bs-alert-color);
background: var(--bs-alert-bg);
border-color: var(--bs-alert-border-color);
}
[data-theme="dark"] .alert-success {
--bs-alert-color: #c8e7ce;
--bs-alert-bg: #1b321f;
--bs-alert-border-color: rgba(145, 201, 154, 0.32);
color: var(--bs-alert-color);
background: var(--bs-alert-bg);
border-color: var(--bs-alert-border-color);
}
[data-theme="dark"] .alert-warning,
[data-theme="dark"] .validation-summary-errors {
--bs-alert-color: #ffe3ad;
--bs-alert-bg: #3b2a16;
--bs-alert-border-color: #705229;
--bs-alert-color: #f4d9a9;
--bs-alert-bg: #352514;
--bs-alert-border-color: rgba(224, 173, 101, 0.34);
color: var(--bs-alert-color);
background: var(--bs-alert-bg);
border-color: var(--bs-alert-border-color);
}
[data-theme="dark"] .alert-danger {
--bs-alert-color: #f0b8b2;
--bs-alert-bg: #371b18;
--bs-alert-border-color: rgba(238, 142, 131, 0.34);
color: var(--bs-alert-color);
background: var(--bs-alert-bg);
border-color: var(--bs-alert-border-color);
}
[data-theme="dark"] .text-danger,
[data-theme="dark"] .field-validation-error,
[data-theme="dark"] .validation-summary-errors,
[data-theme="dark"] .validation-summary-errors li {
color: #e7a09a !important;
}
[data-theme="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);
--bs-popover-header-color: #fff0df;
--bs-popover-body-color: var(--app-text);
color: var(--app-text);
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
}
[data-theme="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 {
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 {
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 {
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 {
border-left-color: var(--bs-popover-bg);
}
[data-theme="dark"] .plotline-help-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 {
color: var(--app-link);
}
[data-theme="dark"] .plotline-help-more:hover,
[data-theme="dark"] .popover a:hover {
color: #ffd5a6;
}
[data-theme="dark"] .accordion {
--bs-accordion-color: var(--app-text);
--bs-accordion-bg: var(--app-surface);
--bs-accordion-border-color: rgba(231, 214, 190, 0.16);
--bs-accordion-btn-color: #f1dcc4;
--bs-accordion-btn-bg: #211b17;
--bs-accordion-active-color: #fff0df;
--bs-accordion-active-bg: rgba(212, 154, 98, 0.13);
--bs-accordion-btn-focus-border-color: rgba(241, 195, 143, 0.42);
--bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(212, 154, 98, 0.18);
--bs-accordion-icon-color: #f1dcc4;
--bs-accordion-icon-active-color: #fff0df;
}
[data-theme="dark"] .accordion-button::after {
filter: invert(91%) sepia(12%) saturate(676%) hue-rotate(340deg) brightness(103%) contrast(89%);
}
[data-theme="dark"] .pagination {
--bs-pagination-color: #f1dcc4;
--bs-pagination-bg: #211b17;
--bs-pagination-border-color: rgba(231, 214, 190, 0.18);
--bs-pagination-hover-color: #ffd5a6;
--bs-pagination-hover-bg: rgba(212, 154, 98, 0.12);
--bs-pagination-hover-border-color: rgba(241, 195, 143, 0.34);
--bs-pagination-focus-color: #ffd5a6;
--bs-pagination-focus-bg: rgba(212, 154, 98, 0.14);
--bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(212, 154, 98, 0.18);
--bs-pagination-active-color: #21160f;
--bs-pagination-active-bg: #d49a62;
--bs-pagination-active-border-color: #d49a62;
--bs-pagination-disabled-color: #8f8172;
--bs-pagination-disabled-bg: rgba(35, 29, 25, 0.72);
--bs-pagination-disabled-border-color: rgba(231, 214, 190, 0.11);
}
.plotline-help-layout {

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

File diff suppressed because one or more lines are too long