diff --git a/examples/gui/data/css/style.css b/examples/gui/data/css/style.css index 95a247d..6721a93 100644 --- a/examples/gui/data/css/style.css +++ b/examples/gui/data/css/style.css @@ -1,779 +1,850 @@ +.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; +} + +.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 { - position: relative; - width: 79%; - margin: 20px; - box-sizing: border-box; + width: 84%; } +} - .column, .columns { +/* 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%; - float: left; + margin-left: 0; } - - .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; + .one-third.column { + width: 30.6666666667%; } - - .card-slider { - padding-bottom: 10px + .two-thirds.column { + width: 65.3333333333%; } - - .turquoise { - background: #1abc9c; - border-bottom: #16a085 3px solid; + .one-half.column { + width: 48%; } - - .emerald { - background: #2ecc71; - border-bottom: #27ae60 3px solid; + /* Offsets */ + .offset-by-one.column, + .offset-by-one.columns { + margin-left: 8.66666666667%; } - - .peterriver { - background: #3498db; - border-bottom: #2980b9 3px solid; + .offset-by-two.column, + .offset-by-two.columns { + margin-left: 17.3333333333%; } - - .wetasphalt { - background: #34495e; - border-bottom: #2c3e50 3px solid; + .offset-by-three.column, + .offset-by-three.columns { + margin-left: 26%; } - - .sunflower { - background: #f1c40f; - border-bottom: #E6BB0F 3px solid; + .offset-by-four.column, + .offset-by-four.columns { + margin-left: 34.6666666667%; } - - .carrot { - background: #e67e22; - border-bottom: #d35400 3px solid; + .offset-by-five.column, + .offset-by-five.columns { + margin-left: 43.3333333333%; } - - .alizarin { - background: #e74c3c; - border-bottom: #c0392b 3px solid; + .offset-by-six.column, + .offset-by-six.columns { + margin-left: 52%; } - - .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; + .offset-by-seven.column, + .offset-by-seven.columns { + margin-left: 60.6666666667%; } - - .label-wrap { - width: 90%; - white-space: pre-wrap; - word-wrap: break-word; + .offset-by-eight.column, + .offset-by-eight.columns { + margin-left: 69.3333333333%; } - - .label.color-blue { - background-color: #6f9ad1; + .offset-by-nine.column, + .offset-by-nine.columns { + margin-left: 78%; } - - .label.color-red { - background-color: #d37c7c; + .offset-by-ten.column, + .offset-by-ten.columns { + margin-left: 86.6666666667%; } - - .label.color-green { - background-color: #9bc268; + .offset-by-eleven.column, + .offset-by-eleven.columns { + margin-left: 95.3333333333%; } - - .label.color-orange { - background-color: #dea154; + .offset-by-one-third.column, + .offset-by-one-third.columns { + margin-left: 34.6666666667%; } - - .label.color-yellow { - background-color: #e9d641; + .offset-by-two-thirds.column, + .offset-by-two-thirds.columns { + margin-left: 69.3333333333%; } - - .label.color-purple { - background-color: #9f83d1; + .offset-by-one-half.column, + .offset-by-one-half.columns { + margin-left: 52%; } +} - /* 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 +/* Base Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */ - html { - font-size: 62.5%; - } +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; - } +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 +/* Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */ - h1, h2, h3, h4, h5, h6 { - margin-top: 0; - margin-bottom: 0.5rem; - font-weight: 300; - } +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: 4.0rem; - line-height: 1.2; - letter-spacing: -.1rem; + font-size: 5rem; } - h2 { - font-size: 3.6rem; - line-height: 1.25; - letter-spacing: -.1rem; + font-size: 4.2rem; } - h3 { - font-size: 3.0rem; - line-height: 1.3; - letter-spacing: -.1rem; + font-size: 3.6rem; } - h4 { - font-size: 2.4rem; - line-height: 1.35; - letter-spacing: -.08rem; + font-size: 3rem; } - h5 { - font-size: 1.8rem; - line-height: 1.5; - letter-spacing: -.05rem; + font-size: 2rem; } - h6 { font-size: 1.5rem; - line-height: 1.6; - letter-spacing: 0; } +} - /* Larger than phablet */ +p { + margin-top: 0; +} - @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 +/* Links –––––––––––––––––––––––––––––––––––––––––––––––––– */ - a { - color: #1EAEDB; - } +a { + color: #1eaedb; +} - a:hover { - color: #0FA0CE; - } +a:hover { + color: #0fa0ce; +} - /* Buttons +/* Buttons –––––––––––––––––––––––––––––––––––––––––––––––––– */ - button { - display: inline-block; - padding: 10px; - border-radius: 3px; - color: #fff; - background-color: #999999; - } +button { + display: inline-block; + padding: 10px; + border-radius: 3px; + color: #fff; + background-color: #999999; +} - /* Main Head Part +/* Main Head Part –––––––––––––––––––––––––––––––––––––––––––––––––– */ - #mainHeader { - display: inline-block; - } +#mainHeader { + display: inline-block; +} - #conStatus { - position: inherit; - font-size: 0.75em; - } +#conStatus { + position: inherit; + font-size: 0.75em; +} - /* Spacing +/* Spacing –––––––––––––––––––––––––––––––––––––––––––––––––– */ - button, .button { - margin-bottom: 1rem; - } +button, +.button { + margin-bottom: 1rem; +} - /* Utilities +/* Utilities –––––––––––––––––––––––––––––––––––––––––––––––––– */ - .u-full-width { - width: 100%; - box-sizing: border-box; - } +.u-full-width { + width: 100%; + box-sizing: border-box; +} - .u-max-full-width { - max-width: 100%; - box-sizing: border-box; - } +.u-max-full-width { + max-width: 100%; + box-sizing: border-box; +} - .u-pull-right { - float: right; - } +.u-pull-right { + float: right; +} - .u-pull-left { - float: left; - } +.u-pull-left { + float: left; +} - .tcenter { - text-align: center; - } +.tcenter { + text-align: center; +} - /* Misc +/* Misc –––––––––––––––––––––––––––––––––––––––––––––––––– */ - hr { - margin-top: 0.5rem; - margin-bottom: 1.2rem; - border-width: 0; - border-top: 1px solid #E1E1E1; - } +hr { + margin-top: 0.5rem; + margin-bottom: 1.2rem; + border-width: 0; + border-top: 1px solid #e1e1e1; +} - /* Clearing +/* Clearing –––––––––––––––––––––––––––––––––––––––––––––––––– */ - /* Self Clearing Goodness */ +/* Self Clearing Goodness */ - .container:after, .row:after, .u-cf { - content: ""; - display: table; - clear: both; - } +.container:after, +.row:after, +.u-cf { + content: ""; + display: table; + clear: both; +} - /* ButtonPad +/* 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 { + 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 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 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(2) { + transform: rotate(90deg); +} - .control ul li:nth-child(3) { - transform: rotate(-90deg); - } +.control ul li:nth-child(3) { + transform: rotate(-90deg); +} - .control ul li:nth-child(4) { - transform: rotate(180deg); - } +.control ul li:nth-child(4) { + transform: rotate(180deg); +} - .control ul a { - height: 200%; - position: relative; - transform: rotate(-45deg); - width: 200%; - } +.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: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%, .4); - transition: .15s; - } +.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%, .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 { + 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; - } +.control .confirm:hover, +.control .confirm:focus { + background-color: #eee; +} - /* Switch +/* 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 { + 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.checked { + background-color: #76d21d; +} - .switch input[type="checkbox"] { - display: none; - cursor: pointer; - height: 10px; - left: 12px; - position: absolute; - top: 8px; - width: 10px; - } +.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; - } +.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.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: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; - } +.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 { + 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 { - 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; + 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 { - 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; } +} +.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 { + 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 { - 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); + -webkit-transform: scale(0.5) rotate(-45deg); + transform: scale(0.5) rotate(-45deg); } - .rkmd-slider.slider-discrete .slider .slider-handle.is-active .slider-label span { - opacity: 1; +} + +.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; +} - .rkmd-slider.slider-discrete.slider-turquoise .slider-label { - background-color: #16a085; - } +.peterriver { + background: #3498db; + border-bottom: #2980b9 3px solid; +} - .rkmd-slider.slider-discrete.slider-emerald .slider-label { - background-color: #27ae60; - } +.rkmd-slider.slider-discrete.slider-peterriver .slider-label { + background-color: #2980b9; +} - .peterriver { - background: #3498db; - border-bottom: #2980b9 3px solid; - } +.wetasphalt { + background: #34495e; + border-bottom: #2c3e50 3px solid; +} - .rkmd-slider.slider-discrete.slider-peterriver .slider-label { - background-color: #2980b9; - } +.rkmd-slider.slider-discrete.slider-wetasphalt .slider-label { + background-color: #2c3e50; +} - .wetasphalt { - background: #34495e; - border-bottom: #2c3e50 3px solid; - } +.sunflower { + background: #f1c40f; + border-bottom: #e6bb0f 3px solid; +} - .rkmd-slider.slider-discrete.slider-wetasphalt .slider-label { - background-color: #2c3e50; - } +.rkmd-slider.slider-discrete.slider-sunflower .slider-label { + background-color: #e6bb0f; +} - .sunflower { - background: #f1c40f; - border-bottom: #E6BB0F 3px solid; - } +.carrot { + background: #e67e22; + border-bottom: #d35400 3px solid; +} - .rkmd-slider.slider-discrete.slider-sunflower .slider-label { - background-color: #E6BB0F; - } +.rkmd-slider.slider-discrete.slider-carrot .slider-label { + background-color: #d35400; +} - .carrot { - background: #e67e22; - border-bottom: #d35400 3px solid; - } +.alizarin { + background: #e74c3c; + border-bottom: #c0392b 3px solid; +} - .rkmd-slider.slider-discrete.slider-carrot .slider-label { - background-color: #d35400; - } +.rkmd-slider.slider-discrete.slider-alizarin .slider-label { + background-color: #c0392b; +} - .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; } @@ -790,22 +861,22 @@ /* -------------------------------------------------------------- * 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); + 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%; + max-width: 6em; + width: auto; + text-align: right; + font-weight: bold; + font-size: 115%; } diff --git a/examples/gui/data/css/style.min.css b/examples/gui/data/css/style.min.css index 443d403..de53df2 100644 --- a/examples/gui/data/css/style.min.css +++ b/examples/gui/data/css/style.min.css @@ -1 +1 @@ -.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:.2em;padding:.12em .4em .14em;text-align:center;color:#fff;font-weight:700;line-height:1;margin-bottom:5px;display:inline-block;white-space:nowrap;vertical-align:baseline;position:relative;top:-.15em;background-color:#999;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}@media(min-width:400px){.container{width:84%}}@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%}.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%}}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}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.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}@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}a{color:#1eaedb}a:hover{color:#0fa0ce}button{display:inline-block;padding:10px;border-radius:3px;color:#fff;background-color:#999}#mainHeader{display:inline-block}#conStatus{position:inherit;font-size:.75em}button,.button{margin-bottom:1rem}.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}hr{margin-top:.5rem;margin-bottom:1.2rem;border-width:0;border-top:1px solid #e1e1e1}.container:after,.row:after,.u-cf{content:"";display:table;clear:both}.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{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 .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;transition:background-color .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 .08s ease-in-out;-moz-transition:left .08s ease-in-out;-o-transition:left .08s ease-in-out;-ms-transition:left .08s ease-in-out;transition:left .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}.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:0}}.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}.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:0;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:0;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}input{margin:0 auto 1.2rem auto;padding:2px 5px;width:100%;box-sizing:border-box;border:0;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%} \ No newline at end of file +.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}.dark{background:#444857;border-bottom:#444857 3px solid}.label{box-sizing:border-box;white-space:nowrap;border-radius:.2em;padding:.12em .4em .14em;text-align:center;color:#fff;font-weight:700;line-height:1;margin-bottom:5px;display:inline-block;white-space:nowrap;vertical-align:baseline;position:relative;top:-.15em;background-color:#999;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}@media(min-width:400px){.container{width:84%}}@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%}.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%}}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}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:300}h1{font-size:4rem;line-height:1.2;letter-spacing:-.1rem}h2{font-size:3.6rem;line-height:1.25;letter-spacing:-.1rem}h3{font-size:3rem;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}@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}a{color:#1eaedb}a:hover{color:#0fa0ce}button{display:inline-block;padding:10px;border-radius:3px;color:#fff;background-color:#999}#mainHeader{display:inline-block}#conStatus{position:inherit;font-size:.75em}button,.button{margin-bottom:1rem}.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}hr{margin-top:.5rem;margin-bottom:1.2rem;border-width:0;border-top:1px solid #e1e1e1}.container:after,.row:after,.u-cf{content:"";display:table;clear:both}.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:.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{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 .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;transition:background-color .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 .08s ease-in-out;-moz-transition:left .08s ease-in-out;-o-transition:left .08s ease-in-out;-ms-transition:left .08s ease-in-out;transition:left .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}.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:0}}.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}.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 .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:0;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:0;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}input{margin:0 auto 1.2rem auto;padding:2px 5px;width:100%;box-sizing:border-box;border:0;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%} \ No newline at end of file diff --git a/examples/gui/data/js/controls.js b/examples/gui/data/js/controls.js index cb571be..b2248d4 100644 --- a/examples/gui/data/js/controls.js +++ b/examples/gui/data/js/controls.js @@ -40,41 +40,36 @@ const C_SUNFLOWER = 4; const C_CARROT = 5; const C_ALIZARIN = 6; const C_NONE = 7; +const C_DARK = 8; function colorClass(colorId) { colorId = Number(colorId); switch (colorId) { case C_TURQUOISE: return "turquoise"; - break; case C_EMERALD: return "emerald"; - break; case C_PETERRIVER: return "peterriver"; - break; case C_WETASPHALT: return "wetasphalt"; - break; case C_SUNFLOWER: return "sunflower"; - break; case C_CARROT: return "carrot"; - break; case C_ALIZARIN: return "alizarin"; - break; case C_NONE: return ""; - break; + case C_DARK: + return "dark"; default: return ""; diff --git a/examples/gui/data/js/controls.min.js b/examples/gui/data/js/controls.min.js index b1b7401..1424368 100644 --- a/examples/gui/data/js/controls.min.js +++ b/examples/gui/data/js/controls.min.js @@ -1,4 +1,4 @@ -const UI_INITIAL_GUI=100;const UI_TITEL=0;const UI_LABEL=1;const UPDATE_LABEL=6;const UI_BUTTON=2;const UI_SWITCHER=3;const UPDATE_SWITCHER=7;const UI_PAD=4;const UI_CPAD=5;const UI_SLIDER=8;const UPDATE_SLIDER=9;const UI_NUMBER=10;const UPDATE_NUMBER=11;const UI_TEXT_INPUT=12;const UPDATE_TEXT_INPUT=13;const UI_GRAPH=14;const CLEAR_GRAPH=15;const ADD_GRAPH_POINT=16;const FOR=0;const BACK=1;const LEFT=2;const RIGHT=3;const CENTER=4;const C_TURQUOISE=0;const C_EMERALD=1;const C_PETERRIVER=2;const C_WETASPHALT=3;const C_SUNFLOWER=4;const C_CARROT=5;const C_ALIZARIN=6;const C_NONE=7;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";break;case C_EMERALD:return"emerald";break;case C_PETERRIVER:return"peterriver";break;case C_WETASPHALT:return"wetasphalt";break;case C_SUNFLOWER:return"sunflower";break;case C_CARROT:return"carrot";break;case C_ALIZARIN:return"alizarin";break;case C_NONE:return"";break;default:return"";}} +const UI_INITIAL_GUI=100;const UI_TITEL=0;const UI_LABEL=1;const UPDATE_LABEL=6;const UI_BUTTON=2;const UI_SWITCHER=3;const UPDATE_SWITCHER=7;const UI_PAD=4;const UI_CPAD=5;const UI_SLIDER=8;const UPDATE_SLIDER=9;const UI_NUMBER=10;const UPDATE_NUMBER=11;const UI_TEXT_INPUT=12;const UPDATE_TEXT_INPUT=13;const UI_GRAPH=14;const CLEAR_GRAPH=15;const ADD_GRAPH_POINT=16;const FOR=0;const BACK=1;const LEFT=2;const RIGHT=3;const CENTER=4;const C_TURQUOISE=0;const C_EMERALD=1;const C_PETERRIVER=2;const C_WETASPHALT=3;const C_SUNFLOWER=4;const C_CARROT=5;const C_ALIZARIN=6;const C_NONE=7;const C_DARK=8;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";case C_EMERALD:return"emerald";case C_PETERRIVER:return"peterriver";case C_WETASPHALT:return"wetasphalt";case C_SUNFLOWER:return"sunflower";case C_CARROT:return"carrot";case C_ALIZARIN:return"alizarin";case C_NONE:return"";case C_DARK:return"dark";default:return"";}} var websock;var websockConnected=false;function restart(){$(document).add("*").off();$("#row").html("");websock.close();start();} function conStatusError(){websockConnected=false;$("#conStatus").removeClass("color-green");$("#conStatus").addClass("color-red");$("#conStatus").html("Error / No Connection ↻");$("#conStatus").off();$("#conStatus").on({click:restart});} function handleVisibilityChange(){if(!websockConnected&&!document.hidden){restart();}} diff --git a/src/ESPUI.h b/src/ESPUI.h index fe04e31..b662010 100644 --- a/src/ESPUI.h +++ b/src/ESPUI.h @@ -98,7 +98,8 @@ typedef struct Control { #define COLOR_SUNFLOWER 4 #define COLOR_CARROT 5 #define COLOR_ALIZARIN 6 -#define COLOR_NONE 6 +#define COLOR_NONE 7 +#define COLOR_DARK 8 class ESPUIClass { public: diff --git a/src/dataControlsJS.h b/src/dataControlsJS.h index c9ed0fa..14ccc1c 100644 --- a/src/dataControlsJS.h +++ b/src/dataControlsJS.h @@ -1,5 +1,5 @@ const char JS_CONTROLS[] PROGMEM = R"=====( -const UI_INITIAL_GUI=100;const UI_TITEL=0;const UI_LABEL=1;const UPDATE_LABEL=6;const UI_BUTTON=2;const UI_SWITCHER=3;const UPDATE_SWITCHER=7;const UI_PAD=4;const UI_CPAD=5;const UI_SLIDER=8;const UPDATE_SLIDER=9;const UI_NUMBER=10;const UPDATE_NUMBER=11;const UI_TEXT_INPUT=12;const UPDATE_TEXT_INPUT=13;const UI_GRAPH=14;const CLEAR_GRAPH=15;const ADD_GRAPH_POINT=16;const FOR=0;const BACK=1;const LEFT=2;const RIGHT=3;const CENTER=4;const C_TURQUOISE=0;const C_EMERALD=1;const C_PETERRIVER=2;const C_WETASPHALT=3;const C_SUNFLOWER=4;const C_CARROT=5;const C_ALIZARIN=6;const C_NONE=7;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";break;case C_EMERALD:return"emerald";break;case C_PETERRIVER:return"peterriver";break;case C_WETASPHALT:return"wetasphalt";break;case C_SUNFLOWER:return"sunflower";break;case C_CARROT:return"carrot";break;case C_ALIZARIN:return"alizarin";break;case C_NONE:return"";break;default:return"";}} +const UI_INITIAL_GUI=100;const UI_TITEL=0;const UI_LABEL=1;const UPDATE_LABEL=6;const UI_BUTTON=2;const UI_SWITCHER=3;const UPDATE_SWITCHER=7;const UI_PAD=4;const UI_CPAD=5;const UI_SLIDER=8;const UPDATE_SLIDER=9;const UI_NUMBER=10;const UPDATE_NUMBER=11;const UI_TEXT_INPUT=12;const UPDATE_TEXT_INPUT=13;const UI_GRAPH=14;const CLEAR_GRAPH=15;const ADD_GRAPH_POINT=16;const FOR=0;const BACK=1;const LEFT=2;const RIGHT=3;const CENTER=4;const C_TURQUOISE=0;const C_EMERALD=1;const C_PETERRIVER=2;const C_WETASPHALT=3;const C_SUNFLOWER=4;const C_CARROT=5;const C_ALIZARIN=6;const C_NONE=7;const C_DARK=8;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";case C_EMERALD:return"emerald";case C_PETERRIVER:return"peterriver";case C_WETASPHALT:return"wetasphalt";case C_SUNFLOWER:return"sunflower";case C_CARROT:return"carrot";case C_ALIZARIN:return"alizarin";case C_NONE:return"";case C_DARK:return"dark";default:return"";}} var websock;var websockConnected=false;function restart(){$(document).add("*").off();$("#row").html("");websock.close();start();} function conStatusError(){websockConnected=false;$("#conStatus").removeClass("color-green");$("#conStatus").addClass("color-red");$("#conStatus").html("Error / No Connection ↻");$("#conStatus").off();$("#conStatus").on({click:restart});} function handleVisibilityChange(){if(!websockConnected&&!document.hidden){restart();}} @@ -143,4 +143,4 @@ function padclick(type,number,isdown){switch(type){case CENTER:if(isdown)websock function switcher(number,state){if(state==null){if($("#s"+number).is(":checked")){websock.send("sactive:"+number);$("#sl"+number).addClass("checked");}else{websock.send("sinactive:"+number);$("#sl"+number).removeClass("checked");}}else if(state==1){$("#sl"+number).addClass("checked");$("#sl"+number).prop("checked",true);}else if(state==0){$("#sl"+number).removeClass("checked");$("#sl"+number).prop("checked",false);}} )====="; -const uint8_t JS_CONTROLS_GZIP[2108] PROGMEM = { 31,139,8,0,72,101,35,92,2,255,213,89,209,114,226,56,22,125,207,87,120,220,83,13,222,208,16,186,183,103,103,33,78,21,77,232,14,51,12,100,9,153,222,218,23,74,216,162,113,197,200,94,89,134,206,166,248,141,249,144,249,164,249,146,189,146,44,91,118,236,64,66,245,84,205,75,98,95,93,29,29,157,123,117,37,11,39,32,17,51,110,135,243,225,120,56,27,246,70,243,79,183,67,187,125,118,214,117,84,195,108,56,27,140,108,205,48,234,125,0,67,91,25,174,47,123,179,65,98,252,33,243,250,112,59,155,77,198,246,219,204,114,243,121,56,235,95,13,166,246,187,124,215,212,254,143,204,247,186,119,105,255,61,123,237,243,247,247,26,212,104,120,9,29,126,44,0,73,235,63,51,191,241,237,47,31,192,210,62,203,59,42,115,91,155,229,224,223,51,208,224,250,118,102,183,223,230,189,245,166,119,89,143,79,211,222,245,149,221,86,44,251,163,65,111,170,140,138,106,239,242,82,154,230,215,147,225,24,250,43,129,62,78,166,169,164,31,122,253,159,83,57,71,131,143,179,84,180,233,240,211,213,44,149,171,63,24,207,128,117,58,224,124,118,59,253,215,237,100,120,51,72,161,250,243,193,47,131,105,111,116,153,226,245,231,215,3,232,53,29,254,10,93,223,166,198,207,131,89,239,230,250,170,55,210,224,231,55,183,227,143,163,201,231,220,24,253,222,116,58,153,165,218,247,231,189,209,240,63,189,233,112,156,198,186,63,31,79,198,3,8,222,50,38,14,243,2,98,56,129,31,208,190,143,162,168,46,30,135,174,245,144,60,216,227,120,189,192,52,181,119,163,173,199,156,149,230,135,34,172,79,173,67,49,139,41,49,225,207,127,227,192,139,176,217,93,80,140,238,186,137,99,50,95,229,134,215,152,34,223,45,56,101,18,40,191,16,51,76,169,183,193,180,224,154,9,163,92,183,152,161,40,92,33,159,21,92,83,185,148,103,20,147,165,31,108,31,97,74,13,149,151,131,40,13,138,88,74,85,229,132,124,239,127,136,122,164,224,198,149,86,46,170,201,197,75,20,251,44,51,239,118,39,27,68,141,45,94,68,129,115,215,213,158,251,1,33,216,97,216,181,151,200,143,112,22,49,138,35,134,40,171,91,15,223,215,221,192,137,215,152,48,171,137,92,183,110,254,205,180,154,193,114,89,183,186,223,215,205,87,52,216,194,251,138,173,253,186,105,90,221,4,183,233,248,65,132,193,37,65,233,238,78,180,100,32,55,12,177,56,26,192,180,41,140,80,193,133,163,167,190,48,6,197,235,96,131,101,22,153,34,61,222,124,161,24,19,211,122,228,10,60,115,126,20,187,37,94,146,180,96,97,180,140,113,96,36,12,56,201,215,175,126,252,225,221,251,110,73,175,108,234,57,43,169,63,56,190,231,220,117,18,229,118,185,57,175,16,113,125,252,171,23,121,11,207,247,216,125,31,12,95,64,159,7,111,89,255,174,56,255,215,175,191,83,146,55,87,158,235,98,98,61,164,241,224,193,76,97,85,140,82,119,152,248,96,3,15,35,47,98,152,192,178,50,55,233,152,142,24,211,108,148,115,105,8,209,211,0,218,4,111,141,207,120,113,3,207,152,213,205,109,212,105,181,204,211,173,71,220,96,219,244,3,7,113,2,205,85,16,49,130,214,248,212,108,109,35,45,252,1,9,66,76,108,69,180,142,55,140,175,120,18,5,62,134,222,95,0,80,122,26,220,239,128,8,86,69,154,225,175,192,46,149,46,163,144,101,19,163,49,238,238,52,106,34,55,15,225,38,28,1,178,152,177,57,52,204,109,79,160,113,67,25,2,95,133,50,20,34,98,5,4,222,234,34,134,236,159,110,38,227,102,136,40,172,38,104,104,114,155,37,250,98,59,141,250,34,112,239,133,205,129,55,76,109,88,242,73,21,229,238,77,118,31,226,164,142,230,183,245,142,104,6,110,140,6,126,212,92,6,116,128,160,19,246,49,135,181,47,4,11,168,37,95,37,195,7,238,222,17,132,34,6,165,232,139,183,188,87,206,214,174,171,77,166,158,118,130,153,90,122,197,82,199,135,78,74,158,121,204,135,185,112,38,62,90,96,95,132,120,141,60,114,133,145,11,149,51,89,167,153,67,17,79,28,52,58,89,45,66,33,164,20,212,169,115,215,219,64,8,33,137,236,26,219,6,124,19,138,215,36,50,160,220,186,6,147,82,25,230,233,137,182,57,37,122,192,187,117,122,98,214,46,206,87,239,13,207,181,107,224,37,154,60,87,152,213,171,160,3,150,243,214,234,61,248,66,21,185,56,143,66,68,68,31,63,223,73,49,17,125,12,241,247,205,150,162,48,67,219,32,63,198,2,141,99,92,156,183,128,255,133,89,156,173,60,69,237,153,46,100,229,11,167,91,57,55,152,218,34,102,12,138,78,64,214,65,28,97,168,3,196,174,73,155,168,124,245,220,132,27,6,95,119,86,77,185,199,225,147,206,178,250,212,158,82,59,211,71,226,100,10,113,49,204,211,164,143,172,197,44,136,157,149,40,143,157,108,97,89,15,184,25,82,204,243,242,82,238,145,176,18,117,82,9,68,67,80,135,74,91,13,13,146,191,4,56,41,178,187,71,139,66,29,121,59,124,201,9,237,109,243,92,230,10,151,36,242,83,18,167,89,46,201,69,110,0,27,40,210,46,40,37,138,128,71,194,152,217,185,124,240,8,4,87,216,13,94,12,236,154,232,178,8,190,74,193,163,66,170,6,164,207,89,171,1,248,54,146,139,22,137,125,31,98,149,140,171,226,208,133,189,44,11,148,109,155,103,166,245,240,188,169,240,41,252,105,244,83,222,187,147,138,213,244,56,25,191,233,2,131,150,196,40,230,42,218,132,129,183,152,21,245,128,127,8,117,84,221,63,71,138,32,20,245,165,71,215,181,252,106,13,145,43,243,81,126,57,52,140,189,75,118,95,15,181,110,87,20,47,237,218,43,25,144,208,41,44,225,201,207,231,45,4,74,43,210,156,243,183,42,216,79,11,108,158,19,180,209,68,226,59,95,77,54,196,137,206,190,119,1,58,150,235,6,95,105,207,17,173,204,189,92,177,101,65,177,63,126,251,157,75,6,9,224,237,103,37,190,10,159,195,171,188,67,57,51,122,12,51,254,241,250,28,98,165,254,229,188,252,99,120,241,47,236,231,240,42,245,47,231,181,216,199,171,37,19,77,230,179,48,64,74,230,151,56,95,27,60,37,94,184,165,229,242,175,124,79,43,71,63,96,87,43,197,214,182,53,1,238,31,79,93,100,66,5,119,255,88,238,57,240,34,121,122,60,121,185,190,42,216,211,99,217,231,209,139,244,23,199,211,23,217,94,193,126,113,44,251,28,120,145,188,115,60,249,100,163,170,160,239,28,75,191,0,95,113,160,211,174,64,197,70,167,103,108,246,57,35,14,74,101,29,211,211,96,201,145,42,61,212,40,10,103,86,23,3,9,227,81,67,251,209,33,83,92,135,190,116,231,229,47,111,34,223,115,247,238,194,162,150,61,251,211,73,244,82,199,174,168,226,243,137,222,173,83,18,242,223,27,215,139,28,138,25,86,239,7,112,211,207,146,148,223,126,212,140,181,7,251,195,25,252,71,95,237,90,251,12,158,164,230,181,226,231,71,77,47,213,197,162,93,144,21,136,121,33,3,55,147,243,158,139,161,110,4,203,122,237,85,254,32,108,117,193,11,62,253,146,30,165,89,33,195,39,167,57,231,151,97,117,62,166,134,99,53,50,170,13,19,102,97,170,4,205,39,130,188,238,254,54,71,176,35,130,47,195,18,177,123,159,159,241,57,100,103,225,35,231,174,43,183,86,18,175,11,73,33,35,72,196,13,114,117,192,96,71,151,119,95,202,85,190,229,191,10,96,31,111,85,159,179,245,95,9,132,108,130,75,186,164,97,168,202,21,173,255,146,240,87,83,156,223,174,21,36,63,64,100,222,235,165,18,23,180,146,4,246,232,172,238,187,213,173,155,184,145,171,155,183,228,142,192,169,79,36,137,17,80,67,84,244,116,208,157,126,135,183,198,81,132,128,186,118,133,165,223,222,230,178,70,190,200,27,58,160,97,167,217,144,52,8,146,217,77,104,36,162,76,4,225,142,121,10,255,79,205,78,234,220,213,111,10,161,45,119,105,172,233,88,54,168,212,230,169,81,217,75,70,213,175,45,164,127,195,139,248,241,89,92,86,39,143,249,113,22,220,166,193,139,237,168,224,18,135,154,131,54,92,186,177,242,48,53,10,3,38,183,152,218,5,166,220,126,59,85,76,66,103,63,149,208,201,113,209,114,16,142,180,213,200,203,3,144,151,85,200,252,208,83,13,125,128,126,225,162,10,154,159,101,171,161,253,3,160,253,42,104,113,208,172,198,166,7,96,211,18,236,220,47,24,234,208,146,68,30,206,122,12,139,76,19,79,182,45,46,107,248,187,216,234,178,124,247,162,186,217,73,110,160,76,43,253,17,41,25,55,66,0,191,193,218,208,106,167,84,253,181,31,24,20,72,119,199,103,80,68,242,200,94,172,252,47,83,25,156,192,51,178,185,180,249,175,105,251,105,20,125,66,26,132,89,187,58,209,22,176,207,30,99,87,208,218,3,159,158,104,255,15,153,88,55,124,9,32,0,0 }; +const uint8_t JS_CONTROLS_GZIP[2122] PROGMEM = { 31,139,8,0,125,24,117,92,2,255,213,89,209,114,219,184,21,125,207,87,112,153,157,72,172,29,217,78,154,237,86,52,61,163,200,74,172,70,43,187,178,188,233,244,69,3,145,80,196,49,5,178,32,40,197,245,232,55,250,33,253,164,126,73,47,0,2,4,105,210,178,173,73,103,250,98,147,23,23,7,7,231,94,92,128,144,31,147,148,89,55,195,217,112,60,156,14,123,163,217,231,155,161,119,114,124,236,250,170,97,58,156,14,70,158,97,24,245,62,130,225,68,25,174,206,123,211,65,110,252,165,240,250,120,51,157,94,142,189,119,133,229,250,235,112,218,191,24,76,188,247,229,174,218,254,167,194,247,170,119,238,253,177,120,237,243,247,15,6,212,104,120,14,29,126,173,0,73,235,159,11,191,241,205,111,31,193,114,114,92,118,84,230,19,99,150,131,191,77,65,131,171,155,169,119,242,174,236,109,54,189,47,122,124,158,244,174,46,188,19,197,178,63,26,244,38,202,168,168,246,206,207,165,105,118,117,57,28,67,127,37,208,167,203,137,150,244,99,175,255,69,203,57,26,124,154,106,209,38,195,207,23,83,45,87,127,48,158,2,107,61,224,108,122,51,249,235,205,229,240,122,160,161,250,179,193,111,131,73,111,116,174,241,250,179,171,1,244,154,12,127,135,174,239,180,241,235,96,218,187,190,186,232,141,12,248,217,245,205,248,211,232,242,107,105,140,126,111,50,185,156,106,237,251,179,222,104,248,247,222,100,56,214,177,238,207,198,151,227,129,14,94,127,118,222,155,124,129,208,44,50,226,179,48,38,150,31,71,49,237,71,40,77,219,226,113,24,56,247,249,131,55,206,86,115,76,181,221,77,55,33,243,151,134,31,74,177,57,211,46,197,44,163,196,134,63,255,200,226,48,197,182,155,187,228,19,87,14,120,133,41,138,2,221,92,168,160,60,18,204,48,165,225,26,83,237,84,168,162,156,54,152,161,52,89,162,136,105,39,173,146,242,73,51,178,136,226,141,129,35,69,83,237,62,162,52,46,250,43,1,85,51,138,194,127,34,26,18,237,192,229,84,141,218,200,69,85,198,0,209,91,219,13,240,2,101,17,43,60,183,219,87,107,68,173,13,158,167,177,127,235,26,207,253,152,16,236,51,28,120,11,20,165,184,8,13,197,41,67,148,181,157,251,159,219,65,236,103,43,76,152,211,65,65,208,182,255,96,59,157,120,177,104,59,238,207,109,251,53,141,55,240,190,100,171,168,109,219,142,155,227,118,252,40,78,49,184,228,40,238,246,149,17,117,114,205,16,203,210,1,204,158,194,8,13,92,56,186,246,133,49,40,94,197,107,44,211,197,22,121,240,246,27,197,152,216,206,3,87,224,89,242,163,56,168,241,146,164,5,11,235,200,26,199,86,206,128,147,124,243,250,215,95,222,127,112,107,122,21,83,47,89,73,251,222,143,66,255,182,155,43,183,45,205,121,137,72,16,225,223,195,52,156,135,81,200,238,250,96,248,6,250,220,135,139,246,79,213,249,191,121,243,147,146,188,179,12,131,0,19,231,94,199,131,7,83,195,170,24,105,119,152,248,96,13,15,163,48,101,152,192,250,177,215,122,76,95,140,105,31,214,115,57,20,162,235,0,122,4,111,172,175,120,126,13,207,152,181,237,77,218,61,58,178,15,54,33,9,226,77,39,138,125,196,9,116,150,113,202,8,90,225,3,251,104,147,26,225,143,73,156,96,226,41,162,109,188,102,124,105,147,52,142,48,244,254,6,128,210,211,226,126,79,136,96,83,164,25,254,14,236,180,116,5,133,34,155,24,205,176,187,53,168,137,220,124,10,55,225,8,144,213,140,45,161,97,110,123,4,141,27,234,16,248,42,148,161,16,17,171,32,240,214,0,49,228,253,229,250,114,220,73,16,133,213,4,13,29,110,115,68,95,236,233,168,207,227,224,78,216,124,120,195,212,131,37,159,151,75,238,222,97,119,9,206,11,102,121,59,239,138,102,224,198,104,28,165,157,69,76,7,8,58,225,8,115,88,239,76,176,128,90,242,93,50,188,231,238,93,65,40,101,80,151,190,133,139,59,229,236,108,93,99,50,109,221,9,102,234,184,115,138,209,173,171,8,136,99,67,87,147,103,33,139,96,46,156,73,132,230,56,18,33,94,161,144,92,96,20,64,233,204,215,105,225,80,197,19,7,140,110,81,139,80,2,41,5,117,234,52,8,215,16,66,72,34,175,197,54,49,223,109,178,21,73,45,168,186,129,197,164,84,150,125,240,202,216,133,114,61,224,221,57,120,101,183,206,78,151,31,172,48,240,90,224,37,154,194,64,152,213,171,160,3,150,211,163,229,7,240,133,42,114,118,154,38,136,136,62,81,185,147,98,34,250,88,226,239,219,13,69,73,129,182,70,81,134,5,26,199,56,59,61,2,254,103,118,117,182,242,244,180,99,186,144,149,47,156,110,227,220,96,106,243,140,49,40,58,49,89,197,89,138,161,14,16,175,37,109,162,242,181,75,19,62,180,248,186,115,90,202,61,75,30,117,150,213,167,245,152,218,133,62,18,167,80,136,139,97,31,228,125,100,45,102,113,230,47,69,121,236,22,11,203,185,199,157,132,98,158,151,231,114,143,132,149,104,146,202,33,14,5,117,168,180,205,208,32,249,75,128,243,34,187,125,176,40,212,81,183,203,151,156,208,222,179,79,101,174,112,73,210,72,147,56,40,114,73,46,114,11,216,64,145,14,64,41,81,4,66,146,100,204,43,229,67,72,32,184,194,110,241,98,224,181,68,151,121,252,93,10,158,86,82,53,38,125,206,90,13,192,183,145,82,180,72,22,69,16,171,124,92,21,7,23,246,178,34,80,158,103,31,219,206,253,243,166,194,167,240,63,163,175,121,111,95,53,172,166,135,201,248,67,23,24,180,228,70,49,87,209,38,12,188,197,110,168,7,252,3,168,171,234,254,41,82,4,161,168,47,66,186,106,149,87,107,130,2,153,143,242,139,225,208,218,185,100,119,245,80,235,118,73,241,194,107,189,150,1,73,252,202,18,190,252,114,122,132,206,108,77,154,115,254,81,5,251,113,129,237,83,130,214,134,72,124,231,107,201,134,44,215,57,10,207,64,199,122,221,224,235,236,57,162,213,185,215,43,182,168,40,246,159,127,253,155,75,6,9,16,238,102,37,190,6,159,195,171,190,67,61,51,186,15,51,254,209,250,28,98,181,254,245,188,162,125,120,241,47,235,231,240,170,245,175,231,53,223,197,235,72,38,154,204,103,97,128,148,44,47,113,190,54,120,74,188,112,75,43,229,95,253,158,86,143,254,132,93,173,22,219,216,214,4,120,180,63,117,145,9,13,220,163,125,185,151,192,171,228,233,254,228,229,250,106,96,79,247,101,95,70,175,210,159,239,79,95,100,123,3,251,249,190,236,75,224,85,242,254,254,228,243,141,170,129,190,191,47,253,10,124,195,129,206,184,250,20,27,157,153,177,197,231,140,56,40,213,117,212,167,193,154,35,149,62,212,40,10,199,142,139,129,132,245,160,225,228,193,33,83,92,131,190,116,231,229,47,111,211,40,12,118,238,194,162,150,61,251,211,73,244,82,199,174,180,225,243,137,222,174,52,9,249,239,109,16,166,62,197,12,171,247,39,112,51,207,146,148,223,126,180,172,85,8,251,195,49,252,71,223,189,214,201,49,60,73,205,91,213,207,143,150,89,170,171,69,187,34,43,16,11,19,6,110,54,231,61,19,67,93,11,150,237,214,235,242,65,216,113,193,11,62,253,242,30,181,89,33,195,39,167,57,227,151,97,109,62,166,129,227,28,22,84,15,109,152,133,173,18,180,156,8,242,154,251,199,28,193,246,8,190,12,75,202,238,34,126,198,231,144,221,121,132,252,91,87,110,173,36,91,85,146,66,70,144,136,171,226,230,128,193,142,46,239,190,148,171,124,43,127,21,192,62,126,212,124,206,54,127,29,16,178,9,46,122,73,195,80,141,43,218,252,5,225,255,77,113,126,187,86,145,252,9,34,243,94,47,149,184,162,149,36,176,67,103,117,223,173,110,221,196,141,92,219,190,33,183,4,78,125,34,73,172,152,90,162,162,235,65,183,230,29,222,10,167,41,2,234,198,21,150,121,123,91,202,26,249,34,111,232,128,134,167,179,33,111,16,36,139,155,208,84,68,153,8,194,93,251,0,254,31,216,93,237,236,154,55,133,208,86,186,52,54,116,172,27,84,106,243,216,168,236,37,163,154,215,22,210,255,48,76,249,241,89,92,86,231,143,229,113,230,220,102,192,139,237,168,226,146,37,134,131,49,156,222,88,121,152,14,43,3,230,183,152,198,5,166,220,126,187,77,76,18,127,55,149,196,47,113,49,114,16,142,180,205,200,139,39,32,47,154,144,249,161,167,25,250,9,250,37,243,38,104,126,150,109,134,142,158,0,29,53,65,139,131,102,51,54,125,2,54,173,193,46,253,130,161,14,45,121,228,225,172,199,176,200,52,241,228,121,226,178,134,191,139,173,174,200,247,48,109,219,221,252,6,202,118,244,143,72,249,184,41,2,248,53,54,134,86,59,165,234,111,252,192,160,64,220,45,159,65,21,41,36,59,177,202,191,76,21,112,2,207,42,230,114,194,127,77,219,77,163,234,147,208,56,41,218,213,137,182,130,125,252,16,187,129,214,14,120,125,162,253,47,92,221,13,122,1,32,0,0 }; diff --git a/src/dataStyleCSS.h b/src/dataStyleCSS.h index bbdacdf..0167465 100644 --- a/src/dataStyleCSS.h +++ b/src/dataStyleCSS.h @@ -1,5 +1,5 @@ const char CSS_STYLE[] PROGMEM = R"=====( -.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:.2em;padding:.12em .4em .14em;text-align:center;color:#fff;font-weight:700;line-height:1;margin-bottom:5px;display:inline-block;white-space:nowrap;vertical-align:baseline;position:relative;top:-.15em;background-color:#999;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}@media(min-width:400px){.container{width:84%}}@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%}.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%}}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}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.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}@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}a{color:#1eaedb}a:hover{color:#0fa0ce}button{display:inline-block;padding:10px;border-radius:3px;color:#fff;background-color:#999}#mainHeader{display:inline-block}#conStatus{position:inherit;font-size:.75em}button,.button{margin-bottom:1rem}.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}hr{margin-top:.5rem;margin-bottom:1.2rem;border-width:0;border-top:1px solid #e1e1e1}.container:after,.row:after,.u-cf{content:"";display:table;clear:both}.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{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 .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;transition:background-color .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 .08s ease-in-out;-moz-transition:left .08s ease-in-out;-o-transition:left .08s ease-in-out;-ms-transition:left .08s ease-in-out;transition:left .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}.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:0}}.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}.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:0;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:0;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}input{margin:0 auto 1.2rem auto;padding:2px 5px;width:100%;box-sizing:border-box;border:0;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%} +.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}.dark{background:#444857;border-bottom:#444857 3px solid}.label{box-sizing:border-box;white-space:nowrap;border-radius:.2em;padding:.12em .4em .14em;text-align:center;color:#fff;font-weight:700;line-height:1;margin-bottom:5px;display:inline-block;white-space:nowrap;vertical-align:baseline;position:relative;top:-.15em;background-color:#999;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}@media(min-width:400px){.container{width:84%}}@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%}.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%}}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}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:300}h1{font-size:4rem;line-height:1.2;letter-spacing:-.1rem}h2{font-size:3.6rem;line-height:1.25;letter-spacing:-.1rem}h3{font-size:3rem;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}@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}a{color:#1eaedb}a:hover{color:#0fa0ce}button{display:inline-block;padding:10px;border-radius:3px;color:#fff;background-color:#999}#mainHeader{display:inline-block}#conStatus{position:inherit;font-size:.75em}button,.button{margin-bottom:1rem}.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}hr{margin-top:.5rem;margin-bottom:1.2rem;border-width:0;border-top:1px solid #e1e1e1}.container:after,.row:after,.u-cf{content:"";display:table;clear:both}.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:.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{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 .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;transition:background-color .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 .08s ease-in-out;-moz-transition:left .08s ease-in-out;-o-transition:left .08s ease-in-out;-ms-transition:left .08s ease-in-out;transition:left .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}.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:0}}.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}.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 .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:0;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:0;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}input{margin:0 auto 1.2rem auto;padding:2px 5px;width:100%;box-sizing:border-box;border:0;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%} )====="; -const uint8_t CSS_STYLE_GZIP[2816] PROGMEM = { 31,139,8,0,115,176,253,91,2,255,197,26,105,111,172,56,242,175,176,137,162,151,214,2,107,206,110,104,141,180,31,247,219,74,59,31,71,51,146,1,19,80,104,232,229,152,36,175,197,127,95,31,28,190,72,119,142,209,190,126,73,26,187,170,92,183,203,101,236,180,169,123,88,214,168,189,156,155,174,236,203,166,142,91,84,193,190,252,19,29,95,202,172,47,226,125,244,112,60,193,246,169,172,99,23,156,95,143,73,243,106,117,229,207,178,126,138,147,166,205,80,107,225,145,209,78,155,106,56,213,230,244,183,187,48,100,7,128,135,99,94,53,176,143,43,148,247,24,12,182,217,133,145,179,250,230,28,187,15,199,137,74,11,179,114,232,226,112,94,162,128,89,243,18,3,195,63,191,210,159,246,41,129,143,46,240,77,39,218,155,206,33,48,129,29,236,142,103,152,101,152,21,139,80,103,252,205,35,109,249,84,76,67,211,122,73,211,247,205,9,243,68,134,240,243,196,98,64,158,49,219,77,27,223,231,121,206,120,180,186,170,204,136,86,38,106,28,238,104,247,67,251,223,161,41,59,116,73,96,250,252,212,54,67,157,197,247,14,76,210,40,61,46,74,161,8,247,78,8,193,33,48,60,44,65,215,96,154,163,141,78,168,133,85,38,224,186,40,77,247,142,140,235,238,33,10,1,143,123,70,61,106,91,108,156,86,64,247,252,232,144,37,10,122,116,0,73,196,163,191,160,30,118,231,2,86,189,132,238,71,1,82,208,83,15,5,194,234,221,80,99,91,190,72,139,231,78,234,131,92,198,70,97,146,128,156,199,198,106,109,27,113,97,20,238,145,235,202,168,153,23,248,64,88,24,86,229,79,216,150,181,136,188,247,83,79,209,119,10,188,200,77,120,228,10,38,168,186,104,221,246,248,82,148,61,178,186,51,76,81,92,55,47,45,60,75,238,104,187,232,52,187,84,108,59,248,201,176,125,242,203,193,191,143,61,122,237,45,204,220,83,29,167,168,198,166,225,252,232,152,227,208,178,94,16,117,195,61,0,199,10,135,153,85,176,103,71,242,201,0,187,96,86,118,231,10,190,197,101,77,33,147,170,73,159,117,12,98,227,247,101,10,171,105,225,4,118,136,32,28,213,0,38,1,102,217,78,128,57,93,21,103,77,44,70,81,164,9,140,73,93,22,89,105,138,225,8,135,48,207,198,185,69,116,250,248,130,53,69,191,197,73,139,224,179,69,158,39,124,155,46,130,101,24,248,24,153,151,14,243,8,102,142,8,218,162,76,3,153,121,251,116,159,138,144,79,45,66,181,6,54,74,82,55,60,136,176,77,11,235,39,29,11,25,130,78,224,139,192,111,168,194,222,173,1,70,81,22,250,18,191,231,161,61,87,58,202,81,126,240,176,112,255,60,161,172,132,143,107,158,193,46,125,126,221,93,236,53,227,178,241,131,255,48,170,208,161,167,135,142,14,15,106,174,157,204,56,101,188,5,32,206,203,182,235,173,180,40,171,108,1,230,7,103,68,154,60,193,104,55,53,90,104,175,223,231,92,238,219,225,242,111,143,23,233,95,26,57,219,123,182,183,252,35,16,5,54,149,4,227,18,254,242,102,104,165,113,15,216,2,245,28,59,176,12,18,137,228,187,242,85,102,145,104,167,67,127,162,90,154,8,66,145,58,141,66,9,38,12,68,242,117,169,168,96,239,219,128,200,165,208,63,184,18,253,74,195,68,228,72,234,121,65,149,34,36,221,49,85,187,88,125,81,182,217,4,187,161,50,108,16,6,214,137,112,178,96,132,28,222,3,114,17,138,234,174,201,243,14,245,86,242,102,9,190,160,25,237,4,231,57,72,190,177,98,172,94,98,106,71,69,58,206,94,98,117,197,224,124,201,220,24,23,105,185,161,64,128,243,57,83,63,44,162,123,190,189,33,18,231,154,166,126,88,164,228,123,91,66,173,30,108,106,71,69,58,129,43,34,115,46,102,110,140,139,4,66,176,37,18,31,15,230,198,184,68,43,218,18,138,139,27,83,63,44,82,218,31,104,80,113,38,213,138,213,111,8,117,8,55,133,170,54,52,36,69,39,79,45,10,182,196,146,131,208,124,103,238,86,79,82,34,214,124,111,242,86,3,72,241,109,110,79,169,254,53,22,253,169,186,208,210,5,87,75,40,14,93,59,120,24,147,38,123,155,64,99,112,92,103,29,155,212,22,66,97,99,3,161,240,193,187,30,123,206,225,169,172,222,226,31,255,62,163,218,248,21,214,221,15,179,195,191,177,183,182,101,62,151,77,46,41,6,213,237,55,205,65,238,140,133,99,22,174,89,120,102,225,155,69,96,22,33,127,142,0,82,45,99,7,45,230,140,231,196,3,0,147,224,68,195,185,188,85,184,119,143,21,234,113,33,71,107,29,82,243,225,250,9,67,141,133,203,97,122,118,168,193,12,182,80,61,1,85,179,168,183,133,233,115,152,174,237,107,48,53,139,130,3,197,13,46,188,157,14,42,174,14,53,160,168,161,128,26,168,168,161,140,10,54,43,24,65,229,1,149,94,84,166,111,187,26,45,133,138,252,222,132,27,8,58,1,27,12,143,227,89,112,143,17,94,38,111,114,16,68,89,50,194,184,104,200,49,106,26,5,57,4,41,26,147,1,123,79,125,209,150,226,243,41,192,97,167,96,254,148,224,9,39,72,125,177,61,222,159,112,33,247,47,4,201,177,82,183,192,120,143,139,189,95,123,216,15,221,122,24,47,235,2,7,72,207,197,156,189,199,49,55,49,106,218,19,195,82,33,79,20,96,15,86,62,84,21,179,6,95,92,108,28,224,7,235,4,95,121,20,242,120,11,218,153,160,208,218,243,194,78,250,244,251,50,67,82,203,133,111,1,244,236,168,116,81,14,79,99,209,242,54,99,142,39,73,70,157,101,214,62,227,14,204,143,4,201,153,207,125,198,61,114,200,103,92,75,232,24,230,120,21,211,110,155,151,249,235,96,165,249,133,0,96,6,226,187,187,229,12,214,195,164,66,199,180,66,176,197,210,246,5,163,210,54,149,238,40,145,101,188,197,203,19,124,66,49,49,43,36,103,21,236,32,152,246,99,209,85,240,17,152,224,129,252,183,157,157,185,14,16,237,146,161,157,228,84,193,172,116,214,9,41,107,156,195,13,96,16,9,231,31,153,72,176,51,1,7,34,79,239,185,121,87,51,239,114,243,222,149,121,255,202,124,40,204,79,171,31,167,12,18,45,134,141,61,124,152,134,67,223,28,183,250,79,17,241,229,73,251,198,80,93,230,36,68,124,114,14,73,112,236,241,65,175,203,155,246,20,183,13,14,33,244,232,7,25,122,218,173,152,85,121,17,213,75,8,24,132,91,160,106,217,34,18,88,55,104,89,149,80,155,58,38,158,137,69,73,210,33,77,148,184,40,179,12,213,147,144,1,120,224,133,196,220,198,117,95,176,83,218,163,187,187,40,226,69,64,20,79,198,241,52,56,214,53,36,95,131,228,28,84,36,56,27,193,165,70,80,251,14,202,202,204,26,147,176,4,107,165,55,37,98,147,27,200,155,20,231,64,37,210,52,238,198,145,185,168,209,51,5,40,174,143,22,179,48,123,144,108,138,227,186,202,12,7,157,254,225,25,92,37,162,182,116,232,72,134,210,166,133,84,204,26,23,81,108,112,233,81,110,121,138,191,99,186,96,250,177,157,160,91,25,38,95,240,89,252,244,77,25,37,80,83,10,214,207,238,155,51,136,251,127,205,32,7,28,95,172,82,197,198,229,43,18,111,206,38,22,171,72,23,151,132,9,222,12,134,158,181,194,8,214,116,114,230,115,202,108,8,217,15,151,241,13,119,188,71,8,141,118,247,82,246,105,161,221,208,141,191,149,167,115,211,246,176,238,53,37,65,130,200,71,202,249,190,216,253,158,45,6,168,50,104,7,28,43,131,124,108,111,199,87,28,233,208,118,248,251,185,41,169,203,170,222,62,213,70,132,254,28,187,161,218,25,119,73,255,124,35,15,135,164,236,193,197,116,242,92,246,22,231,213,178,100,134,237,118,6,130,29,178,48,225,102,232,143,214,169,249,249,49,132,230,131,244,187,15,193,127,0,118,54,175,157,22,40,125,214,118,40,247,97,230,58,217,12,104,148,245,121,232,127,235,223,206,232,151,59,138,132,173,121,247,251,226,30,52,119,72,198,90,54,52,172,95,214,4,17,204,32,184,240,1,207,204,53,25,105,214,150,245,101,27,112,37,166,49,27,153,52,240,89,225,125,91,109,64,53,183,80,234,174,3,93,3,144,245,111,100,229,159,23,118,166,62,16,241,39,165,99,53,196,9,194,27,142,120,33,35,150,226,49,149,77,206,162,88,87,38,1,52,0,254,3,200,199,32,153,104,39,32,78,218,91,144,24,17,147,178,76,8,208,47,44,134,76,214,29,238,240,240,35,160,148,119,252,16,205,114,211,66,59,237,34,159,98,176,249,28,26,54,209,103,240,84,156,89,120,61,38,205,112,124,101,78,13,35,228,61,87,190,245,3,235,157,159,144,241,88,165,254,227,199,18,53,135,205,88,177,130,57,6,172,104,9,27,146,245,4,191,161,7,1,209,109,40,243,55,122,14,19,148,89,250,123,61,135,249,136,198,121,176,75,125,192,115,174,48,216,124,14,109,211,115,222,199,123,207,115,116,152,82,193,78,79,217,138,7,184,203,62,22,211,146,157,56,15,249,162,113,139,41,117,186,196,7,218,231,211,114,203,43,238,151,234,14,200,237,160,100,215,20,26,90,255,105,176,8,13,223,205,18,104,11,59,2,189,141,194,219,129,124,8,216,228,116,221,174,201,215,134,116,91,250,55,114,37,112,101,133,191,219,55,74,198,29,240,231,186,96,175,180,55,28,210,223,216,170,96,230,206,207,180,157,197,57,182,241,238,114,51,131,211,170,190,178,40,24,111,150,210,152,254,90,121,89,85,91,34,75,170,5,71,254,32,57,116,164,153,133,42,148,246,108,143,254,137,119,160,12,189,198,206,199,153,40,96,157,85,232,34,237,242,250,28,69,157,151,93,243,204,166,8,56,155,7,107,137,198,18,217,65,81,19,41,106,185,109,20,86,213,82,196,108,75,229,126,205,104,178,168,44,219,218,152,219,235,54,139,177,121,72,115,37,91,60,64,227,88,128,124,184,242,249,227,84,5,151,48,63,143,46,26,51,67,57,28,170,254,74,97,255,205,220,47,15,244,250,249,203,178,136,228,196,202,244,175,23,198,46,59,11,166,36,245,124,89,144,149,20,231,128,183,70,209,183,137,241,205,214,217,34,44,217,73,159,2,104,203,133,0,140,95,101,35,158,20,203,213,100,132,46,239,248,235,138,93,10,43,244,232,236,182,188,100,38,141,215,76,91,212,47,146,201,65,166,238,78,250,44,124,35,61,73,129,27,69,162,179,183,151,58,209,95,252,135,220,93,204,254,227,41,7,95,34,181,213,180,37,41,57,176,242,105,181,114,220,158,81,173,165,80,155,117,104,131,157,33,245,204,110,129,209,156,239,132,141,96,99,252,250,46,240,57,85,179,40,115,117,106,155,132,32,239,238,93,19,84,3,51,126,221,15,140,238,12,183,14,205,123,101,51,6,107,23,113,121,165,107,173,3,213,94,161,42,175,208,142,222,106,83,175,149,221,66,65,217,187,233,33,68,51,218,169,131,242,192,95,100,103,166,74,78,39,174,92,0,220,72,86,202,228,64,204,214,238,18,149,92,247,202,151,82,248,135,87,146,92,150,229,130,245,196,232,170,69,112,64,122,162,203,47,176,109,235,201,89,13,58,81,145,17,23,23,208,166,229,98,188,221,241,99,224,223,41,36,179,215,236,106,239,231,212,249,121,121,213,85,210,151,90,41,176,23,93,111,34,58,189,1,123,149,36,123,255,245,203,111,189,222,192,209,186,194,117,166,40,253,47,191,75,123,3,83,235,10,215,153,162,244,191,250,134,238,13,60,45,11,92,101,137,145,255,210,107,191,55,240,195,168,95,101,134,209,254,226,139,196,55,176,51,211,191,202,16,163,62,210,210,108,121,179,134,94,132,26,236,142,123,186,20,157,46,56,201,93,11,87,221,110,222,199,207,205,54,240,149,123,5,78,55,236,165,251,32,48,231,31,96,31,118,140,235,223,202,236,143,95,238,234,225,116,247,59,247,170,64,136,78,19,147,148,127,110,135,164,111,5,8,111,228,144,11,56,126,75,117,130,135,241,127,50,84,163,80,145,48,0,0 }; +const uint8_t CSS_STYLE_GZIP[2814] PROGMEM = { 31,139,8,0,126,24,117,92,2,255,197,26,89,111,179,72,242,175,120,19,69,138,181,192,54,167,13,104,164,125,220,183,149,118,30,71,51,82,3,77,64,193,224,229,24,39,159,197,127,223,62,56,250,34,118,190,100,180,113,226,64,83,85,93,119,87,87,99,165,77,221,195,178,70,237,245,220,116,101,95,54,117,212,162,10,246,229,159,40,190,148,89,95,68,135,240,41,62,193,246,165,172,35,7,156,223,226,164,121,51,187,242,71,89,191,68,73,211,102,168,53,241,200,104,165,77,53,156,106,99,250,223,93,25,178,13,192,83,156,87,13,236,163,10,229,61,6,131,109,118,101,228,204,190,57,71,206,83,60,81,105,97,86,14,93,20,204,83,20,48,107,46,17,216,121,231,55,250,215,190,36,240,217,1,158,97,135,7,195,62,250,6,176,252,125,124,134,89,134,89,49,9,117,198,223,60,210,150,47,197,52,52,205,151,52,125,223,156,48,79,100,8,223,79,44,250,228,30,179,221,180,209,99,158,231,140,71,179,171,202,140,104,101,162,198,225,142,86,63,180,255,29,154,178,67,215,4,166,175,47,109,51,212,89,244,104,195,36,13,211,120,81,10,69,120,180,3,8,142,254,206,197,18,116,13,166,57,90,232,132,90,88,101,2,174,131,210,244,96,203,184,206,1,162,0,240,184,103,212,163,182,197,198,105,5,116,215,11,143,89,162,160,135,71,144,132,60,250,5,245,176,59,23,176,234,37,116,47,244,145,130,158,186,200,23,102,239,134,26,219,242,34,77,158,219,169,7,114,25,27,5,73,2,114,30,27,171,181,109,196,137,81,112,64,142,35,163,102,174,239,1,97,98,88,149,63,96,91,214,34,242,193,75,93,69,223,41,112,67,39,225,145,51,216,190,10,136,158,231,29,253,131,140,200,70,121,196,10,38,168,186,106,253,61,190,20,101,143,204,238,12,83,20,213,205,165,133,103,201,143,45,7,157,102,95,140,44,27,223,237,44,143,124,217,248,59,238,209,91,111,98,169,94,234,40,69,53,182,41,231,128,113,142,99,210,188,32,234,191,7,0,226,10,199,167,89,176,123,91,114,102,31,251,110,86,118,231,10,190,71,101,77,33,147,170,73,95,117,12,98,175,233,203,20,86,211,196,9,236,16,65,136,213,200,39,145,105,90,182,143,57,93,21,103,78,44,134,97,168,137,168,73,93,38,153,105,10,254,16,199,62,207,198,185,69,244,113,124,193,154,162,87,81,210,34,248,106,146,251,9,223,162,147,96,25,6,62,184,230,169,131,60,132,153,45,130,182,40,211,64,102,238,33,61,164,34,228,75,139,80,173,129,13,147,212,9,142,34,108,211,194,250,69,199,66,134,160,237,123,34,240,59,170,112,88,104,128,81,152,5,158,196,239,121,104,207,149,142,114,152,31,93,44,220,63,79,40,43,225,243,154,160,112,44,156,223,246,87,107,77,213,108,252,232,61,141,42,116,224,234,161,195,227,147,154,164,39,51,78,169,114,1,136,242,178,237,122,51,45,202,42,91,128,249,193,25,145,102,93,48,90,77,141,22,218,235,245,188,8,120,86,176,252,28,240,36,253,165,145,151,9,215,114,151,31,2,81,96,83,73,48,14,225,47,111,134,86,26,119,129,37,80,207,177,3,203,32,161,72,190,43,223,100,22,137,118,58,244,39,170,165,7,126,32,82,167,81,40,193,4,190,72,190,46,21,21,28,60,34,149,66,253,232,72,212,43,13,11,161,45,41,231,130,42,69,68,186,208,170,86,49,251,162,108,179,9,118,67,97,216,28,12,172,19,225,100,177,8,57,188,116,228,34,20,213,92,147,231,29,234,205,228,221,20,60,65,51,218,9,174,115,148,60,99,197,88,125,196,208,142,138,116,236,131,196,234,138,193,121,146,177,49,46,210,114,2,129,0,231,113,134,126,88,68,119,61,107,67,36,206,49,13,253,176,72,201,115,183,132,90,253,215,208,142,138,116,124,71,68,230,92,204,216,24,23,9,4,96,75,36,62,26,140,141,113,137,86,184,37,20,23,53,134,126,88,164,116,16,29,175,215,10,213,111,136,116,12,54,69,170,54,244,35,197,38,79,45,244,183,132,146,67,208,248,224,217,189,126,164,196,171,241,209,195,123,213,47,69,183,177,253,72,245,174,177,232,79,213,149,150,45,184,82,66,81,224,88,254,211,152,52,217,251,4,26,129,120,125,106,91,164,174,16,139,26,190,228,193,235,29,187,207,225,169,172,222,163,135,127,159,81,189,251,21,214,221,131,209,225,111,236,169,109,153,207,5,147,67,234,71,117,225,77,115,144,219,99,97,27,133,99,20,174,81,120,70,225,27,69,192,111,61,128,84,197,88,126,139,249,226,57,113,1,192,36,56,193,188,86,230,220,114,226,10,245,184,128,163,53,14,169,245,112,221,132,161,198,194,225,240,92,43,208,96,250,91,168,46,143,170,34,186,91,120,30,135,231,88,26,102,93,205,148,224,72,113,253,43,111,161,163,138,171,67,245,41,106,32,160,250,42,106,32,163,130,205,186,69,80,183,175,40,210,179,28,85,67,84,185,162,244,174,34,147,179,193,234,56,158,5,167,24,225,117,242,33,27,65,148,37,35,140,138,134,236,183,166,81,144,67,144,162,49,25,176,207,212,87,109,233,61,87,253,54,219,46,243,187,2,87,216,106,234,139,235,241,241,132,11,183,127,33,72,246,159,186,9,198,71,92,220,253,218,195,126,232,214,93,123,89,23,56,44,122,46,206,172,3,142,179,137,81,195,154,24,150,10,119,162,0,107,48,243,161,170,152,29,248,114,98,99,167,63,152,39,248,198,163,144,219,123,208,206,4,133,214,154,87,214,18,160,215,203,19,146,78,174,124,175,160,103,91,163,171,178,89,26,139,150,183,25,115,57,73,50,234,40,179,246,25,119,96,190,37,72,246,188,207,219,61,34,155,124,198,181,100,142,96,142,103,49,172,182,185,204,151,131,153,230,87,2,128,25,136,30,30,150,61,87,15,147,10,197,105,133,96,139,165,237,11,70,165,109,42,221,214,33,203,120,139,151,39,248,130,34,98,86,72,246,38,216,65,48,237,231,162,171,224,51,48,192,19,253,181,236,189,177,142,16,245,210,177,189,228,86,254,172,118,214,52,41,107,156,185,119,96,71,100,156,255,20,42,254,222,0,28,140,242,252,192,1,56,58,0,135,3,112,111,1,120,183,0,2,1,96,230,32,158,114,72,184,24,56,114,241,38,26,14,125,19,111,53,172,66,226,211,147,21,118,67,117,157,211,16,241,205,57,52,65,220,227,13,94,151,55,237,41,106,27,28,74,232,217,243,51,244,178,95,49,171,242,42,42,153,16,216,17,118,129,170,107,147,136,96,222,163,107,141,140,218,36,50,113,77,44,75,210,15,233,187,68,69,153,101,168,158,196,196,79,120,49,49,191,81,221,23,108,127,246,236,236,175,138,128,33,16,5,148,113,92,13,142,121,11,201,211,32,217,71,21,9,206,102,112,168,25,212,142,131,50,51,179,199,36,44,193,90,233,77,41,217,224,6,242,38,197,217,80,137,57,157,203,113,116,174,106,24,77,177,138,203,163,197,46,204,32,36,177,226,16,175,178,157,141,78,255,112,119,92,41,162,118,115,232,72,134,210,166,133,84,206,26,215,80,108,112,233,107,110,58,139,183,103,218,96,26,178,108,191,91,57,38,23,120,31,126,250,174,236,226,107,210,11,86,209,254,219,179,137,243,127,207,38,71,28,105,172,98,197,86,230,235,19,119,206,44,38,171,76,23,231,132,9,94,32,134,158,181,195,8,214,180,127,230,243,203,108,16,217,35,151,241,13,199,124,68,8,141,86,119,41,251,180,208,46,242,187,191,149,167,115,211,246,176,238,53,101,66,130,200,71,90,5,60,177,117,62,219,13,80,109,208,246,57,214,6,249,88,238,158,175,66,210,161,237,240,245,185,41,169,239,170,110,63,213,75,132,254,28,197,129,218,86,119,72,243,125,35,39,7,164,20,194,101,117,242,90,246,38,231,221,178,100,59,203,233,118,8,118,200,196,132,155,161,143,205,83,243,227,115,8,205,39,233,119,159,130,255,4,236,108,94,43,45,80,250,170,237,82,30,130,204,177,179,25,112,87,214,231,161,255,173,127,63,163,95,30,40,18,182,230,195,239,139,123,208,36,34,25,107,89,220,176,126,89,43,68,48,131,224,194,71,252,100,174,211,72,195,182,172,175,219,128,43,49,141,217,200,195,29,222,57,124,108,171,13,168,230,30,74,221,109,160,91,0,178,254,119,89,249,231,149,237,173,143,68,252,73,233,88,13,81,130,240,210,35,158,230,136,229,121,68,101,147,179,41,214,149,65,0,119,0,255,3,228,179,35,185,104,47,32,78,218,91,144,24,17,131,178,76,8,208,11,22,67,6,235,16,119,120,248,25,80,202,123,126,136,230,185,105,162,189,118,146,159,98,176,249,57,52,108,162,159,193,83,113,102,225,245,152,52,195,241,213,58,53,140,144,247,28,249,200,16,172,7,134,66,198,91,170,247,57,106,142,155,177,98,250,115,12,152,225,18,54,36,235,9,126,67,55,7,162,219,80,230,239,244,28,38,40,179,244,247,122,14,243,17,141,243,96,151,250,132,231,220,96,176,249,57,180,77,207,249,24,239,35,207,209,97,74,197,59,221,121,43,30,224,44,235,88,68,203,119,226,60,228,66,227,22,83,234,116,136,15,180,175,167,229,136,88,92,47,213,21,144,91,65,201,170,41,180,182,254,211,96,17,26,190,175,37,208,22,86,4,122,34,133,151,3,121,59,176,201,233,186,92,147,203,134,244,94,250,119,114,48,112,99,134,191,91,119,74,198,109,250,231,186,224,160,180,60,108,210,243,216,170,96,230,62,208,180,156,69,57,182,241,254,122,55,131,211,172,158,50,41,24,239,150,114,55,253,55,243,178,170,182,68,150,84,11,98,126,83,57,116,164,181,133,42,148,246,108,141,254,129,87,160,12,189,69,246,231,153,40,96,157,85,232,42,173,242,250,28,69,157,151,29,246,204,166,240,57,155,251,107,137,198,18,217,81,81,19,41,106,185,101,20,86,213,82,196,108,75,229,124,205,104,178,168,44,219,90,152,219,219,54,139,176,121,72,195,37,91,60,64,227,88,128,124,184,242,249,243,84,5,151,48,126,30,93,52,102,134,114,56,84,253,141,194,254,155,185,95,110,232,17,244,151,101,17,201,137,149,233,95,47,140,85,118,38,76,73,234,249,178,32,43,41,206,1,239,141,162,111,19,227,155,173,179,69,88,178,147,62,5,208,230,11,1,24,191,202,70,52,41,150,171,201,8,93,222,241,215,25,187,20,86,232,217,222,111,121,201,76,26,207,153,182,168,95,36,147,131,76,93,157,244,89,248,78,122,146,2,55,138,68,251,96,45,117,162,183,248,15,57,201,152,253,199,85,54,190,68,106,179,105,75,82,114,96,229,211,106,37,222,126,162,90,75,161,182,234,80,234,157,221,134,208,236,237,132,69,96,99,252,246,10,240,115,106,102,17,230,232,84,54,137,64,58,77,183,196,212,192,140,95,247,129,93,119,134,91,27,230,131,178,16,131,181,149,184,188,210,181,214,128,106,195,80,149,87,104,75,111,181,171,215,170,110,161,160,172,219,116,3,162,25,237,212,65,121,224,47,178,51,83,37,167,19,71,94,252,239,36,43,101,113,32,102,106,103,137,72,174,115,229,73,233,251,211,51,73,46,203,242,192,186,91,116,212,2,216,39,77,209,229,11,108,219,122,114,214,29,125,80,145,17,7,23,207,134,233,96,188,125,252,57,240,239,20,146,217,107,118,181,143,243,233,124,191,188,35,43,233,75,173,18,216,27,178,119,17,157,94,157,189,73,146,189,56,251,229,215,101,239,224,104,157,225,54,83,148,254,151,95,194,189,131,169,117,134,219,76,81,250,95,125,181,247,14,158,150,9,110,178,196,200,127,233,125,225,59,248,97,212,111,50,195,104,127,241,13,228,59,216,153,233,223,100,136,81,31,105,89,182,188,93,67,15,68,119,236,204,123,58,28,157,14,58,201,89,11,87,217,110,158,207,207,141,54,240,149,51,5,78,55,236,109,125,223,55,230,63,96,29,247,140,235,223,202,236,143,95,30,234,225,244,240,59,247,234,64,128,78,19,147,148,127,110,133,164,111,9,8,239,229,144,83,56,126,73,181,253,167,241,127,75,92,82,69,202,48,0,0 };