Mindfang/cardconjurer
1
0
Fork 0
forked from GithubMirrors/cardconjurer
Code Pull Requests Actions Packages 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-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('--interactable-unselected', '#666666')
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-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('--interactable-unselected', '#aaaaaa')
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-filter', 'grayscale(100) hue-rotate(0deg)')
rootStyles.setProperty('--layer-background', '#e4e4e4 url("/data/images/site/backgrounds/lowpolyLightGray.svg") left/cover no-repeat fixed')
rootStyles.setProperty('--site-background-filter', 'grayscale(100)')
rootStyles.setProperty('--layer-background', 'none')
rootStyles.setProperty('--layer-background-filter', 'grayscale(100) brightness(0.9)')
rootStyles.setProperty('--layer-background-selected', '#cccccc')
rootStyles.setProperty('--interactable-unselected', '#aaaaaa')
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-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('--interactable-unselected', '#666666')
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-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('--interactable-unselected', '#666666')
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-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('--interactable-unselected', '#666666')
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-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('--interactable-unselected', '#666666')
rootStyles.setProperty('--interactable-selected', '#99ee99')

15
data/styles/main.css
View File

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