main.css 11 KB

1
  1. @font-face{font-family:'Smart Regular';src:url(../fonts/smart-regular.eot);src:url(../fonts/smart-regular.eot?#iefix) format('embedded-opentype'),url(../fonts/smart-regular.woff2) format('woff2'),url(../fonts/smart-regular.woff) format('woff'),url(../fonts/smart-regular.ttf) format('truetype');font-weight:400;font-style:normal}*{margin:0;padding:0;box-sizing:border-box}html{overflow-y:auto;min-height:100%;position:relative;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}::-moz-selection{background:#261e26;color:#fefefe;text-shadow:none}::selection{background:#261e26;color:#fefefe;text-shadow:none}article,aside,figure,footer,header,nav,section{display:block}pre{font-size:12px}audio,canvas,video{display:inline-block}[hidden],audio:not([controls]){display:none}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle}svg:not(:root){overflow:hidden}form{margin:0}label{cursor:pointer}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline}body,html{color:#424242;font-family:'Open Sans',sans-serif;background:#fefefe;font-size:16px;line-height:1.5;font-weight:400}body{margin-bottom:100px}a{font-size:1rem;color:#299cad;text-decoration:underline}a:hover{color:#2eafc2;text-decoration:none;transition:all .2s ease-in-out}a:focus{outline:0}p{text-align:left;margin-bottom:1em;font-size:1rem}strong{font-weight:600}h1{font-family:'Cherry Swash',cursive;font-weight:400;font-size:2rem;text-align:center;color:#423443;margin-bottom:.5em}h2{font-weight:600;font-size:1.5rem;margin:1em 0 .5em;color:#503f51}.clearfix::before,.clearfix:after{content:"";display:table}.clearfix:after{clear:both}header{margin:0 auto;max-width:800px;width:100%;height:50px}#container-wrapper{max-width:960px;width:100%;height:auto;padding:1em 2em;margin:0 auto;clear:both}#container{width:100%;min-height:600px;margin:0 0 20px;float:left}button,input{font-family:'Open Sans';outline:0}input:required{box-shadow:none}.btn{width:15%;height:50px;display:block;font-size:1.125rem;border-radius:2px;border:0;border-bottom:2px solid #299cad;text-shadow:0 1px 2px rgba(0,0,0,.25);background:#2eafc2;color:#fff;cursor:pointer;float:right;box-shadow:inset 0 -2px #299cad;position:relative}.btn:hover{background:#39bdd0;border-bottom:2px solid #2ca8ba;box-shadow:inset 0 -2px #2ca8ba;transition:all .2s ease-in-out}.btn:active{top:1px}a.btn{width:120px;line-height:46px;text-align:center;text-decoration:none}a.btn:hover{color:#fff}.btn--red{background:#d12521;border-color:#bb211e;box-shadow:inset 0 -2px #bb211e;margin-right:10px}.btn--red:hover{background:#de322e;border-bottom:2px solid #c82320;box-shadow:inset 0 -2px #c82320;transition:all .2s ease-in-out}footer{position:absolute;bottom:0;left:0;width:100%;height:100px;line-height:2em;text-align:center;border-bottom:8px solid #c3beb6}footer a,footer p{font-size:.85rem;margin-bottom:0}footer a{color:#6d665a}footer a:hover{color:#7b7365}#footer{margin:0 auto;max-width:960px;padding:3em 1em 0}#container-wrapper,footer{min-width:480px}.modal-mask{opacity:1;visibility:visible;cursor:pointer;position:fixed;top:0;left:0;height:100%;width:100%;background:rgba(0,0,0,.7);z-index:10;transition:all .2s ease-in-out}.modal-mask.hidden{opacity:0;visibility:hidden}.modal-mask>p{color:#eee;margin:2em}.modal-mask>p strong{color:#fff}.modal{width:420px;height:180px;position:fixed;background:#fff;top:50%;left:50%;margin-left:-210px;margin-top:-90px;border:8px solid #5e4a60;box-shadow:0 10px 30px #333;cursor:auto;z-index:15}.modal p{text-align:center;padding:1.5em}.modal .btn{position:absolute;bottom:1em}.modal .btn.ok{left:50%;margin-left:-60px}.modal .btn:active{top:auto;bottom:calc(1em + 1px)}.knight{margin:2em auto .5em;display:block}#create-game{width:100%;height:200px;margin:5em auto 0}#create-game fieldset{border:0;text-align:right;margin-bottom:1em;width:80%}#create-game fieldset input{margin-left:1em;width:100px;outline:0;height:40px;line-height:30px;padding-left:1em;font-size:1.125rem;color:#424242;border:2px solid #2b222c;border-left:4px solid #2eafc2}#create-game fieldset label{position:relative}#create-game fieldset label::before{position:absolute;content:'Up to 50';top:0;right:2em;margin-top:-2.5em;font-size:.75rem}#game-link{width:80%;height:50px;line-height:50px;font-size:1.125rem;color:#fff;border:0;border-bottom:2px solid #2b222c;border-left:4px solid #2eafc2;text-shadow:0 1px 2px rgba(0,0,0,.25);background:#423443;padding:0 1em;float:left;border-radius:2px;box-shadow:inset 0 -2px #2b222c}#game-link:hover{background:#4a3b4c;border-bottom:2px solid #3a2d3a;box-shadow:inset 0 -2px #3a2d3a;transition:all .2s ease-in-out}#game-link:focus{color:#eee}#game-status{font-family:'Cherry Swash',cursive;font-size:1.275rem;color:#bb211e;width:100%;text-align:center;margin:1em 0;float:left}#chat-wrapper{position:absolute;width:270px;right:10px;top:99px;border:4px solid #fff;background:#e6e3e0}#chat-wrapper.hidden{display:none}#chat-wrapper h4{font-family:'Cherry Swash',cursive;font-size:1.225rem;height:3em;line-height:3em;margin:5px 5%;text-align:center;color:#423443}#chat-wrapper a.close{position:absolute;top:0;right:0;background:#423443;color:#fff;font-size:1.125rem;padding:0 7px;text-decoration:none;font-weight:600;margin:1em 5%;cursor:pointer}#chat-wrapper a.close:hover{text-decoration:none;background:#503f51}#chat-wrapper>span{font-size:.9rem;margin:5px 5%;display:block}#chat-list{position:relative;top:0;max-height:300px;width:100%;overflow-y:scroll;list-style-type:none}#chat-list li{font-size:.9rem;padding:10px;margin:5px auto;width:90%;border-radius:5px;position:relative}#chat-list li::before{position:absolute;content:'';top:10px}#chat-list li.black{background:#424242;color:#fff}#chat-list li.white{background:#fff;color:#444}#chat-list li.left::before{left:0;margin-left:-7px;border-bottom:7px solid transparent;border-top:7px solid transparent}#chat-list li.black.left::before{border-right:7px solid #424242}#chat-list li.white.left::before{border-right:7px solid #fff}#chat-list li.right::before{right:0;margin-right:-7px;border-bottom:7px solid transparent;border-top:7px solid transparent}#chat-list li.black.right::before{border-left:7px solid #424242}#chat-list li.white.right::before{border-left:7px solid #fff}#chat-form input{width:100%;padding:15px 10px;outline:0;font-size:.9rem;border:4px solid #e6e3e0}#chat-form input.black{background:#444;color:#fff}#chat-form input.white{background:#fff;color:#444}#chat-icon{text-decoration:none;color:#248a99;margin-right:1em;line-height:50px;height:50px;float:right!important;cursor:pointer;font-weight:600}#chat-icon:hover{color:#299cad}#chat-icon img{vertical-align:middle}#chat-counter{position:absolute;margin-left:-.5em;margin-top:-.5em;border-radius:50%;background:#d12521;width:2em;height:2em;text-align:center;line-height:2em;color:#fff}#board-moves-wrapper{width:100%;max-width:800px;min-height:600px;margin:0 auto}#moves{overflow-x:hidden;overflow-y:auto;width:270px;height:518px;background:#e6e3e0;box-shadow:inset 0 -4px #dad7d2;margin-left:10px;border-radius:2px;border-bottom:4px solid #dad7d2;display:block;float:left}#moves thead{font-family:'Cherry Swash',cursive;width:270px;height:3em;line-height:3em;font-size:1.225rem;color:#423443;float:left;text-align:center}#moves thead th,#moves thead tr{width:100%;text-align:center;float:left}#moves tbody tr{width:270px;float:left}#moves tbody tr td{width:85px;text-align:left;line-height:20px;margin:0 10px;float:left}#moves tbody tr td:first-child{width:40px;margin-right:0}#board-wrapper{float:left}.chessboard{border:8px solid #5e4a60;border-radius:2px;width:500px;height:500px;float:left}.chessboard tr{width:500px;height:62.5px;float:left;display:block}.chessboard tr td{width:62.5px;height:62.5px;line-height:62.5px;text-align:center;background:#fefefe;display:block;float:left}.chessboard tr td.moving,.chessboard tr td.selected{background:#ef9e9c!important}.chessboard tr td.from{background:#8cd8e4!important}.chessboard tr td.to{background:#77d1df!important}.chessboard tr td a{font-family:'Smart Regular';width:62.5px;height:62.5px;font-size:3.5rem;color:#424242;text-decoration:none;display:inline-block;cursor:default}.chessboard tr td a.in-check{text-shadow:0 0 1rem #d12521}.chessboard tr td a[draggable=true]{cursor:pointer}.chessboard tr:nth-child(even) td:nth-child(odd),.chessboard tr:nth-child(odd) td:nth-child(even){background:#dad7d2}.feedback{color:#424242;line-height:28px;margin-top:1em;display:block;clear:left;float:left}.feedback .icon{font-family:'Smart Regular';font-size:2rem}.promotion{line-height:28px;text-indent:28px;margin-top:1em;display:block;float:right}#clock{width:148px;height:50px;position:absolute;text-align:center;border:4px solid #e6e3e0}#clock li{width:70px;display:inline-block;line-height:42px;opacity:.9;position:absolute}#clock li.white{left:0;color:#424242;background:#fff}#clock li.black{right:0;color:#fff;background:#424242}#clock li.ticking{z-index:1;font-size:1.125rem;opacity:1;box-shadow:0 0 5px #e6e3e0;-webkit-transform:scale(1.2);transform:scale(1.2);transition:all .2s ease-in-out}span#game-type{position:absolute;line-height:50px;margin-left:175px;opacity:.9}.rematch,.resign{margin-right:10px}#sounds-label{width:800px;height:50px;line-height:50px;display:block;margin:0 auto}#captured-pieces{position:absolute;width:100px;margin-left:-100px;font-size:2rem;line-height:2rem;height:517px;overflow-y:auto}#captured-pieces ul{width:50px;min-height:5px;float:left;display:block;text-align:center}#captured-pieces ul li{list-style-type:none;font-family:'Smart Regular'}.alpha{font-size:1.125rem}.center{text-align:center!important}@media only screen and (min-width:760px) and (max-width:900px){#board-moves-wrapper,#sounds-label,header{max-width:760px}#container-wrapper{max-width:900px;padding:1em 10px}#moves{margin-left:0;float:right;height:516px}#moves,#moves tbody tr,#moves thead{width:200px}#moves tbody tr td{width:70px;margin:0 5px}#moves tbody tr td:first-child{width:30px;margin-right:5px}}@media only screen and (max-width:999px){#captured-pieces{display:none}}@media only screen and (min-width:530px) and (max-width:759px){#board-moves-wrapper,#sounds-label,header{max-width:530px}}@media only screen and (max-width:759px){html{font-size:14px}#create-game>form fieldset{width:100%;text-align:center}#create-game>form fieldset label{display:block;line-height:45px;padding-left:0;font-size:1rem}#create-game>form fieldset label::before{margin-left:-6em;margin-top:0;right:auto}#game-type{display:none}#container-wrapper{max-width:759px;padding:1em 5px}span.feedback{float:right;clear:none}#moves{margin-left:0;margin-top:.5em;height:258px}}@media only screen and (max-width:529px){#board-moves-wrapper,#sounds-label,header{max-width:470px}#game-link,footer a,footer p{font-size:.75rem}ul#clock{width:118px}ul#clock li{width:55px}#container-wrapper{max-width:529px;padding:1em 5px}.chessboard{border:4px solid #5e4a60;width:456px;height:456px}.chessboard tr{width:456px;height:57px}.chessboard tr td{width:57px;height:57px;line-height:57px}.chessboard tr td a{width:57px;height:57px;font-size:3.5rem}}