browser-go-proto/css/main.css

205 lines
4.7 KiB
CSS

* {
box-sizing: border-box;
margin: 0;
vertical-align: middle;
}
body {
display: block;
}
.full-screen {
/* positioning will be absolue */
/* will take up whole screen */
/* background will be ~0.5 opacity */
/* grid-areas
"game-info *4" <-date, komi, handicap
"b-player-info*2 w-player-info*2" <- name, rank, rank-certainty
"record record record options" <- displays numbered record (stretch!), new game, get game record(stretch!)
pre-game record will display instructions
*/
}
content {
background-color: #61a6c2;
/* display: grid;
grid-template-columns: 100vmin;
grid-template-rows: 1fr 100vmin 1fr;
grid-template-areas:
"white-pos"
"board-space"
"black-pos"; */
display: flex;
flex-direction: column;
/* justify-content: flex-end; */
justify-content: space-between !important;
justify-items: stretch !important;
}
.player-pos {
/* flex-grow: 2; */
display: flex;
align-content: center;
align-items: center;
justify-content: space-between;
}
.player-pos#white-pos {
/* grid-area: white-pos; */
}
.player-pos#black-pos {
/* grid-area: black-pos; */
flex-direction: row-reverse;
}
#kifu {
order: 0;
height: 10vh;
width: 8vh;
background-color: #FFF;
transform: rotate(-20deg);
}
#kifu table {
}
.bowl {
order: -1;
margin: 1vh;
height: 8vh;
width: 8vh;
/* border: solid black; */
border-radius: 50%;
background-color: rgb(116, 48, 17);
box-shadow: -1vmin 2vmin 3vmin rgba(83, 53, 35, 0.61);
}
.caps {
color: #FFF;
order: 1;
margin: 1vh;
height: 6vh;
width: 6vh;
border-radius: 50%;
background-color: rgb(116, 48, 17);
box-shadow: -0.5vmin 1vmin 3vmin rgba(83, 53, 35, 0.61);
}
#board-space {
margin: 0 auto;
/* grid-area: board-space; */
display: flex;
flex-direction: column;
background-color: #EAB24E;
width: 90vmin;
height: 90vmin;
padding: 1vmin;
z-index: 1;
box-shadow: -2vmin 4vmin 3vmin rgba(145, 92, 23, 0.5);
}
#board-space::after {
}
#board-space table {
display: flex;
align-items: stretch;
justify-content: space-between;
height: 81vmin;
width: 81min;
margin: auto;
}
#board-space td {
height: 9vmin;
width: 9vmin;
background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%);
border-radius: 50% solid black;
color: black;
margin: auto;
padding: 0;
vertical-align: middle;
}
#board-space td[id^="1"] {
background: conic-gradient( rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%);
}
#board-space td[id^="9"] {
background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%);
}
#board-space td[id$="1"] {
background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 99%, #000 100%);
}
#board-space td[id$="9"] {
background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%);
}
#board-space td[id="1,1"] {
background: conic-gradient( rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%);
}
#board-space td[id="1,9"] {
background: conic-gradient( rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76% );
}
#board-space td[id="9,1"] {
background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 99%, #000 100%);
}
#board-space td[id="9,9"] {
background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%);
}
td .stone {
width: 85%;
height: 85%;
border-radius: 50%;
margin: auto;
vertical-align: middle;
display: flex;
flex-direction: column;
justify-content: center;
}
td .stone .dot {
width: 35%;
height: 35%;
border-radius: 50%;
margin: auto;
vertical-align: middle;
}
td .stone[data-stone="ko"] {
background-color: transparent;
border: 1vmin solid red;
}
td .stone[data-stone="white"] {
background-color: white;
}
td .stone[data-stone="black"] {
background-color: black;
}
td .stone[data-stone="none"] {
background-color: transparent;
}
td .dot[data-dot="white"] {
background-color: white;
}
td .dot[data-dot="black"] {
background-color: black;
}
td .dot[data-dot="none"] {
background-color: transparent;
}
td .dot .dame {
}
td .dot .seki {
}