GithubMirrors/cardconjurer
1
0
Fork 1
mirror of https://github.com/Investigamer/cardconjurer.git synced 2025-07-26 21:04:58 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

better css hopefully

Browse Source
This commit is contained in:
Kyle
2020-10-12 10:05:07 -07:00
parent 8ec038f88c
commit bf0239b8ab
8 changed files with 29 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,7 @@
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', 'grayscale(100) hue-rotate(0deg)') rootStyles.setProperty('--site-background-filter', 'grayscale(100) hue-rotate(0deg)')
rootStyles.setProperty('--layer-background', '#242424 url("/data/images/site/backgrounds/lowpolyDarkGray.svg") left/cover no-repeat fixed') rootStyles.setProperty('--layer-background', 'none')
rootStyles.setProperty('--layer-background-filter', 'grayscale(100) brightness(0.5)')
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')

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

@@ -1,6 +1,7 @@
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', 'grayscale(0) hue-rotate(0deg)') 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', 'none')
rootStyles.setProperty('--layer-background-filter', 'grayscale(100)')
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/lightMode.js
View File

@@ -1,6 +1,7 @@
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', 'grayscale(100) hue-rotate(0deg)') rootStyles.setProperty('--site-background-filter', 'grayscale(100)')
rootStyles.setProperty('--layer-background', '#e4e4e4 url("/data/images/site/backgrounds/lowpolyLightGray.svg") left/cover no-repeat fixed') rootStyles.setProperty('--layer-background', 'none')
rootStyles.setProperty('--layer-background-filter', 'grayscale(100) brightness(0.9)')
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')

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

@@ -1,6 +1,7 @@
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', 'grayscale(0) hue-rotate(90deg)') rootStyles.setProperty('--site-background-filter', 'grayscale(0) hue-rotate(90deg)')
rootStyles.setProperty('--layer-background', '#242424 url("/data/images/site/backgrounds/lowpolyDarkGray.svg") left/cover no-repeat fixed') rootStyles.setProperty('--layer-background', 'none')
rootStyles.setProperty('--layer-background-filter', 'grayscale(100) brightness(0.5)')
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')

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

@@ -1,6 +1,7 @@
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', 'grayscale(0) hue-rotate(0deg)') 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', 'none')
rootStyles.setProperty('--layer-background-filter', 'grayscale(100) brightness(0.5)')
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')

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

@@ -1,6 +1,7 @@
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', 'grayscale(0) hue-rotate(245deg)') rootStyles.setProperty('--site-background-filter', 'grayscale(0) hue-rotate(245deg)')
rootStyles.setProperty('--layer-background', '#242424 url("/data/images/site/backgrounds/lowpolyDarkGray.svg") left/cover no-repeat fixed') rootStyles.setProperty('--layer-background', 'none')
rootStyles.setProperty('--layer-background-filter', 'grayscale(100) brightness(0.5)')
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')

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

@@ -1,6 +1,7 @@
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', 'grayscale(0) hue-rotate(0deg)') 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', 'none')
rootStyles.setProperty('--layer-background-filter', 'grayscale(100) brightness(0.5)')
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')

15
data/styles/main.css
View File

@@ -47,7 +47,8 @@
:root { :root {
--site-background: #3a3838 url("/data/images/site/backgrounds/lowpolyDarkGreen.svg") left/cover no-repeat fixed; --site-background: #3a3838 url("/data/images/site/backgrounds/lowpolyDarkGreen.svg") left/cover no-repeat fixed;
--site-background-filter: none; --site-background-filter: none;
--layer-background: #242424 url("/data/images/site/backgrounds/lowpolyDarkGray.svg") left/cover no-repeat fixed; --layer-background: none;
--layer-background-filter: grayscale(100) brightness(0.5);
--layer-background-selected: #1d1d1d; --layer-background-selected: #1d1d1d;
--interactable-unselected: #666666; --interactable-unselected: #666666;
--interactable-selected: #99ee99; --interactable-selected: #99ee99;
@@ -109,6 +110,8 @@ a:hover {
.interactable { .interactable {
background: var(--layer-background); background: var(--layer-background);
backdrop-filter: var(--layer-background-filter);
-webkit-backdrop-filter: var(--layer-background-filter);
border-top: 0.2rem solid var(--interactable-unselected); border-top: 0.2rem solid var(--interactable-unselected);
cursor: pointer; cursor: pointer;
border-radius: 0.2rem; border-radius: 0.2rem;
@@ -258,6 +261,8 @@ input:not([type='checkbox']), textarea, button, select {
padding: 0.25rem; padding: 0.25rem;
margin-top: 0.25rem; margin-top: 0.25rem;
background: var(--layer-background); background: var(--layer-background);
backdrop-filter: var(--layer-background-filter);
-webkit-backdrop-filter: var(--layer-background-filter);
border-top: 0.1rem solid var(--interactable-unselected); border-top: 0.1rem solid var(--interactable-unselected);
border-radius: 0.1rem; border-radius: 0.1rem;
transition: 0.25s; transition: 0.25s;
@@ -307,9 +312,13 @@ textarea {
} }
.layer { .layer {
background: var(--layer-background); background: var(--layer-background);
backdrop-filter: var(--layer-background-filter);
-webkit-backdrop-filter: var(--layer-background-filter);
} }
.layer.clearLayer { .layer.clearLayer {
background: none; background: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
} }
.animated > div { .animated > div {
opacity: 0; opacity: 0;
@@ -427,6 +436,8 @@ textarea {
} }
#textCodeReference > div { #textCodeReference > div {
background: var(--layer-background); background: var(--layer-background);
backdrop-filter: var(--layer-background-filter);
-webkit-backdrop-filter: var(--layer-background-filter);
padding: 0.25rem; padding: 0.25rem;
} }
#textCodeReference > div:nth-child(2n + 1):not(:nth-child(1)) { #textCodeReference > div:nth-child(2n + 1):not(:nth-child(1)) {
@@ -480,6 +491,8 @@ canvas {
} }
footer { footer {
background: var(--layer-background); background: var(--layer-background);
backdrop-filter: var(--layer-background-filter);
-webkit-backdrop-filter: var(--layer-background-filter);
font: 1rem arial; font: 1rem arial;
} }
.footer { .footer {