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         display: table;
1172 }
1173 aside .vcard .icon {
1174         display: table-cell;
1175         padding-right: 10px;
1176         width: 30px;
1177 }
1178 #profile-extra-links {
1179         overflow: auto;
1180         margin-bottom: 10px;
1181 }
1182 aside .vcard #dfrn-request-link-button,
1183 aside .vcard #wallmessage-link-botton {
1184         width: 50%;
1185         margin: 0 0 0 -5px;
1186         float: left;
1187         padding: 0 5px;
1188 }
1189 aside .vcard #dfrn-request-link,
1190 aside .vcard #wallmessage-link {
1191         width: 100%;
1192 }
1193 /* vcard-short-info */
1194 #vcard-short-info,
1195 #nav-short-info .contact-wrapper {
1196         margin-top: 2px;
1197         height: 40px;
1198         white-space: nowrap;
1199         overflow: hidden;
1200         padding-right: 20px;
1201         margin-left: -14px;
1202 }
1203 #nav-short-info .contact-photo-wrapper.media-left {
1204         float: left;
1205 }
1206 #vcard-short-photo-wrapper img,
1207 #nav-short-info .contact-wrapper img {
1208         height: 34px;
1209         width: 34px;
1210         border-radius: 3px;
1211 }
1212 #vcard-short-desc,
1213 #nav-short-info .contact-wrapper .media-body {
1214         display: block;
1215         height: 34px;
1216         width: 100%;
1217         text-overflow: ellipsis;
1218 }
1219 #vcard-short-desc > .media-heading,
1220 #vcard-short-desc > .vcard-short-addr,
1221 #nav-short-info .contact-wrapper .media-heading,
1222 #nav-short-info .contact-wrapper #contact-entry-url-network {
1223         text-overflow: ellipsis;
1224         overflow: hidden;
1225 }
1226 #vcard-short-desc > .media-heading,
1227 #nav-short-info .contact-wrapper .media-heading {
1228         margin-bottom: 1px;
1229         font-weight: bold;
1230 }
1231 #nav-short-info .contact-wrapper .media-heading a {
1232         color: $font_color_darker;
1233         font-size: 14px !important;
1234 }
1235 #vcard-short-desc > .vcard-short-addr,
1236 #nav-short-info .contact-wrapper #contact-entry-url-network {
1237         color: $font_color;
1238         font-size: 12px;
1239 }
1240 .network-content-wrapper > #viewcontact_wrapper-network,
1241 #nav-short-info .contact-wrapper .contact-photo-overlay,
1242 #nav-short-info .contact-wrapper .contact-actions {
1243         display: none;
1244 }
1245
1246 aside #peoplefind-sidebar input,
1247 aside #follow-sidebar input {
1248         height: 30px;
1249         background-position: 10px 5px;
1250 }
1251 aside #peoplefind-sidebar label,
1252 aside #follow-sidebar label {
1253         font-weight: normal;
1254 }
1255 aside #peoplefind-sidebar .form-group-search .form-button-search,
1256 aside #follow-sidebar .form-group-search .form-button-search {
1257         padding: 2px 8px;
1258 }
1259
1260 div#sidebar-group-header h3 {
1261         float: left;
1262 }
1263
1264 div#sidebar-group-list {
1265         clear: both;
1266 }
1267
1268 .group-new-form {
1269         clear: both;
1270 }
1271
1272 .group-edit-tool {
1273         color: $font_color_darker;
1274 }
1275
1276 .faded-icon {
1277         color: $font_color_darker;
1278         opacity: 0.3;
1279         transition: all 0.1s ease-in-out;
1280 }
1281 .faded-icon:hover {
1282         color: $font_color_darker;
1283         opacity: 1;
1284 }
1285 .icon-padding {
1286         margin-left: 20px;
1287 }
1288
1289 aside #group-sidebar .sidebar-group-li:hover .group-edit-tool.faded-icon,
1290 aside #saved-search-list .saved-search-li:hover .savedsearchdrop.faded-icon,
1291 aside .widget:hover .widget-action.faded-icon {
1292         opacity: 0.8;
1293         transition: all 0.25s ease-in-out;
1294 }
1295 aside #group-sidebar .sidebar-group-li .group-edit-tool.faded-icon:hover,
1296 aside #saved-search-list .saved-search-li .savedsearchdrop.faded-icon:hover,
1297 aside .widget .widget-action.faded-icon:hover {
1298         opacity: 1;
1299 }
1300 aside #group-sidebar li .group-checkbox {
1301         margin: 0;
1302 }
1303 aside #group-sidebar li .group-edit-tool {
1304         padding-right: 10px;
1305 }
1306 aside #group-sidebar li .group-edit-tool:first-child {
1307         padding-right: 0px;
1308 }
1309
1310 /* contact block widget */
1311 .contact-block-content {
1312         clear: both;
1313         overflow: auto;
1314         height: auto;
1315 }
1316 .contact-block-div {
1317         float: left;
1318         margin: 0px 5px 5px 0px;
1319 }
1320 .contact-block-link {
1321 }
1322 .contact-block-img {
1323         height: 75px;
1324         width: 75px;
1325         border-radius: 4px;
1326 }
1327
1328 /* Tag cloud widget */
1329 .tagblock.widget > .tag-cloud {
1330         text-align: center;
1331 }
1332 /* Section */
1333 section ul.tabs {
1334         display: none !important;
1335 }
1336
1337 /* Jot */
1338 section #jotOpen {
1339         display: none;
1340 }
1341 #jotOpen {
1342         margin-top: 3px;
1343         float: right;
1344 }
1345 #jot-content {
1346         display: none;
1347 }
1348 .modal #jot-sections {
1349         max-height: calc(100vh - 22px);
1350 }
1351 @media (min-width: 768px) {
1352         .modal #jot-sections {
1353                 max-height: calc(100vh - 62px);
1354         }
1355 }
1356 #jot-modal #jot-sections,
1357 #jot-modal #jot-modal-body,
1358 #jot-modal #profile-jot-form,
1359 #jot-modal #profile-jot-wrapper,
1360 #jot-modal #jot-text-wrap,
1361 #jot-modal #jot-preview-content,
1362 #jot-modal #tread-wrapper--1,
1363 #jot-modal #item-Q0,
1364 #jot-modal #profile-jot-acl-wrapper,
1365 #jot-modal #acl-wrapper {
1366         overflow: hidden;
1367         display: flex;
1368         flex: auto;
1369         flex-direction: column;
1370 }
1371 #jot-modal .modal-header a,
1372 #jot-modal .modal-header .btn-link,
1373 #profile-jot-submit-wrapper a,
1374 #profile-jot-submit-wrapper .btn-link {
1375         color: $font_color_darker;
1376 }
1377 #jot-modal .modal-header {
1378         border-bottom: none;
1379 }
1380 #jot-modal .modal-header .compose-link {
1381         float: right;
1382         margin-right: 20px;
1383 }
1384 #jot-title-wrap,
1385 #jot-category-wrap {
1386         margin-bottom: 5px;
1387 }
1388 #jot-text-wrap {
1389         margin-top: 20px;
1390 }
1391 #jot-text-wrap textarea {
1392         min-height: 100px;
1393         overflow-y: auto !important;
1394         overflow-y: overlay !important;
1395 }
1396 #jot-text-wrap .preview textarea {
1397         width: 100%;
1398 }
1399 #preview_profile-jot-text,
1400 .comment-edit-form .preview {
1401         position: relative;
1402         padding: 0px 10px;
1403         margin-top: -2px;
1404         border: 2px solid #ededed;
1405         border-top: none;
1406         box-shadow: none;
1407         border-radius: 0 0 4px 4px;
1408         background: #fff;
1409         color: $font_color_darker;
1410 }
1411 textarea#profile-jot-text:focus + #preview_profile-jot-text,
1412 textarea.comment-edit-text:focus + .comment-edit-form .preview {
1413         border: 2px solid #6fdbe8;
1414         border-top: none;
1415 }
1416 .preview hr.previewseparator {
1417         margin-top: 0px;
1418         border-color: #d2d2d2;
1419 }
1420 #previewImgBtn_profile-jot-text,
1421 .closePreview {
1422         position: absolute;
1423         top: 15px;
1424 }
1425 .closePreview {
1426         right: 15px;
1427         z-index: 1;
1428 }
1429 .previewImgBtn {
1430         left: 15px;
1431 }
1432 .preview button.previewActionBtn {
1433         display: block;
1434         height: 25px;
1435         width: 25px;
1436         border-radius: 50%;
1437         color: #fff;
1438         border: 2px solid #fff;
1439         box-shadow: 0 0 3px gray;
1440         background: #777;
1441         text-align: center;
1442         line-height: 2px;
1443         text-decoration: none;
1444         padding: 0 0 1px 1px;
1445         opacity: 0.7;
1446 }
1447 .preview button.previewActionBtn:hover {
1448         opacity: 1;
1449 }
1450 .preview .closePreview button.previewActionBtn {
1451         font-size: 25px;
1452 }
1453 #previewInputTitle_profile-jot-text {
1454         width: 100%;
1455 }
1456 #profile-jot-wrapper button#profile-jot-submit {
1457         margin-top: 5px;
1458 }
1459 #profile-jot-wrapper #character-counter {
1460         padding: 10px 15px;
1461 }
1462 .modal .wall-item-container.preview {
1463         overflow-y: auto;
1464         overflow-y: overlay;
1465 }
1466 /* ACL */
1467 .fa.lock:before {
1468         font-family: ForkAwesome;
1469         content: "\f023";
1470 }
1471 .fa.unlock:before {
1472         font-family: ForkAwesome;
1473         content: "\f09c";
1474 }
1475
1476 #acl-wrapper label.panel-heading {
1477         display: block;
1478         margin-bottom: 0;
1479         cursor: pointer;
1480 }
1481
1482 /* Filebrowser */
1483 .fbrowser .breadcrumb {
1484         margin-bottom: 0px;
1485 }
1486 .fbrowser .path a:before {
1487         content: "";
1488         padding: 0;
1489 }
1490 .fbrowser .breadcrumb > li:last-of-type a {
1491         color: $font_color;
1492         pointer-events: none;
1493         cursor: default;
1494 }
1495 .fbrowser .folders {
1496         box-shadow: -1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
1497         padding-right: 1px;
1498 }
1499 .fbrowser .folders ul {
1500         padding: 0px;
1501         margin-left: -15px;
1502         margin-bottom: 0px;
1503         overflow-y: auto;
1504         min-width: 100px;
1505         max-height: calc(100vh - 210px);
1506         line-height: 1.3;
1507 }
1508 @media (min-width: 768px) {
1509         .fbrowser .folders ul {
1510                 max-height: calc(100vh - 255px);
1511         }
1512 }
1513 .fbrowser .folders li {
1514         padding-left: 20px;
1515         padding-right: 10px;
1516         padding-top: 3px;
1517         padding-bottom: 3px;
1518 }
1519 .fbrowser .folders li:hover {
1520         z-index: 2;
1521         color: $font_color_darker;
1522         background-color: rgba(247, 247, 247, $contentbg_transp);
1523         border-left: 3px solid $link_color;
1524         padding-left: 17px;
1525 }
1526 .fbrowser .folders li a,
1527 .fbrowser .folders li a:hover {
1528         color: $font_color_darker;
1529         font-size: 13px;
1530 }
1531 .fbrowser .folders + .list {
1532         padding-left: 10px;
1533 }
1534 .fbrowser .fbrowser-content-container {
1535         overflow-y: auto;
1536         max-height: calc(100vh - 175px);
1537 }
1538 @media (min-width: 768px) {
1539         .fbrowser .fbrowser-content-container {
1540                 max-height: calc(100vh - 220px);
1541         }
1542 }
1543 .fbrowser.image .photo-album-image-wrapper {
1544         box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2);
1545 }
1546 .fbrowser.image .photo-album-image-wrapper .caption {
1547         pointer-events: none;
1548 }
1549 .fbrowser .profile-rotator-wrapper {
1550         min-height: 200px;
1551 }
1552 .fbrowser .fa-spin {
1553         position: absolute;
1554         left: 45%;
1555         top: 40%;
1556         font-size: 48px;
1557         margin: 0px auto;
1558 }
1559
1560 /*
1561 /* Stream
1562 */
1563 .panel {
1564         border: none;
1565         background-color: rgba(255, 255, 255, $contentbg_transp);
1566         box-shadow: 0 0 2px #dadada;
1567         -webkit-box-shadow: 0 0 2px #dadada;
1568         -moz-box-shadow: 0 0 2px #dadada;
1569         border-radius: 4px;
1570         position: relative;
1571 }
1572 .panel.panel-inline {
1573         margin-left: -15px;
1574         margin-right: -15px;
1575         margin-top: 15px;
1576         padding: 15px;
1577 }
1578 .panel .panel-body {
1579         word-wrap: break-word;
1580 }
1581 .tread-wrapper .media {
1582         overflow: visible;
1583         word-wrap: break-word;
1584 }
1585 aside .panel-body {
1586         padding: 0px;
1587 }
1588
1589 /* Thread hover effects */
1590 .desktop-view .wall-item-container .wall-item-content a,
1591 .desktop-view .wall-item-name,
1592 .desktop-view .wall-item-container .fakelink,
1593 .desktop-view .toplevel_item .fakelink,
1594 .desktop-view .toplevel_item .wall-item-container .wall-item-responses a {
1595         color: $font_color;
1596         -webkit-transition: all 0.25s ease-in-out;
1597         -moz-transition: all 0.25s ease-in-out;
1598         -o-transition: all 0.25s ease-in-out;
1599         -ms-transition: all 0.25s ease-in-out;
1600         transition: all 0.25s ease-in-out;
1601 }
1602
1603 .toplevel_item:hover .fakelink,
1604 .wall-item-container:hover .fakelink,
1605 .toplevel_item:hover .wall-item-container:hover .wall-item-responses a,
1606 .toplevel_item:hover .wall-item-content a,
1607 .toplevel_item:hover .wall-item-name,
1608 .wall-item-container:hover .wall-item-content a,
1609 .wall-item-container:hover .wall-item-name,
1610 .wall-item-container:hover .wall-item-location a {
1611         color: $link_color;
1612         -webkit-transition: all 0.25s ease-in-out;
1613         -moz-transition: all 0.25s ease-in-out;
1614         -o-transition: all 0.25s ease-in-out;
1615         -ms-transition: all 0.25s ease-in-out;
1616         transition: all 0.25s ease-in-out;
1617 }
1618
1619 /* wall items */
1620 .wall-item-container {
1621         border-top: 1px solid rgba(255, 255, 255, 0.8);
1622 }
1623
1624 .wall-item-container.panel-body {
1625         padding: 0;
1626         border-top: none;
1627 }
1628
1629 .comment-edit-preview .wall-item-container.panel-body.preview {
1630         margin-top: 4px;
1631 }
1632 .comment-edit-preview .panel {
1633         margin-bottom: 0;
1634 }
1635
1636 .wall-item-container .media {
1637         margin-top: 0;
1638         padding: 10px;
1639         background-color: rgba(0, 0, 0, 0.03);
1640 }
1641
1642 /* wall items contact photo */
1643 .contact-photo {
1644         height: 48px;
1645         width: 48px;
1646         border-radius: 3px;
1647         /*maybe some adional stuff is needed for the different screen sizes */
1648 }
1649 .contact-photo-image-wrapper {
1650         width: 100%;
1651         height: 100%;
1652         overflow: hidden;
1653         position: relative;
1654         text-align: center;
1655 }
1656 .contact-photo-overlay {
1657         width: 100%;
1658         height: 100%;
1659         position: absolute;
1660         overflow: hidden;
1661         top: 0;
1662         left: 0;
1663         border-radius: 3px;
1664         background: rgba(0, 0, 0, 0.5);
1665         text-align: center;
1666         opacity: 0;
1667         -webkit-transition: opacity 0.25s ease;
1668         -moz-transition: opacity 0.25s ease;
1669 }
1670 .contact-photo-overlay:hover {
1671         opacity: 1;
1672 }
1673 .contact-photo-overlay-content {
1674         font-size: 26px;
1675         text-shadow: 1px 1px 1px #ccc;
1676         color: rgba(255, 255, 255, 0.85);
1677         height: 100%;
1678         vertical-align: bottom;
1679 }
1680 .contact-photo-xs {
1681         height: 38px;
1682         width: 38px;
1683         border-radius: 3px;
1684 }
1685 .wwto .contact-photo {
1686         width: auto;
1687         height: 25px;
1688         font-size: 8.8px;
1689         border-radius: 2px;
1690         position: absolute;
1691         top: 28px;
1692         left: 28px;
1693         display: inline-block;
1694 }
1695
1696 /* wall items action dropdown menu */
1697 .media [role="heading"] {
1698         position: relative;
1699 }
1700
1701 /* Workaround for Firefox where the post heading covers the avatar, preventing hovercard interaction,
1702  48px is the width of the avatar image and should be adjusted accordingly if it ever changes. */
1703 .media .dropdown.pull-left + [role="heading"] {
1704         margin-left: 48px;
1705 }
1706
1707 .preferences {
1708         position: absolute;
1709         right: 0;
1710         top: 0;
1711 }
1712 .shared_header .preferences {
1713         top: 7px;
1714         right: 9px;
1715 }
1716 .wall-item-network {
1717         font-size: 13px;
1718 }
1719
1720 /* wall items contact info */
1721 .media .media-body {
1722         font-size: 13px;
1723 }
1724 .media .media-body h4.media-heading {
1725         font-size: 14px;
1726         font-weight: 500;
1727         color: $font_color_darker;
1728 }
1729 .media .media-body .addional-info a,
1730 .media .media-body h5.media-heading > a {
1731         display: block;
1732 }
1733 .media .contact-info-comment {
1734         display: table-cell;
1735 }
1736 .media .contact-info-xs h5,
1737 .media .contact-info-comment {
1738         margin: 0 0 5px;
1739 }
1740 .media-heading {
1741         margin: 0 0 5px;
1742 }
1743 .wall-item-name,
1744 .shared-author {
1745         font-size: 15px;
1746         font-weight: bold;
1747 }
1748 .wall-item-name.xs {
1749         font-weight: 700;
1750         font-size: 14px;
1751 }
1752
1753 /* Contact avatar click card */
1754 .userinfo.click-card {
1755         position: relative;
1756 }
1757
1758 .userinfo.click-card > *:hover:after {
1759         content: "⌄";
1760         color: #bebebe;
1761         font-size: 1em;
1762         font-weight: bold;
1763         background-color: #ffffff;
1764         text-align: center;
1765         line-height: 40%;
1766         position: absolute;
1767         top: 0;
1768         left: 0;
1769         width: 33%;
1770         height: 33%;
1771         opacity: 0.8;
1772         border-radius: 0 0 40% 0;
1773 }
1774
1775 /* The lock symbol popup */
1776 #panel {
1777         position: absolute;
1778         list-style: none;
1779         background-color: $nav_bg;
1780         border: none;
1781         border-radius: 3px;
1782         float: left;
1783         min-width: 160px;
1784         max-width: 220px;
1785         padding: 10px;
1786         margin: 2px 0 0;
1787         font-size: 14px;
1788         text-align: left;
1789         color: $nav_icon_color;
1790         z-index: 1000;
1791 }
1792
1793 /* Space between content and head */
1794 .wall-spacer {
1795         height: 10px;
1796 }
1797
1798 /* wall items content */
1799 .wall-item-content {
1800         word-break: break-word;
1801 }
1802 .wall-item-content img {
1803         object-fit: contain;
1804 }
1805 .wall-item-body > img,
1806 .wall-item-body > a > img {
1807         border-radius: 3px;
1808 }
1809 .wall-item-body .body-attach > a {
1810         color: $font_color_darker;
1811         display: inline-block;
1812 }
1813 .wall-item-body .body-attach > a div {
1814         color: $font_color_darker;
1815         width: 20px;
1816 }
1817
1818 /* wall-item content elements */
1819 .shared-wrapper {
1820         position: relative;
1821         margin-top: 10px;
1822         margin-bottom: 0;
1823 }
1824 .vevent {
1825         padding: 10px;
1826         box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.1) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
1827 }
1828 @media screen and (max-width: 767px) {
1829         .vevent {
1830                 margin-left: 0px;
1831                 margin-right: 0px;
1832         }
1833         .shared-wrapper {
1834                 margin: 5px -10px 0;
1835         }
1836 }
1837 .vevent:hover {
1838         box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
1839 }
1840 .shared_header {
1841         margin-left: 0px;
1842         margin-top: 0px;
1843         padding-top: 0px;
1844         margin-bottom: 10px;
1845         border-top: none;
1846         color: inherit;
1847 }
1848 blockquote.shared_content {
1849         padding: 0px;
1850         margin-left: 0px;
1851         color: inherit;
1852 }
1853 code > .hl-main {
1854         padding: 10px 10px 1px 0;
1855 }
1856 .hl-main ol {
1857         line-height: 1.7;
1858 }
1859 .type-link img.attachment-image {
1860         width: 100%;
1861 }
1862 .type-link blockquote,
1863 .type-video blockquote {
1864         margin: 0;
1865         padding: 10px 0;
1866 }
1867 .oembed.video .embed_video > div::before {
1868         font-family: ForkAwesome;
1869         font-weight: normal;
1870         font-style: normal;
1871         display: inline-block;
1872         text-decoration: inherit;
1873         vertical-align: top;
1874         font-size: 3em;
1875         content: "\f01d";
1876         color: #fff;
1877         bottom: 0px;
1878         right: 10px;
1879         position: absolute;
1880 }
1881 .oembed.video .embed_video > div {
1882         background-color: rgba(0, 0, 0, 0.2);
1883         -webkit-transition: all 0.25s ease-in-out;
1884         -moz-transition: all 0.25s ease-in-out;
1885         -o-transition: all 0.25s ease-in-out;
1886         -ms-transition: all 0.25s ease-in-out;
1887         transition: all 0.25s ease-in-out;
1888 }
1889 .oembed.video .embed_video > div:hover {
1890         background-color: rgba(0, 0, 0, 0);
1891 }
1892 .oembed.video .embed_video.active {
1893         margin: 1em 0;
1894 }
1895 .oembed.video .embed_video.active iframe {
1896         width: 100% !important;
1897 }
1898 .wall-item-tags,
1899 .itemedited {
1900         margin: 10px 0;
1901         font-size: 13px;
1902 }
1903
1904 .wall-item-tags a {
1905         color: $font_color_darker;
1906 }
1907
1908 .wall-item-tags a:hover {
1909         text-decoration: none;
1910 }
1911 .wall-item-bottom .label,
1912 .wall-item-bottom .label a {
1913         color: #fff;
1914 }
1915 .wall-item-tags .category,
1916 .wall-item-tags .folder {
1917         margin-right: 3px;
1918 }
1919
1920 /* item social action buttons */
1921 .wall-item-actions {
1922         display: flex;
1923         margin: 0;
1924         justify-content: space-between;
1925 }
1926 .wall-item-actions a,
1927 .wall-item-actions button {
1928         font-size: 13px;
1929         color: $font_color_darker;
1930 }
1931 .wall-item-actions .active {
1932         font-weight: bold;
1933         color: $link_color;
1934 }
1935 .wall-item-actions-left {
1936         display: table-cell;
1937         vertical-align: middle;
1938 }
1939 .wall-item-actions-right {
1940         display: flex;
1941 }
1942 .wall-item-actions .checkbox {
1943         margin: 0;
1944         margin-left: 20px;
1945 }
1946 .wall-item-actions button:hover {
1947         color: $font_color_darker;
1948         text-decoration: underline;
1949 }
1950 .wall-item-actions .separator {
1951         margin: 0 0.3em;
1952 }
1953
1954 .wall-item-responses > div > p {
1955         margin: 0;
1956 }
1957
1958 /* wall item hover effects */
1959
1960 @media (min-width: 768px) {
1961         /* Tags and mentions */
1962         .wall-item-container .wall-item-bottom .wall-item-tags span.label {
1963                 filter: grayscale(0.5);
1964                 opacity: 0.8;
1965
1966                 -webkit-transition: all 0.25s ease-in-out;
1967                 -moz-transition: all 0.25s ease-in-out;
1968                 -o-transition: all 0.25s ease-in-out;
1969                 -ms-transition: all 0.25s ease-in-out;
1970                 transition: all 0.25s ease-in-out;
1971         }
1972
1973         .wall-item-container:hover .wall-item-bottom .wall-item-tags span.label {
1974                 filter: grayscale(0);
1975                 opacity: 1;
1976
1977                 -webkit-transition: all 0.25s ease-in-out;
1978                 -moz-transition: all 0.25s ease-in-out;
1979                 -o-transition: all 0.25s ease-in-out;
1980                 -ms-transition: all 0.25s ease-in-out;
1981                 transition: all 0.25s ease-in-out;
1982         }
1983         /* Like/Comment/etc buttons */
1984         .wall-item-container .wall-item-links,
1985         .wall-item-container .wall-item-actions button > a {
1986                 opacity: 0.4;
1987
1988                 -webkit-transition: all 0.25s ease-in-out;
1989                 -moz-transition: all 0.25s ease-in-out;
1990                 -o-transition: all 0.25s ease-in-out;
1991                 -ms-transition: all 0.25s ease-in-out;
1992                 transition: all 0.25s ease-in-out;
1993         }
1994         .wall-item-container:hover .wall-item-links,
1995         .wall-item-container:hover .wall-item-actions button > a {
1996                 opacity: 1;
1997
1998                 -webkit-transition: all 0.25s ease-in-out;
1999                 -moz-transition: all 0.25s ease-in-out;
2000                 -o-transition: all 0.25s ease-in-out;
2001                 -ms-transition: all 0.25s ease-in-out;
2002                 transition: all 0.25s ease-in-out;
2003         }
2004         .wall-item-container .wall-item-body .body-attach > a:hover {
2005                 opacity: 1;
2006         }
2007 }
2008
2009 /*
2010 * Comments
2011 */
2012 wall-item-comment-wrapper.well {
2013         border: none;
2014         box-shadow: none;
2015         background-color: rgba(237, 237, 237, $contentbg_transp);
2016         background-image: none;
2017         margin-bottom: 1px;
2018         background-color: red;
2019 }
2020 wall-item-comment-wrapper.well-small {
2021         padding: 10px;
2022         border-radius: 3px;
2023 }
2024 wall-item-comment-wrapper.well hr {
2025         border-top: 1px solid #d9d9d9;
2026 }
2027 .wall-entry wall-item-comment-wrapper.well {
2028         margin-bottom: 0;
2029 }
2030 .comment-container {
2031         margin-bottom: 0px;
2032         border-top-left-radius: 3px;
2033         border-top-right-radius: 3px;
2034         border-bottom-right-radius: 0px;
2035         border-bottom-left-radius: 0px;
2036 }
2037 .comment .media {
2038         position: relative !important;
2039         margin-top: 0;
2040 }
2041 .hide-comments-outer {
2042         background-color: rgba(0, 0, 0, 0.03);
2043         padding: 0.5em;
2044         border-radius: 0.5em 0.5em 0 0;
2045 }
2046 .hide-comments-total {
2047         cursor: pointer;
2048 }
2049
2050 /*
2051 * Comment Box
2052 */
2053
2054 .comment-fake-form,
2055 .wall-item-comment-wrapper {
2056         padding: 10px;
2057         border-top: 1px solid rgba(255, 255, 255, 0.8);
2058         background-color: rgba(0, 0, 0, 0.03);
2059         border-radius: 0 0 4px 4px;
2060         margin-bottom: 0;
2061 }
2062
2063 .comment-fake-form {
2064         border-color: #d9d9d9;
2065 }
2066 .comment-fake-form textarea {
2067         resize: none;
2068 }
2069
2070 .comment-container .wall-item-comment-wrapper {
2071         margin-top: 0.5em;
2072 }
2073
2074 .comment-edit-form textarea {
2075         resize: vertical;
2076 }
2077
2078 .comment-edit-submit-wrapper {
2079         text-align: right;
2080         margin-bottom: 0;
2081 }
2082
2083 .comment-icon-list {
2084         display: flex;
2085         justify-content: space-between;
2086 }
2087
2088 /* acpopup  + textcompletion*/
2089 .acpopup {
2090         background-color: #ffffff;
2091         border-radius: 4px;
2092         overflow: auto;
2093         z-index: 100000;
2094         box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
2095 }
2096 nav .acpopup {
2097         margin-left: -23px;
2098 }
2099 /** @todo: we schould consider the possebility to overwrite bootstrap dropdowns
2100  at the beginning of this file to get rid of the !important */
2101 .textcomplete-item > a {
2102         color: $font_color_darker !important;
2103         padding: 5px 20px !important;
2104 }
2105 .textcomplete-item.active > a {
2106         background-color: rgb(247, 247, 247) !important;
2107         background-image: none !important;
2108         border-left: 3px solid $link_color;
2109         padding-left: 17px !important;
2110 }
2111 .textcomplete-item a .forum {
2112         color: $link_color;
2113 }
2114 img.acpopup-img {
2115         border-radius: 4px;
2116 }
2117
2118 /* The wall-item thread levels */
2119 .wall-item-container.thread_level_3,
2120 .wall-item-container.thread_level_4,
2121 .wall-item-container.thread_level_5,
2122 .wall-item-container.thread_level_6,
2123 .wall-item-container.thread_level_7 {
2124         margin-left: 15px;
2125 }
2126
2127 /* Birthday */
2128 #birthday-notice,
2129 #birthday-wrapper {
2130         margin-bottom: 5px;
2131         padding: 10px;
2132         border: none;
2133         background-color: rgba(247, 247, 247, $contentbg_transp);
2134         box-shadow: 0 0 3px #dadada;
2135         -webkit-box-shadow: 0 0 3px #dadada;
2136         -moz-box-shadow: 0 0 3px #dadada;
2137         border-radius: 4px;
2138 }
2139
2140 /* Menubar Tabs */
2141 section > .tabbar-wrapper {
2142         /* The tabbar shouldn't' be visibile inside
2143 the section element. Only after we have
2144 moved it to the nav through js */
2145         display: none !important;
2146 }
2147 #tabmenu,
2148 .tabbar-wrapper,
2149 .tabbar,
2150 .tabbar > li {
2151         height: 100%;
2152         padding: 0;
2153 }
2154 #tabmenu .search-heading {
2155         overflow: hidden;
2156         text-overflow: ellipsis;
2157         white-space: nowrap;
2158 }
2159 ul.tabs {
2160         list-style: none;
2161         height: 100%;
2162         padding: 0;
2163         padding-top: 10px;
2164         margin: 0;
2165 }
2166 ul.tabs li {
2167         float: left;
2168         margin: 0;
2169         padding: 0;
2170         border-bottom: 0 solid $link_color;
2171         font-size: 13px;
2172         height: 102%;
2173         transition: all 0.15s ease;
2174 }
2175 ul.tabs li a {
2176         margin-left: 10px;
2177         margin-right: 10px;
2178 }
2179 ul.tabs li:hover,
2180 ul.tabs li.active {
2181         border-bottom-width: 4px;
2182 }
2183 .tabbar.visible-xs .tabs-extended {
2184         padding-top: 0;
2185 }
2186 #dropdownMenuTools-xs {
2187         padding: 9px 10px;
2188 }
2189 ul.tabbar ul.tabs-extended:hover li.dropdown {
2190         border-bottom: 0;
2191 }
2192
2193 ul.tabbar ul.tabs-extended li.active {
2194         width: 100%;
2195         border-bottom-width: 2px;
2196 }
2197 ul.tabbar ul.tabs-extended li.active a {
2198         background: none;
2199 }
2200 ul.dropdown-menu li:hover {
2201         border-bottom: 0;
2202 }
2203 .dropdown-menu li {
2204         display: block;
2205         width: 100%;
2206         box-sizing: border-box;
2207 }
2208 /* Dropdown Menu */
2209 .dropdown-menu li a,
2210 .dropdown-menu li .btn-link {
2211         color: $font_color_darker;
2212 }
2213 .dropdown-menu li > :hover,
2214 .dropdown-menu li > :visited,
2215 .dropdown-menu li > :focus {
2216         background: 0 0;
2217 }
2218
2219 .dropdown-menu li:first-child {
2220         margin-top: 3px;
2221 }
2222
2223 /* Notificaiotn badges */
2224 #mail-update-li.show {
2225         display: inline-block !important;
2226 }
2227
2228 /* Media Classes */
2229 p.wall-item-announce,
2230 .media .time,
2231 .media .shared-time,
2232 .media .delivery,
2233 .media .location,
2234 .media .location a {
2235         font-size: 11px;
2236         color: $font_color_darker;
2237 }
2238 .media-list > li {
2239         padding: 10px;
2240         border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2241         position: relative;
2242         border-left: 3px solid rgba(255, 255, 255, 0);
2243         font-size: 12px;
2244 }
2245 .media-list > li:hover,
2246 .media-list > li.selected,
2247 .media-list > li.active {
2248         border-left: 3px solid $link_color;
2249         background-color: rgba(247, 247, 247, $contentbg_transp);
2250 }
2251
2252 /* Forms */
2253 .form-control {
2254         box-shadow: none;
2255 }
2256 .form-control:focus {
2257         border: 2px solid $link_color;
2258         box-shadow: none;
2259 }
2260
2261 .radio label::before,
2262 .checkbox label::before {
2263         background-color: rgba(255, 255, 255, $contentbg_transp);
2264 }
2265 .radio label::after {
2266         background-color: $link_color;
2267 }
2268 .checkbox label::after {
2269         color: $link_color;
2270 }
2271
2272 .checkbox input[type="checkbox"]:focus + label::before,
2273 .radio input[type="radio"]:focus + label::before {
2274         outline-color: $link_hover_color;
2275 }
2276
2277 .help-block {
2278         color: $font_color_darker;
2279 }
2280
2281 input[type="range"].form-control {
2282         padding-left: 0;
2283         padding-right: 0;
2284 }
2285
2286 /* Search form */
2287 .form-control.form-search {
2288         border-radius: 30px;
2289         background-image: url(img/icon_search16x16.png);
2290         background-repeat: no-repeat;
2291         background-position: 10px 8px;
2292         padding-left: 34px;
2293 }
2294 .form-group-search {
2295         position: relative;
2296         width: 100%;
2297 }
2298
2299 .form-group-search .form-button-search {
2300         position: absolute;
2301         top: 4px;
2302         right: 4px;
2303         border-radius: 30px;
2304 }
2305 .search-input.form-control.form-search {
2306         width: 100%;
2307 }
2308 .search-heading {
2309         text-align: center;
2310         color: $link_color;
2311         font-size: 20px;
2312 }
2313 .search-content-wrapper > #search-header-wrapper {
2314         display: none;
2315 }
2316 .search-content-wrapper > .section-title-wrapper {
2317         display: none;
2318 }
2319 #navbar-button > #search-save {
2320         margin-top: 3px;
2321 }
2322 /* Section-Content-Wrapper */
2323 #search-header-wrapper {
2324         padding: 15px;
2325         padding-bottom: 20px;
2326         margin-bottom: 20px;
2327         border: none;
2328         background-color: rgba(255, 255, 255, $contentbg_transp);
2329         border-radius: 4px;
2330         position: relative;
2331         color: $font_color_darker;
2332         box-shadow: 0 0 3px #dadada;
2333         -webkit-box-shadow: 0 0 3px #dadada;
2334         -moz-box-shadow: 0 0 3px #dadada;
2335 }
2336
2337 /* *******
2338  * PAGES
2339  *********/
2340
2341 section > .generic-page-wrapper,
2342 .videos-content-wrapper,
2343 .suggest-content-wrapper,
2344 .help-content-wrapper,
2345 .match-content-wrapper,
2346 .dirfind-content-wrapper,
2347 .delegation-content-wrapper,
2348 .notes-content-wrapper,
2349 .message-content-wrapper,
2350 .apps-content-wrapper,
2351 #adminpage,
2352 .delegate-content-wrapper,
2353 .uexport-content-wrapper,
2354 .dfrn_request-content-wrapper,
2355 .friendica-content-wrapper,
2356 .credits-content-wrapper,
2357 .nogroup-content-wrapper,
2358 .profperm-content-wrapper,
2359 .invite-content-wrapper,
2360 .tos-content-wrapper,
2361 .fsuggest-content-wrapper {
2362         min-height: calc(100vh - 150px);
2363         padding: 15px;
2364         padding-bottom: 20px;
2365         margin-bottom: 20px;
2366         border: none;
2367         background-color: rgba(255, 255, 255, $contentbg_transp);
2368         border-radius: 4px;
2369         position: relative;
2370         color: $font_color_darker;
2371         box-shadow: 0 0 3px #dadada;
2372         -webkit-box-shadow: 0 0 3px #dadada;
2373         -moz-box-shadow: 0 0 3px #dadada;
2374 }
2375 #content:hover .page-action.faded-icon {
2376         opacity: 0.8;
2377         transition: all 0.25s ease-in-out;
2378 }
2379 #content .page-action.faded-icon:hover {
2380         opacity: 1;
2381 }
2382
2383 .section-title-wrapper {
2384         overflow: hidden;
2385 }
2386 /* Home and Login Page */
2387 body.mod-home nav.navbar .nav > li > a:hover {
2388         background-color: rgba(255, 255, 255, 0.2);
2389 }
2390 body.mod-home .navbar #nav-login,
2391 body.mod-login .navbar #nav-login {
2392         display: none;
2393 }
2394 /* Profile-page */
2395 #profile-content-standard,
2396 #profile-content-advanced {
2397         overflow: hidden;
2398 }
2399 #profile-menu {
2400         margin-top: 20px;
2401         margin-bottom: 20px;
2402 }
2403 .contact-block-div.forumlist-profile-advanced {
2404         float: left;
2405 }
2406
2407 /* contacts page */
2408 ul.viewcontact_wrapper {
2409         margin-left: -15px;
2410         margin-right: -15px;
2411 }
2412 ul.viewcontact_wrapper > li {
2413         padding-left: 15px;
2414 }
2415 .contact-wrapper .contact-photo-wrapper button {
2416         padding: 0;
2417 }
2418 .contact-wrapper.media {
2419         overflow: visible;
2420         word-wrap: break-word;
2421         margin-top: 0;
2422 }
2423 /* bootstrap hack for .media */
2424 .contact-wrapper.media .media-body {
2425         display: table-cell;
2426         width: 10000px;
2427         *width: auto;
2428         *zoom: 1;
2429 }
2430 .contact-wrapper.media:before,
2431 .media:after {
2432         content: "";
2433         display: table;
2434 }
2435 .contact-wrapper.media:after {
2436         clear: both;
2437 }
2438 .contact-wrapper .contact-photo-image-wrapper img.contact-photo.xl {
2439         height: 80px;
2440         width: 80px;
2441 }
2442 .contact-wrapper .contact-photo-image-wrapper img.contact-photo-xs {
2443         height: 48px;
2444         width: 48px;
2445 }
2446 .contact-wrapper .contact-photo-overlay-content.xl {
2447         font-size: 48px;
2448 }
2449 .contact-wrapper .contact-photo-menu {
2450         top: auto;
2451 }
2452
2453 .contact-entry-desc {
2454         color: $font_color_darker;
2455 }
2456 .contact-entry-checkbox {
2457         margin-top: -20px;
2458 }
2459 .contact-wrapper .media-body .contact-entry-name h4.media-heading a {
2460         font-weight: bold !important;
2461         color: $link_color;
2462         font-size: 15px !important;
2463 }
2464 .contact-wrapper .contact-actions {
2465         display: flex;
2466 }
2467 .contact-wrapper .contact-action-link,
2468 .contact-wrapper .contact-action-link:hover,
2469 .textcomplete-item .contact-wrapper .contact-action-link {
2470         padding: 0 5px;
2471         color: $font_color_darker;
2472         border: 0;
2473 }
2474 .contact-wrapper .contact-action-link {
2475         opacity: 0.1;
2476         transition: all 0.25s ease-in-out;
2477 }
2478 ul li:hover .contact-wrapper .contact-action-link {
2479         opacity: 0.8;
2480         transition: all 0.25s ease-in-out;
2481 }
2482 ul li:hover .contact-wrapper .contact-action-link:hover {
2483         opacity: 1;
2484 }
2485 #contacts-search-wrapper,
2486 #directory-search-wrapper {
2487         padding: 10px 0;
2488 }
2489 #contact-drop-confirm .contact-actions,
2490 #contact-drop-confirm .contact-photo-overlay,
2491 #contact-drop-confirm .contact-photo-menu {
2492         display: none;
2493 }
2494 #contact-drop-confirm #confirm-form {
2495         margin-top: 20px;
2496 }
2497
2498 /* contact-edit */
2499 #contact-edit-actions {
2500         position: absolute;
2501 }
2502 #contact-edit-status-wrapper {
2503         border: none;
2504         background-color: rgba(225, 245, 254, $contentbg_transp);
2505         margin: 15px -15px;
2506 }
2507 #contact-edit-settings {
2508         display: block;
2509 }
2510
2511 /* directory page */
2512 #directory-search-heading {
2513         padding-top: 10px;
2514 }
2515
2516 /* group edit page */
2517 .group-actions {
2518         margin-top: 4px;
2519         margin-bottom: 10px;
2520         font-size: 30px;
2521 }
2522 .group-actions button,
2523 .group-actions a {
2524         font-size: 18px;
2525 }
2526
2527 .contact-group-actions .fa-times-circle {
2528         color: #d00000;
2529 }
2530 .contact-group-actions .fa-plus-circle {
2531         color: #008000;
2532 }
2533
2534 #group-edit-wrapper {
2535         margin-top: 14px;
2536         display: none;
2537 }
2538 #group-edit-header {
2539         display: block;
2540 }
2541 #group-update-wrapper .contact-photo-overlay {
2542         display: none;
2543 }
2544 #group-update-wrapper .viewcontact_wrapper .contact-group-actions {
2545         height: 100%;
2546         margin-top: -10px;
2547         display: flex;
2548 }
2549 #group-update-wrapper .viewcontact_wrapper .contact-group-link {
2550         opacity: 0.8;
2551         font-size: 20px;
2552         line-height: 50px;
2553 }
2554 #group-update-wrapper .viewcontact_wrapper .contact-action-link:hover {
2555         opacity: 1;
2556 }
2557 #group-update-wrapper .shortmode {
2558         height: 53px;
2559         overflow: hidden;
2560 }
2561 #group-update-wrapper .shortmode .contact-photo {
2562         height: 32px;
2563         width: 32px;
2564 }
2565 #group-update-wrapper .shortmode .media {
2566         overflow: hidden;
2567 }
2568 #group-update-wrapper .shortmode .contact-entry-desc {
2569         font-size: 12px !important;
2570 }
2571 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading {
2572         margin: 0;
2573 }
2574 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading a {
2575         font-size: 13px !important;
2576         white-space: nowrap;
2577 }
2578 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-rel,
2579 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-network {
2580         display: none;
2581 }
2582
2583 /* private mail */
2584 .message-content-wrapper > li {
2585         /* we need this overwriting because we have no template file
2586    for the general mail page /message
2587 */
2588         list-style-type: none;
2589 }
2590 .mail-thread {
2591         max-height: calc(100vh - 200px);
2592 }
2593 #mail-conversation {
2594         overflow-y: auto;
2595         max-height: calc(100vh - 400px);
2596         max-height: auto;
2597         margin-bottom: 0px;
2598         padding: 0 15px;
2599 }
2600 .mail-conv-wrapper .media .contact-photo-wrapper img {
2601         height: 48px;
2602         width: 48px;
2603 }
2604 .mail-thread #prvmail-to-label,
2605 .mail-thread #prvmail-subject-label {
2606         display: none;
2607 }
2608 .mail-thread #prvmail-message-label > label {
2609         display: none;
2610 }
2611 .mail-thread #prvmail-message-label textarea {
2612         max-height: 120px;
2613 }
2614 .mail-conv-wrapper {
2615         padding: 15px 0;
2616         border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2617 }
2618 #message-sidebar {
2619         height: calc(100vh - 150px);
2620 }
2621 #message-preview {
2622         height: calc(100% - 20px);
2623 }
2624 #message-preview ul {
2625         margin: 0px;
2626 }
2627 #message-preview .media-list li {
2628         padding: 0px 10px;
2629         border: none;
2630 }
2631 #message-preview .media-list li:hover {
2632         border-left: none !important;
2633 }
2634 #message-preview .media-list li a {
2635         color: $link_color;
2636 }
2637 .mail-list-outside-wrapper {
2638         padding: 5px 0;
2639         border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2640 }
2641 .mail-list-outside-wrapper .contact-photo-wrapper img {
2642         height: 48px;
2643         width: 48px;
2644 }
2645 #prvmail-end {
2646         clear: both;
2647 }
2648 #modal #prvmail-text-edit-bb .bb-img {
2649         display: none;
2650 }
2651
2652 /* photos */
2653 #photo-album-edit-name-label {
2654         width: 100%;
2655 }
2656 .photo-album-edit-name {
2657         width: 60%;
2658 }
2659
2660 .photo-album-actions {
2661         margin-bottom: 10px;
2662 }
2663 .photo-album-actions .photos-order-link {
2664         float: right;
2665 }
2666 /* Events page */
2667
2668 .fc .fc-month-view .fc-content .fc-title .item-desc:hover {
2669         color: $link_hover_color;
2670 }
2671 .fc .fc-list-item-title a {
2672         color: $link_color;
2673 }
2674 .fc .fc-list-item-title a[href]:hover {
2675         color: $link_hover_color;
2676         text-decoration: none;
2677 }
2678 .event-wrapper .event-owner {
2679         margin-bottom: 15px;
2680 }
2681 .event-wrapper .event-owner img {
2682         display: block;
2683 }
2684 .event-owner img {
2685         margin-right: 5px;
2686         height: 48px;
2687         width: 48;
2688         border-radius: 3px;
2689 }
2690 .event-wrapper .vevent {
2691         margin-left: 0;
2692         margin-right: 0;
2693         box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2694 }
2695 .event-wrapper .event-buttons {
2696         margin-top: 15px;
2697 }
2698 #event-form-wrapper {
2699         padding-top: 5px;
2700 }
2701 #event-edit-form-wrapper {
2702         padding-top: 15px;
2703 }
2704 #event-nav a {
2705         color: $font_color_darker;
2706 }
2707 #event-edit-form-wrapper #event-edit-time {
2708         padding: 10px 0;
2709 }
2710 .event-buttons .plink-event-link {
2711         margin-left: 20px;
2712 }
2713 .vevent .event-summary {
2714         font-size: 16px;
2715 }
2716 .vevent .event-description {
2717         padding: 10px 0;
2718 }
2719 .vevent .event-location .location {
2720         font-size: inherit;
2721         color: inherit;
2722 }
2723 .modal-body .vevent .event-summary {
2724         display: none;
2725 }
2726 #event-preview .vevent .event-summary {
2727         display: block;
2728 }
2729
2730 /* Event Cards */
2731 .event-card-details,
2732 .event-card-header {
2733         width: 100%;
2734 }
2735 .event-card-header,
2736 .event-card-left-date {
2737         float: left;
2738 }
2739 .vevent .event-card-header {
2740         display: table;
2741 }
2742 .event-card-left-date {
2743         width: 60px; /* Das muss wahrscheinlich unterschiedlich sein zwischen calendar und stream */
2744 }
2745 .event-card .event-date-wrapper > span {
2746         display: block;
2747         overflow: hidden;
2748         text-align: center;
2749         white-space: nowrap;
2750 }
2751 .event-card .event-date-wrapper .event-card-short-month {
2752         font-size: 13px;
2753         text-transform: uppercase;
2754 }
2755 .event-card .event-date-wrapper.medium .event-card-short-date {
2756         font-size: 24px;
2757         line-height: 28px;
2758         margin-top: 2px;
2759 }
2760 .event-card .event-card-content {
2761         width: 100%;
2762         padding: 0 5px 0 15px;
2763         box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2764         color: $font_color;
2765         position: relative;
2766 }
2767 .event-card .event-card-content .event-map-btn {
2768         position: absolute;
2769         right: 0;
2770         top: 0;
2771         line-height: 15px;
2772 }
2773 .event-card .event-card-title {
2774         font-size: 14px;
2775         color: $font_color_darker;
2776         line-height: 15px;
2777         font-weight: bold;
2778         margin: 0;
2779 }
2780 .event-card .event-card-location {
2781         margin-top: 10px;
2782         font-size: 13px;
2783 }
2784 .event-card .event-card-location br {
2785         content: " ";
2786 }
2787 .event-card .event-card-location br::after {
2788         content: " ";
2789 }
2790 .event-card-profile-name a {
2791         color: $link_color;
2792 }
2793 .event-card-profile-name a:hover {
2794         color: $link_hover_color;
2795 }
2796 .event-card .event-card-content .event-location-map {
2797         position: absolute;
2798         left: -9999px;
2799         top: -9999px;
2800 }
2801 .event-card .event-card-content .event-location-map .map {
2802         margin-top: 10px;
2803 }
2804 .event-card .description {
2805         margin-top: 10px;
2806         box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, 0.1) inset;
2807 }
2808 /* Photos Pages */
2809 #photo-photo {
2810         position: relative;
2811 }
2812 .photo-next-link,
2813 .photo-prev-link {
2814         height: 64px;
2815         margin-top: -32px;
2816         opacity: 0;
2817         position: absolute;
2818         top: 50%;
2819         transform: translateZ(0);
2820         transition: opacity 0.2s;
2821         width: 100px;
2822         z-index: 11;
2823         font-size: 64px;
2824         color: #fff;
2825         text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
2826 }
2827 .photo-next-link > i,
2828 .photo-prev-link > i {
2829         vertical-align: super;
2830 }
2831 .photo-next-link > i {
2832         float: right;
2833 }
2834 .photo-prev-link {
2835         left: 20px;
2836 }
2837 .photo-next-link {
2838         right: 20px;
2839 }
2840 #photo-photo:hover .photo-next-link,
2841 #photo-photo:hover .photo-prev-link {
2842         opacity: 0.4;
2843 }
2844 #photo-photo .photo-next-link:hover,
2845 #photo-photo .photo-prev-link:hover {
2846         opacity: 1;
2847         color: #fff;
2848 }
2849 .photo-comment-wrapper .comment {
2850         position: relative;
2851 }
2852 .photo-comment-wrapper .wall-item-content {
2853         color: $font_color_darker;
2854         font-size: 13px;
2855 }
2856 .photo-comment-wrapper .comment-wwedit-wrapper,
2857 .photo-comment-wrapper .wall-item-outside-wrapper.media:first-child {
2858         margin-top: 15px;
2859 }
2860
2861 /* Profiles Page */
2862 .profile-listing-table {
2863         display: table;
2864         width: 100%;
2865 }
2866 .profile-listing-row {
2867         display: table-row;
2868 }
2869 .profile-listing-cell {
2870         display: table-cell;
2871 }
2872 .profile-listing-photo {
2873         width: 48px;
2874         height: 48px;
2875         margin: 10px 0px;
2876 }
2877 #profile-listing-new-link-wrapper {
2878         margin-bottom: 20px;
2879 }
2880
2881 #profile-photo-upload-section {
2882         display: none;
2883         padding: 10px;
2884 }
2885 #profile-photo-upload-close {
2886         font-size: 14px;
2887 }
2888
2889 /* Settings */
2890 .section-subtitle-wrapper {
2891         padding: 1px 10px;
2892 }
2893 details.profile-jot-net[open] summary:before,
2894 .panel .section-subtitle-wrapper a.accordion-toggle:before {
2895         font-family: ForkAwesome;
2896         content: "\f0d7";
2897         padding-right: 5px;
2898 }
2899 details.profile-jot-net summary:before,
2900 .panel .section-subtitle-wrapper a.accordion-toggle.collapsed:before {
2901         font-family: ForkAwesome;
2902         content: "\f0da";
2903 }
2904 details.profile-jot-net summary:before {
2905         padding-right: 5px;
2906         padding-left: 3px;
2907 }
2908 details.profile-jot-net[open] summary:before {
2909         padding-right: 5px;
2910         padding-left: 0px;
2911 }
2912 #settings-nick-wrapper {
2913         margin-bottom: 20px;
2914 }
2915 .group {
2916         margin-left: 20px;
2917 }
2918
2919 /* Emulates Bootstrap display */
2920 .settings-block {
2921         margin: 0 0 5px;
2922         background-color: rgba(255, 255, 255, $contentbg_transp);
2923         border-radius: 4px;
2924         padding: 10px 15px;
2925         box-shadow: 0 0 3px #dadada;
2926         -webkit-box-shadow: 0 0 3px #dadada;
2927         -moz-box-shadow: 0 0 3px #dadada;
2928 }
2929
2930 .settings-block.fakelink,
2931 .settings-block > .fakelink {
2932         padding: 10px 25px;
2933         display: block;
2934 }
2935 .settings-block > .fakelink {
2936         margin: -10px -15px 10px -15px;
2937         border-radius: 4px 4px 0 0;
2938 }
2939
2940 .settings-block.fakelink:hover,
2941 .settings-block > .fakelink:hover {
2942         color: $link_hover_color;
2943 }
2944 .settings-block.fakelink > h3,
2945 .settings-block > .fakelink > h3 {
2946         margin: 0;
2947         padding: 0;
2948         color: $link_color;
2949         font-size: 18px;
2950 }
2951
2952 .section-subtitle-wrapper > h2 {
2953         font-size: 18px;
2954         margin-top: 10px;
2955         margin-bottom: 10px;
2956 }
2957
2958 .fakelink > h3:before {
2959         padding-right: 10px;
2960 }
2961 .widget.fakelink > h3:before,
2962 .settings-block.fakelink > h3:before {
2963         font-family: ForkAwesome;
2964         content: "\f0da"; /* Right Plain Pointer */
2965 }
2966 .widget > .fakelink > h3:before,
2967 #sidebar-group-header > .fakelink > h3:before,
2968 .settings-block > .fakelink > h3:before {
2969         font-family: ForkAwesome;
2970         content: "\f0d7"; /* Bottom Plain Pointer */
2971 }
2972
2973 h3.connector {
2974         line-height: 40px;
2975 }
2976
2977 /* Intro Notifications */
2978 ul.notif-network-list {
2979         margin-left: -15px;
2980         margin-right: -15px;
2981 }
2982 ul.notif-network-list > li {
2983         padding-left: 15px;
2984         padding-right: 15px;
2985 }
2986 .intro-wrapper.media {
2987         overflow: visible;
2988         word-wrap: break-word;
2989         margin-top: 0;
2990 }
2991 .intro-photo-wrapper img.intro-photo {
2992         height: 80px;
2993         width: 80px;
2994         border-radius: 4px;
2995 }
2996 .intro-actions {
2997         display: flex;
2998 }
2999 .intro-enty-name h4 {
3000         font-size: 15px !important;
3001 }
3002 .intro-wrapper button.intro-action-link {
3003         opacity: 0.1;
3004         transition: all 0.25s ease-in-out;
3005 }
3006 .intro-wrapper button.intro-action-link,
3007 .intro-wrapper button.intro-action-link:hover {
3008         padding-right: 5px;
3009         padding-left: 5px;
3010         color: $font_color_darker;
3011 }
3012 ul li:hover .intro-wrapper button.intro-action-link {
3013         opacity: 0.8;
3014         transition: all 0.25s ease-in-out;
3015 }
3016 ul li:hover .intro-wrapper button.intro-action-link:hover {
3017         opacity: 1;
3018 }
3019 .intro-action-buttons {
3020         margin-top: 15px;
3021         max-height: 0px;
3022         overflow: hidden;
3023         transition: max-height 0.1s ease-out;
3024 }
3025 ul.notif-network-list > li:hover .intro-action-buttons {
3026         max-height: 30px;
3027         transition: max-height 0.1s ease-in;
3028 }
3029 .intro-desc-label,
3030 .intro-url-label,
3031 .intro-network-label,
3032 .intro-location-label,
3033 .intro-keywords-label,
3034 .intro-about-label,
3035 .intro-knowyou-label,
3036 .intro-madeby-label {
3037         font-weight: bold;
3038 }
3039 .intro-contact-info.xs .intro-url-label,
3040 .intro-contact-info.xs .intro-network-label,
3041 .intro-contact-info.xs .intro-location-label,
3042 .intro-contact-info.xs .intro-keywords-label,
3043 .intro-contact-info.xs .intro-about-label,
3044 .intro-contact-info.xs .intro-knowyou-label {
3045         display: block;
3046         margin-top: 5px;
3047 }
3048
3049 /* Notifications Page */
3050 ul.notif-network-list li.unseen {
3051         background-color: #e3eff3;
3052 }
3053 .notif-item img.notif-image {
3054         height: 48px;
3055         width: 48px;
3056         border-radius: 4px;
3057 }
3058 .notif-item .notif-desc-wrapper {
3059         height: 48px;
3060 }
3061 .notif-item .notif-desc-wrapper a {
3062         height: 100%;
3063         display: block;
3064         color: $font_color_darker;
3065         font-size: 13px;
3066         font-weight: 600;
3067 }
3068
3069 /* Search Page */
3070
3071 /* This is a little bit hacky. Since the search page is used for diferent
3072 content types we can't apply the generic-page-wrapper class.
3073 So we apply the css of the generic-page-wrapper class to the ul element with some
3074 little modifications to emulate a standard page template */
3075 .search-content-wrapper > ul.viewcontact_wrapper {
3076         min-height: calc(100vh - 150px);
3077         padding-top: 15px;
3078         padding-bottom: 20px;
3079         margin: 0;
3080         margin-bottom: 20px;
3081         border: none;
3082         background-color: rgba(255, 255, 255, $contentbg_transp);
3083         border-radius: 4px;
3084         position: relative;
3085         color: $font_color_darker;
3086         box-shadow: 0 0 3px #dadada;
3087         -webkit-box-shadow: 0 0 3px #dadada;
3088         -moz-box-shadow: 0 0 3px #dadada;
3089 }
3090
3091 /* Help Page */
3092 section.help-content-wrapper h1 {
3093         padding-bottom: 0.3em;
3094         font-size: 1.8em;
3095         border-bottom: 1px solid #ddd;
3096 }
3097 section.help-content-wrapper h2 {
3098         padding-bottom: 0.3em;
3099         font-size: 1.5em;
3100         border-bottom: 1px solid #ddd;
3101 }
3102 section.help-content-wrapper h3 {
3103         font-size: 1.2em;
3104 }
3105 section.help-content-wrapper h4 {
3106         font-size: 1em;
3107 }
3108 section.help-content-wrapper h1,
3109 section.help-content-wrapper h2,
3110 section.help-content-wrapper h3,
3111 section.help-content-wrapper h4,
3112 section.help-content-wrapper h5,
3113 section.help-content-wrapper h6 {
3114         margin-top: 24px;
3115         margin-bottom: 16px;
3116         font-weight: 600;
3117         line-height: 1.25;
3118 }
3119 section.help-content-wrapper p {
3120         margin: 0.4em 0;
3121 }
3122 section.help-content-wrapper p,
3123 section.help-content-wrapper a,
3124 section.help-content-wrapper li {
3125         line-height: 1.6;
3126         font-size: 0.96em;
3127 }
3128
3129 /*Admin Page*/
3130 #adminpage #frio_background_image .image-select {
3131         display: none;
3132 }
3133 #adminpage #frio_background_image.input-group {
3134         display: block;
3135 }
3136 #admin-summary-wrapper {
3137         padding-top: 10px;
3138 }
3139 #adminpage ul#addonslist,
3140 li.addon {
3141         list-style: none;
3142 }
3143 #adminpage li .icon {
3144         display: inline-block;
3145         vertical-align: text-top;
3146         position: relative;
3147         padding-left: 5px;
3148 }
3149 #adminpage li .icon:before {
3150         content: "";
3151         display: inline-block;
3152         position: absolute;
3153         width: 17px;
3154         height: 17px;
3155         left: 0;
3156         margin-left: -20px;
3157         margin-top: 2px;
3158         border: 1px solid #cccccc;
3159         border-radius: 3px;
3160         background-color: $background_color;
3161         -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3162         -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3163         transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3164 }
3165 #adminpage li .icon.on:after {
3166         font-family: "ForkAwesome";
3167         content: "\f00c";
3168         display: inline-block;
3169         position: absolute;
3170         width: 16px;
3171         height: 16px;
3172         left: 0;
3173         top: 0;
3174         margin-left: -20px;
3175         margin-top: 2px;
3176         padding-left: 3px;
3177         padding-top: 1px;
3178         font-size: 11px;
3179         color: $link_color;
3180 }
3181 #adminpage .addon .desc {
3182         padding-left: 10px;
3183 }
3184 #admin-users #users tr.blocked {
3185         background-color: #f8efc0;
3186 }
3187 .adminpage .table-hover > tbody > tr:hover + tr.details {
3188         background-color: #f5f5f5;
3189 }
3190 .offset-anchor::before {
3191         display: block;
3192         content: " ";
3193         margin-top: -100px;
3194         height: 100px;
3195         visibility: hidden;
3196         pointer-events: none;
3197 }
3198
3199 #relocate-form {
3200         margin-top: 5px;
3201 }
3202
3203 /* Manage Page */
3204 #identity-selector-wrapper {
3205         width: auto;
3206         height: auto;
3207         margin-top: 20px;
3208 }
3209 #identity-selector-wrapper .identity-match-photo {
3210         width: auto;
3211         float: none;
3212 }
3213 #identity-selector-wrapper .identity-match-photo button {
3214         position: relative;
3215 }
3216 #identity-selector-wrapper .identity-match-photo .badge {
3217         position: absolute;
3218         top: -8px;
3219         right: -8px;
3220 }
3221 #identity-selector-wrapper .identity-match-name {
3222         text-align: center;
3223 }
3224 #identity-selector-wrapper .identity-match-details {
3225         width: auto;
3226         float: none;
3227 }
3228
3229 /* Register Page */
3230 #register-openid-wrapper,
3231 #register-name-wrapper,
3232 #register-invite-wrapper,
3233 #profile-publish-wrapper {
3234         margin-top: 20px;
3235 }
3236 #register-openid-end,
3237 #register-nickname-end {
3238         margin-top: 40px;
3239 }
3240
3241 /*
3242 * Overwriting for transparency and other colors
3243 */
3244 main .nav-tabs > li.active > a,
3245 main .nav-tabs > li.active > a:focus,
3246 main .nav-tabs > li.active > a:hover {
3247         background-color: rgba(255, 255, 255, $contentbg_transp);
3248 }
3249
3250 /*
3251  * Modal
3252  */
3253 .modal hr {
3254         border-color: #eee;
3255 }
3256
3257 @media (min-width: 768px) {
3258         .modal-dialog {
3259                 width: 650px;
3260         }
3261 }
3262
3263 /*
3264  * Framework overwrite
3265  */
3266
3267 /* textcomplete for contact filtering*/
3268 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list {
3269         position: relative !important;
3270         top: inherit !important;
3271         bottom: inherit !important;
3272         left: inherit !important;
3273         padding: 0;
3274         margin-left: -15px;
3275         margin-right: -15px;
3276         background-color: transparent;
3277         box-shadow: none;
3278         border: none;
3279 }
3280 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li {
3281         padding-left: 15px;
3282         border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
3283 }
3284 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li:first-child {
3285         display: none;
3286 }
3287 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list .textcomplete-item > a {
3288         padding: 0 !important;
3289         border-left: none;
3290         background-color: transparent !important;
3291 }
3292 /* this is a little hack for texcomplete contact filter
3293 There are for some reasons empty <a> tags. I don't know why */
3294 .textcomplete-item .contact-wrapper a {
3295         padding: 0;
3296 }
3297
3298 /* hovercard fix */
3299 body .tread-wrapper .hovercard a,
3300 body .tread-wrapper .hovercard a:hover {
3301         color: $link_color;
3302 }
3303 body .tread-wrapper .hovercard:hover .hover-card-content a {
3304         color: $link_color !important;
3305 }
3306
3307 /* Pagination improvements */
3308 .pagination {
3309         text-align: center;
3310         display: block;
3311 }
3312 .pagination > li > a,
3313 .pagination > li > span {
3314         color: $link_color;
3315         float: none;
3316 }
3317 .pagination > li > a:hover,
3318 .pagination > li > span:hover {
3319         color: $link_hover_color;
3320 }
3321 .pagination > .active > a,
3322 .pagination > .active > a:focus,
3323 .pagination > .active > a:hover,
3324 .pagination > .active > span,
3325 .pagination > .active > span:focus,
3326 .pagination > .active > span:hover {
3327         background-color: $link_color;
3328         border-color: $link_color;
3329         border-radius: 3px;
3330 }
3331 .pagination li.pager_n a {
3332         margin-left: 3px;
3333         border-radius: 3px;
3334 }
3335 .pagination .pager_prev a {
3336         margin-left: -5px;
3337         margin-right: 4px;
3338         border-top-right-radius: 3px;
3339         border-bottom-right-radius: 3px;
3340 }
3341 .pagination .pager_next a {
3342         margin-left: 4px;
3343         margin-right: -5px;
3344         border-top-left-radius: 3px;
3345         border-bottom-left-radius: 3px;
3346 }
3347 .pager .next > a,
3348 .pager .previous > a {
3349         float: none;
3350         border-radius: 3px;
3351 }
3352 .pagination .disabled > a,
3353 .pager .disabled > a {
3354         display: none;
3355 }
3356
3357 .pagination li > a,
3358 .pager li > a {
3359         background-color: rgba(255, 255, 255, $contentbg_transp);
3360 }
3361
3362 /*
3363  * some temporary workarounds until this will solved
3364  * elsewhere (e.g. new templates)
3365  */
3366 section .profile-match-wrapper {
3367         float: left;
3368 }
3369
3370 /**
3371  * Login page
3372  */
3373 #login-submit-wrapper {
3374         float: right;
3375 }
3376 #lost-password-link {
3377         flex-grow: 2;
3378 }
3379 #login-lost-password-link {
3380         margin-bottom: 10px;
3381         float: right;
3382 }
3383 #div_id_remember {
3384         float: left;
3385 }
3386 #id_password_wrapper {
3387         margin-bottom: unset;
3388 }
3389 #login_openid {
3390         clear: both;
3391 }
3392 #register-link {
3393         color: white;
3394         background: #8ad0a1;
3395         width: 100%;
3396 }
3397 #login-end {
3398         clear: both;
3399 }
3400
3401 .mod-home.is-not-singleuser,
3402 .mod-login {
3403         background-color: $login_bg_color;
3404         background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)), url($login_bg_image);
3405         background-size: cover;
3406         background-attachment: fixed;
3407         background-position: center;
3408         padding-top: 0;
3409 }
3410 .mod-home.is-not-singleuser nav.navbar,
3411 .mod-login nav.navbar {
3412         background-color: transparent;
3413         position: inherit;
3414 }
3415 .mod-home.is-not-singleuser #topbar-second,
3416 .mod-login #topbar-second {
3417         background-color: transparent;
3418         box-shadow: unset;
3419         border: 0;
3420 }
3421 .mod-home.is-not-singleuser .login-content,
3422 .mod-login .login-content {
3423         color: #eee;
3424         margin-top: 2.5%;
3425 }
3426
3427 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3428         margin-top: 4em;
3429 }
3430
3431 .mod-home.is-not-singleuser .login-form > #login-form label,
3432 .mod-login #content #login-form label {
3433         color: #eee;
3434 }
3435
3436 .mod-home.is-not-singleuser .login-panel-content,
3437 .mod-login .login-panel-content {
3438         background-color: rgba(255, 255, 255, 0.85);
3439 }
3440
3441 .qq-upload-button {
3442         background: $nav_bg !important;
3443         color: $btn_primary_color !important;
3444         float: none;
3445         border: none;
3446         -webkit-box-shadow: none;
3447         box-shadow: none;
3448         -moz-box-shadow: none;
3449         background-image: none;
3450         text-shadow: none;
3451         border-radius: 3px;
3452         margin-bottom: 0;
3453         font-size: 14px;
3454         font-weight: 600;
3455         padding: 8px 16px;
3456         color: inherit;
3457         width: 100% !important;
3458 }
3459
3460 .qq-upload-drop-area {
3461         background: white !important;
3462         float: none;
3463         border: none;
3464         -webkit-box-shadow: none;
3465         box-shadow: none;
3466         -moz-box-shadow: none;
3467         background-image: none;
3468         text-shadow: none;
3469         border-radius: 3px;
3470         margin-bottom: 0;
3471         font-size: 14px;
3472         font-weight: 600;
3473         padding: 8px 16px;
3474         color: inherit;
3475         width: 100% !important;
3476         display: block !important;
3477         position: relative !important;
3478         border: black 1px dashed !important;
3479         margin-bottom: 5px !important;
3480         margin-top: 15px !important;
3481 }
3482
3483 /**
3484  * The different views of js fullcalendar
3485  */
3486 #fc-header {
3487         margin-top: 20px;
3488         margin-bottom: 10px;
3489 }
3490 #fc-header-left,
3491 #fc-header-right,
3492 #event-calendar-title {
3493         display: inline-block;
3494 }
3495 #fc-title {
3496         margin: 0;
3497         padding-left: 20px;
3498 }
3499 #fc-header-right {
3500         margin-top: -4px;
3501 }
3502 #fc-header-right .dropdown > button {
3503         color: inherit;
3504 }
3505 #event-calendar-title {
3506         vertical-align: middle;
3507 }
3508 #event-calendar-views {
3509         padding: 6px 9px;
3510         font-size: 14px;
3511 }
3512 .fc .fc-toolbar {
3513         display: none;
3514 }
3515 .fc .fc-month-view td.fc-widget-content,
3516 .fc .fc-list-view,
3517 .fc .fc-list-view .fc-list-table td,
3518 .fc .fc-body td {
3519         border-style: none;
3520 }
3521 .fc td.fc-widget-header,
3522 .fc th.fc-widget-header {
3523         border-left: none;
3524         border-right: none;
3525         border-top: none;
3526 }
3527 .fc .fc-month-view td.fc-day {
3528         border-left: none;
3529         border-right: none;
3530         border-bottom: 1px solid;
3531         padding: 0 6px;
3532 }
3533 .fc .fc-day-grid-container .fc-row {
3534         border-bottom: 1px solid;
3535         border-color: #ddd;
3536 }
3537 .fc tr td.fc-today {
3538         border-style: none;
3539 }
3540 .fc .fc-month-view .fc-content .fc-title .item-desc {
3541         font-size: 11px;
3542 }
3543 .fc .fc-view-container {
3544         margin-top: 25px;
3545 }
3546 .fc .fc-list-view td {
3547         padding: 0;
3548 }
3549 #events-calendar.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
3550         float: left;
3551         font-size: 12px;
3552 }
3553 .fc .fc-event {
3554         background-color: #e3f2fd;
3555         border: 1px solid #bbdefb;
3556         color: $font_color_darker;
3557 }
3558 .fc .fc-month-view .fc-time,
3559 .fc .fc-listMonth-view .fc-list-item-time,
3560 .fc .fc-listMonth-view .fc-list-item-marker,
3561 .fc .fc-listMonth-view .fc-widget-header {
3562         display: none;
3563 }
3564 .fc .fc-listMonth-view .fc-list-item:hover td {
3565         background: transparent;
3566         cursor: pointer;
3567 }
3568 .fc .fc-listMonth-view .seperator {
3569         margin-left: 30px;
3570         width: 60px;
3571 }
3572
3573 /**
3574  * The event-card
3575  */
3576 .event-card {
3577         width: auto;
3578 }
3579 .event-card .event-label,
3580 .event-card .location-label {
3581         font-weight: bold;
3582 }
3583 .popover.event-card .event-card-basic-content {
3584         margin-top: 0;
3585         padding: 9px;
3586         padding-left: 0px;
3587 }
3588 .event-card .event-hover-location .location {
3589         color: $font_color;
3590         font-size: 13px;
3591 }
3592
3593 /* Medium devices (desktops, 992px and up) */
3594 @media (min-width: 992px) {
3595         .mod-home.is-not-singleuser #content,
3596         .mod-login #content {
3597                 margin-top: 100px !important;
3598         }
3599
3600         .mod-home.is-not-singleuser .login-form > #login-form,
3601         .mod-home.is-not-singleuser .login-form > #login-extra-links,
3602         .mod-login #content #login-form {
3603                 background-color: #fff;
3604                 padding: 1em;
3605                 position: relative;
3606         }
3607         .mod-home.is-not-singleuser .login-form > #login-extra-links {
3608                 margin-top: unset;
3609                 background-color: white;
3610         }
3611
3612         .mod-home.is-not-singleuser .login-form > #login-form label,
3613         .mod-login #content #login-form label {
3614                 color: #444;
3615         }
3616
3617         .mod-home.is-not-singleuser .login-form::before,
3618         .mod-login #content #login-form::before {
3619                 display: block;
3620                 position: absolute;
3621                 content: " ";
3622                 background-color: rgba(255, 255, 255, 0.1);
3623                 width: 90%;
3624                 height: 110%;
3625                 top: -5%;
3626                 left: 5%;
3627                 z-index: -1;
3628         }
3629
3630         .mod-home.is-not-singleuser .login-form::after,
3631         .mod-login #content #login-form::after {
3632                 display: block;
3633                 position: absolute;
3634                 content: " ";
3635                 background-color: rgba(255, 255, 255, 0.2);
3636                 width: 80%;
3637                 height: 120%;
3638                 top: -10%;
3639                 left: 10%;
3640                 z-index: -1;
3641         }
3642 }
3643
3644 /* Mobile display */
3645 @media (max-width: 600px) {
3646         body {
3647                 padding-top: 95px;
3648         }
3649         body.minimal {
3650                 padding: 15px;
3651         }
3652
3653         #friendica-logo-mask {
3654                 display: none;
3655         }
3656
3657         .container {
3658                 padding-right: 0;
3659                 padding-left: 0;
3660         }
3661
3662         .panel {
3663                 border-radius: 0;
3664                 margin-bottom: 5px;
3665         }
3666
3667         .panel .panel-body {
3668                 padding: 10px;
3669         }
3670
3671         .toplevel_item > .wall-item-container {
3672                 padding: 0;
3673         }
3674
3675         .wall-spacer {
3676                 height: 0px;
3677         }
3678
3679         .wall-item-actions {
3680                 margin-top: 10px;
3681         }
3682
3683         .media {
3684                 margin-top: 0;
3685         }
3686
3687         .generic-page-wrapper,
3688         .videos-content-wrapper,
3689         .suggest-content-wrapper,
3690         .help-content-wrapper,
3691         .match-content-wrapper,
3692         .dirfind-content-wrapper,
3693         .directory-content-wrapper,
3694         .delegation-content-wrapper,
3695         .notes-content-wrapper,
3696         .message-content-wrapper,
3697         .apps-content-wrapper,
3698         #adminpage,
3699         .delegate-content-wrapper,
3700         .uexport-content-wrapper,
3701         .dfrn_request-content-wrapper,
3702         .friendica-content-wrapper,
3703         .credits-content-wrapper,
3704         .nogroup-content-wrapper,
3705         .profperm-content-wrapper,
3706         .invite-content-wrapper,
3707         .tos-content-wrapper,
3708         .fsuggest-content-wrapper {
3709                 border-radius: 0;
3710                 padding: 10px;
3711         }
3712
3713         .row {
3714                 margin-right: 0;
3715         }
3716
3717         .col-lg-1,
3718         .col-lg-10,
3719         .col-lg-11,
3720         .col-lg-12,
3721         .col-lg-2,
3722         .col-lg-3,
3723         .col-lg-4,
3724         .col-lg-5,
3725         .col-lg-6,
3726         .col-lg-7,
3727         .col-lg-8,
3728         .col-lg-9,
3729         .col-md-1,
3730         .col-md-10,
3731         .col-md-11,
3732         .col-md-12,
3733         .col-md-2,
3734         .col-md-3,
3735         .col-md-4,
3736         .col-md-5,
3737         .col-md-6,
3738         .col-md-7,
3739         .col-md-8,
3740         .col-md-9,
3741         .col-sm-1,
3742         .col-sm-10,
3743         .col-sm-11,
3744         .col-sm-12,
3745         .col-sm-2,
3746         .col-sm-3,
3747         .col-sm-4,
3748         .col-sm-5,
3749         .col-sm-6,
3750         .col-sm-7,
3751         .col-sm-8,
3752         .col-sm-9,
3753         .col-xs-1,
3754         .col-xs-10,
3755         .col-xs-11,
3756         .col-xs-12,
3757         .col-xs-2,
3758         .col-xs-3,
3759         .col-xs-4,
3760         .col-xs-5,
3761         .col-xs-6,
3762         .col-xs-7,
3763         .col-xs-8,
3764         .col-xs-9 {
3765                 padding-right: 0;
3766         }
3767
3768         .wwto .contact-photo {
3769                 height: 19px;
3770                 padding: 0;
3771                 top: 24px;
3772                 left: 24px;
3773         }
3774
3775         /*
3776                 Prevent automatic zoom on input focus on iOS
3777                 see https://stackoverflow.com/a/16255670
3778         */
3779         .form-control {
3780                 font-size: 16px;
3781         }
3782
3783         .wall-item-container.thread_level_3,
3784         .wall-item-container.thread_level_4,
3785         .wall-item-container.thread_level_5,
3786         .wall-item-container.thread_level_6,
3787         .wall-item-container.thread_level_7 {
3788                 margin-left: 5px;
3789         }
3790 }