-<ul class="smileyList">
+<ul class="inlineList smileyList">
{foreach from=$smilies item=smiley}
<li><a title="{lang}{$smiley->smileyTitle}{/lang}" class="jsTooltip jsSmiley" data-smiley-code="{$smiley->smileyCode}" data-smiley-path="{$smiley->getURL()}"><img src="{$smiley->getURL()}" alt="{$smiley->smileyCode}" /></a></li>
{/foreach}
{if !$__microdata|isset}{assign var=__microdata value=true}{/if}
{hascontent}
- <nav class="breadcrumbs marginTop">
+ <nav class="breadcrumbs">
<ul>
{content}
{foreach from=$__wcf->getBreadcrumbs() item=$breadcrumb}
<li title="{$breadcrumb->getLabel()}"{if $__microdata} itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"{/if}>
- <a href="{$breadcrumb->getURL()}"{if $__microdata} itemprop="url"{/if}><span{if $__microdata} itemprop="title"{/if}>{$breadcrumb->getLabel()}</span></a> <span class="pointer"><span>»</span></span>
+ <a href="{$breadcrumb->getURL()}"{if $__microdata} itemprop="url"{/if}><span{if $__microdata} itemprop="title"{/if}>{$breadcrumb->getLabel()}</span></a>
</li>
{/foreach}
-<div class="container codeBox {$highlighter|get_class|substr:30|lcfirst}{if $lines > 10} minimized{/if}">
+<div class="codeBox collapsibleBbcode jsCollapsibleBbcode {$highlighter|get_class|substr:30|lcfirst}{if $lines > 10} collapsed{/if}">
<div>
<div>
<h3>{@$highlighter->getTitle()}{if $filename}: {$filename}{/if}</h3>
</div>
{if $lines > 10}
- <span class="codeBoxExpand jsButtonCodeBoxExpand">{lang}wcf.bbcode.button.showAll{/lang}</span>
+ <span class="toggleButton" data-title-collapse="{lang}wcf.bbcode.button.collapse{/lang}" data-title-expand="{lang}wcf.bbcode.button.showAll{/lang}">{lang}wcf.bbcode.button.showAll{/lang}</span>
{if !$__overlongCodeBoxSeen|isset}
{assign var='__overlongCodeBoxSeen' value=true}
<script data-relocate="true">
- $(function() {
- $('.jsButtonCodeBoxExpand').removeClass('jsButtonCodeBoxExpand').click(function() {
- $(this).parent().removeClass('minimized').end().remove();
- });
-
- // searching in a page causes Google Chrome to scroll
- // the code box if something inside it matches
- //
- // expand the box in this case, to:
- // a) Improve UX
- // b) Hide an ugly misplaced "show all" button
- $('.codeBox').on('scroll', function() {
- $(this).find('.codeBoxExpand').click();
- });
-
- // expand code boxes that are initially scrolled
- // this may happen due to someone linking to a specific line
- $('.codeBox').each(function() {
- if ($(this).scrollTop() != 0) {
- $(this).find('.codeBoxExpand').click();
- }
- });
+ require(['WoltLab/WCF/Bbcode/Collapsible'], function(BbcodeCollapsible) {
+ BbcodeCollapsible.observe();
});
</script>
{/if}
-<fieldset class="dashboardBox" data-box-name="{$box->boxName}">
- <legend>{if $titleLink}<a href="{$titleLink}">{lang}wcf.dashboard.box.{$box->boxName}{/lang}</a>{else}{lang}wcf.dashboard.box.{$box->boxName}{/lang}{/if}</legend>
+<section class="dashboardBox" data-box-name="{$box->boxName}">
+ <h1>{if $titleLink}<a href="{$titleLink}">{lang}wcf.dashboard.box.{$box->boxName}{/lang}</a>{else}{lang}wcf.dashboard.box.{$box->boxName}{/lang}{/if}</h1>
<div>
{@$template}
</div>
-</fieldset>
\ No newline at end of file
+</section>
\ No newline at end of file
-<fieldset class="dashboardBox dashboardBoxSignedInAs">
- <legend class="invisible">{lang}wcf.dashboard.box.{$box->boxName}{/lang}</legend>
+<section class="dashboardBox dashboardBoxSignedInAs">
+ <h1 class="invisible">{lang}wcf.dashboard.box.{$box->boxName}{/lang}</h1>
<div class="box96 framed">
{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(96)}
{include file='userInformationStatistics' user=$__wcf->user}
</div>
</div>
-</fieldset>
\ No newline at end of file
+</section>
\ No newline at end of file
{event name='contents'}
- {if $skipBreadcrumbs|empty}{include file='breadcrumbs' __microdata=false}{/if}
-
{if MODULE_WCF_AD && $__disableAds|empty}
{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.footer.content')}
{/if}
- </section>
+ </div>
{if $sidebarOrientation|isset && $sidebarOrientation == 'right'}
{@$__sidebar}
{/if}
</div>
+ </section>
+
+ <div id="pageFooterBoxes">
+ <div class="layoutFluid">
+ {hascontent}
+ <ul>
+ {content}{if !$footerBoxes|empty}{@$footerBoxes}{/if}{/content}
+ </ul>
+ {/hascontent}
+ </div>
</div>
-</div>
-
-<footer id="pageFooter" class="{if $__wcf->getStyleHandler()->getStyle()->getVariable('useFluidLayout')}layoutFluid{else}layoutFixed{/if} footer{if $sidebarOrientation|isset && $sidebar|isset} sidebarOrientation{@$sidebarOrientation|ucfirst}{if $sidebarOrientation == 'right' && $sidebarCollapsed} sidebarCollapsed{/if}{/if}">
- <div>
- <nav id="footerNavigation" class="navigation navigationFooter">
- {include file='footerMenu'}
-
- <ul class="navigationIcons">
- <li id="toTopLink" class="toTopLink"><a href="{$__wcf->getAnchor('top')}" title="{lang}wcf.global.scrollUp{/lang}" class="jsTooltip"><span class="icon icon16 icon-arrow-up"></span> <span class="invisible">{lang}wcf.global.scrollUp{/lang}</span></a></li>
- {event name='navigationIcons'}
- </ul>
-
- <ul class="navigationItems">
- {if SHOW_CLOCK}
- <li title="{lang}wcf.date.timezone.{@'/'|str_replace:'.':$__wcf->getUser()->getTimeZone()->getName()|strtolower}{/lang}"><p><span class="icon icon16 icon-time"></span> <span>{@TIME_NOW|plainTime}</span></p></li>
- {/if}
- {event name='navigationItems'}
- </ul>
- </nav>
+
+ {*include file='pageNavbarBottom'*}
+
+ {*<nav id="footerNavigation" class="navigation navigationFooter">
+ {include file='footerMenu'}
- <div class="footerContent">
- {event name='footerContents'}
-
- {if ENABLE_BENCHMARK}{include file='benchmark'}{/if}
+ <ul class="navigationIcons">
+ <li id="toTopLink" class="toTopLink"><a href="{$__wcf->getAnchor('top')}" title="{lang}wcf.global.scrollUp{/lang}" class="jsTooltip"><span class="icon icon16 icon-arrow-up"></span> <span class="invisible">{lang}wcf.global.scrollUp{/lang}</span></a></li>
+ {event name='navigationIcons'}
+ </ul>
+
+ <ul class="navigationItems">
+ {if SHOW_CLOCK}
+ <li title="{lang}wcf.date.timezone.{@'/'|str_replace:'.':$__wcf->getUser()->getTimeZone()->getName()|strtolower}{/lang}"><p><span class="icon icon16 icon-time"></span> <span>{@TIME_NOW|plainTime}</span></p></li>
+ {/if}
+ {event name='navigationItems'}
+ </ul>
+ </nav>*}
+
+ <footer id="pageFooter" class="footer{if $sidebarOrientation|isset && $sidebar|isset} sidebarOrientation{@$sidebarOrientation|ucfirst}{if $sidebarOrientation == 'right' && $sidebarCollapsed} sidebarCollapsed{/if}{/if}">
+ <div class="layoutFluid">
+ <div class="footerContent">
+ {event name='footerContents'}
+
+ {if ENABLE_BENCHMARK}{include file='benchmark'}{/if}
+
+ {event name='copyright'}
+ </div>
- {event name='copyright'}
+ {if MODULE_WCF_AD && $__disableAds|empty}
+ {@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.footer.bottom')}
+ {/if}
</div>
-
- {if MODULE_WCF_AD && $__disableAds|empty}
- {@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.footer.bottom')}
- {/if}
- </div>
-</footer>
+ </footer>
+</div>
{event name='footer'}
{event name='metaTags'}
<!-- Stylesheets -->
+<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
{@$__wcf->getStyleHandler()->getStylesheet()}
{event name='stylesheets'}
<a id="top"></a>
-{event name='beforePageHeader'}
-
-<header id="pageHeader" class="{if $__wcf->getStyleHandler()->getStyle()->getVariable('useFluidLayout')}layoutFluid{else}layoutFixed{/if}{if $sidebarOrientation|isset && $sidebar|isset} sidebarOrientation{@$sidebarOrientation|ucfirst}{if $sidebarOrientation == 'right' && $sidebarCollapsed} sidebarCollapsed{/if}{/if}">
- <div>
- <nav id="topMenu" class="userPanel">
- <div class="{if $__wcf->getStyleHandler()->getStyle()->getVariable('useFluidLayout')}layoutFluid{else}layoutFixed{/if}">
- {hascontent}
- <ul class="userPanelItems">
- {content}
- {include file='userPanel'}
- {event name='topMenu'}
- {/content}
- </ul>
- {/hascontent}
-
- {include file='searchArea'}
- </div>
- </nav>
-
- <div id="logo" class="logo">
- {if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.logo')}{/if}
-
- <a href="{link}{/link}">
- {if $__wcf->getStyleHandler()->getStyle()->getPageLogo()}
- <img src="{$__wcf->getStyleHandler()->getStyle()->getPageLogo()}" alt="" />
- {/if}
- {event name='headerLogo'}
- </a>
- </div>
-
- {event name='headerContents'}
-
- {include file='mainMenu'}
-
- {event name='afterMainMenu'}
-
- <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>
-</header>
-
-{event name='afterPageHeader'}
-
-<div id="main" class="{if $__wcf->getStyleHandler()->getStyle()->getVariable('useFluidLayout')}layoutFluid{else}layoutFixed{/if}{if $sidebarOrientation|isset && $sidebar|isset} sidebarOrientation{@$sidebarOrientation|ucfirst}{if $sidebarOrientation == 'right' && $sidebarCollapsed} sidebarCollapsed{/if}{/if}">
- <div>
- <div>
+<div id="pageContainer" class="pageContainer">
+ {event name='beforePageHeader'}
+
+ {include file='pageHeader'}
+
+ {event name='afterPageHeader'}
+
+ {include file='pageNavbarTop'}
+
+ <section id="main" class="main" role="main">
+ <div class="{if $__wcf->getStyleHandler()->getStyle()->getVariable('useFluidLayout')}layoutFluid{else}layoutFixed{/if}">
{capture assign='__sidebar'}
{if $sidebar|isset}
<aside class="sidebar"{if $sidebarOrientation|isset && $sidebarOrientation == 'right'} data-is-open="{if $sidebarCollapsed}false{else}true{/if}" data-sidebar-name="{$sidebarName}"{/if}>
- <div>
- {if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.sidebar.top')}{/if}
-
- {event name='sidebarBoxesTop'}
-
- {@$sidebar}
-
- {event name='sidebarBoxesBottom'}
-
- {if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.sidebar.bottom')}{/if}
- </div>
+ {if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.sidebar.top')}{/if}
+
+ {event name='sidebarBoxesTop'}
+
+ {@$sidebar}
+
+ {event name='sidebarBoxesBottom'}
+
+ {if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.sidebar.bottom')}{/if}
</aside>
{if $sidebarOrientation|isset && $sidebarOrientation == 'right'}
{@$__sidebar}
{/if}
- <section id="content" class="content">
+ <div id="content" class="content">
{if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.header.content')}{/if}
{event name='contents'}
-
- {if $skipBreadcrumbs|empty}{include file='breadcrumbs'}{/if}
-
<nav id="mainMenu" class="mainMenu jsMobileNavigation" data-button-label="{lang}wcf.page.mainMenu{/lang}">
<ul>
{foreach from=$__wcf->getPageMenu()->getMenuItems('header') item=menuItem}
- <li{if $__wcf->getPageMenu()->getActiveMenuItem() == $menuItem->menuItem} class="active"{/if} data-menu-item="{$menuItem->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 && $__wcf->getPageMenu()->getActiveMenuItem() == $menuItem->menuItem}
- <ul class="invisible">
- {foreach from=$__wcf->getPageMenu()->getMenuItems($menuItem->menuItem) item=subMenuItem}
- <li{if $__wcf->getPageMenu()->getActiveMenuItem(1) == $subMenuItem->menuItem} class="active"{/if}><a href="{$subMenuItem->getProcessor()->getLink()}"><span>{lang}{$subMenuItem->menuItem}{/lang}</span></a>{if $subMenuItem->getProcessor()->getNotifications()} <span class="badge badgeUpdate">{#$subMenuItem->getProcessor()->getNotifications()}</span>{/if}</li>
- {/foreach}
- {event name='items'}
+ {if $__wcf->getPageMenu()->getMenuItems($menuItem->menuItem)|count > 0}
+ <ul class="subMenu">
+ {include file='mainMenuSubMenu'}
</ul>
{/if}
</li>
-{foreach from=$__wcf->getPageMenu()->getMenuItems('header') item=menuItem}
- {if $__wcf->getPageMenu()->getMenuItems($menuItem->menuItem)|count > 0 && $__wcf->getPageMenu()->getActiveMenuItem() == $menuItem->menuItem}
- <ul class="navigationMenuItems">
- {foreach from=$__wcf->getPageMenu()->getMenuItems($menuItem->menuItem) item=subMenuItem}
- <li{if $__wcf->getPageMenu()->getActiveMenuItem(1) == $subMenuItem->menuItem} class="active"{/if} data-menu-item="{$subMenuItem->menuItem}"><a href="{$subMenuItem->getProcessor()->getLink()}"><span>{lang}{$subMenuItem->menuItem}{/lang}</span></a>{if $subMenuItem->getProcessor()->getNotifications()} <span class="badge badgeUpdate">{#$subMenuItem->getProcessor()->getNotifications()}</span>{/if}</li>
- {/foreach}
- {event name='items'}
- </ul>
- {/if}
-{/foreach}
\ No newline at end of file
+{foreach from=$__wcf->getPageMenu()->getMenuItems($menuItem->menuItem) item=subMenuItem}
+ <li{if $__wcf->getPageMenu()->getActiveMenuItem(1) == $subMenuItem->menuItem} class="active"{/if} data-menu-item="{$subMenuItem->menuItem}"><a href="{$subMenuItem->getProcessor()->getLink()}"><span>{lang}{$subMenuItem->menuItem}{/lang}</span></a>{if $subMenuItem->getProcessor()->getNotifications()} <span class="badge badgeUpdate">{#$subMenuItem->getProcessor()->getNotifications()}</span>{/if}</li>
+{/foreach}
+
+{event name='items'}
{assign var=__messageSidebarJavascript value=true}
{/if}
-<aside class="messageSidebar{if MESSAGE_SIDEBAR_ENABLE_ONLINE_STATUS && $userProfile->isOnline()} userOnline{/if} {if $userProfile->userID}member{else}guest{/if}"{if $userProfile->userID} itemscope="itemscope" itemtype="http://data-vocabulary.org/Person"{/if}>
- <div>
+<aside class="messageSidebar{if MESSAGE_SIDEBAR_ENABLE_ONLINE_STATUS && $userProfile->isOnline()} userOnline{/if} {if $userProfile->userID}member{else}guest{/if}"{if $userProfile->userID} itemscope itemtype="http://data-vocabulary.org/Person"{/if}>
+ <div class="messageAuthor">
{if $userProfile->userID}
{assign var='username' value=$userProfile->username}
- <header>
- <h2 class="username">
- <a href="{link controller='User' object=$userProfile->getDecoratedObject()}{/link}" class="userLink" data-user-id="{@$userProfile->userID}" rel="author">
- <span itemprop="name">{if MESSAGE_SIDEBAR_ENABLE_USER_ONLINE_MARKING}{@$userProfile->getFormattedUsername()}{else}{$username}{/if}</span>
- </a>
- {if $userProfile->banned}<span class="icon icon16 fa-lock jsTooltip jsUserBanned" title="{lang user=$userProfile}wcf.user.banned{/lang}"></span>{/if}
- </h2>
-
- {event name='header'}
- </header>
-
{if MESSAGE_SIDEBAR_ENABLE_AVATAR}
{if $userProfile->getAvatar()}
<div class="userAvatar">
{capture assign='__userAvatar'}{@$userProfile->getAvatar()->getImageTag(128)}{/capture}
<a href="{link controller='User' object=$userProfile->getDecoratedObject()}{/link}" class="framed">{@'<img'|str_replace:'<img itemprop="photo"':$__userAvatar}</a>
- {if MESSAGE_SIDEBAR_ENABLE_ONLINE_STATUS && $userProfile->isOnline()}<span class="badge green badgeOnline" title="{lang}wcf.user.online.title{/lang}">{lang}wcf.user.online{/lang}</span>{/if}
+ {* @TODO *}
+ {*if MESSAGE_SIDEBAR_ENABLE_ONLINE_STATUS && $userProfile->isOnline()}<span class="badge green badgeOnline" title="{lang}wcf.user.online.title{/lang}">{lang}wcf.user.online{/lang}</span>{/if*}
</div>
{/if}
{/if}
+ <p class="messageAuthorContainer">
+ <a href="{link controller='User' object=$userProfile->getDecoratedObject()}{/link}" class="username userLink" data-user-id="{@$userProfile->userID}" rel="author">
+ <span itemprop="name">{if MESSAGE_SIDEBAR_ENABLE_USER_ONLINE_MARKING}{@$userProfile->getFormattedUsername()}{else}{$username}{/if}</span>
+ </a>
+ {if $userProfile->banned}<span class="icon icon16 fa-lock jsTooltip jsUserBanned" title="{lang user=$userProfile}wcf.user.banned{/lang}"></span>{/if}
+
+ {event name='header'}
+ </p>
+
{if MODULE_USER_RANK && MESSAGE_SIDEBAR_ENABLE_RANK}
{if $userProfile->getUserTitle()}
<div class="userTitle">
{/if}
{/if}
{else}
- <header>
- <h2 class="username">
- <span>{@$userProfile->username}</span>
- </h2>
+ <p class="messageAuthor">
+ <span class="username">{$userProfile->username}</span>
<div class="userTitle">
<p class="badge">{lang}wcf.user.guest{/lang}</p>
</div>
{event name='header'}
- </header>
+ </p>
{/if}
-
- {event name='beforeCredits'}
-
- {if $userProfile->userID}
- {hascontent}
- <div class="userCredits">
- <dl class="plain dataList">
- {content}
- {if MODULE_LIKE && MESSAGE_SIDEBAR_ENABLE_LIKES_RECEIVED && $userProfile->likesReceived}
- <dt><a href="{link controller='User' object=$userProfile}{/link}#likes" class="jsTooltip" title="{lang user=$userProfile}wcf.like.showLikesReceived{/lang}">{lang}wcf.like.likesReceived{/lang}</a></dt>
- <dd>{#$userProfile->likesReceived}</dd>
- {/if}
-
- {if MESSAGE_SIDEBAR_ENABLE_ACTIVITY_POINTS && $userProfile->activityPoints}
- <dt><a href="#" class="activityPointsDisplay jsTooltip" title="{lang user=$userProfile}wcf.user.activityPoint.showActivityPoints{/lang}" data-user-id="{@$userProfile->userID}">{lang}wcf.user.activityPoint{/lang}</a></dt>
- <dd>{#$userProfile->activityPoints}</dd>
- {/if}
- {event name='userCredits'}
- {if MESSAGE_SIDEBAR_USER_OPTIONS && $userProfile->isAccessible('canViewProfile')}
- {assign var='__sidebarUserOptions' value=','|explode:MESSAGE_SIDEBAR_USER_OPTIONS}
- {foreach from=$__sidebarUserOptions item='__sidebarUserOption'}
- {if $userProfile->getUserOption($__sidebarUserOption)}
- {assign var='__formattedUserOption' value=$userProfile->getFormattedUserOption($__sidebarUserOption)}
- {if $__formattedUserOption}
- <dt>{lang}wcf.user.option.{$__sidebarUserOption}{/lang}</dt>
- <dd{if $__sidebarUserOption == 'location'} itemprop="locality"{/if}>{@$__formattedUserOption}</dd>
- {/if}
- {/if}
- {/foreach}
- {/if}
- {/content}
- </dl>
- </div>
- {/hascontent}
- {/if}
-
- {event name='afterCredits'}
</div>
+
+ {event name='beforeCredits'}
+
+ {if $userProfile->userID}
+ {hascontent}
+ <div class="userCredits">
+ <dl class="plain dataList">
+ {content}
+ {if MODULE_LIKE && MESSAGE_SIDEBAR_ENABLE_LIKES_RECEIVED && $userProfile->likesReceived}
+ <dt><a href="{link controller='User' object=$userProfile}{/link}#likes" class="jsTooltip" title="{lang user=$userProfile}wcf.like.showLikesReceived{/lang}">{lang}wcf.like.likesReceived{/lang}</a></dt>
+ <dd>{#$userProfile->likesReceived}</dd>
+ {/if}
+
+ {if MESSAGE_SIDEBAR_ENABLE_ACTIVITY_POINTS && $userProfile->activityPoints}
+ <dt><a href="#" class="activityPointsDisplay jsTooltip" title="{lang user=$userProfile}wcf.user.activityPoint.showActivityPoints{/lang}" data-user-id="{@$userProfile->userID}">{lang}wcf.user.activityPoint{/lang}</a></dt>
+ <dd>{#$userProfile->activityPoints}</dd>
+ {/if}
+ {event name='userCredits'}
+ {if MESSAGE_SIDEBAR_USER_OPTIONS && $userProfile->isAccessible('canViewProfile')}
+ {assign var='__sidebarUserOptions' value=','|explode:MESSAGE_SIDEBAR_USER_OPTIONS}
+ {foreach from=$__sidebarUserOptions item='__sidebarUserOption'}
+ {if $userProfile->getUserOption($__sidebarUserOption)}
+ {assign var='__formattedUserOption' value=$userProfile->getFormattedUserOption($__sidebarUserOption)}
+ {if $__formattedUserOption}
+ <dt>{lang}wcf.user.option.{$__sidebarUserOption}{/lang}</dt>
+ <dd{if $__sidebarUserOption == 'location'} itemprop="locality"{/if}>{@$__formattedUserOption}</dd>
+ {/if}
+ {/if}
+ {/foreach}
+ {/if}
+ {/content}
+ </dl>
+ </div>
+ {/hascontent}
+ {/if}
+
+ {event name='afterCredits'}
</aside>
--- /dev/null
+<header id="pageHeader" class="header">
+ <div>
+ <div class="{if $__wcf->getStyleHandler()->getStyle()->getVariable('useFluidLayout')}layoutFluid{else}layoutFixed{/if}">
+ {include file='pageLogo'}
+
+ {include file='searchArea'}
+
+ {include file='mainMenu'}
+
+ {include file='userPanel'}
+ </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');
+
+ function stickyHeader() {
+ header.classList[(document.body.scrollTop > 50) ? 'add' : 'remove']('sticky');
+ }
+
+ stickyHeader();
+ window.addEventListener('scroll', stickyHeader);
+ </script>
+</header>
\ No newline at end of file
--- /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
+<div class="navigation navigationBottom">
+ <div class="layoutFluid">
+ {if $skipBreadcrumbs|empty}{include file='breadcrumbs'}{/if}
+
+ <ul class="navigationIcons">
+ <li id="toTopLink" class="toTopLink"><a href="{$__wcf->getAnchor('top')}" title="{lang}wcf.global.scrollUp{/lang}" class="jsTooltip"><span class="icon icon16 icon-arrow-up"></span> <span class="invisible">{lang}wcf.global.scrollUp{/lang}</span></a></li>
+ {event name='navigationIcons'}
+ </ul>
+ </div>
+</div>
--- /dev/null
+<div class="navigation navigationTop">
+ <div class="layoutFluid">
+ {if $skipBreadcrumbs|empty}{include file='breadcrumbs'}{/if}
+
+ <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>
+ </div>
+</div>
{/if}
<div class="container containerPadding pollContainer" data-poll-id="{@$poll->pollID}" data-can-vote="{if $poll->canVote()}1{else}0{/if}" data-can-view-result="{if $poll->canSeeResult()}1{else}0{/if}" data-can-view-participants="{if $poll->canViewParticipants()}true{else}false{/if}" data-in-vote="{if $poll->canVote() && !$poll->isParticipant()}1{else}0{/if}" data-question="{$poll->question}" data-max-votes="{@$poll->maxVotes}">
- <fieldset>
- <legend>{$poll->question} <span class="badge jsTooltip" title="{lang}wcf.poll.totalVotes{/lang}">{#$poll->votes}</span></legend>
+ <section>
+ <h1>{$poll->question} <span class="badge jsTooltip" title="{lang}wcf.poll.totalVotes{/lang}">{#$poll->votes}</span></h1>
<div class="pollInnerContainer">
{if !$__wcf->getUser()->userID}
{event name='pollData'}
</div>
- </fieldset>
+ </section>
{hascontent}
<div class="formSubmit jsOnly">
-{if $quoteAuthorObject}
-<div class="quoteBoxAuthor">
- <div class="quoteAuthorAvatar"><a href="{link controller='User' object=$quoteAuthorObject}{/link}" class="userLink framed" data-user-id="{@$quoteAuthorObject->userID}">{@$quoteAuthorObject->getAvatar()->getImageTag(64)}</a></div>
-{/if}
- <blockquote class="quoteBox container containerPadding{if !$quoteAuthorObject} quoteBoxSimple{/if}"{if $quoteLink} cite="{$quoteLink}"{/if}>
- {if $quoteAuthor}
- <header>
- <h3>
- {if $quoteLink}
- <a href="{@$quoteLink}"{if $isExternalQuoteLink} class="externalURL"{if EXTERNAL_LINK_REL_NOFOLLOW} rel="nofollow"{/if}{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}{/if}>{lang}wcf.bbcode.quote.title{/lang}</a>
- {else}
- {lang}wcf.bbcode.quote.title{/lang}
- {/if}
- </h3>
- </header>
- {/if}
-
- <div>
- {@$content}
- </div>
- </blockquote>
-{if $quoteAuthorObject}
-</div>
-{/if}
+<blockquote class="quoteBox container containerPadding{if !$quoteAuthorObject} quoteBoxSimple{/if}"{if $quoteLink} cite="{$quoteLink}"{/if}>
+ <header class="quoteBoxHeader">
+ <span class="quoteBoxIcon">
+ {if $quoteAuthorObject}
+ <a href="{link controller='User' object=$quoteAuthorObject}{/link}" class="userLink framed" data-user-id="{@$quoteAuthorObject->userID}">{@$quoteAuthorObject->getAvatar()->getImageTag(32)}</a>
+ {else}
+ <span class="icon icon24 fa-quote-left"></span>
+ {/if}
+ </span>
+ <span class="quoteBoxTitle">
+ {if $quoteAuthor}
+ {if $quoteLink}
+ <a href="{@$quoteLink}"{if $isExternalQuoteLink} class="externalURL"{if EXTERNAL_LINK_REL_NOFOLLOW} rel="nofollow"{/if}{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}{/if}>{lang}wcf.bbcode.quote.title{/lang}</a>
+ {else}
+ {lang}wcf.bbcode.quote.title{/lang}
+ {/if}
+ {else}
+ {lang}wcf.bbcode.quote{/lang}
+ {/if}
+ </span>
+ </header>
+
+ <div>
+ {@$content}
+ </div>
+</blockquote>
{event name='settings'}
-<aside id="search" class="searchBar dropdown" data-disable-auto-focus="true">
+<div id="search" class="searchBar dropdown" data-disable-auto-focus="true">
<form method="post" action="{@$__searchFormLink}">
<input type="search" name="q" placeholder="{@$__searchInputPlaceholder}" autocomplete="off" required="required" value="{if $query|isset}{$query}{/if}" class="dropdownToggle" data-toggle="search" />
{@$__searchHiddenInputFields}
{@SECURITY_TOKEN_INPUT_TAG}
</form>
-</aside>
+</div>
{if !OFFLINE || $__wcf->session->getPermission('admin.general.canViewPageDuringOfflineMode')}
<script data-relocate="true">
<div class="messageShareButtons jsOnly">
- <ul>
+ <ul class="inlineList">
<li class="jsShareFacebook">
<a>
<span class="icon icon32 icon-facebook-sign jsTooltip" title="{lang}wcf.message.share.facebook{/lang}"></span>
</div>
{foreach from=$objects->getTeams() item=team}
- <header class="boxHeadline boxSubHeadline">
- <h2 id="group{@$team->groupID}">{$team->groupName|language} <span class="badge">{#$team->getMembers()|count}</span></h2>
- <p>{$team->groupDescription|language}</p>
- </header>
+ <section>
+ <div class="containerHeadline">
+ <h3 id="group{@$team->groupID}">{$team->groupName|language} <span class="badge">{#$team->getMembers()|count}</span></h3>
+ <p>{$team->groupDescription|language}</p>
+ </div>
- <div class="container marginTop">
<ol class="containerList userList">
{foreach from=$team->getMembers() item=user}
{include file='userListItem'}
{/foreach}
</ol>
- </div>
+ </section>
{/foreach}
<div class="contentNavigation">
</noscript>
</head>
-<body id="tpl{$templateName|ucfirst}" data-template="{$templateName}" data-application="{$templateNameApplication}">
+<body id="tpl{$templateName|ucfirst}" data-template="{$templateName}" data-application="{$templateNameApplication}" class="userProfile">
{include file='userSidebar' assign='sidebar'}
{include file='header' sidebarOrientation='left'}
-<header class="boxHeadline userHeadline"
- {if $isAccessible}
- data-object-id="{@$user->userID}"
- {if $__wcf->session->getPermission('admin.user.canBanUser')}
- data-banned="{@$user->banned}"
- {/if}
- {if $__wcf->session->getPermission('admin.user.canDisableAvatar')}
- data-disable-avatar="{@$user->disableAvatar}"
- {/if}
- {if $__wcf->session->getPermission('admin.user.canDisableSignature')}
- data-disable-signature="{@$user->disableSignature}"
- {/if}
- {/if}
->
- <span class="framed invisible">{@$user->getAvatar()->getImageTag(48)}</span>
-
- <h1>{$user->username}{if $user->banned} <span class="icon icon16 fa-lock jsTooltip jsUserBanned" title="{lang}wcf.user.banned{/lang}"></span>{/if}{if MODULE_USER_RANK}
- {if $user->getUserTitle()}
- <span class="badge userTitleBadge{if $user->getRank() && $user->getRank()->cssClassName} {@$user->getRank()->cssClassName}{/if}">{$user->getUserTitle()}</span>
- {/if}
- {if $user->getRank() && $user->getRank()->rankImage}
- <span class="userRankImage">{@$user->getRank()->getImage()}</span>
- {/if}
- {/if}</h1>
-
- <ul class="dataList">
- {if $user->isVisibleOption('gender') && $user->gender}<li>{lang}wcf.user.gender.{if $user->gender == 1}male{else}female{/if}{/lang}</li>{/if}
- {if $user->isVisibleOption('birthday') && $user->getAge()}<li>{@$user->getAge()}</li>{/if}
- {if $user->isVisibleOption('location') && $user->location}<li>{lang}wcf.user.membersList.location{/lang}</li>{/if}
- {if $user->getOldUsername()}<li>{lang}wcf.user.profile.oldUsername{/lang}</li>{/if}
- <li>{lang}wcf.user.membersList.registrationDate{/lang}</li>
- {event name='userDataRow1'}
- </ul>
- {if $user->canViewOnlineStatus() && $user->getLastActivityTime()}
- <dl class="plain inlineDataList">
- <dt>{lang}wcf.user.usersOnline.lastActivity{/lang}</dt>
- <dd>{@$user->getLastActivityTime()|time}{if $user->getCurrentLocation()}, {@$user->getCurrentLocation()}{/if}</dd>
- {event name='userDataRow2'}
- </dl>
- {/if}
- <nav class="jsMobileNavigation buttonGroupNavigation">
- <ul id="profileButtonContainer" class="buttonGroup">
- {hascontent}
- <li class="dropdown">
- <a href="#" class="button dropdownToggle jsTooltip" title="{lang}wcf.user.searchUserContent{/lang}"><span class="icon icon16 icon-search"></span> <span class="invisible">{lang}wcf.user.searchUserContent{/lang}</span></a>
- <ul class="dropdownMenu">
- {content}
- {event name='quickSearchItems'}
- {/content}
- </ul>
- </li>
- {/hascontent}
-
- {if $__wcf->session->getPermission('user.profile.canReportContent')}
- <li class="jsReportUser jsOnly" data-object-id="{@$user->userID}"><a href="#" title="{lang}wcf.user.profile.report{/lang}" class="button jsTooltip"><span class="icon icon16 icon-warning-sign"></span> <span class="invisible">{lang}wcf.user.profile.report{/lang}</span></a></li>
- {/if}
-
- {if $user->userID != $__wcf->user->userID}
- {if $user->isAccessible('canViewEmailAddress') || $__wcf->session->getPermission('admin.user.canEditMailAddress')}
- <li><a class="button jsTooltip" href="mailto:{@$user->getEncodedEmail()}" title="{lang}wcf.user.button.mail{/lang}"><span class="icon icon16 icon-envelope-alt"></span> <span class="invisible">{lang}wcf.user.button.mail{/lang}</span></a></li>
- {elseif $user->isAccessible('canMail') && $__wcf->session->getPermission('user.profile.canMail')}
- <li><a class="button jsTooltip" href="{link controller='Mail' object=$user}{/link}" title="{lang}wcf.user.button.mail{/lang}"><span class="icon icon16 icon-envelope-alt"></span> <span class="invisible">{lang}wcf.user.button.mail{/lang}</span></a></li>
- {/if}
- {/if}
-
- {event name='buttons'}
-
- {if $isAccessible && $__wcf->user->userID != $user->userID && ($__wcf->session->getPermission('admin.user.canBanUser') || $__wcf->session->getPermission('admin.user.canDisableAvatar') || $__wcf->session->getPermission('admin.user.canDisableSignature') || ($__wcf->session->getPermission('admin.general.canUseAcp') && $__wcf->session->getPermission('admin.user.canEditUser')){event name='moderationDropdownPermissions'})}
- <li class="dropdown">
- <a href="{link controller='UserEdit' object=$user isACP=true}{/link}" class="button jsTooltip jsUserInlineEditor" title="{lang}wcf.user.moderate{/lang}"><span class="icon icon16 fa-wrench"></span> <span class="invisible">{lang}wcf.user.moderate{/lang}</span></a>
- <ul class="dropdownMenu"></ul>
- </li>
- {/if}
- </ul>
- </nav>
-</header>
-
{include file='userNotice'}
{if !$user->isProtected()}
{include file='userInformationButtons'}
-{include file='userInformationStatistics'}
\ No newline at end of file
+{include file='userInformationStatistics'}
-<div class="containerHeadline">
- <h3><a href="{link controller='User' object=$user}{/link}">{$user->username}</a>{if $user->banned} <span class="icon icon16 fa-lock jsTooltip jsUserBanned" title="{lang}wcf.user.banned{/lang}"></span>{/if}{if MODULE_USER_RANK}
- {if $user->getUserTitle()}
- <span class="badge userTitleBadge{if $user->getRank() && $user->getRank()->cssClassName} {@$user->getRank()->cssClassName}{/if}">{$user->getUserTitle()}</span>
- {/if}
- {if $user->getRank() && $user->getRank()->rankImage}
- <span class="userRankImage">{@$user->getRank()->getImage()}</span>
- {/if}
- {/if}</h3>
-</div>
+<a href="{link controller='User' object=$user}{/link}" class="username">{$user->username}</a>{if $user->banned} <span class="icon icon16 fa-lock jsTooltip jsUserBanned" title="{lang}wcf.user.banned{/lang}"></span>{/if}
+{if MODULE_USER_RANK}
+ {if $user->getUserTitle()}
+ <span class="badge userTitleBadge{if $user->getRank() && $user->getRank()->cssClassName} {@$user->getRank()->cssClassName}{/if}">{$user->getUserTitle()}</span>
+ {/if}
+ {if $user->getRank() && $user->getRank()->rankImage}
+ <span class="userRankImage">{@$user->getRank()->getImage()}</span>
+ {/if}
+{/if}
<ul class="dataList userFacts">
{if $user->isAccessible('canViewProfile')}
{if $user->isVisibleOption('gender') && $user->gender}<li>{lang}wcf.user.gender.{if $user->gender == 1}male{else}female{/if}{/lang}</li>{/if}
<li>{lang}wcf.user.membersList.registrationDate{/lang}</li>
{event name='userData'}
-</ul>
\ No newline at end of file
+</ul>
</script>
{foreach from=$__wcf->getUserMenu()->getMenuItems('') item=menuCategory}
- <fieldset>
- <legend>{lang}{$menuCategory->menuItem}{/lang}</legend>
+ <section>
+ <h1>{lang}{$menuCategory->menuItem}{/lang}</h1>
<nav>
- <ul>
+ <ul class="sidebarNavigation">
{foreach from=$__wcf->getUserMenu()->getMenuItems($menuCategory->menuItem) item=menuItem}
<li{if $menuItem->menuItem|in_array:$__userMenuActiveItems} class="active"{/if}><a href="{$menuItem->getProcessor()->getLink()}">{@$menuItem}</a></li>
{/foreach}
</ul>
</nav>
- </fieldset>
+ </section>
{/foreach}
{/capture}
-{if $__wcf->user->userID}
- <!-- user menu -->
- <li id="userMenu">
- <a class="framed" href="{link controller='User' object=$__wcf->user}{/link}">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(24)} <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>
+<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>
- <ul class="interactiveDropdownUserMenuLinkList">
- {foreach from=$__wcf->getUserMenu()->getMenuItems($menuCategory->menuItem) item=menuItem}
- <li><a href="{$menuItem->getProcessor()->getLink()}">{@$menuItem}</a></li>
- {/foreach}
- </ul>
+ <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>
- </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 icon-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 icon-bell-alt"></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')}
+ </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">
- //<![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}'
- });
+ new WCF.User.Panel.UserMenu();
});
- //]]>
</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 icon-github"></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 icon-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 icon-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 icon-google-plus"></span> <span>{lang}wcf.user.3rdparty.google.login{/lang}</span></a>
- </li>
+ </li>
+
+ <li><a href="{link controller='Settings'}{/link}" class="noJsOnly" style="display: none"><span class="icon icon16 icon-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 icon-bell-alt"></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}
-
- {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'}
+ </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 icon-github"></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 icon-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 icon-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 icon-google-plus"></span> <span>{lang}wcf.user.3rdparty.google.login{/lang}</span></a>
+ </li>
+ {/if}
+
+ {event name='3rdpartyButtons'}
+ {/capture}
- <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}
- };
+ <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>
- 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 icon-warning-sign"></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 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>
+ //]]>
+ </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 icon-warning-sign"></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}
- </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 icon-signout"></span> <span>{lang}wcf.user.logout{/lang}</span></a></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 icon-signout"></span> <span>{lang}wcf.user.logout{/lang}</span></a></li>
+ {/if}
+ </ul>
+</nav>
\ No newline at end of file
</script>
<ul id="likeList" class="containerList recentActivityList likeList" data-last-like-time="{@$lastLikeTime}">
- <li>
+ <li class="likeTypeSelection">
<ul class="buttonGroup" id="likeType">
<li><a class="button small active" data-like-type="received">{lang}wcf.like.likesReceived{/lang}</a></li>
<li><a class="button small" data-like-type="given">{lang}wcf.like.likesGiven{/lang}</a></li>
-<fieldset>
- <legend class="invisible">{lang}wcf.user.avatar{/lang}</legend>
-
+<section class="userDetails"
+ {if $isAccessible}
+ data-object-id="{@$user->userID}"
+ {if $__wcf->session->getPermission('admin.user.canBanUser')}
+ data-banned="{@$user->banned}"
+ {/if}
+ {if $__wcf->session->getPermission('admin.user.canDisableAvatar')}
+ data-disable-avatar="{@$user->disableAvatar}"
+ {/if}
+ {if $__wcf->session->getPermission('admin.user.canDisableSignature')}
+ data-disable-signature="{@$user->disableSignature}"
+ {/if}
+ {/if}
+>
<div class="userAvatar">
{if $user->userID == $__wcf->user->userID}
<a href="{link controller='AvatarEdit'}{/link}" class="framed jsTooltip" title="{lang}wcf.user.avatar.edit{/lang}">{@$user->getAvatar()->getImageTag()}</a>
<span class="framed">{@$user->getAvatar()->getImageTag()}</span>
{/if}
</div>
-</fieldset>
+
+ <h1>{$user->username}{if $user->banned} <span class="icon icon16 fa-lock jsTooltip jsUserBanned" title="{lang}wcf.user.banned{/lang}"></span>{/if}</h1>
+
+ {if MODULE_USER_RANK}
+ <div class="userRank">
+ {if $user->getUserTitle()}
+ <span class="badge userTitleBadge{if $user->getRank() && $user->getRank()->cssClassName} {@$user->getRank()->cssClassName}{/if}">{$user->getUserTitle()}</span>
+ {/if}
+ {if $user->getRank() && $user->getRank()->rankImage}
+ <span class="userRankImage">{@$user->getRank()->getImage()}</span>
+ {/if}
+ </div>
+ {/if}
+
+ <ul class="dataList">
+ {if $user->isVisibleOption('gender') && $user->gender}<li>{lang}wcf.user.gender.{if $user->gender == 1}male{else}female{/if}{/lang}</li>{/if}
+ {if $user->isVisibleOption('birthday') && $user->getAge()}<li>{@$user->getAge()}</li>{/if}
+ {if $user->isVisibleOption('location') && $user->location}<li>{lang}wcf.user.membersList.location{/lang}</li>{/if}
+ {if $user->getOldUsername()}<li>{lang}wcf.user.profile.oldUsername{/lang}</li>{/if}
+ <li>{lang}wcf.user.membersList.registrationDate{/lang}</li>
+ {event name='userDataRow1'}
+ </ul>
+ {if $user->canViewOnlineStatus() && $user->getLastActivityTime()}
+ <p class="userActivity">
+ <span>{lang}wcf.user.usersOnline.lastActivity{/lang}: {@$user->getLastActivityTime()|time}</span>
+ {if $user->getCurrentLocation()}<span>{@$user->getCurrentLocation()}</span>{/if}
+ </p>
+ {/if}
+ <nav class="jsMobileNavigation buttonGroupNavigation">
+ <ul id="profileButtonContainer" class="buttonGroup">
+ {hascontent}
+ <li class="dropdown">
+ <a href="#" class="button dropdownToggle jsTooltip" title="{lang}wcf.user.searchUserContent{/lang}"><span class="icon icon16 icon-search"></span> <span class="invisible">{lang}wcf.user.searchUserContent{/lang}</span></a>
+ <ul class="dropdownMenu">
+ {content}
+ {event name='quickSearchItems'}
+ {/content}
+ </ul>
+ </li>
+ {/hascontent}
+
+ {if $__wcf->session->getPermission('user.profile.canReportContent')}
+ <li class="jsReportUser jsOnly" data-object-id="{@$user->userID}"><a href="#" title="{lang}wcf.user.profile.report{/lang}" class="button jsTooltip"><span class="icon icon16 icon-warning-sign"></span> <span class="invisible">{lang}wcf.user.profile.report{/lang}</span></a></li>
+ {/if}
+
+ {if $user->userID != $__wcf->user->userID}
+ {if $user->isAccessible('canViewEmailAddress') || $__wcf->session->getPermission('admin.user.canEditMailAddress')}
+ <li><a class="button jsTooltip" href="mailto:{@$user->getEncodedEmail()}" title="{lang}wcf.user.button.mail{/lang}"><span class="icon icon16 icon-envelope-alt"></span> <span class="invisible">{lang}wcf.user.button.mail{/lang}</span></a></li>
+ {elseif $user->isAccessible('canMail') && $__wcf->session->getPermission('user.profile.canMail')}
+ <li><a class="button jsTooltip" href="{link controller='Mail' object=$user}{/link}" title="{lang}wcf.user.button.mail{/lang}"><span class="icon icon16 icon-envelope-alt"></span> <span class="invisible">{lang}wcf.user.button.mail{/lang}</span></a></li>
+ {/if}
+ {/if}
+
+ {event name='buttons'}
+
+ {if $isAccessible && $__wcf->user->userID != $user->userID && ($__wcf->session->getPermission('admin.user.canBanUser') || $__wcf->session->getPermission('admin.user.canDisableAvatar') || $__wcf->session->getPermission('admin.user.canDisableSignature') || ($__wcf->session->getPermission('admin.general.canUseAcp') && $__wcf->session->getPermission('admin.user.canEditUser')){event name='moderationDropdownPermissions'})}
+ <li class="dropdown">
+ <a href="{link controller='UserEdit' object=$user isACP=true}{/link}" class="button jsTooltip jsUserInlineEditor" title="{lang}wcf.user.moderate{/lang}"><span class="icon icon16 fa-wrench"></span> <span class="invisible">{lang}wcf.user.moderate{/lang}</span></a>
+ <ul class="dropdownMenu"></ul>
+ </li>
+ {/if}
+ </ul>
+ </nav>
+</section>
{hascontent}
- <fieldset>
- <legend class="invisible">{lang}wcf.user.stats{/lang}</legend>
+ <section>
+ <h1 class="invisible">{lang}wcf.user.stats{/lang}</h1>
<dl class="plain statsDataList">
{content}
{/if}
{/content}
</dl>
- </fieldset>
+ </section>
{/hascontent}
{event name='afterStatistics'}
{if !$user->isProtected()}
{if $followingCount}
- <fieldset>
- <legend>{lang}wcf.user.profile.following{/lang} <span class="badge">{#$followingCount}</span></legend>
+ <section>
+ <h1>{lang}wcf.user.profile.following{/lang} <span class="badge">{#$followingCount}</span></h1>
<div>
<ul class="framedIconList">
{/foreach}
</ul>
- {if $followingCount > 10}
+ {if $followingCount > 8}
<a id="followingAll" class="button small more jsOnly">{lang}wcf.global.button.showAll{/lang}</a>
{/if}
</div>
- </fieldset>
+ </section>
{/if}
{if $followerCount}
- <fieldset>
- <legend>{lang}wcf.user.profile.followers{/lang} <span class="badge">{#$followerCount}</span></legend>
+ <section>
+ <h1>{lang}wcf.user.profile.followers{/lang} <span class="badge">{#$followerCount}</span></h1>
<div>
<ul class="framedIconList">
{/foreach}
</ul>
- {if $followerCount > 10}
+ {if $followerCount > 8}
<a id="followerAll" class="button small more jsOnly">{lang}wcf.global.button.showAll{/lang}</a>
{/if}
</div>
- </fieldset>
+ </section>
{/if}
{if $visitorCount}
- <fieldset>
- <legend>{lang}wcf.user.profile.visitors{/lang} <span class="badge">{#$visitorCount}</span></legend>
+ <section>
+ <h1>{lang}wcf.user.profile.visitors{/lang} <span class="badge">{#$visitorCount}</span></h1>
<div>
<ul class="framedIconList">
{/foreach}
</ul>
- {if $visitorCount > 10}
+ {if $visitorCount > 8}
<a id="visitorAll" class="button small more jsOnly">{lang}wcf.global.button.showAll{/lang}</a>
{/if}
</div>
- </fieldset>
+ </section>
{/if}
{event name='boxes'}
{if !$usersOnlineShowRecord|isset}{assign var='usersOnlineShowRecord' value=true}{/if}
{if MODULE_USERS_ONLINE && $__wcf->session->getPermission('user.profile.canViewUsersOnlineList') && $usersOnlineList->stats[total]}
<li class="box32 usersOnlineInfoBox">
- <span class="icon icon32 icon-user"></span>
+ <span class="icon icon32 fa-user"></span>
<div>
<div class="containerHeadline">
<a href="{link controller='User' object=$user}{/link}" title="{$user->username}" class="framed">{@$user->getAvatar()->getImageTag(48)}</a>
<div class="details userInformation">
- <div class="containerHeadline">
- <h3><a href="{link controller='User' object=$user}{/link}">{@$user->getFormattedUsername()}</a>{if MODULE_USER_RANK}
- {if $user->getUserTitle()}
- <span class="badge userTitleBadge{if $user->getRank() && $user->getRank()->cssClassName} {@$user->getRank()->cssClassName}{/if}">{$user->getUserTitle()}</span>
- {/if}
- {if $user->getRank() && $user->getRank()->rankImage}
- <span class="userRankImage">{@$user->getRank()->getImage()}</span>
- {/if}
- {/if}</h3>
-
- {@$locationData}
- </div>
+ <a href="{link controller='User' object=$user}{/link}" class="username">{@$user->getFormattedUsername()}</a>
+ {if MODULE_USER_RANK}
+ {if $user->getUserTitle()}
+ <span class="badge userTitleBadge{if $user->getRank() && $user->getRank()->cssClassName} {@$user->getRank()->cssClassName}{/if}">{$user->getUserTitle()}</span>
+ {/if}
+ {if $user->getRank() && $user->getRank()->rankImage}
+ <span class="userRankImage">{@$user->getRank()->getImage()}</span>
+ {/if}
+ {/if}
+
+ {@$locationData}
{@$sessionData}
*/
_createButton: function(containerID, buttonContainer) {
var $isOpen = this._containers[containerID].data('isOpen');
- var $button = $('<span class="collapsibleButton jsTooltip pointer icon icon16 icon-' + ($isOpen ? 'chevron-down' : 'chevron-right') + '" title="'+WCF.Language.get('wcf.global.button.collapsible')+'">').prependTo(buttonContainer);
+ var $button = $('<span class="collapsibleButton jsTooltip pointer icon icon16 fa-chevron-down" title="'+WCF.Language.get('wcf.global.button.collapsible')+'">').prependTo(buttonContainer);
$button.data('containerID', containerID).click($.proxy(this._toggleContainer, this));
return $button;
--- /dev/null
+/**
+ * Generic handler for collapsible bbcode boxes.
+ *
+ * @author Alexander Ebert
+ * @copyright 2001-2015 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module WoltLab/WCF/Bbcode/Collapsible
+ */
+define([], function() {
+ "use strict";
+
+ var _containers = elByClass('jsCollapsibleBbcode');
+
+ /**
+ * @exports WoltLab/WCF/Bbcode/Collapsible
+ */
+ var BbcodeCollapsible = {
+ observe: function() {
+ var container, toggleButton;
+ while (_containers.length) {
+ container = _containers[0];
+ container.classList.remove('jsCollapsibleBbcode');
+
+ toggleButton = elBySel('.toggleButton');
+ if (toggleButton === null) {
+ continue;
+ }
+
+ (function(container, toggleButton) {
+ var toggle = function() {
+ var expand = container.classList.contains('collapsed');
+ container.classList[expand ? 'remove' : 'add']('collapsed');
+ toggleButton.textContent = elAttr(toggleButton, 'data-title-' + (expand ? 'collapse' : 'expand'));
+ };
+
+ toggleButton.addEventListener('click', toggle);
+
+ // searching in a page causes Google Chrome to scroll
+ // the box if something inside it matches
+ //
+ // expand the box in this case, to:
+ // a) Improve UX
+ // b) Hide an ugly misplaced "show all" button
+ container.addEventListener('scroll', toggle);
+
+ // expand boxes that are initially scrolled
+ if (container.scrollTop !== 0) {
+ toggle();
+ }
+ })(container, toggleButton);
+ }
+ }
+ };
+
+ return BbcodeCollapsible;
+});
* @returns {array} first item represents the opening tag, the second the closing one
*/
_convertList: function(stack, item, index) {
- var type = (items.attributes.length) ? item.attributes[0] : '';
+ var type = (item.attributes.length) ? item.attributes[0] : '';
// replace list items
for (var i = index + 1; i < item.pair; i++) {
UiSimpleDropdown.setup();
UiMobile.setup();
UiTabMenu.setup();
- UiFlexibleMenu.setup();
+ //UiFlexibleMenu.setup();
UiDialog.setup();
UiTooltip.setup();
setup: function(options) {
Bootstrap.setup();
- ControllerSitemap.setup();
+ //ControllerSitemap.setup();
if (options.styleChanger) {
- ControllerStyleChanger.setup();
+ //ControllerStyleChanger.setup();
}
this._initUserPopover();
return this._set['delete'](value);
}
else {
- var index = this._set.indexOf(index);
+ var index = this._set.indexOf(value);
if (index === -1) {
return false;
}
--- /dev/null
+define(['Ajax', 'Core', 'Dictionary', 'Language', 'ObjectMap', 'StringUtil', 'Dom/ChangeListener', 'Dom/Util', 'Ui/Dialog'], function(Ajax, Core, Dictionary, Language, ObjectMap, StringUtil, DomChangeListener, DomUtil, UiDialog) {
+ "use strict";
+
+ var _isBusy = false;
+
+ function UiLikeHandler(objectType, options) { this.init(objectType, options); };
+ UiLikeHandler.prototype = {
+ init: function(objectType, options) {
+ if (options.containerSelector === '') {
+ throw new Error("[WoltLab/WCF/Ui/Like/Handler] Expected a non-emtpy string for option 'containerSelector'.");
+ }
+
+ this._containers = new ObjectMap();
+ this._details = new ObjectMap();
+ this._objectType = objectType;
+ this._options = Core.extend({
+ isSingleItem: false,
+
+ // permissions
+ canDislike: false,
+ canLike: false,
+ canLikeOwnContent: false,
+ canViewSummary: false,
+
+ // selectors
+ badgeContainerSelector: '.messageHeader .messageHeadline > p',
+ buttonBeforeSelector: '.messageFooterButtons > .toTopLink',
+ containerSelector: '',
+ summarySelector: '.messageFooterNotes'
+ }, options);
+
+ this.initContainers(options, objectType);
+ },
+
+ initContainers: function() {
+ var element, elements = elBySelAll(this._options.containerSelector), elementData, triggerChange = false;
+ for (var i = 0, length = elements.length; i < length; i++) {
+ element = elements[i];
+ if (this._containers.has(element)) {
+ continue;
+ }
+
+ elementData = {
+ badge: null,
+ dislikeButton: null,
+ likeButton: null,
+ summary: null,
+
+ dislikes: ~~elAttr(element, 'data-like-dislikes'),
+ liked: ~~elAttr(element, 'data-like-liked'),
+ likes: ~~elAttr(element, 'data-like-likes'),
+ objectId: ~~elAttr(element, 'data-object-id'),
+ users: JSON.parse(elAttr(element, 'data-like-users'))
+ };
+
+ this._containers.set(element, elementData);
+ this._buildWidget(element, elementData);
+
+ triggerChange = true;
+ }
+
+ if (triggerChange) {
+ DomChangeListener.trigger();
+ }
+ },
+
+ _buildWidget: function(element, elementData) {
+ // build summary
+ if (this._options.canViewSummary) {
+ var summary, summaryContainer = elBySel(this._options.summarySelector, element), summaryContent;
+ if (summaryContainer !== null) {
+ summary = elCreate('p');
+ summary.className = 'likesSummary';
+
+ summaryContent = elCreate('span');
+ summaryContent.addEventListener('click', this._showSummary.bind(this, element));
+ summary.appendChild(summaryContent);
+
+ summaryContainer.appendChild(summary);
+ elementData.summary = summaryContent;
+
+ this._updateSummary(element);
+ }
+ }
+
+ // cumulative likes
+ var badge, badgeContainer = elBySel(this._options.badgeContainerSelector, element);
+ if (badgeContainer !== null) {
+ badge = elCreate('a');
+ badge.href = '#';
+ badge.className = 'wcfLikeCounter jsTooltip';
+ badge.addEventListener('click', this._showSummary.bind(this, element));
+
+ badgeContainer.appendChild(badge);
+ elementData.badge = badge;
+
+ this._updateBadge(element);
+ }
+
+ var insertPosition, userId = elAttr(element, 'data-user-id');
+ if (this._options.canLikeOwnContent || WCF.User.userID === userId) {
+ insertPosition = elBySel(this._options.buttonBeforeSelector, element);
+ if (insertPosition !== null) {
+ // like button
+ elementData.likeButton = this._createButton(element, insertPosition, true);
+
+ // dislike button
+ if (this._options.canDislike) {
+ elementData.dislikeButton = this._createButton(element, insertPosition, false);
+ }
+
+ this._updateActiveState(element);
+ }
+ }
+ },
+
+ _createButton: function(element, insertBefore, isLike) {
+ var title = Language.get('wcf.like.button.' + (isLike ? 'like' : 'dislike'));
+
+ var listItem = elCreate('li');
+ listItem.className = 'wcf' + (isLike ? 'Like' : 'Dislike') + 'Button';
+
+ var button = elCreate('a');
+ button.className = 'button jsTooltip';
+ button.href = '#';
+ button.title = title;
+ button.innerHTML = '<span class="icon icon16 fa-thumbs-o-' + (isLike ? 'up' : 'down') + '" /> <span class="invisible">' + title + '</span>';
+ button.addEventListener('click', this._like.bind(this, element));
+ button.setAttribute('data-type', (isLike ? 'like' : 'dislike'));
+
+ listItem.appendChild(button);
+ insertBefore.parentNode.insertBefore(listItem, insertBefore);
+
+ return button;
+ },
+
+ _showSummary: function(element, event) {
+ event.preventDefault();
+
+ if (!this._details.has(element)) {
+ // @TODO
+ this._details.set(element, new WCF.User.List('wcf\\data\\like\\LikeAction', Language.get('wcf.like.details'), {
+ data: {
+ containerID: DomUtil.identify(element),
+ objectID: this._containers.get(element).objectId,
+ objectType: this._objectType
+ }
+ }));
+ }
+
+ this._details.get(element).open();
+ },
+
+ _updateBadge: function(element) {
+ var data = this._containers.get(element);
+
+ if (data.likes === 0 && data.dislikes === 0) {
+ elHide(data.badge);
+ }
+ else {
+ elShow(data.badge);
+
+ // update like counter
+ var cumulativeLikes = data.likes - data.dislikes;
+ var content = '<span class="icon icon16 fa-thumbs-o-' + (cumulativeLikes < 0 ? 'down' : 'up' ) + '"></span><span class="wcfLikeValue">';
+ if (cumulativeLikes > 0) {
+ content += '+' + StringUtil.addThousandsSeparator(cumulativeLikes);
+ }
+ else if (cumulativeLikes < 0) {
+ // U+2212 = minus sign
+ content += '\u2212' + StringUtil.addThousandsSeparator(Math.abs(cumulativeLikes));
+ }
+ else {
+ // U+00B1 = plus-minus sign
+ content += '\u00B1' + '0';
+ }
+
+ data.badge.innerHTML = content + '</span>';
+ data.badge.setAttribute('data-tooltip', Language.get('wcf.like.tooltip', {
+ dislikes: data.dislikes,
+ likes: data.likes
+ }));
+ }
+ },
+
+ _updateSummary: function(element) {
+ var data = this._containers.get(element);
+
+ if (data.likes) {
+ elShow(data.summary.parentNode);
+
+ var usernames = [];
+ var keys = Object.keys(data.users);
+ for (var i = 0, length = keys.length; i < length; i++) {
+ usernames.push(data.users[keys[i]]);
+ }
+
+ var others = data.likes - usernames.length;
+ data.summary.innerHTML = Language.get('wcf.like.summary', { users: usernames, others: others });
+ }
+ else {
+ elHide(data.summary.parentNode);
+ }
+ },
+
+ _updateActiveState: function(element) {
+ var data = this._containers.get(element);
+
+ if (data.dislikeButton !== null) data.dislikeButton.classList.remove('active');
+ data.likeButton.classList.remove('active');
+
+ if (data.liked === 1) {
+ data.likeButton.classList.add('active');
+ }
+ else if (data.liked === -1 && data.dislikeButton !== null) {
+ data.dislikeButton.classList.add('active');
+ }
+ },
+
+ _like: function(element, event) {
+ event.preventDefault();
+
+ if (_isBusy) {
+ return;
+ }
+
+ _isBusy = true;
+
+ Ajax.api(this, {
+ actionName: elAttr(event.currentTarget, 'data-type'),
+ parameters: {
+ data: {
+ containerID: DomUtil.identify(element),
+ objectID: this._containers.get(element).objectId,
+ objectType: this._objectType
+ }
+ }
+ });
+ },
+
+ _ajaxSuccess: function(data) {
+ var element = elById(data.returnValues.containerID);
+ var elementData = this._containers.get(element);
+ if (elementData === undefined) {
+ return;
+ }
+
+ elementData.dislikes = ~~data.returnValues.dislikes;
+ elementData.likes = ~~data.returnValues.likes;
+
+ var users = data.returnValues.users;
+ elementData.users = [];
+ var keys = Object.keys(users);
+ for (var i = 0, length = keys.length; i < length; i++) {
+ elementData.users.push(StringUtil.escapeHTML(users[keys[i]].username));
+ }
+
+ if (data.isLiked == 1) elementData.liked = 1;
+ else if (data.isDisliked) elementData.liked = -1;
+ else elementData.liked = 0;
+
+ // update label
+ this._updateBadge(element);
+
+ // update summary
+ if (this._options.canViewSummary) this._updateSummary(element);
+
+ // mark button as active
+ this._updateActiveState(element);
+
+ // invalidate cache for like details
+ this._details['delete'](element);
+
+ _isBusy = false;
+ },
+
+ _ajaxSetup: function() {
+ return {
+ data: {
+ className: 'wcf\\data\\like\\LikeAction'
+ }
+ };
+ }
+ };
+
+ return UiLikeHandler;
+});
});
}
+ // create pointer element
+ nav.appendChild(elCreate('span'));
+
return true;
},
var oldTab = elBySel('#' + this._container.id + ' > nav > ul > li.active');
var oldContent = null;
if (oldTab) {
+ if (elAttr(oldTab, 'data-name') === name) {
+ // same tab
+ return;
+ }
+
oldTab.classList.remove('active');
oldContent = this._containers.get(elAttr(oldTab, 'data-name'));
oldContent.classList.remove('active');
newContent.classList.remove('hidden');
}
+ // set pointer position
+ var span = DomTraverse.childByTag(tab.parentNode.parentNode, 'SPAN');
+ if (span !== null) {
+ span.style.setProperty('transform', 'translateX(' + tab.offsetLeft + 'px)');
+ span.style.setProperty('width', tab.clientWidth + 'px');
+ }
+
if (!disableEvent) {
EventHandler.fire('com.woltlab.wcf.simpleTabMenu_' + this._container.id, 'select', {
active: tab,
window.objOwns = function(obj, property) {
return obj.hasOwnProperty(property);
};
+
+ /**
+ * Shorthand function to hide an element by setting its 'display' value to 'none'.
+ *
+ * @param {Element} element DOM element
+ */
+ window.elHide = function(element) {
+ element.style.setProperty('display', 'none');
+ };
+
+ /**
+ * Shorthand function to show an element previously hidden by using `elHide()`.
+ *
+ * @param {Element} element DOM element
+ */
+ window.elShow = function(element) {
+ element.style.removeProperty('display');
+ };
})(window, document);
if (!$this->style->isTainted) {
$tmp = Style::splitLessVariables($this->variables['individualLess']);
- $this->variables['individualLess'] = $tmp['original'];
+ $this->variables['individualLess'] = $tmp['preset'];
$this->variables['individualLessCustom'] = $tmp['custom'];
$tmp = Style::splitLessVariables($this->variables['overrideLess']);
- $this->variables['overrideLess'] = $tmp['original'];
+ $this->variables['overrideLess'] = $tmp['preset'];
$this->variables['overrideLessCustom'] = $tmp['custom'];
}
}
// get followers
$this->followerList = new UserFollowerList();
$this->followerList->getConditionBuilder()->add('user_follow.followUserID = ?', array($this->userID));
- $this->followerList->sqlLimit = 10;
+ $this->followerList->sqlLimit = 8;
$this->followerList->readObjects();
// get following
$this->followingList = new UserFollowingList();
$this->followingList->getConditionBuilder()->add('user_follow.userID = ?', array($this->userID));
- $this->followingList->sqlLimit = 10;
+ $this->followingList->sqlLimit = 8;
$this->followingList->readObjects();
// get visitors
if (PROFILE_ENABLE_VISITORS) {
$this->visitorList = new UserProfileVisitorList();
$this->visitorList->getConditionBuilder()->add('user_profile_visitor.ownerID = ?', array($this->userID));
- $this->visitorList->sqlLimit = 10;
+ $this->visitorList->sqlLimit = 8;
$this->visitorList->readObjects();
}
public function compile(Style $style) {
// read stylesheets by dependency order
$conditions = new PreparedStatementConditionBuilder();
- $conditions->add("filename REGEXP ?", array('style/([a-zA-Z0-9\_\-\.]+)\.less'));
+ $conditions->add("filename REGEXP ?", ['style/([a-zA-Z0-9\_\-\.]+)\.less']);
+
+ // TESTING ONLY
+ $conditions->add("packageID <> ?", [1]);
+ // TESTING ONLY
$sql = "SELECT filename, application
FROM wcf".WCF_N."_package_installation_file_log
ORDER BY packageID";
$statement = WCF::getDB()->prepareStatement($sql);
$statement->execute($conditions->getParameters());
- $files = array();
+
+ $files = [];
+
+ // TESTING ONLY
+ if ($handle = opendir(WCF_DIR.'style/')) {
+ while (($file = readdir($handle)) !== false) {
+ if ($file === '.' || $file === '..' || $file === 'bootstrap' || is_file(WCF_DIR.'style/'.$file)) {
+ continue;
+ }
+
+ $file = WCF_DIR."style/{$file}/";
+ if ($innerHandle = opendir($file)) {
+ while (($innerFile = readdir($innerHandle)) !== false) {
+ if ($innerFile === '.' || $innerFile === '..' || !is_file($file.$innerFile)) {
+ continue;
+ }
+
+ $files[] = $file.$innerFile;
+ }
+ closedir($innerHandle);
+ }
+ }
+
+ closedir($handle);
+ }
+ // TESTING ONLY
+
while ($row = $statement->fetchArray()) {
$files[] = Application::getDirectory($row['application']).$row['filename'];
}
class PagesFunctionTemplatePlugin implements IFunctionTemplatePlugin {
const SHOW_LINKS = 11;
+ /**
+ * CSS class name for <nav> element
+ * @var string
+ */
+ protected $cssClassName = 'pageNavigation';
+
/**
* Inserts the page number into the link.
*
protected function makeLink($link, $pageNo, $activePage, $pages) {
// first page
if ($activePage != $pageNo) {
- return '<li
class="button"><a href="'.$this->insertPageNumber($link, $pageNo).'" title="'.WCF::getLanguage()->getDynamicVariable('wcf.page.pageNo', array('pageNo' => $pageNo)).'">'.StringUtil::formatInteger($pageNo).'</a></li>'."\n";
+ return '<li><a href="'.$this->insertPageNumber($link, $pageNo).'" title="'.WCF::getLanguage()->getDynamicVariable('wcf.page.pageNo', array('pageNo' => $pageNo)).'">'.StringUtil::formatInteger($pageNo).'</a></li>'."\n";
}
else {
- return '<li class="button active"><span>'.StringUtil::formatInteger($pageNo).'</span><span class="invisible">'.WCF::getLanguage()->getDynamicVariable('wcf.page.pagePosition', array('pageNo' => $pageNo, 'pages' => $pages)).'</span></li>'."\n";
+ return '<li class="active"><span>'.StringUtil::formatInteger($pageNo).'</span><span class="invisible">'.WCF::getLanguage()->getDynamicVariable('wcf.page.pagePosition', array('pageNo' => $pageNo, 'pages' => $pages)).'</span></li>'."\n";
}
}
*/
protected function makePreviousLink($link, $pageNo) {
if ($pageNo > 1) {
- return '<li class="button skip"><a href="'.$this->insertPageNumber($link, $pageNo - 1).'" title="'.WCF::getLanguage()->getDynamicVariable('wcf.global.page.previous').'" class="jsTooltip"><span class="icon icon16 icon-double-angle-left"></span></a></li>'."\n";
+ return '<li class="skip"><a href="'.$this->insertPageNumber($link, $pageNo - 1).'" title="'.WCF::getLanguage()->getDynamicVariable('wcf.global.page.previous').'" class="icon icon16 fa-angle-double-left jsTooltip"></a></li>'."\n";
}
else {
- return '<li class="skip disabled"><span class="icon icon16 icon-double-angle-left disabled"></span></li>'."\n";
+ return '<li class="skip disabled"><span class="icon icon16 fa-angle-double-left"></span></li>'."\n";
}
}
*/
protected function makeNextLink($link, $pageNo, $pages) {
if ($pageNo && $pageNo < $pages) {
- return '<li class="button skip"><a href="'.$this->insertPageNumber($link, $pageNo + 1).'" title="'.WCF::getLanguage()->getDynamicVariable('wcf.global.page.next').'" class="jsTooltip"><span class="icon icon16 icon-double-angle-right"></span></a></li>'."\n";
+ return '<li class="skip"><a href="'.$this->insertPageNumber($link, $pageNo + 1).'" title="'.WCF::getLanguage()->getDynamicVariable('wcf.global.page.next').'" class="icon icon16 fa-angle-double-right jsTooltip"></a></li>'."\n";
}
else {
- return '<li class="skip disabled"><span class="icon icon16 icon-double-angle-right disabled"></span></li>'."\n";
+ return '<li class="skip disabled"><span class="icon icon16 fa-angle-double-right"></span></li>'."\n";
}
}
}
// open div and ul
- $html .= "<nav class=\"
pageNavigation\" data-link=\"".$link."\" data-pages=\"".$tagArgs['pages']."\">\n<ul>\n";
+ $html .= "<nav class=\"
".$this->cssClassName."\" data-link=\"".$link."\" data-pages=\"".$tagArgs['pages']."\">\n<ul>\n";
// previous page
$html .= $this->makePreviousLink($link, $tagArgs['page']);
$html .= $this->makeLink($link, 2, $tagArgs['page'], $tagArgs['pages']);
}
else {
- $html .= '<li class="
button jumpTo"><a title="'.WCF::getLanguage()->getDynamicVariable('wcf.global.page.jumpTo').'" class="jsTooltip">'.StringUtil::HELLIP.'</a></li>'."\n";
+ $html .= '<li class="jumpTo"><a title="'.WCF::getLanguage()->getDynamicVariable('wcf.global.page.jumpTo').'" class="jsTooltip">'.StringUtil::HELLIP.'</a></li>'."\n";
}
}
$html .= $this->makeLink($link, $tagArgs['pages'] - 1, $tagArgs['page'], $tagArgs['pages']);
}
else {
- $html .= '<li class="
button jumpTo"><a title="'.WCF::getLanguage()->getDynamicVariable('wcf.global.page.jumpTo').'" class="jsTooltip">'.StringUtil::HELLIP.'</a></li>'."\n";
+ $html .= '<li class="jumpTo"><a title="'.WCF::getLanguage()->getDynamicVariable('wcf.global.page.jumpTo').'" class="jsTooltip">'.StringUtil::HELLIP.'</a></li>'."\n";
}
}
*/
const SHOW_LINKS = 7;
+ /**
+ * @see \wcf\system\template\plugin\PagesFunctionTemplatePlugin::$cssClassName
+ */
+ protected $cssClassName = 'pageNavigation small';
+
/**
* @see \wcf\system\template\plugin\PagesFunctionTemplatePlugin::makePreviousLink()
*/
--- /dev/null
+.collapsibleBbcode {
+ > .toggleButton {
+ background-color: @wcfContainerBackgroundColor;
+ border-top: 1px solid @wcfContainerBorderColor;
+ cursor: pointer;
+ display: block;
+ height: 20px;
+ padding: 4px;
+ text-align: center;
+ }
+
+ &.collapsed {
+ max-height: 200px;
+ overflow: hidden;
+ position: relative;
+
+ > .toggleButton {
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ right: 0;
+
+ .boxShadow(0, -10px, @wcfContainerBackgroundColor, 25px, 5px);
+ }
+ }
+}
--- /dev/null
+.codeBox {
+ background-color: @wcfContentBackgroundColor;
+ border: 1px solid rgb(79, 129, 189);
+ border-width: 1px 0;
+ clear: both;
+ margin: 20px 0;
+
+ &:first-child {
+ margin-top: 0;
+ }
+
+ > div {
+ padding: 10px;
+
+ .boxShadowNative(~"inset 4em 0 0 " @wcfContainerBackgroundColor ~", inset 4.1em 0 0" lighten(@wcfContainerBorderColor, 10%));
+
+ > div {
+ margin: 0 0 10px 3.4em;
+
+ > h3 {
+ .wcfFontLarge;
+
+ /*font-size: @wcfTitleFontSize;
+ font-weight: bold;*/
+ padding-left: @wcfGapSmall;
+ position: relative;
+
+ > .icon {
+ position: absolute;
+ right: 0;
+ top: 3px;
+ }
+ }
+ }
+
+ > ol {
+ list-style-type: decimal;
+ margin-left: 3.4em;
+
+ > li {
+ font-family: Consolas, 'Courier New', monospace;
+ margin: 0;
+ padding-left: @wcfGapSmall;
+ position: relative;
+ white-space: pre-wrap;
+ word-break: break-all;
+ word-wrap: break-word;
+
+ > .lineAnchor {
+ display: block;
+ height: 1.4em;
+ left: -3.6em;
+ position: absolute;
+ top: 0;
+ width: 3.0em;
+ }
+
+ &:target {
+ background-color: @wcfHighlightBackgroundColor;
+ }
+ }
+ }
+ }
+}
+
+// rtl fix
+html[dir='rtl'] {
+ .codeBox {
+ > div {
+ .boxShadowNative(~"inset -4em 0 0 " @wcfContainerBackgroundColor ~", inset -4.1em 0 0" lighten(@wcfContainerBorderColor, 10%));
+ }
+ }
+}
+
+@media only screen and (max-width: 800px) {
+ .codeBox {
+ > div {
+ padding: @wcfGapSmall;
+
+ .boxShadow(0, 0, transparent);
+
+ > div {
+ margin-left: 0;
+
+ > h3 {
+ padding-left: 0;
+ }
+ }
+
+ > ol {
+ list-style-type: none;
+ margin-left: 0;
+ overflow: auto;
+
+ > li {
+ padding-left: 0;
+ white-space: pre;
+ word-wrap: normal;
+ }
+ }
+ }
+ }
+}
--- /dev/null
+kbd {
+ border: 1px solid rgb(238, 238, 238);
+ border-radius: 3px;
+ padding: 3px 5px;
+}
--- /dev/null
+.quoteBox {
+ border-left: 2px solid rgb(79, 129, 189);
+ padding: 10px;
+ margin: 10px 0;
+
+ &:first-child {
+ margin-top: 0;
+ }
+
+ .quoteBox {
+ margin-left: 10px;
+
+ > .quoteBoxHeader > .quoteBoxIcon {
+ display: none;
+ }
+ }
+}
+
+.quoteBoxHeader {
+ align-items: center;
+ display: flex;
+ margin-bottom: 10px;
+}
+
+.quoteBoxIcon {
+ flex: 0 0 auto;
+ min-height: 36px;
+
+ > a {
+ display: block;
+ font-size: 0;
+ margin-right: 5px;
+ }
+
+ > .icon {
+ margin-right: 7px;
+ position: relative;
+ top: 10px;
+ }
+}
+
+.quoteBoxTitle {
+ flex: 1 auto;
+ font-size: 1.2rem;
+}
* modifyed to meet the needs of WoltLab
*/
-html, body, div, span, applet, object, iframe,
+html, body, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
+address, big, cite, code, q,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
+canvas, embed,
+figure, figcaption,
+audio, video {
margin: 0;
padding: 0;
border: 0;
- font-size: 100%;
+
}
-h1, h2, h3, h4, h5, h6 {
- font-weight: normal;
+img {
+ border: 0;
}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, menu, nav, section {
- display: block;
+h1, h2, h3, h4, h5, h6 {
+ font-weight: normal;
+ font-size: 100%;
}
ol, ul {
--- /dev/null
+dl {
+ &:not(.plain) {
+ display: flex;
+ justify-content: space-between;
+
+ &:not(:last-child) {
+ margin-bottom: 10px;
+ }
+
+ > dt {
+ flex: 0 0 230px;
+ text-align: right;
+ }
+
+ > dd {
+ flex: 0 0 auto;
+ /* work-around for IE10 which does not support calc() for flex-basis */
+ width: calc(~"100% - 250px");
+ }
+
+ &.wide {
+ > dt {
+ display: none;
+ }
+
+ > dd {
+ flex: 0 0 100%;
+ }
+ }
+
+ & + dl:not(.plain) {
+ padding-top: 10px;
+ }
+ }
+
+ &.dataList {
+ .clearfix;
+
+ > dt {
+ clear: right;
+ color: rgba(128, 128, 128, 1);
+ float: left;
+ margin-right: 4px;
+ text-align: left;
+
+ &:after {
+ content: ":";
+ }
+ }
+
+ > dd {
+ float: right;
+ text-align: right;
+
+ &:not(:last-child) {
+ margin-bottom: 3px;
+ }
+ }
+ }
+
+ &.inlineDataList {
+ font-size: .85rem;
+
+ > dt {
+ display: inline-block;
+
+ &:after {
+ content: ":";
+ padding-left: 1px;
+ }
+ }
+
+ > dd {
+ display: inline-block;
+
+ &:not(:last-of-type):after {
+ content: ",";
+ padding-left: 1px;
+ }
+ }
+ }
+
+ &.statsDataList {
+ align-items: center;
+ display: flex;
+ flex-direction: row-reverse;
+ flex-wrap: wrap;
+
+ > dt {
+ color: @wcfDimmedColor;
+ flex: 0 0 60%;
+ font-size: .85rem;
+ margin-left: 5px;
+ overflow: hidden;
+ text-align: left;
+ white-space: nowrap;
+ }
+
+ > dd {
+ flex: 0 0 35%;
+ overflow: hidden;
+ text-align: right;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ }
+
+ &:not(.plain) > dd {
+ &:not(.floated) > label ~ small {
+ margin-left: 20px;
+ }
+
+ > small:not(.innerError) {
+ color: rgb(128, 128, 128);
+ display: block;
+ margin-top: 5px;
+ }
+ }
+
+ &.condensed {
+ display: block;
+
+ > dt,
+ > dd {
+ display: block;
+ margin: 0;
+ width: 100%;
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+input[type="date"],
+input[type="datetime"],
+input[type="email"],
+input[type="password"],
+input[type="search"],
+input[type="text"] {
+ background-color: @wcfInputBackgroundColor;
+ border: 1px solid @wcfInputBorderColor;
+ border-radius: 3px;
+ color: @wcfInputColor;
+ padding: 4px;
+ transition: background-color .2s linear, border-color .2s linear;
+
+ &:hover {
+ background-color: @wcfInputHoverBackgroundColor;
+ border-color: @wcfInputHoverBorderColor;
+ }
+}
+
+input {
+ box-sizing: border-box;
+
+ &.tiny {
+ width: 80px;
+ }
+
+ &.short {
+ min-width: 80px;
+ width: 10%;
+ }
+
+ &.medium {
+ min-width: 150px;
+ width: 30%;
+ }
+
+ &.long {
+ min-width: 150px;
+ width: 100%;
+ }
+}
--- /dev/null
+.inlineList {
+ display: flex;
+ flex-wrap: wrap;
+
+ > li {
+ flex: 0 auto;
+
+ &:not(:last-child) {
+ margin-right: 5px;
+ }
+
+ > a {
+ cursor: pointer;
+ display: flex;
+ }
+ }
+}
+
+.nativeList {
+ margin: 1em 0 1em 40px;
+
+ li {
+ margin: 7px 0;
+ }
+}
+
+ol.dataList,
+ul.dataList {
+ .inlineList;
+
+ font-size: .85rem;
+
+ > li {
+ &:not(:last-child):after {
+ content: ",";
+ padding-left: 1px;
+ }
+ }
+}
+
+.framedIconList {
+ display: flex;
+ flex-wrap: wrap;
+ padding-top: 10px;
+
+ > li {
+ flex: 0 0 25%;
+ text-align: center;
+
+ > a {
+ display: block;
+ }
+ }
+
+ & + .more {
+ float: right;
+ margin-top: 10px;
+ }
+}
+
+.tagList {
+ .inlineList;
+
+ align-items: baseline;
+}
+
+.smileyList {
+ align-items: center;
+}
--- /dev/null
+select {
+ background-color: @wcfInputBackgroundColor;
+ border: 1px solid @wcfInputBorderColor;
+ border-radius: 3px;
+ color: @wcfInputColor;
+ padding: 2px 5px;
+ position: relative;
+ transition: background-color .2s linear, border-color .2s linear;
+
+ &:hover {
+ background-color: @wcfInputHoverBackgroundColor;
+ border-color: @wcfInputHoverBorderColor;
+ }
+}
--- /dev/null
+textarea {
+ background-color: @wcfInputBackgroundColor;
+ border: 1px solid @wcfInputBorderColor;
+ border-radius: 3px;
+ box-sizing: border-box;
+ color: @wcfInputColor;
+ font-family: "Segoe UI";
+ padding: 5px;
+ transition: background-color .2s linear, border-color .2s linear;
+ width: 100%;
+
+ &:hover {
+ background-color: @wcfInputHoverBackgroundColor;
+ border-color: @wcfInputHoverBorderColor;
+ }
+}
\ No newline at end of file
--- /dev/null
+/* do NOT reference fonts directly, always make use of 'getFont.php' */
+@font-face {
+ font-family: 'FontAwesome';
+ src: url('../font/getFont.php?type=eot&v=4.3.0');
+ src: url('../font/getFont.php?type=eot&v=4.3.0#iefix') format('embedded-opentype'),
+ url('../font/getFont.php?type=woff&v=4.3.0') format('woff'),
+ url('../font/getFont.php?type=ttf&v=4.3.0') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+.icon, .fa {
+ color: @wcfColor;
+ display: inline-block;
+ font-family: FontAwesome;
+ font-weight: normal !important;
+ font-style: normal !important;
+ line-height: 1em;
+ text-align: center;
+
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+
+ //.textShadow(@wcfContentBackgroundColor);
+
+ &.disabled {
+ opacity: .3;
+ }
+ &:hover {
+ text-decoration: none;
+ }
+
+ /* default icon colors */
+ &.green {
+ color: rgba(0, 153, 0, 1);
+ }
+
+ &.red {
+ color: rgba(204, 0, 0, 1);
+ }
+
+ &.black {
+ color: #333;
+ }
+
+ &.brown {
+ color: #c63;
+ }
+
+ &.orange {
+ color: #f90;
+ }
+
+ &.yellow {
+ color: #ff0;
+ }
+
+ &.blue {
+ color: #369;
+ }
+
+ &.purple {
+ color: #c0f;
+ }
+
+ &.pink {
+ color: #f0c;
+ }
+}
+
+// firefox cursor issue
+span.icon:not(.pointer):not(.disabled),
+span.fa:not(.pointer):not(.disabled) {
+ cursor: default;
+}
+
+a > span.icon:not(.pointer),
+a > span.fa:not(.pointer) {
+ cursor: pointer !important;
+}
+
+// icon sizes
+.icon16 {
+ font-size: 14px;
+ height: 16px;
+ width: 16px;
+}
+
+.icon24 {
+ font-size: 18px;
+ height: 24px;
+ width: 24px;
+}
+
+.icon32 {
+ font-size: 28px;
+ height: 32px;
+ width: 32px;
+ vertical-align: -5px;
+}
+
+.icon48 {
+ font-size: 42px;
+ height: 48px;
+ width: 48px;
+}
+
+.icon96 {
+ font-size: 84px;
+ height: 96px;
+ width: 96px;
+}
+
+// spinner animation
+.icon-spinner,
+.fa-spinner {
+ height: auto;
+
+ -moz-animation: spin 1s infinite steps(8);
+ -o-animation: spin 1s infinite steps(8);
+ -webkit-animation: spin 1s infinite steps(8);
+ animation: spin 1s infinite steps(8);
+}
+@-moz-keyframes spin {
+ 0% { -moz-transform: rotate(0deg); }
+ 100% { -moz-transform: rotate(359deg); }
+}
+@-webkit-keyframes spin {
+ 0% { -webkit-transform: rotate(0deg); }
+ 100% { -webkit-transform: rotate(359deg); }
+}
+@-o-keyframes spin {
+ 0% { -o-transform: rotate(0deg); }
+ 100% { -o-transform: rotate(359deg); }
+}
+@-ms-keyframes spin {
+ 0% { -ms-transform: rotate(0deg); }
+ 100% { -ms-transform: rotate(359deg); }
+}
+@keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(359deg); }
+}
+
+.icon-rotate-90:before, .fa-rotate-90:before {
+ -webkit-transform: rotate(90deg);
+ -moz-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ -o-transform: rotate(90deg);
+ transform: rotate(90deg);
+ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+}
+
+.icon-rotate-180:before, .fa-rotate-180:before {
+ -webkit-transform: rotate(180deg);
+ -moz-transform: rotate(180deg);
+ -ms-transform: rotate(180deg);
+ -o-transform: rotate(180deg);
+ transform: rotate(180deg);
+ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+}
+
+.icon-rotate-270:before, .fa-rotate-270:before {
+ -webkit-transform: rotate(270deg);
+ -moz-transform: rotate(270deg);
+ -ms-transform: rotate(270deg);
+ -o-transform: rotate(270deg);
+ transform: rotate(270deg);
+ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+}
+
+.icon-flip-horizontal:before, .fa-flip-horizontal:before {
+ -webkit-transform: scale(-1, 1);
+ -moz-transform: scale(-1, 1);
+ -ms-transform: scale(-1, 1);
+ -o-transform: scale(-1, 1);
+ transform: scale(-1, 1);
+}
+
+.icon-flip-vertical:before, .fa-flip-vertical:before {
+ -webkit-transform: scale(1, -1);
+ -moz-transform: scale(1, -1);
+ -ms-transform: scale(1, -1);
+ -o-transform: scale(1, -1);
+ transform: scale(1, -1);
+}
+
+// icon variables
+@fa-var-adjust: "\f042";
+@fa-var-adn: "\f170";
+@fa-var-align-center: "\f037";
+@fa-var-align-justify: "\f039";
+@fa-var-align-left: "\f036";
+@fa-var-align-right: "\f038";
+@fa-var-ambulance: "\f0f9";
+@fa-var-anchor: "\f13d";
+@fa-var-android: "\f17b";
+@fa-var-angellist: "\f209";
+@fa-var-angle-double-down: "\f103";
+@fa-var-angle-double-left: "\f100";
+@fa-var-angle-double-right: "\f101";
+@fa-var-angle-double-up: "\f102";
+@fa-var-angle-down: "\f107";
+@fa-var-angle-left: "\f104";
+@fa-var-angle-right: "\f105";
+@fa-var-angle-up: "\f106";
+@fa-var-apple: "\f179";
+@fa-var-archive: "\f187";
+@fa-var-area-chart: "\f1fe";
+@fa-var-arrow-circle-down: "\f0ab";
+@fa-var-arrow-circle-left: "\f0a8";
+@fa-var-arrow-circle-o-down: "\f01a";
+@fa-var-arrow-circle-o-left: "\f190";
+@fa-var-arrow-circle-o-right: "\f18e";
+@fa-var-arrow-circle-o-up: "\f01b";
+@fa-var-arrow-circle-right: "\f0a9";
+@fa-var-arrow-circle-up: "\f0aa";
+@fa-var-arrow-down: "\f063";
+@fa-var-arrow-left: "\f060";
+@fa-var-arrow-right: "\f061";
+@fa-var-arrow-up: "\f062";
+@fa-var-arrows: "\f047";
+@fa-var-arrows-alt: "\f0b2";
+@fa-var-arrows-h: "\f07e";
+@fa-var-arrows-v: "\f07d";
+@fa-var-asterisk: "\f069";
+@fa-var-at: "\f1fa";
+@fa-var-automobile: "\f1b9";
+@fa-var-backward: "\f04a";
+@fa-var-ban: "\f05e";
+@fa-var-bank: "\f19c";
+@fa-var-bar-chart: "\f080";
+@fa-var-bar-chart-o: "\f080";
+@fa-var-barcode: "\f02a";
+@fa-var-bars: "\f0c9";
+@fa-var-bed: "\f236";
+@fa-var-beer: "\f0fc";
+@fa-var-behance: "\f1b4";
+@fa-var-behance-square: "\f1b5";
+@fa-var-bell: "\f0f3";
+@fa-var-bell-o: "\f0a2";
+@fa-var-bell-slash: "\f1f6";
+@fa-var-bell-slash-o: "\f1f7";
+@fa-var-bicycle: "\f206";
+@fa-var-binoculars: "\f1e5";
+@fa-var-birthday-cake: "\f1fd";
+@fa-var-bitbucket: "\f171";
+@fa-var-bitbucket-square: "\f172";
+@fa-var-bitcoin: "\f15a";
+@fa-var-bold: "\f032";
+@fa-var-bolt: "\f0e7";
+@fa-var-bomb: "\f1e2";
+@fa-var-book: "\f02d";
+@fa-var-bookmark: "\f02e";
+@fa-var-bookmark-o: "\f097";
+@fa-var-briefcase: "\f0b1";
+@fa-var-btc: "\f15a";
+@fa-var-bug: "\f188";
+@fa-var-building: "\f1ad";
+@fa-var-building-o: "\f0f7";
+@fa-var-bullhorn: "\f0a1";
+@fa-var-bullseye: "\f140";
+@fa-var-bus: "\f207";
+@fa-var-buysellads: "\f20d";
+@fa-var-cab: "\f1ba";
+@fa-var-calculator: "\f1ec";
+@fa-var-calendar: "\f073";
+@fa-var-calendar-o: "\f133";
+@fa-var-camera: "\f030";
+@fa-var-camera-retro: "\f083";
+@fa-var-car: "\f1b9";
+@fa-var-caret-down: "\f0d7";
+@fa-var-caret-left: "\f0d9";
+@fa-var-caret-right: "\f0da";
+@fa-var-caret-square-o-down: "\f150";
+@fa-var-caret-square-o-left: "\f191";
+@fa-var-caret-square-o-right: "\f152";
+@fa-var-caret-square-o-up: "\f151";
+@fa-var-caret-up: "\f0d8";
+@fa-var-cart-arrow-down: "\f218";
+@fa-var-cart-plus: "\f217";
+@fa-var-cc: "\f20a";
+@fa-var-cc-amex: "\f1f3";
+@fa-var-cc-discover: "\f1f2";
+@fa-var-cc-mastercard: "\f1f1";
+@fa-var-cc-paypal: "\f1f4";
+@fa-var-cc-stripe: "\f1f5";
+@fa-var-cc-visa: "\f1f0";
+@fa-var-certificate: "\f0a3";
+@fa-var-chain: "\f0c1";
+@fa-var-chain-broken: "\f127";
+@fa-var-check: "\f00c";
+@fa-var-check-circle: "\f058";
+@fa-var-check-circle-o: "\f05d";
+@fa-var-check-square: "\f14a";
+@fa-var-check-square-o: "\f046";
+@fa-var-chevron-circle-down: "\f13a";
+@fa-var-chevron-circle-left: "\f137";
+@fa-var-chevron-circle-right: "\f138";
+@fa-var-chevron-circle-up: "\f139";
+@fa-var-chevron-down: "\f078";
+@fa-var-chevron-left: "\f053";
+@fa-var-chevron-right: "\f054";
+@fa-var-chevron-up: "\f077";
+@fa-var-child: "\f1ae";
+@fa-var-circle: "\f111";
+@fa-var-circle-o: "\f10c";
+@fa-var-circle-o-notch: "\f1ce";
+@fa-var-circle-thin: "\f1db";
+@fa-var-clipboard: "\f0ea";
+@fa-var-clock-o: "\f017";
+@fa-var-close: "\f00d";
+@fa-var-cloud: "\f0c2";
+@fa-var-cloud-download: "\f0ed";
+@fa-var-cloud-upload: "\f0ee";
+@fa-var-cny: "\f157";
+@fa-var-code: "\f121";
+@fa-var-code-fork: "\f126";
+@fa-var-codepen: "\f1cb";
+@fa-var-coffee: "\f0f4";
+@fa-var-cog: "\f013";
+@fa-var-cogs: "\f085";
+@fa-var-columns: "\f0db";
+@fa-var-comment: "\f075";
+@fa-var-comment-o: "\f0e5";
+@fa-var-comments: "\f086";
+@fa-var-comments-o: "\f0e6";
+@fa-var-compass: "\f14e";
+@fa-var-compress: "\f066";
+@fa-var-connectdevelop: "\f20e";
+@fa-var-copy: "\f0c5";
+@fa-var-copyright: "\f1f9";
+@fa-var-credit-card: "\f09d";
+@fa-var-crop: "\f125";
+@fa-var-crosshairs: "\f05b";
+@fa-var-css3: "\f13c";
+@fa-var-cube: "\f1b2";
+@fa-var-cubes: "\f1b3";
+@fa-var-cut: "\f0c4";
+@fa-var-cutlery: "\f0f5";
+@fa-var-dashboard: "\f0e4";
+@fa-var-dashcube: "\f210";
+@fa-var-database: "\f1c0";
+@fa-var-dedent: "\f03b";
+@fa-var-delicious: "\f1a5";
+@fa-var-desktop: "\f108";
+@fa-var-deviantart: "\f1bd";
+@fa-var-diamond: "\f219";
+@fa-var-digg: "\f1a6";
+@fa-var-dollar: "\f155";
+@fa-var-dot-circle-o: "\f192";
+@fa-var-download: "\f019";
+@fa-var-dribbble: "\f17d";
+@fa-var-dropbox: "\f16b";
+@fa-var-drupal: "\f1a9";
+@fa-var-edit: "\f044";
+@fa-var-eject: "\f052";
+@fa-var-ellipsis-h: "\f141";
+@fa-var-ellipsis-v: "\f142";
+@fa-var-empire: "\f1d1";
+@fa-var-envelope: "\f0e0";
+@fa-var-envelope-o: "\f003";
+@fa-var-envelope-square: "\f199";
+@fa-var-eraser: "\f12d";
+@fa-var-eur: "\f153";
+@fa-var-euro: "\f153";
+@fa-var-exchange: "\f0ec";
+@fa-var-exclamation: "\f12a";
+@fa-var-exclamation-circle: "\f06a";
+@fa-var-exclamation-triangle: "\f071";
+@fa-var-expand: "\f065";
+@fa-var-external-link: "\f08e";
+@fa-var-external-link-square: "\f14c";
+@fa-var-eye: "\f06e";
+@fa-var-eye-slash: "\f070";
+@fa-var-eyedropper: "\f1fb";
+@fa-var-facebook: "\f09a";
+@fa-var-facebook-f: "\f09a";
+@fa-var-facebook-official: "\f230";
+@fa-var-facebook-square: "\f082";
+@fa-var-fast-backward: "\f049";
+@fa-var-fast-forward: "\f050";
+@fa-var-fax: "\f1ac";
+@fa-var-female: "\f182";
+@fa-var-fighter-jet: "\f0fb";
+@fa-var-file: "\f15b";
+@fa-var-file-archive-o: "\f1c6";
+@fa-var-file-audio-o: "\f1c7";
+@fa-var-file-code-o: "\f1c9";
+@fa-var-file-excel-o: "\f1c3";
+@fa-var-file-image-o: "\f1c5";
+@fa-var-file-movie-o: "\f1c8";
+@fa-var-file-o: "\f016";
+@fa-var-file-pdf-o: "\f1c1";
+@fa-var-file-photo-o: "\f1c5";
+@fa-var-file-picture-o: "\f1c5";
+@fa-var-file-powerpoint-o: "\f1c4";
+@fa-var-file-sound-o: "\f1c7";
+@fa-var-file-text: "\f15c";
+@fa-var-file-text-o: "\f0f6";
+@fa-var-file-video-o: "\f1c8";
+@fa-var-file-word-o: "\f1c2";
+@fa-var-file-zip-o: "\f1c6";
+@fa-var-files-o: "\f0c5";
+@fa-var-film: "\f008";
+@fa-var-filter: "\f0b0";
+@fa-var-fire: "\f06d";
+@fa-var-fire-extinguisher: "\f134";
+@fa-var-flag: "\f024";
+@fa-var-flag-checkered: "\f11e";
+@fa-var-flag-o: "\f11d";
+@fa-var-flash: "\f0e7";
+@fa-var-flask: "\f0c3";
+@fa-var-flickr: "\f16e";
+@fa-var-floppy-o: "\f0c7";
+@fa-var-folder: "\f07b";
+@fa-var-folder-o: "\f114";
+@fa-var-folder-open: "\f07c";
+@fa-var-folder-open-o: "\f115";
+@fa-var-font: "\f031";
+@fa-var-forumbee: "\f211";
+@fa-var-forward: "\f04e";
+@fa-var-foursquare: "\f180";
+@fa-var-frown-o: "\f119";
+@fa-var-futbol-o: "\f1e3";
+@fa-var-gamepad: "\f11b";
+@fa-var-gavel: "\f0e3";
+@fa-var-gbp: "\f154";
+@fa-var-ge: "\f1d1";
+@fa-var-gear: "\f013";
+@fa-var-gears: "\f085";
+@fa-var-genderless: "\f1db";
+@fa-var-gift: "\f06b";
+@fa-var-git: "\f1d3";
+@fa-var-git-square: "\f1d2";
+@fa-var-github: "\f09b";
+@fa-var-github-alt: "\f113";
+@fa-var-github-square: "\f092";
+@fa-var-gittip: "\f184";
+@fa-var-glass: "\f000";
+@fa-var-globe: "\f0ac";
+@fa-var-google: "\f1a0";
+@fa-var-google-plus: "\f0d5";
+@fa-var-google-plus-square: "\f0d4";
+@fa-var-google-wallet: "\f1ee";
+@fa-var-graduation-cap: "\f19d";
+@fa-var-gratipay: "\f184";
+@fa-var-group: "\f0c0";
+@fa-var-h-square: "\f0fd";
+@fa-var-hacker-news: "\f1d4";
+@fa-var-hand-o-down: "\f0a7";
+@fa-var-hand-o-left: "\f0a5";
+@fa-var-hand-o-right: "\f0a4";
+@fa-var-hand-o-up: "\f0a6";
+@fa-var-hdd-o: "\f0a0";
+@fa-var-header: "\f1dc";
+@fa-var-headphones: "\f025";
+@fa-var-heart: "\f004";
+@fa-var-heart-o: "\f08a";
+@fa-var-heartbeat: "\f21e";
+@fa-var-history: "\f1da";
+@fa-var-home: "\f015";
+@fa-var-hospital-o: "\f0f8";
+@fa-var-hotel: "\f236";
+@fa-var-html5: "\f13b";
+@fa-var-ils: "\f20b";
+@fa-var-image: "\f03e";
+@fa-var-inbox: "\f01c";
+@fa-var-indent: "\f03c";
+@fa-var-info: "\f129";
+@fa-var-info-circle: "\f05a";
+@fa-var-inr: "\f156";
+@fa-var-instagram: "\f16d";
+@fa-var-institution: "\f19c";
+@fa-var-ioxhost: "\f208";
+@fa-var-italic: "\f033";
+@fa-var-joomla: "\f1aa";
+@fa-var-jpy: "\f157";
+@fa-var-jsfiddle: "\f1cc";
+@fa-var-key: "\f084";
+@fa-var-keyboard-o: "\f11c";
+@fa-var-krw: "\f159";
+@fa-var-language: "\f1ab";
+@fa-var-laptop: "\f109";
+@fa-var-lastfm: "\f202";
+@fa-var-lastfm-square: "\f203";
+@fa-var-leaf: "\f06c";
+@fa-var-leanpub: "\f212";
+@fa-var-legal: "\f0e3";
+@fa-var-lemon-o: "\f094";
+@fa-var-level-down: "\f149";
+@fa-var-level-up: "\f148";
+@fa-var-life-bouy: "\f1cd";
+@fa-var-life-buoy: "\f1cd";
+@fa-var-life-ring: "\f1cd";
+@fa-var-life-saver: "\f1cd";
+@fa-var-lightbulb-o: "\f0eb";
+@fa-var-line-chart: "\f201";
+@fa-var-link: "\f0c1";
+@fa-var-linkedin: "\f0e1";
+@fa-var-linkedin-square: "\f08c";
+@fa-var-linux: "\f17c";
+@fa-var-list: "\f03a";
+@fa-var-list-alt: "\f022";
+@fa-var-list-ol: "\f0cb";
+@fa-var-list-ul: "\f0ca";
+@fa-var-location-arrow: "\f124";
+@fa-var-lock: "\f023";
+@fa-var-long-arrow-down: "\f175";
+@fa-var-long-arrow-left: "\f177";
+@fa-var-long-arrow-right: "\f178";
+@fa-var-long-arrow-up: "\f176";
+@fa-var-magic: "\f0d0";
+@fa-var-magnet: "\f076";
+@fa-var-mail-forward: "\f064";
+@fa-var-mail-reply: "\f112";
+@fa-var-mail-reply-all: "\f122";
+@fa-var-male: "\f183";
+@fa-var-map-marker: "\f041";
+@fa-var-mars: "\f222";
+@fa-var-mars-double: "\f227";
+@fa-var-mars-stroke: "\f229";
+@fa-var-mars-stroke-h: "\f22b";
+@fa-var-mars-stroke-v: "\f22a";
+@fa-var-maxcdn: "\f136";
+@fa-var-meanpath: "\f20c";
+@fa-var-medium: "\f23a";
+@fa-var-medkit: "\f0fa";
+@fa-var-meh-o: "\f11a";
+@fa-var-mercury: "\f223";
+@fa-var-microphone: "\f130";
+@fa-var-microphone-slash: "\f131";
+@fa-var-minus: "\f068";
+@fa-var-minus-circle: "\f056";
+@fa-var-minus-square: "\f146";
+@fa-var-minus-square-o: "\f147";
+@fa-var-mobile: "\f10b";
+@fa-var-mobile-phone: "\f10b";
+@fa-var-money: "\f0d6";
+@fa-var-moon-o: "\f186";
+@fa-var-mortar-board: "\f19d";
+@fa-var-motorcycle: "\f21c";
+@fa-var-music: "\f001";
+@fa-var-navicon: "\f0c9";
+@fa-var-neuter: "\f22c";
+@fa-var-newspaper-o: "\f1ea";
+@fa-var-openid: "\f19b";
+@fa-var-outdent: "\f03b";
+@fa-var-pagelines: "\f18c";
+@fa-var-paint-brush: "\f1fc";
+@fa-var-paper-plane: "\f1d8";
+@fa-var-paper-plane-o: "\f1d9";
+@fa-var-paperclip: "\f0c6";
+@fa-var-paragraph: "\f1dd";
+@fa-var-paste: "\f0ea";
+@fa-var-pause: "\f04c";
+@fa-var-paw: "\f1b0";
+@fa-var-paypal: "\f1ed";
+@fa-var-pencil: "\f040";
+@fa-var-pencil-square: "\f14b";
+@fa-var-pencil-square-o: "\f044";
+@fa-var-phone: "\f095";
+@fa-var-phone-square: "\f098";
+@fa-var-photo: "\f03e";
+@fa-var-picture-o: "\f03e";
+@fa-var-pie-chart: "\f200";
+@fa-var-pied-piper: "\f1a7";
+@fa-var-pied-piper-alt: "\f1a8";
+@fa-var-pinterest: "\f0d2";
+@fa-var-pinterest-p: "\f231";
+@fa-var-pinterest-square: "\f0d3";
+@fa-var-plane: "\f072";
+@fa-var-play: "\f04b";
+@fa-var-play-circle: "\f144";
+@fa-var-play-circle-o: "\f01d";
+@fa-var-plug: "\f1e6";
+@fa-var-plus: "\f067";
+@fa-var-plus-circle: "\f055";
+@fa-var-plus-square: "\f0fe";
+@fa-var-plus-square-o: "\f196";
+@fa-var-power-off: "\f011";
+@fa-var-print: "\f02f";
+@fa-var-puzzle-piece: "\f12e";
+@fa-var-qq: "\f1d6";
+@fa-var-qrcode: "\f029";
+@fa-var-question: "\f128";
+@fa-var-question-circle: "\f059";
+@fa-var-quote-left: "\f10d";
+@fa-var-quote-right: "\f10e";
+@fa-var-ra: "\f1d0";
+@fa-var-random: "\f074";
+@fa-var-rebel: "\f1d0";
+@fa-var-recycle: "\f1b8";
+@fa-var-reddit: "\f1a1";
+@fa-var-reddit-square: "\f1a2";
+@fa-var-refresh: "\f021";
+@fa-var-remove: "\f00d";
+@fa-var-renren: "\f18b";
+@fa-var-reorder: "\f0c9";
+@fa-var-repeat: "\f01e";
+@fa-var-reply: "\f112";
+@fa-var-reply-all: "\f122";
+@fa-var-retweet: "\f079";
+@fa-var-rmb: "\f157";
+@fa-var-road: "\f018";
+@fa-var-rocket: "\f135";
+@fa-var-rotate-left: "\f0e2";
+@fa-var-rotate-right: "\f01e";
+@fa-var-rouble: "\f158";
+@fa-var-rss: "\f09e";
+@fa-var-rss-square: "\f143";
+@fa-var-rub: "\f158";
+@fa-var-ruble: "\f158";
+@fa-var-rupee: "\f156";
+@fa-var-save: "\f0c7";
+@fa-var-scissors: "\f0c4";
+@fa-var-search: "\f002";
+@fa-var-search-minus: "\f010";
+@fa-var-search-plus: "\f00e";
+@fa-var-sellsy: "\f213";
+@fa-var-send: "\f1d8";
+@fa-var-send-o: "\f1d9";
+@fa-var-server: "\f233";
+@fa-var-share: "\f064";
+@fa-var-share-alt: "\f1e0";
+@fa-var-share-alt-square: "\f1e1";
+@fa-var-share-square: "\f14d";
+@fa-var-share-square-o: "\f045";
+@fa-var-shekel: "\f20b";
+@fa-var-sheqel: "\f20b";
+@fa-var-shield: "\f132";
+@fa-var-ship: "\f21a";
+@fa-var-shirtsinbulk: "\f214";
+@fa-var-shopping-cart: "\f07a";
+@fa-var-sign-in: "\f090";
+@fa-var-sign-out: "\f08b";
+@fa-var-signal: "\f012";
+@fa-var-simplybuilt: "\f215";
+@fa-var-sitemap: "\f0e8";
+@fa-var-skyatlas: "\f216";
+@fa-var-skype: "\f17e";
+@fa-var-slack: "\f198";
+@fa-var-sliders: "\f1de";
+@fa-var-slideshare: "\f1e7";
+@fa-var-smile-o: "\f118";
+@fa-var-soccer-ball-o: "\f1e3";
+@fa-var-sort: "\f0dc";
+@fa-var-sort-alpha-asc: "\f15d";
+@fa-var-sort-alpha-desc: "\f15e";
+@fa-var-sort-amount-asc: "\f160";
+@fa-var-sort-amount-desc: "\f161";
+@fa-var-sort-asc: "\f0de";
+@fa-var-sort-desc: "\f0dd";
+@fa-var-sort-down: "\f0dd";
+@fa-var-sort-numeric-asc: "\f162";
+@fa-var-sort-numeric-desc: "\f163";
+@fa-var-sort-up: "\f0de";
+@fa-var-soundcloud: "\f1be";
+@fa-var-space-shuttle: "\f197";
+@fa-var-spinner: "\f110";
+@fa-var-spoon: "\f1b1";
+@fa-var-spotify: "\f1bc";
+@fa-var-square: "\f0c8";
+@fa-var-square-o: "\f096";
+@fa-var-stack-exchange: "\f18d";
+@fa-var-stack-overflow: "\f16c";
+@fa-var-star: "\f005";
+@fa-var-star-half: "\f089";
+@fa-var-star-half-empty: "\f123";
+@fa-var-star-half-full: "\f123";
+@fa-var-star-half-o: "\f123";
+@fa-var-star-o: "\f006";
+@fa-var-steam: "\f1b6";
+@fa-var-steam-square: "\f1b7";
+@fa-var-step-backward: "\f048";
+@fa-var-step-forward: "\f051";
+@fa-var-stethoscope: "\f0f1";
+@fa-var-stop: "\f04d";
+@fa-var-street-view: "\f21d";
+@fa-var-strikethrough: "\f0cc";
+@fa-var-stumbleupon: "\f1a4";
+@fa-var-stumbleupon-circle: "\f1a3";
+@fa-var-subscript: "\f12c";
+@fa-var-subway: "\f239";
+@fa-var-suitcase: "\f0f2";
+@fa-var-sun-o: "\f185";
+@fa-var-superscript: "\f12b";
+@fa-var-support: "\f1cd";
+@fa-var-table: "\f0ce";
+@fa-var-tablet: "\f10a";
+@fa-var-tachometer: "\f0e4";
+@fa-var-tag: "\f02b";
+@fa-var-tags: "\f02c";
+@fa-var-tasks: "\f0ae";
+@fa-var-taxi: "\f1ba";
+@fa-var-tencent-weibo: "\f1d5";
+@fa-var-terminal: "\f120";
+@fa-var-text-height: "\f034";
+@fa-var-text-width: "\f035";
+@fa-var-th: "\f00a";
+@fa-var-th-large: "\f009";
+@fa-var-th-list: "\f00b";
+@fa-var-thumb-tack: "\f08d";
+@fa-var-thumbs-down: "\f165";
+@fa-var-thumbs-o-down: "\f088";
+@fa-var-thumbs-o-up: "\f087";
+@fa-var-thumbs-up: "\f164";
+@fa-var-ticket: "\f145";
+@fa-var-times: "\f00d";
+@fa-var-times-circle: "\f057";
+@fa-var-times-circle-o: "\f05c";
+@fa-var-tint: "\f043";
+@fa-var-toggle-down: "\f150";
+@fa-var-toggle-left: "\f191";
+@fa-var-toggle-off: "\f204";
+@fa-var-toggle-on: "\f205";
+@fa-var-toggle-right: "\f152";
+@fa-var-toggle-up: "\f151";
+@fa-var-train: "\f238";
+@fa-var-transgender: "\f224";
+@fa-var-transgender-alt: "\f225";
+@fa-var-trash: "\f1f8";
+@fa-var-trash-o: "\f014";
+@fa-var-tree: "\f1bb";
+@fa-var-trello: "\f181";
+@fa-var-trophy: "\f091";
+@fa-var-truck: "\f0d1";
+@fa-var-try: "\f195";
+@fa-var-tty: "\f1e4";
+@fa-var-tumblr: "\f173";
+@fa-var-tumblr-square: "\f174";
+@fa-var-turkish-lira: "\f195";
+@fa-var-twitch: "\f1e8";
+@fa-var-twitter: "\f099";
+@fa-var-twitter-square: "\f081";
+@fa-var-umbrella: "\f0e9";
+@fa-var-underline: "\f0cd";
+@fa-var-undo: "\f0e2";
+@fa-var-university: "\f19c";
+@fa-var-unlink: "\f127";
+@fa-var-unlock: "\f09c";
+@fa-var-unlock-alt: "\f13e";
+@fa-var-unsorted: "\f0dc";
+@fa-var-upload: "\f093";
+@fa-var-usd: "\f155";
+@fa-var-user: "\f007";
+@fa-var-user-md: "\f0f0";
+@fa-var-user-plus: "\f234";
+@fa-var-user-secret: "\f21b";
+@fa-var-user-times: "\f235";
+@fa-var-users: "\f0c0";
+@fa-var-venus: "\f221";
+@fa-var-venus-double: "\f226";
+@fa-var-venus-mars: "\f228";
+@fa-var-viacoin: "\f237";
+@fa-var-video-camera: "\f03d";
+@fa-var-vimeo-square: "\f194";
+@fa-var-vine: "\f1ca";
+@fa-var-vk: "\f189";
+@fa-var-volume-down: "\f027";
+@fa-var-volume-off: "\f026";
+@fa-var-volume-up: "\f028";
+@fa-var-warning: "\f071";
+@fa-var-wechat: "\f1d7";
+@fa-var-weibo: "\f18a";
+@fa-var-weixin: "\f1d7";
+@fa-var-whatsapp: "\f232";
+@fa-var-wheelchair: "\f193";
+@fa-var-wifi: "\f1eb";
+@fa-var-windows: "\f17a";
+@fa-var-won: "\f159";
+@fa-var-wordpress: "\f19a";
+@fa-var-wrench: "\f0ad";
+@fa-var-xing: "\f168";
+@fa-var-xing-square: "\f169";
+@fa-var-yahoo: "\f19e";
+@fa-var-yelp: "\f1e9";
+@fa-var-yen: "\f157";
+@fa-var-youtube: "\f167";
+@fa-var-youtube-play: "\f16a";
+@fa-var-youtube-square: "\f166";
+
+// old aliases
+@glass: @fa-var-glass;
+@music: @fa-var-music;
+@search: @fa-var-search;
+@envelope-alt: @fa-var-envelope-o;
+@heart: @fa-var-heart;
+@star: @fa-var-star;
+@star-empty: @fa-var-star-o;
+@user: @fa-var-user;
+@film: @fa-var-film;
+@th-large: @fa-var-th-large;
+@th: @fa-var-th;
+@th-list: @fa-var-th-list;
+@ok: @fa-var-check;
+@remove: @fa-var-times;
+@zoom-in: @fa-var-search-plus;
+@zoom-out: @fa-var-search-minus;
+@off: @fa-var-power-off;
+@signal: @fa-var-signal;
+@cog: @fa-var-cog;
+@trash: @fa-var-trash-o;
+@home: @fa-var-home;
+@file-alt: @fa-var-file-o;
+@time: @fa-var-clock-o;
+@road: @fa-var-road;
+@download-alt: @fa-var-download;
+@download: @fa-var-arrow-circle-o-down;
+@upload: @fa-var-arrow-circle-o-up;
+@inbox: @fa-var-inbox;
+@play-circle: @fa-var-play-circle-o;
+@repeat: @fa-var-repeat;
+@refresh: @fa-var-refresh;
+@list-alt: @fa-var-list-alt;
+@lock: @fa-var-lock;
+@flag: @fa-var-flag;
+@headphones: @fa-var-headphones;
+@volume-off: @fa-var-volume-off;
+@volume-down: @fa-var-volume-down;
+@volume-up: @fa-var-volume-up;
+@qrcode: @fa-var-qrcode;
+@barcode: @fa-var-barcode;
+@tag: @fa-var-tag;
+@tags: @fa-var-tags;
+@book: @fa-var-book;
+@bookmark: @fa-var-bookmark;
+@print: @fa-var-print;
+@camera: @fa-var-camera;
+@font: @fa-var-font;
+@bold: @fa-var-bold;
+@italic: @fa-var-italic;
+@text-height: @fa-var-text-height;
+@text-width: @fa-var-text-width;
+@align-left: @fa-var-align-left;
+@align-center: @fa-var-align-center;
+@align-right: @fa-var-align-right;
+@align-justify: @fa-var-align-justify;
+@list: @fa-var-list;
+@indent-left: @fa-var-outdent;
+@indent-right: @fa-var-indent;
+@facetime-video: @fa-var-video-camera;
+@picture: @fa-var-picture-o;
+@pencil: @fa-var-pencil;
+@map-marker: @fa-var-map-marker;
+@adjust: @fa-var-adjust;
+@tint: @fa-var-tint;
+@edit: @fa-var-pencil-square-o;
+@share: @fa-var-share-square-o;
+@check: @fa-var-check-square-o;
+@move: @fa-var-arrows;
+@step-backward: @fa-var-step-backward;
+@fast-backward: @fa-var-fast-backward;
+@backward: @fa-var-backward;
+@play: @fa-var-play;
+@pause: @fa-var-pause;
+@stop: @fa-var-stop;
+@forward: @fa-var-forward;
+@fast-forward: @fa-var-fast-forward;
+@step-forward: @fa-var-step-forward;
+@eject: @fa-var-eject;
+@chevron-left: @fa-var-chevron-left;
+@chevron-right: @fa-var-chevron-right;
+@plus-sign: @fa-var-plus-circle;
+@minus-sign: @fa-var-minus-circle;
+@remove-sign: @fa-var-times-circle;
+@ok-sign: @fa-var-check-circle;
+@question-sign: @fa-var-question-circle;
+@info-sign: @fa-var-info-circle;
+@screenshot: @fa-var-crosshairs;
+@remove-circle: @fa-var-times-circle-o;
+@ok-circle: @fa-var-check-circle-o;
+@ban-circle: @fa-var-ban;
+@arrow-left: @fa-var-arrow-left;
+@arrow-right: @fa-var-arrow-right;
+@arrow-up: @fa-var-arrow-up;
+@arrow-down: @fa-var-arrow-down;
+@share-alt: @fa-var-share-alt;
+@resize-full: @fa-var-expand;
+@resize-small: @fa-var-compress;
+@plus: @fa-var-plus;
+@minus: @fa-var-minus;
+@asterisk: @fa-var-asterisk;
+@exclamation-sign: @fa-var-exclamation-circle;
+@gift: @fa-var-gift;
+@leaf: @fa-var-leaf;
+@fire: @fa-var-fire;
+@eye-open: @fa-var-eye;
+@eye-close: @fa-var-eye-slash;
+@warning-sign: @fa-var-exclamation-triangle;
+@plane: @fa-var-plane;
+@calendar: @fa-var-calendar;
+@random: @fa-var-random;
+@comment: @fa-var-comment;
+@magnet: @fa-var-magnet;
+@chevron-up: @fa-var-chevron-up;
+@chevron-down: @fa-var-chevron-down;
+@retweet: @fa-var-retweet;
+@shopping-cart: @fa-var-shopping-cart;
+@folder-close: @fa-var-folder;
+@folder-open: @fa-var-folder-open;
+@resize-vertical: @fa-var-arrows-v;
+@resize-horizontal: @fa-var-arrows-h;
+@bar-chart: @fa-var-bar-chart-o;
+@twitter-sign: @fa-var-twitter-square;
+@facebook-sign: @fa-var-facebook-square;
+@camera-retro: @fa-var-camera-retro;
+@key: @fa-var-key;
+@cogs: @fa-var-cogs;
+@comments: @fa-var-comments;
+@thumbs-up-alt: @fa-var-thumbs-o-up;
+@thumbs-down-alt: @fa-var-thumbs-o-down;
+@star-half: @fa-var-star-half;
+@heart-empty: @fa-var-heart-o;
+@signout: @fa-var-sign-out;
+@linkedin-sign: @fa-var-linkedin-square;
+@pushpin: @fa-var-thumb-tack;
+@external-link: @fa-var-external-link;
+@signin: @fa-var-sign-in;
+@trophy: @fa-var-trophy;
+@github-sign: @fa-var-github-square;
+@upload-alt: @fa-var-upload;
+@lemon: @fa-var-lemon-o;
+@phone: @fa-var-phone;
+@check-empty: @fa-var-square-o;
+@bookmark-empty: @fa-var-bookmark-o;
+@phone-sign: @fa-var-phone-square;
+@twitter: @fa-var-twitter;
+@facebook: @fa-var-facebook;
+@github: @fa-var-github;
+@unlock: @fa-var-unlock;
+@credit-card: @fa-var-credit-card;
+@rss: @fa-var-rss;
+@hdd: @fa-var-hdd-o;
+@bullhorn: @fa-var-bullhorn;
+@bell: @fa-var-bell-o;
+@certificate: @fa-var-certificate;
+@hand-right: @fa-var-hand-o-right;
+@hand-left: @fa-var-hand-o-left;
+@hand-up: @fa-var-hand-o-up;
+@hand-down: @fa-var-hand-o-down;
+@circle-arrow-left: @fa-var-arrow-circle-left;
+@circle-arrow-right: @fa-var-arrow-circle-right;
+@circle-arrow-up: @fa-var-arrow-circle-up;
+@circle-arrow-down: @fa-var-arrow-circle-down;
+@globe: @fa-var-globe;
+@wrench: @fa-var-wrench;
+@tasks: @fa-var-tasks;
+@filter: @fa-var-filter;
+@briefcase: @fa-var-briefcase;
+@fullscreen: @fa-var-arrows-alt;
+@group: @fa-var-users;
+@link: @fa-var-link;
+@cloud: @fa-var-cloud;
+@beaker: @fa-var-flask;
+@cut: @fa-var-scissors;
+@copy: @fa-var-files-o;
+@paper-clip: @fa-var-paperclip;
+@save: @fa-var-floppy-o;
+@sign-blank: @fa-var-square;
+@reorder: @fa-var-bars;
+@list-ul: @fa-var-list-ul;
+@list-ol: @fa-var-list-ol;
+@strikethrough: @fa-var-strikethrough;
+@underline: @fa-var-underline;
+@table: @fa-var-table;
+@magic: @fa-var-magic;
+@truck: @fa-var-truck;
+@pinterest: @fa-var-pinterest;
+@pinterest-sign: @fa-var-pinterest-square;
+@google-plus-sign: @fa-var-google-plus-square;
+@google-plus: @fa-var-google-plus;
+@money: @fa-var-money;
+@caret-down: @fa-var-caret-down;
+@caret-up: @fa-var-caret-up;
+@caret-left: @fa-var-caret-left;
+@caret-right: @fa-var-caret-right;
+@columns: @fa-var-columns;
+@sort: @fa-var-sort;
+@sort-down: @fa-var-sort-desc;
+@sort-up: @fa-var-sort-asc;
+@envelope: @fa-var-envelope;
+@linkedin: @fa-var-linkedin;
+@undo: @fa-var-undo;
+@legal: @fa-var-gavel;
+@dashboard: @fa-var-tachometer;
+@comment-alt: @fa-var-comment-o;
+@comments-alt: @fa-var-comments-o;
+@bolt: @fa-var-bolt;
+@sitemap: @fa-var-sitemap;
+@umbrella: @fa-var-umbrella;
+@paste: @fa-var-clipboard;
+@lightbulb: @fa-var-lightbulb-o;
+@exchange: @fa-var-exchange;
+@cloud-download: @fa-var-cloud-download;
+@cloud-upload: @fa-var-cloud-upload;
+@user-md: @fa-var-user-md;
+@stethoscope: @fa-var-stethoscope;
+@suitcase: @fa-var-suitcase;
+@bell-alt: @fa-var-bell;
+@coffee: @fa-var-coffee;
+@food: @fa-var-cutlery;
+@file-text-alt: @fa-var-file-text-o;
+@building: @fa-var-building-o;
+@hospital: @fa-var-hospital-o;
+@ambulance: @fa-var-ambulance;
+@medkit: @fa-var-medkit;
+@fighter-jet: @fa-var-fighter-jet;
+@beer: @fa-var-beer;
+@h-sign: @fa-var-h-square;
+@plus-sign-alt: @fa-var-plus-square;
+@double-angle-left: @fa-var-angle-double-left;
+@double-angle-right: @fa-var-angle-double-right;
+@double-angle-up: @fa-var-angle-double-up;
+@double-angle-down: @fa-var-angle-double-down;
+@angle-left: @fa-var-angle-left;
+@angle-right: @fa-var-angle-right;
+@angle-up: @fa-var-angle-up;
+@angle-down: @fa-var-angle-down;
+@desktop: @fa-var-desktop;
+@laptop: @fa-var-laptop;
+@tablet: @fa-var-tablet;
+@mobile-phone: @fa-var-mobile;
+@circle-blank: @fa-var-circle-o;
+@quote-left: @fa-var-quote-left;
+@quote-right: @fa-var-quote-right;
+@spinner: @fa-var-spinner;
+@circle: @fa-var-circle;
+@reply: @fa-var-reply;
+@github-alt: @fa-var-github-alt;
+@folder-close-alt: @fa-var-folder-o;
+@folder-open-alt: @fa-var-folder-open-o;
+@expand-alt: @fa-var-plus-square-o;
+@collapse-alt: @fa-var-minus-square-o;
+@smile: @fa-var-smile-o;
+@frown: @fa-var-frown-o;
+@meh: @fa-var-meh-o;
+@gamepad: @fa-var-gamepad;
+@keyboard: @fa-var-keyboard-o;
+@flag-alt: @fa-var-flag-o;
+@flag-checkered: @fa-var-flag-checkered;
+@terminal: @fa-var-terminal;
+@code: @fa-var-code;
+@reply-all: @fa-var-reply-all;
+@mail-reply-all: @fa-var-reply-all;
+@star-half-empty: @fa-var-star-half-o;
+@location-arrow: @fa-var-location-arrow;
+@crop: @fa-var-crop;
+@code-fork: @fa-var-code-fork;
+@unlink: @fa-var-chain-broken;
+@question: @fa-var-question;
+@info: @fa-var-info;
+@exclamation: @fa-var-exclamation;
+@superscript: @fa-var-superscript;
+@subscript: @fa-var-subscript;
+@eraser: @fa-var-eraser;
+@puzzle-piece: @fa-var-puzzle-piece;
+@microphone: @fa-var-microphone;
+@microphone-off: @fa-var-microphone-slash;
+@shield: @fa-var-shield;
+@calendar-empty: @fa-var-calendar-o;
+@fire-extinguisher: @fa-var-fire-extinguisher;
+@rocket: @fa-var-rocket;
+@maxcdn: @fa-var-maxcdn;
+@chevron-sign-left: @fa-var-chevron-left;
+@chevron-sign-right: @fa-var-chevron-right;
+@chevron-sign-up: @fa-var-chevron-up;
+@chevron-sign-down: @fa-var-chevron-down;
+@html5: @fa-var-html5;
+@css3: @fa-var-css3;
+@anchor: @fa-var-anchor;
+@unlock-alt: @fa-var-unlock-alt;
+@bullseye: @fa-var-bullseye;
+@ellipsis-horizontal: @fa-var-ellipsis-h;
+@ellipsis-vertical: @fa-var-ellipsis-v;
+@rss-sign: @fa-var-rss-square;
+@play-sign: @fa-var-play-circle;
+@ticket: @fa-var-ticket;
+@minus-sign-alt: @fa-var-minus-square;
+@check-minus: @fa-var-minus-square-o;
+@level-up: @fa-var-level-up;
+@level-down: @fa-var-level-down;
+@check-sign: @fa-var-check-square;
+@edit-sign: @fa-var-pencil-square;
+@external-link-sign: @fa-var-external-link-square;
+@share-sign: @fa-var-share-square;
+@compass: @fa-var-compass;
+@collapse: @fa-var-caret-square-o-down;
+@collapse-top: @fa-var-caret-square-o-up;
+@expand: @fa-var-caret-square-o-right;
+@eur: @fa-var-eur;
+@gbp: @fa-var-gbp;
+@usd: @fa-var-usd;
+@inr: @fa-var-inr;
+@jpy: @fa-var-jpy;
+@cny: @fa-var-rub;
+@krw: @fa-var-krw;
+@btc: @fa-var-btc;
+@file: @fa-var-file;
+@file-text: @fa-var-file-text;
+@sort-by-alphabet: @fa-var-sort-alpha-asc;
+@sort-by-alphabet-alt: @fa-var-sort-alpha-desc;
+@sort-by-attributes: @fa-var-sort-amount-asc;
+@sort-by-attributes-alt: @fa-var-sort-amount-desc;
+@sort-by-order: @fa-var-sort-numeric-asc;
+@sort-by-order-alt: @fa-var-sort-numeric-desc;
+@thumbs-up: @fa-var-thumbs-up;
+@thumbs-down: @fa-var-thumbs-down;
+@youtube-sign: @fa-var-youtube-square;
+@youtube: @fa-var-youtube;
+@xing: @fa-var-xing;
+@xing-sign: @fa-var-xing-square;
+@youtube-play: @fa-var-youtube-play;
+@dropbox: @fa-var-dropbox;
+@stackexchange: @fa-var-stack-overflow;
+@instagram: @fa-var-instagram;
+@flickr: @fa-var-flickr;
+@adn: @fa-var-adn;
+@bitbucket: @fa-var-bitbucket;
+@bitbucket-sign: @fa-var-bitbucket-square;
+@tumblr: @fa-var-tumblr;
+@tumblr-sign: @fa-var-tumblr-square;
+@long-arrow-down: @fa-var-long-arrow-down;
+@long-arrow-up: @fa-var-long-arrow-up;
+@long-arrow-left: @fa-var-long-arrow-left;
+@long-arrow-right: @fa-var-long-arrow-right;
+@apple: @fa-var-apple;
+@windows: @fa-var-windows;
+@android: @fa-var-android;
+@linux: @fa-var-linux;
+@dribbble: @fa-var-dribbble;
+@skype: @fa-var-skype;
+@foursquare: @fa-var-foursquare;
+@trello: @fa-var-trello;
+@female: @fa-var-female;
+@male: @fa-var-male;
+@gittip: @fa-var-gittip;
+@sun: @fa-var-sun-o;
+@moon: @fa-var-moon-o;
+@archive: @fa-var-archive;
+@bug: @fa-var-bug;
+@vk: @fa-var-vk;
+@weibo: @fa-var-weibo;
+@renren: @fa-var-renren;
+// /old aliases
+
+/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
+ readers do not read off random characters that represent icons */
+.icon-glass:before, .fa-glass:before { content: @glass; }
+.icon-music:before, .fa-music:before { content: @music; }
+.icon-search:before, .fa-search:before { content: @search; }
+.icon-envelope-alt:before, .fa-envelope-o:before { content: @envelope-alt; }
+.icon-heart:before, .fa-heart:before { content: @heart; }
+.icon-star:before, .fa-star:before { content: @star; }
+.icon-star-empty:before, .fa-star-o:before { content: @star-empty; }
+.icon-user:before, .fa-user:before { content: @user; }
+.icon-film:before, .fa-film:before { content: @film; }
+.icon-th-large:before, .fa-th-large:before { content: @th-large; }
+.icon-th:before, .fa-th:before { content: @th; }
+.icon-th-list:before, .fa-th-list:before { content: @th-list; }
+.icon-ok:before, .fa-check:before { content: @ok; }
+.icon-remove:before, .fa-times:before { content: @remove; }
+.icon-zoom-in:before, .fa-search-plus:before { content: @zoom-in; }
+.icon-zoom-out:before, .fa-search-minus:before { content: @zoom-out; }
+.icon-power-off:before, .fa-power-off:before,
+.icon-off:before, .fa-power-off:before { content: @off; }
+.icon-signal:before, .fa-signal:before { content: @signal; }
+.icon-gear:before, .fa-gear:before,
+.icon-cog:before, .fa-cog:before { content: @cog; }
+.icon-trash:before, .fa-trash-o:before { content: @trash; }
+.icon-home:before, .fa-home:before { content: @home; }
+.icon-file-alt:before, .fa-file-o:before { content: @file-alt; }
+.icon-time:before, .fa-clock-o:before { content: @time; }
+.icon-road:before, .fa-road:before { content: @road; }
+.icon-download-alt:before, .fa-download:before { content: @download-alt; }
+.icon-download:before, .fa-arrow-circle-o-down:before { content: @download; }
+.icon-upload:before, .fa-arrow-circle-o-up:before { content: @upload; }
+.icon-inbox:before, .fa-inbox:before { content: @inbox; }
+.icon-play-circle:before, .fa-play-circle-o:before { content: @play-circle; }
+.icon-rotate-right:before, .fa-rotate-right:before,
+.icon-repeat:before, .fa-repeat:before { content: @repeat; }
+.icon-refresh:before, .fa-refresh:before { content: @refresh; }
+.icon-list-alt:before, .fa-list-alt:before { content: @list-alt; }
+.icon-lock:before, .fa-lock:before { content: @lock; }
+.icon-flag:before, .fa-flag:before { content: @flag; }
+.icon-headphones:before, .fa-headphones:before { content: @headphones; }
+.icon-volume-off:before, .fa-volume-off:before { content: @volume-off; }
+.icon-volume-down:before, .fa-volume-down:before { content: @volume-down; }
+.icon-volume-up:before, .fa-volume-up:before { content: @volume-up; }
+.icon-qrcode:before, .fa-qrcode:before { content: @qrcode; }
+.icon-barcode:before, .fa-barcode:before { content: @barcode; }
+.icon-tag:before, .fa-tag:before { content: @tag; }
+.icon-tags:before, .fa-tags:before { content: @tags; }
+.icon-book:before, .fa-book:before { content: @book; }
+.icon-bookmark:before, .fa-bookmark:before { content: @bookmark; }
+.icon-print:before, .fa-print:before { content: @print; }
+.icon-camera:before, .fa-camera:before { content: @camera; }
+.icon-font:before, .fa-font:before { content: @font; }
+.icon-bold:before, .fa-bold:before { content: @bold; }
+.icon-italic:before, .fa-italic:before { content: @italic; }
+.icon-text-height:before, .fa-text-height:before { content: @text-height; }
+.icon-text-width:before, .fa-text-width:before { content: @text-width; }
+.icon-align-left:before, .fa-align-left:before { content: @align-left; }
+.icon-align-center:before, .fa-align-center:before { content: @align-center; }
+.icon-align-right:before, .fa-align-right:before { content: @align-right; }
+.icon-align-justify:before, .fa-align-justify:before { content: @align-justify; }
+.icon-list:before, .fa-list:before { content: @list; }
+.icon-indent-left:before, .fa-outdent:before { content: @indent-left; }
+.icon-indent-right:before, .fa-indent:before { content: @indent-right; }
+.icon-facetime-video:before, .fa-video-camera:before { content: @facetime-video; }
+.icon-picture:before, .fa-picture-o:before { content: @picture; }
+.icon-pencil:before, .fa-pencil:before { content: @pencil; }
+.icon-map-marker:before, .fa-map-marker:before { content: @map-marker; }
+.icon-adjust:before, .fa-adjust:before { content: @adjust; }
+.icon-tint:before, .fa-tint:before { content: @tint; }
+.icon-edit:before, .fa-pencil-square-o:before { content: @edit; }
+.icon-share:before, .fa-share-square-o:before { content: @share; }
+.icon-check:before, .fa-check-square-o:before { content: @check; }
+.icon-move:before, .fa-arrows:before { content: @move; }
+.icon-step-backward:before, .fa-step-backward:before { content: @step-backward; }
+.icon-fast-backward:before, .fa-fast-backward:before { content: @fast-backward; }
+.icon-backward:before, .fa-backward:before { content: @backward; }
+.icon-play:before, .fa-play:before { content: @play; }
+.icon-pause:before, .fa-pause:before { content: @pause; }
+.icon-stop:before, .fa-stop:before { content: @stop; }
+.icon-forward:before, .fa-forward:before { content: @forward; }
+.icon-fast-forward:before, .fa-fast-forward:before { content: @fast-forward; }
+.icon-step-forward:before, .fa-step-forward:before { content: @step-forward; }
+.icon-eject:before, .fa-eject:before { content: @eject; }
+.icon-chevron-left:before, .fa-chevron-left:before { content: @chevron-left; }
+.icon-chevron-right:before, .fa-chevron-right:before { content: @chevron-right; }
+.icon-plus-sign:before, .fa-plus-circle:before { content: @plus-sign; }
+.icon-minus-sign:before, .fa-minus-circle:before { content: @minus-sign; }
+.icon-remove-sign:before, .fa-times-circle:before { content: @remove-sign; }
+.icon-ok-sign:before, .fa-check-circle:before { content: @ok-sign; }
+.icon-question-sign:before, .fa-question-circle:before { content: @question-sign; }
+.icon-info-sign:before, .fa-info-circle:before { content: @info-sign; }
+.icon-screenshot:before, .fa-crosshairs:before { content: @screenshot; }
+.icon-remove-circle:before, .fa-times-circle-o:before { content: @remove-circle; }
+.icon-ok-circle:before, .fa-check-circle-o:before { content: @ok-circle; }
+.icon-ban-circle:before, .fa-ban:before { content: @ban-circle; }
+.icon-arrow-left:before, .fa-arrow-left:before { content: @arrow-left; }
+.icon-arrow-right:before, .fa-arrow-right:before { content: @arrow-right; }
+.icon-arrow-up:before, .fa-arrow-up:before { content: @arrow-up; }
+.icon-arrow-down:before, .fa-arrow-down:before { content: @arrow-down; }
+.icon-mail-forward:before, .fa-mail-forward:before,
+.icon-share-alt:before, .fa-share:before { content: @share-alt; }
+.icon-resize-full:before, .fa-expand:before { content: @resize-full; }
+.icon-resize-small:before, .fa-compress:before { content: @resize-small; }
+.icon-plus:before, .fa-plus:before { content: @plus; }
+.icon-minus:before, .fa-minus:before { content: @minus; }
+.icon-asterisk:before, .fa-asterisk:before { content: @asterisk; }
+.icon-exclamation-sign:before, .fa-exclamation-circle:before { content: @exclamation-sign; }
+.icon-gift:before, .fa-gift:before { content: @gift; }
+.icon-leaf:before, .fa-leaf:before { content: @leaf; }
+.icon-fire:before, .fa-fire:before { content: @fire; }
+.icon-eye-open:before, .fa-eye:before { content: @eye-open; }
+.icon-eye-close:before, .fa-eye-slash:before { content: @eye-close; }
+.icon-warning-sign:before, .fa-exclamation-triangle:before { content: @warning-sign; }
+.icon-plane:before, .fa-plane:before { content: @plane; }
+.icon-calendar:before, .fa-calendar:before { content: @calendar; }
+.icon-random:before, .fa-random:before { content: @random; }
+.icon-comment:before, .fa-comment:before { content: @comment; }
+.icon-magnet:before, .fa-magnet:before { content: @magnet; }
+.icon-chevron-up:before, .fa-chevron-up:before { content: @chevron-up; }
+.icon-chevron-down:before, .fa-chevron-down:before { content: @chevron-down; }
+.icon-retweet:before, .fa-retweet:before { content: @retweet; }
+.icon-shopping-cart:before, .fa-shopping-cart:before { content: @shopping-cart; }
+.icon-folder-close:before, .fa-folder:before { content: @folder-close; }
+.icon-folder-open:before, .fa-folder-open:before { content: @folder-open; }
+.icon-resize-vertical:before, .fa-arrows-v:before { content: @resize-vertical; }
+.icon-resize-horizontal:before, .fa-arrows-h:before { content: @resize-horizontal; }
+.icon-bar-chart:before, .fa-bar-chart:before, .fa-bar-chart-o:before { content: @bar-chart; }
+.icon-twitter-sign:before, .fa-twitter-square:before { content: @twitter-sign; }
+.icon-facebook-sign:before, .fa-facebook-square:before { content: @facebook-sign; }
+.icon-camera-retro:before, .fa-camera-retro:before { content: @camera-retro; }
+.icon-key:before, .fa-key:before { content: @key; }
+.icon-gears:before, .fa-gears:before,
+.icon-cogs:before, .fa-cogs:before { content: @cogs; }
+.icon-comments:before, .fa-comments:before { content: @comments; }
+.icon-thumbs-up-alt:before, .fa-thumbs-o-up:before { content: @thumbs-up-alt; }
+.icon-thumbs-down-alt:before, .fa-thumbs-o-down:before { content: @thumbs-down-alt; }
+.icon-star-half:before, .fa-star-half:before { content: @star-half; }
+.icon-heart-empty:before, .fa-heart-o:before { content: @heart-empty; }
+.icon-signout:before, .fa-sign-out:before { content: @signout; }
+.icon-linkedin-sign:before, .fa-linkedin-square:before { content: @linkedin-sign; }
+.icon-pushpin:before, .fa-thumb-tack:before { content: @pushpin; }
+.icon-external-link:before, .fa-external-link:before { content: @external-link; }
+.icon-signin:before, .fa-sign-in:before { content: @signin; }
+.icon-trophy:before, .fa-trophy:before { content: @trophy; }
+.icon-github-sign:before, .fa-github-square:before { content: @github-sign; }
+.icon-upload-alt:before, .fa-upload:before { content: @upload-alt; }
+.icon-lemon:before, .fa-lemon-o:before { content: @lemon; }
+.icon-phone:before, .fa-phone:before { content: @phone; }
+.icon-unchecked:before, .fa-unchecked:before, .icon-check-empty:before { content: @check-empty; }
+.icon-bookmark-empty:before, .fa-bookmark-o:before { content: @bookmark-empty; }
+.icon-phone-sign:before, .fa-phone-square:before { content: @phone-sign; }
+.icon-twitter:before, .fa-twitter:before { content: @twitter; }
+.icon-facebook:before, .fa-facebook-f:before, .fa-facebook:before { content: @facebook; }
+.icon-github:before, .fa-github:before { content: @github; }
+.icon-unlock:before, .fa-unlock:before { content: @unlock; }
+.icon-credit-card:before, .fa-credit-card:before { content: @credit-card; }
+.icon-rss:before, .fa-rss:before { content: @rss; }
+.icon-hdd:before, .fa-hdd-o:before { content: @hdd; }
+.icon-bullhorn:before, .fa-bullhorn:before { content: @bullhorn; }
+.icon-bell:before, .fa-bell-o:before { content: @bell; }
+.icon-certificate:before, .fa-certificate:before { content: @certificate; }
+.icon-hand-right:before, .fa-hand-o-right:before { content: @hand-right; }
+.icon-hand-left:before, .fa-hand-o-left:before { content: @hand-left; }
+.icon-hand-up:before, .fa-hand-o-up:before { content: @hand-up; }
+.icon-hand-down:before, .fa-hand-o-down:before { content: @hand-down; }
+.icon-circle-arrow-left:before, .fa-arrow-circle-left:before { content: @circle-arrow-left; }
+.icon-circle-arrow-right:before, .fa-arrow-circle-right:before { content: @circle-arrow-right; }
+.icon-circle-arrow-up:before, .fa-arrow-circle-up:before { content: @circle-arrow-up; }
+.icon-circle-arrow-down:before, .fa-arrow-circle-down:before { content: @circle-arrow-down; }
+.icon-globe:before, .fa-globe:before { content: @globe; }
+.icon-wrench:before, .fa-wrench:before { content: @wrench; }
+.icon-tasks:before, .fa-tasks:before { content: @tasks; }
+.icon-filter:before, .fa-filter:before { content: @filter; }
+.icon-briefcase:before, .fa-briefcase:before { content: @briefcase; }
+.icon-fullscreen:before, .fa-arrows-alt:before { content: @fullscreen; }
+.icon-group:before, .fa-users:before { content: @group; }
+.icon-link:before, .fa-link:before { content: @link; }
+.icon-cloud:before, .fa-cloud:before { content: @cloud; }
+.icon-beaker:before, .fa-flask:before { content: @beaker; }
+.icon-cut:before, .fa-scissors:before { content: @cut; }
+.icon-copy:before, .fa-files-o:before { content: @copy; }
+.icon-paperclip:before, .fa-paperclip:before,
+.icon-paper-clip:before, .fa-paperclip:before { content: @paper-clip; }
+.icon-save:before, .fa-floppy-o:before { content: @save; }
+.icon-sign-blank:before, .fa-square:before { content: @sign-blank; }
+.icon-reorder:before, .fa-bars:before { content: @reorder; }
+.icon-list-ul:before, .fa-list-ul:before { content: @list-ul; }
+.icon-list-ol:before, .fa-list-ol:before { content: @list-ol; }
+.icon-strikethrough:before, .fa-strikethrough:before { content: @strikethrough; }
+.icon-underline:before, .fa-underline:before { content: @underline; }
+.icon-table:before, .fa-table:before { content: @table; }
+.icon-magic:before, .fa-magic:before { content: @magic; }
+.icon-truck:before, .fa-truck:before { content: @truck; }
+.icon-pinterest:before, .fa-pinterest:before { content: @pinterest; }
+.icon-pinterest-sign:before, .fa-pinterest-square:before { content: @pinterest-sign; }
+.icon-google-plus-sign:before, .fa-google-plus-square:before { content: @google-plus-sign; }
+.icon-google-plus:before, .fa-google-plus:before { content: @google-plus; }
+.icon-money:before, .fa-money:before { content: @money; }
+.icon-caret-down:before, .fa-caret-down:before { content: @caret-down; }
+.icon-caret-up:before, .fa-caret-up:before { content: @caret-up; }
+.icon-caret-left:before, .fa-caret-left:before { content: @caret-left; }
+.icon-caret-right:before, .fa-caret-right:before { content: @caret-right; }
+.icon-columns:before, .fa-columns:before { content: @columns; }
+.icon-sort:before, .fa-sort:before { content: @sort; }
+.icon-sort-down:before, .fa-sort-asc:before { content: @sort-down; }
+.icon-sort-up:before, .fa-sort-desc:before { content: @sort-up; }
+.icon-envelope:before, .fa-envelope:before { content: @envelope; }
+.icon-linkedin:before, .fa-linkedin:before { content: @linkedin; }
+.icon-rotate-left:before, .fa-rotate-left:before,
+.icon-undo:before, .fa-undo:before { content: @undo; }
+.icon-legal:before, .fa-gavel:before { content: @legal; }
+.icon-dashboard:before, .fa-tachometer:before { content: @dashboard; }
+.icon-comment-alt:before, .fa-comment-o:before { content: @comment-alt; }
+.icon-comments-alt:before, .fa-comments-o:before { content: @comments-alt; }
+.icon-bolt:before, .fa-bolt:before { content: @bolt; }
+.icon-sitemap:before, .fa-sitemap:before { content: @sitemap; }
+.icon-umbrella:before, .fa-umbrella:before { content: @umbrella; }
+.icon-paste:before, .fa-clipboard:before { content: @paste; }
+.icon-lightbulb:before, .fa-lightbulb-o:before { content: @lightbulb; }
+.icon-exchange:before, .fa-exchange:before { content: @exchange; }
+.icon-cloud-download:before, .fa-cloud-download:before { content: @cloud-download; }
+.icon-cloud-upload:before, .fa-cloud-upload:before { content: @cloud-upload; }
+.icon-user-md:before, .fa-user-md:before { content: @user-md; }
+.icon-stethoscope:before, .fa-stethoscope:before { content: @stethoscope; }
+.icon-suitcase:before, .fa-suitcase:before { content: @suitcase; }
+.icon-bell-alt:before, .fa-bell:before { content: @bell-alt; }
+.icon-coffee:before, .fa-coffee:before { content: @coffee; }
+.icon-food:before, .fa-cutlery:before { content: @food; }
+.icon-file-text-alt:before, .fa-file-text-o:before { content: @file-text-alt; }
+.icon-building:before, .fa-building-o:before { content: @building; }
+.icon-hospital:before, .fa-hospital-o:before { content: @hospital; }
+.icon-ambulance:before, .fa-ambulance:before { content: @ambulance; }
+.icon-medkit:before, .fa-medkit:before { content: @medkit; }
+.icon-fighter-jet:before, .fa-fighter-jet:before { content: @fighter-jet; }
+.icon-beer:before, .fa-beer:before { content: @beer; }
+.icon-h-sign:before, .fa-h-square:before { content: @h-sign; }
+.icon-plus-sign-alt:before, .fa-plus-square:before { content: @plus-sign-alt; }
+.icon-double-angle-left:before, .fa-angle-double-left:before { content: @double-angle-left; }
+.icon-double-angle-right:before, .fa-angle-double-right:before { content: @double-angle-right; }
+.icon-double-angle-up:before, .fa-angle-double-up:before { content: @double-angle-up; }
+.icon-double-angle-down:before, .fa-angle-double-down:before { content: @double-angle-down; }
+.icon-angle-left:before, .fa-angle-left:before { content: @angle-left; }
+.icon-angle-right:before, .fa-angle-right:before { content: @angle-right; }
+.icon-angle-up:before, .fa-angle-up:before { content: @angle-up; }
+.icon-angle-down:before, .fa-angle-down:before { content: @angle-down; }
+.icon-desktop:before, .fa-desktop:before { content: @desktop; }
+.icon-laptop:before, .fa-laptop:before { content: @laptop; }
+.icon-tablet:before, .fa-tablet:before { content: @tablet; }
+.icon-mobile-phone:before, .fa-mobile:before { content: @mobile-phone; }
+.icon-circle-blank:before, .fa-circle-o:before { content: @circle-blank; }
+.icon-quote-left:before, .fa-quote-left:before { content: @quote-left; }
+.icon-quote-right:before, .fa-quote-right:before { content: @quote-right; }
+.icon-spinner:before, .fa-spinner:before { content: @spinner !important; }
+.icon-circle:before, .fa-circle:before { content: @circle; }
+.icon-mail-reply:before, .fa-mail-reply:before,
+.icon-reply:before, .fa-reply:before { content: @reply; }
+.icon-github-alt:before, .fa-github-alt:before { content: @github-alt; }
+.icon-folder-close-alt:before, .fa-folder-o:before { content: @folder-close-alt; }
+.icon-folder-open-alt:before, .fa-folder-open-o:before { content: @folder-open-alt; }
+.icon-expand-alt:before, .fa-expand-o:before { content: @expand-alt; }
+.icon-collapse-alt:before, .fa-square-o:before { content: @check-empty; }
+.icon-smile:before, .fa-smile-o:before { content: @smile; }
+.icon-frown:before, .fa-frown-o:before { content: @frown; }
+.icon-meh:before, .fa-meh-o:before { content: @meh; }
+.icon-gamepad:before, .fa-gamepad:before { content: @gamepad; }
+.icon-keyboard:before, .fa-keyboard-o:before { content: @keyboard; }
+.icon-flag-alt:before, .fa-flag-o:before { content: @flag-alt; }
+.icon-flag-checkered:before, .fa-flag-checkered:before { content: @flag-checkered; }
+.icon-terminal:before, .fa-terminal:before { content: @terminal; }
+.icon-code:before, .fa-code:before { content: @code; }
+.icon-reply-all:before, .fa-reply-all:before, .icon-mail-reply-all:before, .fa-mail-reply-all:before { content: @reply-all; }
+.icon-star-half-full:before, .fa-star-half-full:before,
+.icon-star-half-empty:before, .fa-star-half-o:before { content: @star-half-empty; }
+.icon-location-arrow:before, .fa-location-arrow:before { content: @location-arrow; }
+.icon-crop:before, .fa-crop:before { content: @crop; }
+.icon-code-fork:before, .fa-code-fork:before { content: @code-fork; }
+.icon-unlink:before, .fa-chain-broken:before { content: @unlink; }
+.icon-question:before, .fa-question:before { content: @question; }
+.icon-info:before, .fa-info:before { content: @info; }
+.icon-exclamation:before, .fa-exclamation:before { content: @exclamation; }
+.icon-superscript:before, .fa-superscript:before { content: @superscript; }
+.icon-subscript:before, .fa-subscript:before { content: @subscript; }
+.icon-eraser:before, .fa-eraser:before { content: @eraser; }
+.icon-puzzle-piece:before, .fa-puzzle-piece:before { content: @puzzle-piece; }
+.icon-microphone:before, .fa-microphone:before { content: @microphone; }
+.icon-microphone-off:before, .fa-microphone-slash:before { content: @microphone-off; }
+.icon-shield:before, .fa-shield:before { content: @shield; }
+.icon-calendar-empty:before, .fa-calendar-o:before { content: @calendar-empty; }
+.icon-fire-extinguisher:before, .fa-fire-extinguisher:before { content: @fire-extinguisher; }
+.icon-rocket:before, .fa-rocket:before { content: @rocket; }
+.icon-maxcdn:before, .fa-maxcdn:before { content: @maxcdn; }
+.icon-chevron-sign-left:before, .fa-chevron-circle-left:before { content: @fa-var-chevron-circle-left; }
+.icon-chevron-sign-right:before, .fa-chevron-circle-right:before { content: @fa-var-chevron-circle-right; }
+.icon-chevron-sign-up:before, .fa-chevron-circle-up:before { content: @fa-var-chevron-circle-up; }
+.icon-chevron-sign-down:before, .fa-chevron-circle-down:before { content: @fa-var-chevron-circle-down; }
+.icon-html5:before, .fa-html5:before { content: @html5; }
+.icon-css3:before, .fa-css3:before { content: @css3; }
+.icon-anchor:before, .fa-anchor:before { content: @anchor; }
+.icon-unlock-alt:before, .fa-unlock-alt:before { content: @unlock-alt; }
+.icon-bullseye:before, .fa-bullseye:before { content: @bullseye; }
+.icon-ellipsis-horizontal:before, .fa-ellipsis-h:before { content: @ellipsis-horizontal; }
+.icon-ellipsis-vertical:before, .fa-ellipsis-v:before { content: @ellipsis-vertical; }
+.icon-rss-sign:before, .fa-rss-square:before { content: @rss-sign; }
+.icon-play-sign:before, .fa-play-circle:before { content: @play-sign; }
+.icon-ticket:before, .fa-ticket:before { content: @ticket; }
+.icon-minus-sign-alt:before, .fa-minus-square:before { content: @minus-sign-alt; }
+.icon-check-minus:before, .fa-minus-square-o:before { content: @check-minus; }
+.icon-level-up:before, .fa-level-up:before { content: @level-up; }
+.icon-level-down:before, .fa-level-down:before { content: @level-down; }
+.icon-check-sign:before, .fa-check-square:before { content: @check-sign; }
+.icon-edit-sign:before, .fa-pencil-square:before { content: @edit-sign; }
+.icon-external-link-sign:before, .fa-external-link-square:before { content: @external-link-sign; }
+.icon-share-sign:before, .fa-share-square:before { content: @share-sign; }
+.icon-compass:before, .fa-compass:before { content: @compass; }
+.icon-collapse:before, .fa-caret-square-o-down:before { content: @collapse; }
+.icon-collapse-top:before, .fa-caret-square-o-up:before { content: @collapse-top; }
+.icon-expand:before, .fa-caret-square-o-right:before { content: @expand; }
+.icon-euro:before, .fa-euro:before,
+.icon-eur:before, .fa-eur:before { content: @eur; }
+.icon-gbp:before, .fa-gbp:before { content: @gbp; }
+.icon-dollar:before, .fa-dollar:before,
+.icon-usd:before, .fa-usd:before { content: @usd; }
+.icon-rupee:before, .fa-rupee:before,
+.icon-inr:before, .fa-inr:before { content: @inr; }
+.icon-yen:before, .fa-yen:before,
+.icon-jpy:before, .fa-jpy:before { content: @jpy; }
+.icon-renminbi:before, .fa-renminbi:before,
+.icon-cny:before, .fa-rub:before { content: @cny; }
+.icon-won:before, .fa-won:before,
+.icon-krw:before, .fa-krw:before { content: @krw; }
+.icon-bitcoin:before, .fa-bitcoin:before,
+.icon-btc:before, .fa-btc:before { content: @btc; }
+.icon-file:before, .fa-file:before { content: @file; }
+.icon-file-text:before, .fa-file-text:before { content: @file-text; }
+.icon-sort-by-alphabet:before, .fa-sort-alpha-asc:before { content: @sort-by-alphabet; }
+.icon-sort-by-alphabet-alt:before, .fa-sort-alpha-desc:before { content: @sort-by-alphabet-alt; }
+.icon-sort-by-attributes:before, .fa-sort-amount-asc:before { content: @sort-by-attributes; }
+.icon-sort-by-attributes-alt:before, .fa-sort-amount-desc:before { content: @sort-by-attributes-alt; }
+.icon-sort-by-order:before, .fa-sort-numeric-asc:before { content: @sort-by-order; }
+.icon-sort-by-order-alt:before, .fa-sort-numeric-desc:before { content: @sort-by-order-alt; }
+.icon-thumbs-up:before, .fa-thumbs-up:before { content: @thumbs-up; }
+.icon-thumbs-down:before, .fa-thumbs-down:before { content: @thumbs-down; }
+.icon-youtube-sign:before, .fa-youtube-square:before { content: @youtube-sign; }
+.icon-youtube:before, .fa-youtube:before { content: @youtube; }
+.icon-xing:before, .fa-xing:before { content: @xing; }
+.icon-xing-sign:before, .fa-xing-square:before { content: @xing-sign; }
+.icon-youtube-play:before, .fa-youtube-play:before { content: @youtube-play; }
+.icon-dropbox:before, .fa-dropbox:before { content: @dropbox; }
+.icon-stackexchange:before, .fa-stack-overflow:before { content: @stackexchange; }
+.icon-instagram:before, .fa-instagram:before { content: @instagram; }
+.icon-flickr:before, .fa-flickr:before { content: @flickr; }
+.icon-adn:before, .fa-adn:before { content: @adn; }
+.icon-bitbucket:before, .fa-bitbucket:before { content: @bitbucket; }
+.icon-bitbucket-sign:before, .fa-bitbucket-square:before { content: @bitbucket-sign; }
+.icon-tumblr:before, .fa-tumblr:before { content: @tumblr; }
+.icon-tumblr-sign:before, .fa-tumblr-square:before { content: @tumblr-sign; }
+.icon-long-arrow-down:before, .fa-long-arrow-down:before { content: @long-arrow-down; }
+.icon-long-arrow-up:before, .fa-long-arrow-up:before { content: @long-arrow-up; }
+.icon-long-arrow-left:before, .fa-long-arrow-left:before { content: @long-arrow-left; }
+.icon-long-arrow-right:before, .fa-long-arrow-right:before { content: @long-arrow-right; }
+.icon-apple:before, .fa-apple:before { content: @apple; }
+.icon-windows:before, .fa-windows:before { content: @windows; }
+.icon-android:before, .fa-android:before { content: @android; }
+.icon-linux:before, .fa-linux:before { content: @linux; }
+.icon-dribbble:before, .fa-dribbble:before { content: @dribbble; }
+.icon-skype:before, .fa-skype:before { content: @skype; }
+.icon-foursquare:before, .fa-foursquare:before { content: @foursquare; }
+.icon-trello:before, .fa-trello:before { content: @trello; }
+.icon-female:before, .fa-female:before { content: @female; }
+.icon-male:before, .fa-male:before { content: @male; }
+.icon-gittip:before, .fa-gittip:before, .fa-gratipay:before { content: @gittip; }
+.icon-sun:before, .fa-sun-o:before { content: @sun; }
+.icon-moon:before, .fa-moon-o:before { content: @moon; }
+.icon-archive:before, .fa-archive:before { content: @archive; }
+.icon-bug:before, .fa-bug:before { content: @bug; }
+.icon-vk:before, .fa-vk:before { content: @vk; }
+.icon-weibo:before, .fa-weibo:before { content: @weibo; }
+.icon-renren:before, .fa-renren:before { content: @renren; }
+.fa-pagelines:before { content: @fa-var-pagelines; }
+.fa-stack-exchange:before { content: @fa-var-stack-exchange; }
+.fa-arrow-circle-o-right:before { content: @fa-var-arrow-circle-o-right; }
+.fa-arrow-circle-o-left:before { content: @fa-var-arrow-circle-o-left; }
+.fa-toggle-left:before, .fa-caret-square-o-left:before { content: @fa-var-caret-square-o-left; }
+.fa-dot-circle-o:before { content: @fa-var-dot-circle-o; }
+.fa-wheelchair:before { content: @fa-var-wheelchair; }
+.fa-vimeo-square:before { content: @fa-var-vimeo-square; }
+.fa-turkish-lira:before, .fa-try:before { content: @fa-var-try; }
+.fa-plus-square-o:before { content: @fa-var-plus-square-o; }
+.fa-empire:before, .fa-ge:before { content: @fa-var-empire; }
+.fa-space-shuttle:before { content: @fa-var-space-shuttle; }
+.fa-slack:before { content: @fa-var-slack; }
+.fa-envelope-square:before { content: @fa-var-envelope-square; }
+.fa-wordpress:before { content: @fa-var-wordpress; }
+.fa-openid:before { content: @fa-var-openid; }
+.fa-institution:before, .fa-bank:before, .fa-university:before { content: @fa-var-university; }
+.fa-mortar-board:before, .fa-graduation-cap:before { content: @fa-var-graduation-cap; }
+.fa-yahoo:before { content: @fa-var-yahoo; }
+.fa-google:before { content: @fa-var-google; }
+.fa-reddit:before { content: @fa-var-reddit; }
+.fa-reddit-square:before { content: @fa-var-reddit-square; }
+.fa-stumbleupon-circle:before { content: @fa-var-stumbleupon-circle; }
+.fa-stumbleupon:before { content: @fa-var-stumbleupon; }
+.fa-delicious:before { content: @fa-var-delicious; }
+.fa-digg:before { content: @fa-var-digg; }
+.fa-pied-piper-square:before, .fa-pied-piper:before { content: @fa-var-pied-piper; }
+.fa-pied-piper-alt:before { content: @fa-var-pied-piper-alt; }
+.fa-drupal:before { content: @fa-var-drupal; }
+.fa-joomla:before { content: @fa-var-joomla; }
+.fa-language:before { content: @fa-var-language; }
+.fa-fax:before { content: @fa-var-fax; }
+.fa-building:before { content: @fa-var-building; }
+.fa-child:before { content: @fa-var-child; }
+.fa-paw:before { content: @fa-var-paw; }
+.fa-spoon:before { content: @fa-var-spoon; }
+.fa-cube:before { content: @fa-var-cube; }
+.fa-cubes:before { content: @fa-var-cubes; }
+.fa-behance:before { content: @fa-var-behance; }
+.fa-behance-square:before { content: @fa-var-behance-square; }
+.fa-steam:before { content: @fa-var-steam; }
+.fa-steam-square:before { content: @fa-var-steam-square; }
+.fa-recycle:before { content: @fa-var-recycle; }
+.fa-automobile:before, .fa-car:before { content: @fa-var-car; }
+.fa-cab:before, .fa-taxi:before { content: @fa-var-taxi; }
+.fa-tree:before { content: @fa-var-tree; }
+.fa-spotify:before { content: @fa-var-spotify; }
+.fa-deviantart:before { content: @fa-var-deviantart; }
+.fa-soundcloud:before { content: @fa-var-soundcloud; }
+.fa-database:before { content: @fa-var-database; }
+.fa-file-pdf-o:before { content: @fa-var-file-pdf-o; }
+.fa-file-word-o:before { content: @fa-var-file-word-o; }
+.fa-file-excel-o:before { content: @fa-var-file-excel-o; }
+.fa-file-powerpoint-o:before { content: @fa-var-file-powerpoint-o; }
+.fa-file-photo-o:before, .fa-file-picture-o:before, .fa-file-image-o:before { content: @fa-var-file-image-o; }
+.fa-file-zip-o:before, .fa-file-archive-o:before { content: @fa-var-file-archive-o; }
+.fa-file-sound-o:before, .fa-file-audio-o:before { content: @fa-var-file-audio-o; }
+.fa-file-movie-o:before, .fa-file-video-o:before { content: @fa-var-file-video-o; }
+.fa-file-code-o:before { content: @fa-var-file-code-o; }
+.fa-vine:before { content: @fa-var-vine; }
+.fa-codepen:before { content: @fa-var-codepen; }
+.fa-jsfiddle:before { content: @fa-var-jsfiddle; }
+.fa-life-bouy:before, .fa-life-saver:before, .fa-support:before, .fa-life-ring:before { content: @fa-var-life-ring; }
+.fa-circle-o-notch:before { content: @fa-var-circle-o-notch; }
+.fa-ra:before, .fa-rebel:before { content: @fa-var-rebel; }
+.fa-git-square:before { content: @fa-var-git-square; }
+.fa-git:before { content: @fa-var-git; }
+.fa-hacker-news:before { content: @fa-var-hacker-news; }
+.fa-tencent-weibo:before { content: @fa-var-tencent-weibo; }
+.fa-qq:before { content: @fa-var-qq; }
+.fa-wechat:before, .fa-weixin:before { content: @fa-var-weixin; }
+.fa-send:before, .fa-paper-plane:before { content: @fa-var-paper-plane; }
+.fa-send-o:before, .fa-paper-plane-o:before { content: @fa-var-paper-plane-o; }
+.fa-history:before { content: @fa-var-history; }
+.fa-genderless:before, .fa-circle-thin:before { content: @fa-var-circle-thin; }
+.fa-header:before { content: @fa-var-header; }
+.fa-paragraph:before { content: @fa-var-paragraph; }
+.fa-sliders:before { content: @fa-var-sliders; }
+.fa-share-alt:before { content: @fa-var-share-alt; }
+.fa-share-alt-square:before { content: @fa-var-share-alt-square; }
+.fa-bomb:before { content: @fa-var-bomb; }
+.fa-soccer-ball-o:before, .fa-futbol-o:before { content: @fa-var-futbol-o; }
+.fa-tty:before { content: @fa-var-tty; }
+.fa-binoculars:before { content: @fa-var-binoculars; }
+.fa-plug:before { content: @fa-var-plug; }
+.fa-slideshare:before { content: @fa-var-slideshare; }
+.fa-twitch:before { content: @fa-var-twitch; }
+.fa-yelp:before { content: @fa-var-yelp; }
+.fa-newspaper-o:before { content: @fa-var-newspaper-o; }
+.fa-wifi:before { content: @fa-var-wifi; }
+.fa-calculator:before { content: @fa-var-calculator; }
+.fa-paypal:before { content: @fa-var-paypal; }
+.fa-google-wallet:before { content: @fa-var-google-wallet; }
+.fa-cc-visa:before { content: @fa-var-cc-visa; }
+.fa-cc-mastercard:before { content: @fa-var-cc-mastercard; }
+.fa-cc-discover:before { content: @fa-var-cc-discover; }
+.fa-cc-amex:before { content: @fa-var-cc-amex; }
+.fa-cc-paypal:before { content: @fa-var-cc-paypal; }
+.fa-cc-stripe:before { content: @fa-var-cc-stripe; }
+.fa-bell-slash:before { content: @fa-var-bell-slash; }
+.fa-bell-slash-o:before { content: @fa-var-bell-slash-o; }
+.fa-trash:before { content: @fa-var-trash; }
+.fa-copyright:before { content: @fa-var-copyright; }
+.fa-at:before { content: @fa-var-at; }
+.fa-eyedropper:before { content: @fa-var-eyedropper; }
+.fa-paint-brush:before { content: @fa-var-paint-brush; }
+.fa-birthday-cake:before { content: @fa-var-birthday-cake; }
+.fa-area-chart:before { content: @fa-var-area-chart; }
+.fa-pie-chart:before { content: @fa-var-pie-chart; }
+.fa-line-chart:before { content: @fa-var-line-chart; }
+.fa-lastfm:before { content: @fa-var-lastfm; }
+.fa-lastfm-square:before { content: @fa-var-lastfm-square; }
+.fa-toggle-off:before { content: @fa-var-toggle-off; }
+.fa-toggle-on:before { content: @fa-var-toggle-on; }
+.fa-bicycle:before { content: @fa-var-bicycle; }
+.fa-bus:before { content: @fa-var-bus; }
+.fa-ioxhost:before { content: @fa-var-ioxhost; }
+.fa-angellist:before { content: @fa-var-angellist; }
+.fa-cc:before { content: @fa-var-cc; }
+.fa-shekel:before, .fa-sheqel:before, .fa-ils:before { content: @fa-var-ils; }
+.fa-meanpath:before { content: @fa-var-meanpath; }
+.fa-buysellads:before { content: @fa-var-buysellads; }
+.fa-connectdevelop:before { content: @fa-var-connectdevelop; }
+.fa-dashcube:before { content: @fa-var-dashcube; }
+.fa-forumbee:before { content: @fa-var-forumbee; }
+.fa-leanpub:before { content: @fa-var-leanpub; }
+.fa-sellsy:before { content: @fa-var-sellsy; }
+.fa-shirtsinbulk:before { content: @fa-var-shirtsinbulk; }
+.fa-simplybuilt:before { content: @fa-var-simplybuilt; }
+.fa-skyatlas:before { content: @fa-var-skyatlas; }
+.fa-cart-plus:before { content: @fa-var-cart-plus; }
+.fa-cart-arrow-down:before { content: @fa-var-cart-arrow-down; }
+.fa-diamond:before { content: @fa-var-diamond; }
+.fa-ship:before { content: @fa-var-ship; }
+.fa-user-secret:before { content: @fa-var-user-secret; }
+.fa-motorcycle:before { content: @fa-var-motorcycle; }
+.fa-street-view:before { content: @fa-var-street-view; }
+.fa-heartbeat:before { content: @fa-var-heartbeat; }
+.fa-venus:before { content: @fa-var-venus; }
+.fa-mars:before { content: @fa-var-mars; }
+.fa-mercury:before { content: @fa-var-mercury; }
+.fa-transgender:before { content: @fa-var-transgender; }
+.fa-transgender-alt:before { content: @fa-var-transgender-alt; }
+.fa-venus-double:before { content: @fa-var-venus-double; }
+.fa-mars-double:before { content: @fa-var-mars-double; }
+.fa-venus-mars:before { content: @fa-var-venus-mars; }
+.fa-mars-stroke:before { content: @fa-var-mars-stroke; }
+.fa-mars-stroke-v:before { content: @fa-var-mars-stroke-v; }
+.fa-mars-stroke-h:before { content: @fa-var-mars-stroke-h; }
+.fa-neuter:before { content: @fa-var-neuter; }
+.fa-facebook-official:before { content: @fa-var-facebook-official; }
+.fa-pinterest-p:before { content: @fa-var-pinterest-p; }
+.fa-whatsapp:before { content: @fa-var-whatsapp; }
+.fa-server:before { content: @fa-var-server; }
+.fa-user-plus:before { content: @fa-var-user-plus; }
+.fa-user-times:before { content: @fa-var-user-times; }
+.fa-hotel:before,
+.fa-bed:before { content: @fa-var-bed; }
+.fa-viacoin:before { content: @fa-var-viacoin; }
+.fa-train:before { content: @fa-var-train; }
+.fa-subway:before { content: @fa-var-subway; }
+.fa-medium:before { content: @fa-var-medium; }
--- /dev/null
+.containerList > li {
+ padding: 20px 0;
+
+ &:not(:last-child) {
+ border-bottom: 1px solid rgb(238, 238, 238);
+ }
+
+ &.showMore {
+ text-align: center;
+ }
+
+ .containerHeadline {
+ position: relative;
+
+ > .containerContentType {
+ opacity: .6;
+ position: absolute;
+ top: 0;
+ right: 0;
+ }
+ }
+}
+
+.containerBoxList {
+ &.doubleColumned,
+ &.tripleColumned {
+ display: flex;
+ flex-wrap: wrap;
+ margin-bottom: -10px;
+
+ > li {
+ margin-bottom: 10px;
+ }
+ }
+
+ &.doubleColumned > li {
+ flex: 0 0 50%;
+ }
+
+ &.tripleColumned > li {
+ flex: 0 0 auto;
+ /* work-around for IE10 */
+ width: calc(~"100% / 3");
+ }
+}
+
+.likeList > .likeTypeSelection {
+ text-align: right;
+
+ > .buttonGroup {
+ display: inline-flex;
+ }
+}
+
+.userList .userInformation {
+ position: relative;
+
+ &:hover > .buttonGroupNavigation {
+ opacity: 1;
+ }
+
+ > .buttonGroupNavigation {
+ opacity: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ transition: opacity .2s linear;
+ }
+}
\ No newline at end of file
--- /dev/null
+.content {
+ fieldset > legend {
+ float: left;
+ width: 100%;
+
+ &+ * {
+ clear: left;
+ }
+ }
+
+ fieldset > legend,
+ section > h1 {
+ .wcfFontLarge;
+
+ color: rgb(67, 67, 67);
+ margin-bottom: 20px;
+ }
+
+ .container {
+ fieldset {
+ &:not(:first-child) {
+ margin-top: 20px;
+ }
+
+ > legend {
+ border-bottom: 1px solid rgb(238, 238, 238);
+ padding-bottom: 5px;
+ }
+ }
+
+ section {
+ &:not(:first-child) {
+ margin-top: 20px;
+ }
+
+ > h1 {
+ border-bottom: 1px solid rgb(238, 238, 238);
+ padding-bottom: 5px;
+ }
+ }
+ }
+
+ label {
+ display: block;
+
+ &:not(:first-child) {
+ margin-top: 5px;
+ }
+ }
+}
--- /dev/null
+.formSubmit {
+ text-align: center;
+
+ &:not(:first-child) {
+ margin-top: 20px;
+ }
+
+ > :not(:first-child) {
+ margin-left: 10px;
+ }
+}
\ No newline at end of file
--- /dev/null
+.layoutFluid {
+ margin-left: auto;
+ margin-right: auto;
+ min-width: @wcfLayoutMinWidth;
+ max-width: @wcfLayoutMaxWidth;
+}
+
+.marginTop {
+ margin-top: 20px;
+}
+
+.framed {
+ > canvas,
+ > img,
+ > .icon {
+ background-color: @wcfContentBackgroundColor;
+ border: 1px solid @wcfContainerBorderColor;
+ padding: 1px;
+ }
+}
+
+.invisible {
+ display: none;
+}
+
+/* boxes with an image */
+.box(@imageSize, @margin: 0) {
+ display: flex;
+
+ &:not(:last-child) {
+ margin-bottom: (@margin + 3px);
+ }
+
+ > :first-child:not(:last-child) {
+ flex: 0 auto;
+ margin-right: @margin;
+ }
+
+ > :last-child {
+ flex: 1;
+ }
+}
+
+.box16 { .box(16px, 4px); }
+.box24 { .box(24px, 4px); }
+.box32 { .box(32px, 7px); }
+.box48 { .box(48px, 7px); }
+.box64 { .box(64px, 7px); }
+.box96 { .box(96px, 11px); }
+.box128 { .box(128px, 11px); }
+.box256 { .box(256px, 21px); }
+
+small {
+ font-size: .85rem;
+}
+
+.wcfFontDefault {
+ font-family: "Open Sans";
+ font-weight: 400;
+}
+
+.wcfFontSmall {
+ font-family: "Open Sans";
+ font-size: .85rem;
+ font-weight: 400;
+}
+
+.wcfFontBold {
+ font-family: "Open Sans";
+ font-weight: 600;
+}
+
+.wcfFontLarger {
+ font-family: "Open Sans";
+ font-size: 1.2rem;
+ font-weight: 300;
+}
+
+.wcfFontLarge {
+ font-family: "Open Sans";
+ font-size: 1.4rem;
+ font-weight: 300;
+}
+
+.elementPointer {
+ pointer-events: none;
+ position: absolute;
+ top: 0;
+ transform: translateY(-100%);
+
+ &.center {
+ left: 50%;
+ transform: translateX(-50%) translateY(-100%);
+ }
+
+ &.left {
+ left: 4px;
+ }
+
+ &.right {
+ right: 4px;
+ }
+
+ &.flipVertical {
+ bottom: 0;
+ top: auto;
+ transform: translateY(100%);
+
+ &.center {
+ transform: translateX(-50%) translateY(100%);
+ }
+ }
+}
--- /dev/null
+/* @TODO */
+.userAvatarImage { border-radius: 50%; }
+/* @TODO END */
+
+html, body {
+ font-size: @wcfBaseFontSize;
+ height: 100%;
+}
+
+body {
+ background-color: @wcfPageBackgroundColor;
+ color: @wcfPageColor;
+ line-height: 1.428571429;
+ position: relative;
+ word-wrap: break-word;
+
+ .wcfFontDefault;
+}
+
+a {
+ color: @wcfPageLinkColor;
+ cursor: pointer;
+
+ &:hover {
+ color: @wcfPageLinkHoverColor;
+ }
+
+ &:not(:hover) {
+ text-decoration: none;
+ }
+}
+
+strong {
+ .wcfFontBold;
+}
+
+#pageContainer {
+ display: flex;
+ height: 100%;
+ flex-direction: column;
+}
+
+/* COLUMN LAYOUT */
+#pageHeader {
+ flex: 0 auto;
+ z-index: 100;
+}
+
+.main {
+ background-color: @wcfContentBackgroundColor;
+ color: @wcfColor;
+ flex: 1 auto;
+ padding: 40px 0;
+ z-index: 50;
+
+ > div {
+ display: flex;
+ }
+
+ a {
+ color: @wcfLinkColor;
+ text-decoration: none;
+
+ &:hover {
+ color: @wcfLinkHoverColor;
+ }
+ }
+}
+
+#content {
+ flex: 1 auto;
+}
+
+.sidebar {
+ flex: 0 0 310px;
+
+ &:first-child {
+ margin-right: 30px;
+ }
+}
+
+#content + .sidebar {
+ margin-left: 30px;
+}
+
+#pageFooter {
+ flex: 0 auto;
+}
+
+/* CONTENT AREA */
+.boxHeadline {
+ border-bottom: 1px solid rgba(238, 238, 238, 1);
+ margin-bottom: 30px;
+ padding-bottom: 10px;
+
+ > h1 {
+ .wcfFontLarge;
+
+ color: rgba(67, 67, 67, 1);
+ font-size: 2rem;
+ }
+
+ &.labeledHeadline {
+ font-size: 0;
+
+ > h1,
+ > h2 {
+ display: inline-block;
+ margin-right: 10px;
+ }
+
+ > ul {
+ display: inline-block;
+ font-size: 1rem;
+
+ &:not(:empty) {
+ margin-right: 10px;
+ }
+ }
+ }
+}
+
+.containerHeadline {
+ > h3 {
+ .wcfFontLarger;
+
+ > .badge {
+ margin-left: 5px;
+ }
+ }
+}
--- /dev/null
+.navigation {
+ background-color: rgba(44, 62, 80, 1);
+ flex: 0 auto;
+ padding: 5px 0;
+ z-index: 25;
+
+ > div {
+ align-items: center;
+ display: flex;
+ justify-content: flex-end;
+ height: 30px;
+ }
+}
+
+.navigationIcons {
+ display: flex;
+ flex: 0 auto;
+ flex-direction: row-reverse;
+
+ > li {
+ flex: 0 auto;
+
+ &:not(:last-child) {
+ margin-left: 10px;
+ }
+
+ > a {
+ opacity: .8;
+ transition: opacity .2s linear;
+
+ &:hover {
+ opacity: 1;
+ }
+
+ > .icon {
+ color: rgba(255, 255, 255, 1);
+ }
+ }
+ }
+}
+
+.contentNavigation {
+ align-items: center;
+ display: flex;
+
+ &:not(:first-child) {
+ margin-top: 20px;
+ }
+
+ &:not(:last-child) {
+ margin-bottom: 20px;
+ }
+
+ > nav {
+ flex: 1 auto;
+
+ & + nav {
+ flex: 0 0 auto;
+ }
+
+ &:not(.pageNavigation) {
+ text-align: right;
+ }
+ }
+
+ ul {
+ display: inline-flex;
+
+ > li {
+ flex: 0 0 auto;
+
+ &:not(:last-child) {
+ margin-right: 5px;
+ }
+ }
+ }
+}
+
+.pageNavigation > ul {
+ background-color: rgb(79, 129, 189);
+ border-radius: 3px;
+ display: inline-flex;
+ overflow: hidden;
+
+ > li {
+ background-color: transparent;
+ border-radius: 0;
+ border-width: 0;
+ flex: 0 0 auto;
+ padding: 0;
+ transition: background-color .2s linear;
+
+ &:not(.active):not(.disabled):hover {
+ background-color: #3498db;
+ }
+
+ &:not(:last-child) {
+ border-right: 1px solid rgb(112, 152, 200);
+ margin-right: 0;
+ }
+
+ &.active {
+ background-color: rgb(255, 255, 255);
+
+ > span:not(.invisible) {
+ color: rgb(79, 129, 189);
+ cursor: default;
+
+ &:hover {
+ color: rgb(79, 129, 189);
+ }
+ }
+ }
+
+ &.jumpTo {
+ cursor: pointer;
+ }
+
+ &.skip {
+ align-items: center;
+ display: flex;
+ }
+
+ > a,
+ > span:not(.invisible) {
+ color: rgb(255, 255, 255);
+ display: block;
+ padding: 3px 7px;
+
+ &:hover {
+ color: rgb(255, 255, 255);
+ }
+ }
+ }
+}
+
+.pageNavigation.small > ul > li {
+ > a,
+ > span:not(.invisible) {
+ padding: 1px 5px;
+ }
+}
--- /dev/null
+#pageFooter {
+ background-color: rgba(52, 73, 94, 1);
+ padding: 20px 0;
+ z-index: 20;
+
+ address {
+ color: rgba(255, 255, 255, 1);
+ font-style: normal;
+ opacity: .8;
+ text-align: center;
+ transition: opacity .2s linear;
+
+ &:hover {
+ opacity: 1;
+ }
+
+ a {
+ color: rgba(255, 255, 255, 1);
+ }
+ }
+}
+
+#pageFooterBoxes {
+ background-color: rgba(44, 62, 80, 1);
+ padding: 30px;
+ z-index: 40;
+
+ > div > ul {
+ display: flex;
+ flex-wrap: wrap;
+
+ > li {
+ flex: 0 0 50%;
+
+ > .icon:first-child {
+ display: none;
+ }
+
+ > div > .containerHeadline > h3 {
+ font-family: "Segoe UI Light";
+ font-size: 1.4rem;
+ margin-bottom: 10px;
+ }
+ }
+ }
+}
--- /dev/null
+/* @TODO */
+#logo {
+ //width: 75px;
+ overflow: hidden;
+ > a > img {
+ //height: 60px;
+ }
+}
+.interactiveDropdown { display: none; }
+/* @TODO END */
+
+#pageHeader {
+ background-color: rgba(52, 73, 94, 1); /* @TODO */
+}
+
+#pageHeader > div > div {
+ align-items: center;
+ display: flex;
+ flex-wrap: wrap;
+ padding: 20px 0;
+}
+
+/* LOGO */
+#logo {
+ flex: 0 0 50%;
+ //margin-right: @wcfGapMedium;
+
+ > a > img.small {
+ display: none;
+ }
+}
+
+/* MAIN MENU */
+#mainMenu {
+ flex: 0 50%;
+
+ > ul {
+ display: flex;
+
+ > li {
+ .wcfFontLarger;
+
+ flex: 0 auto;
+
+ &:not(:last-child) {
+ margin-right: @wcfGapMedium;
+ }
+
+ &.active > a {
+ .wcfFontBold;
+
+ color: rgba(255, 255, 255, 1);
+ }
+
+ > a {
+ color: rgba(255, 255, 255, .8);
+ transition: color .2s linear;
+ text-decoration: none;
+ text-transform: uppercase;
+
+ &:hover {
+ color: rgba(255, 255, 255, 1);
+ }
+ }
+ }
+ }
+}
+
+.subMenuItems {
+ position: relative;
+
+ &:hover > .subMenu {
+ opacity: 1;
+ transition-delay: 0s;
+ visibility: visible;
+ }
+
+ > a {
+ padding-right: 15px;
+
+ &:after {
+ content: @fa-var-caret-down;
+ display: block;
+ font-family: FontAwesome;
+ position: absolute;
+ right: 0;
+ top: 0;
+ }
+ }
+}
+
+.subMenu {
+ background-color: rgba(52, 73, 94, 1);
+ border-radius: 3px;
+ opacity: 0;
+ padding: 5px 0;
+ position: absolute;
+ transition: visibility .2s linear .2s, opacity .2s linear;
+ visibility: hidden;
+
+ > li {
+ &:not(:first-child) {
+ margin-top: 5px;
+ }
+
+ &.active > a {
+ background-color: rgb(79, 129, 189);
+ cursor: default;
+ }
+
+ > a {
+ .wcfFontDefault;
+
+ color: rgb(255, 255, 255);
+ display: block;
+ font-size: 1rem;
+ padding: 5px 10px;
+ transition: background-color .2s linear;
+ white-space: nowrap;
+
+ &:hover {
+ background-color: rgb(79, 129, 189);
+ }
+ }
+ }
+}
+
+
+
+/* USER PANEL */
+#topMenu {
+ flex: 0 50%;
+
+ > ul {
+ display: flex;
+ justify-content: flex-end;
+
+ > li {
+ align-items: center;
+ display: flex;
+ flex: 0 auto;
+
+ &:not(:last-child) > a {
+ margin: 0 5px;
+ }
+
+ &.active > a {
+ color: rgba(255, 255, 255, 1);
+ font-family: "Segoe UI Semibold";
+ font-weight: bold;
+ }
+
+ > a {
+ color: rgba(255, 255, 255, .8);
+ flex: 0 auto;
+ transition: color .2s linear;
+ text-decoration: none;
+ text-transform: uppercase;
+
+ &:hover {
+ color: rgba(255, 255, 255, 1);
+
+ > .icon {
+ color: rgba(255, 255, 255, 1);
+ }
+ }
+
+ > .icon {
+ color: rgba(255, 255, 255, .8);
+ transition: color .2s linear;
+
+ .icon24;
+ }
+
+ > span:not(.icon) {
+ display: none;
+ }
+ }
+ }
+ }
+}
+
+/* SEARCH AREA */
+#search {
+ flex: 0 50%;
+ text-align: right;
+}
+
--- /dev/null
+#pageHeader.sticky {
+ flex-wrap: nowrap;
+ z-index: 300;
+
+ > div {
+ background-color: rgba(52, 73, 94, 1); /* @TODO */
+ left: 0;
+ position: fixed;
+ top: 0;
+ right: 0;
+
+ > div {
+ padding: 10px 0;
+ }
+ }
+
+ #logo {
+ flex: 0 auto;
+ order: 1;
+
+ > a > .large {
+ display: none;
+ }
+
+ > a > .small {
+ display: block;
+ }
+ }
+
+ #mainMenu {
+ flex: 1 auto;
+ order: 2;
+ margin: 0 20px;
+ }
+
+ #topMenu {
+ flex: 0 auto;
+ order: 3;
+ margin-right: 10px;
+ }
+
+ #search {
+ flex: 0 auto;
+ order: 4;
+ }
+}
--- /dev/null
+.sidebar {
+ > div,
+ > fieldset,
+ > section {
+ background-color: rgb(240, 240, 240);
+ border-radius: 3px;
+ padding: 20px;
+
+ &:after {
+ clear: both;
+ content: "";
+ display: block;
+ height: 0;
+ }
+ }
+
+ > div + *,
+ > fieldset + *,
+ > section + * {
+ margin-top: 30px;
+ }
+
+ > div {
+ fieldset + fieldset,
+ section + section {
+ margin-top: 20px;
+ }
+ }
+
+ fieldset > legend {
+ float: left;
+ width: 100%;
+
+ & + * {
+ clear: left;
+ }
+ }
+
+ section > h1,
+ fieldset > legend {
+ .wcfFontLarge;
+
+ color: rgba(67, 67, 67, 1);
+ margin-bottom: 10px;
+ }
+
+ dl.dataList {
+ font-size: .85rem;
+ overflow: hidden;
+ }
+
+ dl:not(.dataList) {
+ &:not(:first-child) {
+ margin-top: 10px;
+ }
+ }
+
+ dl:not(.plain) {
+ display: block;
+
+ > dt,
+ > dd {
+ display: block;
+ margin: 0;
+ text-align: left;
+ width: 100%;
+ }
+ }
+}
+
+.sidebarNavigation > li {
+ &.active {
+ background-color: rgb(255, 255, 255);
+ margin: 0 -20px;
+ padding: 0 20px;
+ }
+
+ > a {
+ display: block;
+ padding: 5px 0;
+ }
+}
+
+.sidebarBoxHeadline > h3 {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
--- /dev/null
+.error,
+.info {
+ border-radius: 3px;
+ padding: 10px 20px;
+}
+
+.error {
+ background-color: rgb(242, 222, 222);
+ color: rgb(169, 68, 66);
+}
+
+.info {
+ background-color: rgb(217, 237, 247);
+ color: rgb(49, 112, 143);
+}
\ No newline at end of file
--- /dev/null
+.badge {
+ background-color: @wcfColor;
+ border: 1px solid rgb(255, 255, 255);
+ border-radius: 3px;
+ color: @wcfContentBackgroundColor;
+ display: inline-block;
+ font-size: .85rem;
+ padding: 2px 5px;
+ position: relative;
+ text-shadow: none !important; /* necessary to avoid ugly text shadows in comment lists; @todo: better solution without "!important" */
+ vertical-align: middle;
+ white-space: nowrap;
+ word-wrap: normal;
+
+ /* colors */
+ &.badgeUpdate {
+ background-color: @wcfTabularBoxBackgroundColor;
+ color: @wcfTabularBoxColor;
+ }
+
+ &.badgeInverse {
+ background-color: @wcfTabularBoxColor;
+ color: @wcfTabularBoxBackgroundColor;
+ }
+
+ /* default label colors */
+ &.green {
+ background-color: rgba(0, 153, 0, 1);
+ color: rgba(238, 255, 238, 1);
+ }
+
+ &.red {
+ background-color: rgba(204, 0, 0, 1);
+ color: rgba(255, 238, 238, 1);
+ }
+
+ &.black {
+ background-color: #333;
+ color: #fff;
+ }
+
+ &.brown {
+ background-color: #c63;
+ color: #fff;
+ }
+
+ &.orange {
+ background-color: #f90;
+ color: #fff;
+ }
+
+ &.yellow {
+ background-color: #ff0;
+ color: #333;
+ }
+
+ &.blue {
+ background-color: #369;
+ color: #fff;
+ }
+
+ &.purple {
+ background-color: #c0f;
+ color: #fff;
+ }
+
+ &.pink {
+ background-color: #f0c;
+ color: #fff;
+ }
+}
+
+a.badge:hover {
+ color: @wcfContentBackgroundColor;
+ text-decoration: none;
+
+ &.black {
+ background-color: #000;
+ }
+
+ &.brown {
+ background-color: #930;
+ }
+
+ &.red {
+ background-color: #900;
+ }
+
+ &.orange {
+ background-color: #f60;
+ }
+
+ &.yellow {
+ background-color: #cc0;
+ }
+
+ &.green {
+ background-color: #060;
+ }
+
+ &.blue {
+ background-color: #036;
+ }
+
+ &.purple {
+ background-color: #90c;
+ }
+
+ &.pink {
+ background-color: #c09;
+ }
+}
--- /dev/null
+.breadcrumbs {
+ flex: 1;
+
+ > ul {
+ display: flex;
+
+ > li {
+ flex: 0 auto;
+ font-size: .85rem;
+
+ &:not(:last-child) {
+ margin-right: 10px;
+
+ &:after {
+ content: "/";
+ }
+
+ > a {
+ margin-right: 10px;
+ }
+ }
+
+ > a {
+ color: rgba(255, 255, 255, 1);
+ opacity: .8;
+ text-decoration: none;
+ transition: opacity .2s linear;
+
+ &:hover {
+ opacity: 1;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"],
+.button {
+ background-color: @wcfButtonBackgroundColor;
+ border: 1px solid @wcfButtonBorderColor;
+ border-radius: 3px;
+ color: @wcfButtonColor !important;
+ cursor: pointer;
+ display: inline-block;
+ padding: 5px 10px;
+ transition-duration: .2s;
+ transition-property: background-color, border-color, color;
+ transition-timing-function: linear;
+
+ .icon {
+ color: @wcfButtonColor;
+ transition: color .2s linear;
+ }
+
+ &:hover {
+ background-color: @wcfButtonHoverBackgroundColor;
+ border-color: @wcfButtonHoverBorderColor;
+ color: @wcfButtonHoverColor !important;
+
+ .icon {
+ color: @wcfButtonHoverColor;
+ }
+ }
+
+ &.small {
+ font-size: .85rem;
+ padding: 4px 7px;
+ }
+}
+
+button.buttonPrimary,
+input[type="button"].buttonPrimary,
+input[type="submit"],
+.button.buttonPrimary {
+ background-color: @wcfButtonPrimaryBackgroundColor;
+ border-color: @wcfButtonPrimaryBorderColor;
+ color: @wcfButtonPrimaryColor !important;
+
+ .icon {
+ color: @wcfButtonPrimaryColor;
+ }
+
+ /* @TODO */
+ &:hover {
+ background-color: @wcfButtonPrimaryBackgroundColor;
+ border-color: @wcfButtonHoverBorderColor;
+ color: @wcfButtonHoverColor;
+
+ .icon {
+ color: @wcfButtonHoverColor;
+ }
+ }
+ /* @TODO END */
+}
+
+.buttonList {
+ .inlineList;
+
+ &.smallButtons .button {
+ font-size: .85rem;
+ padding: 4px 7px;
+ }
+
+ /* members list */
+ &.letters {
+ margin-bottom: -10px;
+
+ > li {
+ flex: 0 0 10%;
+ margin-bottom: 10px;
+
+ > a {
+ display: block;
+ text-align: center;
+ }
+ }
+ }
+}
+
+.buttonGroupNavigation > ul {
+ .inlineList;
+}
+
+.buttonGroup {
+ .inlineList;
+
+ > li {
+ &:not(:last-child) {
+ border-right: 1px solid @wcfButtonHoverBackgroundColor;
+ margin-right: 0;
+ }
+
+ &:first-child .button {
+ border-bottom-left-radius: 3px;
+ border-top-left-radius: 3px;
+ }
+
+ &:last-child .button {
+ border-bottom-right-radius: 3px;
+ border-top-right-radius: 3px;
+ }
+
+ .button {
+ border-radius: 0;
+ }
+ }
+}
--- /dev/null
+.commentContent {
+ position: relative;
+
+ &:hover > .buttonGroupNavigation {
+ opacity: 1;
+ }
+
+ > .buttonGroupNavigation {
+ opacity: 0;
+ position: absolute;
+ top: 5px;
+ transition: opacity .2s linear;
+ right: 10px;
+ }
+
+ > .containerHeadline {
+ margin-bottom: 5px;
+ }
+
+ & + .commentOptionContainer {
+ margin-top: 10px;
+ }
+}
+
+.commentResponseList {
+ margin-top: 10px;
+}
+
+.commentResponse {
+ border-top: 1px solid rgb(238, 238, 238);
+ padding: 10px 0;
+}
+
+.commentOptionContainer {
+ border-top: 1px solid rgb(238, 238, 238);
+ padding-top: 10px;
+}
--- /dev/null
+.dialogOverlay {
+ background-color: transparent;
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ visibility: hidden;
+ z-index: 399;
+
+ transition: visibility 0s linear .3s;
+
+ &[aria-hidden=false] {
+ /* do not animate opacity or background-color, the transition is anything but smooth due to the large area covered */
+ background-color: rgba(255, 255, 255, .4);
+ visibility: visible;
+
+ transition-delay: 0s;
+ }
+}
+
+@-webkit-keyframes wcfDialog {
+ 0% { visibility: visible; opacity: 0; top: 8%; }
+ 100% { visibility: visible; opacity: 1; top: 10%; }
+}
+
+@-webkit-keyframes wcfDialogOut {
+ 0% { visibility: visible; opacity: 1; top: 10%; }
+ 100% { visibility: hidden; opacity: 0; top: 12%; }
+}
+
+.dialogContainer {
+ background-color: rgba(0, 0, 0, .4);
+ border: 3px solid transparent;
+ border-radius: 3px;
+ box-shadow: 0 1px 15px 0 rgba(0, 0, 0, .3);
+ box-sizing: border-box;
+ left: 50%;
+ max-height: 80%;
+ max-width: 80%;
+ min-width: 400px;
+ position: absolute;
+ top: 10%;
+ transform: translateX(-50%);
+
+ -webkit-animation: wcfDialogOut .3s;
+ -webkit-animation-fill-mode: forwards;
+
+ &[aria-hidden=false] {
+ -webkit-animation: wcfDialog .3s;
+ -webkit-animation-fill-mode: forwards;
+ }
+
+ > header {
+ background: linear-gradient(to right, @wcfTabularBoxBackgroundColor, lighten(@wcfTabularBoxBackgroundColor, 10%));
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px;
+ color: @wcfTabularBoxColor;
+ display: flex;
+ padding: 7px 10px;
+
+ .textShadow(@wcfTabularBoxBackgroundColor);
+
+ > span {
+ flex: 1 auto;
+ font-family: "Segoe UI Light";
+ font-size: 1.4rem;
+ }
+
+ > a {
+ color: @wcfTabularBoxColor;
+ flex: 0 0 20px;
+ font-family: FontAwesome;
+ font-size: 18px;
+ text-align: right;
+ text-decoration: none;
+
+ &:before {
+ content: @fa-var-times-circle;
+ }
+
+ > span {
+ display: none;
+ }
+ }
+ }
+
+ > .dialogContent {
+ background-color: @wcfContainerBackgroundColor;
+ box-sizing: border-box;
+ color: @wcfColor;
+ overflow: auto;
+
+ &:not(.dialogContentNoPadding) {
+ padding: 10px;
+ padding-bottom: 0;
+
+ &:after {
+ content: "";
+ display: block;
+ height: 10px;
+ }
+
+ &.dialogForm:after {
+ height: 17px;
+ }
+ }
+
+ &:not(.dialogForm) {
+ border-bottom-left-radius: 3px;
+ border-bottom-right-radius: 3px;
+ }
+
+ dl:not(.plain) {
+ > dt {
+ float: none;
+ margin-bottom: @wcfGapTiny;
+ text-align: left;
+ width: auto !important;
+
+ &:empty {
+ margin-bottom: 0;
+ }
+ }
+
+ > dd {
+ margin-left: 0 !important;
+ }
+ }
+
+ .dialogFormSubmit {
+ background-color: @wcfContainerBackgroundColor;
+ border-top: 1px solid #3F7FBF;
+ border-bottom-left-radius: 3px;
+ border-bottom-right-radius: 3px;
+ bottom: 0;
+ left: 0;
+ padding: 10px;
+ position: absolute;
+ right: 0;
+ }
+ }
+}
+
+@media only screen and (max-width: 800px) {
+}
+
+/* static dialogs */
+.jsStaticDialogContent {
+ display: none;
+}
+
+.dialogContentX {
+
+ > .icon-spinner {
+ left: 50%;
+ margin: -21px -21px 0 0;
+ padding: 0 21px 0 21px;
+ position: absolute;
+ top: 50%;
+ }
+
+ .formSubmit {
+ background-color: @wcfContainerAccentBackgroundColor;
+ border-bottom-left-radius: 7px;
+ border-bottom-right-radius: 7px;
+ border-top: 1px solid @wcfContainerBorderColor;
+ bottom: 0;
+ left: 0;
+ padding: 10px 0;
+ position: absolute;
+ width: 100%;
+ }
+}
+
+/* package (un-)installation */
+#packageInstallationDialogContainer > .boxHeadline {
+ margin-top: 0;
+}
+
+.spinner {
+ border: 1px solid rgba(0, 0, 0, .3);
+ border-radius: 6px;
+ box-sizing: border-box;
+ color: #fff;
+ left: 50%;
+ opacity: 0;
+ padding: 7px;
+ position: fixed;
+ text-align: center;
+ top: 200px;
+ visibility: hidden;
+ z-index: 401;
+
+ transform: translateX(-50%);
+
+ .boxShadow(0, 1px, rgba(0, 0, 0, .5), 7px);
+ .linearGradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0), rgba(0, 0, 0, .7));
+
+ transition: visibility 0s linear .1s, opacity .1s linear;
+
+ &.active {
+ opacity: 1;
+ visibility: visible;
+
+ transition-delay: 0s;
+ }
+
+ > .icon {
+ color: #fff;
+ }
+
+ > span:not(.icon) {
+ display: block;
+ margin-top: @wcfGapSmall;
+ }
+}
+
+.systemConfirmation p {
+ padding-top: @wcfGapSmall;
+}
+
+/* notification overlay */
+#systemNotification {
+ left: 0;
+ pointer-events: none;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ z-index: 460;
+
+ > p {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ border-top-width: 0;
+ cursor: pointer;
+ display: table;
+ margin: 0 auto;
+ max-width: 80%;
+ pointer-events: auto;
+
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ }
+}
\ No newline at end of file
--- /dev/null
+.dropdown {
+ .dropdownToggle:active,
+ &.dropdownOpen .dropdownToggle {
+ outline: 0;
+ }
+
+ &.inputAddon {
+ > .dropdownToggle {
+ padding: @wcfGapTiny;
+
+ > span.active:after {
+ content: "\f0d7";
+ font-family: FontAwesome;
+ font-size: 14px;
+ margin-left: 7px;
+ }
+ }
+ }
+
+ &.preInput {
+ display: table;
+ width: 100%;
+
+ input {
+ border-radius: 0 @wcfInputBorderRadius @wcfInputBorderRadius 0;
+ display: table-cell;
+ margin: 0;
+ width: 99%;
+ }
+
+ textarea {
+ border-radius: 0 @wcfInputBorderRadius @wcfInputBorderRadius;
+ display: block;
+ margin-top: 0;
+ }
+
+ .dropdownCaption {
+ cursor: pointer;
+ display: table-cell;
+ letter-spacing: -1px;
+ padding: 0 @wcfGapSmall 0 @wcfGapTiny;
+ vertical-align: middle;
+ width: 1%;
+
+ &.button {
+ border-right-width: 0;
+ border-radius: @wcfInputBorderRadius 0 0 @wcfInputBorderRadius;
+ }
+
+ span {
+ margin-right: -1px;
+ padding-left: @wcfGapTiny;
+ white-space: nowrap;
+ word-wrap: normal;
+
+ &.active::after {
+ content: "\f0d7";
+ font-family: FontAwesome;
+ font-size: 14px;
+ margin-left: 7px;
+ }
+ }
+ }
+
+ .dropdownCaptionTextarea {
+ cursor: pointer;
+ margin: 0 0 -1px 0;
+ padding-left: @wcfGapSmall;
+ padding-right: @wcfGapSmall;
+
+ &.button {
+ border-radius: @wcfInputBorderRadius @wcfInputBorderRadius 0 0;
+ }
+
+ &~ .dropdownMenu {
+ top: 10%;
+ }
+
+ span {
+ white-space: nowrap;
+ word-wrap: normal;
+
+ &.active::after {
+ content: "\f0d7";
+ font-family: FontAwesome;
+ font-size: 14px;
+ margin-left: 7px;
+ }
+ }
+ }
+ }
+
+ &.dropdownOpen {
+ .dropdownToggle {
+ //color: @wcfPageLinkHoverColor;
+ }
+
+ .dropdownMenu {
+ display: block;
+ }
+ }
+
+ .dropdownToggle {
+ cursor: pointer;
+ }
+}
+
+.dropdownMenu {
+ background-color: @wcfDropdownBackgroundColor;
+ border: 1px solid @wcfDropdownBorderColor;
+ color: @wcfDropdownColor;
+ display: none;
+ float: left;
+ min-width: 160px;
+ padding: 4px 0;
+ position: absolute;
+ text-align: left;
+ z-index: 450;
+
+ .boxShadow(2px, 2px, rgba(0, 0, 0, .2), 10px);
+
+ &::after {
+ border: 7px solid transparent;
+ border-bottom-color: @wcfDropdownBorderColor;
+ border-top-width: 0;
+ content: "";
+ display: inline-block;
+ left: 9px;
+ position: absolute;
+ top: -7px;
+ z-index: 100;
+ }
+
+ &::before {
+ border: 6px solid transparent;
+ border-bottom-color: @wcfDropdownBackgroundColor;
+ border-top-width: 0;
+ content: "";
+ display: inline-block;
+ left: 10px;
+ position: absolute;
+ top: -6px;
+ z-index: 101;
+ }
+
+ &.dropdownArrowRight {
+ &::after {
+ left: auto;
+ right: 9px;
+ }
+
+ &::before {
+ left: auto;
+ right: 10px;
+ }
+ }
+
+ &.dropdownArrowBottom {
+ &::after {
+ border: 7px transparent solid;
+ border-top-color: @wcfDropdownBorderColor;
+ border-bottom-width: 0;
+ bottom: -7px;
+ top: auto;
+ }
+
+ &::before {
+ border: 6px transparent solid;
+ border-top-color: @wcfDropdownBackgroundColor;
+ border-bottom-width: 0;
+ bottom: -6px;
+ top: auto;
+ }
+ }
+
+ &.dropdownOpen {
+ display: block;
+ }
+
+ li {
+ display: block;
+
+ &:hover:not(.dropdownDivider):not(.dropdownList):not(.dropdownText),
+ &.dropdownList > li:hover:not(.dropdownDivider),
+ &.dropdownNavigationItem,
+ &.active {
+ background-color: @wcfDropdownHoverBackgroundColor;
+ }
+
+ &.dropdownDivider {
+ border-top: 1px dotted @wcfDropdownBorderColor;
+ margin: @wcfGapTiny;
+ }
+
+ &.dropdownText {
+ font-size: @wcfSmallFontSize;
+ padding: @wcfGapTiny @wcfGapMedium;
+ }
+
+ &.boxFlag {
+ padding-top: 2px;
+ }
+
+ &.missingValue > span {
+ position: relative;
+
+ &:after {
+ color: @wcfWarningBackgroundColor;
+ content: @fa-var-exclamation-triangle;
+ font-family: FontAwesome;
+ position: absolute;
+ right: @wcfGapMedium;
+ top: @wcfGapTiny;
+ }
+ }
+
+ > a,
+ > span {
+ clear: both;
+ color: @wcfDropdownColor;
+ cursor: pointer;
+ display: block;
+ max-width: 350px;
+ overflow: hidden;
+ padding: @wcfGapTiny @wcfGapMedium;
+ text-decoration: none;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ word-wrap: normal;
+
+ .textShadow(@wcfDropdownBackgroundColor);
+
+ &:hover {
+ color: @wcfDropdownColor;
+
+ .textShadow(@wcfDropdownHoverBackgroundColor);
+ }
+
+ > div > h3 {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+
+ > a > small {
+ display: block;
+ }
+
+ > a + span.badge {
+ display: none;
+ }
+
+ > .box16 {
+ cursor: pointer;
+ min-height: 0;
+ padding: @wcfGapTiny @wcfGapTiny @wcfGapTiny @wcfGapSmall;
+
+ > div {
+ margin-left: 21px;
+ }
+ }
+
+ > label {
+ display: block;
+ }
+
+ .containerHeadline {
+ margin-bottom: 0;
+
+ > p {
+ font-size: @wcfSmallFontSize;
+ }
+ }
+ }
+
+ .scrollableDropdownMenu {
+ max-height: 300px;
+ overflow: auto;
+ }
+}
+
+.boxFlag > .box24, .boxFlag.box24 {
+ min-height: 20px;
+}
+
+@media only screen and (max-width: 800px) {
+ .dropdownMenu {
+ left: 0 !important;
+ right: 0 !important;
+
+ li {
+ overflow: hidden;
+
+ > a,
+ > span {
+ max-width: none;
+ white-space: normal;
+ }
+ }
+ }
+}
--- /dev/null
+.interactiveDropdown {
+ background-color: @wcfContainerAccentBackgroundColor;
+ border: 1px solid @wcfDropdownBorderColor;
+ color: @wcfDropdownColor;
+ display: block;
+ position: absolute;
+ z-index: 450;
+
+ .boxShadow(0, 3px, rgba(0, 0, 0, .25), 8px);
+
+ &:not(.open) {
+ display: none !important;
+ }
+
+ > .pointer {
+ border: 10px solid transparent;
+ border-bottom-color: @wcfDropdownBorderColor;
+ border-top-width: 0;
+ content: "";
+ display: inline-block;
+ position: absolute;
+ top: -10px;
+ z-index: 100;
+
+ > span {
+ border: 8px solid transparent;
+ border-bottom-color: @wcfContainerAccentBackgroundColor;
+ border-top-width: 0;
+ content: "";
+ display: inline-block;
+ left: -8px;
+ position: absolute;
+ top: 2px;
+ z-index: 101;
+ }
+ }
+
+ &.interactiveDropdownUserMenu {
+ > .interactiveDropdownItemsContainer {
+ overflow: visible;
+ max-height: none;
+ }
+
+ > .pointer {
+ border-width: 0 7px 7px 7px;
+ top: -7px;
+
+ > span {
+ border-width: 0 5px 5px 5px;
+ left: -5px;
+ }
+ }
+ }
+}
+
+.interactiveDropdownHeader {
+ padding: @wcfGapSmall (@wcfGapSmall + @wcfGapTiny);
+
+ > .interactiveDropdownTitle {
+ font-family: "Segoe UI Semibold";
+ font-weight: bold;
+ }
+
+ > .interactiveDropdownLinks {
+ float: right;
+
+ > li {
+ display: inline-block;
+ margin-left: (@wcfGapSmall + @wcfGapTiny);
+ }
+ }
+
+ &:after {
+ clear: both;
+ }
+}
+
+.interactiveDropdownItemsContainer {
+ border: 1px solid @wcfDropdownBorderColor;
+ border-width: 1px 0;
+ max-height: 300px;
+
+ &.ps-container {
+ > .interactiveDropdownItems {
+ position: relative;
+ z-index: 100;
+ }
+
+ > .ps-scrollbar-y-rail {
+ z-index: 200;
+ }
+ }
+}
+
+.interactiveDropdownItems > li {
+ background-color: @wcfDropdownBackgroundColor;
+
+ .transition(~"background-color, background-position", .3s, linear);
+
+ &.loading,
+ &.noItems {
+ font-family: "Segoe UI Light";
+ font-size: 1.2rem;
+ padding: @wcfGapLarge @wcfGapMedium;
+ text-align: center;
+ }
+
+ &:not(.loading):not(.noItems) {
+ overflow: hidden;
+ padding: @wcfGapSmall (@wcfGapSmall + @wcfGapTiny);
+ position: relative;
+
+ .textShadow(@wcfContainerAccentBackgroundColor);
+
+ &:not(:last-child) {
+ border-bottom: 1px solid @wcfDropdownBorderColor;
+ }
+
+ &:hover {
+ background-color: @wcfDropdownHoverBackgroundColor;
+ }
+
+ &.interactiveDropdownItemOutstanding {
+ background-color: @wcfDropdownHoverBackgroundColor;
+ background-repeat: no-repeat;
+ background-size: 200%;
+
+ .linearGradientNative(~"to left, @{wcfDropdownHoverBackgroundColor} 50%, @{wcfDropdownBackgroundColor} 100%");
+
+ &:hover {
+ background-position: 100%;
+ }
+ }
+
+ &.interactiveDropdownItemOutstandingIcon > div.box32 {
+ padding-right: 16px + (@wcfGapSmall + @wcfGapTiny);
+ }
+
+ &.notificationItem {
+ .userLink {
+ font-weight: bold;
+ }
+ }
+
+ &.interactiveDropdownItemShadow {
+ > .box32 {
+ position: relative;
+ }
+
+ > .box32,
+ > .interactiveDropdownItemMarkAsRead {
+ pointer-events: none;
+ z-index: 20;
+
+ a {
+ pointer-events: all;
+ }
+ }
+
+ > .interactiveDropdownItemShadowLink {
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ z-index: 10;
+ }
+ }
+
+ &.groupedNotificationItem > .box32 > .framed > span.fa-users:before {
+ position: relative;
+ top: 3px;
+ }
+ }
+}
+
+.interactiveDropdownItems.interactiveDropdownItemsUserMenu > li {
+ &.dropdownDivider {
+ padding: 0 !important;
+ }
+
+ &:not(.dropdownDivider) {
+ border-bottom-width: 0 !important;
+ padding: (@wcfGapSmall + @wcfGapTiny);
+ }
+
+ > .box32 > .containerHeadline {
+ > h3 {
+ font-family: "Segoe UI Light";
+ font-size: 1.2rem;
+ }
+ }
+
+ > .box64 {
+ position: relative;
+
+ > .containerHeadline > .interactiveDropdownUserMenuLinkList {
+ bottom: 0;
+ position: absolute;
+ }
+ }
+
+ .interactiveDropdownUserMenuLinkList > li {
+ display: inline-block;
+ font-size: .85rem;
+
+ &:after {
+ content: " \2013 ";
+ }
+
+ &:last-child:after {
+ content: "";
+ }
+ }
+}
+
+.interactiveDropdownShowAll {
+ display: block;
+ padding: @wcfGapSmall (@wcfGapSmall + @wcfGapTiny);
+ text-align: center;
+}
+
+@media only screen and (min-width: 801px) {
+ .interactiveDropdown {
+ min-width: 350px;
+
+ > .interactiveDropdownItemsContainer {
+ overflow: hidden;
+ position: relative;
+
+ > .interactiveDropdownItems > li:not(.loading) {
+ max-width: 400px;
+ box-sizing: border-box;
+
+ &.interactiveDropdownItemOutstandingIcon {
+ > div.interactiveDropdownItemMarkAsRead {
+ opacity: .6;
+ position: absolute;
+ right: (@wcfGapSmall + @wcfGapTiny);
+ top: 50%;
+
+ transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ -webkit-transform: translateY(-50%);
+
+ .transition(opacity, .3s, linear);
+ }
+
+ &:hover > div.interactiveDropdownItemMarkAsRead {
+ opacity: 1;
+ }
+ }
+ }
+ }
+ }
+}
+
+@media only screen and (max-width: 800px) {
+ .interactiveDropdown {
+ border-width: 1px 0;
+ box-sizing: border-box;
+ left: 0 !important;
+ right: 0 !important;
+ width: 100%;
+
+ > .interactiveDropdownItemsContainer {
+ overflow-x: auto;
+
+ > .interactiveDropdownItems > li.interactiveDropdownItemOutstandingIcon > div.interactiveDropdownItemMarkAsRead {
+ bottom: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: (@wcfGapSmall + @wcfGapTiny) + 16px + (@wcfGapSmall + @wcfGapTiny);
+
+ > a {
+ display: block;
+ height: 100%;
+ text-align: center;
+
+ > .icon {
+ position: relative;
+ top: 50%;
+
+ transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ -webkit-transform: translateY(-50%);
+ }
+ }
+ }
+ }
+ }
+}
--- /dev/null
+.messageList {
+ border: 1px solid rgb(79, 129, 189);
+ border-width: 1px 0;
+ margin: 30px 0;
+
+ > li {
+ margin-top: 0;
+ padding: 40px 0;
+
+ &:not(:first-child) {
+ border-top: 1px solid rgb(79, 129, 189);
+ }
+ }
+}
+
+.message {
+ display: flex;
+}
+
+/* sidebar */
+.messageSidebar {
+ align-self: flex-start;
+ background-color: rgb(79, 129, 189);
+ border-radius: 3px;
+ color: rgb(255, 255, 255);
+ flex: 0 0 170px;
+ padding: 20px;
+ position: relative;
+ text-align: center;
+
+ a {
+ color: rgb(255, 255, 255);
+ }
+
+ .dataList {
+ font-size: .85rem;
+ }
+}
+
+.messageAuthor + * {
+ margin-top: 25px;
+
+ &:before {
+ border-top: 2px solid rgb(112, 152, 200);
+ content: "";
+ left: 0;
+ margin-top: -10px;
+ position: absolute;
+ right: 0;
+ }
+}
+
+.messageAuthorContainer:not(:last-child) {
+ margin-bottom: 5px;
+}
+
+/* content */
+.messageContent {
+ display: flex;
+ flex: 1 auto;
+ flex-direction: column;
+ margin-left: 30px;
+}
+
+/* content - header */
+.messageHeader {
+ display: flex;
+ flex: 0 0 auto;
+ margin-bottom: 20px;
+}
+
+.messageQuickOptions {
+ .inlineList;
+
+ flex: 0 0 auto;
+ opacity: .3;
+ order: 2;
+ transition: opacity .2s linear;
+
+ .badge {
+ color: rgb(255, 255, 255);
+ font-size: .85rem;
+ }
+}
+
+.message:hover .messageQuickOptions {
+ opacity: .6;
+}
+
+.message .messageHeader .messageQuickOptions:hover {
+ opacity: 1;
+}
+
+.messageHeadline {
+ flex: 1 auto;
+ order: 1;
+
+ > h1 {
+ font-family: "Segoe UI Light";
+ font-size: 1.4rem;
+ margin-bottom: 5px;
+ }
+
+ > p {
+ font-size: .85rem;
+ }
+}
+
+/* content - body */
+.messageBody {
+ flex: 1 auto;
+}
+
+/* content - footer */
+.messageFooter {
+ flex: 0 0 auto;
+ margin-top: 20px;
+}
+
+.messageFooterNote {
+ border-left: 2px solid rgb(238, 238, 238);
+ padding-left: 5px;
+
+ &:not(:first-child) {
+ margin-top: 5px;
+ }
+}
+
+.messageSignature {
+ border-top: 1px solid rgb(238, 238, 238);
+ opacity: .6;
+ padding-top: 10px;
+ transition: opacity .2s linear;
+}
+
+.message:hover .messageSignature {
+ opacity: 1;
+}
+
+.message .messageFooter .messageFooterButtons {
+ .inlineList;
+
+ justify-content: flex-end;
+ margin-top: 10px;
+ opacity: .3;
+ transition: opacity .2s linear;
+
+ > li:not(:last-child) {
+ margin-right: 5px;
+ }
+}
+
+.message:hover .messageFooterButtons {
+ opacity: .6;
+}
+
+.message .messageFooter .messageFooterButtons:hover {
+ opacity: 1;
+}
+
+/* ### message groups ### */
+.messageGroupList {
+ .columnSubject {
+ > .labelList {
+ float: right;
+ padding-left: 7px;
+ }
+
+ > h3 {
+ > .messageGroupLink {
+ font-size: @wcfTitleFontSize;
+ }
+
+ > .badge.label {
+ top: -2px;
+ }
+ }
+
+ > small {
+ display: block;
+ }
+
+ > nav {
+ font-size: @wcfSmallFontSize;
+
+ > ul > li {
+ display: inline;
+ }
+ }
+ }
+
+ tr {
+ &.new .columnSubject > h3 > .messageGroupLink {
+ font-weight: bold;
+ }
+
+ &.new .columnAvatar div > p > img,
+ &:hover .columnAvatar div > p > img {
+ opacity: 1;
+ }
+
+ &.messageDisabled {
+ color: @wcfDisabledColor;
+
+ > td {
+ background-color: @wcfDisabledBackgroundColor !important;
+ }
+
+ a:not(.badge) {
+ color: @wcfDisabledColor;
+ }
+ }
+
+ &.messageDeleted {
+ color: @wcfDeletedColor;
+
+ > td {
+ background-color: @wcfDeletedBackgroundColor !important;
+ }
+
+ a:not(.badge) {
+ color: @wcfDeletedColor;
+ }
+ }
+
+ .columnSubject .statusDisplay .pageNavigation {
+ opacity: 0;
+
+ .transition(opacity, .2s);
+ }
+
+ &:hover .columnSubject .statusDisplay .pageNavigation {
+ opacity: 1;
+ }
+
+ &.new .columnAvatar > div {
+ &::after {
+ color: @wcfLinkColor;
+ content: "\f069";
+ font-family: FontAwesome;
+ font-weight: normal !important;
+ font-style: normal !important;
+ font-size: 14px;
+ position: absolute;
+ text-decoration: none !important;
+ top: -4px;
+ right: -2px;
+
+ .textShadow(@wcfContainerBackgroundColor);
+ }
+ }
+ }
+
+ .columnAvatar {
+ div {
+ position: relative;
+ width: 40px;
+ height: 38px;
+
+ > p > img {
+ opacity: .6;
+
+ .transition(opacity, .2s);
+ }
+ }
+
+ .myAvatar {
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ bottom: -2px;
+ left: 24px;
+ opacity: 1;
+
+ > img {
+ .boxShadow(0, 0, rgba(0, 0, 0, .3), 3px);
+ }
+ }
+ }
+
+ .columnLastPost {
+ white-space: nowrap;
+ word-wrap: normal;
+
+ > div > div > small {
+ color: @wcfDimmedColor;
+ }
+ }
+
+ .messageGroupInfo {
+ .inlineList;
+
+ font-size: @wcfSmallFontSize;
+
+ > li:not(:last-child) {
+ margin-right: 5px;
+
+ &:after {
+ content: " - ";
+ }
+ }
+ }
+}
--- /dev/null
+#pollOptionContainer .sortableList {
+ padding: @wcfGapSmall 0;
+
+ .sortableNode {
+ margin-top: @wcfGapSmall;
+
+ .sortableButtonContainer > img {
+ cursor: pointer;
+ margin-right: @wcfGapMedium;
+ }
+ }
+}
+
+.pollContainer {
+ float: left;
+ margin: 0 15px 10px 0;
+ max-width: 50%;
+ min-width: 300px;
+
+ > .formSubmit {
+ background-color: @wcfContainerAccentBackgroundColor;
+ border-top: 1px solid @wcfContainerBorderColor;
+ margin-top: 20px;
+ padding: 10px 0;
+ }
+}
+
+.pollInnerContainer {
+ > dl {
+ flex-wrap: wrap;
+ }
+
+ > p:first-of-type {
+ margin-top: @wcfGapSmall;
+ }
+}
+
+.pollResultList {
+ li {
+ margin-bottom: 8px;
+ padding: 1px 0;
+ position: relative;
+ z-index: 0;
+
+ .transition(background-color, .1s);
+
+ &:last-child {
+ margin-bottom: 0px;
+ }
+
+ &:hover {
+ background-color: @wcfContainerAccentBackgroundColor;
+ border-radius: 0 5px 5px 0;
+ }
+
+ .pollMeter {
+ background-color: @wcfContainerHoverBackgroundColor;
+ border-radius: 0 5px 5px 0;
+ height: 100%;
+ left: 0;
+ position: absolute;
+ top: 0;
+ z-index: -1;
+ }
+
+ .caption {
+ color: @wcfLinkColor;
+ padding: 2px 0;
+
+ .optionName {
+ display: block;
+ padding: 0 3.5em 0 @wcfGapSmall;
+ }
+
+ .relativeVotes {
+ position: absolute;
+ right: 7px;
+ top: 3px;
+ }
+ }
+ }
+}
+
+@media only screen and (max-width: 800px) {
+ .pollContainer > .formSubmit {
+ margin: @wcfGapMedium -@wcfGapMedium -@wcfGapSmall -@wcfGapMedium;
+ }
+}
\ No newline at end of file
--- /dev/null
+.popover {
+ background-color: rgba(0, 0, 0, .4);
+ border: 3px solid transparent;
+ border-radius: 3px;
+ opacity: 0;
+ position: absolute;
+ top: 0;
+ vertical-align: middle;
+ visibility: hidden;
+ width: 400px !important;
+ z-index: 500;
+
+ .boxShadow(0, 1px, rgba(0, 0, 0, .3), 7px);
+
+ transition: visibility 0s linear .3s, opacity .3s linear;
+
+ &.active {
+ opacity: 1;
+ visibility: visible;
+
+ transition-delay: 0s;
+ }
+
+ &.disableAnimation {
+ transition: none !important;
+
+ > .popoverContent {
+ transition: none !important;
+ }
+
+ > .elementPointer > span {
+ transition: none !important;
+ }
+ }
+
+ > .popoverContent {
+ background-color: @wcfContainerBackgroundColor;
+ border-radius: 3px;
+ box-sizing: border-box;
+ color: @wcfColor;
+ max-height: 300px + (@wcfGapSmall + @wcfGapSmall);
+ min-height: 16px + (@wcfGapSmall + @wcfGapSmall);
+ opacity: 1;
+ overflow: hidden;
+ padding: @wcfGapSmall @wcfGapMedium;
+
+ transition: opacity .3s linear;
+
+ &:not(.loading) {
+ ~ .fa-spinner {
+ display: none;
+ }
+
+ ~ .elementPointer {
+ > span {
+ border-color: @wcfContainerBackgroundColor transparent;
+ border-style: solid;
+ border-width: 0 5px 5px;
+ left: -5px;
+ opacity: 1;
+ position: absolute;
+ top: 3px;
+
+ transition: opacity .3s linear;
+ }
+
+ &.flipVertical > span {
+ border-width: 5px 5px 0;
+ bottom: 3px;
+ top: auto;
+ }
+ }
+ }
+
+ &.loading {
+ opacity: 0;
+ transition: height .3s linear, opacity 0s;
+
+ ~ .elementPointer > span {
+ opacity: 0;
+
+ transition: opacity 0s;
+ }
+ }
+ }
+
+ > .elementPointer {
+ border-color: rgba(0, 0, 0, .4) transparent;
+ border-style: solid;
+ border-width: 0 6px 6px;
+ top: -2px;
+
+ &.flipVertical {
+ border-width: 6px 6px 0;
+ bottom: -2px;
+ top: auto;
+ }
+ }
+
+ > .fa-spinner {
+ color: rgba(255, 255, 255, 1);
+ left: 50%;
+ margin-left: -14px;
+ margin-top: -14px;
+ position: absolute;
+ top: 50%;
+
+ .textShadow(black);
+ }
+}
--- /dev/null
+@font-face {
+ font-family: 'RedactorFont';
+ src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,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) format('woff');
+ font-weight: normal;
+ font-style: normal;
+}
+.re-icon {
+ font-family: 'RedactorFont';
+
+ > i:before {
+ position: relative;
+ font-size: 14px;
+ }
+}
+
+.re-video:before { content: "\e600"; }
+.re-unorderedlist:before { content: "\e601"; }
+.re-undo:before { content: "\e602"; }
+.re-underline:before { content: "\e603"; }
+.re-textdirection:before { content: "\e604"; }
+.re-fontcolor:before { content: "\e605"; }
+.re-table:before { content: "\e606"; }
+.re-redo:before { content: "\e607"; }
+.re-quote:before { content: "\e608"; }
+.re-outdent:before { content: "\e609"; }
+.re-orderedlist:before { content: "\e60a"; }
+.re-link:before { content: "\e60b"; }
+.re-horizontalrule:before { content: "\e60c"; }
+.re-italic:before { content: "\e60d"; }
+.re-indent:before { content: "\e60e"; }
+.re-image:before { content: "\e60f"; }
+.re-fullscreen:before { content: "\e610"; }
+.re-normalscreen:before { content: "\e611"; }
+.re-formatting:before { content: "\e612"; }
+.re-fontsize:before { content: "\e613"; }
+.re-fontfamily:before { content: "\e614"; }
+.re-deleted:before { content: "\e615"; }
+.re-html:before { content: "\e616"; }
+.re-clips:before { content: "\e617"; }
+.re-bold:before { content: "\e618"; }
+.re-backcolor:before { content: "\e619"; }
+.re-file:before { content: "\e61a"; }
+.re-alignright:before { content: "\e61b"; }
+.re-alignment:before, .re-alignleft:before { content: "\e61c"; }
+.re-alignjustify:before { content: "\e61d"; }
+.re-aligncenter:before { content: "\e61e"; }
+.re-gallery:before { content: "\e61f"; }
+
+.redactor-box {
+ border: 1px solid @wcfContainerBorderColor;
+ border-radius: 3px 3px 0 0;
+ font-size: 0;
+ line-height: @wcfBaseLineHeight;
+ position: relative;
+
+ & + .messageTabMenu {
+ padding: 0;
+ }
+
+ & + .innerError,
+ > .innerError {
+ border-radius: 0;
+ box-shadow: none;
+ display: block;
+ margin-top: -1px;
+ }
+
+ > .innerError {
+ margin: -1px;
+ }
+
+ > .redactorAutosaveNotice {
+ background-color: @wcfContainerBackgroundColor;
+ border: 1px solid @wcfContainerBorderColor;
+ border-width: 1px 0 0 1px;
+ bottom: 0;
+ font-size: 1rem;
+ opacity: 0;
+ padding: @wcfGapSmall;
+ position: absolute;
+ right: 0;
+ transition: visibility 0s linear .3s, opacity .3s linear;
+ visibility: hidden;
+
+ &.open {
+ opacity: 1;
+ visibility: visible;
+ transition-delay: 0s;
+ }
+
+ &.redactorAutosaveNoticeIcons > span.fa-check {
+ margin-right: @wcfGapSmall;
+ }
+
+ > span.redactorAutosaveMessage {
+ padding: 0 @wcfGapSmall;
+ }
+ }
+}
+
+.redactor-editor {
+ max-height: 500px;
+ padding: 10px;
+ position: relative;
+ outline: none;
+ overflow: auto;
+
+ & + textarea {
+ border-width: 0;
+ box-shadow: none;
+ font-size: 1rem;
+ line-height: @wcfBaseLineHeight;
+ outline: none;
+ padding: 10px;
+ resize: vertical;
+
+ &:focus {
+ box-shadow: none;
+ }
+ }
+
+ ul,
+ ol {
+ .nativeList;
+ }
+
+ ul {
+ list-style-type: disc;
+ }
+
+ ol {
+ list-style-type: decimal;
+ }
+
+ img {
+ border: 1px solid transparent;
+ max-width: 100%;
+ }
+
+ table {
+ border-collapse: collapse;
+ font-size: 14px;
+ line-height: 1.6em;
+
+ td {
+ border: 1px solid #ddd;
+ padding: 5px;
+ vertical-align: top;
+ }
+ }
+
+ .quoteBox {
+ clear: none;
+
+ > header {
+ position: relative;
+
+ > .redactorQuoteEdit {
+ bottom: -@wcfGapSmall;
+ left: -@wcfGapMedium;
+ right: -@wcfGapMedium;
+ top: -@wcfGapMedium;
+ padding-top: @wcfGapMedium;
+ padding-left: @wcfGapMedium;
+ position: absolute;
+ }
+ }
+ }
+
+ .codeBox {
+ overflow: hidden;
+ position: relative;
+
+ .redactorEditCodeBox {
+ background-color: rgba(255, 255, 255, .8);
+ bottom: 0;
+ left: 0;
+ opacity: 0;
+ position: absolute;
+ right: 0;
+ text-align: center;
+ top: 0;
+ z-index: 200;
+
+ .transition(opacity, .3s, linear);
+
+ > div {
+ cursor: pointer;
+ font-size: 1.4rem;
+ left: 50%;
+ padding: 1em 3em;
+ position: absolute;
+ top: 50%;
+
+ transform: translate(-50%, -50%);
+ -ms-transform: translate(-50%, -50%);
+ }
+ }
+
+ &:hover .redactorEditCodeBox {
+ opacity: 1;
+ }
+
+ ol {
+ margin-bottom: 0;
+ margin-top: 0;
+ }
+ }
+
+ &.msie .quoteBox {
+ /* resets 'hasLayout' causing IE to display resize handle and wonky editing behavior */
+ min-height: auto;
+ }
+}
+
+@media all and (min-width: 801px) {
+ .redactor-editor {
+ font-size: 1rem;
+ }
+}
+
+/* disable auto zoom in mobile safari */
+@media only screen and (max-width: 800px) {
+ .redactor-editor + textarea {
+ font-size: 16px;
+ max-height: 500px;
+ }
+}
+
+.redactor-toolbar {
+ background: repeating-linear-gradient(0deg, @wcfContainerBorderColor 0px, @wcfContainerBorderColor 3%, @wcfContainerBackgroundColor 3%, @wcfContainerAccentBackgroundColor 100%);
+ background-size: 100% 31px;
+
+ > li {
+ display: inline-block;
+ margin-bottom: 1px;
+ vertical-align: middle;
+
+ &:last-of-type,
+ &.separator {
+ border-right: 1px solid @wcfContainerBorderColor;
+ }
+
+ > a {
+ box-sizing: border-box;
+ color: @wcfButtonColor;
+ display: block;
+ font-size: 14px;
+ height: 30px;
+ outline: none;
+ padding: 6px 0;
+ text-align: center;
+ text-decoration: none;
+ width: 30px;
+
+ .textShadow(@wcfButtonBackgroundColor);
+
+ &.redactor-button-disabled,
+ &.redactor-button-disabled:before,
+ &.redactor-button-disabled > i:before {
+ color: fade(@wcfColor, 40%);
+ cursor: default;
+ }
+
+ &:before {
+ color: @wcfColor;
+ }
+
+ > i {
+ height: 14px;
+ width: 12px;
+
+ &:before {
+ color: @wcfColor;
+ }
+ }
+
+ &:not(.redactor-button-disabled):hover,
+ &.redactor-act,
+ &.dropact {
+ background-color: @wcfContainerHoverBackgroundColor;
+
+ .textShadow(@wcfButtonHoverBackgroundColor);
+
+ > i {
+ text-shadow: none;
+ }
+ }
+
+ &.fa-redactor-btn:before {
+ content: "";
+ }
+
+ &.redactor-btn-image {
+ background-position: center;
+ background-repeat: no-repeat;
+
+ &.redactor-button-disabled {
+ opacity: .5;
+ }
+ }
+ }
+ }
+}
+
+.redactor-toolbar-tooltip {
+ .balloonTooltip;
+
+ opacity: 1;
+ visibility: visible;
+
+ &:before {
+ border-color: @wcfTooltipBackgroundColor transparent;
+ border-style: solid;
+ border-width: 0 5px 5px;
+ content: "";
+ display: block;
+ left: 50%;
+ position: absolute;
+ top: -5px;
+ transform: translateX(-50%);
+ }
+}
+
+#redactor-image-box {
+ border: 1px dashed rgba(0, 0, 0, .5);
+ display: inline-block;
+ line-height: 0;
+ max-width: 100%;
+ position: relative;
+
+ > img {
+ border-width: 0;
+ opacity: .5;
+ }
+}
+
+#redactor-image-editter {
+ .balloonTooltip;
+
+ cursor: pointer;
+ left: 50%;
+ line-height: @wcfSmallFontSize;
+ margin-top: -13px;
+ opacity: 1;
+ top: 50%;
+ visibility: visible;
+ z-index: 5;
+}
+
+#redactor-image-resizer {
+ background-color: rgba(0, 0, 0, 1);
+ border: 1px solid rgba(255, 255, 255, 1);
+ bottom: -4px;
+ cursor: nw-resize;
+ height: 8px;
+ line-height: 1;
+ position: absolute;
+ right: -5px;
+ width: 8px;
+ z-index: 10;
+}
+
+.redactorAttachmentContainer {
+ background-color: rgba(255, 255, 255, 1);
+ border: 1px solid rgba(238, 238, 238, 1);
+ border-top-width: 0;
+ padding: 7px 14px 7px;
+}
+
+.redactor-dropdown-box-fontcolor {
+ width: 200px;
+
+ > li.redactorColorPallet {
+ padding: 0 4px;
+
+ &:hover {
+ background-color: @wcfDropdownBackgroundColor !important;
+ }
+
+ > a {
+ border: 2px solid rgba(255, 255, 255, 1);
+ border-bottom-width: 0;
+ display: inline-block;
+ font-size: 0;
+ height: 20px;
+ padding: 0;
+ margin: 0;
+ width: 20px;
+ }
+ }
+}
+
+.redactorDropArea {
+ background-color: rgba(255, 255, 204, 1);
+ border: 5px dashed rgba(255, 204, 0);
+ box-sizing: border-box;
+ font-size: 1.4rem;
+ position: absolute;
+ text-align: center;
+ vertical-align: middle;
+ z-index: 360;
+
+ &.active {
+ background-color: #CEF6CE;
+ border-color: #04B404;
+ }
+}
+
+.redactor-link-tooltip {
+ background-color: @wcfTooltipBackgroundColor;
+ border-radius: 6px;
+ color: @wcfTooltipColor;
+ font-size: @wcfSmallFontSize;
+ padding: 5px 10px 7px;
+ position: absolute;
+ z-index: 800;
+
+ .boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
+
+ > a {
+ color: @wcfTooltipColor;
+ }
+}
--- /dev/null
+.spinner {
+ border: 1px solid rgba(0, 0, 0, .3);
+ border-radius: 6px;
+ box-sizing: border-box;
+ color: #fff;
+ left: 50%;
+ opacity: 0;
+ padding: 7px;
+ position: fixed;
+ text-align: center;
+ top: 200px;
+ visibility: hidden;
+ z-index: 401;
+
+ transform: translateX(-50%);
+
+ .boxShadow(0, 1px, rgba(0, 0, 0, .5), 7px);
+ .linearGradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0), rgba(0, 0, 0, .7));
+
+ transition: visibility 0s linear .1s, opacity .1s linear;
+
+ &.active {
+ opacity: 1;
+ visibility: visible;
+
+ transition-delay: 0s;
+ }
+
+ > .icon {
+ color: #fff;
+ }
+
+ > span:not(.icon) {
+ display: block;
+ margin-top: @wcfGapSmall;
+ }
+}
\ No newline at end of file
--- /dev/null
+.tabMenuContainer {
+ > .tabMenu {
+ margin-bottom: 20px;
+ position: relative;
+
+ > ul {
+ .inlineList;
+
+ > li {
+ &:not(:last-child) {
+ margin-right: 20px;
+ }
+
+ &.active > a {
+ cursor: default;
+ }
+
+ > a {
+ display: block;
+ padding: 5px 0;
+ }
+ }
+ }
+
+ > span {
+ border-top: 1px solid rgb(231, 76, 60);
+ bottom: 0;
+ position: absolute;
+ transition: transform .2s linear, width .2s linear;
+ }
+ }
+
+ > .tabMenuContent {
+ border: 1px solid rgb(79, 129, 189);
+ border-radius: 3px;
+ padding: 10px;
+
+ border-width: 0;
+ border-radius: 0;
+ padding: 0;
+
+ &.hidden {
+ display: none;
+ }
+ }
+}
--- /dev/null
+.messageTabMenu {
+ border: 1px solid @wcfContainerBorderColor;
+ border-top-width: 0;
+ border-radius: 0 0 3px 3px;
+ line-height: @wcfBaseLineHeight;
+
+ > div,
+ > fieldset{
+ background-color: @wcfContainerBackgroundColor;
+ border-width: 0;
+ border-radius: 0;
+ border-top: 1px solid @wcfContainerBorderColor;
+ display: none;
+ padding: 15px 10px;
+ position: static;
+
+ &.active {
+ display: block;
+ }
+ }
+
+ > div {
+ > nav {
+ background-color: @wcfContainerBackgroundColor;
+ border-bottom: 1px solid @wcfContainerBorderColor;
+ margin: -14px -21px 14px -21px;
+ padding: @wcfGapTiny @wcfGapSmall;
+
+ ul {
+ display: inline-block;
+ font-size: 0;
+ white-space: nowrap;
+
+ li {
+ display: inline-block;
+ outline: 0;
+ vertical-align: baseline;
+
+ &.active a,
+ &.active a:hover {
+ color: @wcfButtonPrimaryColor;
+ cursor: default;
+ }
+
+ a {
+ color: @wcfButtonColor;
+ display: block;
+ font-size: @wcfSmallFontSize;
+ outline: 0;
+ padding: 0 @wcfGapSmall;
+
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+
+ &:hover {
+ color: @wcfButtonHoverColor;
+ text-decoration: none;
+ }
+ }
+
+ &:not(:last-child) {
+ padding-right: @wcfGapTiny;
+ }
+
+ &.dropdown > a {
+ font-size: 1.0rem;
+ padding: 4px 7px 2px;
+ }
+ }
+ }
+ }
+
+ > div,
+ > fieldset {
+ border-top-width: 0;
+ }
+ }
+}
+
+.messageTabMenuNavigation > ul {
+ background-color: @wcfContainerBackgroundColor;
+ font-size: 0;
+ white-space: nowrap;
+
+ > li {
+ display: inline-block;
+
+ > a {
+ border-right: 1px solid @wcfContainerBorderColor;
+ border-bottom: 1px solid transparent;
+ color: @wcfButtonColor;
+ display: block;
+ font-size: 1rem;
+ line-height: @wcfBaseLineHeight;
+ margin-bottom: -1px;
+ 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;
+
+ &:hover {
+ color: @wcfLinkColor;
+ }
+
+ > span.icon {
+ display: none;
+ }
+ }
+
+ &.active {
+ > a {
+ background-color: @wcfContainerBackgroundColor;
+ color: @wcfLinkColor;
+ }
+ }
+ }
+}
+
+@media only screen and (max-width: 800px) {
+ .redactor-toolbar > li > a:hover {
+ background-color: transparent !important;
+ }
+
+ .messageTabMenu {
+ > nav > ul > li:not(.active) > a {
+ > span.icon {
+ display: block;
+ }
+
+ > span:not(.icon) {
+ display: none;
+ }
+ }
+
+ > div > nav {
+ margin: (@wcfGapTiny - @wcfGapSmall) -@wcfGapSmall @wcfGapSmall -@wcfGapSmall;
+ }
+ }
+}
+
+/* fix for Firefox - fieldsets are set to display: table-column which cause an odd gap between the fieldset
+ and the next element, similar to gaps with display: inline-block and font-size > 0 */
+@-moz-document url-prefix() {
+ fieldset + .messageTabMenu {
+ margin-top: -3px;
+ }
+}
+
+.uploadButton {
+ overflow: hidden;
+ position: relative;
+
+ > input {
+ left: -4px;
+ opacity: 0;
+ padding: 4px;
+ position: absolute;
+ top: -2px;
+ }
+}
--- /dev/null
+.table {
+ border-spacing: 0;
+ width: 100%;
+
+ /* cells */
+ th,
+ td {
+ padding: @wcfGapSmall;
+ text-align: left;
+ vertical-align: middle;
+ // non standard only webkit
+ word-break: break-word;
+
+ > label {
+ cursor: pointer;
+ display: block;
+ margin: -@wcfGapSmall;
+ padding: @wcfGapSmall;
+
+ > input[type="checkbox"] {
+ margin: -1px 3px 0;
+ }
+ }
+ }
+
+ /* headline */
+ th {
+ border-right: 1px solid rgba(0, 0, 0, .2);
+ color: @wcfTabularBoxColor;
+ font-size: @wcfSmallFontSize;
+ font-weight: bold;
+ white-space: nowrap;
+ word-wrap: normal;
+
+ .textShadow(@wcfTabularBoxBackgroundColor);
+ .linearGradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0), rgba(0, 0, 0, .3));
+
+ > a {
+ color: @wcfTabularBoxColor;
+ display: block;
+ margin: -@wcfGapSmall;
+ position: relative;
+
+ &:hover {
+ text-decoration: none;
+ }
+
+ > img {
+ margin: -5px 0;
+ }
+ }
+
+ &.active > a {
+ background-color: rgba(0, 0, 0, .1);
+ color: @wcfTabularBoxHoverColor;
+
+ .boxShadowInset(0, 10px, rgba(0, 0, 0, .1), 10px, -10px);
+ }
+
+ &.ASC > a,
+ &.DESC > a {
+ padding-right: 20px;
+ }
+
+ &.ASC > a::after,
+ &.DESC > a::after {
+ display: inline-block;
+ font-family: FontAwesome;
+ font-size: 14px;
+ position: absolute;
+ margin-left: @wcfGapTiny;
+
+ .textShadow(@wcfTabularBoxBackgroundColor);
+ }
+
+ &.ASC > a::after {
+ content: "\f0de";
+ top: 8px;
+ }
+
+ &.DESC > a::after {
+ content: "\f0dd";
+ top: 3px;
+ }
+
+ &:hover > a {
+ background-color: rgba(0, 0, 0, .2);
+ color: @wcfTabularBoxHoverColor;
+ }
+
+ > * {
+ padding: @wcfGapSmall;
+ }
+ }
+
+ /* content */
+ td {
+ background-color: @wcfContainerBackgroundColor;
+
+ .transition(background, .1s);
+
+ &.columnMark,
+ &.columnStatus {
+ text-align: center;
+ width: 1px;
+ white-space: nowrap;
+ word-wrap: normal;
+ }
+
+ &.columnDigits,
+ &.columnID {
+ text-align: right;
+ width: 1px;
+ white-space: nowrap;
+ word-wrap: normal;
+ }
+
+ &.columnIcon {
+ text-align: left;
+ width: 1px;
+ white-space: nowrap;
+ word-wrap: normal;
+ }
+
+ &.columnTitle {
+ font-weight: bold;
+ text-align: left;
+ }
+
+ &.columnText {
+ font-weight: normal;
+ text-align: left;
+ max-width: 20%;
+ }
+
+ &.columnDate {
+ font-size: @wcfSmallFontSize;
+ text-align: right;
+ width: 1px;
+ white-space: nowrap;
+ word-wrap: normal;
+ }
+
+ &.columnURL, &.columnSmallText {
+ font-size: @wcfSmallFontSize;
+ text-align: left;
+ }
+ }
+
+ /* striped */
+ > tbody {
+ > tr:nth-child(even) > td {
+ background-color: @wcfContainerAccentBackgroundColor;
+ }
+ }
+
+ /* hover */
+ > tbody {
+ > tr {
+ &:not(:last-child) {
+ > td {
+ border-bottom: 1px solid rgba(255, 255, 255, .3);
+ }
+ }
+
+ &:hover {
+ > td {
+ background-color: @wcfContainerHoverBackgroundColor;
+ }
+ }
+
+ > td:not(:last-child) {
+ border-right: 1px solid rgba(255, 255, 255, .3);
+ }
+
+ > td.focus {
+ background-color: @wcfContainerHoverBackgroundColor;
+ }
+
+ > td.left {
+ text-align: left;
+ }
+
+ > td.right {
+ text-align: right;
+ }
+ }
+ }
+
+ .statusDisplay {
+ float: right;
+
+ .statusIcons {
+ float: right;
+ margin-left: @wcfGapSmall;
+
+ li {
+ display: inline-block;
+ }
+ }
+ }
+
+ tr {
+ &.jsMarked {
+ color: @wcfSelectedColor;
+
+ > td {
+ background-color: @wcfSelectedBackgroundColor !important;
+ }
+
+ a:not(.badge) {
+ color: @wcfSelectedColor;
+ }
+ }
+ }
+}
--- /dev/null
+.tabularBox {
+ > .content {
+ border-width: 0;
+ }
+
+ .tabularList {
+ background-color: rgba(255, 255, 255);
+ display: flex;
+ flex-direction: column;
+
+ > li {
+ flex: 0 0 auto;
+ padding: 5px 0;
+
+ &.head {
+ border-bottom: 2px solid rgb(79, 129, 189);
+
+ > ol > li {
+ color: rgb(79, 129, 189);
+
+ > a {
+ color: rgb(79, 129, 189);
+ font-family: "Segoe UI Light";
+ font-size: 1.4rem;
+ }
+
+ &.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: "\f0d8";
+ top: 1px;
+ }
+
+ &.DESC > a:after {
+ content: "\f0d7";
+ top: 2px;
+ }
+ }
+
+ & + li {
+ border-top-width: 0;
+ }
+ }
+
+ &:not(.head) {
+ border-top: 1px solid rgb(238, 238, 238);
+ }
+
+ &.divider + li:not(.divider) {
+ border-top-color: rgb(79, 129, 189);
+ }
+
+ > ol {
+ align-items: center;
+ display: flex;
+
+ > li {
+ flex: 0 0 auto;
+ padding: 5px 10px;
+ }
+ }
+ }
+ }
+}
+
+.tabularBoxTitle {
+ > header {
+ border-bottom: 1px solid rgb(79, 129, 189);
+ color: rgb(79, 129, 189);
+ padding: 10px 0;
+
+ > h1,
+ > h2,
+ > h3 {
+ .wcfFontLarge;
+ }
+
+ a,
+ .icon {
+ color: rgb(79, 129, 189)
+ }
+
+ .collapsibleButton {
+ cursor: pointer;
+ transition: transform .2s linear;
+ }
+ }
+}
+
+div.tabularBoxTitle > header {
+ display: none;
+}
\ No newline at end of file
--- /dev/null
+.balloonTooltip {
+ background-color: @wcfTooltipBackgroundColor;
+ border-radius: 6px;
+ color: @wcfTooltipColor;
+ font-size: @wcfSmallFontSize;
+ max-width: 300px;
+ opacity: 0;
+ padding: 5px 10px 7px;
+ pointer-events: none;
+ position: absolute;
+ top: 0;
+ visibility: hidden;
+ z-index: 800;
+
+ transition: visibility 0s linear .2s, opacity .2s linear .2s;
+
+ > .elementPointer {
+ border-color: @wcfTooltipBackgroundColor transparent;
+ border-style: solid;
+ border-width: 0 5px 5px;
+
+ &.flipVertical {
+ border-width: 5px 5px 0;
+ }
+ }
+
+ .boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
+
+ &.active {
+ opacity: 1;
+ visibility: visible;
+
+ transition-delay: 0s;
+ }
+}
\ No newline at end of file
--- /dev/null
+.userProfile .sidebar {
+ position: relative;
+
+ > section {
+ background-color: rgb(79, 129, 189);
+ border-radius: 0;
+ color: rgb(255, 255, 255);
+
+ a,
+ dd,
+ h1 {
+ color: rgb(255, 255, 255);
+ }
+
+ &:first-child {
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px;
+ }
+
+ &:last-child {
+ border-bottom-left-radius: 3px;
+ border-bottom-right-radius: 3px;
+ }
+
+ &:not(:first-child) {
+ margin-top: 0;
+
+ &:before {
+ border-top: 2px solid rgb(112, 152, 200);
+ content: "";
+ left: 0;
+ margin-top: -15px;
+ position: absolute;
+ right: 0;
+ }
+ }
+ }
+
+ > .userDetails {
+ position: relative;
+ text-align: center;
+
+ > .buttonGroupNavigation > .buttonGroup,
+ > .dataList {
+ justify-content: center;
+ }
+
+ > .buttonGroupNavigation,
+ > .dataList,
+ > .userActivity {
+ margin-top: 10px;
+ }
+
+ > .dataList {
+ margin-top: 25px;
+
+ &:before {
+ border-top: 2px solid rgb(112, 152, 200);
+ content: "";
+ left: 0;
+ margin-top: -10px;
+ position: absolute;
+ right: 0;
+ }
+ }
+
+ > .userActivity > span {
+ display: block;
+ font-size: .85rem;
+ }
+ }
+}
+
+.userProfile #profileContent {
+ > .tabMenu {
+ margin-bottom: 30px;
+
+ > ul > li {
+ &:not(:last-child) {
+ margin-right: 30px;
+ }
+
+ > a {
+ font-size: 1.4rem;
+ padding: 0;
+ text-transform: uppercase;
+ }
+ }
+
+ > span {
+ border-width: 2px;
+ bottom: -5px;
+ }
+ }
+}
+
+#profileButtonContainer > li {
+ border-width: 0;
+
+ > a {
+ background-color: transparent;
+ border-width: 0;
+ color: rgb(255, 255, 255) !important;
+ padding: 5px;
+
+ > .icon {
+ color: rgb(255, 255, 255);
+ }
+ }
+}
+
+.username {
+ font-size: 1.2rem;
+}
projects / GitHub / WoltLab / WCF.git / commitdiff