view/theme/frio/css/style.css

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