| commit | author | age | ||
| 4d882e | 1 | html, body, #map, #header { |
| 57b8d3 | 2 | margin: 0; |
| 4d882e | 3 | padding: 0; |
| JK | 4 | font: 14px sans-serif; |
| 07c714 | 5 | overflow: hidden; |
| JK | 6 | } |
| 7 | ||
| 4d882e | 8 | #header { |
| 07c714 | 9 | position: absolute; |
| JK | 10 | top: 0; |
| 11 | left: 0; | |
| 12 | right: 0; | |
| 4d882e | 13 | height: 2em; |
| JK | 14 | background: #f8f8f8; |
| 15 | border-bottom: 1px solid #999; | |
| 16 | } | |
| 17 | #header ul { | |
| 18 | display: table; | |
| 19 | padding: 0; | |
| 20 | margin: 0; | |
| 21 | width: 100%; | |
| 22 | } | |
| 23 | #header ul li { | |
| 24 | display: table-cell; | |
| 25 | list-style: none; | |
| 26 | white-space: nowrap; | |
| 27 | vertical-align: top; | |
| 28 | } | |
| 29 | #header ul li:last-child { | |
| 30 | width: 100%; | |
| 31 | white-space: inherit; | |
| 32 | text-align: right; | |
| 33 | } | |
| 34 | #header ul li > * { | |
| 35 | line-height: 1em; | |
| 36 | display: inline-block; | |
| 37 | padding: 0.5em; | |
| 38 | } | |
| 39 | #alert { | |
| 40 | margin-left: 5px; | |
| 41 | ||
| 42 | transition: background-color .4s; | |
| 43 | } | |
| 44 | .error { | |
| 45 | background-color: red; | |
| 46 | color: white; | |
| 47 | font-weight: bold; | |
| 07c714 | 48 | } |
| JK | 49 | |
| 4d882e | 50 | #map { |
| JK | 51 | position: absolute; |
| 52 | top: 29px; | |
| 53 | left: 0; | |
| 54 | right: 0; | |
| 55 | bottom: 0; | |
| 56 | } | |
| 07c714 | 57 | #map .ol-attribution { |
| JK | 58 | left: 0; |
| 59 | right: auto; | |
| a252b0 | 60 | text-align: left; |
| 57b8d3 | 61 | } |
| JK | 62 | |
| 4d882e | 63 | #panel { |
| 57b8d3 | 64 | color: black; |
| JK | 65 | background: white; |
| 66 | padding: 5px; | |
| 4d882e | 67 | border-left: 1px solid #999; |
| 07c714 | 68 | font-size: 14px; |
| JK | 69 | |
| 70 | position: absolute; | |
| 9f0f6a | 71 | width: 350px; |
| JK | 72 | right: -365px; |
| 4d882e | 73 | top: 29px; |
| 07c714 | 74 | bottom: 0; |
| JK | 75 | |
| 070901 | 76 | transition: right .4s, width .4s; |
| 07c714 | 77 | |
| 8b6250 | 78 | opacity: .85; |
| JK | 79 | |
| 80 | overflow-y: auto; | |
| 07c714 | 81 | } |
| JK | 82 | |
| 4d882e | 83 | #panel.show { |
| 07c714 | 84 | right: 0; |
| JK | 85 | } |
| 86 | ||
| 87 | @media (max-width: 600px) { | |
| 4d882e | 88 | #panel { |
| 9f0f6a | 89 | width: 80%; |
| 07c714 | 90 | right: -100%; |
| JK | 91 | } |
| 92 | ||
| 4d882e | 93 | #panel.show { |
| 07c714 | 94 | right: 0%; |
| JK | 95 | } |
| 96 | } | |
| 97 | ||
| 4d882e | 98 | #panel .type { |
| 07c714 | 99 | padding-bottom: 0; |
| JK | 100 | color: #444; |
| 101 | font-size: 80%; | |
| 57b8d3 | 102 | } |
| 4d882e | 103 | #panel p { |
| 57b8d3 | 104 | margin: 0; |
| JK | 105 | padding: 5px; |
| 106 | } | |
| 4d882e | 107 | #panel .name { |
| 57b8d3 | 108 | font-weight: bold; |
| JK | 109 | } |
| 4d882e | 110 | #panel .vehicleInfo { |
| 07c714 | 111 | font-size: 21px; |
| 8b6250 | 112 | margin: -4px 0 -5px; |
| JK | 113 | } |
| 4d882e | 114 | #panel table { |
| 8b6250 | 115 | margin-top: 3px; |
| JK | 116 | border-top: 1px solid gray; |
| 117 | width: 100%; | |
| 118 | border-collapse: collapse; | |
| 119 | } | |
| 4d882e | 120 | #panel table th { |
| 8b6250 | 121 | text-align: left; |
| JK | 122 | border-bottom: 1px solid #999; |
| 123 | padding-top: 5px; | |
| 124 | } | |
| 4d882e | 125 | #panel table td { |
| 8b6250 | 126 | vertical-align: top; |
| JK | 127 | } |
| 4d882e | 128 | #panel .active { |
| 8b6250 | 129 | background: #f5f5f5; |
| JK | 130 | color: gray; |
| 131 | } | |
| 4d882e | 132 | #panel .success { |
| 8b6250 | 133 | background: #dff0d8; |
| JK | 134 | } |
| 4d882e | 135 | #panel .warning { |
| 8b6250 | 136 | background: #fcf8e3; |
| JK | 137 | } |
| 4d882e | 138 | #panel .danger { |
| 8b6250 | 139 | background: #f2dede; |
| JK | 140 | } |
| 4d882e | 141 | #panel table .vehicleInfo { |
| 8b6250 | 142 | float: right; |
| 07c714 | 143 | } |
| 57b8d3 | 144 | |
| JK | 145 | #title { |
| 146 | top: .5em; | |
| 147 | left: .5em; | |
| 148 | padding: 2px .5em; | |
| 149 | font-weight: bold; | |
| 150 | background-color: rgba(255,255,255,.6); | |
| 151 | } | |
| 8b6250 | 152 | |
| 4d882e | 153 | .close { |
| JK | 154 | float: right; |
| 155 | cursor: pointer; | |
| 156 | font-size: 20px; | |
| 157 | margin: 0; | |
| 158 | padding: 3px; | |
| 57b8d3 | 159 | } |
| JK | 160 | |
| 161 | a { | |
| 162 | color: #337ab7; | |
| 163 | text-decoration: none; | |
| 8b6250 | 164 | cursor: pointer; |
| 57b8d3 | 165 | } |
| JK | 166 | a:hover { |
| 167 | text-decoration: underline; | |
| 168 | } | |
| 8b6250 | 169 | |
| JK | 170 | .small { |
| 171 | font-size: 80%; | |
| 172 | } | |
