wcfsetup/install/files/style/layout/pageHeader.scss

   1 .pageHeaderContainer {
   2         color: $wcfHeaderText;
   3         z-index: 100;
   4
   5         a {
   6                 color: $wcfHeaderLink;
   7
   8                 &:hover {
   9                         color: $wcfHeaderLinkActive;
  10                 }
  11         }
  12
  13         .icon {
  14                 color: $wcfHeaderText;
  15         }
  16
  17         /* reserved space for `.pageHeaderPanel` */
  18         padding-top: 50px;
  19
  20         @include screen-lg {
  21                 background-color: $wcfHeaderBackground;
  22         }
  23 }
  24
  25 .pageHeaderPanel {
  26         left: 0;
  27         position: fixed;
  28         right: 0;
  29         top: 0;
  30         z-index: 300;
  31
  32         > .layoutBoundary {
  33                 display: flex;
  34         }
  35
  36         @include screen-md-down {
  37                 background-color: $wcfHeaderBackground;
  38
  39                 > .layoutBoundary {
  40                         padding: 9px 10px;
  41                 }
  42         }
  43
  44         @include screen-lg {
  45                 background-color: $wcfHeaderMenuBackground;
  46         }
  47 }
  48
  49 .pageHeaderFacade {
  50         &:first-child {
  51                 // page header without user-panel (during setup)
  52                 margin-top: -50px;
  53         }
  54
  55         > .layoutBoundary {
  56                 align-items: center;
  57                 display: flex;
  58
  59                 @include screen-lg {
  60                         align-items: center;
  61                         padding-bottom: 30px;
  62                         padding-top: 30px;
  63                 }
  64
  65                 @include screen-md-down {
  66                         height: 50px;
  67                         -webkit-justify-content: center;
  68                         justify-content: center;
  69                         left: 60px;
  70                         padding: 9px 0;
  71                         position: fixed;
  72                         right: 60px;
  73                         top: 0;
  74                         width: auto;
  75                         z-index: 301;
  76                 }
  77         }
  78 }
  79
  80 /* MAIN MENU */
  81 .mainMenu {
  82         flex: 1;
  83         margin-right: 20px;
  84         position: relative;
  85
  86         .boxMenu {
  87                 display: flex;
  88                 overflow: hidden;
  89
  90                 > li {
  91                         flex: 0 0 auto;
  92
  93                         &:first-child {
  94                                 transition: margin-left 0.24s ease-in-out;
  95                         }
  96
  97                         > a {
  98                                 background: $wcfHeaderMenuLinkBackground;
  99                                 align-items: center;
 100                                 color: $wcfHeaderMenuLink;
 101                                 display: flex;
 102                                 height: 50px;
 103                                 padding: 0 15px;
 104
 105                                 > span {
 106                                         flex: 0 0 auto;
 107                                 }
 108
 109                                 > .boxMenuLinkOutstandingItems {
 110                                         margin-left: 5px;
 111                                 }
 112                         }
 113
 114                         > span {
 115                                 cursor: default;
 116                         }
 117
 118                         &.active > a,
 119                         &:hover > a {
 120                                 background: $wcfHeaderMenuLinkBackgroundActive;
 121                                 color: $wcfHeaderMenuLinkActive;
 122                         }
 123                 }
 124
 125                 > .boxMenuHasChildren {
 126                         &:hover .boxMenuDepth1,
 127                         > a[aria-expanded="true"] ~ .boxMenuDepth1 {
 128                                 visibility: visible;
 129                         }
 130
 131                         > a {
 132                                 &::after {
 133                                         content: $fa-var-angle-down;
 134                                         display: block;
 135                                         font-family: "FontAwesome";
 136                                         font-size: 14px;
 137                                         height: 24px;
 138                                         line-height: 24px;
 139                                         margin-left: 5px;
 140                                         width: 10px;
 141                                 }
 142                         }
 143                 }
 144
 145                 .boxMenuDepth1 {
 146                         background-color: $wcfHeaderMenuDropdownBackground;
 147                         border-radius: 0 0 3px 3px;
 148                         padding: 5px 0;
 149                         position: absolute;
 150                         visibility: hidden;
 151
 152                         @include wcfFontDefault;
 153
 154                         > li {
 155                                 > a {
 156                                         color: $wcfHeaderMenuDropdownLink;
 157                                 }
 158
 159                                 > a,
 160                                 > span {
 161                                         display: block;
 162                                         padding: 7px 20px;
 163                                         white-space: nowrap;
 164                                 }
 165
 166                                 &.active > a,
 167                                 > a:hover {
 168                                         background-color: $wcfHeaderMenuDropdownBackgroundActive;
 169                                         color: $wcfHeaderMenuDropdownLinkActive;
 170                                         text-decoration: none;
 171                                 }
 172                         }
 173                 }
 174
 175                 .boxMenuDepth2 li {
 176                         > a {
 177                                 color: $wcfHeaderMenuDropdownLink;
 178                                 display: block;
 179                                 padding: 5px 20px 5px 40px;
 180                                 white-space: nowrap;
 181                         }
 182
 183                         &.active > a,
 184                         > a:hover {
 185                                 background-color: $wcfHeaderMenuDropdownBackgroundActive;
 186                                 color: $wcfHeaderMenuDropdownLinkActive;
 187                                 text-decoration: none;
 188                         }
 189                 }
 190         }
 191
 192         .mainMenuShowPrevious,
 193         .mainMenuShowNext {
 194                 align-items: center;
 195                 display: flex;
 196                 height: 100%;
 197                 opacity: 0;
 198                 position: absolute;
 199                 top: 0;
 200                 transition: opacity 0.24s linear, visibility 0s linear 0.24s;
 201                 visibility: hidden;
 202                 width: 50px;
 203
 204                 &.active {
 205                         opacity: 1;
 206                         transition-delay: 0s;
 207                         visibility: visible;
 208                 }
 209         }
 210
 211         .mainMenuShowPrevious {
 212                 background: linear-gradient(to left, transparent 0%, $wcfHeaderMenuBackground 75%);
 213                 left: 0;
 214         }
 215
 216         .mainMenuShowNext {
 217                 background: linear-gradient(to right, transparent 0%, $wcfHeaderMenuBackground 75%);
 218                 justify-content: flex-end;
 219                 right: 0;
 220         }
 221 }
 222
 223 /* Hack for a font rendering issue in Safari on menu hover */
 224 @include only_safari_no_ios(
 225         ".pageHeaderPanel > .layoutBoundary",
 226         (
 227                 transform: translateZ(0),
 228         )
 229 );
 230
 231 /* user panel */
 232 .userPanel {
 233         flex: 0 0 auto;
 234
 235         > ul {
 236                 display: flex;
 237                 justify-content: flex-end;
 238
 239                 > li {
 240                         align-items: center;
 241                         display: flex;
 242                         flex: 0 0 auto;
 243
 244                         > a {
 245                                 align-items: center;
 246                                 background: $wcfHeaderMenuLinkBackground;
 247                                 color: $wcfHeaderMenuLink;
 248                                 display: flex;
 249                                 flex: 0 0 auto;
 250                                 height: 50px;
 251                                 padding: 0 15px;
 252                                 position: relative;
 253
 254                                 /* hide icon label */
 255                                 > span:not(.icon):not(.badge) {
 256                                         display: none;
 257                                 }
 258
 259                                 /* special styling for update badge */
 260                                 > .badgeUpdate {
 261                                         box-shadow: -1px 2px 3px rgba(0, 0, 0, 0.3),
 262                                                 inset 0 2px 5px rgba(225, 225, 225, 0.3);
 263                                         left: 31px;
 264                                         padding: 1px 6px;
 265                                         position: absolute;
 266                                         top: 4px;
 267                                         z-index: 101;
 268                                 }
 269
 270                                 .icon {
 271                                         color: $wcfHeaderMenuLink;
 272                                 }
 273                         }
 274
 275                         &.dropdownOpen > a,
 276                         &.open > a,
 277                         &:hover > a {
 278                                 background: $wcfHeaderMenuLinkBackgroundActive;
 279                                 color: $wcfHeaderMenuLinkActive;
 280
 281                                 .icon {
 282                                         color: $wcfHeaderMenuLinkActive;
 283                                 }
 284                         }
 285
 286                         /* ringing animation for notification icon */
 287                         &#userNotifications:not([data-count="0"]) {
 288                                 > a > .icon {
 289                                         animation: fa-bell-ring 5s ease 10s 6;
 290                                         transform-origin: 50% 0;
 291                                 }
 292                         }
 293                 }
 294         }
 295
 296         .userPanelAvatar {
 297                 display: none;
 298         }
 299 }
 300
 301 /* LOGO */
 302 .pageHeaderLogo {
 303         @include screen-lg {
 304                 flex: 1 1 auto;
 305
 306                 .pageHeaderLogoLarge {
 307                         max-width: 100%;
 308                 }
 309
 310                 .pageHeaderLogoSmall {
 311                         display: none;
 312                 }
 313
 314                 > a {
 315                         display: block;
 316                         padding: 10px 0;
 317                 }
 318         }
 319
 320         @include screen-md-down {
 321                 .pageHeaderLogoLarge {
 322                         display: none;
 323                 }
 324
 325                 .pageHeaderLogoSmall {
 326                         max-height: 30px;
 327
 328                         /* prevent over-sized logos from overlapping the user panel buttons */
 329                         max-width: 100%;
 330                 }
 331         }
 332 }
 333
 334 /* SEARCH AREA */
 335 .pageHeaderSearch {
 336         display: none;
 337         position: fixed;
 338 }
 339
 340 .searchBarOpen .pageHeaderSearch {
 341         display: block;
 342
 343         /* required for Edge */
 344         z-index: 100;
 345 }
 346
 347 .pageHeaderSearchInputContainer {
 348         display: flex;
 349
 350         .pageHeaderSearchType {
 351                 display: flex;
 352
 353                 > .button {
 354                         align-items: center;
 355                         background-color: $wcfHeaderMenuLinkBackground;
 356                         border-radius: 0 0 0 2px;
 357                         color: $wcfHeaderMenuLink;
 358                         display: flex;
 359                         max-width: 200px;
 360                         min-width: 140px;
 361                         padding: 4px 8px;
 362                         position: relative;
 363                         text-align: left;
 364                         text-transform: none;
 365
 366                         &::after {
 367                                 color: inherit;
 368                                 content: $fa-var-caret-down;
 369                                 flex: 1;
 370                                 font-family: FontAwesome;
 371                                 margin-left: 10px;
 372                                 text-align: right;
 373                         }
 374
 375                         > .pageHeaderSearchTypeLabel {
 376                                 flex: 0 auto;
 377                                 overflow: hidden;
 378                                 text-overflow: ellipsis;
 379                                 white-space: nowrap;
 380                         }
 381                 }
 382
 383                 > .button:hover,
 384                 &.dropdownOpen > .button {
 385                         background: $wcfHeaderMenuLinkBackgroundActive;
 386                         color: $wcfHeaderMenuLinkActive;
 387                 }
 388         }
 389
 390         .pageHeaderSearchInput {
 391                 background-color: $wcfHeaderSearchBoxBackground;
 392                 border-width: 0;
 393                 color: $wcfHeaderSearchBoxText;
 394                 padding-bottom: 8px;
 395                 padding-top: 8px;
 396                 width: 250px;
 397
 398                 &:focus,
 399                 &:hover {
 400                         background-color: $wcfHeaderSearchBoxBackgroundActive;
 401                         color: $wcfHeaderSearchBoxTextActive;
 402
 403                         /* set placeholder color, do not chain these with a comma
 404                            as an unrecognized value causes the instruction to be
 405                            discarded in entirety */
 406                         &::-webkit-input-placeholder {
 407                                 /* WebKit browsers */
 408                                 color: $wcfHeaderSearchBoxPlaceholderActive;
 409                         }
 410                         &::-moz-placeholder {
 411                                 /* Mozilla Firefox 19+ */
 412                                 color: $wcfHeaderSearchBoxPlaceholderActive;
 413                         }
 414                         &:-ms-input-placeholder {
 415                                 /* Internet Explorer 10+ */
 416                                 color: $wcfHeaderSearchBoxPlaceholderActive;
 417                         }
 418                 }
 419
 420                 /* set placeholder color, do not chain these with a comma
 421                    as an unrecognized value causes the instruction to be
 422                    discarded in entirety */
 423                 &::-webkit-input-placeholder {
 424                         /* WebKit browsers */
 425                         color: $wcfHeaderSearchBoxPlaceholder;
 426                 }
 427                 &::-moz-placeholder {
 428                         /* Mozilla Firefox 19+ */
 429                         color: $wcfHeaderSearchBoxPlaceholder;
 430                 }
 431                 &:-ms-input-placeholder {
 432                         /* Internet Explorer 10+ */
 433                         color: $wcfHeaderSearchBoxPlaceholder;
 434                 }
 435
 436                 /* remove broken cancel-button (webkit) */
 437                 &::-webkit-search-cancel-button {
 438                         display: none;
 439                 }
 440         }
 441
 442         /* Increases the specificity to overrule the CSS for <button>. */
 443         .pageHeaderSearchInputButton.pageHeaderSearchInputButton {
 444                 background-color: $wcfHeaderMenuLinkBackground;
 445                 border-radius: 0 0 2px 0;
 446                 color: $wcfHeaderMenuLink;
 447                 padding: 4px 9px;
 448
 449                 &:hover {
 450                         background-color: $wcfHeaderMenuLinkBackgroundActive;
 451                         color: $wcfHeaderMenuLinkActive;
 452                 }
 453         }
 454 }
 455
 456 @include screen-md-down {
 457         .pageHeaderPanel > .layoutBoundary {
 458                 /* pushes buttons to the left / right corner */
 459                 -webkit-justify-content: space-between;
 460                 justify-content: space-between;
 461         }
 462
 463         .userPanel {
 464                 flex: 0 0 auto;
 465
 466                 > .userPanelItems {
 467                         display: none;
 468                 }
 469
 470                 .userPanelAvatar {
 471                         display: block;
 472                         padding: 0 5px;
 473                 }
 474         }
 475
 476         .mainMenu {
 477                 flex: 0 0 auto;
 478
 479                 &::before {
 480                         content: $fa-var-bars;
 481                 }
 482
 483                 > .boxContent {
 484                         display: none;
 485                 }
 486         }
 487
 488         .mainMenu,
 489         .userPanel {
 490                 position: relative;
 491
 492                 &.pageMenuMobileButtonHasContent::after {
 493                         background-color: rgb(244, 67, 54);
 494                         border: 2px solid $wcfHeaderBackground;
 495                         border-radius: 50%;
 496                         content: "";
 497                         height: 14px;
 498                         position: absolute;
 499                         right: -3px;
 500                         top: -3px;
 501                         width: 14px;
 502                 }
 503         }
 504
 505         .mainMenu,
 506         .userPanel:not(.userPanelLoggedIn) {
 507                 &::before {
 508                         color: $wcfHeaderLink;
 509                         font-family: FontAwesome;
 510                         font-size: 28px;
 511                         line-height: 32px;
 512                         padding: 5px 5px;
 513                 }
 514
 515                 &:hover::before {
 516                         color: $wcfHeaderLinkActive;
 517                 }
 518         }
 519
 520         .userPanel:not(.userPanelLoggedIn) {
 521                 &::before {
 522                         content: $fa-var-user;
 523                 }
 524         }
 525
 526         .userPanel.hideUserPanel::before {
 527                 visibility: hidden !important;
 528         }
 529
 530         .pageHeaderSearch {
 531                 left: 0 !important;
 532                 right: 0 !important;
 533
 534                 .pageHeaderSearchInputContainer {
 535                         border-radius: 0;
 536                         display: flex;
 537                         flex-wrap: wrap;
 538
 539                         .pageHeaderSearchType {
 540                                 flex: 0 0 100%;
 541
 542                                 > .button {
 543                                         border-radius: 0;
 544                                         max-width: unset;
 545                                         min-width: unset;
 546                                         padding-bottom: 8px;
 547                                         padding-top: 8px;
 548                                         width: 100%;
 549                                 }
 550                         }
 551
 552                         .pageHeaderSearchInput {
 553                                 flex: 1 1 auto;
 554                         }
 555
 556                         .pageHeaderSearchInputButton {
 557                                 border-radius: 0;
 558                         }
 559                 }
 560
 561                 &:not(.open) {
 562                         display: none;
 563                 }
 564         }
 565 }
 566
 567 @include screen-xs {
 568         .pageHeaderPanel,
 569         .pageHeaderFacade > .layoutBoundary {
 570                 transition: transform 0.12s linear;
 571         }
 572
 573         .redactorActive {
 574                 .pageHeaderPanel,
 575                 .pageHeaderFacade > .layoutBoundary {
 576                         transform: translateY(-120%);
 577                 }
 578         }
 579 }