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 #contact-drop-confirm .contact-actions,
2508 #contact-drop-confirm .contact-photo-overlay,
2509 #contact-drop-confirm .contact-photo-menu {
2510         display: none;
2511 }
2512 #contact-drop-confirm #confirm-form {
2513         margin-top: 20px;
2514 }
2515
2516 /* contact-edit */
2517 #contact-edit-actions {
2518         position: absolute;
2519 }
2520 #contact-edit-status-wrapper {
2521         border: none;
2522         background-color: rgba(225, 245, 254, $contentbg_transp);
2523         margin: 15px -15px;
2524 }
2525 #contact-edit-settings {
2526         display: block;
2527 }
2528
2529 /* directory page */
2530 #directory-search-heading {
2531         padding-top: 10px;
2532 }
2533
2534 /* group edit page */
2535 .group-actions {
2536         margin-top: 4px;
2537         margin-bottom: 10px;
2538         font-size: 30px;
2539 }
2540 .group-actions button,
2541 .group-actions a {
2542         font-size: 18px;
2543 }
2544
2545 .contact-group-actions .fa-times-circle {
2546         color: #d00000;
2547 }
2548 .contact-group-actions .fa-plus-circle {
2549         color: #008000;
2550 }
2551
2552 #group-edit-wrapper {
2553         margin-top: 14px;
2554         display: none;
2555 }
2556 #group-edit-header {
2557         display: block;
2558 }
2559 #group-update-wrapper .contact-photo-overlay {
2560         display: none;
2561 }
2562 #group-update-wrapper .viewcontact_wrapper .contact-group-actions {
2563         height: 100%;
2564         margin-top: -10px;
2565         display: flex;
2566 }
2567 #group-update-wrapper .viewcontact_wrapper .contact-group-link {
2568         opacity: 0.8;
2569         font-size: 20px;
2570         line-height: 50px;
2571 }
2572 #group-update-wrapper .viewcontact_wrapper .contact-action-link:hover {
2573         opacity: 1;
2574 }
2575 #group-update-wrapper .shortmode {
2576         height: 53px;
2577         overflow: hidden;
2578 }
2579 #group-update-wrapper .shortmode .contact-photo {
2580         height: 32px;
2581         width: 32px;
2582 }
2583 #group-update-wrapper .shortmode .media {
2584         overflow: hidden;
2585 }
2586 #group-update-wrapper .shortmode .contact-entry-desc {
2587         font-size: 12px !important;
2588 }
2589 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading {
2590         margin: 0;
2591 }
2592 #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading a {
2593         font-size: 13px !important;
2594         white-space: nowrap;
2595 }
2596 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-rel,
2597 #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-network {
2598         display: none;
2599 }
2600
2601 /* private mail */
2602 .message-content-wrapper > li {
2603         /* we need this overwriting because we have no template file
2604    for the general mail page /message
2605 */
2606         list-style-type: none;
2607 }
2608 .mail-thread {
2609         max-height: calc(100vh - 200px);
2610 }
2611 #mail-conversation {
2612         overflow-y: auto;
2613         max-height: calc(100vh - 400px);
2614         max-height: auto;
2615         margin-bottom: 0px;
2616         padding: 0 15px;
2617 }
2618 .mail-conv-wrapper .media .contact-photo-wrapper img {
2619         height: 48px;
2620         width: 48px;
2621 }
2622 .mail-thread #prvmail-to-label,
2623 .mail-thread #prvmail-subject-label {
2624         display: none;
2625 }
2626 .mail-thread #prvmail-message-label > label {
2627         display: none;
2628 }
2629 .mail-thread #prvmail-message-label textarea {
2630         max-height: 120px;
2631 }
2632 .mail-conv-wrapper {
2633         padding: 15px 0;
2634         border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2635 }
2636 #message-sidebar {
2637         height: calc(100vh - 150px);
2638 }
2639 #message-preview {
2640         height: calc(100% - 20px);
2641 }
2642 #message-preview ul {
2643         margin: 0px;
2644 }
2645 #message-preview .media-list li {
2646         padding: 0px 10px;
2647         border: none;
2648 }
2649 #message-preview .media-list li:hover {
2650         border-left: none !important;
2651 }
2652 #message-preview .media-list li a {
2653         color: $link_color;
2654 }
2655 .mail-list-outside-wrapper {
2656         padding: 5px 0;
2657         border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
2658 }
2659 .mail-list-outside-wrapper .contact-photo-wrapper img {
2660         height: 48px;
2661         width: 48px;
2662 }
2663 #prvmail-end {
2664         clear: both;
2665 }
2666 #modal #prvmail-text-edit-bb .bb-img {
2667         display: none;
2668 }
2669
2670 /* photos */
2671 #photo-album-edit-name-label {
2672         width: 100%;
2673 }
2674 .photo-album-edit-name {
2675         width: 60%;
2676 }
2677
2678 .photo-album-actions {
2679         margin-bottom: 10px;
2680 }
2681 .photo-album-actions .photos-order-link {
2682         float: right;
2683 }
2684 /* Events page */
2685
2686 .fc .fc-month-view .fc-content .fc-title .item-desc:hover {
2687         color: $link_hover_color;
2688 }
2689 .fc .fc-list-item-title a {
2690         color: $link_color;
2691 }
2692 .fc .fc-list-item-title a[href]:hover {
2693         color: $link_hover_color;
2694         text-decoration: none;
2695 }
2696 .event-wrapper .event-owner {
2697         margin-bottom: 15px;
2698 }
2699 .event-wrapper .event-owner img {
2700         display: block;
2701 }
2702 .event-owner img {
2703         margin-right: 5px;
2704         height: 48px;
2705         width: 48;
2706         border-radius: 3px;
2707 }
2708 .event-wrapper .vevent {
2709         margin-left: 0;
2710         margin-right: 0;
2711         box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2712 }
2713 .event-wrapper .event-buttons {
2714         margin-top: 15px;
2715 }
2716 #event-form-wrapper {
2717         padding-top: 5px;
2718 }
2719 #event-edit-form-wrapper {
2720         padding-top: 15px;
2721 }
2722 #event-nav a {
2723         color: $font_color_darker;
2724 }
2725 #event-edit-form-wrapper #event-edit-time {
2726         padding: 10px 0;
2727 }
2728 .event-buttons .plink-event-link {
2729         margin-left: 20px;
2730 }
2731 .vevent .event-summary {
2732         font-size: 16px;
2733 }
2734 .vevent .event-description {
2735         padding: 10px 0;
2736 }
2737 .vevent .event-location .location {
2738         font-size: inherit;
2739         color: inherit;
2740 }
2741 .modal-body .vevent .event-summary {
2742         display: none;
2743 }
2744 #event-preview .vevent .event-summary {
2745         display: block;
2746 }
2747
2748 /* Event Cards */
2749 .event-card-details,
2750 .event-card-header {
2751         width: 100%;
2752 }
2753 .event-card-header,
2754 .event-card-left-date {
2755         float: left;
2756 }
2757 .vevent .event-card-header {
2758         display: table;
2759 }
2760 .event-card-left-date {
2761         width: 60px; /* Das muss wahrscheinlich unterschiedlich sein zwischen calendar und stream */
2762 }
2763 .event-card .event-date-wrapper > span {
2764         display: block;
2765         overflow: hidden;
2766         text-align: center;
2767         white-space: nowrap;
2768 }
2769 .event-card .event-date-wrapper .event-card-short-month {
2770         font-size: 13px;
2771         text-transform: uppercase;
2772 }
2773 .event-card .event-date-wrapper.medium .event-card-short-date {
2774         font-size: 24px;
2775         line-height: 28px;
2776         margin-top: 2px;
2777 }
2778 .event-card .event-card-content {
2779         width: 100%;
2780         padding: 0 5px 0 15px;
2781         box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset;
2782         color: $font_color;
2783         position: relative;
2784 }
2785 .event-card .event-card-content .event-map-btn {
2786         position: absolute;
2787         right: 0;
2788         top: 0;
2789         line-height: 15px;
2790 }
2791 .event-card .event-card-title {
2792         font-size: 14px;
2793         color: $font_color_darker;
2794         line-height: 15px;
2795         font-weight: bold;
2796         margin: 0;
2797 }
2798 .event-card .event-card-location {
2799         margin-top: 10px;
2800         font-size: 13px;
2801 }
2802 .event-card .event-card-location br {
2803         content: " ";
2804 }
2805 .event-card .event-card-location br::after {
2806         content: " ";
2807 }
2808 .event-card-profile-name a {
2809         color: $link_color;
2810 }
2811 .event-card-profile-name a:hover {
2812         color: $link_hover_color;
2813 }
2814 .event-card .event-card-content .event-location-map {
2815         position: absolute;
2816         left: -9999px;
2817         top: -9999px;
2818 }
2819 .event-card .event-card-content .event-location-map .map {
2820         margin-top: 10px;
2821 }
2822 .event-card .description {
2823         margin-top: 10px;
2824         box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, 0.1) inset;
2825 }
2826 /* Photos Pages */
2827 #photo-photo {
2828         position: relative;
2829 }
2830 .photo-next-link,
2831 .photo-prev-link {
2832         height: 64px;
2833         margin-top: -32px;
2834         opacity: 0;
2835         position: absolute;
2836         top: 50%;
2837         transform: translateZ(0);
2838         transition: opacity 0.2s;
2839         width: 100px;
2840         z-index: 11;
2841         font-size: 64px;
2842         color: #fff;
2843         text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
2844 }
2845 .photo-next-link > i,
2846 .photo-prev-link > i {
2847         vertical-align: super;
2848 }
2849 .photo-next-link > i {
2850         float: right;
2851 }
2852 .photo-prev-link {
2853         left: 20px;
2854 }
2855 .photo-next-link {
2856         right: 20px;
2857 }
2858 #photo-photo:hover .photo-next-link,
2859 #photo-photo:hover .photo-prev-link {
2860         opacity: 0.4;
2861 }
2862 #photo-photo .photo-next-link:hover,
2863 #photo-photo .photo-prev-link:hover {
2864         opacity: 1;
2865         color: #fff;
2866 }
2867 .photo-comment-wrapper .comment {
2868         position: relative;
2869 }
2870 .photo-comment-wrapper .wall-item-content {
2871         color: $font_color_darker;
2872         font-size: 13px;
2873 }
2874 .photo-comment-wrapper .comment-wwedit-wrapper,
2875 .photo-comment-wrapper .wall-item-outside-wrapper.media:first-child {
2876         margin-top: 15px;
2877 }
2878
2879 /* Profiles Page */
2880 .profile-listing-table {
2881         display: table;
2882         width: 100%;
2883 }
2884 .profile-listing-row {
2885         display: table-row;
2886 }
2887 .profile-listing-cell {
2888         display: table-cell;
2889 }
2890 .profile-listing-photo {
2891         width: 48px;
2892         height: 48px;
2893         margin: 10px 0px;
2894 }
2895 #profile-listing-new-link-wrapper {
2896         margin-bottom: 20px;
2897 }
2898
2899 #profile-photo-upload-section {
2900         display: none;
2901         padding: 10px;
2902 }
2903 #profile-photo-upload-close {
2904         font-size: 14px;
2905 }
2906
2907 /* Settings */
2908 .section-subtitle-wrapper {
2909         padding: 1px 10px;
2910 }
2911 details.profile-jot-net[open] summary:before,
2912 .panel .section-subtitle-wrapper a.accordion-toggle:before {
2913         font-family: ForkAwesome;
2914         content: "\f0d7";
2915         padding-right: 5px;
2916 }
2917 details.profile-jot-net summary:before,
2918 .panel .section-subtitle-wrapper a.accordion-toggle.collapsed:before {
2919         font-family: ForkAwesome;
2920         content: "\f0da";
2921 }
2922 details.profile-jot-net summary:before {
2923         padding-right: 5px;
2924         padding-left: 3px;
2925 }
2926 details.profile-jot-net[open] summary:before {
2927         padding-right: 5px;
2928         padding-left: 0px;
2929 }
2930 #settings-nick-wrapper {
2931         margin-bottom: 20px;
2932 }
2933 .group {
2934         margin-left: 20px;
2935 }
2936
2937 /* Emulates Bootstrap display */
2938 .settings-block {
2939         margin: 0 0 5px;
2940         background-color: rgba(255, 255, 255, $contentbg_transp);
2941         border-radius: 4px;
2942         padding: 10px 15px;
2943         box-shadow: 0 0 3px #dadada;
2944         -webkit-box-shadow: 0 0 3px #dadada;
2945         -moz-box-shadow: 0 0 3px #dadada;
2946 }
2947
2948 .settings-block.fakelink,
2949 .settings-block > .fakelink {
2950         padding: 10px 25px;
2951         display: block;
2952 }
2953 .settings-block > .fakelink {
2954         margin: -10px -15px 10px -15px;
2955         border-radius: 4px 4px 0 0;
2956 }
2957
2958 .settings-block.fakelink:hover,
2959 .settings-block > .fakelink:hover {
2960         color: $link_hover_color;
2961 }
2962 .settings-block.fakelink > h3,
2963 .settings-block > .fakelink > h3 {
2964         margin: 0;
2965         padding: 0;
2966         color: $link_color;
2967         font-size: 18px;
2968 }
2969
2970 .section-subtitle-wrapper > h2 {
2971         font-size: 18px;
2972         margin-top: 10px;
2973         margin-bottom: 10px;
2974 }
2975
2976 .fakelink > h3:before {
2977         padding-right: 10px;
2978 }
2979 .widget.fakelink > h3:before,
2980 .settings-block.fakelink > h3:before {
2981         font-family: ForkAwesome;
2982         content: "\f0da"; /* Right Plain Pointer */
2983 }
2984 .widget > .fakelink > h3:before,
2985 #sidebar-group-header > .fakelink > h3:before,
2986 .settings-block > .fakelink > h3:before {
2987         font-family: ForkAwesome;
2988         content: "\f0d7"; /* Bottom Plain Pointer */
2989 }
2990
2991 h3.connector {
2992         line-height: 40px;
2993 }
2994
2995 /* Intro Notifications */
2996 ul.notif-network-list {
2997         margin-left: -15px;
2998         margin-right: -15px;
2999 }
3000 ul.notif-network-list > li {
3001         padding-left: 15px;
3002         padding-right: 15px;
3003 }
3004 .intro-wrapper.media {
3005         overflow: visible;
3006         word-wrap: break-word;
3007         margin-top: 0;
3008 }
3009 .intro-photo-wrapper img.intro-photo {
3010         height: 80px;
3011         width: 80px;
3012         border-radius: 4px;
3013 }
3014 .intro-actions {
3015         display: flex;
3016 }
3017 .intro-enty-name h4 {
3018         font-size: 15px !important;
3019 }
3020 .intro-wrapper button.intro-action-link {
3021         opacity: 0.1;
3022         transition: all 0.25s ease-in-out;
3023 }
3024 .intro-wrapper button.intro-action-link,
3025 .intro-wrapper button.intro-action-link:hover {
3026         padding-right: 5px;
3027         padding-left: 5px;
3028         color: $font_color_darker;
3029 }
3030 ul li:hover .intro-wrapper button.intro-action-link {
3031         opacity: 0.8;
3032         transition: all 0.25s ease-in-out;
3033 }
3034 ul li:hover .intro-wrapper button.intro-action-link:hover {
3035         opacity: 1;
3036 }
3037 .intro-action-buttons {
3038         margin-top: 15px;
3039         max-height: 0px;
3040         overflow: hidden;
3041         transition: max-height 0.1s ease-out;
3042 }
3043 ul.notif-network-list > li:hover .intro-action-buttons {
3044         max-height: 30px;
3045         transition: max-height 0.1s ease-in;
3046 }
3047 .intro-desc-label,
3048 .intro-url-label,
3049 .intro-network-label,
3050 .intro-location-label,
3051 .intro-keywords-label,
3052 .intro-about-label,
3053 .intro-knowyou-label,
3054 .intro-madeby-label {
3055         font-weight: bold;
3056 }
3057 .intro-contact-info.xs .intro-url-label,
3058 .intro-contact-info.xs .intro-network-label,
3059 .intro-contact-info.xs .intro-location-label,
3060 .intro-contact-info.xs .intro-keywords-label,
3061 .intro-contact-info.xs .intro-about-label,
3062 .intro-contact-info.xs .intro-knowyou-label {
3063         display: block;
3064         margin-top: 5px;
3065 }
3066
3067 /* Notifications Page */
3068 ul.notif-network-list li.unseen {
3069         background-color: #e3eff3;
3070 }
3071 .notif-item img.notif-image {
3072         height: 48px;
3073         width: 48px;
3074         border-radius: 4px;
3075 }
3076 .notif-item .notif-desc-wrapper {
3077         height: 48px;
3078 }
3079 .notif-item .notif-desc-wrapper a {
3080         height: 100%;
3081         display: block;
3082         color: $font_color_darker;
3083         font-size: 13px;
3084         font-weight: 600;
3085 }
3086
3087 /* Search Page */
3088
3089 /* This is a little bit hacky. Since the search page is used for diferent
3090 content types we can't apply the generic-page-wrapper class.
3091 So we apply the css of the generic-page-wrapper class to the ul element with some
3092 little modifications to emulate a standard page template */
3093 .search-content-wrapper > ul.viewcontact_wrapper {
3094         min-height: calc(100vh - 150px);
3095         padding-top: 15px;
3096         padding-bottom: 20px;
3097         margin: 0;
3098         margin-bottom: 20px;
3099         border: none;
3100         background-color: rgba(255, 255, 255, $contentbg_transp);
3101         border-radius: 4px;
3102         position: relative;
3103         color: $font_color_darker;
3104         box-shadow: 0 0 3px #dadada;
3105         -webkit-box-shadow: 0 0 3px #dadada;
3106         -moz-box-shadow: 0 0 3px #dadada;
3107 }
3108
3109 /* Help Page */
3110 section.help-content-wrapper h1 {
3111         padding-bottom: 0.3em;
3112         font-size: 1.8em;
3113         border-bottom: 1px solid #ddd;
3114 }
3115 section.help-content-wrapper h2 {
3116         padding-bottom: 0.3em;
3117         font-size: 1.5em;
3118         border-bottom: 1px solid #ddd;
3119 }
3120 section.help-content-wrapper h3 {
3121         font-size: 1.2em;
3122 }
3123 section.help-content-wrapper h4 {
3124         font-size: 1em;
3125 }
3126 section.help-content-wrapper h1,
3127 section.help-content-wrapper h2,
3128 section.help-content-wrapper h3,
3129 section.help-content-wrapper h4,
3130 section.help-content-wrapper h5,
3131 section.help-content-wrapper h6 {
3132         margin-top: 24px;
3133         margin-bottom: 16px;
3134         font-weight: 600;
3135         line-height: 1.25;
3136 }
3137 section.help-content-wrapper p {
3138         margin: 0.4em 0;
3139 }
3140 section.help-content-wrapper p,
3141 section.help-content-wrapper a,
3142 section.help-content-wrapper li {
3143         line-height: 1.6;
3144         font-size: 0.96em;
3145 }
3146
3147 /*Admin Page*/
3148 #adminpage #frio_background_image .image-select {
3149         display: none;
3150 }
3151 #adminpage #frio_background_image.input-group {
3152         display: block;
3153 }
3154 #admin-summary-wrapper {
3155         padding-top: 10px;
3156 }
3157 #adminpage ul#addonslist,
3158 li.addon {
3159         list-style: none;
3160 }
3161 #adminpage li .icon {
3162         display: inline-block;
3163         vertical-align: text-top;
3164         position: relative;
3165         padding-left: 5px;
3166 }
3167 #adminpage li .icon:before {
3168         content: "";
3169         display: inline-block;
3170         position: absolute;
3171         width: 17px;
3172         height: 17px;
3173         left: 0;
3174         margin-left: -20px;
3175         margin-top: 2px;
3176         border: 1px solid #cccccc;
3177         border-radius: 3px;
3178         background-color: $background_color;
3179         -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3180         -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3181         transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3182 }
3183 #adminpage li .icon.on:after {
3184         font-family: "ForkAwesome";
3185         content: "\f00c";
3186         display: inline-block;
3187         position: absolute;
3188         width: 16px;
3189         height: 16px;
3190         left: 0;
3191         top: 0;
3192         margin-left: -20px;
3193         margin-top: 2px;
3194         padding-left: 3px;
3195         padding-top: 1px;
3196         font-size: 11px;
3197         color: $link_color;
3198 }
3199 #adminpage .addon .desc {
3200         padding-left: 10px;
3201 }
3202 #admin-users #users tr.blocked {
3203         background-color: #f8efc0;
3204 }
3205 .adminpage .table-hover > tbody > tr:hover + tr.details {
3206         background-color: #f5f5f5;
3207 }
3208 .offset-anchor::before {
3209         display: block;
3210         content: " ";
3211         margin-top: -100px;
3212         height: 100px;
3213         visibility: hidden;
3214         pointer-events: none;
3215 }
3216
3217 #relocate-form {
3218         margin-top: 5px;
3219 }
3220
3221 /* Manage Page */
3222 #identity-selector-wrapper {
3223         width: auto;
3224         height: auto;
3225         margin-top: 20px;
3226 }
3227 #identity-selector-wrapper .identity-match-photo {
3228         width: auto;
3229         float: none;
3230 }
3231 #identity-selector-wrapper .identity-match-photo button {
3232         position: relative;
3233 }
3234 #identity-selector-wrapper .identity-match-photo .badge {
3235         position: absolute;
3236         top: -8px;
3237         right: -8px;
3238 }
3239 #identity-selector-wrapper .identity-match-name {
3240         text-align: center;
3241 }
3242 #identity-selector-wrapper .identity-match-details {
3243         width: auto;
3244         float: none;
3245 }
3246
3247 /* Register Page */
3248 #register-openid-wrapper,
3249 #register-name-wrapper,
3250 #register-invite-wrapper,
3251 #profile-publish-wrapper {
3252         margin-top: 20px;
3253 }
3254 #register-openid-end,
3255 #register-nickname-end {
3256         margin-top: 40px;
3257 }
3258
3259 /*
3260 * Overwriting for transparency and other colors
3261 */
3262 main .nav-tabs > li.active > a,
3263 main .nav-tabs > li.active > a:focus,
3264 main .nav-tabs > li.active > a:hover {
3265         background-color: rgba(255, 255, 255, $contentbg_transp);
3266 }
3267
3268 /*
3269  * Modal
3270  */
3271 .modal hr {
3272         border-color: #eee;
3273 }
3274
3275 @media (min-width: 768px) {
3276         .modal-dialog {
3277                 width: 650px;
3278         }
3279 }
3280
3281 /*
3282  * Framework overwrite
3283  */
3284
3285 /* textcomplete for contact filtering*/
3286 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list {
3287         position: relative !important;
3288         top: inherit !important;
3289         bottom: inherit !important;
3290         left: inherit !important;
3291         padding: 0;
3292         margin-left: -15px;
3293         margin-right: -15px;
3294         background-color: transparent;
3295         box-shadow: none;
3296         border: none;
3297 }
3298 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li {
3299         padding-left: 15px;
3300         border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
3301 }
3302 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li:first-child {
3303         display: none;
3304 }
3305 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list .textcomplete-item > a {
3306         padding: 0 !important;
3307         border-left: none;
3308         background-color: transparent !important;
3309 }
3310 /* this is a little hack for texcomplete contact filter
3311 There are for some reasons empty <a> tags. I don't know why */
3312 .textcomplete-item .contact-wrapper a {
3313         padding: 0;
3314 }
3315
3316 /* hovercard fix */
3317 body .tread-wrapper .hovercard a,
3318 body .tread-wrapper .hovercard a:hover {
3319         color: $link_color;
3320 }
3321 body .tread-wrapper .hovercard:hover .hover-card-content a {
3322         color: $link_color !important;
3323 }
3324
3325 /* Pagination improvements */
3326 .pagination {
3327         text-align: center;
3328         display: block;
3329 }
3330 .pagination > li > a,
3331 .pagination > li > span {
3332         color: $link_color;
3333         float: none;
3334 }
3335 .pagination > li > a:hover,
3336 .pagination > li > span:hover {
3337         color: $link_hover_color;
3338 }
3339 .pagination > .active > a,
3340 .pagination > .active > a:focus,
3341 .pagination > .active > a:hover,
3342 .pagination > .active > span,
3343 .pagination > .active > span:focus,
3344 .pagination > .active > span:hover {
3345         background-color: $link_color;
3346         border-color: $link_color;
3347         border-radius: 3px;
3348 }
3349 .pagination li.pager_n a {
3350         margin-left: 3px;
3351         border-radius: 3px;
3352 }
3353 .pagination .pager_prev a {
3354         margin-left: -5px;
3355         margin-right: 4px;
3356         border-top-right-radius: 3px;
3357         border-bottom-right-radius: 3px;
3358 }
3359 .pagination .pager_next a {
3360         margin-left: 4px;
3361         margin-right: -5px;
3362         border-top-left-radius: 3px;
3363         border-bottom-left-radius: 3px;
3364 }
3365 .pager .next > a,
3366 .pager .previous > a {
3367         float: none;
3368         border-radius: 3px;
3369 }
3370 .pagination .disabled > a,
3371 .pager .disabled > a {
3372         display: none;
3373 }
3374
3375 .pagination li > a,
3376 .pager li > a {
3377         background-color: rgba(255, 255, 255, $contentbg_transp);
3378 }
3379
3380 /*
3381  * some temporary workarounds until this will solved
3382  * elsewhere (e.g. new templates)
3383  */
3384 section .profile-match-wrapper {
3385         float: left;
3386 }
3387
3388 /**
3389  * Login page
3390  */
3391 #login-submit-wrapper {
3392         float: right;
3393 }
3394 #lost-password-link {
3395         flex-grow: 2;
3396 }
3397 #login-lost-password-link {
3398         margin-bottom: 10px;
3399         float: right;
3400 }
3401 #div_id_remember {
3402         float: left;
3403 }
3404 #id_password_wrapper {
3405         margin-bottom: unset;
3406 }
3407 #login_openid {
3408         clear: both;
3409 }
3410 #register-link {
3411         color: white;
3412         background: #8ad0a1;
3413         width: 100%;
3414 }
3415 #login-end {
3416         clear: both;
3417 }
3418
3419 .mod-home.is-not-singleuser,
3420 .mod-login {
3421         background-color: $login_bg_color;
3422         background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)), url($login_bg_image);
3423         background-size: cover;
3424         background-attachment: fixed;
3425         background-position: center;
3426         padding-top: 0;
3427 }
3428 .mod-home.is-not-singleuser nav.navbar,
3429 .mod-login nav.navbar {
3430         background-color: transparent;
3431         position: inherit;
3432 }
3433 .mod-home.is-not-singleuser #topbar-second,
3434 .mod-login #topbar-second {
3435         background-color: transparent;
3436         box-shadow: unset;
3437         border: 0;
3438 }
3439 .mod-home.is-not-singleuser .login-content,
3440 .mod-login .login-content {
3441         color: #eee;
3442         margin-top: 2.5%;
3443 }
3444
3445 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3446         margin-top: 4em;
3447 }
3448
3449 .mod-home.is-not-singleuser .login-form > #login-form label,
3450 .mod-login #content #login-form label {
3451         color: #eee;
3452 }
3453
3454 .mod-home.is-not-singleuser .login-panel-content,
3455 .mod-login .login-panel-content {
3456         background-color: rgba(255, 255, 255, 0.85);
3457 }
3458
3459 .qq-upload-button {
3460         background: $nav_bg !important;
3461         color: $btn_primary_color !important;
3462         float: none;
3463         border: none;
3464         -webkit-box-shadow: none;
3465         box-shadow: none;
3466         -moz-box-shadow: none;
3467         background-image: none;
3468         text-shadow: none;
3469         border-radius: 3px;
3470         margin-bottom: 0;
3471         font-size: 14px;
3472         font-weight: 600;
3473         padding: 8px 16px;
3474         color: inherit;
3475         width: 100% !important;
3476 }
3477
3478 .qq-upload-drop-area {
3479         background: white !important;
3480         float: none;
3481         border: none;
3482         -webkit-box-shadow: none;
3483         box-shadow: none;
3484         -moz-box-shadow: none;
3485         background-image: none;
3486         text-shadow: none;
3487         border-radius: 3px;
3488         margin-bottom: 0;
3489         font-size: 14px;
3490         font-weight: 600;
3491         padding: 8px 16px;
3492         color: inherit;
3493         width: 100% !important;
3494         display: block !important;
3495         position: relative !important;
3496         border: black 1px dashed !important;
3497         margin-bottom: 5px !important;
3498         margin-top: 15px !important;
3499 }
3500
3501 /**
3502  * The different views of js fullcalendar
3503  */
3504 #fc-header {
3505         margin-top: 20px;
3506         margin-bottom: 10px;
3507 }
3508 #fc-header-left,
3509 #fc-header-right,
3510 #event-calendar-title {
3511         display: inline-block;
3512 }
3513 #fc-title {
3514         margin: 0;
3515         padding-left: 20px;
3516 }
3517 #fc-header-right {
3518         margin-top: -4px;
3519 }
3520 #fc-header-right .dropdown > button {
3521         color: inherit;
3522 }
3523 #event-calendar-title {
3524         vertical-align: middle;
3525 }
3526 #event-calendar-views {
3527         padding: 6px 9px;
3528         font-size: 14px;
3529 }
3530 .fc .fc-toolbar {
3531         display: none;
3532 }
3533 .fc .fc-month-view td.fc-widget-content,
3534 .fc .fc-list-view,
3535 .fc .fc-list-view .fc-list-table td,
3536 .fc .fc-body td {
3537         border-style: none;
3538 }
3539 .fc td.fc-widget-header,
3540 .fc th.fc-widget-header {
3541         border-left: none;
3542         border-right: none;
3543         border-top: none;
3544 }
3545 .fc .fc-month-view td.fc-day {
3546         border-left: none;
3547         border-right: none;
3548         border-bottom: 1px solid;
3549         padding: 0 6px;
3550 }
3551 .fc .fc-day-grid-container .fc-row {
3552         border-bottom: 1px solid;
3553         border-color: #ddd;
3554 }
3555 .fc tr td.fc-today {
3556         border-style: none;
3557 }
3558 .fc .fc-month-view .fc-content .fc-title .item-desc {
3559         font-size: 11px;
3560 }
3561 .fc .fc-view-container {
3562         margin-top: 25px;
3563 }
3564 .fc .fc-list-view td {
3565         padding: 0;
3566 }
3567 #events-calendar.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
3568         float: left;
3569         font-size: 12px;
3570 }
3571 .fc .fc-event {
3572         background-color: #e3f2fd;
3573         border: 1px solid #bbdefb;
3574         color: $font_color_darker;
3575 }
3576 .fc .fc-month-view .fc-time,
3577 .fc .fc-listMonth-view .fc-list-item-time,
3578 .fc .fc-listMonth-view .fc-list-item-marker,
3579 .fc .fc-listMonth-view .fc-widget-header {
3580         display: none;
3581 }
3582 .fc .fc-listMonth-view .fc-list-item:hover td {
3583         background: transparent;
3584         cursor: pointer;
3585 }
3586 .fc .fc-listMonth-view .seperator {
3587         margin-left: 30px;
3588         width: 60px;
3589 }
3590
3591 /**
3592  * The event-card
3593  */
3594 .event-card {
3595         width: auto;
3596 }
3597 .event-card .event-label,
3598 .event-card .location-label {
3599         font-weight: bold;
3600 }
3601 .popover.event-card .event-card-basic-content {
3602         margin-top: 0;
3603         padding: 9px;
3604         padding-left: 0px;
3605 }
3606 .event-card .event-hover-location .location {
3607         color: $font_color;
3608         font-size: 13px;
3609 }
3610
3611 /* Medium devices (desktops, 992px and up) */
3612 @media (min-width: 992px) {
3613         .mod-home.is-not-singleuser #content,
3614         .mod-login #content {
3615                 margin-top: 100px !important;
3616         }
3617
3618         .mod-home.is-not-singleuser .login-form > #login-form,
3619         .mod-home.is-not-singleuser .login-form > #login-extra-links,
3620         .mod-login #content #login-form {
3621                 background-color: #fff;
3622                 padding: 1em;
3623                 position: relative;
3624         }
3625         .mod-home.is-not-singleuser .login-form > #login-extra-links {
3626                 margin-top: unset;
3627                 background-color: white;
3628         }
3629
3630         .mod-home.is-not-singleuser .login-form > #login-form label,
3631         .mod-login #content #login-form label {
3632                 color: #444;
3633         }
3634
3635         .mod-home.is-not-singleuser .login-form::before,
3636         .mod-login #content #login-form::before {
3637                 display: block;
3638                 position: absolute;
3639                 content: " ";
3640                 background-color: rgba(255, 255, 255, 0.1);
3641                 width: 90%;
3642                 height: 110%;
3643                 top: -5%;
3644                 left: 5%;
3645                 z-index: -1;
3646         }
3647
3648         .mod-home.is-not-singleuser .login-form::after,
3649         .mod-login #content #login-form::after {
3650                 display: block;
3651                 position: absolute;
3652                 content: " ";
3653                 background-color: rgba(255, 255, 255, 0.2);
3654                 width: 80%;
3655                 height: 120%;
3656                 top: -10%;
3657                 left: 10%;
3658                 z-index: -1;
3659         }
3660 }
3661
3662 /* Mobile display */
3663 @media (max-width: 600px) {
3664         body {
3665                 padding-top: 95px;
3666         }
3667         body.minimal {
3668                 padding: 15px;
3669         }
3670
3671         #friendica-logo-mask {
3672                 display: none;
3673         }
3674
3675         .container {
3676                 padding-right: 0;
3677                 padding-left: 0;
3678         }
3679
3680         .panel {
3681                 border-radius: 0;
3682                 margin-bottom: 5px;
3683         }
3684
3685         .panel .panel-body {
3686                 padding: 10px;
3687         }
3688
3689         .toplevel_item > .wall-item-container {
3690                 padding: 0;
3691         }
3692
3693         .wall-spacer {
3694                 height: 0px;
3695         }
3696
3697         .wall-item-actions {
3698                 margin-top: 10px;
3699         }
3700
3701         .media {
3702                 margin-top: 0;
3703         }
3704
3705         .generic-page-wrapper,
3706         .videos-content-wrapper,
3707         .suggest-content-wrapper,
3708         .help-content-wrapper,
3709         .match-content-wrapper,
3710         .dirfind-content-wrapper,
3711         .directory-content-wrapper,
3712         .delegation-content-wrapper,
3713         .notes-content-wrapper,
3714         .message-content-wrapper,
3715         .apps-content-wrapper,
3716         #adminpage,
3717         .delegate-content-wrapper,
3718         .uexport-content-wrapper,
3719         .dfrn_request-content-wrapper,
3720         .friendica-content-wrapper,
3721         .credits-content-wrapper,
3722         .nogroup-content-wrapper,
3723         .profperm-content-wrapper,
3724         .invite-content-wrapper,
3725         .tos-content-wrapper,
3726         .fsuggest-content-wrapper {
3727                 border-radius: 0;
3728                 padding: 10px;
3729         }
3730
3731         .row {
3732                 margin-right: 0;
3733         }
3734
3735         .col-lg-1,
3736         .col-lg-10,
3737         .col-lg-11,
3738         .col-lg-12,
3739         .col-lg-2,
3740         .col-lg-3,
3741         .col-lg-4,
3742         .col-lg-5,
3743         .col-lg-6,
3744         .col-lg-7,
3745         .col-lg-8,
3746         .col-lg-9,
3747         .col-md-1,
3748         .col-md-10,
3749         .col-md-11,
3750         .col-md-12,
3751         .col-md-2,
3752         .col-md-3,
3753         .col-md-4,
3754         .col-md-5,
3755         .col-md-6,
3756         .col-md-7,
3757         .col-md-8,
3758         .col-md-9,
3759         .col-sm-1,
3760         .col-sm-10,
3761         .col-sm-11,
3762         .col-sm-12,
3763         .col-sm-2,
3764         .col-sm-3,
3765         .col-sm-4,
3766         .col-sm-5,
3767         .col-sm-6,
3768         .col-sm-7,
3769         .col-sm-8,
3770         .col-sm-9,
3771         .col-xs-1,
3772         .col-xs-10,
3773         .col-xs-11,
3774         .col-xs-12,
3775         .col-xs-2,
3776         .col-xs-3,
3777         .col-xs-4,
3778         .col-xs-5,
3779         .col-xs-6,
3780         .col-xs-7,
3781         .col-xs-8,
3782         .col-xs-9 {
3783                 padding-right: 0;
3784         }
3785
3786         .wwto .contact-photo {
3787                 height: 19px;
3788                 padding: 0;
3789                 top: 24px;
3790                 left: 24px;
3791         }
3792
3793         /*
3794                 Prevent automatic zoom on input focus on iOS
3795                 see https://stackoverflow.com/a/16255670
3796         */
3797         .form-control {
3798                 font-size: 16px;
3799         }
3800
3801         .wall-item-container.thread_level_3,
3802         .wall-item-container.thread_level_4,
3803         .wall-item-container.thread_level_5,
3804         .wall-item-container.thread_level_6,
3805         .wall-item-container.thread_level_7 {
3806                 margin-left: 5px;
3807         }
3808 }