212 lines
4.6 KiB
CSS
212 lines
4.6 KiB
CSS
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
vertical-align: middle;
|
|
}
|
|
body {
|
|
height: vh;
|
|
width: vw;
|
|
}
|
|
|
|
.modal {
|
|
display: flex;
|
|
position: fixed;
|
|
z-index: 2;
|
|
display: none;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgba(0,0,0,0.3);
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#menu {
|
|
background-color: #fff;
|
|
padding: 1vmin;
|
|
|
|
}
|
|
|
|
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 !important;
|
|
flex-direction: column;
|
|
/* justify-content: flex-end; */
|
|
justify-content: space-between !important;
|
|
/* justify-items: stretch !important; */
|
|
height: 100vh;
|
|
width: 100vw;
|
|
}
|
|
|
|
.player-pos {
|
|
/* flex-grow: 2; */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
flex: 5;
|
|
}
|
|
|
|
.player-pos#white-pos {
|
|
/* grid-area: white-pos; */
|
|
|
|
}
|
|
|
|
.player-pos#black-pos {
|
|
/* grid-area: black-pos; */
|
|
flex-direction: row-reverse;
|
|
justify-self: flex-end;
|
|
}
|
|
|
|
#kifu {
|
|
order: 0;
|
|
height: 10vh;
|
|
width: 8vh;
|
|
background-color: #FFF;
|
|
transform: rotate(-20deg);
|
|
}
|
|
|
|
#kifu table {
|
|
|
|
}
|
|
|
|
.bowl {
|
|
order: -1;
|
|
margin: 1vh;
|
|
height: 10vh;
|
|
width: 10vh;
|
|
/* 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);
|
|
flex: 1;
|
|
}
|
|
|
|
#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 {
|
|
|
|
}
|
|
|