rosa/hakurei
6
3
Fork 2
Code Issues 10 Pull Requests 2 Actions 2 Packages Projects Releases 15 Wiki Activity

cmd/pkgserver: fix dark mode in test web UI

Browse Source
This commit is contained in:
Kat
2026-03-22 06:14:10 +11:00
parent 550fd6f724
commit 4435b7ae56
4 changed files with 40 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
cmd/pkgserver/ui/static/success-closed.svg
View File

@@ -1,6 +1,16 @@
<?xml version="1.0"?>
<!-- See failure-open.svg for an explanation of the view box dimensions. -->
<svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-20,-20 160 130">
<style>
.adaptive-stroke {
stroke: black;
}
@media (prefers-color-scheme: dark) {
.adaptive-stroke {
stroke: ghostwhite;
}
}
</style>
<!-- When updating this triangle, also update the other five SVGs. -->
<polygon points="0,0 100,50 0,100" fill="none" stroke="black" stroke-width="15" stroke-linejoin="round"/>
<polygon points="0,0 100,50 0,100" fill="none" class="adaptive-stroke" stroke-width="15" stroke-linejoin="round"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 369 B

After

Width:  |  Height:  |  Size: 572 B

12
cmd/pkgserver/ui/static/success-open.svg
View File

@@ -1,6 +1,16 @@
<?xml version="1.0"?>
<!-- See failure-open.svg for an explanation of the view box dimensions. -->
<svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-20,-20 160 130">
<style>
.adaptive-stroke {
stroke: black;
}
@media (prefers-color-scheme: dark) {
.adaptive-stroke {
stroke: ghostwhite;
}
}
</style>
<!-- When updating this triangle, also update the other five SVGs. -->
<polygon points="0,0 100,0 50,100" fill="none" stroke="black" stroke-width="15" stroke-linejoin="round"/>
<polygon points="0,0 100,0 50,100" fill="none" class="adaptive-stroke" stroke-width="15" stroke-linejoin="round"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 369 B

After

Width:  |  Height:  |  Size: 572 B

20
cmd/pkgserver/ui/static/test.scss
View File

@@ -1,3 +1,19 @@
:root {
--bg: #d3d3d3;
--fg: black;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #2c2c2c;
--fg: ghostwhite;
}
}
html {
background-color: var(--bg);
color: var(--fg);
}
h1, p, summary {
font-family: sans-serif;
}
@@ -9,7 +25,7 @@ h1, p, summary {
details.test-node {
margin-left: 1rem;
padding: 0.2rem 0.5rem;
border-left: 2px dashed black;
border-left: 2px dashed var(--fg);
> summary {
cursor: pointer;
}
@@ -21,7 +37,7 @@ details.test-node {
* individuals, it's better than no indication of a test's state.
* See: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::marker#browser_compatibility
*/
color: black;
color: var(--fg);
content: url("/static/success-closed.svg");
}
&.success[open] > summary::marker {

1
cmd/pkgserver/ui/test.html
View File

@@ -3,7 +3,6 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="static/style.css">
<link rel="stylesheet" href="static/test.css">
<title>PkgServer Tests</title>
</head>