diff --git a/Configuration App/app/assets/stylesheets/application.css b/Configuration App/app/assets/stylesheets/application.css index 4cc21ae3..9b7421d9 100755 --- a/Configuration App/app/assets/stylesheets/application.css +++ b/Configuration App/app/assets/stylesheets/application.css @@ -1,54 +1,128 @@ -/* - * This is a manifest file that'll be compiled into application.css, which will include all the files - * listed below. - * - * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, - * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path. - * - * You're free to add application-wide styles to this file and they'll appear at the bottom of the - * compiled file so the styles you add here take precedence over styles defined in any styles - * defined in the other CSS/SCSS files in this directory. It is generally better to create a new - * file per style scope. - * - *= require_tree . - *= require_self - */ - +/* General +---------------------------------------------------------*/ +*, :after, :before { + box-sizing: border-box; +} body{ - background-color: #E4DD9C; + background-color: #000; + margin:0; } div#mainContent{ - background-color: #8BC34A; - width: 725px; - margin: 74px 0px 0px 9%; - padding: 30px 60px 63px 0px; - text-align: center; - font-size: 3.5em; - color: #505050; - box-shadow: 13px 17px 41px #505050; + background-color: #000; + max-width:680px; + width: 100%; + margin: 0 auto; + text-align: center; + font-size: 3.5rem; + color: #fff; +} + +div#mainContent h1 { + margin:0; } div#mainContent ul{ - list-style: none; + list-style: none; + margin: 0; + padding: 0; +} + + /* Select +---------------------------------------------------------*/ + +li label { + display:inline-block; + margin: 0.5em 0; + padding: 0.5em 0; +} + +li.wifiNetwork { + position: relative; + display: inline-block; + margin: 0; } -div#mainContent li{ - margin: 0px 0px 45px 0px; +li.wifiNetwork:after { + content: '▼'; + position: absolute; + width: 50px; + color: #deab04; + font-weight: bold; + font-size: 2rem; + right: 10px; + bottom: 50px; + border-radius: 3px; + pointer-events: none; + z-index: 2; +} + +select.wifiNetworkInputs { + position: relative; + max-width:680px; + width: 100vw; + background: #111; + color: #999; + border: none; + outline: none; + font-size: 2.5rem; + padding: 1em; + margin: 0; + border-radius: 3px; + cursor: pointer; + height: auto; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; } .wifiNetworkInputs{ - width: 100%; - font-size: .8em; - color: #505050; + max-width:680px; + width: 100vw; + padding:1em 0; + font-size: .8em; + color: #999; + background: #111; + border:#999 solid 1px; } .wifiConnectButton{ - width: 310px; - height: 150px; - margin: 68px 0px 105px 0px; - background-color: #D6D2AA; - border: 7px solid #505050; - font-size: 1em; - color: #505050; + width: 310px; + height: 150px; + margin:1.5em 0 0 0; + background-color: #deab04; + font-size: 3rem; + color: #fff; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +.reset input { + background:#BF1A2F; + border:#BF1A2F; + color:white; + padding:1em; + margin-top:1.5em; + font-size:1.5rem; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + + /* Wifi Icon +---------------------------------------------------------*/ + +.wifiIcon { + padding: 20px; +} +.wifiIcon, .wifiIcon:before { + display: inline-block; + border: 60px double transparent; + border-top-color: currentColor; + border-radius: 50%; +} +.wifiIcon:before { + content: ''; + width: 0; height: 0; } diff --git a/Configuration App/app/views/main/index.html.erb b/Configuration App/app/views/main/index.html.erb index b02213fa..0beb67d4 100755 --- a/Configuration App/app/views/main/index.html.erb +++ b/Configuration App/app/views/main/index.html.erb @@ -1,10 +1,11 @@