95 lines
1.4 KiB
CSS
95 lines
1.4 KiB
CSS
html, body {
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
.scene{
|
|
display: none;
|
|
width: 100%;
|
|
height: 100vh;
|
|
background: linear-gradient(to right, #583305,#8A5009 );
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
|
|
|
}
|
|
|
|
.button{
|
|
position: absolute;
|
|
width: 50%;
|
|
height: 50vh;
|
|
top: 50%;
|
|
}
|
|
|
|
#black_button{
|
|
right: 0%;
|
|
background: linear-gradient(to top, #A55B00, #583305);
|
|
}
|
|
|
|
#white_button{
|
|
right: 50%;
|
|
background: linear-gradient(to top , #E9BB82, #583305);
|
|
}
|
|
.click{
|
|
filter:brightness(0.9);
|
|
}
|
|
.TextClock{
|
|
position: absolute;
|
|
font-family: "Dancing Script", cursive;
|
|
font-optical-sizing: auto;
|
|
font-weight: 0;
|
|
font-style: normal;
|
|
font-size: 3vw;
|
|
}
|
|
#TimeBlack{
|
|
left: 70%;
|
|
top: 35%;
|
|
}
|
|
#TimeWhite{
|
|
top: 35%;
|
|
left: 20%;
|
|
}
|
|
#BlockTime{
|
|
top:5%;
|
|
left: 35%;
|
|
}
|
|
#MoveLeftWhite{
|
|
left: 13%;
|
|
top: 25%
|
|
}
|
|
#MoveLeftBlack{
|
|
left: 63%;
|
|
top: 25%;
|
|
}
|
|
#BlockType{
|
|
top:15%;
|
|
left: 48%;
|
|
}
|
|
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
top: 0;
|
|
width: 50%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease, left 1s ease, right 1s ease;
|
|
background: radial-gradient(
|
|
circle at center,
|
|
rgba(255, 255, 0, 0.6),
|
|
transparent 50%
|
|
);
|
|
}
|
|
|
|
/* Glow à gauche */
|
|
.glow-left::before {
|
|
left: 0;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Glow à droite */
|
|
.glow-right::before {
|
|
right: 0;
|
|
opacity: 1;
|
|
}
|