User:Fred Gandt/chessDemo.css

.chessDemo { display: inline-block; padding: 0 .7em .8em; margin: 1em; vertical-align: top; border-radius: 3px; background: whitesmoke; font-size: 1em; text-align: center; } .cd-border { border: 2px solid lightgrey; } .cd-interface { position: relative; margin-top: .8em; } .chessDemo p + .cd-interface { margin-top: 0; } .cd-interface .cd-border { display: block; } .cd-interface .cd-board { position: absolute; top: 2px; width: 8em; height: 8em; margin: 1em; } .chessDemo table { width: 10em; height: 10em; background: white; text-align: inherit; table-layout: fixed; border-collapse: collapse; font-family: Consolas, 'Courier New', monospace; } .chessDemo tr { height: 1em; } .chessDemo td { font-size: .5em; width: 2em; } .cd-square-w { font-size: 1em; background-color: #F3CA9E; } .cd-square-b { font-size: 1em; background-color: #D88D3D; } .cd-interface.cd-persp-b span.cd-persp-w, .cd-interface span.cd-persp-b { display: none; } .cd-interface.cd-persp-b span.cd-persp-b { display: inline; } .cd-title { font-weight: bold; } .cd-notation div div { float: left; vertical-align: top; } .cd-notation div div + div { margin-left: 20px; } .chessDemo.cd-notation-left .cd-interface, .chessDemo.cd-notation-right .cd-notation { float: right; } .chessDemo.cd-notation-right .cd-interface, .chessDemo.cd-notation-left .cd-notation { float: left; } .cd-notation-right .cd-notation p.cd-title { margin-top: 0; } .chessDemo .mw-collapsible .mw-collapsible-toggle-collapsed + .cd-title { margin-bottom: 0; } .cd-notation .mw-collapsible-toggle { font-size: 80%; margin-top: .2em; } .cd-notation p:not( .cd-title ) { margin: .25em 0; text-align: left; line-height: 1.1em; } .cd-notation b { font-family: Consolas, 'Courier New', monospace; } .cd-notation div p > span { display: inline-block; margin-left: .5em; } .cd-board div { position: absolute; font-size: 1em; line-height: 1.1em; } .cd-board div.cd-fallback { width: 100%; height: 100%; } .cd-board div.cd-fallback { display: none; } .cd-controls { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .cd-controls button::-moz-focus-inner { padding: 0; border: 0; } .cd-controls span { white-space: nowrap; } .cd-controls button { line-height: 1em; padding: .2em .5em; margin-top: .5em; } .cd-controls button + button { margin-left: .5em; } .cd-controls.cd-mini { height: .3em; } .cd-controls.cd-mini button { float: left; } .cd-controls.cd-mini button + button { float: right; } .cd-controls label { margin: 0 .5em; } .cd-controls input { vertical-align: middle; width: 4.5em; } .cd-notation span.cd-movenote { outline: 1px solid #D88D3D; padding: 0 .3em 0 .4em; } .cd-board div { opacity: 1; z-index: 1; line-height: 1em; -webkit-transition: top 500ms, left 500ms, opacity 500ms; -moz-transition: top 500ms, left 500ms, opacity 500ms; -ms-transition: top 500ms, left 500ms, opacity 500ms; -o-transition: top 500ms, left 500ms, opacity 500ms; transition: top 500ms, left 500ms, opacity 500ms; } .cd-board div.cd-captured { opacity: 0; z-index: 0; } .cd-board div.cd-moving { z-index: 2; } .cd-board div.cd-piece-black:after, .cd-board div.cd-piece-white:after { content: "\265F"; color: black; } .cd-board div.cd-piece-white:after { color: white; text-shadow: 0 0 .1em black; } .cd-board div.cd-piece-K:after { content: "\265A"; } .cd-board div.cd-piece-Q:after { content: "\265B"; } .cd-board div.cd-piece-B:after { content: "\265D"; } .cd-board div.cd-piece-N:after { content: "\265E"; } .cd-board div.cd-piece-R:after { content: "\265C"; }

.cd-board div.cd-file-a { left: 0; } .cd-board div.cd-file-b { left: 1em; } .cd-board div.cd-file-c { left: 2em; } .cd-board div.cd-file-d { left: 3em; } .cd-board div.cd-file-e { left: 4em; } .cd-board div.cd-file-f { left: 5em; } .cd-board div.cd-file-g { left: 6em; } .cd-board div.cd-file-h { left: 7em; } .cd-board div.cd-rank-1 { top: 7em; } .cd-board div.cd-rank-2 { top: 6em; } .cd-board div.cd-rank-3 { top: 5em; } .cd-board div.cd-rank-4 { top: 4em; } .cd-board div.cd-rank-5 { top: 3em; } .cd-board div.cd-rank-6 { top: 2em; } .cd-board div.cd-rank-7 { top: 1em; } .cd-board div.cd-rank-8 { top: 0; }

.cd-interface.cd-persp-b .cd-board div.cd-file-a { left: 7em; } .cd-interface.cd-persp-b .cd-board div.cd-file-b { left: 6em; } .cd-interface.cd-persp-b .cd-board div.cd-file-c { left: 5em; } .cd-interface.cd-persp-b .cd-board div.cd-file-d { left: 4em; } .cd-interface.cd-persp-b .cd-board div.cd-file-e { left: 3em; } .cd-interface.cd-persp-b .cd-board div.cd-file-f { left: 2em; } .cd-interface.cd-persp-b .cd-board div.cd-file-g { left: 1em; } .cd-interface.cd-persp-b .cd-board div.cd-file-h { left: 0; } .cd-interface.cd-persp-b .cd-board div.cd-rank-1 { top: 0; } .cd-interface.cd-persp-b .cd-board div.cd-rank-2 { top: 1em; } .cd-interface.cd-persp-b .cd-board div.cd-rank-3 { top: 2em; } .cd-interface.cd-persp-b .cd-board div.cd-rank-4 { top: 3em; } .cd-interface.cd-persp-b .cd-board div.cd-rank-5 { top: 4em; } .cd-interface.cd-persp-b .cd-board div.cd-rank-6 { top: 5em; } .cd-interface.cd-persp-b .cd-board div.cd-rank-7 { top: 6em; } .cd-interface.cd-persp-b .cd-board div.cd-rank-8 { top: 7em; }