1
0
mirror of https://github.com/s00500/ESPUI.git synced 2024-10-31 22:10:54 +00:00
ESPUI/data/css/style.css
Lukas Bachschwell 6506f6fe1c
Fixing sliders not updating properly
Signed-off-by: Lukas Bachschwell <lukas@lbsfilm.at>
2020-08-26 22:16:02 +02:00

1101 lines
21 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

.container {
position: relative;
width: 79%;
margin: 20px;
box-sizing: border-box;
}
.column,
.columns {
width: 100%;
float: left;
}
.card {
margin-top: 2%;
border-radius: 6px;
box-shadow: 0 4px 4px rgba(204, 197, 185, 0.5);
padding-left: 20px;
padding-right: 20px;
margin-bottom: 10px;
min-width: 500px;
color: #fff;
}
@media (max-width: 630px) {
.card {
min-width: 98%;
}
}
.card-slider {
padding-bottom: 10px;
}
.turquoise {
background: #1abc9c;
border-bottom: #16a085 3px solid;
}
.emerald {
background: #2ecc71;
border-bottom: #27ae60 3px solid;
}
.peterriver {
background: #3498db;
border-bottom: #2980b9 3px solid;
}
.wetasphalt {
background: #34495e;
border-bottom: #2c3e50 3px solid;
}
.sunflower {
background: #f1c40f;
border-bottom: #e6bb0f 3px solid;
}
.carrot {
background: #e67e22;
border-bottom: #d35400 3px solid;
}
.alizarin {
background: #e74c3c;
border-bottom: #c0392b 3px solid;
}
.dark {
background: #444857;
border-bottom: #444857 3px solid;
}
.label {
box-sizing: border-box;
white-space: nowrap;
border-radius: 0.2em;
padding: 0.12em 0.4em 0.14em;
text-align: center;
color: #ffffff;
font-weight: 700;
line-height: 1;
margin-bottom: 5px;
display: inline-block;
white-space: nowrap;
vertical-align: baseline;
position: relative;
top: -0.15em;
background-color: #999999;
margin-bottom: 10px;
}
.label-wrap {
width: 90%;
white-space: pre-wrap;
word-wrap: break-word;
}
.label.color-blue {
background-color: #6f9ad1;
}
.label.color-red {
background-color: #d37c7c;
}
.label.color-green {
background-color: #9bc268;
}
.label.color-orange {
background-color: #dea154;
}
.label.color-yellow {
background-color: #e9d641;
}
.label.color-purple {
background-color: #9f83d1;
}
/* For devices larger than 400px */
@media (min-width: 400px) {
.container {
width: 84%;
}
}
/* For devices larger than 550px */
@media (min-width: 630px) {
.container {
width: 98%;
}
.column,
.columns {
margin-right: 2%;
}
.column:first-child,
.columns:first-child {
margin-left: 0;
}
.one.column,
.one.columns {
width: 4.66666666667%;
}
.two.columns {
width: 13.3333333333%;
}
.three.columns {
width: 22%;
}
.four.columns {
width: 30.6666666667%;
}
.five.columns {
width: 39.3333333333%;
}
.six.columns {
width: 48%;
}
.seven.columns {
width: 56.6666666667%;
}
.eight.columns {
width: 65.3333333333%;
}
.nine.columns {
width: 74%;
}
.ten.columns {
width: 82.6666666667%;
}
.eleven.columns {
width: 91.3333333333%;
}
.twelve.columns {
width: 100%;
margin-left: 0;
}
.one-third.column {
width: 30.6666666667%;
}
.two-thirds.column {
width: 65.3333333333%;
}
.one-half.column {
width: 48%;
}
/* Offsets */
.offset-by-one.column,
.offset-by-one.columns {
margin-left: 8.66666666667%;
}
.offset-by-two.column,
.offset-by-two.columns {
margin-left: 17.3333333333%;
}
.offset-by-three.column,
.offset-by-three.columns {
margin-left: 26%;
}
.offset-by-four.column,
.offset-by-four.columns {
margin-left: 34.6666666667%;
}
.offset-by-five.column,
.offset-by-five.columns {
margin-left: 43.3333333333%;
}
.offset-by-six.column,
.offset-by-six.columns {
margin-left: 52%;
}
.offset-by-seven.column,
.offset-by-seven.columns {
margin-left: 60.6666666667%;
}
.offset-by-eight.column,
.offset-by-eight.columns {
margin-left: 69.3333333333%;
}
.offset-by-nine.column,
.offset-by-nine.columns {
margin-left: 78%;
}
.offset-by-ten.column,
.offset-by-ten.columns {
margin-left: 86.6666666667%;
}
.offset-by-eleven.column,
.offset-by-eleven.columns {
margin-left: 95.3333333333%;
}
.offset-by-one-third.column,
.offset-by-one-third.columns {
margin-left: 34.6666666667%;
}
.offset-by-two-thirds.column,
.offset-by-two-thirds.columns {
margin-left: 69.3333333333%;
}
.offset-by-one-half.column,
.offset-by-one-half.columns {
margin-left: 52%;
}
}
/* Base Styles
*/
html {
font-size: 62.5%;
}
body {
margin: 0;
font-size: 1.5em;
line-height: 1;
font-weight: 400;
font-family: "Open Sans", sans-serif;
color: #222;
background-color: #ecf0f1;
}
/* Typography
*/
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: 0.5rem;
font-weight: 300;
}
h1 {
font-size: 4rem;
line-height: 1.2;
letter-spacing: -0.1rem;
}
h2 {
font-size: 3.6rem;
line-height: 1.25;
letter-spacing: -0.1rem;
}
h3 {
font-size: 3rem;
line-height: 1.3;
letter-spacing: -0.1rem;
}
h4 {
font-size: 2.4rem;
line-height: 1.35;
letter-spacing: -0.08rem;
}
h5 {
font-size: 1.8rem;
line-height: 1.5;
letter-spacing: -0.05rem;
}
h6 {
font-size: 1.5rem;
line-height: 1.6;
letter-spacing: 0;
}
/* Larger than phablet */
@media (min-width: 630px) {
h1 {
font-size: 5rem;
}
h2 {
font-size: 4.2rem;
}
h3 {
font-size: 3.6rem;
}
h4 {
font-size: 3rem;
}
h5 {
font-size: 2rem;
}
h6 {
font-size: 1.5rem;
}
}
p {
margin-top: 0;
}
/* Links
*/
a {
color: #1eaedb;
}
a:hover {
color: #0fa0ce;
}
/* Buttons
*/
button {
display: inline-block;
padding: 10px;
border-radius: 3px;
color: #fff;
background-color: #999999;
}
/* Main Head Part
*/
#mainHeader {
display: inline-block;
}
#conStatus {
position: inherit;
font-size: 0.75em;
}
/* Spacing
*/
button,
.button {
margin-bottom: 1rem;
}
/* Utilities
*/
.u-full-width {
width: 100%;
box-sizing: border-box;
}
.u-max-full-width {
max-width: 100%;
box-sizing: border-box;
}
.u-pull-right {
float: right;
}
.u-pull-left {
float: left;
}
.tcenter {
text-align: center;
}
/* Misc
*/
hr {
margin-top: 0.5rem;
margin-bottom: 1.2rem;
border-width: 0;
border-top: 1px solid #e1e1e1;
}
/* Clearing
*/
/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
content: "";
display: table;
clear: both;
}
/* ButtonPad
*/
.control {
background-color: #ddd;
background-image: linear-gradient(hsla(0, 0%, 0%, 0.1),
hsla(0, 0%, 100%, 0.1));
border-radius: 50%;
box-shadow: inset 0 1px 1px 1px hsla(0, 0%, 100%, 0.5),
0 0 1px 1px hsla(0, 0%, 100%, 0.75), 0 0 1px 2px hsla(0, 0%, 100%, 0.25),
0 0 1px 3px hsla(0, 0%, 100%, 0.25), 0 0 1px 4px hsla(0, 0%, 100%, 0.25),
0 0 1px 6px hsla(0, 0%, 0%, 0.75);
height: 9em;
margin: 3em auto;
position: relative;
width: 9em;
}
.control ul {
height: 100%;
padding: 0;
transform: rotate(45deg);
}
.control li {
border-radius: 100% 0 0 0;
box-shadow: inset -1px -1px 1px hsla(0, 0%, 100%, 0.5),
0 0 1px hsla(0, 0%, 0%, 0.75);
display: inline-block;
height: 50%;
overflow: hidden;
width: 50%;
}
.control ul li:nth-child(2) {
transform: rotate(90deg);
}
.control ul li:nth-child(3) {
transform: rotate(-90deg);
}
.control ul li:nth-child(4) {
transform: rotate(180deg);
}
.control ul a {
height: 200%;
position: relative;
transform: rotate(-45deg);
width: 200%;
}
.control a:hover,
.control a:focus {
background-color: hsla(0, 0%, 100%, 0.25);
}
.control a {
border-radius: 50%;
color: #333;
display: block;
font: bold 1em/3 sans-serif;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 1px hsla(0, 0%, 100%, 0.4);
transition: 0.15s;
}
.control .confirm {
background-color: #ddd;
background-image: linear-gradient(hsla(0, 0%, 0%, 0.15),
hsla(0, 0%, 100%, 0.25));
box-shadow: inset 0 1px 1px 1px hsla(0, 0%, 100%, 0.5),
0 0 1px 1px hsla(0, 0%, 100%, 0.25), 0 0 1px 2px hsla(0, 0%, 100%, 0.25),
0 0 1px 3px hsla(0, 0%, 100%, 0.25), 0 0 1px 4px hsla(0, 0%, 100%, 0.25),
0 0 1px 6px hsla(0, 0%, 0%, 0.85);
left: 50%;
line-height: 3;
margin: -1.5em;
position: absolute;
top: 50%;
width: 3em;
}
.control .confirm:hover,
.control .confirm:focus {
background-color: #eee;
}
/* Switch
*/
.switch {
display: inline-block !important;
background-color: #bebebe;
border-radius: 4px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
color: #fff;
cursor: pointer;
display: block;
font-size: 14px;
height: 26px;
margin-bottom: 12px;
position: relative;
width: 60px;
-webkit-transition: background-color 0.2s ease-in-out;
-moz-transition: background-color 0.2s ease-in-out;
-o-transition: background-color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
}
.switch.checked {
background-color: #76d21d;
}
.switch input[type="checkbox"] {
display: none;
cursor: pointer;
height: 10px;
left: 12px;
position: absolute;
top: 8px;
width: 10px;
}
.in {
position: absolute;
top: 8px;
left: 12px;
-webkit-transition: left 0.08s ease-in-out;
-moz-transition: left 0.08s ease-in-out;
-o-transition: left 0.08s ease-in-out;
-ms-transition: left 0.08s ease-in-out;
transition: left 0.08s ease-in-out;
}
.switch.checked div {
left: 38px;
}
.switch .in:before {
background: #fff;
background: -moz-linear-gradient(top, #fff 0%, #f0f0f0 100%);
background: -webkit-gradient(linear,
left top,
left bottom,
color-stop(0%, #fff),
color-stop(100%, #f0f0f0));
background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
background: -o-linear-gradient(top, #fff 0%, #f0f0f0 100%);
background: -ms-linear-gradient(top, #fff 0%, #f0f0f0 100%);
background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
border: 1px solid #fff;
border-radius: 2px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
content: "";
height: 18px;
position: absolute;
top: -5px;
left: -9px;
width: 26px;
}
.switch .in:after {
background: #f0f0f0;
background: -moz-linear-gradient(top, #f0f0f0 0%, #fff 100%);
background: -webkit-gradient(linear,
left top,
left bottom,
color-stop(0%, #f0f0f0),
color-stop(100%, #fff));
background: -webkit-linear-gradient(top, #f0f0f0 0%, #fff 100%);
background: -o-linear-gradient(top, #f0f0f0 0%, #fff 100%);
background: -ms-linear-gradient(top, #f0f0f0 0%, #fff 100%);
background: linear-gradient(to bottom, #f0f0f0 0%, #fff 100%);
border-radius: 10px;
content: "";
height: 12px;
margin: -1px 0 0 -1px;
position: absolute;
width: 12px;
}
/* ----------------------------------------------------------------------
Material Design Range Slider - by Ravikumar Chauhan
------------------------------------------------------------------------- */
.rkmd-slider {
display: block;
position: relative;
font-size: 16px;
font-family: "Roboto", sans-serif;
}
.rkmd-slider input[type="range"] {
overflow: hidden;
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.rkmd-slider input[type="range"]+.slider {
display: block;
position: relative;
width: 100%;
height: 27px;
border-radius: 13px;
background-color: #bebebe;
}
@media (pointer: fine) {
.rkmd-slider input[type="range"]+.slider {
height: 4px;
border-radius: 0px;
}
}
.rkmd-slider input[type="range"]+.slider .slider-fill {
display: block;
position: absolute;
width: 0%;
height: 100%;
user-select: none;
z-index: 1;
}
.rkmd-slider input[type="range"]+.slider .slider-handle {
cursor: pointer;
position: absolute;
top: 12px;
left: 0%;
width: 15px;
height: 15px;
margin-left: -8px;
border-radius: 50%;
transition: all 0.2s ease;
user-select: none;
z-index: 2;
}
@media (pointer: fine) {
.rkmd-slider input[type="range"]+.slider .slider-handle {
top: -5.5px;
}
}
.rkmd-slider input[type="range"]:disabled+.slider {
background-color: #b0b0b0 !important;
}
.rkmd-slider input[type="range"]:disabled+.slider .slider-fill,
.rkmd-slider input[type="range"]:disabled+.slider .slider-handle {
cursor: default !important;
background-color: #b0b0b0 !important;
}
.rkmd-slider input[type="range"]:disabled+.slider .slider-fill .slider-label,
.rkmd-slider input[type="range"]:disabled+.slider .slider-handle .slider-label {
display: none;
background-color: #b0b0b0 !important;
}
.rkmd-slider input[type="range"]:disabled+.slider .slider-fill.is-active,
.rkmd-slider input[type="range"]:disabled+.slider .slider-handle.is-active {
top: -5.5px;
width: 15px;
height: 15px;
margin-left: -8px;
}
.rkmd-slider input[type="range"]:disabled+.slider .slider-fill.is-active .slider-label,
.rkmd-slider input[type="range"]:disabled+.slider .slider-handle.is-active .slider-label {
display: none;
border-radius: 50%;
transform: none;
}
.rkmd-slider input[type="range"]:disabled+.slider .slider-handle:active {
box-shadow: none !important;
transform: scale(1) !important;
}
/* ----------------------------------------------------------------------
Discrete Range Slider - by Ravikumar Chauhan
------------------------------------------------------------------------- */
.rkmd-slider.slider-discrete .slider .slider-handle {
position: relative;
z-index: 1;
}
.rkmd-slider.slider-discrete .slider .slider-handle .slider-label {
position: absolute;
top: -17.5px;
left: 4px;
width: 30px;
height: 30px;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
border-radius: 50%;
-webkit-transform: scale(1) rotate(-45deg);
transform: scale(1) rotate(-45deg);
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
@media (pointer: fine) {
.rkmd-slider.slider-discrete .slider .slider-handle .slider-label {
left: -2px;
-webkit-transform: scale(0.5) rotate(-45deg);
transform: scale(0.5) rotate(-45deg);
}
}
.rkmd-slider.slider-discrete .slider .slider-handle .slider-label span {
position: absolute;
top: 7px;
left: 0px;
width: 100%;
color: #fff;
font-size: 16px;
text-align: center;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
opacity: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (pointer: fine) {
.rkmd-slider.slider-discrete .slider .slider-handle .slider-label span {
font-size: 12px;
}
}
.rkmd-slider.slider-discrete .slider .slider-handle.is-active {
top: 0px;
margin-left: -2px;
width: 4px;
height: 4px;
}
.rkmd-slider.slider-discrete .slider .slider-handle.is-active .slider-label {
top: -15px;
left: -2px;
border-radius: 15px 15px 15px 0;
-webkit-transform: rotate(-45deg) translate(23px, -25px);
transform: rotate(-45deg) translate(23px, -25px);
}
.rkmd-slider.slider-discrete .slider .slider-handle.is-active .slider-label span {
opacity: 1;
}
.rkmd-slider.slider-discrete.slider-turquoise .slider-label {
background-color: #16a085;
}
.rkmd-slider.slider-discrete.slider-emerald .slider-label {
background-color: #27ae60;
}
.peterriver {
background: #3498db;
border-bottom: #2980b9 3px solid;
}
.rkmd-slider.slider-discrete.slider-peterriver .slider-label {
background-color: #2980b9;
}
.wetasphalt {
background: #34495e;
border-bottom: #2c3e50 3px solid;
}
.rkmd-slider.slider-discrete.slider-wetasphalt .slider-label {
background-color: #2c3e50;
}
.sunflower {
background: #f1c40f;
border-bottom: #e6bb0f 3px solid;
}
.rkmd-slider.slider-discrete.slider-sunflower .slider-label {
background-color: #e6bb0f;
}
.carrot {
background: #e67e22;
border-bottom: #d35400 3px solid;
}
.rkmd-slider.slider-discrete.slider-carrot .slider-label {
background-color: #d35400;
}
.alizarin {
background: #e74c3c;
border-bottom: #c0392b 3px solid;
}
.rkmd-slider.slider-discrete.slider-alizarin .slider-label {
background-color: #c0392b;
}
/*
.rkmd-slider.slider-light input[type="range"] + .slider {
background-color: #5c5c5c;
}
.rkmd-slider.slider-light input[type="range"]:disabled + .slider {
background-color: #5c5c5c !important;
}
.rkmd-slider.slider-light input[type="range"]:disabled + .slider .slider-fill,
.rkmd-slider.slider-light input[type="range"]:disabled + .slider .slider-handle {
background-color: #5c5c5c !important;
}
*/
/* --------------------------------------------------------------
* Text and number inputs
*--------------------------------------------------------------- */
input {
margin: 0 auto 1.2rem auto;
padding: 2px 5px;
width: 100%;
box-sizing: border-box;
border: none;
border-radius: 4px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background: rgba(255, 255, 255, 0.8);
}
select {
margin: 0 auto 1.2rem auto;
padding: 2px 5px;
width: 100%;
box-sizing: border-box;
border: none;
border-radius: 4px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background: rgba(255, 255, 255, 0.8);
}
input[id^="num"] {
max-width: 6em;
width: auto;
text-align: right;
font-weight: bold;
font-size: 115%;
}
body div>ul.navigation {
margin: 0;
padding: 0;
border-bottom: 3px solid #666;
overflow: hidden;
}
ul.navigation li {
list-style: none;
float: left;
margin-right: 4px;
}
ul.navigation li.controls {
float: right;
}
ul.navigation li a {
font-weight: bold;
display: inline-block;
padding: 6px 12px;
color: #888;
outline: 0;
text-decoration: none;
background: #f3f3f3;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#eee), to(#e4e4e4));
background: -moz-linear-gradient(#eee, #e4e4e4);
background: linear-gradient(#eee, #e4e4e4);
-pie-background: linear-gradient(#eee, #e4e4e4);
}
ul.navigation li.active a {
pointer-events: none;
color: white;
background: #666;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#888), to(#666));
background: -moz-linear-gradient(#888, #666);
background: linear-gradient(#888, #666);
-pie-background: linear-gradient(#888, #666);
}
div.tabscontent>div {
padding: 0 15px;
}
#tabsnav:empty {
display: none;
}
.range-slider {
margin: 0 0 0 0;
}
.range-slider {
width: 100%;
}
.range-slider__range {
-webkit-appearance: none;
width: calc(100% - (45px));
height: 10px;
border-radius: 5px;
outline: 0;
padding: 0;
margin: 0;
}
/*
.range-slider__range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
cursor: pointer;
transition: background 0.15s ease-in-out;
}
.range-slider__range::-webkit-slider-thumb:hover {
background: #1abc9c;
}
.range-slider__range:active::-webkit-slider-thumb {
background: #1abc9c;
}
.range-slider__range::-moz-range-thumb {
width: 20px;
height: 20px;
border: 0;
border-radius: 50%;
cursor: pointer;
transition: background 0.15s ease-in-out;
}
.range-slider__range:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1abc9c;
}
*/
.range-slider__value {
display: inline-block;
position: relative;
width: 30px;
color: #fff;
line-height: 20px;
text-align: center;
border-radius: 3px;
padding: 5px 5px;
margin-left: 2px;
}
.range-slider__value:after {
position: absolute;
top: 8px;
left: -7px;
width: 0;
height: 0;
/*border-top:1px solid transparent;
border-right:1px solid #2c3e50;
border-bottom:1px solid transparent;*/
content: "";
}
::-moz-range-track {
border: 0;
}
input::-moz-focus-inner,
input::-moz-focus-outer {
border: 0;
}
/* Styles for Graph widget */
svg {
display: block;
width: 100%;
height: 100%;
}
.y-axis path,
.x-axis path {
stroke: gray;
stroke-width: 1;
fill: none;
}
.series {
stroke: steelblue;
stroke-width: 3;
fill: none;
}
.data-points circle {
stroke: steelblue;
stroke-width: 2;
fill: white;
}
.data-points text {
display: none;
}
.data-points circle:hover {
fill: steelblue;
stroke-width: 6;
}
.data-points circle:hover+text {
display: inline-block;
}
text {
text-anchor: end;
}