|
@import url('https://fonts.googleapis.com/css?family=Alfa+Slab+One|VT323|Oswald'); |
|
|
|
/* Basic Reset */ |
|
html, body, div, span, applet, object, iframe, |
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
|
a, abbr, acronym, address, big, cite, code, |
|
del, dfn, em, img, ins, kbd, q, s, samp, |
|
small, strike, strong, sub, sup, tt, var, |
|
b, u, i, center, |
|
dl, dt, dd, ol, ul, li, |
|
fieldset, form, label, legend, |
|
table, caption, tbody, tfoot, thead, tr, th, td, |
|
article, aside, canvas, details, embed, |
|
figure, figcaption, footer, header, hgroup, |
|
menu, nav, output, ruby, section, summary, |
|
time, mark, audio, video { |
|
margin: 0; |
|
padding: 0; |
|
border: 0; |
|
font-size: 100%; |
|
font: inherit; |
|
vertical-align: baseline; |
|
|
|
/* Disable mouse selection */ |
|
-webkit-user-select: none; /* Chrome/Safari */ |
|
-moz-user-select: none; /* Firefox */ |
|
-ms-user-select: none; /* IE10+ */ |
|
|
|
/* Rules below not implemented in browsers yet */ |
|
-o-user-select: none; |
|
user-select: none; |
|
} |
|
|
|
html{ |
|
background-image: url('http://cdn.backgroundhost.com/backgrounds/subtlepatterns/retina_wood.png'); |
|
} |
|
.inline{ |
|
display: inline-block; |
|
} |
|
|
|
.push{ |
|
position : relative; |
|
width:200px; |
|
height:200px; |
|
background-color : grey; |
|
border: 12px solid #333; |
|
} |
|
|
|
.rw{ |
|
margin-bottom:-4px; |
|
} |
|
|
|
.b-r{ |
|
border-bottom-right-radius : 100%; |
|
} |
|
|
|
.b-l{ |
|
border-bottom-left-radius : 100%; |
|
} |
|
|
|
.t-l{ |
|
border-top-left-radius : 100%; |
|
} |
|
|
|
.t-r{ |
|
border-top-right-radius : 100%; |
|
} |
|
|
|
.wrap{ |
|
width: 472px; |
|
height:472px; |
|
border-radius:100%; |
|
position: relative; |
|
text-align: center; |
|
margin:auto; |
|
background-color:#333; |
|
top:20vh; |
|
box-shadow: 0px 0px 12px #222; |
|
} |
|
|
|
.wrap-in{ |
|
position: relative; |
|
top:12px; |
|
} |
|
.center{ |
|
width:220px; |
|
height:220px; |
|
position : absolute; |
|
border-radius:100%; |
|
top:50%; |
|
left:50%; |
|
margin: -122px 0 0 -122px; |
|
background-color:#ECE7EE; |
|
border: 12px solid #333; |
|
} |
|
|
|
.brand{ |
|
font-family: 'Alfa Slab One', cursive; |
|
color : #222; |
|
font-size: 3.2em; |
|
margin-top : 35px; |
|
} |
|
|
|
.brand .small{ |
|
font-size : 0.3em; |
|
position : relative; |
|
top : -20px; |
|
} |
|
|
|
.count{ |
|
font-family: 'VT323', monospace; |
|
color : #DC0D29; |
|
padding : 0px; |
|
font-size : 2em; |
|
width : 60px; |
|
background-color: #32050C; |
|
position:relative; |
|
border : 4px solid #222; |
|
border-radius : 10px; |
|
margin:auto; |
|
} |
|
|
|
.round-btn{ |
|
width : 20px; |
|
height : 20px; |
|
position: relative; |
|
background-color : yellow; |
|
border-radius : 100%; |
|
border : 4px solid #444; |
|
box-shadow : 0px 2px 3px #222; |
|
margin:auto; |
|
top : -5px; |
|
} |
|
|
|
.round-btn:active{ |
|
box-shadow : 0 1px 1px #292929; |
|
top : -4px; |
|
} |
|
|
|
.clickable{ |
|
pointer-events : auto; |
|
cursor:pointer; |
|
} |
|
|
|
.unclickable{ |
|
pointer-events:none; |
|
} |
|
|
|
.led{ |
|
width:6px; |
|
height:6px; |
|
background-color: #32050C; |
|
border-radius : 100%; |
|
position: absolute; |
|
left:0; |
|
right: 0; |
|
margin : auto; |
|
border: 2px solid #222; |
|
top: -18px; |
|
} |
|
|
|
.led-on{ |
|
background-color:#DC0D29; |
|
} |
|
|
|
.led-off{ |
|
color:#430710; |
|
} |
|
|
|
.label{ |
|
color : #222; |
|
font-family : 'Oswald',Arial,sans; |
|
font-size:0.7em; |
|
margin-top:5px; |
|
text-align:center; |
|
} |
|
|
|
.display{ |
|
width : 60px; |
|
position:relative; |
|
text-align:center; |
|
} |
|
|
|
.btn-box{ |
|
width : 50px; |
|
position:relative; |
|
} |
|
|
|
.sw-slot{ |
|
height:20px; |
|
width:40px; |
|
background-color : #222; |
|
position:relative; |
|
top:5px; |
|
border-radius:2px; |
|
cursor: pointer; |
|
} |
|
|
|
.switch{ |
|
height:16px; |
|
width: 16px; |
|
border-radius:4px; |
|
background-color : #3193DE; |
|
position:relative; |
|
border : 2px solid #333; |
|
} |
|
|
|
.sw-on{ |
|
left:20px; |
|
} |
|
.rw.bot{ |
|
margin-top: 10px; |
|
} |
|
.full-red{ |
|
background-color : #FC0102; |
|
} |
|
|
|
.red{ |
|
background-color : #9f0f17; |
|
} |
|
|
|
.green{ |
|
background-color : #00a74a; |
|
} |
|
|
|
.yellow{ |
|
background-color : #cca707; |
|
} |
|
|
|
.blue{ |
|
background-color : #094a8f; |
|
} |
|
|
|
/*show this colors when the buttons are activated either by click or computer play*/ |
|
.yellow.light{ |
|
background-color : #fed93f; |
|
} |
|
|
|
.blue.light{ |
|
background-color : #1c8cff; |
|
} |
|
|
|
.red.light{ |
|
background-color : #ff4c4c; |
|
} |
|
|
|
.green.light{ |
|
background-color : #13ff7c; |
|
} |
|
|
|
/* Scaling for Mobile */ |
|
@media screen and (max-width: 500px){ |
|
|
|
.wrap { |
|
top: 100px; |
|
|
|
-moz-transform: scale(0.6); |
|
-ms-transform: scale(0.6); |
|
-o-transform: scale(0.6); |
|
-webkit-transform: scale(0.6); |
|
transform: scale(0.6); |
|
|
|
-o-transform-origin: 0 0; |
|
-ms-transform-origin: 0 0; |
|
-webkit-transform-origin: 0 0; |
|
-moz-transform-origin: 0 0; |
|
transform-origin: 0 0; |
|
|
|
left: 50%; |
|
margin-left: -142px; |
|
} |
|
} |