You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

251 lines
4.1 KiB

2 years ago
a:link, a:hover, a:active, a:visited{color: #000;}
html, body{margin: 0; padding: 0; height: 100%; width: 100%;}
canvas{margin: 0; padding: 0; border: none; display: block;}
button:hover{cursor: pointer;}
@font-face{
font-family: "Rametto";
src: url("data/styles/font.ttf");
}
*{
font-family: "Rametto";
}
html{
background-image: url(data/images/background.jpg);
background-size: 100% 100%;
}
#interface{
width: 100%;
position: fixed;
bottom: 0;
margin: auto;
visibility: visible;
opacity: 1;
float: left;
text-align: center;
}
#interface button{
width: 100px;
padding: 5px;
margin: 2px;
border-radius: 4px;
box-shadow: 2px 2px 4px #000;
background-color: rgb(36, 126, 248);
float: left;
}
#interface button:hover{
filter: brightness(70%);
}
#game{
display: flex;
width: 100%;
height: 100%;
background-image: url(data/images/background.jpg);
background-size: 100% 100%;
}
#table{
margin: auto;
width: 100vh;
height: 100vh;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.card_on_table{
margin: 0 calc(1vh - 2px);
transition: filter 150ms ease-in-out, transform 300ms ease-in-out;
cursor: pointer;
}
.card_on_table:hover{
filter: brightness(70%);
}
.card_on_staple{
position: relative;
margin-left: calc((-8vh - 2px) + 4px - 1px);
top: 0px;
float: left;
}
.card_on_staple:first-child{
margin-left: 0px;
}
.card_on_staple:hover{
transform: none;
}
.card{
width: 8vh;
height: 8vh;
background-size: 100% 100%;
border-radius: 7px;
border: 1px solid #000;
box-shadow: 10px 10px 15px #000;
}
.empty{
margin: 0 calc(1vh - 2px);
border: 1px solid rgba(0, 0, 0, 0);
box-shadow: none;
}
.player-holder{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
width: calc((100vw - 100vh) / 2);
}
.player{
background-color: rgba(0, 0, 0, 0.5);
width: 90%;
padding: 10px;
border: 3px solid #000;
border-radius: 10px;
box-shadow: 10px 10px 15px #000;
}
.staple{
width: 95%;
height: calc(8vh + 2px);
margin: 50px 2.5% 2.5% 2.5%;
}
.has-turn{
width: 30px;
height: 30px;
border: 1px solid #000;
box-shadow: 2px 2px 5px #000;
border-radius: 2px;
}
.pairs-label{
font-size: 15px;
}
#right .pairs-label{
float: right;
}
#left .pairs-label{
float: left;
}
.player > span{
font-size: 23px;
line-height: 30px;
}
#left .has-turn{
margin-left: 10px;
}
#right .has-turn{
margin-right: 10px;
}
#left .has-turn, #left .player > span{
float: right;
}
#right .has-turn, #right .player > span{
float: left;
}
#initialize-wrapper{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
}
.initialize-lobby{
padding: 20px;
background-color: rgb(224, 224, 224);
border-radius: 10px;
border: 5px solid #000;
box-shadow: 5px 5px 10px #000;
display: flex;
align-items: center;
flex-direction: column;
}
#initialize fieldset{
border: 2px solid #000;
border-radius: 5px;
background-color: rgb(150, 150, 150);
text-align: center;
}
#initialize > fieldset{
margin: 10px;
box-shadow: 4px 4px 8px #000;
}
#loader{
}
.setup{
width: 200px;
border-radius: 3px;
border: 2px solid #000;
background-color: rgb(53, 204, 53);
font-size: 20px;
margin: 10px;
box-shadow: 3px 3px 6px #000;
}
.setup:hover{
filter: brightness(70%);
}
.error-label{
font-size: 10px;
color: red;
}
.lobby-member{
padding: 5px;
margin: 5px;
border: 1px solid #000;
background-color: rgb(180, 180, 180);
border-radius: 5px;
box-shadow: 4px 4px 6px #000;
}
#lobby-leader{
border-width: 4px;
border-color: #009a06;
}
#lobby > span{
font-size: 10px;
}
#start-lobby:disabled{
filter: brightness(40%);
}
#start-lobby:disabled:hover{
filter: brightness(40%);
}