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