view/theme/frio/css/style.css

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