##// END OF EJS Templates
jro_apps » redmine
RSS
Makes the application settings forms responsive (#19097)....
Jean-Philippe Lang -
r14463:093c80cd0981
parent child
Show More
Side by Side Unified
Context file:
r14463:093c80cd0981 Loading diff...:
Show file before | Show file after | Hide comments
@@ -1,779 +1,779
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 min-width: 0; /* reset the min-width of 900px */
67 min-width: 0; /* reset the min-width of 900px */
68
68
69 -webkit-overflow-scrolling: touch;
69 -webkit-overflow-scrolling: touch;
70 }
70 }
71
71
72
72
73 body,
73 body,
74 input,
74 input,
75 select,
75 select,
76 textarea,
76 textarea,
77 button
77 button
78 {
78 {
79 font-size: 14px; /* Set font-size for standard elements to 14px */
79 font-size: 14px; /* Set font-size for standard elements to 14px */
80 }
80 }
81
81
82
82
83 select
83 select
84 {
84 {
85 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 */
86 }
86 }
87
87
88
88
89 #wrapper
89 #wrapper
90 {
90 {
91 position: relative;
91 position: relative;
92
92
93 overflow-x: hidden; /* hide horizontal overflow */
93 overflow-x: hidden; /* hide horizontal overflow */
94
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;
606 overflow: visible;
607
607
608 height: 100%;
608 height: 100%;
609 }
609 }
610
610
611 .flyout-is-active .mobile-toggle-button:after
611 .flyout-is-active .mobile-toggle-button:after
612 {
612 {
613 content: '\00D7'; /* close glyph */
613 content: '\00D7'; /* close glyph */
614 }
614 }
615
615
616 .flyout-is-active #wrapper2
616 .flyout-is-active #wrapper2
617 {
617 {
618
618
619 /*
619 /*
620 * 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,
621 * that whole wrapper content is clickable and closes flyout menu
621 * that whole wrapper content is clickable and closes flyout menu
622 */
622 */
623 cursor: pointer;
623 cursor: pointer;
624 }
624 }
625
625
626
626
627 #admin-menu
627 #admin-menu
628 {
628 {
629 padding-left: 0;
629 padding-left: 0;
630 }
630 }
631
631
632 #admin-menu li
632 #admin-menu li
633 {
633 {
634 padding-bottom: 0;
634 padding-bottom: 0;
635 }
635 }
636
636
637 #admin-menu a,
637 #admin-menu a,
638 #admin-menu a.selected
638 #admin-menu a.selected
639 {
639 {
640 line-height: 40px;
640 line-height: 40px;
641
641
642 padding: 0;
642 padding: 0;
643 padding-left: 32px !important;
643 padding-left: 32px !important;
644
644
645 background-position: 8px 50%;
645 background-position: 8px 50%;
646 }
646 }
647
647
648 /*----------------------------------------*\
648 /*----------------------------------------*\
649 E) UX ELEMENTS
649 E) UX ELEMENTS
650 \*----------------------------------------*/
650 \*----------------------------------------*/
651
651
652 /* Contextual Buttons */
652 /* Contextual Buttons */
653
653
654 #content>.contextual
654 #content>.contextual
655 {
655 {
656 width: 100%;
656 width: 100%;
657 margin-bottom: .5em;
657 margin-bottom: .5em;
658 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 */
659
659
660 white-space: normal;
660 white-space: normal;
661
661
662 color: transparent;
662 color: transparent;
663 }
663 }
664
664
665 #content>.contextual a,
665 #content>.contextual a,
666 p.buttons a
666 p.buttons a
667 {
667 {
668 font-weight: bold;
668 font-weight: bold;
669
669
670 display: inline-block;
670 display: inline-block;
671
671
672 margin: 5px 0;
672 margin: 5px 0;
673 margin-right: 2px;
673 margin-right: 2px;
674 padding: 9px 9px 9px 9px;
674 padding: 9px 9px 9px 9px;
675
675
676 border: 1px solid #ddd;
676 border: 1px solid #ddd;
677 -webkit-border-radius: 3px;
677 -webkit-border-radius: 3px;
678 border-radius: 3px;
678 border-radius: 3px;
679 background-color: transparent;
679 background-color: transparent;
680 background-position-x: 4px;
680 background-position-x: 4px;
681 }
681 }
682
682
683 #content>.contextual a.icon,
683 #content>.contextual a.icon,
684 p.buttons a.icon
684 p.buttons a.icon
685 {
685 {
686 padding-left: 25px;
686 padding-left: 25px;
687 }
687 }
688
688
689 .flyout-menu .contextual
689 .flyout-menu .contextual
690 {
690 {
691 float: none;
691 float: none;
692 }
692 }
693
693
694 /* loading indicator */
694 /* loading indicator */
695 #ajax-indicator {
695 #ajax-indicator {
696 width: 60%;
696 width: 60%;
697 left: 20%;
697 left: 20%;
698 }
698 }
699
699
700 /* jquery ui dialogs */
700 /* jquery ui dialogs */
701 .ui-dialog
701 .ui-dialog
702 {
702 {
703 max-width: 98%;
703 max-width: 98%;
704 margin: 1%;
704 margin: 1%;
705 }
705 }
706
706
707 .ui-dialog .ui-dialog-content
707 .ui-dialog .ui-dialog-content
708 {
708 {
709 padding-left: 0;
709 padding-left: 0;
710 padding-right: 0;
710 padding-right: 0;
711 }
711 }
712
712
713 #filters-table {width:100%; float:none;}
713 #filters-table {width:100%; float:none;}
714 .add-filter {width:100%; float:none; text-align: left; margin-top: 8px;}
714 .add-filter {width:100%; float:none; text-align: left; margin-top: 8px;}
715
715
716 /*----------------------------------------*\
716 /*----------------------------------------*\
717 F) PAGE SPECIFIC STYLES
717 F) PAGE SPECIFIC STYLES
718 \*----------------------------------------*/
718 \*----------------------------------------*/
719
719
720 /* page /login */
720 /* page /login */
721
721
722 #login-form table
722 #login-form table
723 {
723 {
724 width: 100%;
724 width: 100%;
725 }
725 }
726
726
727 #login-form input#username,
727 #login-form input#username,
728 #login-form input#password,
728 #login-form input#password,
729 #login-form input#openid_url
729 #login-form input#openid_url
730 {
730 {
731 width: 100%;
731 width: 100%;
732 height: auto;
732 height: auto;
733 }
733 }
734
734
735 /* 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 */
736 .action-login #main
736 .action-login #main
737 {
737 {
738 margin: 0;
738 margin: 0;
739 }
739 }
740
740
741 /*----------------------------------------*\
741 /*----------------------------------------*\
742 G) FORMS
742 G) FORMS
743 \*----------------------------------------*/
743 \*----------------------------------------*/
744
744
745 /* tabular forms resets for mobile */
745 /* tabular forms resets for mobile */
746 .box.tabular p {
746 .tabular p, .tabular.settings p {
747 padding-left: 0;
747 padding-left: 0;
748 }
748 }
749
749
750 .box.tabular label {
750 .tabular label, .tabular.settings label {
751 display: block;
751 display: block;
752 width: 100%;
752 width: 100%;
753 margin-left: 0;
753 margin-left: 0;
754 text-align: left;
754 text-align: left;
755 }
755 }
756
756
757 .box.tabular input, .box.tabular select, .box.tabular textarea {
757 .tabular input, .tabular select, .tabular textarea {
758 width: 100%;
758 width: 100%;
759 max-width: 100%;
759 max-width: 100%;
760 }
760 }
761
761
762 .box.tabular input[type="checkbox"], .box.tabular input.date {
762 .tabular input[type="checkbox"], .tabular input.date {
763 width: auto;
763 width: auto;
764 max-width: 95%;
764 max-width: 95%;
765 }
765 }
766
766
767 /* new issue form */
767 /* new issue form */
768 #all_attributes p:first-child {
768 #all_attributes p:first-child {
769 float: none !important;
769 float: none !important;
770 }
770 }
771
771
772 #issue_is_private_label {
772 #issue_is_private_label {
773 display: inline;
773 display: inline;
774 }
774 }
775
775
776 span#watchers_inputs {
776 span#watchers_inputs {
777 width: 100%;
777 width: 100%;
778 }
778 }
779 }
779 }
General Comments 0
You need to be logged in to leave comments. Login now