-<header id="pageHeader" class="header">
+<header id="pageHeader" class="pageHeader">
<div>
<div class="{if $__wcf->getStyleHandler()->getStyle()->getVariable('useFluidLayout')}layoutFluid{else}layoutFixed{/if}">
- {include file='pageLogo'}
+ {include file='pageHeaderLogo'}
- {include file='searchArea'}
+ {include file='pageHeaderSearch'}
- {include file='mainMenu'}
+ {include file='pageHeaderMenu'}
- {include file='userPanel'}
+ {include file='pageHeaderUser'}
</div>
</div>
- {*
- <div>
- <nav class="navigation navigationHeader">
- {include file='mainMenuSubMenu'}
-
- <ul class="navigationIcons">
- <li id="toBottomLink"><a href="{$__wcf->getAnchor('bottom')}" title="{lang}wcf.global.scrollDown{/lang}" class="jsTooltip"><span class="icon icon16 icon-arrow-down"></span> <span class="invisible">{lang}wcf.global.scrollDown{/lang}</span></a></li>
- <li id="sitemap" class="jsOnly"><a href="#" title="{lang}wcf.page.sitemap{/lang}" class="jsTooltip"><span class="icon icon16 icon-sitemap"></span> <span class="invisible">{lang}wcf.page.sitemap{/lang}</span></a></li>
- {if $headerNavigation|isset}{@$headerNavigation}{/if}
- {event name='navigationIcons'}
- </ul>
- </nav>
- </div>
- *}
+
<script data-relocate="true">
var header = elById('pageHeader');
header.style.setProperty('min-height', header.clientHeight + 'px');
--- /dev/null
+<div id="logo" class="logo">
+ {if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.logo')}{/if}
+
+ <a href="{link}{/link}">
+ {* @TODO *}
+ <img src="http://192.168.0.102/w/275/wcf/images/wbb.png" alt="" class="large">
+ <img src="http://192.168.0.102/w/275/wcf/images/wbb-small.png" alt="" class="small">
+ {if $__wcf->getStyleHandler()->getStyle()->getPageLogo()}
+ <img src="{$__wcf->getStyleHandler()->getStyle()->getPageLogo()}" alt="">
+ {/if}
+ {event name='headerLogo'}
+ </a>
+</div>
\ No newline at end of file
--- /dev/null
+{if $__wcf->getPageMenu()->getMenuItems('header')|count > 0}
+ <nav id="mainMenu" class="mainMenu jsMobileNavigation" data-button-label="{lang}wcf.page.mainMenu{/lang}">
+ <ul>
+ {foreach from=$__wcf->getPageMenu()->getMenuItems('header') item=menuItem}
+ <li class="{if $__wcf->getPageMenu()->getActiveMenuItem() == $menuItem->menuItem}active {/if}{if $__wcf->getPageMenu()->getMenuItems($menuItem->menuItem)|count > 0}subMenuItems{/if}" data-menu-item="{$menuItem->menuItem}">
+ <a href="{$menuItem->getProcessor()->getLink()}">{lang}{$menuItem->menuItem}{/lang}{if $menuItem->getProcessor()->getNotifications()} <span class="badge badgeUpdate">{#$menuItem->getProcessor()->getNotifications()}</span>{/if}</a>
+ {if $__wcf->getPageMenu()->getMenuItems($menuItem->menuItem)|count > 0}
+ <ul class="subMenu">
+ {include file='mainMenuSubMenu'}
+ </ul>
+ {/if}
+ </li>
+ {/foreach}
+ </ul>
+ </nav>
+{/if}
--- /dev/null
+{capture assign='__searchFormLink'}{link controller='Search'}{/link}{/capture}
+{capture assign='__searchInputPlaceholder'}{lang}wcf.global.search.enterSearchTerm{/lang}{/capture}
+{capture assign='__searchDropdownOptions'}<label><input type="checkbox" name="subjectOnly" value="1" /> {lang}wcf.search.subjectOnly{/lang}</label>{/capture}
+{assign var='__searchHiddenInputFields' value=''}
+
+{event name='settings'}
+
+<div id="search" class="searchBar" data-disable-auto-focus="true">
+ <form method="post" action="{@$__searchFormLink}" class="dropdown">
+ <input type="search" name="q" id="pageHeaderSearch" placeholder="{@$__searchInputPlaceholder}" autocomplete="off" required="required" value="{if $query|isset}{$query}{/if}" class="dropdownToggle" data-toggle="search" />
+
+ <ul class="dropdownMenu">
+ {hascontent}
+ <li class="dropdownText">
+ {content}
+ {@$__searchDropdownOptions}
+ {/content}
+ </li>
+ <li class="dropdownDivider"></li>
+ {/hascontent}
+ <li><a href="{@$__searchFormLink}">{lang}wcf.search.extended{/lang}</a></li>
+ </ul>
+
+ {@$__searchHiddenInputFields}
+ {@SECURITY_TOKEN_INPUT_TAG}
+ </form>
+</div>
+
+{if !OFFLINE || $__wcf->session->getPermission('admin.general.canViewPageDuringOfflineMode')}
+ <script data-relocate="true">
+ //<![CDATA[
+ $(function() {
+ new WCF.Search.Message.SearchArea($('#search'));
+ });
+ //]]>
+ </script>
+{/if}
\ No newline at end of file
--- /dev/null
+<nav id="topMenu" class="userPanel">
+ <ul class="userPanelItems">
+ {if $__wcf->user->userID}
+ <!-- user menu -->
+ <li id="userMenu">
+ <a class="framed" href="{link controller='User' object=$__wcf->user}{/link}">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(32)} <span>{lang}wcf.user.userNote{/lang}</span></a>
+ <div class="interactiveDropdown interactiveDropdownStatic interactiveDropdownUserMenu">
+ <div class="interactiveDropdownHeader">
+ <span class="interactiveDropdownTitle">{lang}wcf.user.controlPanel{/lang}</span>
+
+ {hascontent}
+ <ul class="interactiveDropdownLinks">
+ {content}
+ {event name='userMenuLinks'}
+ {/content}
+ </ul>
+ {/hascontent}
+ </div>
+ <div class="interactiveDropdownItemsContainer">
+ <ul class="interactiveDropdownItems interactiveDropdownItemsUserMenu">
+ <li>
+ <div class="box64">
+ <a href="{link controller='User' object=$__wcf->user}{/link}" class="framed">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(64)}</a>
+
+ <div class="containerHeadline">
+ <h3><a href="{link controller='User' object=$__wcf->user}{/link}">{$__wcf->user->username}</a></h3>
+ {if MODULE_USER_RANK}
+ <p>
+ {if $__wcf->getUserProfileHandler()->getUserTitle()}
+ <span class="badge userTitleBadge{if $__wcf->getUserProfileHandler()->getRank() && $__wcf->getUserProfileHandler()->getRank()->cssClassName} {@$__wcf->getUserProfileHandler()->getRank()->cssClassName}{/if}">{$__wcf->getUserProfileHandler()->getUserTitle()}</span>
+ {/if}
+ {if $__wcf->getUserProfileHandler()->getRank() && $__wcf->getUserProfileHandler()->getRank()->rankImage}
+ <span class="userRankImage">{@$__wcf->getUserProfileHandler()->getRank()->getImage()}</span>
+ {/if}
+ </p>
+ {/if}
+
+ <ul class="interactiveDropdownUserMenuLinkList">
+ <li><a href="{link controller='User' object=$__wcf->user}{/link}">{lang}wcf.user.myProfile{/lang}</a></li>
+ {if $__wcf->getUserProfileHandler()->canEditOwnProfile()}<li><a href="{link controller='User' object=$__wcf->user}editOnInit=true#about{/link}">{lang}wcf.user.editProfile{/lang}</a></li>{/if}
+ {if $__wcf->session->getPermission('admin.general.canUseAcp')}<li><a href="{link isACP=true}{/link}">{lang}wcf.global.acp.short{/lang}</a></li>{/if}
+ </ul>
+ </div>
+ </div>
+ </li>
+
+ {event name='userMenuItemsBefore'}
+
+ {foreach from=$__wcf->getUserMenu()->getMenuItems('') item=menuCategory}
+ <li class="dropdownDivider"></li>
+ <li class="interactiveDropdownUserMenuItem">
+ <div class="box32">
+ <div><span class="icon icon32 {@$menuCategory->getIconClassName()}"></span></div>
+
+ <div class="containerHeadline">
+ <h3>{lang}{$menuCategory->menuItem}{/lang}</h3>
+
+ <ul class="interactiveDropdownUserMenuLinkList">
+ {foreach from=$__wcf->getUserMenu()->getMenuItems($menuCategory->menuItem) item=menuItem}
+ <li><a href="{$menuItem->getProcessor()->getLink()}">{@$menuItem}</a></li>
+ {/foreach}
+ </ul>
+ </div>
+ </div>
+ </li>
+ {/foreach}
+
+ {event name='userMenuItemsAfter'}
+ </ul>
+ </div>
+ <a class="interactiveDropdownShowAll" href="{link controller='Logout'}t={@SECURITY_TOKEN}{/link}" onclick="WCF.Dropdown.Interactive.Handler.close('userMenu'); WCF.System.Confirmation.show('{lang}wcf.user.logout.sure{/lang}', $.proxy(function (action) { if (action == 'confirm') window.location.href = $(this).attr('href'); }, this)); return false;">{lang}wcf.user.logout{/lang}</a>
+ </div>
+ <script data-relocate="true">
+ $(function() {
+ new WCF.User.Panel.UserMenu();
+ });
+ </script>
+ </li>
+
+ <li><a href="{link controller='Settings'}{/link}" class="noJsOnly" style="display: none"><span class="icon icon16 fa-cogs"></span> <span>{lang}wcf.user.menu.settings{/lang}</span></a></li>
+
+ <!-- user notifications -->
+ {if !$__hideUserMenu|isset}
+ <li id="userNotifications" data-count="{#$__wcf->getUserNotificationHandler()->getNotificationCount()}">
+ <a href="{link controller='NotificationList'}{/link}"><span class="icon icon16 fa-bell-o"></span> <span>{lang}wcf.user.notification.notifications{/lang}</span>{if $__wcf->getUserNotificationHandler()->getNotificationCount()} <span class="badge badgeInverse">{#$__wcf->getUserNotificationHandler()->getNotificationCount()}</span>{/if}</a>
+ {if !OFFLINE || $__wcf->session->getPermission('admin.general.canViewPageDuringOfflineMode')}
+ <script data-relocate="true">
+ //<![CDATA[
+ $(function() {
+ new WCF.User.Panel.Notification({
+ markAllAsReadConfirmMessage: '{lang}wcf.user.notification.markAllAsConfirmed.confirmMessage{/lang}',
+ noItems: '{lang}wcf.user.notification.noMoreNotifications{/lang}',
+ settingsLink: '{link controller='NotificationSettings' encode=false}{/link}',
+ showAllLink: '{link controller='NotificationList' encode=false}{/link}',
+ title: '{lang}wcf.user.notification.notifications{/lang}'
+ });
+ });
+ //]]>
+ </script>
+ {/if}
+ </li>
+ {/if}
+ {else}
+ {if !$__disableLoginLink|isset}
+ <!-- login box -->
+ <li id="userLogin">
+ <a class="loginLink" href="{link controller='Login'}{/link}">{lang}wcf.user.loginOrRegister{/lang}</a>
+ <div id="loginForm" style="display: none;">
+ {capture assign='__3rdPartyButtons'}
+ {if GITHUB_PUBLIC_KEY !== '' && GITHUB_PRIVATE_KEY !== ''}
+ <li id="githubAuth" class="3rdPartyAuth">
+ <a href="{link controller='GithubAuth'}{/link}" class="thirdPartyLoginButton githubLoginButton"><span class="icon icon16 fagithub"></span> <span>{lang}wcf.user.3rdparty.github.login{/lang}</span></a>
+ </li>
+ {/if}
+
+ {if TWITTER_PUBLIC_KEY !== '' && TWITTER_PRIVATE_KEY !== ''}
+ <li id="twitterAuth" class="3rdPartyAuth">
+ <a href="{link controller='TwitterAuth'}{/link}" class="thirdPartyLoginButton twitterLoginButton"><span class="icon icon16 fa-twitter"></span> <span>{lang}wcf.user.3rdparty.twitter.login{/lang}</span></a>
+ </li>
+ {/if}
+
+ {if FACEBOOK_PUBLIC_KEY !== '' && FACEBOOK_PRIVATE_KEY !== ''}
+ <li id="facebookAuth" class="3rdPartyAuth">
+ <a href="{link controller='FacebookAuth'}{/link}" class="thirdPartyLoginButton facebookLoginButton"><span class="icon icon16 fa-facebook"></span> <span>{lang}wcf.user.3rdparty.facebook.login{/lang}</span></a>
+ </li>
+ {/if}
+
+ {if GOOGLE_PUBLIC_KEY !== '' && GOOGLE_PRIVATE_KEY !== ''}
+ <li id="googleAuth" class="3rdPartyAuth">
+ <a href="{link controller='GoogleAuth'}{/link}" class="thirdPartyLoginButton googleLoginButton"><span class="icon icon16 fa-google-plus"></span> <span>{lang}wcf.user.3rdparty.google.login{/lang}</span></a>
+ </li>
+ {/if}
+
+ {event name='3rdpartyButtons'}
+ {/capture}
+
+ <form method="post" action="{link controller='Login'}{/link}">
+ <fieldset>
+ {if $__3rdPartyButtons|trim}<legend>{lang}wcf.user.login{/lang}</legend>{/if}
+
+ <dl>
+ <dt><label for="username">{lang}wcf.user.usernameOrEmail{/lang}</label></dt>
+ <dd>
+ <input type="text" id="username" name="username" value="" required="required" class="long" />
+ </dd>
+ </dl>
+
+ {if !REGISTER_DISABLED}
+ <dl>
+ <dt>{lang}wcf.user.login.action{/lang}</dt>
+ <dd>
+ <label><input type="radio" name="action" value="register" /> {lang}wcf.user.login.action.register{/lang}</label>
+ <label><input type="radio" name="action" value="login" checked="checked" /> {lang}wcf.user.login.action.login{/lang}</label>
+ </dd>
+ </dl>
+ {/if}
+
+ <dl>
+ <dt><label for="password">{lang}wcf.user.password{/lang}</label></dt>
+ <dd>
+ <input type="password" id="password" name="password" value="" class="long" />
+ </dd>
+ </dl>
+
+ {if $__wcf->getUserAuthenticationFactory()->getUserAuthentication()->supportsPersistentLogins()}
+ <dl>
+ <dt></dt>
+ <dd><label><input type="checkbox" id="useCookies" name="useCookies" value="1" checked="checked" /> {lang}wcf.user.useCookies{/lang}</label></dd>
+ </dl>
+ {/if}
+
+ {event name='loginFields'}
+
+ <div class="formSubmit">
+ <input type="submit" id="loginSubmitButton" name="submitButton" value="{lang}wcf.user.button.login{/lang}" accesskey="s" />
+ <a class="button" href="{link controller='LostPassword'}{/link}"><span>{lang}wcf.user.lostPassword{/lang}</span></a>
+ <input type="hidden" name="url" value="{$__wcf->session->requestURI}" />
+ {@SECURITY_TOKEN_INPUT_TAG}
+ </div>
+ </fieldset>
+
+ {if $__3rdPartyButtons|trim}
+ <fieldset>
+ <legend>{lang}wcf.user.login.3rdParty{/lang}</legend>
+ <ul class="buttonList smallButtons thirdPartyLogin">
+ {@$__3rdPartyButtons}
+ </ul>
+ </fieldset>
+ {/if}
+ </form>
+ </div>
+
+ <script data-relocate="true">
+ //<![CDATA[
+ $(function() {
+ WCF.Language.addObject({
+ 'wcf.user.button.login': '{lang}wcf.user.button.login{/lang}',
+ 'wcf.user.button.register': '{lang}wcf.user.button.register{/lang}',
+ 'wcf.user.login': '{lang}wcf.user.login{/lang}'
+ });
+ new WCF.User.Login(true);
+ });
+ //]]>
+ </script>
+ </li>
+ {/if}
+ {if $__wcf->getLanguage()->getLanguages()|count > 1}
+ <li id="pageLanguageContainer">
+ <script data-relocate="true">
+ //<![CDATA[
+ $(function() {
+ var $languages = {
+ {implode from=$__wcf->getLanguage()->getLanguages() item=language}
+ '{@$language->languageID}': {
+ iconPath: '{@$language->getIconPath()}',
+ languageName: '{$language}'
+ }
+ {/implode}
+ };
+
+ new WCF.Language.Chooser('pageLanguageContainer', 'languageID', {@$__wcf->getLanguage()->languageID}, $languages, function(item) {
+ var $location = window.location.toString().replace(/#.*/, '').replace(/(\?|&)l=[0-9]+/g, '');
+ var $delimiter = ($location.indexOf('?') == -1) ? '?' : '&';
+
+ window.location = $location + $delimiter + 'l=' + item.data('languageID') + window.location.hash;
+ });
+ });
+ //]]>
+ </script>
+ </li>
+ {/if}
+ {/if}
+
+ {if !$__hideUserMenu|isset}
+ {if $__wcf->user->userID && $__wcf->session->getPermission('mod.general.canUseModeration')}
+ <li id="outstandingModeration" data-count="{#$__wcf->getModerationQueueManager()->getOutstandingModerationCount()}">
+ <a href="{link controller='ModerationList'}{/link}">
+ <span class="icon icon16 fa-exclamation-triangle"></span>
+ <span>{lang}wcf.moderation.moderation{/lang}</span>
+ {if $__wcf->getModerationQueueManager()->getUnreadModerationCount()}<span class="badge badgeInverse">{#$__wcf->getModerationQueueManager()->getUnreadModerationCount()}</span>{/if}
+ </a>
+ {if !OFFLINE || $__wcf->session->getPermission('admin.general.canViewPageDuringOfflineMode')}
+ <script data-relocate="true">
+ //<![CDATA[
+ $(function() {
+ new WCF.User.Panel.Moderation({
+ deletedContent: '{lang}wcf.moderation.showDeletedContent{/lang}',
+ deletedContentLink: '{link controller='DeletedContentList' encode=false}{/link}',
+ markAllAsReadConfirmMessage: '{lang}wcf.moderation.markAllAsRead.confirmMessage{/lang}',
+ noItems: '{lang}wcf.moderation.noMoreItems{/lang}',
+ showAllLink: '{link controller='ModerationList' encode=false}{/link}',
+ title: '{lang}wcf.moderation.moderation{/lang}'
+ });
+ });
+ //]]>
+ </script>
+ {/if}
+ </li>
+ {/if}
+
+ {event name='menuItems'}
+ {/if}
+
+ {if $__wcf->user->userID}
+ <li><a href="{link controller='Logout'}t={@SECURITY_TOKEN}{/link}" class="noJsOnly" style="display: none"><span class="icon icon16 fa-sign-out"></span> <span>{lang}wcf.user.logout{/lang}</span></a></li>
+ {/if}
+ </ul>
+</nav>
\ No newline at end of file
+++ /dev/null
-<nav id="topMenu" class="userPanel">
- <ul class="userPanelItems">
- {if $__wcf->user->userID}
- <!-- user menu -->
- <li id="userMenu">
- <a class="framed" href="{link controller='User' object=$__wcf->user}{/link}">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(32)} <span>{lang}wcf.user.userNote{/lang}</span></a>
- <div class="interactiveDropdown interactiveDropdownStatic interactiveDropdownUserMenu">
- <div class="interactiveDropdownHeader">
- <span class="interactiveDropdownTitle">{lang}wcf.user.controlPanel{/lang}</span>
-
- {hascontent}
- <ul class="interactiveDropdownLinks">
- {content}
- {event name='userMenuLinks'}
- {/content}
- </ul>
- {/hascontent}
- </div>
- <div class="interactiveDropdownItemsContainer">
- <ul class="interactiveDropdownItems interactiveDropdownItemsUserMenu">
- <li>
- <div class="box64">
- <a href="{link controller='User' object=$__wcf->user}{/link}" class="framed">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(64)}</a>
-
- <div class="containerHeadline">
- <h3><a href="{link controller='User' object=$__wcf->user}{/link}">{$__wcf->user->username}</a></h3>
- {if MODULE_USER_RANK}
- <p>
- {if $__wcf->getUserProfileHandler()->getUserTitle()}
- <span class="badge userTitleBadge{if $__wcf->getUserProfileHandler()->getRank() && $__wcf->getUserProfileHandler()->getRank()->cssClassName} {@$__wcf->getUserProfileHandler()->getRank()->cssClassName}{/if}">{$__wcf->getUserProfileHandler()->getUserTitle()}</span>
- {/if}
- {if $__wcf->getUserProfileHandler()->getRank() && $__wcf->getUserProfileHandler()->getRank()->rankImage}
- <span class="userRankImage">{@$__wcf->getUserProfileHandler()->getRank()->getImage()}</span>
- {/if}
- </p>
- {/if}
-
- <ul class="interactiveDropdownUserMenuLinkList">
- <li><a href="{link controller='User' object=$__wcf->user}{/link}">{lang}wcf.user.myProfile{/lang}</a></li>
- {if $__wcf->getUserProfileHandler()->canEditOwnProfile()}<li><a href="{link controller='User' object=$__wcf->user}editOnInit=true#about{/link}">{lang}wcf.user.editProfile{/lang}</a></li>{/if}
- {if $__wcf->session->getPermission('admin.general.canUseAcp')}<li><a href="{link isACP=true}{/link}">{lang}wcf.global.acp.short{/lang}</a></li>{/if}
- </ul>
- </div>
- </div>
- </li>
-
- {event name='userMenuItemsBefore'}
-
- {foreach from=$__wcf->getUserMenu()->getMenuItems('') item=menuCategory}
- <li class="dropdownDivider"></li>
- <li class="interactiveDropdownUserMenuItem">
- <div class="box32">
- <div><span class="icon icon32 {@$menuCategory->getIconClassName()}"></span></div>
-
- <div class="containerHeadline">
- <h3>{lang}{$menuCategory->menuItem}{/lang}</h3>
-
- <ul class="interactiveDropdownUserMenuLinkList">
- {foreach from=$__wcf->getUserMenu()->getMenuItems($menuCategory->menuItem) item=menuItem}
- <li><a href="{$menuItem->getProcessor()->getLink()}">{@$menuItem}</a></li>
- {/foreach}
- </ul>
- </div>
- </div>
- </li>
- {/foreach}
-
- {event name='userMenuItemsAfter'}
- </ul>
- </div>
- <a class="interactiveDropdownShowAll" href="{link controller='Logout'}t={@SECURITY_TOKEN}{/link}" onclick="WCF.Dropdown.Interactive.Handler.close('userMenu'); WCF.System.Confirmation.show('{lang}wcf.user.logout.sure{/lang}', $.proxy(function (action) { if (action == 'confirm') window.location.href = $(this).attr('href'); }, this)); return false;">{lang}wcf.user.logout{/lang}</a>
- </div>
- <script data-relocate="true">
- $(function() {
- new WCF.User.Panel.UserMenu();
- });
- </script>
- </li>
-
- <li><a href="{link controller='Settings'}{/link}" class="noJsOnly" style="display: none"><span class="icon icon16 fa-cogs"></span> <span>{lang}wcf.user.menu.settings{/lang}</span></a></li>
-
- <!-- user notifications -->
- {if !$__hideUserMenu|isset}
- <li id="userNotifications" data-count="{#$__wcf->getUserNotificationHandler()->getNotificationCount()}">
- <a href="{link controller='NotificationList'}{/link}"><span class="icon icon16 fa-bell-o"></span> <span>{lang}wcf.user.notification.notifications{/lang}</span>{if $__wcf->getUserNotificationHandler()->getNotificationCount()} <span class="badge badgeInverse">{#$__wcf->getUserNotificationHandler()->getNotificationCount()}</span>{/if}</a>
- {if !OFFLINE || $__wcf->session->getPermission('admin.general.canViewPageDuringOfflineMode')}
- <script data-relocate="true">
- //<![CDATA[
- $(function() {
- new WCF.User.Panel.Notification({
- markAllAsReadConfirmMessage: '{lang}wcf.user.notification.markAllAsConfirmed.confirmMessage{/lang}',
- noItems: '{lang}wcf.user.notification.noMoreNotifications{/lang}',
- settingsLink: '{link controller='NotificationSettings' encode=false}{/link}',
- showAllLink: '{link controller='NotificationList' encode=false}{/link}',
- title: '{lang}wcf.user.notification.notifications{/lang}'
- });
- });
- //]]>
- </script>
- {/if}
- </li>
- {/if}
- {else}
- {if !$__disableLoginLink|isset}
- <!-- login box -->
- <li id="userLogin">
- <a class="loginLink" href="{link controller='Login'}{/link}">{lang}wcf.user.loginOrRegister{/lang}</a>
- <div id="loginForm" style="display: none;">
- {capture assign='__3rdPartyButtons'}
- {if GITHUB_PUBLIC_KEY !== '' && GITHUB_PRIVATE_KEY !== ''}
- <li id="githubAuth" class="3rdPartyAuth">
- <a href="{link controller='GithubAuth'}{/link}" class="thirdPartyLoginButton githubLoginButton"><span class="icon icon16 fagithub"></span> <span>{lang}wcf.user.3rdparty.github.login{/lang}</span></a>
- </li>
- {/if}
-
- {if TWITTER_PUBLIC_KEY !== '' && TWITTER_PRIVATE_KEY !== ''}
- <li id="twitterAuth" class="3rdPartyAuth">
- <a href="{link controller='TwitterAuth'}{/link}" class="thirdPartyLoginButton twitterLoginButton"><span class="icon icon16 fa-twitter"></span> <span>{lang}wcf.user.3rdparty.twitter.login{/lang}</span></a>
- </li>
- {/if}
-
- {if FACEBOOK_PUBLIC_KEY !== '' && FACEBOOK_PRIVATE_KEY !== ''}
- <li id="facebookAuth" class="3rdPartyAuth">
- <a href="{link controller='FacebookAuth'}{/link}" class="thirdPartyLoginButton facebookLoginButton"><span class="icon icon16 fa-facebook"></span> <span>{lang}wcf.user.3rdparty.facebook.login{/lang}</span></a>
- </li>
- {/if}
-
- {if GOOGLE_PUBLIC_KEY !== '' && GOOGLE_PRIVATE_KEY !== ''}
- <li id="googleAuth" class="3rdPartyAuth">
- <a href="{link controller='GoogleAuth'}{/link}" class="thirdPartyLoginButton googleLoginButton"><span class="icon icon16 fa-google-plus"></span> <span>{lang}wcf.user.3rdparty.google.login{/lang}</span></a>
- </li>
- {/if}
-
- {event name='3rdpartyButtons'}
- {/capture}
-
- <form method="post" action="{link controller='Login'}{/link}">
- <fieldset>
- {if $__3rdPartyButtons|trim}<legend>{lang}wcf.user.login{/lang}</legend>{/if}
-
- <dl>
- <dt><label for="username">{lang}wcf.user.usernameOrEmail{/lang}</label></dt>
- <dd>
- <input type="text" id="username" name="username" value="" required="required" class="long" />
- </dd>
- </dl>
-
- {if !REGISTER_DISABLED}
- <dl>
- <dt>{lang}wcf.user.login.action{/lang}</dt>
- <dd>
- <label><input type="radio" name="action" value="register" /> {lang}wcf.user.login.action.register{/lang}</label>
- <label><input type="radio" name="action" value="login" checked="checked" /> {lang}wcf.user.login.action.login{/lang}</label>
- </dd>
- </dl>
- {/if}
-
- <dl>
- <dt><label for="password">{lang}wcf.user.password{/lang}</label></dt>
- <dd>
- <input type="password" id="password" name="password" value="" class="long" />
- </dd>
- </dl>
-
- {if $__wcf->getUserAuthenticationFactory()->getUserAuthentication()->supportsPersistentLogins()}
- <dl>
- <dt></dt>
- <dd><label><input type="checkbox" id="useCookies" name="useCookies" value="1" checked="checked" /> {lang}wcf.user.useCookies{/lang}</label></dd>
- </dl>
- {/if}
-
- {event name='loginFields'}
-
- <div class="formSubmit">
- <input type="submit" id="loginSubmitButton" name="submitButton" value="{lang}wcf.user.button.login{/lang}" accesskey="s" />
- <a class="button" href="{link controller='LostPassword'}{/link}"><span>{lang}wcf.user.lostPassword{/lang}</span></a>
- <input type="hidden" name="url" value="{$__wcf->session->requestURI}" />
- {@SECURITY_TOKEN_INPUT_TAG}
- </div>
- </fieldset>
-
- {if $__3rdPartyButtons|trim}
- <fieldset>
- <legend>{lang}wcf.user.login.3rdParty{/lang}</legend>
- <ul class="buttonList smallButtons thirdPartyLogin">
- {@$__3rdPartyButtons}
- </ul>
- </fieldset>
- {/if}
- </form>
- </div>
-
- <script data-relocate="true">
- //<![CDATA[
- $(function() {
- WCF.Language.addObject({
- 'wcf.user.button.login': '{lang}wcf.user.button.login{/lang}',
- 'wcf.user.button.register': '{lang}wcf.user.button.register{/lang}',
- 'wcf.user.login': '{lang}wcf.user.login{/lang}'
- });
- new WCF.User.Login(true);
- });
- //]]>
- </script>
- </li>
- {/if}
- {if $__wcf->getLanguage()->getLanguages()|count > 1}
- <li id="pageLanguageContainer">
- <script data-relocate="true">
- //<![CDATA[
- $(function() {
- var $languages = {
- {implode from=$__wcf->getLanguage()->getLanguages() item=language}
- '{@$language->languageID}': {
- iconPath: '{@$language->getIconPath()}',
- languageName: '{$language}'
- }
- {/implode}
- };
-
- new WCF.Language.Chooser('pageLanguageContainer', 'languageID', {@$__wcf->getLanguage()->languageID}, $languages, function(item) {
- var $location = window.location.toString().replace(/#.*/, '').replace(/(\?|&)l=[0-9]+/g, '');
- var $delimiter = ($location.indexOf('?') == -1) ? '?' : '&';
-
- window.location = $location + $delimiter + 'l=' + item.data('languageID') + window.location.hash;
- });
- });
- //]]>
- </script>
- </li>
- {/if}
- {/if}
-
- {if !$__hideUserMenu|isset}
- {if $__wcf->user->userID && $__wcf->session->getPermission('mod.general.canUseModeration')}
- <li id="outstandingModeration" data-count="{#$__wcf->getModerationQueueManager()->getOutstandingModerationCount()}">
- <a href="{link controller='ModerationList'}{/link}">
- <span class="icon icon16 fa-exclamation-triangle"></span>
- <span>{lang}wcf.moderation.moderation{/lang}</span>
- {if $__wcf->getModerationQueueManager()->getUnreadModerationCount()}<span class="badge badgeInverse">{#$__wcf->getModerationQueueManager()->getUnreadModerationCount()}</span>{/if}
- </a>
- {if !OFFLINE || $__wcf->session->getPermission('admin.general.canViewPageDuringOfflineMode')}
- <script data-relocate="true">
- //<![CDATA[
- $(function() {
- new WCF.User.Panel.Moderation({
- deletedContent: '{lang}wcf.moderation.showDeletedContent{/lang}',
- deletedContentLink: '{link controller='DeletedContentList' encode=false}{/link}',
- markAllAsReadConfirmMessage: '{lang}wcf.moderation.markAllAsRead.confirmMessage{/lang}',
- noItems: '{lang}wcf.moderation.noMoreItems{/lang}',
- showAllLink: '{link controller='ModerationList' encode=false}{/link}',
- title: '{lang}wcf.moderation.moderation{/lang}'
- });
- });
- //]]>
- </script>
- {/if}
- </li>
- {/if}
-
- {event name='menuItems'}
- {/if}
-
- {if $__wcf->user->userID}
- <li><a href="{link controller='Logout'}t={@SECURITY_TOKEN}{/link}" class="noJsOnly" style="display: none"><span class="icon icon16 fa-sign-out"></span> <span>{lang}wcf.user.logout{/lang}</span></a></li>
- {/if}
- </ul>
-</nav>
\ No newline at end of file
#spContent { padding: 20px 0; }
.spHeadline { border-bottom: 1px solid #000; font-size: 1.2rem; font-weight: 300; margin: 20px 0; padding-bottom: 5px; }
.spHeadline:first-child { margin-top: 10px; }
+#spContentBorder { border-bottom: 1px solid #000; margin: 10px 0; }
+#spContentBorderInner { border-bottom: 1px solid #000; margin: 10px 0; }
/* ### tabular box ### */
#spTable { border-bottom: 1px solid #000; border-spacing: 0; width: 100%; }
-#spTable th { border-bottom: 2px solid currentColor; font-size: 16px; font-weight: 300; text-align: left; }
+#spTable th { border-bottom: 2px solid currentColor; font-size: 1.2rem; font-weight: 300; text-align: left; }
#spTable th, #spTable td { padding: 10px; }
#spTable tr:not(:last-child) > td { border-bottom: 1px solid #000; }
#spContentSidebar .spContentSidebarBox:not(:last-child) { margin-bottom: 20px; }
#spContentSidebar .spContentSidebarHeadline { font-size: 1.2rem; font-weight: 300; margin-bottom: 10px; }
+/* ### status messages ### */
+#spStatus { display: flex; flex-wrap: wrap; justify-content: space-between; }
+#spStatus > li { flex: 0 0 auto; width: calc(50% - 10px); /* work-around for IE which does not support calc() for flex-basis */ }
+#spStatus > li:first-child { margin-bottom: 10px; }
+#spStatus > li > div { border-left: 5px solid #000; padding: 5px 10px; }
+
/* ### wrapper sidebar ### */
.spSidebarBox { background-color: rgb(217, 237, 247); margin-bottom: 10px; padding: 10px; }
.spSidebarBox.pointer { position: relative; }
{hascontent}
<li class="dropdownText">
{content}
- {@$__searchDropdownOptions}
+ {@$__searchDropdownOptions}
{/content}
</li>
<li class="dropdownDivider"></li>
<div class="spHeadline" data-region="wcfContentHeadline">Lorem Ipsum</div>
<p data-region="wcfContent">
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a>At vero eos</a> et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br>
- <br>
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a>At vero eos</a> et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+
+ <div id="spContentBorderInner"></div>
+
Stet clita kasd gubergren, no sea <a>takimata</a> sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor <a>invidunt</a> ut labore et dolore magna aliquyam erat, sed diam voluptua.
+
+ <div id="spContentBorder"></div>
+
+ <div id="spContentDimmed" data-region="wcfContentDimmed">
+ Stet clita kasd gubergren, <a>no sea takimata</a> sanctus est Lorem ipsum dolor sit amet.
+ </div>
</p>
<div class="spHeadline">Tabular Box</div>
<li><a>Sed diam nonumy</a></li>
</ul>
</div>
+
+ <div class="spHeadline">Status</div>
+
+ <ol id="spStatus">
+ <li>
+ <div id="spStatusInfo" data-region="wcfStatusInfo">Lorem ipsum dolor <a>sit amet</a>.</div>
+ </li>
+ <li>
+ <div id="spStatusSuccess" data-region="wcfStatusSuccess"><a>Sed diam nonumy</a> eirmod tempor.</div>
+ </li>
+ <li>
+ <div id="spStatusWarning" data-region="wcfStatusWarning">At vero eos <a>et accusam et justo duo</a>.</div>
+ </li>
+ <li>
+ <div id="spStatusError" data-region="wcfStatusError">Stet clita <a>kasd gubergren</a>, no sea.</div>
+ </li>
+ </ol>
</div>
<div id="spContentSidebar">
<p>
<a>Stet clita kasd gubergren</a>, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a>labore et dolore magna</a> aliquyam erat, sed diam voluptua.
</p>
+
+ <div id="spContentSidebarBoxDimmed" style="margin-top: 10px;" data-region="wcfSidebarDimmed">
+ Stet clita kasd gubergren, <a>no sea takimata</a> sanctus est Lorem ipsum dolor sit amet.
+ </div>
</div>
</div>
</div>
'wcfNavigationLink': '#spNavigation a { color: VALUE; }',
'wcfNavigationLinkActive': '#spNavigation a:hover { color: VALUE; }',
'wcfContentBackground': '#spContent { background-color: VALUE; }',
+ 'wcfContentBorder': '#spContentBorder { border-color: VALUE; }',
+ 'wcfContentBorderInner': '#spContentBorderInner { border-color: VALUE; }',
'wcfContentText': '#spContent { color: VALUE; }',
'wcfContentLink': '#spContent a { color: VALUE; }',
'wcfContentLinkActive': '#spContent a:hover { color: VALUE; }',
+ 'wcfContentDimmedText': '#spContentDimmed { color: VALUE; }',
+ 'wcfContentDimmedLink': '#spContentDimmed a { color: VALUE; }',
+ 'wcfContentDimmedLinkActive': '#spContentDimmed a:hover { color: VALUE; }',
'wcfContentHeadlineBorder': '.spHeadline { border-color: VALUE; }',
'wcfContentHeadlineText': '.spHeadline { color: VALUE; }',
'wcfContentHeadlineLink': '.spHeadline a { color: VALUE; }',
'wcfSidebarText': '#spContentSidebar .spContentSidebarBox { color: VALUE; }',
'wcfSidebarLink': '#spContentSidebar .spContentSidebarBox a { color: VALUE; }',
'wcfSidebarLinkActive': '#spContentSidebar .spContentSidebarBox a:hover { color: VALUE; }',
+ 'wcfSidebarDimmedText': '#spContentSidebar .spContentSidebarBox #spContentSidebarBoxDimmed { color: VALUE; }',
+ 'wcfSidebarDimmedLink': '#spContentSidebar .spContentSidebarBox #spContentSidebarBoxDimmed a { color: VALUE; }',
+ 'wcfSidebarDimmedLinkActive': '#spContentSidebar .spContentSidebarBox #spContentSidebarBoxDimmed a:hover { color: VALUE; }',
'wcfSidebarHeadlineText': '#spContentSidebar .spContentSidebarBox .spContentSidebarHeadline { color: VALUE; }',
'wcfSidebarHeadlineLink': '#spContentSidebar .spContentSidebarBox .spContentSidebarHeadline a { color: VALUE; }',
'wcfSidebarHeadlineLinkActive': '#spContentSidebar .spContentSidebarBox .spContentSidebarHeadline a:hover { color: VALUE; }',
+ 'wcfStatusInfoBackground': '#spStatusInfo { background-color: VALUE; }',
+ 'wcfStatusInfoBorder': '#spStatusInfo { border-color: VALUE; }',
+ 'wcfStatusInfoText': '#spStatusInfo { color: VALUE; }',
+ 'wcfStatusInfoLink': '#spStatusInfo a { color: VALUE; }',
+ 'wcfStatusInfoLinkActive': '#spStatusInfo a:hover { color: VALUE; }',
+ 'wcfStatusSuccessBackground': '#spStatusSuccess { background-color: VALUE; }',
+ 'wcfStatusSuccessBorder': '#spStatusSuccess { border-color: VALUE; }',
+ 'wcfStatusSuccessText': '#spStatusSuccess { color: VALUE; }',
+ 'wcfStatusSuccessLink': '#spStatusSuccess a { color: VALUE; }',
+ 'wcfStatusSuccessLinkActive': '#spStatusSuccess a:hover { color: VALUE; }',
+ 'wcfStatusWarningBackground': '#spStatusWarning { background-color: VALUE; }',
+ 'wcfStatusWarningBorder': '#spStatusWarning { border-color: VALUE; }',
+ 'wcfStatusWarningText': '#spStatusWarning { color: VALUE; }',
+ 'wcfStatusWarningLink': '#spStatusWarning a { color: VALUE; }',
+ 'wcfStatusWarningLinkActive': '#spStatusWarning a:hover { color: VALUE; }',
+ 'wcfStatusErrorBackground': '#spStatusError { background-color: VALUE; }',
+ 'wcfStatusErrorBorder': '#spStatusError { border-color: VALUE; }',
+ 'wcfStatusErrorText': '#spStatusError { color: VALUE; }',
+ 'wcfStatusErrorLink': '#spStatusError a { color: VALUE; }',
+ 'wcfStatusErrorLinkActive': '#spStatusError a:hover { color: VALUE; }'
};
</script>
$this->colorCategories = [
'wcfHeader' => ['wcfHeader', 'wcfHeaderSearchBox', 'wcfHeaderMenu'],
'wcfNavigation' => 'wcfNavigation',
- 'wcfSidebar' => ['wcfSidebar', 'wcfSidebarHeadline'],
- 'wcfContent' => ['wcfContent', 'wcfContentHeadline'],
+ 'wcfSidebar' => ['wcfSidebar', 'wcfSidebarDimmed', 'wcfSidebarHeadline'],
+ 'wcfContent' => ['wcfContent', 'wcfContentDimmed', 'wcfContentHeadline'],
'wcfTabularBox' => 'wcfTabularBox',
'wcfInput' => ['wcfInput', 'wcfInputDisabled'],
'wcfButton' => ['wcfButton', 'wcfButtonPrimary', 'wcfButtonDisabled'],
'wcfDropdown' => 'wcfDropdown',
+ 'wcfStatus' => ['wcfStatusInfo', 'wcfStatusSuccess', 'wcfStatusWarning', 'wcfStatusError'],
'wcfFooterBox' => ['wcfFooterBox', 'wcfFooterBoxHeadline'],
'wcfFooter' => 'wcfFooter'
];
'wcfHeaderMenu' => ['background', 'border', 'link', 'backgroundActive', 'linkActive'],
'wcfNavigation' => ['background', 'text', 'link', 'linkActive'],
'wcfSidebar' => ['background', 'text', 'link', 'linkActive'],
+ 'wcfSidebarDimmed' => ['text', 'link', 'linkActive'],
'wcfSidebarHeadline' => ['text', 'link', 'linkActive'],
- 'wcfContent' => ['background', 'text', 'link', 'linkActive'],
+ 'wcfContent' => ['background', 'border', 'borderInner', 'text', 'link', 'linkActive'],
+ 'wcfContentDimmed' => ['text', 'link', 'linkActive'],
'wcfContentHeadline' => ['border', 'text', 'link', 'linkActive'],
'wcfTabularBox' => ['borderInner', 'headline', 'backgroundActive', 'headlineActive'],
'wcfInput' => ['background', 'border', 'text', 'backgroundActive', 'borderActive', 'textActive'],
'wcfButtonPrimary' => ['background', 'border', 'text', 'backgroundActive', 'borderActive', 'textActive'],
'wcfButtonDisabled' => ['background', 'border', 'text'],
'wcfDropdown' => ['background', 'border', 'borderInner', 'text', 'link', 'backgroundActive', 'linkActive'],
+ 'wcfStatusInfo' => ['background', 'border', 'text', 'link', 'linkActive'],
+ 'wcfStatusSuccess' => ['background', 'border', 'text', 'link', 'linkActive'],
+ 'wcfStatusWarning' => ['background', 'border', 'text', 'link', 'linkActive'],
+ 'wcfStatusError' => ['background', 'border', 'text', 'link', 'linkActive'],
'wcfFooterBox' => ['background', 'text', 'link', 'linkActive'],
'wcfFooterBoxHeadline' => ['text', 'link', 'linkActive'],
'wcfFooter' => ['background', 'text', 'link', 'linkActive']
}
unset($value);
+ $variables['wcfFontFamily'] = $variables['wcfFontFamilyFallback'];
+ if (!empty($variables['wcfFontFamilyGoogle'])) {
+ $variables['wcfFontFamily'] = '"' . $variables['wcfFontFamilyGoogle'] . '", ' . $variables['wcfFontFamily'];
+ }
+
// add options as SCSS variables
if (PACKAGE_ID) {
foreach (Option::getOptions() as $constantName => $option) {
// sets default text shadows depending on background color
@mixin textShadow($backgroundColor) {
@if (lightness($backgroundColor) >= 40) {
- text-shadow: 0 1px 0 $wcfTextShadowDarkColor;
+ text-shadow: 0 1px 0 $wcfTextShadowDark;
}
@else {
- text-shadow: 0 -1px 0 $wcfTextShadowLightColor;
+ text-shadow: 0 -1px 0 $wcfTextShadowLight;
}
}
padding: 20px 0;
&:not(:last-child) {
- border-bottom: 1px solid $wcfContentBorder;
+ // TODO: border-bottom: 1px solid $wcfContentBorder;
}
&.showMore {
}
> legend {
- border-bottom: 1px solid $wcfContentBorder;
+ // TODO: border-bottom: 1px solid $wcfContentBorder;
padding-bottom: 5px;
}
}
}
> h1 {
- border-bottom: 1px solid $wcfContentBorder;
+ // TODO: border-bottom: 1px solid $wcfContentBorder;
padding-bottom: 5px;
}
}
}
&[disabled] {
- background-color: $wcfInputBackgroundInactive !important;
- border-color: $wcfInputBorderInactive !important;
- color: $wcfInputTextInactive !important;
+ background-color: $wcfInputDisabledBackground !important;
+ border-color: $wcfInputDisabledBorder !important;
+ color: $wcfInputDisabledText !important;
}
}
flex-wrap: wrap;
> dt {
- color: $wcfDimmedColor;
+ color: $wcfContentDimmedText;
flex: 0 0 60%;
margin-left: 5px;
overflow: hidden;
}
> dd {
- flex: 0 0 35%;
+ flex: 0 0 auto;
+ width: calc(40% - 5px); /* IE work-around */
+
overflow: hidden;
text-align: right;
text-overflow: ellipsis;
&:not(.plain) > dd {
> small:not(.innerError) {
- color: $wcfDimmedColor;
+ color: $wcfContentDimmedText;
display: block;
margin-top: 5px;
}
/* CONTENT AREA */
.boxHeadline {
- border-bottom: 1px solid $wcfContentBorder;
+ // TODO: border-bottom: 1px solid $wcfContentBorder;
color: $wcfContentHeadlineText;
margin-bottom: 30px;
padding-bottom: 10px;
.navigation {
- background-color: $wcfHeaderNavigationBackground;
- color: $wcfHeaderNavigationText;
+ background-color: $wcfNavigationBackground;
+ color: $wcfNavigationText;
flex: 0 auto;
padding: 5px 0;
z-index: 25;
}
.icon {
- color: $wcfHeaderNavigationText;
+ color: $wcfNavigationText;
}
a {
- color: $wcfHeaderNavigationLink;
+ color: $wcfNavigationLink;
&:hover {
- color: $wcfHeaderNavigationLinkActive;
+ color: $wcfNavigationLinkActive;
}
}
}
margin-right: $wcfGapMedium;
}
- &::before {
- border-top: 1px solid $wcfMenuBorder;
- content: "";
- display: block;
- transition: width .12s ease-out;
- width: 0;
- }
-
- &:hover::before {
- width: 100%;
- }
-
> a {
transition: color .2s linear;
text-decoration: none;
&.active > a,
> a:hover {
- background-color: $wcfMenuContentBackgroundActive;
- color: $wcfMenuContentLinkActive;
+ background-color: $wcfHeaderMenuBackgroundActive;
+ color: $wcfHeaderMenuLinkActive;
text-decoration: none;
}
&:focus,
&:hover {
- background-color: $wcfHeaderSearchBoxBackgroundAccent;
+ background-color: $wcfHeaderSearchBoxBackgroundActive;
color: $wcfHeaderSearchBoxTextActive;
}
}
.sidebar {
background-color: $wcfSidebarBackground;
- color: $wcfSidebarBoxText;
+ color: $wcfSidebarText;
> div,
> fieldset,
> section {
- background-color: $wcfSidebarBoxBackground;
+ background-color: $wcfSidebarBackground;
border-radius: 3px;
padding: 20px;
- &:after {
+ &::after {
clear: both;
content: "";
display: block;
height: 0;
}
-
- & + * {
- margin-top: 30px;
- }
}
> div {
section > h1,
fieldset > legend {
- @extend .wcfFontLarge;
-
- color: $wcfSidebarBoxHeadlineText;
+ color: $wcfSidebarHeadlineText;
margin-bottom: 10px;
+ @extend .wcfFontHeadline;
+
> a {
- color: $wcfSidebarBoxHeadlineLink;
+ color: $wcfSidebarHeadlineLink;
> .icon {
- color: $wcfSidebarBoxHeadlineLink;
+ color: $wcfSidebarHeadlineLink;
}
&:hover {
- color: $wcfSidebarBoxHeadlineLinkActive;
+ color: $wcfSidebarHeadlineLinkActive;
> .icon {
- color: $wcfSidebarBoxHeadlineLinkActive;
+ color: $wcfSidebarHeadlineLinkActive;
}
}
}
}
a {
- color: $wcfSidebarBoxLink;
+ color: $wcfSidebarLink;
> .icon {
- color: $wcfSidebarBoxLink;
+ color: $wcfSidebarLink;
}
&:hover {
- color: $wcfSidebarBoxLinkActive;
+ color: $wcfSidebarLinkActive;
> .icon {
- color: $wcfSidebarBoxLinkActive;
+ color: $wcfSidebarLinkActive;
}
}
}
margin-right: 10px;
&:after {
- color: $wcfHeaderText;
+ color: $wcfNavigationText;
content: "/";
}
}
> a {
- color: $wcfHeaderLink;
+ color: $wcfNavigationLink;
opacity: .8;
text-decoration: none;
transition: opacity .2s linear;
&:hover {
- color: $wcfHeaderLinkActive;
+ color: $wcfNavigationLinkActive;
opacity: 1;
}
}
> li {
&:not(:last-child) {
- border-right: 1px solid $wcfContentBorder;
+ // TODO: border-right: 1px solid $wcfContentBorder;
margin-right: 0;
}
}
.commentResponse {
- border-top: 1px solid $wcfContentBorder;
+ // TODO: border-top: 1px solid $wcfContentBorder;
padding: 10px 0;
}
.commentOptionContainer {
- border-top: 1px solid $wcfContentBorder;
+ // TODO: border-top: 1px solid $wcfContentBorder;
padding-top: 10px;
}
.dialogOverlay {
+ align-items: flex-start;
background-color: transparent;
bottom: 0;
+ display: flex;
+ justify-content: center;
left: 0;
+ padding: 100px 0;
position: fixed;
right: 0;
top: 0;
.dialogContainer {
border: 1px solid rgb(52, 152, 219);
box-shadow: 0 1px 15px 0 rgba(0, 0, 0, .3);
- left: 50%;
max-height: 80%;
max-width: 80%;
min-width: 400px;
- position: absolute;
- top: 10%;
- transform: translateX(-50%);
will-change: opacity, transform;
z-index: 200;
> header {
background-color: $wcfContentBackground;
- border-bottom: 1px solid $wcfContentBorder;
+ // TODO: border-bottom: 1px solid $wcfContentBorder;
color: $wcfContentHeadlineText;
display: flex;
padding: 10px 20px;
.dialogFormSubmit {
background-color: $wcfContentBackground;
- border-top: 1px solid $wcfContentBorder;
+ // TODO: border-top: 1px solid $wcfContentBorder;
bottom: 0;
left: 0;
padding: 10px;
&.button {
border-right-width: 0;
- border-radius: $wcfInputBorderRadius 0 0 $wcfInputBorderRadius;
+ border-radius: 3px 0 0 3px;
}
span {
&.dropdownNavigationItem,
&.active {
background-color: $wcfDropdownBackgroundActive;
- color: $wcfDropdownTextActive;
+ color: $wcfDropdownLinkActive;
- @include textShadow($wcfDropdownTextActive);
+ @include textShadow($wcfDropdownLinkActive);
}
&.dropdownDivider {
- border-top: 1px solid $wcfDropdownBorderAccent;
+ border-top: 1px solid $wcfDropdownBorderInner;
margin: 3px 0;
}
.messageList {
- border: 1px solid $wcfContentBackgroundAccent;
+ border: 1px solid $wcfSidebarBackground;
border-width: 1px 0;
margin: 30px 0;
padding: 40px 0;
&:not(:first-child) {
- border-top: 1px solid $wcfContentBackgroundAccent;
+ border-top: 1px solid $wcfSidebarBackground;
}
}
}
/* sidebar */
.messageSidebar {
align-self: flex-start;
- background-color: $wcfContentBackgroundAccent;
+ background-color: $wcfSidebarBackground;
border-radius: 3px;
- color: $wcfContentTextAccent;
+ color: $wcfSidebarText;
flex: 0 0 170px;
padding: 20px;
position: relative;
text-align: center;
a {
- color: $wcfContentLinkAccent;
+ color: $wcfSidebarLink;
&:hover {
- color: $wcfContentLinkAccentActive;
+ color: $wcfSidebarLinkActive;
}
}
margin-top: 25px;
&:before {
- border-top: 2px solid $wcfContentBorderAccent;
+ // TODO: border-top: 2px solid $wcfContentBorderAccent;
content: "";
left: 0;
margin-top: -10px;
opacity: 1;
}
+ /*
+ TODO
&.messageDisabled {
color: $wcfDisabledColor;
color: $wcfDisabledColor;
}
}
+ */
+ /*
+ TODO
&.messageDeleted {
color: $wcfDeletedColor;
color: $wcfDeletedColor;
}
}
+ */
.columnSubject .statusDisplay .pageNavigation {
opacity: 0;
&.new .columnAvatar > div {
&::after {
- color: $wcfLinkColor;
+ color: $wcfContentLink;
content: "\f069";
font-family: FontAwesome;
font-weight: normal !important;
top: -4px;
right: -2px;
- @include textShadow($wcfContainerBackgroundColor);
+ @include textShadow($wcfContentLink);
}
}
}
word-wrap: normal;
> div > div > small {
- color: $wcfDimmedColor;
+ // TODO: color: $wcfDimmedColor;
}
}
.re-gallery:before { content: "\e61f"; }
.redactor-box {
- border: 1px solid $wcfContentBorder;
+ // TODO: border: 1px solid $wcfContentBorder;
border-radius: 3px 3px 0 0;
font-size: 0;
line-height: $wcfBaseLineHeight;
> .redactorAutosaveNotice {
background-color: $wcfContentBackground;
- border: 1px solid $wcfContentBorder;
+ // TODO: border: 1px solid $wcfContentBorder;
border-width: 1px 0 0 1px;
bottom: 0;
font-size: 1rem;
}
.redactor-toolbar {
- background: repeating-linear-gradient(0deg, $wcfContentBorder 0px, $wcfContentBorder 3%, $wcfContentBackground 3%, $wcfContentBackground 100%);
+ // TODO: background: repeating-linear-gradient(0deg, $wcfContentBorder 0px, $wcfContentBorder 3%, $wcfContentBackground 3%, $wcfContentBackground 100%);
background-size: 100% 31px;
> li {
&:last-of-type,
&.separator {
- border-right: 1px solid $wcfContentBorder;
+ // TODO: border-right: 1px solid $wcfContentBorder;
}
> a {
box-sizing: border-box;
- color: $wcfButtonColor;
+ color: $wcfButtonText;
display: block;
font-size: 14px;
height: 30px;
&.redactor-button-disabled,
&.redactor-button-disabled:before,
&.redactor-button-disabled > i:before {
- color: $wcfButtonTextInactive;
+ color: $wcfButtonDisabledText;
}
&:before {
visibility: visible;
&:before {
- border-color: $wcfTooltipBackgroundColor transparent;
+ // TODO: border-color: $wcfTooltipBackgroundColor transparent;
border-style: solid;
border-width: 0 5px 5px;
content: "";
cursor: pointer;
left: 50%;
- line-height: $wcfSmallFontSize;
+ // TODO: line-height: $wcfSmallFontSize;
margin-top: -13px;
opacity: 1;
top: 50%;
}
.redactor-link-tooltip {
- background-color: $wcfTooltipBackgroundColor;
+ // TODO: background-color: $wcfTooltipBackgroundColor;
border-radius: 6px;
- color: $wcfTooltipColor;
- font-size: $wcfSmallFontSize;
+ // TODO: color: $wcfTooltipColor;
+ // TODO: font-size: $wcfSmallFontSize;
padding: 5px 10px 7px;
position: absolute;
z-index: 800;
@include boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
> a {
- color: $wcfTooltipColor;
+ // TODO: color: $wcfTooltipColor;
}
}
.messageTabMenu {
- border: 1px solid $wcfContentBorder;
+ // TODO: border: 1px solid $wcfContentBorder;
border-top-width: 0;
border-radius: 0 0 3px 3px;
line-height: $wcfBaseLineHeight;
background-color: $wcfContentBackground;
border-width: 0;
border-radius: 0;
- border-top: 1px solid $wcfContentBorder;
+ // TODO: border-top: 1px solid $wcfContentBorder;
display: none;
padding: 15px 10px;
position: static;
> div {
> nav {
background-color: $wcfContentBackground;
- border-bottom: 1px solid $wcfContentBorder;
+ // TODO: border-bottom: 1px solid $wcfContentBorder;
margin: -14px -21px 14px -21px;
padding: $wcfGapTiny $wcfGapSmall;
&.active a,
&.active a:hover {
- color: $wcfButtonTextAccent;
+ color: $wcfButtonTextActive;
cursor: default;
}
display: inline-block;
> a {
- border-right: 1px solid $wcfContentBorder;
+ // TODO: border-right: 1px solid $wcfContentBorder;
border-bottom: 1px solid transparent;
color: $wcfButtonText;
display: block;
padding: 7px 14px 8px 14px;
text-decoration: none;
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
+ @extend .userSelectNone;
&:hover {
color: $wcfContentLink;
-.tabularBox {
- > .content {
- border-width: 0;
+.tabularBox > .content {
+ border-width: 0;
+}
+
+.tabularList {
+ display: flex;
+ flex-direction: column;
+}
+
+.tabularListRow {
+ flex: 0 0 auto;
+ padding: 5px 0;
+
+ &.divider + li:not(.divider) {
+ border-top-color: $wcfContentBorderInner;
+ }
+}
+
+.tabularListRowHead {
+ border-bottom: 2px solid currentColor;
+ color: $wcfTabularBoxHeadline;
+
+ & + li {
+ border-top-width: 0;
}
+}
+
+.tabularListRow:not(.tabularListRowHead) {
+ border-top: 1px solid $wcfContentBorderInner;
+}
+
+.tabularListColumns {
+ align-items: center;
+ display: flex;
- .tabularList {
- background-color: $wcfContentTabularBackground;
- display: flex;
- flex-direction: column;
+ > li {
+ flex: 0 0 auto;
+ padding: 5px 10px;
+ }
+}
+
+.tabularListRowHead > .tabularListColumns > li {
+ > a {
+ color: $wcfTabularBoxHeadline;
+ display: block;
- > li {
- flex: 0 0 auto;
- padding: 5px 0;
-
- &.head {
- border-bottom: 2px solid $wcfContentTabularBorder;
-
- > ol > li {
- color: $wcfContentTabularLink;
-
- > a {
- color: $wcfContentTabularLink;
- display: block;
-
- @extend .wcfFontHeadline;
- }
-
- &.ASC > a,
- &.DESC > a {
- padding-right: 14px;
- position: relative;
-
- &:after {
- display: inline-block;
- font-family: FontAwesome;
- margin-left: 7px;
- position: absolute;
- }
- }
-
- &.ASC > a:after {
- content: $fa-var-caret-up;
- top: 1px;
- }
-
- &.DESC > a:after {
- content: $fa-var-caret-down;
- top: 2px;
- }
-
- &.active > a,
- > a:hover {
- color: $wcfContentTabularLinkActive;
- }
- }
-
- & + li {
- border-top-width: 0;
- }
- }
-
- &:not(.head) {
- border-top: 1px solid $wcfContentTabularBorderAccent;
- }
-
- &.divider + li:not(.divider) {
- border-top-color: $wcfContentTabularBorder;
- }
-
- > ol {
- align-items: center;
- display: flex;
-
- > li {
- flex: 0 0 auto;
- padding: 5px 10px;
- }
- }
+ @extend .wcfFontHeadline;
+ }
+
+ &.ASC > a,
+ &.DESC > a {
+ padding-right: 14px;
+ position: relative;
+
+ &:after {
+ display: inline-block;
+ font-family: FontAwesome;
+ margin-left: 7px;
+ position: absolute;
}
}
+
+ &.ASC > a:after {
+ content: $fa-var-caret-up;
+ top: 1px;
+ }
+
+ &.DESC > a:after {
+ content: $fa-var-caret-down;
+ top: 2px;
+ }
+
+ &.active > a,
+ > a:hover {
+ color: $wcfTabularBoxHeadlineActive;
+ }
}
.tabularBoxTitle {
}
&:not(:last-child) > td {
- border-bottom: 1px solid $wcfTabularBoxBorderInner;
+ // TODO: border-bottom: 1px solid $wcfTabularBoxBorderInner;
}
}
.balloonTooltip {
- background-color: $wcfTooltipBackgroundColor;
+ // TODO: background-color: $wcfTooltipBackgroundColor;
border-radius: 6px;
- color: $wcfTooltipColor;
+ // TODO: color: $wcfTooltipColor;
max-width: 300px;
opacity: 0;
padding: 5px 10px 7px;
@extend .wcfFontSmall;
> .elementPointer {
- border-color: $wcfTooltipBackgroundColor transparent;
+ // TODO: border-color: $wcfTooltipBackgroundColor transparent;
border-style: solid;
border-width: 0 5px 5px;
position: relative;
> section {
- background-color: $wcfContentBackgroundAccent;
+ // TODO: background-color: $wcfContentBackgroundAccent;
border-radius: 0;
- color: $wcfContentTextAccent;
+ // TODO: color: $wcfContentTextAccent;
a,
dd,
h1 {
- color: $wcfContentTextAccent;
+ // TODO: color: $wcfContentTextAccent;
}
&:first-child {
margin-top: 0;
&:before {
- border-top: 2px solid $wcfContentBorderAccent;
+ // TODO: border-top: 2px solid $wcfContentBorderAccent;
content: "";
left: 0;
margin-top: -15px;
margin-top: 25px;
&:before {
- border-top: 2px solid $wcfContentBorderAccent;
+ // TODO: border-top: 2px solid $wcfContentBorderAccent;
content: "";
left: 0;
margin-top: -10px;
> a {
background-color: transparent;
border-width: 0;
- color: $wcfContentTextAccent !important;
+ // TODO: color: $wcfContentTextAccent !important;
padding: 5px;
> .icon {
- color: $wcfContentTextAccent;
+ // TODO: color: $wcfContentTextAccent;
}
}
}
projects / GitHub / WoltLab / WCF.git / commitdiff