##// END OF EJS Templates
jro_apps » redmine
RSS
Indent CSS with 2 spaces....
Jean-Philippe Lang -
r14573:19499bb43d8e
parent child
Show More
Side by Side Unified
Context file:
r14573:19499bb43d8e Loading diff...:
Show file before | Show file after | Hide comments
This diff has been collapsed as it changes many lines, (1462 lines changed) Show them Hide them
@@ -2,828 +2,692
2 RESPONSIVE CSS
2 RESPONSIVE CSS
3 \*----------------------------------------*/
3 \*----------------------------------------*/
4
4
5
6 /*
5 /*
7
6 CONTENTS
8 CONTENTS
7
9
8 A) BASIC MOBILE RESETS
10 A) BASIC MOBILE RESETS
9 B) HEADER & TOP MENUS
11 B) HEADER & TOP MENUS
10 C) MAIN CONTENT & SIDEBAR
12 C) MAIN CONTENT & SIDEBAR
11 D) TOGGLE BUTTON & FLYOUT MENU
13 D) TOGGLE BUTTON & FLYOUT MENU
12 E) UX ELEMENTS
14 E) UX ELEMENTS
13 F) PAGE SPECIFIC STYLES
15 F) PAGE SPECIFIC STYLES
14 G) FORMS
16 G) FORMS
17
18 */
15 */
19
16
20
21 /* Hide new elements (toggle button and flyout menu) above 900px */
17 /* Hide new elements (toggle button and flyout menu) above 900px */
22 .mobile-toggle-button,
18 .mobile-toggle-button,
23 .flyout-menu
19 .flyout-menu {
24 {
20 display: none;
25 display: none;
26 }
21 }
27
22
28 /*
23 /*
29 redmine's body is set to min-width: 900px
24 redmine's body is set to min-width: 900px
30 add first breakpoint here and start adding responsiveness
25 add first breakpoint here and start adding responsiveness
31 */
26 */
32
27
33 @media all and (max-width: 899px)
28 @media all and (max-width: 899px)
34 {
29 {
35 /*----------------------------------------*\
30 /*----------------------------------------*\
36 A) BASIC MOBILE RESETS
31 A) BASIC MOBILE RESETS
37 \*----------------------------------------*/
32 \*----------------------------------------*/
38
33
39 /*
34 /*
40 apply natural border box, see: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
35 apply natural border box, see: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
41 this helps us to better deal with percentages and padding / margin
36 this helps us to better deal with percentages and padding / margin
42 */
37 */
43 *,
38 *,
44 *:before,
39 *:before,
45 *:after
40 *:after {
46 {
41 -webkit-box-sizing: border-box;
47 -webkit-box-sizing: border-box;
42 -moz-box-sizing: border-box;
48 -moz-box-sizing: border-box;
43 box-sizing: border-box;
49 box-sizing: border-box;
44 }
50 }
45
51
46 body,
52 body,
47 html {
53 html
48 height: 100%;
54 {
49 margin: 0;
55 height: 100%;
50 padding: 0;
56 margin: 0;
51 }
57 padding: 0;
52
58 }
53 html {
59
54 overflow-y: auto; /* avoid 2nd scrollbar on desktop */
60 html
55 }
61 {
56
62 overflow-y: auto; /* avoid 2nd scrollbar on desktop */
57 body {
63 }
58 min-width: 0; /* reset the min-width of 900px */
64
59 -webkit-overflow-scrolling: touch;
65 body
60 }
66 {
61
67 min-width: 0; /* reset the min-width of 900px */
62 body,
68
63 input,
69 -webkit-overflow-scrolling: touch;
64 select,
70 }
65 textarea,
71
66 button {
72
67 font-size: 14px; /* Set font-size for standard elements to 14px */
73 body,
68 }
74 input,
69
75 select,
70 select {
76 textarea,
71 max-width: 100%; /* prevent long names within select menues from breaking content */
77 button
72 }
78 {
73
79 font-size: 14px; /* Set font-size for standard elements to 14px */
74 #wrapper {
80 }
75 position: relative;
81
76 overflow-x: hidden; /* hide horizontal overflow */
82
77 max-width: 100%;
83 select
78 }
84 {
79
85 max-width: 100%; /* prevent long names within select menues from breaking content */
80 #wrapper,
86 }
81 #wrapper2 {
87
82 margin: 0;
88
83 }
89 #wrapper
84
90 {
85 /*----------------------------------------*\
91 position: relative;
86 B) HEADER & TOP MENUS
92
87 \*----------------------------------------*/
93 overflow-x: hidden; /* hide horizontal overflow */
88
94
89 #header {
95 max-width: 100%;
90 width: 100%;
96 }
91 height: 64px; /* the height of our header on mobile */
97
92 min-height: 0;
98 #wrapper,
93 margin: 0;
99 #wrapper2
94 padding: 0;
100 {
95 border: none;
101 margin: 0;
96 background-color: #628db6;
102 }
97 }
103
98
104 /*----------------------------------------*\
99 /* Hide project name on mobile (project name is still visible in select menu) */
105 B) HEADER & TOP MENUS
100 #header h1 {
106 \*----------------------------------------*/
101 display: none !important;
107
102 }
108 #header
103
109 {
104 /* reset #header a color for mobile toggle button */
110 width: 100%;
105 #header a.mobile-toggle-button {
111 height: 64px; /* the height of our header on mobile */
106 color: #f8f8f8;
112 min-height: 0;
107 }
113 margin: 0;
108
114 padding: 0;
109
115
110 /* Hide top-menu and main-menu on mobile, because it's placed in our flyout menu */
116 border: none;
111 #top-menu,
117 background-color: #628db6;
112 #header #main-menu {
118 }
113 display: none;
119
114 }
120 /* Hide project name on mobile (project name is still visible in select menu) */
115
121 #header h1
116 /* the quick search within header holding search form and #project_quick_jump_box box*/
122 {
117 #header #quick-search {
123 display: none !important;
118 float: none;
124 }
119 clear: none; /* there are themes which set clear property, this resets it */
125
120 max-width: 100%; /* reset max-width */
126 /* reset #header a color for mobile toggle button */
121 margin: 0;
127 #header a.mobile-toggle-button
122 background: inherit;
128 {
123 }
129 color: #f8f8f8;
124
130 }
125 /* this represents the dropdown arrow to left of the mobile project menu */
131
126 #header .jump-box-arrow:before {
132
127 /* set a font-size in order to achive same result in different themes */
133 /* Hide top-menu and main-menu on mobile, because it's placed in our flyout menu */
128 font-family: Verdana, sans-serif;
134 #top-menu,
129 font-size: 2em;
135 #header #main-menu
130 line-height: 64px;
136 {
131
137 display: none;
132 position: absolute;
138 }
133 left: 0;
139
134
140 /* the quick search within header holding search form and #project_quick_jump_box box*/
135 width: 2em;
141 #header #quick-search
136 padding: 0 .5em;
142 {
137 /* achieve dropdwon arrow by scaling a caret character */
143 float: none;
138 content: '^';
144 clear: none; /* there are themes which set clear property, this resets it */
139 -webkit-transform: scale(1,-.8);
145
140 -ms-transform: scale(1,-.8);
146 max-width: 100%; /* reset max-width */
141 transform: scale(1,-.8);
147 margin: 0;
142 text-align: right;
148
143 pointer-events: none;
149 background: inherit;
144
150 }
145 opacity: .6;
151
146 }
152 /* this represents the dropdown arrow to left of the mobile project menu */
147
153 #header .jump-box-arrow:before
148 /* styles for combobox within quick-search (#project_quick_jump_box) */
154 {
149 #header #quick-search select {
155 /* set a font-size in order to achive same result in different themes */
150 font-size: 1.5em;
156 font-family: Verdana, sans-serif;
151 font-weight: bold;
157 font-size: 2em;
152 line-height: 1.2;
158 line-height: 64px;
153
159
154 position: absolute;
160 position: absolute;
155 top: 15px;
161 left: 0;
156 left: 0;
162
157
163 width: 2em;
158 float: left;
164 padding: 0 .5em;
159
165 /* achieve dropdwon arrow by scaling a caret character */
160 width: 100%;
166
161 max-width: 100%;
167 content: '^';
162 height: 2em;
168 -webkit-transform: scale(1,-.8);
163 height: 35px;
169 -ms-transform: scale(1,-.8);
164 padding: 5px;
170 transform: scale(1,-.8);
165 padding-right: 72px;
171 text-align: right;
166 padding-left: 50px;
172 pointer-events: none;
167
173
168 text-indent: .01px;
174 opacity: .6;
169
175 }
170 color: inherit;
176
171 border: 0;
177 /* styles for combobox within quick-search (#project_quick_jump_box) */
172 -webkit-border-radius: 0;
178 #header #quick-search select
173 border-radius: 0;
179 {
174 background: none;
180 font-size: 1.5em;
175 -webkit-box-shadow: none;
181 font-weight: bold;
176 box-shadow: none;
182 line-height: 1.2;
177 /* hide default browser arrow */
183
178 -webkit-appearance: none;
184 position: absolute;
179 -moz-appearance: none;
185 top: 15px;
180 }
186 left: 0;
181
187
182 #header #quick-search form {
188 float: left;
183 display: none;
189
184 }
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 }
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
207 .splitcontentleft {
631 {
208 width: 100%;
632 overflow: hidden; /* for body not to have scrollbars when left flyout menu is active */
209 }
633 }
634
210
635 html.flyout-is-active
211 .splitcontentright {
636 {
212 width: 100%;
637 overflow: hidden;
213 }
638 }
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
629 /* page /login */
642 {
643 right: 250px; /* when left flyout is active, move body to the right (same amount like flyout-menu's width) */
644
630
645 overflow: visible;
631 #login-form table {
632 width: 100%;
633 }
646
634
647 height: 100%;
635 #login-form input#username,
648 }
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
642 /* some themes add a margin to login page, remove it on mobile */
651 {
643 .action-login #main {
652 content: '\00D7'; /* close glyph */
644 margin: 0;
653 }
645 }
654
646
655 .flyout-is-active #wrapper2
647 div#activity dl, #search-results {margin-left: 0;}
656 {
657
648
658 /*
649 .version-overview table.progress {width:75%;}
659 * only relevant for devices with cursor when flyout it active, in order to show,
650 div#version-summary {float:none; width:100%; margin-left:0;}
660 * that whole wrapper content is clickable and closes flyout menu
651 body.controller-versions.action-show div#roadmap .related-issues {width:100%;}
661 */
662 cursor: pointer;
663 }
664
652
665
653 /*----------------------------------------*\
666 #admin-menu
654 G) FORMS
667 {
655 \*----------------------------------------*/
668 padding-left: 0;
656
669 }
657 /* tabular forms resets for mobile */
670
658 .tabular p, .tabular.settings p {
671 #admin-menu li
659 padding-left: 0;
672 {
660 }
673 padding-bottom: 0;
661
674 }
662 .tabular label, .tabular.settings label {
675
663 display: block;
676 #admin-menu a,
664 width: 100%;
677 #admin-menu a.selected
665 margin-left: 0;
678 {
666 text-align: left;
679 line-height: 40px;
667 }
680
668
681 padding: 0;
669 .tabular input, .tabular select, .tabular textarea {
682 padding-left: 32px !important;
670 width: 100%;
683
671 max-width: 100%;
684 background-position: 8px 50%;
672 }
685 }
673
686
674 .tabular input[type="checkbox"], .tabular input.date {
687 /*----------------------------------------*\
675 width: auto;
688 E) UX ELEMENTS
676 max-width: 95%;
689 \*----------------------------------------*/
677 }
690
678
691 .mobile-hide {display:none;}
679 /* new issue form */
692 .mobile-show {display:initial;}
680 #all_attributes p:first-child {
693
681 float: none !important;
694 /* Contextual Buttons */
682 }
695
683
696 #content>.contextual
684 #issue_is_private_label {
697 {
685 display: inline;
698 width: 100%;
686 }
699 margin-bottom: .5em;
687
700 padding-left: 0; /* reset left padding in order to use whole space */
688 span#watchers_inputs {
701
689 width: 100%;
702 white-space: normal;
690 }
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 }
827 }
691 }
828
692
829 @media all and (max-width: 599px) {
693 @media all and (max-width: 599px) {
General Comments 0
You need to be logged in to leave comments. Login now