478 lines
9.4 KiB
CSS
478 lines
9.4 KiB
CSS
.frame {
|
|
position: absolute;
|
|
border-width: 8px;
|
|
border-image: url("/background/frame.png") 22 fill / auto space;
|
|
width: 720px;
|
|
height: 960px;
|
|
@media only screen and (max-width: 600px) {
|
|
max-height: 90vh;
|
|
overflow: hidden;
|
|
max-width: 100vw;
|
|
}
|
|
}
|
|
|
|
.background_asset {
|
|
position: absolute;
|
|
left: 22px;
|
|
right: 22px;
|
|
background-size: cover;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.air {
|
|
background: rgb(0, 0, 0);
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(0, 0, 0, 1) 0%,
|
|
rgba(28, 28, 51, 1) 17%,
|
|
rgba(255, 0, 0, 1) 43%,
|
|
rgba(0, 0, 0, 1) 45%
|
|
);
|
|
top: 22px;
|
|
bottom: 22px;
|
|
animation: thunder_hue 12s linear infinite;
|
|
}
|
|
.clouds_large {
|
|
top: 250px;
|
|
height: 150px;
|
|
background-image: url("/background/clouds_large.png");
|
|
animation:
|
|
scrollBackground 28s linear infinite,
|
|
thunder 4s linear infinite;
|
|
@media only screen and (max-width: 600px) {
|
|
animation:
|
|
scrollBackground 280s linear infinite,
|
|
thunder 4s linear infinite;
|
|
}
|
|
}
|
|
.clouds_small {
|
|
top: 275px;
|
|
height: 82px;
|
|
background-image: url("/background/clouds_small.png");
|
|
animation:
|
|
scrollBackground 20s linear infinite,
|
|
thunder 12s linear infinite;
|
|
@media only screen and (max-width: 600px) {
|
|
top: 285px;
|
|
animation:
|
|
scrollBackground 200s linear infinite,
|
|
thunder 12s linear infinite;
|
|
}
|
|
}
|
|
|
|
.boss {
|
|
background-image: url("/background/boss/0_gluttony.svg");
|
|
background-size: cover;
|
|
width: 270px;
|
|
height: 270px;
|
|
top: 130px;
|
|
right: 10px;
|
|
left: auto;
|
|
@media only screen and (max-width: 600px) {
|
|
right: -20px;
|
|
}
|
|
animation: thunder_hue_hard 12s linear infinite;
|
|
transition: all 0.1s cubic-bezier(0.265, 1.4, 0.68, 1.65);
|
|
transform-origin: bottom center;
|
|
pointer-events: all;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
transform: scale(1.05, 1.1);
|
|
transform-origin: bottom center;
|
|
&::after {
|
|
text-shadow: #0f0 1px 1px 10px;
|
|
animation: excited 0.5s infinite linear;
|
|
}
|
|
}
|
|
&:active {
|
|
transform: scale(1.1, 1.22);
|
|
}
|
|
|
|
&.boss0 {
|
|
background-image: url("/background/boss/0_gluttony.svg");
|
|
}
|
|
&.boss1 {
|
|
background-image: url("/background/boss/1_sloth.svg");
|
|
}
|
|
&.boss2 {
|
|
background-image: url("/background/boss/2_lust.svg");
|
|
}
|
|
&.boss3 {
|
|
background-image: url("/background/boss/3_wrath.svg");
|
|
}
|
|
&.boss4 {
|
|
background-image: url("/background/boss/4_envy.svg");
|
|
}
|
|
&.boss5 {
|
|
background-image: url("/background/boss/5_pride.svg");
|
|
}
|
|
&.boss6 {
|
|
background-image: url("/background/boss/6_greed.svg");
|
|
}
|
|
}
|
|
.boss::after {
|
|
position: absolute;
|
|
content: "BOSS\A(Risk & Earn RGCVII)";
|
|
text-align: center;
|
|
white-space: pre;
|
|
word-wrap: break-word;
|
|
left: 0;
|
|
width: 100%;
|
|
top: 40%;
|
|
margin-top: -10px;
|
|
}
|
|
|
|
.tower {
|
|
background-image: url("/background/tower/0_gluttony.svg");
|
|
background-size: cover;
|
|
width: 372px;
|
|
height: 372px;
|
|
top: 90px;
|
|
left: -10px;
|
|
@media only screen and (max-width: 600px) {
|
|
left: -80px;
|
|
}
|
|
animation: thunder_hue_hard 12s linear infinite;
|
|
transition: all 0.1s cubic-bezier(0.265, 1.4, 0.68, 1.65);
|
|
transform-origin: bottom center;
|
|
pointer-events: all;
|
|
&.tower0 {
|
|
background-image: url("/background/tower/0_gluttony.svg");
|
|
}
|
|
&.tower1 {
|
|
background-image: url("/background/tower/1_sloth.svg");
|
|
}
|
|
&.tower2 {
|
|
background-image: url("/background/tower/2_lust.svg");
|
|
}
|
|
&.tower3 {
|
|
background-image: url("/background/tower/3_wrath.svg");
|
|
}
|
|
&.tower4 {
|
|
background-image: url("/background/tower/4_envy.svg");
|
|
}
|
|
&.tower5 {
|
|
background-image: url("/background/tower/5_pride.svg");
|
|
}
|
|
&.tower6 {
|
|
background-image: url("/background/tower/6_greed.svg");
|
|
}
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
transform: scale(1.05, 1.1);
|
|
transform-origin: bottom center;
|
|
&::after {
|
|
text-shadow: #0f0 1px 1px 10px;
|
|
animation: excited 0.5s infinite linear;
|
|
}
|
|
}
|
|
&:active {
|
|
transform: scale(1.1, 1.22);
|
|
}
|
|
&.cooldown {
|
|
transition: all 1s cubic-bezier(0.265, 1.4, 0.68, 1.65);
|
|
transform: scale(1.1, 1.22);
|
|
&::after {
|
|
content: "RAID IN PROGRESS";
|
|
color: var(--hover-color);
|
|
top: calc(50% - 15px);
|
|
font-size: 0.9rem;
|
|
text-align: center;
|
|
animation: excited 0.5s infinite linear;
|
|
text-shadow: #000 1px 1px 1px;
|
|
}
|
|
}
|
|
}
|
|
.tower::after {
|
|
position: absolute;
|
|
content: "RAID\A(collect to wallet)";
|
|
text-align: center;
|
|
white-space: pre;
|
|
word-wrap: break-word;
|
|
left: 0;
|
|
width: 100%;
|
|
top: 40%;
|
|
margin-top: -10px;
|
|
}
|
|
|
|
.mountains {
|
|
background-image: url("/background/mountains/0_gluttony.svg");
|
|
height: 181px;
|
|
top: 285px;
|
|
pointer-events: none;
|
|
&.mountains0 {
|
|
background-image: url("/background/mountains/0_gluttony.svg");
|
|
filter: saturate(2) contrast(1.2);
|
|
}
|
|
&.mountains1 {
|
|
background-image: url("/background/mountains/1_sloth.svg");
|
|
filter: contrast(1.2);
|
|
}
|
|
&.mountains2 {
|
|
background-image: url("/background/mountains/2_lust.svg");
|
|
filter: contrast(1.1) hue-rotate(260deg);
|
|
}
|
|
&.mountains3 {
|
|
background-image: url("/background/mountains/3_wrath.svg");
|
|
filter: contrast(1.2);
|
|
}
|
|
&.mountains4 {
|
|
background-image: url("/background/mountains/4_envy.svg");
|
|
filter: saturate(1.5) contrast(1.4);
|
|
}
|
|
&.mountains5 {
|
|
background-image: url("/background/mountains/5_pride.svg");
|
|
filter: contrast(1.2);
|
|
}
|
|
&.mountains6 {
|
|
background-image: url("/background/mountains/6_greed.svg");
|
|
filter: contrast(1.2);
|
|
}
|
|
}
|
|
.village {
|
|
background-image: url("/background/village.png");
|
|
height: 540px;
|
|
bottom: 22px;
|
|
|
|
@media only screen and (max-width: 600px) {
|
|
height: 300px;
|
|
bottom: 80px;
|
|
}
|
|
}
|
|
.bonfire {
|
|
background-image: url("/background/bonfire.png");
|
|
bottom: 100px;
|
|
left: 184px;
|
|
width: 175px;
|
|
height: 193px;
|
|
transform-origin: bottom center;
|
|
animation:
|
|
bonfire 12s linear infinite,
|
|
bonfire_skew 5s infinite linear;
|
|
|
|
@media only screen and (max-width: 600px) {
|
|
left: 80px;
|
|
bottom: 105px;
|
|
scale: 0.7;
|
|
}
|
|
}
|
|
.musicButton {
|
|
position: absolute;
|
|
top: 30px;
|
|
left: 30px;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
color: white;
|
|
border: none;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
z-index: 1000;
|
|
}
|
|
@keyframes scrollBackground {
|
|
0% {
|
|
background-position: 0 0;
|
|
}
|
|
100% {
|
|
background-position: 2000% 0;
|
|
}
|
|
}
|
|
|
|
@keyframes thunder {
|
|
1% {
|
|
filter: saturate(1);
|
|
transform: scale(1, 1);
|
|
}
|
|
5% {
|
|
filter: saturate(4);
|
|
transform: scale(1, 1.05);
|
|
}
|
|
10% {
|
|
filter: saturate(1);
|
|
transform: scale(1, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes thunder_hue {
|
|
1% {
|
|
filter: saturate(1);
|
|
}
|
|
5% {
|
|
filter: saturate(130%);
|
|
}
|
|
10% {
|
|
filter: saturate(1);
|
|
}
|
|
}
|
|
|
|
@keyframes thunder_hue_hard {
|
|
1% {
|
|
filter: saturate(1);
|
|
}
|
|
5% {
|
|
filter: saturate(3);
|
|
}
|
|
10% {
|
|
filter: saturate(1);
|
|
}
|
|
}
|
|
|
|
@keyframes bonfire {
|
|
5% {
|
|
filter: saturate(3);
|
|
}
|
|
10% {
|
|
filter: saturate(1);
|
|
}
|
|
15% {
|
|
filter: saturate(3);
|
|
}
|
|
25% {
|
|
filter: saturate(1);
|
|
}
|
|
35% {
|
|
filter: saturate(5);
|
|
}
|
|
50% {
|
|
filter: saturate(1);
|
|
}
|
|
55% {
|
|
filter: saturate(3);
|
|
}
|
|
85% {
|
|
filter: saturate(1);
|
|
}
|
|
90% {
|
|
filter: saturate(2);
|
|
}
|
|
100% {
|
|
filter: saturate(1);
|
|
}
|
|
}
|
|
|
|
@keyframes bonfire_skew {
|
|
0%,
|
|
100% {
|
|
transform: scale(1, 1) skew(0deg, 0deg);
|
|
}
|
|
10% {
|
|
transform: scale(1.01, 1.01) skew(0.5deg, -0.5deg);
|
|
}
|
|
20% {
|
|
transform: scale(1.02, 1.02) skew(1deg, -1deg);
|
|
}
|
|
30% {
|
|
transform: scale(1, 1.03) skew(0deg, 0deg);
|
|
}
|
|
40% {
|
|
transform: scale(1.01, 1.04) skew(0.5deg, -1.5deg);
|
|
}
|
|
50% {
|
|
transform: scale(1, 1.03) skew(0.5deg, -0.5deg);
|
|
}
|
|
60% {
|
|
transform: scale(1.01, 1.04) skew(0deg, 0deg);
|
|
}
|
|
70% {
|
|
transform: scale(1.02, 1.01) skew(1deg, -1deg);
|
|
}
|
|
80% {
|
|
transform: scale(1, 1.02) skew(-0.5deg, 0.5deg);
|
|
}
|
|
90% {
|
|
transform: scale(1.02, 1.03) skew(0deg, -1deg);
|
|
}
|
|
}
|
|
|
|
.excited {
|
|
animation: excited 0.5s infinite linear;
|
|
}
|
|
|
|
@keyframes excited {
|
|
0%,
|
|
100% {
|
|
transform: scale(1, 1) skew(0deg, 0deg);
|
|
}
|
|
10% {
|
|
transform: scale(1.2, 1.2) skew(0.5deg, -0.5deg);
|
|
}
|
|
90% {
|
|
transform: scale(1.02, 1.03) skew(0deg, -1deg);
|
|
}
|
|
}
|
|
|
|
.leaderboardButton {
|
|
position: absolute;
|
|
top: 30px;
|
|
left: 80px;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border: none;
|
|
border-radius: 5px;
|
|
padding: 5px 10px;
|
|
font-size: 1.2rem;
|
|
cursor: pointer;
|
|
z-index: 1000;
|
|
transition: all 0.2s cubic-bezier(0.265, 1.4, 0.68, 1.65);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
color: var(--text-color);
|
|
& .hideMobile {
|
|
padding-left: 0.5rem;
|
|
}
|
|
@media only screen and (max-width: 600px) {
|
|
& .hideMobile {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.leaderboardButton:hover {
|
|
transform: scale(1.1);
|
|
background: rgba(0, 0, 0, 0.7);
|
|
color: var(--hover-color);
|
|
}
|
|
|
|
.leaderboardButton:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.leaderboardOverlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
z-index: 1000;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.leaderboardContent {
|
|
background: var(--bg-color);
|
|
border-width: 8px;
|
|
border-image: url("/background/frame.png") 22 fill / auto space;
|
|
padding: 2rem;
|
|
max-width: 600px;
|
|
width: 90%;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.closeButton {
|
|
position: absolute;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
background: none;
|
|
border: none;
|
|
font-size: 2rem;
|
|
cursor: pointer;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.closeButton:hover {
|
|
color: var(--hover-color);
|
|
}
|