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