From 417388eaedb7e4667f4b2b4e95b3d41db0df248c Mon Sep 17 00:00:00 2001 From: mmcw-dev Date: Sat, 21 Oct 2017 21:22:02 -0400 Subject: [PATCH] Add first buttons --- app/www/index.html | 77 ++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 75 insertions(+), 2 deletions(-) diff --git a/app/www/index.html b/app/www/index.html index 1060202..c28e77e 100644 --- a/app/www/index.html +++ b/app/www/index.html @@ -6,9 +6,73 @@ html,body{ background: #212121; } + /* The switch - the box around the slider */ + .switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; + } + + /* Hide default HTML checkbox */ + .switch input {display:none;} + + /* The slider */ + .slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; + } + + .slider:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; + } + + input:checked + .slider { + background-color: #2196F3; + } + + input:focus + .slider { + box-shadow: 0 0 1px #2196F3; + } + + input:checked + .slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); + } + + /* Rounded sliders */ + .slider.round { + border-radius: 34px; + } + + .slider.round:before { + border-radius: 50%; + } + + +