view/theme/frio/css/style.css

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