view/theme/frio/css/style.css

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