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

Navigation tidy up 1A

Browse Source
This commit is contained in:
Nick Beckley 2026-06-07 18:52:38 +01:00
parent 55973d3e07
commit 70ab07d401
6 changed files with 313 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
PlotLine/Views/Characters/Details.cshtml
View File

@ -1,6 +1,7 @@
@model CharacterDetailViewModel @model CharacterDetailViewModel
@{ @{
ViewData["Title"] = Model.Character.CharacterName; ViewData["Title"] = Model.Character.CharacterName;
ViewData["ProjectSection"] = "Characters";
var firstAppearance = Model.Appearances.FirstOrDefault(); var firstAppearance = Model.Appearances.FirstOrDefault();
var storyImportance = Model.Character.CharacterImportance switch var storyImportance = Model.Character.CharacterImportance switch
{ {
@ -18,49 +19,50 @@
<span>@Model.Character.CharacterName</span> <span>@Model.Character.CharacterName</span>
</nav> </nav>
<section class="context-header"> <partial name="_ProjectSectionNav" model="Model.Project" />
<div class="context-title">
<span class="eyebrow">Project context</span>
<strong>@Model.Project.ProjectName</strong>
</div>
<nav class="context-nav" aria-label="Project navigation">
<a asp-controller="Timeline" asp-action="Index" asp-route-ProjectID="@Model.Project.ProjectID" asp-route-SelectedSceneID="@firstAppearance?.SceneID" asp-route-FocusType="character" asp-route-FocusID="@Model.Character.CharacterID">Show on timeline</a>
<a asp-controller="RelationshipMap" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID" asp-route-focusCharacterId="@Model.Character.CharacterID">Relationship Map</a>
<a asp-controller="Analytics" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Story health</a>
<a asp-controller="Warnings" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Warnings</a>
<a asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Characters</a>
</nav>
</section>
<div class="page-heading"> <div class="page-heading pw-page-heading">
<div> <div>
<p class="eyebrow">Character</p> <p class="eyebrow">Character</p>
<h1>@Model.Character.CharacterName <help-icon key="characters.details" /></h1> <h1>@Model.Character.CharacterName <help-icon key="characters.details" /></h1>
<p class="lead-text">@Model.Character.DefaultDescription</p> <p class="lead-text">@Model.Character.DefaultDescription</p>
</div> </div>
<div class="button-row"> <div class="button-row">
<a class="btn btn-outline-secondary" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Characters</a> <a class="btn btn-outline-secondary" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Back to characters</a>
<a class="btn btn-outline-secondary" asp-controller="Timeline" asp-action="Index" asp-route-ProjectID="@Model.Project.ProjectID" asp-route-SelectedSceneID="@firstAppearance?.SceneID" asp-route-FocusType="character" asp-route-FocusID="@Model.Character.CharacterID">Back to timeline</a> <a class="btn btn-outline-secondary" asp-controller="Timeline" asp-action="Index" asp-route-ProjectID="@Model.Project.ProjectID" asp-route-SelectedSceneID="@firstAppearance?.SceneID" asp-route-FocusType="character" asp-route-FocusID="@Model.Character.CharacterID">Back to timeline</a>
<a class="btn btn-outline-primary" asp-controller="RelationshipMap" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID" asp-route-focusCharacterId="@Model.Character.CharacterID">View Relationship Map</a> <div class="dropdown pw-actions">
<a class="btn btn-outline-primary" asp-controller="Dynamics" asp-action="Character" asp-route-id="@Model.Character.CharacterID">Character arc</a> <button class="btn pw-actions__toggle dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<a class="btn btn-outline-primary" asp-controller="Dynamics" asp-action="Knowledge" asp-route-id="@Model.Character.CharacterID">Knowledge timeline</a> Actions
<a class="btn btn-outline-primary" asp-controller="Exports" asp-action="Character" asp-route-id="@Model.Character.CharacterID">Export character</a> </button>
<a class="btn btn-outline-secondary" asp-controller="Exports" asp-action="Character" asp-route-id="@Model.Character.CharacterID" asp-route-format="markdown">Markdown</a> <div class="dropdown-menu dropdown-menu-end">
<a class="btn btn-outline-primary" asp-action="Edit" asp-route-id="@Model.Character.CharacterID">Edit character</a> <a class="dropdown-item" asp-action="Edit" asp-route-id="@Model.Character.CharacterID">Edit character</a>
<form asp-action="Archive" method="post" class="archive-button-form" data-confirm-message="Archive this character?&#10;&#10;This will hide it from active lists and timelines, but the data will be kept and can be restored later."> <a class="dropdown-item" asp-controller="Exports" asp-action="Character" asp-route-id="@Model.Character.CharacterID">Export character</a>
<input type="hidden" name="id" value="@Model.Character.CharacterID" /> <a class="dropdown-item" asp-controller="Exports" asp-action="Character" asp-route-id="@Model.Character.CharacterID" asp-route-format="markdown">Markdown</a>
<input type="hidden" name="projectId" value="@Model.Project.ProjectID" /> <div class="dropdown-divider"></div>
<button class="btn btn-outline-danger" type="submit">Archive Character</button> <form asp-action="Archive" method="post" class="archive-button-form" data-confirm-message="Archive this character?&#10;&#10;This will hide it from active lists and timelines, but the data will be kept and can be restored later.">
</form> <input type="hidden" name="id" value="@Model.Character.CharacterID" />
<input type="hidden" name="projectId" value="@Model.Project.ProjectID" />
<button class="dropdown-item text-danger" type="submit">Archive Character</button>
</form>
</div>
</div>
</div> </div>
</div> </div>
<nav class="pw-character-nav" aria-label="Character sections">
<a class="pw-character-nav__link active" href="#character-overview">Overview</a>
<a class="pw-character-nav__link" href="#character-relationships">Relationships</a>
<a class="pw-character-nav__link" asp-controller="Dynamics" asp-action="Character" asp-route-id="@Model.Character.CharacterID">Arc</a>
<a class="pw-character-nav__link" asp-controller="Dynamics" asp-action="Knowledge" asp-route-id="@Model.Character.CharacterID">Knowledge</a>
<a class="pw-character-nav__link" href="#character-appearances">Appearances</a>
</nav>
@if (TempData["RelationshipMessage"] is string relationshipMessage) @if (TempData["RelationshipMessage"] is string relationshipMessage)
{ {
<div class="alert alert-info">@relationshipMessage</div> <div class="alert alert-info">@relationshipMessage</div>
} }
<section class="asset-detail-grid"> <section id="character-overview" class="asset-detail-grid">
<article class="plain-card"> <article class="plain-card">
<h2>Profile</h2> <h2>Profile</h2>
<p><strong>Short name:</strong> @Model.Character.ShortName</p> <p><strong>Short name:</strong> @Model.Character.ShortName</p>
@ -245,7 +247,7 @@
</article> </article>
</section> </section>
<section class="list-section mt-3"> <section id="character-relationships" class="list-section mt-3">
<h2>Current Relationships <help-icon key="characters.currentRelationships" /></h2> <h2>Current Relationships <help-icon key="characters.currentRelationships" /></h2>
@if (!Model.CurrentRelationships.Any()) @if (!Model.CurrentRelationships.Any())
{ {
@ -337,7 +339,7 @@
} }
</section> </section>
<section class="list-section mt-3"> <section id="character-appearances" class="list-section mt-3">
<h2>Scene appearances <help-icon key="characters.sceneAppearances" /></h2> <h2>Scene appearances <help-icon key="characters.sceneAppearances" /></h2>
@if (!Model.Appearances.Any()) @if (!Model.Appearances.Any())
{ {

21
PlotLine/Views/Characters/Index.cshtml
View File

@ -1,20 +1,16 @@
@model CharacterListViewModel @model CharacterListViewModel
@{ @{
ViewData["Title"] = "Characters"; ViewData["Title"] = "Characters";
ViewData["ProjectSection"] = "Characters";
} }
<section class="context-header"> <nav class="breadcrumb-trail" aria-label="Breadcrumb">
<div class="context-title"><span class="eyebrow">Project context</span><strong>@Model.Project.ProjectName</strong></div> <a asp-controller="Projects" asp-action="Index">Projects</a>
<nav class="context-nav" aria-label="Project navigation"> <a asp-controller="Projects" asp-action="Details" asp-route-id="@Model.Project.ProjectID">@Model.Project.ProjectName</a>
<a asp-controller="Projects" asp-action="Details" asp-route-id="@Model.Project.ProjectID">Project</a> <span>Characters</span>
<a asp-controller="Timeline" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Timeline</a> </nav>
<a asp-controller="Analytics" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Story health</a>
<a asp-controller="Warnings" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Warnings</a> <partial name="_ProjectSectionNav" model="Model.Project" />
<a asp-controller="StoryAssets" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Assets</a>
<a asp-controller="Locations" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Locations</a>
<a asp-controller="PlotThreads" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Threads</a>
</nav>
</section>
<div class="page-heading"> <div class="page-heading">
<div> <div>
@ -22,7 +18,6 @@
<h1>@Model.Project.ProjectName <help-icon key="characters.overview" /></h1> <h1>@Model.Project.ProjectName <help-icon key="characters.overview" /></h1>
</div> </div>
<div class="button-row"> <div class="button-row">
<a class="btn btn-outline-secondary" asp-controller="Projects" asp-action="Details" asp-route-id="@Model.Project.ProjectID">Project</a>
<a class="btn btn-primary" asp-action="Create" asp-route-projectId="@Model.Project.ProjectID">Add character</a> <a class="btn btn-primary" asp-action="Create" asp-route-projectId="@Model.Project.ProjectID">Add character</a>
</div> </div>
</div> </div>

94
PlotLine/Views/Projects/Details.cshtml
View File

@ -1,6 +1,7 @@
@model ProjectDetailViewModel @model ProjectDetailViewModel
@{ @{
ViewData["Title"] = Model.Project.ProjectName; ViewData["Title"] = Model.Project.ProjectName;
ViewData["ProjectSection"] = "Overview";
} }
<nav class="breadcrumb-trail" aria-label="Breadcrumb"> <nav class="breadcrumb-trail" aria-label="Breadcrumb">
@ -8,32 +9,7 @@
<span>@Model.Project.ProjectName</span> <span>@Model.Project.ProjectName</span>
</nav> </nav>
<section class="context-header"> <div class="page-heading pw-page-heading">
<div class="context-title">
<span class="eyebrow">Current project</span>
<strong>@Model.Project.ProjectName</strong>
</div>
<nav class="context-nav" aria-label="Project navigation">
<a asp-controller="Timeline" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Timeline</a>
<a asp-controller="Timeline" asp-action="Settings" asp-route-projectId="@Model.Project.ProjectID">Timeline Settings</a>
<a asp-controller="ProjectMetrics" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Scene Metrics</a>
<a asp-controller="Scenarios" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Scenarios</a>
<a asp-controller="Writer" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Writer Workspace</a>
<a asp-controller="StoryBible" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Story Bible</a>
<a asp-controller="RelationshipMap" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Relationship Map</a>
<a asp-controller="Analytics" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Story health</a>
<a asp-controller="Dynamics" asp-action="Story" asp-route-projectId="@Model.Project.ProjectID">Story dynamics</a>
<a asp-controller="Acceptance" asp-action="Phase1" asp-route-projectId="@Model.Project.ProjectID">Phase 1 Checklist</a>
<a asp-controller="Warnings" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Warnings</a>
<a asp-controller="Archives" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Archived Items</a>
<a asp-controller="Characters" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Characters</a>
<a asp-controller="StoryAssets" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Assets</a>
<a asp-controller="Locations" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Locations</a>
<a asp-controller="PlotThreads" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Threads</a>
</nav>
</section>
<div class="page-heading">
<div> <div>
<p class="eyebrow">Project / Series</p> <p class="eyebrow">Project / Series</p>
<h1>@Model.Project.ProjectName <help-icon key="projectDashboard.overview" /></h1> <h1>@Model.Project.ProjectName <help-icon key="projectDashboard.overview" /></h1>
@ -42,46 +18,38 @@
<p class="lead-text">@Model.Project.Description</p> <p class="lead-text">@Model.Project.Description</p>
} }
</div> </div>
<div class="button-row"> <div class="dropdown pw-actions">
<a class="btn btn-outline-secondary" asp-action="Edit" asp-route-id="@Model.Project.ProjectID">Edit project</a> <button class="btn pw-actions__toggle dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<a class="btn btn-outline-secondary" asp-action="Activity" asp-route-id="@Model.Project.ProjectID">Activity</a> Actions
@if (Model.Project.IsOwner) </button>
{ <div class="dropdown-menu dropdown-menu-end">
<a class="btn btn-outline-secondary" asp-controller="ProjectCollaborators" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Collaborators</a> <a class="dropdown-item" asp-action="Edit" asp-route-id="@Model.Project.ProjectID">Edit project</a>
} <a class="dropdown-item" asp-action="Activity" asp-route-id="@Model.Project.ProjectID">Activity</a>
<a class="btn btn-outline-primary" asp-controller="Timeline" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Timeline</a> @if (Model.Project.IsOwner)
<a class="btn btn-outline-secondary" asp-controller="Timeline" asp-action="Settings" asp-route-projectId="@Model.Project.ProjectID">Timeline Settings</a> {
<a class="btn btn-outline-secondary" asp-controller="ProjectMetrics" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Scene Metrics</a> <a class="dropdown-item" asp-controller="ProjectCollaborators" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Collaborators</a>
<a class="btn btn-outline-primary" asp-controller="Scenarios" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Scenarios</a> }
<a class="btn btn-outline-primary" asp-controller="Writer" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Writer Workspace</a> <a class="dropdown-item" asp-controller="Books" asp-action="Create" asp-route-projectId="@Model.Project.ProjectID">Add book</a>
<a class="btn btn-outline-primary" asp-controller="StoryBible" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Story Bible</a> @if (Model.Project.IsOwner)
<a class="btn btn-outline-primary" asp-controller="RelationshipMap" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Relationship Map</a> {
<a class="btn btn-outline-primary" asp-controller="PlotLines" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Plot lines</a> <a class="dropdown-item" asp-controller="Exports" asp-action="ProjectBackup" asp-route-projectId="@Model.Project.ProjectID">Download Project Backup</a>
<a class="btn btn-outline-primary" asp-controller="PlotThreads" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Plot threads</a> }
<a class="btn btn-outline-primary" asp-controller="StoryAssets" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Story assets</a> <a class="dropdown-item" asp-controller="ProjectRestorePoints" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Restore Points</a>
<a class="btn btn-outline-primary" asp-controller="Characters" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Characters</a> <a class="dropdown-item" asp-controller="Acceptance" asp-action="Phase1" asp-route-projectId="@Model.Project.ProjectID">Phase 1 Checklist</a>
<a class="btn btn-outline-primary" asp-controller="Locations" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Locations</a> @if (Model.Project.IsOwner)
<a class="btn btn-outline-primary" asp-controller="Warnings" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Warnings</a> {
<a class="btn btn-outline-primary" asp-controller="Analytics" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Story health</a> <div class="dropdown-divider"></div>
<a class="btn btn-outline-primary" asp-controller="Dynamics" asp-action="Story" asp-route-projectId="@Model.Project.ProjectID">Story dynamics</a> <form asp-action="Archive" method="post" class="archive-button-form" data-confirm-message="Archive this project?&#10;&#10;Archived projects are hidden from your active workspace but remain stored within PlotWeaver Studio. Export your project first if you wish to maintain an external backup.">
<a class="btn btn-outline-secondary" asp-controller="Acceptance" asp-action="Phase1" asp-route-projectId="@Model.Project.ProjectID">Phase 1 Checklist</a> <input type="hidden" name="id" value="@Model.Project.ProjectID" />
<a class="btn btn-outline-secondary" asp-controller="Archives" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Archived Items</a> <button class="dropdown-item text-danger" type="submit">Archive Project</button>
@if (Model.Project.IsOwner) </form>
{ }
<a class="btn btn-outline-secondary" asp-controller="Exports" asp-action="ProjectBackup" asp-route-projectId="@Model.Project.ProjectID">Download Project Backup</a> </div>
}
<a class="btn btn-outline-secondary" asp-controller="ProjectRestorePoints" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Restore Points</a>
<a class="btn btn-primary" asp-controller="Books" asp-action="Create" asp-route-projectId="@Model.Project.ProjectID">Add book</a>
@if (Model.Project.IsOwner)
{
<form asp-action="Archive" method="post" class="archive-button-form" data-confirm-message="Archive this project?&#10;&#10;Archived projects are hidden from your active workspace but remain stored within PlotWeaver Studio. Export your project first if you wish to maintain an external backup.">
<input type="hidden" name="id" value="@Model.Project.ProjectID" />
<button class="btn btn-outline-danger" type="submit">Archive Project</button>
</form>
}
</div> </div>
</div> </div>
<partial name="_ProjectSectionNav" model="Model.Project" />
@if (TempData["ProjectExportMessage"] is string projectExportMessage) @if (TempData["ProjectExportMessage"] is string projectExportMessage)
{ {
<div class="alert alert-warning">@projectExportMessage</div> <div class="alert alert-warning">@projectExportMessage</div>

3
PlotLine/Views/Shared/_Layout.cshtml
View File

@ -48,9 +48,6 @@
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Writer" asp-action="Index">Writer Workspace</a> <a class="nav-link text-dark" asp-area="" asp-controller="Writer" asp-action="Index">Writer Workspace</a>
</li> </li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="RelationshipMap" asp-action="Index">Relationship Map</a>
</li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Help" asp-action="Index">Help</a> <a class="nav-link text-dark" asp-area="" asp-controller="Help" asp-action="Index">Help</a>
</li> </li>

27
PlotLine/Views/Shared/_ProjectSectionNav.cshtml Normal file
View File

@ -0,0 +1,27 @@
@model Project
@{
var activeSection = ViewData["ProjectSection"] as string ?? "Overview";
var projectId = Model.ProjectID;
string ActiveClass(string section) =>
string.Equals(activeSection, section, StringComparison.OrdinalIgnoreCase) ? "active" : string.Empty;
}
<section class="pw-project-nav" aria-label="Project navigation">
<span class="pw-project-nav__label">Project navigation</span>
<nav class="pw-project-nav__links" aria-label="Project sections">
<a class="pw-project-nav__link @(ActiveClass("Overview"))" asp-controller="Projects" asp-action="Details" asp-route-id="@projectId">Overview</a>
<a class="pw-project-nav__link @(ActiveClass("Timeline"))" asp-controller="Timeline" asp-action="Index" asp-route-projectId="@projectId">Timeline</a>
<a class="pw-project-nav__link @(ActiveClass("Characters"))" asp-controller="Characters" asp-action="Index" asp-route-projectId="@projectId">Characters</a>
<a class="pw-project-nav__link @(ActiveClass("Relationships"))" asp-controller="RelationshipMap" asp-action="Index" asp-route-projectId="@projectId">Relationships</a>
<a class="pw-project-nav__link @(ActiveClass("Assets"))" asp-controller="StoryAssets" asp-action="Index" asp-route-projectId="@projectId">Assets</a>
<a class="pw-project-nav__link @(ActiveClass("Locations"))" asp-controller="Locations" asp-action="Index" asp-route-projectId="@projectId">Locations</a>
<a class="pw-project-nav__link @(ActiveClass("Threads"))" asp-controller="PlotThreads" asp-action="Index" asp-route-projectId="@projectId">Threads</a>
<a class="pw-project-nav__link @(ActiveClass("Metrics"))" asp-controller="ProjectMetrics" asp-action="Index" asp-route-projectId="@projectId">Metrics</a>
<a class="pw-project-nav__link @(ActiveClass("Scenarios"))" asp-controller="Scenarios" asp-action="Index" asp-route-projectId="@projectId">Scenarios</a>
<a class="pw-project-nav__link @(ActiveClass("Story Bible"))" asp-controller="StoryBible" asp-action="Index" asp-route-projectId="@projectId">Story Bible</a>
<a class="pw-project-nav__link @(ActiveClass("Health"))" asp-controller="Analytics" asp-action="Index" asp-route-projectId="@projectId">Health</a>
<a class="pw-project-nav__link @(ActiveClass("Warnings"))" asp-controller="Warnings" asp-action="Index" asp-route-projectId="@projectId">Warnings</a>
<a class="pw-project-nav__link @(ActiveClass("Archive"))" asp-controller="Archives" asp-action="Index" asp-route-projectId="@projectId">Archive</a>
</nav>
</section>

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

@ -288,6 +288,153 @@ a:hover {
color: var(--plotline-accent-dark); color: var(--plotline-accent-dark);
} }
.pw-page-heading {
align-items: center;
gap: clamp(0.85rem, 2vw, 1.35rem);
margin-bottom: 1rem;
}
.pw-page-heading > div:first-child {
min-width: min(100%, 26rem);
}
.pw-page-heading .lead-text {
max-width: 52rem;
}
.pw-project-nav {
display: grid;
gap: 0.55rem;
margin: 0 0 1.1rem;
border: 1px solid var(--plotline-border-soft);
border-radius: var(--plotline-radius);
padding: 0.7rem 0.75rem;
background:
linear-gradient(135deg, rgba(255, 253, 248, 0.9), rgba(242, 226, 207, 0.55)),
var(--plotline-surface);
box-shadow: var(--plotline-shadow-subtle);
}
.pw-project-nav__label {
color: var(--plotline-accent);
font-size: 0.68rem;
font-weight: 850;
letter-spacing: 0.1em;
line-height: 1;
text-transform: uppercase;
}
.pw-project-nav__links,
.pw-character-nav {
display: flex;
flex-wrap: wrap;
gap: 0.42rem;
align-items: center;
}
.pw-project-nav__link,
.pw-character-nav__link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2rem;
border: 1px solid rgba(84, 68, 48, 0.16);
border-radius: 999px;
padding: 0.32rem 0.68rem;
color: var(--plotline-accent-dark);
background: rgba(255, 250, 241, 0.82);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
font-size: 0.8rem;
font-weight: 780;
line-height: 1.1;
text-decoration: none;
transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.pw-project-nav__link:hover,
.pw-project-nav__link:focus,
.pw-character-nav__link:hover,
.pw-character-nav__link:focus {
color: var(--plotline-accent-dark);
border-color: rgba(122, 77, 44, 0.32);
background: rgba(122, 77, 44, 0.11);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 5px 12px rgba(62, 45, 28, 0.06);
}
.pw-project-nav__link.active,
.pw-character-nav__link.active {
color: #fff8ec;
border-color: var(--plotline-accent);
background: linear-gradient(180deg, var(--plotline-accent), var(--plotline-accent-dark));
box-shadow: 0 6px 14px rgba(62, 45, 28, 0.16);
}
.pw-character-nav {
margin: 0 0 1rem;
border-bottom: 1px solid rgba(84, 68, 48, 0.11);
padding-bottom: 0.65rem;
}
.pw-actions {
flex: 0 0 auto;
}
.pw-actions__toggle {
--bs-btn-color: var(--plotline-accent-dark);
--bs-btn-bg: rgba(255, 250, 241, 0.86);
--bs-btn-border-color: rgba(122, 77, 44, 0.32);
--bs-btn-hover-color: #fff8ec;
--bs-btn-hover-bg: var(--plotline-accent);
--bs-btn-hover-border-color: var(--plotline-accent);
--bs-btn-active-color: #fff8ec;
--bs-btn-active-bg: var(--plotline-accent-dark);
--bs-btn-active-border-color: var(--plotline-accent-dark);
min-height: 2.35rem;
padding-inline: 1rem;
box-shadow: var(--plotline-shadow-subtle);
}
.pw-actions .dropdown-menu {
--bs-dropdown-bg: var(--plotline-surface-elevated);
--bs-dropdown-color: var(--plotline-text);
--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-link-hover-bg: rgba(122, 77, 44, 0.1);
--bs-dropdown-divider-bg: rgba(84, 68, 48, 0.13);
border-radius: var(--plotline-radius-sm);
box-shadow: var(--plotline-shadow-card);
}
.pw-actions .dropdown-item {
font-weight: 650;
}
.pw-actions .dropdown-item.text-danger {
color: var(--plotline-danger) !important;
}
.pw-actions .dropdown-item.text-danger:hover,
.pw-actions .dropdown-item.text-danger:focus {
color: #fff8ec !important;
background: var(--plotline-danger);
}
@media (max-width: 767.98px) {
.pw-page-heading {
align-items: stretch;
}
.pw-page-heading .pw-actions,
.pw-page-heading .pw-actions__toggle {
width: 100%;
}
.pw-project-nav {
padding: 0.65rem;
}
}
.timeline-workspace { .timeline-workspace {
background: background:
linear-gradient(180deg, rgba(255, 251, 244, 0.84), rgba(237, 226, 211, 0.66)), linear-gradient(180deg, rgba(255, 251, 244, 0.84), rgba(237, 226, 211, 0.66)),
@ -1343,6 +1490,75 @@ a:focus-visible {
border-color: #ffd5a6; border-color: #ffd5a6;
} }
[data-theme="dark"] .pw-project-nav {
color: var(--app-text);
border-color: rgba(241, 195, 143, 0.18);
background:
linear-gradient(135deg, rgba(42, 35, 30, 0.96), rgba(58, 42, 32, 0.58)),
var(--app-surface);
box-shadow: var(--plotline-shadow-subtle);
}
[data-theme="dark"] .pw-project-nav__label {
color: #dfc6aa;
}
[data-theme="dark"] .pw-character-nav {
border-bottom-color: rgba(241, 195, 143, 0.16);
}
[data-theme="dark"] .pw-project-nav__link,
[data-theme="dark"] .pw-character-nav__link {
color: #f1dcc4;
border-color: rgba(241, 195, 143, 0.26);
background: rgba(241, 195, 143, 0.1);
box-shadow: none;
}
[data-theme="dark"] .pw-project-nav__link:hover,
[data-theme="dark"] .pw-project-nav__link:focus,
[data-theme="dark"] .pw-character-nav__link:hover,
[data-theme="dark"] .pw-character-nav__link:focus {
color: #21160f;
border-color: #ffd5a6;
background: #f1c38f;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.24);
}
[data-theme="dark"] .pw-project-nav__link.active,
[data-theme="dark"] .pw-character-nav__link.active {
color: #21160f;
border-color: #ffd5a6;
background: linear-gradient(180deg, #f1c38f, var(--plotline-accent));
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}
[data-theme="dark"] .pw-actions__toggle {
--bs-btn-color: #f1dcc4;
--bs-btn-bg: rgba(241, 195, 143, 0.1);
--bs-btn-border-color: rgba(241, 195, 143, 0.3);
--bs-btn-hover-color: #21160f;
--bs-btn-hover-bg: #f1c38f;
--bs-btn-hover-border-color: #ffd5a6;
--bs-btn-active-color: #21160f;
--bs-btn-active-bg: var(--plotline-accent-dark);
--bs-btn-active-border-color: #ffd5a6;
}
[data-theme="dark"] .pw-actions .dropdown-menu {
--bs-dropdown-color: var(--app-text);
--bs-dropdown-bg: var(--app-surface-alt);
--bs-dropdown-border-color: rgba(241, 195, 143, 0.22);
--bs-dropdown-link-color: var(--app-text);
--bs-dropdown-link-hover-color: #21160f;
--bs-dropdown-link-hover-bg: #f1c38f;
--bs-dropdown-divider-bg: rgba(241, 195, 143, 0.18);
}
[data-theme="dark"] .pw-actions .dropdown-item.text-danger {
color: #ffb2aa !important;
}
[data-theme="dark"] .timeline-filter, [data-theme="dark"] .timeline-filter,
[data-theme="dark"] .workspace-heading .button-row, [data-theme="dark"] .workspace-heading .button-row,
[data-theme="dark"] .timeline-control-panel { [data-theme="dark"] .timeline-control-panel {