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