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