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