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: $link_color; */
2087     color: $font_color_darker;
2088
2089 }
2090 .dropdown-menu li > :hover,
2091 .dropdown-menu li > :visited,
2092 .dropdown-menu li > :focus {
2093     background: 0 0;
2094 }
2095
2096 .dropdown-menu li:first-child {
2097     margin-top: 3px;
2098 }
2099
2100 /* Notificaiotn badges */
2101 #mail-update-li.show {
2102     display: inline-block!important;
2103 }
2104
2105 /* Media Classes */
2106 p.wall-item-announce,
2107 .media .time,
2108 .media .shared-time,
2109 .media .delivery,
2110 .media .location,
2111 .media .location a {
2112     font-size: 11px;
2113     color: $font_color_darker;
2114 }
2115 .media-list > li {
2116     padding: 10px;
2117     border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2118     position: relative;
2119     border-left: 3px solid rgba(255,255,255,0);
2120     font-size: 12px;
2121 }
2122 .media-list > li:hover,
2123 .media-list > li.selected,
2124 .media-list > li.active {
2125     border-left: 3px solid $link_color;
2126     background-color: rgba(247, 247, 247, $contentbg_transp);
2127 }
2128
2129 /* Forms */
2130 .form-control {
2131     box-shadow: none;
2132 }
2133 .form-control:focus {
2134     border: 2px solid $link_color;
2135     box-shadow: none;
2136 }
2137
2138 .radio label::before,
2139 .checkbox label::before {
2140         background-color: rgba(255,255,255,$contentbg_transp);
2141 }
2142 .radio label::after {
2143         background-color: $link_color;
2144 }
2145 .checkbox label::after {
2146         color: $link_color;
2147 }
2148
2149 .checkbox input[type="checkbox"]:focus + label::before,
2150 .radio input[type="radio"]:focus + label::before {
2151         outline-color: $link_hover_color;
2152 }
2153
2154 .help-block {
2155         color: $font_color_darker;
2156 }
2157
2158 input[type=range].form-control {
2159         padding-left: 0;
2160         padding-right: 0;
2161 }
2162
2163 /* Search form */
2164 .form-control.form-search {
2165     border-radius: 30px;
2166     background-image: url(img/icon_search16x16.png);
2167     background-repeat: no-repeat;
2168     background-position: 10px 8px;
2169     padding-left: 34px;
2170 }
2171 .form-group-search {
2172     position: relative;
2173     width: 100%;
2174 }
2175
2176 .form-group-search .form-button-search {
2177     position: absolute;
2178     top: 4px;
2179     right: 4px;
2180     border-radius: 30px;
2181 }
2182 .search-input.form-control.form-search {
2183     width: 100%;
2184 }
2185 .search-heading {
2186     text-align: center;
2187     color: $link_color;
2188     font-size: 20px;
2189 }
2190 .search-content-wrapper > #search-header-wrapper {
2191     display: none;
2192 }
2193 .search-content-wrapper > .section-title-wrapper {
2194     display: none;
2195 }
2196 #navbar-button > #search-save {
2197     margin-top: 3px;
2198 }
2199 /* Section-Content-Wrapper */
2200 #search-header-wrapper {
2201     padding: 15px;
2202     padding-bottom: 20px;
2203     margin-bottom: 20px;
2204     border: none;
2205     background-color: rgba(255,255,255,$contentbg_transp);
2206     border-radius: 4px;
2207     position: relative;
2208     color: $font_color_darker;
2209     box-shadow: 0 0 3px #dadada;
2210     -webkit-box-shadow: 0 0 3px #dadada;
2211     -moz-box-shadow: 0 0 3px #dadada;
2212 }
2213
2214 /* *******
2215  * PAGES
2216  *********/
2217
2218 section > .generic-page-wrapper, .videos-content-wrapper,
2219 .suggest-content-wrapper, .help-content-wrapper,
2220 .match-content-wrapper, .dirfind-content-wrapper,
2221 .delegation-content-wrapper, .notes-content-wrapper,
2222 .message-content-wrapper, .apps-content-wrapper,
2223 #adminpage, .delegate-content-wrapper, .uexport-content-wrapper,
2224 .dfrn_request-content-wrapper,
2225 .friendica-content-wrapper, .credits-content-wrapper, .nogroup-content-wrapper,
2226 .profperm-content-wrapper, .invite-content-wrapper, .tos-content-wrapper,
2227 .fsuggest-content-wrapper {
2228     min-height: calc(100vh - 150px);
2229     padding: 15px;
2230     padding-bottom: 20px;
2231     margin-bottom: 20px;
2232     border: none;
2233     background-color: rgba(255,255,255,$contentbg_transp);
2234     border-radius: 4px;
2235     position: relative;
2236     color: $font_color_darker;
2237     box-shadow: 0 0 3px #dadada;
2238     -webkit-box-shadow: 0 0 3px #dadada;
2239     -moz-box-shadow: 0 0 3px #dadada;
2240 }
2241 #content:hover .page-action.faded-icon {
2242     opacity: 0.8;
2243     transition: all 0.25s ease-in-out;
2244 }
2245 #content .page-action.faded-icon:hover {
2246     opacity: 1;
2247 }
2248
2249 .section-title-wrapper {
2250     overflow: hidden;
2251 }
2252 /* Home and Login Page */
2253 body.mod-home nav.navbar .nav>li>a:hover {
2254     background-color: rgba(255,255,255,0.2);
2255 }
2256 body.mod-home .navbar #nav-login,
2257 body.mod-login .navbar #nav-login {
2258     display: none;
2259 }
2260 /* Profile-page */
2261 #profile-content-standard,
2262 #profile-content-advanced {
2263     overflow: hidden;
2264 }
2265 #profile-menu {
2266     margin-top: 20px;
2267     margin-bottom: 20px;
2268 }
2269 .contact-block-div.forumlist-profile-advanced {
2270     float: left;
2271 }
2272
2273 /* contacts page */
2274 ul.viewcontact_wrapper {
2275     margin-left: -15px;
2276     margin-right: -15px;
2277 }
2278 ul.viewcontact_wrapper > li {
2279     padding-left: 15px;
2280 }
2281 .contact-wrapper .contact-photo-wrapper button {
2282     padding: 0;
2283 }
2284 .contact-wrapper.media {
2285     overflow: visible;
2286     word-wrap: break-word;
2287     margin-top: 0;
2288 }
2289 /* bootstrap hack for .media */
2290 .contact-wrapper.media .media-body {
2291     display: table-cell;
2292     width: 10000px;
2293     *width: auto;
2294     *zoom: 1;
2295 }
2296 .contact-wrapper.media:before, .media:after {
2297     content: "";
2298     display: table;
2299 }
2300 .contact-wrapper.media:after {
2301     clear: both;
2302 }
2303 .contact-wrapper .contact-photo-image-wrapper img.contact-photo.xl {
2304     height: 80px;
2305     width: 80px;
2306 }
2307 .contact-wrapper .contact-photo-image-wrapper img.contact-photo-xs {
2308     height: 48px;
2309     width: 48px;
2310 }
2311 .contact-wrapper .contact-photo-overlay-content.xl {
2312     font-size: 48px;
2313 }
2314 .contact-wrapper .contact-photo-menu {
2315     top: auto;
2316 }
2317
2318 .contact-entry-desc {
2319     color: $font_color_darker;
2320 }
2321 .contact-entry-checkbox {
2322     margin-top: -20px;
2323 }
2324 .contact-wrapper .media-body .contact-entry-name h4.media-heading a {
2325     font-weight: bold !important;
2326     color: $link_color;
2327     font-size: 15px !important;
2328 }
2329 .contact-wrapper .contact-actions {
2330     display: flex;
2331 }
2332 .contact-wrapper .contact-action-link,
2333 .contact-wrapper .contact-action-link:hover,
2334 .textcomplete-item .contact-wrapper .contact-action-link {
2335     padding: 0 5px;
2336     color: $font_color_darker;
2337     border: 0;
2338 }
2339 .contact-wrapper .contact-action-link {
2340     opacity: 0.1;
2341     transition: all 0.25s ease-in-out;
2342 }
2343 ul li:hover .contact-wrapper .contact-action-link {
2344     opacity: 0.8;
2345     transition: all 0.25s ease-in-out;
2346 }
2347 ul li:hover .contact-wrapper .contact-action-link:hover {
2348     opacity: 1;
2349 }
2350 #contacts-search-wrapper,
2351 #directory-search-wrapper{
2352     padding: 10px 0;
2353 }
2354 #contact-drop-confirm .contact-actions,
2355 #contact-drop-confirm .contact-photo-overlay,
2356 #contact-drop-confirm .contact-photo-menu {
2357     display: none;
2358 }
2359 #contact-drop-confirm #confirm-form {
2360     margin-top: 20px;
2361 }
2362
2363 /* contact-edit */
2364 #contact-edit-actions {
2365     position: absolute;
2366 }
2367 #contact-edit-status-wrapper {
2368     border: none;
2369     background-color: rgba(225, 245, 254, $contentbg_transp);
2370     margin: 15px -15px;
2371 }
2372 #contact-edit-settings {
2373     display: block;
2374 }
2375
2376 /* directory page */
2377 #directory-search-heading {
2378     padding-top: 10px;
2379 }
2380
2381 /* group edit page */
2382 .group-actions {
2383     margin-top: 4px;
2384     margin-bottom: 10px;
2385     font-size: 30px;
2386 }
2387 .group-actions button,
2388 .group-actions a {
2389     font-size: 18px;
2390 }
2391
2392 .contact-group-actions .fa-times-circle { color: #D00000;}
2393 .contact-group-actions .fa-plus-circle { color: #008000;}
2394
2395 #group-edit-wrapper {
2396     margin-top: 14px;
2397     display: none;
2398 }
2399 #group-edit-header {
2400     display: block;
2401 }
2402 #group-update-wrapper .contact-photo-overlay {
2403     display: none;
2404 }
2405 #group-update-wrapper .viewcontact_wrapper .contact-group-actions {
2406     height: 100%;
2407     margin-top: -10px;
2408     display: flex;
2409 }
2410 #group-update-wrapper .viewcontact_wrapper .contact-group-link {
2411     opacity: 0.8;
2412     font-size: 20px;
2413     line-height: 50px;
2414 }
2415 #group-update-wrapper .viewcontact_wrapper .contact-action-link:hover {
2416     opacity: 1;
2417 }
2418 #group-update-wrapper .shortmode {
2419     height: 53px;
2420     overflow: hidden;
2421 }
2422 #group-update-wrapper .shortmode .contact-photo {
2423     height: 32px;
2424     width: 32px;
2425 }
2426 #group-update-wrapper .shortmode .media {
2427     overflow: hidden;
2428 }
2429 #group-update-wrapper .shortmode .contact-entry-desc {
2430     font-size: 12px !important;
2431 }
2432 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading {
2433     margin: 0;
2434 }
2435 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading a {
2436     font-size: 13px !important;
2437     white-space: nowrap;
2438 }
2439 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-rel,
2440 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-network {
2441     display: none;
2442 }
2443
2444 /* private mail */
2445 .message-content-wrapper > li {
2446 /* we need this overwriting because we have no template file
2447    for the general mail page /message
2448 */
2449     list-style-type: none;
2450 }
2451 .mail-thread {
2452     max-height: calc(100vh - 200px);
2453 }
2454 #mail-conversation {
2455     overflow-y: auto;
2456     max-height: calc(100vh - 400px);
2457     max-height: auto;
2458     margin-bottom: 0px;
2459     padding: 0 15px;
2460 }
2461 .mail-conv-wrapper .media .contact-photo-wrapper img {
2462     height: 48px;
2463     width: 48px;
2464 }
2465 .mail-thread #prvmail-to-label,
2466 .mail-thread #prvmail-subject-label {
2467     display: none;
2468 }
2469 .mail-thread #prvmail-message-label > label {
2470     display:none;
2471 }
2472 .mail-thread #prvmail-message-label textarea {
2473     max-height: 120px;
2474 }
2475 .mail-conv-wrapper {
2476     padding: 15px 0;
2477     border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2478 }
2479 #message-sidebar {
2480     height: calc(100vh - 150px);
2481 }
2482 #message-preview {
2483     height: calc(100% - 20px);
2484 }
2485 #message-preview ul {
2486     margin: 0px;
2487 }
2488 #message-preview .media-list li {
2489     padding: 0px 10px;
2490     border: none;
2491 }
2492 #message-preview .media-list li:hover {
2493     border-left: none !important;
2494 }
2495 #message-preview .media-list li a {
2496     color: $link_color;
2497 }
2498 .mail-list-outside-wrapper {
2499     padding: 5px 0;
2500     border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2501 }
2502 .mail-list-outside-wrapper .contact-photo-wrapper img {
2503     height: 48px;
2504     width: 48px;
2505 }
2506 #prvmail-end {
2507     clear:both;
2508 }
2509 #modal #prvmail-text-edit-bb .bb-img {
2510     display: none;
2511 }
2512
2513 /* photos */
2514 #photo-album-edit-name-label {
2515     width: 100%;
2516 }
2517 .photo-album-edit-name {
2518     width: 60%;
2519 }
2520
2521 .photo-album-actions {
2522     margin-bottom: 10px;
2523 }
2524 .photo-album-actions .photos-order-link {
2525     float: right;
2526 }
2527 /* Events page */
2528
2529 .fc .fc-month-view .fc-content .fc-title .item-desc:hover {
2530     color: $link_hover_color;
2531 }
2532 .fc .fc-list-item-title a {
2533     color: $link_color;
2534 }
2535 .fc .fc-list-item-title a[href]:hover {
2536     color: $link_hover_color;
2537     text-decoration: none;
2538 }
2539 .event-wrapper .event-owner {
2540   margin-bottom: 15px;
2541 }
2542 .event-wrapper .event-owner img {
2543     display: block;
2544 }
2545 .event-owner img {
2546     margin-right: 5px;
2547     height: 48px;
2548     width:  48;
2549     border-radius: 3px;
2550 }
2551 .event-wrapper .vevent {
2552     margin-left: 0;
2553     margin-right: 0;
2554     box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, .1) inset;
2555 }
2556 .event-wrapper .event-buttons {
2557     margin-top: 15px;
2558 }
2559 #event-form-wrapper {
2560     padding-top: 5px;
2561 }
2562 #event-edit-form-wrapper {
2563     padding-top: 15px;
2564 }
2565 #event-nav a {
2566     color: $font_color_darker;
2567 }
2568 #event-edit-form-wrapper #event-edit-time {
2569     padding: 10px 0;
2570 }
2571 .event-buttons .plink-event-link {
2572     margin-left: 20px;
2573 }
2574 .vevent .event-summary {
2575     font-size: 16px;
2576 }
2577 .vevent .event-description {
2578     padding: 10px 0;
2579 }
2580 .vevent .event-location .location {
2581     font-size: inherit;
2582     color: inherit;
2583 }
2584 .modal-body .vevent .event-summary {
2585     display: none;
2586 }
2587 #event-preview .vevent .event-summary {
2588     display: block;
2589 }
2590
2591 /* Event Cards */
2592 .event-card-details, .event-card-header {
2593     width: 100%;
2594 }
2595 .event-card-header, .event-card-left-date {
2596     float: left;
2597 }
2598 .vevent .event-card-header {
2599     display: table;
2600 }
2601 .event-card-left-date {
2602     width: 60px; /* Das muss wahrscheinlich unterschiedlich sein zwischen calendar und stream */
2603 }
2604 .event-card .event-date-wrapper > span {
2605     display: block;
2606     overflow: hidden;
2607     text-align: center;
2608     white-space: nowrap;
2609 }
2610 .event-card .event-date-wrapper .event-card-short-month {
2611     font-size: 13px;
2612     text-transform: uppercase;
2613 }
2614 .event-card .event-date-wrapper.medium .event-card-short-date {
2615     font-size: 24px;
2616     line-height: 28px;
2617     margin-top: 2px;
2618 }
2619 .event-card .event-card-content {
2620     width: 100%;
2621     padding: 0 5px 0 15px;
2622     box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, .1) inset;
2623     color: $font_color;
2624     position: relative;
2625 }
2626 .event-card .event-card-content .event-map-btn {
2627     position: absolute;
2628     right: 0;
2629     top:0;
2630     line-height: 15px;
2631 }
2632 .event-card .event-card-title {
2633     font-size: 14px;
2634     color: $font_color_darker;
2635     line-height: 15px;
2636     font-weight: bold;
2637     margin: 0;
2638 }
2639 .event-card .event-card-location {
2640     margin-top: 10px;
2641     font-size: 13px;
2642 }
2643 .event-card .event-card-location br {
2644     content: " ";
2645 }
2646 .event-card .event-card-location br::after {
2647     content: " ";
2648 }
2649 .event-card-profile-name a {
2650     color: $link_color;
2651 }
2652 .event-card-profile-name a:hover {
2653     color: $link_hover_color;
2654 }
2655 .event-card .event-card-content .event-location-map {
2656     position: absolute;
2657     left: -9999px;
2658     top: -9999px;
2659 }
2660 .event-card .event-card-content .event-location-map .map{
2661     margin-top: 10px;
2662 }
2663 .event-card .description {
2664     margin-top: 10px;
2665     box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, .1) inset;
2666 }
2667 /* Photos Pages */
2668 #photo-photo {
2669     position: relative;
2670 }
2671 .photo-next-link, .photo-prev-link {
2672     height: 64px;
2673     margin-top: -32px;
2674     opacity: 0;
2675     position: absolute;
2676     top: 50%;
2677     transform: translateZ(0);
2678     transition: opacity .2s;
2679     width: 100px;
2680     z-index: 11;
2681     font-size: 64px;
2682     color: #fff;
2683     text-shadow:
2684         -1px -1px 0 #000,
2685         1px -1px 0 #000,
2686         -1px 1px 0 #000,
2687         1px 1px 0 #000;
2688 }
2689 .photo-next-link > i, .photo-prev-link > i {
2690     vertical-align: super;
2691 }
2692 .photo-next-link > i {
2693     float: right;
2694 }
2695 .photo-prev-link {
2696     left: 20px;
2697 }
2698 .photo-next-link {
2699     right: 20px;
2700 }
2701 #photo-photo:hover .photo-next-link,
2702 #photo-photo:hover .photo-prev-link {
2703     opacity: 0.4;
2704 }
2705 #photo-photo .photo-next-link:hover,
2706 #photo-photo .photo-prev-link:hover {
2707     opacity: 1;
2708     color: #fff;
2709 }
2710 .photo-comment-wrapper .comment {
2711     position: relative;
2712 }
2713 .photo-comment-wrapper .wall-item-content {
2714     color: $font_color_darker;
2715     font-size: 13px;
2716 }
2717 .photo-comment-wrapper .comment-wwedit-wrapper,
2718 .photo-comment-wrapper .wall-item-outside-wrapper.media:first-child {
2719     margin-top: 15px;
2720 }
2721
2722 /* Profiles Page */
2723 .profile-listing-table {
2724     display: table;
2725     width: 100%;
2726 }
2727 .profile-listing-row {
2728     display: table-row;
2729 }
2730 .profile-listing-cell {
2731     display: table-cell;
2732 }
2733 .profile-listing-photo {
2734     width: 48px;
2735     height: 48px;
2736     margin: 10px 0px;
2737 }
2738 #profile-listing-new-link-wrapper {
2739     margin-bottom: 20px;
2740 }
2741
2742 #profile-photo-upload-section {
2743     display: none;
2744     padding: 10px;
2745 }
2746 #profile-photo-upload-close {
2747     font-size: 14px;
2748 }
2749
2750 /* Settings */
2751 .section-subtitle-wrapper {
2752     padding: 1px 10px;
2753 }
2754 details.profile-jot-net[open] summary:before, .panel .section-subtitle-wrapper a.accordion-toggle:before {
2755     font-family: ForkAwesome;
2756     content: "\f0d7";
2757     padding-right: 5px;
2758 }
2759 details.profile-jot-net summary:before, .panel .section-subtitle-wrapper a.accordion-toggle.collapsed:before {
2760     font-family: ForkAwesome;
2761     content: "\f0da";
2762 }
2763 details.profile-jot-net summary:before {
2764     padding-right: 5px;
2765     padding-left: 3px;
2766 }
2767 details.profile-jot-net[open] summary:before {
2768     padding-right: 5px;
2769     padding-left: 0px;
2770 }
2771 #settings-nick-wrapper {
2772     margin-bottom: 20px;
2773 }
2774 .group {
2775     margin-left: 20px;
2776 }
2777
2778 /* Emulates Bootstrap display */
2779 .settings-block {
2780     margin: 0 0 5px;
2781     background-color: rgba(255, 255, 255, $contentbg_transp);
2782     border-radius: 4px;
2783     padding: 10px 15px;
2784     box-shadow: 0 0 3px #dadada;
2785     -webkit-box-shadow: 0 0 3px #dadada;
2786     -moz-box-shadow: 0 0 3px #dadada;
2787 }
2788
2789 .settings-block.fakelink, .settings-block > .fakelink {
2790     padding: 10px 25px;
2791     display: block;
2792 }
2793 .settings-block > .fakelink {
2794     margin: -10px -15px 10px -15px;
2795     border-radius: 4px 4px 0 0;
2796 }
2797
2798 .settings-block.fakelink:hover, .settings-block > .fakelink:hover {
2799     color: $link_hover_color;
2800 }
2801 .settings-block.fakelink > h3, .settings-block > .fakelink > h3 {
2802     margin: 0;
2803     padding: 0;
2804     color: $link_color;
2805     font-size: 18px;
2806 }
2807
2808 .section-subtitle-wrapper > h2 {
2809         font-size: 18px;
2810         margin-top: 10px;
2811         margin-bottom: 10px;
2812 }
2813
2814 .fakelink > h3:before {
2815     padding-right: 10px;
2816 }
2817 .widget.fakelink > h3:before,
2818 .settings-block.fakelink > h3:before {
2819     font-family: ForkAwesome;
2820     content: "\f0da"; /* Right Plain Pointer */
2821 }
2822 .widget > .fakelink > h3:before,
2823 #sidebar-group-header > .fakelink > h3:before,
2824 .settings-block > .fakelink > h3:before {
2825     font-family: ForkAwesome;
2826     content: "\f0d7"; /* Bottom Plain Pointer */
2827 }
2828
2829 h3.connector {
2830     line-height: 40px;
2831 }
2832
2833 /* Intro Notifications */
2834 ul.notif-network-list {
2835     margin-left: -15px;
2836     margin-right: -15px;
2837 }
2838 ul.notif-network-list > li {
2839     padding-left: 15px;
2840     padding-right: 15px;
2841 }
2842 .intro-wrapper.media {
2843     overflow: visible;
2844     word-wrap: break-word;
2845     margin-top: 0;
2846 }
2847 .intro-photo-wrapper img.intro-photo {
2848     height:80px;
2849     width: 80px;
2850     border-radius: 4px;
2851 }
2852 .intro-actions {
2853     display: flex;
2854 }
2855 .intro-enty-name h4 {
2856     font-size: 15px !important;
2857 }
2858 .intro-wrapper button.intro-action-link {
2859     opacity: 0.1;
2860     transition: all 0.25s ease-in-out;
2861 }
2862 .intro-wrapper button.intro-action-link,
2863 .intro-wrapper button.intro-action-link:hover {
2864     padding-right: 5px;
2865     padding-left: 5px;
2866     color: $font_color_darker;
2867 }
2868 ul li:hover .intro-wrapper button.intro-action-link {
2869     opacity: 0.8;
2870     transition: all 0.25s ease-in-out;
2871 }
2872 ul li:hover .intro-wrapper button.intro-action-link:hover {
2873     opacity: 1;
2874 }
2875 .intro-action-buttons {
2876     margin-top: 15px;
2877     max-height: 0px;
2878     overflow: hidden;
2879     transition: max-height 0.1s ease-out;
2880 }
2881 ul.notif-network-list > li:hover .intro-action-buttons {
2882     max-height: 30px;
2883     transition: max-height 0.1s ease-in;
2884 }
2885 .intro-desc-label, .intro-url-label, .intro-network-label,
2886 .intro-location-label, .intro-keywords-label,
2887 .intro-about-label, .intro-knowyou-label, .intro-madeby-label {
2888     font-weight: bold;
2889 }
2890 .intro-contact-info.xs .intro-url-label, .intro-contact-info.xs .intro-network-label,
2891 .intro-contact-info.xs .intro-location-label,
2892 .intro-contact-info.xs .intro-keywords-label, .intro-contact-info.xs .intro-about-label,
2893 .intro-contact-info.xs .intro-knowyou-label {
2894     display: block;
2895     margin-top: 5px
2896 }
2897
2898 /* Notifications Page */
2899 ul.notif-network-list li.unseen {
2900     background-color: #e3eff3;
2901 }
2902 .notif-item img.notif-image {
2903     height: 48px;
2904     width: 48px;
2905     border-radius: 4px;
2906 }
2907 .notif-item .notif-desc-wrapper {
2908     height: 48px;
2909 }
2910 .notif-item .notif-desc-wrapper a {
2911     height: 100%;
2912     display: block;
2913     color: $font_color_darker;
2914     font-size: 13px;
2915     font-weight: 600;
2916 }
2917
2918 /* Search Page */
2919
2920 /* This is a little bit hacky. Since the search page is used for diferent
2921 content types we can't apply the generic-page-wrapper class.
2922 So we apply the css of the generic-page-wrapper class to the ul element with some
2923 little modifications to emulate a standard page template */
2924 .search-content-wrapper > ul.viewcontact_wrapper {
2925     min-height: calc(100vh - 150px);
2926     padding-top: 15px;
2927     padding-bottom: 20px;
2928     margin: 0;
2929     margin-bottom: 20px;
2930     border: none;
2931     background-color: rgba(255,255,255,$contentbg_transp);
2932     border-radius: 4px;
2933     position: relative;
2934     color: $font_color_darker;
2935     box-shadow: 0 0 3px #dadada;
2936     -webkit-box-shadow: 0 0 3px #dadada;
2937     -moz-box-shadow: 0 0 3px #dadada;
2938 }
2939
2940 /* Help Page */
2941 section.help-content-wrapper h1 {
2942     padding-bottom: 0.3em;
2943     font-size: 1.8em;
2944     border-bottom: 1px solid #ddd;
2945 }
2946 section.help-content-wrapper h2 {
2947     padding-bottom: 0.3em;
2948     font-size: 1.5em;
2949     border-bottom: 1px solid #ddd;
2950 }
2951 section.help-content-wrapper h3 {
2952     font-size: 1.2em;
2953 }
2954 section.help-content-wrapper h4 {
2955     font-size: 1em;
2956 }
2957 section.help-content-wrapper h1,
2958 section.help-content-wrapper h2,
2959 section.help-content-wrapper h3,
2960 section.help-content-wrapper h4,
2961 section.help-content-wrapper h5,
2962 section.help-content-wrapper h6 {
2963     margin-top: 24px;
2964     margin-bottom: 16px;
2965     font-weight: 600;
2966     line-height: 1.25;
2967 }
2968 section.help-content-wrapper p {
2969     margin: 0.4em 0;
2970 }
2971 section.help-content-wrapper p,
2972 section.help-content-wrapper a,
2973 section.help-content-wrapper li {
2974     line-height: 1.6;
2975     font-size: 0.96em;
2976 }
2977
2978 /*Admin Page*/
2979 #adminpage #frio_background_image .image-select {
2980     display: none;
2981 }
2982 #adminpage #frio_background_image.input-group {
2983     display: block;
2984 }
2985 #admin-summary-wrapper {
2986     padding-top: 10px;
2987 }
2988 #adminpage ul#addonslist, li.addon {
2989     list-style: none;
2990 }
2991 #adminpage li .icon {
2992     display: inline-block;
2993     vertical-align: text-top;
2994     position: relative;
2995     padding-left: 5px;
2996 }
2997 #adminpage li .icon:before {
2998     content: "";
2999     display: inline-block;
3000     position: absolute;
3001     width: 17px;
3002     height: 17px;
3003     left: 0;
3004     margin-left: -20px;
3005     margin-top: 2px;
3006     border: 1px solid #cccccc;
3007     border-radius: 3px;
3008         background-color: $background_color;
3009     -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3010     -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3011     transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3012 }
3013 #adminpage li .icon.on:after {
3014     font-family: "ForkAwesome";
3015     content: "\f00c";
3016     display: inline-block;
3017     position: absolute;
3018     width: 16px;
3019     height: 16px;
3020     left: 0;
3021     top: 0;
3022     margin-left: -20px;
3023     margin-top: 2px;
3024     padding-left: 3px;
3025     padding-top: 1px;
3026     font-size: 11px;
3027     color: $link_color;
3028 }
3029 #adminpage .addon .desc {
3030     padding-left: 10px;
3031 }
3032 #admin-users #users tr.blocked {
3033     background-color: #f8efc0;
3034 }
3035 .adminpage .table-hover > tbody > tr:hover + tr.details {
3036     background-color: #f5f5f5;
3037 }
3038 .offset-anchor::before {
3039     display: block;
3040     content: " ";
3041     margin-top: -100px;
3042     height: 100px;
3043     visibility: hidden;
3044     pointer-events: none;
3045 }
3046
3047 #relocate-form {
3048         margin-top: 5px;
3049 }
3050
3051 /* Manage Page */
3052 #identity-selector-wrapper {
3053     width: auto;
3054     height: auto;
3055     margin-top: 20px;
3056 }
3057 #identity-selector-wrapper .identity-match-photo {
3058     width: auto;
3059     float: none;
3060 }
3061 #identity-selector-wrapper .identity-match-photo button {
3062     position: relative;
3063 }
3064 #identity-selector-wrapper .identity-match-photo .badge {
3065     position: absolute;
3066     top: -8px;
3067     right: -8px;
3068 }
3069 #identity-selector-wrapper .identity-match-name {
3070     text-align: center;
3071 }
3072 #identity-selector-wrapper .identity-match-details {
3073     width: auto;
3074     float: none;
3075 }
3076
3077 /* Register Page */
3078 #register-openid-wrapper, #register-name-wrapper, #register-invite-wrapper, #profile-publish-wrapper {
3079     margin-top: 20px;
3080 }
3081 #register-openid-end, #register-nickname-end
3082 {
3083     margin-top: 40px;
3084 }
3085
3086 /*
3087 * Overwriting for transparency and other colors
3088 */
3089 main .nav-tabs>li.active>a,
3090 main .nav-tabs>li.active>a:focus,
3091 main .nav-tabs>li.active>a:hover {
3092     background-color: rgba(255,255,255,$contentbg_transp);
3093 }
3094
3095 /*
3096  * Modal
3097  */
3098 .modal hr {
3099     border-color: #eee;
3100 }
3101
3102 @media (min-width: 768px) {
3103         .modal-dialog {
3104                 width: 650px;
3105         }
3106 }
3107
3108 /*
3109  * Framework overwrite
3110  */
3111
3112 /* textcomplete for contact filtering*/
3113 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list {
3114     position: relative !important;
3115     top: inherit !important;
3116     bottom: inherit !important;
3117     left: inherit !important;
3118     padding: 0;
3119     margin-left: -15px;
3120     margin-right: -15px;
3121     background-color: transparent;
3122     box-shadow: none;
3123     border: none;
3124 }
3125 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li {
3126     padding-left: 15px;
3127     border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
3128 }
3129 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li:first-child {
3130     display: none;
3131 }
3132 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list
3133 .textcomplete-item > a {
3134     padding: 0 !important;
3135     border-left: none;
3136     background-color: transparent !important;
3137 }
3138 /* this is a little hack for texcomplete contact filter
3139 There are for some reasons empty <a> tags. I don't know why */
3140 .textcomplete-item .contact-wrapper a {
3141     padding: 0;
3142 }
3143
3144 /* hovercard fix */
3145 body .tread-wrapper .hovercard a,
3146 body .tread-wrapper .hovercard a:hover {
3147     color: $link_color;
3148 }
3149 body .tread-wrapper .hovercard:hover .hover-card-content a {
3150     color: $link_color !important;
3151 }
3152
3153 /* Pagination improvements */
3154 .pagination {
3155     text-align: center;
3156     display: block;
3157 }
3158 .pagination > li > a,
3159 .pagination > li > span {
3160     color: $link_color;
3161     float: none;
3162 }
3163 .pagination>li>a:hover,
3164 .pagination>li>span:hover {
3165     color: $link_hover_color;
3166 }
3167 .pagination > .active > a,
3168 .pagination > .active > a:focus,
3169 .pagination > .active > a:hover,
3170 .pagination > .active > span,
3171 .pagination > .active > span:focus,
3172 .pagination > .active > span:hover {
3173     background-color: $link_color;
3174     border-color: $link_color;
3175     border-radius: 3px;
3176 }
3177 .pagination li.pager_n a {
3178     margin-left: 3px;
3179     border-radius: 3px;
3180 }
3181 .pagination .pager_prev a {
3182     margin-left: -5px;
3183     margin-right: 4px;
3184     border-top-right-radius: 3px;
3185     border-bottom-right-radius: 3px;
3186 }
3187 .pagination .pager_next a {
3188     margin-left: 4px;
3189     margin-right: -5px;
3190     border-top-left-radius: 3px;
3191     border-bottom-left-radius: 3px;
3192 }
3193 .pager .next > a,
3194 .pager .previous > a {
3195     float: none;
3196     border-radius: 3px;
3197 }
3198 .pagination .disabled > a,
3199 .pager .disabled > a {
3200     display: none;
3201 }
3202
3203 .pagination li > a,
3204 .pager li > a {
3205         background-color: rgba(255, 255, 255, $contentbg_transp);
3206 }
3207
3208 /*
3209  * some temporary workarounds until this will solved
3210  * elsewhere (e.g. new templates)
3211  */
3212 section .profile-match-wrapper {
3213     float: left;
3214 }
3215
3216 /**
3217  * Login page
3218  */
3219 #login-submit-wrapper {
3220     float: right;
3221 }
3222 #lost-password-link { flex-grow: 2; }
3223 #login-lost-password-link {
3224     margin-bottom: 10px;
3225     float: right;
3226 }
3227 #div_id_remember {
3228     float: left;
3229 }
3230 #id_password_wrapper {
3231     margin-bottom: unset;
3232 }
3233 #login_openid {
3234     clear: both;
3235 }
3236 #register-link {
3237     color: white;
3238     background: #8ad0a1;
3239     width: 100%;
3240 }
3241 #login-end {
3242     clear: both;
3243 }
3244
3245 .mod-home.is-not-singleuser,
3246 .mod-login {
3247     background-color: $login_bg_color;
3248     background-image: linear-gradient(to right, rgba(0,0,0, 0.7) , rgba(0,0,0, 0.4)), url($login_bg_image);
3249     background-size: cover;
3250     background-attachment: fixed;
3251     background-position: center;
3252     padding-top: 0;
3253 }
3254 .mod-home.is-not-singleuser nav.navbar,
3255 .mod-login nav.navbar { background-color: transparent }
3256 .mod-home.is-not-singleuser #topbar-second,
3257 .mod-login #topbar-second {
3258     background-color: transparent;
3259     box-shadow: unset;
3260     border: 0
3261 }
3262 .mod-home.is-not-singleuser .login-content,
3263 .mod-login .login-content {
3264     color: #eee;
3265     margin-top: 2.5%;
3266 }
3267
3268 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3269     margin-top: 4em;
3270 }
3271
3272 .mod-home.is-not-singleuser .login-form > #login-form label,
3273 .mod-login #content #login-form label {
3274     color: #eee;
3275 }
3276
3277 .mod-home.is-not-singleuser .login-panel-content,
3278 .mod-login .login-panel-content {
3279     background-color: rgba(255,255,255,.85);
3280 }
3281
3282 .qq-upload-button {
3283     background: $nav_bg !important;
3284     color: $btn_primary_color !important;
3285     float: none;
3286     border: none;
3287     -webkit-box-shadow: none;
3288     box-shadow: none;
3289     -moz-box-shadow: none;
3290     background-image: none;
3291     text-shadow: none;
3292     border-radius: 3px;
3293     margin-bottom: 0;
3294     font-size: 14px;
3295     font-weight: 600;
3296     padding: 8px 16px;
3297     color: inherit;
3298     width: 100% !important;
3299 }
3300
3301 .qq-upload-drop-area {
3302     background: white !important;
3303     float: none;
3304     border: none;
3305     -webkit-box-shadow: none;
3306     box-shadow: none;
3307     -moz-box-shadow: none;
3308     background-image: none;
3309     text-shadow: none;
3310     border-radius: 3px;
3311     margin-bottom: 0;
3312     font-size: 14px;
3313     font-weight: 600;
3314     padding: 8px 16px;
3315     color: inherit;
3316     width: 100% !important;
3317     display: block !important;
3318     position: relative !important;
3319     border: black 1px dashed !important;
3320     margin-bottom: 5px !important;
3321     margin-top: 15px !important;
3322 }
3323
3324 /**
3325  * The different views of js fullcalendar
3326  */
3327 #fc-header {
3328         margin-top: 20px;
3329         margin-bottom: 10px;
3330 }
3331 #fc-header-left,
3332 #fc-header-right,
3333 #event-calendar-title {
3334         display: inline-block;
3335 }
3336 #fc-title {
3337         margin: 0;
3338         padding-left: 20px;
3339
3340 }
3341 #fc-header-right {
3342         margin-top: -4px;
3343 }
3344 #fc-header-right .dropdown > button {
3345         color: inherit;
3346 }
3347 #event-calendar-title {
3348         vertical-align: middle;
3349 }
3350 #event-calendar-views {
3351         padding: 6px 9px;
3352         font-size: 14px
3353 }
3354 .fc .fc-toolbar {
3355         display: none;
3356 }
3357 .fc .fc-month-view td.fc-widget-content,
3358 .fc .fc-list-view,
3359 .fc .fc-list-view .fc-list-table td,
3360 .fc .fc-body td {
3361         border-style: none;
3362 }
3363 .fc td.fc-widget-header,
3364 .fc th.fc-widget-header {
3365         border-left: none;
3366         border-right: none;
3367         border-top: none;
3368 }
3369 .fc .fc-month-view td.fc-day {
3370         border-left: none;
3371         border-right: none;
3372         border-bottom: 1px solid;
3373         padding: 0 6px;
3374 }
3375 .fc .fc-day-grid-container .fc-row {
3376         border-bottom: 1px solid;
3377         border-color: #ddd;
3378 }
3379 .fc tr td.fc-today {
3380         border-style: none;
3381 }
3382 .fc .fc-month-view .fc-content .fc-title .item-desc {
3383         font-size: 11px;
3384 }
3385 .fc .fc-view-container {
3386         margin-top: 25px;
3387 }
3388 .fc .fc-list-view td {
3389         padding: 0;
3390 }
3391 #events-calendar.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
3392         float: left;
3393         font-size: 12px;
3394 }
3395 .fc .fc-event {
3396         background-color: #E3F2FD;
3397         border: 1px solid #BBDEFB;
3398         color: $font_color_darker;
3399 }
3400 .fc .fc-month-view .fc-time,
3401 .fc .fc-listMonth-view .fc-list-item-time,
3402 .fc .fc-listMonth-view .fc-list-item-marker,
3403 .fc .fc-listMonth-view .fc-widget-header {
3404         display: none;
3405 }
3406 .fc .fc-listMonth-view .fc-list-item:hover td {
3407         background: transparent;
3408         cursor: pointer;
3409 }
3410 .fc .fc-listMonth-view .seperator {
3411         margin-left: 30px;
3412         width: 60px;
3413 }
3414
3415 /**
3416  * The event-card
3417  */
3418 .event-card {
3419         width: auto;
3420 }
3421 .event-card .event-label,
3422 .event-card .location-label {
3423         font-weight: bold;
3424 }
3425 .popover.event-card .event-card-basic-content {
3426         margin-top: 0;
3427         padding: 9px;
3428         padding-left: 0px;
3429 }
3430 .event-card .event-hover-location .location {
3431         color: $font_color;
3432         font-size: 13px;
3433 }
3434
3435 /* Medium devices (desktops, 992px and up) */
3436 @media (min-width: 992px) {
3437     .mod-home.is-not-singleuser #content,
3438     .mod-login #content {
3439         margin-top: 100px!important;
3440     }
3441
3442     .mod-home.is-not-singleuser .login-form > #login-form,
3443     .mod-home.is-not-singleuser .login-form > #login-extra-links,
3444     .mod-login #content #login-form {
3445         background-color: #fff;
3446         padding: 1em;
3447         position: relative;
3448     }
3449     .mod-home.is-not-singleuser .login-form > #login-extra-links {
3450         margin-top: unset;
3451         background-color: white;
3452     }
3453
3454     .mod-home.is-not-singleuser .login-form > #login-form label,
3455     .mod-login #content #login-form label {
3456         color: #444;
3457     }
3458
3459     .mod-home.is-not-singleuser .login-form::before,
3460     .mod-login #content #login-form::before {
3461         display: block;
3462         position: absolute;
3463         content: " ";
3464         background-color: rgba(255,255,255,0.1);
3465         width:90%;
3466         height: 110%;
3467         top: -5%;
3468         left: 5%;
3469         z-index: -1;
3470     }
3471
3472     .mod-home.is-not-singleuser .login-form::after,
3473     .mod-login #content #login-form::after {
3474         display: block;
3475         position: absolute;
3476         content: " ";
3477         background-color: rgba(255,255,255,0.2);
3478         width:80%;
3479         height: 120%;
3480         top: -10%;
3481         left: 10%;
3482         z-index: -1;
3483     }
3484 }
3485
3486 /* Mobile display */
3487 @media (max-width: 600px) {
3488         body {
3489                 padding-top: 95px;
3490         }
3491     body.minimal {
3492         padding: 15px;
3493     }
3494
3495     #friendica-logo-mask {
3496                 display: none;
3497         }
3498
3499         .container {
3500                 padding-right: 0;
3501                 padding-left: 0;
3502         }
3503
3504         .panel {
3505                 border-radius: 0;
3506                 margin-bottom: 5px;
3507         }
3508
3509         .panel .panel-body {
3510                 padding: 10px;
3511         }
3512
3513     .toplevel_item > .wall-item-container {
3514         padding: 0;
3515     }
3516
3517         .wall-spacer {
3518                 height: 0px;
3519         }
3520
3521         .wall-item-actions {
3522                 margin-top: 10px;
3523         }
3524
3525         .media {
3526                 margin-top: 0;
3527         }
3528
3529         .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 {
3530                 border-radius: 0;
3531                 padding: 10px;
3532         }
3533
3534         .row {
3535                 margin-right: 0;
3536         }
3537
3538         .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 {
3539                 padding-right: 0;
3540         }
3541
3542         .wwto .contact-photo {
3543                 height: 19px;
3544                 padding: 0;
3545                 top: 24px;
3546                 left: 24px;
3547         }
3548
3549         /*
3550                 Prevent automatic zoom on input focus on iOS
3551                 see https://stackoverflow.com/a/16255670
3552         */
3553         .form-control {
3554                 font-size: 16px;
3555         }
3556
3557     .wall-item-container.thread_level_3,
3558     .wall-item-container.thread_level_4,
3559     .wall-item-container.thread_level_5,
3560     .wall-item-container.thread_level_6,
3561     .wall-item-container.thread_level_7 {
3562         margin-left: 5px;
3563     }
3564 }