diff --git a/app/src/styles/Card.module.scss b/app/src/styles/Card.module.scss index 97484e0..696f30a 100644 --- a/app/src/styles/Card.module.scss +++ b/app/src/styles/Card.module.scss @@ -1,10 +1,14 @@ +@import "glass"; + .card { + @extend .glass; + width: 30ch; height: 10ch; border-radius: 5rem; padding: 1rem; - color: black; + color: var(--text-color); display: flex; align-items: center; @@ -36,13 +40,8 @@ } } - background-color: rgba($color: black, $alpha: 0.08); - &.background { - background-color: var(--background-color); - } - .picture { - border: 3px gray solid; + border: 3px white solid; border-radius: 50%; min-width: 6rem; diff --git a/app/src/styles/NavigationBar.module.scss b/app/src/styles/NavigationBar.module.scss index 9c773b2..1f5953b 100644 --- a/app/src/styles/NavigationBar.module.scss +++ b/app/src/styles/NavigationBar.module.scss @@ -1,4 +1,8 @@ +@import "glass"; + .navigationBar { + @extend .glass; + display: flex; flex-direction: row; width: 100%; @@ -6,11 +10,6 @@ position: fixed; z-index: 100; - background-color: rgba(100, 100, 255, 0.75); - backdrop-filter: blur(10px) saturate(180%); - border: 1px solid rgba(255, 255, 255, 0.125); - box-shadow: 0 4px 30px rgba(0, 0, 100, 0.3); - color: var(--text-color); font-weight: lighter; font-size: 15pt; @@ -67,15 +66,12 @@ display: inline-block; .content { + @extend .glass; + display: none; position: absolute; flex-direction: column; - background-color: var(--glass-color); - backdrop-filter: blur(10px) saturate(180%); - border: 1px solid rgba(255, 255, 255, 0.125); - box-shadow: 0 4px 30px rgba(0, 0, 100, 0.3); - padding-right: 2em; z-index: 1; border-radius: 5px; diff --git a/app/src/styles/glass.scss b/app/src/styles/glass.scss new file mode 100644 index 0000000..cac4977 --- /dev/null +++ b/app/src/styles/glass.scss @@ -0,0 +1,6 @@ +.glass { + background-color: var(--glass-color); + backdrop-filter: blur(10px) saturate(180%); + border: 2px solid rgba(255, 255, 255, 0.2); + box-shadow: 0 4px 30px rgba(0, 0, 100, 0.3); +} diff --git a/app/src/styles/globals.scss b/app/src/styles/globals.scss index 69ac3c0..ad970b8 100644 --- a/app/src/styles/globals.scss +++ b/app/src/styles/globals.scss @@ -1,3 +1,5 @@ +@import "glass"; + body { background-color: #1c70ddff; margin: 0; @@ -6,6 +8,7 @@ body { --text-color: #fafafa; --dark-text-color: darkblue; --glass-color: rgba(100, 100, 255, 0.75); + --text-link-color: rgb(58, 127, 255); font-family: "Poppins"; } @@ -76,16 +79,13 @@ a { } .news { + @extend .glass; + width: 100%; overflow: scroll; padding: 2em; - background-color: var(--glass-color); - backdrop-filter: blur(10px) saturate(180%); - border: 1px solid rgba(255, 255, 255, 0.125); - box-shadow: 0 4px 30px rgba(0, 0, 100, 0.3); - .news-list { margin: 2%; gap: 2em; @@ -128,7 +128,7 @@ a { } a { - color: rgb(58, 127, 255); + color: var(--text-link-color); } p {