<acpmenuitem name="wcf.acp.menu.link.cronjob.add">
<controller><![CDATA[wcf\acp\form\CronjobAddForm]]></controller>
- <parent>wcf.acp.menu.link.cronjob</parent>
+ <parent>wcf.acp.menu.link.cronjob.list</parent>
<permissions>admin.system.canManageCronjob</permissions>
<showorder>2</showorder>
+ <icon>fa-plus</icon>
</acpmenuitem>
<!-- /cronjobs -->
<permissions>admin.captcha.canManageCaptchaQuestion</permissions>
</acpmenuitem>
<acpmenuitem name="wcf.acp.menu.link.captcha.question.add">
- <parent>wcf.acp.menu.link.captcha</parent>
+ <parent>wcf.acp.menu.link.captcha.question.list</parent>
<controller><![CDATA[wcf\acp\form\CaptchaQuestionAddForm]]></controller>
<permissions>admin.captcha.canManageCaptchaQuestion</permissions>
+ <icon>fa-plus</icon>
</acpmenuitem>
<!-- maintenance -->
<showorder>1</showorder>
</acpmenuitem>
- <acpmenuitem name="wcf.acp.menu.link.user.search">
- <controller><![CDATA[wcf\acp\form\UserSearchForm]]></controller>
- <parent>wcf.acp.menu.link.user.management</parent>
- <permissions>admin.user.canSearchUser</permissions>
- </acpmenuitem>
-
<acpmenuitem name="wcf.acp.menu.link.user.list">
<controller><![CDATA[wcf\acp\page\UserListPage]]></controller>
<parent>wcf.acp.menu.link.user.management</parent>
<permissions>admin.user.canSearchUser</permissions>
</acpmenuitem>
-
+ <acpmenuitem name="wcf.acp.menu.link.user.search">
+ <controller><![CDATA[wcf\acp\form\UserSearchForm]]></controller>
+ <parent>wcf.acp.menu.link.user.list</parent>
+ <permissions>admin.user.canSearchUser</permissions>
+ <icon>fa-search</icon>
+ </acpmenuitem>
<acpmenuitem name="wcf.acp.menu.link.user.add">
<controller><![CDATA[wcf\acp\form\UserAddForm]]></controller>
- <parent>wcf.acp.menu.link.user.management</parent>
+ <parent>wcf.acp.menu.link.user.list</parent>
<permissions>admin.user.canAddUser</permissions>
+ <icon>fa-plus</icon>
</acpmenuitem>
<acpmenuitem name="wcf.acp.menu.link.user.bulkProcessing">
<parent>wcf.acp.menu.link.group</parent>
<permissions>admin.user.canEditGroup,admin.user.canDeleteGroup</permissions>
</acpmenuitem>
-
<acpmenuitem name="wcf.acp.menu.link.group.add">
<controller><![CDATA[wcf\acp\form\UserGroupAddForm]]></controller>
- <parent>wcf.acp.menu.link.group</parent>
+ <parent>wcf.acp.menu.link.group.list</parent>
<permissions>admin.user.canAddGroup</permissions>
+ <icon>fa-plus</icon>
</acpmenuitem>
<acpmenuitem name="wcf.acp.menu.link.group.mail">
<controller><![CDATA[wcf\acp\page\UserRankListPage]]></controller>
<permissions>admin.user.rank.canManageRank</permissions>
</acpmenuitem>
-
<acpmenuitem name="wcf.acp.menu.link.user.rank.add">
- <parent>wcf.acp.menu.link.user.rank</parent>
+ <parent>wcf.acp.menu.link.user.rank.list</parent>
<controller><![CDATA[wcf\acp\form\UserRankAddForm]]></controller>
<permissions>admin.user.rank.canManageRank</permissions>
+ <icon>fa-plus</icon>
</acpmenuitem>
<!-- user options -->
</acpmenuitem>
<acpmenuitem name="wcf.acp.menu.link.user.option.add">
<controller><![CDATA[wcf\acp\form\UserOptionAddForm]]></controller>
- <parent>wcf.acp.menu.link.user.option</parent>
+ <parent>wcf.acp.menu.link.user.option.list</parent>
<permissions>admin.user.canManageUserOption</permissions>
+ <icon>fa-plus</icon>
</acpmenuitem>
<acpmenuitem name="wcf.acp.menu.link.user.option.category.list">
</acpmenuitem>
<acpmenuitem name="wcf.acp.menu.link.user.option.category.add">
<controller><![CDATA[wcf\acp\form\UserOptionCategoryAddForm]]></controller>
- <parent>wcf.acp.menu.link.user.option</parent>
+ <parent>wcf.acp.menu.link.user.option.category.list</parent>
<permissions>admin.user.canManageUserOption</permissions>
+ <icon>fa-plus</icon>
</acpmenuitem>
<acpmenuitem name="wcf.acp.menu.link.user.option.setDefaults">
</acpmenuitem>
<acpmenuitem name="wcf.acp.menu.link.notice.add">
<controller><![CDATA[wcf\acp\form\NoticeAddForm]]></controller>
- <parent>wcf.acp.menu.link.notice</parent>
+ <parent>wcf.acp.menu.link.notice.list</parent>
<permissions>admin.notice.canManageNotice</permissions>
+ <icon>fa-plus</icon>
</acpmenuitem>
<acpmenuitem name="wcf.acp.menu.link.paidSubscription">
<parent>wcf.acp.menu.link.style</parent>
<permissions>admin.style.canManageStyle</permissions>
</acpmenuitem>
-
- <acpmenuitem name="wcf.acp.menu.link.style.add">
- <controller><![CDATA[wcf\acp\form\StyleAddForm]]></controller>
- <parent>wcf.acp.menu.link.style</parent>
- <permissions>admin.style.canManageStyle</permissions>
- </acpmenuitem>
-
<acpmenuitem name="wcf.acp.menu.link.style.import">
<controller><![CDATA[wcf\acp\form\StyleImportForm]]></controller>
- <parent>wcf.acp.menu.link.style</parent>
+ <parent>wcf.acp.menu.link.style.list</parent>
+ <permissions>admin.style.canManageStyle</permissions>
+ <icon>fa-upload</icon>
+ </acpmenuitem>
+ <acpmenuitem name="wcf.acp.menu.link.style.add">
+ <controller><![CDATA[wcf\acp\form\StyleAddForm]]></controller>
+ <parent>wcf.acp.menu.link.style.list</parent>
<permissions>admin.style.canManageStyle</permissions>
+ <icon>fa-plus</icon>
</acpmenuitem>
<!-- /style -->
<parent>wcf.acp.menu.link.pageMenu</parent>
<permissions>admin.display.canManagePageMenu</permissions>
</acpmenuitem>
-
<acpmenuitem name="wcf.acp.menu.link.pageMenu.add">
<controller><![CDATA[wcf\acp\form\PageMenuItemAddForm]]></controller>
- <parent>wcf.acp.menu.link.pageMenu</parent>
+ <parent>wcf.acp.menu.link.pageMenu.list</parent>
<permissions>admin.display.canManagePageMenu</permissions>
+ <icon>fa-plus</icon>
</acpmenuitem>
<!-- /page menu -->
</acpmenuitem>
<acpmenuitem name="wcf.acp.menu.link.template.add">
<controller><![CDATA[wcf\acp\form\TemplateAddForm]]></controller>
- <parent>wcf.acp.menu.link.template</parent>
+ <parent>wcf.acp.menu.link.template.list</parent>
<permissions>admin.template.canManageTemplate</permissions>
+ <icon>fa-plus</icon>
</acpmenuitem>
+
<acpmenuitem name="wcf.acp.menu.link.template.group.list">
<controller><![CDATA[wcf\acp\page\TemplateGroupListPage]]></controller>
<parent>wcf.acp.menu.link.template</parent>
</acpmenuitem>
<acpmenuitem name="wcf.acp.menu.link.template.group.add">
<controller><![CDATA[wcf\acp\form\TemplateGroupAddForm]]></controller>
- <parent>wcf.acp.menu.link.template</parent>
+ <parent>wcf.acp.menu.link.template.group.list</parent>
<permissions>admin.template.canManageTemplate</permissions>
+ <icon>fa-plus</icon>
</acpmenuitem>
<!-- /template -->
<controller><![CDATA[wcf\acp\page\LanguageListPage]]></controller>
<permissions>admin.language.canManageLanguage</permissions>
</acpmenuitem>
-
<acpmenuitem name="wcf.acp.menu.link.language.import">
- <parent>wcf.acp.menu.link.language</parent>
+ <parent>wcf.acp.menu.link.language.list</parent>
<controller><![CDATA[wcf\acp\form\LanguageImportForm]]></controller>
<permissions>admin.language.canManageLanguage</permissions>
+ <icon>fa-upload</icon>
</acpmenuitem>
<acpmenuitem name="wcf.acp.menu.link.language.item.list">
</acpmenuitem>
<acpmenuitem name="wcf.acp.menu.link.ad.add">
<controller><![CDATA[wcf\acp\form\AdAddForm]]></controller>
- <parent>wcf.acp.menu.link.ad</parent>
+ <parent>wcf.acp.menu.link.ad.list</parent>
<permissions>admin.ad.canManageAd</permissions>
+ <icon>fa-plus</icon>
</acpmenuitem>
<acpmenuitem name="wcf.acp.menu.link.content">
</acpmenuitem>
<acpmenuitem name="wcf.acp.menu.link.smiley.add">
<controller><![CDATA[wcf\acp\form\SmileyAddForm]]></controller>
- <parent>wcf.acp.menu.link.smiley</parent>
+ <parent>wcf.acp.menu.link.smiley.list</parent>
<permissions>admin.content.smiley.canManageSmiley</permissions>
+ <icon>fa-plus</icon>
</acpmenuitem>
+
<acpmenuitem name="wcf.acp.menu.link.smiley.category.list">
<controller><![CDATA[wcf\acp\page\SmileyCategoryListPage]]></controller>
<parent>wcf.acp.menu.link.smiley</parent>
</acpmenuitem>
<acpmenuitem name="wcf.acp.menu.link.smiley.category.add">
<controller><![CDATA[wcf\acp\form\SmileyCategoryAddForm]]></controller>
- <parent>wcf.acp.menu.link.smiley</parent>
+ <parent>wcf.acp.menu.link.smiley.category.list</parent>
<permissions>admin.content.smiley.canManageSmiley</permissions>
+ <icon>fa-plus</icon>
</acpmenuitem>
<acpmenuitem name="wcf.acp.menu.link.label">
</acpmenuitem>
<acpmenuitem name="wcf.acp.menu.link.label.add">
<controller><![CDATA[wcf\acp\form\LabelAddForm]]></controller>
- <parent>wcf.acp.menu.link.label</parent>
+ <parent>wcf.acp.menu.link.label.list</parent>
<permissions>admin.content.label.canManageLabel</permissions>
+ <icon>fa-plus</icon>
</acpmenuitem>
+
<acpmenuitem name="wcf.acp.menu.link.label.group.list">
<controller><![CDATA[wcf\acp\page\LabelGroupListPage]]></controller>
<parent>wcf.acp.menu.link.label</parent>
</acpmenuitem>
<acpmenuitem name="wcf.acp.menu.link.label.group.add">
<controller><![CDATA[wcf\acp\form\LabelGroupAddForm]]></controller>
- <parent>wcf.acp.menu.link.label</parent>
+ <parent>wcf.acp.menu.link.label.group.list</parent>
<permissions>admin.content.label.canManageLabel</permissions>
+ <icon>fa-plus</icon>
</acpmenuitem>
<acpmenuitem name="wcf.acp.menu.link.bbcode">
</acpmenuitem>
<acpmenuitem name="wcf.acp.menu.link.bbcode.add">
<controller><![CDATA[wcf\acp\form\BBCodeAddForm]]></controller>
- <parent>wcf.acp.menu.link.bbcode</parent>
+ <parent>wcf.acp.menu.link.bbcode.list</parent>
<permissions>admin.content.bbcode.canManageBBCode</permissions>
+ <icon>fa-plus</icon>
</acpmenuitem>
<acpmenuitem name="wcf.acp.menu.link.bbcode.mediaProvider.list">
<controller><![CDATA[wcf\acp\page\BBCodeMediaProviderListPage]]></controller>
</acpmenuitem>
<acpmenuitem name="wcf.acp.menu.link.bbcode.mediaProvider.add">
<controller><![CDATA[wcf\acp\form\BBCodeMediaProviderAddForm]]></controller>
- <parent>wcf.acp.menu.link.bbcode</parent>
+ <parent>wcf.acp.menu.link.bbcode.mediaProvider.list</parent>
<permissions>admin.content.bbcode.canManageBBCode</permissions>
+ <icon>fa-plus</icon>
</acpmenuitem>
<acpmenuitem name="wcf.acp.menu.link.tag">
<parent>wcf.acp.menu.link.tag</parent>
<permissions>admin.content.tag.canManageTag</permissions>
</acpmenuitem>
-
<acpmenuitem name="wcf.acp.menu.link.tag.add">
<controller><![CDATA[wcf\acp\form\TagAddForm]]></controller>
- <parent>wcf.acp.menu.link.tag</parent>
+ <parent>wcf.acp.menu.link.tag.list</parent>
<permissions>admin.content.tag.canManageTag</permissions>
+ <icon>fa-plus</icon>
</acpmenuitem>
<acpmenuitem name="wcf.acp.menu.link.attachment">
<packagedescription><![CDATA[Free web-framework, designed and developed for complex community applications.]]></packagedescription>
<packagedescription language="de"><![CDATA[Freies Web-Framework, das für komplexe Community-Anwendungen entworfen und entwickelt wurde.]]></packagedescription>
<isapplication>1</isapplication>
- <version>2.2.0 Alpha 1</version> <!-- codename: vortex -->
+ <version>2.2.0 Alpha 3</version> <!-- codename: vortex -->
<date>2015-05-03</date>
</packageinformation>
<instruction type="aclOption" />
<instruction type="script">acp/post_install.php</instruction>
</instructions>
+
+ <instructions type="update" fromversion="2.2.0 Alpha 2">
+ <instruction type="acpMenu" />
+ </instructions>
</package>
-<div class="dashboardBox" data-box-name="{$box->boxName}">
+<section class="dashboardBox" data-box-name="{$box->boxName}">
{@$template}
-</div>
\ No newline at end of file
+</section>
<header class="boxHeadline boxSubHeadline dashboardBoxRecentActivityHeadline" id="dashboardBoxRecentActivity">
- <h2>{lang}wcf.user.recentActivity{/lang}</h2>
+ <h1>{lang}wcf.user.recentActivity{/lang}</h1>
{if $canFilterByFollowedUsers}
- <nav class="jsMobileNavigation buttonGroupNavigation jsOnly jsRecentActivitySwitchContext">
+ <nav class="marginTop jsMobileNavigation buttonGroupNavigation jsOnly jsRecentActivitySwitchContext">
<ul class="buttonGroup">
<li><a href="#" class="button small{if !$filteredByFollowedUsers} active{/if}">{lang}wcf.user.recentActivity.scope.all{/lang}</a></li>
<li><a href="#" class="button small{if $filteredByFollowedUsers} active{/if}">{lang}wcf.user.recentActivity.scope.followedUsers{/lang}</a></li>
-<a id="top"></a>
-
-<div id="pageContainer" class="pageContainer">
- {event name='beforePageHeader'}
+<!DOCTYPE html>
+<html dir="{@$__wcf->getLanguage()->getPageDirection()}" lang="{@$__wcf->getLanguage()->getFixedLanguageCode()}">
+<head>
+ <base href="{$baseHref}" />
+ <meta charset="utf-8" />
+ <meta name="robots" content="noindex" />
+ <title>{if $pageTitle|isset}{@$pageTitle|language} - {/if}{lang}wcf.global.acp{/lang}{if PACKAGE_ID} - {PAGE_TITLE|language}{/if}</title>
- {include file='pageHeader'}
+ <!-- Stylesheets -->
+ {@$__wcf->getStyleHandler()->getStylesheet(true)}
+ {event name='stylesheets'}
- {event name='afterPageHeader'}
+ <!-- Icons -->
+ <link rel="shortcut icon" href="{@$__wcf->getPath()}images/favicon.ico" />
+ <link rel="apple-touch-icon" href="{@$__wcf->getPath()}images/apple-touch-icon.png" />
- {include file='pageNavbarTop'}
+ <script>
+ var SID_ARG_2ND = '{@SID_ARG_2ND_NOT_ENCODED}';
+ var WCF_PATH = '{@$__wcf->getPath()}';
+ var SECURITY_TOKEN = '{@SECURITY_TOKEN}';
+ var LANGUAGE_ID = {@$__wcf->getLanguage()->languageID};
+ var TIME_NOW = {@TIME_NOW};
+ var URL_LEGACY_MODE = {if URL_LEGACY_MODE}true{else}false{/if};
+ </script>
- <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}>
- {if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.sidebar.top')}{/if}
-
- {event name='sidebarBoxesTop'}
-
- {@$sidebar}
-
- {event name='sidebarBoxesBottom'}
+ {js application='wcf' file='require' bundle='WCF.Core' core='true'}
+ {js application='wcf' file='require.config' bundle='WCF.Core' core='true'}
+ {js application='wcf' file='require.linearExecution' bundle='WCF.Core' core='true'}
+ {js application='wcf' file='wcf.globalHelper' bundle='WCF.Core' core='true'}
+ <script>
+ requirejs.config({
+ baseUrl: '{@$__wcf->getPath()}js'
+ });
+ </script>
+ <script>
+ document.addEventListener('DOMContentLoaded', function() {
+ require(['Language', 'WoltLab/WCF/Acp/Bootstrap'], function(Language, AcpBootstrap) {
+ Language.addObject({
+ '__days': [ '{lang}wcf.date.day.sunday{/lang}', '{lang}wcf.date.day.monday{/lang}', '{lang}wcf.date.day.tuesday{/lang}', '{lang}wcf.date.day.wednesday{/lang}', '{lang}wcf.date.day.thursday{/lang}', '{lang}wcf.date.day.friday{/lang}', '{lang}wcf.date.day.saturday{/lang}' ],
+ '__daysShort': [ '{lang}wcf.date.day.sun{/lang}', '{lang}wcf.date.day.mon{/lang}', '{lang}wcf.date.day.tue{/lang}', '{lang}wcf.date.day.wed{/lang}', '{lang}wcf.date.day.thu{/lang}', '{lang}wcf.date.day.fri{/lang}', '{lang}wcf.date.day.sat{/lang}' ],
+ '__months': [ '{lang}wcf.date.month.january{/lang}', '{lang}wcf.date.month.february{/lang}', '{lang}wcf.date.month.march{/lang}', '{lang}wcf.date.month.april{/lang}', '{lang}wcf.date.month.may{/lang}', '{lang}wcf.date.month.june{/lang}', '{lang}wcf.date.month.july{/lang}', '{lang}wcf.date.month.august{/lang}', '{lang}wcf.date.month.september{/lang}', '{lang}wcf.date.month.october{/lang}', '{lang}wcf.date.month.november{/lang}', '{lang}wcf.date.month.december{/lang}' ],
+ '__monthsShort': [ '{lang}wcf.date.month.short.jan{/lang}', '{lang}wcf.date.month.short.feb{/lang}', '{lang}wcf.date.month.short.mar{/lang}', '{lang}wcf.date.month.short.apr{/lang}', '{lang}wcf.date.month.short.may{/lang}', '{lang}wcf.date.month.short.jun{/lang}', '{lang}wcf.date.month.short.jul{/lang}', '{lang}wcf.date.month.short.aug{/lang}', '{lang}wcf.date.month.short.sep{/lang}', '{lang}wcf.date.month.short.oct{/lang}', '{lang}wcf.date.month.short.nov{/lang}', '{lang}wcf.date.month.short.dec{/lang}' ],
+ 'wcf.acp.search.noResults': '{lang}wcf.acp.search.noResults{/lang}',
+ 'wcf.clipboard.item.unmarkAll': '{lang}wcf.clipboard.item.unmarkAll{/lang}',
+ 'wcf.date.relative.now': '{lang}wcf.date.relative.now{/lang}',
+ 'wcf.date.relative.minutes': '{capture assign=relativeMinutes}{lang}wcf.date.relative.minutes{/lang}{/capture}{@$relativeMinutes|encodeJS}',
+ 'wcf.date.relative.hours': '{capture assign=relativeHours}{lang}wcf.date.relative.hours{/lang}{/capture}{@$relativeHours|encodeJS}',
+ 'wcf.date.relative.pastDays': '{capture assign=relativePastDays}{lang}wcf.date.relative.pastDays{/lang}{/capture}{@$relativePastDays|encodeJS}',
+ 'wcf.date.dateFormat': '{lang}wcf.date.dateFormat{/lang}',
+ 'wcf.date.dateTimeFormat': '{lang}wcf.date.dateTimeFormat{/lang}',
+ 'wcf.date.shortDateTimeFormat': '{lang}wcf.date.shortDateTimeFormat{/lang}',
+ 'wcf.date.hour': '{lang}wcf.date.hour{/lang}',
+ 'wcf.date.minute': '{lang}wcf.date.minute{/lang}',
+ 'wcf.date.timeFormat': '{lang}wcf.date.timeFormat{/lang}',
+ 'wcf.date.firstDayOfTheWeek': '{lang}wcf.date.firstDayOfTheWeek{/lang}',
+ 'wcf.global.button.add': '{lang}wcf.global.button.add{/lang}',
+ 'wcf.global.button.cancel': '{lang}wcf.global.button.cancel{/lang}',
+ 'wcf.global.button.close': '{lang}wcf.global.button.close{/lang}',
+ 'wcf.global.button.collapsible': '{lang}wcf.global.button.collapsible{/lang}',
+ 'wcf.global.button.delete': '{lang}wcf.global.button.delete{/lang}',
+ 'wcf.global.button.disable': '{lang}wcf.global.button.disable{/lang}',
+ 'wcf.global.button.disabledI18n': '{lang}wcf.global.button.disabledI18n{/lang}',
+ 'wcf.global.button.edit': '{lang}wcf.global.button.edit{/lang}',
+ 'wcf.global.button.enable': '{lang}wcf.global.button.enable{/lang}',
+ 'wcf.global.button.hide': '{lang}wcf.global.button.hide{/lang}',
+ 'wcf.global.button.next': '{lang}wcf.global.button.next{/lang}',
+ 'wcf.global.button.preview': '{lang}wcf.global.button.preview{/lang}',
+ 'wcf.global.button.reset': '{lang}wcf.global.button.reset{/lang}',
+ 'wcf.global.button.save': '{lang}wcf.global.button.save{/lang}',
+ 'wcf.global.button.search': '{lang}wcf.global.button.search{/lang}',
+ 'wcf.global.button.submit': '{lang}wcf.global.button.submit{/lang}',
+ 'wcf.global.button.upload': '{lang}wcf.global.button.upload{/lang}',
+ 'wcf.global.confirmation.cancel': '{lang}wcf.global.confirmation.cancel{/lang}',
+ 'wcf.global.confirmation.confirm': '{lang}wcf.global.confirmation.confirm{/lang}',
+ 'wcf.global.confirmation.title': '{lang}wcf.global.confirmation.title{/lang}',
+ 'wcf.global.decimalPoint': '{capture assign=decimalPoint}{lang}wcf.global.decimalPoint{/lang}{/capture}{$decimalPoint|encodeJS}',
+ 'wcf.global.error.timeout': '{lang}wcf.global.error.timeout{/lang}',
+ 'wcf.global.error.title': '{lang}wcf.global.error.title{/lang}',
+ 'wcf.global.form.error.empty': '{lang}wcf.global.form.error.empty{/lang}',
+ 'wcf.global.form.error.greaterThan': '{lang __literal=true}wcf.global.form.error.greaterThan{/lang}',
+ 'wcf.global.form.error.lessThan': '{lang __literal=true}wcf.global.form.error.lessThan{/lang}',
+ 'wcf.global.loading': '{lang}wcf.global.loading{/lang}',
+ 'wcf.global.page.jumpTo': '{lang}wcf.global.page.jumpTo{/lang}',
+ 'wcf.global.page.jumpTo.description': '{lang}wcf.global.page.jumpTo.description{/lang}',
+ 'wcf.global.page.pageNavigation': '{lang}wcf.global.page.pageNavigation{/lang}',
+ 'wcf.global.page.next': '{capture assign=pageNext}{lang}wcf.global.page.next{/lang}{/capture}{@$pageNext|encodeJS}',
+ 'wcf.global.page.previous': '{capture assign=pagePrevious}{lang}wcf.global.page.previous{/lang}{/capture}{@$pagePrevious|encodeJS}',
+ 'wcf.global.pageDirection': '{lang}wcf.global.pageDirection{/lang}',
+ 'wcf.global.reason': '{lang}wcf.global.reason{/lang}',
+ 'wcf.global.success': '{lang}wcf.global.success{/lang}',
+ 'wcf.global.success.add': '{lang}wcf.global.success.add{/lang}',
+ 'wcf.global.success.edit': '{lang}wcf.global.success.edit{/lang}',
+ 'wcf.global.thousandsSeparator': '{capture assign=thousandsSeparator}{lang}wcf.global.thousandsSeparator{/lang}{/capture}{@$thousandsSeparator|encodeJS}',
+ 'wcf.page.pagePosition': '{lang __literal=true}wcf.page.pagePosition{/lang}'
+ {event name='javascriptLanguageImport'}
+ });
+
+ AcpBootstrap.setup();
+ });
+ });
+ </script>
+ {js application='wcf' lib='jquery'}
+
+ <script>
+ // prevent jQuery and other libraries from utilizing define()
+ __require_define_amd = define.amd;
+ define.amd = undefined;
+ </script>
+ {js application='wcf' lib='jquery-ui'}
+ {js application='wcf' lib='jquery-ui' file='touchPunch' bundle='WCF.Combined'}
+ {js application='wcf' lib='jquery-ui' file='nestedSortable' bundle='WCF.Combined'}
+ {js application='wcf' file='WCF.Assets' bundle='WCF.Combined'}
+ {js application='wcf' file='WCF' bundle='WCF.Combined'}
+ {js application='wcf' acp='true' file='WCF.ACP'}
+ <script>
+ define.amd = __require_define_amd;
+ $.holdReady(true);
+ WCF.User.init({$__wcf->user->userID}, '{@$__wcf->user->username|encodeJS}');
+ </script>
+ <script>
+ $(function() {
+ {* work-around for unknown core-object during WCFSetup *}
+ {if PACKAGE_ID}
+ {assign var=activeMenuItems value=$__wcf->getACPMenu()->getActiveMenuItems()|array_reverse}
+ var $activeMenuItems = [{implode from=$activeMenuItems item=_menuItem}'{$_menuItem}'{/implode}];
+ new WCF.ACP.Menu($activeMenuItems);
+ {/if}
+
+ if (jQuery.browser.touch) $('html').addClass('touch');
+
+ new WCF.Effect.SmoothScroll();
+ WCF.System.PageNavigation.init('.pageNavigation');
+
+ {if $__wcf->user->userID}
+ new WCF.ACP.Search();
+ {/if}
+
+ {event name='javascriptInit'}
+
+ $('form[method=get]').attr('method', 'post');
+ });
+ </script>
+ {event name='javascriptInclude'}
+</head>
+
+<body id="tpl{$templateName|ucfirst}" data-template="{$templateName}" data-application="{$templateNameApplication}" class="wcfAcp">
+ <a id="top"></a>
+
+ {include file='pageHeader'}
+
+ {*
+ <header id="pageHeader" class="layoutFluid">
+ <div>
+ {if $__wcf->user->userID}
+ <nav id="topMenu" class="userPanel">
+ <div class="layoutFluid">
+ <ul class="userPanelItems">
+ <li id="userMenu" class="dropdown">
+ <a class="dropdownToggle framed" data-toggle="userMenu">{if PACKAGE_ID}{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(24)} {/if}{lang}wcf.user.userNote{/lang}</a>
+ <ul class="dropdownMenu">
+ {if PACKAGE_ID > 1}
+ <li><a href="{link controller='User' object=$__wcf->user forceFrontend=true}{/link}" class="box32">
+ <div class="framed">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(32)}</div>
+
+ <div class="containerHeadline">
+ <h3>{$__wcf->user->username}</h3>
+ <small>{lang}wcf.user.myProfile{/lang}</small>
+ </div>
+ </a></li>
+ {if $__wcf->getUserProfileHandler()->canEditOwnProfile()}<li><a href="{link controller='User' object=$__wcf->user forceFrontend=true}editOnInit=true#about{/link}">{lang}wcf.user.editProfile{/lang}</a></li>{/if}
+ <li><a href="{link controller='Settings' forceFrontend=true}{/link}">{lang}wcf.user.menu.settings{/lang}</a></li>
+
+ {event name='userMenuItems'}
+
+ <li class="dropdownDivider"></li>
+ {/if}
+ <li><a href="{link controller='Logout'}t={@SECURITY_TOKEN}{/link}" onclick="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></li>
+ </ul>
+ </li>
+
+ {if PACKAGE_ID > 1}
+ <li id="jumpToPage" class="dropdown">
+ <a href="{link forceFrontend=true}{/link}" class="dropdownToggle" data-toggle="jumpToPage"><span class="icon icon16 icon-home"></span> <span>{lang}wcf.global.jumpToPage{/lang}</span></a>
+ <ul class="dropdownMenu">
+ {foreach from=$__wcf->getPageMenu()->getMenuItems('header') item=_menuItem}
+ <li><a href="{$_menuItem->getProcessor()->getLink()}">{lang}{$_menuItem->menuItem}{/lang}</a></li>
+ {/foreach}
+ </ul>
+ </li>
+
+ {if $__wcf->session->getPermission('admin.system.package.canUpdatePackage') && $__wcf->getAvailableUpdates()}
+ <li>
+ <a href="{link controller='PackageUpdate'}{/link}"><span class="icon icon16 icon-refresh"></span> <span>{lang}wcf.acp.package.updates{/lang}</span> <span class="badge badgeInverse">{#$__wcf->getAvailableUpdates()}</span></a>
+ </li>
+ {/if}
+ {/if}
+
+ <li id="woltlab" class="dropdown">
+ <a class="dropdownToggle" data-toggle="woltlab"><span class="icon icon16 icon-info-sign"></span> <span>WoltLab®</span></a>
+
+ <ul class="dropdownMenu">
+ <li><a class="externalURL" href="{@$__wcf->getPath()}acp/dereferrer.php?url={"https://www.woltlab.com"|rawurlencode}"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>{lang}wcf.acp.index.woltlab.website{/lang}</a></li>
+ <li><a class="externalURL" href="{@$__wcf->getPath()}acp/dereferrer.php?url={"https://community.woltlab.com"|rawurlencode}"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>{lang}wcf.acp.index.woltlab.forums{/lang}</a></li>
+ <li><a class="externalURL" href="{@$__wcf->getPath()}acp/dereferrer.php?url={"https://www.woltlab.com/ticket-add/"|rawurlencode}"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>{lang}wcf.acp.index.woltlab.tickets{/lang}</a></li>
+ <li><a class="externalURL" href="{@$__wcf->getPath()}acp/dereferrer.php?url={"https://pluginstore.woltlab.com"|rawurlencode}"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>{lang}wcf.acp.index.woltlab.pluginStore{/lang}</a></li>
+ </ul>
+ </li>
+
+ {event name='topMenu'}
+ </ul>
- {if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.sidebar.bottom')}{/if}
- </aside>
-
- {if $sidebarOrientation|isset && $sidebarOrientation == 'right'}
- <script data-relocate="true">
- require(['WoltLab/WCF/Ui/Collapsible/Sidebar'], function(UiCollapsibleSidebar) {
- UiCollapsibleSidebar.setup();
- });
- </script>
+ {if $__wcf->getSession()->getPermission('admin.general.canUseAcp')}
+ <aside id="search" class="searchBar">
+ <form>
+ <input type="search" name="q" placeholder="{lang}wcf.global.search.enterSearchTerm{/lang}" value="" />
+ </form>
+ </aside>
+ {/if}
+ </div>
+ </nav>
+ {/if}
+
+ <div id="logo" class="logo">
+ <a href="{link}{/link}">
+ <h1>{lang}wcf.global.acp{/lang}</h1>
+ {if PACKAGE_ID > 1}
+ {event name='headerLogo'}
+ {else}
+ <img src="{@$__wcf->getPath()}acp/images/wcfLogo.png" alt="" style="height: 80px; width: 502px;" />
{/if}
- {/if}
- {/capture}
+ </a>
+ </div>
- {if !$sidebarOrientation|isset || $sidebarOrientation == 'left'}
- {@$__sidebar}
+ *}{* work-around for unknown core-object during WCFSetup *}{*
+ {if PACKAGE_ID && $__wcf->user->userID}
+ {hascontent}
+ <nav id="mainMenu" class="mainMenu">
+ <ul>{content}{foreach from=$__wcf->getACPMenu()->getMenuItems('') item=_menuItem}<li data-menu-item="{$_menuItem->menuItem}"><a>{lang}{@$_menuItem->menuItem}{/lang}</a></li>{/foreach}{/content}</ul>
+ </nav>
+ {/hascontent}
{/if}
- <div id="content" class="content">
- {if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.header.content')}{/if}
+ <nav class="navigation navigationHeader">
+ <ul class="navigationIcons">
+ <li id="toBottomLink" class="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>
+ {event name='navigationIcons'}
+ </ul>
+ </nav>
+ </div>
+ </header>
+ *}
+
+ <div id="main" class="layoutFluid{if PACKAGE_ID && $__wcf->user->userID && $__wcf->getACPMenu()->getMenuItems('')|count} sidebarOrientationLeft{/if}">
+ <div>
+ <div>
+ {hascontent}
+ <aside class="sidebar collapsibleMenu">
+ <div>
+ {content}
+ {* work-around for unknown core-object during WCFSetup *}
+ {if PACKAGE_ID && $__wcf->user->userID}
+ {foreach from=$__wcf->getACPMenu()->getMenuItems('') item=_parentMenuItem}
+ <div id="{$_parentMenuItem->menuItem}-container" style="display: none;" class="menuGroup collapsibleMenus" data-parent-menu-item="{$_parentMenuItem->menuItem}">
+ {foreach from=$__wcf->getACPMenu()->getMenuItems($_parentMenuItem->menuItem) item=_menuItem}
+ <fieldset>
+ <legend class="menuHeader" data-menu-item="{$_menuItem->menuItem}">{@$_menuItem}</legend>
+
+ <nav class="menuGroupItems">
+ <ul id="{$_menuItem->menuItem}">
+ {foreach from=$__wcf->getACPMenu()->getMenuItems($_menuItem->menuItem) item=menuItemCategory}
+ {if $__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem)|count > 0}
+ {foreach from=$__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem) item=subMenuItem}
+ <li id="{$subMenuItem->menuItem}" data-menu-item="{$subMenuItem->menuItem}"><a href="{$subMenuItem->getLink()}">{@$subMenuItem}</a></li>
+ {/foreach}
+ {else}
+ <li id="{$menuItemCategory->menuItem}" data-menu-item="{$menuItemCategory->menuItem}"><a href="{$menuItemCategory->getLink()}">{@$menuItemCategory}</a></li>
+ {/if}
+ {/foreach}
+ </ul>
+ </nav>
+ </fieldset>
+ {/foreach}
+ </div>
+ {/foreach}
+ {/if}
+ {/content}
+ </div>
+ </aside>
+ {/hascontent}
+
+ <section id="content" class="content">
- {event name='contents'}
{event name='settings'}
-<div id="search" class="searchBar dropdown" data-disable-auto-focus="true">
- <form method="post" action="{@$__searchFormLink}">
+<div id="search" class="searchBar" data-disable-auto-focus="true">
+ <form method="post" action="{@$__searchFormLink}" class="dropdown">
<input type="search" name="q" placeholder="{@$__searchInputPlaceholder}" autocomplete="off" required="required" value="{if $query|isset}{$query}{/if}" class="dropdownToggle" data-toggle="search" />
<ul class="dropdownMenu">
<ul class="inlineList">
<li class="jsShareFacebook">
<a>
- <span class="icon icon32 icon-facebook-sign jsTooltip" title="{lang}wcf.message.share.facebook{/lang}"></span>
+ <span class="icon icon32 fa-facebook-square jsTooltip" title="{lang}wcf.message.share.facebook{/lang}"></span>
<span class="invisible">{lang}wcf.message.share.facebook{/lang}</span>
</a>
<span class="badge" style="display: none">0</span>
</li>
<li class="jsShareTwitter">
<a>
- <span class="icon icon32 icon-twitter-sign jsTooltip" title="{lang}wcf.message.share.twitter{/lang}"></span>
+ <span class="icon icon32 fa-twitter-square jsTooltip" title="{lang}wcf.message.share.twitter{/lang}"></span>
<span class="invisible">{lang}wcf.message.share.twitter{/lang}</span>
</a>
<span class="badge" style="display: none">0</span>
</li>
<li class="jsShareGoogle">
<a>
- <span class="icon icon32 icon-google-plus-sign jsTooltip" title="{lang}wcf.message.share.google{/lang}"></span>
+ <span class="icon icon32 fa-google-plus-square jsTooltip" title="{lang}wcf.message.share.google{/lang}"></span>
<span class="invisible">{lang}wcf.message.share.google{/lang}</span>
</a>
<span class="badge" style="display: none">0</span>
</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>
+ <li><a href="{link controller='Settings'}{/link}" class="noJsOnly" style="display: none"><span class="icon icon16 fa-cogs"></span> <span>{lang}wcf.user.menu.settings{/lang}</span></a></li>
<!-- user notifications -->
{if !$__hideUserMenu|isset}
<li id="userNotifications" data-count="{#$__wcf->getUserNotificationHandler()->getNotificationCount()}">
- <a href="{link controller='NotificationList'}{/link}"><span class="icon icon16 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>
+ <a href="{link controller='NotificationList'}{/link}"><span class="icon icon16 fa-bell-o"></span> <span>{lang}wcf.user.notification.notifications{/lang}</span>{if $__wcf->getUserNotificationHandler()->getNotificationCount()} <span class="badge badgeInverse">{#$__wcf->getUserNotificationHandler()->getNotificationCount()}</span>{/if}</a>
{if !OFFLINE || $__wcf->session->getPermission('admin.general.canViewPageDuringOfflineMode')}
<script data-relocate="true">
//<![CDATA[
{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>
+ <a href="{link controller='GithubAuth'}{/link}" class="thirdPartyLoginButton githubLoginButton"><span class="icon icon16 fagithub"></span> <span>{lang}wcf.user.3rdparty.github.login{/lang}</span></a>
</li>
{/if}
{if TWITTER_PUBLIC_KEY !== '' && TWITTER_PRIVATE_KEY !== ''}
<li id="twitterAuth" class="3rdPartyAuth">
- <a href="{link controller='TwitterAuth'}{/link}" class="thirdPartyLoginButton twitterLoginButton"><span class="icon icon16 icon-twitter"></span> <span>{lang}wcf.user.3rdparty.twitter.login{/lang}</span></a>
+ <a href="{link controller='TwitterAuth'}{/link}" class="thirdPartyLoginButton twitterLoginButton"><span class="icon icon16 fa-twitter"></span> <span>{lang}wcf.user.3rdparty.twitter.login{/lang}</span></a>
</li>
{/if}
{if FACEBOOK_PUBLIC_KEY !== '' && FACEBOOK_PRIVATE_KEY !== ''}
<li id="facebookAuth" class="3rdPartyAuth">
- <a href="{link controller='FacebookAuth'}{/link}" class="thirdPartyLoginButton facebookLoginButton"><span class="icon icon16 icon-facebook"></span> <span>{lang}wcf.user.3rdparty.facebook.login{/lang}</span></a>
+ <a href="{link controller='FacebookAuth'}{/link}" class="thirdPartyLoginButton facebookLoginButton"><span class="icon icon16 fa-facebook"></span> <span>{lang}wcf.user.3rdparty.facebook.login{/lang}</span></a>
</li>
{/if}
{if GOOGLE_PUBLIC_KEY !== '' && GOOGLE_PRIVATE_KEY !== ''}
<li id="googleAuth" class="3rdPartyAuth">
- <a href="{link controller='GoogleAuth'}{/link}" class="thirdPartyLoginButton googleLoginButton"><span class="icon icon16 icon-google-plus"></span> <span>{lang}wcf.user.3rdparty.google.login{/lang}</span></a>
+ <a href="{link controller='GoogleAuth'}{/link}" class="thirdPartyLoginButton googleLoginButton"><span class="icon icon16 fa-google-plus"></span> <span>{lang}wcf.user.3rdparty.google.login{/lang}</span></a>
</li>
{/if}
{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 class="icon icon16 fa-exclamation-triangle"></span>
<span>{lang}wcf.moderation.moderation{/lang}</span>
{if $__wcf->getModerationQueueManager()->getUnreadModerationCount()}<span class="badge badgeInverse">{#$__wcf->getModerationQueueManager()->getUnreadModerationCount()}</span>{/if}
</a>
{/if}
{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>
+ <li><a href="{link controller='Logout'}t={@SECURITY_TOKEN}{/link}" class="noJsOnly" style="display: none"><span class="icon icon16 fa-sign-out"></span> <span>{lang}wcf.user.logout{/lang}</span></a></li>
{/if}
</ul>
</nav>
\ No newline at end of file
<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>
+ <a href="#" class="button dropdownToggle jsTooltip" title="{lang}wcf.user.searchUserContent{/lang}"><span class="icon icon16 fa-search"></span> <span class="invisible">{lang}wcf.user.searchUserContent{/lang}</span></a>
<ul class="dropdownMenu">
{content}
{event name='quickSearchItems'}
{/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>
+ <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 fa-exclamation-triangle"></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>
+ <li><a class="button jsTooltip" href="mailto:{@$user->getEncodedEmail()}" title="{lang}wcf.user.button.mail{/lang}"><span class="icon icon16 fa-envelope-o"></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>
+ <li><a class="button jsTooltip" href="{link controller='Mail' object=$user}{/link}" title="{lang}wcf.user.button.mail{/lang}"><span class="icon icon16 fa-envelope-o"></span> <span class="invisible">{lang}wcf.user.button.mail{/lang}</span></a></li>
{/if}
{/if}
$('.jsButtonPackageUpdate').click($.proxy(this._click, this));
}
else {
- var $button = $('<li><a class="button"><span class="icon icon16 icon-refresh"></span> <span>' + WCF.Language.get('wcf.acp.package.searchForUpdates') + '</span></a></li>');
+ var $button = $('<li><a class="button"><span class="icon icon16 fa-refresh"></span> <span>' + WCF.Language.get('wcf.acp.package.searchForUpdates') + '</span></a></li>');
$button.click($.proxy(this._click, this)).prependTo($('.contentNavigation:eq(0) > nav:not(.pageNavigation) > ul'));
}
},
<nav>
<ul>
- <li><a href="{link controller='ACPSessionLogList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.sessionLog.list{/lang}</span></a></li>
+ <li><a href="{link controller='ACPSessionLogList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.sessionLog.list{/lang}</span></a></li>
{event name='contentNavigationButtonsTop'}
</ul>
<nav>
<ul>
- <li><a href="{link controller='ACPSessionLogList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.sessionLog.list{/lang}</span></a></li>
+ <li><a href="{link controller='ACPSessionLogList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.sessionLog.list{/lang}</span></a></li>
{event name='contentNavigationButtonsBottom'}
</ul>
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='AdList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.ad.list{/lang}</span></a></li>
+ <li><a href="{link controller='AdList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.ad.list{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
<nav>
<ul>
- <li><a href="{link controller='AdAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.menu.link.ad.add{/lang}</span></a></li>
+ <li><a href="{link controller='AdAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.menu.link.ad.add{/lang}</span></a></li>
{event name='contentNavigationButtonsTop'}
</ul>
<span class="sortableNodeLabel">
<span class="statusDisplay sortableButtonContainer">
<span class="icon icon16 icon-check{if $ad->isDisabled}-empty{/if} jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if $ad->isDisabled}enable{else}disable{/if}{/lang}" data-object-id="{@$ad->adID}"></span>
- <a href="{link controller='AdEdit' object=$ad}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
- <span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$ad->adID}" data-confirm-message="{lang}wcf.acp.ad.delete.confirmMessage{/lang}"></span>
+ <a href="{link controller='AdEdit' object=$ad}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
+ <span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$ad->adID}" data-confirm-message="{lang}wcf.acp.ad.delete.confirmMessage{/lang}"></span>
{event name='itemButtons'}
</span>
<nav>
<ul>
- <li><a href="{link controller='AdAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.menu.link.ad.add{/lang}</span></a></li>
+ <li><a href="{link controller='AdAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.menu.link.ad.add{/lang}</span></a></li>
{event name='contentNavigationButtonsBottom'}
</ul>
<nav>
<ul>
{if $application->packageID != 1 && !$application->isPrimary}
- <li><a id="setAsPrimary" class="button"><span class="icon icon16 icon-ok-sign"></span> <span>{lang}wcf.acp.application.setAsPrimary{/lang}</span></a></li>
+ <li><a id="setAsPrimary" class="button"><span class="icon icon16 fa-home"></span> <span>{lang}wcf.acp.application.setAsPrimary{/lang}</span></a></li>
{/if}
- <li><a href="{link controller='ApplicationManagement'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.application.management{/lang}</span></a></li>
+ <li><a href="{link controller='ApplicationManagement'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.application.management{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
<tbody>
{foreach from=$applicationList item=application}
<tr>
- <td class="columnIcon"><a href="{link controller='ApplicationEdit' id=$application->packageID}{/link}" class="jsTooltip" title="{lang}wcf.global.button.edit{/lang}"><span class="icon icon16 icon-pencil"></span></a></td>
+ <td class="columnIcon"><a href="{link controller='ApplicationEdit' id=$application->packageID}{/link}" class="jsTooltip" title="{lang}wcf.global.button.edit{/lang}"><span class="icon icon16 fa-pencil"></span></a></td>
<td class="columnID columnPackageID">{#$application->packageID}</td>
<td class="columnText columnPackageName">
<a href="{link controller='ApplicationEdit' id=$application->packageID}{/link}">{$application->getPackage()}</a>
{if $application->isPrimary}
<aside class="statusDisplay">
<ul class="statusIcons">
- <li><span class="icon icon16 icon-ok-sign jsTooltip" title="{lang}wcf.acp.application.primaryApplication{/lang}"></span></li>
+ <li><span class="icon icon16 fa-home jsTooltip" title="{lang}wcf.acp.application.primaryApplication{/lang}"></span></li>
</ul>
</aside>
{/if}
{foreach from=$objects item=attachment}
<tr class="jsAttachmentRow">
<td class="columnIcon">
- <span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$attachment->attachmentID}" data-confirm-message="{lang}wcf.attachment.delete.sure{/lang}"></span>
+ <span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$attachment->attachmentID}" data-confirm-message="{lang}wcf.attachment.delete.sure{/lang}"></span>
{event name='rowButtons'}
</td>
{capture assign='attributeTemplate'}
<fieldset>
- <legend><span class="icon icon16 icon-remove pointer jsDeleteButton jsTooltip" title="{lang}wcf.global.button.delete{/lang}"></span> <span>{lang}wcf.acp.bbcode.attribute{/lang} {ldelim}#$attributeNo}</span></legend>
+ <legend><span class="icon icon16 fa-times pointer jsDeleteButton jsTooltip" title="{lang}wcf.global.button.delete{/lang}"></span> <span>{lang}wcf.acp.bbcode.attribute{/lang} {ldelim}#$attributeNo}</span></legend>
<dl>
<dt><label for="attributes[{ldelim}@$attributeNo}][attributeHtml]">{lang}wcf.acp.bbcode.attribute.attributeHtml{/lang}</label></dt>
<dd>
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='BBCodeList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.bbcode.list{/lang}</span></a></li>
+ <li><a href="{link controller='BBCodeList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.bbcode.list{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
{foreach from=$attributes item='attribute'}
<fieldset>
- <legend><span class="icon icon16 icon-remove pointer jsDeleteButton jsTooltip" title="{lang}wcf.global.button.delete{/lang}"></span> <span>{lang}wcf.acp.bbcode.attribute{/lang} {#$attribute->attributeNo}</span></legend>
+ <legend><span class="icon icon16 fa-times pointer jsDeleteButton jsTooltip" title="{lang}wcf.global.button.delete{/lang}"></span> <span>{lang}wcf.acp.bbcode.attribute{/lang} {#$attribute->attributeNo}</span></legend>
<dl{if $errorField == 'attributeHtml'|concat:$attribute->attributeNo} class="formError"{/if}>
<dt><label for="attributes[{@$attribute->attributeNo}][attributeHtml]">{lang}wcf.acp.bbcode.attribute.attributeHtml{/lang}</label></dt>
<nav>
<ul>
- <li><a href="{link controller='BBCodeAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.bbcode.add{/lang}</span></a></li>
+ <li><a href="{link controller='BBCodeAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.bbcode.add{/lang}</span></a></li>
{event name='contentNavigationButtonsTop'}
</ul>
{foreach from=$objects item=bbcode}
<tr class="jsBBCodeRow">
<td class="columnIcon">
- <span class="icon icon16 icon-check{if $bbcode->isDisabled}-empty{/if} jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if $bbcode->isDisabled}enable{else}disable{/if}{/lang}" data-object-id="{@$bbcode->bbcodeID}"></span>
- <a href="{link controller='BBCodeEdit' object=$bbcode}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
+ <span class="icon icon16 fa-{if !$bbcode->isDisabled}check-{/if}square-o jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if $bbcode->isDisabled}enable{else}disable{/if}{/lang}" data-object-id="{@$bbcode->bbcodeID}"></span>
+ <a href="{link controller='BBCodeEdit' object=$bbcode}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
{if $bbcode->canDelete()}
- <span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$bbcode->bbcodeID}" data-confirm-message="{lang}wcf.acp.bbcode.delete.sure{/lang}"></span>
+ <span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$bbcode->bbcodeID}" data-confirm-message="{lang}wcf.acp.bbcode.delete.sure{/lang}"></span>
{else}
<span class="icon icon16 fa-times disabled"></span>
{/if}
<nav>
<ul>
- <li><a href="{link controller='BBCodeAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.bbcode.add{/lang}</span></a></li>
+ <li><a href="{link controller='BBCodeAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.bbcode.add{/lang}</span></a></li>
{event name='contentNavigationButtonsBottom'}
</ul>
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='BBCodeMediaProviderList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.bbcode.mediaProvider.list{/lang}</span></a></li>
+ <li><a href="{link controller='BBCodeMediaProviderList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.bbcode.mediaProvider.list{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
<nav>
<ul>
- <li><a href="{link controller='BBCodeMediaProviderAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.bbcode.mediaProvider.add{/lang}</span></a></li>
+ <li><a href="{link controller='BBCodeMediaProviderAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.bbcode.mediaProvider.add{/lang}</span></a></li>
{event name='contentNavigationButtonsTop'}
</ul>
{foreach from=$objects item='mediaProvider'}
<tr class="jsMediaProviderRow">
<td class="columnIcon">
- <a href="{link controller='BBCodeMediaProviderEdit' object=$mediaProvider}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
- <span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$mediaProvider->providerID}" data-confirm-message="{lang}wcf.acp.bbcode.mediaProvider.delete.sure{/lang}"></span>
+ <a href="{link controller='BBCodeMediaProviderEdit' object=$mediaProvider}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
+ <span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$mediaProvider->providerID}" data-confirm-message="{lang}wcf.acp.bbcode.mediaProvider.delete.sure{/lang}"></span>
{event name='rowButtons'}
</td>
<nav>
<ul>
- <li><a href="{link controller='BBCodeMediaProviderAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.bbcode.mediaProvider.add{/lang}</span></a></li>
+ <li><a href="{link controller='BBCodeMediaProviderAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.bbcode.mediaProvider.add{/lang}</span></a></li>
{event name='contentNavigationButtonsBottom'}
</ul>
<dl>
<dt>{lang}wcf.acp.cache.data.source{/lang}</dt>
<dd>
- {assign var='__source' value='\\'|explode:$cacheData.source}
+ {assign var='__source' value="\\"|explode:$cacheData.source}
{lang}wcf.acp.cache.source.type.{$__source|array_pop}{/lang}
<small>{$cacheData.source}</small>
</dd>
<nav>
<ul>
{if $cacheData.files}
- <li><a onclick="WCF.System.Confirmation.show('{lang}wcf.acp.cache.clear.sure{/lang}', $.proxy(function (action) { if (action == 'confirm') window.location.href = $(this).attr('href'); }, this)); return false;" href="{link controller='CacheClear'}{/link}" class="button"><span class="icon icon16 icon-remove"></span> <span>{lang}wcf.acp.cache.button.clear{/lang}</span></a></li>
+ <li><a onclick="WCF.System.Confirmation.show('{lang}wcf.acp.cache.clear.sure{/lang}', $.proxy(function (action) { if (action == 'confirm') window.location.href = $(this).attr('href'); }, this)); return false;" href="{link controller='CacheClear'}{/link}" class="button"><span class="icon icon16 fa-times"></span> <span>{lang}wcf.acp.cache.button.clear{/lang}</span></a></li>
{/if}
{event name='contentNavigationButtonsTop'}
{counter name=cacheIndex assign=cacheIndex print=false start=0}
{if $files|count}
- <div class="tabularBox tabularBoxTitle marginTop">
- <header>
+ <section class="tabularBox tabularBoxTitle marginTop">
+ <header class="boxHeadline">
<h2><a class="jsCollapsible jsTooltip" data-is-open="0" data-collapsible-container="cache{@$cacheIndex}" title="{lang}wcf.global.button.collapsible{/lang}" class="jsTooltip"><span class="icon icon16 icon-chevron-right"></span></a> {lang}wcf.acp.cache.type.{$cacheType}{/lang} <span class="badge badgeInverse">{#$files|count}</span></h2>
<small>{$cache}</small>
</header>
{/foreach}
</tbody>
</table>
- </div>
+ </section>
{/if}
{/foreach}
{/foreach}
<nav>
<ul>
{if $cacheData.files}
- <li><a onclick="WCF.System.Confirmation.show('{lang}wcf.acp.cache.clear.sure{/lang}', $.proxy(function (action) { if (action == 'confirm') window.location.href = $(this).attr('href'); }, this)); return false;" href="{link controller='CacheClear'}{/link}" class="button"><span class="icon icon16 icon-remove"></span> <span>{lang}wcf.acp.cache.button.clear{/lang}</span></a></li>
+ <li><a onclick="WCF.System.Confirmation.show('{lang}wcf.acp.cache.clear.sure{/lang}', $.proxy(function (action) { if (action == 'confirm') window.location.href = $(this).attr('href'); }, this)); return false;" href="{link controller='CacheClear'}{/link}" class="button"><span class="icon icon16 fa-times"></span> <span>{lang}wcf.acp.cache.button.clear{/lang}</span></a></li>
{/if}
{event name='contentNavigationButtonsBottom'}
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='CaptchaQuestionList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.captcha.question.list{/lang}</span></a></li>
+ <li><a href="{link controller='CaptchaQuestionList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.captcha.question.list{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
<nav>
<ul>
- <li><a href="{link controller='CaptchaQuestionAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.captcha.question.add{/lang}</span></a></li>
+ <li><a href="{link controller='CaptchaQuestionAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.captcha.question.add{/lang}</span></a></li>
{event name='contentNavigationButtonsTop'}
</ul>
{foreach from=$objects item='question'}
<tr class="jsQuestionRow">
<td class="columnIcon">
- <span class="icon icon16 icon-check{if $question->isDisabled}-empty{/if} jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if $question->isDisabled}enable{else}disable{/if}{/lang}" data-object-id="{@$question->questionID}"></span>
- <a href="{link controller='CaptchaQuestionEdit' id=$question->questionID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
- <span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$question->questionID}" data-confirm-message="{lang}wcf.acp.captcha.question.delete.confirmMessage{/lang}"></span>
+ <span class="icon icon16 fa-{if !$question->isDisabled}-check{/if}-square-o jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if $question->isDisabled}enable{else}disable{/if}{/lang}" data-object-id="{@$question->questionID}"></span>
+ <a href="{link controller='CaptchaQuestionEdit' id=$question->questionID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
+ <span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$question->questionID}" data-confirm-message="{lang}wcf.acp.captcha.question.delete.confirmMessage{/lang}"></span>
{event name='rowButtons'}
</td>
<nav>
<ul>
- <li><a href="{link controller='CaptchaQuestionAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.captcha.question.add{/lang}</span></a></li>
+ <li><a href="{link controller='CaptchaQuestionAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.captcha.question.add{/lang}</span></a></li>
{event name='contentNavigationButtonsBottom'}
</ul>
{/if}
{if $objectType->getProcessor()->canDeleteCategory() || $objectType->getProcessor()->canEditCategory()}
- <li><a href="{link controller=$listController application=$objectType->getProcessor()->getApplication()}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{@$objectType->getProcessor()->getLanguageVariable('button.list')}</span></a></li>
+ <li><a href="{link controller=$listController application=$objectType->getProcessor()->getApplication()}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{@$objectType->getProcessor()->getLanguageVariable('button.list')}</span></a></li>
{/if}
{event name='contentNavigationButtons'}
<ul>
{content}
{if $objectType->getProcessor()->canAddCategory()}
- <li><a href="{link controller=$addController application=$objectType->getProcessor()->getApplication()}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{@$objectType->getProcessor()->getLanguageVariable('add')}</span></a></li>
+ <li><a href="{link controller=$addController application=$objectType->getProcessor()->getApplication()}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{@$objectType->getProcessor()->getLanguageVariable('add')}</span></a></li>
{/if}
{event name='contentNavigationButtons'}
<span class="statusDisplay buttons">
{if $objectType->getProcessor()->canEditCategory()}
- <a href="{link controller=$editController application=$objectType->getProcessor()->getApplication() id=$category->categoryID title=$category->getTitle()}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
+ <a href="{link controller=$editController application=$objectType->getProcessor()->getApplication() id=$category->categoryID title=$category->getTitle()}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
{/if}
{if $objectType->getProcessor()->canDeleteCategory()}
- <span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$category->categoryID}" data-confirm-message="{@$objectType->getProcessor()->getLanguageVariable('delete.sure')}"></span>
+ <span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$category->categoryID}" data-confirm-message="{@$objectType->getProcessor()->getLanguageVariable('delete.sure')}"></span>
{/if}
{if $objectType->getProcessor()->canEditCategory()}
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='CronjobList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.cronjob.list{/lang}</span></a></li>
+ <li><a href="{link controller='CronjobList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.cronjob.list{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
<nav>
<ul>
- <li><a href="{link controller='CronjobAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.cronjob.add{/lang}</span></a></li>
+ <li><a href="{link controller='CronjobAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.cronjob.add{/lang}</span></a></li>
{event name='contentNavigationButtonsTop'}
</ul>
{foreach from=$objects item=cronjob}
<tr class="jsCronjobRow">
<td class="columnIcon">
- <span class="icon icon16 icon-play jsExecuteButton jsTooltip pointer" title="{lang}wcf.acp.cronjob.execute{/lang}" data-object-id="{@$cronjob->cronjobID}"></span>
+ <span class="icon icon16 fa-play jsExecuteButton jsTooltip pointer" title="{lang}wcf.acp.cronjob.execute{/lang}" data-object-id="{@$cronjob->cronjobID}"></span>
{if $cronjob->canBeDisabled()}
- <span class="icon icon16 icon-check{if $cronjob->isDisabled}-empty{/if} jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if !$cronjob->isDisabled}disable{else}enable{/if}{/lang}" data-object-id="{@$cronjob->cronjobID}"></span>
+ <span class="icon icon16 fa-{if !$cronjob->isDisabled}check-{/if}square-o jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if !$cronjob->isDisabled}disable{else}enable{/if}{/lang}" data-object-id="{@$cronjob->cronjobID}"></span>
{else}
{if !$cronjob->isDisabled}
- <span class="icon icon16 icon-check disabled" title="{lang}wcf.global.button.disable{/lang}"></span>
+ <span class="icon icon16 fa-check-square-o disabled" title="{lang}wcf.global.button.disable{/lang}"></span>
{else}
- <span class="icon icon16 icon-check-empty disabled" title="{lang}wcf.global.button.enable{/lang}"></span>
+ <span class="icon icon16 fa-square-o disabled" title="{lang}wcf.global.button.enable{/lang}"></span>
{/if}
{/if}
{if $cronjob->isEditable()}
- <a href="{link controller='CronjobEdit' id=$cronjob->cronjobID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
+ <a href="{link controller='CronjobEdit' id=$cronjob->cronjobID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
{else}
- <span class="icon icon16 icon-pencil disabled" title="{lang}wcf.global.button.edit{/lang}"></span>
+ <span class="icon icon16 fa-pencil disabled" title="{lang}wcf.global.button.edit{/lang}"></span>
{/if}
{if $cronjob->isDeletable()}
- <span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$cronjob->cronjobID}" data-confirm-message="{lang}wcf.acp.cronjob.delete.sure{/lang}"></span>
+ <span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$cronjob->cronjobID}" data-confirm-message="{lang}wcf.acp.cronjob.delete.sure{/lang}"></span>
{else}
- <span class="icon icon16 icon-remove disabled" title="{lang}wcf.global.button.delete{/lang}"></span>
+ <span class="icon icon16 fa-times disabled" title="{lang}wcf.global.button.delete{/lang}"></span>
{/if}
{event name='rowButtons'}
<nav>
<ul>
- <li><a href="{link controller='CronjobAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.cronjob.add{/lang}</span></a></li>
+ <li><a href="{link controller='CronjobAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.cronjob.add{/lang}</span></a></li>
{event name='contentNavigationButtonsBottom'}
</ul>
<ul>
{content}
{if $objects|count}
- <li><a title="{lang}wcf.acp.cronjob.log.clear{/lang}" class="button jsCronjobLogDelete"><span class="icon icon16 icon-remove"></span> <span>{lang}wcf.acp.cronjob.log.clear{/lang}</span></a></li>
+ <li><a title="{lang}wcf.acp.cronjob.log.clear{/lang}" class="button jsCronjobLogDelete"><span class="icon icon16 fa-times"></span> <span>{lang}wcf.acp.cronjob.log.clear{/lang}</span></a></li>
{/if}
{event name='contentNavigationButtonsTop'}
<nav>
<ul>
- <li><a title="{lang}wcf.acp.cronjob.log.clear{/lang}" class="button jsCronjobLogDelete"><span class="icon icon16 icon-remove"></span> <span>{lang}wcf.acp.cronjob.log.clear{/lang}</span></a></li>
+ <li><a title="{lang}wcf.acp.cronjob.log.clear{/lang}" class="button jsCronjobLogDelete"><span class="icon icon16 fa-times"></span> <span>{lang}wcf.acp.cronjob.log.clear{/lang}</span></a></li>
{event name='contentNavigationButtonsBottom'}
</ul>
{foreach from=$objectTypes item=$objectType}
<tr>
<td class="columnIcon">
- <a href="{link controller='DashboardOption' id=$objectType->objectTypeID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
+ <a href="{link controller='DashboardOption' id=$objectType->objectTypeID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
{event name='rowButtons'}
</td>
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='DashboardList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.dashboard.list{/lang}</span></a></li>
+ <li><a href="{link controller='DashboardList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.dashboard.list{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
<title>{if $pageTitle|isset}{@$pageTitle|language} - {/if}{lang}wcf.global.acp{/lang}{if PACKAGE_ID} - {PAGE_TITLE|language}{/if}</title>
<!-- Stylesheets -->
+ <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
{@$__wcf->getStyleHandler()->getStylesheet(true)}
{event name='stylesheets'}
<body id="tpl{$templateName|ucfirst}" data-template="{$templateName}" data-application="{$templateNameApplication}" class="wcfAcp">
<a id="top"></a>
+ <div id="pageContainer" class="pageContainer">
+ {event name='beforePageHeader'}
+
+ {include file='pageHeader'}
+
+ {event name='afterPageHeader'}
+
+ {*include file='pageNavbarTop'*}
+
+ <section id="main" class="main" role="main">
+
+ {*
<header id="pageHeader" class="layoutFluid">
<div>
{if $__wcf->user->userID}
</a>
</div>
- {* work-around for unknown core-object during WCFSetup *}
+ *}{* work-around for unknown core-object during WCFSetup *}{*
{if PACKAGE_ID && $__wcf->user->userID}
{hascontent}
<nav id="mainMenu" class="mainMenu">
</nav>
</div>
</header>
+ *}
<div id="main" class="layoutFluid{if PACKAGE_ID && $__wcf->user->userID && $__wcf->getACPMenu()->getMenuItems('')|count} sidebarOrientationLeft{/if}">
<div>
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='LabelList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.label.list{/lang}</span></a></li>
+ <li><a href="{link controller='LabelList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.label.list{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='LabelGroupList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.label.group.list{/lang}</span></a></li>
+ <li><a href="{link controller='LabelGroupList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.label.group.list{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
<nav>
<ul>
- <li><a href="{link controller='LabelGroupAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.label.group.add{/lang}</span></a></li>
+ <li><a href="{link controller='LabelGroupAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.label.group.add{/lang}</span></a></li>
{event name='contentNavigationButtonsTop'}
</ul>
{foreach from=$objects item=group}
<tr class="jsLabelGroupRow">
<td class="columnIcon">
- <a href="{link controller='LabelGroupEdit' object=$group}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
- <span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$group->groupID}" data-confirm-message="{lang}wcf.acp.label.group.delete.sure{/lang}"></span>
+ <a href="{link controller='LabelGroupEdit' object=$group}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
+ <span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$group->groupID}" data-confirm-message="{lang}wcf.acp.label.group.delete.sure{/lang}"></span>
{event name='rowButtons'}
</td>
<nav>
<ul>
- <li><a href="{link controller='LabelGroupAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.label.group.add{/lang}</span></a></li>
+ <li><a href="{link controller='LabelGroupAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.label.group.add{/lang}</span></a></li>
{event name='contentNavigationButtonsBottom'}
</ul>
<nav>
<ul>
- <li><a href="{link controller='LabelAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.label.add{/lang}</span></a></li>
+ <li><a href="{link controller='LabelAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.label.add{/lang}</span></a></li>
{event name='contentNavigationButtonsTop'}
</ul>
{foreach from=$objects item=label}
<tr class="jsLabelRow">
<td class="columnIcon">
- <a href="{link controller='LabelEdit' object=$label}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
- <span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$label->labelID}" data-confirm-message="{lang}wcf.acp.label.delete.sure{/lang}"></span>
+ <a href="{link controller='LabelEdit' object=$label}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
+ <span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$label->labelID}" data-confirm-message="{lang}wcf.acp.label.delete.sure{/lang}"></span>
{event name='rowButtons'}
</td>
<nav>
<ul>
- <li><a href="{link controller='LabelAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.label.add{/lang}</span></a></li>
+ <li><a href="{link controller='LabelAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.label.add{/lang}</span></a></li>
{event name='contentNavigationButtonsBottom'}
</ul>
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='LanguageList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.language.list{/lang}</span></a></li>
+ <li><a href="{link controller='LanguageList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.language.list{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='LanguageList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.language.list{/lang}</span></a></li>
+ <li><a href="{link controller='LanguageList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.language.list{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='LanguageList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.language.list{/lang}</span></a></li>
+ <li><a href="{link controller='LanguageList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.language.list{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
<nav>
<ul>
- <li><a href="{link controller='LanguageAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.language.add{/lang}</span></a></li>
- <li><a href="{link controller='LanguageImport'}{/link}" class="button"><span class="icon icon16 icon-upload-alt"></span> <span>{lang}wcf.acp.language.import{/lang}</span></a></li>
+ <li><a href="{link controller='LanguageAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.language.add{/lang}</span></a></li>
+ <li><a href="{link controller='LanguageImport'}{/link}" class="button"><span class="icon icon16 fa-upload"></span> <span>{lang}wcf.acp.language.import{/lang}</span></a></li>
{event name='contentNavigationButtonsTop'}
</ul>
{foreach from=$objects item=language}
<tr class="jsLanguageRow">
<td class="columnIcon">
- <a href="{link controller='LanguageExport' id=$language->languageID}{/link}" title="{lang}wcf.acp.language.export{/lang}" class="jsTooltip"><span class="icon icon16 icon-download-alt"></span></a>
+ <a href="{link controller='LanguageExport' id=$language->languageID}{/link}" title="{lang}wcf.acp.language.export{/lang}" class="jsTooltip"><span class="icon icon16 fa-download"></span></a>
{if !$language->isDefault}
- <span class="icon icon16 icon-ok-sign jsSetAsDefaultButton jsTooltip pointer" title="{lang}wcf.acp.language.setAsDefault{/lang}" title="{lang}wcf.acp.language.setAsDefault{/lang}" data-object-id="{@$language->languageID}"></span>
+ <span class="icon icon16 fa-check-square-o jsSetAsDefaultButton jsTooltip pointer" title="{lang}wcf.acp.language.setAsDefault{/lang}" title="{lang}wcf.acp.language.setAsDefault{/lang}" data-object-id="{@$language->languageID}"></span>
{else}
- <span class="icon icon16 icon-ok-sign disabled" title="{lang}wcf.acp.language.setAsDefault{/lang}"></span>
+ <span class="icon icon16 fa-check-square-o disabled" title="{lang}wcf.acp.language.setAsDefault{/lang}"></span>
{/if}
- <a href="{link controller='LanguageEdit' id=$language->languageID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
+ <a href="{link controller='LanguageEdit' id=$language->languageID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
{if !$language->isDefault}
- <span class="icon icon16 icon-remove jsTooltip jsDeleteButton pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$language->languageID}" data-confirm-message="{lang}wcf.acp.language.delete.sure{/lang}"></span>
+ <span class="icon icon16 fa-times jsTooltip jsDeleteButton pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$language->languageID}" data-confirm-message="{lang}wcf.acp.language.delete.sure{/lang}"></span>
{else}
- <span class="icon icon16 icon-remove disabled" title="{lang}wcf.global.button.delete{/lang}"></span>
+ <span class="icon icon16 fa-times disabled" title="{lang}wcf.global.button.delete{/lang}"></span>
{/if}
{event name='rowButtons'}
<nav>
<ul>
- <li><a href="{link controller='LanguageAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.language.add{/lang}</span></a></li>
- <li><a href="{link controller='LanguageImport'}{/link}" class="button"><span class="icon icon16 icon-upload-alt"></span> <span>{lang}wcf.acp.language.import{/lang}</span></a></li>
+ <li><a href="{link controller='LanguageAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.language.add{/lang}</span></a></li>
+ <li><a href="{link controller='LanguageImport'}{/link}" class="button"><span class="icon icon16 fa-upload"></span> <span>{lang}wcf.acp.language.import{/lang}</span></a></li>
{event name='contentNavigationButtonsBottom'}
</ul>
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='LanguageServerList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.language.server.list{/lang}</span></a></li>
+ <li><a href="{link controller='LanguageServerList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.language.server.list{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
<nav>
<ul>
- <li><a href="{link controller='LanguageServerAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.languageServer.add{/lang}</span></a></li>
+ <li><a href="{link controller='LanguageServerAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.languageServer.add{/lang}</span></a></li>
{event name='contentNavigationButtonsTop'}
</ul>
<tr class="jsLanguageServerRow">
<td class="columnIcon">
<span class="icon icon16 icon-check{if $languageServer->isDisabled}-empty{/if} jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if !$languageServer->isDisabled}disable{else}enable{/if}{/lang}" data-object-id="{@$languageServer->languageServerID}"></span>
- <a href="{link controller='LanguageServerEdit' id=$languageServer->languageServerID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
+ <a href="{link controller='LanguageServerEdit' id=$languageServer->languageServerID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
- <span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$languageServer->languageServerID}" data-confirm-message="{lang}wcf.acp.languageServer.delete.sure{/lang}"></span>
+ <span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$languageServer->languageServerID}" data-confirm-message="{lang}wcf.acp.languageServer.delete.sure{/lang}"></span>
{event name='rowButtons'}
</td>
<nav>
<ul>
- <li><a href="{link controller='LanguageServerAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.languageServer.add{/lang}</span></a></li>
+ <li><a href="{link controller='LanguageServerAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.languageServer.add{/lang}</span></a></li>
{event name='contentNavigationButtonsBottom'}
</ul>
--- /dev/null
+<nav id="mainMenu" class="mainMenu jsMobileNavigation" data-button-label="{lang}wcf.page.mainMenu{/lang}">
+ <ul>
+ <li>
+ <a href="#" id="daytay"><span class="icon icon24 fa-bars"></span> Menu</a>
+
+ <ol id="dtdesign">
+ <li id="leftColumnContainer">
+ <ol id="leftColumn" class="menuItemList"></ol>
+ </li>
+ <li id="centerColumnContainer"></li>
+ <li id="rightColumnContainer"></li>
+ </ol>
+ </li>
+ </ul>
+</nav>
+
+{* work-around for unknown core-object during WCFSetup *}
+{*{if PACKAGE_ID && $__wcf->user->userID}
+ <nav id="mainMenu" class="mainMenu jsMobileNavigation" data-button-label="{lang}wcf.page.mainMenu{/lang}">
+ <ul>
+ {foreach from=$__wcf->getACPMenu()->getMenuItems('') item=_parentMenuItem}
+ <li class="subMenuItems">
+ <a href="#">{lang}{@$_parentMenuItem->menuItem}{/lang}</a>
+
+ <ol class="subMenu">
+ {foreach from=$__wcf->getACPMenu()->getMenuItems($_parentMenuItem->menuItem) item=_menuItem}
+ <li>
+ <a href="#">{@$_menuItem}</a>
+
+ <ol class="dtdesign">
+ {foreach from=$__wcf->getACPMenu()->getMenuItems($_menuItem->menuItem) item=menuItemCategory}
+ {if $__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem)|count > 0}
+ {foreach from=$__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem) item=subMenuItem}
+ <li id="{$subMenuItem->menuItem}" data-menu-item="{$subMenuItem->menuItem}"><a href="{$subMenuItem->getLink()}">{@$subMenuItem}</a></li>
+ {/foreach}
+ {else}
+ <li id="{$menuItemCategory->menuItem}" data-menu-item="{$menuItemCategory->menuItem}"><a href="{$menuItemCategory->getLink()}">{@$menuItemCategory}</a></li>
+ {/if}
+ {/foreach}
+ </ol>
+ </li>
+ {/foreach}
+ </ol>
+ </li>
+ {/foreach}
+ </ul>
+ </nav>
+{/if}*}
+
+<script>
+var structure = [], menuCategory, category;
+
+{foreach from=$__wcf->getACPMenu()->getMenuItems('') item=_parentMenuItem}
+ menuCategory = {
+ label: '{lang}{@$_parentMenuItem->menuItem}{/lang}',
+ items: []
+ };
+
+ {foreach from=$__wcf->getACPMenu()->getMenuItems($_parentMenuItem->menuItem) item=_menuItem}
+ category = {
+ label: '{@$_menuItem}',
+ items: []
+ };
+
+ {foreach from=$__wcf->getACPMenu()->getMenuItems($_menuItem->menuItem) item=menuItemCategory}
+ {if $__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem)|count > 0}
+ {foreach from=$__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem) item=subMenuItem}
+ category.items.push({
+ label: '{@$subMenuItem}',
+ link: '{$subMenuItem->getLink()}'
+ });
+ {/foreach}
+ {else}
+ category.items.push({
+ label: '{@$menuItemCategory}',
+ link: '{$menuItemCategory->getLink()}'
+ });
+ {/if}
+ {/foreach}
+
+ menuCategory.items.push(category);
+ {/foreach}
+
+ structure.push(menuCategory);
+{/foreach}
+
+const LEFT = 1;
+const CENTER = 2;
+const RIGHT = 3;
+
+function getList(position, isContainer) {
+ var list;
+ if (position === LEFT) {
+ list = 'left';
+ }
+ else {
+ list = (position === CENTER) ? 'center' : 'right';
+ }
+
+ return document.getElementById(list + 'Column' + (isContainer === true ? 'Container' : ''));
+}
+
+function createListItem(position, label, data, isSubCategory, link) {
+ var list = (typeof position === 'object') ? position : getList(position);
+
+ var listItem = document.createElement('li');
+ var linkEl = document.createElement('a');
+ linkEl.textContent = label;
+ linkEl.href = (link ? link : '#');
+
+ listItem.appendChild(linkEl);
+ list.appendChild(listItem);
+
+ if (!link) {
+ linkEl.addEventListener('click', function(e) {
+ e.preventDefault();
+
+ showCategories(data, isSubCategory);
+
+ markAsActive(this);
+ })
+ }
+}
+
+function markAsActive(element) {
+ var list = element.parentNode.parentNode;
+ var item, items = list.querySelectorAll('LI');
+ for (var i = 0, length = items.length; i < length; i++) {
+ item = items[i];
+ console.debug(item);
+ item.classList[(item === element.parentNode ? 'add' : 'remove')]('active2');
+ }
+}
+
+var x;
+for (var i = 0, length = structure.length; i < length; i++) {
+ x = structure[i];
+
+ createListItem(LEFT, x.label, x.items);
+}
+
+function showCategories(items, isSubCategory) {
+ var right = getList(RIGHT, true);
+ right.innerHTML = '';
+
+ var center = getList(CENTER, true);
+ if (isSubCategory !== true) center.innerHTML = '';
+
+ list = document.createElement('ol');
+ list.className = 'menuItemList';
+ list.id = 'centerColumn';
+
+ var item;
+ for (var i = 0, length = items.length; i < length; i++) {
+ item = items[i];
+
+ createListItem(list, item.label, item.items, true, (typeof item.link === 'string') ? item.link : '');
+ }
+
+ (isSubCategory === true ? right : center).appendChild(list);
+}
+</script>
+
+<style>
+ #mainMenu {
+ position: relative;
+ }
+
+ #mainMenu .icon {
+ color: rgb(255, 255, 255);
+ }
+
+ #dtdesign {
+ background-color: #fff;
+ border: 1px solid rgb(44, 62, 80);
+ box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .2);
+ display: flex;
+ position: absolute;
+ top: 51px;
+ }
+
+ #dtdesign > li {
+ flex: 0 auto;
+ }
+
+ #dtdesign > li:not(:empty) {
+ border-left: 1px solid rgb(238, 238, 238);
+ }
+
+ #dtdesign > li:first-child {
+ border-left-width: 0;
+ }
+
+ .menuItemList {
+ min-width: 250px;
+ }
+
+ .menuItemList > li > a {
+ color: rgb(54, 54, 54);
+ display: block;
+ font-size: 1rem;
+ padding: 10px 40px 10px 20px;
+ white-space: nowrap;
+ }
+
+ .menuItemList > li.active2 > a {
+ background-color: rgb(189, 195, 199);
+ }
+
+ .menuItemList > li > a:hover {
+ background-color: rgb(66, 129, 244);
+ color: #fff;
+ text-decoration: none;
+ }
+
+ .menuItemList > li > a[href="#"] {
+ position: relative;
+ }
+
+ .menuItemList > li > a[href="#"]::after {
+ content: "\f105";
+ font-family: FontAwesome;
+ position: absolute;
+ right: 20px;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+
+ .menuItemList > li.active2 > a[href="#"]::after {
+ content: "\f104"
+ }
+</style>
--- /dev/null
+{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'}
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='NoticeList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.notice.list{/lang}</span></a></li>
+ <li><a href="{link controller='NoticeList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.notice.list{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
<nav>
<ul>
- <li><a href="{link controller='NoticeAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.menu.link.notice.add{/lang}</span></a></li>
+ <li><a href="{link controller='NoticeAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.menu.link.notice.add{/lang}</span></a></li>
{event name='contentNavigationButtonsTop'}
</ul>
<a href="{link controller='NoticeEdit' object=$notice}{/link}">{$notice->noticeName}</a>
<span class="statusDisplay sortableButtonContainer">
- <span class="icon icon16 icon-check{if $notice->isDisabled}-empty{/if} jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if $notice->isDisabled}enable{else}disable{/if}{/lang}" data-object-id="{@$notice->noticeID}"></span>
- <a href="{link controller='NoticeEdit' object=$notice}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
- <span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$notice->noticeID}" data-confirm-message="{lang}wcf.acp.notice.delete.confirmMessage{/lang}"></span>
+ <span class="icon icon16 fa-{if $notice->isDisabled}check-{/if}square-o jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if $notice->isDisabled}enable{else}disable{/if}{/lang}" data-object-id="{@$notice->noticeID}"></span>
+ <a href="{link controller='NoticeEdit' object=$notice}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
+ <span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$notice->noticeID}" data-confirm-message="{lang}wcf.acp.notice.delete.confirmMessage{/lang}"></span>
{event name='itemButtons'}
</span>
<nav>
<ul>
- <li><a href="{link controller='NoticeAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.menu.link.notice.add{/lang}</span></a></li>
+ <li><a href="{link controller='NoticeAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.menu.link.notice.add{/lang}</span></a></li>
{event name='contentNavigationButtonsBottom'}
</ul>
<tr class="jsPackageRow">
<td class="columnIcon">
{if $requiredPackage->canUninstall()}
- <span class="icon icon16 icon-remove pointer jsTooltip jsUninstallButton" title="{lang}wcf.acp.package.button.uninstall{/lang}" data-object-id="{@$requiredPackage->packageID}" data-confirm-message="{lang package=$requiredPackage}wcf.acp.package.uninstallation.confirm{/lang}" data-is-required="{if $requiredPackage->isRequired()}true{else}false{/if}" data-is-application="{if $requiredPackage->isApplication}true{else}false{/if}"></span>
+ <span class="icon icon16 fa-times pointer jsTooltip jsUninstallButton" title="{lang}wcf.acp.package.button.uninstall{/lang}" data-object-id="{@$requiredPackage->packageID}" data-confirm-message="{lang package=$requiredPackage}wcf.acp.package.uninstallation.confirm{/lang}" data-is-required="{if $requiredPackage->isRequired()}true{else}false{/if}" data-is-application="{if $requiredPackage->isApplication}true{else}false{/if}"></span>
{else}
- <span class="icon icon16 icon-remove disabled" title="{lang}wcf.acp.package.button.uninstall{/lang}"></span>
+ <span class="icon icon16 fa-times disabled" title="{lang}wcf.acp.package.button.uninstall{/lang}"></span>
{/if}
</td>
<td class="columnID">{@$requiredPackage->packageID}</td>
<tr class="jsPackageRow">
<td class="columnIcon">
{if $dependentPackage->canUninstall()}
- <span class="icon icon16 icon-remove pointer jsTooltip jsUninstallButton" title="{lang}wcf.acp.package.button.uninstall{/lang}" data-object-id="{@$dependentPackage->packageID}" data-confirm-message="{lang package=$dependentPackage}wcf.acp.package.uninstallation.confirm{/lang}" data-is-required="{if $dependentPackage->isRequired()}true{else}false{/if}" data-is-application="{if $dependentPackage->isApplication}true{else}false{/if}"></span>
+ <span class="icon icon16 fa-times pointer jsTooltip jsUninstallButton" title="{lang}wcf.acp.package.button.uninstall{/lang}" data-object-id="{@$dependentPackage->packageID}" data-confirm-message="{lang package=$dependentPackage}wcf.acp.package.uninstallation.confirm{/lang}" data-is-required="{if $dependentPackage->isRequired()}true{else}false{/if}" data-is-application="{if $dependentPackage->isApplication}true{else}false{/if}"></span>
{else}
- <span class="icon icon16 icon-remove disabled" title="{lang}wcf.acp.package.button.uninstall{/lang}"></span>
+ <span class="icon icon16 fa-times disabled" title="{lang}wcf.acp.package.button.uninstall{/lang}"></span>
{/if}
</td>
<td class="columnID">{@$dependentPackage->packageID}</td>
<ul>
{event name='contentNavigationButtonsBottom'}
- <li><a href="{link controller='PackageList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.package.list{/lang}</span></a></li>
+ <li><a href="{link controller='PackageList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.package.list{/lang}</span></a></li>
</ul>
</nav>
</div>
<ul>
{content}
{if $__wcf->session->getPermission('admin.system.package.canInstallPackage')}
- <li><a href="{link controller='PackageStartInstall'}action=install{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.package.startInstall{/lang}</span></a></li>
+ <li><a href="{link controller='PackageStartInstall'}action=install{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.package.startInstall{/lang}</span></a></li>
{/if}
{event name='contentNavigationButtonsTop'}
<tr class="jsPackageRow">
<td class="columnIcon">
{if $package->canUninstall()}
- <span class="icon icon16 icon-remove pointer jsUninstallButton jsTooltip" title="{lang}wcf.acp.package.button.uninstall{/lang}" data-object-id="{@$package->packageID}" data-confirm-message="{lang}wcf.acp.package.uninstallation.confirm{/lang}" data-is-required="{if $package->isRequired()}true{else}false{/if}" data-is-application="{if $package->isApplication}true{else}false{/if}"></span>
+ <span class="icon icon16 fa-times pointer jsUninstallButton jsTooltip" title="{lang}wcf.acp.package.button.uninstall{/lang}" data-object-id="{@$package->packageID}" data-confirm-message="{lang}wcf.acp.package.uninstallation.confirm{/lang}" data-is-required="{if $package->isRequired()}true{else}false{/if}" data-is-application="{if $package->isApplication}true{else}false{/if}"></span>
{else}
- <span class="icon icon16 icon-remove disabled" title="{lang}wcf.acp.package.button.uninstall{/lang}"></span>
+ <span class="icon icon16 fa-times disabled" title="{lang}wcf.acp.package.button.uninstall{/lang}"></span>
{/if}
{event name='rowButtons'}
<ul>
{content}
{if $__wcf->session->getPermission('admin.system.package.canInstallPackage')}
- <li><a href="{link controller='PackageStartInstall'}action=install{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.package.startInstall{/lang}</span></a></li>
+ <li><a href="{link controller='PackageStartInstall'}action=install{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.package.startInstall{/lang}</span></a></li>
{/if}
{event name='contentNavigationButtonsBottom'}
{foreach from=$packageUpdates item=$package}
<tr class="jsPackageRow">
<td class="columnIcon">
- <a class="jsInstallPackage" data-confirm-message="{lang}wcf.acp.package.install.confirmMessage{/lang}" data-package="{$package->package}" data-package-version="{$package->getAccessibleVersion()->packageVersion}"><span class="icon icon16 icon-plus jsTooltip" title="{lang}wcf.acp.package.button.installPackage{/lang}"></span></a>
+ <a class="jsInstallPackage" data-confirm-message="{lang}wcf.acp.package.install.confirmMessage{/lang}" data-package="{$package->package}" data-package-version="{$package->getAccessibleVersion()->packageVersion}"><span class="icon icon16 fa-plus jsTooltip" title="{lang}wcf.acp.package.button.installPackage{/lang}"></span></a>
{event name='buttons'}
</td>
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='PackageList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.package.list{/lang}</span></a></li>
+ <li><a href="{link controller='PackageList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.package.list{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='PackageUpdateServerList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.package.server.list{/lang}</span></a></li>
+ <li><a href="{link controller='PackageUpdateServerList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.package.server.list{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
<nav>
<ul>
- <li><a href="{link controller='PackageUpdateServerAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.updateServer.add{/lang}</span></a></li>
+ <li><a href="{link controller='PackageUpdateServerAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.updateServer.add{/lang}</span></a></li>
{event name='contentNavigationButtonsTop'}
</ul>
{foreach from=$objects item=updateServer}
<tr class="jsUpdateServerRow">
<td class="columnIcon">
- <span class="icon icon16 icon-check{if $updateServer->isDisabled}-empty{/if} jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if !$updateServer->isDisabled}disable{else}enable{/if}{/lang}" data-object-id="{@$updateServer->packageUpdateServerID}"></span>
- <a href="{link controller='PackageUpdateServerEdit' id=$updateServer->packageUpdateServerID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
- <span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$updateServer->packageUpdateServerID}" data-confirm-message="{lang}wcf.acp.updateServer.delete.sure{/lang}"></span>
+ <span class="icon icon16 fa-{if !$updateServer->isDisabled}check-{/if}square-o jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if !$updateServer->isDisabled}disable{else}enable{/if}{/lang}" data-object-id="{@$updateServer->packageUpdateServerID}"></span>
+ <a href="{link controller='PackageUpdateServerEdit' id=$updateServer->packageUpdateServerID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
+ <span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$updateServer->packageUpdateServerID}" data-confirm-message="{lang}wcf.acp.updateServer.delete.sure{/lang}"></span>
{event name='itemButtons'}
</td>
<nav>
<ul>
- <li><a href="{link controller='PackageUpdateServerAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.updateServer.add{/lang}</span></a></li>
+ <li><a href="{link controller='PackageUpdateServerAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.updateServer.add{/lang}</span></a></li>
{event name='contentNavigationButtonsBottom'}
</ul>
--- /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>
+
+ <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>
--- /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
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='PageMenuItemList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.pageMenu.list{/lang}</span></a></li>
+ <li><a href="{link controller='PageMenuItemList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.pageMenu.list{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='PageMenuItemAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.pageMenu.add{/lang}</span></a></li>
+ <li><a href="{link controller='PageMenuItemAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.pageMenu.add{/lang}</span></a></li>
{event name='contentNavigationButtonsTop'}
</ul>
{else}
<span class="icon icon16 icon-check{if $menuItem->isDisabled}-empty{/if} disabled" title="{lang}wcf.global.button.{if $menuItem->isDisabled}enable{else}disable{/if}{/lang}"></span>
{/if}
- <a href="{link controller='PageMenuItemEdit' id=$menuItem->menuItemID}{/link}" class="jsTooltip" title="{lang}wcf.global.button.edit{/lang}"><span class="icon icon16 icon-pencil"></span></a>
+ <a href="{link controller='PageMenuItemEdit' id=$menuItem->menuItemID}{/link}" class="jsTooltip" title="{lang}wcf.global.button.edit{/lang}"><span class="icon icon16 fa-pencil"></span></a>
{if $menuItem->canDelete()}
- <span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$menuItem->menuItemID}" data-confirm-message="{lang __menuItem=$menuItem}wcf.acp.pageMenu.delete.sure{/lang}"></span>
+ <span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$menuItem->menuItemID}" data-confirm-message="{lang __menuItem=$menuItem}wcf.acp.pageMenu.delete.sure{/lang}"></span>
{else}
- <span class="icon icon16 icon-remove disabled" title="{lang}wcf.global.button.delete{/lang}"></span>
+ <span class="icon icon16 fa-times disabled" title="{lang}wcf.global.button.delete{/lang}"></span>
{/if}
{event name='headerItemButtons'}
<a href="{link controller='PageMenuItemEdit' id=$childMenuItem->menuItemID}{/link}">{lang}{$childMenuItem->menuItem}{/lang}</a>
<span class="statusDisplay sortableButtonContainer">
<span class="icon icon16 icon-check{if $childMenuItem->isDisabled}-empty{/if} jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if $childMenuItem->isDisabled}enable{else}disable{/if}{/lang}" data-object-id="{@$childMenuItem->menuItemID}"></span>
- <a href="{link controller='PageMenuItemEdit' id=$childMenuItem->menuItemID}{/link}" class="jsTooltip" title="{lang}wcf.global.button.edit{/lang}"><span class="icon icon16 icon-pencil"></span></a>
+ <a href="{link controller='PageMenuItemEdit' id=$childMenuItem->menuItemID}{/link}" class="jsTooltip" title="{lang}wcf.global.button.edit{/lang}"><span class="icon icon16 fa-pencil"></span></a>
{if $childMenuItem->canDelete()}
- <span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$childMenuItem->menuItemID}" data-confirm-message="{lang __menuItem=$childMenuItem}wcf.acp.pageMenu.delete.sure{/lang}"></span>
+ <span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$childMenuItem->menuItemID}" data-confirm-message="{lang __menuItem=$childMenuItem}wcf.acp.pageMenu.delete.sure{/lang}"></span>
{else}
- <span class="icon icon16 icon-remove disabled" title="{lang}wcf.global.button.delete{/lang}"></span>
+ <span class="icon icon16 fa-times disabled" title="{lang}wcf.global.button.delete{/lang}"></span>
{/if}
{event name='subHeaderItemButtons'}
<a href="{link controller='PageMenuItemEdit' id=$menuItem->menuItemID}{/link}">{lang}{$menuItem->menuItem}{/lang}</a>
<span class="statusDisplay sortableButtonContainer">
<span class="icon icon16 icon-check{if $menuItem->isDisabled}-empty{/if} jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if $menuItem->isDisabled}enable{else}disable{/if}{/lang}" data-object-id="{@$menuItem->menuItemID}"></span>
- <a href="{link controller='PageMenuItemEdit' id=$menuItem->menuItemID}{/link}" class="jsTooltip" title="{lang}wcf.global.button.edit{/lang}"><span class="icon icon16 icon-pencil"></span></a>
+ <a href="{link controller='PageMenuItemEdit' id=$menuItem->menuItemID}{/link}" class="jsTooltip" title="{lang}wcf.global.button.edit{/lang}"><span class="icon icon16 fa-pencil"></span></a>
{if $menuItem->canDelete()}
- <span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$menuItem->menuItemID}" data-confirm-message="{lang __menuItem=$menuItem}wcf.acp.pageMenu.delete.sure{/lang}"></span>
+ <span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$menuItem->menuItemID}" data-confirm-message="{lang __menuItem=$menuItem}wcf.acp.pageMenu.delete.sure{/lang}"></span>
{else}
- <span class="icon icon16 icon-remove disabled" title="{lang}wcf.global.button.delete{/lang}"></span>
+ <span class="icon icon16 fa-times disabled" title="{lang}wcf.global.button.delete{/lang}"></span>
{/if}
{event name='footerItemButtons'}
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='PageMenuItemAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.pageMenu.add{/lang}</span></a></li>
+ <li><a href="{link controller='PageMenuItemAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.pageMenu.add{/lang}</span></a></li>
{event name='contentNavigationButtonsBottom'}
</ul>
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='PaidSubscriptionList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.paidSubscription.list{/lang}</span></a></li>
+ <li><a href="{link controller='PaidSubscriptionList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.paidSubscription.list{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
<nav>
<ul>
- <li><a href="{link controller='PaidSubscriptionAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.paidSubscription.add{/lang}</span></a></li>
+ <li><a href="{link controller='PaidSubscriptionAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.paidSubscription.add{/lang}</span></a></li>
{event name='contentNavigationButtonsTop'}
</ul>
<tr class="jsPaidSubscriptionRow">
<td class="columnIcon">
<span class="icon icon16 icon-check{if $subscription->isDisabled}-empty{/if} jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if !$subscription->isDisabled}disable{else}enable{/if}{/lang}" data-object-id="{@$subscription->subscriptionID}"></span>
- <a href="{link controller='PaidSubscriptionEdit' id=$subscription->subscriptionID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
- <span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$subscription->subscriptionID}" data-confirm-message="{lang}wcf.acp.paidSubscription.delete.confirmMessage{/lang}"></span>
- <a href="{link controller='PaidSubscriptionUserAdd' id=$subscription->subscriptionID}{/link}" title="{lang}wcf.acp.paidSubscription.user.add{/lang}" class="jsTooltip"><span class="icon icon16 icon-plus"></span></a>
+ <a href="{link controller='PaidSubscriptionEdit' id=$subscription->subscriptionID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
+ <span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$subscription->subscriptionID}" data-confirm-message="{lang}wcf.acp.paidSubscription.delete.confirmMessage{/lang}"></span>
+ <a href="{link controller='PaidSubscriptionUserAdd' id=$subscription->subscriptionID}{/link}" title="{lang}wcf.acp.paidSubscription.user.add{/lang}" class="jsTooltip"><span class="icon icon16 fa-plus"></span></a>
{event name='itemButtons'}
</td>
<nav>
<ul>
- <li><a href="{link controller='PaidSubscriptionAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.paidSubscription.add{/lang}</span></a></li>
+ <li><a href="{link controller='PaidSubscriptionAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.paidSubscription.add{/lang}</span></a></li>
{event name='contentNavigationButtonsBottom'}
</ul>
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='PaidSubscriptionTransactionLogList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.paidSubscription.transactionLog.list{/lang}</span></a></li>
+ <li><a href="{link controller='PaidSubscriptionTransactionLogList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.paidSubscription.transactionLog.list{/lang}</span></a></li>
{event name='contentNavigationButtonsTop'}
</ul>
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='PaidSubscriptionTransactionLogList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.paidSubscription.transactionLog.list{/lang}</span></a></li>
+ <li><a href="{link controller='PaidSubscriptionTransactionLogList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.paidSubscription.transactionLog.list{/lang}</span></a></li>
{event name='contentNavigationButtonsBottom'}
</ul>
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='PaidSubscriptionList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.paidSubscription.list{/lang}</span></a></li>
+ <li><a href="{link controller='PaidSubscriptionList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.paidSubscription.list{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
{foreach from=$objects item=subscriptionUser}
<tr class="jsPaidSubscriptionUserRow">
<td class="columnIcon">
- <span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$subscriptionUser->subscriptionUserID}" data-confirm-message="{lang}wcf.acp.paidSubscription.user.delete.confirmMessage{/lang}"></span>
+ <span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$subscriptionUser->subscriptionUserID}" data-confirm-message="{lang}wcf.acp.paidSubscription.user.delete.confirmMessage{/lang}"></span>
{event name='itemButtons'}
</td>
{*<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='PageMenuItemAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.pageMenu.add{/lang}</span></a></li>
+ <li><a href="{link controller='PageMenuItemAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.pageMenu.add{/lang}</span></a></li>
{event name='contentNavigationButtonsTop'}
</ul>
{*<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='PageMenuItemAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.pageMenu.add{/lang}</span></a></li>
+ <li><a href="{link controller='PageMenuItemAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.pageMenu.add{/lang}</span></a></li>
{event name='contentNavigationButtonsBottom'}
</ul>
--- /dev/null
+{capture assign='__searchFormLink'}{link controller='Search'}{/link}{/capture}
+{capture assign='__searchInputPlaceholder'}{lang}wcf.global.search.enterSearchTerm{/lang}{/capture}
+{capture assign='__searchDropdownOptions'}<label><input type="checkbox" name="subjectOnly" value="1" /> {lang}wcf.search.subjectOnly{/lang}</label>{/capture}
+{assign var='__searchHiddenInputFields' value=''}
+
+{event name='settings'}
+
+<div id="search" class="searchBar" data-disable-auto-focus="true">
+ <form method="post" action="{@$__searchFormLink}" class="dropdown">
+ <input type="search" name="q" placeholder="{@$__searchInputPlaceholder}" autocomplete="off" required="required" value="{if $query|isset}{$query}{/if}" class="dropdownToggle" data-toggle="search" />
+
+ <ul class="dropdownMenu">
+ {hascontent}
+ <li class="dropdownText">
+ {content}
+ {@$__searchDropdownOptions}
+ {/content}
+ </li>
+ <li class="dropdownDivider"></li>
+ {/hascontent}
+ <li><a href="{@$__searchFormLink}">{lang}wcf.search.extended{/lang}</a></li>
+ </ul>
+
+ {@$__searchHiddenInputFields}
+ {@SECURITY_TOKEN_INPUT_TAG}
+ </form>
+</div>
+
+{if !OFFLINE || $__wcf->session->getPermission('admin.general.canViewPageDuringOfflineMode')}
+ <script data-relocate="true">
+ //<![CDATA[
+ $(function() {
+ new WCF.Search.Message.SearchArea($('#search'));
+ });
+ //]]>
+ </script>
+{/if}
\ No newline at end of file
<nav>
<ul>
{content}
- <li><a href="{link controller='SmileyList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.smiley.list{/lang}</span></a></li>
+ <li><a href="{link controller='SmileyList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.smiley.list{/lang}</span></a></li>
{event name='contentNavigationButtons'}
{/content}
</ul>
<nav>
<ul>
- <li><a href="{link controller='SmileyAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.smiley.add{/lang}</span></a></li>
+ <li><a href="{link controller='SmileyAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.smiley.add{/lang}</span></a></li>
{event name='contentNavigationButtonsTop'}
</ul>
<a href="{link controller='SmileyEdit' id=$smiley->smileyID}{/link}"><img src="{$smiley->getURL()}" alt=""/ > {lang}{$smiley->smileyTitle}{/lang}</a> <span class="badge">{$smiley->smileyCode}</span>{foreach from=$smiley->getAliases() item='alias'} <span class="badge">{$alias}</span>{/foreach}
<span class="statusDisplay sortableButtonContainer">
- <a href="{link controller='SmileyEdit' id=$smiley->smileyID}{/link}"><span title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip icon icon16 icon-pencil" /></a>
- <span title="{lang}wcf.global.button.delete{/lang}" class="jsDeleteButton jsTooltip icon icon16 icon-remove" data-object-id="{@$smiley->smileyID}" data-confirm-message="{lang}wcf.acp.smiley.delete.sure{/lang}" />
+ <a href="{link controller='SmileyEdit' id=$smiley->smileyID}{/link}"><span title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip icon icon16 fa-pencil" /></a>
+ <span title="{lang}wcf.global.button.delete{/lang}" class="jsDeleteButton jsTooltip icon icon16 fa-times" data-object-id="{@$smiley->smileyID}" data-confirm-message="{lang}wcf.acp.smiley.delete.sure{/lang}" />
{event name='itemButtons'}
</span>
<nav>
<ul>
{if $action == 'edit'}
- <li><a href="{link controller='StyleExport' id=$style->styleID}{/link}" class="button"><span class="icon icon16 icon-download-alt"></span> <span>{lang}wcf.acp.style.exportStyle{/lang}</span></a></li>
- <li><a class="jsCopyStyle button"><span class="icon icon16 icon-copy"></span> <span>{lang}wcf.acp.style.copyStyle{/lang}</span></a></li>
+ <li><a href="{link controller='StyleExport' id=$style->styleID}{/link}" class="button"><span class="icon icon16 fa-download"></span> <span>{lang}wcf.acp.style.exportStyle{/lang}</span></a></li>
+ <li><a class="jsCopyStyle button"><span class="icon icon16 fa-copy"></span> <span>{lang}wcf.acp.style.copyStyle{/lang}</span></a></li>
{/if}
- <li><a href="{link controller='StyleList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.style.list{/lang}</span></a></li>
+ <li><a href="{link controller='StyleList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.style.list{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
</div>
{* colors *}
- <div id="colors" class="container containerPadding tabMenuContent">
+ <div id="colors" class="container containerPadding tabMenuContainer tabMenuContent">
+ <nav class="menu">
+ <ul>
+ {foreach from=$colors key=itemPrefix item=items}
+ {capture assign=_anchorName}colors-{$itemPrefix}{/capture}
+ <li data-name="colors-{$itemPrefix}"><a href="{@$__wcf->getAnchor($_anchorName)}">{$itemPrefix}</a> </li>
+ {/foreach}
+ </ul>
+ </nav>
+
{foreach from=$colors key=itemPrefix item=items}
- <section>
+ <div id="colors-{$itemPrefix}">
<h1>{$itemPrefix}</h1>
{foreach from=$items item=colorItems}
{/foreach}
</ul>
{/foreach}
- </section>
+ </div>
{/foreach}
- {*
- <fieldset>
- <legend>{lang}wcf.acp.style.colors.page{/lang}</legend>
-
- {* page *}{*
- <ul class="colorList">
- <li>{include file='styleVariableColor' variableName='wcfPageBackgroundColor' languageVariable='backgroundColor'}</li>
- <li>{include file='styleVariableColor' variableName='wcfPageColor' languageVariable='color'}</li>
- <li>{include file='styleVariableColor' variableName='wcfPageLinkColor' languageVariable='linkColor'}</li>
- <li>{include file='styleVariableColor' variableName='wcfPageLinkHoverColor' languageVariable='linkHoverColor'}</li>
-
- {event name='pageColorListItems'}
- </ul>
-
- {event name='pageColorLists'}
- </fieldset>
-
- <fieldset>
- <legend>{lang}wcf.acp.style.colors.content{/lang}</legend>
-
- {* content *}{*
- <ul class="colorList">
- <li>{include file='styleVariableColor' variableName='wcfContentBackgroundColor' languageVariable='backgroundColor'}</li>
- <li>{include file='styleVariableColor' variableName='wcfColor' languageVariable='color'}</li>
- <li>{include file='styleVariableColor' variableName='wcfDimmedColor' languageVariable='dimmedColor'}</li>
- <li>{include file='styleVariableColor' variableName='wcfLinkColor' languageVariable='linkColor'}</li>
- <li>{include file='styleVariableColor' variableName='wcfLinkHoverColor' languageVariable='linkHoverColor'}</li>
-
- {event name='contentColorListItems'}
- </ul>
-
- {event name='contentColorLists'}
- </fieldset>
-
- <fieldset>
- <legend>{lang}wcf.acp.style.colors.container{/lang}</legend>
-
- {* general *}{*
- <ul class="colorList">
- <li>{include file='styleVariableColor' variableName='wcfContainerBackgroundColor' languageVariable='backgroundColor'}</li>
- <li>{include file='styleVariableColor' variableName='wcfContainerAccentBackgroundColor' languageVariable='accentBackgroundColor'}</li>
- <li>{include file='styleVariableColor' variableName='wcfContainerBorderColor' languageVariable='borderColor'}</li>
- <li>{include file='styleVariableColor' variableName='wcfContainerHoverBackgroundColor' languageVariable='hoverBackgroundColor'}</li>
-
- {event name='containerColorListItems'}
- </ul>
-
- {event name='containerColorLists'}
- </fieldset>
-
- <fieldset>
- <legend>{lang}wcf.acp.style.colors.userPanel{/lang}</legend>
-
- {* user panel *}{*
- <ul class="colorList">
- <li>{include file='styleVariableColor' variableName='wcfUserPanelBackgroundColor' languageVariable='backgroundColor'}</li>
- <li>{include file='styleVariableColor' variableName='wcfUserPanelColor' languageVariable='color'}</li>
- <li>{include file='styleVariableColor' variableName='wcfUserPanelHoverBackgroundColor' languageVariable='hoverBackgroundColor'}</li>
- <li>{include file='styleVariableColor' variableName='wcfUserPanelHoverColor' languageVariable='hoverColor'}</li>
-
- {event name='userPanelColorListItems'}
- </ul>
-
- {event name='userPanelColorLists'}
- </fieldset>
-
- <fieldset>
- <legend>{lang}wcf.acp.style.colors.tabular{/lang}</legend>
-
- {* general *}{*
- <ul class="colorList">
- <li>{include file='styleVariableColor' variableName='wcfTabularBoxBackgroundColor' languageVariable='backgroundColor'}</li>
- <li>{include file='styleVariableColor' variableName='wcfTabularBoxColor' languageVariable='color'}</li>
- <li>{include file='styleVariableColor' variableName='wcfTabularBoxHoverColor' languageVariable='hoverColor'}</li>
-
- {event name='tabularColorListItems'}
- </ul>
-
- {event name='tabularColorLists'}
- </fieldset>
-
- <fieldset>
- <legend>{lang}wcf.acp.style.colors.buttons{/lang}</legend>
-
- {* default button *}{*
- <ul class="colorList">
- <li>{include file='styleVariableColor' variableName='wcfButtonBackgroundColor' languageVariable='backgroundColor'}</li>
- <li>{include file='styleVariableColor' variableName='wcfButtonBorderColor' languageVariable='borderColor'}</li>
- <li>{include file='styleVariableColor' variableName='wcfButtonColor' languageVariable='color'}</li>
-
- {event name='defaultButtonColorListItems'}
- </ul>
-
- {* button:hover *}{*
- <ul class="colorList">
- <li>{include file='styleVariableColor' variableName='wcfButtonHoverBackgroundColor' languageVariable='hoverBackgroundColor'}</li>
- <li>{include file='styleVariableColor' variableName='wcfButtonHoverBorderColor' languageVariable='hoverBorderColor'}</li>
- <li>{include file='styleVariableColor' variableName='wcfButtonHoverColor' languageVariable='hoverColor'}</li>
-
- {event name='hoverButtonColorListItems'}
- </ul>
-
- {* primary button *}{*
- <ul class="colorList">
- <li>{include file='styleVariableColor' variableName='wcfButtonPrimaryBackgroundColor' languageVariable='primaryBackgroundColor'}</li>
- <li>{include file='styleVariableColor' variableName='wcfButtonPrimaryBorderColor' languageVariable='primaryBorderColor'}</li>
- <li>{include file='styleVariableColor' variableName='wcfButtonPrimaryColor' languageVariable='primaryColor'}</li>
-
- {event name='primaryButtonColorListItems'}
- </ul>
-
- {event name='buttonsColorLists'}
- </fieldset>
-
- <fieldset>
- <legend>{lang}wcf.acp.style.colors.formInput{/lang}</legend>
-
- {* form input *}{*
- <ul class="colorList">
- <li>{include file='styleVariableColor' variableName='wcfInputBackgroundColor' languageVariable='backgroundColor'}</li>
- <li>{include file='styleVariableColor' variableName='wcfInputBorderColor' languageVariable='borderColor'}</li>
- <li>{include file='styleVariableColor' variableName='wcfInputColor' languageVariable='color'}</li>
- <li>{include file='styleVariableColor' variableName='wcfInputHoverBackgroundColor' languageVariable='hoverBackgroundColor'}</li>
- <li>{include file='styleVariableColor' variableName='wcfInputHoverBorderColor' languageVariable='hoverBorderColor'}</li>
-
- {event name='formInputColorListItems'}
- </ul>
-
- {event name='formInputColorLists'}
- </fieldset>
-
- {event name='colorFieldsets'}
- *}
</div>
{* advanced *}
<p class="info">{lang}wcf.acp.style.protected{/lang}</p>
{* custom declarations *}
- <div id="advanced-custom">
+ <div id="advanced-custom" class="tabMenuContent">
<fieldset class="marginTop">
<legend>{lang}wcf.acp.style.advanced.individualLess{/lang}</legend>
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='StyleList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.style.list{/lang}</span></a></li>
+ <li><a href="{link controller='StyleList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.style.list{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='StyleList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.style.list{/lang}</span></a></li>
+ <li><a href="{link controller='StyleList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.style.list{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
<nav>
<ul>
- <li><a href="{link controller='StyleAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.menu.link.style.add{/lang}</span></a></li>
- <li><a href="{link controller='StyleImport'}{/link}" class="button"><span class="icon icon16 icon-upload-alt"></span> <span>{lang}wcf.acp.menu.link.style.import{/lang}</span></a></li>
+ <li><a href="{link controller='StyleAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.menu.link.style.add{/lang}</span></a></li>
+ <li><a href="{link controller='StyleImport'}{/link}" class="button"><span class="icon icon16 fa-upload"></span> <span>{lang}wcf.acp.menu.link.style.import{/lang}</span></a></li>
{event name='contentNavigationButtonsTop'}
</ul>
</dl>
<nav class="jsMobileNavigation buttonGroupNavigation">
<ul class="buttonList iconList" data-style-id="{@$style->styleID}">
- <li><a href="{link controller='StyleEdit' id=$style->styleID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a></li>
+ <li><a href="{link controller='StyleEdit' id=$style->styleID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a></li>
<li><a href="{link controller='StyleExport' id=$style->styleID}{/link}" title="{lang}wcf.acp.style.exportStyle{/lang}" class="jsTooltip"><span class="icon icon16 icon-download-alt"></span></a></li>
{if !$style->isDefault}
<li><span class="icon icon16 icon-check{if $style->isDisabled}-empty{/if} jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if $style->isDisabled}enable{else}disable{/if}{/lang}" data-object-id="{@$style->styleID}"></span></li>
<li><a title="{lang}wcf.acp.style.button.setAsDefault{/lang}" class="jsSetAsDefault jsTooltip"><span class="icon icon16 icon-ok-sign"></span></a></li>
- <li><a title="{lang}wcf.global.button.delete{/lang}" class="jsDelete jsTooltip" data-confirm-message="{lang}wcf.acp.style.delete.confirmMessage{/lang}"><span class="icon icon16 icon-remove"></span></a></li>
+ <li><a title="{lang}wcf.global.button.delete{/lang}" class="jsDelete jsTooltip" data-confirm-message="{lang}wcf.acp.style.delete.confirmMessage{/lang}"><span class="icon icon16 fa-times"></span></a></li>
{/if}
{event name='itemButtons'}
<nav>
<ul>
- <li><a href="{link controller='StyleAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.menu.link.style.add{/lang}</span></a></li>
- <li><a href="{link controller='StyleImport'}{/link}" class="button"><span class="icon icon16 icon-upload-alt"></span> <span>{lang}wcf.acp.menu.link.style.import{/lang}</span></a></li>
+ <li><a href="{link controller='StyleAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.menu.link.style.add{/lang}</span></a></li>
+ <li><a href="{link controller='StyleImport'}{/link}" class="button"><span class="icon icon16 fa-upload"></span> <span>{lang}wcf.acp.menu.link.style.import{/lang}</span></a></li>
{event name='contentNavigationButtonsBottom'}
</ul>
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='TagList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.tag.list{/lang}</span></a></li>
+ <li><a href="{link controller='TagList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.tag.list{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
<nav>
<ul>
- <li><a href="{link controller='TagAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.tag.add{/lang}</span></a></li>
+ <li><a href="{link controller='TagAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.tag.add{/lang}</span></a></li>
{event name='contentNavigationButtonsTop'}
</ul>
<tr class="jsTagRow jsClipboardObject">
<td class="columnMark"><input type="checkbox" class="jsClipboardItem" data-object-id="{@$tag->tagID}" /></td>
<td class="columnIcon">
- <a href="{link controller='TagEdit' object=$tag}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
- <span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$tag->tagID}" data-confirm-message="{lang}wcf.acp.tag.delete.sure{/lang}"></span>
+ <a href="{link controller='TagEdit' object=$tag}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
+ <span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$tag->tagID}" data-confirm-message="{lang}wcf.acp.tag.delete.sure{/lang}"></span>
{event name='rowButtons'}
</td>
<nav>
<ul>
- <li><a href="{link controller='TagAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.tag.add{/lang}</span></a></li>
+ <li><a href="{link controller='TagAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.tag.add{/lang}</span></a></li>
{event name='contentNavigationButtonsBottom'}
</ul>
<nav>
<ul>
{if $action == 'edit'}<li><a href="{link controller='TemplateDiff' id=$template->templateID}{/link}" class="button"><span class="icon icon16 icon-exchange"></span> <span>{lang}wcf.acp.template.diff{/lang}</span></a></li>{/if}
- <li><a href="{link controller='TemplateList'}{if $action == 'edit'}templateGroupID={@$template->templateGroupID}{/if}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.template.list{/lang}</span></a></li>
+ <li><a href="{link controller='TemplateList'}{if $action == 'edit'}templateGroupID={@$template->templateGroupID}{/if}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.template.list{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='TemplateEdit' id=$parent->templateID}{/link}" class="button"><span class="icon icon16 icon-pencil"></span> <span>{lang}wcf.global.button.edit{/lang}</span></a></li>
+ <li><a href="{link controller='TemplateEdit' id=$parent->templateID}{/link}" class="button"><span class="icon icon16 fa-pencil"></span> <span>{lang}wcf.global.button.edit{/lang}</span></a></li>
</ul>
</nav>
</div>
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='TemplateEdit' id=$template->templateID}{/link}" class="button"><span class="icon icon16 icon-pencil"></span> <span>{lang}wcf.global.button.edit{/lang}</span></a></li>
+ <li><a href="{link controller='TemplateEdit' id=$template->templateID}{/link}" class="button"><span class="icon icon16 fa-pencil"></span> <span>{lang}wcf.global.button.edit{/lang}</span></a></li>
</ul>
</nav>
</div>
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='TemplateGroupList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.template.group.list{/lang}</span></a></li>
+ <li><a href="{link controller='TemplateGroupList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.template.group.list{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
<nav>
<ul>
- <li><a href="{link controller='TemplateGroupAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.template.group.add{/lang}</span></a></li>
+ <li><a href="{link controller='TemplateGroupAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.template.group.add{/lang}</span></a></li>
{event name='contentNavigationButtonsTop'}
</ul>
{foreach from=$objects item=templateGroup}
<tr class="jsTemplateGroupRow">
<td class="columnIcon">
- <a href="{link controller='TemplateGroupEdit' id=$templateGroup->templateGroupID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
- <span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$templateGroup->templateGroupID}" data-confirm-message="{lang}wcf.acp.template.group.delete.sure{/lang}"></span>
+ <a href="{link controller='TemplateGroupEdit' id=$templateGroup->templateGroupID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
+ <span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$templateGroup->templateGroupID}" data-confirm-message="{lang}wcf.acp.template.group.delete.sure{/lang}"></span>
{event name='rowButtons'}
</td>
<nav>
<ul>
- <li><a href="{link controller='TemplateGroupAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.template.group.add{/lang}</span></a></li>
+ <li><a href="{link controller='TemplateGroupAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.template.group.add{/lang}</span></a></li>
{event name='contentNavigationButtonsBottom'}
</ul>
<nav>
<ul>
- <li><a href="{link controller='TemplateAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.template.add{/lang}</span></a></li>
+ <li><a href="{link controller='TemplateAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.template.add{/lang}</span></a></li>
{event name='contentNavigationButtonsTop'}
</ul>
{if $template->templateGroupID}
<a href="{link controller='TemplateDiff' id=$template->templateID}{/link}" title="{lang}wcf.acp.template.diff{/lang}" class="jsTooltip"><span class="icon icon16 icon-exchange"></span></a>
- <a href="{link controller='TemplateEdit' id=$template->templateID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
- <span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$template->templateID}" data-confirm-message="{lang}wcf.acp.template.delete.sure{/lang}"></span>
+ <a href="{link controller='TemplateEdit' id=$template->templateID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
+ <span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$template->templateID}" data-confirm-message="{lang}wcf.acp.template.delete.sure{/lang}"></span>
{else}
<span class="icon icon16 icon-exchange disabled" title="{lang}wcf.acp.template.diff{/lang}"></span>
- <span class="icon icon16 icon-pencil disabled" title="{lang}wcf.global.button.edit{/lang}"></span>
- <span class="icon icon16 icon-remove disabled" title="{lang}wcf.global.button.delete{/lang}"></span>
+ <span class="icon icon16 fa-pencil disabled" title="{lang}wcf.global.button.edit{/lang}"></span>
+ <span class="icon icon16 fa-times disabled" title="{lang}wcf.global.button.delete{/lang}"></span>
{/if}
{event name='rowButtons'}
<nav>
<ul>
- <li><a href="{link controller='TemplateAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.template.add{/lang}</span></a></li>
+ <li><a href="{link controller='TemplateAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.template.add{/lang}</span></a></li>
{event name='contentNavigationButtonsBottom'}
</ul>
<div class="contentNavigation">
<nav>
<ul>
- <li><a id="updateEvents" class="button"><span class="icon icon16 icon-repeat"></span> <span>{lang}wcf.acp.user.activityPoint.updateEvents{/lang}</span></a></li>
+ <li><a id="updateEvents" class="button"><span class="icon icon16 fa-repeat"></span> <span>{lang}wcf.acp.user.activityPoint.updateEvents{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='UserList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.user.list{/lang}</span></a></li>
+ <li><a href="{link controller='UserList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.user.list{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
{if $action == 'edit'}
{if $availableUserGroups|count > 1}
<li class="dropdown">
- <a class="button dropdownToggle"><span class="icon icon16 icon-sort"></span> <span>{lang}wcf.acp.group.button.choose{/lang}</span></a>
+ <a class="button dropdownToggle"><span class="icon icon16 fa-sort"></span> <span>{lang}wcf.acp.group.button.choose{/lang}</span></a>
<div class="dropdownMenu">
<ul class="scrollableDropdownMenu">
{foreach from=$availableUserGroups item='availableUserGroup'}
{/if}
{if $__wcf->session->getPermission('admin.user.canAddGroup') && $group->groupType == 4}
- <li><a class="jsButtonUserGroupCopy button"><span class="icon icon16 icon-copy"></span> <span>{lang}wcf.acp.group.button.copy{/lang}</span></a></li>
+ <li><a class="jsButtonUserGroupCopy button"><span class="icon icon16 fa-copy"></span> <span>{lang}wcf.acp.group.button.copy{/lang}</span></a></li>
{/if}
{/if}
- <li><a href="{link controller='UserGroupList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.group.list{/lang}</span></a></li>
+ <li><a href="{link controller='UserGroupList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.group.list{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='UserGroupAssignmentList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.group.assignment.button.list{/lang}</span></a></li>
+ <li><a href="{link controller='UserGroupAssignmentList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.group.assignment.button.list{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
<nav>
<ul>
- <li><a href="{link controller='UserGroupAssignmentAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.group.assignment.button.add{/lang}</span></a></li>
+ <li><a href="{link controller='UserGroupAssignmentAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.group.assignment.button.add{/lang}</span></a></li>
{event name='contentNavigationButtonsTop'}
</ul>
{foreach from=$objects item='assignment'}
<tr class="jsUserGroupAssignmentRow">
<td class="columnIcon">
- <span class="icon icon16 icon-check{if $assignment->isDisabled}-empty{/if} jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if $assignment->isDisabled}enable{else}disable{/if}{/lang}" data-object-id="{@$assignment->assignmentID}"></span>
- <a href="{link controller='UserGroupAssignmentEdit' object=$assignment}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
- <span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$assignment->assignmentID}" data-confirm-message="{lang}wcf.acp.group.assignment.delete.confirmMessage{/lang}"></span>
+ <span class="icon icon16 fa-{if !$assignment->isDisabled}check-{/if}square-o jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if $assignment->isDisabled}enable{else}disable{/if}{/lang}" data-object-id="{@$assignment->assignmentID}"></span>
+ <a href="{link controller='UserGroupAssignmentEdit' object=$assignment}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
+ <span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$assignment->assignmentID}" data-confirm-message="{lang}wcf.acp.group.assignment.delete.confirmMessage{/lang}"></span>
{event name='rowButtons'}
</td>
<nav>
<ul>
- <li><a href="{link controller='UserGroupAssignmentAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.group.assignment.button.add{/lang}</span></a></li>
+ <li><a href="{link controller='UserGroupAssignmentAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.group.assignment.button.add{/lang}</span></a></li>
{event name='contentNavigationButtonsBottom'}
</ul>
<ul>
{content}
{if $__wcf->getSession()->getPermission('admin.user.canAddGroup')}
- <li><a href="{link controller='UserGroupAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.group.add{/lang}</span></a></li>
+ <li><a href="{link controller='UserGroupAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.group.add{/lang}</span></a></li>
{/if}
{event name='contentNavigationButtonsTop'}
<tr id="groupContainer{@$group->groupID}" class="jsUserGroupRow">
<td class="columnIcon">
{if $group->isEditable()}
- <a href="{link controller='UserGroupEdit' id=$group->groupID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
+ <a href="{link controller='UserGroupEdit' id=$group->groupID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
{else}
- <span class="icon icon16 icon-pencil disabled" title="{lang}wcf.global.button.edit{/lang}"></span>
+ <span class="icon icon16 fa-pencil disabled" title="{lang}wcf.global.button.edit{/lang}"></span>
{/if}
{if $group->isDeletable()}
- <span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$group->groupID}" data-confirm-message="{lang}wcf.acp.group.delete.sure{/lang}"></span>
+ <span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$group->groupID}" data-confirm-message="{lang}wcf.acp.group.delete.sure{/lang}"></span>
{else}
- <span class="icon icon16 icon-remove disabled" title="{lang}wcf.global.button.delete{/lang}"></span>
+ <span class="icon icon16 fa-times disabled" title="{lang}wcf.global.button.delete{/lang}"></span>
{/if}
{event name='rowButtons'}
<ul>
{content}
{if $__wcf->getSession()->getPermission('admin.user.canAddGroup')}
- <li><a href="{link controller='UserGroupAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.group.add{/lang}</span></a></li>
+ <li><a href="{link controller='UserGroupAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.group.add{/lang}</span></a></li>
{/if}
{event name='contentNavigationButtonsBottom'}
<nav>
<ul>
{if $__wcf->session->getPermission('admin.user.canAddUser')}
- <li><a href="{link controller='UserAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.user.add{/lang}</span></a></li>
+ <li><a href="{link controller='UserAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.user.add{/lang}</span></a></li>
{/if}
{event name='contentNavigationButtonsTop'}
<th class="columnTitle columnUsername{if $sortField == 'username'} active {@$sortOrder}{/if}" colspan="2"><a href="{link controller='UserList' id=$searchID}action={@$encodedAction}&pageNo={@$pageNo}&sortField=username&sortOrder={if $sortField == 'username' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.user.username{/lang}</a></th>
{foreach from=$columnHeads key=column item=columnLanguageVariable}
- <th class="column{$column|ucfirst}{if $sortField == $column} active {@$sortOrder}{/if}"><a href="{link controller='UserList' id=$searchID}action={@$encodedAction}&pageNo={@$pageNo}&sortField={$column}&sortOrder={if $sortField == $column && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}{$columnLanguageVariable}{/lang}</a></th>
+ <th class="column{$column|ucfirst}{if $
columnStyling[$column]|isset} {$columnStyling[$column]}{/if}{if $sortField == $column} active {@$sortOrder}{/if}"><a href="{link controller='UserList' id=$searchID}action={@$encodedAction}&pageNo={@$pageNo}&sortField={$column}&sortOrder={if $sortField == $column && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}{$columnLanguageVariable}{/lang}</a></th>
{/foreach}
{event name='columnHeads'}
<td class="columnMark"><input type="checkbox" class="jsClipboardItem" data-object-id="{@$user->userID}" /></td>
<td class="columnIcon">
{if $user->editable}
- <a href="{link controller='UserEdit' id=$user->userID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
+ <a href="{link controller='UserEdit' id=$user->userID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
{else}
- <span class="icon icon16 icon-pencil disabled" title="{lang}wcf.global.button.edit{/lang}"></span>
+ <span class="icon icon16 fa-pencil disabled" title="{lang}wcf.global.button.edit{/lang}"></span>
{/if}
{if $user->deletable}
- <span class="icon icon16 icon-remove jsTooltip jsDeleteButton pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$user->userID}" data-confirm-message="{lang}wcf.acp.user.delete.sure{/lang}"></span>
+ <span class="icon icon16 fa-times jsTooltip jsDeleteButton pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$user->userID}" data-confirm-message="{lang}wcf.acp.user.delete.sure{/lang}"></span>
{else}
- <span class="icon icon16 icon-remove disabled" title="{lang}wcf.global.button.delete{/lang}"></span>
+ <span class="icon icon16 fa-times disabled" title="{lang}wcf.global.button.delete{/lang}"></span>
{/if}
{if $user->bannable}
- <span class="icon icon16 icon-{if $user->banned}lock{else}unlock{/if} jsBanButton jsTooltip pointer" title="{lang}wcf.acp.user.{if $user->banned}unban{else}ban{/if}{/lang}" data-object-id="{@$user->userID}" data-ban-message="{lang}wcf.acp.user.ban{/lang}" data-unban-message="{lang}wcf.acp.user.unban{/lang}" data-banned="{if $user->banned}true{else}false{/if}"></span>
+ <span class="icon icon16 fa-{if $user->banned}lock{else}unlock{/if} jsBanButton jsTooltip pointer" title="{lang}wcf.acp.user.{if $user->banned}unban{else}ban{/if}{/lang}" data-object-id="{@$user->userID}" data-ban-message="{lang}wcf.acp.user.ban{/lang}" data-unban-message="{lang}wcf.acp.user.unban{/lang}" data-banned="{if $user->banned}true{else}false{/if}"></span>
{else}
- <span class="icon icon16 icon-{if $user->banned}lock{else}unlock{/if} disabled" title="{lang}wcf.acp.user.{if $user->banned}unban{else}ban{/if}{/lang}"></span>
+ <span class="icon icon16 fa-{if $user->banned}lock{else}unlock{/if} disabled" title="{lang}wcf.acp.user.{if $user->banned}unban{else}ban{/if}{/lang}"></span>
{/if}
{if $user->canBeEnabled}
- <span class="icon icon16 icon-{if !$user->activationCode}check{else}check-empty{/if} jsEnableButton jsTooltip pointer" title="{lang}wcf.acp.user.{if !$user->activationCode}disable{else}enable{/if}{/lang}" data-object-id="{@$user->userID}" data-enable-message="{lang}wcf.acp.user.enable{/lang}" data-disable-message="{lang}wcf.acp.user.disable{/lang}" data-enabled="{if !$user->activationCode}true{else}false{/if}"></span>
+ <span class="icon icon16 fa-{if !$user->activationCode}check-square-o{else}square-o{/if} jsEnableButton jsTooltip pointer" title="{lang}wcf.acp.user.{if !$user->activationCode}disable{else}enable{/if}{/lang}" data-object-id="{@$user->userID}" data-enable-message="{lang}wcf.acp.user.enable{/lang}" data-disable-message="{lang}wcf.acp.user.disable{/lang}" data-enabled="{if !$user->activationCode}true{else}false{/if}"></span>
{else}
- <span class="icon icon16 icon-{if !$user->activationCode}check{else}check-empty{/if} disabled" title="{lang}wcf.acp.user.{if !$user->activationCode}disable{else}enable{/if}{/lang}"></span>
+ <span class="icon icon16 fa-{if !$user->activationCode}check-square-o{else}square-o{/if} disabled" title="{lang}wcf.acp.user.{if !$user->activationCode}disable{else}enable{/if}{/lang}"></span>
{/if}
{event name='rowButtons'}
<nav>
<ul>
{if $__wcf->session->getPermission('admin.user.canAddUser')}
- <li><a href="{link controller='UserAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.user.add{/lang}</span></a></li>
+ <li><a href="{link controller='UserAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.user.add{/lang}</span></a></li>
{/if}
{event name='contentNavigationButtonsBottom'}
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='UserList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.user.list{/lang}</span></a></li>
- <li><a href="{link controller='UserSearch'}{/link}" class="button"><span class="icon icon16 icon-search"></span> <span>{lang}wcf.acp.user.search{/lang}</span></a></li>
+ <li><a href="{link controller='UserList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.user.list{/lang}</span></a></li>
+ <li><a href="{link controller='UserSearch'}{/link}" class="button"><span class="icon icon16 fa-search"></span> <span>{lang}wcf.acp.user.search{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='UserOptionList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.user.option.list{/lang}</span></a></li>
+ <li><a href="{link controller='UserOptionList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.user.option.list{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='UserOptionCategoryList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.user.option.category.list{/lang}</span></a></li>
+ <li><a href="{link controller='UserOptionCategoryList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.user.option.category.list{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
<nav>
<ul>
- <li><a href="{link controller='UserOptionCategoryAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.user.option.category.add{/lang}</span></a></li>
+ <li><a href="{link controller='UserOptionCategoryAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.user.option.category.add{/lang}</span></a></li>
{event name='contentNavigationButtonsTop'}
</ul>
{foreach from=$objects item=category}
<tr class="jsCategoryRow">
<td class="columnIcon">
- <a href="{link controller='UserOptionCategoryEdit' id=$category->categoryID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
- <span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$category->categoryID}" data-confirm-message="{lang}wcf.acp.user.option.category.delete.sure{/lang}"></span>
+ <a href="{link controller='UserOptionCategoryEdit' id=$category->categoryID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
+ <span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$category->categoryID}" data-confirm-message="{lang}wcf.acp.user.option.category.delete.sure{/lang}"></span>
{event name='rowButtons'}
</td>
<nav>
<ul>
- <li><a href="{link controller='UserOptionCategoryAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.user.option.category.add{/lang}</span></a></li>
+ <li><a href="{link controller='UserOptionCategoryAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.user.option.category.add{/lang}</span></a></li>
{event name='contentNavigationButtonsBottom'}
</ul>
<nav>
<ul>
- <li><a href="{link controller='UserOptionAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.user.option.add{/lang}</span></a></li>
+ <li><a href="{link controller='UserOptionAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.user.option.add{/lang}</span></a></li>
{event name='contentNavigationButtonsTop'}
</ul>
{foreach from=$objects item=option}
<tr class="jsOptionRow">
<td class="columnIcon">
- <span class="icon icon16 icon-check{if $option->isDisabled}-empty{/if} jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if $option->isDisabled}enable{else}disable{/if}{/lang}" data-object-id="{@$option->optionID}"></span>
- <a href="{link controller='UserOptionEdit' id=$option->optionID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
+ <span class="icon icon16 fa-{if !$option->isDisabled}check-{/if}square-o jsToggleButton jsTooltip pointer" title="{lang}wcf.global.button.{if $option->isDisabled}enable{else}disable{/if}{/lang}" data-object-id="{@$option->optionID}"></span>
+ <a href="{link controller='UserOptionEdit' id=$option->optionID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
{if $option->canDelete()}
- <span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$option->optionID}" data-confirm-message="{lang}wcf.acp.user.option.delete.sure{/lang}"></span>
+ <span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$option->optionID}" data-confirm-message="{lang}wcf.acp.user.option.delete.sure{/lang}"></span>
{else}
<span class="icon icon16 fa-times disabled"></span>
{/if}
<nav>
<ul>
- <li><a href="{link controller='UserOptionAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.user.option.add{/lang}</span></a></li>
+ <li><a href="{link controller='UserOptionAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.user.option.add{/lang}</span></a></li>
{event name='contentNavigationButtonsBottom'}
</ul>
--- /dev/null
+<nav id="topMenu" class="userPanel">
+ <ul class="userPanelItems">
+ {if $__wcf->user->userID}
+ <!-- user menu -->
+ <li id="userMenu">
+ <a class="framed" href="{link controller='User' object=$__wcf->user}{/link}">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(32)} <span>{lang}wcf.user.userNote{/lang}</span></a>
+ </li>
+
+ <li><a href="{link controller='Settings'}{/link}" class="noJsOnly" style="display: none"><span class="icon icon16 fa-cogs"></span> <span>{lang}wcf.user.menu.settings{/lang}</span></a></li>
+
+ {if PACKAGE_ID > 1}
+ <li id="jumpToPage" class="dropdown">
+ <a href="{link forceFrontend=true}{/link}" class="dropdownToggle" data-toggle="jumpToPage"><span class="icon icon16 icon-home"></span> <span>{lang}wcf.global.jumpToPage{/lang}</span></a>
+ <ul class="dropdownMenu">
+ {foreach from=$__wcf->getPageMenu()->getMenuItems('header') item=_menuItem}
+ <li><a href="{$_menuItem->getProcessor()->getLink()}">{lang}{$_menuItem->menuItem}{/lang}</a></li>
+ {/foreach}
+ </ul>
+ </li>
+
+ {if $__wcf->session->getPermission('admin.system.package.canUpdatePackage') && $__wcf->getAvailableUpdates()}
+ <li>
+ <a href="{link controller='PackageUpdate'}{/link}"><span class="icon icon16 icon-refresh"></span> <span>{lang}wcf.acp.package.updates{/lang}</span> <span class="badge badgeInverse">{#$__wcf->getAvailableUpdates()}</span></a>
+ </li>
+ {/if}
+ {/if}
+
+ <li id="woltlab" class="dropdown">
+ <a class="dropdownToggle" data-toggle="woltlab"><span class="icon icon16 icon-info-sign"></span> <span>WoltLab®</span></a>
+
+ <ul class="dropdownMenu">
+ <li><a class="externalURL" href="{@$__wcf->getPath()}acp/dereferrer.php?url={"https://www.woltlab.com"|rawurlencode}"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>{lang}wcf.acp.index.woltlab.website{/lang}</a></li>
+ <li><a class="externalURL" href="{@$__wcf->getPath()}acp/dereferrer.php?url={"https://community.woltlab.com"|rawurlencode}"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>{lang}wcf.acp.index.woltlab.forums{/lang}</a></li>
+ <li><a class="externalURL" href="{@$__wcf->getPath()}acp/dereferrer.php?url={"https://www.woltlab.com/ticket-add/"|rawurlencode}"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>{lang}wcf.acp.index.woltlab.tickets{/lang}</a></li>
+ <li><a class="externalURL" href="{@$__wcf->getPath()}acp/dereferrer.php?url={"https://pluginstore.woltlab.com"|rawurlencode}"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>{lang}wcf.acp.index.woltlab.pluginStore{/lang}</a></li>
+ </ul>
+ </li>
+ {/if}
+
+ {event name='menuItems'}
+
+ {if $__wcf->user->userID}
+ <li><a href="{link controller='Logout'}t={@SECURITY_TOKEN}{/link}" class="noJsOnly" style="display: none"><span class="icon icon16 fa-sign-out"></span> <span>{lang}wcf.user.logout{/lang}</span></a></li>
+ {/if}
+ </ul>
+</nav>
\ No newline at end of file
<div class="contentNavigation">
<nav>
<ul>
- <li><a href="{link controller='UserRankList'}{/link}" class="button"><span class="icon icon16 icon-list"></span> <span>{lang}wcf.acp.menu.link.user.rank.list{/lang}</span></a></li>
+ <li><a href="{link controller='UserRankList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.user.rank.list{/lang}</span></a></li>
{event name='contentNavigationButtons'}
</ul>
<nav>
<ul>
- <li><a href="{link controller='UserRankAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.user.rank.add{/lang}</span></a></li>
+ <li><a href="{link controller='UserRankAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.user.rank.add{/lang}</span></a></li>
{event name='contentNavigationButtonsTop'}
</ul>
{foreach from=$objects item=userRank}
<tr class="jsUserRankRow">
<td class="columnIcon">
- <a href="{link controller='UserRankEdit' id=$userRank->rankID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a>
- <span class="icon icon16 icon-remove jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$userRank->rankID}" data-confirm-message="{lang}wcf.acp.user.rank.delete.sure{/lang}"></span>
+ <a href="{link controller='UserRankEdit' id=$userRank->rankID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
+ <span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{@$userRank->rankID}" data-confirm-message="{lang}wcf.acp.user.rank.delete.sure{/lang}"></span>
{event name='rowButtons'}
</td>
<nav>
<ul>
- <li><a href="{link controller='UserRankAdd'}{/link}" class="button"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.acp.user.rank.add{/lang}</span></a></li>
+ <li><a href="{link controller='UserRankAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.user.rank.add{/lang}</span></a></li>
{event name='contentNavigationButtonsBottom'}
</ul>
*/
init: function(containerID, supportExtendedForm, quoteManager) {
require(['WoltLab/WCF/Ui/Message/InlineEditor'], (function(UiMessageInlineEditor) {
- extendedForm: (supportExtendedForm === true),
-
- className: this._getClassName(),
- containerId: containerID,
- editorPrefix: this._messageEditorIDPrefix,
-
- messageSelector: this._messageContainerSelector,
-
- callbackDropdownInit: this._callbackDropdownInit.bind(this),
- callbackLegacyInitElements: this._callbackInitElements.bind(this)
+ UiMessageInlineEditor.init({
+ extendedForm: (supportExtendedForm === true),
+
+ className: this._getClassName(),
+ containerId: containerID,
+ editorPrefix: this._messageEditorIDPrefix,
+
+ messageSelector: this._messageContainerSelector,
+
+ callbackDropdownInit: this._callbackDropdownInit.bind(this),
+ callbackLegacyInitElements: this._callbackInitElements.bind(this)
+ });
}).bind(this));
},
* @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
* @module WoltLab/WCF/Core
*/
-define(['Ajax', 'EventHandler'], function(Ajax, EventHandler) {
+define(['Ajax', 'Dictionary', 'Dom/Util', 'EventHandler'], function(Ajax, Dictionary, DomUtil, EventHandler) {
"use strict";
+ var _stylePreviewRegions = new Dictionary();
+ var _stylePreviewRegionMarker = null;
+
/**
* @module WoltLab/WCF/Acp/Ui/Style/Editor
*/
if (!options.isTainted) {
this._handleProtection(options.styleId);
}
+
+ this._initVisualEditor(options.styleRuleMap);
},
/**
}
});
});
+ },
+
+ _initVisualEditor: function(styleRuleMap) {
+ var regions = elBySelAll('.stylePreview [data-region]');
+ for (var i = 0, length = regions.length; i < length; i++) {
+ _stylePreviewRegions.set(elData(regions[i], 'region'), regions[i]);
+ }
+
+ _stylePreviewRegionMarker = elCreate('div');
+ _stylePreviewRegionMarker.id = 'stylePreviewRegionMarker';
+ _stylePreviewRegionMarker.innerHTML = '<div id="stylePreviewRegionMarkerBottom"></div>';
+ elHide(_stylePreviewRegionMarker);
+ elById('colors').appendChild(_stylePreviewRegionMarker);
+
+ var container = elBySel('.stylePreviewVariables');
+ var select = elById('stylePreviewVariablesCategories');
+ var lastValue = select.value;
+
+ function updateRegionMarker() {
+ if (lastValue === 'none') {
+ elHide(_stylePreviewRegionMarker);
+ updateWrapperPosition(null);
+ scrollToRegion(null);
+ return;
+ }
+
+ var region = _stylePreviewRegions.get(lastValue);
+ var rect = region.getBoundingClientRect();
+
+ var top = rect.top + document.body.scrollTop;
+
+ DomUtil.setStyles(_stylePreviewRegionMarker, {
+ height: (region.clientHeight + 20) + 'px',
+ left: (rect.left + document.body.scrollLeft - 10) + 'px',
+ top: (top - 10) + 'px',
+ width: (region.clientWidth + 20) + 'px'
+ });
+
+ elShow(_stylePreviewRegionMarker);
+
+ updateWrapperPosition(region);
+ scrollToRegion(top);
+ }
+
+ var variablesWrapper = elById('stylePreviewVariablesWrapper');
+ function updateWrapperPosition(region) {
+ var fromTop = 0;
+ if (region !== null) {
+ fromTop = (region.offsetTop - variablesWrapper.offsetTop) - 10;
+
+ var styles = window.getComputedStyle(region);
+ if (styles.getPropertyValue('position') === 'absolute') {
+ fromTop += region.offsetParent.offsetTop;
+ }
+ }
+
+ if (fromTop <= 0) {
+ variablesWrapper.style.removeProperty('transform');
+ }
+ else {
+ // ensure that the wrapper does not exceed the bottom boundary
+ var maxHeight = variablesWrapper.parentNode.clientHeight;
+ var wrapperHeight = variablesWrapper.clientHeight;
+ if (wrapperHeight + fromTop > maxHeight) {
+ fromTop = maxHeight - wrapperHeight;
+ }
+
+ variablesWrapper.style.setProperty('transform', 'translateY(' + fromTop + 'px)');
+ }
+ }
+
+ var pageHeader = elById('pageHeader');
+ function scrollToRegion(top) {
+ if (top === null) {
+ top = variablesWrapper.offsetTop - 60;
+ }
+ else {
+ // use the region marker as an offset
+ top -= 60;
+ }
+
+ // account for sticky header
+ top -= 60;
+
+ window.scrollTo(0, top);
+ }
+
+ var selectContainer = elBySel('.stylePreviewVariablesContainer:first-child');
+ var element;
+ select.addEventListener('change', function() {
+ element = elBySel('.stylePreviewVariablesContainer[data-category="' + lastValue + '"]', container);
+ elHide(element);
+
+ lastValue = select.value;
+ element = elBySel('.stylePreviewVariablesContainer[data-category="' + lastValue + '"]', container);
+ elShow(element);
+
+ // set region marker
+ updateRegionMarker();
+
+ selectContainer.classList[(lastValue === 'none' ? 'remove' : 'add')]('pointer');
+ });
+
+
+ // apply CSS rules
+ var style = document.createElement('style');
+ style.appendChild(document.createTextNode(''));
+ elData(style, 'created-by', 'WoltLab/Acp/Ui/Style/Editor');
+ document.head.appendChild(style);
+
+ function updateCSSRule(identifier, value, isInit) {
+ if (styleRuleMap[identifier] === undefined) {
+ console.debug(identifier);
+ return;
+ }
+
+ var rule = styleRuleMap[identifier].replace(/VALUE/, value + ' !important');
+ if (!rule) {
+ console.debug(identifier);
+ return;
+ }
+
+ style.sheet.insertRule(rule, style.sheet.cssRules.length);
+ }
+
+ var elements = elByClass('styleVariableColor', variablesWrapper);
+ [].forEach.call(elements, function(colorField) {
+ var variableName = elData(colorField, 'store').replace(/_value$/, '');
+
+ var observer = new MutationObserver(function(mutations) {
+ mutations.forEach(function(mutation) {
+ if (mutation.attributeName === 'style') {
+ updateCSSRule(variableName, colorField.style.getPropertyValue('background-color'));
+ console.debug(mutation);
+ }
+ });
+ });
+
+ observer.observe(colorField, {
+ attributes: true
+ });
+
+ updateCSSRule(variableName, colorField.style.getPropertyValue('background-color'));
+ });
}
};
--- /dev/null
+define([], function() {
+ "use strict";
+
+ var ColorUtil = {
+ /**
+ * Converts HEX into RGB.
+ *
+ * @param string hex hex value as #ccc or #abc123
+ * @return object r-g-b values
+ */
+ hexToRgb: function(hex) {
+ hex = hex.replace(/^#/, '');
+ if (/^([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(hex)) {
+ // only convert abc and abcdef
+ hex = hex.split('');
+
+ // parse shorthand #xyz
+ if (hex.length === 3) {
+ return {
+ r: parseInt(hex[0] + '' + hex[0], 16),
+ g: parseInt(hex[1] + '' + hex[1], 16),
+ b: parseInt(hex[2] + '' + hex[2], 16)
+ };
+ }
+ else {
+ return {
+ r: parseInt(hex[0] + '' + hex[1], 16),
+ g: parseInt(hex[2] + '' + hex[3], 16),
+ b: parseInt(hex[4] + '' + hex[5], 16)
+ };
+ }
+ }
+
+ return Number.NaN;
+ },
+
+ /**
+ * Converts RGB into HEX.
+ *
+ * @see http://www.linuxtopia.org/online_books/javascript_guides/javascript_faq/rgbtohex.htm
+ *
+ * @param {(int|string)} r red or rgb(1, 2, 3) or rgba(1, 2, 3, .4)
+ * @param {int} g green
+ * @param {int} b blue
+ * @return {string} hex value #abc123
+ */
+ rgbToHex: function(r, g, b) {
+ var charList = "0123456789ABCDEF";
+
+ if (g === undefined) {
+ if (r.match(/^rgba?\((\d+), ?(\d+), ?(d\+)(?:, ?[0-9.]+)?\)$/)) {
+ r = RegExp.$1;
+ g = RegExp.$2;
+ b = RegExp.$3;
+ }
+ }
+
+ return (charList.charAt((r - r % 16) / 16) + '' + charList.charAt(r % 16)) + '' + (charList.charAt((g - g % 16) / 16) + '' + charList.charAt(g % 16)) + '' + (charList.charAt((b - b % 16) / 16) + '' + charList.charAt(b % 16));
+ }
+ };
+
+ return ColorUtil;
+});
\ No newline at end of file
container.className = 'inputAddon';
var button = elCreate('a');
- button.className = 'inputSuffix';
+ button.className = 'inputSuffix button';
button.addEventListener('click', _callbackOpen);
container.appendChild(button);
*/
public $availableUnits = ['px', 'em', '%', 'pt'];
+ public $colorCategories = [];
+
/**
* list of color variables
* @var array<string>
// @TODO
$colors = [];
- foreach ($this->colors as $k => $v) {
- foreach ($v as $vv) {
- $prefix = (isset($vv['overridePrefix'])) ? $vv['overridePrefix'] : $k;
- foreach ($vv['items'] as $vvv) {
- $colors[] = $prefix . ucfirst($vvv);
- }
+ foreach ($this->colors as $categoryName => $variables) {
+ foreach ($variables as $variable) {
+ $colors[] = $categoryName . ucfirst($variable);
}
}
* Sets available variables
*/
protected function setVariables() {
- // set color variables
- $this->colors = [
- 'wcfPage' => [
- [
- 'overridePrefix' => 'wcfHeader',
- 'items' => ['background', 'text', 'link', 'linkActive']
- ],
- [
- 'overridePrefix' => 'wcfMenu',
- 'items' => ['background', 'backgroundActive', 'border', 'text', 'textActive', 'link', 'linkActive']
- ],
- [
- 'overridePrefix' => 'wcfMenuContent',
- 'items' => ['background', 'backgroundActive', 'border', 'text', 'textActive', 'link', 'linkActive']
- ],
- [
- 'overridePrefix' => 'wcfSearchBox',
- 'items' => ['background', 'backgroundActive', 'border', 'borderActive', 'text', 'textActive', 'link', 'linkActive']
- ],
- [
- 'overridePrefix' => 'wcfHeaderBox',
- 'items' => ['background', 'text', 'link', 'linkActive']
- ],
- [
- 'overridePrefix' => 'wcfHeaderNavigation',
- 'items' => ['background', 'text', 'link', 'linkActive']
- ],
- [
- 'overridePrefix' => 'wcfFooterBox',
- 'items' => ['background', 'text', 'link', 'linkActive']
- ],
- [
- 'overridePrefix' => 'wcfFooter',
- 'items' => ['background', 'text', 'link', 'linkActive']
- ]
- ],
- 'wcfContent' => [
- [
- 'items' => ['background', 'text', 'link', 'linkActive', 'border'],
- ],
- [
- 'overridePrefix' => 'wcfContentHeadline',
- 'items' => ['text', 'link', 'linkActive']
- ],
- [
- 'items' => ['textDimmed', 'linkDimmed', 'linkDimmedActive']
- ],
- [
- 'items' => ['backgroundAccent', 'textAccent', 'linkAccent', 'linkAccentActive', 'borderAccent']
- ]
- ],
- 'wcfSidebar' => [
- [
- 'items' => ['background', 'border']
- ],
- [
- 'overridePrefix' => 'wcfSidebarBox',
- 'items' => ['background', 'text', 'link', 'linkActive', 'border', 'textDimmed', 'linkDimmed', 'linkDimmedActive']
- ],
- [
- 'overridePrefix' => 'wcfSidebarBoxHeadline',
- 'items' => ['text', 'link', 'linkActive', 'border']
- ]
- ],
- 'wcfButton' => [
- [
- 'items' => ['background', 'backgroundActive', 'text', 'textActive', 'border', 'borderActive']
- ],
- [
- 'items' => ['backgroundAccent', 'backgroundAccentActive', 'textAccent', 'textAccentActive', 'borderAccent', 'borderAccentActive']
- ]
- ],
- 'wcfInput' => [
- [
- 'items' => ['background', 'backgroundActive', 'border', 'borderActive', 'text', 'textActive']
- ]
- ],
- 'wcfDropdown' => [
- [
- 'items' => ['background', 'backgroundActive', 'text', 'textActive', 'link', 'linkActive']
- ]
- ]
+ $this->colorCategories = [
+ 'wcfHeader' => ['wcfHeader', 'wcfHeaderSearchBox', 'wcfHeaderMenu'],
+ 'wcfNavigation' => 'wcfNavigation',
+ 'wcfSidebar' => ['wcfSidebar', 'wcfSidebarHeadline'],
+ 'wcfContent' => ['wcfContent', 'wcfContentHeadline'],
+ 'wcfTabularBox' => 'wcfTabularBox',
+ 'wcfInput' => ['wcfInput', 'wcfInputDisabled'],
+ 'wcfButton' => ['wcfButton', 'wcfButtonPrimary', 'wcfButtonDisabled'],
+ 'wcfDropdown' => 'wcfDropdown',
+ 'wcfFooterBox' => ['wcfFooterBox', 'wcfFooterBoxHeadline'],
+ 'wcfFooter' => 'wcfFooter'
];
- /*
+
$this->colors = [
- 'wcfButtonBackgroundColor',
- 'wcfButtonBorderColor',
- 'wcfButtonColor',
- 'wcfButtonHoverBackgroundColor',
- 'wcfButtonHoverBorderColor',
- 'wcfButtonHoverColor',
- 'wcfButtonPrimaryBackgroundColor',
- 'wcfButtonPrimaryBorderColor',
- 'wcfButtonPrimaryColor',
- 'wcfColor',
- 'wcfContainerAccentBackgroundColor',
- 'wcfContainerBackgroundColor',
- 'wcfContainerBorderColor',
- 'wcfContainerHoverBackgroundColor',
- 'wcfContentBackgroundColor',
- 'wcfDimmedColor',
- 'wcfInputBackgroundColor',
- 'wcfInputBorderColor',
- 'wcfInputColor',
- 'wcfInputHoverBackgroundColor',
- 'wcfInputHoverBorderColor',
- 'wcfLinkColor',
- 'wcfLinkHoverColor',
- 'wcfPageBackgroundColor',
- 'wcfPageColor',
- 'wcfPageLinkColor',
- 'wcfPageLinkHoverColor',
- 'wcfTabularBoxBackgroundColor',
- 'wcfTabularBoxColor',
- 'wcfTabularBoxHoverColor',
- 'wcfUserPanelBackgroundColor',
- 'wcfUserPanelColor',
- 'wcfUserPanelHoverBackgroundColor',
- 'wcfUserPanelHoverColor',
+ 'wcfHeader' => ['background', 'link', 'linkActive'],
+ 'wcfHeaderSearchBox' => ['background', 'border', 'text', 'backgroundAccent', 'borderActive', 'textActive'],
+ 'wcfHeaderMenu' => ['background', 'border', 'link', 'backgroundActive', 'linkActive'],
+ 'wcfNavigation' => ['background', 'text', 'link', 'linkActive'],
+ 'wcfSidebar' => ['background', 'text', 'link', 'linkActive'],
+ 'wcfSidebarHeadline' => ['text', 'link', 'linkActive'],
+ 'wcfContent' => ['background', 'text', 'link', 'linkActive'],
+ 'wcfContentHeadline' => ['border', 'text', 'link', 'linkActive'],
+ 'wcfTabularBox' => ['border', 'headline', 'headlineActive'],
+ 'wcfInput' => ['background', 'border', 'text', 'backgroundActive', 'borderActive', 'textActive'],
+ 'wcfInputDisabled' => ['background', 'border', 'text'],
+ 'wcfButton' => ['background', 'border', 'text', 'backgroundActive', 'borderActive', 'textActive'],
+ 'wcfButtonPrimary' => ['background', 'border', 'text', 'backgroundActive', 'borderActive', 'textActive'],
+ 'wcfButtonDisabled' => ['background', 'border', 'text'],
+ 'wcfDropdown' => ['background', 'border', 'text', 'link', 'backgroundActive', 'linkActive'],
+ 'wcfFooterBox' => ['background', 'text', 'link', 'linkActive'],
+ 'wcfFooterBoxHeadline' => ['text', 'link', 'linkActive'],
+ 'wcfFooter' => ['background', 'text', 'link', 'linkActive']
];
- */
+
+ // DEBUG ONLY
+ if (false) {
+ echo "<pre>";
+ foreach ($this->colors as $key => $values) {
+ foreach ($values as $v) {
+ $variableName = $key . ucfirst($v);
+
+ echo "INSERT IGNORE INTO wcf1_style_variable (variableName, defaultValue) VALUES ('{$variableName}', 'rgba(255, 255, 255, 1)');\n";
+ }
+ }
+ exit;
+ }
+ // DEBUG ONLY
+
// set global variables
$this->globals = [
'wcfBaseFontSize',
'availableFontFamilies' => $this->availableFontFamilies,
'availableTemplateGroups' => $this->availableTemplateGroups,
'availableUnits' => $this->availableUnits,
+ 'colorCategories' => $this->colorCategories,
'colors' => $this->colors,
'copyright' => $this->copyright,
'imagePath' => $this->imagePath,
*/
public $className = 'wcf\data\acp\menu\item\ACPMenuItemEditor';
+ /**
+ * @see \wcf\system\package\plugin\AbstractMenuPackageInstallationPlugin::prepareImport()
+ */
+ protected function prepareImport(array $data) {
+ $returnValue = parent::prepareImport($data);
+
+ $returnValue['icon'] = (isset($data['elements']['icon'])) ? $data['elements']['icon'] : '';
+
+ return $returnValue;
+ }
+
/**
* @see \wcf\system\package\plugin\IPackageInstallationPlugin::getDefaultFilename()
*/
* Compiles SCSS stylesheets for ACP usage.
*/
public function compileACP() {
- $files = glob(WCF_DIR.'style/*.less');
+ // read stylesheets by dependency order
+ $conditions = new PreparedStatementConditionBuilder();
+ $conditions->add("filename REGEXP ?", ['style/([a-zA-Z0-9\_\-\.]+)\.(less|scss)']);
+
+ // TESTING ONLY
+ $conditions->add("packageID <> ?", [1]);
+ // TESTING ONLY
+
+ $sql = "SELECT filename, application
+ FROM wcf".WCF_N."_package_installation_file_log
+ ".$conditions."
+ ORDER BY packageID";
+ $statement = WCF::getDB()->prepareStatement($sql);
+ $statement->execute($conditions->getParameters());
+
+ $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
+
+ //$files = glob(WCF_DIR.'style/*.less');
// read default values
+ /*
$sql = "SELECT variableName, defaultValue
FROM wcf".WCF_N."_style_variable
ORDER BY variableID ASC";
$variables[$row['variableName']] = $value;
}
+ */
+ $style = new Style(1);
+ $variables = $style->getVariables();
// insert blue temptation files
- array_unshift($files, WCF_DIR.'acp/style/blueTemptation/variables.scss', WCF_DIR.'acp/style/blueTemptation/override.scss');
+ //array_unshift($files, WCF_DIR.'acp/style/blueTemptation/variables.scss', WCF_DIR.'acp/style/blueTemptation/override.scss');
$variables['style_image_path'] = "'../images/blueTemptation/'";
WCF_DIR.'acp/style/style',
$files,
$variables,
- file_get_contents(WCF_DIR.'acp/style/blueTemptation/individual.scss'),
+ '',//file_get_contents(WCF_DIR.'acp/style/blueTemptation/individual.scss'),
new Callback(function($content) {
// fix relative paths
$content = str_replace('../font/', '../../font/', $content);
// sets default text shadows depending on background color
@mixin textShadow($backgroundColor) {
@if (lightness($backgroundColor) >= 40) {
- text-shadow: 0 1px 0 $wcfTextShadowLightColor;
+ text-shadow: 0 1px 0 $wcfTextShadowDarkColor;
}
@else {
- text-shadow: 0 -1px 0 $wcfTextShadowDarkColor;
+ text-shadow: 0 -1px 0 $wcfTextShadowLightColor;
}
}
q::after {
content: '';
content: none;
-}
\ No newline at end of file
+}
+
+/**
+ * sane box-sizing value for all elements
+ *
+ * https://css-tricks.com/box-sizing/
+ */
+html {
+ box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: inherit;
+}
+++ /dev/null
-#colorPickerGradient {
- background-color: #f00;
- background-image: url('../images/colorPickerGradient.png');
- background-repeat: no-repeat;
- border: 1px solid rgba(0, 0, 0, 1);
- cursor: default;
- display: inline-block;
- height: 256px;
- overflow: hidden;
- position: relative;
- width: 256px;
-
- > span {
- border: 1px solid rgba(0, 0, 0, 1);
- border-radius: 10px;
- display: block;
- height: 10px;
- left: -4px;
- position: absolute;
- top: -4px;
- width: 10px;
-
- > span {
- border: 1px solid rgba(255, 255, 255, 1);
- border-radius: 10px;
- display: block;
- height: 8px;
- width: 8px;
- }
- }
-}
-
-#colorPickerBar {
- background-image: url('../images/colorPickerBar.png');
- background-repeat: repeat-x;
- border: 1px solid rgba(0, 0, 0, 1);
- cursor: default;
- display: inline-block;
- height: 256px;
- margin-left: 10px;
- position: relative;
- width: 16px;
-
- > span {
- display: inline-block;
- height: 1px;
- left: 0;
- position: absolute;
- top: 27px;
- width: 16px;
-
- &::after,
- &::before {
- content: "";
- display: block;
- height: 0;
- position: absolute;
- top: 0;
- width: 0;
- }
-
- &::after {
- border-bottom: 5px solid transparent;
- border-right: 5px solid rgba(0, 0, 0, 1);
- border-top: 5px solid transparent;
- right: -7px;
- top: -5px;
- }
-
- &::before {
- border-bottom: 5px solid transparent;
- border-left: 5px solid rgba(0, 0, 0, 1);
- border-top: 5px solid transparent;
- left: -7px;
- top: -5px;
- }
- }
-}
-
-#colorPickerForm {
- display: inline-block;
- margin-left: 20px;
- position: relative;
- text-align: center;
- width: 100px;
-
- > .colors {
- margin-left: 2px;
-
- > .new,
- > .old {
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEX////MzMw46qqDAAAAD0lEQVQI12P4z4Ad4ZAAAH6/D/Hgw85/AAAAAElFTkSuQmCC);
- border: 1px solid rgba(0, 0, 0, 1);
- display: block;
- height: 24px;
-
- > span {
- display: block;
- height: 24px;
- }
- }
-
- > .old {
- background-position: 8px 0;
- border-top-width: 0;
- }
- }
-
- > .hex {
- margin-top: @wcfGapLarge;
- }
-
- > .rgba {
- margin-top: @wcfGapLarge;
-
- > li.a {
- margin-top: @wcfGapSmall;
- }
-
- > li.g,
- > li.b {
- margin-top: 2px;
- }
- }
-
- > .rgba > li,
- > .hex > li {
- text-align: right;
-
- input {
- margin-left: @wcfGapSmall;
- width: 80px;
- }
- }
-}
> a {
cursor: pointer;
- display: flex;
+ display: inline-flex;
}
}
}
+++ /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
+/* 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.4.0');
+ src: url('../font/getFont.php?type=eot&v=4.4.0#iefix') format('embedded-opentype'),
+ url('../font/getFont.php?type=woff2&v=4.4.0') format('woff2'),
+ url('../font/getFont.php?type=woff&v=4.4.0') format('woff'),
+ url('../font/getFont.php?type=ttf&v=4.4.0') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+.icon, .fa {
+ color: $wcfContentText;
+ 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;
+
+ &.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
+.fa-spinner {
+ height: auto;
+
+ -webkit-animation: spin 1s infinite steps(8);
+ animation: spin 1s infinite steps(8);
+}
+@-webkit-keyframes spin {
+ 0% { -webkit-transform: rotate(0deg); }
+ 100% { -webkit-transform: rotate(359deg); }
+}
+@keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(359deg); }
+}
+
+.fa-rotate-90:before {
+ -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+}
+
+.fa-rotate-180:before {
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+
+.fa-rotate-270:before {
+ -webkit-transform: rotate(270deg);
+ transform: rotate(270deg);
+}
+
+.fa-flip-horizontal:before {
+ -webkit-transform: scale(-1, 1);
+ transform: scale(-1, 1);
+}
+
+.fa-flip-vertical:before {
+ -webkit-transform: scale(1, -1);
+ transform: scale(1, -1);
+}
+
+@import "variables";
+@import "icons";
+++ /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
+.containerList > li {
+ padding: 20px 0;
+
+ &:not(:last-child) {
+ border-bottom: 1px solid $wcfContentBorder;
+ }
+
+ &.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(unquote("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
-.formSubmit {
- text-align: center;
-
- &:not(:first-child) {
- margin-top: 20px;
- }
-
- > :not(:first-child) {
- margin-left: 10px;
- }
-}
\ No newline at end of file
--- /dev/null
+input[type="date"],
+input[type="datetime"],
+input[type="email"],
+input[type="number"],
+input[type="password"],
+input[type="search"],
+input[type="text"],
+input[type="url"],
+select,
+textarea {
+ background-color: $wcfInputBackground;
+ border: 1px solid $wcfInputBorder;
+ border-radius: 0;
+ border-width: 0 0 1px 0;
+ color: $wcfInputText;
+ outline: none;
+ padding: 4px;
+
+ &:focus,
+ &:hover {
+ background-color: $wcfInputBackgroundActive;
+ border-color: $wcfInputBorderActive;
+ color: $wcfInputTextActive;
+ }
+
+ &[disabled] {
+ background-color: $wcfInputBackgroundInactive !important;
+ border-color: $wcfInputBorderInactive !important;
+ color: $wcfInputTextInactive !important;
+ }
+}
+
+textarea {
+ border-width: 1px;
+ width: 100%;
+
+ @extend .wcfFontDefault;
+}
+
+.selectDropdown {
+ position: relative;
+
+ &::after {
+ content: $fa-var-caret-down;
+ display: block;
+ font-family: FontAwesome;
+ font-size: 14px;
+ pointer-events: none;
+ position: absolute;
+ right: 7px;
+ top: 0px;
+ }
+
+ > select {
+ padding-right: 18px;
+
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ }
+}
+
+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%;
+ }
+}
+
+dl {
+ &:not(.plain) {
+ display: block;
+
+ &:not(:first-child) {
+ margin-top: 10px;
+ }
+
+ &:not(:last-child) {
+ margin-bottom: 10px;
+ }
+
+ > dt {
+ display: block;
+
+ &:not(:empty) {
+ margin-bottom: 5px;
+ }
+ }
+
+ > dd {
+ display: block;
+ }
+
+ &.wide > dt {
+ display: none;
+ }
+
+ & + dl:not(.plain) {
+ padding-top: 10px;
+ }
+ }
+
+ &.dataList {
+ @extend .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 {
+ > small:not(.innerError) {
+ color: $wcfDimmedColor;
+ display: block;
+ margin-top: 5px;
+ }
+ }
+
+ &.condensed {
+ display: block;
+
+ > dt,
+ > dd {
+ display: block;
+ margin: 0;
+ text-align: left;
+ width: 100%;
+ }
+
+ > dd + dt {
+ margin-top: 15px;
+ }
+
+ > dt:not(:empty) {
+ margin-bottom: 5px;
+ }
+ }
+}
+
+.formSubmit {
+ text-align: center;
+
+ &:not(:first-child) {
+ margin-top: 20px;
+ }
+
+ > :not(:first-child) {
+ margin-left: 10px;
+ }
+}
+
+.flexibleButtonGroup {
+ display: flex;
+
+ > li {
+ flex: 0 0 auto;
+
+ &:not(:last-child) {
+ margin-right: 5px;
+ }
+
+ > input[type="radio"] {
+ display: none;
+
+ &:checked + label {
+ cursor: default;
+
+ > .icon {
+ cursor: default !important;
+ }
+ }
+
+ &:checked + label,
+ & + label:hover {
+ color: #fff;
+
+ &.green {
+ background-color: rgb(148, 170, 114);
+ //background-color: rgb(92, 184, 92);
+ }
+
+ &.red {
+ background-color: rgb(232, 151, 149);
+ //background-color: rgb(217, 83, 79);
+ }
+
+ &.yellow {
+ background-color: rgb(203, 172, 91);
+ //background-color: rgb(240, 173, 78);
+ }
+
+ > .icon {
+ color: #fff;
+ }
+ }
+ }
+
+ > label {
+ background-color: rgb(242, 242, 242);
+ cursor: pointer;
+ padding: 5px 10px;
+
+ &.green,
+ &.green > .icon {
+ color: rgb(54, 125, 54);
+ }
+
+ &.red,
+ &.red > .icon {
+ color: rgb(201, 48, 44);
+ }
+
+ &.yellow,
+ &.yellow > .icon {
+ color: rgb(236, 151, 31);
+ }
+
+ > .icon {
+ cursor: pointer !important;
+ }
+ }
+ }
+}
+
+.inputAddon:not(.inputAddonTextarea) {
+ display: flex;
+
+ &:not(:last-child) {
+ margin-bottom: 5px;
+ }
+
+ > .inputPrefix {
+ flex: 0 0 auto;
+
+ &.button {
+ border-radius: 0;
+ margin-right: 5px;
+ }
+ }
+
+ > .inputSuffix {
+ flex: 0 0 auto;
+
+ &.button {
+ border-radius: 0;
+ margin-left: 5px;
+ }
+ }
+
+ > input,
+ > textarea {
+ flex: 1 auto;
+ }
+}
+
+.inputAddonTextarea > .inputPrefix.button {
+ border-bottom-width: 0;
+ border-radius: 0;
+}
/* boxes with an image */
@mixin box($imageSize, $margin: 0) {
- display: flex;
+ display: flex !important;
&:not(:last-child) {
margin-bottom: ($margin + 3px);
}
> :first-child:not(:last-child) {
- flex: 0 auto;
+ flex: 0 auto !important;
margin-right: $margin;
}
> :last-child {
- flex: 1;
+ flex: 1 !important;
}
}
}
.wcfFontDefault {
- font-family: "Open Sans";
+ font-family: "Open Sans", "Segoe UI";
font-weight: 400;
}
.wcfFontSmall {
- font-family: "Open Sans";
+ font-family: "Open Sans", "Segoe UI";
font-size: .85rem;
font-weight: 400;
}
.wcfFontBold {
- font-family: "Open Sans";
+ font-family: "Open Sans", "Segoe UI Semibold";
font-weight: 600;
}
.wcfFontLarger {
- font-family: "Open Sans";
+ font-family: "Open Sans", "Segoe UI Light";
font-size: 1.2rem;
font-weight: 300;
}
.wcfFontLarge {
- font-family: "Open Sans";
+ font-family: "Open Sans", "Segoe UI Light";
font-size: 1.4rem;
font-weight: 300;
}
/* COLUMN LAYOUT */
#pageHeader {
- flex: 0 auto;
+ flex: 0 0 auto;
z-index: 100;
}
.main {
background-color: $wcfContentBackground;
color: $wcfContentText;
- flex: 1 auto;
+ flex: 1 0 auto;
padding: 40px 0;
z-index: 50;
}
#pageFooter {
- flex: 0 auto;
+ flex: 0 0 auto;
}
/* CONTENT AREA */
.navigation {
- background-color: $wcfHeaderBackground;
+ background-color: $wcfHeaderNavigationBackground;
+ color: $wcfHeaderNavigationText;
flex: 0 auto;
padding: 5px 0;
z-index: 25;
justify-content: flex-end;
height: 30px;
}
+
+ .icon {
+ color: $wcfHeaderNavigationText;
+ }
+
+ a {
+ color: $wcfHeaderNavigationLink;
+
+ &:hover {
+ color: $wcfHeaderNavigationLinkActive;
+ }
+ }
}
.navigationIcons {
}
.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;
+ display: flex;
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;
+ > .invisible {
+ display: none;
}
- &.active {
- background-color: rgb(255, 255, 255);
-
- > span:not(.invisible) {
- color: rgb(79, 129, 189);
- cursor: default;
-
- &:hover {
- color: rgb(79, 129, 189);
- }
- }
+ > a,
+ > span {
+ background-color: $wcfButtonBackground;
+ border: 1px solid $wcfButtonBorder;
+ color: $wcfButtonText;
+ padding: 3px 5px;
}
- &.jumpTo {
- cursor: pointer;
+ &.active > a,
+ &.active > span,
+ > a:hover {
+ background-color: $wcfButtonBackgroundActive;
+ border-color: $wcfButtonBorderActive;
+ color: $wcfButtonTextActive;
}
- &.skip {
- align-items: center;
- display: flex;
+ &:not(:last-child) {
+ margin-right: -1px;
}
- > a,
- > span:not(.invisible) {
- color: rgb(255, 255, 255);
- display: block;
- padding: 3px 7px;
-
- &:hover {
- color: rgb(255, 255, 255);
- }
+ > .icon {
+ height: auto;
+ line-height: inherit;
+ width: auto;
}
}
}
a {
color: $wcfFooterBoxLink;
+ .icon {
+ color: $wcfFooterBoxLink;
+ }
+
&:hover {
color: $wcfFooterBoxLinkActive;
+
+ .icon {
+ color: $wcfFooterBoxLinkActive;
+ }
}
}
+ .icon {
+ color: $wcfFooterBoxText;
+ }
+
> div > ul {
display: flex;
flex-wrap: wrap;
.interactiveDropdown { display: none; }
/* @TODO END */
-#pageHeader {
- background-color: $wcfUserPanelBackground;
-}
-
-#pageHeader > div > div {
- align-items: center;
- display: flex;
- flex-wrap: wrap;
- padding: 20px 0;
+.pageHeader {
+ background-color: $wcfHeaderBackground;
+
+ a {
+ color: $wcfHeaderLink;
+
+ &:hover {
+ color: $wcfHeaderLinkActive;
+ }
+ }
+
+ > 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;
margin-right: $wcfGapMedium;
}
- &.active > a {
- @extend .wcfFontBold;
-
- color: rgba(255, 255, 255, 1);
+ &::before {
+ border-top: 1px solid $wcfMenuBorder;
+ content: "";
+ display: block;
+ transition: width .12s ease-out;
+ width: 0;
+ }
+
+ &:hover::before {
+ width: 100%;
}
> a {
- color: rgba(255, 255, 255, .8);
transition: color .2s linear;
text-decoration: none;
text-transform: uppercase;
+ }
+
+ &.active > a {
+ @extend .wcfFontBold;
- &:hover {
- color: rgba(255, 255, 255, 1);
- }
+ color: $wcfHeaderLinkActive;
}
}
}
.subMenuItems {
position: relative;
- &:hover > .subMenu {
- opacity: 1;
- transition-delay: 0s;
- visibility: visible;
+ &:hover {
+ > a::after {
+ transform: rotateX(180deg);
+ }
+
+ > .subMenu {
+ opacity: 1;
+ transition-delay: 0s;
+ visibility: visible;
+ }
}
> a {
padding-right: 15px;
- &:after {
- // @TODO
- //content: @fa-var-caret-down;
+ &::after {
+ content: $fa-var-caret-down;
display: block;
font-family: FontAwesome;
position: absolute;
right: 0;
- top: 0;
+ top: 1px;
+ transition: transform .12s ease-out;
}
}
}
.subMenu {
- background-color: rgba(52, 73, 94, 1);
- border-radius: 3px;
+ background-color: $wcfHeaderMenuBackground;
+ border: 1px solid $wcfHeaderMenuBorder;
opacity: 0;
- padding: 5px 0;
+ padding: 3px 0;
position: absolute;
transition: visibility .2s linear .2s, opacity .2s linear;
visibility: hidden;
+ @include boxShadow(2px, 2px, rgba(0, 0, 0, .2), 10px);
+
> li {
- &:not(:first-child) {
- margin-top: 5px;
- }
-
- &.active > a {
- background-color: rgb(79, 129, 189);
- cursor: default;
- }
-
> a {
@extend .wcfFontDefault;
- color: rgb(255, 255, 255);
+ color: $wcfHeaderMenuLink;
display: block;
font-size: 1rem;
- padding: 5px 10px;
- transition: background-color .2s linear;
+ padding: 5px 20px;
white-space: nowrap;
-
- &:hover {
- background-color: rgb(79, 129, 189);
- }
+ }
+
+ &.active > a,
+ > a:hover {
+ background-color: $wcfMenuContentBackgroundActive;
+ color: $wcfMenuContentLinkActive;
+ text-decoration: none;
+ }
+
+ &.active > a {
+ cursor: default;
}
}
}
#search {
flex: 0 50%;
text-align: right;
+
+ > form {
+ display: inline-block;
+ }
}
+#pageHeaderSearch {
+ background-color: $wcfHeaderSearchBoxBackground;
+ border-width: 0;
+ color: $wcfHeaderSearchBoxText;
+ padding: 5px 10px;
+
+ &:focus,
+ &:hover {
+ background-color: $wcfHeaderSearchBoxBackgroundAccent;
+ color: $wcfHeaderSearchBoxTextActive;
+ }
+}
+++ /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
+#pageHeader > div {
+ /* huge performance increase when scrolling */
+ will-change: transform;
+}
+
+#pageHeader.sticky {
+ flex-wrap: nowrap;
+ z-index: 300;
+
+ > div {
+ background-color: $wcfHeaderBackground; /* @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;
+ }
+}
.sidebar {
+ background-color: $wcfSidebarBackground;
+ color: $wcfSidebarBoxText;
+
> div,
> fieldset,
> section {
- background-color: $wcfContentBackgroundAlternate;
+ background-color: $wcfSidebarBoxBackground;
border-radius: 3px;
padding: 20px;
display: block;
height: 0;
}
- }
-
- > div + *,
- > fieldset + *,
- > section + * {
- margin-top: 30px;
+
+ & + * {
+ margin-top: 30px;
+ }
}
> div {
section > h1,
fieldset > legend {
- .wcfFontLarge;
+ @extend .wcfFontLarge;
- color: rgba(67, 67, 67, 1);
+ color: $wcfSidebarBoxHeadlineText;
margin-bottom: 10px;
+
+ > a {
+ color: $wcfSidebarBoxHeadlineLink;
+
+ > .icon {
+ color: $wcfSidebarBoxHeadlineLink;
+ }
+
+ &:hover {
+ color: $wcfSidebarBoxHeadlineLinkActive;
+
+ > .icon {
+ color: $wcfSidebarBoxHeadlineLinkActive;
+ }
+ }
+ }
+ }
+
+ a {
+ color: $wcfSidebarBoxLink;
+
+ > .icon {
+ color: $wcfSidebarBoxLink;
+ }
+
+ &:hover {
+ color: $wcfSidebarBoxLinkActive;
+
+ > .icon {
+ color: $wcfSidebarBoxLinkActive;
+ }
+ }
}
dl.dataList {
cursor: pointer;
display: inline-block;
padding: 5px 10px;
- transition-duration: .2s;
- transition-property: background-color, border-color, color;
- transition-timing-function: linear;
.icon {
color: $wcfButtonText;
- transition: color .2s linear;
}
+ &.active,
&:hover {
background-color: $wcfButtonBackgroundActive;
border-color: $wcfButtonBorderActive;
input[type="button"].buttonPrimary,
input[type="submit"],
.button.buttonPrimary {
- background-color: $wcfButtonBackgroundAccent;
- border-color: $wcfButtonBorderAccent;
- color: $wcfButtonTextAccent !important;
+ background-color: $wcfButtonPrimaryBackground;
+ border-color: $wcfButtonPrimaryBorder;
+ color: $wcfButtonPrimaryText !important;
.icon {
- color: $wcfButtonTextAccent;
+ color: $wcfButtonPrimaryText;
}
+ &.active,
&:hover {
- background-color: $wcfButtonBackgroundAccentActive;
- border-color: $wcfButtonBorderAccentActive;
- color: $wcfButtonTextAccentActive;
+ background-color: $wcfButtonPrimaryBackgroundActive;
+ border-color: $wcfButtonPrimaryBorderActive;
+ color: $wcfButtonPrimaryTextActive !important;
.icon {
- color: $wcfButtonTextAccentActive;
+ color: $wcfButtonPrimaryTextActive;
+ }
+ }
+}
+
+/* force active state for buttons toggling a dropdown */
+.dropdownOpen {
+ > button,
+ > input[type="button"],
+ > input[type="reset"],
+ > input[type="submit"],
+ > .button {
+ background-color: $wcfButtonBackgroundActive;
+ border-color: $wcfButtonBorderActive;
+ color: $wcfButtonTextActive !important;
+
+ .icon {
+ color: $wcfButtonTextActive;
+ }
+ }
+
+ > button.buttonPrimary,
+ > input[type="button"].buttonPrimary,
+ > input[type="submit"],
+ > .button.buttonPrimary {
+ background-color: $wcfButtonPrimaryBackgroundActive;
+ border-color: $wcfButtonPrimaryBorderActive;
+ color: $wcfButtonPrimaryTextActive !important;
+
+ .icon {
+ color: $wcfButtonPrimaryTextActive;
}
}
}
> li {
&:not(:last-child) {
- border-right: 1px solid $wcfButtonBackgroundAccentActive;
+ border-right: 1px solid $wcfContentBorder;
margin-right: 0;
}
&:first-child .button {
- border-bottom-left-radius: 3px;
- border-top-left-radius: 3px;
+ border-radius: 3px 0 0 3px;
}
&:last-child .button {
- border-bottom-right-radius: 3px;
- border-top-right-radius: 3px;
+ border-radius: 0 3px 3px 0;
}
.button {
border-radius: 0;
+ border-width: 0;
}
}
}
--- /dev/null
+#colorPickerGradient {
+ background-color: #f00;
+ background-image: url('../images/colorPickerGradient.png');
+ background-repeat: no-repeat;
+ border: 1px solid rgba(0, 0, 0, 1);
+ cursor: default;
+ display: inline-block;
+ height: 256px;
+ overflow: hidden;
+ position: relative;
+ width: 256px;
+
+ > span {
+ border: 1px solid rgba(0, 0, 0, 1);
+ border-radius: 10px;
+ display: block;
+ height: 10px;
+ left: -4px;
+ position: absolute;
+ top: -4px;
+ width: 10px;
+
+ > span {
+ border: 1px solid rgba(255, 255, 255, 1);
+ border-radius: 10px;
+ display: block;
+ height: 8px;
+ width: 8px;
+ }
+ }
+}
+
+#colorPickerBar {
+ background-image: url('../images/colorPickerBar.png');
+ background-repeat: repeat-x;
+ border: 1px solid rgba(0, 0, 0, 1);
+ cursor: default;
+ display: inline-block;
+ height: 256px;
+ margin-left: 10px;
+ position: relative;
+ width: 16px;
+
+ > span {
+ display: inline-block;
+ height: 1px;
+ left: 0;
+ position: absolute;
+ top: 27px;
+ width: 16px;
+
+ &::after,
+ &::before {
+ content: "";
+ display: block;
+ height: 0;
+ position: absolute;
+ top: 0;
+ width: 0;
+ }
+
+ &::after {
+ border-bottom: 5px solid transparent;
+ border-right: 5px solid rgba(0, 0, 0, 1);
+ border-top: 5px solid transparent;
+ right: -7px;
+ top: -5px;
+ }
+
+ &::before {
+ border-bottom: 5px solid transparent;
+ border-left: 5px solid rgba(0, 0, 0, 1);
+ border-top: 5px solid transparent;
+ left: -7px;
+ top: -5px;
+ }
+ }
+}
+
+#colorPickerForm {
+ display: inline-block;
+ margin-left: 20px;
+ position: relative;
+ text-align: center;
+ width: 100px;
+
+ > .colors {
+ margin-left: 2px;
+
+ > .new,
+ > .old {
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEX////MzMw46qqDAAAAD0lEQVQI12P4z4Ad4ZAAAH6/D/Hgw85/AAAAAElFTkSuQmCC);
+ border: 1px solid rgba(0, 0, 0, 1);
+ display: block;
+ height: 24px;
+
+ > span {
+ display: block;
+ height: 24px;
+ }
+ }
+
+ > .old {
+ background-position: 8px 0;
+ border-top-width: 0;
+ }
+ }
+
+ > .hex {
+ margin-top: $wcfGapLarge;
+ }
+
+ > .rgba {
+ margin-top: $wcfGapLarge;
+
+ > li.a {
+ margin-top: $wcfGapSmall;
+ }
+
+ > li.g,
+ > li.b {
+ margin-top: 2px;
+ }
+ }
+
+ > .rgba > li,
+ > .hex > li {
+ text-align: right;
+
+ input {
+ margin-left: $wcfGapSmall;
+ width: 80px;
+ }
+ }
+}
+++ /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
+.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 $wcfContentBorder;
+ padding: 10px 0;
+}
+
+.commentOptionContainer {
+ border-top: 1px solid $wcfContentBorder;
+ 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;
- opacity: 0;
- pointer-events: none;
- position: fixed;
- top: 0;
- transform: translateY(-100%);
- transition: visibility .2s linear .2s, transform .2s linear, opacity .2s linear;
- visibility: hidden;
- width: 100%;
- z-index: 460;
-
- &.active {
- opacity: 1;
- transform: translateY(0%);
- transition-delay: 0s;
- visibility: visible;
- }
-
- > 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;
-
- .userSelectNone;
- }
-}
--- /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, background-color .12s linear;
+
+ &[aria-hidden=false] {
+ background-color: rgba(0, 0, 0, .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 {
+ border: 1px solid rgb(52, 152, 219);
+ box-shadow: 0 1px 15px 0 rgba(0, 0, 0, .3);
+ left: 50%;
+ max-height: 80%;
+ max-width: 80%;
+ min-width: 400px;
+ position: absolute;
+ top: 10%;
+ transform: translateX(-50%);
+ will-change: opacity, transform;
+
+ -webkit-animation: wcfDialogOut .3s;
+ -webkit-animation-fill-mode: forwards;
+
+ &[aria-hidden=false] {
+ -webkit-animation: wcfDialog .3s;
+ -webkit-animation-fill-mode: forwards;
+ }
+
+ > header {
+ background-color: $wcfContentBackground;
+ border-bottom: 1px solid $wcfContentBorder;
+ color: $wcfContentHeadlineText;
+ display: flex;
+ padding: 7px 10px;
+
+ > span {
+ flex: 1 auto;
+
+ @extend .wcfFontLarge;
+ }
+
+ > a {
+ color: $wcfContentHeadlineLink;
+ flex: 0 0 20px;
+ font-family: FontAwesome;
+ font-size: 18px;
+ text-align: right;
+ text-decoration: none;
+
+ &::before {
+ content: $fa-var-times;
+ }
+
+ > span {
+ display: none;
+ }
+ }
+ }
+
+ > .dialogContent {
+ background-color: $wcfContentBackground;
+ color: $wcfContentText;
+ overflow: auto;
+
+ &:not(.dialogContentNoPadding) {
+ padding: 30px 20px 0 20px;
+
+ &::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;
+ text-align: left;
+ width: auto !important;
+
+ &:empty {
+ margin-bottom: 0;
+ }
+ }
+
+ > dd {
+ margin-left: 0 !important;
+ }
+ }
+
+ .dialogFormSubmit {
+ background-color: $wcfContentBackground;
+ border-top: 1px solid $wcfContentBorder;
+ bottom: 0;
+ left: 0;
+ padding: 10px;
+ position: absolute;
+ right: 0;
+ }
+ }
+}
+
+@media only screen and (max-width: 800px) {
+}
+
+/* static dialogs */
+.jsStaticDialogContent {
+ display: none;
+}
+
+/* package (un-)installation */
+#packageInstallationDialogContainer > .boxHeadline {
+ margin-top: 0;
+}
+
+@keyframes wcfSpinner {
+ to { transform: rotate(360deg); }
+}
+
+.spinner {
+ background-color: rgb(255, 255, 255);
+ border: 1px solid rgb(204, 204, 204);
+ box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .2);
+ color: rgb(44, 62, 80);
+ left: 50%;
+ opacity: 0;
+ padding: 10px;
+ position: fixed;
+ text-align: center;
+ top: 200px;
+ visibility: hidden;
+ z-index: 401;
+
+ transform: translateX(-50%);
+
+ transition: visibility 0s linear .1s, opacity .1s linear;
+
+ &.active {
+ opacity: 1;
+ visibility: visible;
+
+ transition-delay: 0s;
+ }
+
+ > .icon {
+ border: 2px solid rgb(204, 204, 204);
+ border-top-color: rgb(79, 129, 189);
+ border-radius: 50%;
+ height: 48px;
+ animation: wcfSpinner .6s linear infinite;
+ width: 48px;
+
+ &::before {
+ display: none;
+ }
+ }
+
+ > span:not(.icon) {
+ display: block;
+ margin-top: 5px;
+ }
+}
+
+.systemConfirmation p {
+ //padding-top: @wcfGapSmall;
+}
+
+/* notification overlay */
+#systemNotification {
+ left: 0;
+ opacity: 0;
+ pointer-events: none;
+ position: fixed;
+ top: 0;
+ transform: translateY(-100%);
+ transition: visibility .2s linear .2s, transform .2s linear, opacity .2s linear;
+ visibility: hidden;
+ width: 100%;
+ z-index: 460;
+
+ &.active {
+ opacity: 1;
+ transform: translateY(0%);
+ transition-delay: 0s;
+ visibility: visible;
+ }
+
+ > 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;
+
+ //.userSelectNone;
+ }
+}
+++ /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
+.dropdown {
+ .dropdownToggle:active,
+ &.dropdownOpen .dropdownToggle {
+ outline: 0;
+ }
+
+ &.inputAddon {
+ > .dropdownToggle {
+ padding: $wcfGapTiny;
+
+ > span.active:after {
+ content: "\f0d7"; // @TODO: use a variable instead
+ font-family: FontAwesome;
+ font-size: 14px;
+ margin-left: 7px;
+ }
+ }
+ }
+
+ &.preInput {
+ display: table;
+ width: 100%;
+
+ input {
+ border-radius: 0 3px 3px 0;
+ display: table-cell;
+ margin: 0;
+ width: 99%;
+ }
+
+ textarea {
+ border-radius: 0 3px 3px;
+ 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"; // @TODO: use a variable instead
+ 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: 3px 3px 0 0;
+ }
+
+ &~ .dropdownMenu {
+ top: 10%;
+ }
+
+ span {
+ white-space: nowrap;
+ word-wrap: normal;
+
+ &.active::after {
+ content: "\f0d7"; // @TODO: use a variable instead
+ font-family: FontAwesome;
+ font-size: 14px;
+ margin-left: 7px;
+ }
+ }
+ }
+ }
+
+ &.dropdownOpen {
+ .dropdownToggle {
+ //color: @wcfPageLinkHoverColor;
+ }
+
+ .dropdownMenu {
+ display: block;
+ }
+ }
+
+ .dropdownToggle {
+ cursor: pointer;
+ }
+}
+
+.dropdownMenu {
+ background-color: $wcfDropdownBackground;
+ border: 1px solid $wcfDropdownBorder;
+ color: $wcfDropdownText;
+ display: none;
+ float: left;
+ min-width: 160px;
+ padding: 3px 0;
+ position: absolute;
+ text-align: left;
+ z-index: 450;
+
+ @include boxShadow(2px, 2px, rgba(0, 0, 0, .2), 10px);
+
+ &::after {
+ border: 7px solid transparent;
+ border-bottom-color: $wcfDropdownBorder;
+ 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: $wcfDropdownBackground;
+ 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: $wcfDropdownBorder;
+ border-bottom-width: 0;
+ bottom: -7px;
+ top: auto;
+ }
+
+ &::before {
+ border: 6px transparent solid;
+ border-top-color: $wcfDropdownBackground;
+ border-bottom-width: 0;
+ bottom: -6px;
+ top: auto;
+ }
+ }
+
+ &.dropdownOpen {
+ display: block;
+ }
+
+ li {
+ display: block;
+
+ @include textShadow($wcfDropdownText);
+
+ &:hover:not(.dropdownDivider):not(.dropdownList):not(.dropdownText),
+ &.dropdownList > li:hover:not(.dropdownDivider),
+ &.dropdownNavigationItem,
+ &.active {
+ background-color: $wcfDropdownBackgroundActive;
+ color: $wcfDropdownTextActive;
+
+ @include textShadow($wcfDropdownTextActive);
+ }
+
+ &.dropdownDivider {
+ border-top: 1px solid $wcfDropdownBorderAccent;
+ margin: 3px 0;
+ }
+
+ &.dropdownText {
+ font-size: $wcfSmallFontSize;
+ padding: $wcfGapTiny $wcfGapMedium;
+ }
+
+ &.boxFlag {
+ padding-top: 2px;
+ }
+
+ /*
+ // @TODO
+ &.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;
+ cursor: pointer;
+ display: block;
+ max-width: 350px;
+ overflow: hidden;
+ padding: 5px 20px;
+ text-decoration: none;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ word-wrap: normal;
+
+ > div > h3 {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+
+ > a {
+ color: $wcfDropdownLink;
+
+ &:hover {
+ color: $wcfDropdownLinkActive;
+
+ @include textShadow($wcfDropdownLinkActive);
+ }
+ }
+
+ > 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;
+ }
+ }
+ }
+}
}
.messageFooterButtons {
- @extend .inlineList;
+ @extend .buttonGroup;
justify-content: flex-end;
margin-top: 10px;
&.forceVisible {
opacity: 1 !important;
}
-
- > li:not(:last-child) {
- margin-right: 5px;
- }
}
.message:hover {
+++ /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
+@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 $wcfContentBorder;
+ 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: $wcfContentBackground;
+ border: 1px solid $wcfContentBorder;
+ 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 {
+ @extend .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;
+ transition: opacity .2s linear;
+ z-index: 200;
+
+ > div {
+ cursor: pointer;
+ font-size: 1.4rem;
+ left: 50%;
+ padding: 1em 3em;
+ position: absolute;
+ top: 50%;
+ 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, $wcfContentBorder 0px, $wcfContentBorder 3%, $wcfContentBackground 3%, $wcfContentBackground 100%);
+ background-size: 100% 31px;
+
+ > li {
+ display: inline-block;
+ margin-bottom: 1px;
+ vertical-align: middle;
+
+ &:last-of-type,
+ &.separator {
+ border-right: 1px solid $wcfContentBorder;
+ }
+
+ > 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;
+
+ &.redactor-button-disabled,
+ &.redactor-button-disabled:before,
+ &.redactor-button-disabled > i:before {
+ color: $wcfButtonTextInactive;
+ }
+
+ &:before {
+ color: $wcfButtonText;
+ }
+
+ > i {
+ height: 14px;
+ width: 12px;
+
+ &:before {
+ color: $wcfButtonText;
+ }
+ }
+
+ &:hover,
+ &.redactor-act,
+ &.dropact {
+ background-color: $wcfButtonBackgroundActive;
+ color: $wcfButtonTextActive;
+
+ &::before,
+ > i::before {
+ color: $wcfButtonTextActive;
+ 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 {
+ @extend .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 {
+ @extend .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: $wcfDropdownBackground !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;
+
+ @include boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
+
+ > a {
+ color: $wcfTooltipColor;
+ }
+}
+++ /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
+.tabMenuContainer:not(:first-child) {
+ margin-top: 30px;
+}
+
+/* main tabs */
+.tabMenu {
+ margin-bottom: 20px;
+ position: relative;
+
+ > ul {
+ @extend .inlineList;
+
+ > li {
+ &:not(:last-child) {
+ margin-right: 20px;
+ }
+
+ &.active > a {
+ cursor: default;
+ }
+
+ > a {
+ display: block;
+ padding: 5px 0;
+
+ @extend .wcfFontLarge;
+ }
+ }
+ }
+
+ > span {
+ border-top: 1px solid $wcfContentLink;
+ bottom: 0;
+ position: absolute;
+ transition: transform .2s linear, width .2s linear;
+ }
+}
+
+.tabMenuContent.hidden {
+ display: none;
+}
+
+/* sub tabs */
+.menu {
+ margin: -10px 0 40px 0;
+ position: relative;
+
+ > ul {
+ @extend .inlineList;
+
+ > li:not(:last-child) {
+ margin-right: 20px;
+ }
+ }
+
+ > span {
+ border-top: 1px solid $wcfContentLink;
+ bottom: -5px;
+ position: absolute;
+ transition: transform .2s linear, width .2s linear;
+ }
+}
+++ /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;
- }
- }
-}
-
-.messageTabMenu + .innerError {
- box-sizing: border-box;
- margin-top: -1px;
- width: 100%;
-}
-
-.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
+.messageTabMenu {
+ border: 1px solid $wcfContentBorder;
+ border-top-width: 0;
+ border-radius: 0 0 3px 3px;
+ line-height: $wcfBaseLineHeight;
+
+ > div,
+ > fieldset{
+ background-color: $wcfContentBackground;
+ border-width: 0;
+ border-radius: 0;
+ border-top: 1px solid $wcfContentBorder;
+ display: none;
+ padding: 15px 10px;
+ position: static;
+
+ &.active {
+ display: block;
+ }
+ }
+
+ > div {
+ > nav {
+ background-color: $wcfContentBackground;
+ border-bottom: 1px solid $wcfContentBorder;
+ 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: $wcfButtonTextAccent;
+ cursor: default;
+ }
+
+ a {
+ color: $wcfButtonText;
+ 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: $wcfButtonTextActive;
+ 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;
+ }
+ }
+}
+
+.messageTabMenu + .innerError {
+ box-sizing: border-box;
+ margin-top: -1px;
+ width: 100%;
+}
+
+.messageTabMenuNavigation > ul {
+ background-color: $wcfContentBackground;
+ font-size: 0;
+ white-space: nowrap;
+
+ > li {
+ display: inline-block;
+
+ > a {
+ border-right: 1px solid $wcfContentBorder;
+ border-bottom: 1px solid transparent;
+ color: $wcfButtonText;
+ 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: $wcfContentLink;
+ }
+
+ > span.icon {
+ display: none;
+ }
+ }
+
+ &.active {
+ > a {
+ background-color: $wcfContentBackground;
+ color: $wcfContentLink;
+ }
+ }
+ }
+}
+
+@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
-.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
+.tabularBox {
+ > .content {
+ border-width: 0;
+ }
+
+ .tabularList {
+ background-color: $wcfContentTabularBackground;
+ display: flex;
+ flex-direction: column;
+
+ > li {
+ flex: 0 0 auto;
+ padding: 5px 0;
+
+ &.head {
+ border-bottom: 2px solid $wcfContentTabularBorder;
+
+ > ol > li {
+ color: $wcfContentTabularLink;
+
+ > a {
+ color: $wcfContentTabularLink;
+ display: block;
+
+ @extend .wcfFontLarge;
+ }
+
+ &.ASC > a,
+ &.DESC > a {
+ padding-right: 14px;
+ position: relative;
+
+ &:after {
+ display: inline-block;
+ font-family: FontAwesome;
+ margin-left: 7px;
+ position: absolute;
+ }
+ }
+
+ &.ASC > a:after {
+ content: $fa-var-caret-up;
+ top: 1px;
+ }
+
+ &.DESC > a:after {
+ content: $fa-var-caret-down;
+ top: 2px;
+ }
+
+ &.active > a,
+ > a:hover {
+ color: $wcfContentTabularLinkActive;
+ }
+ }
+
+ & + li {
+ border-top-width: 0;
+ }
+ }
+
+ &:not(.head) {
+ border-top: 1px solid $wcfContentTabularBorderAccent;
+ }
+
+ &.divider + li:not(.divider) {
+ border-top-color: $wcfContentTabularBorder;
+ }
+
+ > ol {
+ align-items: center;
+ display: flex;
+
+ > li {
+ flex: 0 0 auto;
+ padding: 5px 10px;
+ }
+ }
+ }
+ }
+}
+
+.tabularBoxTitle {
+ > header {
+ border-bottom: 1px solid currentColor;
+ color: $wcfTabularBoxHeadline;
+ padding: 10px 0;
+
+ > h1,
+ > h2,
+ > h3 {
+ @extend .wcfFontLarge;
+ }
+
+ a,
+ .icon {
+ color: $wcfTabularBoxHeadline;
+
+ &:hover {
+ color: $wcfTabularBoxHeadlineActive;
+ }
+ }
+
+ .collapsibleButton {
+ cursor: pointer;
+ transition: transform .2s linear;
+ }
+ }
+}
+
+div.tabularBoxTitle > header {
+ display: none;
+}
+
+/* table */
+.table {
+ border-bottom: 1px solid $wcfTabularBoxHeadline;
+ border-spacing: 0;
+ width: 100%;
+
+ td,
+ th {
+ padding: 10px;
+ text-align: left;
+ vertical-align: middle;
+ // non-standard webkit value
+ word-break: break-word;
+
+ > label {
+ cursor: pointer;
+ display: block;
+ }
+ }
+
+ th {
+ border-bottom: 2px solid currentColor;
+ color: $wcfTabularBoxHeadline;
+ text-align: left;
+ white-space: nowrap;
+
+ @extend .wcfFontLarge;
+
+ > a {
+ color: $wcfTabularBoxHeadline;
+ display: block;
+ }
+
+ &.active > a,
+ > a:hover {
+ color: $wcfTabularBoxHeadlineActive;
+ }
+
+ &.ASC,
+ &.DESC {
+ > a::after {
+ display: inline-block;
+ font-family: FontAwesome;
+ margin-left: 5px;
+ }
+ }
+
+ &.ASC > a::after {
+ content: $fa-var-caret-up;
+ }
+
+ &.DESC > a::after {
+ content: $fa-var-caret-down;
+ }
+
+ /* alignment only */
+ &.columnMark,
+ &.columnStatus {
+ text-align: center;
+ }
+
+ &.columnDate,
+ &.columnDigits,
+ &.columnID {
+ text-align: right;
+ }
+ }
+
+ td {
+ &.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: .85rem;
+ text-align: right;
+ width: 1px;
+ white-space: nowrap;
+ word-wrap: normal;
+ }
+
+ &.columnURL, &.columnSmallText {
+ font-size: .85rem;
+ text-align: left;
+ }
+ }
+
+ tr {
+ &:hover > td {
+ background-color: rgb(242, 242, 242);
+ }
+
+ &:not(:last-child) > td {
+ border-bottom: 1px solid $wcfTabularBoxBorder;
+ }
+ }
+
+ .statusDisplay {
+ float: right;
+
+ .statusIcons {
+ float: right;
+ margin-left: 5px;
+
+ li {
+ display: inline-block;
+ }
+ }
+ }
+}
+
+// TODO below
+/*.table {
+ tr {
+ &.jsMarked {
+ color: @wcfSelectedColor;
+
+ > td {
+ background-color: @wcfSelectedBackgroundColor !important;
+ }
+
+ a:not(.badge) {
+ color: @wcfSelectedColor;
+ }
+ }
+ }
+}*/
--- /dev/null
+textarea {
+ background-color: $wcfInputBackground;
+ border: 1px solid $wcfInputBorder;
+ border-radius: 3px;
+ box-sizing: border-box;
+ color: $wcfInputText;
+ padding: 5px;
+ transition: background-color .2s linear, border-color .2s linear;
+ width: 100%;
+
+ @extend .wcfFontDefault;
+
+ &:hover {
+ background-color: $wcfInputBackgroundActive;
+ border-color: $wcfInputBorderActive;
+ color: $wcfInputTextActive;
+ }
+}
\ 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;
+ }
+ }
+
+ @include 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
-.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;
-}
--- /dev/null
+.userProfile .sidebar {
+ position: relative;
+
+ > section {
+ background-color: $wcfContentBackgroundAccent;
+ border-radius: 0;
+ color: $wcfContentTextAccent;
+
+ a,
+ dd,
+ h1 {
+ color: $wcfContentTextAccent;
+ }
+
+ &: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 $wcfContentBorderAccent;
+ 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 $wcfContentBorderAccent;
+ 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: $wcfContentTextAccent !important;
+ padding: 5px;
+
+ > .icon {
+ color: $wcfContentTextAccent;
+ }
+ }
+}
+
+.username {
+ font-size: 1.2rem;
+}
showOrder INT(10) NOT NULL DEFAULT 0,
permissions TEXT,
options TEXT,
+ icon VARCHAR(255) NOT NULL DEFAULT '',
UNIQUE KEY menuItem (menuItem, packageID)
);
projects / GitHub / WoltLab / WCF.git / commitdiff