629 lines
11 KiB
CSS
629 lines
11 KiB
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;
|
|
}
|
|
|
|
a.plain-link {
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
font-weight: inherit;
|
|
line-height: inherit;
|
|
color: inherit;
|
|
background-color: inherit;
|
|
text-decoration: inherit;
|
|
}
|
|
|
|
.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: calc(8px + 3em);
|
|
overflow: auto;
|
|
}
|
|
|
|
#cb_scrollable > *:last-child {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
#cb_controls, #cb_theme, #cb_names, #cb_message, #cb_navigate {
|
|
margin-top: 0.5em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#cb_controls, #cb_theme, #cb_names {
|
|
padding-right: calc(3.25em + 12px);
|
|
}
|
|
|
|
#cb_theme {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
align-items: baseline;
|
|
}
|
|
|
|
#cb_select_theme {
|
|
height: 100%;
|
|
}
|
|
|
|
.cb-spacer {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
#cb_choose_game {
|
|
margin-left: 0.2em;
|
|
height: 100%;
|
|
}
|
|
|
|
#cb_theme label {
|
|
flex: 0 0 auto;
|
|
padding-right: 0.2em;
|
|
}
|
|
|
|
#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;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
#cb_history_future {
|
|
color: grey;
|
|
}
|
|
|
|
#cb_explain_check {
|
|
color: red;
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
.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);
|
|
z-index: 10;
|
|
}
|
|
|
|
.cb-lt-piece, .cb-dk-piece {
|
|
position: absolute;
|
|
top: 17.5%;
|
|
width: 55%;
|
|
height: 65%;
|
|
}
|
|
|
|
#cb_board .cb-lt-piece {
|
|
left: -2.5%;
|
|
}
|
|
|
|
#cb_board .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_board #cb_phantom .cb-dk-piece {
|
|
top: 22.5%;
|
|
left: 22.5%;
|
|
}
|
|
|
|
#cb_board #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-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;
|
|
}
|
|
|
|
.badges {
|
|
position: fixed;
|
|
bottom: 12px;
|
|
right: 12px;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
|
|
.badge {
|
|
margin: 0;
|
|
}
|
|
|
|
.badge img {
|
|
width: 3em;
|
|
height: 3em;
|
|
opacity: 0.5;
|
|
margin: 0;
|
|
}
|
|
|
|
.badge.game-link-badge img {
|
|
width: 1.8em;
|
|
height: 1.8em;
|
|
margin: 0.6em;
|
|
}
|
|
|
|
.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;
|
|
border: 1px solid black;
|
|
box-shadow: 3px 3px 3px black;
|
|
margin: 1em;
|
|
padding: 0.5em;
|
|
border-radius: 5px;
|
|
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;
|
|
font-size: 110%;
|
|
}
|
|
|
|
.game-tile:hover {
|
|
box-shadow: 3px 3px 3px blue;
|
|
}
|
|
|
|
.game-tile.game-tile-selected {
|
|
box-shadow: 0 0 0 2px blue, 5px 5px 3px black;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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: 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%;
|
|
}
|
|
|
|
.game-tile-lt-name::before {
|
|
content: '';
|
|
display: inline-block;
|
|
background-image: url(../svg/pacosako/kl.svg);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
width: 1.2em;
|
|
height: 1.2em;
|
|
margin-left: -1.05em;
|
|
margin-top: -0.2em;
|
|
margin-bottom: -0.2em;
|
|
margin-right: -0.15em
|
|
}
|
|
|
|
.game-tile-dk-name::after {
|
|
content: '';
|
|
display: inline-block;
|
|
background-image: url(../svg/pacosako/kd.svg);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
width: 1.2em;
|
|
height: 1.2em;
|
|
margin-left: -0.15em;
|
|
margin-top: -0.2em;
|
|
margin-bottom: -0.2em;
|
|
margin-right: -1.05em
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
@media only screen and (min-width: 50em) and (max-width: 70em) {
|
|
.game-tile {
|
|
width: 12em;
|
|
height: 12em;
|
|
font-size: 100%;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 50em) {
|
|
.game-tile {
|
|
width: 10em;
|
|
height: 10em;
|
|
font-size: 70%;
|
|
}
|
|
|
|
.new-game-text {
|
|
font-size: 3em;
|
|
}
|
|
}
|
|
|
|
@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));
|
|
}
|
|
|
|
#cb_scrollable {
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.badges {
|
|
position: static;
|
|
bottom: auto;
|
|
right: auto;
|
|
margin-left: auto;
|
|
margin-right: 8px;
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
|
|
img.cb-dk-piece.cb-king { content: url(../svg/Chess_kdt45.svg); }
|
|
img.cb-dk-piece.cb-queen { content: url(../svg/Chess_qdt45.svg); }
|
|
img.cb-dk-piece.cb-rook { content: url(../svg/Chess_rdt45.svg); }
|
|
img.cb-dk-piece.cb-knight { content: url(../svg/Chess_ndt45.svg); }
|
|
img.cb-dk-piece.cb-bishop { content: url(../svg/Chess_bdt45.svg); }
|
|
img.cb-dk-piece.cb-pawn { content: url(../svg/Chess_pdt45.svg); }
|
|
img.cb-lt-piece.cb-king { content: url(../svg/Chess_klt45.svg); }
|
|
img.cb-lt-piece.cb-queen { content: url(../svg/Chess_qlt45.svg); }
|
|
img.cb-lt-piece.cb-rook { content: url(../svg/Chess_rlt45.svg); }
|
|
img.cb-lt-piece.cb-knight { content: url(../svg/Chess_nlt45.svg); }
|
|
img.cb-lt-piece.cb-bishop { content: url(../svg/Chess_blt45.svg); }
|
|
img.cb-lt-piece.cb-pawn { content: url(../svg/Chess_plt45.svg); }
|
|
|
|
#cb_board.cb-reversed img {
|
|
-webkit-transform: scaleX(-1);
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
/* vim: set expandtab sw=3 ts=8: */
|