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