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