@font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; src: local('Lato Black'), local('Lato-Black'), url(//fonts.gstatic.com/s/lato/v10/BVtM30trf7q_jfqYeHfjtA.woff) format('woff'); } body, select, input, textarea { font-family: 'Candara', 'Calibri', 'Tahoma', 'Verdana', 'Arial', sans-serif; } body { margin: 0; padding: 0; background: hsl(27, 35%, 50%); cursor: default; } body * { cursor: inherit; } select, input { background: hsl(32, 50%, 90%); border: none; padding: .3vw .7vw; } input[type='text'], input:not([type]), textarea { cursor: text; } a[href] { cursor: pointer; } body#main-page::before { content: 'Backgammon'; position: absolute; top: 0; left: 0; right: 0; text-align: center; font-size: 10vw; color: hsl(32, 50%, 20%); text-shadow: .2vw .2vw .5vw rgba(0,0,0,.2); font-weight: bold; z-index: 1; } #newgame, #waiting-games { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1vw solid hsl(32, 50%, 30%); background: hsl(32, 50%, 70%); box-shadow: .4vw .4vw .5vw rgba(0,0,0,.3); position: absolute; top: 10vw; } #newgame::after, #waiting-games::after { position: absolute; left: 0; top: -5.25vw; font-size: 5vw; color: hsl(32, 50%, 80%); text-shadow: .2vw .2vw .5vw rgba(0, 0, 0, .2); font-weight: bold; } #newgame { width: 58%; border-top-width: 7vw; padding: 2vw 4vw; left: 1%; } #newgame::after { content: 'New game'; } #newgame > .row { text-align: center; margin-bottom: 2vw; } #newgame > .row:last-child { margin-bottom: 0; } #newgame > .row > input { display: none; } #newgame > .row > label, #main > #sidebar > #info > #info-match-playto > .content, #main > #sidebar > #info > #info-match-cube > .content { position: relative; display: inline-block; border-radius: 1vw; box-shadow: .1vw .1vw .1vw rgba(255, 255, 255, .3) inset, -.1vw -.1vw .1vw rgba(0, 0, 0, .2) inset; } #newgame > #newgame-playas > label { vertical-align: top; padding: 1vw; } #newgame > #newgame-playas > label::after { display: block; content: ''; } #newgame > #newgame-playas > label.random::before { content: 'Play as white or black at random.'; width: 11vw; } #newgame > #newgame-playas > label.white::before { content: 'Play as white.'; } #newgame > #newgame-playas > label.black::before { content: 'Play as black.'; } #newgame > .row > input:checked + label, #main > #sidebar > #info > #info-match-playto > .content, #main > #sidebar > #info > #info-match-cube > .content { background-image: linear-gradient(180deg, hsl(32, 50%, 45%), hsl(32, 50%, 55%)); box-shadow: .1vw .1vw .1vw rgba(0, 0, 0, .5) inset, -.1vw -.1vw .1vw rgba(255, 255, 255, .7) inset; } #newgame > #newgame-playto > label, #main > #sidebar > #info > #info-match-playto > .content { font-family: 'Roboto', 'Calibri'; font-size: 3.5vw; padding: .7vw 1.75vw; } #newgame > .row > label { margin-right: 1vw; } #newgame > #newgame-playto > label::before { content: 'Decide how many points to play to. The first player to reach this many points wins the match.'; line-height: 1.2em; } #newgame > #newgame-cube > label, #main > #sidebar > #info > .section > .content { padding: .4vw 1.5vw; font-size: 2vw; } #newgame > #newgame-cube > #newgame-cube-label-None::after { content: '{"text":"None","hint":"Button allowing user to play without the doubling cube."}'; } #newgame > #newgame-cube > #newgame-cube-label-None::before { content: 'No doubling cube in this match.'; } #newgame > #newgame-cube > #newgame-cube-label-Standard::after { content: '{"text":"Standard","hint":"Button allowing user to choose the standard doubling cube rules."}'; } #newgame > #newgame-cube > #newgame-cube-label-Standard::before { content: 'Use the doubling cube in every game of this match.'; } #newgame > #newgame-cube > #newgame-cube-label-Crawford::after { content: 'Crawford'; } #newgame > #newgame-cube > #newgame-cube-label-Crawford::before { content: 'Crawford rule: Use the doubling cube in all games except the first game in which either player has one less than the winning number of points.'; } #newgame > #newgame-visibility > label { padding: .3vw 1.1vw; font-size: 1.5vw; border-radius: .7vw; } #newgame > #newgame-visibility > #newgame-visibility-label-Public::after { content: 'Public'; } #newgame > #newgame-visibility > #newgame-visibility-label-Public::before { content: 'Anyone can join the game.'; } #newgame > #newgame-visibility > #newgame-visibility-label-InviteOnly::after { content: 'Invite only'; } #newgame > #newgame-visibility > #newgame-visibility-label-InviteOnly::before { content: 'Only people you explicitly send the link to can join the game. Public users can only spectate.'; } #newgame > .row > label::before, #waiting-games > li > .doubling-cube::before { width: 15vw; top: 100%; left: -.2vw; margin-top: .2vw; } #newgame > #newgame-playas > label::before { width: 7vw; } #newgame > #newgame-submit { font-size: 2vw; } #newgame > #newgame-submit > #newgame-submit-btn::before { content: 'Start a new game'; } #waiting-games { width: 39%; border-top-width: 7vw; margin: 0; padding: 0; right: 1%; } #waiting-games::after { content: 'Join a game'; } #waiting-games.connecting::after { content: 'Connecting...'; } #waiting-games:empty::before { color: hsl(32, 50%, 30%); content: '{"text":"No games waiting!{newline}Start a game of your own :)","hint":"Leave “{newline}” in English. A newline will be inserted there.","newline":"\'\\\\A \'"}'; display: block; font-size: 2vw; padding: 2vw 3vw; text-align: center; white-space: pre-wrap; } #waiting-games.loading:empty::before { content: 'Loading...'; } #waiting-games > li { list-style: none; padding: .5vw 1vw; cursor: pointer; position: relative; } #waiting-games > li:hover { background: hsl(32, 70%, 80%); } #waiting-games > li > .piece { float: left; position: relative; } #waiting-games > li > .piece::before { top: 100%; left: -.2vw; margin-top: .5vw; white-space: nowrap; } #waiting-games > li > .playto { float: right; font-family: 'Roboto', 'Calibri'; font-size: 3.5vw; position: relative; } #waiting-games > li > .doubling-cube { position: absolute; left: 50%; top: 50%; font-size: 2vw; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #waiting-games > li > .doubling-cube.None::after, #main > #sidebar > #info > .section.None > .content::after { content: 'no doubling cube'; } #waiting-games > li > .doubling-cube.None::before, #main > #sidebar > #info > .section.None > .content::before { content: 'This match is played without the doubling cube.'; } #waiting-games > li > .doubling-cube.Standard::after, #main > #sidebar > #info > .section.Standard > .content::after { content: 'standard doubling cube'; } #waiting-games > li > .doubling-cube.Standard::before, #main > #sidebar > #info > .section.Standard > .content::before { content: 'Every game of this match is played with the doubling cube.'; } #waiting-games > li > .doubling-cube.Crawford::after, #main > #sidebar > #info > .section.Crawford > .content::after { content: 'Crawford rule'; } #waiting-games > li > .doubling-cube.Crawford::before, #main > #sidebar > #info > .section.Crawford > .content::before { content: 'Crawford rule: The doubling cube is used in all games except the first game in which either player has one less than the winning number of points.'; } #waiting-games > li > .playto::before { font-family: 'Candara', 'Calibri', 'Tahoma', 'Verdana', 'Arial', sans-serif; content: 'The number of points to play to. The first player to reach this many points wins the match.'; width: 15vw; top: 100%; right: -.2vw; margin-top: -.2vw; } #waiting-games > li > .piece.white::before { content: 'You will be playing white.'; } #waiting-games > li > .piece.black::before { content: 'You will be playing black.'; } #waiting-games > li > .piece.random::before { content: 'You will play white or black at random.'; } #waiting-games > li::after { content: ''; display: block; clear: both; } #legal { position: absolute; bottom: 0; right: 0; padding: 0 .5em .2em 0; opacity: .6; text-align: right; } #legal > a { color: black; text-decoration: none; } #main { position: absolute; background: hsl(32, 50%, 30%); left: 0; top: 0; width: 100vw; height: 68vw; box-shadow: .6vw .6vw 1vw rgba(0,0,0,.5); } #main > *, #main > *:not(.dialog) > * { position: absolute; } #main > #board { left: 2vw; top: 10vw; width: 98vw; height: 58vw; } #main > #board > .overlay { background: hsl(32, 50%, 30%); } #main > #board > .overlay#overlay-bottom { top: 56vw; left: 0; width: 96vw; height: 2vw; } #main > #board > .overlay#overlay-right { top: 0; right: 0; width: 2vw; height: 58vw; } #main > #board > .background { background: hsl(32, 50%, 70%); } #main > #board > .shadow { box-shadow: .3vw .3vw .5vw rgba(0, 0, 0, .3) inset; pointer-events: none; } #main > #board > .main-area { width: 42vw; height: 56vw; top: 0; } #main > #board > .main-area.left { left: 0; } #main > #board > .main-area.right { right: 10vw; } #main > #board > .home { width: 6vw; height: 27vw; left: 90vw; } #main > #board > .home.white { top: 0; } #main > #board > .home.black { bottom: 2vw; } #main > #board > .home.selectable { background: hsla(110,70%,70%,.5); } #main > #board > .tongue { width: 0; height: 0; border: none; border-left: 3.5vw solid transparent !important; border-right: 3.5vw solid transparent !important; /* Firefox-specific fix for smooth anti-aliased triangles */ -moz-transform: scale(1.0001); } #main > #board > .tongue.top { top: 0; border-top-width: 25vw; border-top-style: solid; } #main > #board > .tongue.bottom { bottom: 2vw; border-bottom-width: 25vw; border-bottom-style: solid; } #main > #board > .tongue.dark:not(.selectable) { border-color: hsl(27.1, 33.3%, 54.9%); } #main > #board > .tongue.light:not(.selectable) { border-color: hsl(36.6, 66.7%, 82.5%); } #main > #board > .tongue.selectable { border-color: hsla(110,70%,70%,.7); } #main > #board > .tongue-0, #main > #board > .tongue-23 { left: 81vw; } #main > #board > .tongue-1, #main > #board > .tongue-22 { left: 74vw; } #main > #board > .tongue-2, #main > #board > .tongue-21 { left: 67vw; } #main > #board > .tongue-3, #main > #board > .tongue-20 { left: 60vw; } #main > #board > .tongue-4, #main > #board > .tongue-19 { left: 53vw; } #main > #board > .tongue-5, #main > #board > .tongue-18 { left: 46vw; } #main > #board > .tongue-6, #main > #board > .tongue-17 { left: 35vw; } #main > #board > .tongue-7, #main > #board > .tongue-16 { left: 28vw; } #main > #board > .tongue-8, #main > #board > .tongue-15 { left: 21vw; } #main > #board > .tongue-9, #main > #board > .tongue-14 { left: 14vw; } #main > #board > .tongue-10, #main > #board > .tongue-13 { left: 7vw; } #main > #board > .tongue-11, #main > #board > .tongue-12 { left: 0; } #main > #board > .automove { border-bottom: 2.5vw solid hsla(110,70%,70%,.6); border-left: 1.5vw solid transparent; border-right: 1.5vw solid transparent; width: 0; height: 0; display: none; margin-left: 2vw; } #main > #board > .automove.home { margin-left: 1.5vw; } #main > #board > .automove.prison { left: 42.25vw; } #main > #board > .automove.top, #main > #board > .automove.white.home, #main > #board > .automove.black.prison { border-top: 2.5vw solid hsla(110,70%,70%,.6); border-bottom: none; } #main > #board > .automove.top.target, #main > #board > .automove.white.home.target { top: -1.5vw; } #main > #board > .automove.bottom.target, #main > #board > .automove.black.home.target { bottom: .5vw; } #main > #board > .automove.top.source { margin-top: 5.5vw; } #main > #board > .automove.bottom.source { margin-top: -3vw; } #main > #board > .percentage { font-family: 'Roboto', 'Calibri'; font-size: 1vw; margin-left: 3.5vw; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); color: white; opacity: .3; display: none; pointer-events: none; } #main > #board > .percentage.top { top: -1.5vw; } #main > #board > .percentage.bottom { bottom: .5vw; } body.hash-percentages > #main.player-white.state-White.state-ToMove > #board > .percentage, body.hash-percentages > #main.player-black.state-Black.state-ToMove > #board > .percentage { display: block; } /* Pieces */ #main > #board > .piece, #main > #win > .piece, #main > #joinable > form > #join::before, #main > #infobar > .infobox > .piece, #main > #infobar > .infobox > .infobox-inner > .piece, #main > #sidebar > #chat > #chat-msgs-outer > #chat-msgs > .chat-msg::before, #main > #sidebar > #info > #info-match-history > .row > .piece, #main > #sidebar > #info > #info-game-history > .move::after, #main > #sidebar > #info > #info-game-history > .totals > .dice-total, #newgame > #newgame-playas > label::after, #waiting-games > li > .piece { width: 5vw; height: 5vw; border-radius: 100%; } #main > #board > .piece.white, #main.state-Black.state-Waiting > #joinable > form > #join::before, #main.state-White.state-Won > #win > .piece, #main.player-white > #infobar > #info-player > .piece, #main.state-White > #infobar > #info-state > .piece, #main > #infobar > .infobox > .infobox-white > .piece, #main > #sidebar > #chat > #chat-msgs-outer > #chat-msgs > .chat-msg.White::before, #main > #sidebar > #info > #info-match-history > .row > .piece.white, #main > #sidebar > #info > #info-game-history > .move.white::after, #main > #sidebar > #info > #info-game-history > .totals > .white, #newgame > #newgame-playas > label.white::after, #waiting-games > li > .piece.white { background-image: linear-gradient(135deg, hsl(32, 50%, 90%), hsl(32, 50%, 100%)); box-shadow: .2vw .2vw .1vw hsl(32, 50%, 100%) inset, -.2vw -.2vw .1vw hsl(32, 50%, 90%) inset, .3vw .3vw .5vw rgba(0, 0, 0, .3); } #main > #board > .piece.white.selected { background-image: linear-gradient(135deg, hsl(0, 100%, 85%), hsl(0, 100%, 90%)); box-shadow: .2vw .2vw .1vw hsl(0, 100%, 90%) inset, -.2vw -.2vw .1vw hsl(0, 100%, 85%) inset, .3vw .3vw .5vw rgba(0, 0, 0, .3); } #main > #board > .piece.black, #main.state-White.state-Waiting > #joinable > form > #join::before, #main.state-Black.state-Won > #win > .piece, #main.player-black > #infobar > #info-player > .piece, #main.state-Black > #infobar > #info-state > .piece, #main > #infobar > .infobox > .infobox-black > .piece, #main > #sidebar > #chat > #chat-msgs-outer > #chat-msgs > .chat-msg.Black::before, #main > #sidebar > #info > #info-match-history > .row > .piece.black, #main > #sidebar > #info > #info-game-history > .move.black::after, #main > #sidebar > #info > #info-game-history > .totals > .black, #newgame > #newgame-playas > label.black::after, #waiting-games > li > .piece.black { background-image: linear-gradient(135deg, hsl(32, 50%, 5%), hsl(32, 50%, 15%)); box-shadow: .2vw .2vw .1vw hsl(32, 50%, 15%) inset, -.2vw -.2vw .1vw hsl(32, 50%, 5%) inset, .3vw .3vw .5vw rgba(0, 0, 0, .3); } #main > #board > .piece.black.selected { background-image: linear-gradient(135deg, hsl(0, 100%, 20%), hsl(0, 100%, 30%)); box-shadow: .2vw .2vw .1vw hsl(0, 100%, 30%) inset, -.2vw -.2vw .1vw hsl(0, 100%, 20%) inset, .3vw .3vw .5vw rgba(0, 0, 0, .3); } #main.state-Random > #joinable > form > #join::before, #main.player-random > #infobar > #info-player > .piece, #main.state-Random.state-Waiting > #infobar > #info-state > .piece, #newgame > #newgame-playas > label.random::after, #waiting-games > li > .piece.random { box-shadow: .2vw .2vw .1vw hsl(32, 50%, 70%) inset, -.2vw -.2vw .1vw hsl(32, 50%, 60%) inset, .3vw .3vw .5vw rgba(0, 0, 0, .3); background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="583" height="1000"><path style="fill:hsl(32, 50%, 10%)" d="M 303 34 C 300 34 297 34 294 34 L 294 169 C 295 169 296 169 298 169 331 169 358 180 379 201 399 222 410 249 410 281 410 313 400 340 380 361 L 294 448 294 680 366 680 366 621 C 366 587 373 560 389 541 395 534 403 525 413 515 423 505 435 494 449 480 464 467 475 456 484 447 492 438 505 424 521 403 550 368 564 325 564 273 564 198 540 139 491 97 443 55 380 34 303 34 z M 294 776 294 968 C 294 968 294 968 295 968 322 968 345 958 365 939 384 920 394 898 394 871 394 845 384 822 364 804 344 785 321 776 294 776 z"/><path style="fill:hsl(32, 50%, 90%)" d="M 294 34 C 221 36 160 58 110 100 59 143 29 204 20 281 L 177 281 C 181 247 193 220 215 200 237 180 263 170 294 169 L 294 34 z M 294 448 285 456 C 257 484 239 506 231 523 223 540 219 566 219 600 L 219 680 294 680 294 448 z M 293 776 C 266 776 243 785 223 804 204 823 194 846 194 873 194 899 204 921 224 940 244 958 267 968 294 968 L 294 776 C 294 776 293 776 293 776 z"/></svg>'),linear-gradient(135deg, hsl(32, 50%, 60%), hsl(32, 50%, 70%)); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } #main > #board > .piece.selectable::before { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: hsl(110, 50%, 50%); border-radius: 100%; content: ''; opacity: .3; -moz-animation: selectable-blink 1s ease-in-out 0s infinite alternate; -o-animation: selectable-blink 1s ease-in-out 0s infinite alternate; -webkit-animation: selectable-blink 1s ease-in-out 0s infinite alternate; animation: selectable-blink 1s ease-in-out 0s infinite alternate; } #main > #board > .piece.selectable.selected::before { display: none; } #main > #board > .piece.hypo-target { opacity: .5; -moz-animation: hypo-blink 1s ease-in-out 0s infinite alternate; -o-animation: hypo-blink 1s ease-in-out 0s infinite alternate; -webkit-animation: hypo-blink 1s ease-in-out 0s infinite alternate; animation: hypo-blink 1s ease-in-out 0s infinite alternate; pointer-events: none; } #main.player-white.state-White.state-ToMove > #board > .piece.white, #main.player-black.state-Black.state-ToMove > #board > .piece.black, #main > #board > .automove { cursor: pointer; } #main.dice-start.white-starts:not(.viewing-history) > #board > #dice-0::before, #main.dice-start.white-starts:not(.viewing-history) > #board > #dice-0::after, #main.viewing-history.history-dice-start.history-white > #board > #dice-0::before, #main.viewing-history.history-dice-start.history-white > #board > #dice-0::after { position: absolute; color: hsl(32, 50%, 95%); padding-right: .6vw; right: 100%; } #main.dice-start.black-starts:not(.viewing-history) > #board > #dice-1::before, #main.dice-start.black-starts:not(.viewing-history) > #board > #dice-1::after, #main.viewing-history.history-dice-start.history-black > #board > #dice-1::before, #main.viewing-history.history-dice-start.history-black > #board > #dice-1::after { position: absolute; color: hsl(32, 50%, 10%); padding-left: .6vw; left: 100%; } #main.dice-start:not(.viewing-history) > #board > .dice::before, #main.dice-start:not(.viewing-history) > #board > .dice::after, #main.viewing-history.history-dice-start > #board > .dice::before, #main.viewing-history.history-dice-start > #board > .dice::after { font-family: 'Lato'; text-transform: uppercase; white-space: nowrap; pointer-events: none; font-size: 2.2vw; } #main.dice-start.white-starts:not(.viewing-history) > #board > #dice-0::before, #main.viewing-history.history-dice-start.history-white > #board > #dice-0::before { content: 'white'; top: .4vw; } #main.dice-start.black-starts:not(.viewing-history) > #board > #dice-1::before, #main.viewing-history.history-dice-start.history-black > #board > #dice-1::before { content: 'black'; top: .4vw; } #main.dice-start.white-starts:not(.viewing-history) > #board > #dice-0::after, #main.dice-start.black-starts:not(.viewing-history) > #board > #dice-1::after, #main.viewing-history.history-dice-start.history-white > #board > #dice-0::after, #main.viewing-history.history-dice-start.history-black > #board > #dice-1::after { font-size: 1.3vw; bottom: .4vw; content: 'starts'; } #main > #board > .dice { left: 61vw; top: 25.5vw; opacity: 0; } #main.state-ToMove.dice-2:not(.resigning):not(.viewing-history) > #board > #dice-0, #main.state-ToMove.dice-2:not(.resigning):not(.viewing-history) > #board > #dice-1, #main.state-ToMove.dice-4:not(.resigning):not(.viewing-history) > #board > .dice { opacity: .5; } #main.dice-2:not(.viewing-history) > #board > #dice-1, #main.dice-4:not(.viewing-history) > #board > #dice-2, #main.viewing-history.history-dice-2 > #board > #dice-1, #main.viewing-history.history-dice-4 > #board > #dice-2 { left: 68vw; } #main.dice-4:not(.viewing-history) > #board > #dice-0, #main.viewing-history.history-dice-4 > #board > #dice-0 { left: 54vw; } #main.dice-4:not(.viewing-history) > #board > #dice-3, #main.viewing-history.history-dice-4 > #board > #dice-3 { left: 75vw; } #main.player-white.state-White.state-ToMove.dice-2:not(.resigning):not(.viewing-history) > #board > #dice-0, #main.player-white.state-White.state-ToMove.dice-2:not(.resigning):not(.viewing-history) > #board > #dice-1, #main.player-white.state-White.state-ToMove.dice-4:not(.resigning):not(.viewing-history) > #board > .dice, #main.player-black.state-Black.state-ToMove.dice-2:not(.resigning):not(.viewing-history) > #board > #dice-0, #main.player-black.state-Black.state-ToMove.dice-2:not(.resigning):not(.viewing-history) > #board > #dice-1, #main.player-black.state-Black.state-ToMove.dice-4:not(.resigning):not(.viewing-history) > #board > .dice, #main.viewing-history.history-dice-2 > #board > #dice-0, #main.viewing-history.history-dice-2 > #board > #dice-1, #main.viewing-history.history-dice-4 > #board > .dice, #main.viewing-history.history-dice-2 > #board > #dice-0, #main.viewing-history.history-dice-2 > #board > #dice-1, #main.viewing-history.history-dice-4 > #board > .dice { opacity: 1; } #main > #board > #cube, #main > #sidebar > #info > #info-game-history > .row > .cube { position: absolute; background-image: linear-gradient(135deg, #e8e8e8, #f0f0f0); border-radius: .5vw; width: 4.8vw; height: 4.8vw; box-shadow: .2vw .2vw .05vw white inset, -.2vw -.2vw .05vw #ccc inset, .3vw .3vw .5vw rgba(0, 0, 0, .3); } #main > #board > #cube { left: 41.6vw; top: 25.6vw; } #main > #board > #cube > #cube-text, #main > #sidebar > #info > #info-game-history > .row > .cube > .cube-text { position: absolute; left: 50%; top: 50%; font-family: 'Roboto', 'Calibri'; font-size: 3.5vw; color: #222; text-shadow: .075vw .075vw 0 white; -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } #main.no-cube > #board > #cube { display: none; } #main.cube-white:not(.viewing-history) > #board > #cube, #main.viewing-history.history-cube-white > #board > #cube { top: 2.3vw; } #main.cube-black:not(.viewing-history) > #board > #cube, #main.viewing-history.history-cube-black > #board > #cube { top: 48.9vw; } #main > #board > .arrow { pointer-events: none; height: 2.5vw; background: hsla(60, 70%, 60%, 0.7); } #main > #board > .arrow::before { position: absolute; left: 100%; top: -1.25vw; width: 0; height: 0; border: 2.5vw solid transparent; border-left: 4vw solid hsla(60, 70%, 60%, 0.7); content: ''; } #main > #board > button { height: 4vw; top: 26vw; width: 11vw; visibility: hidden; opacity: 0; -moz-transition: opacity ease-in-out .2s; -o-transition: opacity ease-in-out .2s; -webkit-transition: opacity ease-in-out .2s; transition: opacity ease-in-out .2s; padding: 0; } #main > #board > button#leave-history { width: 25vw; } #main > #board > #undo { font-size: 2vw; left: 22vw; } #main > #board > #undo::before { content: '{"text":"Undo","hint":"Button during game allowing the player to undo a move."}'; } #main > #board > #accept, #main > #board > #commit, #main > #board > #leave-history { font-size: 1.8vw; left: 9vw; } #main > #board > #commit::before { content: '{"text":"Commit","hint":"Button during game that submits a move."}'; } #main > #board > #accept::before { content: '{"text":"Double","hint":"Button allowing player to accept a doubling offered to them."}'; } #main > #board > #leave-history::before { content: '{"text":"Double","hint":"Button shown while browsing game history that allows the player to return to the game in progress."}'; } #main > #board > #decline { font-size: 1.8vw; left: 22vw; } #main > #board > #decline::before { content: '{"text":"Resign","hint":"Button allowing player to decline a doubling, thus resigning the game."}'; } #main > #board > #roll, #main > #board > #resign-confirm { font-size: 2vw; left: 55vw; } #main > #board > #roll::before { content: 'Roll'; } #main > #board > #resign-confirm::before { content: '{"text":"Resign","hint":"Button shown after player chose to resign allowing them to confirm that they really want to resign the game."}'; } #main > #board > #double { font-size: 1.8vw; left: 68vw; } #main > #board > #double::before { content: '{"text":"Double","hint":"Button shown during game allowing the player to offer a doubling to the opponent."}'; } #main > #board > #resign-cancel { font-size: 2vw; left: 68vw; } #main > #board > #resign-cancel::before { content: '{"text":"Cancel","hint":"Button shown after player chose to resign allowing them to cancel their resignation."}'; } #main.state-ToRoll:not(.resigning):not(.viewing-history) > #board > #roll, #main.state-ToRoll:not(.resigning):not(.viewing-history) > #board > #double, #main.state-ToConfirmDouble:not(.resigning):not(.viewing-history) > #board > #accept, #main.state-ToConfirmDouble:not(.resigning):not(.viewing-history) > #board > #decline { opacity: .5; visibility: visible; pointer-events: none; } #main.undoable:not(.resigning):not(.viewing-history) > #board > #undo, #main.committable:not(.resigning):not(.viewing-history) > #board > #commit, #main.player-white.state-White.state-ToRoll:not(.resigning):not(.viewing-history) > #board > #roll, #main.player-black.state-Black.state-ToRoll:not(.resigning):not(.viewing-history) > #board > #roll, #main.player-white.state-White.state-ToRoll:not(.resigning):not(.viewing-history) > #board > #double, #main.player-black.state-Black.state-ToRoll:not(.resigning):not(.viewing-history) > #board > #double, #main.player-white.state-White.state-ToConfirmDouble:not(.resigning):not(.viewing-history) > #board > #accept, #main.player-black.state-Black.state-ToConfirmDouble:not(.resigning):not(.viewing-history) > #board > #accept, #main.player-white.state-White.state-ToConfirmDouble:not(.resigning):not(.viewing-history) > #board > #decline, #main.player-black.state-Black.state-ToConfirmDouble:not(.resigning):not(.viewing-history) > #board > #decline, #main.resigning:not(.viewing-history) > #board > #resign-confirm, #main.resigning:not(.viewing-history) > #board > #resign-cancel, #main.viewing-history:not(.viewing-history-hover) > #board > #leave-history { opacity: 1; visibility: visible; pointer-events: all; } #main > #board > #info-line { pointer-events: none; opacity: 0; -moz-transition: opacity ease-in-out .5s, transform linear 2s; -o-transition: opacity ease-in-out .5s, transform linear 2s; -webkit-transition: opacity ease-in-out .5s, transform linear 2s; transition: opacity ease-in-out .5s, transform linear 2s; position: absolute; left: 0vw; top: 28vw; width: 42vw; text-align: center; font-size: 5vw; font-weight: bold; font-style: italic; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); color: hsl(32, 50%, 20%); text-shadow: .1vw .1vw .1vw hsl(32, 50%, 80%); } #main.auto-0:not(.viewing-history) > #board > #info-line, #main.auto-1:not(.viewing-history) > #board > #info-line, #main.resigning:not(.viewing-history) > #board > #info-line { opacity: 1; -moz-transform: translateY(-50%) scale(1.5); -ms-transform: translateY(-50%) scale(1.5); -o-transform: translateY(-50%) scale(1.5); -webkit-transform: translateY(-50%) scale(1.5); transform: translateY(-50%) scale(1.5); } #main.auto-0 > #board > #info-line::before { content: 'No moves'; } #main.auto-1 > #board > #info-line::before { content: 'Forced move'; } #main.resigning > #board > #info-line::before { content: 'Resign?'; } #main.state-ToConfirmDouble:not(.viewing-history) > #board > #info-line { left: 47vw; opacity: 1; } #main.state-ToConfirmDouble:not(.viewing-history) > #board > #info-line::before { content: 'Double?'; } #main > #connecting { position: absolute; color: hsl(0, 100%, 75%); font-size: 1vw; font-weight: bold; top: 8.3vw; right: 10vw; display: none; } #main > #connecting::before { content: 'Reconnecting...'; } #main.connecting > #connecting { display: block; } #main > .dialog { opacity: 0; visibility: hidden; top: 36vw; left: 15vw; width: 60vw; box-sizing: border-box; border: .7vw solid hsl(32, 50%, 20%); background: hsl(32, 50%, 70%); padding: 0 3vw; box-shadow: .3vw .3vw .5vw rgba(0, 0, 0, .3); color: hsl(32, 50%, 30%); -moz-transform: translateY(-50%) scale(.5); -ms-transform: translateY(-50%) scale(.5); -o-transform: translateY(-50%) scale(.5); -webkit-transform: translateY(-50%) scale(.5); transform: translateY(-50%) scale(.5); -moz-transition: transform 1s ease-out, opacity 1s ease-in-out; -o-transition: transform 1s ease-out, opacity 1s ease-in-out; -webkit-transition: transform 1s ease-out, opacity 1s ease-in-out; transition: transform 1s ease-out, opacity 1s ease-in-out; } #main > .dialog > p, #main > .dialog > form { text-align: center; font-size: 1.8vw; margin: 2vw 0; } #main > .dialog > p.link, #main > .dialog > form { background: hsl(32, 50%, 90%); padding: 1vw 0; font-weight: bold; } #main > .dialog > p.link { font-family: monospace; } #main > #win > .win { margin: 3vw 0; } #main > #win > .win::before { display: block; background: hsl(32, 50%, 90%); padding: .2vw 0; font-size: 5vw; } #main > #win > .win::after { display: block; padding: .2vw 0 0; margin-bottom: -1.25vw; font-size: 2vw; } #main > #win > .piece { position: absolute; top: 3.7vw; left: 4.2vw; } #main > #win > .points { position: absolute; right: 4vw; text-align: right; top: 3.25vw; } #main > #win > .points > .number { font-family: 'Roboto', 'Calibri'; font-size: 4vw; line-height: 4vw; margin: 0; } #main > #win > .points > .word { font-size: 1.5vw; line-height: 1.5vw; margin: 0; } #main > #win > .points.singular > .word::before { content: 'point'; } #main > #win > .points.plural > .word::before { content: 'points'; } #main > #win > #next-game > button { display: none; margin-right: 1vw; } #main > #win > #next-game > button#goto-next-game::before { content: 'Go to next game'; } #main > #win > #next-game > button#offer-rematch::before { content: 'Offer a rematch'; } #main > #win > #next-game > button#accept-rematch::before { content: 'Accept'; } #main > #win > #next-game > button#cancel-rematch::before { content: 'Cancel'; } #main > #joinable > form > #join::before { position: absolute; content: ''; top: 50%; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } #main > #joinable > form > #join::after { padding-left: 6vw; } #main.state-Black > #joinable > form > #join::after { content: 'Join as White'; } #main.state-White > #joinable > form > #join::after { content: 'Join as Black'; } #main.state-Random > #joinable > form > #join::after { content: 'Join (random color)'; } #main.state-White.state-Waiting.player-white > #waiting, #main.state-Black.state-Waiting.player-black > #waiting, #main.state-Random.state-Waiting.player-random > #waiting, #main.state-Waiting.spectating > #joinable, #main.state-Won:not(.viewing-history) > #win { opacity: 1; visibility: visible; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } #main.has-next-game > #win > #next-game > button#goto-next-game, #main.rematch-White.player-black > #win > #next-game > button#accept-rematch, #main.rematch-Black.player-white > #win > #next-game > button#accept-rematch, #main.rematch-White.player-black > #win > #next-game > button#cancel-rematch, #main.rematch-Black.player-white > #win > #next-game > button#cancel-rematch, #main.end-of-match:not(.rematch-White):not(.rematch-Black):not(.rematch-WhiteDeclined):not(.rematch-BlackDeclined):not(.rematch-Accepted):not(.spectating) > #win > #next-game > button#offer-rematch, #main:not(.in-match):not(.rematch-White):not(.rematch-Black):not(.rematch-WhiteDeclined):not(.rematch-BlackDeclined):not(.rematch-Accepted):not(.spectating) > #win > #next-game > button#offer-rematch, #main.rematch-WhiteDeclined.player-white > #win > #next-game > button#offer-rematch, #main.rematch-BlackDeclined.player-black > #win > #next-game > button#offer-rematch { display: inline; } #main.rematch-White > #win > #next-game > #next-game-text, #main.rematch-Black > #win > #next-game > #next-game-text, #main.rematch-Accepted > #win > #next-game > #next-game-text { margin-right: 1.5vw; } #main.rematch-White:not(.player-white) > #win > #next-game > #next-game-text::before { content: 'White is offering a rematch.'; } #main.rematch-Black:not(.player-black) > #win > #next-game > #next-game-text::before { content: 'Black is offering a rematch.'; } #main.rematch-White.player-white > #win > #next-game > #next-game-text::before, #main.rematch-Black.player-black > #win > #next-game > #next-game-text::before { content: 'Rematch offer sent.'; } #main.rematch-Accepted > #win > #next-game > #next-game-text::before { content: 'Rematch is on.'; } #main.rematch-WhiteDeclined:not(.player-white) > #win > #next-game > #next-game-text::before { content: 'White refuses a rematch.'; } #main.rematch-BlackDeclined:not(.player-black) > #win > #next-game > #next-game-text::before { content: 'Black refuses a rematch.'; } #main > #waiting > #send-this-link::before { content: 'Send the following link to your friend to allow them to join the game:'; } #main > #waiting > #game-will-begin::before { content: 'The game will begin when the other player joins the game.'; } #main > #joinable > #player-waiting::before { content: 'The player is waiting for an opponent to play with.'; } #main.state-Won.state-White > #win > .win::before { content: 'White wins'; } #main.state-Won.state-White.end-of-match > #win > .win::before { content: 'White is victorious'; } #main.state-Won.state-Black > #win > .win::before { content: 'Black wins'; } #main.state-Won.state-Black.end-of-match > #win > .win::before { content: 'Black is victorious'; } #main.state-White.state-DeclinedDouble > #win > .win::after { content: 'Black declined a double.'; } #main.state-Black.state-DeclinedDouble > #win > .win::after { content: 'White declined a double.'; } #main.state-White.state-Resignation > #win > .win::after { content: 'Black resigned.'; } #main.state-Black.state-Resignation > #win > .win::after { content: 'White resigned.'; } #main > #infobar { height: 6vw; left: 2vw; top: 2vw; width: 96vw; } #main > #infobar > .infobox { background: hsl(32, 50%, 70%); position: absolute; top: 0; height: 6vw; } #main > #infobar > .infobox > .piece, #main > #infobar > .infobox > .infobox-inner > .piece { position: absolute; top: .5vw; } #main > #infobar > .infobox#info-player > .piece, #main > #infobar > .infobox#info-state > .piece { left: .9vw; } #main > #infobar > .infobox > .infobox-inner { position: absolute; top: 0; bottom: 0; width: 15vw; overflow: hidden; } #main > #infobar > .infobox > .infobox-inner.infobox-white { left: 0; } #main > #infobar > .infobox > .infobox-inner.infobox-white > .piece { right: -2.5vw; } #main > #infobar > .infobox > .infobox-inner.infobox-black { right: 0; } #main > #infobar > .infobox > .infobox-inner.infobox-black > .piece { left: -2.5vw; } #main > #infobar > #info-player::before, #main > #infobar > #info-player::after, #main > #infobar > #info-state::before, #main > #infobar > #info-state::after, #main > #infobar > .infobox > .infobox-inner > .number { position: absolute; color: hsl(32, 50%, 30%); font-family: 'Lato'; text-transform: uppercase; white-space: pre; transform-origin: 0 0; } #main > #infobar > #info-player::before { top: .5vw; } #main > #infobar > #info-player::after { bottom: .5vw; } #main > #infobar > #info-state::before { left: 7vw; top: .5vw; font-size: 3.4vw; line-height: 3.4vw; } #main > #infobar > #info-state::after { left: 7vw; bottom: .5vw; font-size: 1.3vw; line-height: 1.3vw; transform-origin: 0 0; } #main > #infobar > .infobox > .infobox-inner > .number { top: 3vw; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 4vw; line-height: 4vw; text-shadow: .3vw .3vw .5vw rgba(0, 0, 0, .3); } #main > #infobar > .infobox > .infobox-inner::after { text-transform: uppercase; position: absolute; top: 3vw; font-family: 'Lato'; } #main > #infobar > .infobox > .infobox-white::after { right: 0; -moz-transform: translateX(50%) translateY(-50%); -ms-transform: translateX(50%) translateY(-50%); -o-transform: translateX(50%) translateY(-50%); -webkit-transform: translateX(50%) translateY(-50%); transform: translateX(50%) translateY(-50%); color: hsl(32, 50%, 10%); } #main > #infobar > .infobox > .infobox-black::after { left: 0; -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); color: hsl(32, 50%, 95%); } #main > #infobar > .infobox > .infobox-white > .number { right: 3.5vw; color: hsl(32, 50%, 95%); } #main > #infobar > .infobox > .infobox-black > .number { left: 3.5vw; color: hsl(32, 50%, 10%); } #main > #infobar > .infobox#info-player { left: 0; width: 27vw; } #main > #infobar > .infobox#info-state { left: 29vw; width: 27vw; } #main > #infobar > .infobox#info-pips { left: 58vw; width: 30vw; } #main > #infobar > .infobox#info-match-score { left: 90vw; width: 30vw; } #main.in-match > #infobar > .infobox#info-player { left: 0; width: 19vw; } #main.in-match > #infobar > .infobox#info-state { left: 21vw; width: 19vw; } #main.in-match > #infobar > .infobox#info-pips { left: 42vw; width: 22vw; } #main.in-match > #infobar > .infobox#info-match-score { left: 66vw; width: 22vw; } #main.in-match > #infobar > .infobox > .infobox-inner { width: 11vw; } #main.spectating > #infobar > #info-player::before, #main.spectating > #infobar > #info-player::after { font-size: 2.4vw; line-height: 2.4vw; left: 50%; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); } #main:not(.spectating) > #infobar > #info-player::before { content: 'You are playing'; left: 7vw; font-size: 1.3vw; line-height: 1.3vw; transform-origin: 0 0; } #main:not(.spectating) > #infobar > #info-player::after { left: 7vw; font-size: 3.4vw; line-height: 3.4vw; transform-origin: 0 0; } #main.player-white > #infobar > #info-player::after { content: 'white'; } #main.player-black > #infobar > #info-player::after { content: 'black'; } #main.player-random > #infobar > #info-player::after { content: '?'; } #main.spectating > #infobar > #info-player > .piece { display: none; } #main.spectating > #infobar > #info-player::before { content: 'You are'; } #main.spectating > #infobar > #info-player::after { content: 'spectating'; } #main.state-White > #infobar > #info-state::before { content: 'White'; } #main.state-Black > #infobar > #info-state::before { content: 'Black'; } #main.state-Random > #infobar > #info-state::before { content: '?'; } #main.state-Waiting > #infobar > #info-state::after { content: 'waiting'; } #main.state-ToRoll > #infobar > #info-state::after { content: 'to roll'; } #main.state-ToConfirmDouble > #infobar > #info-state::after { content: 'to confirm'; } #main.state-ToMove > #infobar > #info-state::after { content: 'to play'; } #main.state-White.state-ToMove:not(.online-White) > #infobar > #info-state, #main.state-White.state-ToRoll:not(.online-White) > #infobar > #info-state, #main.state-White.state-ToConfirmDouble:not(.online-White) > #infobar > #info-state, #main.state-Black.state-ToMove:not(.online-Black) > #infobar > #info-state, #main.state-Black.state-ToRoll:not(.online-Black) > #infobar > #info-state, #main.state-Black.state-ToConfirmDouble:not(.online-Black) > #infobar > #info-state { opacity: .5; } #main.state-White.state-ToMove:not(.online-White) > #infobar > #info-state::after, #main.state-White.state-ToRoll:not(.online-White) > #infobar > #info-state::after, #main.state-White.state-ToConfirmDouble:not(.online-White) > #infobar > #info-state::after, #main.state-Black.state-ToMove:not(.online-Black) > #infobar > #info-state::after, #main.state-Black.state-ToRoll:not(.online-Black) > #infobar > #info-state::after, #main.state-Black.state-ToConfirmDouble:not(.online-Black) > #infobar > #info-state::after { content: 'is offline'; } #main.state-Won > #infobar > #info-state::after { content: 'wins'; } #main > #infobar > #info-pips::before, #main > #infobar > #info-match-score::before { width: 16vw; top: 6.1vw; left: 50%; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); } #main > #infobar > .mini-button::before { white-space: nowrap; top: 1.5vw; right: -1.25vw; } #main > #infobar > #info-pips::before { content: 'Shows the sum of how many steps all of your pieces are away from home.'; } #main > #infobar > #info-match-score::before { content: 'Shows your score within the current match.'; } #main > #infobar > #info-pips > .infobox-inner::after { content: 'pips'; font-size: 2vw; } #main > #infobar > #info-match-score > .infobox-inner::after { content: 'match'; font-size: 1.3vw; } #main > #infobar > .mini-button { position: absolute; width: 0; height: 0; left: 91.25vw; top: 1.25vw; border-radius: 100%; } #main:not(.state-Won) > #infobar > .mini-button:hover:not(:active):not(:focus), #main > #infobar > .mini-button:not(#btn-resign):hover:not(:active):not(:focus) { box-shadow: 0 0 3vw 1vw rgba(0, 0, 0, .5); } #main > #infobar > .mini-button:focus:not(:active) { outline: none; box-shadow: 0 0 3vw 1vw rgba(0, 0, 0, .5); } #main > #infobar > .mini-button:active { outline: none; box-shadow: 0 0 2vw 1vw rgba(0, 0, 0, 1); margin: .1vw 0 0 .1vw; } #main > #infobar > .mini-button::after { content: ''; position: absolute; left: -1.25vw; top: -1.25vw; right: -1.25vw; bottom: -1.25vw; background-position: center center; background-size: contain; background-repeat: no-repeat; } #main > #infobar > .mini-button > .notification { position: absolute; background: none repeat scroll 0% 0% red; border-radius: 100%; box-shadow: 0.2vw 0.2vw 0.5vw rgba(0, 0, 0, 0.4); text-align: center; height: 1.5vw; width: 1.5vw; bottom: 0; left: 0; z-index: 1; opacity: 0; -moz-transition: opacity ease-in-out .2s; -o-transition: opacity ease-in-out .2s; -webkit-transition: opacity ease-in-out .2s; transition: opacity ease-in-out .2s; } #main > #infobar > .mini-button > .notification.shown { opacity: 1; } #main > #infobar > .mini-button > .notification > .notification-inner { text-decoration: none; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; color: white; font-weight: bold; font-family: "Roboto","Calibri"; font-size: 1vw; } #main > #infobar > #btn-chat, #main > #infobar > #btn-settings { left: 94.75vw; } #main > #infobar > #btn-resign, #main > #infobar > #btn-settings { top: 4.75vw; } #main > #infobar > #btn-info::after { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000"><path style="fill:%23d9b58c" d="M 582 745 410 745 C 409 720 409 705 409 700 409 644 418 598 437 562 455 526 492 485 548 440 603 395 636 366 647 352 664 330 672 306 672 279 672 242 657 210 628 184 598 158 558 145 508 145 460 145 420 158 388 186 355 213 333 255 321 311 L 146 290 C 151 209 186 141 249 85 313 28 397 0 500 0 609 0 696 29 760 86 825 142 857 209 857 284 857 326 845 366 822 403 798 441 747 492 670 556 630 589 605 616 595 636 586 657 581 693 582 745 z M 410 1000 410 811 600 811 600 1000 z"/></svg>'); } #main > #infobar > #btn-chat::after { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000"><path style="fill:%23d9b58c" d="M 1000 351 C 1000 448 944 535 854 599 809 631 755 656 695 674 665 683 634 690 601 694 557 859 411 979 251 1000 356 957 407 817 399 694 367 689 335 683 305 674 246 656 192 630 146 599 56 535 0 447 0 351 0 157 224 0 500 0 776 0 1000 157 1000 351 z"/></svg>'); } #main > #infobar > #btn-resign::after { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000"><path style="fill:%23d9b58c" d="M 100 0 0 25 225 1000 300 975 211 539 C 244 510 301 475 375 475 525 475 525 550 525 550 525 550 525 600 550 600 591 600 662 550 750 550 875 550 900 625 900 625 L 1000 175 C 1000 175 925 100 775 100 625 100 575 125 575 125 575 125 600 25 375 25 288 25 177 61 117 83 z"/></svg>'); } #main > #infobar > #btn-settings::after { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000"><path style="fill:%23d9b58c" d="M 778 0 C 720 0 662 21 618 65 C 553 131 536 226 568 307 L 308 567 C 227 534 131 551 66 616 C 10 672 -10 748 4 819 L 172 652 L 312 687 L 313 688 L 348 829 L 181 996 C 252 1010 329 990 384 935 C 449 869 466 773 433 692 L 692 433 C 774 466 871 450 937 384 C 992 328 1012 252 998 181 L 831 348 L 689 313 L 654 172 L 822 4 C 807 1 792 0 778 0 z"/></svg>'); } #main > #infobar > #btn-info::before { content: 'Game info'; } #main > #infobar > #btn-info:hover::after, #main > #infobar > #btn-info:active::after, #main > #infobar > #btn-info:focus::after { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000"><path style="fill:%23f0d9b5" d="M 582 745 410 745 C 409 720 409 705 409 700 409 644 418 598 437 562 455 526 492 485 548 440 603 395 636 366 647 352 664 330 672 306 672 279 672 242 657 210 628 184 598 158 558 145 508 145 460 145 420 158 388 186 355 213 333 255 321 311 L 146 290 C 151 209 186 141 249 85 313 28 397 0 500 0 609 0 696 29 760 86 825 142 857 209 857 284 857 326 845 366 822 403 798 441 747 492 670 556 630 589 605 616 595 636 586 657 581 693 582 745 z M 410 1000 410 811 600 811 600 1000 z"/></svg>'); } #main > #infobar > #btn-chat::before { content: 'Chat'; } #main > #infobar > #btn-chat:hover::after, #main > #infobar > #btn-chat:active::after, #main > #infobar > #btn-chat:focus::after { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000"><path style="fill:%23f0d9b5" d="M 1000 351 C 1000 448 944 535 854 599 809 631 755 656 695 674 665 683 634 690 601 694 557 859 411 979 251 1000 356 957 407 817 399 694 367 689 335 683 305 674 246 656 192 630 146 599 56 535 0 447 0 351 0 157 224 0 500 0 776 0 1000 157 1000 351 z"/></svg>'); } #main > #infobar > #btn-settings::before { content: 'Settings'; } #main > #infobar > #btn-settings:hover::after, #main > #infobar > #btn-settings:active::after, #main > #infobar > #btn-settings:focus::after { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000"><path style="fill:%23f0d9b5" d="M 778 0 C 720 0 662 21 618 65 C 553 131 536 226 568 307 L 308 567 C 227 534 131 551 66 616 C 10 672 -10 748 4 819 L 172 652 L 312 687 L 313 688 L 348 829 L 181 996 C 252 1010 329 990 384 935 C 449 869 466 773 433 692 L 692 433 C 774 466 871 450 937 384 C 992 328 1012 252 998 181 L 831 348 L 689 313 L 654 172 L 822 4 C 807 1 792 0 778 0 z"/></svg>'); } #main:not(.state-Won):not(.state-Waiting):not(.spectating) > #infobar > #btn-resign::before { content: 'Resign this game'; } #main:not(.state-Won) > #infobar > #btn-resign:hover::after, #main:not(.state-Won) > #infobar > #btn-resign:active::after, #main:not(.state-Won) > #infobar > #btn-resign:focus::after { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000"><path style="fill:%23f0d9b5" d="M 100 0 0 25 225 1000 300 975 211 539 C 244 510 301 475 375 475 525 475 525 550 525 550 525 550 525 600 550 600 591 600 662 550 750 550 875 550 900 625 900 625 L 1000 175 C 1000 175 925 100 775 100 625 100 575 125 575 125 575 125 600 25 375 25 288 25 177 61 117 83 z"/></svg>'); } #main.state-Waiting > #infobar > #btn-resign, #main.state-Won > #infobar > #btn-resign, #main.spectating > #infobar > #btn-resign { opacity: .2; } /* Sidebar */ body.hash-sidebar > #main { width: 130vw; } #main > #sidebar { left: 100vw; top: 0; bottom: 0; right: 0; } #main > #sidebar > .sidebar-tab { left: 0; right: 2vw; top: 5vw; bottom: 2vw; position: absolute; background: hsl(32, 50%, 75%); box-shadow: .3vw .3vw .5vw rgba(0, 0, 0, .3) inset; overflow: auto; padding: 1vw 1.5vw; display: none; } #main > #sidebar::after { position: absolute; font-size: 5vw; color: hsl(32, 50%, 75%); text-shadow: .2vw .2vw .5vw rgba(0,0,0,.2); font-weight: bold; left: 0; top: 0; } #main > #sidebar > .sidebar-tab > .section { position: relative; } #main > #sidebar > .sidebar-tab > .section::before { text-align: left; display: block; font-size: 2.5vw; color: hsl(32, 50%, 30%); text-shadow: .2vw .2vw .5vw rgba(0,0,0,.2); font-weight: bold; } #main > #sidebar > .sidebar-tab > .section:not(:first-child)::before { margin-top: 2vw; } #main > #sidebar > .sidebar-tab > .section > select, #main > #sidebar > .sidebar-tab > .section > select { width: 22vw; vertical-align: middle; } body.hash-helpers #main > #board > .automove, body.hash-helpers #main > #board > .automove.home { display: block; } body.hash-chat > #main > #sidebar > #chat, body.hash-info > #main > #sidebar > #info, body.hash-settings > #main > #sidebar > #settings, body.hash-translate > #main > #sidebar > #translate, body.hash-translating > #main > #sidebar > #translating { display: block; } /* Chat */ body.hash-chat > #main > #sidebar::after { content: 'Chat'; } #main > #sidebar > #chat { background: none; box-shadow: none; } #main > #sidebar > #chat > #chat-msgs-outer { position: absolute; left: 0; right: 0; top: 0; background: hsl(32, 50%, 75%); box-shadow: .3vw .3vw .5vw rgba(0, 0, 0, .3) inset; overflow: auto; } #main > #sidebar > #chat > #chat-msgs-outer > #chat-msgs { position: absolute; left: 0; right: 0; } #main > #sidebar > #chat > #chat-msgs-outer > #chat-msgs.few { bottom: 0; } #main > #sidebar > #chat > #chat-msgs-outer > #chat-msgs.many { top: 0; } #main > #sidebar > #chat > #chat-msgs-outer > #chat-msgs > .chat-msg { position: relative; padding: .1vw .5vw; overflow: auto; } #main > #sidebar > #chat > #chat-msgs-outer > #chat-msgs > .chat-msg::before { content: ''; float: left; -moz-transform: scale(.5); -ms-transform: scale(.5); -o-transform: scale(.5); -webkit-transform: scale(.5); transform: scale(.5); -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; margin: 0.2vw -1.5vw -2.3vw 0; } #main > #sidebar > #chat > #chat-msgs-outer > #chat-msgs > .chat-msg > .time { float: right; color: hsl(32, 50%, 40%); margin-left: .5em; padding-top: .2em; font-family: 'Roboto', 'Calibri'; font-size: .7em; } #main > #sidebar > #chat > #chat-msgs-outer > #chat-msgs > .chat-msg > .msg { margin-left: 3.5vw; } #main > #sidebar > #chat > #chat-msgs-outer > #chat-msgs > .chat-msg.other-game { opacity: .5; } #main > #sidebar > #chat > label { position: absolute; left: 0; bottom: 0; height: 2.6vw; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #main > #sidebar > #chat > #chat-msg { position: absolute; left: 0; bottom: 0; font-size: 1.75vw; line-height: 2vw; background: hsl(32,50%,75%); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: .3vw; width: 100%; border: none; box-shadow: .3vw .3vw .5vw rgba(0, 0, 0, .3) inset; cursor: text; } #main > #sidebar > #chat > #chat-msg:focus { background: hsl(32,50%,95%); } #main:not(.spectating) > #sidebar > #chat > #chat-msgs-outer { bottom: 3.5vw; } #main.spectating > #sidebar > #chat > #chat-msgs-outer { bottom: 0; } #main.spectating > #sidebar > #chat > #chat-msg, #main.spectating > #sidebar > #chat > label { display: none; } /* Game info */ body.hash-info > #main > #sidebar::after { content: 'Game info'; } #main > #sidebar > #info > svg.defs { visibility: hidden; } /* This gradient is used by #main > #sidebar > #info > .section > .game-graph > svg > .column.doubled.crossover */ #main > #sidebar > #info > svg.defs #doubled-crossover-gradient > stop.start { stop-color: hsla(0, 100%, 50%, .1); } #main > #sidebar > #info > svg.defs #doubled-crossover-gradient > stop.end { stop-color: hsla(60, 100%, 50%, .3); } #main > #sidebar > #info > .section { position: relative; text-align: right; } #main > #sidebar > #info > .section > .content { display: inline-block; } #main > #sidebar > #info > .section > .content::before { top: 3.3vw; right: 0; width: 20vw; } #main > #sidebar > #info > .section > .controls { position: absolute; top: .5vw; right: 0; } #main > #sidebar > #info > .section > .game-graph > svg { display: inline; } #main > #sidebar > #info > .section > .game-graph > svg > .column { fill: transparent; } #main > #sidebar > #info > .section > .game-graph > svg > .column.crossover:not(:hover):not(.current) { fill: hsla(0, 100%, 50%, .1); } #main > #sidebar > #info > .section > .game-graph > svg > .column.doubled:not(:hover):not(.current) { fill: hsla(60, 100%, 50%, .3); } #main > #sidebar > #info > .section > .game-graph > svg > .column.doubled.crossover:not(:hover):not(.current) { /* This gradient is defined in the dummy SVG */ fill: url(#doubled-crossover-gradient); } #main > #sidebar > #info > .section > .game-graph > svg > .column:hover { fill: hsla(32, 50%, 30%, .25); } #main > #sidebar > #info > .section > .game-graph > svg > .column.current { fill: hsla(32, 50%, 30%, .5); } #main > #sidebar > #info > .section > .game-graph > svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; } #main > #sidebar > #info > .section > .game-graph > svg path.axes { stroke-width: 3; stroke: hsl(32, 50%, 30%); } #main > #sidebar > #info > .section > .game-graph > svg path.data { stroke-width: 3; } #main > #sidebar > #info > .section > .game-graph > svg path.data.white { stroke: hsl(32,50%,95%); } #main > #sidebar > #info > .section > .game-graph > svg path.data.black { stroke: hsl(32,50%,10%); } #main > #sidebar > #info > .section > .game-graph > svg path.grid { stroke: rgba(0,0,0,.2); stroke-width: 2; } #main > #sidebar > #info > .section > .game-graph > svg g.label > path.label { stroke: none; } #main > #sidebar > #info > .section > .game-graph > svg g.label > path.label.white { fill: hsl(32,50%,95%); } #main > #sidebar > #info > .section > .game-graph > svg g.label > path.label.black { fill: hsl(32,50%,10%); } #main > #sidebar > #info > .section > .game-graph > svg > text { font-size: 15px; line-height: 100%; font-family: 'Roboto', 'Calibri'; text-align: center; text-anchor: middle; } #main > #sidebar > #info > .section > .game-graph > svg > text.white { fill: hsl(32,50%,10%); } #main > #sidebar > #info > .section > .game-graph > svg > text.black { fill: hsl(32,50%,95%); } #main > #sidebar > #info > #info-game-history > .game-graph::before { text-align: left; display: block; font-size: 2vw; color: hsl(32, 50%, 30%); text-shadow: .2vw .2vw .5vw rgba(0,0,0,.2); font-weight: bold; } #main > #sidebar > #info > #info-game-history > #graph-pips::before { content: 'Pips'; } #main > #sidebar > #info > #info-game-history > #graph-dicetotals::before { content: 'Dice totals'; } #main > #sidebar > #info > #info-game-history::before { content: 'Game history'; } #main > #sidebar > #info > #info-match-history::before { content: 'Match history'; } #main > #sidebar > #info > #info-match-playto::before { content: 'Playing to'; } #main > #sidebar > #info > #info-match-playto > .content::before { content: 'Indicates how many points the match is played to. The first player to reach this many points wins the match.'; top: 6.1vw; } #main > #sidebar > #info > #info-match-cube::before { content: 'Doubling cube'; } #main > #sidebar > #info > #info-match-history { counter-reset: section; } #main > #sidebar > #info > .section > hr { border: none; border-top: .2vw solid hsl(32, 50%, 30%); margin: 1vw 0; } #main > #sidebar > #info > #info-match-history > .game[href]:hover { background: hsl(32, 50%, 70%); } #main > #sidebar > #info > #info-match-history > .game:not([href]) { background: hsl(32, 50%, 60%); } #main > #sidebar > #info > .section > .row { display: block; background: hsl(32, 50%, 80%); position: relative; text-align: center; color: black; text-decoration: none; } #main > #sidebar > #info > .section > .row.first, #main > #sidebar > #info > .section > .row.totals { border-top-left-radius: 2vw; border-top-right-radius: 2vw; } #main > #sidebar > #info > .section > .row.last, #main > #sidebar > #info > .section > .row.totals { border-bottom-left-radius: 2vw; border-bottom-right-radius: 2vw; } #main > #sidebar > #info > #info-game-history > .move:hover { background: hsl(32,50%,70%); } #main > #sidebar > #info > #info-game-history > .move.current { background: hsl(32,50%,60%); } #main > #sidebar > #info > #info-game-history > .row { height: 3.2vw; } #main > #sidebar > #info > #info-match-history > .row { counter-increment: section; padding: .5vw 1vw; } #main > #sidebar > #info > #info-match-history > .row::before, #main > #sidebar > #info > #info-match-history > .game::after { display: block; } #main > #sidebar > #info > .section > .expand-collapse { text-align: center; display: block; text-decoration: none; color: hsl(32, 50%, 30%); width: 75%; margin: 0 auto; background-image: linear-gradient(hsla(32,50%,90%,0) 0%, hsl(32,50%,90%) 100%); font-size: 1vw; } #main > #sidebar > #info > .section > .expand-collapse::before { content: '{"text":"▲ ","notranslate":1}'; } #main > #sidebar > #info > .section > .expand-collapse::after { content: 'Expand'; } #main > #sidebar > #info > .section.expanded > .expand-collapse { background: hsl(32,50%,80%); border-top-left-radius: .8vw; border-top-right-radius: .8vw; } #main > #sidebar > #info > .section.expanded > .expand-collapse::before { content: '{"text":"▼ ","notranslate":1}'; } #main > #sidebar > #info > .section.expanded > .expand-collapse::after { content: 'Collapse'; } #main > #sidebar > #info > .section:not(.expanded) > .expandable { display: none; } #main > #sidebar > #info > #info-match-history > .game::before { content: '{"text":"Game {n}","n":"counter(section)"}'; font-weight: bold; font-size: 1.7vw; } #main > #sidebar > #info > #info-match-history > .totals::before { content: 'Score'; font-weight: bold; font-size: 2.9vw; } #main > #sidebar > #info > #info-match-history > .game.cube::after { content: '(with cube)'; font-size: 1.2vw; } #main > #sidebar > #info > #info-match-history > .game.no-cube::after { content: '(no cube)'; font-size: 1.2vw; } #main > #sidebar > #info > #info-match-history > .row > .piece { position: absolute; top: 50%; -moz-transform: translateY(-50%) scale(.7); -ms-transform: translateY(-50%) scale(.7); -o-transform: translateY(-50%) scale(.7); -webkit-transform: translateY(-50%) scale(.7); transform: translateY(-50%) scale(.7); } #main > #sidebar > #info > #info-match-history > .row > .piece > .number { position: absolute; left: 50%; top: 50%; -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); font-family: 'Roboto', 'Calibri'; font-size: 3vw; } #main > #sidebar > #info > #info-match-history > .row > .piece.white { left: 0; color: black; } #main > #sidebar > #info > #info-match-history > .row > .piece.black { right: 0; color: white; } #main > #sidebar > #info > #info-game-history > .row.move::after { content: ''; position: absolute; left: 2vw; top: 50%; -moz-transform: translateY(-50%) scale(.5); -ms-transform: translateY(-50%) scale(.5); -o-transform: translateY(-50%) scale(.5); -webkit-transform: translateY(-50%) scale(.5); transform: translateY(-50%) scale(.5); } #main > #sidebar > #info > #info-game-history > .row > .cube, #main > #sidebar > #info > #info-game-history > .row > .dice { -moz-transform: translateY(-50%) scale(.5); -ms-transform: translateY(-50%) scale(.5); -o-transform: translateY(-50%) scale(.5); -webkit-transform: translateY(-50%) scale(.5); transform: translateY(-50%) scale(.5); top: 50%; position: absolute; } #main > #sidebar > #info > #info-game-history > .row > .cube { left: -1vw; } #main > #sidebar > #info > #info-game-history > .row > .dice-0 { left: 5vw; } #main > #sidebar > #info > #info-game-history > .row > .dice-1 { left: 8vw; } #main > #sidebar > #info > #info-game-history > .row > .move { position: absolute; font-family: 'Roboto', 'Calibri'; font-size: .9vw; line-height: .9vw; white-space: pre; text-align: right; right: .75vw; top: 50%; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } #main > #sidebar > #info > #info-game-history > .totals > .dice-total { position: absolute; -moz-transform: translateY(-50%) scale(.5); -ms-transform: translateY(-50%) scale(.5); -o-transform: translateY(-50%) scale(.5); -webkit-transform: translateY(-50%) scale(.5); transform: translateY(-50%) scale(.5); top: 50%; } #main > #sidebar > #info > #info-game-history > .totals > .dice-total > div { position: absolute; top: 50%; left: 50%; font-size: 2.5vw; font-family: 'Roboto', 'Calibri'; -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } #main > #sidebar > #info > #info-game-history > .totals > .dice-total::before { content: 'Dice totals.'; top: 100%; left: 0; white-space: nowrap; -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); -webkit-transform: scale(2); transform: scale(2); -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; } #main > #sidebar > #info > #info-game-history > .totals > .white { left: 5vw; color: black; } #main > #sidebar > #info > #info-game-history > .totals > .black { left: 8vw; color: white; } /* Settings */ body.hash-settings > #main > #sidebar::after { content: 'Settings'; } #main > #sidebar > #settings > #settings-style::before { content: 'Style'; } #main > #sidebar > #settings > #settings-lang::before { content: 'Language'; } #main > #sidebar > #settings > #settings-helpers::before { content: 'Helpers'; } #main > #sidebar > #settings > .section > label { position: relative; display: block; } #main > #sidebar > #settings > #settings-helpers > input { display: none; } #main > #sidebar > #settings > #settings-helpers > input + label { padding-left: 1.3em; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10" height="10"><defs><linearGradient id="g"><stop style="stop-color:%23f2e6d9;stop-opacity:0;" offset="0"/><stop style="stop-color:%23000;stop-opacity:0.5;" offset="1"/></linearGradient><linearGradient id="h"><stop style="stop-color:%23fff;stop-opacity:0.7;" offset="0"/><stop style="stop-color:%23f2e6d9;stop-opacity:0;" offset="1"/></linearGradient><linearGradient id="a" x1="0" y1="0" x2="1" y2="0" xlink:href="%23h"/><linearGradient y2="1" x2="0" y1="0" x1="0" id="b" xlink:href="%23h"/><linearGradient y2="0" x2="1" y1="0" x1="0" id="c" xlink:href="%23g"/><linearGradient y2="1" x2="0" y1="0" x1="0" id="d" xlink:href="%23g"/></defs><rect style="fill:%23f2e6d9;" width="10" height="10"/><rect style="fill:url(%23c)" width="2" height="10" x="8"/><rect style="fill:url(%23d)" width="10" height="2" y="8"/><rect style="fill:url(%23a)" width="2" height="10"/><rect style="fill:url(%23b)" width="10" height="2"/></svg>'); background-size: 1em 1em; background-position: 0 .25em; background-repeat: no-repeat; } #main > #sidebar > #settings > #settings-helpers > input:checked + label { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10" height="10"><defs><linearGradient id="g"><stop style="stop-color:%23000;stop-opacity:.5;" offset="0"/><stop style="stop-color:%23bf8440;stop-opacity:0;" offset="1"/></linearGradient><linearGradient id="h"><stop style="stop-color:%23bf8440;stop-opacity:0;" offset="0"/><stop style="stop-color:%23fff;stop-opacity:.7;" offset="1"/></linearGradient><linearGradient id="a" x1="0" y1="0" x2="1" y2="0" xlink:href="%23g"/><linearGradient y2="1" x2="0" y1="0" x1="0" id="b" xlink:href="%23g"/><linearGradient y2="0" x2="1" y1="0" x1="0" id="c" xlink:href="%23h"/><linearGradient y2="1" x2="0" y1="0" x1="0" id="d" xlink:href="%23h"/></defs><rect style="fill:%23bf8440;" width="10" height="10"/><rect style="fill:url(%23c)" width="2" height="10" x="8"/><rect style="fill:url(%23d)" width="10" height="2" y="8"/><rect style="fill:url(%23a)" width="2" height="10"/><rect style="fill:url(%23b)" width="10" height="2"/><path style="fill:%23000" d="M 8 1 L 5.28 8.28 L 3 5 L 2 6 L 5 9 L 6 9 L 9 2 L 8 1 z"/></svg>'); } #main > #sidebar > #settings > #settings-helpers > label::after { vertical-align: middle; } #main > #sidebar > #settings > #settings-helpers > #settings-helpers-select + label::after { content: 'Show multi-move helpers'; } #main > #sidebar > #settings > #settings-helpers > #settings-helpers-select + label::before { content: 'Displays little green triangles that allow you to move several pieces to or from the same point simultaneously.'; top: 100%; } #main > #sidebar > #settings > #settings-helpers > #settings-percentages-select + label::after { content: 'Show opponent landing probabilities'; } #main > #sidebar > #settings > #settings-helpers > #settings-percentages-select + label::before { content: 'Displays, at the base of each point, the probability that the next player will be able to land a piece there.'; top: 100%; } #main > #sidebar > #settings > #settings-helpers > #settings-autoroll-select + label::after { content: 'Automatically roll dice (no doubling)'; } #main > #sidebar > #settings > #settings-helpers > #settings-autoroll-select + label::before { content: 'Automatically roll the dice and do not offer to double. (This option is reset when you move on to the next game or reload the page.)'; top: 100%; } #main > #sidebar > #settings > .section > button { width: 2vw; height: 2vw; display: inline-block; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; vertical-align: middle; margin-left: 1vw; } #main > #sidebar > #settings > .section > button::after { content: ''; display: block; position: absolute; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="3" height="3"><path style="fill:hsl(32, 50%, 90%)" d="M 1 0 2 0 2 1 3 1 3 2 2 2 2 3 1 3 1 2 0 2 0 1 1 1 z"/></svg>'); background-size: 100%; background-repeat: no-repeat; width: 74%; height: 74%; left: 12%; top: 12%; } #main > #sidebar > #settings > .section > button#settings-lang-custom::before { content: '{"text":"Become a translator!","notranslate":1}'; right: 0; top: 2.2vw; } /* Translate */ body.hash-translate > #main > #sidebar::after, body.hash-translating > #main > #sidebar::after { content: '{"text":"Translate","notranslate":1}'; } #main > #sidebar > #translate > #translate-existing::before { content: '{"text":"Edit a translation","notranslate":1}'; } #main > #sidebar > #translate > .section > button { width: 2vw; height: 2vw; display: inline-block; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; vertical-align: middle; margin-left: 1vw; position: relative; } #main > #sidebar > #translate > .section > button::after { content: ''; display: block; position: absolute; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="3" height="4"><path style="fill:hsl(32, 50%, 90%)" d="M 0 0 3 2 0 4 z"/></svg>'); background-size: 100%; background-repeat: no-repeat; width: 54%; height: 72%; left: 30%; top: 14%; } #main > #sidebar > #translate > .section > button#translate-create { display: block; margin: .5em 0 0 auto; } #main > #sidebar > #translate > #translate-new::before { content: '{"text":"Start a new translation","notranslate":1}'; } #main > #sidebar > #translate > #translate-new > label { display: block; margin-top: .5em; } #main > #sidebar > #translate > #translate-new > #translate-code-label::before { content: '{"text":"ISO language code (e.g.\a0 fr):","notranslate":1}'; } #main > #sidebar > #translate > #translate-new > #translate-name-label::before { content: '{"text":"Native language name (e.g.\a0 Français):","notranslate":1}'; } #main > #sidebar > #translate > #translate-new > input { width: 25vw; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #main > #sidebar > #translate > #translate-new > #translate-error { border: 1px solid hsl(0,52%,50%); background: hsl(0,52%,80%); padding: .3em .7em; box-shadow: .2em .2em .2em rgba(0, 0, 0, .2); font-size: 80%; display: none; } #main > #sidebar > #translating { top: 10vw; } #main > #sidebar > #translating > .important { border: 1px solid hsl(60,52%,50%); background: hsl(60,52%,80%); padding: .3em .7em; box-shadow: .2em .2em .2em rgba(0, 0, 0, .2); font-size: 80%; margin-bottom: 1em; } #main > #sidebar > #translating .translatable { margin-bottom: .2em; } #main > #sidebar > #translating .translatable > .orig { font-weight: bold; font-size: 90%; } #main > #sidebar > #translating .translatable > .hint { font-size: 70%; margin-left: 1em; } #main > #sidebar > #translating .translatable > .trans > input { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #main > #sidebar > #translating > .missing { background: hsl(16,50%,70%); margin: 0 -.5em; padding: .3em .7em; } #main > #sidebar > #translating > .missing > .title { font-weight: bold; text-align: center; font-size: 150%; } #main > #sidebar > select.translating { width: 28vw; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; top: 6vw; left: 0; right: 0; display: none; } body.hash-translating > #main > #sidebar > select.translating { display: block; } #main > #sidebar > #translating .translatable > .trans::after { content: '{"text":"\a0 ","notranslate":1}'; display: block; text-align: right; font-size: 50%; opacity: .7; } #main > #sidebar > #translating .translatable > .trans.saved::after { content: '{"text":"saved","notranslate":1}'; color: green; } #main > #sidebar > #translating .translatable > .trans.saved > input { background: hsl(60,52%,80%); } #main > #sidebar > #translating .translatable > .trans.unsaved::after { content: '{"text":"unsaved","notranslate":1}'; color: red; } #main > #sidebar > #translating .translatable > .trans.unsaved > input { background: white; } #main > #sidebar > #translating .translatable > .trans.submitting::after { content: '{"text":"submitting...","notranslate":1}'; } #main > #sidebar > #translating .translatable > .trans.submitting > input { background: hsl(180,52%,80%); } /* Buttons and other UI elements */ button { position: relative; background-color: hsl(32, 52%, 34.3%); background-image: linear-gradient(hsl(32, 52%, 44%), hsl(32, 52%, 22%)); border: .15vw solid; border-color: hsl(32, 52%, 30%) hsl(32, 52%, 20%) hsl(32, 52%, 20%) hsl(32, 52%, 30%); border-radius: .6vw; box-shadow: .05vw .1vw 0 0 hsl(32, 52%, 48%) inset; color: hsl(32, 90%, 92.5%); font: inherit; padding: .2em 1em; text-align: center; text-shadow: -.1vw -.1vw 0 hsl(32, 52%, 24.3%); text-transform: uppercase; white-space: nowrap; } button:hover, button:active, button:focus { background-color: hsl(32, 52%, 44.3%); background-image: linear-gradient(hsl(32, 52%, 54%), hsl(32, 52%, 32%)); border-color: hsl(32, 52%, 40%) hsl(32, 52%, 30%) hsl(32, 52%, 30%) hsl(32, 52%, 40%); box-shadow: .05vw .1vw 0 0 hsl(32, 52%, 58%) inset; color: white; text-shadow: -.1vw -.1vw 0 hsl(32, 52%, 34.3%); } button:active { background-image: linear-gradient(hsl(32, 52%, 32%), hsl(32, 52%, 54%)); } /* Shortcuts */ .shortcut { opacity: 0; visibility: hidden; -moz-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; -webkit-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; position: absolute; left: 0; bottom: 100%; background: hsl(220, 50%, 80%); border: .1vw solid hsl(220, 50%, 20%); text-transform: uppercase; padding: 0 .2vw; z-index: 1; text-shadow: none; color: hsl(220, 50%, 20%); font-size: 1.5vw; } body.show-shortcuts .shortcut { opacity: 1; visibility: visible; } /* Tooltips */ #main > #infobar > #info-pips::before, #main > #infobar > #info-match-score::before, #main > #infobar > .mini-button::before, #main > #sidebar > #info > .section > .content::before, #main > #sidebar > #settings > .section > button::before, #newgame > .row > label::before, #waiting-games > li > .doubling-cube::before, #waiting-games > li > .playto::before, #waiting-games > li > .piece::before, #main > #sidebar > #info > #info-game-history > .totals > .dice-total::before, #main > #sidebar > #settings > .section > input + label::before, #main > #sidebar > #info > .section > .controls > input + label::after { opacity: 0; visibility: hidden; pointer-events: none; -moz-transition: opacity .1s ease-in-out; -o-transition: opacity .1s ease-in-out; -webkit-transition: opacity .1s ease-in-out; transition: opacity .1s ease-in-out; position: absolute; background: hsl(32, 50%, 80%); padding: .2vw 1vw; font-size: 1.1vw; color: hsl(32, 50%, 20%); border: .2vw solid hsl(32, 50%, 20%); border-radius: .5vw; box-shadow: .1vw .1vw .2vw rgba(0, 0, 0, .5); text-align: center; text-shadow: none; text-transform: none; z-index: 1; } #main > #infobar > #info-pips:hover::before, #main > #infobar > #info-match-score:hover::before, #main > #infobar > .mini-button:hover::before, #main > #sidebar > #info > .section > .content:hover::before, #main > #sidebar > #settings > .section > button:hover::before, #newgame > .row > label:hover::before, #waiting-games > li > .doubling-cube:hover::before, #waiting-games > li > .playto:hover::before, #waiting-games > li > .piece:hover::before, #main > #sidebar > #info > #info-game-history > .totals > .dice-total:hover::before, #main > #sidebar > #settings > .section > input + label:hover::before, #main > #sidebar > #info > .section > .controls > input + label:hover::after { opacity: 1; visibility: visible; } /* Dice */ .dice { width: 5vw; height: 5vw; box-shadow: .3vw .3vw .5vw rgba(0, 0, 0, .3); border-radius: .5vw; pointer-events: none; -moz-transition: opacity .2s ease-in-out; -o-transition: opacity .2s ease-in-out; -webkit-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; } #main.dice-white:not(.viewing-history) > #board > .dice, #main.dice-start:not(.viewing-history) > #board > #dice-0, #main.viewing-history.history-white:not(.history-dice-start) > #board > .dice, #main.viewing-history.history-dice-start > #board > #dice-0, #main > #sidebar > #info > #info-game-history > .move.white:not(.first) > .dice, #main > #sidebar > #info > #info-game-history > .move.first > .dice-0 { background-image: linear-gradient(135deg, #fff, #ddd); } #main.dice-black:not(.viewing-history) > #board > .dice, #main.dice-start:not(.viewing-history) > #board > #dice-1, #main.viewing-history.history-black:not(.history-dice-start) > #board > .dice, #main.viewing-history.history-dice-start > #board > #dice-1, #main > #sidebar > #info > #info-game-history > .move.black:not(.first) > .dice, #main > #sidebar > #info > #info-game-history > .move.first > .dice-1 { background-image: linear-gradient(135deg, #444, #222); } .dice > .razor { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; border-radius: inherit; } .dice > .razor > .face { position: absolute; left: .5vw; top: .5vw; width: 4vw; height: 4vw; border-radius: 30%; } #main.dice-white:not(.viewing-history) > #board > .dice > .razor > .face, #main.dice-start:not(.viewing-history) > #board > #dice-0 > .razor > .face, #main.viewing-history.history-white:not(.history-dice-start) > #board > .dice > .razor > .face, #main.viewing-history.history-dice-start > #board > #dice-0 > .razor > .face, #main > #sidebar > #info > #info-game-history > .move.white:not(.first) > .dice > .razor > .face, #main > #sidebar > #info > #info-game-history > .move.first > .dice-0 > .razor > .face { background-image: linear-gradient(135deg, #ddd, #fff); } #main.dice-black:not(.viewing-history) > #board > .dice > .razor > .face, #main.dice-start:not(.viewing-history) > #board > #dice-1 > .razor > .face, #main.viewing-history.history-black:not(.history-dice-start) > #board > .dice > .razor > .face, #main.viewing-history.history-dice-start > #board > #dice-1 > .razor > .face, #main > #sidebar > #info > #info-game-history > .move.black:not(.first) > .dice > .razor > .face, #main > #sidebar > #info > #info-game-history > .move.first > .dice-1 > .razor > .face { background-image: linear-gradient(135deg, #222, #444); } .dice > .razor > .side { position: absolute; border-radius: 50%; width: 5vw; height: 1vw; } .dice > .razor > .side.n { top: -.5vw; left: .25vw; } #main.dice-white:not(.viewing-history) > #board > .dice > .razor > .side.n, #main.dice-start:not(.viewing-history) > #board > #dice-0 > .razor > .side.n, #main.viewing-history.history-white:not(.history-dice-start) > #board > .dice > .razor > .side.n, #main.viewing-history.history-dice-start > #board > #dice-0 > .razor > .side.n, #main > #sidebar > #info > #info-game-history > .move.white:not(.first) > .dice > .razor > .side.n, #main > #sidebar > #info > #info-game-history > .move.first > .dice-0 > .razor > .side.n { background-image: linear-gradient(0deg, #fff, #ccc); } #main.dice-black:not(.viewing-history) > #board > .dice > .razor > .side.n, #main.dice-start:not(.viewing-history) > #board > #dice-1 > .razor > .side.n, #main.viewing-history.history-black:not(.history-dice-start) > #board > .dice > .razor > .side.n, #main.viewing-history.history-dice-start > #board > #dice-1 > .razor > .side.n, #main > #sidebar > #info > #info-game-history > .move.black:not(.first) > .dice > .razor > .side.n, #main > #sidebar > #info > #info-game-history > .move.first > .dice-1 > .razor > .side.n { background-image: linear-gradient(0deg, #444, #222); } .dice > .razor > .side.w { top: .25vw; left: -.5vw; width: 1vw; height: 5vw; } #main.dice-white:not(.viewing-history) > #board > .dice > .razor > .side.w, #main.dice-start:not(.viewing-history) > #board > #dice-0 > .razor > .side.w, #main.viewing-history.history-white:not(.history-dice-start) > #board > .dice > .razor > .side.w, #main.viewing-history.history-dice-start > #board > #dice-0 > .razor > .side.w, #main > #sidebar > #info > #info-game-history > .move.white:not(.first) > .dice > .razor > .side.w, #main > #sidebar > #info > #info-game-history > .move.first > .dice-0 > .razor > .side.w { background-image: linear-gradient(-90deg, #fff, #ccc); } #main.dice-black:not(.viewing-history) > #board > .dice > .razor > .side.w, #main.dice-start:not(.viewing-history) > #board > #dice-1 > .razor > .side.w, #main.viewing-history.history-black:not(.history-dice-start) > #board > .dice > .razor > .side.w, #main.viewing-history.history-dice-start > #board > #dice-1 > .razor > .side.w, #main > #sidebar > #info > #info-game-history > .move.black:not(.first) > .dice > .razor > .side.w, #main > #sidebar > #info > #info-game-history > .move.first > .dice-1 > .razor > .side.w { background-image: linear-gradient(-90deg, #444, #222); } .dice > .razor > .side.s { bottom: -.5vw; left: .25vw; } #main.dice-white:not(.viewing-history) > #board > .dice > .razor > .side.s, #main.dice-start:not(.viewing-history) > #board > #dice-0 > .razor > .side.s, #main.viewing-history.history-white:not(.history-dice-start) > #board > .dice > .razor > .side.s, #main.viewing-history.history-dice-start > #board > #dice-0 > .razor > .side.s, #main > #sidebar > #info > #info-game-history > .move.white:not(.first) > .dice > .razor > .side.s, #main > #sidebar > #info > #info-game-history > .move.first > .dice-0 > .razor > .side.s { background-image: linear-gradient(0deg, #888, #eee); } #main.dice-black:not(.viewing-history) > #board > .dice > .razor > .side.s, #main.dice-start:not(.viewing-history) > #board > #dice-1 > .razor > .side.s, #main.viewing-history.history-black:not(.history-dice-start) > #board > .dice > .razor > .side.s, #main.viewing-history.history-dice-start > #board > #dice-1 > .razor > .side.s, #main > #sidebar > #info > #info-game-history > .move.black:not(.first) > .dice > .razor > .side.s, #main > #sidebar > #info > #info-game-history > .move.first > .dice-1 > .razor > .side.s { background-image: linear-gradient(0deg, #000, #333); } .dice > .razor > .side.e { top: .25vw; right: -.5vw; width: 1vw; height: 5vw; } #main.dice-white:not(.viewing-history) > #board > .dice > .razor > .side.e, #main.dice-start:not(.viewing-history) > #board > #dice-0 > .razor > .side.e, #main.viewing-history.history-white:not(.history-dice-start) > #board > .dice > .razor > .side.e, #main.viewing-history.history-dice-start > #board > #dice-0 > .razor > .side.e, #main > #sidebar > #info > #info-game-history > .move.white:not(.first) > .dice > .razor > .side.e, #main > #sidebar > #info > #info-game-history > .move.first > .dice-0 > .razor > .side.e { background-image: linear-gradient(-90deg, #888, #eee); } #main.dice-black:not(.viewing-history) > #board > .dice > .razor > .side.e, #main.dice-start:not(.viewing-history) > #board > #dice-1 > .razor > .side.e, #main.viewing-history.history-black:not(.history-dice-start) > #board > .dice > .razor > .side.e, #main.viewing-history.history-dice-start > #board > #dice-1 > .razor > .side.e, #main > #sidebar > #info > #info-game-history > .move.black:not(.first) > .dice > .razor > .side.e, #main > #sidebar > #info > #info-game-history > .move.first > .dice-1 > .razor > .side.e { background-image: linear-gradient(-90deg, #000, #333); } .dice > .pip { position: absolute; border-radius: 50%; width: .7vw; height: .7vw; } #main.dice-white:not(.viewing-history) > #board > .dice > .pip, #main.dice-start:not(.viewing-history) > #board > #dice-0 > .pip, #main.viewing-history.history-white:not(.history-dice-start) > #board > .dice > .pip, #main.viewing-history.history-dice-start > #board > #dice-0 > .pip, #main > #sidebar > #info > #info-game-history > .move.white:not(.first) > .dice > .pip, #main > #sidebar > #info > #info-game-history > .move.first > .dice-0 > .pip { background: black; box-shadow: .075vw .075vw 0 white; } #main.dice-black:not(.viewing-history) > #board > .dice > .pip, #main.dice-start:not(.viewing-history) > #board > #dice-1 > .pip, #main.viewing-history.history-black:not(.history-dice-start) > #board > .dice > .pip, #main.viewing-history.history-dice-start > #board > #dice-1 > .pip, #main > #sidebar > #info > #info-game-history > .move.black:not(.first) > .dice > .pip, #main > #sidebar > #info > #info-game-history > .move.first > .dice-1 > .pip { background: #ddd; box-shadow: -.075vw -.075vw 0 black; } .dice > .pip.a, .dice > .pip.b, .dice > .pip.c { left: 1vw; } .dice > .pip.g { left: 2.2vw; } .dice > .pip.b, .dice > .pip.e, .dice > .pip.g { top: 2.2vw; } .dice > .pip.d, .dice > .pip.e, .dice > .pip.f { right: 1vw; } .dice > .pip.a, .dice > .pip.d { top: 1vw; } .dice > .pip.c, .dice > .pip.f { bottom: 1vw; } .dice.val-1 .pip.a, .dice.val-1 .pip.b, .dice.val-1 .pip.c, .dice.val-1 .pip.d, .dice.val-1 .pip.e, .dice.val-1 .pip.f, .dice.val-2 .pip.b, .dice.val-2 .pip.c, .dice.val-2 .pip.d, .dice.val-2 .pip.e, .dice.val-2 .pip.g, .dice.val-3 .pip.a, .dice.val-3 .pip.b, .dice.val-3 .pip.e, .dice.val-3 .pip.f, .dice.val-4 .pip.b, .dice.val-4 .pip.e, .dice.val-4 .pip.g, .dice.val-5 .pip.b, .dice.val-5 .pip.e, .dice.val-6 .pip.g { visibility: hidden; } .dice > .cross { position: absolute; left: 50%; top: 50%; height: 8vw; font-size: 8vw; font-weight: bold; color: hsl(0, 80%, 50%); line-height: 1; opacity: 0; -moz-transition: opacity ease-in-out .2s; -o-transition: opacity ease-in-out .2s; -webkit-transition: opacity ease-in-out .2s; transition: opacity ease-in-out .2s; } .dice > .cross::after { position: relative; left: -50%; top: -50%; content: '{"text":"✗","notranslate":1}'; } .dice.crossed > .cross { opacity: .8; } #main.viewing-history > #board > .dice .pip { visibility: visible; } #main.viewing-history > #board > .dice.history-val-1 .pip.a, #main.viewing-history > #board > .dice.history-val-1 .pip.b, #main.viewing-history > #board > .dice.history-val-1 .pip.c, #main.viewing-history > #board > .dice.history-val-1 .pip.d, #main.viewing-history > #board > .dice.history-val-1 .pip.e, #main.viewing-history > #board > .dice.history-val-1 .pip.f, #main.viewing-history > #board > .dice.history-val-2 .pip.b, #main.viewing-history > #board > .dice.history-val-2 .pip.c, #main.viewing-history > #board > .dice.history-val-2 .pip.d, #main.viewing-history > #board > .dice.history-val-2 .pip.e, #main.viewing-history > #board > .dice.history-val-2 .pip.g, #main.viewing-history > #board > .dice.history-val-3 .pip.a, #main.viewing-history > #board > .dice.history-val-3 .pip.b, #main.viewing-history > #board > .dice.history-val-3 .pip.e, #main.viewing-history > #board > .dice.history-val-3 .pip.f, #main.viewing-history > #board > .dice.history-val-4 .pip.b, #main.viewing-history > #board > .dice.history-val-4 .pip.e, #main.viewing-history > #board > .dice.history-val-4 .pip.g, #main.viewing-history > #board > .dice.history-val-5 .pip.b, #main.viewing-history > #board > .dice.history-val-5 .pip.e, #main.viewing-history > #board > .dice.history-val-6 .pip.g, #main.viewing-history > #board > .dice > .cross { visibility: hidden; } #main > #sidebar > #translating-link { position: absolute; top: 0; right: 1vw; } body:not(.hash-translator) > #main > #sidebar > #translating-link, body:not(.hash-sidebar) > #main > #sidebar > #translating-link, body.hash-sidebar.hash-translating > #main > #sidebar > #translating-link { display: none; } #main > #sidebar > #translating-link > a { font-size: 1.5vw; text-decoration: none; color: hsl(0, 50%, 75%); font-weight: bold; } input.toggle { display: none; } input.toggle + label { position: relative; width: 3.5vw; height: 2vw; display: inline-block; border-radius: 1vw; background-image: linear-gradient(180deg, hsl(32, 50%, 45%), hsl(32, 50%, 55%)); box-shadow: .1vw .1vw .1vw rgba(0, 0, 0, .5) inset, -.1vw -.1vw .1vw rgba(255, 255, 255, .7) inset; } input.toggle + label::before { content: ''; width: 1.7vw; height: 1.7vw; position: absolute; left: .15vw; top: .15vw; border-radius: .85vw; background: hsl(32, 50%, 80%); box-shadow: .1vw .1vw .1vw rgba(255, 255, 255, .9) inset, -.1vw -.1vw .1vw rgba(0, 0, 0, .4) inset; } input.toggle:checked + label::before { left: 1.65vw; } @keyframes hypo-blink { from { opacity: .9; } to { opacity: .7; } } @keyframes selectable-blink { from { opacity: .3; } to { opacity: .1; } }