Reimar/website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix visual bug in chrome while changing themes

Browse Source
This commit is contained in:
ReimarPB 2023-09-09 18:06:32 +02:00
parent f7fcf6788c
commit 24524a20fe
5 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/icons/light-mode/theme-auto.svg
View File

@ -4,5 +4,5 @@
<rect x="0" y="0" width="50" height="100" fill="white" /> <rect x="0" y="0" width="50" height="100" fill="white" />
</mask> </mask>
<circle cx="50" cy="50" r="50" fill="black" mask="url(#mask)" /> <circle cx="50" cy="50" r="50" fill="black" mask="url(#mask)" />
<circle cx="50" cy="50" r="45" fill-opacity="0" stroke="black" stroke-width="10" /> <circle cx="50" cy="50" r="45" fill-opacity="0" stroke="currentColor" stroke-width="10" />
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 366 B

After

Width:  |  Height:  |  Size: 373 B

1
assets/style/dark-mode.css
View File

@ -76,3 +76,4 @@ body {
.light { .light {
display: none !important; display: none !important;
} }

1
assets/style/light-mode.css
View File

@ -76,3 +76,4 @@ body {
.dark { .dark {
display: none !important; display: none !important;
} }

8
assets/style/main.css
View File

@ -214,6 +214,14 @@ h1, h2 {
float: right; float: right;
} }
.light, .dark {
display: none;
}
.icon-wrapper {
display: inline-block;
width: 1em;
}
.icon { .icon {
-ms-interpolation-mode: nearest-neighbor; -ms-interpolation-mode: nearest-neighbor;
display: inline-block; display: inline-block;

18
inc/sidebar.inc
View File

@ -4,14 +4,16 @@
<div class="section container" style="font-size: 14px;"> <div class="section container" style="font-size: 14px;">
<h2>Theme</h2> <h2>Theme</h2>
<?php foreach (["auto", "light", "dark"] as $theme): ?> <?php foreach (["auto", "light", "dark"] as $theme): ?>
<picture class="light"> <div class="icon-wrapper">
<source type="image/svg+xml" srcset="/assets/icons/light-mode/theme-<?= $theme ?>.svg"> <picture class="light">
<img class="icon" src="/assets/icons/light-mode/theme-<?= $theme ?>.png" alt=""> <source type="image/svg+xml" srcset="/assets/icons/light-mode/theme-<?= $theme ?>.svg">
</picture> <img class="icon" src="/assets/icons/light-mode/theme-<?= $theme ?>.png" alt="">
<picture class="dark"> </picture>
<source type="image/svg+xml" srcset="/assets/icons/dark-mode/theme-<?= $theme ?>.svg"> <picture class="dark">
<img class="icon" src="/assets/icons/dark-mode/theme-<?= $theme ?>.png" alt=""> <source type="image/svg+xml" srcset="/assets/icons/dark-mode/theme-<?= $theme ?>.svg">
</picture> <img class="icon" src="/assets/icons/dark-mode/theme-<?= $theme ?>.png" alt="">
</picture>
</div>
<span id="<?= $theme ?>-theme"> <span id="<?= $theme ?>-theme">
<a class="theme-btn" data-theme="<?= $theme ?>" href="/api/set_theme/<?= $name ?>.php"> <a class="theme-btn" data-theme="<?= $theme ?>" href="/api/set_theme/<?= $name ?>.php">
<?= ucwords($theme) ?> <?= ucwords($theme) ?>