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