view/theme/frio/css/style.css

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