-.pure-button:focus,
-a:active,
-a:hover {
- outline:0
-}
-.pure-table,
-table {
- border-collapse:collapse;
- border-spacing:0
-}
-html {
- font-family:sans-serif;
- -ms-text-size-adjust:100%;
+/*!
+Pure v3.0.0
+Copyright 2013 Yahoo!
+Licensed under the BSD License.
+https://github.com/pure-css/pure/blob/master/LICENSE
+*/
+/*!
+normalize.css v | MIT License | https://necolas.github.io/normalize.css/
+Copyright (c) Nicolas Gallagher and Jonathan Neal
+*/
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html {
+ line-height:1.15;
-webkit-text-size-adjust:100%
}
body {
margin:0
}
-pre {
- font-family:inherit;
- font-weight:700;
- display:contents;
- white-space:pre-wrap;
- margin:0
-}
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-menu,
-nav,
-section,
-summary {
+main {
display:block
}
-audio,
-canvas,
-progress,
-video {
- display:inline-block;
- vertical-align:baseline
+h1 {
+ font-size:2em;
+ margin:.67em 0
}
-audio:not([controls]) {
- display:none;
- height:0
+hr {
+ box-sizing:content-box;
+ height:0;
+ overflow:visible
}
-[hidden],
-template {
- display:none
+pre {
+ font-family:monospace,monospace;
+ font-size:1em
}
a {
background-color:transparent
}
abbr[title] {
- border-bottom:1px dotted
+ border-bottom:none;
+ text-decoration:underline;
+ -webkit-text-decoration:underline dotted;
+ text-decoration:underline dotted
}
b,
-optgroup,
strong {
- font-weight:700
-}
-dfn {
- font-style:italic
+ font-weight:bolder
}
-h1 {
- font-size:2em;
- margin:.67em 0
-}
-mark {
- background:#ff0;
- color:#000
+code,
+kbd,
+samp {
+ font-family:monospace,monospace;
+ font-size:1em
}
small {
font-size:80%
position:relative;
vertical-align:baseline
}
-sup {
- top:-.5em
-}
sub {
bottom:-.25em
}
-img {
- border:0
-}
-svg:not(:root) {
- overflow:hidden
-}
-figure {
- margin:1em 40px
-}
-hr {
- border:0;
- height:2px;
- width:80%;
- background-image:-webkit-linear-gradient(left,#292929,#1f8dd6,#292929);
- background-image:-moz-linear-gradient(left,#292929,#1f8dd6,#292929);
- background-image:-ms-linear-gradient(left,#292929,#1f8dd6,#292929);
- background-image:-o-linear-gradient(left,#292929,#1f8dd6,#292929)
-}
-textarea {
- overflow:auto
+sup {
+ top:-.5em
}
-code,
-kbd,
-samp {
- font-family:monospace,monospace;
- font-size:1em
+img {
+ border-style:none
}
button,
input,
optgroup,
select,
textarea {
- color:inherit;
- font:inherit
+ font-family:inherit;
+ font-size:100%;
+ line-height:1.15;
+ margin:0
}
-.pure-button,
+button,
input {
- line-height:normal
-}
-button {
overflow:visible
}
button,
select {
text-transform:none
}
-button,
-html input[type=button],
-input[type=reset],
-input[type=submit] {
- -webkit-appearance:button;
- cursor:pointer;
- letter-spacing:.05em;
- background:transparent;
- text-transform:uppercase;
- color:#aaa;
- font-size:90%;
- border:2px solid #2497e3;
- border-radius:6px;
- box-shadow:inset 0 1px 11px 0 #1f8dd6
-}
-button[disabled],
-html input[disabled] {
- cursor:default
+[type=button],
+[type=reset],
+[type=submit],
+button {
+ -webkit-appearance:button
}
-button::-moz-focus-inner,
-input::-moz-focus-inner {
- border:0;
+[type=button]::-moz-focus-inner,
+[type=reset]::-moz-focus-inner,
+[type=submit]::-moz-focus-inner,
+button::-moz-focus-inner {
+ border-style:none;
padding:0
}
-input[type=checkbox],
-input[type=radio] {
+[type=button]:-moz-focusring,
+[type=reset]:-moz-focusring,
+[type=submit]:-moz-focusring,
+button:-moz-focusring {
+ outline:1px dotted ButtonText
+}
+fieldset {
+ padding:.35em .75em .625em
+}
+legend {
+ box-sizing:border-box;
+ color:inherit;
+ display:table;
+ max-width:100%;
+ padding:0;
+ white-space:normal
+}
+progress {
+ vertical-align:baseline
+}
+textarea {
+ overflow:auto
+}
+[type=checkbox],
+[type=radio] {
box-sizing:border-box;
- vertical-align:middle;
padding:0
}
-input[type=number]::-webkit-inner-spin-button,
-input[type=number]::-webkit-outer-spin-button {
+[type=number]::-webkit-inner-spin-button,
+[type=number]::-webkit-outer-spin-button {
height:auto
}
-input[type=search] {
+[type=search] {
-webkit-appearance:textfield;
- box-sizing:content-box
+ outline-offset:-2px
}
-.pure-button,
-.pure-form input:not([type]),
-.pure-menu {
- box-sizing:border-box
-}
-input[type=search]::-webkit-search-cancel-button,
-input[type=search]::-webkit-search-decoration {
+[type=search]::-webkit-search-decoration {
-webkit-appearance:none
}
-fieldset {
- border:1px solid silver;
- margin:0 2px;
- padding:.35em .625em .75em
+::-webkit-file-upload-button {
+ -webkit-appearance:button;
+ font:inherit
}
-legend,
-td,
-th {
- padding:0
+details {
+ display:block
}
-legend {
- border:0
+summary {
+ display:list-item
+}
+template {
+ display:none
+}
+[hidden] {
+ display:none
+}
+html {
+ font-family:sans-serif
}
.hidden,
[hidden] {
display:block
}
.pure-g {
- letter-spacing:-.31em;
- text-rendering:optimizespeed;
- font-family:FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif;
- display:-webkit-box;
- display:-webkit-flex;
- display:-ms-flexbox;
display:flex;
- -webkit-flex-flow:row wrap;
- -ms-flex-flow:row wrap;
flex-flow:row wrap;
- -webkit-align-content:flex-start;
- -ms-flex-line-pack:start;
align-content:flex-start
}
-@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
- table .pure-g {
- display:block
- }
-}
-.opera-only :-o-prefocus,
-.pure-g {
- word-spacing:-.43em
+.pure-u {
+ display:inline-block;
+ vertical-align:top
}
-.pure-u,
.pure-u-1,
.pure-u-1-1,
.pure-u-1-12,
.pure-u-7-8,
.pure-u-8-24,
.pure-u-9-24 {
+ display:inline-block;
letter-spacing:normal;
word-spacing:normal;
- vertical-align:text-top;
- text-rendering:auto;
- display:inline-block;
- zoom:1;
- margin:20px 0 0
-}
-.pure-g [class*=pure-u] {
- font-family:sans-serif
+ vertical-align:top;
+ text-rendering:auto
}
.pure-u-1-24 {
width:4.1667%
}
.pure-button {
display:inline-block;
- zoom:1;
+ line-height:normal;
white-space:nowrap;
vertical-align:middle;
text-align:center;
cursor:pointer;
-webkit-user-drag:none;
-webkit-user-select:none;
- -moz-user-select:none;
- -ms-user-select:none;
- user-select:none
+ user-select:none;
+ box-sizing:border-box
}
.pure-button::-moz-focus-inner {
padding:0;
}
.opera-only :-o-prefocus,
.pure-button-group {
- word-spacing:-.43em
+ word-spacing:-0.43em
+}
+.pure-button-group .pure-button {
+ letter-spacing:normal;
+ word-spacing:normal;
+ vertical-align:top;
+ text-rendering:auto
}
.pure-button {
font-family:inherit;
font-size:100%;
padding:.5em 1em;
- color:#444;
color:rgba(0,0,0,.8);
- border:1px solid #999;
- border:transparent;
- background-color:#E6E6E6;
+ border:none transparent;
+ background-color:#e6e6e6;
text-decoration:none;
border-radius:2px
}
.pure-button-hover,
+.pure-button:focus,
.pure-button:hover {
- border:2px solid #61c6ff;
- box-shadow:inset 0 1px 15px 0 #1f8dd6;
- filter:alpha(opacity=90);
- background-image:-webkit-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
background-image:linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1))
}
+.pure-button:focus {
+ outline:0
+}
.pure-button-active,
.pure-button:active {
box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 0 6px rgba(0,0,0,.2) inset;
- border-color:#000\9
+ border-color:#000
}
.pure-button-disabled,
.pure-button-disabled:active,
.pure-button[disabled] {
border:none;
background-image:none;
- filter:alpha(opacity=40);
opacity:.4;
cursor:not-allowed;
box-shadow:none;
color:#fff
}
.pure-button-group .pure-button {
- letter-spacing:normal;
- word-spacing:normal;
- vertical-align:top;
- text-rendering:auto;
margin:0;
border-radius:0;
- border-right:1px solid #111;
border-right:1px solid rgba(0,0,0,.2)
}
.pure-button-group .pure-button:first-child {
border-bottom-right-radius:2px;
border-right:none
}
-.pure-form input[type=password],
-.pure-form input[type=email],
-.pure-form input[type=url],
+.pure-form input[type=color],
.pure-form input[type=date],
-.pure-form input[type=month],
-.pure-form input[type=time],
-.pure-form input[type=datetime],
.pure-form input[type=datetime-local],
-.pure-form input[type=week],
-.pure-form input[type=tel],
-.pure-form input[type=color],
+.pure-form input[type=datetime],
+.pure-form input[type=email],
+.pure-form input[type=month],
.pure-form input[type=number],
+.pure-form input[type=password],
.pure-form input[type=search],
+.pure-form input[type=tel],
.pure-form input[type=text],
+.pure-form input[type=time],
+.pure-form input[type=url],
+.pure-form input[type=week],
.pure-form select,
.pure-form textarea {
- background:#292828;
padding:.5em .6em;
display:inline-block;
border:1px solid #ccc;
- box-shadow:inset 0 1px 10px #1f8dd6;
- border-radius:8px;
+ box-shadow:inset 0 1px 3px #ddd;
+ border-radius:4px;
vertical-align:middle;
box-sizing:border-box
}
display:inline-block;
border:1px solid #ccc;
box-shadow:inset 0 1px 3px #ddd;
- border-radius:4px
+ border-radius:4px;
+ box-sizing:border-box
}
.pure-form input[type=color] {
- padding:.1em .4em
+ padding:.2em .5em
}
-.pure-form input:not([type]):focus,
-.pure-form input[type=password]:focus,
-.pure-form input[type=email]:focus,
-.pure-form input[type=url]:focus,
+.pure-form input[type=color]:focus,
.pure-form input[type=date]:focus,
-.pure-form input[type=month]:focus,
-.pure-form input[type=time]:focus,
-.pure-form input[type=datetime]:focus,
.pure-form input[type=datetime-local]:focus,
-.pure-form input[type=week]:focus,
-.pure-form input[type=tel]:focus,
-.pure-form input[type=color]:focus,
+.pure-form input[type=datetime]:focus,
+.pure-form input[type=email]:focus,
+.pure-form input[type=month]:focus,
.pure-form input[type=number]:focus,
+.pure-form input[type=password]:focus,
.pure-form input[type=search]:focus,
+.pure-form input[type=tel]:focus,
.pure-form input[type=text]:focus,
+.pure-form input[type=time]:focus,
+.pure-form input[type=url]:focus,
+.pure-form input[type=week]:focus,
.pure-form select:focus,
.pure-form textarea:focus {
outline:0;
- border-color:#129FEA
+ border-color:#129fea
+}
+.pure-form input:not([type]):focus {
+ outline:0;
+ border-color:#129fea
}
-.pure-form input[type=file]:focus,
.pure-form input[type=checkbox]:focus,
+.pure-form input[type=file]:focus,
.pure-form input[type=radio]:focus {
- outline:#129FEA auto 1px
+ outline:thin solid #129FEA;
+ outline:1px auto #129FEA
}
.pure-form .pure-checkbox,
.pure-form .pure-radio {
+ margin:.5em 0;
display:block
}
-.pure-form input:not([type])[disabled],
-.pure-form input[type=password][disabled],
-.pure-form input[type=email][disabled],
-.pure-form input[type=url][disabled],
+.pure-form input[type=color][disabled],
.pure-form input[type=date][disabled],
-.pure-form input[type=month][disabled],
-.pure-form input[type=time][disabled],
-.pure-form input[type=datetime][disabled],
.pure-form input[type=datetime-local][disabled],
-.pure-form input[type=week][disabled],
-.pure-form input[type=tel][disabled],
-.pure-form input[type=color][disabled],
+.pure-form input[type=datetime][disabled],
+.pure-form input[type=email][disabled],
+.pure-form input[type=month][disabled],
.pure-form input[type=number][disabled],
+.pure-form input[type=password][disabled],
.pure-form input[type=search][disabled],
+.pure-form input[type=tel][disabled],
.pure-form input[type=text][disabled],
+.pure-form input[type=time][disabled],
+.pure-form input[type=url][disabled],
+.pure-form input[type=week][disabled],
.pure-form select[disabled],
.pure-form textarea[disabled] {
cursor:not-allowed;
background-color:#eaeded;
color:#cad2d3
}
+.pure-form input:not([type])[disabled] {
+ cursor:not-allowed;
+ background-color:#eaeded;
+ color:#cad2d3
+}
.pure-form input[readonly],
.pure-form select[readonly],
.pure-form textarea[readonly] {
color:#b94a48;
border-color:#e9322d
}
-.pure-form input[type=file]:focus:invalid:focus,
.pure-form input[type=checkbox]:focus:invalid:focus,
+.pure-form input[type=file]:focus:invalid:focus,
.pure-form input[type=radio]:focus:invalid:focus {
outline-color:#e9322d
}
.pure-form select {
height:2.25em;
border:1px solid #ccc;
- background:#292929
+ background-color:#fff
}
.pure-form select[multiple] {
height:auto
color:#333;
border-bottom:1px solid #e5e5e5
}
-.pure-form-stacked input:not([type]),
-.pure-form-stacked input[type=password],
-.pure-form-stacked input[type=email],
-.pure-form-stacked input[type=url],
+.pure-form-stacked input[type=color],
.pure-form-stacked input[type=date],
-.pure-form-stacked input[type=month],
-.pure-form-stacked input[type=time],
-.pure-form-stacked input[type=datetime],
.pure-form-stacked input[type=datetime-local],
-.pure-form-stacked input[type=week],
-.pure-form-stacked input[type=tel],
-.pure-form-stacked input[type=color],
+.pure-form-stacked input[type=datetime],
+.pure-form-stacked input[type=email],
.pure-form-stacked input[type=file],
+.pure-form-stacked input[type=month],
.pure-form-stacked input[type=number],
+.pure-form-stacked input[type=password],
.pure-form-stacked input[type=search],
+.pure-form-stacked input[type=tel],
.pure-form-stacked input[type=text],
+.pure-form-stacked input[type=time],
+.pure-form-stacked input[type=url],
+.pure-form-stacked input[type=week],
.pure-form-stacked label,
.pure-form-stacked select,
.pure-form-stacked textarea {
display:block;
- margin:0 0 5px
+ margin:.25em 0
+}
+.pure-form-stacked input:not([type]) {
+ display:block;
+ margin:.25em 0
}
-.pure-form-aligned .pure-help-inline,
.pure-form-aligned input,
.pure-form-aligned select,
.pure-form-aligned textarea,
.pure-form .pure-input-1-4 {
width:25%
}
-.pure-form .pure-help-inline,
.pure-form-message-inline {
display:inline-block;
padding-left:.3em;
color:#666;
font-size:.875em
}
-@media only screen and (max-width : 480px) {
+@media only screen and (max-width :480px) {
.pure-form button[type=submit] {
margin:.7em 0 0
}
.pure-form input:not([type]),
- .pure-form input[type=password],
- .pure-form input[type=email],
- .pure-form input[type=url],
+ .pure-form input[type=color],
.pure-form input[type=date],
- .pure-form input[type=month],
- .pure-form input[type=time],
- .pure-form input[type=datetime],
.pure-form input[type=datetime-local],
- .pure-form input[type=week],
- .pure-form input[type=tel],
- .pure-form input[type=color],
+ .pure-form input[type=datetime],
+ .pure-form input[type=email],
+ .pure-form input[type=month],
.pure-form input[type=number],
+ .pure-form input[type=password],
.pure-form input[type=search],
+ .pure-form input[type=tel],
.pure-form input[type=text],
+ .pure-form input[type=time],
+ .pure-form input[type=url],
+ .pure-form input[type=week],
.pure-form label {
margin-bottom:.3em;
display:block
}
.pure-group input:not([type]),
- .pure-group input[type=password],
- .pure-group input[type=email],
- .pure-group input[type=url],
+ .pure-group input[type=color],
.pure-group input[type=date],
- .pure-group input[type=month],
- .pure-group input[type=time],
- .pure-group input[type=datetime],
.pure-group input[type=datetime-local],
- .pure-group input[type=week],
- .pure-group input[type=tel],
- .pure-group input[type=color],
+ .pure-group input[type=datetime],
+ .pure-group input[type=email],
+ .pure-group input[type=month],
.pure-group input[type=number],
+ .pure-group input[type=password],
.pure-group input[type=search],
- .pure-group input[type=text] {
+ .pure-group input[type=tel],
+ .pure-group input[type=text],
+ .pure-group input[type=time],
+ .pure-group input[type=url],
+ .pure-group input[type=week] {
margin-bottom:0
}
.pure-form-aligned .pure-control-group label {
width:100%
}
.pure-form-aligned .pure-controls {
- margin:1.5em 0 0
+ margin:1.5em 0 0 0
}
- .pure-form .pure-help-inline,
.pure-form-message,
.pure-form-message-inline {
display:block;
padding:.2em 0 .8em
}
}
+.pure-menu {
+ box-sizing:border-box
+}
.pure-menu-fixed {
position:fixed;
left:0;
.pure-menu-horizontal .pure-menu-item,
.pure-menu-horizontal .pure-menu-separator {
display:inline-block;
- zoom:1;
vertical-align:middle
}
.pure-menu-item .pure-menu-item {
white-space:nowrap;
overflow-y:hidden;
overflow-x:auto;
- -ms-overflow-style:none;
- -webkit-overflow-scrolling:touch;
padding:.5em 0
}
-.pure-menu-horizontal.pure-menu-scrollable::-webkit-scrollbar {
- display:none
-}
.pure-menu-horizontal .pure-menu-children .pure-menu-separator,
.pure-menu-separator {
background-color:#ccc;
.pure-menu-children {
background-color:#fff
}
-.pure-menu-disabled,
.pure-menu-heading,
.pure-menu-link {
padding:.5em 1em
opacity:.5
}
.pure-menu-disabled .pure-menu-link:hover {
- background-color:transparent
+ background-color:transparent;
+ cursor:default
}
.pure-menu-active>.pure-menu-link,
.pure-menu-link:focus,
.pure-menu-link:hover {
background-color:#eee
}
-.pure-menu-selected .pure-menu-link,
-.pure-menu-selected .pure-menu-link:visited {
+.pure-menu-selected>.pure-menu-link,
+.pure-menu-selected>.pure-menu-link:visited {
color:#000
}
.pure-table {
+ border-collapse:collapse;
+ border-spacing:0;
empty-cells:show;
border:1px solid #cbcbcb
}
overflow:visible;
padding:.5em 1em
}
-.pure-table td:first-child,
-.pure-table th:first-child {
- border-left-width:0
-}
.pure-table thead {
background-color:#e0e0e0;
color:#000;
.pure-table td {
background-color:transparent
}
-.pure-table-odd td,
+.pure-table-odd td {
+ background-color:#f2f2f2
+}
.pure-table-striped tr:nth-child(2n-1) td {
background-color:#f2f2f2
}
}
.pure-table-horizontal td,
.pure-table-horizontal th {
- border-width:0 0 1px;
+ border-width:0 0 1px 0;
border-bottom:1px solid #cbcbcb
}
.pure-table-horizontal tbody>tr:last-child>td {
border-bottom-width:0
}
+
+/* custom styles */
+
:root {
- --slide:250px
-}
+ --slide: 25em;
+ --accent: #129fea;
+ --dark-gray: #242424;
+ --light-gray: #cad2d3;
+ --darker-gray: #191919;
+ --black-opacity: rgba(0,0,0,0.4);
+ --light: white;
+}
+
body {
- color:#aaa;
- background:#292929
+ color:var(--light-gray);
+ background: var(--dark-gray);
}
+
.pure-img-responsive {
max-width:100%;
height:auto
}
+
#layout,
#menu,
.menu-link {
.content {
margin:0 auto;
padding:0 2em;
- max-width:800px;
- margin-bottom:50px;
+ max-width: 100em;
+ margin-bottom: 5em;
line-height:1.6em
}
.header {
margin:0;
- color:#333;
+ color: var(--dark-gray);
text-align:center
}
.header h1 {
- color:#2497e3;
+ color: var(--accent);
margin:.4em 0;
- font-size:2em;
- font-weight:300;
- font-family:fantasy
+ padding-top: 0.5em;
+ font-size: 2em;
+ font-weight: bold;
+ font-variant-caps: small-caps
}
.header h2 {
font-weight:300;
- color:#ccc;
+ color: var(--light-gray);
padding:0;
margin-top:0
}
.content-subhead {
- margin:50px 0 20px 0;
+ margin: 5em 0 2em 0;
font-weight:300;
- color:#888
+ color: var(--light-gray)
}
#menu {
margin-left:calc(var(--slide)* -1);
width:var(--slide);
+ height: 100vh;
position:fixed;
top:0;
left:0;
bottom:0;
z-index:1000;
- background:#191818;
+ background: var(--darker-gray);
overflow-y:auto;
-webkit-overflow-scrolling:touch
}
#menu a {
- color:#888;
+ color: var(--light-gray);
border:none;
padding:.6em 0.3em .6em 0.6em
}
}
#menu .pure-menu ul,
#menu .pure-menu .menu-item-divided {
- border-top:1px solid #333
+ border-top: 0.1em solid var(--dark-gray)
}
#menu .pure-menu li a:hover,
#menu .pure-menu li a:focus {
- background:#333;
- color:#aaa
+ background: var(--dark-gray);
+ color: var(--light-gray);
}
#menu .pure-menu-selected,
#menu .pure-menu-heading {
- background:#1f8dd6
+ background: var(--accent);
}
#menu .pure-menu-selected a {
- color:#fff
+ color: var(--light)
}
#menu .pure-menu-heading {
letter-spacing:.15em;
text-transform:uppercase;
- color:#fff;
+ color: var(--light);
margin:0;
text-align:center;
padding:.6em 0.3em .6em 0.3em
display:block;
top:0;
left:0;
- background:#000;
+ background: black;
background:rgba(0,0,0,0.42);
- font-size:10px;
+ font-size: 1em;
z-index:10;
width:2em;
height:auto;
}
.menu-link:hover,
.menu-link:focus {
- background:#000
+ background: black;
}
.menu-link span {
position:relative;
.menu-link span,
.menu-link span:before,
.menu-link span:after {
- background-color:#2497e3;
+ background-color: var(--accent);
width:100%;
height:.2em
}
left:var(--slide)
}
}
-@media(max-width:48em) {
- #layout.active {
- position:relative;
- left:var(--slide)
- }
-}
+
+/* Sliders */
+
input[type=range] {
-webkit-appearance:none;
margin:0 0 0 0;
width:100%;
- background:#292929
+ background: transparent;
}
+
input[type=range]:focus {
outline:none
}
+
input[type=range]::-webkit-slider-runnable-track {
width:100%;
- height:4px;
+ height: 0.4em;
cursor:pointer;
animate:0.2s;
- box-shadow:0 0 0px #000000;
- background:#2497E3;
- border-radius:3px;
- border:0 solid #000000
+ box-shadow: none
+ background: var(--accent);
+ border-radius: 0.3em;
+ border: none
}
+
input[type=range]::-webkit-slider-thumb {
- box-shadow:0 0 0px #000000;
- border:1px solid rgb(148,148,148);
- height:20px;
- width:20px;
- border-radius:40px;
- background:#F0F0F0;
+ box-shadow: none;
+ border: 0.1em solid var(--light-gray)
+ height: 2em;
+ width: 2em;
+ border-radius: 2em;
+ background: var(--light-gray)
cursor:pointer;
-webkit-appearance:none;
- margin-top:-8.5px
+ margin-top: 0.85em
}
+
input[type=range]:focus::-webkit-slider-runnable-track {
- background:#2497E3
+ background: var(--accent)
}
+
input[type=range]::-moz-range-track {
- width:100%;
- height:4px;
- cursor:pointer;
+ width: 100%;
+ height: 0.4em;
+ cursor: pointer;
animate:0.2s;
- box-shadow:0 0 0px #000000;
- background:#2497E3;
- border-radius:3px;
- border:0 solid #000000
+ box-shadow: none;
+ background: var(--accent);
+ border-radius: 0.3em;
+ border: none
}
+
input[type=range]::-moz-range-thumb {
- box-shadow:0 0 0px #000000;
- border:1px solid #2497E3;
- height:20px;
- width:20px;
- border-radius:30px;
- background:#A1D0FF;
+ box-shadow: none;
+ border: 0.1em solid var(--accent);
+ height: 2em;
+ width: 2em;
+ border-radius: 2em;
+ background: var(--light-gray);
cursor:pointer
}
+
input[type=range]::-ms-track {
width:100%;
- height:4px;
+ height: 0.4em;
cursor:pointer;
animate:0.2s;
background:transparent;
border-color:transparent;
color:transparent
}
+
input[type=range]::-ms-fill-lower {
- background:#2497E3;
- border:0 solid #000000;
- border-radius:6px;
- box-shadow:0 0 0px #000000
+ background: var(--light-gray);
+ border: none;
+ border-radius: 0.6em;
+ box-shadow: none
}
+
input[type=range]::-ms-fill-upper {
- background:#2497E3;
- border:0 solid #000000;
- border-radius:6px;
- box-shadow:0 0 0px #000000
+ background: var(--light-gray);
+ border: none;
+ border-radius: 0.6em;
+ box-shadow: none
}
+
input[type=range]::-ms-thumb {
- margin-top:1px;
- box-shadow:0 0 0px #000000;
- border:1px solid #2497E3;
- height:20px;
- width:20px;
- border-radius:40px;
- background:#A1D0FF;
+ margin-top:0.1em;
+ box-shadow: nonel
+ border: 0.1em solid var(--accent);
+ height: 2em;
+ width: 2em;
+ border-radius: 2em;
+ background: var(--light-gray);
cursor:pointer
}
+
input[type=range]:focus::-ms-fill-lower {
- background:#2497E3
+ background: var(--light-gray);
}
+
input[type=range]:focus::-ms-fill-upper {
- background:#2497E3
+ background: var(--light-gray);
}
+
+
.hide {
display:none
}
+
+/* footer */
+
footer {
text-align:center;
position: absolute;
display: inline-block;
text-decoration: none
}
+
+/* notification button */
+
.notification {
+ position: fixed;
+ right: 0.5em;
+ top: 0.5em;
+ background-color: var(--dark-gray);
+ z-index:200;
+ word-wrap: anywhere;
float: right;
}
+
+/* notification message */
+
+.message {
+ position: fixed;
+ right: 1em;
+ bottom: 0.5em;
+ z-index:200;
+ float: right;
+ color: var(--light);
+}
+
+.message-text {
+ background-color: var(--dark-gray);
+ border:0.2em solid var(--accent);
+ box-shadow:inset 0 0.1em 1.1em 0 var(--accent);
+ word-wrap: anywhere;
+ font-weight: bolder;
+ font-size: 120%;
+ padding: 1em;
+ border-radius: 0.5em;
+ position: relative;
+}
+
+.close-button {
+ content: 'X';
+ position: absolute;
+ right: -1em;
+ top: -1em;
+ width: 1.2em;
+ padding: 0.1em 0.1em 0.1em 0.1em;
+ text-decoration: none;
+ text-shadow: none;
+ text-align: center;
+ font-weight: bold;
+ background: var(--dark-gray);
+ color: var(--light);
+ border: 0.2em solid var(--accent);
+ border-radius: 1em;
+ box-shadow:inset 0 0.1em 1.1em 0 var(--accent);
+}
+
+.fadeout {
+ animation: fadeOut 5s ease;
+ opacity:0;
+}
+
+@keyframes fadeOut {
+ 0% {opacity:1;}
+ 100% {opacity:0;}
+}
+
+/* modal dialog */
+
.modal {
position: fixed; /* Stay in place */
z-index: 2000; /* Sit on top */
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
- background-color: rgba(0,0,0,0.3); /* Black w/ opacity */
+ background-color: var(--black-opacity); /* Black w/ opacity */
}
.modal-content {
-webkit-appearance:button;
cursor:pointer;
letter-spacing:.05em;
text-transform:uppercase;
- color:#aaa;
+ color:var(--light-gray);
font-size:90%;
- border:2px solid #2497e3;
+ border:0.2em solid var(--accent);
border-radius:6px;
- box-shadow:inset 0 1px 11px 0 #1f8dd6
- padding: 1rem;
+ box-shadow:inset 0 0.1em 1.1em 0 var(--accent);
+ padding: 1em;
width: max-content;
min-width: 30%;
- background-color: #333;
+ background-color: var(--dark-gray);
margin: 10% auto;
padding: 1rem
}
+
.table-header {
font-weight: bold;
font-size: 120%;
text-align: center;
- border-bottom: lightgray solid 1px;
}
+
+.table-header tr td {
+ border-bottom: 0.1em solid var(--light-gray)
+}
+
+.modal-content table {
+ border-spacing: 0.5em 1em;
+}
+
+/* overlapping hint button */
+
+.hinted {
+ position: relative;
+}
+
.hint {
cursor: pointer;
width: 1rem;
background: transparent;
- color: #aaa;
- font-size: 90%;
+ color: var(--dark-gray);
+ padding: .5em .6em;
border: none;
box-shadow: none;
- display: inline-block;
- vertical-align: super;
- margin-left: -2rem;
- z-index:1;
-}
+ position: absolute;
+ top: 0em;
+ right: 0em;
+ line-height: 1.15em;
+ font-size: 100%;
+}
+
+/* Spacing */
+fieldset .pure-u-1 {
+ margin-top: 1.5em
+}
+
+/* checkbox as a switch */
+
input[type=checkbox].switch {
display: none;
}
label.switch.socket {
position: relative;
width: auto;
- text-indent: 2.5em;
+ padding-left: 4em;
}
span.switch.slider {
display: inline-block;
}
label.switch.socket span.switch.slider:before {
content: "";
- color: gray;
- width: 4em;
- height: 2em;
- border-radius: 5em;
+ color: var(--darkgray);
+ width: 3em;
+ height: 1.4em;
+ border-radius: 1em;
position: absolute;
left: 0;
- border:2px solid #2497e3;
- box-shadow:inset 0 1px 11px 0 #1f8dd6
+ top: 0;
+ border:0.2em solid var(--accent);
+ box-shadow:inset 0 0.1em 1.1em 0 var(--accent)
}
label.switch span.switch.slider:after {
content: "";
- width: 1.5rem;
- height: 1.5rem;
- background: #2497e3;
- border-radius: 5.5ex;
+ width: 1rem;
+ height: 1rem;
+ background: var(--accent);
+ border-radius: 1em;
position: absolute;
left: 0.4rem;
top: 0.4rem;
transition: 0.2s;
}
label.switch.socket input[type=checkbox]:checked + span.slider:before {
- color: White;
- background: #0a3660;
- content: "";
- background: D;
+ background: var(--light-gray);
}
+
label.switch.socket input[type=checkbox]:checked + span.slider:after {
- background: white;
- left: 2.4em;
+ background: var(--light);
+ left: 1.9em;
+}
+
+/* Time setter */
+
+.inline-input.inline-input.inline-input {
+ display: inline-block;
+ width: calc(100% - 5em)
+}
+
+.send-button {
+ display:inline-block;
+ font-family:inherit;
+ font-size:100%;
+ line-height: 1.15em;
+ padding: .5em 1em;
+ color: var(--dark-gray);
+ border:none transparent;
+ background-color: var(--light-gray);
+ text-decoration:none;
+ border-radius:2px;
+ vertical-align: middle;
+ margin-left: 1em;
+ width: 2em;
+ text-align: center;
+}
+
+.pure-button {
+ color: var(--dark-gray);
+ border:none transparent;
+ background-color: var(--light-gray);
+ margin: 0.5em 1em 0.5em 1em;
+}
+
+/* weekdays */
+
+.week {
+ width: 100%;
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+.week td {
+ padding: 0
}
.weekday, .weekday-selected {
- font-size: 110%;
+ font-size: min(4vw, 100%rem);
text-align: center;
- margin: 0.5em;
- width: 4em;
- height: 1.5em;
+ margin: 0.2vw;
+ padding: 0.2em;
border-radius: 5em;
- border:2px solid #2497e3;
- box-shadow:inset 0 1px 11px 0 #1f8dd6;
- color: gray
+ border:0.2em solid var(--accent);
+ box-shadow:inset 0 0.1em 1.1em 0 var(--accent);
+ color: var(--light-gray)
}
.weekday-selected {
- background: #0a3660;
- color: white
+ background: var(--light-gray);
+ color: var(--darker-gray);
+}
+
+/* Hide arrows */
+
+input[type=number] {
+ appearance: textfield;
+}
+
+/* fill all screen */
+
+#layout {
+ min-height: 100vh;
+}
+
+/* Text table */
+
+.texttable {
+ border-collapse: collapse;
+ border-spacing: 0;
+ width: 100%;
+}
+
+.texttable td {
+ padding: 0
+}
+
+.value-name.value-name {
+ width: 50%;
+ padding-right: 1em;
+}
+
+/* Config */
+
+input[type=file]::file-selector-button {
+ display: none;
+}
+
+input[type=file]::-webkit-file-upload-button {
+ display: block;
+ width: 0;
+ height: 0;
+ margin-left: -100%;
+}
+
+input[type=file]::-ms-browse {
+ display: none;
+}
+
+.row-button.row-button.row-button {
+ display: inline-block;
+}
+
+/* hr */
+
+hr {
+ margin: 0.5em 2em 0.5em 2em;
+ color: var(--accent);
+}
+
+/* fonts */
+
+@font-face {
+ font-family: "icons";
+ font-style: normal;
+ font-weight: 400;
+ src: url("/icons.woff2") format("woff2");
+}
+.hint, .icon {
+ font-family: icons;
+}
+.icon {
+ margin-right: 0.5em;
}
projects / esp-clock.git / blobdiff