Scoreboard Styles

scoreboard.css

@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700);*{outline:0 none;padding:0;margin:0}body{font-family:Quicksand,sans-serif;background:#e9e9e9}.grid{display:grid;grid-gap:15px}@-webkit-keyframes beat{0%{-webkit-transform:scale(1.5);transform:scale(1.5)}20%{-webkit-transform:scale(1.4);transform:scale(1.4)}40%{-webkit-transform:scale(1.3);transform:scale(1.3)}60%{-webkit-transform:scale(1.2);transform:scale(1.2)}80%{-webkit-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes beat{0%{-webkit-transform:scale(1.5);transform:scale(1.5)}20%{-webkit-transform:scale(1.4);transform:scale(1.4)}40%{-webkit-transform:scale(1.3);transform:scale(1.3)}60%{-webkit-transform:scale(1.2);transform:scale(1.2)}80%{-webkit-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);transform:scale(1)}}.scoreboard{width:600px;min-height:250px;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.scoreboard .scoreboard-title{font-size:35px;text-align:center;color:#338f66}.scoreboard .scoreboard-subtitle{text-align:center;font-size:18px;padding-bottom:25px;color:#040c08}.scoreboard .scoreboard-header{color:#fff;background-color:#4fc08d;grid-template-columns:1fr 145px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-top-left-radius:5px}.scoreboard .scoreboard-content{background-color:#fff}.scoreboard .scoreboard-footer{background-color:#4fc08d;padding:10px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.player-form{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.player-form .player-input{width:100%;margin-right:10px}.player-form .player-input,.player-form .submit-button{border:0;padding:10px;border-radius:3px;text-transform:uppercase}.player-form .submit-button{width:100px;font-size:10px;background-color:#338f66;color:#fff;cursor:pointer}.player{padding:15px 10px;grid-template-columns:25px 1fr 125px;border-bottom:1px solid;border-color:#eee;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.player:last-child{border:0}.player .player-name{display:-webkit-box;display:-ms-flexbox;display:flex;text-transform:uppercase;font-weight:700;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.player .player-name svg{width:15px;height:15px;margin-right:10px;fill:#9d9d9d}.player .player-name svg.is-high-score{-webkit-animation:beat .6s ease-in;animation:beat .6s ease-in;fill:#f0c664}.player .player-controls{grid-template-columns:repeat(3,1fr);-webkit-box-align:center;-ms-flex-align:center;align-items:center}.player .player-controls .score{text-align:center;font-size:18px;font-weight:700}.player .player-controls .btn{border:0;font-size:16px;padding:10px 14px;background-color:#4fc08d;cursor:pointer;color:#fff;border-radius:3px}.player .player-controls .btn:disabled,.player .player-controls .btn [disabled]{color:#d0d0d0;background-color:#e9e9e9}.player .player-controls .btn:disabled:hover,.player .player-controls .btn [disabled]:hover{background-color:#e9e9e9}.player .player-controls .btn:hover{background-color:#41b580}.statistics{width:150px;justify-items:center;padding:10px;font-size:14px}.statistics .row-label{text-align:right;text-transform:uppercase;padding-right:5px;font-weight:700}.stopwatch{padding:10px;text-align:center;background-color:#338f66;border-top-right-radius:5px}.stopwatch .title{font-size:10px;text-transform:uppercase}.stopwatch .stopwatch-time{font-weight:700;margin-bottom:10px;display:block}.stopwatch .stopwatch-controls{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.stopwatch .stopwatch-controls .btn{border:0;width:100%;border-radius:3px;background-color:#1f573e;padding:5px;font-size:9px;text-transform:uppercase;color:#fff;cursor:pointer}.stopwatch .stopwatch-controls .btn.handler{margin-right:5px}