From 010de553ceec93563cec9668fd71bc151459670f Mon Sep 17 00:00:00 2001 From: mrmrs Date: Wed, 6 Sep 2023 09:09:11 -0700 Subject: [PATCH] Adds new module for glass like effects --- src/_glass.css | 202 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 202 insertions(+) create mode 100644 src/_glass.css diff --git a/src/_glass.css b/src/_glass.css new file mode 100644 index 0000000..0fb7283 --- /dev/null +++ b/src/_glass.css @@ -0,0 +1,202 @@ +.glass1 { + background: rgba(255, 255, 255, 0); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.glass2 { + background: rgba(255, 255, 255, 0.05); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.glass3 { + background: rgba(255, 255, 255, 0.15); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.glass4 { + background: rgba(255, 255, 255, 0.25); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.glass5 { + background: rgba(255, 255, 255, 0); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(16px); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.glass6 { + background: rgba(255, 255, 255, 0.05); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(16px); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.glass7 { + background: rgba(255, 255, 255, 0.15); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(16px); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.glass8 { + background: rgba(255, 255, 255, 0.25); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(16px); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.glass9 { + background: rgba(255, 255, 255, 0.25); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.glass10 { + background: rgba(255, 255, 255, 0); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.glass1-hover:hover { + background: rgba(255, 255, 255, 0); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.glass2-hover:hover { + background: rgba(255, 255, 255, 0.05); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.glass3-hover:hover { + background: rgba(255, 255, 255, 0.15); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.glass4-hover:hover { + background: rgba(255, 255, 255, 0.25); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.glass5-hover:hover { + background: rgba(255, 255, 255, 0); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(16px); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.glass6-hover:hover { + background: rgba(255, 255, 255, 0.05); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(16px); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.glass7-hover:hover { + background: rgba(255, 255, 255, 0.15); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(16px); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.glass8-hover:hover { + background: rgba(255, 255, 255, 0.25); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(16px); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.glass9-hover:hover { + background: rgba(255, 255, 255, 0.25); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.glass10-hover:hover { + background: rgba(255, 255, 255, 0); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.glass1-focus:focus { + background: rgba(255, 255, 255, 0); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.glass2-focus:focus { + background: rgba(255, 255, 255, 0.05); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.glass3-focus:focus { + background: rgba(255, 255, 255, 0.15); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.glass4-focus:focus { + background: rgba(255, 255, 255, 0.25); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.glass5-focus:focus { + background: rgba(255, 255, 255, 0); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(16px); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.glass6-focus:focus { + background: rgba(255, 255, 255, 0.05); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(16px); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.glass7-focus:focus { + background: rgba(255, 255, 255, 0.15); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(16px); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.glass8-focus:focus { + background: rgba(255, 255, 255, 0.25); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(16px); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.glass9-focus:focus { + background: rgba(255, 255, 255, 0.25); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.glass10-focus:focus { + background: rgba(255, 255, 255, 0); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(255, 255, 255, 0.15); +}