/* (C) Roy van Lunsen */
# log {
border-style : solid ;
overflow-x : scroll ;
scrollbar-width : none ;
background : linear-gradient ( to right , transparent 90 % , # 000 ) , repeating-linear-gradient ( 90deg , # 000 1px , transparent 9px ) ;
}
# main {
display : grid ;
}
html {
background : url ( . . / i / bg . png ) ;
}
# notice , # warning {
position : absolute ;
right : 2vmin ;
top : 14vmin ;
background-color : # e66d ;
/* padding: 4px;*/
text-align : center ;
border-radius : 25 % ;
border-left-style : solid ;
border-right-style : solid ;
min-width : 178px ;
box-shadow : inset 4px 4px 4px # bbbbbb ;
}
# warning {
right : 0 ;
top : 25 % ;
border-radius : 0 ;
width : 100 % ;
font-size : larger ;
padding : 5px ;
}
h1 {
text-decoration-line : underline ;
}
/* Chess board START */
# board a {
margin : 1px ;
}
# y-co {
display : flex ;
flex-flow : column-reverse ; /* Order depends on player side #1/3 */
padding-left : 24px ;
max-inline-size : 356px ; /* TODO: We don't use SVG for the chess pieces, so it might look pixelated on high-res. Wouldn't it be better to have a resizeable board? */
min-width : 178px ; /* From this point onward the item list font size will be too large */
/* From this point onward the pieces will seem pixelated */
background-color : peru ;
/*! margin-left: 24px; */
box-shadow : 10px 10px 20px 10px ;
}
. x-row {
display : flex ;
flex-flow : row nowrap ; /* Order depends on player side #2/3 */
padding-left : 0 ;
/*! min-width: 140px; */
}
# y-co > li {
flex : 1 ;
border-left-style : ridge ;
}
# y-co > li : nth-child ( 2n ) > . x-row > li : nth-child ( 2n ) {
background-color : # 6c360d ;
}
# y-co > li : nth-child ( 2n + 1 ) > . x-row > li : nth-child ( 2n + 1 ) {
background-color : # 6c360d ;
}
# y-co > li : nth-child ( 2n + 1 ) > . x-row > li : nth-child ( 2n ) {
background-color : # 884b10 ;
}
# y-co > li : nth-child ( 2n ) > . x-row > li : nth-child ( 2n + 1 ) {
background-color : # 884b10 ;
}
/*#y-co > li > .x-row > li:first-child {*/
/* border-left-style: solid;*/
/*}*/
# y-co : not ( . x-row ) {
border-style : groove ;
border-width : thick ;
border-color : tan ;
}
# x-co {
display : flex ;
/*! padding-top: 1em; */
flex-flow : row nowrap ;
list-style-position : inside ;
list-style-type : upper-alpha ;
padding-left : 0px ;
height : 24px ;
border-top-style : ridge ;
}
# x-co > li {
flex : 1 1 32px ;
padding-top : 0 . 4em ;
}
img {
border : 2 . 5px ;
max-width : 100 % ;
}
. coord > a {
flex : 1 1 32px ;
display : flex ;
}
ol > li li {
flex : 1 1 32px ;
display : flex ;
aspect-ratio : 1 ;
}
dl {
display : flex ;
flex-flow : row-reverse ; /* Order depends on player side #3/3 */
width : max-content ;
}
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 : 0 5px 0 5px ;
border-radius : 5 % ;
}
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 {
padding : 0 ;
margin : 0 ;
list-style-type : none ;
}
. features > li {
flex : 1 1 89px ;
border-left-style : solid ;
border-color : white ;
}
. features {
display : flex ;
flex-flow : row wrap ;
background-color : # 123 ;
font-weight : bold ;
font-family : sans-serif ;
text-align : center ;
box-shadow : inset 10px 20px 10px # 345 ;
}
. keys {
display : flex ;
flex-flow : row wrap ;
position : absolute ;
}
. values {
display : none ;
position : absolute ;
}
ul . values {
padding : 20px 10px 10px 10px ;
}
. key {
display : none ; /* Avoid wrapping on hover and losing hover as a result #1/2 */
flex-flow : column nowrap ;
padding-top : 10px ;
text-align : center ;
}
. key : hover > . values {
display : contents ;
border-style : dotted ;
}
ul . features > li : hover > ul > li {
display : flex ; /* Avoid wrapping on hover and losing hover as a result #2/2 */
}
ul a {
text-decoration : none ;
display : block ;
height : inherit ;
color : # dd6600 ;
}
. key > ul > li : nth-last-child ( n + 2 ) a {
border-bottom : double ;
border-color : # 000 ;
}
. key > ul > li : first-child a {
padding-top : 5px ;
}
. key > ul > li > a {
margin : 2 . 5px ;
padding : 2 . 5px ;
background-color : # eef ;
border-left : solid ;
border-right : solid ;
border-color : # 000 ;
}
. key > ul > li : last-child {
border-bottom : solid ;
}
a : hover {
color : # ff22ff ;
text-decoration : underline ;
}
. values > li > a : hover , . keys > li > a : hover {
background-color : # 123 ;
box-shadow : inset 2px 4px 2px # 345 ;
}
. option {
background-color : # bbc ;
border-width : 0 0 5px 0 ;
border-style : dashed ;
padding : 5px ;
}
. features > li > a {
padding : 8px ;
}
/* Chess control panel END */
/* Status messages animation START */
@ keyframes fadeOut {
to {
opacity : 0 ;
}
}
@ keyframes fadeIn {
to {
opacity : 1 ;
}
}
/* Status messages animation END */