##// END OF EJS Templates
jro_apps » redmine
RSS
Make UI Dialogs responsive (#19097)....
Jean-Philippe Lang -
r14442:e9a01896d0b9
parent child
Show More
Side by Side Unified
Context file:
r14442:e9a01896d0b9 Loading diff...:
Show file before | Show file after | Hide comments
@@ -1,727 +1,740
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
420 .flyout-menu #watchers
421 {
421 {
422 display: -webkit-flex;
422 display: -webkit-flex;
423 display: -ms-flexbox;
423 display: -ms-flexbox;
424 display: -webkit-box;
424 display: -webkit-box;
425 display: flex;
425 display: flex;
426 flex-direction: column;
426 flex-direction: column;
427
427
428 -webkit-flex-direction: column;
428 -webkit-flex-direction: column;
429 -ms-flex-direction: column;
429 -ms-flex-direction: column;
430 -webkit-box-orient: vertical;
430 -webkit-box-orient: vertical;
431 -webkit-box-direction: normal;
431 -webkit-box-direction: normal;
432 }
432 }
433
433
434 .flyout-menu #watchers .contextual
434 .flyout-menu #watchers .contextual
435 {
435 {
436 -webkit-box-ordinal-group: 4;
436 -webkit-box-ordinal-group: 4;
437 -webkit-order: 3;
437 -webkit-order: 3;
438 -ms-flex-order: 3;
438 -ms-flex-order: 3;
439 order: 3;
439 order: 3;
440 }
440 }
441
441
442 .flyout-menu #watchers h3
442 .flyout-menu #watchers h3
443 {
443 {
444 margin-left: -8px;
444 margin-left: -8px;
445 }
445 }
446
446
447 .flyout-menu #watchers ul li
447 .flyout-menu #watchers ul li
448 {
448 {
449 display: -webkit-flex;
449 display: -webkit-flex;
450 display: -ms-flexbox;
450 display: -ms-flexbox;
451 display: -webkit-box;
451 display: -webkit-box;
452 display: flex;
452 display: flex;
453 flex-direction: row;
453 flex-direction: row;
454
454
455 -webkit-flex-direction: row;
455 -webkit-flex-direction: row;
456 -ms-flex-direction: row;
456 -ms-flex-direction: row;
457 -webkit-box-orient: horizontal;
457 -webkit-box-orient: horizontal;
458 -webkit-box-direction: normal;
458 -webkit-box-direction: normal;
459 -webkit-align-items: center;
459 -webkit-align-items: center;
460 -ms-flex-align: center;
460 -ms-flex-align: center;
461 -webkit-box-align: center;
461 -webkit-box-align: center;
462 align-items: center;
462 align-items: center;
463 }
463 }
464
464
465 .flyout-menu ul li a
465 .flyout-menu ul li a
466 {
466 {
467 line-height: 40px;
467 line-height: 40px;
468
468
469 display: block;
469 display: block;
470 overflow: hidden;
470 overflow: hidden;
471
471
472 height: 40px;
472 height: 40px;
473
473
474 white-space: nowrap;
474 white-space: nowrap;
475 text-overflow: ellipsis;
475 text-overflow: ellipsis;
476
476
477 border-top: 1px solid rgba(255,255,255,.1);
477 border-top: 1px solid rgba(255,255,255,.1);
478 }
478 }
479
479
480 .flyout-menu ul li:first-child a
480 .flyout-menu ul li:first-child a
481 {
481 {
482 line-height: 39px;
482 line-height: 39px;
483
483
484 height: 39px;
484 height: 39px;
485
485
486 border-top: none;
486 border-top: none;
487 }
487 }
488
488
489 .flyout-menu a
489 .flyout-menu a
490 {
490 {
491 color: white;
491 color: white;
492 }
492 }
493
493
494 .flyout-menu ul li a:hover
494 .flyout-menu ul li a:hover
495 {
495 {
496 text-decoration: none;
496 text-decoration: none;
497 }
497 }
498
498
499 .flyout-menu ul li a.new-object,
499 .flyout-menu ul li a.new-object,
500 .new-object ~ .menu-children
500 .new-object ~ .menu-children
501 {
501 {
502 display: none;
502 display: none;
503 }
503 }
504
504
505 /* Left flyout search container */
505 /* Left flyout search container */
506 .flyout-menu__search
506 .flyout-menu__search
507 {
507 {
508 line-height: 54px;
508 line-height: 54px;
509
509
510 height: 64px;
510 height: 64px;
511 padding-top: 3px;
511 padding-top: 3px;
512 padding-right: 8px;
512 padding-right: 8px;
513 }
513 }
514
514
515 .flyout-menu__search input[type='text']
515 .flyout-menu__search input[type='text']
516 {
516 {
517 line-height: 2;
517 line-height: 2;
518
518
519 width: 100%;
519 width: 100%;
520 height: 38px;
520 height: 38px;
521 padding-left: 27px;
521 padding-left: 27px;
522
522
523 vertical-align: middle;
523 vertical-align: middle;
524
524
525 border: none;
525 border: none;
526 -webkit-border-radius: 3px;
526 -webkit-border-radius: 3px;
527 border-radius: 3px;
527 border-radius: 3px;
528 background-color: #fff;
528 background-color: #fff;
529 }
529 }
530
530
531 .flyout-menu__avatar
531 .flyout-menu__avatar
532 {
532 {
533 display: -webkit-box;
533 display: -webkit-box;
534 display: -webkit-flex;
534 display: -webkit-flex;
535 display: -ms-flexbox;
535 display: -ms-flexbox;
536 display: flex;
536 display: flex;
537
537
538 width: 100%;
538 width: 100%;
539
539
540 border-top: 1px solid rgba(255,255,255,.1);
540 border-top: 1px solid rgba(255,255,255,.1);
541 }
541 }
542
542
543
543
544 .flyout-menu__avatar img.gravatar
544 .flyout-menu__avatar img.gravatar
545 {
545 {
546 width: 40px;
546 width: 40px;
547 height: 40px;
547 height: 40px;
548 padding: 0;
548 padding: 0;
549
549
550 vertical-align: top;
550 vertical-align: top;
551
551
552 border-width: 0;
552 border-width: 0;
553 }
553 }
554
554
555 .flyout-menu__avatar a
555 .flyout-menu__avatar a
556 {
556 {
557 line-height: 40px;
557 line-height: 40px;
558
558
559 height: auto;
559 height: auto;
560 height: 40px;
560 height: 40px;
561
561
562 text-decoration: none;
562 text-decoration: none;
563
563
564 color: white;
564 color: white;
565 }
565 }
566
566
567 /* avatar */
567 /* avatar */
568 .flyout-menu__avatar a:first-child
568 .flyout-menu__avatar a:first-child
569 {
569 {
570 line-height: 0;
570 line-height: 0;
571
571
572 width: 40px;
572 width: 40px;
573 padding: 0;
573 padding: 0;
574 }
574 }
575
575
576 .flyout-menu__avatar .user
576 .flyout-menu__avatar .user
577 {
577 {
578 padding-left: 15px;
578 padding-left: 15px;
579 }
579 }
580
580
581 /* user link when no avatar is present */
581 /* user link when no avatar is present */
582 .flyout-menu__avatar--no-avatar a.user
582 .flyout-menu__avatar--no-avatar a.user
583 {
583 {
584 line-height: 40px;
584 line-height: 40px;
585
585
586 padding-left: 8px;
586 padding-left: 8px;
587 }
587 }
588
588
589
589
590 .flyout-is-active body
590 .flyout-is-active body
591 {
591 {
592 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 */
593 }
593 }
594
594
595 html.flyout-is-active
595 html.flyout-is-active
596 {
596 {
597 overflow: hidden;
597 overflow: hidden;
598 }
598 }
599
599
600
600
601 .flyout-is-active #wrapper
601 .flyout-is-active #wrapper
602 {
602 {
603 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) */
604
604
605 height: 100%;
605 height: 100%;
606 }
606 }
607
607
608 .flyout-is-active .mobile-toggle-button:after
608 .flyout-is-active .mobile-toggle-button:after
609 {
609 {
610 content: '\00D7'; /* close glyph */
610 content: '\00D7'; /* close glyph */
611 }
611 }
612
612
613 .flyout-is-active #wrapper2
613 .flyout-is-active #wrapper2
614 {
614 {
615
615
616 /*
616 /*
617 * 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,
618 * that whole wrapper content is clickable and closes flyout menu
618 * that whole wrapper content is clickable and closes flyout menu
619 */
619 */
620 cursor: pointer;
620 cursor: pointer;
621 }
621 }
622
622
623
623
624 #admin-menu
624 #admin-menu
625 {
625 {
626 padding-left: 0;
626 padding-left: 0;
627 }
627 }
628
628
629 #admin-menu li
629 #admin-menu li
630 {
630 {
631 padding-bottom: 0;
631 padding-bottom: 0;
632 }
632 }
633
633
634 #admin-menu a,
634 #admin-menu a,
635 #admin-menu a.selected
635 #admin-menu a.selected
636 {
636 {
637 line-height: 40px;
637 line-height: 40px;
638
638
639 padding: 0;
639 padding: 0;
640 padding-left: 32px !important;
640 padding-left: 32px !important;
641
641
642 background-position: 8px 50%;
642 background-position: 8px 50%;
643 }
643 }
644
644
645 /*----------------------------------------*\
645 /*----------------------------------------*\
646 E) UX ELEMENTS
646 E) UX ELEMENTS
647 \*----------------------------------------*/
647 \*----------------------------------------*/
648
648
649 /* Contextual Buttons */
649 /* Contextual Buttons */
650
650
651 .contextual
651 .contextual
652 {
652 {
653 width: 100%;
653 width: 100%;
654 margin-bottom: .5em;
654 margin-bottom: .5em;
655 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 */
656
656
657 white-space: normal;
657 white-space: normal;
658
658
659 color: transparent;
659 color: transparent;
660 }
660 }
661
661
662 .contextual a,
662 .contextual a,
663 p.buttons a
663 p.buttons a
664 {
664 {
665 font-weight: bold;
665 font-weight: bold;
666
666
667 display: inline-block;
667 display: inline-block;
668
668
669 margin: 5px 0;
669 margin: 5px 0;
670 margin-right: 2px;
670 margin-right: 2px;
671 padding: 9px 9px 9px 9px;
671 padding: 9px 9px 9px 9px;
672
672
673 border: 1px solid #ddd;
673 border: 1px solid #ddd;
674 -webkit-border-radius: 3px;
674 -webkit-border-radius: 3px;
675 border-radius: 3px;
675 border-radius: 3px;
676 background-color: transparent;
676 background-color: transparent;
677 background-position-x: 4px;
677 background-position-x: 4px;
678 }
678 }
679
679
680 .contextual a.icon,
680 .contextual a.icon,
681 p.buttons a.icon
681 p.buttons a.icon
682 {
682 {
683 padding-left: 25px;
683 padding-left: 25px;
684 }
684 }
685
685
686 .flyout-menu .contextual
686 .flyout-menu .contextual
687 {
687 {
688 float: none;
688 float: none;
689 }
689 }
690
690
691 #issue_tree .contextual a,
691 #issue_tree .contextual a,
692 #relations .contextual a
692 #relations .contextual a
693 {
693 {
694 float: right;
694 float: right;
695 }
695 }
696
696
697 /* loading indicator */
697 /* loading indicator */
698 #ajax-indicator {
698 #ajax-indicator {
699 width: 60%;
699 width: 60%;
700 left: 20%;
700 left: 20%;
701 }
701 }
702
702
703 /* jquery ui dialogs */
704 .ui-dialog
705 {
706 max-width: 98%;
707 margin: 1%;
708 }
709
710 .ui-dialog .ui-dialog-content
711 {
712 padding-left: 0;
713 padding-right: 0;
714 }
715
703 /*----------------------------------------*\
716 /*----------------------------------------*\
704 F) PAGE SPECIFIC STYLES
717 F) PAGE SPECIFIC STYLES
705 \*----------------------------------------*/
718 \*----------------------------------------*/
706
719
707 /* page /login */
720 /* page /login */
708
721
709 #login-form table
722 #login-form table
710 {
723 {
711 width: 100%;
724 width: 100%;
712 }
725 }
713
726
714 #login-form input#username,
727 #login-form input#username,
715 #login-form input#password,
728 #login-form input#password,
716 #login-form input#openid_url
729 #login-form input#openid_url
717 {
730 {
718 width: 100%;
731 width: 100%;
719 height: auto;
732 height: auto;
720 }
733 }
721
734
722 /* some themes add a margin to login page, remove it on mobile */
735 /* some themes add a margin to login page, remove it on mobile */
723 .action-login #main
736 .action-login #main
724 {
737 {
725 margin: 0;
738 margin: 0;
726 }
739 }
727 }
740 }
General Comments 0
You need to be logged in to leave comments. Login now