Przydzielanie żetonu wielbłąda, wizerunek maharaja, pokazywanie punktów dopiero po przyznaniu wielbłada. Wydzielenie styli do osobnego pliku. Dodanie kodu gry w pliki html bez pliku php.
This commit is contained in:
kplaczek
205
css/style.css
Normal file
205
css/style.css
Normal file
@@ -0,0 +1,205 @@
|
||||
|
||||
.group.inactive {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.group {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.group .coin:first-child {
|
||||
margin: 5px 0vh 5px 0vh;
|
||||
}
|
||||
|
||||
.group .coin.selected:first-child {
|
||||
margin: 5px 0vh 5px -4vh;
|
||||
}
|
||||
|
||||
.group .coin.selected {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.group .coin {
|
||||
border-radius: 90px;
|
||||
display: inline-block;
|
||||
height: 9vh;
|
||||
width: 9vh;
|
||||
text-align: center;
|
||||
border: 1px solid transparent;
|
||||
margin: 5px 0vh 5px -4vh;
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
|
||||
color: #d8d8d8;
|
||||
background-position: center 72%;
|
||||
background-repeat: no-repeat;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
text-shadow: 0 0 2px #fff;
|
||||
font-size: 3vh;
|
||||
}
|
||||
|
||||
.group .coin.leather {
|
||||
border-color: saddlebrown;
|
||||
/*background: saddlebrown;*/
|
||||
background-image: url(../leather.svg);
|
||||
background-color: burlywood;
|
||||
background-size: 45%
|
||||
}
|
||||
|
||||
.group .coin.spice {
|
||||
border-color: forestgreen;
|
||||
background-color: #dff9b6;
|
||||
background-image: url(../spice.svg);
|
||||
background-size: 60%
|
||||
}
|
||||
|
||||
.group .coin.gold {
|
||||
border-color: goldenrod;
|
||||
background-color: #fcf4ca;
|
||||
background-image: url(../gold.svg);
|
||||
background-size: 40%;
|
||||
}
|
||||
|
||||
.group .coin.diamond {
|
||||
border-color: darkred;
|
||||
background-color: #f66282;
|
||||
background-image: url(../diamond.svg);
|
||||
background-size: 48%;
|
||||
}
|
||||
|
||||
.group .coin.fabric {
|
||||
border-color: purple;
|
||||
background-color: #f5d6f5;
|
||||
background-image: url(../fabric.svg);
|
||||
background-size: 71%;
|
||||
}
|
||||
|
||||
.group .coin.silver {
|
||||
border-color: silver;
|
||||
background-color: #879fc6;
|
||||
background-image: url(../silver.svg);
|
||||
background-size: 44%;
|
||||
}
|
||||
|
||||
.players {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.players .player {
|
||||
border: 2px solid dodgerblue;
|
||||
padding: 0.5vh 4vh;
|
||||
margin: 1.5vh 0;
|
||||
color: #444;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
font-weight: bold;
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.players .player.selected {
|
||||
background: #6f9cc9;
|
||||
color: #f2eeee;
|
||||
|
||||
}
|
||||
|
||||
.players .accept {
|
||||
visibility: hidden;
|
||||
border: 2px solid dodgerblue;
|
||||
margin: 1.5vh 0;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding: 0.5vh 4vh;
|
||||
font-weight: bold;
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
|
||||
background-color: #bedfff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.players .accept.on {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.players .player.player1 {
|
||||
}
|
||||
|
||||
.players .player.player2 {
|
||||
}
|
||||
|
||||
.players .player .score {
|
||||
height: 50px;
|
||||
width: 23px;
|
||||
display: inline-block;
|
||||
background-image: none;
|
||||
background-size: auto auto;
|
||||
margin: 0 5px;
|
||||
background-image: url(../maharaja.svg);
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
}
|
||||
|
||||
.players .player .score:first-child {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.scoreTable {
|
||||
width: 90vw;
|
||||
background: #fff;
|
||||
content: "";
|
||||
height: 70vh;
|
||||
position: absolute;
|
||||
top: 15vh;
|
||||
left: 5vw;
|
||||
box-shadow: 0 0 207px #0000027F;
|
||||
border: 3px solid #ccc;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.scoreTable.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.scoreTable h1 {
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.players_section, .camel_section {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: 45px;
|
||||
}
|
||||
|
||||
.camel_section .player1_camel, .camel_section .player2_camel {
|
||||
background: url('../camel.svg') no-repeat 0 0 / 10vh 10vh;
|
||||
height: 10vh;
|
||||
width: 10vh;
|
||||
cursor: pointer;
|
||||
opacity: 0.1;
|
||||
}
|
||||
.camel_section .nobody {
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.camel_section .player1_camel.selected, .camel_section .player2_camel.selected, .camel_section .nobody.selected
|
||||
{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.score_section {
|
||||
display: none;
|
||||
font-size: 35px;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.score_section.show {
|
||||
display: flex;
|
||||
}
|
||||
Reference in New Issue
Block a user