Add dark theme
This commit is contained in:
grandeljay
parent
ad16187719
commit
6e67f579db
5 changed files with 442 additions and 35 deletions
|
|
@ -14,11 +14,14 @@ figure {
|
||||||
/**
|
/**
|
||||||
* Logo
|
* Logo
|
||||||
*/
|
*/
|
||||||
.ui.menu .item.home > img:not(.ui) {
|
.ui.menu .item.home > :is(img, svg):not(.ui) {
|
||||||
width: auto;
|
width: auto;
|
||||||
height: 1em;
|
height: 1em;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
#svgLogo path {
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Footer
|
* Footer
|
||||||
|
|
@ -54,6 +57,38 @@ figure {
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Image */
|
/** 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 {
|
.wishlist .ui.card > .image > img.preview {
|
||||||
height: var(--wishPreviewHeight);
|
height: var(--wishPreviewHeight);
|
||||||
|
|
||||||
|
|
@ -61,6 +96,12 @@ figure {
|
||||||
object-position: 50%;
|
object-position: 50%;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.wishlist .ui.card > .image > img.preview {
|
||||||
|
background-color: #000;
|
||||||
|
filter: brightness(80%);
|
||||||
|
}
|
||||||
|
}
|
||||||
@media (hover: hover) {
|
@media (hover: hover) {
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
.wishlist .ui.card > .image > img.preview {
|
.wishlist .ui.card > .image > img.preview {
|
||||||
|
|
@ -70,10 +111,6 @@ figure {
|
||||||
.wishlist .ui.card:hover > .image > img.preview {
|
.wishlist .ui.card:hover > .image > img.preview {
|
||||||
height: calc(1em + 3 * var(--padding));
|
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 */
|
/** Provider */
|
||||||
|
|
@ -116,14 +153,23 @@ figure {
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
background-color: rgba(255, 255, 255, 0.6);
|
background-color: rgba(255, 255, 255, 0.6);
|
||||||
box-shadow: 0 0 4px rgba(200, 200, 200, 0.4);
|
|
||||||
backdrop-filter: blur(4px);
|
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)) {
|
@supports (backdrop-filter: blur(4px)) {
|
||||||
.wishlist .ui.card > .image > span.provider {
|
.wishlist .ui.card > .image > span.provider {
|
||||||
background-color: rgba(255, 255, 255, 0.2);
|
background-color: rgba(255, 255, 255, 0.2);
|
||||||
backdrop-filter: blur(4px);
|
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) {
|
@media (hover: hover) {
|
||||||
.wishlist .ui.card > .image > span.provider {
|
.wishlist .ui.card > .image > span.provider {
|
||||||
|
|
@ -179,9 +225,14 @@ figure {
|
||||||
|
|
||||||
height: 4em;
|
height: 4em;
|
||||||
width: 100%;
|
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;
|
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 */
|
/** Buttons */
|
||||||
.wishlist .ui.card > .extra.buttons {
|
.wishlist .ui.card > .extra.buttons {
|
||||||
|
|
@ -335,6 +386,11 @@ p .ui.horizontal.label {
|
||||||
.ui.basic.white.button {
|
.ui.basic.white.button {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.ui.basic.white.button {
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* List
|
* List
|
||||||
|
|
@ -355,3 +411,357 @@ button.item {
|
||||||
|
|
||||||
background-color: transparent;
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
height="99.994713"
|
height="99.994713"
|
||||||
viewBox="0 0 135.46667 26.456935"
|
viewBox="0 0 135.46667 26.456935"
|
||||||
version="1.1"
|
version="1.1"
|
||||||
id="svg5"
|
id="svgLogo"
|
||||||
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
|
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
|
||||||
sodipodi:docname="logo.svg"
|
sodipodi:docname="logo.svg"
|
||||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 5.4 KiB |
|
|
@ -1,14 +1,14 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
<svg
|
<svg
|
||||||
enable-background="new 0 0 512 512"
|
enable-background="new 0 0 512 512"
|
||||||
height="1080"
|
height="616.96271"
|
||||||
id="Layer_1"
|
id="svgNoImage"
|
||||||
version="1.1"
|
version="1.1"
|
||||||
viewBox="0 0 1920 1080"
|
viewBox="0 0 645.30048 616.96271"
|
||||||
width="1920"
|
width="645.30048"
|
||||||
xml:space="preserve"
|
xml:space="preserve"
|
||||||
sodipodi:docname="no-image.svg"
|
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:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
|
@ -32,23 +32,18 @@
|
||||||
inkscape:snap-bbox-midpoints="true"
|
inkscape:snap-bbox-midpoints="true"
|
||||||
inkscape:snap-page="true"
|
inkscape:snap-page="true"
|
||||||
inkscape:zoom="0.58073907"
|
inkscape:zoom="0.58073907"
|
||||||
inkscape:cx="936.7374"
|
inkscape:cx="300.47918"
|
||||||
inkscape:cy="664.67028"
|
inkscape:cy="433.92982"
|
||||||
inkscape:window-width="1920"
|
inkscape:window-width="1920"
|
||||||
inkscape:window-height="1027"
|
inkscape:window-height="1027"
|
||||||
inkscape:window-x="-8"
|
inkscape:window-x="-8"
|
||||||
inkscape:window-y="-8"
|
inkscape:window-y="-7"
|
||||||
inkscape:window-maximized="1"
|
inkscape:window-maximized="1"
|
||||||
inkscape:current-layer="Layer_1" /><rect
|
inkscape:current-layer="svgNoImage"
|
||||||
style="fill:#f9f9f9;stroke:#f0f0f0;stroke-width:0.98345;stroke-linecap:square;stroke-dashoffset:7.55905;paint-order:stroke markers fill"
|
inkscape:deskcolor="#d1d1d1" /><g
|
||||||
id="rect852"
|
|
||||||
width="1919.5166"
|
|
||||||
height="1079.5166"
|
|
||||||
x="-0.0082750227"
|
|
||||||
y="-0.0082750227" /><g
|
|
||||||
id="g8"
|
id="g8"
|
||||||
transform="matrix(3.0801933,0,0,3.0801933,171.31651,-248.68347)"
|
transform="matrix(3.0801933,0,0,3.0801933,-466.03325,-480.20212)"
|
||||||
style="stroke:#f0f0f0;stroke-opacity:1"><rect
|
style="stroke:currentColor;stroke-opacity:1"><rect
|
||||||
fill="none"
|
fill="none"
|
||||||
height="190.3"
|
height="190.3"
|
||||||
stroke="#000000"
|
stroke="#000000"
|
||||||
|
|
@ -60,7 +55,7 @@
|
||||||
x="156.3"
|
x="156.3"
|
||||||
y="160.89999"
|
y="160.89999"
|
||||||
id="rect2"
|
id="rect2"
|
||||||
style="stroke:#f0f0f0;stroke-opacity:1" /><polyline
|
style="stroke:currentColor;stroke-opacity:1" /><polyline
|
||||||
fill="none"
|
fill="none"
|
||||||
points=" 156.3,315.7 219.7,256 275.7,315.7 304.7,285.8 355.7,351.1 "
|
points=" 156.3,315.7 219.7,256 275.7,315.7 304.7,285.8 355.7,351.1 "
|
||||||
stroke="#000000"
|
stroke="#000000"
|
||||||
|
|
@ -69,7 +64,7 @@
|
||||||
stroke-miterlimit="10"
|
stroke-miterlimit="10"
|
||||||
stroke-width="10"
|
stroke-width="10"
|
||||||
id="polyline4"
|
id="polyline4"
|
||||||
style="stroke:#f0f0f0;stroke-opacity:1" /><circle
|
style="stroke:currentColor;stroke-opacity:1" /><circle
|
||||||
cx="303.89999"
|
cx="303.89999"
|
||||||
cy="222.60001"
|
cy="222.60001"
|
||||||
fill="none"
|
fill="none"
|
||||||
|
|
@ -80,4 +75,4 @@
|
||||||
stroke-miterlimit="10"
|
stroke-miterlimit="10"
|
||||||
stroke-width="10"
|
stroke-width="10"
|
||||||
id="circle6"
|
id="circle6"
|
||||||
style="stroke:#f0f0f0;stroke-opacity:1" /></g></svg>
|
style="stroke:currentColor;stroke-opacity:1" /></g></svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.5 KiB |
|
|
@ -549,14 +549,14 @@ class Page
|
||||||
}
|
}
|
||||||
|
|
||||||
ksort($pages);
|
ksort($pages);
|
||||||
|
|
||||||
|
$svgLogo = file_get_contents(ROOT . '/src/assets/img/logo.svg');
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<div class="ui attached stackable vertical menu sidebar">
|
<div class="ui attached stackable vertical menu sidebar">
|
||||||
<div class="ui container">
|
<div class="ui container">
|
||||||
|
|
||||||
<a class="item home" href="/?page=home">
|
<a class="item home" href="/?page=home"><?= $svgLogo ?></a>
|
||||||
<img src="/src/assets/img/logo.svg" alt="<?= __('wishthis logo') ?>" />
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<?php foreach ($pages as $page) { ?>
|
<?php foreach ($pages as $page) { ?>
|
||||||
<?php foreach ($page['items'] as $item) { ?>
|
<?php foreach ($page['items'] as $item) { ?>
|
||||||
|
|
@ -575,9 +575,7 @@ class Page
|
||||||
<div class="pusher">
|
<div class="pusher">
|
||||||
<div class="ui attached menu desktop">
|
<div class="ui attached menu desktop">
|
||||||
<div class="ui container">
|
<div class="ui container">
|
||||||
<a class="item home" href="/?page=home">
|
<a class="item home" href="/?page=home"><?= $svgLogo ?></a>
|
||||||
<img src="/src/assets/img/logo.svg" />
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<?php foreach ($pages as $page) { ?>
|
<?php foreach ($pages as $page) { ?>
|
||||||
<?php if ('left' === $page['alignment']) { ?>
|
<?php if ('left' === $page['alignment']) { ?>
|
||||||
|
|
|
||||||
|
|
@ -149,7 +149,11 @@ class Wish
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
|
|
||||||
<?php if ($this->image) { ?>
|
<?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 } ?>
|
||||||
|
|
||||||
<?php if (isset($this->info->favicon)) { ?>
|
<?php if (isset($this->info->favicon)) { ?>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue