diff --git a/assets/css/style.css b/assets/css/style.css index b062db7..a65cbaf 100755 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -9,20 +9,20 @@ header { position: fixed; width: 100%; - border-bottom: 5px solid #0B3954; + border-bottom: 5px solid #0b3954; z-index: 3; - background: #2196F3; + background: #2196f3; } header nav { width: 90%; margin: 0 auto; - height: 59px + height: 59px; } .nav-buttons { display: inline-block; - float: right + float: right; } .nav-buttons ul { @@ -42,7 +42,7 @@ header nav { } .nav-buttons ul li a:hover { - background: #0B3954; + background: #0b3954; -webkit-transition: background 0.5s; transition: background 0.5s; } @@ -56,20 +56,20 @@ header nav { height: 59px; } -@media screen and (max-width:1248px) { +@media screen and (max-width: 1248px) { header nav { width: 100%; } } -@media screen and (max-width:1123px) { +@media screen and (max-width: 1123px) { header { width: 80%; height: 100%; position: fixed; display: block; - background: #0B3954; - left: -100% + background: #0b3954; + left: -100%; } .small-logo { @@ -89,18 +89,18 @@ header nav { .nav-buttons ul li { float: none; display: block; - border-bottom: 2px solid #2196F3; + border-bottom: 2px solid #2196f3; } .nav-buttons ul li a:active { - background: #2196F3 + background: #2196f3; } .menu-bar { display: block; width: 100%; - background: #2196F3; - border-bottom: 5px solid #0B3954; + background: #2196f3; + border-bottom: 5px solid #0b3954; } .menu-bar a { @@ -115,7 +115,7 @@ header nav { } } -@media screen and (max-width:451px) { +@media screen and (max-width: 451px) { .big-logo { height: 30px; margin: 12.5px 0; @@ -125,13 +125,12 @@ header nav { width: auto !important; left: 26% !important; } - } /* COLORES */ .bg-light-blue { - background: #2196F3; + background: #2196f3; } .tx-white { @@ -154,7 +153,7 @@ header nav { position: absolute; margin: 50px 0 0 5px; z-index: 1; - background: rgba(255, 255, 255, .5); + background: rgba(255, 255, 255, 0.5); padding: 10px; box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 5px; @@ -163,7 +162,7 @@ header nav { .formulario label { display: inline-block; cursor: pointer; - color: #0074D9; + color: #0074d9; position: relative; padding: 5px 15px; font-size: 1em; @@ -215,18 +214,18 @@ label:before { border-radius: 5px; height: 60px; width: 60px; - border: 2px solid #0074D9; + border: 2px solid #0074d9; margin: auto; } .marco-map { - background-image: url('../img/map.png'); + background-image: url("../img/map.png"); background-position: center; background-size: cover; } .marco-sat { - background-image: url('../img/satellite.png'); + background-image: url("../img/satellite.png"); background-position: center; background-size: cover; } @@ -241,7 +240,7 @@ input[type="radio"]:checked+label:before { input[type="radio"]:checked+label { padding: 5px 15px; - background: #0074D9; + background: #0074d9; border-radius: 2px; color: #fff; } @@ -255,7 +254,7 @@ input[type="checkbox"]:checked+label:before { } input[type="checkbox"]:checked+label { - background: #0074D9; + background: #0074d9; color: #fff; } @@ -284,7 +283,7 @@ input[type="checkbox"]:checked+label { .btn-panel { padding: 5px 15px; - background: #0074D9; + background: #0074d9; border-radius: 2px; color: #fff; margin-top: 5px; @@ -294,12 +293,12 @@ input[type="checkbox"]:checked+label { } button:hover { - background: #0074D0; + background: #0074d0; } button:active { background: #dddddd; - color: #0074D9; + color: #0074d9; } .oculto { @@ -313,7 +312,7 @@ button:active { } .map-overlay { - font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif; + font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif; position: absolute; width: 35%; bottom: 0; @@ -354,7 +353,7 @@ button:active { .map-overlay-inner button { display: inline-block; cursor: pointer; - background: #0074D9; + background: #0074d9; color: #ffffff; position: relative; padding: 5px 15px; @@ -368,15 +367,26 @@ button:active { .map-overlay-inner button:hover { background: rgba(0, 116, 217, 0.1); - color: #0074D9; + color: #0074d9; +} + +.mapboxgl-ctrl { + opacity: 0.35; + /* filter: invert(100); */ +} + +.mapboxgl-ctrl:hover { + opacity: 0.9; + /* background-color: #ff8b25; + color: #fff; */ } /* FUENTES */ @font-face { - font-family: 'Roboto'; - src: url('../font/roboto/Roboto-Regular.ttf') format('truetype'), - url('../font/roboto/Roboto-Regular.woff') format('woff'), ; + font-family: "Roboto"; + src: url("../font/roboto/Roboto-Regular.ttf") format("truetype"), + url("../font/roboto/Roboto-Regular.woff") format("woff"); font-weight: normal; font-style: normal; } \ No newline at end of file diff --git a/assets/css/style.min.css b/assets/css/style.min.css index f6dbb0b..7df446b 100644 --- a/assets/css/style.min.css +++ b/assets/css/style.min.css @@ -1 +1 @@ -*{margin:0;padding:0;font-family:"Roboto",sans-serif}header{position:fixed;width:100%;border-bottom:5px solid #0B3954;z-index:3;background:#2196F3}header nav{width:90%;margin:0 auto;height:59px}.nav-buttons{display:inline-block;float:right}.nav-buttons ul{overflow:hidden;list-style:none;display:block}.nav-buttons ul li{float:left}.nav-buttons ul li a{text-decoration:none;padding:20px 8px;display:inline-block}.nav-buttons ul li a:hover{background:#0B3954;-webkit-transition:background .5s;transition:background .5s}.nav-buttons ul li span{padding:8px}.menu-bar{display:none;height:59px}@media screen and (max-width:1248px){header nav{width:100%}}@media screen and (max-width:1123px){header{width:80%;height:100%;position:fixed;display:block;background:#0B3954;left:-100%}.small-logo{height:30px;margin:12.5px 0}.big-logo{display:none}.nav-buttons{display:block;float:none}.nav-buttons ul li{float:none;display:block;border-bottom:2px solid #2196F3}.nav-buttons ul li a:active{background:#2196F3}.menu-bar{display:block;width:100%;background:#2196F3;border-bottom:5px solid #0B3954}.menu-bar a{text-decoration:none;display:inline-block;float:right;padding:5px;margin:10px 10px 10px 0;border:2px solid #fff;border-radius:3px;font-weight:bold}}@media screen and (max-width:451px){.big-logo{height:30px;margin:12.5px 0}.map-overlay{width:auto!important;left:26%!important}}.bg-light-blue{background:#2196F3}.tx-white{color:#fff}#map{position:absolute;top:64px;bottom:0;width:100%;z-index:0}.capas{position:absolute;margin:50px 0 0 5px;z-index:1;background:rgba(255,255,255,.5);padding:10px;box-shadow:0 4px 10px 0 rgba(0,0,0,.2),0 4px 20px 0 rgba(0,0,0,.19);border-radius:5px}.formulario label{display:inline-block;cursor:pointer;color:#0074D9;position:relative;padding:5px 15px;font-size:1em;border-radius:5px;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;margin:1px 0}.formulario label:hover{background:rgba(0,116,217,.1)}.calles{padding:1px 3px;border-radius:8px;color:#fff}.conPavimento{background-color:#d742f5}.sinPavimento{background-color:#e87400}.map-options{display:flex;text-align:center}.sel-marco{border-radius:5px;height:60px;width:60px;border:2px solid #0074D9;margin:auto}.marco-map{background-image:url('../img/map.png');background-position:center;background-size:cover}.marco-sat{background-image:url('../img/satellite.png');background-position:center;background-size:cover}input[type="radio"]{display:none}input[type="radio"]:checked+label:before{display:none}input[type="radio"]:checked+label{padding:5px 15px;background:#0074D9;border-radius:2px;color:#fff}input[type="checkbox"]{display:none}input[type="checkbox"]:checked+label:before{display:none}input[type="checkbox"]:checked+label{background:#0074D9;color:#fff}@media screen and (min-width:600px){.capas{margin-top:115px}}@media screen and (min-width:400px){#panelToggle{position:absolute;margin-left:12px;font-size:x-large}}.panelToggle{position:absolute;margin-left:10px;top:67px;font-size:xx-large;box-shadow:0 4px 10px 0 rgba(0,0,0,.2),0 4px 20px 0 rgba(0,0,0,.19)}.btn-panel{padding:5px 15px;background:#0074D9;border-radius:2px;color:#fff;margin-top:5px;margin-bottom:5px;border-width:0;cursor:pointer}button:hover{background:#0074D0}button:active{background:#dddddd;color:#0074D9}.oculto{display:none}#features{max-width:300px;max-height:185px;overflow:auto}.map-overlay{font:12px/20px 'Helvetica Neue',Arial,Helvetica,sans-serif;position:absolute;width:35%;bottom:0;left:32%;padding:10px;color:rgb(11,57,84)}.map-overlay .map-overlay-inner{background-color:#ffffff80;box-shadow:0 1px 2px rgba(0,0,0,.2);border-radius:3px;padding:10px;margin-bottom:10px}.map-overlay h2{line-height:24px;display:block;margin:0 0 10px}.map-overlay .legend .bar{height:10px;width:100%;background:linear-gradient(to right,#fca107,#7f3121)}.map-overlay input{background-color:transparent;display:inline-block;width:100%;position:relative;margin:0;cursor:ew-resize}.map-overlay-inner button{display:inline-block;cursor:pointer;background:#0074D9;color:#ffffff;position:relative;padding:5px 15px;font-size:1em;border-radius:5px;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;margin:1px 0}.map-overlay-inner button:hover{background:rgba(0,116,217,.1);color:#0074D9}@font-face{font-family:'Roboto';src:url('../font/roboto/Roboto-Regular.ttf') format('truetype'),url('../font/roboto/Roboto-Regular.woff') format('woff'),;font-weight:normal;font-style:normal} \ No newline at end of file +*{margin:0;padding:0;font-family:Roboto,sans-serif}header{position:fixed;width:100%;border-bottom:5px solid #0b3954;z-index:3;background:#2196f3}header nav{width:90%;margin:0 auto;height:59px}.nav-buttons{display:inline-block;float:right}.nav-buttons ul{overflow:hidden;list-style:none;display:block}.nav-buttons ul li{float:left}.nav-buttons ul li a{text-decoration:none;padding:20px 8px;display:inline-block}.nav-buttons ul li a:hover{background:#0b3954;-webkit-transition:background .5s;transition:background .5s}.nav-buttons ul li span{padding:8px}.menu-bar{display:none;height:59px}@media screen and (max-width:1248px){header nav{width:100%}}@media screen and (max-width:1123px){header{width:80%;height:100%;position:fixed;display:block;background:#0b3954;left:-100%}.small-logo{height:30px;margin:12.5px 0}.big-logo{display:none}.nav-buttons{display:block;float:none}.nav-buttons ul li{float:none;display:block;border-bottom:2px solid #2196f3}.nav-buttons ul li a:active{background:#2196f3}.menu-bar{display:block;width:100%;background:#2196f3;border-bottom:5px solid #0b3954}.menu-bar a{text-decoration:none;display:inline-block;float:right;padding:5px;margin:10px 10px 10px 0;border:2px solid #fff;border-radius:3px;font-weight:700}}@media screen and (max-width:451px){.big-logo{height:30px;margin:12.5px 0}.map-overlay{width:auto!important;left:26%!important}}.bg-light-blue{background:#2196f3}.tx-white{color:#fff}#map{position:absolute;top:64px;bottom:0;width:100%;z-index:0}.capas{position:absolute;margin:50px 0 0 5px;z-index:1;background:rgba(255,255,255,.5);padding:10px;box-shadow:0 4px 10px 0 rgba(0,0,0,.2),0 4px 20px 0 rgba(0,0,0,.19);border-radius:5px}.formulario label{display:inline-block;cursor:pointer;color:#0074d9;position:relative;padding:5px 15px;font-size:1em;border-radius:5px;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;margin:1px 0}.formulario label:hover{background:rgba(0,116,217,.1)}.calles{padding:1px 3px;border-radius:8px;color:#fff}.conPavimento{background-color:#d742f5}.sinPavimento{background-color:#e87400}.map-options{display:flex;text-align:center}.sel-marco{border-radius:5px;height:60px;width:60px;border:2px solid #0074d9;margin:auto}.marco-map{background-image:url(../img/map.png);background-position:center;background-size:cover}.marco-sat{background-image:url(../img/satellite.png);background-position:center;background-size:cover}input[type=radio]{display:none}input[type=radio]:checked+label:before{display:none}input[type=radio]:checked+label{padding:5px 15px;background:#0074d9;border-radius:2px;color:#fff}input[type=checkbox]{display:none}input[type=checkbox]:checked+label:before{display:none}input[type=checkbox]:checked+label{background:#0074d9;color:#fff}@media screen and (min-width:600px){.capas{margin-top:115px}}@media screen and (min-width:400px){#panelToggle{position:absolute;margin-left:12px;font-size:x-large}}.panelToggle{position:absolute;margin-left:10px;top:67px;font-size:xx-large;box-shadow:0 4px 10px 0 rgba(0,0,0,.2),0 4px 20px 0 rgba(0,0,0,.19)}.btn-panel{padding:5px 15px;background:#0074d9;border-radius:2px;color:#fff;margin-top:5px;margin-bottom:5px;border-width:0;cursor:pointer}button:hover{background:#0074d0}button:active{background:#ddd;color:#0074d9}.oculto{display:none}#features{max-width:300px;max-height:185px;overflow:auto}.map-overlay{font:12px/20px "Helvetica Neue",Arial,Helvetica,sans-serif;position:absolute;width:35%;bottom:0;left:32%;padding:10px;color:#0b3954}.map-overlay .map-overlay-inner{background-color:#ffffff80;box-shadow:0 1px 2px rgba(0,0,0,.2);border-radius:3px;padding:10px;margin-bottom:10px}.map-overlay h2{line-height:24px;display:block;margin:0 0 10px}.map-overlay .legend .bar{height:10px;width:100%;background:linear-gradient(to right,#fca107,#7f3121)}.map-overlay input{background-color:transparent;display:inline-block;width:100%;position:relative;margin:0;cursor:ew-resize}.map-overlay-inner button{display:inline-block;cursor:pointer;background:#0074d9;color:#fff;position:relative;padding:5px 15px;font-size:1em;border-radius:5px;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;margin:1px 0}.map-overlay-inner button:hover{background:rgba(0,116,217,.1);color:#0074d9}.mapboxgl-ctrl{opacity:.35}.mapboxgl-ctrl:hover{opacity:.9}@font-face{font-family:Roboto;src:url(../font/roboto/Roboto-Regular.ttf) format("truetype"),url(../font/roboto/Roboto-Regular.woff) format("woff");font-weight:400;font-style:normal} \ No newline at end of file