Merge branch 'gs/darkmode-fix' into 'master'

A big improvement for dakrmode.

Closes #10 and #11

See merge request patek-devs/patek.cz!14
This commit is contained in:
Greenscreener 2020-04-28 09:47:52 +00:00
commit 897eb88bec
2 changed files with 24 additions and 10 deletions

View File

@ -12,9 +12,8 @@ $primary: #0b2a37;
@import "logo-generator";
// Custom styles
* {
transition-duration: 0.2s;
a {
transition: color 0.2s, background-color 0.2s;
}
.big-logo {
font-size: 80px;
@ -212,12 +211,27 @@ h2 a {
margin-right: 0.3em;
color: $link;
}
.dark-mode, .dark-mode * {
background-color: $black-ter !important;
color: white !important;
a {
color: $link !important;
#content.dark-mode {
&, .box, .card, .card .navbar, .card .label, input, button:not(.is-primary) {
background-color: $black-ter;
color: white;
a {
color: $link;
&:hover {
color: lighten($link, 30) !important;
}
}
}
h1, h2, h3, h4, h5, h6, ::placeholder {
color: white;
}
.container > .pageHeader > h2.pageTitle.title > a {
color: white;
}
button svg path {
fill: white;
}
}
#content {
min-height: 90vh;

View File

@ -5,7 +5,7 @@
<span class="navbar-item"><input id="titip" type="text" class="input" placeholder="Title"></span>
<span class="navbar-item"><input id="subip" type="text" class="input" placeholder="Subtitle"></span>
<span class="navbar-item"><label class="label" for="fgip">FG: </label><input id="fgip" type="color" class="input color" placeholder="Foreground" value="#ffffff"></span>
<span class="navbar-item"><button class="button"onclick="swapColors()"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z"/><path d="M0 0h24v24H0z" fill="none"/></svg></button></span>
<span class="navbar-item"><button class="button"onclick="swapColors()"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z"/></svg></button></span>
<span class="navbar-item"><label class="label" for="bgip">BG: </label><input id="bgip" type="color" class="input color" placeholder="Background" value="#0b2a37"></span>
<span class="navbar-item"><label for="padip" class="label">Padding: </label><input id="padip" type="range" min="0" value="32" max="384" class="range"></span>
</div>
@ -19,7 +19,7 @@
<div class="card-footer">
<div class="navbar">
<div class="navbar-start" id="outputs">
<span class="navbar-item"><button class="button is-primary" onclick="downloadSvg()"><svg class="svg-in-button" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path fill="#fff" d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/><path d="M0 0h24v24H0z" fill="none"/></svg> Download SVG</button></span>
<span class="navbar-item"><button class="button is-primary" onclick="downloadSvg()"><svg class="svg-in-button" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path fill="#fff" d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg> Download SVG</button></span>
</div>
</div>
</div>