view/theme/frio/css/style.css

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