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