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