1.app { 2 position: relative !important; 3 padding-top: 52px; 4 padding-bottom: 50px; 5 overflow-x: hidden; 6} 7 8@media (max-width: 767px) { 9 .app { 10 padding-top: 46px 11 } 12} 13 14.app:before { 15 content: " "; 16 background: rgba(255, 255, 255, 0.98); 17 position: fixed; 18 top: 0; 19 left: 0; 20 right: 0; 21 z-index: 1000; 22 border-bottom: 1px solid @ini_background_alt; 23 -webkit-transform: translate3d(0, 0, 0); 24 transform: translate3d(0, 0, 0); 25 -webkit-transition: box-shadow 0.2s, -webkit-transform 0.2s; 26 -o-transition: box-shadow 0.2s, -webkit-transform 0.2s; 27 transition: box-shadow 0.2s, -webkit-transform 0.2s; 28 border-bottom: 0; 29 position: absolute; 30} 31 32@media (max-width: 767px) { 33 .app:before { 34 height: 46px 35 } 36} 37 38@media (min-width: 768px) { 39 .app:before { 40 height: 52px 41 } 42} 43 44@media (min-width: 768px) { 45 .affix { 46 position: fixed; 47 } 48} 49 50.affix.app:before { 51 position: fixed 52} 53 54.scrolled.app:before { 55 -webkit-box-shadow: 0 2px 6px rgba(18,18,18,.2); 56 box-shadow: 0 2px 6px rgba(18,18,18,.2); 57} 58 59@media (max-width: 767px) { 60 61 .app-primaryControl, 62 .app-titleControl, 63 .app-backControl { 64 position: absolute !important; 65 z-index: 1001; 66 top: 0 !important; 67 margin: 0 68 } 69 70 .app.affix .app-primaryControl, 71 .app.affix .app-titleControl, 72 .app.affix .app-backControl, 73 .Composer .app-primaryControl, 74 .Composer .app-titleControl, 75 .Composer .app-backControl { 76 position: fixed !important 77 } 78 79 .app-primaryControl>.btn, 80 .app-titleControl>.btn, 81 .app-backControl>.btn { 82 float: none; 83 background: transparent !important; 84 -webkit-box-shadow: none !important; 85 box-shadow: none !important; 86 height: 46px; 87 width: auto; 88 padding: 13px !important; 89 margin: 0 !important 90 } 91 92 .app-primaryControl>.btn:active, 93 .app-titleControl>.btn:active, 94 .app-backControl>.btn:active { 95 opacity: 0.5 96 } 97 98 .app-primaryControl>.btn-icon, 99 .app-titleControl>.btn-icon, 100 .app-backControl>.btn-icon { 101 width: 40px 102 } 103 104 .app-primaryControl { 105 width: auto; 106 right: 0 107 } 108 109 .app-primaryControl.dropdown .btn, 110 .app-primaryControl.dropdown .btn-caret { 111 display: none !important; 112 } 113 114 .app-primaryControl.dropdown .dropdown-toggle, 115 .app-primaryControl.dropdown .btn-icon { 116 display: block !important; 117 } 118 119 .app-primaryControl, 120 .app-backControl { 121 margin: 0 !important; 122 } 123 124 .app-primaryControl>.btn, 125 .app-backControl>.btn { 126 color: @ini_text_alt !important; 127 } 128 129 .app-primaryControl>.btn .btn-icon, 130 .app-backControl>.btn .btn-icon { 131 display: block; 132 font-size: 20px; 133 margin: 0; 134 } 135 136 .app-primaryControl>.btn .btn-label, 137 .app-backControl>.btn .btn-label { 138 display: none; 139 } 140 141 .app-titleControl { 142 width: 200px; 143 left: 50%; 144 margin-left: -100px; 145 text-align: center; 146 color: @ini_link !important; 147 } 148 149 .app-titleControl, 150 .app-titleControl>.btn { 151 font-size: 16px; 152 } 153 154 .app-titleControl>.btn { 155 color: @ini_link; 156 width: 100%; 157 overflow: hidden; 158 text-overflow: ellipsis; 159 } 160 161 .app-titleControl--text { 162 line-height: 46px; 163 white-space: nowrap; 164 overflow: hidden; 165 text-overflow: ellipsis; 166 font-weight: normal; 167 } 168 169 .app-backControl { 170 left: 0; 171 } 172 173 .app-backControl .navigation-pin { 174 display: none; 175 } 176} 177 178@media (max-width: 767px) { 179 .drawerOpen { 180 overflow: hidden; 181 } 182 183 .app-drawer { 184 background: #fff; 185 width: 270px; 186 position: fixed; 187 left: 0; 188 top: 0; 189 bottom: 0; 190 -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); 191 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); 192 -webkit-transform: translate3d(-276px, 0, 0); 193 transform: translate3d(-276px, 0, 0); 194 -webkit-transition: -webkit-transform .2s; 195 -moz-transition: -moz-transform .2s; 196 -o-transition: -o-transform .2s; 197 transition: transform .2s; 198 z-index: 1050; 199 } 200 201 .drawerOpen .app-drawer { 202 -webkit-transform: none !important; 203 transform: none !important; 204 } 205 206 .drawer-backdrop { 207 position: fixed; 208 top: 0; 209 right: 0; 210 bottom: 0; 211 left: 0; 212 z-index: 1040; 213 background: rgba(0,0,0,.4); 214 opacity: 0; 215 visibility: hidden; 216 -webkit-transition: .2s opacity; 217 -o-transition: .2s opacity; 218 transition: .2s opacity; 219 } 220 221 .drawer-backdrop.show { 222 opacity: 0.9; 223 visibility: visible; 224 } 225} 226 227.header-controls { 228 margin: 0; 229 padding: 0; 230 list-style: none; 231 232 .action { 233 display: inline-block; 234 padding: 8px 13px; 235 } 236} 237 238@media (max-width: 767px) { 239 .app-header .container { 240 padding: 0; 241 } 242 243 .header-navigation { 244 display: none; 245 } 246 247 .header-title { 248 padding: 13px 10px; 249 font-size: 16px; 250 font-weight: normal; 251 margin: 0; 252 text-align: center; 253 } 254 255 .header-controls { 256 margin-top: 10px; 257 } 258 259 .header-controls>li { 260 padding: 0 10px 0; 261 } 262 263 .header-controls .form-control, 264 .header-controls .btn-group, 265 .header-controls .btn { 266 width: 100%; 267 text-align: left; 268 } 269 270 .header-controls .dropdown-menu .btn-group, 271 .header-controls .dropdown-menu .btn { 272 width: auto; 273 } 274 275 .header-secondary .search { 276 margin: 10px 0; 277 } 278} 279 280@media (min-width: 768px) { 281 .app-navigation { 282 display: none; 283 } 284 285 .app-header { 286 padding: 8px; 287 height: 52px; 288 position: absolute; 289 top: 0; 290 left: 0; 291 right: 0; 292 z-index: 1000; 293 background-color: @ini_background; 294 } 295 296 .affix .app-header { 297 position: fixed; 298 } 299 300 .header-navigation { 301 float: left; 302 margin-right: 25px; 303 } 304 305 .header-controls, 306 .header-controls>li { 307 display: inline-block; 308 vertical-align: middle; 309 } 310 311 .header-primary { 312 float: left; 313 } 314 315 .header-title { 316 float: left; 317 vertical-align: top; 318 font-size: 18px; 319 font-weight: normal; 320 margin: 0 15px 0 0; 321 line-height: 34px; 322 323 img { 324 max-height: 30px; 325 vertical-align: middle; 326 } 327 } 328 329 .header-secondary { 330 float: right 331 } 332 333 .header-secondary .search { 334 margin-right: 10px 335 } 336} 337 338@media (min-width: 768px) and (max-width: 991px) { 339 .header-secondary .search input:not(:focus) { 340 width: 1px; 341 background-color: transparent; 342 } 343 344 .header-secondary .search:not(.active) input { 345 padding-right: 0 346 } 347} 348 349.search { 350 position: relative; 351 height: 36px; 352 353 .no { 354 display: inline-block; 355 overflow: hidden; 356 color: @ini_text_alt; 357 358 input.edit { 359 float: left; 360 width: 225px; 361 padding: 0.3125rem 2rem; 362 font-size: .9375rem; 363 line-height: 1.5; 364 color: @ini_text_alt; 365 background: @ini_background_alt url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAMAAAAolt3jAAAAY1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmaHTeAAAAIXRSTlMHNEEkTD4WPVEtKzcMQ1NATkc4VFJGHDEhJ0Q6RS8uVQBDAjEGAAAAXklEQVR4AS3HVQ4CUQDF0MHdGZfe/a+SNLz+NKeKNSnJCTj2Sn55rl9w+XNiTNLfaWRFHZsZ5cYZtew4xK7cZD7EBmaZFdtz9gO0MtlRWmTSvafH3GpZOulCWwBpxT/nGxX5oR8AJgAAAABJRU5ErkJggg==) no-repeat 8px 9px; 366 border: 2px solid transparent; 367 border-radius: .25rem; 368 -webkit-transition: all .4s; 369 -o-transition: all .4s; 370 transition: all .4s; 371 } 372 373 .edit:focus { 374 background-color: @ini_background; 375 border-color: @ini_text_alt; 376 outline: 0; 377 // width: 320px; 378 } 379 380 button { 381 display: none; 382 } 383 } 384} 385 386@media (min-width: 768px) { 387 .search { 388 -webkit-transition: margin-left .4s; 389 -o-transition: margin-left .4s; 390 transition: margin-left .4s; 391 } 392} 393 394.app-content { 395 border-top: 1px solid @ini_background_alt; 396} 397 398 399.hero { 400 position: relative; 401 margin-top: -1px; 402 background: @ini_background_alt; 403 text-align: center; 404 color: @ini_text_alt 405} 406 407.hero h2 { 408 margin: 0; 409 font-size: 16px; 410 font-weight: normal; 411 line-height: 1.5em 412} 413 414.hero .container { 415 padding-top: 20px; 416 padding-bottom: 20px 417} 418 419.hero-subtitle { 420 margin: 8px 0 0; 421 line-height: 1.5em 422} 423 424@media (max-width: 767px) { 425 .close { 426 margin-right: -10px 427 } 428} 429 430@media (min-width: 768px) { 431 .hero h2 { 432 font-size: 22px 433 } 434 435 .hero .container { 436 padding-top: 40px; 437 padding-bottom: 30px 438 } 439 440 .hero-subtitle { 441 font-size: 15px 442 } 443} 444 445.container-narrow { 446 max-width: 600px; 447 margin: 0 auto 448} 449 450@media (min-width: 992px) { 451 .IndexPage-nav .item-newDiscussion { 452 margin-bottom: 20px 453 } 454 455 .IndexPage-nav .item-newDiscussion .btn { 456 display: block; 457 padding: .5rem 0; 458 width: 100%; 459 overflow: hidden; 460 text-overflow: ellipsis; 461 // box-shadow: rgba(0, 0, 0, 0.08) 0px 8px 28px; 462 } 463 464 .IndexPage-nav .item-newDiscussion .btn+.btn-block { 465 margin-top: 5px 466 } 467} 468 469.sideNav>ul { 470 margin: 0; 471 padding: 0; 472 list-style: none 473} 474 475@media (min-width: 768px) { 476 .sideNav .dropdown-select { 477 display: block 478 } 479 480 .sideNav .dropdown-select .dropdown-toggle { 481 display: none 482 } 483 484 .sideNav .dropdown-select .dropdown-menu { 485 display: block; 486 border: 0; 487 width: auto; 488 margin: 0 0 0 8px; 489 padding: 0; 490 min-width: 0; 491 float: none; 492 position: static; 493 background: none; 494 -webkit-box-shadow: none; 495 box-shadow: none 496 } 497 498 .sideNav .dropdown-select .dropdown-menu>li>a { 499 padding: 8px 0 8px 30px; 500 color: @ini_text_alt 501 } 502 503 .sideNav .dropdown-select .dropdown-menu>li>a:hover { 504 background: none; 505 color: @ini_link; 506 text-decoration: none 507 } 508 509 .sideNav .dropdown-select .dropdown-menu>li>a svg { 510 float: left; 511 margin: 2px 0 0 -28px; 512 width: 18px; 513 height: 18px; 514 fill: @ini_text_alt; 515 } 516 517 .sideNav .dropdown-select .dropdown-menu>li.active>a { 518 background: none; 519 color: @ini_link; 520 font-weight: bold 521 } 522 523 .sideNav .dropdown-select .dropdown-menu>.dropdown-separator { 524 background: none 525 } 526} 527 528@media (min-width: 768px) and (max-width: 991px) { 529 .sideNav { 530 padding: 15px 0; 531 white-space: nowrap; 532 overflow: auto; 533 -webkit-overflow-scrolling: touch 534 } 535 536 .sideNav:after { 537 content: " "; 538 position: absolute; 539 left: 0; 540 right: 0; 541 margin-top: 15px; 542 // border-bottom: 1px solid @ini_background_alt; 543 } 544 545 .sideNav>ul>li, 546 .sideNav .dropdown-menu>li { 547 display: inline-block; 548 margin: 0 20px 0 0; 549 vertical-align: top 550 } 551 552 .sideNav .dropdown-separator { 553 display: none 554 } 555 556 .sideNav .dropdown-select .dropdown-menu>li>a { 557 padding-left: 25px 558 } 559 560 .sideNav .dropdown-select .dropdown-menu>li>a .icon { 561 margin-left: -25px 562 } 563} 564 565@media (min-width: 992px) { 566 .sideNavContainer { 567 display: flex 568 } 569 570 .sideNav { 571 flex-shrink: 0; 572 margin-left: 50px 573 } 574 575 .sideNav, 576 .sideNav>ul { 577 width: 190px 578 } 579 580 .sideNav>ul { 581 margin-top: 30px 582 } 583 584 .sideNav>ul.affix { 585 position: fixed; 586 top: 40px; 587 } 588 589 .sideNav>ul>li { 590 margin-bottom: 10px 591 } 592} 593 594.sideNav--horizontal { 595 padding: 15px 0; 596 white-space: nowrap; 597 overflow: auto; 598 -webkit-overflow-scrolling: touch 599} 600 601.sideNav--horizontal:after { 602 content: " "; 603 position: absolute; 604 left: 0; 605 right: 0; 606 margin-top: 15px; 607 border-bottom: 1px solid @ini_background_alt; 608} 609 610.sideNav--horizontal>ul>li, 611.sideNav--horizontal .dropdown-menu>li { 612 display: inline-block; 613 margin: 0 20px 0 0; 614 vertical-align: top 615} 616 617.sideNav--horizontal .dropdown-separator { 618 display: none 619} 620 621.sideNav--horizontal .dropdown--select .dropdown-menu>li>a { 622 padding-left: 25px 623} 624 625.sideNav--horizontal .dropdown--select .dropdown-menu>li>a .icon { 626 margin-left: -25px 627} 628 629.sideNav--horizontal .affix { 630 position: static 631} 632 633@media (max-width: 767px), 634(min-width: 768px) and (max-width: 991px) { 635 .sideNavOffset { 636 margin-top: 15px 637 } 638} 639 640@media (min-width: 992px) { 641 .sideNavOffset { 642 margin-top: 30px; 643 flex: 1; 644 min-width: 0 645 } 646} 647 648.dropdown { 649 position: relative; 650} 651 652.dropdown-menu { 653 position: absolute; 654 top: 100%; 655 left: 0; 656 z-index: 1000; 657 display: none; 658 float: left; 659 min-width: 8rem; 660 font-size: .9375rem; 661 margin: 0.3125rem 0 0; 662 padding: 0; 663 color: @ini_text; 664 text-align: left; 665 list-style: none; 666 background-color: @ini_background; 667 background-clip: padding-box; 668 border-radius: 0.25rem; 669 -webkit-box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, .132), 670 0 1.2px 3.6px 0 rgba(0, 0, 0, .108); 671 box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, .132), 672 0 1.2px 3.6px 0 rgba(0, 0, 0, .108); 673} 674 675.dropdown-menu-right { 676 right: 0; 677 left: auto; 678} 679 680.open>.dropdown-menu { 681 display: block; 682} 683 684.dropdown-menu>li>a, 685.dropdown-menu>li>button, 686.dropdown-menu>li>span { 687 padding: 8px 15px; 688 display: block; 689 width: 100%; 690 color: @ini_text; 691 border-radius: 0; 692 border: 0; 693 background: none; 694 white-space: nowrap; 695 overflow: hidden; 696 text-overflow: ellipsis; 697 -webkit-box-shadow: none; 698 box-shadow: none; 699 text-align: left; 700 font-size: .9375rem; 701 font-weight: normal; 702 text-decoration: none 703} 704 705.dropdown-menu>li>a.hasIcon, 706.dropdown-menu>li>button.hasIcon, 707.dropdown-menu>li>span.hasIcon { 708 padding-left: 40px 709} 710 711.dropdown-menu>li>a .btn-icon, 712.dropdown-menu>li>button .btn-icon, 713.dropdown-menu>li>span .btn-icon { 714 float: left; 715 margin-left: -25px; 716 margin-top: 2px; 717 width: 16px; 718 text-align: center 719} 720 721.dropdown-menu>li>a.disabled, 722.dropdown-menu>li>button.disabled, 723.dropdown-menu>li>span.disabled { 724 opacity: 0.4; 725 background: none !important 726} 727 728.dropdown-menu>li>a:hover, 729.dropdown-menu>li>button:hover { 730 color: @ini_text; 731 background: @ini_background_alt; 732} 733 734.dropdown-menu>li>a:focus, 735.dropdown-menu>li>button:focus { 736 outline: none 737} 738 739.dropdown-menu>li.active>a, 740.dropdown-menu>li.active>button { 741 background: @ini_background_alt; 742} 743 744.dropdown-menu-top { 745 top: auto; 746 bottom: 100% 747} 748 749.dropdown-separator { 750 margin: 8px 0; 751 background-color: @ini_background_alt; 752 height: 1px 753} 754 755.dropright .dropdown-menu { 756 top: 0; 757 right: auto; 758 left: 100%; 759 margin-top: 0; 760 margin-left: 0.125rem; 761} 762 763.dropdown-toggle { 764 white-space: nowrap; 765} 766 767.dropdown-toggle::after { 768 display: inline-block; 769 margin-left: 0.255em; 770 vertical-align: 0.255em; 771 content: ""; 772 border-top: 0.3em solid; 773 border-right: 0.3em solid transparent; 774 border-bottom: 0; 775 border-left: 0.3em solid transparent; 776} 777 778.dropdown-toggle:empty::after { 779 margin-left: 0; 780} 781 782@media(max-width:767px) { 783 .dropdown.open { 784 z-index: 1050; 785 } 786 787 .dropdown .dropdown-menu { 788 margin: 0; 789 position: fixed !important; 790 left: 0 !important; 791 right: 0 !important; 792 width: auto !important; 793 bottom: 0; 794 top: auto; 795 padding: 0; 796 padding-bottom: 40px !important; 797 display: block; 798 max-height: 70vh; 799 border-radius: 0; 800 -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, .35); 801 box-shadow: 0 2px 6px rgba(0, 0, 0, .35); 802 visibility: hidden; 803 overflow: auto; 804 -webkit-overflow-scrolling: touch; 805 -webkit-transform: translate3d(0, 70vh, 0); 806 transform: translate3d(0, 70vh, 0); 807 -webkit-transition: -webkit-transform .3s, visibility 0s .3s; 808 -moz-transition: -moz-transform .3s, visibility 0s .3s; 809 -o-transition: -o-transform .3s, visibility 0s .3s; 810 } 811 812 .dropdown .dropdown-menu>li>a, 813 .dropdown .dropdown-menu>li>button { 814 background: #fff; 815 font-size: 16px; 816 padding: 15px 20px 817 } 818 819 .dropdown .dropdown-menu>li>a.hasIcon, 820 .dropdown .dropdown-menu>li>button.hasIcon { 821 padding-left: 50px 822 } 823 824 .dropdown .dropdown-menu>li>a svg, 825 .dropdown .dropdown-menu>li>button svg { 826 margin: 2px 0 0 -28px; 827 width: 18px; 828 height: 18px; 829 fill: @ini_text_alt; 830 } 831 832 .dropdown .dropdown-menu>li>a:hover, 833 .dropdown .dropdown-menu>li>button:hover { 834 background: #e7edf3 835 } 836 837 .dropdown .dropdown-menu>.active>a, 838 .dropdown .dropdown-menu>.active>button, 839 .dropdown .dropdown-menu>.active>a:hover, 840 .dropdown .dropdown-menu>.active>button:hover { 841 background: #e7672e !important; 842 color: #fff !important 843 } 844 845 .open.dropdown .dropdown-menu { 846 top: auto !important; 847 -webkit-transform: none; 848 transform: none !important; 849 visibility: visible; 850 transition-delay: 0s; 851 will-change: auto !important; 852 } 853 854 .dropdown-separator { 855 margin: 0 856 } 857 858 .dropdown-backdrop { 859 background: rgba(60, 86, 117, .9); 860 opacity: 0; 861 -webkit-transition: opacity .3s; 862 -o-transition: opacity .3s; 863 transition: opacity .3s; 864 -webkit-transform: translate3d(0, 0, 0); 865 transform: translate3d(0, 0, 0) 866 } 867 868 .open .dropdown-backdrop { 869 opacity: 1 870 } 871} 872 873.IndexPage-toolbar { 874 margin-bottom: 15px 875} 876 877.IndexPage-toolbar-view, 878.IndexPage-toolbar-action { 879 display: inline-block; 880 margin: 0; 881 list-style: none; 882 padding: 0 883} 884 885.IndexPage-toolbar-view>li, 886.IndexPage-toolbar-action>li { 887 display: inline-block 888} 889 890.IndexPage-toolbar-view>li { 891 margin-right: 5px 892} 893 894.IndexPage-toolbar-action { 895 float: right 896} 897 898.IndexPage-toolbar-action>li { 899 margin-left: 5px 900} 901 902.btn--icon { 903 width: 36px; 904 text-align: center; 905 padding: 8px 0 906} 907 908.btn--icon .btn-label, 909.btn--icon .btn-caret { 910 display: none 911} 912 913.btn--icon .btn-icon { 914 font-size: 16px; 915 vertical-align: -1px; 916 margin: 0 917} 918 919.btn-primary .btn-icon { 920 display: none; 921}