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