<div id="pageHeaderContainer" class="pageHeaderContainer">
<header id="pageHeader" class="pageHeader">
- <div>
+ <div id="pageHeaderPanel" class="pageHeaderPanel">
<div class="layoutBoundary">
- {include file='pageHeaderLogo'}
-
- {include file='pageHeaderSearch'}
-
{include file='pageHeaderMenu'}
{include file='pageHeaderUser'}
</div>
</div>
+ <div id="pageHeaderFacade" class="pageHeaderFacade">
+ <div class="layoutBoundary">
+ {include file='pageHeaderLogo'}
+
+ {include file='pageHeaderSearch'}
+ </div>
+ </div>
+
{* TODO: this should be moved somewhere else and turned into an option *}
<script data-relocate="true">
require(['WoltLabSuite/Core/Ui/Page/Header/Fixed'], function(UiPageHeaderFixed) {
{@SECURITY_TOKEN_INPUT_TAG}
</div>
-
- <label for="pageHeaderSearchInput" class="pageHeaderSearchLabel"></label>
</form>
</div>
<nav id="topMenu" class="userPanel">
<ul class="userPanelItems">
+ <!-- page search -->
+ <li class="jsOnly">
+ <a href="#" id="userPanelSearchButton" class="jsTooltip" title="{lang}wcf.global.search{/lang}"><span class="icon icon32 fa-search"></span> <span>{lang}wcf.global.search{/lang}</span></a>
+ </li>
+
{if $__wcf->user->userID}
<!-- user menu -->
<li id="userMenu">
}
.pageContainer {
- /* required for sticky page header */
- padding-top: 50px;
-
@include screen-lg {
min-width: 1240px;
}
/* page header */
.pageHeaderContainer {
- box-shadow: 0 0 10px rgba(0, 0, 0, .6);
- left: 0;
- position: fixed;
- right: 0;
- top: 0;
- z-index: 300;
-
- .pageHeader {
- min-height: 0;
- }
-
@include screen-lg {
.pageHeader .layoutBoundary {
background-color: rgb(44, 62, 80);
.pageHeaderLogoSmall {
display: inline;
+ max-height: 30px;
}
> a {
}
@include screen-md-down {
+ .mainMenu {
+ order: 1;
+ }
+
+ .pageHeaderLogo {
+ order: 2;
+ }
+
+ .userPanel {
+ order: 3;
+ }
+
.acpPageMenu,
.acpPageSubMenu {
display: none;
<div class="pageHeaderContainer">
<header id="pageHeader" class="pageHeader">
- <div>
+ <div id="pageHeaderPanel" class="pageHeaderPanel">
<div class="layoutBoundary">
{include file='pageHeaderLogo'}
this._pointer = $('<span class="elementPointer"><span /></span>').appendTo(this._container);
- require(['Environment', 'EventHandler'], (function(Environment, EventHandler) {
+ require(['Environment'], (function(Environment) {
if (Environment.platform() === 'desktop') {
- EventHandler.add('com.woltlab.wcf.pageHeaderFixed', 'change', (function (data) {
- this.render();
- }).bind(this));
-
if ($itemContainer !== null) {
// use jQuery scrollbar on desktop, mobile browsers have a similar display built-in
$itemContainer.perfectScrollbar({
* Renders the dropdown.
*/
render: function() {
- require(['Dom/Util', 'Ui/Alignment', 'Ui/Screen'], (function (DomUtil, UiAlignment, UiScreen) {
+ require(['Ui/Alignment', 'Ui/Screen'], (function (UiAlignment, UiScreen) {
if (UiScreen.is('screen-lg')) {
- this._container[0].classList.remove('interactiveDropdownFixed');
-
UiAlignment.set(this._container[0], this._triggerElement[0], {
horizontal: 'right',
pointer: true
});
-
- if (DomUtil.getFixedParent(this._triggerElement[0]) !== null) {
- this._container[0].classList.add('interactiveDropdownFixed');
- this._container[0].style.setProperty('top', this._triggerElement[0].clientHeight + 'px', '');
- }
}
else {
this._container.css({
* @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
* @module WoltLabSuite/Core/Ui/Page/Header/Fixed
*/
-define(['Core', 'EventHandler', 'Ui/Alignment', 'Ui/CloseOverlay', 'Ui/Screen', 'Ui/SimpleDropdown'], function(Core, EventHandler, UiAlignment, UiCloseOverlay, UiScreen, UiSimpleDropdown) {
+define(['Core', 'EventHandler', 'Ui/Alignment', 'Ui/CloseOverlay', 'Ui/Screen', 'Ui/Scroll', 'Ui/SimpleDropdown'], function(Core, EventHandler, UiAlignment, UiCloseOverlay, UiScreen, UiScroll, UiSimpleDropdown) {
"use strict";
- var _pageHeader, _pageHeaderContainer, _searchInputContainer, _triggerHeight;
- var _isFixed = false, _isMobile = false;
+ var _callbackScroll = null;
+ var _pageHeader, _pageHeaderContainer, _searchInput, _searchInputContainer;
+ var _isMobile = false;
/**
* @exports WoltLabSuite/Core/Ui/Page/Header/Fixed
_pageHeader = elById('pageHeader');
_pageHeaderContainer = elById('pageHeaderContainer');
- this._initStickyPageHeader();
this._initSearchBar();
UiScreen.on('screen-md-down', {
- match: this._toggleMobile.bind(this, true),
- unmatch: this._toggleMobile.bind(this, false),
- setup: this._toggleMobile.bind(this, true)
+ match: function () { _isMobile = true; },
+ unmatch: function () { _isMobile = false; },
+ setup: function () { _isMobile = true; }
});
},
- /**
- * Toggles mobile flag.
- *
- * @param {boolean} isMobile true if this viewport equals at least a tablet
- * @protected
- */
- _toggleMobile: function (isMobile) {
- _isMobile = isMobile;
-
- this._rebuildPageHeader(false);
- },
-
- /**
- * Rebuilds the page header min-height property on viewport change.
- *
- * @protected
- */
- _rebuildPageHeader: function () {
- var clientHeight = _pageHeader.clientHeight;
-
- if (!clientHeight) {
- _pageHeader.style.removeProperty('min-height');
- clientHeight = _pageHeader.clientHeight;
- }
-
- if (clientHeight) {
- _pageHeader.style.setProperty('min-height', clientHeight + 'px');
- }
- },
-
- /**
- * Enforces a min-height for the original header's location to prevent collapsing
- * when setting the header to `position: fixed`.
- *
- * @protected
- */
- _initStickyPageHeader: function() {
- this._rebuildPageHeader(true);
-
- _triggerHeight = _pageHeader.clientHeight - elBySel('.mainMenu', _pageHeader).clientHeight;
-
- this._scroll();
- window.addEventListener('scroll', this._scroll.bind(this));
- },
-
/**
* Provides the collapsible search bar.
*
event.stopPropagation();
});
- var searchInput = elById('pageHeaderSearchInput');
+ _searchInput = elById('pageHeaderSearchInput');
+
+ var userPanelSearchButton = elById('userPanelSearchButton');
+ var pageHeaderFacade = elById('pageHeaderFacade');
- var searchLabel = elBySel('.pageHeaderSearchLabel');
_searchInputContainer = elById('pageHeaderSearchInputContainer');
var menu = elById('topMenu');
- searchLabel.addEventListener(WCF_CLICK_EVENT, function() {
- if ((_isFixed || _isMobile) && !_pageHeader.classList.contains('searchBarOpen')) {
+ userPanelSearchButton.addEventListener(WCF_CLICK_EVENT, (function(event) {
+ event.preventDefault();
+ event.stopPropagation();
+
+ var facadeHeight = pageHeaderFacade.clientHeight;
+ var scrollTop = window.pageYOffset;
+ var skipScrollHandler = false;
+ var isVisible = !_isMobile && (facadeHeight > scrollTop);
+
+ if (!isVisible && !_pageHeader.classList.contains('searchBarOpen')) {
UiAlignment.set(_searchInputContainer, menu, {
horizontal: 'right'
});
_pageHeader.classList.add('searchBarOpen');
- WCF.Dropdown.Interactive.Handler.closeAll();
- searchInput.focus();
+ _searchInput.focus();
}
- });
+ else if (!_isMobile) {
+ if (scrollTop) {
+ // setting focus could lead to the search bar to be
+ // hidden behind the fixed panel
+ UiScroll.element(elById('top'), function () {
+ _searchInput.focus();
+ });
+ }
+ else {
+ _searchInput.focus();
+ }
+
+ skipScrollHandler = true;
+ }
+
+ WCF.Dropdown.Interactive.Handler.closeAll();
+
+ if (!skipScrollHandler && !_isMobile && _callbackScroll === null) {
+ _callbackScroll = (function () {
+ if (pageHeaderFacade.clientHeight > window.pageYOffset) {
+ this._closeSearchBar();
+ }
+ }).bind(this);
+ window.addEventListener('scroll', _callbackScroll);
+ }
+ }).bind(this));
- UiCloseOverlay.add('WoltLabSuite/Core/Ui/Page/Header/Fixed', function() {
+ UiCloseOverlay.add('WoltLabSuite/Core/Ui/Page/Header/Fixed', (function() {
if (_pageHeader.classList.contains('searchBarForceOpen')) return;
- _pageHeader.classList.remove('searchBarOpen');
- });
+ this._closeSearchBar();
+ }).bind(this));
EventHandler.add('com.woltlab.wcf.MainMenuMobile', 'more', (function(data) {
if (data.identifier === 'com.woltlab.wcf.search') {
}).bind(this));
},
- /**
- * Updates the page header state after scrolling.
- *
- * @protected
- */
- _scroll: function() {
- if (_isMobile) return;
+ _closeSearchBar: function () {
+ _pageHeader.classList.remove('searchBarOpen');
- var wasFixed = _isFixed;
+ ['bottom', 'left', 'right', 'top'].forEach(function(propertyName) {
+ _searchInputContainer.style.removeProperty(propertyName);
+ });
- _isFixed = (window.pageYOffset > _triggerHeight);
+ _searchInput.blur();
- if (_isFixed !== wasFixed) {
- _pageHeader.classList[_isFixed ? 'add' : 'remove']('sticky');
- _pageHeaderContainer.classList[_isFixed ? 'add' : 'remove']('stickyPageHeader');
-
- EventHandler.fire('com.woltlab.wcf.pageHeaderFixed', 'change', { isFixed: _isFixed });
-
- if (!_isFixed && wasFixed) {
- _pageHeader.classList.remove('searchBarOpen');
- ['bottom', 'left', 'right', 'top'].forEach(function(propertyName) {
- _searchInputContainer.style.removeProperty(propertyName);
- });
- }
+ if (_callbackScroll !== null) {
+ window.removeEventListener('scroll', _callbackScroll);
+ _callbackScroll = null;
}
}
};
'Ui/Notification': 'WoltLabSuite/Core/Ui/Notification',
'Ui/ReusableDropdown': 'WoltLabSuite/Core/Ui/Dropdown/Reusable',
'Ui/Screen': 'WoltLabSuite/Core/Ui/Screen',
+ 'Ui/Scroll': 'WoltLabSuite/Core/Ui/Scroll',
'Ui/SimpleDropdown': 'WoltLabSuite/Core/Ui/Dropdown/Simple',
'Ui/TabMenu': 'WoltLabSuite/Core/Ui/TabMenu',
'Upload': 'WoltLabSuite/Core/Upload',
.icon {
color: $wcfHeaderText;
}
+
+ /* reserved space for `.pageHeaderPanel` */
+ padding-top: 50px;
}
-.pageHeader {
- min-height: 52px;
-}
-
-.pageHeader .layoutBoundary {
- display: flex;
+.pageHeaderPanel {
+ box-shadow: 0 0 10px rgba(0, 0, 0, .6);
+ left: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ z-index: 300;
+
+ &::after {
+ border-bottom: 1px solid $wcfHeaderMenuLinkBackgroundActive;
+ bottom: 0;
+ content: "";
+ display: block;
+ left: 0;
+ pointer-events: none;
+ position: absolute;
+ right: 0;
+ }
+
+ > .layoutBoundary {
+ display: flex;
+ }
@include screen-md-down {
- padding: 10px;
+ background-color: $wcfHeaderBackground;
+
+ > .layoutBoundary {
+ padding: 9px 10px;
+ }
}
@include screen-lg {
- align-items: center;
- flex-wrap: wrap;
- padding-top: 30px;
- padding-bottom: 0;
+ background-color: $wcfHeaderMenuBackground;
}
}
-/* LOGO */
-.pageHeaderLogo {
- @include screen-lg {
- flex: 0 0 50%;
- margin-bottom: 30px;
+.pageHeaderFacade {
+ > .layoutBoundary {
+ align-items: center;
+ display: flex;
- .pageHeaderLogoSmall {
- display: none;
+ @include screen-lg {
+ align-items: center;
+ padding-bottom: 40px;
+ padding-top: 40px;
+ }
+
+ @include screen-md-down {
+ height: 50px;
+ justify-content: center;
+ left: 60px;
+ padding: 9px 0;
+ position: fixed;
+ right: 60px;
+ top: 0;
+ width: auto;
+ z-index: 301;
}
- }
-
- .pageHeaderLogoLarge {
- max-width: 100%;
- }
-
- .pageHeaderLogoSmall {
- max-height: 30px;
}
}
}
}
-@include screen-lg {
- .pageHeader:not(.sticky) {
- .mainMenu {
- background-color: $wcfHeaderMenuBackground;
- position: relative;
-
- /* The `box-shadow` and the `::before` are used to create a full-width
- color stripe that matches the height of the main menu. This trick is
- used to allows us to have all elements in the header share a common
- ancestor in order to easily move elements with flexbox' `order` property.
-
- The `box-shadow` is a neat hack because an `::after` element would
- increase the page width unless we set `overflow: hidden` to the entire
- page header which is bad for multiple reasons. */
- box-shadow: 900px 0 0 0 $wcfHeaderMenuBackground;
-
- &::before {
- background-color: $wcfHeaderMenuBackground;
- bottom: 0;
- content: "";
- left: -100%;
- position: absolute;
- top: 0;
- width: 100%;
- }
- }
- }
-
- .pageHeaderSearchInputContainer .pageHeaderSearchInput {
- width: 250px;
- }
-}
-
/* user panel */
.userPanel {
background-color: $wcfHeaderMenuBackground;
}
}
+/* LOGO */
+.pageHeaderLogo {
+ @include screen-lg {
+ flex: 0 0 50%;
+
+ .pageHeaderLogoLarge {
+ max-width: 100%;
+ }
+
+ .pageHeaderLogoSmall {
+ display: none;
+ }
+ }
+
+ @include screen-md-down {
+ .pageHeaderLogoLarge {
+ display: none;
+ }
+
+ .pageHeaderLogoSmall {
+ max-height: 30px;
+ }
+ }
+}
+
/* SEARCH AREA */
.pageHeaderSearch {
@include screen-lg {
flex: 0 0 50%;
- margin-bottom: 30px;
text-align: right;
.pageHeaderSearchLabel {
}
.pageHeaderSearchInputContainer {
- background-color: $wcfHeaderSearchBoxBackground;
- border-radius: 2px;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
display: inline-flex;
- padding: 3px;
position: relative;
.pageHeaderSearchType {
display: flex;
> .button {
+ align-items: center;
+ background-color: $wcfHeaderMenuLinkBackground;
border-radius: 2px 0 0 2px;
+ color: $wcfHeaderMenuLink;
+ display: flex;
max-width: 200px;
min-width: 140px;
overflow: hidden;
right: 8px;
}
}
- }
-
- .pageHeaderSearchInputButton {
- border-radius: 0 2px 2px 0;
- padding: 4px 7px;
+
+ > .button:hover,
+ &.dropdownOpen > .button {
+ background: $wcfHeaderMenuLinkBackgroundActive;
+ color: $wcfHeaderMenuLinkActive;
+ }
}
.pageHeaderSearchInput {
- background-color: transparent;
+ background-color: $wcfHeaderSearchBoxBackground;
border-width: 0;
color: $wcfHeaderSearchBoxText;
+ padding-bottom: 8px;
+ padding-top: 8px;
+ width: 250px;
&:focus,
&:hover {
- background-color: transparent;
+ background-color: $wcfHeaderSearchBoxBackgroundActive;
color: $wcfHeaderSearchBoxTextActive;
- /* set placeholder color */
+ /* set placeholder color, do not chain these with a comma
+ as an unrecognized value causes the instruction to be
+ discarded in entirety */
&::-webkit-input-placeholder { /* WebKit browsers */
color: $wcfHeaderSearchBoxPlaceholderActive;
}
}
}
- /* set placeholder color */
+ /* set placeholder color, do not chain these with a comma
+ as an unrecognized value causes the instruction to be
+ discarded in entirety */
&::-webkit-input-placeholder { /* WebKit browsers */
color: $wcfHeaderSearchBoxPlaceholder;
}
display: none;
}
}
+
+ .pageHeaderSearchInputButton {
+ background-color: $wcfHeaderMenuLinkBackground;
+ border-radius: 0 2px 2px 0;
+ color: $wcfHeaderMenuLink;
+ padding: 4px 9px;
+
+ &:hover {
+ background: $wcfHeaderMenuLinkBackgroundActive;
+ color: $wcfHeaderMenuLinkActive;
+ }
+ }
}
-@include screen-md-down {
- .pageHeader > div > div {
- padding-bottom: 10px;
- padding-top: 10px;
- }
-
- .pageHeaderLogo {
- flex: 1 1 auto;
- margin: 0 10px;
- order: 2;
- text-align: center;
+@include screen-lg {
+ .searchBarOpen .pageHeaderSearchInputContainer {
+ position: fixed;
+ top: 50px !important;
- .pageHeaderLogoLarge {
- display: none;
+ .pageHeaderSearchType > .button {
+ border-top-left-radius: 0;
}
- .pageHeaderLogoSmall {
- display: inline;
+ .pageHeaderSearchInputButton {
+ border-top-right-radius: 0;
}
}
+}
+
+@include screen-md-down {
+ .pageHeaderPanel > .layoutBoundary {
+ /* pushes buttons to the left / right corner */
+ justify-content: space-between;
+ }
.userPanel {
flex: 0 0 auto;
- order: 3;
&::before {
content: $fa-var-user;
.mainMenu {
flex: 0 0 auto;
- order: 1;
&::before {
content: $fa-var-bars;
}
}
- .pageHeaderSearch:not(.open) {
- display: none;
+ .pageHeaderSearch {
+ left: 0;
+ position: fixed;
+ right: 0;
+ top: 50px !important;
+
+ .pageHeaderSearchInputContainer {
+ border-radius: 0;
+ display: flex;
+ flex-wrap: wrap;
+
+ .pageHeaderSearchType {
+ flex: 0 0 100%;
+
+ > .button {
+ border-radius: 0;
+ max-width: unset;
+ min-width: unset;
+ padding-bottom: 8px;
+ padding-top: 8px;
+ width: 100%;
+ }
+ }
+
+ .pageHeaderSearchInput {
+ flex: 1 1 auto;
+ }
+
+ .pageHeaderSearchInputButton {
+ border-radius: 0;
+ }
+ }
+
+ &:not(.open) {
+ display: none;
+ }
+ }
+}
+
+@include screen-xs {
+ .pageHeaderPanel,
+ .pageHeaderFacade {
+ transition: transform .12s linear;
+ }
+
+ .redactorActive .pageHeaderPanel,
+ .redactorActive .pageHeaderFacade {
+ transform: translateY(-120%);
}
}
+++ /dev/null
-.pageHeader > div {
- /* huge performance increase when scrolling */
- will-change: transform;
-}
-
-@include screen-lg {
- .pageHeaderContainer.stickyPageHeader {
- z-index: 300;
- }
-
- .pageHeader.sticky {
- > div {
- background-color: $wcfHeaderMenuBackground;
- box-shadow: 0 0 10px rgba(0, 0, 0, .6);
- left: 0;
- position: fixed;
- top: 0;
- right: 0;
- z-index: 301;
- }
-
-
- .layoutBoundary {
- flex-wrap: nowrap;
- min-height: 50px;
-
- // remove padding, the vertical alignment is done using `align-items`
- padding-bottom: 0;
- padding-top: 0;
- }
-
- .pageHeaderContainerLeft,
- .pageHeaderContainerRight {
- align-items: center;
- flex-direction: row;
- justify-content: flex-start;
- }
-
- .pageHeaderContainerRight {
- min-width: 200px;
- position: relative;
- }
-
- .pageHeaderLogo {
- display: none;
- flex: 0 0 auto;
- margin-bottom: 0;
- order: 1;
-
- > a > .pageHeaderLogoLarge {
- display: none;
- }
-
- > a > .pageHeaderLogoSmall {
- display: block;
- }
- }
-
- .mainMenu {
- flex: 1 1 auto;
- margin-right: 20px;
- order: 2;
-
- .boxMenu {
- > li > a {
- align-items: center;
- display: flex;
-
- > span {
- flex: 0 0 auto;
- }
-
- > .boxMenuLinkOutstandingItems {
- margin-left: 5px;
- }
- }
- }
- }
-
- .userPanel {
- flex: 0 0 auto;
- order: 4;
- }
-
- .pageHeaderSearch {
- flex: 0 0 62px;
- margin-bottom: 0;
- margin-left: 10px;
- order: 3;
-
- .pageHeaderSearchLabel {
- background: $wcfHeaderMenuLinkBackground;
- color: $wcfHeaderMenuLink;
- cursor: pointer;
- display: block;
- height: 50px;
- position: relative;
- width: 62px;
-
- &:hover {
- background: $wcfHeaderMenuLinkBackgroundActive;
- color: $wcfHeaderMenuLinkActive;
- }
-
- &::before {
- color: inherit;
- content: $fa-var-search;
- display: block;
- font-family: FontAwesome;
- font-size: 28px;
- line-height: 32px;
- position: absolute;
- right: 18px;
- top: 50%;
- transform: translateY(-50%);
- }
- }
- }
-
- &:not(.searchBarOpen) .pageHeaderSearchInputContainer {
- display: none;
- }
-
- &.searchBarOpen .pageHeaderSearchInputContainer {
- position: absolute;
-
- // Regular top calculation does not work because one of the parents
- // is set to `position: fixed`, screwing up the entire calculation.
- // We can work around this by using a relative top value of 100%
- // which equals the total height of the parent container.
- top: 100% !important;
- }
-
-
- }
-}
-
-// force sticky header on mobile, there is no difference when scrolled
-// all the way up and it might flicker when scrolling due to the inconsistent
-// scroll event being fired
-@include screen-md-down {
- .pageHeaderContainer {
- z-index: 300;
-
- // touch browser allow to scroll past the page top before they bounce back,
- // but in that case the original background color is visible
- background-color: transparent;
- }
-
- .pageHeader {
- flex-wrap: nowrap;
-
- > div {
- background-color: $wcfHeaderBackground;
- box-shadow: 0 0 10px rgba(0, 0, 0, .6);
- left: 0;
- max-width: 100vw;
- position: fixed;
- top: 0;
- right: 0;
- z-index: 301;
- }
- }
-
- .boxesHero {
- background-color: $wcfHeaderBackground;
- }
-}
-
-@include screen-xs {
- .pageHeader > div {
- transition: transform .12s ease-in-out;
- }
-
- .redactorActive .pageHeader > div {
- transform: translateY(-120%);
- }
-}
-
-@include screen-md-down {
- .pageHeaderSearch.open {
- left: 0;
- position: absolute;
- right: 0;
-
- .pageHeaderSearchInputContainer {
- border-radius: 0;
- display: flex;
- flex-wrap: wrap;
-
- .pageHeaderSearchType {
- flex: 0 0 100%;
- margin-bottom: 3px;
-
- > .button {
- border-radius: 0;
- max-width: unset;
- min-width: unset;
- width: 100%;
-
- // input field is larger on iOS
- align-items: center;
- display: flex;
- }
- }
-
- .pageHeaderSearchInput {
- flex: 1 1 auto;
- }
-
- .pageHeaderSearchInputButton {
- border-radius: 0;
- }
- }
- }
-}
}
@include screen-lg {
- &.interactiveDropdownFixed {
- position: fixed;
- }
+ position: fixed;
+ top: 50px !important;
}
}
}
> .anchorFixedHeader:target {
+ margin-top: -50px;
pointer-events: none;
position: relative;
z-index: 10;
&::after {
content: "";
display: block;
+ height: 50px;
}
> .message {
pointer-events: all;
- }
-
- @include screen-md-down {
- margin-top: -52px;
-
- &::after {
- height: 52px;
- }
-
- > .message {
- transform: translateY(52px);
- }
- }
-
- @include screen-lg {
- margin-top: -50px;
-
- &::after {
- height: 50px;
- }
-
- > .message {
- transform: translateY(50px);
- }
+ transform: translateY(50px);
}
}
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuLink', 'rgba(255, 255, 255, 1)');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuLinkActive', 'rgba(255, 255, 255, 1)');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuDropdownBackground', 'rgba(19, 34, 48, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuDropdownBackgroundActive', 'rgba(55, 73, 95, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuDropdownBackgroundActive', 'rgba(44, 62, 80, 1)');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuDropdownBorder', 'rgba(55, 73, 95, 1)');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuDropdownLink', 'rgba(255, 255, 255, 1)');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuDropdownLinkActive', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxBackground', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxBackgroundActive', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxText', 'rgba(66, 66, 66, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxTextActive', 'rgba(66, 66, 66, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxBackground', 'rgba(44, 62, 80, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxBackgroundActive', 'rgba(44, 62, 80, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxText', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxTextActive', 'rgba(255, 255, 255, 1)');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxPlaceholder', 'rgba(169, 169, 169, 1)');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxPlaceholderActive', 'rgba(169, 169, 169, 1)');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputBackground', 'rgba(241, 246, 251, 1)');