- Harden the doxygen-awesome dark-mode toggle against blocked localStorage (sandboxed webviews / file://): storage failures no longer break theme initialization or the toggle click. - Add a CSS-only prefers-color-scheme fallback so dark mode still follows the OS/app scheme when scripting is unavailable.
158 lines
3.4 KiB
CSS
158 lines
3.4 KiB
CSS
/* EVEngine static docs layout: a plain-HTML sidebar that works without JS. */
|
|
|
|
/* Dark theme fallback: follow the OS/app color scheme even when the
|
|
* doxygen-awesome dark-mode toggle script cannot run (e.g. file:// with
|
|
* scripting disabled). The script adds html.dark-mode / html.light-mode and
|
|
* takes precedence when it does run. */
|
|
@media (prefers-color-scheme: dark) {
|
|
html:not(.light-mode) {
|
|
--page-background-color: #1C1D1F;
|
|
--page-foreground-color: #d2dbde;
|
|
--side-nav-background: #252628;
|
|
--side-nav-arrow-opacity: #3a3d42;
|
|
}
|
|
}
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#ev-layout {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
#ev-sidebar {
|
|
flex: 0 0 310px;
|
|
width: 310px;
|
|
position: sticky;
|
|
top: 0;
|
|
height: 100vh;
|
|
overflow-y: auto;
|
|
box-sizing: border-box;
|
|
padding: 18px 14px 24px 14px;
|
|
background: var(--side-nav-background, #f7f7f9);
|
|
border-right: 1px solid var(--side-nav-arrow-opacity, #e2e2e6);
|
|
}
|
|
|
|
#ev-brand {
|
|
font-size: 19px;
|
|
font-weight: 700;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
#ev-brand a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#ev-version {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
color: #888;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
#ev-nav a {
|
|
display: block;
|
|
padding: 3px 8px;
|
|
margin: 1px 0;
|
|
color: var(--page-foreground-color, #333);
|
|
text-decoration: none;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
#ev-nav a:hover {
|
|
background: var(--side-nav-arrow-opacity, #e8e8ec);
|
|
}
|
|
|
|
#ev-nav summary {
|
|
cursor: pointer;
|
|
padding: 4px 8px;
|
|
margin: 2px 0;
|
|
font-weight: 600;
|
|
color: var(--page-foreground-color, #333);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
#ev-nav summary:hover {
|
|
background: var(--side-nav-arrow-opacity, #e8e8ec);
|
|
}
|
|
|
|
/* Category headings: the link inside <summary> stays inline so it sits on the
|
|
* same line as the expand/collapse triangle. */
|
|
#ev-nav summary a {
|
|
display: inline;
|
|
padding: 0;
|
|
margin: 0;
|
|
font-weight: 600;
|
|
color: inherit;
|
|
}
|
|
|
|
#ev-nav summary a:hover {
|
|
background: none;
|
|
}
|
|
|
|
#ev-nav details details {
|
|
margin-left: 10px;
|
|
border-left: 1px solid var(--side-nav-arrow-opacity, #e2e2e6);
|
|
}
|
|
|
|
#ev-nav .ev-nav-section {
|
|
margin: 10px 0 4px 0;
|
|
padding: 6px 8px 4px 8px;
|
|
border-top: 1px solid var(--side-nav-arrow-opacity, #e2e2e6);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
color: #888;
|
|
}
|
|
|
|
#ev-sidebar-note {
|
|
margin-top: 18px;
|
|
padding: 8px;
|
|
font-size: 11px;
|
|
color: #999;
|
|
border-top: 1px solid var(--side-nav-arrow-opacity, #e2e2e6);
|
|
}
|
|
|
|
#ev-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow-x: auto;
|
|
padding: 24px 36px 48px 36px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#ev-footer {
|
|
padding: 12px 36px;
|
|
font-size: 12px;
|
|
color: #999;
|
|
border-top: 1px solid var(--side-nav-arrow-opacity, #e2e2e6);
|
|
}
|
|
|
|
/* Keep the doc content readable on narrow panels: sidebar stacks on top and
|
|
* the content follows immediately (no dead space between them). */
|
|
@media screen and (max-width: 900px) {
|
|
#ev-layout {
|
|
flex-direction: column;
|
|
}
|
|
|
|
#ev-sidebar {
|
|
flex: 0 0 auto;
|
|
width: 100%;
|
|
position: static;
|
|
height: auto;
|
|
max-height: 45vh;
|
|
border-right: none;
|
|
border-bottom: 1px solid var(--side-nav-arrow-opacity, #e2e2e6);
|
|
}
|
|
|
|
#ev-content {
|
|
padding: 18px 18px 40px 18px;
|
|
}
|
|
}
|