Degeneralized darkmode and added some proper styling for it.

Resolves #11 and #10
This commit is contained in:
Greenscreener 2020-04-26 21:04:24 +02:00
parent 8a376ec7bd
commit 7bc21cb434
2 changed files with 22 additions and 7 deletions

View File

@ -211,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>