/* chessground */ .cg-512 .cg-board-wrap { width: 512px; height: 512px; position: relative; } .cg-board { position: relative; width: 100%; height: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; line-height: 0; background-size: cover; } .manipulable .cg-board.sha { -webkit-transform: skew(2deg) rotate(1deg); transform: skew(2deg) rotate(1deg); } .manipulable .cg-board { cursor: pointer; } .is2d .cg-board { top: 0; height: 100%; } square { position: absolute; width: 12.5%; height: 12.5%; } square[data-coord-x]::after, square[data-coord-y]::before { position: absolute; font-size: 11px; line-height: 11px; opacity: 0.7; text-transform: uppercase; } square[data-coord-x]::after { content: attr(data-coord-x); left: 1px; bottom: 1px; } square[data-coord-y]::before { content: attr(data-coord-y); right: 1px; top: 1px; } body.coords_1 square[data-coord-x]::after, body.coords_1 square[data-coord-y]::before { color: #fff; text-shadow: 0 1px 2px #000; } body.coords_2 square[data-coord-x]::after { bottom: -12px; left: calc(50% - 3.5px); font-weight: bold; } body.coords_2 square[data-coord-y]::before { right: -9px; top: calc(50% - 7px); font-weight: bold; } body.highlight .manipulable square.drag-over { background: rgba(255, 255, 255, 0.1); } body.destination .cg-board square.move-dest { background: radial-gradient(rgba(20, 85, 30, 0.3) 17%, #208530 0, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 0); cursor: pointer; } body.destination .cg-board square.oc.move-dest { background: radial-gradient(transparent 0%, transparent 80%, rgba(20, 85, 0, 0.3) 80%); } body.destination .cg-board square.premove-dest { background: radial-gradient(rgba(20, 30, 85, 0.2) 17%, #203085 0, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0) 0); } body.destination .cg-board square.oc.premove-dest { background: radial-gradient(transparent 0%, transparent 80%, rgba(20, 30, 85, 0.2) 80%); } body.highlight .cg-board square.move-dest.drag-over, body.highlight .cg-board square.move-dest:hover { background: rgba(20, 85, 30, 0.3); } body.highlight .cg-board square.premove-dest.drag-over, body.highlight .cg-board square.premove-dest:hover { background: rgba(20, 30, 85, 0.2); } body.base .cg-board square.selected { background-color: rgba(20, 85, 30, 0.5); } body.highlight .cg-board square.last-move, .mini_board .cg-board square.last-move { background-color: rgba(155, 199, 0, 0.41); } body.highlight .cg-board 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 square.current-premove { background-color: rgba(20, 30, 85, 0.5); } body.base .cg-board square.exploding1 { background-color: rgba(255, 255, 255, 0.5); } body.base .cg-board square.exploding2 { background-color: rgba(255, 0, 0, 0.5); transition: background-color 0.1s; } 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); z-index: 2; /* no less than 2 */ } .mini_board piece { transform: none; -webkit-transform: none; z-index: initial; } .lichess_board.blindfold piece, .other_games.blindfold piece { opacity: 0; } body.highlight .lichess_board.blindfold square.check { background: none; } .is2d piece { width: 100%; height: 100%; left: 0; bottom: 0; } piece.dragging { z-index: 3; cursor: move; } piece.ghost { opacity: 0.3; } /* minimal dom overrides */ .minimal-dom piece { position: absolute; width: 12.5%; height: 12.5%; } .cg-board-wrap svg { overflow: hidden; position: relative; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; opacity: 0.6; } .cg-board-wrap svg * { transition: 0.3s; } /* lichess */ #lichess { position: relative; min-height: 512px; } div.lichess_game { height: 512px; } div.lichess_game div.lichess_board_wrap { display: table-cell; position: relative; } body.blind_mode .cg-board-wrap { display: none; } div.lichess_game div.lichess_ground { display: table-cell; position: relative; vertical-align: middle; padding-left: 15px; height: 512px; width: 242px; } div.lichess_game div.lichess_ground.for_bot h1 { font-size: 2em; } div.lichess_game div.lichess_ground.for_bot p { margin: 1em 0; } div.lichess_board { position: relative; } /* 2D boards */ .blue .is2d .cg-board, #top div.color_demo.blue { background-image: url(../images/board/blue.png); } .blue2 .is2d .cg-board, #top div.color_demo.blue2 { background-image: url(../images/board/blue2.jpg); } .wood2 .is2d .cg-board, #top div.color_demo.wood2 { background-image: url(../images/board/wood2.jpg); } .wood3 .is2d .cg-board, #top div.color_demo.wood3 { background-image: url(../images/board/wood3.jpg); } .blue3 .is2d .cg-board, #top div.color_demo.blue3 { background-image: url(../images/board/blue3.jpg); } .marble .is2d .cg-board, #top div.color_demo.marble { background-image: url(../images/board/marble.jpg); } .brown .is2d .cg-board, #top div.color_demo.brown { background-image: url(../images/board/brown.png); } .green .is2d .cg-board, #top div.color_demo.green { background-image: url(../images/board/green.png); } .olive .is2d .cg-board, #top div.color_demo.olive { background-image: url(../images/board/olive.jpg); } .purple .is2d .cg-board, #top div.color_demo.purple { background-image: url(../images/board/purple.png); } .grey .is2d .cg-board, #top div.color_demo.grey { background-image: url(../images/board/grey.jpg); } .wood .is2d .cg-board, #top div.color_demo.wood { background-image: url(../images/board/wood-1024.jpg); } .canvas .is2d .cg-board, #top div.color_demo.canvas { background-image: url(../images/board/canvas2-1024.jpg); } .leather .is2d .cg-board, #top div.color_demo.leather { background-image: url(../images/board/leather-1024.jpg); } .metal .is2d .cg-board, #top div.color_demo.metal { background-image: url(../images/board/metal-1024.jpg); } .maple .is2d .cg-board, #top div.color_demo.maple { background-image: url(../images/board/maple.jpg); } .kingOfTheHill .cg-board::before { width: 25%; height: 25%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); content: ''; position: absolute; top: 37.5%; left: 37.5%; } /* Racing Kings board decorations */ .racingKings .cg-board.orientation-white::before { width: 100%; height: 12.5%; box-shadow: inset 0 -2px 10px rgba(0, 0, 0, 0.5); content: ''; position: absolute; top: 0; left: 0; } .racingKings .cg-board.orientation-black::before { width: 100%; height: 12.5%; box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5); content: ''; position: absolute; bottom: 0; left: 0; } .is2d .cg-board-wrap.minimal-dom { background: none; } mono-piece { width: 32px; height: 32px; background-size: cover; display: inline-block; } mono-piece.pawn { background-image: url(../piece/mono/P.svg); } mono-piece.bishop { background-image: url(../piece/mono/B.svg); } mono-piece.knight { background-image: url(../piece/mono/N.svg); } mono-piece.rook { background-image: url(../piece/mono/R.svg); } mono-piece.queen { background-image: url(../piece/mono/Q.svg); } mono-piece.king { background-image: url(../piece/mono/K.svg); } #top piece.cburnett { background-image: url(../piece-src/cburnett/wN.svg); } #top piece.merida { background-image: url(../piece/merida/wN.svg); } #top piece.chess7 { background-image: url(../piece/chess7/wN.svg); } #top piece.spatial { background-image: url(../piece/spatial/wN.svg); } #top piece.alpha { background-image: url(../piece/alpha/wN.svg); } #top piece.pirouetti { background-image: url(../piece-src/pirouetti/wN.svg); } #top piece.reillycraig { background-image: url(../piece/reillycraig/wN.svg); } #top piece.fantasy { background-image: url(../piece/fantasy/wN.svg); } #top piece.shapes { background-image: url(../piece/shapes/wN.svg); } #top piece.chessnut { background-image: url(../piece/chessnut/wN.svg); } #top piece.companion { background-image: url(../piece/companion/wN.svg); } .pirouetti .is2d piece.piece.white { -webkit-filter: drop-shadow(0 0 0.5px #000); } .pirouetti .is2d piece.piece.black { -webkit-filter: drop-shadow(0 0 0.6px #e0e0e0); } .pirouetti .is2d piece.piece.ui-draggable-dragging, .pirouetti .is2d .piece.animating { -webkit-filter: none!important; } body.kappa .cg-board.orientation-white piece.king.white, body.kappa .cg-board.orientation-black piece.king.black { background-image: url(../piece/other/kappa.png); } body.doggy .cg-board.orientation-white piece.pawn.white, body.doggy .cg-board.orientation-black piece.pawn.black { background-image: url(../piece/other/doggy.png); } div.lichess_overboard { position: absolute; z-index: 5010; /* above top menu */ width: 400px; top: 50%; left: 56px; transform: translate(0, -50%); webkit-transform: translate(0, -50%); padding: 15px 0 22px 0; font-size: 14px; line-height: 1.8em; background: #fff; box-shadow: 0 0 95px 25px rgba(0, 0, 0, 0.6); text-align: center; } div.lichess_overboard a.close { float: right; display: block; cursor: pointer; margin-top: -12px; margin-right: 6px; opacity: 0.4; } div.lichess_overboard a.close:hover { opacity: 1; } div.lichess_overboard .loader span { font-size: 50px; line-height: 103px; } div.lichess_overboard p.explanations { margin: 1.5em 10px 0 10px; font-size: 12px; line-height: 1.4em; text-align: center; } div.lichess_overboard .pull-quote { margin-top: 30px; width: 300px; font-size: 0.9em; } div.premove_alert, div.dont_touch { position: absolute; top: 0; left: 0; width: 512px; text-align: center; padding: 5px 0; font-weight: bold; color: #fff; background: #d85000; z-index: 50; } #lichess_id_input { margin-top: 10px; width: 80%; text-align: center; font-size: 1.2em; padding: 1em 0; } .lichess_board_wrap .variant_reminder { position: absolute; top: 0; left: 0; z-index: 5; transition: 0.6s; text-shadow: 7px 10px 2px rgba(0, 0, 0, 0.3); width: 512px; height: 512px; line-height: 512px; text-align: center; } .lichess_board_wrap .variant_reminder::before { font-size: 290px; opacity: 0.9; color: #888; } .lichess_board_wrap .variant_reminder.gone { opacity: 0; transform: translateY(-100px); -webkit-transform: translateY(-100px); } #promotion_choice { position: absolute; top: 0; left: 0; box-sizing: border-box; width: 100%; height: 100%; background: rgba(250, 250, 250, 0.7); text-align: center; z-index: 5; } #promotion_choice square { cursor: pointer; border-radius: 50%; background-color: #b0b0b0; box-shadow: inset 0 0 25px 3px #808080; box-sizing: border-box; transition: 0.2s; } .is2d #promotion_choice piece { transition: 0.2s; transform: scale(0.8); -webkit-transform: scale(0.8); } #promotion_choice square:hover { box-shadow: inset 0 0 48px 8px #d85000; border-radius: 0%; } .is2d #promotion_choice square:hover piece { transform: none; -webkit-transform: none; } div.table_wrap { width: 242px; position: relative; } div.table { border: 1px solid #ccc; height: auto; padding: 10px; } .lichess_ground .replay .moves { border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; margin: 0 -10px 0 -10px; height: 115px; overflow: auto; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .lichess_ground .replay turn { display: block; height: 26px; } .lichess_ground .replay turn > index, .lichess_ground .replay turn > move { display: inline-block; height: 22px; line-height: 22px; } .lichess_ground .replay turn > index { width: 34px; padding: 2px 0; background: #e0e0e0; text-align: center; font-family: 'Roboto'; font-weight: 300; } .lichess_ground .replay turn > move { width: calc(50% - 14px - 13px); font-family: 'ChessSansPiratf', sans-serif; font-size: 17px; padding: 2px 5px; } .lichess_ground .replay move:not(.empty) { cursor: pointer; transition: background-color 0.13s; } .lichess_ground .replay move:not(.empty):hover { background: #e0e0e0; } .lichess_ground .replay move.active { color: #d85000; font-weight: bold; } .lichess_ground .replay .result { font-weight: bold; font-size: 1.3em; padding: 4px 0; text-align: center; } .lichess_ground .replay .status { font-size: 1em; text-align: center; font-style: italic; } .lichess_ground .replay .buttons { text-align: center; margin: 8px 0 5px 0; } .lichess_ground .replay a.button { opacity: 0.9; padding: 4px 7px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; margin-left: -1px; margin-right: -1px; } .lichess_ground .replay a.flip { margin-right: 10px; } .lichess_ground .replay a.analysis { margin-left: 10px; } .lichess_ground .replay a.disabled { cursor: default; } .lichess_ground .replay a.disabled::before { opacity: 0.4; text-shadow: none !important; } .lichess_ground .control.buttons .button { box-sizing: border-box; width: 220px; margin-top: 12px; } .lichess_ground .control.buttons a.fat { font-size: 150%; } .lichess_ground .control.buttons a.replay_and_analyse { margin-bottom: 10px; } .pocket { border-radius: 3px; box-shadow: 0 2px 3px rgba(0,0,0,0.3) inset; width: 100%; height: 56px; background: #888; white-space: nowrap; max-width: 244px; overflow: hidden; } .pocket.top { margin-bottom: 10px; } .pocket.bottom { margin-top: 10px; } .pocket piece { display:inline-block; width: 56px!important; height: 56px!important; position: relative; } .pocket piece:first-child { border-radius: 3px 0 0 3px; } .pocket.crowded piece { width: 48.5px!important; background-position: center; } .pocket.usable piece { cursor: pointer; transition: background-color 0.13s; } .pocket.usable piece:hover { background-color: #999; } .pocket piece::after { content: attr(data-nb); bottom: 0; right: 0; position: absolute; line-height: 14px; padding: 3px 5px 4px 5px; font-weight: bold; border-radius: 2px; font-size: 18px; } div.table.spectator { top: 160px; } div.table_not_started { position: absolute; top: 100px; left: 0; width: 242px; border: none; padding: 0; } div.table .loader { margin: 7px auto; font-size: 4px; } div.table div.username { white-space: nowrap; } div.table div.username:first-child { margin-bottom: 6px; } div.table div.username:last-child { margin-top: 6px; } div.table div.username span.status { display: inline-block; margin-left: 5px; } div.table div.username span.status span { color: #ac524f; } div.table div.username.on-game span.status span { color: #759900; } div.table .message { margin: 20px 0; } div.table .message::before { font-size: 3em; float: left; margin-right: 10px; } div.table .button.strong { padding-top: 1em; padding-bottom: 1em; font-weight: bold; font-size: 1.2em; } div.table_wrap .whos_turn { height: 2em; line-height: 2em; width: 100%; text-align: center; font-weight: bold; } div.table_wrap > .clock { position: relative; } div.table_wrap > .clock .bar { position: absolute; width: 242px; height: 4px; } div.table_wrap > .clock_top .bar { bottom: -4px; } div.table_wrap > .clock_bottom .bar { top: -4px; } div.table_wrap > .clock .bar span { display: block; height: 4px; width: 0; background: #759900; } div.table_wrap > .clock .bar.berserk span { background: #dc322f; } div.table_wrap > .clock > .time { display: inline-block; border: 1px solid #ccc; padding: 0 8px; font-size: 32px; font-family: monospace; } div.table_wrap > .correspondence.clock > .time { font-size: 20px; } div.table_wrap > .clock .time tenths { font-size: 80%; } div.table_wrap > .clock .time huns { font-size: 60%; } div.table_wrap > .clock .time b { font-weight: bold; } div.table_wrap > .clock .time seph { opacity: 0.7; } div.table_wrap > .clock .time sepl { opacity: 0.15; } div.table_wrap > .clock.running .time { background: #fff077; color: #444; } div.table_wrap > .clock.running.emerg .time { background-color: #eFAAAA; color: #444; } div.table_wrap > .clock.outoftime .time { background-color: #eFAAAA; font-weight: bold; color: #444; } div.table_wrap > .clock_top .time { border-bottom: 0; border-radius: 2px 2px 0 0; } div.table_wrap > .clock_bottom .time { border-top: 0; border-radius: 0 0 2px 2px; } div.table_wrap .berserk { display: inline-block; font-size: 17px; margin-left: 5px; line-height: 27px; vertical-align: 2px; } div.table_wrap .berserk.button { line-height: 17px; vertical-align: -3px; } div.table_wrap a.moretime { opacity: 0.4; position: absolute; font-size: 20px; right: 0; top: 2px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } div.table_wrap a.moretime:hover { opacity: 1; } div.table_wrap .tournament_rank { position: absolute; font-size: 20px; right: 0; } div.table_wrap .tournament_rank.top { top: 5px; } div.table_wrap .tournament_rank.bottom { bottom: 5px; } div.table_next { top: 145px; } div.separator { margin: 10px 0; border-bottom: 1px solid #ddd; } div.control { text-align: center; width: 100%; } div.control.icons { margin-top: 5px; } div.control.icons .button { font-size: 16px; height: 34px; padding: 0 10px; margin: 0 3px; } div.control.icons .takeback-yes span:before { display: inline-block; transform: translateY(1px); -webkit-transform: translateY(1px); } div.control.icons .draw-yes span:before { display: inline-block; transform: translateY(-1px) rotate(-90deg); -webkit-transform: rotate(-90deg); } div.control.icons .resign span:before { display: inline-block; transform: translateY(1px); -webkit-transform: translateY(1px); } div.control.icons .resign_confirm { display: inline-block; position: relative; } div.control.icons .resign_confirm .yes { background: #dc322f; color: #fff; } div.control.icons .resign_confirm .no { position: absolute; top: 0; left: 39px; } div.control.buttons .button { display: inline-block; text-align: center; font-weight: bold; padding: 10px 0; } div.control .button.disabled { opacity: 0.5; cursor: not-allowed; } #claim_draw_zone, div.force_resign_zone, div.negotiation { margin: 7px 0; padding: 7px 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } #claim_draw_zone .button, div.negotiation .button, div.force_resign_zone .button { display: inline-block; } div.separator { margin: 10px 0; border-bottom: 1px solid #ddd; } div.current_player { height: 64px; } div.current_player div.player { position: absolute; margin-left: -5px; } div.current_player div.no-square { width: 64px; height: 64px; position: absolute; top: 0; left: 0; } div.current_player div.no-square .loader { margin-top: 5px; font-size: 5.8px; } div.current_player div.player p { height: 64px; line-height: 64px; font-size: 15px; font-weight: bold; color: #888; margin: 0 0 0 64px; } div.table.finished div.player p { line-height: 2em; font-size: 12px; margin-top: 12px; } div.cemetery { height: 32px; line-height: 0; white-space: nowrap; } div.cemetery:first-child { margin-bottom: 5px; } div.cemetery:last-child { margin-bottom: 5px; } div.cemetery tomb { display: inline-block; margin-left: 10px; } div.cemetery mono-piece { margin-left: -10px; } div.berserk_alert { position: absolute; left: 10px; font-size: 45px; color: #D85000; } div.berserk_alert.top { top: 0; } div.berserk_alert.bottom { bottom: 0; } div.under_chat { width: 228px; margin: 10px 0 0 -30px; } @media (max-width: 1070px) { div.under_chat { margin-left: 0; width: 198px; } } div.under_chat .watchtv { display: block; height: 24px; line-height: 24px; text-align: center; margin-top: -24px; } div.under_chat .watchers { margin-top: 25px; opacity: 0.65; transition: 0.13s; height: 10em; overflow: hidden; } div.under_chat .watchers:hover { opacity: 1; } #chat div.top { position: relative; } #chat div.top input.toggle_chat { cursor: pointer; position: absolute; top: 4px; right: 4px; z-index: 1; } #chat .messages { height: 100%; overflow: hidden; overflow-y: auto; word-wrap: break-word; } body.no-select #chat li { -moz-user-select: text; -webkit-user-select: text; } #chat form { position: relative; } #chat form input.lichess_say { border: 0; border-top: 1px solid #ccc; padding: 2px 20px 2px 4px; width: 100%; box-sizing: border-box; } #chat a.send { position: absolute; top: 0; right: 2px; padding-top: 3px; display: block; height: 16px; width: 16px; z-index: 1; opacity: 0.5; } #chat a.send:hover { opacity: 1; } #chat .messages li { padding-left: 3px; line-height: 14px; margin: 0.6em 0 0.6em 3px; } #chat .messages li.system { padding: 2px 0; margin-left: 0; text-align: center; white-space: nowrap; font-style: italic; } #chat span.title { padding-left: 3px; } #chat li span { font-weight: bold; margin-right: 6px; color: #aaa; } #chat a.user_link { padding: 0; color: #aaa; font-weight: bold; } #chat .presets { margin-top: 3px; } #chat .presets button { margin-right: 3px; padding: 3px 5px; } #chat.hidden ol.messages, #chat.hidden form, #chat.hidden .presets { display: none; } div.game_tournament { max-height: 300px; overflow: hidden; } div.game_tournament:hover { overflow-y: auto; } div.game_tournament .clock { text-align: center; font-size: 20px; font-family: monospace; font-weight: bold; margin: 10px 0; } div.game_tournament table.standing { border-bottom: none; } div.game_tournament table.standing tr.me td:first-child { border-left: 10px solid #d59120; padding-left: 5px; } div.game_tournament table.standing td { padding: 0 10px; text-align: left; line-height: 2em; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } div.game_tournament table.standing td.name span { display: inline-block; width: 20px; } div.game_tournament table.standing td.total { text-align: right; } span.inline_userlist { display: inline; color: #9a9a9a; } span.inline_userlist a { color: #aaa; font-weight: bold; } div.underboard .center { display: table-cell; position: relative; width: 512px; text-align: center; padding-top: 15px; } div.underboard .center .crosstable_placeholder { /* prevent crosstable FOUC */ min-height: 81px; } div.underboard .blurs, div.underboard .right { display: table-cell; vertical-align: top; padding-left: 15px; width: 242px; } div.underboard .blurs { position: relative; padding-top: 25px; z-index: 1; } div.underboard a { display: inline-block; }