view/theme/frio/css/style.css

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