mirror of
https://github.com/discourse/discourse-rewind.git
synced 2025-12-17 20:53:33 +00:00
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" />
92 lines
1.8 KiB
SCSS
92 lines
1.8 KiB
SCSS
.rewind-logo {
|
|
height: 40px;
|
|
|
|
&.-light {
|
|
display: none;
|
|
}
|
|
|
|
&.-dark {
|
|
display: block;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
&.-light {
|
|
display: block;
|
|
}
|
|
|
|
&.-dark {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@if is-dark-color-scheme() {
|
|
&.-dark {
|
|
display: none;
|
|
}
|
|
|
|
&.-light {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rewind__header {
|
|
padding: 1em 0 1em 1em;
|
|
background-color: #fbf8e4;
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 168.7 52.42"><path d="m0 0 49.67 52.42h23.8L23.81 0z" style="fill:%23d0222b"/><path d="m23.81 0 49.66 52.42h23.81L47.62 0z" style="fill:%23f15f25"/><path d="m47.62 0 49.66 52.42h23.81L71.42 0z" style="fill:%23fcf6b2"/><path d="m71.42 0 49.67 52.42h23.8L95.23 0z" style="fill:%2310a94d"/><path d="m95.23 0 49.66 52.42h23.81L119.04 0z" style="fill:%2329abe2"/></svg>');
|
|
background-repeat: no-repeat;
|
|
background-position: 150px;
|
|
top: 0;
|
|
position: sticky;
|
|
z-index: 3;
|
|
color: var(--rewind-black);
|
|
|
|
.rewind-logo {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
p {
|
|
margin: 0 0.5em 0 0;
|
|
text-transform: uppercase;
|
|
font-size: var(--font-up-1);
|
|
}
|
|
|
|
&-logo {
|
|
display: grid;
|
|
grid-template-areas: "logo rewind" "logo year";
|
|
width: 7em;
|
|
|
|
svg {
|
|
grid-area: logo;
|
|
width: 2.5em;
|
|
height: 2.5em;
|
|
}
|
|
}
|
|
|
|
&-title {
|
|
grid-area: rewind;
|
|
line-height: 1;
|
|
transform: skewX(15deg);
|
|
}
|
|
|
|
&-year {
|
|
line-height: 1;
|
|
font-weight: bold;
|
|
font-size: 1.5em;
|
|
}
|
|
}
|
|
|
|
.rewind-notification-active #toggle-current-user::after {
|
|
width: 48px;
|
|
height: 48px;
|
|
position: absolute;
|
|
left: -4px;
|
|
top: -4px;
|
|
content: "";
|
|
background-image: absolute-image-url(
|
|
"/plugins/discourse-rewind/images/rewind-avatar-2-shimmer.gif"
|
|
);
|
|
display: block;
|
|
background-size: cover;
|
|
}
|