ft_transcendence/containers/react/src/styles/field.css
Elisee ADJIGUIDI a84b932355 merge
2023-06-24 15:14:08 +02:00

109 lines
1.8 KiB
CSS

.playButton {
background-image: linear-gradient(90deg, #5843e4, #5a0760);
border-radius: 5vh;
color: white;
display: block;
margin: auto;
margin-top: 30vh;
padding: 2vh 5vw;
height: 10vh;
width: 20vw;
font-size: 300%;
}
.inside_checkbox{
height : 70%;
width: 70%;
}
.field {
background-color: rgb(249, 249, 249);
/* border-radius: 5vh; */
/* color: rgb(100, 42, 42); */
display: block;
margin: auto;
margin-top: 5vh;
/* padding: 2vh 5vw; */
height: 80%;
width: 80%;
/* font-size: 300%; */
}
.clicked{
/* justify-content: center; */
/* display: flex;
justify-content: center; */
background-color: rgb(0, 0, 0);
width: 70vw;
/* height: 70vh; */
margin:auto;
margin-right: 15vw;
margin-left: 15vw;
margin-top: 10vh;
position: relative;
padding-top: 35%;
/* padding-top: 25; */
/* padding-top: 177.77% */
}
@media screen and (max-width: 900px){
.playButton{
font-size: 200%;
}
}
@media screen and (max-width: 700px){
.playButton{
font-size: 150%;
}
}
@media screen and (max-width: 530px){
.playButton{
font-size: 100%;
}
}
@media screen and (max-width: 350px){
.playButton{
font-size: 50%;
}
}
.responsive{
display: flex;
flex-direction: column;
}
/* @media screen and (max-width: 350px){
.responsive{
display:list-item;
flex-direction: column;
}
} */
#myCanvas {
background-color: rgb(124, 47, 47);
/* position: absolute; */
/* top: 0; */
/* left: 0; */
/* cursor: none; */
width: 100%;
height: 100%;
margin: 0;
}
/* @media screen and (max-width: 768px) { */
/* #canvas_container { */
/* width: 50%; */
/* transform: rotate(90deg);
transform-origin: top right;
position: relative;
/* margin-right: 100vw; */
/* height: 100vw; */
/* width: 100vh; */
/* } */
/* #myCanvas {
height: 100%;
width: 100%;
} */
/* } */