From d396fd2713f9d05e83c7a015c6ed07605a9d2d65 Mon Sep 17 00:00:00 2001 From: mmcw-dev Date: Sat, 21 Oct 2017 21:44:07 -0400 Subject: [PATCH] Style buttons and input --- app/www/index.html | 93 ++++++++++++++++++++++++++++++---------------- 1 file changed, 62 insertions(+), 31 deletions(-) diff --git a/app/www/index.html b/app/www/index.html index c28e77e..b12536b 100644 --- a/app/www/index.html +++ b/app/www/index.html @@ -19,60 +19,91 @@ /* The slider */ .slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: #ccc; - -webkit-transition: .4s; - transition: .4s; + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #20ce45; + -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; + 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; + background-color: #f32121; } input:focus + .slider { - box-shadow: 0 0 1px #2196F3; + box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { - -webkit-transform: translateX(26px); - -ms-transform: translateX(26px); - transform: translateX(26px); + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); } /* Rounded sliders */ .slider.round { - border-radius: 34px; + border-radius: 34px; } .slider.round:before { - border-radius: 50%; + border-radius: 50%; + } + input[type=number]{ + border: 1px solid #fff; + border-radius: 5px; + color: #fff; + font-size: 18px; + -webkit-appearance: none; + background: transparent; + box-shadow: none; + } + button{ + border: 1px solid #fff; + border-radius: 5px; + color: #fff; + font-size: 18px; + background: transparent; + -webkit-appearance: none; + box-shadow: none; + } + button:focus{ + background-color: #20ce45; + border-color: #20ce45; } - - - +
+ +
+
+ +
+
+ +
+
+ +