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