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.
162 lines
2.6 KiB
162 lines
2.6 KiB
/* (C) Roy van Lunsen */
|
|
|
|
section {
|
|
max-width: max-content;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Chess board START */
|
|
|
|
#y-co {
|
|
display: flex;
|
|
flex-flow: column-reverse; /* Order depends on player side #1/3 */
|
|
padding-left: 24px;
|
|
}
|
|
|
|
.x-row {
|
|
display: flex;
|
|
flex-flow: row; /* Order depends on player side #2/3 */
|
|
padding-left: 32px;
|
|
}
|
|
|
|
#y-co > li:hover {
|
|
background-color: green;
|
|
}
|
|
|
|
#x-co {
|
|
display: flex;
|
|
padding-top: 1em;
|
|
margin: 0;
|
|
padding-left: 56px;
|
|
flex-flow: row nowrap;
|
|
list-style-position: inside;
|
|
list-style-type: upper-alpha;
|
|
text-align: center;
|
|
}
|
|
|
|
#x-co > li {
|
|
padding: 0;
|
|
margin: 0;
|
|
flex: 0 1 32px;
|
|
}
|
|
|
|
img {
|
|
border: 2.5px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
ol > li li {
|
|
flex: 1 1 32px;
|
|
height: 36px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: end;
|
|
}
|
|
|
|
dl {
|
|
display: flex;
|
|
flex-flow: column-reverse;
|
|
width: max-content;
|
|
overflow-y: scroll;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
dl li {
|
|
display: flex;
|
|
flex-flow: column-reverse; /* Order depends on player side #3/3 */
|
|
}
|
|
|
|
li.coord {
|
|
}
|
|
|
|
/* Chess board END */
|
|
|
|
/* Chess move log START */
|
|
|
|
figure {
|
|
display: flex;
|
|
flex-flow: row;
|
|
margin-top: 0.1em;
|
|
margin-bottom: 0.1em;
|
|
}
|
|
|
|
figure img {
|
|
height: 20px;
|
|
padding: 1px;
|
|
}
|
|
|
|
.white {
|
|
background-color: white;
|
|
color: black;
|
|
}
|
|
|
|
.black {
|
|
background-color: black;
|
|
color: white;
|
|
}
|
|
|
|
dd.noimg { /* Display text of <dd> and <dt> at the same height when there's no image in <dd> */
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: end;
|
|
}
|
|
|
|
/* Chess move log END */
|
|
|
|
/* Chess control panel START */
|
|
|
|
.features, .features ul { /* Custom-made flex navbar-like menu #1/7 */
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style-type: none;
|
|
}
|
|
|
|
.features > li {
|
|
padding: 2vh;
|
|
}
|
|
|
|
.features { /* Custom-made flex navbar-like menu #2/7 */
|
|
display: flex;
|
|
flex-flow: row;
|
|
background-color: #5583;
|
|
font-weight: bold;
|
|
font-family: sans-serif;
|
|
z-index: 1;
|
|
}
|
|
|
|
.keys { /* Custom-made flex navbar-like menu #3/7 */
|
|
display: flex;
|
|
flex-flow: row;
|
|
}
|
|
|
|
.values { /* Custom-made flex navbar-like menu #4/7 */
|
|
display: none;
|
|
width: min-content;
|
|
}
|
|
|
|
.key { /* Custom-made flex navbar-like menu #5/7 */
|
|
display: none;
|
|
}
|
|
|
|
.key:hover .values { /* Custom-made flex navbar-like menu #6/7 */
|
|
display: initial;
|
|
}
|
|
|
|
ul.features > li:hover > ul > li { /* Custom-made flex navbar-like menu #7/7 */
|
|
display: flex;
|
|
flex-flow: column;
|
|
}
|
|
|
|
ul a {
|
|
text-decoration: none;
|
|
display: block;
|
|
}
|
|
|
|
div.setting {
|
|
|
|
}
|
|
|
|
/* Chess control panel END */
|
|
|