lbsadmin/ESPUI
1
0
Fork 0
mirror of https://github.com/s00500/ESPUI.git synced 2024-11-13 03:40:54 +00:00
Code Issues Releases Activity
d38dac9c4d
ESPUI/examples/gui/data/css/style.css
Dave Kliczbor 82adb0f1e1 Enlarge slider controls for touchscreen devices
2018-10-28 13:32:27 +01:00

789 lines
18 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: 150px;
color: #fff;
}
.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;
}
.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.0%;
}
.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.0%;
}
.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.0;
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: 4.0rem;
line-height: 1.2;
letter-spacing: -.1rem;
}
h2 {
font-size: 3.6rem;
line-height: 1.25;
letter-spacing: -.1rem;
}
h3 {
font-size: 3.0rem;
line-height: 1.3;
letter-spacing: -.1rem;
}
h4 {
font-size: 2.4rem;
line-height: 1.35;
letter-spacing: -.08rem;
}
h5 {
font-size: 1.8rem;
line-height: 1.5;
letter-spacing: -.05rem;
}
h6 {
font-size: 1.5rem;
line-height: 1.6;
letter-spacing: 0;
}
/* Larger than phablet */
@media (min-width: 630px) {
h1 {
font-size: 5.0rem;
}
h2 {
font-size: 4.2rem;
}
h3 {
font-size: 3.6rem;
}
h4 {
font-size: 3.0rem;
}
h5 {
font-size: 2.0rem;
}
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%, .1), hsla(0, 0%, 100%, .1));
border-radius: 50%;
box-shadow: inset 0 1px 1px 1px hsla(0, 0%, 100%, .5), 0 0 1px 1px hsla(0, 0%, 100%, .75), 0 0 1px 2px hsla(0, 0%, 100%, .25), 0 0 1px 3px hsla(0, 0%, 100%, .25), 0 0 1px 4px hsla(0, 0%, 100%, .25), 0 0 1px 6px hsla(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%, .5), 0 0 1px hsla(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%, .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%, .4);
transition: .15s;
}
.control .confirm {
background-color: #ddd;
background-image: linear-gradient(hsla(0, 0%, 0%, .15), hsla(0, 0%, 100%, .25));
box-shadow: inset 0 1px 1px 1px hsla(0, 0%, 100%, .5), 0 0 1px 1px hsla(0, 0%, 100%, .25), 0 0 1px 2px hsla(0, 0%, 100%, .25), 0 0 1px 3px hsla(0, 0%, 100%, .25), 0 0 1px 4px hsla(0, 0%, 100%, .25), 0 0 1px 6px hsla(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 .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.0) rotate(-45deg);
transform: scale(1.0) rotate(-45deg);
-webkit-transition: all .2s ease;
transition: all .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;
}
*/
Reference in New Issue View Git Blame Copy Permalink