view/theme/frio/css/style.css

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