paco_sako/css/chess.css

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

#page {
   width: 100%;
   height: 100vh;
   display: flex;
   flex-flow: column nowrap;
}

h1 {
   font-family: 'Vollkorn', serif;
   font-size: 2em;
   line-height: 1.4em;
   height: 1.4em;
   margin-top: 8px;
   margin-left: 8px;
   margin-bottom: 0;
}

.media-button-svg {
   width: 12pt;
   height: 12pt;
}

button:disabled .silhouette {
   fill: #c0c0c0;
}

#content {
   display: flex;
   flex-flow: row nowrap;
}

#cb_outer2 {
   flex: 1 1 auto;
   width: 100%;
   max-width: calc(100vh - (8px + 2.8em + 8px));
   margin-left: 8px;
}

#cb_outer {
   width: 100%;
   max-width: calc(100vw - (8px + 24px));
}

#cb_container {
   position: relative;
   width: 100%;
   padding-top: 100%;
}

#cb_inner {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
}

#cb_board {
   position: relative;
   width: 100%;
   height: 100%;
   border: 1px solid black;
   border-collapse: collapse;
   padding-top: 100%;
}

#cb_board tr {
   position: relative;
}

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

#cb_light_name, #cb_dark_name {
   width: 8em;
}

#cb_control_container {
   display: flex;
   flex-flow: column nowrap;
   flex: 0 1000 auto;
   margin-left: 1em;
   width: 100%;
   min-width: 24em;
   max-height: calc(100vh - (8px + 2.8em));
}

#cb_control_form {
   flex: 0 1 auto;
   display: flex;
   flex-flow: column nowrap;
   margin-right: auto;
}

#cb_scrollable {
   flex: 1 1000 auto;
   padding-right: 8px;
   overflow: auto;
}

#cb_scrollable p {
   margin-top: 0;
}

#cb_controls, #cb_names, #cb_message, #cb_game, #cb_navigate {
   margin-top: 0.5em;
   white-space: nowrap;
}

#cb_undo {
   margin-left: auto;
   margin-right: 0.1em;
}

#cb_redo {
   margin-left: 0.1em;
   margin-right: auto;
}

#cb_resign {
   margin-left: 0.1em;
   margin-right: 0;
}

#cb_navigate {
   display: flex;
   flex-flow: row nowrap;
   justify-items: center;
   justify-content: center;
   padding-left: 1em;
}

#cb_navigate button {
   margin-left: 0.1em;
   margin-right: 0.1em;
}

#cb_navigate button:first-child {
   margin-left: 0;
}

#cb_navigate button:last-child {
   margin-right: 0;
}

#cb_history {
   max-width: 7.5in;
}

.cb-hbox {
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
}

.cb-vbox {
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
}

.cb-align-start {
   align-items: start;
}

.cb-align-stretch {
   align-items: stretch;
}

.cb-square {
   position: relative;
   width: calc((100% - 16pt) / 8);
   height: calc((100% - 16pt) / 8);
   border: 1px solid black;
   padding: 0;
}

.cb-horiz-label {
   position: relative;
   width: calc((100% - 16pt) / 8);
   height: 8pt;
   border: 1px solid black;
   padding: 0;
}

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

.cb-vert-label {
   position: relative;
   width: 8pt;
   height: calc((100% - 16pt) / 8);
   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);
}

.cb-lt-piece, .cb-dk-piece {
   position: absolute;
   top: 17.5%;
   width: 55%;
   height: 65%;
}

.cb-lt-piece {
   left: -2.5%;
}

.cb-dk-piece {
   left: 47.5%;
}

#cb_board.cb-reversed .cb-lt-piece {
   left: 47.5%;
}

#cb_board.cb-reversed .cb-dk-piece {
   left: -2.5%;
}

#cb_phantom > .cb-dk-piece {
   top: 22.5%;
   left: 22.5%;
}

#cb_phantom > .cb-lt-piece {
   top: 22.5%;
   left: 22.5%;
}

.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-selected {
   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_peers {
   color: #cccccc;
}

@media only screen and (max-aspect-ratio: 3/2) {
   #content {
      flex-flow: column nowrap;
   }

   #cb_outer2 {
      width: auto;
   }

   #cb_control_container {
      margin-top: 0.5em;
      margin-left: 8px;
      max-height: none;
      overflow: visible;
      width: 100%;
      max-width: calc(100vw - (8px + 24px));
   }
}

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