]> dev.renevier.net Git - syj.git/blob - public/css/syj.css
3a286c805e576d20b397a4a41356dd9a5de63446
[syj.git] / public / css / syj.css
1 /*  This file is part of Syj, Copyright (c) 2010-2011 Arnaud Renevier,
2     and is published under the AGPL license. */
3
4 body, html {
5     margin: 0; padding: 0;
6     width: 100%;
7     height: 100%;
8 }
9
10 /*
11  * map rules
12  */
13 #map, #map-overlay {
14     position: absolute;
15     top: 0; left: 0; right: 0;
16     bottom: 2em;
17     *width: 100%;
18     *height: 100%;
19 }
20 #map-overlay {
21     background-color: gray;
22     opacity: 0.2;
23     filter:alpha(opacity=0.2);
24 }
25
26 .olControlAttribution {
27     bottom: 0.5em;
28     *bottom: 2.5em;
29     left: 0.5em;
30 }
31
32 .olControlLayerSwitcher {
33     bottom: 4em;
34     top: auto;
35     left: 13px;
36     opacity: 0.75;
37     height: 6em;
38     max-width: intrinsic;
39     max-width: -moz-max-content;
40 }
41
42 /* setting opacity to .olControlLayerSwitcher does not work */
43 .olControlLayerSwitcher .layersDiv,
44 .olControlLayerSwitcher .maximizeDiv,
45 .olControlLayerSwitcher .minimizeDiv
46 {
47     filter:alpha(opacity=75);
48 }
49
50 .olControlLayerSwitcher .dataLayersDiv, .olControlLayerSwitcher .dataLbl {
51     display: none;
52 }
53 .olControlLayerSwitcher .layersDiv {
54     padding: 5px 12px 5px 36px;
55 }
56 .olControlLayerSwitcher .maximizeDiv {
57     top: -6em;
58 }
59 .olControlLayerSwitcher .minimizeDiv {
60     left: 4px;
61 }
62
63 /*
64  * main message rules
65  */
66
67 #message {
68     position: absolute;
69     bottom: 3.5em;
70     width: 40%;
71     margin: 0px 45% 0px 15%;
72     padding-bottom: 0.5em;
73 }
74 @media screen and (max-width: 640px) {
75     #message.optional {
76         display: none;
77     }
78 }
79
80 /*
81  * menu rules
82  */
83
84 #menu {
85     text-align: right;
86 }
87
88 .menu-group {
89     z-index: 10; /* to be over nominatim-suggestions */
90     position: relative; /* otherwise, under #map in ie */
91     float: right;
92     clear: right;
93     padding-top: 8px;
94     padding-left: 3em;
95     opacity: 0.85;
96     filter:alpha(opacity=85);
97 }
98
99 .menu-item {
100     position: relative; /* otherwise, under #map in ie */
101     min-width: 150px;
102     margin: 2px 10px 2px 0;
103     background-color: white;
104     text-decoration: none;
105     border: #1E90FF 2px solid;
106     padding: 2px 15px 2px 15px;
107     -moz-border-radius: 5px;
108     -webkit-border-radius: 5px;
109     border-radius: 5px;
110     background-color: white;
111     cursor: pointer;
112 }
113 .menu-item:hover {
114     background-color: #E0E0FF;
115 }
116
117 .info-section {
118     margin-bottom: 0.5em;
119 }
120 .info-section > h1 {
121     text-decoration: underline;
122     font-size: 1em;
123     margin: 2px 0 2px 0;
124 }
125 .info-section a {
126     text-decoration: none;
127 }
128
129 #path-infos-content {
130     text-align: center;
131     padding: 4px 15px 15px 15px;
132     cursor: auto;
133 }
134
135 #path-length {
136     text-align: center;
137     position: absolute; /* otherwise, under #map in ie */
138     top: 1em;
139     left: 5em;
140     opacity: 0.85;
141     margin-right: 12px;
142     filter:alpha(opacity=85);
143     background-color: white;
144     padding: 2px 15px 2px 15px;
145     -moz-border-radius: 5px;
146     -webkit-border-radius: 5px;
147     border-radius: 5px;
148     background-color: white;
149 }
150
151 #data_controls {
152     position: absolute;
153     z-index: 11; /* to be over login-controls */
154     right: 0.5em;
155     bottom: 3em;
156     text-align: center;
157     background-color: white;
158     opacity: 0.85;
159     filter:alpha(opacity=85);
160     border: 1px solid gray;
161     margin: auto;
162     -moz-border-radius: 5px;
163     -webkit-border-radius: 5px;
164     border-radius: 5px;
165 }
166 #data_controls_btns {
167     padding: 5px 10px 5px 10px;
168 }
169
170 #nominatim-form {
171     text-align: left;
172     padding-bottom: 7px;
173     margin-bottom: 3px;
174     border-bottom: 1px solid black;
175 }
176 #nominatim-message {
177     max-width: 16em;
178     padding: 15px 0 15px 0;
179 }
180 #nominatim-label {
181     text-decoration: none;
182 }
183 #nominatim-search {
184     border: 1px solid black;
185 }
186 #nominatim-submit {
187     width: 26px;
188     border: 1px solid black;
189     padding: 0;
190 }
191
192 #geomform {
193     padding: 25px 45px 20px 45px;
194     *width: 40%; /* otherwise takes all screen width in ie<7 */
195 }
196 #edit-btn {
197     margin-top: 1em;
198 }
199 #geom_title {
200     margin-top: 0.7em;
201 }
202 #geom_submit {
203     margin-top: 0.7em;
204 }
205
206 #other-language {
207     opacity: 0.85;
208     filter:alpha(opacity=85);
209     background-color: white;
210     padding: 5px 1px 5px 1px;
211     position: relative; /* otherwise, under #map in ie */
212     margin-bottom: 10px;
213 }
214
215 /* nominatim-suggestions */
216 #nominatim-suggestions {
217     text-align: left;
218     border: 2px solid blue;
219     -moz-border-radius: 8px;
220     -webkit-border-radius: 8px;
221     border-radius: 8px;
222     max-width: 360px;
223     width: 360px\9; /* ie only */
224     background-color: white;
225     position: absolute;
226     right: 8px;
227 }
228 #nominatim-suggestions-list {
229     margin-left: 0;
230     position: relative;
231     list-style: none;
232     padding: 0 16px 0 12px;
233 }
234 #nominatim-suggestions-title {
235     text-align: center;
236     font-weight: bold;
237 }
238 #nominatim-suggestions-list li.current {
239     background-color: #D3D3D3;
240 }
241 .nominatim-suggestions-icon {
242     border: none;
243     vertical-align: middle;
244     margin-right: 4px;
245 }
246 .nominatim-suggestions-link {
247     text-decoration: none;
248 }
249
250 /* * login rules
251  */
252 .modal {
253     background-color: white;
254     text-align: center;
255     width: 50%;
256     margin-left: auto;
257     margin-right: auto;
258     padding: 21px;
259     border: 1px solid gray;
260     opacity: 0.85;
261     filter:alpha(opacity=85);
262 }
263
264 .form-table-elem {
265     display: block;
266     width: 100%;
267 }
268 .modal .message {
269     margin: 0 35px 12px 35px;
270 }
271 #login_area_create {
272     text-align: right;
273 }
274
275 #user_control_anchor {
276     text-align: right;
277 }
278
279 #user_email-desc {
280     margin: 0px 0px 12px 0px;
281     padding: 8px 2px 8px 2px;
282     background-color: #D3D3D3; /* lightgrey */
283 }
284
285 #termsofusearea {
286     height: 50%;
287     /* override opacity defined in .modal rule */
288     opacity: 1;
289     filter:alpha(opacity=100);
290 }