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 a.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 a.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 .fakelink > h3:before {
2969         padding-right: 10px;
2970 }
2971 .widget.fakelink > h3:before,
2972 .settings-block.fakelink > h3:before {
2973         font-family: ForkAwesome;
2974         content: "\f0da"; /* Right Plain Pointer */
2975 }
2976 .widget > .fakelink > h3:before,
2977 #sidebar-group-header > .fakelink > h3:before,
2978 .settings-block > .fakelink > h3:before {
2979         font-family: ForkAwesome;
2980         content: "\f0d7"; /* Bottom Plain Pointer */
2981 }
2982
2983 h3.connector {
2984         line-height: 40px;
2985 }
2986
2987 /* Intro Notifications */
2988 ul.notif-network-list {
2989         margin-left: -15px;
2990         margin-right: -15px;
2991 }
2992 ul.notif-network-list > li {
2993         padding-left: 15px;
2994         padding-right: 15px;
2995 }
2996 .intro-wrapper.media {
2997         overflow: visible;
2998         word-wrap: break-word;
2999         margin-top: 0;
3000 }
3001 .intro-photo-wrapper img.intro-photo {
3002         height: 80px;
3003         width: 80px;
3004         border-radius: 4px;
3005 }
3006 .intro-actions {
3007         display: flex;
3008 }
3009 .intro-enty-name h4 {
3010         font-size: 15px !important;
3011 }
3012 .intro-wrapper button.intro-action-link {
3013         opacity: 0.1;
3014         transition: all 0.25s ease-in-out;
3015 }
3016 .intro-wrapper button.intro-action-link,
3017 .intro-wrapper button.intro-action-link:hover {
3018         padding-right: 5px;
3019         padding-left: 5px;
3020         color: $font_color_darker;
3021 }
3022 ul li:hover .intro-wrapper button.intro-action-link {
3023         opacity: 0.8;
3024         transition: all 0.25s ease-in-out;
3025 }
3026 ul li:hover .intro-wrapper button.intro-action-link:hover {
3027         opacity: 1;
3028 }
3029 .intro-action-buttons {
3030         margin-top: 15px;
3031         max-height: 0px;
3032         overflow: hidden;
3033         transition: max-height 0.1s ease-out;
3034 }
3035 ul.notif-network-list > li:hover .intro-action-buttons {
3036         max-height: 30px;
3037         transition: max-height 0.1s ease-in;
3038 }
3039 .intro-desc-label,
3040 .intro-url-label,
3041 .intro-network-label,
3042 .intro-location-label,
3043 .intro-keywords-label,
3044 .intro-about-label,
3045 .intro-knowyou-label,
3046 .intro-madeby-label {
3047         font-weight: bold;
3048 }
3049 .intro-contact-info.xs .intro-url-label,
3050 .intro-contact-info.xs .intro-network-label,
3051 .intro-contact-info.xs .intro-location-label,
3052 .intro-contact-info.xs .intro-keywords-label,
3053 .intro-contact-info.xs .intro-about-label,
3054 .intro-contact-info.xs .intro-knowyou-label {
3055         display: block;
3056         margin-top: 5px;
3057 }
3058
3059 /* Notifications Page */
3060 ul.notif-network-list li.unseen {
3061         background-color: #e3eff3;
3062 }
3063 .notif-item img.notif-image {
3064         height: 48px;
3065         width: 48px;
3066         border-radius: 4px;
3067 }
3068 .notif-item .notif-desc-wrapper {
3069         height: 48px;
3070 }
3071 .notif-item .notif-desc-wrapper a {
3072         height: 100%;
3073         display: block;
3074         color: $font_color_darker;
3075         font-size: 13px;
3076         font-weight: 600;
3077 }
3078
3079 /* Search Page */
3080
3081 /* This is a little bit hacky. Since the search page is used for diferent
3082 content types we can't apply the generic-page-wrapper class.
3083 So we apply the css of the generic-page-wrapper class to the ul element with some
3084 little modifications to emulate a standard page template */
3085 .search-content-wrapper > ul.viewcontact_wrapper {
3086         min-height: calc(100vh - 150px);
3087         padding-top: 15px;
3088         padding-bottom: 20px;
3089         margin: 0;
3090         margin-bottom: 20px;
3091         border: none;
3092         background-color: rgba(255, 255, 255, $contentbg_transp);
3093         border-radius: 4px;
3094         position: relative;
3095         color: $font_color_darker;
3096         box-shadow: 0 0 3px #dadada;
3097         -webkit-box-shadow: 0 0 3px #dadada;
3098         -moz-box-shadow: 0 0 3px #dadada;
3099 }
3100
3101 /* Help Page */
3102 section.help-content-wrapper h1 {
3103         padding-bottom: 0.3em;
3104         font-size: 1.8em;
3105         border-bottom: 1px solid #ddd;
3106 }
3107 section.help-content-wrapper h2 {
3108         padding-bottom: 0.3em;
3109         font-size: 1.5em;
3110         border-bottom: 1px solid #ddd;
3111 }
3112 section.help-content-wrapper h3 {
3113         font-size: 1.2em;
3114 }
3115 section.help-content-wrapper h4 {
3116         font-size: 1em;
3117 }
3118 section.help-content-wrapper h1,
3119 section.help-content-wrapper h2,
3120 section.help-content-wrapper h3,
3121 section.help-content-wrapper h4,
3122 section.help-content-wrapper h5,
3123 section.help-content-wrapper h6 {
3124         margin-top: 24px;
3125         margin-bottom: 16px;
3126         font-weight: 600;
3127         line-height: 1.25;
3128 }
3129 section.help-content-wrapper p {
3130         margin: 0.4em 0;
3131 }
3132 section.help-content-wrapper p,
3133 section.help-content-wrapper a,
3134 section.help-content-wrapper li {
3135         line-height: 1.6;
3136         font-size: 0.96em;
3137 }
3138
3139 /*Admin Page*/
3140 #adminpage #frio_background_image .image-select {
3141         display: none;
3142 }
3143 #adminpage #frio_background_image.input-group {
3144         display: block;
3145 }
3146 #admin-summary-wrapper {
3147         padding-top: 10px;
3148 }
3149 #adminpage ul#addonslist,
3150 li.addon {
3151         list-style: none;
3152 }
3153 #adminpage li .icon {
3154         display: inline-block;
3155         vertical-align: text-top;
3156         position: relative;
3157         padding-left: 5px;
3158 }
3159 #adminpage li .icon:before {
3160         content: "";
3161         display: inline-block;
3162         position: absolute;
3163         width: 17px;
3164         height: 17px;
3165         left: 0;
3166         margin-left: -20px;
3167         margin-top: 2px;
3168         border: 1px solid #cccccc;
3169         border-radius: 3px;
3170         background-color: $background_color;
3171         -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3172         -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3173         transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
3174 }
3175 #adminpage li .icon.on:after {
3176         font-family: "ForkAwesome";
3177         content: "\f00c";
3178         display: inline-block;
3179         position: absolute;
3180         width: 16px;
3181         height: 16px;
3182         left: 0;
3183         top: 0;
3184         margin-left: -20px;
3185         margin-top: 2px;
3186         padding-left: 3px;
3187         padding-top: 1px;
3188         font-size: 11px;
3189         color: $link_color;
3190 }
3191 #adminpage .addon .desc {
3192         padding-left: 10px;
3193 }
3194 #admin-users #users tr.blocked {
3195         background-color: #f8efc0;
3196 }
3197 .adminpage .table-hover > tbody > tr:hover + tr.details {
3198         background-color: #f5f5f5;
3199 }
3200 .offset-anchor::before {
3201         display: block;
3202         content: " ";
3203         margin-top: -100px;
3204         height: 100px;
3205         visibility: hidden;
3206         pointer-events: none;
3207 }
3208
3209 #relocate-form {
3210         margin-top: 5px;
3211 }
3212
3213 /* Manage Page */
3214 #identity-selector-wrapper {
3215         width: auto;
3216         height: auto;
3217         margin-top: 20px;
3218 }
3219 #identity-selector-wrapper .identity-match-photo {
3220         width: auto;
3221         float: none;
3222 }
3223 #identity-selector-wrapper .identity-match-photo button {
3224         position: relative;
3225 }
3226 #identity-selector-wrapper .identity-match-photo .badge {
3227         position: absolute;
3228         top: -8px;
3229         right: -8px;
3230 }
3231 #identity-selector-wrapper .identity-match-name {
3232         text-align: center;
3233 }
3234 #identity-selector-wrapper .identity-match-details {
3235         width: auto;
3236         float: none;
3237 }
3238
3239 /* Register Page */
3240 #register-openid-wrapper,
3241 #register-name-wrapper,
3242 #register-invite-wrapper,
3243 #profile-publish-wrapper {
3244         margin-top: 20px;
3245 }
3246 #register-openid-end,
3247 #register-nickname-end {
3248         margin-top: 40px;
3249 }
3250
3251 /*
3252 * Overwriting for transparency and other colors
3253 */
3254 main .nav-tabs > li.active > a,
3255 main .nav-tabs > li.active > a:focus,
3256 main .nav-tabs > li.active > a:hover {
3257         background-color: rgba(255, 255, 255, $contentbg_transp);
3258 }
3259
3260 /*
3261  * Modal
3262  */
3263 .modal hr {
3264         border-color: #eee;
3265 }
3266
3267 @media (min-width: 768px) {
3268         .modal-dialog {
3269                 width: 650px;
3270         }
3271 }
3272
3273 /*
3274  * Framework overwrite
3275  */
3276
3277 /* textcomplete for contact filtering*/
3278 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list {
3279         position: relative !important;
3280         top: inherit !important;
3281         bottom: inherit !important;
3282         left: inherit !important;
3283         padding: 0;
3284         margin-left: -15px;
3285         margin-right: -15px;
3286         background-color: transparent;
3287         box-shadow: none;
3288         border: none;
3289 }
3290 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li {
3291         padding-left: 15px;
3292         border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
3293 }
3294 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li:first-child {
3295         display: none;
3296 }
3297 #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list .textcomplete-item > a {
3298         padding: 0 !important;
3299         border-left: none;
3300         background-color: transparent !important;
3301 }
3302 /* this is a little hack for texcomplete contact filter
3303 There are for some reasons empty <a> tags. I don't know why */
3304 .textcomplete-item .contact-wrapper a {
3305         padding: 0;
3306 }
3307
3308 /* hovercard fix */
3309 body .tread-wrapper .hovercard a,
3310 body .tread-wrapper .hovercard a:hover {
3311         color: $link_color;
3312 }
3313 body .tread-wrapper .hovercard:hover .hover-card-content a {
3314         color: $link_color !important;
3315 }
3316
3317 /* Pagination improvements */
3318 .pagination {
3319         text-align: center;
3320         display: block;
3321 }
3322 .pagination > li > a,
3323 .pagination > li > span {
3324         color: $link_color;
3325         float: none;
3326 }
3327 .pagination > li > a:hover,
3328 .pagination > li > span:hover {
3329         color: $link_hover_color;
3330 }
3331 .pagination > .active > a,
3332 .pagination > .active > a:focus,
3333 .pagination > .active > a:hover,
3334 .pagination > .active > span,
3335 .pagination > .active > span:focus,
3336 .pagination > .active > span:hover {
3337         background-color: $link_color;
3338         border-color: $link_color;
3339         border-radius: 3px;
3340 }
3341 .pagination li.pager_n a {
3342         margin-left: 3px;
3343         border-radius: 3px;
3344 }
3345 .pagination .pager_prev a {
3346         margin-left: -5px;
3347         margin-right: 4px;
3348         border-top-right-radius: 3px;
3349         border-bottom-right-radius: 3px;
3350 }
3351 .pagination .pager_next a {
3352         margin-left: 4px;
3353         margin-right: -5px;
3354         border-top-left-radius: 3px;
3355         border-bottom-left-radius: 3px;
3356 }
3357 .pager .next > a,
3358 .pager .previous > a {
3359         float: none;
3360         border-radius: 3px;
3361 }
3362 .pagination .disabled > a,
3363 .pager .disabled > a {
3364         display: none;
3365 }
3366
3367 .pagination li > a,
3368 .pager li > a {
3369         background-color: rgba(255, 255, 255, $contentbg_transp);
3370 }
3371
3372 /*
3373  * some temporary workarounds until this will solved
3374  * elsewhere (e.g. new templates)
3375  */
3376 section .profile-match-wrapper {
3377         float: left;
3378 }
3379
3380 /**
3381  * Login page
3382  */
3383 #login-submit-wrapper {
3384         float: right;
3385 }
3386 #lost-password-link {
3387         flex-grow: 2;
3388 }
3389 #login-lost-password-link {
3390         margin-bottom: 10px;
3391         float: right;
3392 }
3393 #div_id_remember {
3394         float: left;
3395 }
3396 #id_password_wrapper {
3397         margin-bottom: unset;
3398 }
3399 #login_openid {
3400         clear: both;
3401 }
3402 #register-link {
3403         color: white;
3404         background: #8ad0a1;
3405         width: 100%;
3406 }
3407 #login-end {
3408         clear: both;
3409 }
3410
3411 .mod-home.is-not-singleuser,
3412 .mod-login {
3413         background-color: $login_bg_color;
3414         background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)), url($login_bg_image);
3415         background-size: cover;
3416         background-attachment: fixed;
3417         background-position: center;
3418         padding-top: 0;
3419 }
3420 .mod-home.is-not-singleuser nav.navbar,
3421 .mod-login nav.navbar {
3422         background-color: transparent;
3423         position: inherit;
3424 }
3425 .mod-home.is-not-singleuser #topbar-second,
3426 .mod-login #topbar-second {
3427         background-color: transparent;
3428         box-shadow: unset;
3429         border: 0;
3430 }
3431 .mod-home.is-not-singleuser .login-content,
3432 .mod-login .login-content {
3433         color: #eee;
3434         margin-top: 2.5%;
3435 }
3436
3437 .mod-home.is-not-singleuser .login-form > #login-extra-links {
3438         margin-top: 4em;
3439 }
3440
3441 .mod-home.is-not-singleuser .login-form > #login-form label,
3442 .mod-login #content #login-form label {
3443         color: #eee;
3444 }
3445
3446 .mod-home.is-not-singleuser .login-panel-content,
3447 .mod-login .login-panel-content {
3448         background-color: rgba(255, 255, 255, 0.85);
3449 }
3450
3451 .qq-upload-button {
3452         background: $nav_bg !important;
3453         color: $btn_primary_color !important;
3454         float: none;
3455         border: none;
3456         -webkit-box-shadow: none;
3457         box-shadow: none;
3458         -moz-box-shadow: none;
3459         background-image: none;
3460         text-shadow: none;
3461         border-radius: 3px;
3462         margin-bottom: 0;
3463         font-size: 14px;
3464         font-weight: 600;
3465         padding: 8px 16px;
3466         color: inherit;
3467         width: 100% !important;
3468 }
3469
3470 .qq-upload-drop-area {
3471         background: white !important;
3472         float: none;
3473         border: none;
3474         -webkit-box-shadow: none;
3475         box-shadow: none;
3476         -moz-box-shadow: none;
3477         background-image: none;
3478         text-shadow: none;
3479         border-radius: 3px;
3480         margin-bottom: 0;
3481         font-size: 14px;
3482         font-weight: 600;
3483         padding: 8px 16px;
3484         color: inherit;
3485         width: 100% !important;
3486         display: block !important;
3487         position: relative !important;
3488         border: black 1px dashed !important;
3489         margin-bottom: 5px !important;
3490         margin-top: 15px !important;
3491 }
3492
3493 /**
3494  * The different views of js fullcalendar
3495  */
3496 #fc-header {
3497         margin-top: 20px;
3498         margin-bottom: 10px;
3499 }
3500 #fc-header-left,
3501 #fc-header-right,
3502 #event-calendar-title {
3503         display: inline-block;
3504 }
3505 #fc-title {
3506         margin: 0;
3507         padding-left: 20px;
3508 }
3509 #fc-header-right {
3510         margin-top: -4px;
3511 }
3512 #fc-header-right .dropdown > button {
3513         color: inherit;
3514 }
3515 #event-calendar-title {
3516         vertical-align: middle;
3517 }
3518 #event-calendar-views {
3519         padding: 6px 9px;
3520         font-size: 14px;
3521 }
3522 .fc .fc-toolbar {
3523         display: none;
3524 }
3525 .fc .fc-month-view td.fc-widget-content,
3526 .fc .fc-list-view,
3527 .fc .fc-list-view .fc-list-table td,
3528 .fc .fc-body td {
3529         border-style: none;
3530 }
3531 .fc td.fc-widget-header,
3532 .fc th.fc-widget-header {
3533         border-left: none;
3534         border-right: none;
3535         border-top: none;
3536 }
3537 .fc .fc-month-view td.fc-day {
3538         border-left: none;
3539         border-right: none;
3540         border-bottom: 1px solid;
3541         padding: 0 6px;
3542 }
3543 .fc .fc-day-grid-container .fc-row {
3544         border-bottom: 1px solid;
3545         border-color: #ddd;
3546 }
3547 .fc tr td.fc-today {
3548         border-style: none;
3549 }
3550 .fc .fc-month-view .fc-content .fc-title .item-desc {
3551         font-size: 11px;
3552 }
3553 .fc .fc-view-container {
3554         margin-top: 25px;
3555 }
3556 .fc .fc-list-view td {
3557         padding: 0;
3558 }
3559 #events-calendar.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
3560         float: left;
3561         font-size: 12px;
3562 }
3563 .fc .fc-event {
3564         background-color: #e3f2fd;
3565         border: 1px solid #bbdefb;
3566         color: $font_color_darker;
3567 }
3568 .fc .fc-month-view .fc-time,
3569 .fc .fc-listMonth-view .fc-list-item-time,
3570 .fc .fc-listMonth-view .fc-list-item-marker,
3571 .fc .fc-listMonth-view .fc-widget-header {
3572         display: none;
3573 }
3574 .fc .fc-listMonth-view .fc-list-item:hover td {
3575         background: transparent;
3576         cursor: pointer;
3577 }
3578 .fc .fc-listMonth-view .seperator {
3579         margin-left: 30px;
3580         width: 60px;
3581 }
3582
3583 /**
3584  * The event-card
3585  */
3586 .event-card {
3587         width: auto;
3588 }
3589 .event-card .event-label,
3590 .event-card .location-label {
3591         font-weight: bold;
3592 }
3593 .popover.event-card .event-card-basic-content {
3594         margin-top: 0;
3595         padding: 9px;
3596         padding-left: 0px;
3597 }
3598 .event-card .event-hover-location .location {
3599         color: $font_color;
3600         font-size: 13px;
3601 }
3602
3603 /* Medium devices (desktops, 992px and up) */
3604 @media (min-width: 992px) {
3605         .mod-home.is-not-singleuser #content,
3606         .mod-login #content {
3607                 margin-top: 100px !important;
3608         }
3609
3610         .mod-home.is-not-singleuser .login-form > #login-form,
3611         .mod-home.is-not-singleuser .login-form > #login-extra-links,
3612         .mod-login #content #login-form {
3613                 background-color: #fff;
3614                 padding: 1em;
3615                 position: relative;
3616         }
3617         .mod-home.is-not-singleuser .login-form > #login-extra-links {
3618                 margin-top: unset;
3619                 background-color: white;
3620         }
3621
3622         .mod-home.is-not-singleuser .login-form > #login-form label,
3623         .mod-login #content #login-form label {
3624                 color: #444;
3625         }
3626
3627         .mod-home.is-not-singleuser .login-form::before,
3628         .mod-login #content #login-form::before {
3629                 display: block;
3630                 position: absolute;
3631                 content: " ";
3632                 background-color: rgba(255, 255, 255, 0.1);
3633                 width: 90%;
3634                 height: 110%;
3635                 top: -5%;
3636                 left: 5%;
3637                 z-index: -1;
3638         }
3639
3640         .mod-home.is-not-singleuser .login-form::after,
3641         .mod-login #content #login-form::after {
3642                 display: block;
3643                 position: absolute;
3644                 content: " ";
3645                 background-color: rgba(255, 255, 255, 0.2);
3646                 width: 80%;
3647                 height: 120%;
3648                 top: -10%;
3649                 left: 10%;
3650                 z-index: -1;
3651         }
3652 }
3653
3654 /* Mobile display */
3655 @media (max-width: 600px) {
3656         body {
3657                 padding-top: 95px;
3658         }
3659         body.minimal {
3660                 padding: 15px;
3661         }
3662
3663         #friendica-logo-mask {
3664                 display: none;
3665         }
3666
3667         .container {
3668                 padding-right: 0;
3669                 padding-left: 0;
3670         }
3671
3672         .panel {
3673                 border-radius: 0;
3674                 margin-bottom: 5px;
3675         }
3676
3677         .panel .panel-body {
3678                 padding: 10px;
3679         }
3680
3681         .toplevel_item > .wall-item-container {
3682                 padding: 0;
3683         }
3684
3685         .wall-spacer {
3686                 height: 0px;
3687         }
3688
3689         .wall-item-actions {
3690                 margin-top: 10px;
3691         }
3692
3693         .media {
3694                 margin-top: 0;
3695         }
3696
3697         .generic-page-wrapper,
3698         .videos-content-wrapper,
3699         .suggest-content-wrapper,
3700         .help-content-wrapper,
3701         .match-content-wrapper,
3702         .dirfind-content-wrapper,
3703         .directory-content-wrapper,
3704         .delegation-content-wrapper,
3705         .notes-content-wrapper,
3706         .message-content-wrapper,
3707         .apps-content-wrapper,
3708         #adminpage,
3709         .delegate-content-wrapper,
3710         .uexport-content-wrapper,
3711         .dfrn_request-content-wrapper,
3712         .friendica-content-wrapper,
3713         .credits-content-wrapper,
3714         .nogroup-content-wrapper,
3715         .profperm-content-wrapper,
3716         .invite-content-wrapper,
3717         .tos-content-wrapper,
3718         .fsuggest-content-wrapper {
3719                 border-radius: 0;
3720                 padding: 10px;
3721         }
3722
3723         .row {
3724                 margin-right: 0;
3725         }
3726
3727         .col-lg-1,
3728         .col-lg-10,
3729         .col-lg-11,
3730         .col-lg-12,
3731         .col-lg-2,
3732         .col-lg-3,
3733         .col-lg-4,
3734         .col-lg-5,
3735         .col-lg-6,
3736         .col-lg-7,
3737         .col-lg-8,
3738         .col-lg-9,
3739         .col-md-1,
3740         .col-md-10,
3741         .col-md-11,
3742         .col-md-12,
3743         .col-md-2,
3744         .col-md-3,
3745         .col-md-4,
3746         .col-md-5,
3747         .col-md-6,
3748         .col-md-7,
3749         .col-md-8,
3750         .col-md-9,
3751         .col-sm-1,
3752         .col-sm-10,
3753         .col-sm-11,
3754         .col-sm-12,
3755         .col-sm-2,
3756         .col-sm-3,
3757         .col-sm-4,
3758         .col-sm-5,
3759         .col-sm-6,
3760         .col-sm-7,
3761         .col-sm-8,
3762         .col-sm-9,
3763         .col-xs-1,
3764         .col-xs-10,
3765         .col-xs-11,
3766         .col-xs-12,
3767         .col-xs-2,
3768         .col-xs-3,
3769         .col-xs-4,
3770         .col-xs-5,
3771         .col-xs-6,
3772         .col-xs-7,
3773         .col-xs-8,
3774         .col-xs-9 {
3775                 padding-right: 0;
3776         }
3777
3778         .wwto .contact-photo {
3779                 height: 19px;
3780                 padding: 0;
3781                 top: 24px;
3782                 left: 24px;
3783         }
3784
3785         /*
3786                 Prevent automatic zoom on input focus on iOS
3787                 see https://stackoverflow.com/a/16255670
3788         */
3789         .form-control {
3790                 font-size: 16px;
3791         }
3792
3793         .wall-item-container.thread_level_3,
3794         .wall-item-container.thread_level_4,
3795         .wall-item-container.thread_level_5,
3796         .wall-item-container.thread_level_6,
3797         .wall-item-container.thread_level_7 {
3798                 margin-left: 5px;
3799         }
3800 }