Wobbl/Wobbly-Website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improved the design.

Browse source
This commit is contained in:
The Wobbler 2024-10-22 15:44:48 +02:00
parent 7ac00828d6
commit 7d688d5e18
1 changed files with 17 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
styles.php
View file

@ -134,12 +134,18 @@ a {
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
border-radius: 16px; border-radius: 16px;
margin: 32px 16px 64px; margin: 32px 16px 64px;
}
.glassint {
backdrop-filter: blur(4px);
border-radius: 16px;
margin: 32px 16px 64px;
animation-name: glassdiff; animation-name: glassdiff;
animation-duration: 0.3s; animation-duration: 0.3s;
} }
.glass:hover { .glassint:hover {
backdrop-filter: blur(0px); backdrop-filter: blur(2px);
border-radius: 16px; border-radius: 16px;
animation-name: glassclear; animation-name: glassclear;
animation-duration: 0.3s; animation-duration: 0.3s;
@ -147,7 +153,7 @@ a {
@keyframes glassdiff { @keyframes glassdiff {
0% { 0% {
backdrop-filter: blur(0px); backdrop-filter: blur(2px);
} }
100% { 100% {
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
@ -159,7 +165,7 @@ a {
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
} }
100% { 100% {
backdrop-filter: blur(0px); backdrop-filter: blur(2px);
} }
} }
@ -167,11 +173,17 @@ a {
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2) inset, box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2) inset,
-4px -4px 4px rgba(255, 255, 255, 0.2) inset; -4px -4px 4px rgba(255, 255, 255, 0.2) inset;
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.2);
}
.inout {
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2) inset,
-4px -4px 4px rgba(255, 255, 255, 0.2) inset;
border: 1px solid rgba(255, 255, 255, 0.2);
animation-name: pushins; animation-name: pushins;
animation-duration: 0.3s; animation-duration: 0.3s;
} }
.inset:hover { .inout:hover {
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2), box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2),
-4px -4px 4px rgba(255, 255, 255, 0.2); -4px -4px 4px rgba(255, 255, 255, 0.2);
animation-name: pullins; animation-name: pullins;