From bf0239b8ab10a32da53cacdb2b08af0d74bf8527 Mon Sep 17 00:00:00 2001 From: Kyle <41976328+ImKyle4815@users.noreply.github.com> Date: Mon, 12 Oct 2020 10:05:07 -0700 Subject: [PATCH] better css hopefully --- data/scripts/palettes/darkMode.js | 3 ++- data/scripts/palettes/dayRave.js | 3 ++- data/scripts/palettes/lightMode.js | 5 +++-- data/scripts/palettes/lowpolyBlue.js | 3 ++- data/scripts/palettes/lowpolyGreen.js | 3 ++- data/scripts/palettes/lowpolyRed.js | 3 ++- data/scripts/palettes/nightRave.js | 3 ++- data/styles/main.css | 15 ++++++++++++++- 8 files changed, 29 insertions(+), 9 deletions(-) diff --git a/data/scripts/palettes/darkMode.js b/data/scripts/palettes/darkMode.js index d1136bb8..47f65ed7 100644 --- a/data/scripts/palettes/darkMode.js +++ b/data/scripts/palettes/darkMode.js @@ -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') diff --git a/data/scripts/palettes/dayRave.js b/data/scripts/palettes/dayRave.js index 421d41b7..c3504d00 100644 --- a/data/scripts/palettes/dayRave.js +++ b/data/scripts/palettes/dayRave.js @@ -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') diff --git a/data/scripts/palettes/lightMode.js b/data/scripts/palettes/lightMode.js index 275eaecd..dad64daf 100644 --- a/data/scripts/palettes/lightMode.js +++ b/data/scripts/palettes/lightMode.js @@ -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') diff --git a/data/scripts/palettes/lowpolyBlue.js b/data/scripts/palettes/lowpolyBlue.js index 387d3b54..e72edd33 100644 --- a/data/scripts/palettes/lowpolyBlue.js +++ b/data/scripts/palettes/lowpolyBlue.js @@ -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') diff --git a/data/scripts/palettes/lowpolyGreen.js b/data/scripts/palettes/lowpolyGreen.js index e9488977..eb7afabb 100644 --- a/data/scripts/palettes/lowpolyGreen.js +++ b/data/scripts/palettes/lowpolyGreen.js @@ -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') diff --git a/data/scripts/palettes/lowpolyRed.js b/data/scripts/palettes/lowpolyRed.js index efb53c28..238be56a 100644 --- a/data/scripts/palettes/lowpolyRed.js +++ b/data/scripts/palettes/lowpolyRed.js @@ -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') diff --git a/data/scripts/palettes/nightRave.js b/data/scripts/palettes/nightRave.js index b05d4865..4460ca2f 100644 --- a/data/scripts/palettes/nightRave.js +++ b/data/scripts/palettes/nightRave.js @@ -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') diff --git a/data/styles/main.css b/data/styles/main.css index fb3b013f..b86880c4 100644 --- a/data/styles/main.css +++ b/data/styles/main.css @@ -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 {