mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-22 13:39:46 +00:00
Restart2008
f256f497ce
## Description: Adds the following: - Snowflake animation with snowflakes falling from the top to the bottom of the screen - Changed homepage color theme from blue and white to Green and Red. Also changed the openfront logo to a red, green, and white gradient. - Added a santa hat on the announcements button ## Please complete the following: - [x] I have added screenshots for all UI updates - [ ] I process any text displayed to the user through translateText() and I've added it to the en.json file - [ ] I have added relevant tests to the test directory - [ ] I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced <img width="1616" height="836" alt="Screenshot 2025-12-12 at 3 01 17 PM" src="https://github.com/user-attachments/assets/82e29db3-3bc0-4392-b5bf-dd57c15784a3" /> <img width="1616" height="836" alt="Screenshot 2025-12-12 at 2 58 54 PM" src="https://github.com/user-attachments/assets/232da646-6923-4966-acba-5240074e7e3f" /> ## Please put your Discord username so you can be contacted if a bug or regression is found: Restart --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
59 lines
1.2 KiB
CSS
59 lines
1.2 KiB
CSS
.snow {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: 1050;
|
|
}
|
|
|
|
.snowflake {
|
|
position: absolute;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
pointer-events: none;
|
|
animation-name: snowflake-fall;
|
|
animation-timing-function: linear;
|
|
animation-iteration-count: infinite;
|
|
animation-duration: 10s; /* Adjust duration to taste */
|
|
z-index: 10;
|
|
opacity: 0.8; /* Default opacity */
|
|
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5)); /* Subtle glow */
|
|
will-change: transform, opacity;
|
|
}
|
|
.santa-hat-overlay {
|
|
position: absolute;
|
|
width: 55px;
|
|
height: 55px;
|
|
background-image: url("/resources/images/SantaHat.webp"); /* Use direct path for CSS background */
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
top: -15px;
|
|
right: -15px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
@keyframes snowflake-fall {
|
|
from {
|
|
transform: translateY(-100%) rotate(0deg); /* Start off-screen */
|
|
}
|
|
to {
|
|
transform: translateY(105vh) rotate(360deg); /* Fall completely out of view */
|
|
}
|
|
}
|
|
|
|
html.in-game .santa-hat-overlay {
|
|
display: none;
|
|
}
|
|
|
|
html.modal-active .santa-hat-overlay {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.snowflake {
|
|
filter: none;
|
|
}
|
|
}
|