VDMDI/CT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve gradient

Browse Source
This commit is contained in:
marlon-erler
2024-07-20 15:02:17 +02:00
parent 4cdf1cebe2
commit df39c75b33
3 changed files with 43 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/index.css
Vendored
+23 -21
View File
@@ -22,7 +22,7 @@
z-index: -1; z-index: -1;
pointer-events: none; pointer-events: none;
filter: blur(60px); filter: blur(60px);
opacity: 0.4; opacity: 0.2;
} }
#background::after, #background::after,
#background::before { #background::before {
@@ -36,9 +36,9 @@
background-image: background-image:
linear-gradient( linear-gradient(
120deg, 120deg,
hsla(210, 100%, 50%, 25%), hsla(210, 100%, 50%, 50%),
hsla(210, 100%, 50%, 15%), hsla(210, 100%, 50%, 35%),
transparent 70%); transparent 40%);
} }
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
@@ -46,30 +46,30 @@
background-image: background-image:
linear-gradient( linear-gradient(
120deg, 120deg,
hsla(210, 100%, 50%, 25%), hsla(210, 100%, 50%, 50%),
hsla(210, 100%, 50%, 15%)); hsla(210, 100%, 50%, 25%));
} }
#background::before { #background::before {
top: -150%; top: -130%;
left: -50%; left: -150%;
right: -800%;
bottom: -20%;
background-image:
radial-gradient(
transparent 60%,
hsla(110, 100%, 40%, 50%) 60%,
hsla(110, 100%, 20%, 40%));
}
#background::after {
top: -100%;
left: 0%;
right: -500%; right: -500%;
bottom: -50%; bottom: -50%;
background-image:
radial-gradient(
transparent 60%,
hsla(110, 100%, 40%, 20%) 60%,
hsla(110, 100%, 20%, 40%));
}
#background::after {
top: -300%;
left: -50%;
right: -400%;
bottom: -50%;
background-image: background-image:
radial-gradient( radial-gradient(
transparent 70%, transparent 70%,
hsla(110, 100%, 30%, 30%) 70%, hsla(110, 100%, 30%, 90%) 70%,
hsla(110, 100%, 30%, 40%)); hsla(110, 100%, 10%, 70%));
} }
} }
@@ -86,6 +86,8 @@
bottom: 0px; bottom: 0px;
background-color: var(--background); background-color: var(--background);
} }
#chat-page {
}
/* src/View/homePage.css */ /* src/View/homePage.css */
#home-page > div { #home-page > div {
src/View/chatPage.css
+4
View File
@@ -12,4 +12,8 @@
bottom: 0px; bottom: 0px;
background-color: var(--background); background-color: var(--background);
}
#chat-page {
} }
src/base.css
+16 -16
View File
@@ -26,7 +26,7 @@
pointer-events: none; pointer-events: none;
filter: blur(60px); filter: blur(60px);
opacity: 0.4; opacity: 0.2;
} }
#background::after, #background::after,
@@ -43,9 +43,9 @@
#background { #background {
background-image: linear-gradient( background-image: linear-gradient(
120deg, 120deg,
hsla(210, 100%, 50%, 25%), hsla(210, 100%, 50%, 50%),
hsla(210, 100%, 50%, 15%), hsla(210, 100%, 50%, 35%),
transparent 70% transparent 40%
); );
} }
} }
@@ -54,34 +54,34 @@
#background { #background {
background-image: linear-gradient( background-image: linear-gradient(
120deg, 120deg,
hsla(210, 100%, 50%, 25%), hsla(210, 100%, 50%, 50%),
hsla(210, 100%, 50%, 15%) hsla(210, 100%, 50%, 25%)
); );
} }
#background::before { #background::before {
top: -150%; top: -130%;
left: -50%; left: -150%;
right: -500%; right: -800%;
bottom: -50%; bottom: -20%;
background-image: radial-gradient( background-image: radial-gradient(
transparent 60%, transparent 60%,
hsla(110, 100%, 40%, 20%) 60%, hsla(110, 100%, 40%, 50%) 60%,
hsla(110, 100%, 20%, 40%) hsla(110, 100%, 20%, 40%)
); );
} }
#background::after { #background::after {
top: -300%; top: -100%;
left: -50%; left: 0%;
right: -400%; right: -500%;
bottom: -50%; bottom: -50%;
background-image: radial-gradient( background-image: radial-gradient(
transparent 70%, transparent 70%,
hsla(110, 100%, 30%, 30%) 70%, hsla(110, 100%, 30%, 90%) 70%,
hsla(110, 100%, 30%, 40%) hsla(110, 100%, 10%, 70%)
); );
} }
} }