| | |
| | | } |
| | | |
| | | #map { |
| | | position: absolute; |
| | | position: fixed; |
| | | top: 0; |
| | | left: 0; |
| | | right: 0; |
| | |
| | | right: auto; |
| | | } |
| | | |
| | | .close, .hide { |
| | | float: right; |
| | | cursor: pointer; |
| | | font-size: 1.5em; |
| | | padding-left: 1em; |
| | | color: black; |
| | | } |
| | | #fail .close { |
| | | font-size: inherit; |
| | | height: 1em; |
| | | color: black; |
| | | } |
| | | |
| | | .panel { |
| | | opacity: .85; |
| | | color: black; |
| | | padding: 0; |
| | | background: white; |
| | | padding: 5px; |
| | | border-left: 1px solid black; |
| | | font-size: 14px; |
| | | overflow-y: auto; |
| | | |
| | | transition: right .4s, width .4s; |
| | | |
| | | position: absolute; |
| | | width: 350px; |
| | | right: -365px; |
| | | height: 100%; |
| | | width: 360px; |
| | | position: fixed; |
| | | right: -361px; |
| | | top: 0; |
| | | bottom: 0; |
| | | } |
| | | .panel.expanded { |
| | | right: 0; |
| | | } |
| | | |
| | | .panel .hide { |
| | | display: none; |
| | | } |
| | | .panel.enabled .hide { |
| | | display: block; |
| | | |
| | | position: fixed; |
| | | bottom: 20%; |
| | |
| | | |
| | | transition: right .4s, margin-right .4s; |
| | | } |
| | | .panel.enabled .hide { |
| | | display: block; |
| | | } |
| | | .panel.expanded .hide { |
| | | right: 360px; |
| | | } |
| | | |
| | | .panel .panel-container { |
| | | overflow-y: auto; |
| | | box-sizing: border-box; |
| | | padding: 5px; |
| | | height: 100%; |
| | | } |
| | | @media (max-width: 600px) { |
| | | .panel { |
| | | width: 80%; |
| | |
| | | |
| | | .panel.enabled.expanded .hide { |
| | | right: 80%; |
| | | margin-right: 10px; |
| | | } |
| | | } |
| | | |
| | | .close, .hide { |
| | | float: right; |
| | | cursor: pointer; |
| | | font-size: 20px; |
| | | padding: 0px 10px; |
| | | } |
| | | #fail .close { |
| | | font-size: inherit; |
| | | height: 1em; |
| | | } |
| | | .panel .type { |
| | | padding-bottom: 0; |
| | |
| | | } |
| | | .panel .name { |
| | | font-weight: bold; |
| | | padding-bottom: 0; |
| | | } |
| | | .panel .name .icon { |
| | | margin: -5px 0.2rem 0; |
| | | text-indent: 2rem; |
| | | font-size: 1.4rem; |
| | | vertical-align: top; |
| | | } |
| | | .panel .vehicleInfo { |
| | | font-size: 21px; |
| | |
| | | float: right; |
| | | } |
| | | |
| | | .addon-icon { |
| | | margin-left: 0.2rem; |
| | | } |
| | | .normal-icon, .addon-icon { |
| | | font-size: 1rem; |
| | | } |
| | | .icon, .icon-loc, .icon-pin, .icon-zoom { |
| | | display: inline-block; |
| | | height: 1em; |
| | | width: 1em; |
| | | text-indent: 1rem; |
| | | text-indent: 1.5em; |
| | | overflow: hidden; |
| | | background-size: contain; |
| | | background-repeat: no-repeat; |
| | |
| | | display: none; |
| | | } |
| | | |
| | | a { |
| | | a, .close:hover, .hide:hover { |
| | | color: #337ab7; |
| | | text-decoration: none; |
| | | cursor: pointer; |