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