150 lines
No EOL
2.4 KiB
CSS
150 lines
No EOL
2.4 KiB
CSS
.large-button .button-arrow {
|
|
display: inline-block;
|
|
width: 24px;
|
|
height: 20px;
|
|
background-image: url("/images/Fleche_changement_de_zone.png");
|
|
background-size: 100% auto;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
rotate: 90deg;
|
|
margin-left: 10px;
|
|
translate: 0px 0px;
|
|
transition: all 0.25s ease;
|
|
}
|
|
|
|
.large-button:hover .button-arrow {
|
|
translate: 10px 0px;
|
|
}
|
|
|
|
.button,
|
|
.large-button {
|
|
border-style: solid;
|
|
border-image: url("/images/button.png") 28 28 28 28 repeat repeat;
|
|
}
|
|
|
|
.large-button {
|
|
border-width: 25px 25px 25px 25px;
|
|
}
|
|
|
|
.button {
|
|
border-width: 15px 15px 15px 15px;
|
|
}
|
|
|
|
.sprite {
|
|
position: absolute;
|
|
z-index: 50;
|
|
}
|
|
|
|
#menu li {
|
|
margin-left: 15px;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
@media (max-width: 1000px) {
|
|
#menu li {
|
|
margin-left: 5px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
#spirit-fish {
|
|
top: -154px;
|
|
left: -174px;
|
|
rotate: 45deg;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
#spirit-doggo {
|
|
top: calc(100% - 140px);
|
|
left: calc(100% - 185px);
|
|
rotate: 0deg;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
#spirit-butterfly-1 {
|
|
top: -35px;
|
|
left: calc(100% - 128px);
|
|
rotate: -20deg;
|
|
opacity: 0.2;
|
|
scale: 0.7;
|
|
}
|
|
|
|
#spirit-snow-1 {
|
|
top: -2px;
|
|
left: 26px;
|
|
rotate: 124deg;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
#spirit-snow-2 {
|
|
top: 19px;
|
|
left: 144px;
|
|
rotate: 26deg;
|
|
opacity: 0.1;
|
|
scale: 0.8;
|
|
}
|
|
|
|
#spirit-bird {
|
|
top: -100px;
|
|
left: calc(100% - 281px);
|
|
rotate: 0deg;
|
|
opacity: 0.2;
|
|
scale: 0.8;
|
|
}
|
|
|
|
#spirit-large-fish {
|
|
top: 409px;
|
|
left: calc(100% - 254px);
|
|
rotate: -4deg;
|
|
opacity: 0.2;
|
|
scale: 0.8;
|
|
}
|
|
|
|
#spirit-snow-3 {
|
|
top: calc(100% - 570px);
|
|
left: 54px;
|
|
rotate: 6deg;
|
|
opacity: 0.1;
|
|
scale: 1;
|
|
}
|
|
|
|
#spirit-butterfly-2 {
|
|
top: calc(100% - 142px);
|
|
left: 64px;
|
|
rotate: -156deg;
|
|
opacity: 0.1;
|
|
scale: 1.5;
|
|
}
|
|
|
|
#tree-1 {
|
|
top: calc(100% - 752px);
|
|
left: calc(100% - 322px);
|
|
rotate: 0deg;
|
|
scale: 0.7;
|
|
z-index: 0;
|
|
}
|
|
|
|
#tree-2 {
|
|
top: calc(100% - 750px);
|
|
left: -422px;
|
|
rotate: -24deg;
|
|
scale: 0.7;
|
|
z-index: 0;
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
.arrow {
|
|
display: inline-block;
|
|
background-size: contain;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
background-image: url("/images/ribbon-arrows.png");
|
|
padding: 17px;
|
|
rotate: 90deg;
|
|
}
|
|
|
|
@media (min-width: 1000px) {
|
|
#menu {
|
|
background-position-y: -38px;
|
|
}
|
|
} |