Evalprime/breezewiki
1
0
Fork 0
forked from cadence/breezewiki
Code Pull requests Activity

Support light/dark themes as per Fandom's styles

Browse source
This commit is contained in:
Cadence Ember 2022-11-30 00:03:54 +13:00
parent 92591a5eab
commit 9afccbb9cd
Signed by untrusted user: cadence
GPG key ID: BC1C2C61CF521B17
15 changed files with 157 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

2
static/icon-theme-dark.svg Normal file
View file

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg fill="currentColor" width="32" height="32" version="1.1" viewBox="0 0 8.46667 8.46667" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -288.533)"><path transform="matrix(.264583 0 0 .264583 0 288.533)" d="m23.0039 3.875-1.31445 2.27344a11 11 0 013.31055 7.85156 11 11 0 01-11 11 11 11 0 01-7.85938-3.30664l-2.26172 1.30859c2.93591 5.08516 8.77013 7.80476 14.5527 6.78516 5.78263-1.01964 10.3378-5.57482 11.3574-11.3574 1.01965-5.7826-1.7-11.6188-6.78516-14.5547z" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" shape-rendering="auto" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;paint-order:stroke fill markers;shape-padding:0;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/><circle cx="2.11667" cy="290.65" r=".529167" style="paint-order:stroke fill markers"/><circle cx="1.5875" cy="292.237" r=".529167" style="paint-order:stroke fill markers"/><circle cx="3.70417" cy="290.121" r=".529167" style="paint-order:stroke fill markers"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

2
static/icon-theme-default.svg Normal file
View file

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32" height="32" fill="currentColor" version="1.1" viewBox="0 0 8.46667 8.46667" xmlns="http://www.w3.org/2000/svg"><path d="m4.23242.5295c-2.03949 0-3.70313 1.66559-3.70313 3.70508 0 2.03948 1.66364 3.70312 3.70313 3.70312 2.03949 0 3.70508-1.66364 3.70508-3.70312 0-2.03949-1.66559-3.70508-3.70508-3.70508zm0 1.05859c1.46752 0 2.64648 1.17897 2.64648 2.64649s-1.17896 2.64453-2.64648 2.64453c-1.46752 0-2.64453-1.17701-2.64453-2.64453s1.17701-2.64649 2.64453-2.64649z" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" shape-rendering="auto" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;paint-order:stroke fill markers;shape-padding:0;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/><path d="m4.23333 2.64583a1.5875 1.5875 0 00-1.495 1.05937h2.99a1.5875 1.5875 0 00-1.495-1.05937zm-1.495 2.11563a1.5875 1.5875 0 001.495 1.05937 1.5875 1.5875 0 001.495-1.05937h-2.99z" style="paint-order:stroke fill markers"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

2
static/icon-theme-light.svg Normal file
View file

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg fill="currentColor" width="32" height="32" version="1.1" viewBox="0 0 8.46667 8.46667" xmlns="http://www.w3.org/2000/svg"><path d="m6.87891 4.23458c1e-7.46447-.121282.92002-.353516 1.32226l.916016.5293c.325095-.56308.496094-1.20137.496094-1.85156z" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" shape-rendering="auto" solid-style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;paint-order:stroke fill markers;shape-padding:0;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/><circle cx="4.23333" cy="4.234" r="2.11093" style="paint-order:stroke fill markers"/><g shape-rendering="auto"><path d="m5.55695 6.52551c-.402234.23223-.858376.35329-1.32285.35329l-.0003772 1.05794c.650186 0 1.28846-.17106 1.85154-.49615z" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" solid-style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;paint-order:stroke fill markers;shape-padding:0;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/><path d="m2.91165 6.52543c-.402243-.23223-.737813-.56603-.970048-.96827l-.916389.52865c.325097.56308.794061 1.03129 1.35714 1.35639z" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" solid-style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;paint-order:stroke fill markers;shape-padding:0;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/><path d="m1.58789 4.23458c-1e-7-.46447.121282-.92198.353516-1.32422l-.916016-.5293c-.325095.56308-.496094 1.20333-.496094 1.85352z" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" solid-style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;paint-order:stroke fill markers;shape-padding:0;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/><path d="m2.91046 1.94167c.402243-.23224.858389-.35329 1.32285-.35329l-.0005978-1.05964c-.650195 1e-5-1.28847.17106-1.85155.49616z" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" solid-style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;paint-order:stroke fill markers;shape-padding:0;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/><path d="m5.55547 1.9423c.402243.23223.736121.56504.968351.96728l.916397-.52864c-.325092-.56309-.792372-1.03031-1.35545-1.35541z" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" solid-style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;paint-order:stroke fill markers;shape-padding:0;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 3.8 KiB

44
static/main.css
View file

@ -51,7 +51,7 @@ p {
.custom-top {
display: flex;
flex-wrap: wrap;
align-items: baseline;
align-items: center;
justify-content: space-between;
}
.page-title {
@ -227,6 +227,7 @@ figcaption, .lightbox-caption, .thumbcaption {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 0px 5px;
align-items: baseline;
}
.bw-ss__container {
grid-column: 2;
@ -282,6 +283,47 @@ figcaption, .lightbox-caption, .thumbcaption {
text-align: left;
}
/* (breezewiki) theme selector */
.bw-theme__select {
display: grid;
grid-template-columns: auto auto;
grid-gap: 0px 5px;
justify-content: right;
align-items: baseline;
margin-top: 4px;
}
.bw-theme__items {
display: flex;
}
.bw-theme__item {
display: flex;
align-items: baseline;
padding: 2px;
border: 1px solid var(--theme-border-color);
border-right-width: 0px;
background-color: var(--custom-table-background);
color: var(--theme-page-text-color);
transition: none;
}
.bw-theme__item:hover, .bw-theme__item:focus {
/* background-color: var(--theme-page-background-color); */
color: var(--theme-accent-color);
}
.bw-theme__item:first-child {
border-radius: 4px 0px 0px 4px;
}
.bw-theme__item:last-child {
border-radius: 0px 4px 4px 0px;
border-right-width: 1px;
}
.bw-theme__item--selected, .bw-theme__item--selected:hover, .bw-theme__item--selected:focus {
background-color: var(--theme-accent-color);
color: var(--theme-accent-label-color);
}
.bw-theme__icon-container svg {
vertical-align: middle;
}
/* nintendo independent wiki alliance notice */
.niwa__notice {
background: #fdedd8;