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