PrivateCoffee/wishthis
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add dark theme

Browse source
This commit is contained in:
grandeljay 2022-06-10 13:44:21 +02:00
parent ad16187719
commit 6e67f579db
5 changed files with 442 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

424
src/assets/css/default.css
View file

@ -14,11 +14,14 @@ figure {
/**
* Logo
*/
.ui.menu .item.home > img:not(.ui) {
.ui.menu .item.home > :is(img, svg):not(.ui) {
width: auto;
height: 1em;
margin: 0;
}
#svgLogo path {
fill: currentColor;
}
/**
* Footer
@ -54,6 +57,38 @@ figure {
}
/** Image */
.wishlist .ui.card > .image > svg {
width: 100%;
height: var(--wishPreviewHeight);
padding: 15% 10%;
box-sizing: border-box;
border-radius: inherit;
color: #f0f0f0;
background-color: #f4f4f4;
}
@media (prefers-color-scheme: dark) {
.wishlist .ui.card > .image > svg {
color: #0f0f0f;
background-color: #0b0b0b;
}
}
@media (hover: hover) {
@media (prefers-reduced-motion: no-preference) {
.wishlist .ui.card > .image > svg {
transition: height 0.2s linear,
padding 0.2s linear,
opacity 0.2s linear;
}
}
.wishlist .ui.card:hover > .image > svg {
height: calc(1em + 3 * var(--padding) - 5px);
padding: 0;
opacity: 0;
}
}
.wishlist .ui.card > .image > img.preview {
height: var(--wishPreviewHeight);
@ -61,6 +96,12 @@ figure {
object-position: 50%;
background-color: #fff;
}
@media (prefers-color-scheme: dark) {
.wishlist .ui.card > .image > img.preview {
background-color: #000;
filter: brightness(80%);
}
}
@media (hover: hover) {
@media (prefers-reduced-motion: no-preference) {
.wishlist .ui.card > .image > img.preview {
@ -70,10 +111,6 @@ figure {
.wishlist .ui.card:hover > .image > img.preview {
height: calc(1em + 3 * var(--padding));
}
.wishlist .ui.card:hover > .image > img.preview[src="/src/assets/img/no-image.svg"] {
object-fit: contain;
background-color: #f9f9f9;
}
}
/** Provider */
@ -116,14 +153,23 @@ figure {
text-overflow: ellipsis;
background-color: rgba(255, 255, 255, 0.6);
box-shadow: 0 0 4px rgba(200, 200, 200, 0.4);
backdrop-filter: blur(4px);
}
@media (prefers-color-scheme: dark) {
.wishlist .ui.card > .image > span.provider {
background-color: rgba(0, 0, 0, 0.6);
}
}
@supports (backdrop-filter: blur(4px)) {
.wishlist .ui.card > .image > span.provider {
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(4px);
}
@media (prefers-color-scheme: dark) {
.wishlist .ui.card > .image > span.provider {
background-color: rgba(0, 0, 0, 0.2);
}
}
}
@media (hover: hover) {
.wishlist .ui.card > .image > span.provider {
@ -179,9 +225,14 @@ figure {
height: 4em;
width: 100%;
background-image: linear-gradient(0deg, rgba(255,255,255,1) 0.75em, rgba(255,255,255,0.8995799003195029) 45%, rgba(255,255,255,0) 100%);
background-image: linear-gradient(0deg, rgba(255, 255, 255, 1) 0.75em, rgba(255, 255, 255, 0.9) 45%, rgba(255, 255, 255, 0) 100%);
border-radius: 0.33333333rem;
}
@media (prefers-color-scheme: dark) {
.wishlist .ui.card > .content > .description-fade {
background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0.75em, rgba(0, 0, 0, 0.9) 45%, rgba(0, 0, 0, 0) 100%);
}
}
/** Buttons */
.wishlist .ui.card > .extra.buttons {
@ -335,6 +386,11 @@ p .ui.horizontal.label {
.ui.basic.white.button {
background-color: #fff;
}
@media (prefers-color-scheme: dark) {
.ui.basic.white.button {
background-color: #000;
}
}
/**
* List
@ -355,3 +411,357 @@ button.item {
background-color: transparent;
}
/**
* Dark theme
*/
body,
.ui.segment {
transition: color 2s ease,
background-color 2s ease;
}
@media (prefers-color-scheme: dark) {
body {
color: #dfdfdf;
background-color: #0b0b0b;
}
/** Segment */
.ui.segment {
background-color: #000;
}
/** Header */
.ui.dropdown .menu > .header:not(.ui) {
color: rgba(255, 255, 255, 0.85);
}
.ui.header {
color: rgba(255, 255, 255, 0.87);
}
/** Menu */
.ui.menu,
.ui.menu .dropdown.item .menu {
background-color: #000;
}
.ui.menu .item {
color: rgba(255, 255, 255, 0.87);
}
.ui.vertical.menu {
background: #000;
box-shadow: 0 1px 2px 0 rgba(221, 219, 217, 0.15);
}
.ui.vertical.pointing.menu .active.item::after {
background-color: #0d0d0d;
}
.ui.menu .active.item {
color: rgba(255, 255, 255, 0.95);
}
.ui.vertical.pointing.menu .item::after {
border-color: #2b2b2a;
}
.ui.vertical.pointing.menu .active.item:hover::after {
background-color: #0d0d0d;
}
.ui.menu .active.item:hover,
.ui.vertical.menu .active.item:hover {
color: rgba(255, 255, 255, 0.95);
background-color: rgba(255, 255, 255, 0.05);
}
/** */
.ui.link.menu .item:hover,
.ui.menu .dropdown.item:hover,
.ui.menu .link.item:hover,
.ui.menu a.item:hover,
.ui.dropdown .menu > a.item,
.ui.dropdown .menu > a.item:hover {
color: rgba(255, 255, 255, 0.95);
}
.ui.menu .ui.dropdown .menu > .item {
color: rgba(255, 255, 255, 0.87) !important;
}
.ui.menu .ui.dropdown .menu > .item:hover {
color: rgba(255, 255, 255, 0.95) !important;
background-color: rgba(255, 255, 255, 0.05) !important;
}
.ui.dropdown .menu > .item:hover {
color: rgba(255, 255, 255, 0.95);
background-color: rgba(255, 255, 255, 0.05);
}
.ui.statistic > .value,
.ui.statistics .statistic > .value {
color: #e4e3e2;
}
.ui.statistic > .label,
.ui.statistics .statistic > .label {
color: rgba(255, 255, 255, 0.87);
}
.ui.list .list > .item > .content,
.ui.list > .item > .content {
color: rgba(255, 255, 255, 0.87);
}
.ui.attached.menu:not(.tabular) {
border-color: #2b2b2a;
}
/** Dropdown */
.ui.selection.dropdown {
color: rgba(255, 255, 255, 0.87);
border-color: rgba(221, 219, 217, 0.15);
background-color: #000;
}
.ui.selection.visible.dropdown > .text:not(.default) {
color: rgba(255, 255, 255, 0.8);
}
.ui.dropdown .menu {
background-color: #000;
}
.ui.dropdown .menu > .item {
color: rgba(255, 255, 255, 0.87);
}
.ui.selection.dropdown .menu > .item {
border-top-color: #050505;
}
.ui.dropdown .menu .selected.item,
.ui.dropdown.selected {
color: rgba(255, 255, 255, 0.95);
background-color: rgba(255, 255, 255, 0.03);
}
.ui.pointing.dropdown > .menu:not(.hidden)::after {
box-shadow: -1px -1px 0 0 rgba(221, 219, 217, 0.15);
background-color: #000;
}
/** Button */
.ui.button {
color: rgba(255, 255, 255, 0.6);
background-color: #1f1e1d;
}
.ui.button:hover {
color: rgba(255, 255, 255, 0.8);
background-color: #353432;
}
.ui.basic.button,
.ui.basic.buttons .button {
color: rgba(255, 255, 255, 0.6);
}
.ui.basic.button:hover,
.ui.basic.buttons .button:hover {
color: rgba(255, 255, 255, 0.8);
background-color: #000;
}
/** Input */
.ui.input > input {
color: rgba(255, 255, 255, 0.87);
background-color: #000;
}
.ui.input.down input,
.ui.input > input:active {
color: rgba(255, 255, 255, 0.87);
border-color: rgba(255, 255, 255, 0.3);
background-color: #050505;
}
.ui.input.focus > input,
.ui.input > input:focus {
color: rgba(255, 255, 255, 0.8);
background-color: #000;
}
.ui.form input:not([type]),
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="file"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="text"],
.ui.form input[type="time"],
.ui.form input[type="url"],
.ui.form textarea,
.ui.input textarea {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
background-color: #000;
border-color: rgba(221, 219, 217, 0.15);
color: rgba(255, 255, 255, 0.87);
}
.ui.form input:not([type]):focus,
.ui.form input[type="date"]:focus,
.ui.form input[type="datetime-local"]:focus,
.ui.form input[type="email"]:focus,
.ui.form input[type="file"]:focus,
.ui.form input[type="number"]:focus,
.ui.form input[type="password"]:focus,
.ui.form input[type="search"]:focus,
.ui.form input[type="tel"]:focus,
.ui.form input[type="text"]:focus,
.ui.form input[type="time"]:focus,
.ui.form input[type="url"]:focus,
.ui.form textarea:focus,
.ui.input textarea:focus {
color: rgba(255, 255, 255, 0.95);
background-color: #000;
box-shadow: 0 0 0 0 rgba(221, 219, 217, 0.35) inset;
}
/** Form **/
.ui.form ::placeholder {
color: rgba(64, 64, 64, 0.87);
}
input::selection, textarea::selection {
color: rgba(255, 255, 255, 0.87);
background-color: rgba(155, 155, 155, 0.4);
}
.ui.form .field > label {
color: rgba(255, 255, 255, 0.87);
}
/** Card */
.ui.card,
.ui.cards > .card {
background-color: #000;
box-shadow: 0 1px 3px 0 #2b2b2a,
0 0 0 1px #2b2b2a;
}
.ui.card > .image,
.ui.cards > .card > .image {
background-color: rgba(255, 255, 255, 0.05);
}
.ui.card > .content > .header,
.ui.cards > .card > .content > .header {
color: rgba(255, 255, 255, 0.85);
}
.ui.card > .content > .description,
.ui.cards > .card > .content > .description {
color: rgba(255, 255, 255, 0.68);
}
.ui.card .meta > a:not(.ui),
.ui.cards > .card .meta > a:not(.ui) {
color: rgba(255, 255, 255, 0.4);
}
.ui.card .meta > a:not(.ui):hover,
.ui.cards > .card .meta > a:not(.ui):hover {
color: rgba(255, 255, 255, 0.87);
}
.ui.card > .extra,
.ui.cards > .card > .extra {
color: rgba(255, 255, 255, 0.4);
}
/** Label */
.ui.teal.labels .label,
.ui.ui.ui.teal.label,
.ui.olive.labels .label,
.ui.ui.ui.olive.label {
color: inherit;
}
/** List */
.ui.list .list > .item .description,
.ui.list > .item .description {
color: rgba(255, 255, 255, 0.7);
}
/** Table */
.ui.table {
background-color: #000;
border-color: rgba(221, 219, 217, 0.15);
color: rgba(255, 255, 255, 0.87);
}
.ui.table > thead > tr > th {
background-color: #060504;
color: rgba(255, 255, 255, 0.87);
border-bottom-color: rgba(221, 219, 217, 0.1);
}
/** Message */
.ui.info.message {
background-color: #070000;
}
/** Modal */
.ui.modal {
box-shadow: 1px 3px 3px 0 rgba(255, 255, 255, 0.2),
1px 3px 15px 2px rgba(255, 255, 255, 0.2);
background-color: #000;
}
.ui.modal > .header {
color: rgba(255, 255, 255, 0.85);
background-color: #000;
border-bottom-color: rgba(221, 219, 217, 0.15);
}
.ui.modal > .content {
background-color: #000;
}
.ui.modal > .actions {
background-color: #060504;
border-top-color: rgba(221, 219, 217, 0.15);
}
/** Checkbox */
.ui.checkbox label,
.ui.checkbox + label {
color: rgba(255, 255, 255, 0.87);
}
.ui.checkbox label:hover,
.ui.checkbox + label:hover {
color: rgba(255, 255, 255, 0.8);
}
.ui.checkbox input:focus ~ label {
color: rgba(255, 255, 255, 0.95);
}
/** Calendar */
.ui.ui.table td.active,
.ui.ui.ui.ui.table tr.active {
color: rgba(255, 255, 255, 0.87);
background-color: #1f1f1f;
box-shadow: 0 0 0 rgba(255, 255, 255, 0.87) inset;
}
.ui.bottom.popup::before {
background-color: #000;
}
.ui.bottom.left.popup::before {
box-shadow: -1px -1px 0 0 #454543;
}
/** Icon */
i.icon.calendar::before {
color: #fff;
}
/** Steps */
.ui.steps .step {
background-color: #000;
color: rgba(255, 255, 255, 0.87);
border-right: 1px solid rgba(221, 219, 217, 0.15);
}
.ui.steps .disabled.step,
.ui.steps .disabled.step .description,
.ui.steps .disabled.step .title {
color: rgba(215, 215, 215, 0.3);
}
.ui.steps .disabled.step {
background-color: #000;
}
.ui.steps .disabled.step::after {
background-color: #000;
}
.ui.steps .step::after {
background-color: #000;
border-color: rgba(221, 219, 217, 0.15);
}
.ui.steps .step .description {
color: rgba(255, 255, 255, 0.87);
}
}

2
src/assets/img/logo.svg
View file

@ -6,7 +6,7 @@
height="99.994713"
viewBox="0 0 135.46667 26.456935"
version="1.1"
id="svg5"
id="svgLogo"
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
sodipodi:docname="logo.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 5.4 KiB

35
src/assets/img/no-image.svg
View file

@ -1,14 +1,14 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
enable-background="new 0 0 512 512"
height="1080"
id="Layer_1"
height="616.96271"
id="svgNoImage"
version="1.1"
viewBox="0 0 1920 1080"
width="1920"
viewBox="0 0 645.30048 616.96271"
width="645.30048"
xml:space="preserve"
sodipodi:docname="no-image.svg"
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
inkscape:version="1.2 (dc2aedaf03, 2022-05-15)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
@ -32,23 +32,18 @@
inkscape:snap-bbox-midpoints="true"
inkscape:snap-page="true"
inkscape:zoom="0.58073907"
inkscape:cx="936.7374"
inkscape:cy="664.67028"
inkscape:cx="300.47918"
inkscape:cy="433.92982"
inkscape:window-width="1920"
inkscape:window-height="1027"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-y="-7"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_1" /><rect
style="fill:#f9f9f9;stroke:#f0f0f0;stroke-width:0.98345;stroke-linecap:square;stroke-dashoffset:7.55905;paint-order:stroke markers fill"
id="rect852"
width="1919.5166"
height="1079.5166"
x="-0.0082750227"
y="-0.0082750227" /><g
inkscape:current-layer="svgNoImage"
inkscape:deskcolor="#d1d1d1" /><g
id="g8"
transform="matrix(3.0801933,0,0,3.0801933,171.31651,-248.68347)"
style="stroke:#f0f0f0;stroke-opacity:1"><rect
transform="matrix(3.0801933,0,0,3.0801933,-466.03325,-480.20212)"
style="stroke:currentColor;stroke-opacity:1"><rect
fill="none"
height="190.3"
stroke="#000000"
@ -60,7 +55,7 @@
x="156.3"
y="160.89999"
id="rect2"
style="stroke:#f0f0f0;stroke-opacity:1" /><polyline
style="stroke:currentColor;stroke-opacity:1" /><polyline
fill="none"
points=" 156.3,315.7 219.7,256 275.7,315.7 304.7,285.8 355.7,351.1 "
stroke="#000000"
@ -69,7 +64,7 @@
stroke-miterlimit="10"
stroke-width="10"
id="polyline4"
style="stroke:#f0f0f0;stroke-opacity:1" /><circle
style="stroke:currentColor;stroke-opacity:1" /><circle
cx="303.89999"
cy="222.60001"
fill="none"
@ -80,4 +75,4 @@
stroke-miterlimit="10"
stroke-width="10"
id="circle6"
style="stroke:#f0f0f0;stroke-opacity:1" /></g></svg>
style="stroke:currentColor;stroke-opacity:1" /></g></svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

10
src/classes/page.php
View file

@ -549,14 +549,14 @@ class Page
}
ksort($pages);
$svgLogo = file_get_contents(ROOT . '/src/assets/img/logo.svg');
?>
<div class="ui attached stackable vertical menu sidebar">
<div class="ui container">
<a class="item home" href="/?page=home">
<img src="/src/assets/img/logo.svg" alt="<?= __('wishthis logo') ?>" />
</a>
<a class="item home" href="/?page=home"><?= $svgLogo ?></a>
<?php foreach ($pages as $page) { ?>
<?php foreach ($page['items'] as $item) { ?>
@ -575,9 +575,7 @@ class Page
<div class="pusher">
<div class="ui attached menu desktop">
<div class="ui container">
<a class="item home" href="/?page=home">
<img src="/src/assets/img/logo.svg" />
</a>
<a class="item home" href="/?page=home"><?= $svgLogo ?></a>
<?php foreach ($pages as $page) { ?>
<?php if ('left' === $page['alignment']) { ?>

6
src/classes/wish.php
View file

@ -149,7 +149,11 @@ class Wish
<?php } ?>
<?php if ($this->image) { ?>
<img class="preview" src="<?= $this->image ?>" loading="lazy" />
<?php if ('svg' === pathinfo($this->image, PATHINFO_EXTENSION)) { ?>
<?= file_get_contents(ROOT . $this->image) ?>
<?php } else { ?>
<img class="preview" src="<?= $this->image ?>" loading="lazy" />
<?php } ?>
<?php } ?>
<?php if (isset($this->info->favicon)) { ?>