aaron.axvig/firewallissues
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add auto dark mode
Test and deploy / deploy (push) Successful in 31s
Details

Browse Source
This commit is contained in:
aaron.axvig
2026-07-25 23:19:11 -05:00
parent 82229dace9
commit 9ebdcba754
2 changed files with 101 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/process.html
+11 -8
View File
@@ -18,7 +18,8 @@
gap: 20px; gap: 20px;
} }
.form-section, .preview-section { .form-section, .preview-section {
border: 1px solid #ccc; border: 1px solid var(--border);
background: var(--surface);
padding: 20px; padding: 20px;
border-radius: 5px; border-radius: 5px;
} }
@@ -32,12 +33,14 @@
display: block; display: block;
margin-bottom: 5px; margin-bottom: 5px;
font-weight: bold; font-weight: bold;
color: #333; color: var(--text);
} }
input[type="text"], select, textarea { input[type="text"], select, textarea {
width: 100%; width: 100%;
padding: 8px; padding: 8px;
border: 1px solid #ddd; border: 1px solid var(--border);
background: var(--input-bg);
color: var(--text);
border-radius: 3px; border-radius: 3px;
font-size: 14px; font-size: 14px;
box-sizing: border-box; box-sizing: border-box;
@@ -51,10 +54,10 @@
} }
#markdownOutput { #markdownOutput {
height: 350px; height: 350px;
background-color: #f5f5f5; background-color: var(--surface-subtle);
} }
button { button {
background-color: #4CAF50; background-color: var(--button);
color: white; color: white;
padding: 10px 20px; padding: 10px 20px;
border: none; border: none;
@@ -63,7 +66,7 @@
font-size: 14px; font-size: 14px;
} }
button:hover { button:hover {
background-color: #45a049; background-color: var(--button-hover);
} }
.button-group { .button-group {
display: flex; display: flex;
@@ -141,7 +144,7 @@
<label for="issuesInput">Issues Table HTML (paste table node here):</label> <label for="issuesInput">Issues Table HTML (paste table node here):</label>
<textarea id="issuesInput" placeholder="Paste the full HTML table element that contains Issue ID and Description columns..."></textarea> <textarea id="issuesInput" placeholder="Paste the full HTML table element that contains Issue ID and Description columns..."></textarea>
</div> </div>
<div id="parseStatus" style="margin-top: 10px; font-size: 13px; color: #333;"></div> <div id="parseStatus" style="margin-top: 10px; font-size: 13px; color: var(--text);"></div>
</section> </section>
<section class="preview-section"> <section class="preview-section">
@@ -149,7 +152,7 @@
<label for="markdownOutput">Copy the Markdown below:</label> <label for="markdownOutput">Copy the Markdown below:</label>
<textarea id="markdownOutput" readonly></textarea> <textarea id="markdownOutput" readonly></textarea>
<button id="copyMarkdownBtn" style="margin-top: 10px; width: 100%;">Copy Markdown</button> <button id="copyMarkdownBtn" style="margin-top: 10px; width: 100%;">Copy Markdown</button>
<a id="downloadMarkdownLink" href="#" style="display: block; margin-top: 10px; text-align: center; color: #2c7be5; text-decoration: none; pointer-events: none; opacity: 0.6;">Download Markdown File</a> <a id="downloadMarkdownLink" href="#" style="display: block; margin-top: 10px; text-align: center; color: var(--focus); text-decoration: none; pointer-events: none; opacity: 0.6;">Download Markdown File</a>
</section> </section>
</div> </div>
</main> </main>
web/styles.css
+90 -41
View File
@@ -1,18 +1,61 @@
:root {
color-scheme: light dark;
--page-bg: #f7f9fb;
--surface: #ffffff;
--surface-subtle: #f1f4f7;
--surface-strong: #e3eaf0;
--text: #24313d;
--text-muted: #5b6b7a;
--border: #ccd5dd;
--header: #2c3e50;
--header-text: #ffffff;
--header-link: #dbe9f5;
--hover: #eaf2f8;
--focus: #2c7be5;
--input-bg: #ffffff;
--button: #388e3c;
--button-hover: #2e7d32;
--shadow: rgba(20, 35, 50, 0.14);
}
@media (prefers-color-scheme: dark) {
:root {
--page-bg: #111820;
--surface: #18232d;
--surface-subtle: #202d38;
--surface-strong: #293946;
--text: #e5edf4;
--text-muted: #a9bac8;
--border: #3b4c59;
--header: #1b2a36;
--header-text: #f5f8fa;
--header-link: #c7d9e8;
--hover: #243541;
--focus: #79b8ff;
--input-bg: #101820;
--button: #3f9145;
--button-hover: #4ca653;
--shadow: rgba(0, 0, 0, 0.35);
}
}
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
body { body {
background: var(--page-bg);
color: var(--text);
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
header { header {
background-color: #2c3e50; background-color: var(--header);
color: white; color: var(--header-text);
padding: 20px; padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px var(--shadow);
} }
.top-links { .top-links {
@@ -23,19 +66,19 @@ header {
} }
.top-links a { .top-links a {
color: #dbe9f5; color: var(--header-link);
text-decoration: none; text-decoration: none;
font-size: 14px; font-size: 14px;
} }
.top-links a:hover, .top-links a:hover,
.top-links a:focus { .top-links a:focus {
color: #ffffff; color: var(--header-text);
text-decoration: underline; text-decoration: underline;
} }
.top-links a[aria-current="page"] { .top-links a[aria-current="page"] {
color: #ffffff; color: var(--header-text);
font-weight: 700; font-weight: 700;
text-decoration: underline; text-decoration: underline;
text-underline-offset: 4px; text-underline-offset: 4px;
@@ -46,7 +89,7 @@ h1 {
} }
h2 { h2 {
color: #333; color: var(--text);
} }
.container { .container {
@@ -60,8 +103,8 @@ h2 {
.sidebar { .sidebar {
flex: 0 0 350px; flex: 0 0 350px;
background-color: #f8f9fa; background-color: var(--surface-subtle);
border: 1px solid #ddd; border: 1px solid var(--border);
border-radius: 4px; border-radius: 4px;
padding: 15px; padding: 15px;
height: auto; height: auto;
@@ -73,19 +116,25 @@ h2 {
font-size: 18px; font-size: 18px;
} }
.checkbox-tree {
--checkbox-tree-hover-color: var(--text);
}
.issue-search { .issue-search {
width: 100%; width: 100%;
margin-bottom: 12px; margin-bottom: 12px;
padding: 6px 8px; padding: 6px 8px;
border: 1px solid #c8c8c8; border: 1px solid var(--border);
background: var(--input-bg);
color: var(--text);
border-radius: 4px; border-radius: 4px;
font-size: 13px; font-size: 13px;
} }
.issue-search:focus { .issue-search:focus {
outline: 2px solid #9ec5fe; outline: 2px solid var(--focus);
outline-offset: 1px; outline-offset: 1px;
border-color: #6ea8fe; border-color: var(--focus);
} }
.issue-filters { .issue-filters {
@@ -122,12 +171,12 @@ h2 {
#issues h2 { #issues h2 {
margin: 0 0 10px 0; margin: 0 0 10px 0;
border-bottom: 2px solid #2c3e50; border-bottom: 2px solid var(--header);
padding-bottom: 8px; padding-bottom: 8px;
} }
.issue-count { .issue-count {
color: #5b6b7a; color: var(--text-muted);
font-weight: 500; font-weight: 500;
font-size: 0.9em; font-size: 0.9em;
} }
@@ -145,29 +194,29 @@ ul {
.issues-table { .issues-table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
border: 1px solid #ddd; border: 1px solid var(--border);
background-color: #fff; background-color: var(--surface);
font-size: 14px; font-size: 14px;
} }
.issues-table th, .issues-table th,
.issues-table td { .issues-table td {
border: 1px solid #ddd; border: 1px solid var(--border);
padding: 8px 10px; padding: 8px 10px;
text-align: left; text-align: left;
vertical-align: top; vertical-align: top;
} }
.issues-table th { .issues-table th {
background-color: #eef3f7; background-color: var(--surface-strong);
color: #22313f; color: var(--text);
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
} }
.issues-table tbody tr:hover { .issues-table tbody tr:hover {
background-color: #f7fbff; background-color: var(--hover);
} }
.issues-table .issue-id-col { .issues-table .issue-id-col {
@@ -208,14 +257,14 @@ ul {
li { li {
padding: 10px; padding: 10px;
border: 1px solid #ddd; border: 1px solid var(--border);
margin: 5px 0; margin: 5px 0;
border-radius: 4px; border-radius: 4px;
background-color: #fafafa; background-color: var(--surface);
} }
li:hover { li:hover {
background-color: #f0f0f0; background-color: var(--hover);
} }
.statistics-container { .statistics-container {
@@ -226,7 +275,7 @@ li:hover {
.statistics-intro { .statistics-intro {
margin: 0 0 28px; margin: 0 0 28px;
color: #4e5d6c; color: var(--text-muted);
line-height: 1.5; line-height: 1.5;
} }
@@ -242,7 +291,7 @@ li:hover {
} }
.stats-product-total { .stats-product-total {
color: #667788; color: var(--text-muted);
font-size: 0.65em; font-size: 0.65em;
font-weight: 400; font-weight: 400;
} }
@@ -254,20 +303,20 @@ li:hover {
.stats-table { .stats-table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
border: 1px solid #ccd4dc; border: 1px solid var(--border);
background: #ffffff; background: var(--surface);
} }
.stats-table th, .stats-table th,
.stats-table td { .stats-table td {
border-bottom: 1px solid #dce2e8; border-bottom: 1px solid var(--border);
padding: 9px 14px; padding: 9px 14px;
text-align: left; text-align: left;
} }
.stats-table thead th { .stats-table thead th {
background: #2c3e50; background: var(--header);
color: #ffffff; color: var(--header-text);
font-size: 0.8rem; font-size: 0.8rem;
letter-spacing: 0.04em; letter-spacing: 0.04em;
text-transform: uppercase; text-transform: uppercase;
@@ -275,7 +324,7 @@ li:hover {
.stats-table td { .stats-table td {
width: 180px; width: 180px;
color: #526272; color: var(--text-muted);
white-space: nowrap; white-space: nowrap;
} }
@@ -302,7 +351,7 @@ li:hover {
.stats-toggle::before { .stats-toggle::before {
width: 18px; width: 18px;
color: #617588; color: var(--text-muted);
content: "▶"; content: "▶";
font-size: 0.65rem; font-size: 0.65rem;
transform-origin: center; transform-origin: center;
@@ -320,20 +369,20 @@ li:hover {
} }
.stats-toggle:focus-visible { .stats-toggle:focus-visible {
outline: 2px solid #2c7be5; outline: 2px solid var(--focus);
outline-offset: 3px; outline-offset: 3px;
} }
.stats-major th, .stats-major th,
.stats-major td { .stats-major td {
background: #e7edf2; background: var(--surface-strong);
color: #22313f; color: var(--text);
font-weight: 700; font-weight: 700;
} }
.stats-minor th, .stats-minor th,
.stats-minor td { .stats-minor td {
background: #f5f7f9; background: var(--surface-subtle);
font-weight: 600; font-weight: 600;
} }
@@ -344,7 +393,7 @@ li:hover {
.stats-patch th::before { .stats-patch th::before {
position: absolute; position: absolute;
color: #91a0ad; color: var(--text-muted);
content: "└"; content: "└";
} }
@@ -461,14 +510,14 @@ li:hover {
grid-template-columns: minmax(0, max-content) minmax(0, 1fr); grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
column-gap: 6px; column-gap: 6px;
row-gap: 4px; row-gap: 4px;
border: 1px solid #ddd; border: 1px solid var(--border);
border-radius: 8px; border-radius: 8px;
background-color: #fff; background-color: var(--surface);
padding: 8px 10px; padding: 8px 10px;
} }
.issue-list-table tbody tr:hover { .issue-list-table tbody tr:hover {
background-color: #fff; background-color: var(--surface);
} }
.issue-list-table tbody td { .issue-list-table tbody td {
@@ -504,7 +553,7 @@ li:hover {
.issue-list-table .issue-version-col::before { .issue-list-table .issue-version-col::before {
content: attr(data-label) " "; content: attr(data-label) " ";
color: #445566; color: var(--text-muted);
font-weight: 600; font-weight: 600;
} }