Kris
972cc6e5d9
This generally updates the styles for the 2025 version. I also made more features work in development environments (so it's easier to test) and fixed an issue with invites that was causing the report to not show. <img width="400" alt="image" src="https://github.com/user-attachments/assets/69a62b79-12e3-4539-a82c-9bbf9673abe2" /> <img width="1554" height="896" alt="image" src="https://github.com/user-attachments/assets/60fabac5-6f20-4e01-9679-fd228c6850c2" /> <img width="754" height="459" alt="image" src="https://github.com/user-attachments/assets/6725c6e2-1bac-417e-b4ee-190841ab656b" /> <img width="1472" height="490" alt="image" src="https://github.com/user-attachments/assets/87c95e6a-5d78-4fb6-9f2d-dad13bcc9788" /> <img width="1480" height="702" alt="image" src="https://github.com/user-attachments/assets/67bec8f9-dce5-4077-a07d-fe9e13696958" />
74 lines
1.4 KiB
SCSS
74 lines
1.4 KiB
SCSS
.-most-viewed-tags,
|
|
.-most-viewed-categories {
|
|
.rewind-card {
|
|
@include rewind-border;
|
|
flex-grow: 1;
|
|
position: relative;
|
|
background: var(--rewind-black);
|
|
border-radius: 4px;
|
|
z-index: 1;
|
|
width: 100%;
|
|
transition: transform 0.3s ease;
|
|
transform: skew(-1deg) scaleY(1);
|
|
|
|
p {
|
|
color: var(--rewind-white);
|
|
}
|
|
}
|
|
|
|
.folder-tab {
|
|
display: block;
|
|
content: "";
|
|
width: 3em;
|
|
height: 1em;
|
|
border: 2px solid var(--rewind-green);
|
|
border-bottom: none;
|
|
border-radius: 6px 6px 0 0;
|
|
position: absolute;
|
|
top: -1em;
|
|
left: 0;
|
|
z-index: 1;
|
|
transition: background-color 0.3s ease;
|
|
background: var(--rewind-black);
|
|
}
|
|
|
|
.folder-bg {
|
|
content: "";
|
|
border: 2px solid var(--rewind-green);
|
|
width: calc(100% - 4px);
|
|
bottom: 0;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
position: absolute;
|
|
border-radius: 0 4px 4px;
|
|
transition: background-color 0.3s ease;
|
|
z-index: -1;
|
|
}
|
|
|
|
.folder-wrapper {
|
|
display: flex;
|
|
position: relative;
|
|
flex: 1;
|
|
margin-top: 1.5em;
|
|
|
|
&:hover {
|
|
z-index: 4;
|
|
|
|
.folder-bg,
|
|
.folder-tab {
|
|
background-color: var(--rewind-white);
|
|
}
|
|
|
|
.rewind-card {
|
|
transform: skew(-10deg) scaleY(0.9) translateY(7px) translateX(10px);
|
|
box-shadow: -12px -30px 30px rgb(255 255 255 / 0.5);
|
|
|
|
p {
|
|
color: var(--rewind-yellow);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|