##// 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
@@ -2,9 +2,7
2 2 RESPONSIVE CSS
3 3 \*----------------------------------------*/
4 4
5
6 5 /*
7
8 6 CONTENTS
9 7
10 8 A) BASIC MOBILE RESETS
@@ -14,14 +12,11
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
@@ -42,62 +37,48
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
@@ -105,53 +86,44
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;
@@ -163,7 +135,6
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);
@@ -175,8 +146,7
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;
@@ -205,13 +175,11
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
@@ -219,45 +187,36
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
@@ -277,37 +236,29
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
@@ -316,11 +267,9
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
@@ -336,15 +285,12
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
@@ -361,8 +307,7
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
@@ -377,88 +322,67
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;
@@ -471,21 +395,18
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;
@@ -502,58 +423,44
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%;
@@ -568,93 +475,67
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
@@ -662,25 +543,19
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
@@ -693,20 +568,16
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;
@@ -723,13 +594,11
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
@@ -740,14 +609,12
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 }
@@ -761,22 +628,19
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
General Comments 0
You need to be logged in to leave comments. Login now