259 lines
4.2 KiB
CSS
259 lines
4.2 KiB
CSS
|
/** theme: base
|
||
|
*
|
||
|
* @package Fun with Binary
|
||
|
* @author Diogo Cordeiro <up201705417@fc.up.pt>
|
||
|
* @copyright 2018 Diogo Cordeiro.
|
||
|
* @license http://creativecommons.org/licenses/by/3.0/ Creative Commons Attribution 3.0 Unported
|
||
|
* @link https://www.diogo.site/projects/fun_with_binary/
|
||
|
*/
|
||
|
|
||
|
/* Resets css values */
|
||
|
/* http://meyerweb.com/eric/tools/css/reset/
|
||
|
v2.0 | 20110126
|
||
|
License: none (public domain)
|
||
|
*/
|
||
|
|
||
|
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: inherit;
|
||
|
vertical-align: baseline
|
||
|
}
|
||
|
|
||
|
/* HTML5 display-role reset for older browsers */
|
||
|
article, aside, details, figcaption, figure,
|
||
|
footer, header, hgroup, menu, nav, section
|
||
|
{
|
||
|
display: block
|
||
|
}
|
||
|
|
||
|
body
|
||
|
{
|
||
|
line-height: 1
|
||
|
}
|
||
|
|
||
|
ol,ul
|
||
|
{
|
||
|
list-style: none
|
||
|
}
|
||
|
|
||
|
blockquote,q
|
||
|
{
|
||
|
quotes: none
|
||
|
}
|
||
|
|
||
|
blockquote:before, blockquote:after,
|
||
|
q:before, q:after
|
||
|
{
|
||
|
content: '';
|
||
|
content: none
|
||
|
}
|
||
|
|
||
|
table
|
||
|
{
|
||
|
border-collapse: collapse;
|
||
|
border-spacing: 0
|
||
|
}
|
||
|
|
||
|
/* Custom styling */
|
||
|
|
||
|
/* Sets font type to Code */
|
||
|
@font-face,.container,.text
|
||
|
{
|
||
|
font-family:code, sans-serif
|
||
|
}
|
||
|
|
||
|
/* Sets overall font, size, and blocks user highlighting/dragging */
|
||
|
.container
|
||
|
{
|
||
|
width: 100%;
|
||
|
cursor: default;
|
||
|
-webkit-touch-callout: none;
|
||
|
-webkit-user-select: none;
|
||
|
-khtml-user-select: none;
|
||
|
-moz-user-select: none;
|
||
|
-ms-user-select: none;
|
||
|
user-select: none
|
||
|
}
|
||
|
|
||
|
/* Center leds and text */
|
||
|
.images,.text
|
||
|
{
|
||
|
text-align: center
|
||
|
}
|
||
|
|
||
|
/* Cursor over led shall be a pointer */
|
||
|
.led:hover
|
||
|
{
|
||
|
cursor: pointer
|
||
|
}
|
||
|
|
||
|
/* single led container */
|
||
|
.box
|
||
|
{
|
||
|
display: inline-block
|
||
|
}
|
||
|
|
||
|
/* led's corresponding power of 2 (a.k.a.: label) */
|
||
|
.labels
|
||
|
{
|
||
|
z-index: 0;
|
||
|
height: 2.5vw;
|
||
|
visibility: visible;
|
||
|
margin: 8% -5% 0px -15%;
|
||
|
font-size: 3vw
|
||
|
}
|
||
|
|
||
|
.box,.labels
|
||
|
{
|
||
|
position: relative
|
||
|
}
|
||
|
|
||
|
/* single led */
|
||
|
.led
|
||
|
{
|
||
|
margin-top: 1vh;
|
||
|
display: block;
|
||
|
z-index: 0;
|
||
|
opacity: 100;
|
||
|
width: 90%
|
||
|
}
|
||
|
|
||
|
/* Statement holder */
|
||
|
#statement
|
||
|
{
|
||
|
position: relative;
|
||
|
right: .5vw;
|
||
|
text-align: center;
|
||
|
margin-bottom: 1vh
|
||
|
}
|
||
|
|
||
|
/* Statement */
|
||
|
#statement_text
|
||
|
{
|
||
|
font-size: 2vw;
|
||
|
margin-top: 2vw;
|
||
|
margin-bottom: 3vw
|
||
|
}
|
||
|
|
||
|
/* Settings */
|
||
|
#settings
|
||
|
{
|
||
|
display: block;
|
||
|
text-align: center
|
||
|
}
|
||
|
|
||
|
#settings li
|
||
|
{
|
||
|
display: inline-block
|
||
|
}
|
||
|
|
||
|
.button
|
||
|
{
|
||
|
width: 20vw;
|
||
|
margin: auto 0 auto auto
|
||
|
}
|
||
|
|
||
|
.button
|
||
|
{
|
||
|
height: auto;
|
||
|
text-align: center;
|
||
|
margin: auto 0 auto auto
|
||
|
}
|
||
|
|
||
|
.switch
|
||
|
{
|
||
|
position: relative;
|
||
|
display: inline-block;
|
||
|
width: 60px;
|
||
|
height: 34px
|
||
|
}
|
||
|
|
||
|
.switch input
|
||
|
{
|
||
|
display:none
|
||
|
}
|
||
|
|
||
|
.toggle
|
||
|
{
|
||
|
transition: none;
|
||
|
-webkit-transition: none;
|
||
|
-moz-transition: none;
|
||
|
-o-transition: none
|
||
|
}
|
||
|
|
||
|
.slider
|
||
|
{
|
||
|
position: absolute;
|
||
|
cursor: pointer;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
bottom: 0;
|
||
|
background-color: #ccc;
|
||
|
-webkit-transition: .4s;
|
||
|
transition: .4s
|
||
|
}
|
||
|
|
||
|
.slider:before
|
||
|
{
|
||
|
position: absolute;
|
||
|
content: "";
|
||
|
height: 26px;
|
||
|
width: 26px;
|
||
|
left: 4px;
|
||
|
bottom: 4px;
|
||
|
background-color: white;
|
||
|
-webkit-transition: .4s;
|
||
|
transition: .4s
|
||
|
}
|
||
|
|
||
|
input:checked + .slider
|
||
|
{
|
||
|
background-color: #2196F3
|
||
|
}
|
||
|
|
||
|
input:focus + .slider
|
||
|
{
|
||
|
box-shadow: 0 0 1px #2196F3
|
||
|
}
|
||
|
|
||
|
input:checked + .slider:before
|
||
|
{
|
||
|
-webkit-transform: translateX(26px);
|
||
|
-ms-transform: translateX(26px);
|
||
|
transform: translateX(26px)
|
||
|
}
|
||
|
|
||
|
/* Rounded sliders */
|
||
|
.slider.round
|
||
|
{
|
||
|
border-radius: 34px
|
||
|
}
|
||
|
|
||
|
.slider.round:before
|
||
|
{
|
||
|
border-radius: 50%
|
||
|
}
|
||
|
|
||
|
/* Footer/Credits */
|
||
|
#footer
|
||
|
{
|
||
|
font-size: 12px;
|
||
|
margin-top: 3vw
|
||
|
}
|