view/theme/frio/css/style.css

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