view/theme/frio/css/style.css

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