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