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