185 lines
4.4 KiB
CSS
185 lines
4.4 KiB
CSS
.is3d .cg-board-wrap {
|
|
position: relative;
|
|
background-size: cover;
|
|
}
|
|
.cg-512 .cg-board-wrap {
|
|
width: 512px;
|
|
height: 512px;
|
|
position: relative;
|
|
}
|
|
.is3d .cg-512 .cg-board-wrap {
|
|
height: 479.08572px;
|
|
}
|
|
.cg-board {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
line-height: 0;
|
|
background-size: cover;
|
|
}
|
|
.manipulable .cg-board {
|
|
cursor: pointer;
|
|
}
|
|
.is3d .cg-board {
|
|
top: 0.6168702%;
|
|
height: 97.0229%;
|
|
}
|
|
.is2d .cg-board {
|
|
top: 0;
|
|
height: 100%;
|
|
}
|
|
.cg-square {
|
|
position: absolute;
|
|
width: 12.5%;
|
|
height: 12.5%;
|
|
transition: 0.25s;
|
|
}
|
|
.manipulable .cg-square {
|
|
transition: 0.13s;
|
|
}
|
|
.cg-square[data-coord-x]::after,
|
|
.cg-square[data-coord-y]::before {
|
|
position: absolute;
|
|
font-size: 11px;
|
|
line-height: 11px;
|
|
opacity: 0.7;
|
|
text-transform: uppercase;
|
|
}
|
|
.cg-square[data-coord-x]::after {
|
|
content: attr(data-coord-x);
|
|
left: 1px;
|
|
bottom: 1px;
|
|
}
|
|
.cg-square[data-coord-y]::before {
|
|
content: attr(data-coord-y);
|
|
right: 1px;
|
|
top: 1px;
|
|
}
|
|
body.coords_1 .cg-square[data-coord-x]::after {
|
|
color: #fff;
|
|
text-shadow: 0 1px 2px #000;
|
|
}
|
|
body.coords_1 .cg-square[data-coord-y]::before {
|
|
color: #fff;
|
|
text-shadow: 0 1px 2px #000;
|
|
}
|
|
body.coords_2 .cg-square[data-coord-x]::after {
|
|
bottom: -11px;
|
|
left: calc(50% - 3.5px);
|
|
color: #bbb;
|
|
font-weight: bold;
|
|
}
|
|
body.coords_2 .is3d .cg-square[data-coord-x]::after {
|
|
bottom: calc(-10px - 22%);
|
|
}
|
|
body.coords_2 .cg-square[data-coord-y]::before {
|
|
right: -8px;
|
|
top: calc(50% - 7px);
|
|
color: #bbb;
|
|
font-weight: bold;
|
|
}
|
|
body.highlight .manipulable .cg-square.drag-over {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
body.destination .cg-board .cg-square.move-dest {
|
|
background: radial-gradient(rgba(20, 85, 30, 0.3) 22%, #208530 0, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 0);
|
|
cursor: pointer;
|
|
}
|
|
body.destination .cg-board .cg-square.occupied.move-dest {
|
|
background: radial-gradient(transparent 0%, transparent 80%, rgba(20, 85, 0, 0.3) 80%);
|
|
}
|
|
/* .cg-square.occupied.move-dest .cg-piece::after { */
|
|
/* content: ''; */
|
|
/* position: absolute; */
|
|
/* width: 100%; */
|
|
/* height: 100%; */
|
|
/* background: radial-gradient(rgba(20, 85, 30, 0.5) 22%, #208530 0, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 0); */
|
|
/* } */
|
|
body.destination .cg-board .cg-square.premove-dest {
|
|
background: radial-gradient(rgba(20, 30, 85, 0.3) 22%, #203085 0, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 0);
|
|
}
|
|
body.destination .cg-board .cg-square.occupied.premove-dest {
|
|
background: radial-gradient(transparent 0%, transparent 80%, rgba(20, 30, 85, 0.3) 80%);
|
|
}
|
|
body.highlight .cg-board .cg-square.move-dest.drag-over,
|
|
body.highlight .cg-board .cg-square.move-dest:hover {
|
|
background: rgba(20, 85, 30, 0.3);
|
|
}
|
|
body.highlight .cg-board .cg-square.premove-dest.drag-over,
|
|
body.highlight .cg-board .cg-square.premove-dest:hover {
|
|
background: rgba(20, 30, 85, 0.3);
|
|
}
|
|
/* .cg-square.move-dest.drag-over .cg-piece::after, */
|
|
/* .cg-square.move-dest:hover .cg-piece::after { */
|
|
/* background: none; */
|
|
/* } */
|
|
body.base .cg-board .cg-square.selected {
|
|
background-color: rgba(20, 85, 30, 0.5);
|
|
}
|
|
body.highlight .cg-board .cg-square.last-move {
|
|
background-color: rgba(155, 199, 0, 0.41);
|
|
}
|
|
body.highlight .cg-board .cg-square.check {
|
|
background: radial-gradient(ellipse at center, rgba(255, 0, 0, 1) 0%, rgba(231, 0, 0, 1) 25%, rgba(169, 0, 0, 0) 89%, rgba(158, 0, 0, 0) 100%);
|
|
}
|
|
body.base .cg-board .cg-square.current-premove {
|
|
background-color: rgba(20, 30, 85, 0.5);
|
|
}
|
|
.cg-piece {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: cover;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
transform: translate3d(0,0,0);
|
|
-webkit-transform: translate3d(0,0,0);
|
|
-moz-transform: translate3d(0,0,0);
|
|
-ms-transform: translate3d(0,0,0);
|
|
z-index: 2; /* no less than 2 */
|
|
}
|
|
.mini_board .cg-piece {
|
|
transform: none;
|
|
-webkit-transform: none;
|
|
-moz-transform: none;
|
|
-ms-transform: none;
|
|
}
|
|
.is3d .cg-piece {
|
|
/* original size:
|
|
width: 140.625%;
|
|
height: 179.6875%; */
|
|
/* size on 3D board, with height/width = 90.78571% */
|
|
width: 140.625%;
|
|
height: 197.925%;
|
|
left: -18%;
|
|
bottom: -20%;
|
|
}
|
|
.is2d .cg-piece {
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
.cg-piece.dragging {
|
|
z-index: 3;
|
|
cursor: move;
|
|
}
|
|
.cg-piece.ghost {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
/* minimal dom overrides */
|
|
|
|
.minimal-dom .cg-square {
|
|
transition: none;
|
|
}
|
|
.minimal-dom .cg-piece {
|
|
position: absolute;
|
|
width: 12.5%;
|
|
height: 12.5%;
|
|
}
|