| This diff has been collapsed as it changes many lines, (1462 lines changed) Show them Hide them | |||
| @@ -1,835 +1,699 | |||
|
|
1 | 1 | /*----------------------------------------*\ |
|
|
2 | 2 | RESPONSIVE CSS |
|
|
3 | 3 | \*----------------------------------------*/ |
|
|
4 | 4 | |
|
|
5 | ||
|
|
6 | 5 | /* |
|
|
7 | ||
|
|
8 | CONTENTS | |
|
|
9 | ||
|
|
10 | A) BASIC MOBILE RESETS | |
|
|
11 | B) HEADER & TOP MENUS | |
|
|
12 | C) MAIN CONTENT & SIDEBAR | |
|
|
13 | D) TOGGLE BUTTON & FLYOUT MENU | |
|
|
14 | E) UX ELEMENTS | |
|
|
15 | F) PAGE SPECIFIC STYLES | |
|
|
16 | G) FORMS | |
|
|
17 | ||
|
|
6 | CONTENTS | |
|
|
7 | ||
|
|
8 | A) BASIC MOBILE RESETS | |
|
|
9 | B) HEADER & TOP MENUS | |
|
|
10 | C) MAIN CONTENT & SIDEBAR | |
|
|
11 | D) TOGGLE BUTTON & FLYOUT MENU | |
|
|
12 | E) UX ELEMENTS | |
|
|
13 | F) PAGE SPECIFIC STYLES | |
|
|
14 | G) FORMS | |
|
|
18 | 15 | */ |
|
|
19 | 16 | |
|
|
20 | ||
|
|
21 | 17 | /* Hide new elements (toggle button and flyout menu) above 900px */ |
|
|
22 | 18 | .mobile-toggle-button, |
|
|
23 | .flyout-menu | |
|
|
24 | { | |
|
|
25 | display: none; | |
|
|
19 | .flyout-menu { | |
|
|
20 | display: none; | |
|
|
26 | 21 | } |
|
|
27 | 22 | |
|
|
28 | 23 | /* |
|
|
29 |
|
|
|
|
30 |
|
|
|
|
24 | redmine's body is set to min-width: 900px | |
|
|
25 | add first breakpoint here and start adding responsiveness | |
|
|
31 | 26 | */ |
|
|
32 | 27 | |
|
|
33 | 28 | @media all and (max-width: 899px) |
|
|
34 | 29 | { |
|
|
35 |
|
|
|
|
36 |
|
|
|
|
37 |
|
|
|
|
38 | ||
|
|
39 |
|
|
|
|
40 |
|
|
|
|
41 |
|
|
|
|
42 |
|
|
|
|
43 |
|
|
|
|
44 |
|
|
|
|
45 |
|
|
|
|
46 | { | |
|
|
47 |
|
|
|
|
48 |
|
|
|
|
49 | box-sizing: border-box; | |
|
|
50 | } | |
|
|
51 | ||
|
|
52 | body, | |
|
|
53 | html | |
|
|
54 | { | |
|
|
55 | height: 100%; | |
|
|
56 | margin: 0; | |
|
|
57 | padding: 0; | |
|
|
58 | } | |
|
|
59 | ||
|
|
60 | html | |
|
|
61 | { | |
|
|
62 | overflow-y: auto; /* avoid 2nd scrollbar on desktop */ | |
|
|
63 | } | |
|
|
64 | ||
|
|
65 | body | |
|
|
66 | { | |
|
|
67 | min-width: 0; /* reset the min-width of 900px */ | |
|
|
68 | ||
|
|
69 | -webkit-overflow-scrolling: touch; | |
|
|
70 | } | |
|
|
71 | ||
|
|
72 | ||
|
|
73 | body, | |
|
|
74 | input, | |
|
|
75 |
|
|
|
|
76 | textarea, | |
|
|
77 | button | |
|
|
78 | { | |
|
|
79 | font-size: 14px; /* Set font-size for standard elements to 14px */ | |
|
|
80 | } | |
|
|
81 | ||
|
|
82 | ||
|
|
83 | select | |
|
|
84 | { | |
|
|
85 | max-width: 100%; /* prevent long names within select menues from breaking content */ | |
|
|
86 | } | |
|
|
87 | ||
|
|
88 | ||
|
|
89 | #wrapper | |
|
|
90 | { | |
|
|
91 | position: relative; | |
|
|
92 | ||
|
|
93 | overflow-x: hidden; /* hide horizontal overflow */ | |
|
|
94 | ||
|
|
95 |
|
|
|
|
96 | } | |
|
|
97 | ||
|
|
98 | #wrapper, | |
|
|
99 | #wrapper2 | |
|
|
100 | { | |
|
|
101 | margin: 0; | |
|
|
102 |
|
|
|
|
103 | ||
|
|
104 | /*----------------------------------------*\ | |
|
|
105 | B) HEADER & TOP MENUS | |
|
|
106 | \*----------------------------------------*/ | |
|
|
107 | ||
|
|
108 | #header | |
|
|
109 | { | |
|
|
110 | width: 100%; | |
|
|
111 | height: 64px; /* the height of our header on mobile */ | |
|
|
112 | min-height: 0; | |
|
|
113 | margin: 0; | |
|
|
114 | padding: 0; | |
|
|
115 | ||
|
|
116 | border: none; | |
|
|
117 | background-color: #628db6; | |
|
|
118 | } | |
|
|
119 | ||
|
|
120 | /* Hide project name on mobile (project name is still visible in select menu) */ | |
|
|
121 | #header h1 | |
|
|
122 | { | |
|
|
123 | display: none !important; | |
|
|
124 | } | |
|
|
125 | ||
|
|
126 | /* reset #header a color for mobile toggle button */ | |
|
|
127 | #header a.mobile-toggle-button | |
|
|
128 | { | |
|
|
129 | color: #f8f8f8; | |
|
|
130 | } | |
|
|
131 | ||
|
|
132 | ||
|
|
133 | /* Hide top-menu and main-menu on mobile, because it's placed in our flyout menu */ | |
|
|
134 | #top-menu, | |
|
|
135 | #header #main-menu | |
|
|
136 | { | |
|
|
137 | display: none; | |
|
|
138 | } | |
|
|
139 | ||
|
|
140 | /* the quick search within header holding search form and #project_quick_jump_box box*/ | |
|
|
141 | #header #quick-search | |
|
|
142 | { | |
|
|
143 | float: none; | |
|
|
144 | clear: none; /* there are themes which set clear property, this resets it */ | |
|
|
145 | ||
|
|
146 | max-width: 100%; /* reset max-width */ | |
|
|
147 | margin: 0; | |
|
|
148 | ||
|
|
149 | background: inherit; | |
|
|
150 | } | |
|
|
151 | ||
|
|
152 | /* this represents the dropdown arrow to left of the mobile project menu */ | |
|
|
153 | #header .jump-box-arrow:before | |
|
|
154 | { | |
|
|
155 | /* set a font-size in order to achive same result in different themes */ | |
|
|
156 | font-family: Verdana, sans-serif; | |
|
|
157 | font-size: 2em; | |
|
|
158 | line-height: 64px; | |
|
|
159 | ||
|
|
160 | position: absolute; | |
|
|
161 |
|
|
|
|
162 | ||
|
|
163 | width: 2em; | |
|
|
164 | padding: 0 .5em; | |
|
|
165 | /* achieve dropdwon arrow by scaling a caret character */ | |
|
|
166 | ||
|
|
167 | content: '^'; | |
|
|
168 | -webkit-transform: scale(1,-.8); | |
|
|
169 | -ms-transform: scale(1,-.8); | |
|
|
170 | transform: scale(1,-.8); | |
|
|
171 | text-align: right; | |
|
|
172 | pointer-events: none; | |
|
|
173 | ||
|
|
174 | opacity: .6; | |
|
|
175 | } | |
|
|
176 | ||
|
|
177 | /* styles for combobox within quick-search (#project_quick_jump_box) */ | |
|
|
178 | #header #quick-search select | |
|
|
179 | { | |
|
|
180 | font-size: 1.5em; | |
|
|
181 | font-weight: bold; | |
|
|
182 | line-height: 1.2; | |
|
|
183 | ||
|
|
184 | position: absolute; | |
|
|
185 | top: 15px; | |
|
|
186 | left: 0; | |
|
|
187 | ||
|
|
188 | float: left; | |
|
|
189 | ||
|
|
190 | width: 100%; | |
|
|
191 | max-width: 100%; | |
|
|
192 | height: 2em; | |
|
|
193 | height: 35px; | |
|
|
194 | padding: 5px; | |
|
|
195 | padding-right: 72px; | |
|
|
196 | padding-left: 50px; | |
|
|
197 | ||
|
|
198 | text-indent: .01px; | |
|
|
199 | ||
|
|
200 | color: inherit; | |
|
|
201 | border: 0; | |
|
|
202 | -webkit-border-radius: 0; | |
|
|
203 | border-radius: 0; | |
|
|
204 | background: none; | |
|
|
205 | -webkit-box-shadow: none; | |
|
|
206 | box-shadow: none; | |
|
|
207 | /* hide default browser arrow */ | |
|
|
208 | ||
|
|
209 | -webkit-appearance: none; | |
|
|
210 | -moz-appearance: none; | |
|
|
211 | } | |
|
|
212 | ||
|
|
213 | #header #quick-search form | |
|
|
214 | { | |
|
|
215 | display: none; | |
|
|
216 | } | |
|
|
217 | ||
|
|
218 | /*----------------------------------------*\ | |
|
|
219 | C) MAIN CONTENT & SIDEBAR | |
|
|
220 | \*----------------------------------------*/ | |
|
|
221 | ||
|
|
222 | #main | |
|
|
223 | { | |
|
|
224 | padding: 0; | |
|
|
225 | } | |
|
|
226 | ||
|
|
227 | #main.nosidebar #content, | |
|
|
228 | div#content | |
|
|
229 | { | |
|
|
230 | width: 100%; | |
|
|
231 | min-height: 0; /* reset min-height of #content */ | |
|
|
232 | margin: 0; | |
|
|
233 | } | |
|
|
234 | ||
|
|
235 | ||
|
|
236 | /* hide sidebar and sidebar switch panel, since it's placed in mobile flyout menu */ | |
|
|
237 | #sidebar, | |
|
|
238 | #sidebar-switch-panel | |
|
|
239 | { | |
|
|
240 | display: none; | |
|
|
241 | } | |
|
|
242 | ||
|
|
243 | .splitcontentleft | |
|
|
244 | { | |
|
|
245 | width: 100%; /* use full width */ | |
|
|
246 | } | |
|
|
247 | ||
|
|
248 | .splitcontentright | |
|
|
249 | { | |
|
|
250 | width: 100%; /* use full width */ | |
|
|
251 | } | |
|
|
252 | ||
|
|
253 | /*----------------------------------------*\ | |
|
|
254 | D) TOGGLE BUTTON & FLYOUT MENU | |
|
|
255 | \*----------------------------------------*/ | |
|
|
256 | ||
|
|
257 | /* Mobile toggle button */ | |
|
|
258 | ||
|
|
259 | .mobile-toggle-button | |
|
|
260 | { | |
|
|
261 | font-size: 42px; | |
|
|
262 | line-height: 64px; | |
|
|
263 | ||
|
|
264 | position: relative; | |
|
|
265 | z-index: 10; | |
|
|
266 | ||
|
|
267 | display: block; /* remove display: none; of non-mobile version */ | |
|
|
268 | float: right; | |
|
|
269 | ||
|
|
270 | width: 60px; | |
|
|
271 | height: 64px; | |
|
|
272 | margin-top: 0; | |
|
|
273 | ||
|
|
274 | text-align: center; | |
|
|
275 | ||
|
|
276 | border-left: 1px solid #ddd; | |
|
|
277 | } | |
|
|
278 | ||
|
|
279 | .mobile-toggle-button:hover, | |
|
|
280 | .mobile-toggle-button:active | |
|
|
281 | { | |
|
|
282 | text-decoration: none; | |
|
|
283 | } | |
|
|
284 | ||
|
|
285 | .mobile-toggle-button:after | |
|
|
286 | { | |
|
|
287 | font-family: Verdana, sans-serif; | |
|
|
288 | ||
|
|
289 | display: block; | |
|
|
290 | ||
|
|
291 | margin-top: -3px; | |
|
|
292 | ||
|
|
293 | content: '\2261'; | |
|
|
294 | } | |
|
|
295 | ||
|
|
296 | /* search magnifier icon */ | |
|
|
297 | .search-magnifier | |
|
|
298 | { | |
|
|
299 | font-family: Verdana; | |
|
|
300 | ||
|
|
301 | cursor: pointer; | |
|
|
302 | -webkit-transform: rotate(-45deg); | |
|
|
303 | -moz-transform: rotate(45deg); | |
|
|
304 | -o-transform: rotate(45deg); | |
|
|
305 | ||
|
|
306 | color: #bbb; | |
|
|
307 | } | |
|
|
308 | ||
|
|
309 | .search-magnifier--flyout | |
|
|
310 | { | |
|
|
311 | font-size: 25px; | |
|
|
312 | line-height: 54px; | |
|
|
313 | ||
|
|
314 | position: absolute; | |
|
|
315 | z-index: 1; | |
|
|
316 | left: 12px; | |
|
|
317 | } | |
|
|
318 | ||
|
|
319 | ||
|
|
320 | /* Flyout Menu */ | |
|
|
321 | ||
|
|
322 | .flyout-menu | |
|
|
323 | { | |
|
|
324 | position: absolute; | |
|
|
325 | right: -250px; | |
|
|
326 | ||
|
|
327 | display: block; /* remove display: none; of non-mobile version */ | |
|
|
328 | overflow-x: hidden; | |
|
|
329 | ||
|
|
330 | width: 250px; | |
|
|
331 | height: 100%; | |
|
|
332 | margin: 0; /* reset margin for themes that define it */ | |
|
|
333 | padding: 0; /* reset padding for themes that define it */ | |
|
|
334 | ||
|
|
335 | color: white; | |
|
|
336 | background-color: #3e5b76; | |
|
|
337 | } | |
|
|
338 | ||
|
|
339 | ||
|
|
340 | /* avoid zoom on search input focus for ios devices */ | |
|
|
341 | .flyout-menu input[type='text'] | |
|
|
342 | { | |
|
|
343 | font-size: 16px; | |
|
|
344 | } | |
|
|
345 | ||
|
|
346 | .flyout-menu h3 | |
|
|
347 | { | |
|
|
348 | font-size: 11px; | |
|
|
349 | line-height: 19px; | |
|
|
350 | ||
|
|
351 | height: 20px; | |
|
|
352 | margin: 0; | |
|
|
353 | padding: 0; | |
|
|
354 | ||
|
|
355 | letter-spacing: .1em; | |
|
|
356 | text-transform: uppercase; | |
|
|
357 | ||
|
|
358 | color: white; | |
|
|
359 | border-top: 1px solid #506a83; | |
|
|
360 | border-bottom: 1px solid #506a83; | |
|
|
361 | background-color: #628db6; | |
|
|
362 | } | |
|
|
363 | ||
|
|
364 | .flyout-menu h4 | |
|
|
365 | { | |
|
|
366 | color: white; | |
|
|
367 | } | |
|
|
368 | ||
|
|
369 | .flyout-menu h3, | |
|
|
370 | .flyout-menu h4, | |
|
|
371 | .flyout-menu > p, | |
|
|
372 | .flyout-menu > a, | |
|
|
373 | .flyout-menu ul li a, | |
|
|
374 | .flyout-menu__search, | |
|
|
375 | .flyout-menu__sidebar > div, | |
|
|
376 | .flyout-menu__sidebar > p, | |
|
|
377 | .flyout-menu__sidebar > a, | |
|
|
378 | .flyout-menu__sidebar > form, | |
|
|
379 | .flyout-menu > div, | |
|
|
380 | .flyout-menu > form | |
|
|
381 | { | |
|
|
382 | padding-left: 8px; | |
|
|
383 | } | |
|
|
384 | ||
|
|
385 | .flyout-menu .flyout-menu__avatar | |
|
|
386 | { | |
|
|
387 | margin-top: -1px; /* move avatar up 1px */ | |
|
|
388 | padding-left: 0; | |
|
|
389 | } | |
|
|
390 | ||
|
|
391 | .flyout-menu__sidebar > form | |
|
|
392 | { | |
|
|
393 | display: block; | |
|
|
394 | } | |
|
|
395 | ||
|
|
396 | .flyout-menu__sidebar > form h3 | |
|
|
397 | { | |
|
|
398 | margin-left: -8px; | |
|
|
399 | } | |
|
|
400 | ||
|
|
401 | .flyout-menu__sidebar > form label | |
|
|
402 | { | |
|
|
403 | display: inline-block; | |
|
|
404 | ||
|
|
405 | margin: 8px 0; | |
|
|
406 | } | |
|
|
407 | ||
|
|
408 | .flyout-menu__sidebar > form br br | |
|
|
409 | { | |
|
|
410 | display: none; | |
|
|
411 | } | |
|
|
412 | ||
|
|
413 | /* Targets list containing checkboxes (e.g. activities sidebar) in flyout menu */ | |
|
|
414 | .flyout-menu__sidebar form > ul | |
|
|
415 | { | |
|
|
416 | margin-left: -8px; | |
|
|
417 | padding-left: 0; | |
|
|
418 | } | |
|
|
419 | ||
|
|
420 | .flyout-menu__sidebar form > ul li | |
|
|
421 | { | |
|
|
422 | line-height: 39px; | |
|
|
423 | ||
|
|
424 | display: block; | |
|
|
425 | ||
|
|
426 | padding-left: 8px; | |
|
|
427 | ||
|
|
428 | border-top: 1px solid rgba(255,255,255,.1); | |
|
|
429 | } | |
|
|
430 | ||
|
|
431 | .flyout-menu__sidebar form > ul li:first-child | |
|
|
432 | { | |
|
|
433 | border-top: none; | |
|
|
434 | } | |
|
|
435 | ||
|
|
436 | .flyout-menu__sidebar form > ul li label | |
|
|
437 | { | |
|
|
438 | margin: 0; | |
|
|
439 | } | |
|
|
440 | ||
|
|
441 | .flyout-menu__sidebar form > ul li label a | |
|
|
442 | { | |
|
|
443 | line-height: 1; | |
|
|
444 | ||
|
|
445 | display: inline; | |
|
|
446 | ||
|
|
447 | padding-left: 0; | |
|
|
448 | ||
|
|
449 | border: none; | |
|
|
450 | } | |
|
|
451 | ||
|
|
452 | .flyout-menu ul | |
|
|
453 | { | |
|
|
454 | margin: 0; | |
|
|
455 | padding: 0; | |
|
|
456 | ||
|
|
457 | list-style: none; | |
|
|
458 | } | |
|
|
459 | ||
|
|
460 | .flyout-menu #watchers | |
|
|
461 | { | |
|
|
462 | display: -webkit-flex; | |
|
|
463 | display: -ms-flexbox; | |
|
|
464 | display: -webkit-box; | |
|
|
465 | display: flex; | |
|
|
466 | flex-direction: column; | |
|
|
467 | ||
|
|
468 | -webkit-flex-direction: column; | |
|
|
469 | -ms-flex-direction: column; | |
|
|
470 | -webkit-box-orient: vertical; | |
|
|
471 | -webkit-box-direction: normal; | |
|
|
472 | } | |
|
|
473 | ||
|
|
474 | .flyout-menu #watchers .contextual | |
|
|
475 | { | |
|
|
476 | -webkit-box-ordinal-group: 4; | |
|
|
477 | -webkit-order: 3; | |
|
|
478 | -ms-flex-order: 3; | |
|
|
479 | order: 3; | |
|
|
480 | } | |
|
|
481 | ||
|
|
482 | .flyout-menu #watchers h3 | |
|
|
483 | { | |
|
|
484 | margin-left: -8px; | |
|
|
485 | } | |
|
|
486 | ||
|
|
487 | .flyout-menu #watchers ul li | |
|
|
488 | { | |
|
|
489 | display: -webkit-flex; | |
|
|
490 | display: -ms-flexbox; | |
|
|
491 | display: -webkit-box; | |
|
|
492 | display: flex; | |
|
|
493 | flex-direction: row; | |
|
|
494 | ||
|
|
495 | -webkit-flex-direction: row; | |
|
|
496 | -ms-flex-direction: row; | |
|
|
497 | -webkit-box-orient: horizontal; | |
|
|
498 | -webkit-box-direction: normal; | |
|
|
499 | -webkit-align-items: center; | |
|
|
500 | -ms-flex-align: center; | |
|
|
501 | -webkit-box-align: center; | |
|
|
502 | align-items: center; | |
|
|
503 | } | |
|
|
504 | ||
|
|
505 | .flyout-menu ul li a | |
|
|
506 | { | |
|
|
507 | line-height: 40px; | |
|
|
508 | ||
|
|
509 | display: block; | |
|
|
510 | overflow: hidden; | |
|
|
511 | ||
|
|
512 | height: 40px; | |
|
|
513 | ||
|
|
514 | white-space: nowrap; | |
|
|
515 | text-overflow: ellipsis; | |
|
|
516 | ||
|
|
517 | border-top: 1px solid rgba(255,255,255,.1); | |
|
|
518 | } | |
|
|
519 | ||
|
|
520 | .flyout-menu ul li:first-child a | |
|
|
521 | { | |
|
|
522 | line-height: 39px; | |
|
|
523 | ||
|
|
524 | height: 39px; | |
|
|
525 | ||
|
|
526 | border-top: none; | |
|
|
527 | } | |
|
|
528 | ||
|
|
529 | .flyout-menu a | |
|
|
530 | { | |
|
|
531 | color: white; | |
|
|
532 | } | |
|
|
533 | ||
|
|
534 | .flyout-menu ul li a:hover | |
|
|
535 | { | |
|
|
536 | text-decoration: none; | |
|
|
537 | } | |
|
|
538 | ||
|
|
539 | .flyout-menu ul li a.new-object, | |
|
|
540 | .new-object ~ .menu-children | |
|
|
541 | { | |
|
|
542 | display: none; | |
|
|
543 | } | |
|
|
544 | ||
|
|
545 | /* Left flyout search container */ | |
|
|
546 | .flyout-menu__search | |
|
|
547 | { | |
|
|
548 | line-height: 54px; | |
|
|
549 | ||
|
|
550 | height: 64px; | |
|
|
551 | padding-top: 3px; | |
|
|
552 | padding-right: 8px; | |
|
|
553 | } | |
|
|
554 | ||
|
|
555 | .flyout-menu__search input[type='text'] | |
|
|
556 | { | |
|
|
557 | line-height: 2; | |
|
|
558 | ||
|
|
559 | width: 100%; | |
|
|
560 | height: 38px; | |
|
|
561 | padding-left: 27px; | |
|
|
562 | ||
|
|
563 | vertical-align: middle; | |
|
|
564 | ||
|
|
565 | border: none; | |
|
|
566 | -webkit-border-radius: 3px; | |
|
|
567 | border-radius: 3px; | |
|
|
568 | background-color: #fff; | |
|
|
569 | } | |
|
|
570 | ||
|
|
571 | .flyout-menu__avatar | |
|
|
572 | { | |
|
|
573 | display: -webkit-box; | |
|
|
574 | display: -webkit-flex; | |
|
|
575 | display: -ms-flexbox; | |
|
|
576 | display: flex; | |
|
|
577 | ||
|
|
578 | width: 100%; | |
|
|
579 | ||
|
|
580 | border-top: 1px solid rgba(255,255,255,.1); | |
|
|
581 | } | |
|
|
582 | ||
|
|
583 | ||
|
|
584 | .flyout-menu__avatar img.gravatar | |
|
|
585 | { | |
|
|
586 | width: 40px; | |
|
|
587 | height: 40px; | |
|
|
588 | padding: 0; | |
|
|
589 | ||
|
|
590 | vertical-align: top; | |
|
|
591 | ||
|
|
592 | border-width: 0; | |
|
|
593 | } | |
|
|
594 | ||
|
|
595 | .flyout-menu__avatar a | |
|
|
596 | { | |
|
|
597 | line-height: 40px; | |
|
|
598 | ||
|
|
599 | height: auto; | |
|
|
600 | height: 40px; | |
|
|
601 | ||
|
|
602 | text-decoration: none; | |
|
|
603 | ||
|
|
604 | color: white; | |
|
|
605 | } | |
|
|
606 | ||
|
|
607 | /* avatar */ | |
|
|
608 | .flyout-menu__avatar a:first-child | |
|
|
609 | { | |
|
|
610 | line-height: 0; | |
|
|
611 | ||
|
|
612 | width: 40px; | |
|
|
613 | padding: 0; | |
|
|
614 | } | |
|
|
615 | ||
|
|
616 | .flyout-menu__avatar .user | |
|
|
617 | { | |
|
|
618 | padding-left: 15px; | |
|
|
619 | } | |
|
|
620 | ||
|
|
621 | /* user link when no avatar is present */ | |
|
|
622 | .flyout-menu__avatar--no-avatar a.user | |
|
|
623 | { | |
|
|
624 | line-height: 40px; | |
|
|
625 | ||
|
|
626 | padding-left: 8px; | |
|
|
627 | } | |
|
|
30 | /*----------------------------------------*\ | |
|
|
31 | A) BASIC MOBILE RESETS | |
|
|
32 | \*----------------------------------------*/ | |
|
|
33 | ||
|
|
34 | /* | |
|
|
35 | apply natural border box, see: http://www.paulirish.com/2012/box-sizing-border-box-ftw/ | |
|
|
36 | this helps us to better deal with percentages and padding / margin | |
|
|
37 | */ | |
|
|
38 | *, | |
|
|
39 | *:before, | |
|
|
40 | *:after { | |
|
|
41 | -webkit-box-sizing: border-box; | |
|
|
42 | -moz-box-sizing: border-box; | |
|
|
43 | box-sizing: border-box; | |
|
|
44 | } | |
|
|
45 | ||
|
|
46 | body, | |
|
|
47 | html { | |
|
|
48 | height: 100%; | |
|
|
49 | margin: 0; | |
|
|
50 | padding: 0; | |
|
|
51 | } | |
|
|
52 | ||
|
|
53 | html { | |
|
|
54 | overflow-y: auto; /* avoid 2nd scrollbar on desktop */ | |
|
|
55 | } | |
|
|
56 | ||
|
|
57 | body { | |
|
|
58 | min-width: 0; /* reset the min-width of 900px */ | |
|
|
59 | -webkit-overflow-scrolling: touch; | |
|
|
60 | } | |
|
|
61 | ||
|
|
62 | body, | |
|
|
63 | input, | |
|
|
64 | select, | |
|
|
65 | textarea, | |
|
|
66 | button { | |
|
|
67 | font-size: 14px; /* Set font-size for standard elements to 14px */ | |
|
|
68 | } | |
|
|
69 | ||
|
|
70 | select { | |
|
|
71 | max-width: 100%; /* prevent long names within select menues from breaking content */ | |
|
|
72 | } | |
|
|
73 | ||
|
|
74 | #wrapper { | |
|
|
75 | position: relative; | |
|
|
76 | overflow-x: hidden; /* hide horizontal overflow */ | |
|
|
77 | max-width: 100%; | |
|
|
78 | } | |
|
|
79 | ||
|
|
80 | #wrapper, | |
|
|
81 | #wrapper2 { | |
|
|
82 | margin: 0; | |
|
|
83 | } | |
|
|
84 | ||
|
|
85 | /*----------------------------------------*\ | |
|
|
86 | B) HEADER & TOP MENUS | |
|
|
87 | \*----------------------------------------*/ | |
|
|
88 | ||
|
|
89 | #header { | |
|
|
90 | width: 100%; | |
|
|
91 | height: 64px; /* the height of our header on mobile */ | |
|
|
92 | min-height: 0; | |
|
|
93 | margin: 0; | |
|
|
94 | padding: 0; | |
|
|
95 | border: none; | |
|
|
96 | background-color: #628db6; | |
|
|
97 | } | |
|
|
98 | ||
|
|
99 | /* Hide project name on mobile (project name is still visible in select menu) */ | |
|
|
100 | #header h1 { | |
|
|
101 | display: none !important; | |
|
|
102 | } | |
|
|
103 | ||
|
|
104 | /* reset #header a color for mobile toggle button */ | |
|
|
105 | #header a.mobile-toggle-button { | |
|
|
106 | color: #f8f8f8; | |
|
|
107 | } | |
|
|
108 | ||
|
|
109 | ||
|
|
110 | /* Hide top-menu and main-menu on mobile, because it's placed in our flyout menu */ | |
|
|
111 | #top-menu, | |
|
|
112 | #header #main-menu { | |
|
|
113 | display: none; | |
|
|
114 | } | |
|
|
115 | ||
|
|
116 | /* the quick search within header holding search form and #project_quick_jump_box box*/ | |
|
|
117 | #header #quick-search { | |
|
|
118 | float: none; | |
|
|
119 | clear: none; /* there are themes which set clear property, this resets it */ | |
|
|
120 | max-width: 100%; /* reset max-width */ | |
|
|
121 | margin: 0; | |
|
|
122 | background: inherit; | |
|
|
123 | } | |
|
|
124 | ||
|
|
125 | /* this represents the dropdown arrow to left of the mobile project menu */ | |
|
|
126 | #header .jump-box-arrow:before { | |
|
|
127 | /* set a font-size in order to achive same result in different themes */ | |
|
|
128 | font-family: Verdana, sans-serif; | |
|
|
129 | font-size: 2em; | |
|
|
130 | line-height: 64px; | |
|
|
131 | ||
|
|
132 | position: absolute; | |
|
|
133 | left: 0; | |
|
|
134 | ||
|
|
135 | width: 2em; | |
|
|
136 | padding: 0 .5em; | |
|
|
137 | /* achieve dropdwon arrow by scaling a caret character */ | |
|
|
138 | content: '^'; | |
|
|
139 | -webkit-transform: scale(1,-.8); | |
|
|
140 | -ms-transform: scale(1,-.8); | |
|
|
141 | transform: scale(1,-.8); | |
|
|
142 | text-align: right; | |
|
|
143 | pointer-events: none; | |
|
|
144 | ||
|
|
145 | opacity: .6; | |
|
|
146 | } | |
|
|
147 | ||
|
|
148 | /* styles for combobox within quick-search (#project_quick_jump_box) */ | |
|
|
149 | #header #quick-search select { | |
|
|
150 | font-size: 1.5em; | |
|
|
151 | font-weight: bold; | |
|
|
152 | line-height: 1.2; | |
|
|
153 | ||
|
|
154 | position: absolute; | |
|
|
155 | top: 15px; | |
|
|
156 | left: 0; | |
|
|
157 | ||
|
|
158 | float: left; | |
|
|
159 | ||
|
|
160 | width: 100%; | |
|
|
161 | max-width: 100%; | |
|
|
162 | height: 2em; | |
|
|
163 | height: 35px; | |
|
|
164 | padding: 5px; | |
|
|
165 | padding-right: 72px; | |
|
|
166 | padding-left: 50px; | |
|
|
167 | ||
|
|
168 | text-indent: .01px; | |
|
|
169 | ||
|
|
170 | color: inherit; | |
|
|
171 | border: 0; | |
|
|
172 | -webkit-border-radius: 0; | |
|
|
173 | border-radius: 0; | |
|
|
174 | background: none; | |
|
|
175 | -webkit-box-shadow: none; | |
|
|
176 | box-shadow: none; | |
|
|
177 | /* hide default browser arrow */ | |
|
|
178 | -webkit-appearance: none; | |
|
|
179 | -moz-appearance: none; | |
|
|
180 | } | |
|
|
181 | ||
|
|
182 | #header #quick-search form { | |
|
|
183 | display: none; | |
|
|
184 | } | |
|
|
628 | 185 | |
|
|
186 | /*----------------------------------------*\ | |
|
|
187 | C) MAIN CONTENT & SIDEBAR | |
|
|
188 | \*----------------------------------------*/ | |
|
|
189 | ||
|
|
190 | #main { | |
|
|
191 | padding: 0; | |
|
|
192 | } | |
|
|
193 | ||
|
|
194 | #main.nosidebar #content, | |
|
|
195 | div#content { | |
|
|
196 | width: 100%; | |
|
|
197 | min-height: 0; /* reset min-height of #content */ | |
|
|
198 | margin: 0; | |
|
|
199 | } | |
|
|
200 | ||
|
|
201 | /* hide sidebar and sidebar switch panel, since it's placed in mobile flyout menu */ | |
|
|
202 | #sidebar, | |
|
|
203 | #sidebar-switch-panel { | |
|
|
204 | display: none; | |
|
|
205 | } | |
|
|
629 | 206 | |
|
|
630 | .flyout-is-active body | |
|
|
631 | { | |
|
|
632 | overflow: hidden; /* for body not to have scrollbars when left flyout menu is active */ | |
|
|
633 | } | |
|
|
207 | .splitcontentleft { | |
|
|
208 | width: 100%; | |
|
|
209 | } | |
|
|
634 | 210 | |
|
|
635 | html.flyout-is-active | |
|
|
636 | { | |
|
|
637 | overflow: hidden; | |
|
|
638 | } | |
|
|
211 | .splitcontentright { | |
|
|
212 | width: 100%; | |
|
|
213 | } | |
|
|
639 | 214 | |
|
|
215 | /*----------------------------------------*\ | |
|
|
216 | D) TOGGLE BUTTON & FLYOUT MENU | |
|
|
217 | \*----------------------------------------*/ | |
|
|
218 | ||
|
|
219 | .mobile-toggle-button { | |
|
|
220 | font-size: 42px; | |
|
|
221 | line-height: 64px; | |
|
|
222 | ||
|
|
223 | position: relative; | |
|
|
224 | z-index: 10; | |
|
|
225 | ||
|
|
226 | display: block; /* remove display: none; of non-mobile version */ | |
|
|
227 | float: right; | |
|
|
228 | ||
|
|
229 | width: 60px; | |
|
|
230 | height: 64px; | |
|
|
231 | margin-top: 0; | |
|
|
232 | ||
|
|
233 | text-align: center; | |
|
|
234 | ||
|
|
235 | border-left: 1px solid #ddd; | |
|
|
236 | } | |
|
|
237 | ||
|
|
238 | .mobile-toggle-button:hover, | |
|
|
239 | .mobile-toggle-button:active { | |
|
|
240 | text-decoration: none; | |
|
|
241 | } | |
|
|
242 | ||
|
|
243 | .mobile-toggle-button:after { | |
|
|
244 | font-family: Verdana, sans-serif; | |
|
|
245 | display: block; | |
|
|
246 | margin-top: -3px; | |
|
|
247 | content: '\2261'; | |
|
|
248 | } | |
|
|
249 | ||
|
|
250 | /* search magnifier icon */ | |
|
|
251 | .search-magnifier { | |
|
|
252 | font-family: Verdana; | |
|
|
253 | color: #bbb; | |
|
|
254 | ||
|
|
255 | cursor: pointer; | |
|
|
256 | -webkit-transform: rotate(-45deg); | |
|
|
257 | -moz-transform: rotate(45deg); | |
|
|
258 | -o-transform: rotate(45deg); | |
|
|
259 | } | |
|
|
260 | ||
|
|
261 | .search-magnifier--flyout { | |
|
|
262 | font-size: 25px; | |
|
|
263 | line-height: 54px; | |
|
|
264 | ||
|
|
265 | position: absolute; | |
|
|
266 | z-index: 1; | |
|
|
267 | left: 12px; | |
|
|
268 | } | |
|
|
269 | ||
|
|
270 | /* Flyout Menu */ | |
|
|
271 | ||
|
|
272 | .flyout-menu { | |
|
|
273 | position: absolute; | |
|
|
274 | right: -250px; | |
|
|
275 | ||
|
|
276 | display: block; /* remove display: none; of non-mobile version */ | |
|
|
277 | overflow-x: hidden; | |
|
|
278 | ||
|
|
279 | width: 250px; | |
|
|
280 | height: 100%; | |
|
|
281 | margin: 0; /* reset margin for themes that define it */ | |
|
|
282 | padding: 0; /* reset padding for themes that define it */ | |
|
|
283 | ||
|
|
284 | color: white; | |
|
|
285 | background-color: #3e5b76; | |
|
|
286 | } | |
|
|
287 | ||
|
|
288 | /* avoid zoom on search input focus for ios devices */ | |
|
|
289 | .flyout-menu input[type='text'] { | |
|
|
290 | font-size: 16px; | |
|
|
291 | } | |
|
|
292 | ||
|
|
293 | .flyout-menu h3 { | |
|
|
294 | font-size: 11px; | |
|
|
295 | line-height: 19px; | |
|
|
296 | ||
|
|
297 | height: 20px; | |
|
|
298 | margin: 0; | |
|
|
299 | padding: 0; | |
|
|
300 | ||
|
|
301 | letter-spacing: .1em; | |
|
|
302 | text-transform: uppercase; | |
|
|
303 | ||
|
|
304 | color: white; | |
|
|
305 | border-top: 1px solid #506a83; | |
|
|
306 | border-bottom: 1px solid #506a83; | |
|
|
307 | background-color: #628db6; | |
|
|
308 | } | |
|
|
309 | ||
|
|
310 | .flyout-menu h4 { | |
|
|
311 | color: white; | |
|
|
312 | } | |
|
|
313 | ||
|
|
314 | .flyout-menu h3, | |
|
|
315 | .flyout-menu h4, | |
|
|
316 | .flyout-menu > p, | |
|
|
317 | .flyout-menu > a, | |
|
|
318 | .flyout-menu ul li a, | |
|
|
319 | .flyout-menu__search, | |
|
|
320 | .flyout-menu__sidebar > div, | |
|
|
321 | .flyout-menu__sidebar > p, | |
|
|
322 | .flyout-menu__sidebar > a, | |
|
|
323 | .flyout-menu__sidebar > form, | |
|
|
324 | .flyout-menu > div, | |
|
|
325 | .flyout-menu > form { | |
|
|
326 | padding-left: 8px; | |
|
|
327 | } | |
|
|
328 | ||
|
|
329 | .flyout-menu .flyout-menu__avatar { | |
|
|
330 | margin-top: -1px; /* move avatar up 1px */ | |
|
|
331 | padding-left: 0; | |
|
|
332 | } | |
|
|
333 | ||
|
|
334 | .flyout-menu__sidebar > form { | |
|
|
335 | display: block; | |
|
|
336 | } | |
|
|
337 | ||
|
|
338 | .flyout-menu__sidebar > form h3 { | |
|
|
339 | margin-left: -8px; | |
|
|
340 | } | |
|
|
341 | ||
|
|
342 | .flyout-menu__sidebar > form label { | |
|
|
343 | display: inline-block; | |
|
|
344 | margin: 8px 0; | |
|
|
345 | } | |
|
|
346 | ||
|
|
347 | .flyout-menu__sidebar > form br br { | |
|
|
348 | display: none; | |
|
|
349 | } | |
|
|
350 | ||
|
|
351 | /* Targets list containing checkboxes (e.g. activities sidebar) in flyout menu */ | |
|
|
352 | .flyout-menu__sidebar form > ul { | |
|
|
353 | margin-left: -8px; | |
|
|
354 | padding-left: 0; | |
|
|
355 | } | |
|
|
356 | ||
|
|
357 | .flyout-menu__sidebar form > ul li { | |
|
|
358 | line-height: 39px; | |
|
|
359 | display: block; | |
|
|
360 | padding-left: 8px; | |
|
|
361 | border-top: 1px solid rgba(255,255,255,.1); | |
|
|
362 | } | |
|
|
363 | ||
|
|
364 | .flyout-menu__sidebar form > ul li:first-child { | |
|
|
365 | border-top: none; | |
|
|
366 | } | |
|
|
367 | ||
|
|
368 | .flyout-menu__sidebar form > ul li label { | |
|
|
369 | margin: 0; | |
|
|
370 | } | |
|
|
371 | ||
|
|
372 | .flyout-menu__sidebar form > ul li label a { | |
|
|
373 | line-height: 1; | |
|
|
374 | display: inline; | |
|
|
375 | padding-left: 0; | |
|
|
376 | border: none; | |
|
|
377 | } | |
|
|
378 | ||
|
|
379 | .flyout-menu ul { | |
|
|
380 | margin: 0; | |
|
|
381 | padding: 0; | |
|
|
382 | list-style: none; | |
|
|
383 | } | |
|
|
384 | ||
|
|
385 | .flyout-menu #watchers { | |
|
|
386 | display: -webkit-flex; | |
|
|
387 | display: -ms-flexbox; | |
|
|
388 | display: -webkit-box; | |
|
|
389 | display: flex; | |
|
|
390 | flex-direction: column; | |
|
|
391 | ||
|
|
392 | -webkit-flex-direction: column; | |
|
|
393 | -ms-flex-direction: column; | |
|
|
394 | -webkit-box-orient: vertical; | |
|
|
395 | -webkit-box-direction: normal; | |
|
|
396 | } | |
|
|
397 | ||
|
|
398 | .flyout-menu #watchers .contextual { | |
|
|
399 | -webkit-box-ordinal-group: 4; | |
|
|
400 | -webkit-order: 3; | |
|
|
401 | -ms-flex-order: 3; | |
|
|
402 | order: 3; | |
|
|
403 | } | |
|
|
404 | ||
|
|
405 | .flyout-menu #watchers h3 { | |
|
|
406 | margin-left: -8px; | |
|
|
407 | } | |
|
|
408 | ||
|
|
409 | .flyout-menu #watchers ul li { | |
|
|
410 | display: -webkit-flex; | |
|
|
411 | display: -ms-flexbox; | |
|
|
412 | display: -webkit-box; | |
|
|
413 | display: flex; | |
|
|
414 | flex-direction: row; | |
|
|
415 | ||
|
|
416 | -webkit-flex-direction: row; | |
|
|
417 | -ms-flex-direction: row; | |
|
|
418 | -webkit-box-orient: horizontal; | |
|
|
419 | -webkit-box-direction: normal; | |
|
|
420 | -webkit-align-items: center; | |
|
|
421 | -ms-flex-align: center; | |
|
|
422 | -webkit-box-align: center; | |
|
|
423 | align-items: center; | |
|
|
424 | } | |
|
|
425 | ||
|
|
426 | .flyout-menu ul li a { | |
|
|
427 | line-height: 40px; | |
|
|
428 | display: block; | |
|
|
429 | overflow: hidden; | |
|
|
430 | height: 40px; | |
|
|
431 | white-space: nowrap; | |
|
|
432 | text-overflow: ellipsis; | |
|
|
433 | border-top: 1px solid rgba(255,255,255,.1); | |
|
|
434 | } | |
|
|
435 | ||
|
|
436 | .flyout-menu ul li:first-child a { | |
|
|
437 | line-height: 39px; | |
|
|
438 | height: 39px; | |
|
|
439 | border-top: none; | |
|
|
440 | } | |
|
|
441 | ||
|
|
442 | .flyout-menu a { | |
|
|
443 | color: white; | |
|
|
444 | } | |
|
|
445 | ||
|
|
446 | .flyout-menu ul li a:hover { | |
|
|
447 | text-decoration: none; | |
|
|
448 | } | |
|
|
449 | ||
|
|
450 | .flyout-menu ul li a.new-object, | |
|
|
451 | .new-object ~ .menu-children { | |
|
|
452 | display: none; | |
|
|
453 | } | |
|
|
454 | ||
|
|
455 | /* Left flyout search container */ | |
|
|
456 | .flyout-menu__search { | |
|
|
457 | line-height: 54px; | |
|
|
458 | height: 64px; | |
|
|
459 | padding-top: 3px; | |
|
|
460 | padding-right: 8px; | |
|
|
461 | } | |
|
|
462 | ||
|
|
463 | .flyout-menu__search input[type='text'] { | |
|
|
464 | line-height: 2; | |
|
|
465 | ||
|
|
466 | width: 100%; | |
|
|
467 | height: 38px; | |
|
|
468 | padding-left: 27px; | |
|
|
469 | ||
|
|
470 | vertical-align: middle; | |
|
|
471 | ||
|
|
472 | border: none; | |
|
|
473 | -webkit-border-radius: 3px; | |
|
|
474 | border-radius: 3px; | |
|
|
475 | background-color: #fff; | |
|
|
476 | } | |
|
|
477 | ||
|
|
478 | .flyout-menu__avatar { | |
|
|
479 | display: -webkit-box; | |
|
|
480 | display: -webkit-flex; | |
|
|
481 | display: -ms-flexbox; | |
|
|
482 | display: flex; | |
|
|
483 | width: 100%; | |
|
|
484 | border-top: 1px solid rgba(255,255,255,.1); | |
|
|
485 | } | |
|
|
486 | ||
|
|
487 | .flyout-menu__avatar img.gravatar { | |
|
|
488 | width: 40px; | |
|
|
489 | height: 40px; | |
|
|
490 | padding: 0; | |
|
|
491 | vertical-align: top; | |
|
|
492 | border-width: 0; | |
|
|
493 | } | |
|
|
494 | ||
|
|
495 | .flyout-menu__avatar a { | |
|
|
496 | line-height: 40px; | |
|
|
497 | height: auto; | |
|
|
498 | height: 40px; | |
|
|
499 | text-decoration: none; | |
|
|
500 | color: white; | |
|
|
501 | } | |
|
|
502 | ||
|
|
503 | /* avatar */ | |
|
|
504 | .flyout-menu__avatar a:first-child { | |
|
|
505 | line-height: 0; | |
|
|
506 | width: 40px; | |
|
|
507 | padding: 0; | |
|
|
508 | } | |
|
|
509 | ||
|
|
510 | .flyout-menu__avatar .user { | |
|
|
511 | padding-left: 15px; | |
|
|
512 | } | |
|
|
513 | ||
|
|
514 | /* user link when no avatar is present */ | |
|
|
515 | .flyout-menu__avatar--no-avatar a.user { | |
|
|
516 | line-height: 40px; | |
|
|
517 | padding-left: 8px; | |
|
|
518 | } | |
|
|
519 | ||
|
|
520 | .flyout-is-active body { | |
|
|
521 | overflow: hidden; /* for body not to have scrollbars when left flyout menu is active */ | |
|
|
522 | } | |
|
|
523 | ||
|
|
524 | html.flyout-is-active { | |
|
|
525 | overflow: hidden; | |
|
|
526 | } | |
|
|
527 | ||
|
|
528 | .flyout-is-active #wrapper { | |
|
|
529 | right: 250px; /* when left flyout is active, move body to the right (same amount like flyout-menu's width) */ | |
|
|
530 | overflow: visible; | |
|
|
531 | height: 100%; | |
|
|
532 | } | |
|
|
533 | ||
|
|
534 | .flyout-is-active .mobile-toggle-button:after { | |
|
|
535 | content: '\00D7'; /* close glyph */ | |
|
|
536 | } | |
|
|
537 | ||
|
|
538 | .flyout-is-active #wrapper2 { | |
|
|
539 | /* | |
|
|
540 | * only relevant for devices with cursor when flyout it active, in order to show, | |
|
|
541 | * that whole wrapper content is clickable and closes flyout menu | |
|
|
542 | */ | |
|
|
543 | cursor: pointer; | |
|
|
544 | } | |
|
|
545 | ||
|
|
546 | #admin-menu { | |
|
|
547 | padding-left: 0; | |
|
|
548 | } | |
|
|
549 | ||
|
|
550 | #admin-menu li { | |
|
|
551 | padding-bottom: 0; | |
|
|
552 | } | |
|
|
553 | ||
|
|
554 | #admin-menu a, | |
|
|
555 | #admin-menu a.selected { | |
|
|
556 | line-height: 40px; | |
|
|
557 | padding: 0; | |
|
|
558 | padding-left: 32px !important; | |
|
|
559 | background-position: 8px 50%; | |
|
|
560 | } | |
|
|
561 | ||
|
|
562 | /*----------------------------------------*\ | |
|
|
563 | E) UX ELEMENTS | |
|
|
564 | \*----------------------------------------*/ | |
|
|
565 | ||
|
|
566 | .mobile-hide {display:none;} | |
|
|
567 | .mobile-show {display:initial;} | |
|
|
568 | ||
|
|
569 | /* Contextual Buttons */ | |
|
|
570 | ||
|
|
571 | #content>.contextual { | |
|
|
572 | width: 100%; | |
|
|
573 | margin-bottom: .5em; | |
|
|
574 | padding-left: 0; /* reset left padding in order to use whole space */ | |
|
|
575 | white-space: normal; | |
|
|
576 | color: transparent; | |
|
|
577 | } | |
|
|
578 | ||
|
|
579 | #content>.contextual a, | |
|
|
580 | p.buttons a { | |
|
|
581 | font-weight: bold; | |
|
|
582 | ||
|
|
583 | display: inline-block; | |
|
|
584 | ||
|
|
585 | margin: 5px 0; | |
|
|
586 | margin-right: 2px; | |
|
|
587 | padding: 9px 9px 9px 9px; | |
|
|
588 | ||
|
|
589 | border: 1px solid #ddd; | |
|
|
590 | -webkit-border-radius: 3px; | |
|
|
591 | border-radius: 3px; | |
|
|
592 | background-color: transparent; | |
|
|
593 | background-position-x: 4px; | |
|
|
594 | } | |
|
|
595 | ||
|
|
596 | #content>.contextual a.icon, | |
|
|
597 | p.buttons a.icon { | |
|
|
598 | padding-left: 25px; | |
|
|
599 | } | |
|
|
600 | ||
|
|
601 | .flyout-menu .contextual { | |
|
|
602 | float: none; | |
|
|
603 | } | |
|
|
604 | ||
|
|
605 | /* loading indicator */ | |
|
|
606 | #ajax-indicator { | |
|
|
607 | width: 60%; | |
|
|
608 | left: 20%; | |
|
|
609 | } | |
|
|
610 | ||
|
|
611 | /* jquery ui dialogs */ | |
|
|
612 | .ui-dialog { | |
|
|
613 | max-width: 98%; | |
|
|
614 | margin: 1%; | |
|
|
615 | } | |
|
|
616 | ||
|
|
617 | .ui-dialog .ui-dialog-content { | |
|
|
618 | padding-left: 0; | |
|
|
619 | padding-right: 0; | |
|
|
620 | } | |
|
|
621 | ||
|
|
622 | #filters-table {width:100%; float:none;} | |
|
|
623 | .add-filter {width:100%; float:none; text-align: left; margin-top: 8px;} | |
|
|
624 | ||
|
|
625 | /*----------------------------------------*\ | |
|
|
626 | F) PAGE SPECIFIC STYLES | |
|
|
627 | \*----------------------------------------*/ | |
|
|
640 | 628 | |
|
|
641 | .flyout-is-active #wrapper | |
|
|
642 | { | |
|
|
643 | right: 250px; /* when left flyout is active, move body to the right (same amount like flyout-menu's width) */ | |
|
|
629 | /* page /login */ | |
|
|
644 | 630 | |
|
|
645 | overflow: visible; | |
|
|
631 | #login-form table { | |
|
|
632 | width: 100%; | |
|
|
633 | } | |
|
|
646 | 634 | |
|
|
647 | height: 100%; | |
|
|
648 | } | |
|
|
635 | #login-form input#username, | |
|
|
636 | #login-form input#password, | |
|
|
637 | #login-form input#openid_url { | |
|
|
638 | width: 100%; | |
|
|
639 | height: auto; | |
|
|
640 | } | |
|
|
649 | 641 | |
|
|
650 | .flyout-is-active .mobile-toggle-button:after | |
|
|
651 | { | |
|
|
652 | content: '\00D7'; /* close glyph */ | |
|
|
653 |
|
|
|
|
642 | /* some themes add a margin to login page, remove it on mobile */ | |
|
|
643 | .action-login #main { | |
|
|
644 | margin: 0; | |
|
|
645 | } | |
|
|
654 | 646 | |
|
|
655 | .flyout-is-active #wrapper2 | |
|
|
656 | { | |
|
|
647 | div#activity dl, #search-results {margin-left: 0;} | |
|
|
657 | 648 | |
|
|
658 | /* | |
|
|
659 | * only relevant for devices with cursor when flyout it active, in order to show, | |
|
|
660 | * that whole wrapper content is clickable and closes flyout menu | |
|
|
661 | */ | |
|
|
662 | cursor: pointer; | |
|
|
663 | } | |
|
|
649 | .version-overview table.progress {width:75%;} | |
|
|
650 | div#version-summary {float:none; width:100%; margin-left:0;} | |
|
|
651 | body.controller-versions.action-show div#roadmap .related-issues {width:100%;} | |
|
|
664 | 652 | |
|
|
665 | ||
|
|
666 | #admin-menu | |
|
|
667 | { | |
|
|
668 | padding-left: 0; | |
|
|
669 | } | |
|
|
670 | ||
|
|
671 | #admin-menu li | |
|
|
672 | { | |
|
|
673 | padding-bottom: 0; | |
|
|
674 | } | |
|
|
675 | ||
|
|
676 | #admin-menu a, | |
|
|
677 | #admin-menu a.selected | |
|
|
678 | { | |
|
|
679 | line-height: 40px; | |
|
|
680 | ||
|
|
681 | padding: 0; | |
|
|
682 | padding-left: 32px !important; | |
|
|
683 | ||
|
|
684 | background-position: 8px 50%; | |
|
|
685 | } | |
|
|
686 | ||
|
|
687 | /*----------------------------------------*\ | |
|
|
688 | E) UX ELEMENTS | |
|
|
689 | \*----------------------------------------*/ | |
|
|
690 | ||
|
|
691 | .mobile-hide {display:none;} | |
|
|
692 | .mobile-show {display:initial;} | |
|
|
693 | ||
|
|
694 | /* Contextual Buttons */ | |
|
|
695 | ||
|
|
696 | #content>.contextual | |
|
|
697 | { | |
|
|
698 | width: 100%; | |
|
|
699 | margin-bottom: .5em; | |
|
|
700 | padding-left: 0; /* reset left padding in order to use whole space */ | |
|
|
701 | ||
|
|
702 | white-space: normal; | |
|
|
703 | ||
|
|
704 | color: transparent; | |
|
|
705 | } | |
|
|
706 | ||
|
|
707 | #content>.contextual a, | |
|
|
708 | p.buttons a | |
|
|
709 | { | |
|
|
710 | font-weight: bold; | |
|
|
711 | ||
|
|
712 | display: inline-block; | |
|
|
713 | ||
|
|
714 | margin: 5px 0; | |
|
|
715 | margin-right: 2px; | |
|
|
716 | padding: 9px 9px 9px 9px; | |
|
|
717 | ||
|
|
718 | border: 1px solid #ddd; | |
|
|
719 | -webkit-border-radius: 3px; | |
|
|
720 | border-radius: 3px; | |
|
|
721 | background-color: transparent; | |
|
|
722 | background-position-x: 4px; | |
|
|
723 | } | |
|
|
724 | ||
|
|
725 | #content>.contextual a.icon, | |
|
|
726 | p.buttons a.icon | |
|
|
727 | { | |
|
|
728 | padding-left: 25px; | |
|
|
729 | } | |
|
|
730 | ||
|
|
731 | .flyout-menu .contextual | |
|
|
732 | { | |
|
|
733 | float: none; | |
|
|
734 | } | |
|
|
735 | ||
|
|
736 | /* loading indicator */ | |
|
|
737 | #ajax-indicator { | |
|
|
738 | width: 60%; | |
|
|
739 | left: 20%; | |
|
|
740 | } | |
|
|
741 | ||
|
|
742 | /* jquery ui dialogs */ | |
|
|
743 | .ui-dialog | |
|
|
744 | { | |
|
|
745 | max-width: 98%; | |
|
|
746 | margin: 1%; | |
|
|
747 | } | |
|
|
748 | ||
|
|
749 | .ui-dialog .ui-dialog-content | |
|
|
750 | { | |
|
|
751 | padding-left: 0; | |
|
|
752 | padding-right: 0; | |
|
|
753 | } | |
|
|
754 | ||
|
|
755 | #filters-table {width:100%; float:none;} | |
|
|
756 | .add-filter {width:100%; float:none; text-align: left; margin-top: 8px;} | |
|
|
757 | ||
|
|
758 | /*----------------------------------------*\ | |
|
|
759 | F) PAGE SPECIFIC STYLES | |
|
|
760 | \*----------------------------------------*/ | |
|
|
761 | ||
|
|
762 | /* page /login */ | |
|
|
763 | ||
|
|
764 | #login-form table | |
|
|
765 | { | |
|
|
766 | width: 100%; | |
|
|
767 | } | |
|
|
768 | ||
|
|
769 | #login-form input#username, | |
|
|
770 | #login-form input#password, | |
|
|
771 | #login-form input#openid_url | |
|
|
772 | { | |
|
|
773 | width: 100%; | |
|
|
774 | height: auto; | |
|
|
775 | } | |
|
|
776 | ||
|
|
777 | /* some themes add a margin to login page, remove it on mobile */ | |
|
|
778 | .action-login #main | |
|
|
779 | { | |
|
|
780 | margin: 0; | |
|
|
781 | } | |
|
|
782 | ||
|
|
783 | div#activity dl, #search-results { margin-left: 0; } | |
|
|
784 | ||
|
|
785 | .version-overview table.progress {width:75%;} | |
|
|
786 | div#version-summary {float:none; width:100%; margin-left:0;} | |
|
|
787 | body.controller-versions.action-show div#roadmap .related-issues {width:100%;} | |
|
|
788 | ||
|
|
789 | /*----------------------------------------*\ | |
|
|
790 | G) FORMS | |
|
|
791 | \*----------------------------------------*/ | |
|
|
792 | ||
|
|
793 | /* tabular forms resets for mobile */ | |
|
|
794 | .tabular p, .tabular.settings p { | |
|
|
795 | padding-left: 0; | |
|
|
796 | } | |
|
|
797 | ||
|
|
798 | .tabular label, .tabular.settings label { | |
|
|
799 | display: block; | |
|
|
800 | width: 100%; | |
|
|
801 | margin-left: 0; | |
|
|
802 | text-align: left; | |
|
|
803 | } | |
|
|
804 | ||
|
|
805 | .tabular input, .tabular select, .tabular textarea { | |
|
|
806 | width: 100%; | |
|
|
807 | max-width: 100%; | |
|
|
808 | } | |
|
|
809 | ||
|
|
810 | .tabular input[type="checkbox"], .tabular input.date { | |
|
|
811 | width: auto; | |
|
|
812 | max-width: 95%; | |
|
|
813 | } | |
|
|
814 | ||
|
|
815 | /* new issue form */ | |
|
|
816 | #all_attributes p:first-child { | |
|
|
817 | float: none !important; | |
|
|
818 | } | |
|
|
819 | ||
|
|
820 | #issue_is_private_label { | |
|
|
821 | display: inline; | |
|
|
822 | } | |
|
|
823 | ||
|
|
824 | span#watchers_inputs { | |
|
|
825 | width: 100%; | |
|
|
826 | } | |
|
|
653 | /*----------------------------------------*\ | |
|
|
654 | G) FORMS | |
|
|
655 | \*----------------------------------------*/ | |
|
|
656 | ||
|
|
657 | /* tabular forms resets for mobile */ | |
|
|
658 | .tabular p, .tabular.settings p { | |
|
|
659 | padding-left: 0; | |
|
|
660 | } | |
|
|
661 | ||
|
|
662 | .tabular label, .tabular.settings label { | |
|
|
663 | display: block; | |
|
|
664 | width: 100%; | |
|
|
665 | margin-left: 0; | |
|
|
666 | text-align: left; | |
|
|
667 | } | |
|
|
668 | ||
|
|
669 | .tabular input, .tabular select, .tabular textarea { | |
|
|
670 | width: 100%; | |
|
|
671 | max-width: 100%; | |
|
|
672 | } | |
|
|
673 | ||
|
|
674 | .tabular input[type="checkbox"], .tabular input.date { | |
|
|
675 | width: auto; | |
|
|
676 | max-width: 95%; | |
|
|
677 | } | |
|
|
678 | ||
|
|
679 | /* new issue form */ | |
|
|
680 | #all_attributes p:first-child { | |
|
|
681 | float: none !important; | |
|
|
682 | } | |
|
|
683 | ||
|
|
684 | #issue_is_private_label { | |
|
|
685 | display: inline; | |
|
|
686 | } | |
|
|
687 | ||
|
|
688 | span#watchers_inputs { | |
|
|
689 | width: 100%; | |
|
|
690 | } | |
|
|
827 | 691 | } |
|
|
828 | 692 | |
|
|
829 | 693 | @media all and (max-width: 599px) { |
|
|
830 | 694 | .pagination ul.pages li {display:none;} |
|
|
831 | 695 | .pagination ul.pages li.current, |
|
|
832 | 696 | .pagination ul.pages li.previous, |
|
|
833 | 697 | .pagination ul.pages li.next {display:inline-block; width:32%; overflow:hidden;} |
|
|
834 | 698 | } |
|
|
835 | 699 | |
General Comments 0
You need to be logged in to leave comments.
Login now