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