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