chess-gui/chess_gui/public/css/index.css

/* (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 */