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         max-height: 480px;
1805         object-fit: contain;
1806 }
1807 .wall-item-body > img,
1808 .wall-item-body > a > img {
1809         border-radius: 3px;
1810 }
1811 .wall-item-body .body-attach > a {
1812         color: $font_color_darker;
1813         display: inline-block;
1814 }
1815 .wall-item-body .body-attach > a div {
1816         color: $font_color_darker;
1817         width: 20px;
1818 }
1819
1820 /* wall-item content elements */
1821 .shared-wrapper {
1822         position: relative;
1823         margin-top: 10px;
1824         margin-bottom: 0;
1825 }
1826 .vevent {
1827         padding: 10px;
1828         box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.1) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
1829 }
1830 @media screen and (max-width: 767px) {
1831         .vevent {
1832                 margin-left: 0px;
1833                 margin-right: 0px;
1834         }
1835         .shared-wrapper {
1836                 margin: 5px -10px 0;
1837         }
1838 }
1839 .vevent:hover {
1840         box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
1841 }
1842 .shared_header {
1843         margin-left: 0px;
1844         margin-top: 0px;
1845         padding-top: 0px;
1846         margin-bottom: 10px;
1847         border-top: none;
1848         color: inherit;
1849 }
1850 blockquote.shared_content {
1851         padding: 0px;
1852         margin-left: 0px;
1853         color: inherit;
1854 }
1855 code > .hl-main {
1856         padding: 10px 10px 1px 0;
1857 }
1858 .hl-main ol {
1859         line-height: 1.7;
1860 }
1861 .type-link img.attachment-image {
1862         width: 100%;
1863 }
1864 .type-link blockquote,
1865 .type-video blockquote {
1866         margin: 0;
1867         padding: 10px 0;
1868 }
1869 .oembed.video .embed_video > div::before {
1870         font-family: ForkAwesome;
1871         font-weight: normal;
1872         font-style: normal;
1873         display: inline-block;
1874         text-decoration: inherit;
1875         vertical-align: top;
1876         font-size: 3em;
1877         content: "\f01d";
1878         color: #fff;
1879         bottom: 0px;
1880         right: 10px;
1881         position: absolute;
1882 }
1883 .oembed.video .embed_video > div {
1884         background-color: rgba(0, 0, 0, 0.2);
1885         -webkit-transition: all 0.25s ease-in-out;
1886         -moz-transition: all 0.25s ease-in-out;
1887         -o-transition: all 0.25s ease-in-out;
1888         -ms-transition: all 0.25s ease-in-out;
1889         transition: all 0.25s ease-in-out;
1890 }
1891 .oembed.video .embed_video > div:hover {
1892         background-color: rgba(0, 0, 0, 0);
1893 }
1894 .oembed.video .embed_video.active {
1895         margin: 1em 0;
1896 }
1897 .oembed.video .embed_video.active iframe {
1898         width: 100% !important;
1899 }
1900 .wall-item-tags,
1901 .itemedited {
1902         margin: 10px 0;
1903         font-size: 13px;
1904 }
1905
1906 .wall-item-tags a {
1907         color: $font_color_darker;
1908 }
1909
1910 .wall-item-tags a:hover {
1911         text-decoration: none;
1912 }
1913 .wall-item-bottom .label,
1914 .wall-item-bottom .label a {
1915         color: #fff;
1916 }
1917 .wall-item-tags .category,
1918 .wall-item-tags .folder {
1919         margin-right: 3px;
1920 }
1921
1922 /* item social action buttons */
1923 .wall-item-actions {
1924         display: flex;
1925         margin: 0;
1926         justify-content: space-between;
1927 }
1928 .wall-item-actions a,
1929 .wall-item-actions button {
1930         font-size: 13px;
1931         color: $font_color_darker;
1932 }
1933 .wall-item-actions .active {
1934         font-weight: bold;
1935         color: $link_color;
1936 }
1937 .wall-item-actions-left {
1938         display: table-cell;
1939         vertical-align: middle;
1940 }
1941 .wall-item-actions-right {
1942         display: flex;
1943 }
1944 .wall-item-actions .checkbox {
1945         margin: 0;
1946         margin-left: 20px;
1947 }
1948 .wall-item-actions .button-comments,
1949 .wall-item-actions .button-votes,
1950 .wall-item-actions .button-likes {
1951         text-transform: capitalize;
1952 }
1953 .wall-item-actions button:hover {
1954         color: $font_color_darker;
1955         text-decoration: underline;
1956 }
1957 .wall-item-actions .separator {
1958         margin: 0 0.3em;
1959 }
1960
1961 .wall-item-responses > div > p {
1962         margin: 0;
1963 }
1964
1965 /* wall item hover effects */
1966
1967 @media (min-width: 768px) {
1968         /* Tags and mentions */
1969         .wall-item-container .wall-item-bottom .wall-item-tags span.label {
1970                 filter: grayscale(0.5);
1971                 opacity: 0.8;
1972
1973                 -webkit-transition: all 0.25s ease-in-out;
1974                 -moz-transition: all 0.25s ease-in-out;
1975                 -o-transition: all 0.25s ease-in-out;
1976                 -ms-transition: all 0.25s ease-in-out;
1977                 transition: all 0.25s ease-in-out;
1978         }
1979
1980         .wall-item-container:hover .wall-item-bottom .wall-item-tags span.label {
1981                 filter: grayscale(0);
1982                 opacity: 1;
1983
1984                 -webkit-transition: all 0.25s ease-in-out;
1985                 -moz-transition: all 0.25s ease-in-out;
1986                 -o-transition: all 0.25s ease-in-out;
1987                 -ms-transition: all 0.25s ease-in-out;
1988                 transition: all 0.25s ease-in-out;
1989         }
1990         /* Like/Comment/etc buttons */
1991         .wall-item-container .wall-item-links,
1992         .wall-item-container .wall-item-actions button,
1993         .wall-item-container .body-attach > a {
1994                 opacity: 0.4;
1995
1996                 -webkit-transition: all 0.25s ease-in-out;
1997                 -moz-transition: all 0.25s ease-in-out;
1998                 -o-transition: all 0.25s ease-in-out;
1999                 -ms-transition: all 0.25s ease-in-out;
2000                 transition: all 0.25s ease-in-out;
2001         }
2002         .wall-item-container:hover .wall-item-links,
2003         .wall-item-container:hover .wall-item-actions button,
2004         .wall-item-container:hover .body-attach > a {
2005                 opacity: 1;
2006
2007                 -webkit-transition: all 0.25s ease-in-out;
2008                 -moz-transition: all 0.25s ease-in-out;
2009                 -o-transition: all 0.25s ease-in-out;
2010                 -ms-transition: all 0.25s ease-in-out;
2011                 transition: all 0.25s ease-in-out;
2012         }
2013         .wall-item-container .wall-item-body .body-attach > a:hover {
2014                 opacity: 1;
2015         }
2016 }
2017
2018 /*
2019 * Comments
2020 */
2021 wall-item-comment-wrapper.well {
2022         border: none;
2023         box-shadow: none;
2024         background-color: rgba(237, 237, 237, $contentbg_transp);
2025         background-image: none;
2026         margin-bottom: 1px;
2027         background-color: red;
2028 }
2029 wall-item-comment-wrapper.well-small {
2030         padding: 10px;
2031         border-radius: 3px;
2032 }
2033 wall-item-comment-wrapper.well hr {
2034         border-top: 1px solid #d9d9d9;
2035 }
2036 .wall-entry wall-item-comment-wrapper.well {
2037         margin-bottom: 0;
2038 }
2039 .comment-container {
2040         margin-bottom: 0px;
2041         border-top-left-radius: 3px;
2042         border-top-right-radius: 3px;
2043         border-bottom-right-radius: 0px;
2044         border-bottom-left-radius: 0px;
2045 }
2046 .comment .media {
2047         position: relative !important;
2048         margin-top: 0;
2049 }
2050 .hide-comments-outer {
2051         background-color: rgba(0, 0, 0, 0.03);
2052         padding: 0.5em;
2053         border-radius: 0.5em 0.5em 0 0;
2054 }
2055 .hide-comments-total {
2056         cursor: pointer;
2057 }
2058
2059 /*
2060 * Comment Box
2061 */
2062
2063 .comment-fake-form,
2064 .wall-item-comment-wrapper {
2065         padding: 10px;
2066         border-top: 1px solid rgba(255, 255, 255, 0.8);
2067         background-color: rgba(0, 0, 0, 0.03);
2068         border-radius: 0 0 4px 4px;
2069         margin-bottom: 0;
2070 }
2071
2072 .comment-fake-form {
2073         border-color: #d9d9d9;
2074 }
2075 .comment-fake-form textarea {
2076         resize: none;
2077 }
2078
2079 .comment-container .wall-item-comment-wrapper {
2080         margin-top: 0.5em;
2081 }
2082
2083 .comment-edit-form textarea {
2084         resize: vertical;
2085 }
2086
2087 .comment-edit-submit-wrapper {
2088         text-align: right;
2089         margin-bottom: 0;
2090 }
2091
2092 .comment-icon-list {
2093         display: flex;
2094         justify-content: space-between;
2095 }
2096
2097 /* acpopup  + textcompletion*/
2098 .acpopup {
2099         background-color: #ffffff;
2100         border-radius: 4px;
2101         overflow: auto;
2102         z-index: 100000;
2103         box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
2104 }
2105 nav .acpopup {
2106         margin-left: -23px;
2107 }
2108 /** @todo: we schould consider the possebility to overwrite bootstrap dropdowns
2109  at the beginning of this file to get rid of the !important */
2110 .textcomplete-item > a {
2111         color: $font_color_darker !important;
2112         padding: 5px 20px !important;
2113 }
2114 .textcomplete-item.active > a {
2115         background-color: rgb(247, 247, 247) !important;
2116         background-image: none !important;
2117         border-left: 3px solid $link_color;
2118         padding-left: 17px !important;
2119 }
2120 .textcomplete-item a .forum {
2121         color: $link_color;
2122 }
2123 img.acpopup-img {
2124         border-radius: 4px;
2125 }
2126
2127 /* The wall-item thread levels */
2128 .wall-item-container.thread_level_3,
2129 .wall-item-container.thread_level_4,
2130 .wall-item-container.thread_level_5,
2131 .wall-item-container.thread_level_6,
2132 .wall-item-container.thread_level_7 {
2133         margin-left: 15px;
2134 }
2135
2136 /* Birthday */
2137 #birthday-notice,
2138 #birthday-wrapper {
2139         margin-bottom: 5px;
2140         padding: 10px;
2141         border: none;
2142         background-color: rgba(247, 247, 247, $contentbg_transp);
2143         box-shadow: 0 0 3px #dadada;
2144         -webkit-box-shadow: 0 0 3px #dadada;
2145         -moz-box-shadow: 0 0 3px #dadada;
2146         border-radius: 4px;
2147 }
2148
2149 /* Menubar Tabs */
2150 section > .tabbar-wrapper {
2151         /* The tabbar shouldn't' be visibile inside
2152 the section element. Only after we have
2153 moved it to the nav through js */
2154         display: none !important;
2155 }
2156 #tabmenu,
2157 .tabbar-wrapper,
2158 .tabbar,
2159 .tabbar > li {
2160         height: 100%;
2161         padding: 0;
2162 }
2163 #tabmenu .search-heading {
2164         overflow: hidden;
2165         text-overflow: ellipsis;
2166         white-space: nowrap;
2167 }
2168 ul.tabs {
2169         list-style: none;
2170         height: 100%;
2171         padding: 0;
2172         padding-top: 10px;
2173         margin: 0;
2174 }
2175 ul.tabs li {
2176         float: left;
2177         margin: 0;
2178         padding: 0;
2179         border-bottom: 0 solid $link_color;
2180         font-size: 13px;
2181         height: 102%;
2182         transition: all 0.15s ease;
2183 }
2184 ul.tabs li a {
2185         margin-left: 10px;
2186         margin-right: 10px;
2187 }
2188 ul.tabs li:hover,
2189 ul.tabs li.active {
2190         border-bottom-width: 4px;
2191 }
2192 ul.tabbar ul.tabs-extended:hover li.dropdown {
2193         border-bottom: 0;
2194 }
2195
2196 ul.tabbar ul.tabs-extended li.active {
2197         width: 100%;
2198         border-bottom-width: 2px;
2199 }
2200 ul.tabbar ul.tabs-extended li.active a {
2201         background: none;
2202 }
2203 ul.dropdown-menu li:hover {
2204         border-bottom: 0;
2205 }
2206 .dropdown-menu li {
2207         display: block;
2208         width: 100%;
2209         box-sizing: border-box;
2210 }
2211 /* Dropdown Menu */
2212 .dropdown-menu li a,
2213 .dropdown-menu li .btn-link {
2214         color: $font_color_darker;
2215 }
2216 .dropdown-menu li > :hover,
2217 .dropdown-menu li > :visited,
2218 .dropdown-menu li > :focus {
2219         background: 0 0;
2220 }
2221
2222 .dropdown-menu li:first-child {
2223         margin-top: 3px;
2224 }
2225
2226 /* Notificaiotn badges */
2227 #mail-update-li.show {
2228         display: inline-block !important;
2229 }
2230
2231 /* Media Classes */
2232 p.wall-item-announce,
2233 .media .time,
2234 .media .shared-time,
2235 .media .delivery,
2236 .media .location,
2237 .media .location a {
2238         font-size: 11px;
2239         color: $font_color_darker;
2240 }
2241 .media-list > li {
2242         padding: 10px;
2243         border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2244         position: relative;
2245         border-left: 3px solid rgba(255, 255, 255, 0);
2246         font-size: 12px;
2247 }
2248 .media-list > li:hover,
2249 .media-list > li.selected,
2250 .media-list > li.active {
2251         border-left: 3px solid $link_color;
2252         background-color: rgba(247, 247, 247, $contentbg_transp);
2253 }
2254
2255 /* Forms */
2256 .form-control {
2257         box-shadow: none;
2258 }
2259 .form-control:focus {
2260         border: 2px solid $link_color;
2261         box-shadow: none;
2262 }
2263
2264 .radio label::before,
2265 .checkbox label::before {
2266         background-color: rgba(255, 255, 255, $contentbg_transp);
2267 }
2268 .radio label::after {
2269         background-color: $link_color;
2270 }
2271 .checkbox label::after {
2272         color: $link_color;
2273 }
2274
2275 .checkbox input[type="checkbox"]:focus + label::before,
2276 .radio input[type="radio"]:focus + label::before {
2277         outline-color: $link_hover_color;
2278 }
2279
2280 .help-block {
2281         color: $font_color_darker;
2282 }
2283
2284 input[type="range"].form-control {
2285         padding-left: 0;
2286         padding-right: 0;
2287 }
2288
2289 /* Search form */
2290 .form-control.form-search {
2291         border-radius: 30px;
2292         background-image: url(img/icon_search16x16.png);
2293         background-repeat: no-repeat;
2294         background-position: 10px 8px;
2295         padding-left: 34px;
2296 }
2297 .form-group-search {
2298         position: relative;
2299         width: 100%;
2300 }
2301
2302 .form-group-search .form-button-search {
2303         position: absolute;
2304         top: 4px;
2305         right: 4px;
2306         border-radius: 30px;
2307 }
2308 .search-input.form-control.form-search {
2309         width: 100%;
2310 }
2311 .search-heading {
2312         text-align: center;
2313         color: $link_color;
2314         font-size: 20px;
2315 }
2316 .search-content-wrapper > #search-header-wrapper {
2317         display: none;
2318 }
2319 .search-content-wrapper > .section-title-wrapper {
2320         display: none;
2321 }
2322 #navbar-button > #search-save {
2323         margin-top: 3px;
2324 }
2325 /* Section-Content-Wrapper */
2326 #search-header-wrapper {
2327         padding: 15px;
2328         padding-bottom: 20px;
2329         margin-bottom: 20px;
2330         border: none;
2331         background-color: rgba(255, 255, 255, $contentbg_transp);
2332         border-radius: 4px;
2333         position: relative;
2334         color: $font_color_darker;
2335         box-shadow: 0 0 3px #dadada;
2336         -webkit-box-shadow: 0 0 3px #dadada;
2337         -moz-box-shadow: 0 0 3px #dadada;
2338 }
2339
2340 /* *******
2341  * PAGES
2342  *********/
2343
2344 section > .generic-page-wrapper,
2345 .videos-content-wrapper,
2346 .suggest-content-wrapper,
2347 .help-content-wrapper,
2348 .match-content-wrapper,
2349 .dirfind-content-wrapper,
2350 .delegation-content-wrapper,
2351 .notes-content-wrapper,
2352 .message-content-wrapper,
2353 .apps-content-wrapper,
2354 #adminpage,
2355 .delegate-content-wrapper,
2356 .uexport-content-wrapper,
2357 .dfrn_request-content-wrapper,
2358 .friendica-content-wrapper,
2359 .credits-content-wrapper,
2360 .nogroup-content-wrapper,
2361 .profperm-content-wrapper,
2362 .invite-content-wrapper,
2363 .tos-content-wrapper,
2364 .fsuggest-content-wrapper {
2365         min-height: calc(100vh - 150px);
2366         padding: 15px;
2367         padding-bottom: 20px;
2368         margin-bottom: 20px;
2369         border: none;
2370         background-color: rgba(255, 255, 255, $contentbg_transp);
2371         border-radius: 4px;
2372         position: relative;
2373         color: $font_color_darker;
2374         box-shadow: 0 0 3px #dadada;
2375         -webkit-box-shadow: 0 0 3px #dadada;
2376         -moz-box-shadow: 0 0 3px #dadada;
2377 }
2378 #content:hover .page-action.faded-icon {
2379         opacity: 0.8;
2380         transition: all 0.25s ease-in-out;
2381 }
2382 #content .page-action.faded-icon:hover {
2383         opacity: 1;
2384 }
2385
2386 .section-title-wrapper {
2387         overflow: hidden;
2388 }
2389 /* Home and Login Page */
2390 body.mod-home nav.navbar .nav > li > a:hover {
2391         background-color: rgba(255, 255, 255, 0.2);
2392 }
2393 body.mod-home .navbar #nav-login,
2394 body.mod-login .navbar #nav-login {
2395         display: none;
2396 }
2397 /* Profile-page */
2398 #profile-content-standard,
2399 #profile-content-advanced {
2400         overflow: hidden;
2401 }
2402 #profile-menu {
2403         margin-top: 20px;
2404         margin-bottom: 20px;
2405 }
2406 .contact-block-div.forumlist-profile-advanced {
2407         float: left;
2408 }
2409
2410 /* contacts page */
2411 ul.viewcontact_wrapper {
2412         margin-left: -15px;
2413         margin-right: -15px;
2414 }
2415 ul.viewcontact_wrapper > li {
2416         padding-left: 15px;
2417 }
2418 .contact-wrapper .contact-photo-wrapper button {
2419         padding: 0;
2420 }
2421 .contact-wrapper.media {
2422         overflow: visible;
2423         word-wrap: break-word;
2424         margin-top: 0;
2425 }
2426 /* bootstrap hack for .media */
2427 .contact-wrapper.media .media-body {
2428         display: table-cell;
2429         width: 10000px;
2430         *width: auto;
2431         *zoom: 1;
2432 }
2433 .contact-wrapper.media:before,
2434 .media:after {
2435         content: "";
2436         display: table;
2437 }
2438 .contact-wrapper.media:after {
2439         clear: both;
2440 }
2441 .contact-wrapper .contact-photo-image-wrapper img.contact-photo.xl {
2442         height: 80px;
2443         width: 80px;
2444 }
2445 .contact-wrapper .contact-photo-image-wrapper img.contact-photo-xs {
2446         height: 48px;
2447         width: 48px;
2448 }
2449 .contact-wrapper .contact-photo-overlay-content.xl {
2450         font-size: 48px;
2451 }
2452 .contact-wrapper .contact-photo-menu {
2453         top: auto;
2454 }
2455
2456 .contact-entry-desc {
2457         color: $font_color_darker;
2458 }
2459 .contact-entry-checkbox {
2460         margin-top: -20px;
2461 }
2462 .contact-wrapper .media-body .contact-entry-name h4.media-heading a {
2463         font-weight: bold !important;
2464         color: $link_color;
2465         font-size: 15px !important;
2466 }
2467 .contact-wrapper .contact-actions {
2468         display: flex;
2469 }
2470 .contact-wrapper .contact-action-link,
2471 .contact-wrapper .contact-action-link:hover,
2472 .textcomplete-item .contact-wrapper .contact-action-link {
2473         padding: 0 5px;
2474         color: $font_color_darker;
2475         border: 0;
2476 }
2477 .contact-wrapper .contact-action-link {
2478         opacity: 0.1;
2479         transition: all 0.25s ease-in-out;
2480 }
2481 ul li:hover .contact-wrapper .contact-action-link {
2482         opacity: 0.8;
2483         transition: all 0.25s ease-in-out;
2484 }
2485 ul li:hover .contact-wrapper .contact-action-link:hover {
2486         opacity: 1;
2487 }
2488 #contacts-search-wrapper,
2489 #directory-search-wrapper {
2490         padding: 10px 0;
2491 }
2492 #contact-drop-confirm .contact-actions,
2493 #contact-drop-confirm .contact-photo-overlay,
2494 #contact-drop-confirm .contact-photo-menu {
2495         display: none;
2496 }
2497 #contact-drop-confirm #confirm-form {
2498         margin-top: 20px;
2499 }
2500
2501 /* contact-edit */
2502 #contact-edit-actions {
2503         position: absolute;
2504 }
2505 #contact-edit-status-wrapper {
2506         border: none;
2507         background-color: rgba(225, 245, 254, $contentbg_transp);
2508         margin: 15px -15px;
2509 }
2510 #contact-edit-settings {
2511         display: block;
2512 }
2513
2514 /* directory page */
2515 #directory-search-heading {
2516         padding-top: 10px;
2517 }
2518
2519 /* group edit page */
2520 .group-actions {
2521         margin-top: 4px;
2522         margin-bottom: 10px;
2523         font-size: 30px;
2524 }
2525 .group-actions button,
2526 .group-actions a {
2527         font-size: 18px;
2528 }
2529
2530 .contact-group-actions .fa-times-circle {
2531         color: #d00000;
2532 }
2533 .contact-group-actions .fa-plus-circle {
2534         color: #008000;
2535 }
2536
2537 #group-edit-wrapper {
2538         margin-top: 14px;
2539         display: none;
2540 }
2541 #group-edit-header {
2542         display: block;
2543 }
2544 #group-update-wrapper .contact-photo-overlay {
2545         display: none;
2546 }
2547 #group-update-wrapper .viewcontact_wrapper .contact-group-actions {
2548         height: 100%;
2549         margin-top: -10px;
2550         display: flex;
2551 }
2552 #group-update-wrapper .viewcontact_wrapper .contact-group-link {
2553         opacity: 0.8;
2554         font-size: 20px;
2555         line-height: 50px;
2556 }
2557 #group-update-wrapper .viewcontact_wrapper .contact-action-link:hover {
2558         opacity: 1;
2559 }
2560 #group-update-wrapper .shortmode {
2561         height: 53px;
2562         overflow: hidden;
2563 }
2564 #group-update-wrapper .shortmode .contact-photo {
2565         height: 32px;
2566         width: 32px;
2567 }
2568 #group-update-wrapper .shortmode .media {
2569         overflow: hidden;
2570 }
2571 #group-update-wrapper .shortmode .contact-entry-desc {
2572         font-size: 12px !important;
2573 }
2574 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading {
2575         margin: 0;
2576 }
2577 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading a {
2578         font-size: 13px !important;
2579         white-space: nowrap;
2580 }
2581 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-rel,
2582 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-network {
2583         display: none;
2584 }
2585
2586 /* private mail */
2587 .message-content-wrapper > li {
2588         /* we need this overwriting because we have no template file
2589    for the general mail page /message
2590 */
2591         list-style-type: none;
2592 }
2593 .mail-thread {
2594         max-height: calc(100vh - 200px);
2595 }
2596 #mail-conversation {
2597         overflow-y: auto;
2598         max-height: calc(100vh - 400px);
2599         max-height: auto;
2600         margin-bottom: 0px;
2601         padding: 0 15px;
2602 }
2603 .mail-conv-wrapper .media .contact-photo-wrapper img {
2604         height: 48px;
2605         width: 48px;
2606 }
2607 .mail-thread #prvmail-to-label,
2608 .mail-thread #prvmail-subject-label {
2609         display: none;
2610 }
2611 .mail-thread #prvmail-message-label > label {
2612         display: none;
2613 }
2614 .mail-thread #prvmail-message-label textarea {
2615         max-height: 120px;
2616 }
2617 .mail-conv-wrapper {
2618         padding: 15px 0;
2619         border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2620 }
2621 #message-sidebar {
2622         height: calc(100vh - 150px);
2623 }
2624 #message-preview {
2625         height: calc(100% - 20px);
2626 }
2627 #message-preview ul {
2628         margin: 0px;
2629 }
2630 #message-preview .media-list li {
2631         padding: 0px 10px;
2632         border: none;
2633 }
2634 #message-preview .media-list li:hover {
2635         border-left: none !important;
2636 }
2637 #message-preview .media-list li a {
2638         color: $link_color;
2639 }
2640 .mail-list-outside-wrapper {
2641         padding: 5px 0;
2642         border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2643 }
2644 .mail-list-outside-wrapper .contact-photo-wrapper img {
2645         height: 48px;
2646         width: 48px;
2647 }
2648 #prvmail-end {
2649         clear: both;
2650 }
2651 #modal #prvmail-text-edit-bb .bb-img {
2652         display: none;
2653 }
2654
2655 /* photos */
2656 #photo-album-edit-name-label {
2657         width: 100%;
2658 }
2659 .photo-album-edit-name {
2660         width: 60%;
2661 }
2662
2663 .photo-album-actions {
2664         margin-bottom: 10px;
2665 }
2666 .photo-album-actions .photos-order-link {
2667         float: right;
2668 }
2669 /* Events page */
2670
2671 .fc .fc-month-view .fc-content .fc-title .item-desc:hover {
2672         color: $link_hover_color;
2673 }
2674 .fc .fc-list-item-title a {
2675         color: $link_color;
2676 }
2677 .fc .fc-list-item-title a[href]:hover {
2678         color: $link_hover_color;
2679         text-decoration: none;
2680 }
2681 .event-wrapper .event-owner {
2682         margin-bottom: 15px;
2683 }
2684 .event-wrapper .event-owner img {
2685         display: block;
2686 }
2687 .event-owner img {
2688         margin-right: 5px;
2689         height: 48px;
2690         width: 48;
2691         border-radius: 3px;
2692 }
2693 .event-wrapper .vevent {
2694         margin-left: 0;
2695         margin-right: 0;
2696         box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2697 }
2698 .event-wrapper .event-buttons {
2699         margin-top: 15px;
2700 }
2701 #event-form-wrapper {
2702         padding-top: 5px;
2703 }
2704 #event-edit-form-wrapper {
2705         padding-top: 15px;
2706 }
2707 #event-nav a {
2708         color: $font_color_darker;
2709 }
2710 #event-edit-form-wrapper #event-edit-time {
2711         padding: 10px 0;
2712 }
2713 .event-buttons .plink-event-link {
2714         margin-left: 20px;
2715 }
2716 .vevent .event-summary {
2717         font-size: 16px;
2718 }
2719 .vevent .event-description {
2720         padding: 10px 0;
2721 }
2722 .vevent .event-location .location {
2723         font-size: inherit;
2724         color: inherit;
2725 }
2726 .modal-body .vevent .event-summary {
2727         display: none;
2728 }
2729 #event-preview .vevent .event-summary {
2730         display: block;
2731 }
2732
2733 /* Event Cards */
2734 .event-card-details,
2735 .event-card-header {
2736         width: 100%;
2737 }
2738 .event-card-header,
2739 .event-card-left-date {
2740         float: left;
2741 }
2742 .vevent .event-card-header {
2743         display: table;
2744 }
2745 .event-card-left-date {
2746         width: 60px; /* Das muss wahrscheinlich unterschiedlich sein zwischen calendar und stream */
2747 }
2748 .event-card .event-date-wrapper > span {
2749         display: block;
2750         overflow: hidden;
2751         text-align: center;
2752         white-space: nowrap;
2753 }
2754 .event-card .event-date-wrapper .event-card-short-month {
2755         font-size: 13px;
2756         text-transform: uppercase;
2757 }
2758 .event-card .event-date-wrapper.medium .event-card-short-date {
2759         font-size: 24px;
2760         line-height: 28px;
2761         margin-top: 2px;
2762 }
2763 .event-card .event-card-content {
2764         width: 100%;
2765         padding: 0 5px 0 15px;
2766         box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2767         color: $font_color;
2768         position: relative;
2769 }
2770 .event-card .event-card-content .event-map-btn {
2771         position: absolute;
2772         right: 0;
2773         top: 0;
2774         line-height: 15px;
2775 }
2776 .event-card .event-card-title {
2777         font-size: 14px;
2778         color: $font_color_darker;
2779         line-height: 15px;
2780         font-weight: bold;
2781         margin: 0;
2782 }
2783 .event-card .event-card-location {
2784         margin-top: 10px;
2785         font-size: 13px;
2786 }
2787 .event-card .event-card-location br {
2788         content: " ";
2789 }
2790 .event-card .event-card-location br::after {
2791         content: " ";
2792 }
2793 .event-card-profile-name a {
2794         color: $link_color;
2795 }
2796 .event-card-profile-name a:hover {
2797         color: $link_hover_color;
2798 }
2799 .event-card .event-card-content .event-location-map {
2800         position: absolute;
2801         left: -9999px;
2802         top: -9999px;
2803 }
2804 .event-card .event-card-content .event-location-map .map {
2805         margin-top: 10px;
2806 }
2807 .event-card .description {
2808         margin-top: 10px;
2809         box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, 0.1) inset;
2810 }
2811 /* Photos Pages */
2812 #photo-photo {
2813         position: relative;
2814 }
2815 .photo-next-link,
2816 .photo-prev-link {
2817         height: 64px;
2818         margin-top: -32px;
2819         opacity: 0;
2820         position: absolute;
2821         top: 50%;
2822         transform: translateZ(0);
2823         transition: opacity 0.2s;
2824         width: 100px;
2825         z-index: 11;
2826         font-size: 64px;
2827         color: #fff;
2828         text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
2829 }
2830 .photo-next-link > i,
2831 .photo-prev-link > i {
2832         vertical-align: super;
2833 }
2834 .photo-next-link > i {
2835         float: right;
2836 }
2837 .photo-prev-link {
2838         left: 20px;
2839 }
2840 .photo-next-link {
2841         right: 20px;
2842 }
2843 #photo-photo:hover .photo-next-link,
2844 #photo-photo:hover .photo-prev-link {
2845         opacity: 0.4;
2846 }
2847 #photo-photo .photo-next-link:hover,
2848 #photo-photo .photo-prev-link:hover {
2849         opacity: 1;
2850         color: #fff;
2851 }
2852 .photo-comment-wrapper .comment {
2853         position: relative;
2854 }
2855 .photo-comment-wrapper .wall-item-content {
2856         color: $font_color_darker;
2857         font-size: 13px;
2858 }
2859 .photo-comment-wrapper .comment-wwedit-wrapper,
2860 .photo-comment-wrapper .wall-item-outside-wrapper.media:first-child {
2861         margin-top: 15px;
2862 }
2863
2864 /* Profiles Page */
2865 .profile-listing-table {
2866         display: table;
2867         width: 100%;
2868 }
2869 .profile-listing-row {
2870         display: table-row;
2871 }
2872 .profile-listing-cell {
2873         display: table-cell;
2874 }
2875 .profile-listing-photo {
2876         width: 48px;
2877         height: 48px;
2878         margin: 10px 0px;
2879 }
2880 #profile-listing-new-link-wrapper {
2881         margin-bottom: 20px;
2882 }
2883
2884 #profile-photo-upload-section {
2885         display: none;
2886         padding: 10px;
2887 }
2888 #profile-photo-upload-close {
2889         font-size: 14px;
2890 }
2891
2892 /* Settings */
2893 .section-subtitle-wrapper {
2894         padding: 1px 10px;
2895 }
2896 details.profile-jot-net[open] summary:before,
2897 .panel .section-subtitle-wrapper a.accordion-toggle:before {
2898         font-family: ForkAwesome;
2899         content: "\f0d7";
2900         padding-right: 5px;
2901 }
2902 details.profile-jot-net summary:before,
2903 .panel .section-subtitle-wrapper a.accordion-toggle.collapsed:before {
2904         font-family: ForkAwesome;
2905         content: "\f0da";
2906 }
2907 details.profile-jot-net summary:before {
2908         padding-right: 5px;
2909         padding-left: 3px;
2910 }
2911 details.profile-jot-net[open] summary:before {
2912         padding-right: 5px;
2913         padding-left: 0px;
2914 }
2915 #settings-nick-wrapper {
2916         margin-bottom: 20px;
2917 }
2918 .group {
2919         margin-left: 20px;
2920 }
2921
2922 /* Emulates Bootstrap display */
2923 .settings-block {
2924         margin: 0 0 5px;
2925         background-color: rgba(255, 255, 255, $contentbg_transp);
2926         border-radius: 4px;
2927         padding: 10px 15px;
2928         box-shadow: 0 0 3px #dadada;
2929         -webkit-box-shadow: 0 0 3px #dadada;
2930         -moz-box-shadow: 0 0 3px #dadada;
2931 }
2932
2933 .settings-block.fakelink,
2934 .settings-block > .fakelink {
2935         padding: 10px 25px;
2936         display: block;
2937 }
2938 .settings-block > .fakelink {
2939         margin: -10px -15px 10px -15px;
2940         border-radius: 4px 4px 0 0;
2941 }
2942
2943 .settings-block.fakelink:hover,
2944 .settings-block > .fakelink:hover {
2945         color: $link_hover_color;
2946 }
2947 .settings-block.fakelink > h3,
2948 .settings-block > .fakelink > h3 {
2949         margin: 0;
2950         padding: 0;
2951         color: $link_color;
2952         font-size: 18px;
2953 }
2954
2955 .section-subtitle-wrapper > h2 {
2956         font-size: 18px;
2957         margin-top: 10px;
2958         margin-bottom: 10px;
2959 }
2960
2961 .fakelink > h3:before {
2962         padding-right: 10px;
2963 }
2964 .widget.fakelink > h3:before,
2965 .settings-block.fakelink > h3:before {
2966         font-family: ForkAwesome;
2967         content: "\f0da"; /* Right Plain Pointer */
2968 }
2969 .widget > .fakelink > h3:before,
2970 #sidebar-group-header > .fakelink > h3:before,
2971 .settings-block > .fakelink > h3:before {
2972         font-family: ForkAwesome;
2973         content: "\f0d7"; /* Bottom Plain Pointer */
2974 }
2975
2976 h3.connector {
2977         line-height: 40px;
2978 }
2979
2980 /* Intro Notifications */
2981 ul.notif-network-list {
2982         margin-left: -15px;
2983         margin-right: -15px;
2984 }
2985 ul.notif-network-list > li {
2986         padding-left: 15px;
2987         padding-right: 15px;
2988 }
2989 .intro-wrapper.media {
2990         overflow: visible;
2991         word-wrap: break-word;
2992         margin-top: 0;
2993 }
2994 .intro-photo-wrapper img.intro-photo {
2995         height: 80px;
2996         width: 80px;
2997         border-radius: 4px;
2998 }
2999 .intro-actions {
3000         display: flex;
3001 }
3002 .intro-enty-name h4 {
3003         font-size: 15px !important;
3004 }
3005 .intro-wrapper button.intro-action-link {
3006         opacity: 0.1;
3007         transition: all 0.25s ease-in-out;
3008 }
3009 .intro-wrapper button.intro-action-link,
3010 .intro-wrapper button.intro-action-link:hover {
3011         padding-right: 5px;
3012         padding-left: 5px;
3013         color: $font_color_darker;
3014 }
3015 ul li:hover .intro-wrapper button.intro-action-link {
3016         opacity: 0.8;
3017         transition: all 0.25s ease-in-out;
3018 }
3019 ul li:hover .intro-wrapper button.intro-action-link:hover {
3020         opacity: 1;
3021 }
3022 .intro-action-buttons {
3023         margin-top: 15px;
3024         max-height: 0px;
3025         overflow: hidden;
3026         transition: max-height 0.1s ease-out;
3027 }
3028 ul.notif-network-list > li:hover .intro-action-buttons {
3029         max-height: 30px;
3030         transition: max-height 0.1s ease-in;
3031 }
3032 .intro-desc-label,
3033 .intro-url-label,
3034 .intro-network-label,
3035 .intro-location-label,
3036 .intro-keywords-label,
3037 .intro-about-label,
3038 .intro-knowyou-label,
3039 .intro-madeby-label {
3040         font-weight: bold;
3041 }
3042 .intro-contact-info.xs .intro-url-label,
3043 .intro-contact-info.xs .intro-network-label,
3044 .intro-contact-info.xs .intro-location-label,
3045 .intro-contact-info.xs .intro-keywords-label,
3046 .intro-contact-info.xs .intro-about-label,
3047 .intro-contact-info.xs .intro-knowyou-label {
3048         display: block;
3049         margin-top: 5px;
3050 }
3051
3052 /* Notifications Page */
3053 ul.notif-network-list li.unseen {
3054         background-color: #e3eff3;
3055 }
3056 .notif-item img.notif-image {
3057         height: 48px;
3058         width: 48px;
3059         border-radius: 4px;
3060 }
3061 .notif-item .notif-desc-wrapper {
3062         height: 48px;
3063 }
3064 .notif-item .notif-desc-wrapper a {
3065         height: 100%;
3066         display: block;
3067         color: $font_color_darker;
3068         font-size: 13px;
3069         font-weight: 600;
3070 }
3071
3072 /* Search Page */
3073
3074 /* This is a little bit hacky. Since the search page is used for diferent
3075 content types we can't apply the generic-page-wrapper class.
3076 So we apply the css of the generic-page-wrapper class to the ul element with some
3077 little modifications to emulate a standard page template */
3078 .search-content-wrapper > ul.viewcontact_wrapper {
3079         min-height: calc(100vh - 150px);
3080         padding-top: 15px;
3081         padding-bottom: 20px;
3082         margin: 0;
3083         margin-bottom: 20px;
3084         border: none;
3085         background-color: rgba(255, 255, 255, $contentbg_transp);
3086         border-radius: 4px;
3087         position: relative;
3088         color: $font_color_darker;
3089         box-shadow: 0 0 3px #dadada;
3090         -webkit-box-shadow: 0 0 3px #dadada;
3091         -moz-box-shadow: 0 0 3px #dadada;
3092 }
3093
3094 /* Help Page */
3095 section.help-content-wrapper h1 {
3096         padding-bottom: 0.3em;
3097         font-size: 1.8em;
3098         border-bottom: 1px solid #ddd;
3099 }
3100 section.help-content-wrapper h2 {
3101         padding-bottom: 0.3em;
3102         font-size: 1.5em;
3103         border-bottom: 1px solid #ddd;
3104 }
3105 section.help-content-wrapper h3 {
3106         font-size: 1.2em;
3107 }
3108 section.help-content-wrapper h4 {
3109         font-size: 1em;
3110 }
3111 section.help-content-wrapper h1,
3112 section.help-content-wrapper h2,
3113 section.help-content-wrapper h3,
3114 section.help-content-wrapper h4,
3115 section.help-content-wrapper h5,
3116 section.help-content-wrapper h6 {
3117         margin-top: 24px;
3118         margin-bottom: 16px;
3119         font-weight: 600;
3120         line-height: 1.25;
3121 }
3122 section.help-content-wrapper p {
3123         margin: 0.4em 0;
3124 }
3125 section.help-content-wrapper p,
3126 section.help-content-wrapper a,
3127 section.help-content-wrapper li {
3128         line-height: 1.6;
3129         font-size: 0.96em;
3130 }
3131
3132 /*Admin Page*/
3133 #adminpage #frio_background_image .image-select {
3134         display: none;
3135 }
3136 #adminpage #frio_background_image.input-group {
3137         display: block;
3138 }
3139 #admin-summary-wrapper {
3140         padding-top: 10px;
3141 }
3142 #adminpage ul#addonslist,
3143 li.addon {
3144         list-style: none;
3145 }
3146 #adminpage li .icon {
3147         display: inline-block;
3148         vertical-align: text-top;
3149         position: relative;
3150         padding-left: 5px;
3151 }
3152 #adminpage li .icon:before {
3153         content: "";
3154         display: inline-block;
3155         position: absolute;
3156         width: 17px;
3157         height: 17px;
3158         left: 0;
3159         margin-left: -20px;
3160         margin-top: 2px;
3161         border: 1px solid #cccccc;
3162         border-radius: 3px;
3163         background-color: $background_color;
3164         -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3165         -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3166         transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3167 }
3168 #adminpage li .icon.on:after {
3169         font-family: "ForkAwesome";
3170         content: "\f00c";
3171         display: inline-block;
3172         position: absolute;
3173         width: 16px;
3174         height: 16px;
3175         left: 0;
3176         top: 0;
3177         margin-left: -20px;
3178         margin-top: 2px;
3179         padding-left: 3px;
3180         padding-top: 1px;
3181         font-size: 11px;
3182         color: $link_color;
3183 }
3184 #adminpage .addon .desc {
3185         padding-left: 10px;
3186 }
3187 #admin-users #users tr.blocked {
3188         background-color: #f8efc0;
3189 }
3190 .adminpage .table-hover > tbody > tr:hover + tr.details {
3191         background-color: #f5f5f5;
3192 }
3193 .offset-anchor::before {
3194         display: block;
3195         content: " ";
3196         margin-top: -100px;
3197         height: 100px;
3198         visibility: hidden;
3199         pointer-events: none;
3200 }
3201
3202 #relocate-form {
3203         margin-top: 5px;
3204 }
3205
3206 /* Manage Page */
3207 #identity-selector-wrapper {
3208         width: auto;
3209         height: auto;
3210         margin-top: 20px;
3211 }
3212 #identity-selector-wrapper .identity-match-photo {
3213         width: auto;
3214         float: none;
3215 }
3216 #identity-selector-wrapper .identity-match-photo button {
3217         position: relative;
3218 }
3219 #identity-selector-wrapper .identity-match-photo .badge {
3220         position: absolute;
3221         top: -8px;
3222         right: -8px;
3223 }
3224 #identity-selector-wrapper .identity-match-name {
3225         text-align: center;
3226 }
3227 #identity-selector-wrapper .identity-match-details {
3228         width: auto;
3229         float: none;
3230 }
3231
3232 /* Register Page */
3233 #register-openid-wrapper,
3234 #register-name-wrapper,
3235 #register-invite-wrapper,
3236 #profile-publish-wrapper {
3237         margin-top: 20px;
3238 }
3239 #register-openid-end,
3240 #register-nickname-end {
3241         margin-top: 40px;
3242 }
3243
3244 /*
3245 * Overwriting for transparency and other colors
3246 */
3247 main .nav-tabs > li.active > a,
3248 main .nav-tabs > li.active > a:focus,
3249 main .nav-tabs > li.active > a:hover {
3250         background-color: rgba(255, 255, 255, $contentbg_transp);
3251 }
3252
3253 /*
3254  * Modal
3255  */
3256 .modal hr {
3257         border-color: #eee;
3258 }
3259
3260 @media (min-width: 768px) {
3261         .modal-dialog {
3262                 width: 650px;
3263         }
3264 }
3265
3266 /*
3267  * Framework overwrite
3268  */
3269
3270 /* textcomplete for contact filtering*/
3271 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list {
3272         position: relative !important;
3273         top: inherit !important;
3274         bottom: inherit !important;
3275         left: inherit !important;
3276         padding: 0;
3277         margin-left: -15px;
3278         margin-right: -15px;
3279         background-color: transparent;
3280         box-shadow: none;
3281         border: none;
3282 }
3283 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li {
3284         padding-left: 15px;
3285         border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
3286 }
3287 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li:first-child {
3288         display: none;
3289 }
3290 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list .textcomplete-item > a {
3291         padding: 0 !important;
3292         border-left: none;
3293         background-color: transparent !important;
3294 }
3295 /* this is a little hack for texcomplete contact filter
3296 There are for some reasons empty <a> tags. I don't know why */
3297 .textcomplete-item .contact-wrapper a {
3298         padding: 0;
3299 }
3300
3301 /* hovercard fix */
3302 body .tread-wrapper .hovercard a,
3303 body .tread-wrapper .hovercard a:hover {
3304         color: $link_color;
3305 }
3306 body .tread-wrapper .hovercard:hover .hover-card-content a {
3307         color: $link_color !important;
3308 }
3309
3310 /* Pagination improvements */
3311 .pagination {
3312         text-align: center;
3313         display: block;
3314 }
3315 .pagination > li > a,
3316 .pagination > li > span {
3317         color: $link_color;
3318         float: none;
3319 }
3320 .pagination > li > a:hover,
3321 .pagination > li > span:hover {
3322         color: $link_hover_color;
3323 }
3324 .pagination > .active > a,
3325 .pagination > .active > a:focus,
3326 .pagination > .active > a:hover,
3327 .pagination > .active > span,
3328 .pagination > .active > span:focus,
3329 .pagination > .active > span:hover {
3330         background-color: $link_color;
3331         border-color: $link_color;
3332         border-radius: 3px;
3333 }
3334 .pagination li.pager_n a {
3335         margin-left: 3px;
3336         border-radius: 3px;
3337 }
3338 .pagination .pager_prev a {
3339         margin-left: -5px;
3340         margin-right: 4px;
3341         border-top-right-radius: 3px;
3342         border-bottom-right-radius: 3px;
3343 }
3344 .pagination .pager_next a {
3345         margin-left: 4px;
3346         margin-right: -5px;
3347         border-top-left-radius: 3px;
3348         border-bottom-left-radius: 3px;
3349 }
3350 .pager .next > a,
3351 .pager .previous > a {
3352         float: none;
3353         border-radius: 3px;
3354 }
3355 .pagination .disabled > a,
3356 .pager .disabled > a {
3357         display: none;
3358 }
3359
3360 .pagination li > a,
3361 .pager li > a {
3362         background-color: rgba(255, 255, 255, $contentbg_transp);
3363 }
3364
3365 /*
3366  * some temporary workarounds until this will solved
3367  * elsewhere (e.g. new templates)
3368  */
3369 section .profile-match-wrapper {
3370         float: left;
3371 }
3372
3373 /**
3374  * Login page
3375  */
3376 #login-submit-wrapper {
3377         float: right;
3378 }
3379 #lost-password-link {
3380         flex-grow: 2;
3381 }
3382 #login-lost-password-link {
3383         margin-bottom: 10px;
3384         float: right;
3385 }
3386 #div_id_remember {
3387         float: left;
3388 }
3389 #id_password_wrapper {
3390         margin-bottom: unset;
3391 }
3392 #login_openid {
3393         clear: both;
3394 }
3395 #register-link {
3396         color: white;
3397         background: #8ad0a1;
3398         width: 100%;
3399 }
3400 #login-end {
3401         clear: both;
3402 }
3403
3404 .mod-home.is-not-singleuser,
3405 .mod-login {
3406         background-color: $login_bg_color;
3407         background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)), url($login_bg_image);
3408         background-size: cover;
3409         background-attachment: fixed;
3410         background-position: center;
3411         padding-top: 0;
3412 }
3413 .mod-home.is-not-singleuser nav.navbar,
3414 .mod-login nav.navbar {
3415         background-color: transparent;
3416 }
3417 .mod-home.is-not-singleuser #topbar-second,
3418 .mod-login #topbar-second {
3419         background-color: transparent;
3420         box-shadow: unset;
3421         border: 0;
3422 }
3423 .mod-home.is-not-singleuser .login-content,
3424 .mod-login .login-content {
3425         color: #eee;
3426         margin-top: 2.5%;
3427 }
3428
3429 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3430         margin-top: 4em;
3431 }
3432
3433 .mod-home.is-not-singleuser .login-form > #login-form label,
3434 .mod-login #content #login-form label {
3435         color: #eee;
3436 }
3437
3438 .mod-home.is-not-singleuser .login-panel-content,
3439 .mod-login .login-panel-content {
3440         background-color: rgba(255, 255, 255, 0.85);
3441 }
3442
3443 .qq-upload-button {
3444         background: $nav_bg !important;
3445         color: $btn_primary_color !important;
3446         float: none;
3447         border: none;
3448         -webkit-box-shadow: none;
3449         box-shadow: none;
3450         -moz-box-shadow: none;
3451         background-image: none;
3452         text-shadow: none;
3453         border-radius: 3px;
3454         margin-bottom: 0;
3455         font-size: 14px;
3456         font-weight: 600;
3457         padding: 8px 16px;
3458         color: inherit;
3459         width: 100% !important;
3460 }
3461
3462 .qq-upload-drop-area {
3463         background: white !important;
3464         float: none;
3465         border: none;
3466         -webkit-box-shadow: none;
3467         box-shadow: none;
3468         -moz-box-shadow: none;
3469         background-image: none;
3470         text-shadow: none;
3471         border-radius: 3px;
3472         margin-bottom: 0;
3473         font-size: 14px;
3474         font-weight: 600;
3475         padding: 8px 16px;
3476         color: inherit;
3477         width: 100% !important;
3478         display: block !important;
3479         position: relative !important;
3480         border: black 1px dashed !important;
3481         margin-bottom: 5px !important;
3482         margin-top: 15px !important;
3483 }
3484
3485 /**
3486  * The different views of js fullcalendar
3487  */
3488 #fc-header {
3489         margin-top: 20px;
3490         margin-bottom: 10px;
3491 }
3492 #fc-header-left,
3493 #fc-header-right,
3494 #event-calendar-title {
3495         display: inline-block;
3496 }
3497 #fc-title {
3498         margin: 0;
3499         padding-left: 20px;
3500 }
3501 #fc-header-right {
3502         margin-top: -4px;
3503 }
3504 #fc-header-right .dropdown > button {
3505         color: inherit;
3506 }
3507 #event-calendar-title {
3508         vertical-align: middle;
3509 }
3510 #event-calendar-views {
3511         padding: 6px 9px;
3512         font-size: 14px;
3513 }
3514 .fc .fc-toolbar {
3515         display: none;
3516 }
3517 .fc .fc-month-view td.fc-widget-content,
3518 .fc .fc-list-view,
3519 .fc .fc-list-view .fc-list-table td,
3520 .fc .fc-body td {
3521         border-style: none;
3522 }
3523 .fc td.fc-widget-header,
3524 .fc th.fc-widget-header {
3525         border-left: none;
3526         border-right: none;
3527         border-top: none;
3528 }
3529 .fc .fc-month-view td.fc-day {
3530         border-left: none;
3531         border-right: none;
3532         border-bottom: 1px solid;
3533         padding: 0 6px;
3534 }
3535 .fc .fc-day-grid-container .fc-row {
3536         border-bottom: 1px solid;
3537         border-color: #ddd;
3538 }
3539 .fc tr td.fc-today {
3540         border-style: none;
3541 }
3542 .fc .fc-month-view .fc-content .fc-title .item-desc {
3543         font-size: 11px;
3544 }
3545 .fc .fc-view-container {
3546         margin-top: 25px;
3547 }
3548 .fc .fc-list-view td {
3549         padding: 0;
3550 }
3551 #events-calendar.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
3552         float: left;
3553         font-size: 12px;
3554 }
3555 .fc .fc-event {
3556         background-color: #e3f2fd;
3557         border: 1px solid #bbdefb;
3558         color: $font_color_darker;
3559 }
3560 .fc .fc-month-view .fc-time,
3561 .fc .fc-listMonth-view .fc-list-item-time,
3562 .fc .fc-listMonth-view .fc-list-item-marker,
3563 .fc .fc-listMonth-view .fc-widget-header {
3564         display: none;
3565 }
3566 .fc .fc-listMonth-view .fc-list-item:hover td {
3567         background: transparent;
3568         cursor: pointer;
3569 }
3570 .fc .fc-listMonth-view .seperator {
3571         margin-left: 30px;
3572         width: 60px;
3573 }
3574
3575 /**
3576  * The event-card
3577  */
3578 .event-card {
3579         width: auto;
3580 }
3581 .event-card .event-label,
3582 .event-card .location-label {
3583         font-weight: bold;
3584 }
3585 .popover.event-card .event-card-basic-content {
3586         margin-top: 0;
3587         padding: 9px;
3588         padding-left: 0px;
3589 }
3590 .event-card .event-hover-location .location {
3591         color: $font_color;
3592         font-size: 13px;
3593 }
3594
3595 /* Medium devices (desktops, 992px and up) */
3596 @media (min-width: 992px) {
3597         .mod-home.is-not-singleuser #content,
3598         .mod-login #content {
3599                 margin-top: 100px !important;
3600         }
3601
3602         .mod-home.is-not-singleuser .login-form > #login-form,
3603         .mod-home.is-not-singleuser .login-form > #login-extra-links,
3604         .mod-login #content #login-form {
3605                 background-color: #fff;
3606                 padding: 1em;
3607                 position: relative;
3608         }
3609         .mod-home.is-not-singleuser .login-form > #login-extra-links {
3610                 margin-top: unset;
3611                 background-color: white;
3612         }
3613
3614         .mod-home.is-not-singleuser .login-form > #login-form label,
3615         .mod-login #content #login-form label {
3616                 color: #444;
3617         }
3618
3619         .mod-home.is-not-singleuser .login-form::before,
3620         .mod-login #content #login-form::before {
3621                 display: block;
3622                 position: absolute;
3623                 content: " ";
3624                 background-color: rgba(255, 255, 255, 0.1);
3625                 width: 90%;
3626                 height: 110%;
3627                 top: -5%;
3628                 left: 5%;
3629                 z-index: -1;
3630         }
3631
3632         .mod-home.is-not-singleuser .login-form::after,
3633         .mod-login #content #login-form::after {
3634                 display: block;
3635                 position: absolute;
3636                 content: " ";
3637                 background-color: rgba(255, 255, 255, 0.2);
3638                 width: 80%;
3639                 height: 120%;
3640                 top: -10%;
3641                 left: 10%;
3642                 z-index: -1;
3643         }
3644 }
3645
3646 /* Mobile display */
3647 @media (max-width: 600px) {
3648         body {
3649                 padding-top: 95px;
3650         }
3651         body.minimal {
3652                 padding: 15px;
3653         }
3654
3655         #friendica-logo-mask {
3656                 display: none;
3657         }
3658
3659         .container {
3660                 padding-right: 0;
3661                 padding-left: 0;
3662         }
3663
3664         .panel {
3665                 border-radius: 0;
3666                 margin-bottom: 5px;
3667         }
3668
3669         .panel .panel-body {
3670                 padding: 10px;
3671         }
3672
3673         .toplevel_item > .wall-item-container {
3674                 padding: 0;
3675         }
3676
3677         .wall-spacer {
3678                 height: 0px;
3679         }
3680
3681         .wall-item-actions {
3682                 margin-top: 10px;
3683         }
3684
3685         .media {
3686                 margin-top: 0;
3687         }
3688
3689         .generic-page-wrapper,
3690         .videos-content-wrapper,
3691         .suggest-content-wrapper,
3692         .help-content-wrapper,
3693         .match-content-wrapper,
3694         .dirfind-content-wrapper,
3695         .directory-content-wrapper,
3696         .delegation-content-wrapper,
3697         .notes-content-wrapper,
3698         .message-content-wrapper,
3699         .apps-content-wrapper,
3700         #adminpage,
3701         .delegate-content-wrapper,
3702         .uexport-content-wrapper,
3703         .dfrn_request-content-wrapper,
3704         .friendica-content-wrapper,
3705         .credits-content-wrapper,
3706         .nogroup-content-wrapper,
3707         .profperm-content-wrapper,
3708         .invite-content-wrapper,
3709         .tos-content-wrapper,
3710         .fsuggest-content-wrapper {
3711                 border-radius: 0;
3712                 padding: 10px;
3713         }
3714
3715         .row {
3716                 margin-right: 0;
3717         }
3718
3719         .col-lg-1,
3720         .col-lg-10,
3721         .col-lg-11,
3722         .col-lg-12,
3723         .col-lg-2,
3724         .col-lg-3,
3725         .col-lg-4,
3726         .col-lg-5,
3727         .col-lg-6,
3728         .col-lg-7,
3729         .col-lg-8,
3730         .col-lg-9,
3731         .col-md-1,
3732         .col-md-10,
3733         .col-md-11,
3734         .col-md-12,
3735         .col-md-2,
3736         .col-md-3,
3737         .col-md-4,
3738         .col-md-5,
3739         .col-md-6,
3740         .col-md-7,
3741         .col-md-8,
3742         .col-md-9,
3743         .col-sm-1,
3744         .col-sm-10,
3745         .col-sm-11,
3746         .col-sm-12,
3747         .col-sm-2,
3748         .col-sm-3,
3749         .col-sm-4,
3750         .col-sm-5,
3751         .col-sm-6,
3752         .col-sm-7,
3753         .col-sm-8,
3754         .col-sm-9,
3755         .col-xs-1,
3756         .col-xs-10,
3757         .col-xs-11,
3758         .col-xs-12,
3759         .col-xs-2,
3760         .col-xs-3,
3761         .col-xs-4,
3762         .col-xs-5,
3763         .col-xs-6,
3764         .col-xs-7,
3765         .col-xs-8,
3766         .col-xs-9 {
3767                 padding-right: 0;
3768         }
3769
3770         .wwto .contact-photo {
3771                 height: 19px;
3772                 padding: 0;
3773                 top: 24px;
3774                 left: 24px;
3775         }
3776
3777         /*
3778                 Prevent automatic zoom on input focus on iOS
3779                 see https://stackoverflow.com/a/16255670
3780         */
3781         .form-control {
3782                 font-size: 16px;
3783         }
3784
3785         .wall-item-container.thread_level_3,
3786         .wall-item-container.thread_level_4,
3787         .wall-item-container.thread_level_5,
3788         .wall-item-container.thread_level_6,
3789         .wall-item-container.thread_level_7 {
3790                 margin-left: 5px;
3791         }
3792 }