notkaramel/ECSESS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update the event flip card + add remodel scrollbar

Browse Source
This commit is contained in:
Minh Vo
2025-12-26 17:28:32 -05:00
parent 157bdec9ea
commit dcdfb4ac6a
4 changed files with 188 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/app.css
View File

@@ -206,42 +206,78 @@ h2 {
}
.flip-box {
height: 100%;
width: 100%;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
height: 100%;
width: 100%;
perspective: 1000px; /* Remove this if you don't want the 3D effect */;
}
.flip-box-inner {
display: grid;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-box-inner {
display: grid;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-box-front,.flip-box-back {
grid-area: 1/1;
width: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
.flip-box-front {
z-index: 2;
transform: rotateY(0deg);
}
@keyframes rotate-and-back {
0% { transform: rotateY(0); }
50% { transform: rotateY(15deg); }
100% { transform: rotateY(0); }
}
.flip-box-front {
z-index: 2;
transform: rotateY(0deg);
}
.flip-box:hover .flip-box-front{
animation: rotate-and-back 0.3s ease-in-out;
}
.flip-box-back {
transform: rotateY(180deg);
}
.flip-box-front,.flip-box-back {
grid-area: 1/1;
width: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
.flip-box-front {
z-index: 2;
transform: rotateY(0deg);
transform-style: preserve-3d;
}
.show-back {
transform: rotateY(180deg);
}
.flip-box-back {
transform: rotateY(180deg);
}
.show-back {
transform: rotateY(180deg);
}
/* Scrollbar Styles */
*::-webkit-scrollbar {
height: 3px;
width: 2px;
}
*::-webkit-scrollbar-track {
border-radius: 3px;
background-color: var(--color-ecsess-50);
}
*::-webkit-scrollbar-track:hover {
background-color: var(--color-ecsess-200);
}
*::-webkit-scrollbar-track:active {
background-color: var(--color-ecsess-200);
}
*::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: var(--color-ecsess-800);
}
*::-webkit-scrollbar-thumb:hover {
background-color: var(--color-ecsess-500);
}
*::-webkit-scrollbar-thumb:active {
background-color: var(--color-ecsess-500);
}