view/theme/frio/css/style.css

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