view/theme/frio/css/style.css

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