Mindfang/cardconjurer
1
0
Fork 0
forked from GithubMirrors/cardconjurer
Code Pull Requests Actions Packages Activity

restyle

Browse Source
This commit is contained in:
Kyle
2020-07-25 10:28:40 -07:00
parent 8e13889803
commit 35c525b764
9 changed files with 19 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
data/scripts/footer.js
View File

@@ -13,10 +13,10 @@ document.getElementById('footer').innerHTML = `
<hr> <hr>
<div> <div>
<select id='inputColorPalette' onchange='loadScript("/data/scripts/palettes/" + this.value + ".js")'> <select id='inputColorPalette' onchange='loadScript("/data/scripts/palettes/" + this.value + ".js")'>
<option disabled>Bare Bones</option> <option disabled>Grayscale</option>
<option value='lightMode'>Light Mode</option> <option value='lightMode'>Light Mode</option>
<option value='darkMode'>Dark Mode</option> <option value='darkMode'>Dark Mode</option>
<option disabled>Lowpoly</option> <option disabled>Colored</option>
<option value='lowpolyRed'>Red</option> <option value='lowpolyRed'>Red</option>
<option value='lowpolyGreen' selected='selected'>Green</option> <option value='lowpolyGreen' selected='selected'>Green</option>
<option value='lowpolyBlue'>Blue</option> <option value='lowpolyBlue'>Blue</option>

7
data/scripts/palettes/darkMode.js
View File

@@ -1,7 +1,6 @@
var currentPalette = 'darkMode' rootStyles.setProperty('--site-background', '#3a3838 url("/data/images/site/backgrounds/lowpolyDarkGreen.svg") left/cover no-repeat fixed')
rootStyles.setProperty('--site-background', '#3a3838') rootStyles.setProperty('--site-background-filter', 'grayscale(100) hue-rotate(0deg)')
rootStyles.setProperty('--site-background-filter', 'none') rootStyles.setProperty('--layer-background', '#242424 url("/data/images/site/backgrounds/lowpolyDarkGray.svg") left/cover no-repeat fixed')
rootStyles.setProperty('--layer-background', '#242424')
rootStyles.setProperty('--layer-background-selected', '#1d1d1d') rootStyles.setProperty('--layer-background-selected', '#1d1d1d')
rootStyles.setProperty('--interactable-unselected', '#666666') rootStyles.setProperty('--interactable-unselected', '#666666')
rootStyles.setProperty('--interactable-selected', '#99ee99') rootStyles.setProperty('--interactable-selected', '#99ee99')

4
data/scripts/palettes/dayRave.js
View File

@@ -1,5 +1,5 @@
rootStyles.setProperty('--site-background', '#f5f5f5 url("/data/images/site/backgrounds/lowpolyLightGreen.svg") left/cover no-repeat fixed') rootStyles.setProperty('--site-background', '#f5f5f5 url("/data/images/site/backgrounds/lowpolyLightGreen.svg") left/cover no-repeat fixed')
rootStyles.setProperty('--site-background-filter', 'none') rootStyles.setProperty('--site-background-filter', 'grayscale(0) hue-rotate(0deg)')
rootStyles.setProperty('--layer-background', '#e4e4e4 url("/data/images/site/backgrounds/lowpolyLightGray.svg") left/cover no-repeat fixed') rootStyles.setProperty('--layer-background', '#e4e4e4 url("/data/images/site/backgrounds/lowpolyLightGray.svg") left/cover no-repeat fixed')
rootStyles.setProperty('--layer-background-selected', '#cccccc') rootStyles.setProperty('--layer-background-selected', '#cccccc')
rootStyles.setProperty('--interactable-unselected', '#aaaaaa') rootStyles.setProperty('--interactable-unselected', '#aaaaaa')
@@ -27,7 +27,7 @@ var colorCycle = setInterval(shiftHue, 200)
var currentHueRotation = 0 var currentHueRotation = 0
function shiftHue() { function shiftHue() {
rootStyles.setProperty('--site-background-filter', 'hue-rotate(' + currentHueRotation + 'deg)') rootStyles.setProperty('--site-background-filter', 'grayscale(0) hue-rotate(' + currentHueRotation + 'deg)')
currentHueRotation += 1 currentHueRotation += 1
if (currentHueRotation == 360) { if (currentHueRotation == 360) {
currentHueRotation = 0 currentHueRotation = 0

7
data/scripts/palettes/lightMode.js
View File

@@ -1,7 +1,6 @@
var currentPalette = 'lightMode' rootStyles.setProperty('--site-background', '#f5f5f5 url("/data/images/site/backgrounds/lowpolyLightGreen.svg") left/cover no-repeat fixed')
rootStyles.setProperty('--site-background', '#f5f5f5') rootStyles.setProperty('--site-background-filter', 'grayscale(100) hue-rotate(0deg)')
rootStyles.setProperty('--site-background-filter', 'none') rootStyles.setProperty('--layer-background', '#e4e4e4 url("/data/images/site/backgrounds/lowpolyLightGray.svg") left/cover no-repeat fixed')
rootStyles.setProperty('--layer-background', '#e4e4e4')
rootStyles.setProperty('--layer-background-selected', '#cccccc') rootStyles.setProperty('--layer-background-selected', '#cccccc')
rootStyles.setProperty('--interactable-unselected', '#aaaaaa') rootStyles.setProperty('--interactable-unselected', '#aaaaaa')
rootStyles.setProperty('--interactable-selected', '#00aa00') rootStyles.setProperty('--interactable-selected', '#00aa00')

5
data/scripts/palettes/lowpolyBlue.js
View File

@@ -1,6 +1,5 @@
var currentPalette = 'lowpolyBlue' rootStyles.setProperty('--site-background', '#3a3838 url("/data/images/site/backgrounds/lowpolyDarkGreen.svg") left/cover no-repeat fixed')
rootStyles.setProperty('--site-background', '#3a3838 url("/data/images/site/backgrounds/lowpolyDarkBlue.svg") left/cover no-repeat fixed') rootStyles.setProperty('--site-background-filter', 'grayscale(0) hue-rotate(90deg)')
rootStyles.setProperty('--site-background-filter', 'none')
rootStyles.setProperty('--layer-background', '#242424 url("/data/images/site/backgrounds/lowpolyDarkGray.svg") left/cover no-repeat fixed') rootStyles.setProperty('--layer-background', '#242424 url("/data/images/site/backgrounds/lowpolyDarkGray.svg") left/cover no-repeat fixed')
rootStyles.setProperty('--layer-background-selected', '#1d1d1d') rootStyles.setProperty('--layer-background-selected', '#1d1d1d')
rootStyles.setProperty('--interactable-unselected', '#666666') rootStyles.setProperty('--interactable-unselected', '#666666')

3
data/scripts/palettes/lowpolyGreen.js
View File

@@ -1,6 +1,5 @@
var currentPalette = 'lowpolyGreen'
rootStyles.setProperty('--site-background', '#3a3838 url("/data/images/site/backgrounds/lowpolyDarkGreen.svg") left/cover no-repeat fixed') rootStyles.setProperty('--site-background', '#3a3838 url("/data/images/site/backgrounds/lowpolyDarkGreen.svg") left/cover no-repeat fixed')
rootStyles.setProperty('--site-background-filter', 'none') rootStyles.setProperty('--site-background-filter', 'grayscale(0) hue-rotate(0deg)')
rootStyles.setProperty('--layer-background', '#242424 url("/data/images/site/backgrounds/lowpolyDarkGray.svg") left/cover no-repeat fixed') rootStyles.setProperty('--layer-background', '#242424 url("/data/images/site/backgrounds/lowpolyDarkGray.svg") left/cover no-repeat fixed')
rootStyles.setProperty('--layer-background-selected', '#1d1d1d') rootStyles.setProperty('--layer-background-selected', '#1d1d1d')
rootStyles.setProperty('--interactable-unselected', '#666666') rootStyles.setProperty('--interactable-unselected', '#666666')

5
data/scripts/palettes/lowpolyRed.js
View File

@@ -1,6 +1,5 @@
var currentPalette = 'lowpolyRed' rootStyles.setProperty('--site-background', '#3a3838 url("/data/images/site/backgrounds/lowpolyDarkGreen.svg") left/cover no-repeat fixed')
rootStyles.setProperty('--site-background', '#3a3838 url("/data/images/site/backgrounds/lowpolyDarkRed.svg") left/cover no-repeat fixed') rootStyles.setProperty('--site-background-filter', 'grayscale(0) hue-rotate(245deg)')
rootStyles.setProperty('--site-background-filter', 'none')
rootStyles.setProperty('--layer-background', '#242424 url("/data/images/site/backgrounds/lowpolyDarkGray.svg") left/cover no-repeat fixed') rootStyles.setProperty('--layer-background', '#242424 url("/data/images/site/backgrounds/lowpolyDarkGray.svg") left/cover no-repeat fixed')
rootStyles.setProperty('--layer-background-selected', '#1d1d1d') rootStyles.setProperty('--layer-background-selected', '#1d1d1d')
rootStyles.setProperty('--interactable-unselected', '#666666') rootStyles.setProperty('--interactable-unselected', '#666666')

4
data/scripts/palettes/nightRave.js
View File

@@ -1,5 +1,5 @@
rootStyles.setProperty('--site-background', '#3a3838 url("/data/images/site/backgrounds/lowpolyDarkGreen.svg") left/cover no-repeat fixed') rootStyles.setProperty('--site-background', '#3a3838 url("/data/images/site/backgrounds/lowpolyDarkGreen.svg") left/cover no-repeat fixed')
rootStyles.setProperty('--site-background-filter', 'none') rootStyles.setProperty('--site-background-filter', 'grayscale(0) hue-rotate(0deg)')
rootStyles.setProperty('--layer-background', '#242424 url("/data/images/site/backgrounds/lowpolyDarkGray.svg") left/cover no-repeat fixed') rootStyles.setProperty('--layer-background', '#242424 url("/data/images/site/backgrounds/lowpolyDarkGray.svg") left/cover no-repeat fixed')
rootStyles.setProperty('--layer-background-selected', '#1d1d1d') rootStyles.setProperty('--layer-background-selected', '#1d1d1d')
rootStyles.setProperty('--interactable-unselected', '#666666') rootStyles.setProperty('--interactable-unselected', '#666666')
@@ -27,7 +27,7 @@ var colorCycle = setInterval(shiftHue, 200)
var currentHueRotation = 0 var currentHueRotation = 0
function shiftHue() { function shiftHue() {
rootStyles.setProperty('--site-background-filter', 'hue-rotate(' + currentHueRotation + 'deg)') rootStyles.setProperty('--site-background-filter', 'grayscale(0) hue-rotate(' + currentHueRotation + 'deg)')
currentHueRotation += 1 currentHueRotation += 1
if (currentHueRotation == 360) { if (currentHueRotation == 360) {
currentHueRotation = 0 currentHueRotation = 0

3
data/styles/main.css
View File

@@ -69,6 +69,7 @@ html::before {
height: 100%; height: 100%;
background: var(--site-background); background: var(--site-background);
filter: var(--site-background-filter); filter: var(--site-background-filter);
transition: 2s;
z-index: -1; z-index: -1;
} }
html, body { html, body {
@@ -78,7 +79,7 @@ html, body {
overflow-x: hidden; overflow-x: hidden;
} }
body { body {
background: var(--body-background); /*background: var(--body-background);*/
} }
a { a {
font: inherit; font: inherit;