style.min.css

/**
 *  exams: The clock used and projected during examinations in the main hall.
 *  <https://github.com/rgshw/exams/>
 *  Copyright (C) 2018 Matt Cowley (MattIPv4) (me@mattcowley.co.uk)
 *
 *  This program is free software: you can redistribute it and/or modify
 *   it under the terms of the GNU Affero General Public License as published
 *   by the Free Software Foundation, either version 3 of the License, or
 *   (at your option) any later version.
 *  This program is distributed in the hope that it will be useful,
 *   but WITHOUT ANY WARRANTY; without even the implied warranty of
 *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *   GNU General Public License for more details.
 *  You should have received a copy of the GNU Affero General Public License
 *   along with this program. If not, please see
 *   <https://github.com/rgshw/exams/blob/master/LICENSE> or <http://www.gnu.org/licenses/>.
 **/
@import "https://fonts.googleapis.com/css?family=Oxygen|Oxygen+Mono";html{background:#fff}body{background:#fff;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:'Oxygen',sans-serif}i{font-style:normal;font-weight:700;font-size:25px}h2,h3{font-size:2.5vH;letter-spacing:1px;font-variant:small-caps;position:absolute;left:50%;top:30%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}h2{font-size:3.5vH;top:25%;letter-spacing:3px;font-weight:700}.date{width:100%;height:5vH;line-height:5vH;border-radius:2px;text-align:center;position:absolute;left:50%;bottom:27%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.date > i{font-size:3.5vH;font-weight:200;font-style:normal;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.date > b{font-size:5vH;font-family:'Oxygen Mono',monospace;font-weight:200;font-style:normal;-webkit-transform:translateX(-50%);transform:translateX(-50%)}section.border-clock{background:#4165B3;width:95vH;height:95vH;border:10px solid #4165B3;border-radius:100%;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);box-shadow:0 0 15px 0 rgba(0,0,0,0.5)}section.clock{width:calc(95vH - 28px);height:calc(95vH - 28px);background:#fff;color:#000;border-radius:100%;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}section.clock div.minutes,section.clock div.hours,section.clock div.seconds{width:1px;height:1px;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transform-origin:50% 0;transform-origin:50% 0;box-shadow:0 0 5px 0 rgba(0,0,0,0.5)}section.clock div.seconds::before,section.clock div.minutes::before,section.clock div.hours::before{content:"";position:absolute;bottom:50%;left:50%;-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-transform:translateX(-50%);transform:translateX(-50%);box-shadow:0 0 5px 0 rgba(0,0,0,0.5)}section.clock div.seconds::before{width:4px;height:40vH;background-color:#EB6444}section.clock div.minutes::before{width:6px;height:38vH;background-color:#4165B3;border-radius:3px}section.clock div.hours::before{width:5px;height:28vH;background-color:#4165B3;border-radius:3px}section.clock .center{width:2vH;height:2vH;background-color:#FDFAF7;border:2px solid #EB6444;border-radius:100%;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}section.clock span{display:block;width:2px;height:95%;position:absolute;top:50%;left:50%;z-index:-1}section.clock span::after{content:"";background-color:#A0A1A4;position:absolute;width:100%;height:10px;top:0;left:0}section.clock span::before{content:"";background-color:#A0A1A4;position:absolute;width:100%;height:10px;bottom:0;left:0}section.clock span.fives::after,section.clock span.fives::before{height:20px}section.clock ul{height:42%;width:0;position:absolute;bottom:50%;left:50%}section.clock ul li{height:100%;position:absolute;top:0;left:0;-webkit-transform-origin:50% 100%;transform-origin:50% 100%;list-style:none}section.clock ul li i{position:absolute;top:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}