view/theme/frio/css/style.css

   1 /*
   2     Created on : 17.02.2016, 23:55:45
   3     Author     : rabuzarus and contributors
   4 */
   5
   6 body {
   7         padding-top: 110px;
   8         background-color: $background_color;
   9         background-image: url("$background_image");
  10         background-size: $background_size_img;
  11         background-repeat: $background_repeat;
  12         background-attachment: fixed;
  13         color: $font_color;
  14         font-family: "Open Sans", sans-serif;
  15 }
  16 body.minimal {
  17         padding: 15px;
  18 }
  19
  20 body a {
  21         color: $link_color;
  22         text-decoration: none;
  23 }
  24 /* Anchors incorrectly display with a fixed top menu. This global rule offsets all
  25  * anchors so that accessing them with a # link will actually scroll the associated
  26  * content in the visible part of the page.
  27  *
  28  * anchor.top should be the opposite of body.padding-top
  29  */
  30 body a[name]:not([href]) {
  31         display: block;
  32         position: relative;
  33         top: -110px;
  34         visibility: hidden;
  35 }
  36
  37 body a:hover,
  38 .btn-link:hover,
  39 body a:focus,
  40 .btn-link:focus,
  41 body a:active,
  42 .btn-link:active,
  43 body a.active,
  44 .btn-link.active {
  45         color: $link_hover_color;
  46         outline-color: $link_hover_color;
  47         text-decoration: none;
  48 }
  49
  50 .wall-item-container a:hover {
  51         text-decoration: underline;
  52 }
  53
  54 hr {
  55         margin-top: 10px;
  56         margin-bottom: 10px;
  57 }
  58 aside hr,
  59 section hr {
  60         border-color: rgba(238, 238, 238, $contentbg_transp);
  61 }
  62 iframe,
  63 img,
  64 video {
  65         max-width: 100%;
  66 }
  67 blockquote {
  68         font-size: inherit;
  69 }
  70 .clear {
  71         clear: both;
  72 }
  73 .no-padding {
  74         padding: 0;
  75 }
  76 .fakelink {
  77         cursor: pointer;
  78 }
  79 .btn.btn-link.fakelink {
  80         box-shadow: none;
  81         padding: 0 2px;
  82         vertical-align: baseline;
  83         outline-offset: 0;
  84 }
  85
  86 .hidden {
  87         display: none !important;
  88 }
  89 .minimize {
  90         max-height: 0px !important;
  91         overflow: hidden !important;
  92 }
  93
  94 /**
  95  * details tag
  96  */
  97 details {
  98         padding: .5em .5em 0;
  99 }
 100 details details {
 101         padding-left: .5em;
 102 }
 103 details summary {
 104         font-weight: bold;
 105         display: list-item;
 106 }
 107
 108 /**
 109  * clickable table rows
 110  */
 111 .table > tbody > td[role="button"] {
 112         cursor: pointer;
 113 }
 114
 115 /**
 116  * mobile aside
 117  */
 118 @media screen and (max-width: 990px) {
 119         body {
 120                 padding-top: 105px;
 121         }
 122         aside {
 123                 position: fixed !important;
 124                 top: 0 !important;
 125                 background-color: $background_color;
 126                 width: 100%;
 127                 max-width: 300px;
 128                 height: 100%;
 129                 padding-top: 100px;
 130                 z-index: 10;
 131                 overflow: auto;
 132                 padding-left: 6px !important;
 133                 padding-right: 6px !important;
 134         }
 135         aside::before {
 136                 content: " ";
 137                 position: fixed;
 138                 display: block;
 139                 top: 0;
 140                 left: 300px;
 141                 right: 0;
 142                 bottom: 0;
 143                 background-color: rgba(0, 0, 0, 0.4);
 144                 opacity: 0;
 145                 transition: opacity 0.5s;
 146         }
 147         aside.canvas-slid::before {
 148                 opacity: 1;
 149         }
 150
 151         /* prevent page scroll when the aside is opened **/
 152         body.aside-out {
 153                 overflow: hidden;
 154         }
 155 }
 156 /*
 157 * standard page elements
 158 */
 159
 160 #back-to-top {
 161         display: none;
 162         cursor: pointer;
 163         color: $nav_icon_color;
 164         position: fixed;
 165         z-index: 49;
 166         right: 20px;
 167         bottom: 20px;
 168         opacity: 1;
 169         font-size: 2.9em;
 170         padding: 0 12px 0 12px;
 171         border-radius: 10px;
 172         background-color: $nav_bg;
 173         line-height: 1.5;
 174 }
 175
 176 #item-delete-selected {
 177         cursor: pointer;
 178         color: white;
 179         position: fixed;
 180         z-index: 49;
 181         right: 20px;
 182         top: 100px;
 183         opacity: 0.8;
 184         font-size: 2.9em;
 185         padding: 0 12px 0 12px;
 186         border-radius: 10px;
 187         background-color: $link_color;
 188         line-height: 1.5;
 189         display: none;
 190 }
 191
 192 #toggle_mobile_link {
 193         display: none;
 194 }
 195
 196 /*
 197 * Overwriting and Extend Bootstrap
 198 */
 199 .label,
 200 .label a {
 201         color: #fff;
 202 }
 203
 204 /* Buttons */
 205
 206 .btn {
 207         float: none;
 208         border: none;
 209         -webkit-box-shadow: none;
 210         box-shadow: none;
 211         -moz-box-shadow: none;
 212         background-image: none;
 213         text-shadow: none;
 214         border-radius: 3px;
 215         margin-bottom: 0;
 216         margin-top: 2px;
 217         font-size: 14px;
 218         font-weight: 600;
 219         padding: 8px 16px;
 220         color: inherit;
 221 }
 222 .btn:focus {
 223         outline-color: $link_hover_color;
 224 }
 225
 226 .btn-default {
 227         background: #ededed;
 228         color: $font_color;
 229 }
 230 .btn-sm {
 231         padding: 4px 8px;
 232         font-size: 12px;
 233 }
 234 .btn-small {
 235         padding: 6px 10px;
 236         font-size: 12px;
 237         line-height: 1.5;
 238         border-radius: 3px;
 239 }
 240 .btn-xs {
 241         padding: 1px 5px;
 242         font-size: 12px;
 243 }
 244 .btn.btn-danger {
 245         color: #ffffff;
 246         background-color: #ae0f0f;
 247 }
 248
 249 .btn.btn-primary {
 250         background: $nav_bg;
 251         color: $btn_primary_color;
 252 }
 253 .btn.btn-primary:hover,
 254 .btn.btn-primary:focus {
 255         color: $btn_primary_color;
 256         background: $btn_primary_hover_color;
 257         text-decoration: none;
 258 }
 259 .btn.btn-primary:active,
 260 .btn.btn-primary.active {
 261         background: $btn_primary_hover_color;
 262 }
 263
 264 .btn-primary.active.focus,
 265 .btn-primary.active:focus,
 266 .btn-primary.active:hover,
 267 .btn-primary:active.focus,
 268 .btn-primary:active:focus,
 269 .btn-primary:active:hover,
 270 .open > .dropdown-toggle.btn-primary.focus,
 271 .open > .dropdown-toggle.btn-primary:focus,
 272 .open > .dropdown-toggle.btn-primary:hover,
 273 .btn-primary.active,
 274 .btn-primary:active,
 275 .open > .dropdown-toggle.btn-primary {
 276         background: $btn_primary_hover_color;
 277         border-color: none;
 278 }
 279
 280 .btn-link {
 281         border: 0;
 282         color: $link_color;
 283         padding-left: 0;
 284         padding-right: 0;
 285 }
 286 .btn-clear,
 287 .btn-clear:active {
 288         border: 0;
 289         background: transparent;
 290         box-shadow: none;
 291 }
 292 .btn-eventnav,
 293 btn-eventnav:hover {
 294         font-size: 16px;
 295         background: none;
 296         background-color: transparent;
 297         padding: 0 14px;
 298 }
 299 .btn-separator {
 300         border-left: 1px solid #777;
 301 }
 302
 303 .toggle.btn {
 304         border: 1px solid transparent;
 305 }
 306 .toggle.btn-xs {
 307         min-width: 45px;
 308 }
 309 .toggle.off {
 310         border-color: #ccc;
 311 }
 312 .toggle .toggle-off,
 313 .toggle .toggle-off:hover {
 314         color: #ccc;
 315         background-color: #eee;
 316         box-shadow: none;
 317 }
 318 .toggle.off .toggle-handle {
 319         background-color: #eee;
 320 }
 321 .toggle-handle {
 322         background-color: #fff;
 323         border-width: 0 1px;
 324         border: 1px solid transparent;
 325         border-color: #ccc;
 326 }
 327 .form-control-sm,
 328 .input-group-sm > .form-control,
 329 .input-group-sm > .input-group-addon,
 330 .input-group-sm > .input-group-btn > .btn {
 331         padding: 0.275rem 0.75rem;
 332         line-height: 1.5;
 333         height: 30px;
 334         border-radius: 0.2rem;
 335 }
 336 /* Bootstrap media class fix/hack
 337  * This is a test. I thought it does have some
 338  * issues in some corner cases. Maybe we remove
 339  * once more
 340  * https://github.com/twbs/bootstrap/issues/6053
 341  */
 342 .media,
 343 .media-body {
 344         overflow: visible;
 345 }
 346 .media .media-body {
 347         display: table-cell;
 348         width: 10000px;
 349         *width: auto;
 350         *zoom: 1;
 351 }
 352 .media:before,
 353 .media:after {
 354         content: "";
 355         display: table;
 356 }
 357 .media:after {
 358         clear: both;
 359 }
 360
 361 /* Badges */
 362 .badge {
 363         vertical-align: baseline;
 364         background-color: $link_color;
 365         border-radius: 4px;
 366         z-index: 1;
 367 }
 368 aside .badge {
 369         opacity: 0.7;
 370 }
 371 .group-widget-entry .badge,
 372 .sidebar-circle-li .badge {
 373         margin-top: 6px;
 374 }
 375
 376 /* disabled elements */
 377 .community-content-wrapper > h3,
 378 .network-content-wrapper > .section-title-wrapper {
 379         display: none;
 380 }
 381
 382 header #site-location {
 383         display: none;
 384 }
 385 header #banner {
 386         position: fixed;
 387         top: 0px;
 388         left: 49%;
 389         right: 49%;
 390         z-index: 1040;
 391         margin-top: 12.5px;
 392         text-align: center;
 393         text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
 394         font-size: 14px;
 395         font-family: tahoma, "Lucida Sans", sans;
 396         color: #fff;
 397         font-weight: bold;
 398         whitespace: nowrap;
 399         padding-left: 55px;
 400 }
 401 header #banner #logo-img,
 402 .navbar-brand #logo-img {
 403         -webkit-mask-image: url("img/friendica-25.png");
 404         background-color: $nav_icon_color;
 405         height: 25px;
 406         width: 25px;
 407         margin-left: auto;
 408         margin-right: auto;
 409 }
 410
 411 #navbrand-container {
 412         display: flex;
 413 }
 414 #navbrand-container #navbar-brand-text {
 415         padding-left: 5px;
 416         color: $nav_icon_color;
 417 }
 418
 419 /* offcanvas section */
 420
 421 /* Right offcanvas uses: #offcanvasUsermenu, .offcanvas-right-active
 422    .offcanvas-right and .offcanvas-right-overlay */
 423 .off-canvas {
 424         width: 300px;
 425         position: fixed;
 426         left: 0;
 427         top: 0;
 428         height: 100%;
 429         overflow-x: hidden;
 430         overflow-y: auto;
 431         background-color: #333;
 432         transform: translateX(-100%);
 433         transition: 0.4s ease-in-out;
 434         z-index: 1060;
 435 }
 436 #offcanvasUsermenu {
 437         width: 300px;
 438         position: fixed;
 439         right: 0px;
 440         top: 50px;
 441         height: 100%;
 442         overflow-x: hidden;
 443         overflow-y: auto;
 444         background-color: #333;
 445         transform: translateX(100%);
 446         transition: 0.4s ease-in-out;
 447         z-index: 1060;
 448 }
 449 .offcanvas-active .off-canvas {
 450         transform: translateX(0);
 451 }
 452 .offcanvas-right-active #offcanvasUsermenu {
 453         transform: translateX(0);
 454 }
 455 .navbar-fixed-top {
 456         transition: 0.4s ease-in-out;
 457         width: 100%;
 458 }
 459 .page-wrapper {
 460         padding-top: 50px;
 461         transition: 0.4s ease-in-out;
 462 }
 463 .offcanvas-active .page-wrapper,
 464 .offcanvas-active .navbar-fixed-top {
 465         transform: translateX(300px);
 466 }
 467
 468 .offcanvas-overlay {
 469         position: fixed;
 470         left: 0;
 471         top: 0;
 472         width: 100%;
 473         height: 100%;
 474         background-color: rgba(0, 0, 0, 0.5);
 475         z-index: 1050;
 476         visibility: hidden;
 477         opacity: 0;
 478         transition: 0.4s ease-in-out;
 479 }
 480 .offcanvas-right-overlay {
 481         position: fixed;
 482         right: 0;
 483         top: 50px;
 484         width: 100%;
 485         height: 100%;
 486         background-color: rgba(0, 0, 0, 0.5);
 487         z-index: 1050;
 488         visibility: hidden;
 489         opacity: 0;
 490         transition: 0.4s ease-in-out;
 491 }
 492 .offcanvas-active .offcanvas-overlay,
 493 .offcanvas-right-active .offcanvas-right-overlay {
 494         opacity: 1;
 495         visibility: visible;
 496 }
 497 /* offcanvas section ends */
 498
 499 /* NavBar */
 500 .topbar {
 501         position: fixed;
 502         display: block;
 503         height: 50px;
 504         width: 100%;
 505         padding-left: 15px;
 506         padding-right: 15px;
 507 }
 508 .topbar ul.nav {
 509         float: left;
 510 }
 511 .topbar ul.nav > li {
 512         float: left;
 513 }
 514 @media (min-width: 992px) {
 515         .topbar ul.nav > li > a,
 516         .topbar ul.nav > li > button {
 517                 padding-top: 15px;
 518                 padding-bottom: 15px;
 519                 line-height: 20px;
 520         }
 521 }
 522 @media (max-width: 991px) {
 523         .topbar ul.nav > li > a,
 524         .topbar ul.nav > li > button {
 525                 padding: 15px 10px;
 526         }
 527 }
 528 .topbar .dropdown-footer {
 529         margin: 10px;
 530 }
 531 .topbar .dropdown-header {
 532         font-size: 16px;
 533         padding: 3px 10px;
 534         margin-bottom: 10px;
 535         font-weight: 300;
 536         color: #bebebe;
 537 }
 538 .topbar .dropdown-header .dropdown-header-link {
 539         position: absolute;
 540         top: 2px;
 541         right: 10px;
 542 }
 543 .topbar .dropdown-header .dropdown-header-link a,
 544 .topbar .dropdown-header .dropdown-header-link .btn-link {
 545         color: $link_color !important;
 546         font-size: 12px;
 547         font-weight: 400;
 548 }
 549 .topbar .dropdown-header:hover {
 550         color: #bebebe;
 551 }
 552 #topbar-first,
 553 nav.navbar {
 554         background-color: $nav_bg;
 555         top: 0;
 556         z-index: 1030;
 557         color: $nav_icon_color;
 558 }
 559 @media screen and (max-width: 767px) {
 560         #topbar-first,
 561         nav.navbar {
 562                 padding: 0 2px;
 563         }
 564 }
 565
 566 #topbar-first .navbar-toggle {
 567         margin-top: 5px;
 568         margin-bottom: 0;
 569         margin-right: 0;
 570 }
 571 #topbar-first .nav > li > a,
 572 #topbar-first .nav > li > button,
 573 nav.navbar .nav > li > a,
 574 nav.navbar .nav > li > button {
 575         color: $nav_icon_color;
 576 }
 577 #topbar-first .nav > .open > a,
 578 #topbar-first .nav > .open > button {
 579         background-color: $nav_bg;
 580 }
 581 #topbar-first .nav > li > a:hover,
 582 #topbar-first .nav > li > a:focus,
 583 #topbar-first .nav > li > button:not(#main-menu):hover,
 584 #topbar-first .nav > li > button:not(#main-menu):focus,
 585 nav.navbar .nav > li > a:hover,
 586 nav.navbar .nav > li > a:focus,
 587 nav.navbar .nav > li > button:hover,
 588 nav.navbar .nav > li > button:focus {
 589         background-color: $nav_icon_hover_color;
 590 }
 591 #topbar-first .nav > .account {
 592         height: 50px;
 593         margin-left: 20px;
 594 }
 595 #topbar-first .nav > .account img {
 596         margin-left: 10px;
 597         height: 32px;
 598         width: 32px;
 599         border-radius: 3px;
 600 }
 601 #topbar-first .nav > .account .dropdown-toggle {
 602         padding: 8px 5px 0px;
 603         line-height: 1.1em;
 604         text-align: left;
 605 }
 606 #topbar-first .nav > .account .dropdown-toggle span {
 607         font-size: 12px;
 608 }
 609 #topbar-first .topbar-brand {
 610         position: relative;
 611         z-index: 2;
 612 }
 613 #topbar-first .topbar-actions {
 614         position: relative;
 615         z-index: 3;
 616 }
 617 #topbar-first .topbar-nav {
 618         left: 0;
 619         right: 0;
 620         text-align: center;
 621         z-index: 1;
 622 }
 623 #topbar-first .topbar-nav .nav-segment {
 624         position: relative;
 625         text-align: left;
 626 }
 627 #topbar-first .topbar-nav .nav-segment > a {
 628         display: inline-block;
 629         text-decoration: none;
 630         text-align: left;
 631 }
 632 #topbar-first .topbar-nav .nav-segment .nav-notification {
 633         position: absolute;
 634         top: 4px;
 635         right: -2px;
 636         background-color: #ff3535;
 637 }
 638 #topbar-first #intro-update {
 639         cursor: pointer;
 640 }
 641 #topbar-first .topbar-nav .arrow:after {
 642         position: absolute;
 643         display: block;
 644         width: 0;
 645         height: 0;
 646         border-color: transparent;
 647         border-style: solid;
 648         border-width: 10px;
 649         content: " ";
 650         top: 1px;
 651         margin-left: -10px;
 652         border-top-width: 0;
 653         border-bottom-color: #fff;
 654         z-index: 1035;
 655 }
 656 #topbar-first .topbar-nav .arrow {
 657         position: absolute;
 658         display: block;
 659         width: 0;
 660         height: 0;
 661         border-color: transparent;
 662         border-style: solid;
 663         z-index: 1001;
 664         border-width: 11px;
 665         left: 50%;
 666         margin-left: -18px;
 667         border-top-width: 0;
 668         border-bottom-color: rgba(0, 0, 0, 0.15);
 669         top: -19px;
 670         z-index: 1035;
 671 }
 672 #topbar-first .topbar-nav .dropdown-menu {
 673         width: 350px;
 674         margin-left: -148px;
 675 }
 676 #topbar-first .topbar-nav .dropdown-menu ul.media-list {
 677         max-height: 400px;
 678         overflow: auto;
 679 }
 680 #topbar-first .topbar-nav .dropdown-menu li {
 681         position: relative;
 682 }
 683 #topbar-first .topbar-nav .dropdown-menu li i.approval {
 684         position: absolute;
 685         left: 2px;
 686         top: 36px;
 687         font-size: 14px;
 688 }
 689 #topbar-first .topbar-nav .dropdown-menu li i.accepted {
 690         color: #5cb85c;
 691 }
 692 #topbar-first .topbar-nav .dropdown-menu li i.declined {
 693         color: #d9534f;
 694 }
 695 #topbar-first .topbar-nav .dropdown-menu li .media {
 696         position: relative;
 697 }
 698 #topbar-first .topbar-nav .dropdown-menu li .media .img-space {
 699         position: absolute;
 700         top: 14px;
 701         left: 14px;
 702 }
 703 #topbar-first .dropdown-footer {
 704         margin: 10px 10px 5px;
 705 }
 706 #topbar-first .caret {
 707         border-top-color: #bebebe;
 708 }
 709 #topbar-first .btn-group > a {
 710         background-color: #7f9baa;
 711 }
 712 #topbar-first .btn-enter {
 713         background-color: #7f9baa;
 714         margin: 6px 0;
 715 }
 716 #topbar-first .btn-enter:hover {
 717         background-color: #89a2b0;
 718 }
 719 .navbar-fixed-top ul.nav.navbar-nav.navbar-right {
 720         display: flex;
 721 }
 722
 723 #friendica-logo-mask {
 724         display: block;
 725 }
 726
 727 /* Notification Menu */
 728 #topbar-first #nav-notifications-menu {
 729         max-height: 400px;
 730 }
 731 #topbar-first #nav-notifications-menu a {
 732         color: $font_color_darker;
 733         padding: 0;
 734 }
 735 #topbar-first #nav-notifications-menu li.notif-entry {
 736         color: $font_color_darker;
 737         padding: 10px;
 738         border-bottom: 1px solid #eee;
 739         position: relative;
 740         border-left: 3px solid #fff;
 741         font-size: 12px;
 742 }
 743
 744 #topbar-first #nav-notifications-menu li.notification-unseen {
 745         border-left: 3px solid #e3eff3;
 746         background-color: #e3eff3;
 747 }
 748 #topbar-first #nav-notifications-menu li.notif-entry:hover {
 749         background-color: #f7f7f7;
 750         border-left: 3px solid $link_color;
 751 }
 752 #topbar-first #nav-notifications-menu li.placeholder {
 753         border-bottom: none;
 754 }
 755 #topbar-first #nav-notifications-menu .media .media-body .contactname {
 756         font-weight: bold;
 757 }
 758 #topbar-first #nav-notifications-menu .media .media-body .label {
 759         padding: 0.1em 0.5em;
 760 }
 761 #topbar-first #nav-notifications-menu li.notif-entry .media-object a img {
 762         height: 32px;
 763         width: 32px;
 764         border-radius: 3px;
 765 }
 766 /* The Top Nav Bar user menu */
 767 #topbar-first .account .user-title {
 768         text-align: right;
 769         margin-top: 7px;
 770 }
 771 #topbar-first .account .user-title span {
 772         color: $nav_icon_color;
 773 }
 774 #topbar-first .account #main-menu .nav-notification {
 775         position: absolute;
 776         top: 4px;
 777         right: -2px;
 778         background-color: #ff8989;
 779 }
 780 #offcanvasUsermenu {
 781         top: 50px;
 782         background-color: $background_color;
 783         border-top: 0;
 784         border-right: 0;
 785         border-bottom: 0;
 786         border-left-color: $nav_icon_color;
 787         box-shadow: -3px 0 3px -3px black;
 788 }
 789 #offcanvasUsermenu .nav-container {
 790         /* required to compensate for moving the container below the topnav bar */
 791         margin-bottom: 50px;
 792 }
 793 #offcanvasUsermenu li.divider {
 794         background-color: transparent;
 795         height: 3px;
 796 }
 797
 798 #offcanvasUsermenu ul,
 799 #offcanvasUsermenu ul li:first-child,
 800 #offcanvasUsermenu ul,
 801 #offcanvasUsermenu ul li:last-child {
 802         border-radius: 0;
 803 }
 804 #offcanvasUsermenu li,
 805 #offcanvasUsermenu a {
 806         background-color: $nav_bg;
 807         color: $nav_icon_color;
 808 }
 809
 810 #offcanvasUsermenu li.list-group-item {
 811         border-color: $background_color;
 812 }
 813 #offcanvasUsermenu a {
 814         display: block;
 815         margin: -10px -15px;
 816         padding: 10px 15px;
 817 }
 818 #offcanvasUsermenu li.nav-sitename {
 819         font-weight: bold;
 820 }
 821 #topbar-first .dropdown.account li#nav-sitename {
 822         padding-left: 20px;
 823         padding-right: 20px;
 824         font-weight: bold;
 825         word-break: break-word;
 826 }
 827 #topbar-first .dropdown.account li#nav-sitename:hover {
 828         border: none;
 829         background-color: $nav_bg;
 830 }
 831 /* Nav Search */
 832 .menu-popup {
 833         max-height: calc(100vh - 55px);
 834         overflow-y: auto;
 835 }
 836 #topbar-first #search-box .navbar-form {
 837         margin: 0px;
 838         padding: 12px 12px;
 839 }
 840 #search-mobile {
 841         position: fixed;
 842         top: 90px;
 843         left: 0;
 844         right: 0;
 845         z-index: 2;
 846
 847         background-color: $background_color;
 848
 849         /* fix bootstrap .well class not playing well with data-target slide animation */
 850         margin: 0;
 851         padding: 0;
 852         min-height: 0;
 853         border-radius: 0;
 854 }
 855 #search-mobile .navbar-form {
 856         margin: 0;
 857 }
 858 #topbar-first #search-box .form-search {
 859         height: 25px;
 860         font-size: 13px;
 861         background-position: 8px 4px;
 862 }
 863 #topbar-first #search-box .btn {
 864         font-size: 10px;
 865         padding: 1px 8px;
 866 }
 867
 868 /* second topbar */
 869 #topbar-second {
 870         height: 40px;
 871         top: 50px;
 872         background-color: #fff;
 873         z-index: 1029;
 874         background-image: none;
 875         -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
 876         -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
 877         box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
 878         border-bottom: 1px solid #d4d4d4;
 879 }
 880 #topbar-second > .container {
 881         height: 100%;
 882 }
 883 @media screen and (max-width: 767px) {
 884         #topbar-second > .container,
 885         #topbar-second #navbar-button {
 886                 padding: 0;
 887         }
 888 }
 889 #topbar-second .dropdown-menu {
 890         padding-top: 0;
 891         padding-bottom: 0;
 892 }
 893 #topbar-second .dropdown-menu .divider {
 894         margin: 0;
 895 }
 896 #topbar-second #space-menu-dropdown,
 897 #topbar-second #search-menu-dropdown {
 898         width: 400px;
 899 }
 900 #topbar-second #space-menu-dropdown .media-list,
 901 #topbar-second #search-menu-dropdown .media-list {
 902         max-height: 400px;
 903         overflow: auto;
 904 }
 905 .intro-actions {
 906         font-size: 2em;
 907         padding: 1em;
 908 }
 909 .intro-wrapper button.intro-action-link {
 910         padding-left: 10px;
 911         padding-right: 10px;
 912 }
 913 ul li .intro-wrapper button.intro-action-link {
 914         opacity: 0.7;
 915 }
 916 @media screen and (max-width: 768px) {
 917         #topbar-second #space-menu-dropdown .media-list,
 918         #topbar-second #search-menu-dropdown .media-list {
 919                 max-height: 200px;
 920         }
 921 }
 922 #topbar-second #space-menu-dropdown form,
 923 #topbar-second #search-menu-dropdown form {
 924         margin: 10px;
 925 }
 926 #topbar-second #space-menu-dropdown .search-reset,
 927 #topbar-second #search-menu-dropdown .search-reset {
 928         position: absolute;
 929         color: #999;
 930         margin: 10px;
 931         top: 8px;
 932         right: 10px;
 933         display: none;
 934         cursor: pointer;
 935 }
 936 #topbar-second #space-menu-dropdown li > ul > li > a > .media .media-body p {
 937         color: #bebebe;
 938         font-size: 11px;
 939         margin: 0;
 940         font-weight: 400;
 941 }
 942 #topbar-second #nav-short-info .heading {
 943         margin-left: -14px;
 944         overflow: hidden;
 945         white-space: nowrap;
 946         padding-right: 20px;
 947         text-overflow: ellipsis;
 948 }
 949 #topbar-second #tabmenu .heading {
 950         overflow: hidden;
 951         text-overflow: ellipsis;
 952         white-space: nowrap;
 953         color: $link_color;
 954         text-align: center;
 955 }
 956
 957 /* Dropdown Menus */
 958 .nav > li > .btn-link {
 959         position: relative;
 960         display: block;
 961         padding: 10px 15px;
 962 }
 963 .nav .open > .btn-link {
 964         background-color: #eee;
 965         border-color: #337ab7;
 966 }
 967 .nav-pills > li > .btn-link {
 968         border-radius: 4px;
 969 }
 970 .nav-pills .dropdown-menu,
 971 .nav-tabs .dropdown-menu,
 972 .account .dropdown-menu,
 973 .contact-photo-wrapper .dropdown-menu {
 974         background-color: $nav_bg;
 975         border: none;
 976 }
 977 .dropdown-menu .divider {
 978         margin: 5px 0;
 979 }
 980 .nav-pills .dropdown-menu li.divider,
 981 .nav-tabs .dropdown-menu li.divider,
 982 .account .dropdown-menu li.divider,
 983 .contact-photo-wrapper .dropdown-menu li.divider {
 984         background-color: $menu_background_hover_color;
 985         border-bottom: none;
 986 }
 987 .nav-pills .dropdown-menu li > a,
 988 .nav-tabs .dropdown-menu li > a,
 989 .account .dropdown-menu li > a,
 990 .contact-photo-wrapper .dropdown-menu li > a {
 991         border-left: 3px solid $nav_bg;
 992 }
 993 .nav-pills .dropdown-menu li a,
 994 .nav-pills .dropdown-menu li .btn-link,
 995 .nav-tabs .dropdown-menu li a,
 996 .nav-tabs .dropdown-menu li .btn-link,
 997 .account .dropdown-menu li a,
 998 .account .dropdown-menu li .btn-link,
 999 .contact-photo-wrapper .dropdown-menu li a,
1000 .contact-photo-wrapper .dropdown-menu li .btn-link {
1001         color: $nav_icon_color;
1002         font-weight: 400;
1003         width: 100%;
1004         text-align: left;
1005 }
1006 .nav-pills .dropdown-menu li a i,
1007 .nav-pills .dropdown-menu li .btn-link i,
1008 .nav-tabs .dropdown-menu li a i,
1009 .nav-tabs .dropdown-menu li .btn-link i,
1010 .account .dropdown-menu li a i,
1011 .account .dropdown-menu li .btn-link i,
1012 .contact-photo-wrapper .dropdown-menu li a i,
1013 .contact-photo-wrapper .dropdown-menu li .btn-link i {
1014         margin-right: 5px;
1015         font-size: 14px;
1016         display: inline-block;
1017         width: 14px;
1018 }
1019 .nav-pills .dropdown-menu li > a:hover,
1020 .nav-tabs .dropdown-menu li > a:hover,
1021 .account .dropdown-menu li > a:hover,
1022 .contact-photo-wrapper .dropdown-menu li > a:hover,
1023 .nav-pills .dropdown-menu li.selected a,
1024 .nav-tabs .dropdown-menu li.selected a,
1025 .account .dropdown-menu li.selected a,
1026 .contact-photo-wrapper .dropdown-menu li.selected a {
1027         border-left: 3px solid $link_color;
1028         color: #fff;
1029         background: $menu_background_hover_color;
1030 }
1031 #photo-edit-link-wrap {
1032         color: $font_color_darker;
1033         margin-bottom: 15px;
1034 }
1035
1036 #newmember-tab > a {
1037         font-size: 1.2em;
1038         font-weight: 800;
1039 }
1040
1041 /*
1042  * Aside
1043  *
1044  */
1045
1046 aside .widget,
1047 .nav-container .widget {
1048         border: none;
1049         color: $font_color;
1050         background-color: rgba(255, 255, 255, $contentbg_transp);
1051         box-shadow: 0 0 3px #dadada;
1052         -webkit-box-shadow: 0 0 3px #dadada;
1053         -moz-box-shadow: 0 0 3px #dadada;
1054         border-radius: 4px;
1055         position: relative;
1056         margin-bottom: 20px;
1057         padding: 10px;
1058         overflow: auto;
1059 }
1060 aside .widget h3,
1061 .nav-container .widget h3 {
1062         font-weight: bold;
1063         font-size: 16px;
1064         margin: 0;
1065         padding-bottom: 10px;
1066 }
1067
1068 aside .widget ul,
1069 .nav-container .widget ul {
1070         padding: 0px;
1071         margin-top: 0px;
1072         margin-bottom: 0px;
1073         margin-left: -10px;
1074         margin-right: -10px;
1075         list-style: none;
1076 }
1077
1078 aside .widget li .label {
1079         float: left;
1080 }
1081 aside .widget li,
1082 .nav-container .widget li {
1083         padding-left: 20px;
1084         padding-right: 10px;
1085 }
1086 aside .widget li:hover,
1087 aside .widget li.selected,
1088 .nav-container .widget li:hover {
1089         z-index: 2;
1090         color: $font_color_darker;
1091         background-color: rgba(247, 247, 247, $contentbg_transp);
1092         border-left: 3px solid $link_color !important;
1093         padding-left: 17px;
1094 }
1095 .side-link-link,
1096 aside .widget li a {
1097         display: block;
1098         padding-top: 6px;
1099         padding-bottom: 6px;
1100 }
1101 aside .widget li a,
1102 aside .widget li a:hover {
1103         color: $font_color_darker;
1104 }
1105
1106 /* group-list widget */
1107 aside > #datebrowse-sidebar li.posted-date-selector-months {
1108         margin-bottom: 10px;
1109         padding: 0;
1110         width: 100%;
1111 }
1112 aside > #datebrowse-sidebar li.posted-date-selector-months:hover {
1113         border-left: none !important;
1114         background-color: transparent !important;
1115 }
1116 aside > #datebrowse-sidebar .posted-date-selector-months > ul {
1117         margin: 0;
1118 }
1119 aside > #datebrowse-sidebar .posted-date-selector-months > ul > li {
1120         padding-left: 30px;
1121 }
1122 aside > #datebrowse-sidebar .posted-date-selector-months > ul > li:hover {
1123         padding-left: 27px;
1124 }
1125
1126 .group-list-img {
1127         -webkit-filter: grayscale(100%);
1128         filter: grayscale(100%);
1129         opacity: 0.5;
1130         filter: alpha(opacity=50); /* For IE8 and earlier */
1131         -webkit-transition: all 0.2s ease-in-out;
1132         -moz-transition: all 0.2s ease-in-out;
1133         -o-transition: all 0.2s ease-in-out;
1134         -ms-transition: all 0.2s ease-in-out;
1135         transition: all 0.2s ease-in-out;
1136 }
1137 #group-list-sidebar-ul li:hover a > .group-list-img {
1138         -webkit-filter: unset;
1139         filter: unset;
1140         opacity: unset;
1141 }
1142
1143 /* help page widget */
1144 aside > .help-aside-wrapper p strong:first-child {
1145         display: block;
1146         margin: 1em 0 0em;
1147 }
1148 aside > .help-aside-wrapper h1 {
1149         font-weight: bold;
1150         font-size: 16px;
1151         margin: 0;
1152         padding: 20px 0 10px;
1153 }
1154 aside > .help-aside-wrapper h2 {
1155         font-weight: bold;
1156         font-size: 14px;
1157 }
1158
1159 /* vcard / h-card */
1160 aside .vcard #profile-photo-wrapper {
1161         margin: 0;
1162 }
1163 aside .vcard img.u-photo,
1164 aside img.vcard-photo {
1165         width: 100%;
1166         border-radius: 3px;
1167 }
1168 aside .vcard .tool .action {
1169         position: absolute;
1170         top: 20px;
1171         right: 20px;
1172         font-size: 32px;
1173         width: 45px;
1174         height: 45px;
1175         background: rgba(0, 0, 0, 0.5);
1176         text-align: center;
1177         border-radius: 3px;
1178         opacity: 0;
1179         -webkit-transition: all 0.25s ease-in-out;
1180         -moz-transition: all 0.25s ease-in-out;
1181         -o-transition: all 0.25s ease-in-out;
1182         -ms-transition: all 0.25s ease-in-out;
1183         transition: all 0.25s ease-in-out;
1184 }
1185 aside .vcard .tool a {
1186         color: rgba(255, 255, 255, 0.85);
1187 }
1188 aside .vcard #profile-photo-wrapper:hover .tool .action {
1189         opacity: 1;
1190 }
1191 aside .vcard #profile-photo-wrapper.crop-preview {
1192         padding: 0;
1193 }
1194 aside .vcard .profile-header {
1195         padding: 5px 0px 20px 0px;
1196 }
1197 aside .vcard .fn {
1198         font-weight: bold;
1199         padding: 5px 0px 5px 0px;
1200 }
1201 aside .vcard .p-addr {
1202         font-style: italic;
1203         overflow: hidden;
1204         text-overflow: ellipsis;
1205         white-space: nowrap;
1206         padding-bottom: 2px;
1207 }
1208 aside .vcard .title {
1209         margin-top: 10px;
1210 }
1211 aside .vcard .detail {
1212         display: table;
1213         padding: 2px 0;
1214 }
1215 aside .xmpp, aside .matrix {
1216         display: table;
1217 }
1218 aside .vcard .icon {
1219         display: table-cell;
1220         padding-right: 10px;
1221         width: 30px;
1222 }
1223 #profile-extra-links {
1224         overflow: auto;
1225         margin-bottom: 10px;
1226 }
1227 aside .vcard #subscribe-feed-link-button,
1228 aside .vcard #dfrn-request-link-button,
1229 aside .vcard #wallmessage-link-button {
1230         width: 50%;
1231         margin: 0 0 0 -5px;
1232         float: left;
1233         padding: 0 5px;
1234 }
1235 aside .vcard #subscribe-feed-link,
1236 aside .vcard #dfrn-request-link,
1237 aside .vcard #wallmessage-link {
1238         width: 100%;
1239 }
1240 /* vcard-short-info */
1241 #vcard-short-info,
1242 #nav-short-info .contact-wrapper {
1243         margin-top: 2px;
1244         height: 40px;
1245         white-space: nowrap;
1246         overflow: hidden;
1247         padding-right: 20px;
1248         margin-left: -14px;
1249 }
1250 #nav-short-info .contact-photo-wrapper.media-left {
1251         float: left;
1252 }
1253 #vcard-short-photo-wrapper img,
1254 #nav-short-info .contact-wrapper img {
1255         height: 34px;
1256         width: 34px;
1257         border-radius: 3px;
1258 }
1259 #vcard-short-desc,
1260 #nav-short-info .contact-wrapper .media-body {
1261         display: block;
1262         height: 34px;
1263         width: 100%;
1264         text-overflow: ellipsis;
1265 }
1266 #vcard-short-desc > .media-heading,
1267 #vcard-short-desc > .vcard-short-addr,
1268 #nav-short-info .contact-wrapper .media-heading,
1269 #nav-short-info .contact-wrapper #contact-entry-url-network {
1270         text-overflow: ellipsis;
1271         overflow: hidden;
1272 }
1273 #vcard-short-desc > .media-heading,
1274 #nav-short-info .contact-wrapper .media-heading {
1275         margin-bottom: 1px;
1276         font-weight: bold;
1277 }
1278 #nav-short-info .contact-wrapper .media-heading a {
1279         color: $font_color_darker;
1280         font-size: 14px !important;
1281 }
1282 #vcard-short-desc > .vcard-short-addr,
1283 #nav-short-info .contact-wrapper #contact-entry-url-network {
1284         color: $font_color;
1285         font-size: 12px;
1286 }
1287 .network-content-wrapper > .generic-page-wrapper,
1288 #nav-short-info .contact-wrapper .contact-photo-overlay,
1289 #nav-short-info .contact-wrapper .contact-actions {
1290         display: none;
1291 }
1292
1293 aside #peoplefind-sidebar input,
1294 aside #follow-sidebar input {
1295         height: 30px;
1296         background-position: 10px 5px;
1297 }
1298 aside #peoplefind-sidebar label,
1299 aside #follow-sidebar label {
1300         font-weight: normal;
1301 }
1302 aside #peoplefind-sidebar .form-group-search .form-button-search,
1303 aside #follow-sidebar .form-group-search .form-button-search {
1304         padding: 2px 8px;
1305 }
1306
1307 div#sidebar-circle-header h3,
1308 div#sidebar-group-header h3 {
1309         float: left;
1310 }
1311
1312 div#sidebar-circle-list,
1313 div#sidebar-group-list {
1314         clear: both;
1315 }
1316
1317 .circle-new-form {
1318         clear: both;
1319 }
1320
1321 .circle-edit-tool,
1322 .group-new-tool {
1323         padding-top: 0;
1324         color: $font_color_darker;
1325 }
1326 .sidebar-widget-header .circle-edit-tool,
1327 .group-new-tool {
1328         margin-top: -5px;
1329 }
1330
1331 .faded-icon {
1332         color: $font_color_darker;
1333         opacity: 0.3;
1334         transition: all 0.1s ease-in-out;
1335 }
1336 .faded-icon:hover {
1337         color: $font_color_darker;
1338         opacity: 1;
1339 }
1340 .icon-padding {
1341         margin-left: 20px;
1342 }
1343
1344 aside .widget-action {
1345         padding: 5px 10px;
1346 }
1347 aside #circle-sidebar .sidebar-circle-li .circle-edit-tool.faded-icon:hover,
1348 aside #group-sidebar .group-new-tool.faded-icon:hover,
1349 aside #saved-search-list .saved-search-li .savedsearchdrop.faded-icon:hover,
1350 aside .widget.widget-action.faded-icon:hover {
1351         opacity: 0.8;
1352         transition: all 0.25s ease-in-out;
1353 }
1354 aside #circle-sidebar .sidebar-circle-li .circle-edit-tool.faded-icon:hover,
1355 aside #group-sidebar .group-new-tool.faded-icon:hover,
1356 aside #saved-search-list .saved-search-li .savedsearchdrop.faded-icon:hover,
1357 aside .widget .widget-action.faded-icon:hover {
1358         opacity: 1;
1359 }
1360 aside #circle-sidebar li .circle-checkbox {
1361         margin: 6px 0 0;
1362 }
1363 aside #circle-sidebar li .circle-edit-tool {
1364         padding-right: 10px;
1365 }
1366 aside #circle-sidebar li .circle-edit-tool:first-child {
1367         padding-right: 0px;
1368 }
1369
1370 /* contact block widget */
1371 .contact-block-content {
1372         clear: both;
1373         overflow: auto;
1374         height: auto;
1375 }
1376 .contact-block-div {
1377         float: left;
1378         margin: 0px 5px 5px 0px;
1379 }
1380 .contact-block-link {
1381 }
1382 .contact-block-img {
1383         height: 75px;
1384         width: 75px;
1385         border-radius: 4px;
1386 }
1387
1388 /* Tag cloud widget */
1389 .tagblock.widget > .tag-cloud {
1390         text-align: center;
1391 }
1392 /* Section */
1393 section ul.tabs {
1394         display: none !important;
1395 }
1396
1397 /* Jot */
1398 section #jotOpen {
1399         display: none;
1400 }
1401 #jotOpen {
1402         margin-top: 3px;
1403         float: right;
1404 }
1405 #jot-content {
1406         display: none;
1407 }
1408 .modal #jot-sections {
1409         max-height: calc(100vh - 22px);
1410 }
1411 @media (min-width: 768px) {
1412         .modal #jot-sections {
1413                 max-height: calc(100vh - 62px);
1414         }
1415 }
1416 #jot-modal #jot-modal-body {
1417         overflow: auto;
1418 }
1419 #jot-modal #jot-sections,
1420 #jot-modal #jot-modal-body,
1421 #jot-modal #profile-jot-form,
1422 #jot-modal #profile-jot-wrapper,
1423 #jot-modal #jot-text-wrap,
1424 #jot-modal #jot-preview-content,
1425 #jot-modal #tread-wrapper--1,
1426 #jot-modal #item-Q0,
1427 #jot-modal #profile-jot-acl-wrapper,
1428 #jot-modal #acl-wrapper {
1429         display: flex;
1430         flex: auto;
1431         flex-direction: column;
1432 }
1433 #jot-modal .modal-header a,
1434 #jot-modal .modal-header .btn-link,
1435 #profile-jot-submit-wrapper a,
1436 #profile-jot-submit-wrapper .btn-link {
1437         color: $font_color_darker;
1438 }
1439 #jot-modal .modal-header {
1440         border-bottom: none;
1441 }
1442 #jot-modal .modal-header .compose-link {
1443         float: right;
1444         margin-right: 20px;
1445 }
1446 #jot-title-wrap,
1447 #jot-category-wrap {
1448         margin-bottom: 5px;
1449 }
1450 #jot-text-wrap {
1451         margin-top: 20px;
1452 }
1453 #jot-text-wrap textarea {
1454         min-height: 100px;
1455         overflow-y: auto !important;
1456         overflow-y: overlay !important;
1457 }
1458 #jot-text-wrap .preview textarea {
1459         width: 100%;
1460 }
1461 #preview_profile-jot-text,
1462 .comment-edit-form .preview {
1463         position: relative;
1464         padding: 0px 10px;
1465         margin-top: -2px;
1466         border: 2px solid #ededed;
1467         border-top: none;
1468         box-shadow: none;
1469         border-radius: 0 0 4px 4px;
1470         background: #fff;
1471         color: $font_color_darker;
1472 }
1473 textarea#profile-jot-text:focus + #preview_profile-jot-text,
1474 textarea.comment-edit-text:focus + .comment-edit-form .preview {
1475         border: 2px solid #6fdbe8;
1476         border-top: none;
1477 }
1478 .preview hr.previewseparator {
1479         margin-top: 0px;
1480         border-color: #d2d2d2;
1481 }
1482 #previewImgBtn_profile-jot-text,
1483 .closePreview {
1484         position: absolute;
1485         top: 15px;
1486 }
1487 .closePreview {
1488         right: 15px;
1489         z-index: 1;
1490 }
1491 .previewImgBtn {
1492         left: 15px;
1493 }
1494 .preview button.previewActionBtn {
1495         display: block;
1496         height: 25px;
1497         width: 25px;
1498         border-radius: 50%;
1499         color: #fff;
1500         border: 2px solid #fff;
1501         box-shadow: 0 0 3px gray;
1502         background: #777;
1503         text-align: center;
1504         line-height: 2px;
1505         text-decoration: none;
1506         padding: 0 0 1px 1px;
1507         opacity: 0.7;
1508 }
1509 .preview button.previewActionBtn:hover {
1510         opacity: 1;
1511 }
1512 .preview .closePreview button.previewActionBtn {
1513         font-size: 25px;
1514 }
1515 #previewInputTitle_profile-jot-text {
1516         width: 100%;
1517 }
1518 #profile-jot-wrapper button#profile-jot-submit {
1519         margin-top: 5px;
1520 }
1521 #profile-jot-wrapper #character-counter {
1522         padding: 10px 15px;
1523 }
1524 .modal .wall-item-container.preview {
1525         overflow-y: auto;
1526         overflow-y: overlay;
1527 }
1528 /* ACL */
1529 .fa.lock:before {
1530         font-family: ForkAwesome;
1531         content: "\f023";
1532 }
1533 .fa.unlock:before {
1534         font-family: ForkAwesome;
1535         content: "\f09c";
1536 }
1537
1538 #acl-wrapper label.panel-heading {
1539         display: block;
1540         margin-bottom: 0;
1541         cursor: pointer;
1542 }
1543
1544 /* Filebrowser */
1545 .fbrowser .breadcrumb {
1546         margin-bottom: 0px;
1547 }
1548 .fbrowser .path a:before {
1549         content: "";
1550         padding: 0;
1551 }
1552 .fbrowser .breadcrumb > li:last-of-type a {
1553         color: $font_color;
1554         pointer-events: none;
1555         cursor: default;
1556 }
1557 .fbrowser .folders {
1558         box-shadow: -1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
1559         padding-right: 1px;
1560 }
1561 .fbrowser .folders ul {
1562         padding: 0px;
1563         margin-left: -15px;
1564         margin-bottom: 0px;
1565         overflow-y: auto;
1566         min-width: 100px;
1567         max-height: calc(100vh - 210px);
1568         line-height: 1.3;
1569 }
1570 @media (min-width: 768px) {
1571         .fbrowser .folders ul {
1572                 max-height: calc(100vh - 255px);
1573         }
1574 }
1575 .fbrowser .folders li {
1576         padding-left: 20px;
1577         padding-right: 10px;
1578         padding-top: 3px;
1579         padding-bottom: 3px;
1580 }
1581 .fbrowser .folders li:hover {
1582         z-index: 2;
1583         color: $font_color_darker;
1584         background-color: rgba(247, 247, 247, $contentbg_transp);
1585         border-left: 3px solid $link_color;
1586         padding-left: 17px;
1587 }
1588 .fbrowser .folders li a,
1589 .fbrowser .folders li a:hover {
1590         color: $font_color_darker;
1591         font-size: 13px;
1592 }
1593 .fbrowser .folders + .list {
1594         padding-left: 10px;
1595 }
1596 .fbrowser .fbrowser-content-container {
1597         overflow-y: auto;
1598         max-height: calc(100vh - 233px);
1599 }
1600 @media (min-width: 768px) {
1601         .fbrowser .fbrowser-content-container {
1602                 max-height: calc(100vh - 277px);
1603         }
1604 }
1605 .fbrowser.photo .photo-album-image-wrapper {
1606         box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2);
1607 }
1608 .fbrowser.photo .photo-album-image-wrapper .caption {
1609         pointer-events: none;
1610 }
1611 .fbrowser.photo .photo-album-image-wrapper .jg-caption {
1612         pointer-events: none;
1613 }
1614 .fbrowser .profile-rotator-wrapper {
1615         min-height: 200px;
1616 }
1617 .fbrowser .fa-spin {
1618         position: absolute;
1619         left: 45%;
1620         top: 40%;
1621         font-size: 48px;
1622         margin: 0px auto;
1623 }
1624
1625 /*
1626 /* Stream
1627 */
1628 .panel {
1629         border: none;
1630         background-color: rgba(255, 255, 255, $contentbg_transp);
1631         box-shadow: 0 0 2px #dadada;
1632         -webkit-box-shadow: 0 0 2px #dadada;
1633         -moz-box-shadow: 0 0 2px #dadada;
1634         border-radius: 4px;
1635         position: relative;
1636 }
1637 .panel.panel-inline {
1638         margin-left: -15px;
1639         margin-right: -15px;
1640         margin-top: 15px;
1641         padding: 15px;
1642 }
1643 .panel .panel-body {
1644         word-wrap: break-word;
1645 }
1646 .tread-wrapper .media {
1647         overflow: visible;
1648         word-wrap: break-word;
1649 }
1650 aside .panel-body {
1651         padding: 0px;
1652 }
1653
1654 /* Thread hover effects */
1655 .desktop-view .wall-item-container .wall-item-content a,
1656 .desktop-view .wall-item-name,
1657 .desktop-view .wall-item-container .fakelink,
1658 .desktop-view .toplevel_item .fakelink,
1659 .desktop-view .toplevel_item .wall-item-container .wall-item-responses a {
1660         color: $font_color;
1661         -webkit-transition: all 0.25s ease-in-out;
1662         -moz-transition: all 0.25s ease-in-out;
1663         -o-transition: all 0.25s ease-in-out;
1664         -ms-transition: all 0.25s ease-in-out;
1665         transition: all 0.25s ease-in-out;
1666 }
1667
1668 .toplevel_item:hover .fakelink,
1669 .wall-item-container:hover .fakelink,
1670 .toplevel_item:hover .wall-item-container:hover .wall-item-responses a,
1671 .toplevel_item:hover .wall-item-content a,
1672 .toplevel_item:hover .wall-item-name,
1673 .wall-item-container:hover .wall-item-content a,
1674 .wall-item-container:hover .wall-item-name,
1675 .wall-item-container:hover .wall-item-location a {
1676         color: $link_color;
1677         -webkit-transition: all 0.25s ease-in-out;
1678         -moz-transition: all 0.25s ease-in-out;
1679         -o-transition: all 0.25s ease-in-out;
1680         -ms-transition: all 0.25s ease-in-out;
1681         transition: all 0.25s ease-in-out;
1682 }
1683
1684 /* wall items */
1685 .wall-item-container {
1686         border-top: 1px solid rgba(255, 255, 255, 0.8);
1687 }
1688
1689 .wall-item-container.panel-body {
1690         padding: 0;
1691         border-top: none;
1692 }
1693
1694 .comment-edit-preview .wall-item-container.panel-body.preview {
1695         margin-top: 4px;
1696 }
1697 .comment-edit-preview .panel {
1698         margin-bottom: 0;
1699 }
1700
1701 .wall-item-container .media {
1702         margin-top: 0;
1703         padding: 10px;
1704         background-color: rgba(0, 0, 0, 0.03);
1705 }
1706
1707 /* wall items contact photo */
1708 .contact-photo {
1709         height: 48px;
1710         width: 48px;
1711         border-radius: 3px;
1712         /*maybe some adional stuff is needed for the different screen sizes */
1713 }
1714 .contact-photo-image-wrapper {
1715         width: 100%;
1716         height: 100%;
1717         overflow: hidden;
1718         position: relative;
1719         text-align: center;
1720 }
1721 .contact-photo-overlay {
1722         width: 100%;
1723         height: 100%;
1724         position: absolute;
1725         overflow: hidden;
1726         top: 0;
1727         left: 0;
1728         border-radius: 3px;
1729         background: rgba(0, 0, 0, 0.5);
1730         text-align: center;
1731         opacity: 0;
1732         -webkit-transition: opacity 0.25s ease;
1733         -moz-transition: opacity 0.25s ease;
1734 }
1735 .contact-photo-overlay:hover {
1736         opacity: 1;
1737 }
1738 .contact-photo-overlay-content {
1739         font-size: 26px;
1740         text-shadow: 1px 1px 1px #ccc;
1741         color: rgba(255, 255, 255, 0.85);
1742         height: 100%;
1743         vertical-align: bottom;
1744 }
1745 .contact-photo-xs {
1746         height: 38px;
1747         width: 38px;
1748         border-radius: 3px;
1749 }
1750 .wwto .contact-photo {
1751         width: auto;
1752         height: 25px;
1753         font-size: 8.8px;
1754         border-radius: 2px;
1755         position: absolute;
1756         top: 28px;
1757         left: 28px;
1758         display: inline-block;
1759 }
1760
1761 /* wall items action dropdown menu */
1762 .media .contact-info {
1763         position: relative;
1764 }
1765
1766 /* Workaround for Firefox where the post heading covers the avatar, preventing hovercard interaction,
1767  48px is the width of the avatar image and should be adjusted accordingly if it ever changes. */
1768 .media .dropdown.pull-left + .contact-info {
1769         margin-left: 48px;
1770 }
1771
1772 .preferences {
1773         position: absolute;
1774         right: 0;
1775         top: 0;
1776 }
1777 .shared_header {
1778         margin-left: 0px;
1779         margin-top: 0px;
1780         padding-top: 0px;
1781         margin-bottom: 10px;
1782         border-top: none;
1783         color: inherit;
1784 }
1785 .preferences .plink {
1786         margin-left: 5px;
1787 }
1788
1789 blockquote.shared_content {
1790         padding: 0px;
1791         margin-inline-start: 0px;
1792         color: inherit;
1793 }
1794
1795 .wall-item-network {
1796         font-size: 13px;
1797 }
1798
1799 /* wall items contact info */
1800 .media .media-body h4.media-heading {
1801         font-size: 14px;
1802         font-weight: 500;
1803         color: $font_color_darker;
1804 }
1805 .media .contact-info-comment {
1806         display: table-cell;
1807 }
1808 .media .contact-info-xs h5,
1809 .media .contact-info-comment {
1810         margin: 0 0 5px;
1811 }
1812 .media-heading {
1813         margin: 0px;
1814 }
1815 .wall-item-name,
1816 .shared-author {
1817         font-size: 15px;
1818         font-weight: bold;
1819 }
1820 .wall-item-name.xs {
1821         font-weight: 700;
1822         font-size: 14px;
1823 }
1824
1825 /* Contact avatar click card */
1826 .userinfo.click-card {
1827         position: relative;
1828 }
1829
1830 .userinfo.click-card > *:hover:after {
1831         content: "⌄";
1832         color: #bebebe;
1833         font-size: 1em;
1834         font-weight: bold;
1835         background-color: #ffffff;
1836         text-align: center;
1837         line-height: 40%;
1838         position: absolute;
1839         top: 0;
1840         left: 0;
1841         width: 33%;
1842         height: 33%;
1843         opacity: 0.8;
1844         border-radius: 0 0 40% 0;
1845 }
1846
1847 /* The lock symbol popup */
1848 #panel {
1849         position: absolute;
1850         list-style: none;
1851         background-color: $nav_bg;
1852         border: none;
1853         border-radius: 3px;
1854         float: left;
1855         min-width: 160px;
1856         max-width: 220px;
1857         padding: 10px;
1858         margin: 2px 0 0;
1859         font-size: 14px;
1860         text-align: left;
1861         color: $nav_icon_color;
1862         z-index: 1000;
1863 }
1864
1865 /* Space between content and head */
1866 .wall-spacer {
1867         height: 10px;
1868 }
1869
1870 /* wall items content */
1871 .wall-item-content {
1872         word-break: break-word;
1873 }
1874 .wall-item-content img {
1875         object-fit: contain;
1876 }
1877 .wall-item-body > img,
1878 .wall-item-body > a > img {
1879         border-radius: 3px;
1880 }
1881 .wall-item-body .body-attach > a {
1882         color: $font_color_darker;
1883         display: inline-block;
1884 }
1885 .wall-item-body .body-attach > a div {
1886         color: $font_color_darker;
1887         width: 20px;
1888 }
1889
1890 /* wall-item content elements */
1891 .shared-wrapper {
1892         position: relative;
1893         margin-top: 10px;
1894         margin-bottom: 0;
1895 }
1896 .vevent {
1897         padding: 10px;
1898         box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.1) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
1899 }
1900 @media screen and (max-width: 767px) {
1901         .vevent {
1902                 margin-left: 0px;
1903                 margin-right: 0px;
1904         }
1905         .shared-wrapper {
1906                 margin: 5px -10px 0;
1907         }
1908 }
1909 .vevent:hover {
1910         box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
1911 }
1912 code > .hl-main {
1913         padding: 10px 10px 1px 0;
1914 }
1915 .hl-main ol {
1916         line-height: 1.7;
1917 }
1918 .type-link img.attachment-image {
1919         width: 100%;
1920 }
1921 .type-link blockquote,
1922 .type-video blockquote {
1923         margin: 0;
1924         padding: 10px 0;
1925 }
1926 .oembed.video .embed_video > div::before {
1927         font-family: ForkAwesome;
1928         font-weight: normal;
1929         font-style: normal;
1930         display: inline-block;
1931         text-decoration: inherit;
1932         vertical-align: top;
1933         font-size: 3em;
1934         content: "\f01d";
1935         color: #fff;
1936         bottom: 0px;
1937         right: 10px;
1938         position: absolute;
1939 }
1940 .oembed.video .embed_video > div {
1941         background-color: rgba(0, 0, 0, 0.2);
1942         -webkit-transition: all 0.25s ease-in-out;
1943         -moz-transition: all 0.25s ease-in-out;
1944         -o-transition: all 0.25s ease-in-out;
1945         -ms-transition: all 0.25s ease-in-out;
1946         transition: all 0.25s ease-in-out;
1947 }
1948 .oembed.video .embed_video > div:hover {
1949         background-color: rgba(0, 0, 0, 0);
1950 }
1951 .oembed.video .embed_video.active {
1952         margin: 1em 0;
1953 }
1954 .oembed.video .embed_video.active iframe {
1955         width: 100% !important;
1956 }
1957 .wall-item-tags,
1958 .itemedited {
1959         margin: 10px 0;
1960         font-size: 13px;
1961 }
1962 .wall-item-tags:empty {
1963         margin: 0;
1964 }
1965
1966 .wall-item-tags a {
1967         color: $font_color_darker;
1968 }
1969
1970 .wall-item-tags a:hover {
1971         text-decoration: none;
1972 }
1973 .wall-item-bottom .label,
1974 .wall-item-bottom .label a {
1975         color: #fff;
1976 }
1977 .wall-item-tags .category,
1978 .wall-item-tags .folder {
1979         margin-right: 3px;
1980 }
1981
1982 /* item social action buttons */
1983 .wall-item-actions {
1984         display: flex;
1985         margin: 0;
1986         justify-content: space-between;
1987 }
1988 .wall-item-actions .btn,
1989 .wall-item-actions a,
1990 .wall-item-actions button {
1991         color: $font_color_darker;
1992         background-color: transparent;
1993         padding-left: 5px;
1994         padding-right: 5px;
1995 }
1996 .wall-item-actions button:disabled,
1997 button[disabled] {
1998         color: $font_color_lighter;
1999 }
2000 .wall-item-actions .active {
2001         font-weight: bold;
2002         color: $link_color;
2003         box-shadow: none;
2004 }
2005 .wall-item-actions-left {
2006         display: table-cell;
2007         vertical-align: middle;
2008 }
2009 .wall-item-actions-right {
2010         display: flex;
2011 }
2012 .wall-item-actions-items {
2013         flex-grow: 1;
2014 }
2015 .wall-item-actions-row {
2016         display: flex;
2017 }
2018 .wall-item-actions-row .btn {
2019         width: 100%;
2020 }
2021 .wall-item-actions-row > * {
2022         flex: 1 1 0;
2023 }
2024 .wall-item-actions .checkbox {
2025         margin: 0 0 0 15px;
2026 }
2027 @media screen and (max-width: 767px) {
2028         .wall-item-actions .btn,
2029         .wall-item-actions a,
2030         .wall-item-actions button {
2031                 padding-right: 0;
2032                 padding-left: 0;
2033         }
2034         .wall-item-actions .checkbox {
2035                 margin-top: 8px;
2036                 flex: 0 1 auto;
2037         }
2038         .wall-item-actions .like-rotator {
2039                 position: absolute;
2040                 top: 8px;
2041                 right: 0;
2042         }
2043 }
2044 .wall-item-actions button:hover {
2045         text-decoration: underline;
2046 }
2047 .wall-item-actions .separator {
2048         margin: 0 0.3em;
2049 }
2050 .wall-item-responses {
2051         margin-top: .3em;
2052 }
2053 .wall-item-responses > div > p {
2054         margin: 0;
2055 }
2056 .btn-group-event {
2057         display: flex;
2058         flex-basis: auto;
2059 }
2060 /* wall item hover effects */
2061
2062 @media (min-width: 768px) {
2063         /* Tags and mentions */
2064         .wall-item-container .wall-item-bottom .wall-item-tags span.label {
2065                 filter: grayscale(0.5);
2066                 opacity: 0.8;
2067
2068                 -webkit-transition: all 0.25s ease-in-out;
2069                 -moz-transition: all 0.25s ease-in-out;
2070                 -o-transition: all 0.25s ease-in-out;
2071                 -ms-transition: all 0.25s ease-in-out;
2072                 transition: all 0.25s ease-in-out;
2073         }
2074
2075         .wall-item-container:hover .wall-item-bottom .wall-item-tags span.label {
2076                 filter: grayscale(0);
2077                 opacity: 1;
2078
2079                 -webkit-transition: all 0.25s ease-in-out;
2080                 -moz-transition: all 0.25s ease-in-out;
2081                 -o-transition: all 0.25s ease-in-out;
2082                 -ms-transition: all 0.25s ease-in-out;
2083                 transition: all 0.25s ease-in-out;
2084         }
2085         /* Like/Comment/etc buttons */
2086         .wall-item-container .wall-item-links,
2087         .wall-item-container .wall-item-actions button > a {
2088                 opacity: 0.4;
2089
2090                 -webkit-transition: all 0.25s ease-in-out;
2091                 -moz-transition: all 0.25s ease-in-out;
2092                 -o-transition: all 0.25s ease-in-out;
2093                 -ms-transition: all 0.25s ease-in-out;
2094                 transition: all 0.25s ease-in-out;
2095         }
2096         .wall-item-container:hover .wall-item-links,
2097         .wall-item-container:hover .wall-item-actions button > a {
2098                 opacity: 1;
2099
2100                 -webkit-transition: all 0.25s ease-in-out;
2101                 -moz-transition: all 0.25s ease-in-out;
2102                 -o-transition: all 0.25s ease-in-out;
2103                 -ms-transition: all 0.25s ease-in-out;
2104                 transition: all 0.25s ease-in-out;
2105         }
2106         .wall-item-container .wall-item-body .body-attach > a:hover {
2107                 opacity: 1;
2108         }
2109 }
2110
2111 /*
2112 * Comments
2113 */
2114 wall-item-comment-wrapper.well {
2115         border: none;
2116         box-shadow: none;
2117         background-color: rgba(237, 237, 237, $contentbg_transp);
2118         background-image: none;
2119         margin-bottom: 1px;
2120         background-color: red;
2121 }
2122 wall-item-comment-wrapper.well-small {
2123         padding: 10px;
2124         border-radius: 3px;
2125 }
2126 wall-item-comment-wrapper.well hr {
2127         border-top: 1px solid #d9d9d9;
2128 }
2129 .wall-entry wall-item-comment-wrapper.well {
2130         margin-bottom: 0;
2131 }
2132 .comment-container {
2133         margin-bottom: 0px;
2134         border-top-left-radius: 3px;
2135         border-top-right-radius: 3px;
2136         border-bottom-right-radius: 0px;
2137         border-bottom-left-radius: 0px;
2138 }
2139 .comment .media {
2140         position: relative !important;
2141         margin-top: 0;
2142 }
2143 .hide-comments-outer {
2144         display: block;
2145         background-color: rgba(0, 0, 0, 0.03);
2146         padding: 0.3em 10px;
2147         width: 100%;
2148         border: none;
2149         text-align: left;
2150 }
2151
2152 /*
2153 * Comment Box
2154 */
2155
2156 .comment-fake-form,
2157 .wall-item-comment-wrapper {
2158         padding: 10px;
2159         border-top: 1px solid rgba(255, 255, 255, 0.8);
2160         background-color: rgba(0, 0, 0, 0.03);
2161         border-radius: 0 0 4px 4px;
2162         margin-bottom: 0;
2163 }
2164
2165 .comment-fake-form {
2166         border-color: #d9d9d9;
2167 }
2168 .comment-fake-form textarea {
2169         resize: none;
2170 }
2171
2172 .comment-container .wall-item-comment-wrapper {
2173         margin-top: 0.5em;
2174 }
2175
2176 .comment-edit-form textarea {
2177         resize: vertical;
2178 }
2179
2180 .comment-edit-submit-wrapper {
2181         text-align: right;
2182         margin-bottom: 0;
2183 }
2184
2185 .comment-icon-list {
2186         display: flex;
2187         justify-content: space-between;
2188 }
2189
2190 /* acpopup  + textcompletion*/
2191 .acpopup {
2192         background-color: #ffffff;
2193         border-radius: 4px;
2194         overflow: auto;
2195         z-index: 100000;
2196         box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
2197 }
2198 nav .acpopup {
2199         margin-left: -23px;
2200 }
2201 /** @todo: we should consider the possibility to overwrite bootstrap dropdowns
2202  at the beginning of this file to get rid of the !important */
2203 .textcomplete-item > a {
2204         color: $font_color_darker !important;
2205         padding: 5px 20px !important;
2206 }
2207 .textcomplete-item.active > a {
2208         background-color: rgb(247, 247, 247) !important;
2209         background-image: none !important;
2210         border-left: 3px solid $link_color;
2211         padding-left: 17px !important;
2212 }
2213 .textcomplete-item a .group {
2214         color: $link_color;
2215 }
2216 img.acpopup-img {
2217         border-radius: 4px;
2218 }
2219
2220 /* The wall-item thread levels */
2221 .wall-item-container.thread_level_3,
2222 .wall-item-container.thread_level_4,
2223 .wall-item-container.thread_level_5,
2224 .wall-item-container.thread_level_6,
2225 .wall-item-container.thread_level_7,
2226 .wall-item-container.thread_level_8,
2227 .wall-item-container.thread_level_9 {
2228         margin-left: 15px;
2229 }
2230
2231 /* Birthday and Event Reminders  */
2232 #birthday-notice,
2233 #birthday-wrapper,
2234 #event-notice,
2235 #event-wrapper {
2236         margin-bottom: 5px;
2237         padding: 10px;
2238         border: none;
2239         background-color: rgba(247, 247, 247, $contentbg_transp);
2240         box-shadow: 0 0 3px #dadada;
2241         -webkit-box-shadow: 0 0 3px #dadada;
2242         -moz-box-shadow: 0 0 3px #dadada;
2243         border-radius: 4px;
2244 }
2245
2246 /* Menubar Tabs */
2247 section > .tabbar-wrapper {
2248         /* The tabbar shouldn't' be visible inside
2249 the section element. Only after we have
2250 moved it to the nav through js */
2251         display: none !important;
2252 }
2253 .tabbar-wrapper__link {
2254         padding-right: 10px;
2255         padding-left: 10px;
2256 }
2257 #tabmenu,
2258 .tabbar-wrapper,
2259 .tabbar,
2260 .tabbar > li {
2261         height: 100%;
2262         padding: 0;
2263 }
2264 #tabmenu .search-heading {
2265         overflow: hidden;
2266         text-overflow: ellipsis;
2267         white-space: nowrap;
2268 }
2269 ul.tabs {
2270         list-style: none;
2271         height: 100%;
2272         padding: 0;
2273         margin: 0;
2274 }
2275 ul.tabs li {
2276         float: left;
2277         margin: 0;
2278         padding: 0;
2279         border-bottom: 0 solid $link_color;
2280         font-size: 13px;
2281         height: 102%;
2282         transition: all 0.15s ease;
2283 }
2284 ul.tabs li a {
2285         display: block;
2286         padding-top: 11px;
2287         padding-bottom: 11px;
2288 }
2289 ul.tabs li:hover,
2290 ul.tabs li.active {
2291         border-bottom-width: 4px;
2292 }
2293 .tabbar.visible-xs .tabs-extended {
2294         padding-top: 0;
2295 }
2296 #dropdownMenuTools-xs {
2297         padding: 9px 15px;
2298 }
2299 ul.tabbar ul.tabs-extended:hover li.dropdown {
2300         border-bottom: 0;
2301 }
2302
2303 ul.tabbar ul.tabs-extended li.active {
2304         width: 100%;
2305         border-bottom-width: 2px;
2306 }
2307 ul.tabbar ul.tabs-extended li.active a {
2308         background: none;
2309 }
2310 ul.dropdown-menu li:hover {
2311         border-bottom: 0;
2312 }
2313 .dropdown-menu li {
2314         display: block;
2315         width: 100%;
2316         box-sizing: border-box;
2317 }
2318 /* Dropdown Menu */
2319 .dropdown-menu li .btn-link,
2320 .dropdown-menu li a,
2321 .tabs .dropdown-menu li a {
2322         padding: 6px 20px;
2323         font-size: 14px;
2324 }
2325 .dropdown-menu li a,
2326 .dropdown-menu li .btn-link {
2327         color: $font_color_darker;
2328 }
2329 .dropdown-menu li > :hover,
2330 .dropdown-menu li > :visited,
2331 .dropdown-menu li > :focus {
2332         background: 0 0;
2333 }
2334
2335 .dropdown-menu li:first-child {
2336         margin-top: 3px;
2337 }
2338
2339 /* Notification badges */
2340 #mail-update-li.show {
2341         display: inline-block !important;
2342 }
2343
2344 /* Media Classes */
2345 p.wall-item-announce,
2346 .media .time,
2347 .media .shared-time,
2348 .media .delivery,
2349 .media .location,
2350 .media .location a {
2351         font-size: 11px;
2352         color: $font_color_darker;
2353 }
2354 .media-list > li {
2355         padding: 10px;
2356         border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2357         position: relative;
2358         border-left: 3px solid rgba(255, 255, 255, 0);
2359         font-size: 12px;
2360 }
2361 .media-list > li:hover,
2362 .media-list > li.selected,
2363 .media-list > li.active {
2364         border-left: 3px solid $link_color;
2365         background-color: rgba(247, 247, 247, $contentbg_transp);
2366 }
2367
2368 /* Forms */
2369 .form-control {
2370         box-shadow: none;
2371 }
2372 .form-control:focus {
2373         border: 2px solid $link_color;
2374         box-shadow: none;
2375 }
2376
2377 .radio label::before,
2378 .checkbox label::before {
2379         background-color: rgba(255, 255, 255, $contentbg_transp);
2380 }
2381 .radio label::after {
2382         background-color: $link_color;
2383 }
2384 .checkbox label::after {
2385         color: $link_color;
2386 }
2387
2388 .checkbox input[type="checkbox"]:focus + label::before,
2389 .radio input[type="radio"]:focus + label::before {
2390         outline-color: $link_hover_color;
2391 }
2392
2393 .help-block {
2394         color: $font_color_darker;
2395 }
2396
2397 input[type="range"].form-control {
2398         padding-left: 0;
2399         padding-right: 0;
2400 }
2401
2402 /* Search form */
2403 .form-control.form-search {
2404         border-radius: 30px;
2405         background-image: url(img/icon_search16x16.png);
2406         background-repeat: no-repeat;
2407         background-position: 10px 8px;
2408         padding-left: 34px;
2409 }
2410 .form-group-search {
2411         position: relative;
2412         width: 100%;
2413 }
2414
2415 .form-group-search .form-button-search {
2416         position: absolute;
2417         top: 4px;
2418         right: 4px;
2419         border-radius: 30px;
2420 }
2421 .search-input.form-control.form-search {
2422         width: 100%;
2423 }
2424 .search-heading {
2425         text-align: center;
2426         color: $link_color;
2427         font-size: 20px;
2428 }
2429 .search-content-wrapper > #search-header-wrapper {
2430         display: none;
2431 }
2432 .search-content-wrapper > .section-title-wrapper {
2433         display: none;
2434 }
2435 #navbar-button > #search-save {
2436         margin-top: 3px;
2437 }
2438 /* Section-Content-Wrapper */
2439 #search-header-wrapper {
2440         padding: 15px;
2441         padding-bottom: 20px;
2442         margin-bottom: 20px;
2443         border: none;
2444         background-color: rgba(255, 255, 255, $contentbg_transp);
2445         border-radius: 4px;
2446         position: relative;
2447         color: $font_color_darker;
2448         box-shadow: 0 0 3px #dadada;
2449         -webkit-box-shadow: 0 0 3px #dadada;
2450         -moz-box-shadow: 0 0 3px #dadada;
2451 }
2452
2453 /* *******
2454  * PAGES
2455  *********/
2456
2457 section > .generic-page-wrapper,
2458 .videos-content-wrapper,
2459 .suggest-content-wrapper,
2460 .help-content-wrapper,
2461 .match-content-wrapper,
2462 .dirfind-content-wrapper,
2463 .delegation-content-wrapper,
2464 .notes-content-wrapper,
2465 .message-content-wrapper,
2466 .apps-content-wrapper,
2467 #adminpage,
2468 .delegate-content-wrapper,
2469 .uexport-content-wrapper,
2470 .dfrn_request-content-wrapper,
2471 .friendica-content-wrapper,
2472 .credits-content-wrapper,
2473 .nocircle-content-wrapper,
2474 .profperm-content-wrapper,
2475 .invite-content-wrapper,
2476 .tos-content-wrapper,
2477 .fsuggest-content-wrapper {
2478         min-height: calc(100vh - 150px);
2479         padding: 15px;
2480         padding-bottom: 20px;
2481         margin-bottom: 20px;
2482         border: none;
2483         background-color: rgba(255, 255, 255, $contentbg_transp);
2484         border-radius: 4px;
2485         position: relative;
2486         color: $font_color_darker;
2487         box-shadow: 0 0 3px #dadada;
2488         -webkit-box-shadow: 0 0 3px #dadada;
2489         -moz-box-shadow: 0 0 3px #dadada;
2490 }
2491 #content:hover .page-action.faded-icon {
2492         opacity: 0.8;
2493         transition: all 0.25s ease-in-out;
2494 }
2495 #content .page-action.faded-icon:hover {
2496         opacity: 1;
2497 }
2498
2499 .section-title-wrapper {
2500         overflow: hidden;
2501 }
2502 /* Home and Login Page */
2503 body.mod-home nav.navbar .nav > li > a:hover {
2504         background-color: rgba(255, 255, 255, 0.2);
2505 }
2506 body.mod-home .navbar #nav-login,
2507 body.mod-login .navbar #nav-login {
2508         display: none;
2509 }
2510 /* Profile-page */
2511 #profile-content-standard,
2512 #profile-content-advanced {
2513         overflow: hidden;
2514 }
2515 #profile-menu {
2516         margin-top: 20px;
2517         margin-bottom: 20px;
2518 }
2519 .contact-block-div.group-list-profile-advanced {
2520         float: left;
2521 }
2522
2523 /* contacts page */
2524 ul.viewcontact_wrapper {
2525         margin-left: -15px;
2526         margin-right: -15px;
2527 }
2528 ul.viewcontact_wrapper > li {
2529         padding-left: 15px;
2530 }
2531 .contact-wrapper .contact-photo-wrapper button {
2532         padding: 0;
2533 }
2534 .contact-wrapper.media {
2535         overflow: visible;
2536         word-wrap: break-word;
2537         margin-top: 0;
2538 }
2539 /* bootstrap hack for .media */
2540 .contact-wrapper.media .media-body {
2541         display: table-cell;
2542         width: 10000px;
2543         *width: auto;
2544         *zoom: 1;
2545 }
2546 .contact-wrapper.media:before,
2547 .media:after {
2548         content: "";
2549         display: table;
2550 }
2551 .contact-wrapper.media:after {
2552         clear: both;
2553 }
2554 .contact-wrapper .contact-photo-image-wrapper img.contact-photo.xl {
2555         height: 80px;
2556         width: 80px;
2557 }
2558 .contact-wrapper .contact-photo-image-wrapper img.contact-photo-xs {
2559         height: 48px;
2560         width: 48px;
2561 }
2562 .contact-wrapper .contact-photo-overlay-content.xl {
2563         font-size: 48px;
2564 }
2565 .contact-wrapper .contact-photo-menu {
2566         top: auto;
2567 }
2568
2569 .contact-entry-desc {
2570         color: $font_color_darker;
2571 }
2572 .contact-entry-checkbox {
2573         margin-top: -20px;
2574 }
2575 .contact-wrapper .media-body .contact-entry-name h4.media-heading a {
2576         font-weight: bold !important;
2577         color: $link_color;
2578         font-size: 15px !important;
2579 }
2580 .contact-wrapper .contact-actions {
2581         display: flex;
2582         position: relative;
2583         margin: -8px -8px 0 0;
2584 }
2585 .contact-wrapper .contact-action-link,
2586 .contact-wrapper .contact-action-link:hover,
2587 .textcomplete-item .contact-wrapper .contact-action-link {
2588         color: $font_color_darker;
2589         border: 0;
2590 }
2591 .contact-wrapper .contact-action-link {
2592         background-color: transparent;
2593         opacity: 0.3;
2594         transition: all 0.25s ease-in-out;
2595 }
2596 ul li:hover .contact-wrapper .contact-action-link:hover {
2597         opacity: 1;
2598 }
2599 #contacts-search-wrapper,
2600 #directory-search-wrapper {
2601         padding: 10px 0;
2602 }
2603
2604 /* contact-edit */
2605 #contact-edit-actions {
2606         position: absolute;
2607 }
2608 #contact-edit-status-wrapper {
2609         border: none;
2610         background-color: rgba(225, 245, 254, $contentbg_transp);
2611         margin: 15px -15px;
2612 }
2613 #contact-edit-settings {
2614         display: block;
2615 }
2616
2617 /* directory page */
2618 #directory-search-heading {
2619         padding-top: 10px;
2620 }
2621
2622 /* circle edit page */
2623 .circle-actions {
2624         margin-top: 4px;
2625         margin-bottom: 10px;
2626         font-size: 30px;
2627 }
2628 .circle-actions button,
2629 .circle-actions a {
2630         font-size: 18px;
2631 }
2632
2633 .contact-circle-actions .fa-times-circle {
2634         color: #d00000;
2635 }
2636 .contact-circle-actions .fa-plus-circle {
2637         color: #008000;
2638 }
2639
2640 #circle-edit-wrapper {
2641         margin-top: 14px;
2642         display: none;
2643 }
2644 #circle-edit-header {
2645         display: block;
2646 }
2647 #circle-update-wrapper .contact-photo-overlay {
2648         display: none;
2649 }
2650 #circle-update-wrapper .viewcontact_wrapper .contact-circle-actions {
2651         height: 100%;
2652         display: flex;
2653         flex-direction: column;
2654         justify-content: center;
2655 }
2656 #circle-update-wrapper .viewcontact_wrapper .contact-circle-link {
2657         opacity: 0.8;
2658         font-size: 15px;
2659 }
2660 #circle-update-wrapper .viewcontact_wrapper .contact-action-link:hover {
2661         opacity: 1;
2662 }
2663 #circle-update-wrapper .shortmode {
2664         height: 53px;
2665         overflow: hidden;
2666 }
2667 #circle-update-wrapper .shortmode .contact-photo {
2668         height: 32px;
2669         width: 32px;
2670 }
2671 #circle-update-wrapper .shortmode .media {
2672         overflow: hidden;
2673 }
2674 #circle-update-wrapper .shortmode .contact-entry-desc {
2675         font-size: 12px !important;
2676 }
2677 #circle-update-wrapper .shortmode .contact-entry-desc h4.media-heading {
2678         margin: 0;
2679 }
2680 #circle-update-wrapper .shortmode .contact-entry-desc h4.media-heading a {
2681         font-size: 13px !important;
2682         white-space: nowrap;
2683 }
2684 #circle-update-wrapper .shortmode .contact-entry-desc .contact-entry-rel,
2685 #circle-update-wrapper .shortmode .contact-entry-desc .contact-entry-network {
2686         display: none;
2687 }
2688
2689 /* private mail */
2690 .message-content-wrapper > li {
2691         /* we need this overwriting because we have no template file
2692    for the general mail page /message
2693 */
2694         list-style-type: none;
2695 }
2696 .mail-thread {
2697         max-height: calc(100vh - 200px);
2698 }
2699 #mail-conversation {
2700         overflow-y: auto;
2701         max-height: calc(100vh - 400px);
2702         max-height: auto;
2703         margin-bottom: 0px;
2704         padding: 0 15px;
2705 }
2706 .mail-conv-wrapper .media .contact-photo-wrapper img {
2707         height: 48px;
2708         width: 48px;
2709 }
2710 .mail-thread #prvmail-to-label,
2711 .mail-thread #prvmail-subject-label {
2712         display: none;
2713 }
2714 .mail-thread #prvmail-message-label > label {
2715         display: none;
2716 }
2717 .mail-thread #prvmail-message-label textarea {
2718         max-height: 120px;
2719 }
2720 .mail-conv-wrapper {
2721         padding: 15px 0;
2722         border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2723 }
2724 #message-sidebar {
2725         height: calc(100vh - 150px);
2726 }
2727 #message-preview {
2728         height: calc(100% - 20px);
2729 }
2730 #message-preview ul {
2731         margin: 0px;
2732 }
2733 #message-preview .media-list li {
2734         padding: 0px 10px;
2735         border: none;
2736 }
2737 #message-preview .media-list li:hover {
2738         border-left: none !important;
2739 }
2740 #message-preview .media-list li a {
2741         color: $link_color;
2742 }
2743 .mail-list-outside-wrapper {
2744         padding: 5px 0;
2745         border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2746 }
2747 .mail-list-outside-wrapper .contact-photo-wrapper img {
2748         height: 48px;
2749         width: 48px;
2750 }
2751 #prvmail-end {
2752         clear: both;
2753 }
2754 #modal #prvmail-text-edit-bb .bb-img {
2755         display: none;
2756 }
2757
2758 /* photos */
2759 #photo-album-edit-name-label {
2760         width: 100%;
2761 }
2762 .photo-album-edit-name {
2763         width: 60%;
2764 }
2765
2766 .photo-album-actions {
2767         margin-bottom: 10px;
2768 }
2769 .photo-album-actions .photos-order-link {
2770         float: right;
2771 }
2772
2773 #photo-edit-submit-button {
2774         margin-top: 15px;
2775 }
2776
2777 /* Events page */
2778
2779 .fc .fc-month-view .fc-content .fc-title .item-desc:hover {
2780         color: $link_hover_color;
2781 }
2782 .fc .fc-list-item-title a {
2783         color: $link_color;
2784 }
2785 .fc .fc-list-item-title a[href]:hover {
2786         color: $link_hover_color;
2787         text-decoration: none;
2788 }
2789 .event-wrapper .event-owner {
2790         margin-bottom: 15px;
2791 }
2792 .event-wrapper .event-owner img {
2793         display: block;
2794 }
2795 .event-owner img {
2796         margin-right: 5px;
2797         height: 48px;
2798         width: 48;
2799         border-radius: 3px;
2800 }
2801 .event-wrapper .vevent {
2802         margin-left: 0;
2803         margin-right: 0;
2804         box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2805 }
2806 .event-wrapper .event-buttons {
2807         margin-top: 15px;
2808 }
2809 #event-form-wrapper {
2810         padding-top: 5px;
2811 }
2812 #event-edit-form-wrapper {
2813         padding-top: 15px;
2814 }
2815 #event-nav a {
2816         color: $font_color_darker;
2817 }
2818 #event-edit-form-wrapper #event-edit-time {
2819         padding: 10px 0;
2820 }
2821 .event-buttons .plink-event-link {
2822         margin-left: 20px;
2823 }
2824 .vevent .event-summary {
2825         font-size: 16px;
2826 }
2827 .vevent .event-description {
2828         padding: 10px 0;
2829 }
2830 .vevent .event-location .location {
2831         font-size: inherit;
2832         color: inherit;
2833 }
2834 .modal-body .vevent .event-summary {
2835         display: none;
2836 }
2837 #event-preview .vevent .event-summary {
2838         display: block;
2839 }
2840
2841 /* Event Cards */
2842 .event-card-details,
2843 .event-card-header {
2844         width: 100%;
2845 }
2846 .event-card-header,
2847 .event-card-left-date {
2848         float: left;
2849 }
2850 .vevent .event-card-header {
2851         display: table;
2852 }
2853 .event-card-left-date {
2854         width: 60px; /* Das muss wahrscheinlich unterschiedlich sein zwischen calendar und stream */
2855 }
2856 .event-card .event-date-wrapper > span {
2857         display: block;
2858         overflow: hidden;
2859         text-align: center;
2860         white-space: nowrap;
2861 }
2862 .event-card .event-date-wrapper .event-card-short-month {
2863         font-size: 13px;
2864         text-transform: uppercase;
2865 }
2866 .event-card .event-date-wrapper.medium .event-card-short-date {
2867         font-size: 24px;
2868         line-height: 28px;
2869         margin-top: 2px;
2870 }
2871 .event-card .event-card-content {
2872         width: 100%;
2873         padding: 0 5px 0 15px;
2874         box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2875         color: $font_color;
2876         position: relative;
2877 }
2878 .event-card .event-card-content .event-map-btn {
2879         position: absolute;
2880         right: 0;
2881         top: 0;
2882         line-height: 15px;
2883 }
2884 .event-card .event-card-title {
2885         font-size: 14px;
2886         color: $font_color_darker;
2887         line-height: 15px;
2888         font-weight: bold;
2889         margin: 0;
2890 }
2891 .event-card .event-card-location {
2892         margin-top: 10px;
2893         font-size: 13px;
2894 }
2895 .event-card .event-card-location br {
2896         content: " ";
2897 }
2898 .event-card .event-card-location br::after {
2899         content: " ";
2900 }
2901 .event-card-profile-name a {
2902         color: $link_color;
2903 }
2904 .event-card-profile-name a:hover {
2905         color: $link_hover_color;
2906 }
2907 .event-card .event-card-content .event-location-map {
2908         position: absolute;
2909         left: -9999px;
2910         top: -9999px;
2911 }
2912 .event-card .event-card-content .event-location-map .map {
2913         margin-top: 10px;
2914 }
2915 .event-card .description {
2916         margin-top: 10px;
2917         box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, 0.1) inset;
2918 }
2919 /* Photos Pages */
2920 #photo-photo {
2921         position: relative;
2922 }
2923 .photo-next-link,
2924 .photo-prev-link {
2925         height: 64px;
2926         margin-top: -32px;
2927         opacity: 0;
2928         position: absolute;
2929         top: 50%;
2930         transform: translateZ(0);
2931         transition: opacity 0.2s;
2932         width: 100px;
2933         z-index: 11;
2934         font-size: 64px;
2935         color: #fff;
2936         text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
2937 }
2938 .photo-next-link > i,
2939 .photo-prev-link > i {
2940         vertical-align: super;
2941 }
2942 .photo-next-link > i {
2943         float: right;
2944 }
2945 .photo-prev-link {
2946         left: 20px;
2947 }
2948 .photo-next-link {
2949         right: 20px;
2950 }
2951 #photo-photo:hover .photo-next-link,
2952 #photo-photo:hover .photo-prev-link {
2953         opacity: 0.4;
2954 }
2955 #photo-photo .photo-next-link:hover,
2956 #photo-photo .photo-prev-link:hover {
2957         opacity: 1;
2958         color: #fff;
2959 }
2960 .photo-comment-wrapper .comment {
2961         position: relative;
2962 }
2963 .photo-comment-wrapper .wall-item-content {
2964         color: $font_color_darker;
2965         font-size: 13px;
2966 }
2967 .photo-comment-wrapper .comment-wwedit-wrapper,
2968 .photo-comment-wrapper .wall-item-outside-wrapper.media:first-child {
2969         margin-top: 15px;
2970 }
2971
2972 /* Profiles Page */
2973 .profile-listing-table {
2974         display: table;
2975         width: 100%;
2976 }
2977 .profile-listing-row {
2978         display: table-row;
2979 }
2980 .profile-listing-cell {
2981         display: table-cell;
2982 }
2983 .profile-listing-photo {
2984         width: 48px;
2985         height: 48px;
2986         margin: 10px 0px;
2987 }
2988 #profile-listing-new-link-wrapper {
2989         margin-bottom: 20px;
2990 }
2991
2992 #profile-photo-upload-section {
2993         display: none;
2994         padding: 10px;
2995 }
2996 #profile-photo-upload-close {
2997         font-size: 14px;
2998 }
2999
3000 /* Settings */
3001 .section-subtitle-wrapper {
3002         padding: 1px 10px;
3003 }
3004 .accordion-toggle {
3005         width: 100%;
3006     text-align: left;
3007 }
3008 details.profile-jot-net[open] summary:before,
3009 .panel .section-subtitle-wrapper .accordion-toggle:before {
3010         font-family: ForkAwesome;
3011         content: "\f0d7";
3012         padding-right: 5px;
3013 }
3014 details.profile-jot-net summary:before,
3015 .panel .section-subtitle-wrapper .accordion-toggle.collapsed:before {
3016         font-family: ForkAwesome;
3017         content: "\f0da";
3018 }
3019 details.profile-jot-net summary:before {
3020         padding-right: 5px;
3021         padding-left: 3px;
3022 }
3023 details.profile-jot-net[open] summary:before {
3024         padding-right: 5px;
3025         padding-left: 0px;
3026 }
3027 #settings-nick-wrapper {
3028         margin-bottom: 20px;
3029 }
3030 .group {
3031         margin-left: 20px;
3032 }
3033
3034 /* Emulates Bootstrap display */
3035 .settings-block {
3036         margin: 0 0 5px;
3037         background-color: rgba(255, 255, 255, $contentbg_transp);
3038         border-radius: 4px;
3039         padding: 10px 15px;
3040         box-shadow: 0 0 3px #dadada;
3041         -webkit-box-shadow: 0 0 3px #dadada;
3042         -moz-box-shadow: 0 0 3px #dadada;
3043 }
3044
3045 .settings-block.fakelink,
3046 .settings-block > .fakelink {
3047         padding: 10px 25px;
3048         display: block;
3049 }
3050 .settings-block > .fakelink {
3051         margin: -10px -15px 10px -15px;
3052         border-radius: 4px 4px 0 0;
3053 }
3054
3055 .settings-block.fakelink:hover,
3056 .settings-block > .fakelink:hover {
3057         color: $link_hover_color;
3058 }
3059 .settings-block.fakelink > h3,
3060 .settings-block > .fakelink > h3 {
3061         margin: 0;
3062         padding: 0;
3063         color: $link_color;
3064         font-size: 18px;
3065 }
3066
3067 .section-subtitle-wrapper > h2 {
3068         font-size: 18px;
3069         margin-top: 10px;
3070         margin-bottom: 10px;
3071 }
3072 .section-subtitle-wrapper > h2 .accordion-toggle {
3073         margin-top: -10px;
3074         margin-bottom: -10px;
3075         padding-top: 10px;
3076         padding-bottom: 10px;
3077 }
3078
3079 .section-subtitle-wrapper > h3 {
3080         font-size: 16px;
3081         margin-top: 8px;
3082         margin-bottom: 8px;
3083 }
3084
3085 .fakelink > h3:before {
3086         padding-right: 10px;
3087 }
3088 .widget.fakelink > h3:before {
3089         font-family: ForkAwesome;
3090         content: "\f0da"; /* Right Plain Pointer */
3091 }
3092 .widget > .fakelink > h3:before,
3093 #sidebar-circle-header > .fakelink > h3:before,
3094 #sidebar-group-header > .fakelink > h3:before {
3095         font-family: ForkAwesome;
3096         content: "\f0d7"; /* Bottom Plain Pointer */
3097 }
3098
3099 h3.connector {
3100         line-height: 40px;
3101 }
3102
3103 /* Intro Notifications */
3104 ul.notif-network-list {
3105         margin-left: -15px;
3106         margin-right: -15px;
3107 }
3108 ul.notif-network-list > li {
3109         padding-left: 15px;
3110         padding-right: 15px;
3111 }
3112 .intro-wrapper.media {
3113         overflow: visible;
3114         word-wrap: break-word;
3115         margin-top: 0;
3116 }
3117 .intro-photo-wrapper img.intro-photo {
3118         height: 80px;
3119         width: 80px;
3120         border-radius: 4px;
3121 }
3122 .intro-actions {
3123         display: flex;
3124 }
3125 .intro-enty-name h4 {
3126         font-size: 15px !important;
3127 }
3128 .intro-wrapper button.intro-action-link {
3129         opacity: 0.1;
3130         transition: all 0.25s ease-in-out;
3131 }
3132 .intro-wrapper button.intro-action-link,
3133 .intro-wrapper button.intro-action-link:hover {
3134         padding-right: 5px;
3135         padding-left: 5px;
3136         color: $font_color_darker;
3137 }
3138 ul li:hover .intro-wrapper button.intro-action-link {
3139         opacity: 0.8;
3140         transition: all 0.25s ease-in-out;
3141 }
3142 ul li:hover .intro-wrapper button.intro-action-link:hover {
3143         opacity: 1;
3144 }
3145 .intro-action-buttons {
3146         margin-top: 15px;
3147         max-height: 0px;
3148         overflow: hidden;
3149         transition: max-height 0.1s ease-out;
3150 }
3151 ul.notif-network-list > li:hover .intro-action-buttons {
3152         max-height: 30px;
3153         transition: max-height 0.1s ease-in;
3154 }
3155 .intro-desc-label,
3156 .intro-url-label,
3157 .intro-network-label,
3158 .intro-location-label,
3159 .intro-keywords-label,
3160 .intro-about-label,
3161 .intro-knowyou-label,
3162 .intro-madeby-label {
3163         font-weight: bold;
3164 }
3165 .intro-contact-info.xs .intro-url-label,
3166 .intro-contact-info.xs .intro-network-label,
3167 .intro-contact-info.xs .intro-location-label,
3168 .intro-contact-info.xs .intro-keywords-label,
3169 .intro-contact-info.xs .intro-about-label,
3170 .intro-contact-info.xs .intro-knowyou-label {
3171         display: block;
3172         margin-top: 5px;
3173 }
3174
3175 /* Notifications Page */
3176 ul.notif-network-list li.unseen {
3177         background-color: #e3eff3;
3178 }
3179 .notif-item img.notif-image {
3180         height: 48px;
3181         width: 48px;
3182         border-radius: 4px;
3183 }
3184 .notif-item .notif-desc-wrapper {
3185         height: 48px;
3186 }
3187 .notif-item .notif-desc-wrapper a {
3188         height: 100%;
3189         display: block;
3190         color: $font_color_darker;
3191         font-size: 13px;
3192         font-weight: 600;
3193 }
3194
3195 /* Search Page */
3196
3197 /* This is a little bit hacky. Since the search page is used for different
3198 content types we can't apply the generic-page-wrapper class.
3199 So we apply the css of the generic-page-wrapper class to the ul element with some
3200 little modifications to emulate a standard page template */
3201 .search-content-wrapper > ul.viewcontact_wrapper {
3202         min-height: calc(100vh - 150px);
3203         padding-top: 15px;
3204         padding-bottom: 20px;
3205         margin: 0;
3206         margin-bottom: 20px;
3207         border: none;
3208         background-color: rgba(255, 255, 255, $contentbg_transp);
3209         border-radius: 4px;
3210         position: relative;
3211         color: $font_color_darker;
3212         box-shadow: 0 0 3px #dadada;
3213         -webkit-box-shadow: 0 0 3px #dadada;
3214         -moz-box-shadow: 0 0 3px #dadada;
3215 }
3216
3217 /* Help Page */
3218 section.help-content-wrapper h1 {
3219         padding-bottom: 0.3em;
3220         font-size: 1.8em;
3221         border-bottom: 1px solid #ddd;
3222 }
3223 section.help-content-wrapper h2 {
3224         padding-bottom: 0.3em;
3225         font-size: 1.5em;
3226         border-bottom: 1px solid #ddd;
3227 }
3228 section.help-content-wrapper h3 {
3229         font-size: 1.2em;
3230 }
3231 section.help-content-wrapper h4 {
3232         font-size: 1em;
3233 }
3234 section.help-content-wrapper h1,
3235 section.help-content-wrapper h2,
3236 section.help-content-wrapper h3,
3237 section.help-content-wrapper h4,
3238 section.help-content-wrapper h5,
3239 section.help-content-wrapper h6 {
3240         margin-top: 24px;
3241         margin-bottom: 16px;
3242         font-weight: 600;
3243         line-height: 1.25;
3244 }
3245 section.help-content-wrapper p {
3246         margin: 0.4em 0;
3247 }
3248 section.help-content-wrapper p,
3249 section.help-content-wrapper a,
3250 section.help-content-wrapper li {
3251         line-height: 1.6;
3252         font-size: 0.96em;
3253 }
3254
3255 /*Admin Page*/
3256 #adminpage #frio_background_image .image-select {
3257         display: none;
3258 }
3259 #adminpage #frio_background_image.input-group {
3260         display: block;
3261 }
3262 #admin-summary-wrapper {
3263         padding-top: 10px;
3264 }
3265 #adminpage ul#addonslist,
3266 li.addon {
3267         list-style: none;
3268 }
3269 #adminpage li .icon {
3270         display: inline-block;
3271         vertical-align: text-top;
3272         position: relative;
3273         padding-left: 5px;
3274 }
3275 #adminpage li .icon:before {
3276         content: "";
3277         display: inline-block;
3278         position: absolute;
3279         width: 17px;
3280         height: 17px;
3281         left: 0;
3282         margin-left: -20px;
3283         margin-top: 2px;
3284         border: 1px solid #cccccc;
3285         border-radius: 3px;
3286         background-color: $background_color;
3287         -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3288         -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3289         transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3290 }
3291 #adminpage li .icon.on:after {
3292         font-family: "ForkAwesome";
3293         content: "\f00c";
3294         display: inline-block;
3295         position: absolute;
3296         width: 16px;
3297         height: 16px;
3298         left: 0;
3299         top: 0;
3300         margin-left: -20px;
3301         margin-top: 2px;
3302         padding-left: 3px;
3303         padding-top: 1px;
3304         font-size: 11px;
3305         color: $link_color;
3306 }
3307 #adminpage .addon .desc {
3308         padding-left: 10px;
3309 }
3310 #admin-users #users tr.blocked {
3311         background-color: #f8efc0;
3312 }
3313 .adminpage .table-hover > tbody > tr:hover + tr.details {
3314         background-color: #f5f5f5;
3315 }
3316 .offset-anchor::before {
3317         display: block;
3318         content: " ";
3319         margin-top: -100px;
3320         height: 100px;
3321         visibility: hidden;
3322         pointer-events: none;
3323 }
3324
3325 #relocate-form {
3326         margin-top: 5px;
3327 }
3328
3329 /* Manage Page */
3330 #identity-selector-wrapper {
3331         width: auto;
3332         height: auto;
3333         margin-top: 20px;
3334 }
3335 #identity-selector-wrapper .identity-match-photo {
3336         width: auto;
3337         float: none;
3338 }
3339 #identity-selector-wrapper .identity-match-photo button {
3340         position: relative;
3341 }
3342 #identity-selector-wrapper .identity-match-photo .badge {
3343         position: absolute;
3344         top: -8px;
3345         right: -8px;
3346 }
3347 #identity-selector-wrapper .identity-match-name {
3348         text-align: center;
3349 }
3350 #identity-selector-wrapper .identity-match-details {
3351         width: auto;
3352         float: none;
3353 }
3354
3355 /* Register Page */
3356 #register-openid-wrapper,
3357 #register-name-wrapper,
3358 #register-invite-wrapper,
3359 #profile-publish-wrapper {
3360         margin-top: 20px;
3361 }
3362 #register-openid-end,
3363 #register-nickname-end {
3364         margin-top: 40px;
3365 }
3366
3367 /*
3368 * Overwriting for transparency and other colors
3369 */
3370 main .nav-tabs > li.active > a,
3371 main .nav-tabs > li.active > a:focus,
3372 main .nav-tabs > li.active > a:hover {
3373         background-color: rgba(255, 255, 255, $contentbg_transp);
3374 }
3375
3376 /*
3377  * Modal
3378  */
3379 .modal hr {
3380         border-color: #eee;
3381 }
3382
3383 @media (min-width: 768px) {
3384         .modal-dialog {
3385                 width: 650px;
3386         }
3387 }
3388
3389 /*
3390  * Framework overwrite
3391  */
3392
3393 /* textcomplete for contact filtering*/
3394 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list {
3395         position: relative !important;
3396         top: inherit !important;
3397         bottom: inherit !important;
3398         left: inherit !important;
3399         padding: 0;
3400         margin-left: -15px;
3401         margin-right: -15px;
3402         background-color: transparent;
3403         box-shadow: none;
3404         border: none;
3405 }
3406 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li {
3407         padding-left: 15px;
3408         border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
3409 }
3410 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li:first-child {
3411         display: none;
3412 }
3413 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list .textcomplete-item > a {
3414         padding: 0 !important;
3415         border-left: none;
3416         background-color: transparent !important;
3417 }
3418 /* this is a little hack for texcomplete contact filter
3419 There are for some reasons empty <a> tags. I don't know why */
3420 .textcomplete-item .contact-wrapper a {
3421         padding: 0;
3422 }
3423
3424 /* hovercard fix */
3425 body .tread-wrapper .hovercard a,
3426 body .tread-wrapper .hovercard a:hover {
3427         color: $link_color;
3428 }
3429 body .tread-wrapper .hovercard:hover .hover-card-content a {
3430         color: $link_color !important;
3431 }
3432
3433 /* Pagination improvements */
3434 .pagination {
3435         text-align: center;
3436         display: block;
3437 }
3438 .pagination > li > a,
3439 .pagination > li > span {
3440         color: $link_color;
3441         float: none;
3442 }
3443 .pagination > li > a:hover,
3444 .pagination > li > span:hover {
3445         color: $link_hover_color;
3446 }
3447 .pagination > .active > a,
3448 .pagination > .active > a:focus,
3449 .pagination > .active > a:hover,
3450 .pagination > .active > span,
3451 .pagination > .active > span:focus,
3452 .pagination > .active > span:hover {
3453         background-color: $link_color;
3454         border-color: $link_color;
3455         border-radius: 3px;
3456 }
3457 .pagination li.pager_n a {
3458         margin-left: 3px;
3459         border-radius: 3px;
3460 }
3461 .pagination .pager_prev a {
3462         margin-left: -5px;
3463         margin-right: 4px;
3464         border-top-right-radius: 3px;
3465         border-bottom-right-radius: 3px;
3466 }
3467 .pagination .pager_next a {
3468         margin-left: 4px;
3469         margin-right: -5px;
3470         border-top-left-radius: 3px;
3471         border-bottom-left-radius: 3px;
3472 }
3473 .pager .next > a,
3474 .pager .previous > a {
3475         float: none;
3476         border-radius: 3px;
3477 }
3478 .pagination .disabled > a,
3479 .pager .disabled > a {
3480         display: none;
3481 }
3482
3483 .pagination li > a,
3484 .pager li > a {
3485         background-color: rgba(255, 255, 255, $contentbg_transp);
3486 }
3487
3488 /*
3489  * some temporary workarounds until this will solved
3490  * elsewhere (e.g. new templates)
3491  */
3492 section .profile-match-wrapper {
3493         float: left;
3494 }
3495
3496 /**
3497  * Login page
3498  */
3499 #login-submit-wrapper {
3500         float: right;
3501 }
3502 #lost-password-link {
3503         flex-grow: 2;
3504 }
3505 #login-lost-password-link {
3506         margin-bottom: 10px;
3507         float: right;
3508 }
3509 #div_id_remember {
3510         float: left;
3511 }
3512 #id_password_wrapper {
3513         margin-bottom: unset;
3514 }
3515 #login_openid {
3516         clear: both;
3517 }
3518 #register-link {
3519         color: white;
3520         background: #8ad0a1;
3521         width: 100%;
3522 }
3523 #login-end {
3524         clear: both;
3525 }
3526
3527 .mod-home.is-not-singleuser,
3528 .mod-login {
3529         background-color: $login_bg_color;
3530         background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)), url($login_bg_image);
3531         background-size: cover;
3532         background-attachment: fixed;
3533         background-position: center;
3534         padding-top: 0;
3535 }
3536 .mod-home.is-not-singleuser nav.navbar,
3537 .mod-login nav.navbar {
3538         background-color: transparent;
3539         position: inherit;
3540 }
3541 .mod-home.is-not-singleuser #topbar-second,
3542 .mod-login #topbar-second {
3543         background-color: transparent;
3544         box-shadow: unset;
3545         border: 0;
3546 }
3547 .mod-home.is-not-singleuser .login-content,
3548 .mod-login .login-content {
3549         color: #eee;
3550         margin-top: 2.5%;
3551 }
3552
3553 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3554         margin-top: 4em;
3555 }
3556
3557 .mod-home.is-not-singleuser .login-form > #login-form label,
3558 .mod-login #content #login-form label {
3559         color: #eee;
3560 }
3561
3562 .mod-home.is-not-singleuser .login-panel-content,
3563 .mod-login .login-panel-content {
3564         background-color: rgba(255, 255, 255, 0.85);
3565 }
3566
3567 .qq-upload-button {
3568         background: $nav_bg !important;
3569         color: $btn_primary_color !important;
3570         float: none;
3571         border: none;
3572         -webkit-box-shadow: none;
3573         box-shadow: none;
3574         -moz-box-shadow: none;
3575         background-image: none;
3576         text-shadow: none;
3577         border-radius: 3px;
3578         margin-bottom: 0;
3579         font-size: 14px;
3580         font-weight: 600;
3581         padding: 8px 16px;
3582         color: inherit;
3583         width: 100% !important;
3584 }
3585
3586 .qq-upload-drop-area {
3587         background: white !important;
3588         float: none;
3589         border: none;
3590         -webkit-box-shadow: none;
3591         box-shadow: none;
3592         -moz-box-shadow: none;
3593         background-image: none;
3594         text-shadow: none;
3595         border-radius: 3px;
3596         margin-bottom: 0;
3597         font-size: 14px;
3598         font-weight: 600;
3599         padding: 8px 16px;
3600         color: inherit;
3601         width: 100% !important;
3602         display: block !important;
3603         position: relative !important;
3604         border: black 1px dashed !important;
3605         margin-bottom: 5px !important;
3606         margin-top: 15px !important;
3607 }
3608
3609 /**
3610  * The different views of js fullcalendar
3611  */
3612 #fc-header {
3613         margin-top: 20px;
3614         margin-bottom: 10px;
3615 }
3616 #fc-header-left,
3617 #fc-header-right,
3618 #event-calendar-title {
3619         display: inline-block;
3620 }
3621 #fc-title {
3622         margin: 0;
3623         padding-left: 20px;
3624 }
3625 #fc-header-right {
3626         margin-top: -4px;
3627 }
3628 #fc-header-right .dropdown > button {
3629         color: inherit;
3630 }
3631 #event-calendar-title {
3632         vertical-align: middle;
3633 }
3634 #event-calendar-views {
3635         padding: 6px 9px;
3636         font-size: 14px;
3637 }
3638 .fc .fc-toolbar {
3639         display: none;
3640 }
3641 .fc .fc-month-view td.fc-widget-content,
3642 .fc .fc-list-view,
3643 .fc .fc-list-view .fc-list-table td,
3644 .fc .fc-body td {
3645         border-style: none;
3646 }
3647 .fc td.fc-widget-header,
3648 .fc th.fc-widget-header {
3649         border-left: none;
3650         border-right: none;
3651         border-top: none;
3652 }
3653 .fc .fc-month-view td.fc-day {
3654         border-left: none;
3655         border-right: none;
3656         border-bottom: 1px solid;
3657         padding: 0 6px;
3658 }
3659 .fc .fc-day-grid-container .fc-row {
3660         border-bottom: 1px solid;
3661         border-color: #ddd;
3662 }
3663 .fc tr td.fc-today {
3664         border-style: none;
3665 }
3666 .fc .fc-month-view .fc-content .fc-title .item-desc {
3667         font-size: 11px;
3668 }
3669 .fc .fc-view-container {
3670         margin-top: 25px;
3671 }
3672 .fc .fc-list-view td {
3673         padding: 0;
3674 }
3675 #events-calendar.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
3676         float: left;
3677         font-size: 12px;
3678 }
3679 .fc .fc-event {
3680         background-color: #e3f2fd;
3681         border: 1px solid #bbdefb;
3682         color: $font_color_darker;
3683 }
3684 .fc .fc-month-view .fc-time,
3685 .fc .fc-listMonth-view .fc-list-item-time,
3686 .fc .fc-listMonth-view .fc-list-item-marker,
3687 .fc .fc-listMonth-view .fc-widget-header {
3688         display: none;
3689 }
3690 .fc .fc-listMonth-view .fc-list-item:hover td {
3691         background: transparent;
3692         cursor: pointer;
3693 }
3694 .fc .fc-listMonth-view .separator {
3695         margin-left: 30px;
3696         width: 60px;
3697 }
3698
3699 /**
3700  * The event-card
3701  */
3702 .event-card {
3703         width: auto;
3704 }
3705 .event-card .event-label,
3706 .event-card .location-label {
3707         font-weight: bold;
3708 }
3709 .popover.event-card .event-card-basic-content {
3710         margin-top: 0;
3711         padding: 9px;
3712         padding-left: 0px;
3713 }
3714 .event-card .event-hover-location .location {
3715         color: $font_color;
3716         font-size: 13px;
3717 }
3718
3719
3720 .generic-page-wrapper.contact-follow-wrapper {
3721         min-height: auto;
3722 }
3723
3724 /* Medium devices (desktops, 992px and up) */
3725 @media (min-width: 992px) {
3726         .mod-home.is-not-singleuser #content,
3727         .mod-login #content {
3728                 margin-top: 100px !important;
3729         }
3730
3731         .mod-home.is-not-singleuser .login-form > #login-form,
3732         .mod-home.is-not-singleuser .login-form > #login-extra-links,
3733         .mod-login #content #login-form {
3734                 background-color: #fff;
3735                 padding: 1em;
3736                 position: relative;
3737         }
3738         .mod-home.is-not-singleuser .login-form > #login-extra-links {
3739                 margin-top: unset;
3740                 background-color: white;
3741         }
3742
3743         .mod-home.is-not-singleuser .login-form > #login-form label,
3744         .mod-login #content #login-form label {
3745                 color: #444;
3746         }
3747
3748         .mod-home.is-not-singleuser .login-form::before,
3749         .mod-login #content #login-form::before {
3750                 display: block;
3751                 position: absolute;
3752                 content: " ";
3753                 background-color: rgba(255, 255, 255, 0.1);
3754                 width: 90%;
3755                 height: 110%;
3756                 top: -5%;
3757                 left: 5%;
3758                 z-index: -1;
3759         }
3760
3761         .mod-home.is-not-singleuser .login-form::after,
3762         .mod-login #content #login-form::after {
3763                 display: block;
3764                 position: absolute;
3765                 content: " ";
3766                 background-color: rgba(255, 255, 255, 0.2);
3767                 width: 80%;
3768                 height: 120%;
3769                 top: -10%;
3770                 left: 10%;
3771                 z-index: -1;
3772         }
3773 }
3774
3775 /* Mobile display */
3776 @media (max-width: 600px) {
3777         body {
3778                 padding-top: 95px;
3779         }
3780         body.minimal {
3781                 padding: 15px;
3782         }
3783
3784         #friendica-logo-mask {
3785                 display: none;
3786         }
3787
3788         .container {
3789                 padding-right: 0;
3790                 padding-left: 0;
3791         }
3792
3793         .panel {
3794                 border-radius: 0;
3795                 margin-bottom: 5px;
3796         }
3797
3798         .toplevel_item > .wall-item-container {
3799                 padding: 0;
3800         }
3801
3802         .wall-spacer {
3803                 height: 0px;
3804         }
3805
3806         .wall-item-actions {
3807                 margin-top: 10px;
3808         }
3809
3810         .media {
3811                 margin-top: 0;
3812         }
3813
3814         .generic-page-wrapper,
3815         .videos-content-wrapper,
3816         .suggest-content-wrapper,
3817         .help-content-wrapper,
3818         .match-content-wrapper,
3819         .dirfind-content-wrapper,
3820         .directory-content-wrapper,
3821         .delegation-content-wrapper,
3822         .notes-content-wrapper,
3823         .message-content-wrapper,
3824         .apps-content-wrapper,
3825         #adminpage,
3826         .delegate-content-wrapper,
3827         .uexport-content-wrapper,
3828         .dfrn_request-content-wrapper,
3829         .friendica-content-wrapper,
3830         .credits-content-wrapper,
3831         .nocircle-content-wrapper,
3832         .profperm-content-wrapper,
3833         .invite-content-wrapper,
3834         .tos-content-wrapper,
3835         .fsuggest-content-wrapper {
3836                 border-radius: 0;
3837                 padding: 10px;
3838         }
3839
3840         .row {
3841                 margin-right: 0;
3842         }
3843
3844         .col-lg-1,
3845         .col-lg-10,
3846         .col-lg-11,
3847         .col-lg-12,
3848         .col-lg-2,
3849         .col-lg-3,
3850         .col-lg-4,
3851         .col-lg-5,
3852         .col-lg-6,
3853         .col-lg-7,
3854         .col-lg-8,
3855         .col-lg-9,
3856         .col-md-1,
3857         .col-md-10,
3858         .col-md-11,
3859         .col-md-12,
3860         .col-md-2,
3861         .col-md-3,
3862         .col-md-4,
3863         .col-md-5,
3864         .col-md-6,
3865         .col-md-7,
3866         .col-md-8,
3867         .col-md-9,
3868         .col-sm-1,
3869         .col-sm-10,
3870         .col-sm-11,
3871         .col-sm-12,
3872         .col-sm-2,
3873         .col-sm-3,
3874         .col-sm-4,
3875         .col-sm-5,
3876         .col-sm-6,
3877         .col-sm-7,
3878         .col-sm-8,
3879         .col-sm-9,
3880         .col-xs-1,
3881         .col-xs-10,
3882         .col-xs-11,
3883         .col-xs-12,
3884         .col-xs-2,
3885         .col-xs-3,
3886         .col-xs-4,
3887         .col-xs-5,
3888         .col-xs-6,
3889         .col-xs-7,
3890         .col-xs-8,
3891         .col-xs-9 {
3892                 padding-right: 0;
3893         }
3894
3895         .wwto .contact-photo {
3896                 height: 19px;
3897                 padding: 0;
3898                 top: 24px;
3899                 left: 24px;
3900         }
3901
3902         /*
3903                 Prevent automatic zoom on input focus on iOS
3904                 see https://stackoverflow.com/a/16255670
3905         */
3906         .form-control {
3907                 font-size: 16px;
3908         }
3909
3910         .wall-item-container.thread_level_3,
3911         .wall-item-container.thread_level_4,
3912         .wall-item-container.thread_level_5,
3913         .wall-item-container.thread_level_6,
3914         .wall-item-container.thread_level_7,
3915         .wall-item-container.thread_level_8,
3916         .wall-item-container.thread_level_9 {
3917                 margin-left: 5px;
3918         }
3919 }