oib/aitbc
1
0
Fork 0
Code Issues Pull Requests Actions 6 Packages Projects Releases Wiki Activity

fix(explorer): unify header and dark mode theme with global standard

Browse Source
This commit is contained in:
oib
2026-02-27 12:09:11 +01:00
parent df726f9ccb
commit 8587a9f2b5
4 changed files with 38 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/explorer-web/index.html
View File

@@ -5,9 +5,12 @@
<link rel="icon" type="image/svg+xml" href="/assets/favicon.ico" /> <link rel="icon" type="image/svg+xml" href="/assets/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AITBC Explorer</title> <title>AITBC Explorer</title>
<link rel="stylesheet" href="/assets/css/site-header.css">
</head> </head>
<body> <body>
<div data-global-header></div>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
<script src="/assets/js/global-header.js"></script>
</body> </body>
</html> </html>

5
apps/explorer-web/public/css/layout.css
View File

@@ -373,3 +373,8 @@
color: rgba(244, 246, 251, 0.7); color: rgba(244, 246, 251, 0.7);
font-size: 0.9rem; font-size: 0.9rem;
} }
/* Global Header spacing fix */
.page {
margin-top: 80px; /* Make space for the fixed global header */
}

30
apps/explorer-web/public/css/theme.css
View File

@@ -36,3 +36,33 @@
--color-border-strong: rgba(142, 249, 208, 0.24); --color-border-strong: rgba(142, 249, 208, 0.24);
--color-focus-ring: rgba(142, 249, 208, 0.65); --color-focus-ring: rgba(142, 249, 208, 0.65);
} }
/* Light Mode Overrides (triggered by global-header.js) */
html[data-theme='light'],
body.light {
color-scheme: light;
--color-bg: #f9fafb;
--color-surface: #ffffff;
--color-surface-muted: #f3f4f6;
--color-border: #e5e7eb;
--color-border-strong: #d1d5db;
--color-text-primary: #111827;
--color-text-secondary: #4b5563;
--color-text-muted: #6b7280;
--color-primary: #2563eb;
--color-primary-hover: rgba(37, 99, 235, 0.1);
--color-focus-ring: rgba(37, 99, 235, 0.5);
--color-placeholder: #9ca3af;
--color-table-even: #f9fafb;
--color-table-head: #f3f4f6;
--color-shadow-soft: rgba(0, 0, 0, 0.05);
}
html[data-theme='light'][data-mode="live"],
body.light[data-mode="live"] {
--color-primary: #059669;
--color-primary-hover: rgba(5, 150, 105, 0.1);
--color-border: rgba(5, 150, 105, 0.2);
--color-border-strong: rgba(5, 150, 105, 0.3);
--color-focus-ring: rgba(5, 150, 105, 0.5);
}

1
apps/explorer-web/src/main.ts
View File

@@ -61,7 +61,6 @@ function render(): void {
const page = routes[normalizedPath] ?? null; const page = routes[normalizedPath] ?? null;
root.innerHTML = ` root.innerHTML = `
${siteHeader(page?.title ?? "Explorer")}
<main class="page">${(page ?? notFoundPageConfig).render()}</main> <main class="page">${(page ?? notFoundPageConfig).render()}</main>
${siteFooter()} ${siteFooter()}
`; `;