paco_sako/css/chess.css

*, ::before, ::after {
   box-sizing: border-box;
}

html, body, #page {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
   background: white;
}

body {
   font-family: 'Roboto', sans-serif;
   padding: 0;
   margin: 0;
}

body > #page {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   display: flex;
   flex-flow: row nowrap;
}

#board_ui {
   display: flex;
   flex-flow: column nowrap;
   justify-content: stretch;
   align-items: center;
   width: 100%;
   height: 100%;
   background-color: #FFFFF0;
}

#page.horizontal-layout #board_ui {
   border-left: 10px solid #C4B28F;
   border-image:
      linear-gradient(
         to right,
         #C4B28F,
         #F5DEB3 15%,
         #C4B28F 45%,
         #FFFFF0 80%,
         #C4B28F) 1 100%;
}

#header {
   display: flex;
   flex-flow: row nowrap;
   flex: 0 0 auto;
   width: 100%;
   height: 2.5rem;
   font-size: 2rem;
   line-height: 2.4rem;
   margin: 0;
   background-image: linear-gradient(#FFFFF0, #F5DEB3);
   border-bottom: 1px solid black;
   align-items: center;
}

#header > h1 {
   font-family: 'Vollkorn', serif;
   text-align: center;
   font-size: 1.2rem;
   line-height: 2.4rem;
   margin: 0;
   padding: 0;
   padding-top: 0.1rem;
   height: 2.5rem;
   white-space: nowrap;
   flex: 1 0 auto;
}

#header > button {
   flex: 0 0 auto;
   width: 2.5rem;
   height: 2.5rem;
   border: none;
   background: none;
   padding: 0;
   margin: 0;
}

#header > button:active {
   background-image: linear-gradient(#F5DEB3, #FFFFF0);
}

input.image-checkbox {
   display: inline-block;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   padding: 0;
   margin: 0;
}

input.image-checkbox:checked {
   color: #00f;
}

input.image-checkbox:focus {
   outline: blue solid medium;
   outline: -webkit-focus-ring-color solid medium;
   outline-offset: 3px;
}

#header > .checkbox-container {
   flex: 0 0 auto;
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
   align-items: center;
   width: 2.5rem;
   height: 2.5rem;
   border: none;
   background: none;
}

button#settings, button#cb_choose_game {
   border-right: 1px solid #DCC8A1;
}

#header > .checkbox-container, button#help {
   border-left: 1px solid #DCC8A1;
}

#cb_container {
   width: 100%;
   flex: 1 1 auto;
   position: relative;
}

#page.horizontal-layout #cb_container {
   flex: 0 0.5 auto;
}

#cb_board {
   position: absolute;
   border-collapse: collapse;
   border-style: hidden;
   box-shadow: 0 0 0 1px black, 2px 2px 4px #00000080;
   border-radius: 6pt;
   overflow: hidden;
   background-color: #FAEED2;
}

#cb_status {
   display: flex;
   position: relative;
   flex-flow: column nowrap;
   width: 100%;
   padding-top: 0.25rem;
   padding-left: 0.25rem;
   padding-right: 0.25rem;
   padding-bottom: 0.5rem;
}

#page.horizontal-layout #cb_status {
   flex: 1 1 auto;
}

#cb_status::after {
   content: '';
   display: block;
   position: absolute;
   width: 100%;
   height: 1.5em;
   left: 0;
   bottom: 0.5rem;
   background: linear-gradient(rgba(255,255,240,0),rgba(255,255,240,1));
   pointer-events: none;
}

#cb_message {
   height: 1.2em;
   margin-bottom: 0.1rem;
   flex: 1 1 auto;
}

#cb_explain_check {
   color: red;
   height: 2.4em;
   margin-bottom: 0.1em;
}

#cb_scrollable {
   flex: 0 0 auto;
   overflow: auto;
   height: 4.8em;
   padding-bottom: 1.2em;
}

#page.horizontal-layout #cb_scrollable {
   flex: 1 1 auto;
}

#cb_history {
   color: black;
}

#cb_history_future {
   color: grey;
}

#cb_names {
   position: relative;
   display: flex;
   flex-flow: row nowrap;
   white-space: nowrap;
   justify-content: stretch;
   align-items: flex-end;
   font-size: 1.5rem;
   width: 100%;
   height: 3rem;
   padding-left: 2rem;
   padding-right: 2rem;
}

#cb_names_text {
   display: flex;
   flex-flow: row nowrap;
   white-space: nowrap;
   justify-content: stretch;
   align-items: baseline;
   width: 100%;
   z-index: 1;
}

#cb_names::before {
   content: '';
   display: block;
   background-image: url(../svg/pacosako-theme.svg#light_king_left);
   background-size: contain;
   background-repeat: no-repeat;
   position: absolute;
   bottom: 0;
   left: 0.5rem;
   width: 3rem;
   height: 3rem;
}

#cb_names.cb-light-turn::before {
   filter: drop-shadow(0 0 5px blue);
   -webkit-filter: drop-shadow(0 0 5px blue);
}

#cb_names.cb-light-won::before {
   filter: drop-shadow(0 0 5px darkviolet);
   -webkit-filter: drop-shadow(0 0 5px darkviolet);
}

#cb_names::after {
   content: '';
   display: block;
   background-image: url(../svg/pacosako-theme.svg#dark_king_right);
   background-size: contain;
   background-repeat: no-repeat;
   position: absolute;
   bottom: 0;
   right: 0.5rem;
   width: 3rem;
   height: 3rem;
}

#cb_names.cb-dark-turn::after {
   filter: drop-shadow(0 0 5px blue);
   -webkit-filter: drop-shadow(0 0 5px blue);
}

#cb_names.cb-dark-won::after {
   filter: drop-shadow(0 0 5px darkviolet);
   -webkit-filter: drop-shadow(0 0 5px darkviolet);
}

#cb_names .cb-names-vs {
   padding-left: 0.25em;
   padding-right: 0.25em;
}

#cb_names input {
   flex: 1 1 auto;
   width: 4em;
   background-color: inherit;
   border: none;
   margin: 2px;
   font-size: 1.5rem;
}

#cb_names input:focus {
   outline: 1px solid blue;
   outline-offset: 2px;
}

#cb_dark_name {
   text-align: right;
}

#cb_navigate {
   display: flex;
   flex-flow: row nowrap;
   align-items: stretch;
   justify-content: stretch;
   border-top: 1px solid black;
   background-image: linear-gradient(#FFFFF0, #F5DEB3);
   white-space: nowrap;
   width: 100%;
   flex: 0 1 auto;
   font-size: 1.25rem;
}

#cb_navigate .nav-spacer {
   flex: 1 1 auto;
   min-width: 1rem;
   width: 100%;
   background: none;
   background-color: #DCC8A140;
}

#cb_navigate button {
   padding: 0;
   margin: 0;
   border: none;
   width: 2rem;
   min-width: 2rem;
   min-height: 2rem;
   background: none;
   font-size: inherit;
}

#cb_navigate button:active {
   background-image: linear-gradient(#F5DEB3, #FFFFF0);
}

#cb_navigate > .nav-spacer, #cb_navigate > button {
   border-left: 1px solid #DCC8A1;
}

#cb_navigate > .nav-spacer:first-child, #cb_navigate > button:first-child {
   border-left: none;
}

#cb_board tr {
   position: relative;
}

#cb_board td {
   background-clip: padding-box;
   position: relative;
}

.cb-square {
   position: relative;
   border: 1px solid black;
   padding: 0;
}

.cb-horiz-label {
   position: relative;
   height: 8pt;
   border: 1px solid black;
   padding: 0;
}

.cb-horiz-label div {
   position: absolute;
   top: calc(50% - 3pt);
   left: 0;
   bottom: 0;
   right: 0;
   font-size: 6pt;
   line-height: 6pt;
   text-align: center;
}

.cb-vert-label {
   position: relative;
   width: 8pt;
   border: 1px solid black;
   padding: 0;
}

.cb-vert-label div {
   position: absolute;
   top: calc(50% - (1em / 2));
   left: 0;
   bottom: 0;
   right: 0;
   font-size: 6pt;
   line-height: 6pt;
   text-align: center;
   vertical-align: middle;
}

.cb-archive .cb-horiz-label, .cb-archive .cb-vert-label, .cb-archive .cb-corner {
   background-color: #ffeeee;
}

.cb-lt-bg {
   background-color: #FFFFF0;
}

.cb-lt-bg.cb-start, .cb-lt-bg.cb-end {
   background-color: #CCFFC0;
}

.cb-lt-bg.cb-legal {
   background-color: #E6E6F2;
}

.cb-dk-bg {
   background-color: #F5DEB3;
}

.cb-dk-bg.cb-start, .cb-dk-bg.cb-end {
   background-color: #D0E398;
}

.cb-dk-bg.cb-legal {
   background-color: #C4B2C2;
}

.cb-phantom {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(128,128,128,0.5);
   z-index: 10;
}

.cb-lt-piece, .cb-dk-piece {
   position: absolute;
   top: 0;
   left: 0;
   bottom: auto;
   right: auto;
   width: 100%;
   height: 100%;
}

.cb-phantom .cb-lt-piece,
.cb-phantom .cb-dk-piece {
   top: 5%;
}

#cb_board .cb-phantom .cb-lt-piece,
#cb_board.cb-reversed .cb-phantom .cb-dk-piece {
   left: 15%;
   right: auto;
   clip-path: inset(0 15% 0 0);
}

#cb_board .cb-phantom .cb-dk-piece,
#cb_board.cb-reversed .cb-phantom .cb-lt-piece {
   left: auto;
   right: 15%;
   clip-path: inset(0 0 0 15%);
}

.noselect {
   cursor: default;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.cb-piece.cb-in-check {
   filter: drop-shadow(0 0 5px red);
   -webkit-filter: drop-shadow(0 0 5px red);
}

.cb-piece.cb-selected, .cb-piece.cb-selected.cb-in-check {
   filter: drop-shadow(0 0 5px blue);
   -webkit-filter: drop-shadow(0 0 5px blue);
}

#cb_board .cb-piece.ui-draggable {
   cursor: grab;
}

#cb_board .cb-piece.ui-draggable-disabled {
   cursor: default;
}

#cb_board.cb-lt-turn .cb-lt-piece, #cb_board.cb-dk-turn .cb-dk-piece {
   z-index: 2;
}

#cb_board.cb-lt-turn .cb-dk-piece, #cb_board.cb-dk-turn .cb-lt-piece {
   z-index: 1;
}

.cb-private .cb-hide-if-private {
   display: none !important;
}

.cb-show-if-private {
   display: none !important;
}

.cb-private .cb-show-if-private {
   display: initial !important;
}

div.hbox {
   display: flex;
   flex-flow: row nowrap;
   justify-content: stretch;
   align-items: stretch;
}

.private-link {
   flex: 0 1 auto;
   margin: 0.1em;
   color: black;
}

.private-link:visited {
   color: black;
}

.private-link:hover {
   color: blue;
}

.jBox-title h2 {
   margin: 0;
}

.rules {
   display: block;
   max-width: 80vw;
}

.badges {
   position: static;
   bottom: auto;
   right: auto;
   margin-top: 0;
   margin-bottom: 0;
   margin-left: auto;
   margin-right: 5px;
   display: flex;
   flex-flow: row nowrap;
   justify-content: flex-end;
   align-items: center;
}

.badge {
   margin: 0;
}

.badge img {
   width: 3rem;
   height: 3rem;
   margin: 0;
}

#cb_theme {
   display: flex;
   flex-flow: row nowrap;
   align-items: baseline;
   margin-top: 1rem;
}

#cb_theme label {
   flex: 0 0 auto;
   padding-right: 0.2rem;
}

.game-tiles {
   max-width: 80vw;
   max-height: 80vh;
   overflow-y: auto;
   text-align: center;
}

.game-tiles > * {
   vertical-align: middle;
}

.game-tile {
   position: relative;
   display: inline-flex;
   flex-flow: column nowrap;
   justify-content: center;
   align-items: center;
   width: 14em;
   height: 14em;
   box-shadow: 0 0 0 1px black, 5px 5px 3px #00000080;
   margin: 1em;
   padding: 0.5em;
   border-radius: 6pt;
   background-color: #FFFFF0;
   overflow: hidden;
   background-image:
      linear-gradient(45deg, #FAF0DD 25%, transparent 25%),
      linear-gradient(-45deg, #FAF0DD 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #FAF0DD 75%),
      linear-gradient(-45deg, transparent 75%, #FAF0DD 75%);
   background-size: 80px 80px;
   background-position: -20px -20px, -20px 20px, 20px -60px, -60px -20px;
}

.game-tile:hover {
   box-shadow: 0 0 0 1px black, 5px 5px 3px #0000FF80;
}

.game-tile.game-tile-selected {
   box-shadow: 0 0 0 2px blue, 5px 5px 3px #00000080;
}

.game-tile.game-tile-selected:hover {
   box-shadow: 0 0 0 2px blue, 5px 5px 3px blue;
}

.new-game-tile {
}

.new-game-text {
   font-size: 3em;
   text-shadow: 2px 2px 4px #000000c0;
   font-weight: bold;
}

.new-game-text::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   margin: 0;
   background-image: url(../svg/new-game.svg);
   background-size: contain;
   background-repeat: no-repeat;
   opacity: 0.25;
}

.game-tile-title {
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
   align-items: center;
   flex: 0 0 auto;
   width: 100%;
   height: 50%;
   overflow: hidden;
}

.game-tile-lt-name, .game-tile-dk-name {
   font-size: 120%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.game-tile-lt-name::before {
   content: '';
   display: inline-block;
   background-image: url(../svg/pacosako-theme.svg#light_king_left);
   background-size: contain;
   background-repeat: no-repeat;
   width: 1.2em;
   height: 1.2em;
   margin-left: 0;
   margin-top: 0;
   margin-bottom: -0.2em;
   margin-right: -0.4em;
}

/* extra space to keep the line centered */
.game-tile-lt-name::after {
   content: '';
   display: inline-block;
   width: 1.2em;
   height: 1.2em;
   margin-left: -0.4em;
   margin-top: 0;
   margin-bottom: -0.2em;
   margin-right: 0;
}

/* extra space to keep the line centered */
.game-tile-dk-name::before {
   content: '';
   display: inline-block;
   width: 1.2em;
   height: 1.2em;
   margin-left: 0;
   margin-top: 0;
   margin-bottom: -0.2em;
   margin-right: -0.4em;
}

.game-tile-dk-name::after {
   content: '';
   display: inline-block;
   background-image: url(../svg/pacosako-theme.svg#dark_king_right);
   background-size: contain;
   background-repeat: no-repeat;
   width: 1.2em;
   height: 1.2em;
   margin-left: -0.4em;
   margin-top: 0;
   margin-bottom: -0.2em;
   margin-right: 0;
}

.game-tile-lt-name {
   display: block;
}

.game-tile-title-vs {
   display: block;
   font-weight: bold;
   margin-top: 0.25em;
   margin-bottom: 0.25em;
}

.game-tile-dk-name {
   display: block;
}

.game-tile-spacer {
   display: block;
   flex: 1 1 auto;
}

.game-tile-status {
   display: block;
   font-weight: bold;
   margin-top: 0.5em;
}

.game-tile-moves {
   display: block;
   margin-top: 0.75em;
}

.game-tile-age {
   display: block;
   margin-top: 0.5em;
}

.game-tile {
   font-size: calc(12in * 0.015);
}

@media only screen and (min-width: 6in) and (max-width: 12in) {
   .game-tile {
      font-size: 1.5vw;
   }
}

@media only screen and (max-width: 6in) {
   .game-tile {
      font-size: calc(6in * 0.015);
   }
}

.cb-dk-piece.cb-king   { content: url(../svg/pacosako-theme.svg#dark_king_right); }
.cb-dk-piece.cb-queen  { content: url(../svg/pacosako-theme.svg#dark_queen_right); }
.cb-dk-piece.cb-bishop { content: url(../svg/pacosako-theme.svg#dark_bishop_right); }
.cb-dk-piece.cb-knight { content: url(../svg/pacosako-theme.svg#dark_knight_right); }
.cb-dk-piece.cb-rook   { content: url(../svg/pacosako-theme.svg#dark_rook_right); }
.cb-dk-piece.cb-pawn   { content: url(../svg/pacosako-theme.svg#dark_pawn_right); }
.cb-lt-piece.cb-king   { content: url(../svg/pacosako-theme.svg#light_king_left); }
.cb-lt-piece.cb-queen  { content: url(../svg/pacosako-theme.svg#light_queen_left); }
.cb-lt-piece.cb-bishop { content: url(../svg/pacosako-theme.svg#light_bishop_left); }
.cb-lt-piece.cb-knight { content: url(../svg/pacosako-theme.svg#light_knight_left); }
.cb-lt-piece.cb-rook   { content: url(../svg/pacosako-theme.svg#light_rook_left); }
.cb-lt-piece.cb-pawn   { content: url(../svg/pacosako-theme.svg#light_pawn_left); }

.cb-reversed .cb-dk-piece.cb-king   { content: url(../svg/pacosako-theme.svg#dark_king_left); }
.cb-reversed .cb-dk-piece.cb-queen  { content: url(../svg/pacosako-theme.svg#dark_queen_left); }
.cb-reversed .cb-dk-piece.cb-bishop { content: url(../svg/pacosako-theme.svg#dark_bishop_left); }
.cb-reversed .cb-dk-piece.cb-knight { content: url(../svg/pacosako-theme.svg#dark_knight_left); }
.cb-reversed .cb-dk-piece.cb-rook   { content: url(../svg/pacosako-theme.svg#dark_rook_left); }
.cb-reversed .cb-dk-piece.cb-pawn   { content: url(../svg/pacosako-theme.svg#dark_pawn_left); }
.cb-reversed .cb-lt-piece.cb-king   { content: url(../svg/pacosako-theme.svg#light_king_right); }
.cb-reversed .cb-lt-piece.cb-queen  { content: url(../svg/pacosako-theme.svg#light_queen_right); }
.cb-reversed .cb-lt-piece.cb-bishop { content: url(../svg/pacosako-theme.svg#light_bishop_right); }
.cb-reversed .cb-lt-piece.cb-knight { content: url(../svg/pacosako-theme.svg#light_knight_right); }
.cb-reversed .cb-lt-piece.cb-rook   { content: url(../svg/pacosako-theme.svg#light_rook_right); }
.cb-reversed .cb-lt-piece.cb-pawn   { content: url(../svg/pacosako-theme.svg#light_pawn_right); }

/* vim: set expandtab sw=3 ts=8: */