Improved www.ttss.krakow.pl
Jacek Kowalski
2024-01-26 9fa7eae2501e927fee27fe92f8ebb2c2a66023e5
commit | author | age
57b8d3 1 html, body, #map {
JK 2     margin: 0;
3     font-family: sans-serif;
07c714 4     overflow: hidden;
JK 5 }
6
7 #map {
eddb50 8     position: fixed;
07c714 9     top: 0;
JK 10     left: 0;
11     right: 0;
12     bottom: 0;
13 }
14
15 #map .ol-attribution {
16     left: 0;
17     right: auto;
57b8d3 18 }
JK 19
ae5170 20 .close, .hide {
JK 21     float: right;
22     cursor: pointer;
23     font-size: 1.5em;
24     padding-left: 1em;
25     color: black;
26 }
27 #fail .close {
28     font-size: inherit;
29     height: 1em;
30     color: black;
31 }
32
d29c06 33 .panel {
JK 34     opacity: .85;
57b8d3 35     color: black;
4bf9a4 36     padding: 0;
57b8d3 37     background: white;
07c714 38     border-left: 1px solid black;
JK 39     font-size: 14px;
d29c06 40     
JK 41     transition: right .4s, width .4s;
07c714 42     
4bf9a4 43     height: 100%;
JK 44     width: 360px;
eddb50 45     position: fixed;
4bf9a4 46     right: -361px;
07c714 47     top: 0;
JK 48     bottom: 0;
49 }
d29c06 50 .panel.expanded {
07c714 51     right: 0;
JK 52 }
d29c06 53 .panel .hide {
JK 54     display: none;
55     
56     position: fixed;
57     bottom: 20%;
58     right: 0;
59     
60     opacity: .85;
61     border: 1px solid black;
62     border-right: 0;
63     border-radius: 5px 0 0 5px;
64     background: white;
65     margin-right: 0px;
66     padding: 1em 0.2em;
67     padding-bottom: 1.2em;
68     
69     transition: right .4s, margin-right .4s;
70 }
4bf9a4 71 .panel.enabled .hide {
JK 72     display: block;
73 }
d29c06 74 .panel.expanded .hide {
JK 75     right: 360px;
76 }
4bf9a4 77 .panel .panel-container {
JK 78     overflow-y: auto;
79     box-sizing: border-box;
80     padding: 5px;
81     height: 100%;
82 }
07c714 83 @media (max-width: 600px) {
d29c06 84     .panel {
9f0f6a 85         width: 80%;
07c714 86         right: -100%;
JK 87     }
31e5ea 88     .panel.expanded, .panel.enabled .hide {
07c714 89         right: 0%;
d29c06 90     }
JK 91     
31e5ea 92     .panel.enabled.expanded .hide {
d29c06 93         right: 80%;
07c714 94     }
8b6250 95 }
d29c06 96 .panel .type {
07c714 97     padding-bottom: 0;
JK 98     color: #444;
99     font-size: 80%;
57b8d3 100 }
d29c06 101 .panel p {
57b8d3 102     margin: 0;
JK 103     padding: 5px;
104 }
d29c06 105 .panel .name {
57b8d3 106     font-weight: bold;
20d39d 107     padding-bottom: 0;
JK 108 }
109 .panel .name .icon {
110     margin: -5px 0.2rem 0;
111     text-indent: 2rem;
112     font-size: 1.4rem;
113     vertical-align: top;
57b8d3 114 }
d29c06 115 .panel .vehicleInfo {
07c714 116     font-size: 21px;
8b6250 117     margin: -4px 0 -5px;
JK 118 }
d29c06 119 .panel table {
8b6250 120     margin-top: 3px;
JK 121     border-top: 1px solid gray;
122     width: 100%;
123     border-collapse: collapse;
124 }
d29c06 125 .panel table th {
8b6250 126     text-align: left;
JK 127     border-bottom: 1px solid #999;
128     padding-top: 5px;
129 }
d29c06 130 .panel table td {
8b6250 131     vertical-align: top;
JK 132 }
d29c06 133 .panel .active {
8b6250 134     background: #f5f5f5;
JK 135     color: gray;
136 }
d29c06 137 .panel .success {
8b6250 138     background: #dff0d8;
JK 139 }
d29c06 140 .panel .warning {
8b6250 141     background: #fcf8e3;
JK 142 }
d29c06 143 .panel .danger {
8b6250 144     background: #f2dede;
JK 145 }
d29c06 146 .panel table .vehicleInfo {
8b6250 147     float: right;
07c714 148 }
57b8d3 149
19a338 150 .icon, .icon-loc, .icon-pin, .icon-zoom {
ae3207 151     display: inline-block;
19a338 152     height: 1em;
JK 153     width: 1em;
20d39d 154     text-indent: 1.5em;
ae3207 155     overflow: hidden;
JK 156     background-size: contain;
157     background-repeat: no-repeat;
19a338 158 }
JK 159 .reverse {
160     filter: invert(100%);
161 }
162 .icon-loc {
163     background-image: url(icons/loc.svg);
164     background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MCIgaGVpZ2h0PSI4MCI+PHN0eWxlPip7c3Ryb2tlOmJsYWNrO3N0cm9rZS13aWR0aDo1O2ZpbGw6bm9uZX08L3N0eWxlPjxjaXJjbGUgY3g9IjQwIiBjeT0iNDAiIHI9IjI1Ij48L2NpcmNsZT48Y2lyY2xlIGN4PSI0MCIgY3k9IjQwIiByPSIxMCIgc3R5bGU9ImZpbGw6YmxhY2s7Ij48L2NpcmNsZT48bGluZSB4MT0iNDAiIHkxPSIxNSIgeDI9IjQwIiB5Mj0iMCI+PC9saW5lPjxsaW5lIHgxPSI2NSIgeTE9IjQwIiB4Mj0iODAiIHkyPSI0MCI+PC9saW5lPjxsaW5lIHgxPSI0MCIgeTE9IjY1IiB4Mj0iNDAiIHkyPSI4MCI+PC9saW5lPjxsaW5lIHgxPSIxNSIgeTE9IjQwIiB4Mj0iMCIgeTI9IjQwIj48L2xpbmU+PC9zdmc+);
165 }
166 .icon-pin {
167     background-image: url(icons/pin.svg);
168     background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCI+PHBhdGggZD0iTTMyLDY0TDE0LjE4NTUsMjkuMDkwOUEyMCwyMCAwIDEgMSA0OS44MTQ1LDI5LjA5MDlaTTQyLDIwQTEwLDEwIDAgMCAwIDIyLDIwQTEwLDEwIDAgMCAwIDQyLDIwIi8+PC9zdmc+);
169 }
170 .icon-zoom {
171     background-image: url(icons/zoom.svg);
172     background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OTAiIGhlaWdodD0iNDkwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMzYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0ibTI4MCwyNzhhMTUzLDE1MyAwIDEsMC0yLDJsMTcwLDE3MG0tOTEtMTE3IDExMCwxMTAtMjYsMjYtMTEwLTExMCIvPjwvc3ZnPgo=);
ae3207 173 }
JK 174
57b8d3 175 #title {
JK 176     top: .5em;
177     left: .5em;
19a338 178     padding: 0 .5em;
JK 179     font-size: 1.14em;
180     line-height: 1.4em;
181     height: 1.375em;
57b8d3 182     font-weight: bold;
JK 183     background-color: rgba(255,255,255,.6);
184 }
8b6250 185
d29c06 186 #fail, .panel .error {
57b8d3 187     background: red;
JK 188     color: white;
189     font-weight: bold;
190     padding: 5px;
8b6250 191 }
JK 192 #fail {
193     top: -10em;
194     right: 0.5em;
57b8d3 195 }
JK 196 .ol-zoom {
19a338 197     top: 2.3em;
57b8d3 198 }
19a338 199 #menu {
a4d011 200     top: 6em;
JK 201     left: 0.5em;
202 }
19a338 203 .ol-touch #menu {
a4d011 204     top: 7em;
JK 205 }
19a338 206 #menu button {
JK 207     border-radius: 0;
208 }
209 #menu button:first-child {
210     border-top-left-radius: 2px;
211     border-top-right-radius: 2px;
212 }
213 #menu button:last-child {
214     border-bottom-left-radius: 2px;
215     border-bottom-right-radius: 2px;
216 }
a4d011 217
JK 218 .ol-control button.clicked {
219     background-color: black;
220 }
221 .ol-control button.clicked:hover, .ol-control button.clicked:active {
222     background-color: rgba(0,0,0,.5);
223 }
224 .ol-control button.hidden {
225     display: none;
226 }
57b8d3 227
ae5170 228 a, .close:hover, .hide:hover {
57b8d3 229     color: #337ab7;
JK 230     text-decoration: none;
8b6250 231     cursor: pointer;
57b8d3 232 }
JK 233 a:hover {
234     text-decoration: underline;
235 }
8b6250 236
JK 237 .small {
238     font-size: 80%;
239 }