Add icons to theme selector

This commit is contained in:
ReimarPB 2022-11-26 17:46:08 +01:00
parent 8aee61c01c
commit a13bb5c0f6
16 changed files with 86 additions and 7 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="utf-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<mask id="mask">
<rect x="0" y="0" width="50" height="100" fill="white" />
</mask>
<circle cx="50" cy="50" r="50" fill="white" mask="url(#mask)" />
<circle cx="50" cy="50" r="45" fill-opacity="0" stroke="white" stroke-width="10" />
</svg>

After

Width:  |  Height:  |  Size: 366 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 989 B

View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="utf-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<mask id="mask">
<rect x="0" y="0" width="100" height="100" fill="white" />
<circle cx="30" cy="50" r="35" fill="black" />
</mask>
<circle cx="50" cy="50" r="50" fill="white" mask="url(#mask)" />
</svg>

After

Width:  |  Height:  |  Size: 334 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="utf-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="25" fill="white" />
<rect x="47" y="2" width="6" height="15" rx="2" fill="white" />
<rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(22.5 50 50)" />
<rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(45 50 50)" />
<rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(67.5 50 50)" />
<rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(90 50 50)" />
<rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(112.5 50 50)" />
<rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(135 50 50)" />
<rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(157.5 50 50)" />
<rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(180 50 50)" />
<rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(202.5 50 50)" />
<rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(225 50 50)" />
<rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(247.5 50 50)" />
<rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(270 50 50)" />
<rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(292.5 50 50)" />
<rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(315 50 50)" />
<rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(337.5 50 50)" />
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 971 B

View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="utf-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<mask id="mask">
<rect x="0" y="0" width="50" height="100" fill="white" />
</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" />
</svg>

After

Width:  |  Height:  |  Size: 366 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 965 B

View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="utf-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<mask id="mask">
<rect x="0" y="0" width="100" height="100" fill="white" />
<circle cx="30" cy="50" r="35" fill="black" />
</mask>
<circle cx="50" cy="50" r="50" fill="black" mask="url(#mask)" />
</svg>

After

Width:  |  Height:  |  Size: 334 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="utf-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="25" fill="black" />
<rect x="47" y="2" width="6" height="15" rx="2" fill="black" />
<rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(22.5 50 50)" />
<rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(45 50 50)" />
<rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(67.5 50 50)" />
<rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(90 50 50)" />
<rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(112.5 50 50)" />
<rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(135 50 50)" />
<rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(157.5 50 50)" />
<rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(180 50 50)" />
<rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(202.5 50 50)" />
<rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(225 50 50)" />
<rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(247.5 50 50)" />
<rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(270 50 50)" />
<rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(292.5 50 50)" />
<rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(315 50 50)" />
<rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(337.5 50 50)" />
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -60,9 +60,6 @@ body {
.inline-code, .inline-code-text, .inline-code-icon { .inline-code, .inline-code-text, .inline-code-icon {
background-color: #212121; background-color: #212121;
} }
object[type='image/svg+xml'] {
color: #212121;
}
.dark { .dark {
display: initial !important; display: initial !important;

View File

@ -60,9 +60,6 @@ body {
.inline-code, .inline-code-text, .inline-code-icon { .inline-code, .inline-code-text, .inline-code-icon {
background-color: #EEE; background-color: #EEE;
} }
object[type='image/svg+xml'] {
color: #EEE;
}
.light { .light {
display: initial !important; display: initial !important;

View File

@ -92,6 +92,9 @@ a:hover {
text-align: left; text-align: left;
line-height: 1.5; line-height: 1.5;
} }
.theme-btn {
padding-left: 3px;
}
.theme-btn.selected { .theme-btn.selected {
text-decoration: none; text-decoration: none;
cursor: default; cursor: default;

View File

@ -12,7 +12,17 @@
]; ];
?> ?>
<?php foreach ($themes as $name=>$condition): ?> <?php foreach ($themes as $name=>$condition): ?>
<a class="theme-btn <?= $condition ? "" : "selected" ?>" data-theme="<?= $name ?>" href="/api/set_theme/<?= $name ?>.php"><?= ucwords($name) . ($condition ? "" : " &#10003;") ?></a> <picture class="light">
<source type="image/svg+xml" srcset="/assets/icons/light-mode/theme-<?= $name ?>.svg">
<img class="icon" src="/assets/icons/theme-<?= $name ?>.png" alt="">
</picture>
<picture class="dark">
<source type="image/svg+xml" srcset="/assets/icons/dark-mode/theme-<?= $name ?>.svg">
<img class="icon" src="/assets/icons/theme-<?= $name ?>.png" alt="">
</picture>
<a class="theme-btn <?= $condition ? "" : "selected" ?>" data-theme="<?= $name ?>" href="/api/set_theme/<?= $name ?>.php">
<?= ucwords($name) . ($condition ? "" : " &#10003;") ?>
</a>
<br> <br>
<?php endforeach; ?> <?php endforeach; ?>
</div> </div>