-<p style="margin-top: 10px; font-size: .85em" id="benchmark">Execution time: {@$__wcf->getBenchmark()->getExecutionTime()}s ({#($__wcf->getBenchmark()->getExecutionTime()-$__wcf->getBenchmark()->getQueryExecutionTime())/$__wcf->getBenchmark()->getExecutionTime()*100}% PHP, {#$__wcf->getBenchmark()->getQueryExecutionTime()/$__wcf->getBenchmark()->getExecutionTime()*100}% SQL) | SQL queries: {#$__wcf->getBenchmark()->getQueryCount()} | Memory-Usage: {$__wcf->getBenchmark()->getMemoryUsage()}</p>
+<p class="marginTop" id="benchmark"><small>Execution time: {@$__wcf->getBenchmark()->getExecutionTime()}s ({#($__wcf->getBenchmark()->getExecutionTime()-$__wcf->getBenchmark()->getQueryExecutionTime())/$__wcf->getBenchmark()->getExecutionTime()*100}% PHP, {#$__wcf->getBenchmark()->getQueryExecutionTime()/$__wcf->getBenchmark()->getExecutionTime()*100}% SQL) | SQL queries: {#$__wcf->getBenchmark()->getQueryCount()} | Memory-Usage: {$__wcf->getBenchmark()->getMemoryUsage()}</small></p>
{if ENABLE_DEBUG_MODE}
<ul id="benchmarkDetails" style="display: none;">
{if !$__microdata|isset}{assign var=__microdata value=true}{/if}
{if $__wcf->getBreadcrumbs()|count}
-<nav class="wcf-breadcrumbs wcf-marginTop">
+<nav class="breadcrumbs marginTop">
<ul>
{foreach from=$__wcf->getBreadcrumbs() item=$breadcrumb}
<li title="{$breadcrumb->getLabel()}"{if $__microdata} itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"{/if}>
- {if $skipBreadcrumbs|empty}{include file='breadcrumbs' sandbox=false __microdata=false}{/if}
-
- </section>
- <!-- /CONTENT -->
- </div>
- </div>
- <!-- /MAIN -->
-
- <!-- FOOTER -->
- <footer id="pageFooter" class="wcf-pageFooter">
- <div>
- <!-- footer navigation -->
- <nav id="footerNavigation" class="wcf-footerNavigation">
- {include file='footerMenu'}
-
- <ul>
- <li id="toTopLink" class="toTopLink"><a href="{$__wcf->getAnchor('top')}" title="{lang}wcf.global.scrollUp{/lang}" class="jsTooltip"><img src="{icon size='S'}toTop{/icon}" alt="" /> <span class="invisible">{lang}wcf.global.scrollUp{/lang}</span></a></li>
- {if SHOW_CLOCK}
- <li class="separator"><p><img src="{icon size='S'}time{/icon}" alt="" /> <span>{@TIME_NOW|plainTime}</span></p></li>
- {/if}
- </ul>
- </nav>
- <!-- /footer navigation -->
+ {if $skipBreadcrumbs|empty}{include file='breadcrumbs' sandbox=false __microdata=false}{/if}
- {include file='footerMenu'}
- </div>
+ </section>
+ <!-- /CONTENT -->
+ </div>
+</div>
+<!-- /MAIN -->
+
+<!-- FOOTER -->
+<footer id="pageFooter" class="layoutFluid footer">
+ <!-- footer navigation -->
+ <nav id="footerNavigation" class="navigation navigationFooter clearfix">
+ {include file='footerMenu'}
+ <ul class="navigationIcons">
+ <li id="toTopLink" class="toTopLink"><a href="{$__wcf->getAnchor('top')}" title="{lang}wcf.global.scrollUp{/lang}" class="jsTooltip"><img src="{icon size='S'}toTop{/icon}" alt="" class="icon16" /> <span class="invisible">{lang}wcf.global.scrollUp{/lang}</span></a></li>
+ {if SHOW_CLOCK}
+ <li class="separator"><p><img src="{icon size='S'}time{/icon}" alt="" class="icon16" /> <span>{@TIME_NOW|plainTime}</span></p></li>
+ {/if}
+ </ul>
+ </nav>
+ <!-- /footer navigation -->
+
+ <div class="footerContent">
{if ENABLE_BENCHMARK}{include file='benchmark'}{/if}
-
+
{event name='copyright'}
- </footer>
- <!-- /FOOTER -->
- <a id="bottom"></a>
-
\ No newline at end of file
+ </div>
+</footer>
+<!-- /FOOTER -->
+<a id="bottom"></a>
<meta charset="utf-8" />
<meta name="description" content="{META_DESCRIPTION}" />
<meta name="keywords" content="{META_KEYWORDS}" />
-<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript">
//<![CDATA[
var SID_ARG_2ND = '{@SID_ARG_2ND_NOT_ENCODED}';
- var RELATIVE_WCF_DIR = '{@$__wcf->getPath('wcf')}';
+ var RELATIVE_WCF_DIR = '{@$__wcf->getPath()}';
var SECURITY_TOKEN = '{@SECURITY_TOKEN}';
//]]>
</script>
-<script type="text/javascript" src="{@$__wcf->getPath('wcf')}js/3rdParty/jquery.min.js"></script>
-<script type="text/javascript" src="{@$__wcf->getPath('wcf')}js/3rdParty/jquery-ui.min.js"></script>
-<script type="text/javascript" src="{@$__wcf->getPath('wcf')}js/3rdParty/jquery.tools.min.js"></script>
+<script type="text/javascript" src="{@$__wcf->getPath()}js/3rdParty/jquery.min.js"></script>
+<script type="text/javascript" src="{@$__wcf->getPath()}js/3rdParty/jquery-ui.min.js"></script>
+<script type="text/javascript" src="{@$__wcf->getPath()}js/3rdParty/jquery.tools.min.js"></script>
<script type="text/javascript" src="{@$__wcf->getPath()}js/3rdParty/jquery-ui.nestedSortable.js"></script>
-<script type="text/javascript" src="{@$__wcf->getPath('wcf')}js/WCF.js"></script>
+<script type="text/javascript" src="{@$__wcf->getPath()}js/WCF.js"></script>
<script type="text/javascript">
//<![CDATA[
WCF.User.init({@$__wcf->user->userID}, '{@$__wcf->user->username|encodeJS}');
{event name='javascriptInclude'}
<!-- Stylesheets -->
-<!-- LESS_FILES
-<link rel="stylesheet/less" type="text/css" media="screen" href="{link controller='LessStylesheets'}{/link}" />
-LESS_FILES -->
+<link rel="stylesheet/less" type="text/css" href="{@$__wcf->getPath()}style/bootstrap.less" />
+<script type="text/javascript">
+ //<![CDATA[
+ var less = { env: 'development' };
+ //]]>
+</script>
<script type="text/javascript" src="{@$__wcf->getPath()}js/3rdParty/less.min.js"></script>
-
-<style type="text/css">
- @import url("{@$__wcf->getPath('wcf')}acp/style/wcf.css") screen;
- {*
- @import url("{@$__wcf->getPath('wcf')}acp/style/style-{@$__wcf->getLanguage()->getPageDirection()}.css") screen;
-
- @import url("{@$__wcf->getPath('wcf')}acp/style/print.css") print;
- *}
-
- {event name='stylesheetImport'}
-</style>
+<script type="text/javascript">
+ //<![CDATA[
+ less.watch();
+ //]]>
+</script>
<noscript>
<style type="text/css">
});
new WCF.Date.Time();
- new WCF.Effect.SmoothScroll();
+ //new WCF.Effect.SmoothScroll();
new WCF.Effect.BalloonTooltip();
- $('<span class="pointer"><span></span></span>').appendTo('.wcf-innerError');
+ $('<span class="pointer"><span></span></span>').appendTo('.innerError');
$('#sidebarContent').wcfSidebar();
+ WCF.Dropdown.init();
+
{event name='javascriptInit'}
});
//]]>
<a id="top"></a>
<!-- HEADER -->
-<header id="pageHeader" class="wcf-pageHeader">
+<header id="pageHeader" class="layoutFluid">
<div>
{hascontent}
<!-- top menu -->
- <nav id="topMenu" class="wcf-topMenu">
- <div>
- <ul>
+ <nav id="topMenu" class="userPanel">
+ <div class="layoutFluid clearfix">
+ <ul class="userPanelItems">
{content}{event name='topMenu'}{/content}
</ul>
+
+ <!-- search area -->
+ {event name='searchArea'}
+ <!-- /search area -->
</div>
</nav>
<!-- /top menu -->
{/hascontent}
<!-- logo -->
- <div id="logo" class="wcf-logo">
+ <div id="logo" class="logo">
<!-- clickable area -->
<a href="{link controller='Index'}{/link}">
- {event name='headerLogo'}
+ <img src="{@$__wcf->getPath('wbb')}images/wbbLogo2.svg" alt="" style="height: 80px; width: 300px;" />
+ {*event name='headerLogo'*}
</a>
<!-- /clickable area -->
-
- <!-- search area -->
- {event name='searchArea'}
- <!-- /search area -->
</div>
<!-- /logo -->
<!-- /main menu -->
<!-- header navigation -->
- <nav class="wcf-headerNavigation">
+ <nav class="navigation navigationHeader clearfix">
<!-- sub menu -->
{include file='mainMenuSubMenu'}
- <ul>
- <li id="toBottomLink" class="wcf-toBottomLink"><a href="{$__wcf->getAnchor('bottom')}" title="{lang}wcf.global.scrollDown{/lang}" class="jsTooltip"><img src="{icon size='S'}toBottom{/icon}" alt="" /> <span class="invisible">{lang}wcf.global.scrollDown{/lang}</span></a></li>
+ <ul class="navigationIcons">
+ <li id="toBottomLink"><a href="{$__wcf->getAnchor('bottom')}" title="{lang}wcf.global.scrollDown{/lang}" class="jsTooltip"><img src="{icon size='S'}toBottom{/icon}" alt="" class="icon16" /> <span class="invisible">{lang}wcf.global.scrollDown{/lang}</span></a></li>
{if $headerNavigation|isset}{@$headerNavigation}{/if}
{event name='headerNavigation'}
</ul>
<!-- /HEADER -->
<!-- MAIN -->
-<div id="main" class="wcf-main{if $sidebarOrientation|isset} {@$sidebarOrientation}{/if}">
+<div id="main" class="layoutFluid{if $sidebarOrientation|isset} sidebarOrientation{@$sidebarOrientation|ucfirst} clearfix{/if}">
<div>
{if $sidebar|isset}
- <aside class="wcf-sidebar">
+ <aside class="sidebar">
{@$sidebar}
</aside>
{/if}
<!-- CONTENT -->
- <section id="content" class="wcf-content wcf-contentDecor">
+ <section id="content" class="content">
{if $skipBreadcrumbs|empty}{include file='breadcrumbs' sandbox=false}{/if}
\ No newline at end of file
{if $__wcf->getPageMenu()->getMenuItems('header')|count > 0}
- <nav id="mainMenu" class="wcf-mainMenu">
+ <nav id="mainMenu" class="mainMenu">
<ul>
{foreach from=$__wcf->getPageMenu()->getMenuItems('header') item=menuItem}
- <li{if $__wcf->getPageMenu()->getActiveMenuItem() == $menuItem->menuItem} class="activeMenuItem"{/if}><a href="{$menuItem->getProcessor()->getLink()}">{lang}{$menuItem->menuItem}{/lang}{if $menuItem->getProcessor()->getNotifications()} <span class="wcf-badge">{#$menuItem->getProcessor()->getNotifications()}</span>{/if}</a></li>
+ <li{if $__wcf->getPageMenu()->getActiveMenuItem() == $menuItem->menuItem} class="active"{/if}><a href="{$menuItem->getProcessor()->getLink()}">{lang}{$menuItem->menuItem}{/lang}{if $menuItem->getProcessor()->getNotifications()} <span class="badge">{#$menuItem->getProcessor()->getNotifications()}</span>{/if}</a></li>
{/foreach}
</ul>
</nav>
{foreach from=$__wcf->getPageMenu()->getMenuItems('header') item=menuItem}
{if $__wcf->getPageMenu()->getMenuItems($menuItem->menuItem)|count > 0 && $__wcf->getPageMenu()->getActiveMenuItem() == $menuItem->menuItem}
- <div class="wcf-menu">
- <ul>
- {foreach from=$__wcf->getPageMenu()->getMenuItems($menuItem->menuItem) item=subMenuItem}
- <li><a href="{$subMenuItem->getProcessor()->getLink()}" title="{lang}{$subMenuItem->menuItem}{/lang}"><span>{lang}{$subMenuItem->menuItem}{/lang}</span></a>{if $subMenuItem->getProcessor()->getNotifications()} <span class="wcf-badge">{#$subMenuItem->getProcessor()->getNotifications()}</span>{/if}</li>
- {/foreach}
- </ul>
- </div>
+ <ul>
+ {foreach from=$__wcf->getPageMenu()->getMenuItems($menuItem->menuItem) item=subMenuItem}
+ <li><a href="{$subMenuItem->getProcessor()->getLink()}"><span>{lang}{$subMenuItem->menuItem}{/lang}</span></a>{if $subMenuItem->getProcessor()->getNotifications()} <span class="wcf-badge">{#$subMenuItem->getProcessor()->getNotifications()}</span>{/if}</li>
+ {/foreach}
+ </ul>
{/if}
{/foreach}
\ No newline at end of file
* Resets all elements and binds event listeners.
*/
_prepareElements: function(activeMenuItems) {
- this._headerNavigation.find('li').removeClass('activeMenuItem');
+ this._headerNavigation.find('li').removeClass('active');
this._sidebarNavigation.find('div h1').each($.proxy(function(index, menuHeader) {
$(menuHeader).click($.proxy(this._toggleItem, this));
_toggleItem: function(event) {
var $menuItem = $(event.target);
- $menuItem.next().stop(true, true).toggle('blind', { }, 200).end().toggleClass('activeMenuItem');
+ $menuItem.next().stop(true, true).toggle('blind', { }, 200).end().toggleClass('active');
},
/**
_toggleSidebar: function(event) {
var $target = $(event.target).parent();
- if ($target.hasClass('activeMenuItem')) {
+ if ($target.hasClass('active')) {
return;
}
*/
_renderSidebar: function(menuItem, activeMenuItems) {
// reset visible and active items
- this._headerNavigation.find('li').removeClass('activeMenuItem');
- this._sidebarNavigation.find('div.wcf-menuContainer').hide();
+ this._headerNavigation.find('li').removeClass('active');
+ this._sidebarNavigation.find('div.menuGroup').hide();
if (activeMenuItems.length === 0) {
// show active menu
- this._headerNavigation.find('li[data-menu-item="' + menuItem + '"]').addClass('activeMenuItem');
+ this._headerNavigation.find('li[data-menu-item="' + menuItem + '"]').addClass('active');
this._sidebarNavigation.find('div[data-parent-menu-item="' + menuItem + '"]').show();
}
else {
// open menu by active menu items, first element is always a head navigation item
menuItem = activeMenuItems.shift();
- this._headerNavigation.find('li[data-menu-item="' + menuItem + '"]').addClass('activeMenuItem');
+ this._headerNavigation.find('li[data-menu-item="' + menuItem + '"]').addClass('active');
this._sidebarNavigation.find('div[data-parent-menu-item="' + menuItem + '"]').show();
for (var $i = 0, $size = activeMenuItems.length; $i < $size; $i++) {
var $menuItem = $('#' + $.wcfEscapeID($item));
if ($menuItem.getTagName() === 'ul') {
- $menuItem.parent('div').show().prev().addClass('activeMenuItem');
+ $menuItem.parent('div').show().prev().addClass('active');
}
else {
- $menuItem.addClass('activeMenuItem');
+ $menuItem.addClass('active');
}
}
}
+++ /dev/null
-/**
- * #################################################################
- * ### CAUTION: This stylesheet applies to WCFSetup only, please ###
- * ### see wcf.less for the general stylesheet! ###
- * #################################################################
- */
-
-/**
- * WCF Testing Styles
- *
- * @author Harald Szekely
- * @copyright 2011 WoltLab GmbH
- */
-
-/* ############## Reset ############## */
-
-/**
- * Parts taken from
- * http://meyerweb.com/eric/tools/css/reset/
- * v2.0 | 20110126
- * License: none (public domain)
- * modifyed to meet the needs of WoltLab
- */
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
- margin: 0;
- padding: 0;
- border: 0;
- font-size: 100%;
-}
-
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
- display: block;
-}
-
-ol, ul {
- list-style: none;
-}
-
-blockquote, q {
- quotes: none;
-}
-
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
- content: '';
- content: none;
-}
-
-
-
-/* ############## Globals ############## */
-
-* {
- text-overflow: ellipsis;
-}
-
-img {
- vertical-align: middle !important;
-}
-
-a {
- color: #369;
- text-decoration: none;
-
- -webkit-transition: color .1s linear;
- -moz-transition: color .1s linear;
- -ms-transition: color .1s linear;
- -o-transition: color .1s linear;
- transition: color .1s linear;
-}
-
-a:hover {
- text-decoration: underline;
- color: #036;
-}
-
-hr {
- display: none;
-}
-
-::selection {
- text-shadow: 0 1px 0 rgba(255, 255, 255, .5) !important;
- color: #300;
- background-color: rgba(255, 170, 34, .7);
-}
-
-a,
-img[src*='delete'],
-img[src*='uninstall'],
-img[src*='install'],
-img[src*='update'],
-img[src*='run'],
-img[src*='info'],
-img[src*='disable'],
-img[src*='enable'] {
- cursor: pointer;
-}
-
-
-
-/* ############## ToDo: Global Structural Classes ############## */
-
-/* -- -- -- Misc -- -- -- */
-
-.hot {
- color: #b00;
-}
-
-.invisible {
- position: absolute;
- left: -9000px;
- top: -9000px;
-}
-
-/* Uniform background image */
-
-.wcf-headerImage {
- background-image: url('../../../images/header.png');
-}
-
-/* -- -- -- URLs -- -- -- */
-
-.wcf-externalURL {
- background-image: url('../../icon/externalURL1.svg');
- background-position: right center;
- background-repeat: no-repeat;
- padding-right: 17px;
-}
-
-.wcf-eMailLink,
-a[href^="mailto:"] {
- background-image: url('../../icon/email1.svg');
- background-position: left center;
- background-repeat: no-repeat;
- padding-left: 17px;
-}
-
-/* -- -- -- Margins -- -- -- */
-
-.wcf-marginTop {
- margin-top: 15px;
-}
-
-.wcf-marginBottom {
- margin-bottom: 15px;
-}
-
-/* -- -- -- Paddings -- -- -- */
-
-/* ToDo: Columns */
-
-.wcf-columns-2 {
- width: 45%;
-}
-
-.wcf-columns-3 {
- width: 30%;
-}
-
-
-/* -- -- -- ToDo: Floated Elements -- -- -- */
-
-/* possibly obsolete */
-
-.floatContainer:after {
- content: "";
- height: 0;
- display: block;
- clear: both;
-}
-
-.floated {
- margin-right: 5px;
- margin-left: 5px;
- float: left;
-}
-
-
-
-/* -- -- -- Shadows -- -- -- */
-
-/* Shadows for boxes - do not use on small boxes! */
-
-.wcf-shadow1 {
- -webkit-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);
- -moz-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);
- -ms-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);
- /* ToDo: Opera doesn't like that so much! Bug-report sent to Opera
- -o-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);
- box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);*/
-}
-
-/* Use that shadow for tab menus - do not use on small boxes! */
-
-.wcf-shadow2 {
- -webkit-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1), 0 -8px 10px -10px rgba(0, 0, 0, .1);
- -moz-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1), 0 -8px 10px -10px rgba(0, 0, 0, .1);
- -ms-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1), 0 -8px 10px -10px rgba(0, 0, 0, .1);
- /* ToDo: Opera doesn't like that so much! Bug-report sent to Opera
- -o-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1), 0 -8px 10px -10px rgba(0, 0, 0, .1);
- box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1), 0 -8px 10px -10px rgba(0, 0, 0, .1);*/
-}
-
-
-
-/* ############## Containers ############## */
-
-/* -- -- -- Globals -- -- -- */
-
-/**
- * This is a generic container for surrounding blocks of
- * text with an optional leading icon. The icon-size is
- * free. The icon-Container is optional.
- * Note:
- * This box does not support RTL in WebKit-browsers!
- * Thus the box-style may change in the future.
- */
-
-.wcf-container {
- overflow: hidden;
- box-sizing: border-box;
-}
-
-.wcf-containerIcon {
- float: left;
- margin-right: 5px;
-}
-
-.wcf-containerContent {
- padding: 1px;
- overflow: hidden;
-}
-
-
-
-/* ############## Badges ############## */
-
-/* Globals */
-
-.wcf-badge {
- font-size: 85%;
- font-weight: bold;
- text-shadow: none;
- text-decoration: none;
- border-radius: 13px;
- background-color: rgba(255, 255, 255, 1);
- margin-right: -3px;
- margin-left: 3px;
- padding: 2px 5px;
- display: inline-block;
- position: relative;
- top: -1px;
-}
-
-/* Badge Types */
-
-.wcf-badgeBorder {
- border: 1px solid #ccc;
-}
-
-.wcf-badgeBlue {
- color: #68b;
- border: 1px solid #9be;
- background-color: #def;
-}
-
-.wcf-badgeGreen {
- color: #090;
- border: 1px solid #0c0;
- background-color: #efe;
-}
-
-.wcf-badgeYellow {
- color: #990;
- border: 1px solid #cc0;
- background-color: #ffd;
-}
-
-.wcf-badgeRed {
- color: #c00;
- border: 1px solid #f99;
- background-color: #fee;
-}
-
-/* Buttons */
-
-.wcf-badgeButton {
- cursor: pointer;
- border-radius: 30px;
- margin-right: 0;
- margin-left: 0;
- padding: 3px 10px 5px;
- display: inline-block;
-}
-
-li.wcf-badgeButton,
-li > .wcf-badgeButton {
- margin-top: 7px;
- margin-right: 3px;
- margin-left: 3px;
- float: left;
-}
-
-.wcf-badgeButton,
-.wcf-badgeButton a {
- text-decoration: none !important;
-}
-
-
-
-/* ############## Labels ############## */
-
-/* -- -- -- Label List -- -- -- */
-
-.wcf-labelList {
- margin: 0;
- padding: 5px 0 0;
- display: inline-block;
-}
-
-/* -- -- -- Label -- -- -- */
-
-/* Globals */
-
-.wcf-label {
- font-size: 85%;
- font-weight: bold;
- color: #eee;
- text-shadow: none;
- text-decoration: none;
- border-radius: 13px;
- background-color: rgba(102, 102, 102, 1);
- margin-right: 3px;
- padding: 3px 8px 4px;
- display: inline-block;
- position: relative;
- top: -1px;
- cursor: pointer;
-}
-
-.wcf-label:hover {
- color: rgba(255, 255, 255, 1);
- background-color: rgba(51, 51, 51, 1);
-}
-
-.wcf-label a {
- color: #eee;
- text-decoration: none;
-}
-
-.wcf-label a:hover {
- color: rgba(255, 255, 255, 1);
-}
-
-/* Default Colors */
-
-.wcf-label.black {
- background-color: #333;
-}
-
-.wcf-label.black:hover {
- background-color: #000;
-}
-
-.wcf-label.brown {
- background-color: #c63;
-}
-
-.wcf-label.brown:hover {
- background-color: #930;
-}
-
-.wcf-label.red {
- background-color: #c00;
-}
-
-.wcf-label.red:hover {
- background-color: #900;
-}
-
-.wcf-label.orange {
- background-color: #f90;
-}
-
-.wcf-label.orange:hover {
- background-color: #f60;
-}
-
-.wcf-label.yellow {
- background-color: #ff0;
-}
-
-.wcf-label.yellow:hover {
- background-color: #cc0;
-}
-
-.wcf-label.green {
- background-color: #0c0;
-}
-
-.wcf-label.green:hover {
- background-color: #090;
-}
-
-.wcf-label.blue {
- background-color: #09f;
-}
-
-.wcf-label.blue:hover {
- background-color: #06c;
-}
-
-.wcf-label.purple {
- background-color: #c0f;
-}
-
-.wcf-label.purple:hover {
- background-color: #90c;
-}
-
-.wcf-label.pink {
- background-color: #f0c;
-}
-
-.wcf-label.pink:hover {
- background-color: #c09;
-}
-
-/* Special */
-
-table .wcf-label {
- padding: 1px 6px 2px;
-}
-
-
-
-/* ############## ToDo: Dropdown ############## */
-
-/* Dropdown Caption */
-
-.wcf-dropdownCaption,
-.wcf-dropdownCaption a {
- text-decoration: none;
- cursor: pointer;
- display: inline-block;
-}
-
-.wcf-dropdownCaption:hover,
-.wcf-dropdownCaption a:hover {
- text-decoration: none;
-}
-
-/* Dropdown */
-
-.wcf-dropdown {
- color: rgba(255, 255, 255, 1);
- border-width: 1px;
- border-style: solid;
- border-color: rgba(255, 255, 255, .7);
- border-radius: 5px;
- background-color: rgba(0, 0, 0, .7);
- margin-top: 25px;
- display: none;
- position: absolute;
- top: 0;
- left: 0;
- z-index: 400;
- overflow: hidden;
- white-space: nowrap;
-
- -webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
- -moz-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
- -ms-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
- -o-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
- box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
-
- -webkit-transition: color background .1s ease;
- -moz-transition: color background .1s ease;
- -ms-transition: color background .1s ease;
- -o-transition: color background .1s ease;
- transition: color background .1s ease;
-}
-
-.wcf-dropdown.open {
- display: block;
-}
-
-/* Dropdown Items */
-
-.wcf-dropdown > li,
-.wcf-dropdown > div {
- text-shadow: none;
- color: #ccc;
- cursor: pointer;
-
- -webkit-transition: color background .2s linear;
- -moz-transition: color background .2s linear;
- -ms-transition: color background .2s linear;
- -o-transition: color background .2s linear;
- transition: color background .2s linear;
-}
-
-.wcf-dropdown > div {
- padding: 5px 7px;
-}
-
-.wcf-dropdown > :first-child {
- border-top-left-radius: 5px;
- border-top-right-radius: 5px;
-}
-
-.wcf-dropdown > :last-child {
- border-bottom-left-radius: 5px;
- border-bottom-right-radius: 5px;
-}
-
-.wcf-dropdown > :hover:not(ul):not(.pointer),
-.wcf-dropdown > .active {
- color: rgba(255, 255, 255, 1);
- cursor: pointer;
- background-color: rgba(0, 0, 0, .5);
-}
-
-.wcf-dropdown > li.divider:not(:first-child) {
- border-top: 1px solid rgba(255, 255, 255, .7);
-}
-
-.wcf-dropdown > li {
- text-decoration: none;
- padding: 5px 7px;
- display: block;
-}
-
-.wcf-dropdown > li a {
- text-decoration: none;
- color: #ccc;
- padding: -5px -7px; /* ToDo: what's that? ;-) */
- display: block;
-}
-
-.wcf-dropdown > li a:hover {
- color: rgba(255, 255, 255, 1);
- background-color: rgba(0, 0, 0, .5);
-}
-
-
-
-/* ############## Body ############## */
-
-/* Globals */
-
-body {
- font-family: 'Trebuchet MS', Arial, sans-serif;
- font-size: 80%;
- color: rgba(102, 102, 102, 1);
- line-height: 1;
- background-color: rgba(41, 55, 74, 1);
-}
-
-
-
-/* ############## Page Header & Page Footer ############## */
-
-/* Globals */
-
-header.wcf-pageHeader {
- /* Disabled, because the WoltLab header-image is not LGPL
- Activate it if you want to test your own header image */
- /* background-image: url('../../../images/header.png'); */
- background-position: center top;
- background-repeat: repeat-x;
- background-attachment: fixed;
- width: 100%;
- overflow: hidden;
- position: relative;
- z-index: 100;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- header.wcf-pageHeader,
- header.wcf-pageFooter {
- min-width: 800px;
- }
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- header.wcf-pageHeader,
- header.wcf-pageFooter {
- /* none */
- }
-}
-
-.wcf-pageHeader:after,
-.wcf-pageFooter:after {
- content: '';
- display: block;
- clear: both;
-}
-
-.wcf-pageFooter {
- text-align: center;
- padding-bottom: 23px;
- position: relative;
- z-index: 80;
-}
-
-
-
-/* -- -- -- Copyright -- -- -- */
-
-.wcf-pageFooter .wcf-copyright {
- padding-top: 20px;
- display: inline-block;
-}
-
-.wcf-pageFooter .wcf-copyright a {
- text-shadow: 0 -1px 0 #000;
-}
-
-.wcf-pageFooter .wcf-copyright a:hover {
- text-decoration: none;
- color: #69c;
-}
-
-
-
-/* -- -- -- Top Menu -- -- -- */
-
-/* Globals */
-
-nav.wcf-topMenu {
- border-bottom: 1px solid rgba(0, 0, 0, .1);
- background-color: rgba(0, 0, 0, .4);
- position: fixed;
- top: 0;
- right: 0;
- left: 0;
- z-index: 300;
- box-sizing: border-box;
-
- -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
- -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
- -ms-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
- -o-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
- box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
-
- -webkit-transition: background .2s linear;
- -moz-transition: background .2s linear;
- -ms-transition: background .2s linear;
- -o-transition: background .2s linear;
- transition: background .2s linear;
-
- -webkit-animation-name: showTopMenu;
- -webkit-animation-duration: .3s;
- -webkit-animation-timing-function: linear;
-
- -moz-animation-name: showTopMenu;
- -moz-animation-duration: .3s;
- -moz-animation-timing-function: linear;
-
- -ms-animation-name: showTopMenu;
- -ms-animation-duration: .3s;
- -ms-animation-timing-function: linear;
- /* disabled to ease rendering work for Opera
- -o-animation-name: showTopMenu;
- -o-animation-duration: .3s;
- -o-animation-timing-function: linear;
- */
- animation-name: showTopMenu;
- animation-duration: .3s;
- animation-timing-function: linear;
-}
-
-/* Show Top Menu */
-
-@-webkit-keyframes showTopMenu {
- 0% {
- opacity: 0;
- top: -50px;
- }
- 60% {
- top: 0;
- }
- 80% {
- top: -15px;
- }
- 100% {
- opacity: 1;
- top: auto;
- }
-}
-@-moz-keyframes showTopMenu {
- 0% {
- opacity: 0;
- top: -50px;
- }
- 60% {
- top: 0;
- }
- 80% {
- top: -15px;
- }
- 100% {
- opacity: 1;
- top: auto;
- }
-}
-@-ms-keyframes showTopMenu {
- 0% {
- opacity: 0;
- top: -50px;
- }
- 60% {
- top: 0;
- }
- 80% {
- top: -15px;
- }
- 100% {
- opacity: 1;
- top: auto;
- }
-}
-/* disabled to ease rendering work for Opera
-@-o-keyframes showTopMenu {
- 0% {
- opacity: 0;
- top: -50px;
- }
- 60% {
- top: 0;
- }
- 80% {
- top: -15px;
- }
- 100% {
- opacity: 1;
- top: auto;
- }
-}
-*/
-@keyframes showTopMenu {
- 0% {
- opacity: 0;
- top: -50px;
- }
- 60% {
- top: 0;
- }
- 80% {
- top: -15px;
- }
- 100% {
- opacity: 1;
- top: auto;
- }
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- nav.wcf-topMenu {
- min-width: 800px;
- }
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- nav.wcf-topMenu {
- /* none */
- }
-}
-
-.wcf-topMenu:hover {
- background-color: rgba(0, 0, 0, .7);
-}
-
-.wcf-topMenu > div {
- padding: 0 23px 0;
-}
-
-.wcf-topMenu ul li {
- white-space: nowrap;
-}
-
-/* Menu Items (1st level) */
-
-.wcf-topMenu > div > ul > li {
- border-width: 0 1px;
- border-style: solid;
- border-color: transparent;
- float: left;
- position: relative;
-}
-
-.wcf-topMenu > div > ul > li,
-.wcf-topMenu > div > ul > li a {
- text-shadow: 0 -1px 0 rgba(0, 0, 0, .7);
- color: #69c;
-}
-
-.wcf-topMenu > div > ul > li:hover,
-.wcf-topMenu > div > ul > li:hover a {
- border-color: rgba(255, 255, 255, .5);
-}
-
-/* Removes the doubled padding if there's a link in the top menu */
-.wcf-topMenu > div > ul > li > span > a {
- margin: -6px 0 -6px -6px;
-}
-
-
-
-/* ToDo: Top-Menu Dropdown Caption */
-
-.wcf-topMenu > div > ul > li > .wcf-dropdownCaption {
- background-image: url('../../icon/dropdown2.svg');
- background-position: 97% center;
- background-repeat: no-repeat;
- padding-right: 15px !important;
-}
-
-.wcf-topMenu > div > ul > li > .wcf-dropdownCaption,
-.wcf-topMenu > div > ul > li > .wcf-dropdownCaption > a {
- padding: 6px;
-}
-
-.wcf-topMenu > div > ul > li:hover > .wcf-dropdownCaption,
-.wcf-topMenu > div > ul > li:hover > .wcf-dropdownCaption a {
- text-shadow: 0 -1px 0 rgba(0, 0, 0, .7);
- color: rgba(255, 255, 255, 1);
- background-color: rgba(0, 0, 0, .7);
-}
-
-/* Badges */
-
-.wcf-topMenu > div > ul > li > .wcf-dropdownCaption > .wcf-badge {
- margin: -3px 3px;
- padding: 1px 3px;
-}
-
-.wcf-topMenu > div > ul > li > .wcf-dropdownCaption > .wcf-badge,
-.wcf-topMenu > div > ul > li:hover > .wcf-dropdownCaption > .wcf-badge {
- font-size: 75%;
- color: #369 !important;
-}
-
-/* Images in front of the caption */
-
-.wcf-topMenu > div > ul > li > .wcf-dropdownCaption > img {
- margin: -7px 0 -5px 0;
-}
-
-
-
-/* ToDo: Top-Menu Dropdown Tweaks */
-
-/* Auto-Opening Dropdowns */
-.wcf-topMenu ul li .wcf-dropdownCaption ~ .wcf-dropdown {
- border-color: rgba(255, 255, 255, .5);
- background-color: rgba(0, 0, 0, .7);
- left: -1px;
- min-width: 100%;
-}
-
-.wcf-topMenu ul li:hover .wcf-dropdownCaption ~ .wcf-dropdown {
- display: block;
-}
-
-.wcf-topMenu ul li .wcf-dropdown {
- border-width: 0 1px 1px 1px !important;
- border-radius: 0 0 5px 5px;
-}
-
-.wcf-topMenu ul li .wcf-dropdown > :first-child {
- border-top-width: 0;
-}
-
-
-
-/* -- -- -- Logo -- -- -- */
-
-.wcf-logo {
- margin: 0 23px 0;
- position: relative;
- box-sizing: border-box;
-}
-
-.wcf-logo > a,
-.wcf-logo > div {
- text-align: right;
- display: block;
- height: 120px;
-}
-
-.wcf-logo > a:hover {
- text-decoration: none !important;
- color: #d8e7f5;
-}
-
-.wcf-logo h1 {
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
- color: #d8e7f5;
- position: relative;
- top: 70px;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .logo h1,
- .wcf-logo h1 {
- font-size: 150%;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .wcf-logo h1 {
- font-size: 175%;
- }
-
-}
-
-.wcf-logo > div > img,
-.wcf-logo > a > img {
- position: absolute;
- bottom: 20px;
- left: 0;
-}
-
-
-
-/* -- -- -- Search -- -- -- */
-
-.wcf-search {
- border: 1px solid rgba(0, 0, 0, .1);
- border-radius: 5px;
- background-color: rgba(0, 0, 0, .2);
- padding: 5px;
- position: absolute;
- top: 50px;
- right: 0;
- min-width: 240px;
-
- -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
- -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
- -ms-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
- -o-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
- box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
-
- -webkit-transition: background .2s linear;
- -moz-transition: background .2s linear;
- -ms-transition: background .2s linear;
- -o-transition: background .2s linear;
- transition: background .2s linear;
-
-}
-
-.wcf-search:hover {
- background-color: rgba(0, 0, 0, .5);
-}
-
-.wcf-search input[type='search'] {
- width: 175px;
- margin: 2px 4px;
-}
-
-.wcf-search > .wcf-searchButton {
- width: 32px;
- height: 32px;
- margin-left: 5px;
-}
-
-
-
-/* -- -- -- Main Menu -- -- -- */
-
-.wcf-mainMenu {
- /* General toggle switch for main menu orientation (options: left|center|right) */
- text-align: left;
- margin: 0 30px;
- display: block;
- position: relative;
- box-sizing: border-box;
-}
-
-.wcf-mainMenu:after {
- content: '';
- display: block;
- clear: both;
-}
-
-.wcf-mainMenu > ul {
- border-top-left-radius: 5px;
- border-top-right-radius: 5px;
- background-color: rgba(0, 0, 0, .4);
- display: inline-block;
- position: relative;
-}
-
-.wcf-mainMenu > ul > li {
- display: inline-block;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .wcf-mainMenu > ul > li {
- font-size: 120%;
- }
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .wcf-mainMenu > ul > li {
- font-size: 150%;
- }
-}
-
-.wcf-mainMenu > ul > li.activeMenuItem {
- margin: -5px 0 0;
-}
-
-.wcf-mainMenu > ul > li.activeMenuItem:first-child {
- margin-right: -5px;
-}
-
-.wcf-mainMenu > ul > li.activeMenuItem:last-child {
- margin-left: -5px;
-}
-
-.wcf-mainMenu > ul > li.activeMenuItem:only-child {
- margin: -5px 0 0;
-}
-
-.wcf-mainMenu > ul > li > a {
- font-weight: normal;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
- color: #69c;
- cursor: pointer;
- white-space: nowrap;
- display: inline-block;
- position: relative;
-
- -webkit-transition-property: border, background-color, background-image, color;
- -webkit-transition-duration: .3s;
- -webkit-transition-timing-function: ease;
-
- -moz-transition-property: border, background-color, background-image, color;
- -moz-transition-duration: .3s;
- -moz-transition-timing-function: ease;
-
- -ms-transition-property: border, background-color, background-image, color;
- -ms-transition-duration: .3s;
- -ms-transition-timing-function: ease;
-
- -o-transition-property: border, background-color, background-image, color;
- -o-transition-duration: .3s;
- -o-transition-timing-function: ease;
-
- transition-property: border, background-color, background-image, color;
- transition-duration: .3s;
- transition-timing-function: ease;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .wcf-mainMenu > ul > li > a {
- padding: 10px 20px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .wcf-mainMenu > ul > li > a {
- padding: 10px 10px;
- }
-
-}
-
-.wcf-mainMenu > ul > li:not(.activeMenuItem) {
- margin-top: -3px;
-}
-
-.wcf-mainMenu > ul > li:not(.activeMenuItem):hover > a {
- color: rgba(255, 255, 255, 1);
-}
-
-.wcf-mainMenu > ul > li.activeMenuItem > a {
- font-size: 110%;
- font-weight: bold;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
- color: #369;
- border-top-left-radius: 5px;
- border-top-right-radius: 5px;
-
- background-color: #e7f2fd;
- background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), #e7f2fd);
- background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), #e7f2fd);
- background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), #e7f2fd);
- background-image: -o-linear-gradient(rgba(255, 255, 255, 1), #e7f2fd);
- background-image: linear-gradient(rgba(255, 255, 255, 1), #e7f2fd);
-
- z-index: 10;
-}
-
-/* Rounded Bottom Corners: Active Tab */
-
-.wcf-mainMenu > ul > li.activeMenuItem > a:before {
- border-bottom-right-radius: 6px;
- border-width: 0 1px 1px 0;
- position: absolute;
- bottom: 0;
- left: -7px;
- width: 7px;
- height: 7px;
- content: "";
-
- -webkit-box-shadow: 2px 2px 0 #e7f2fd;
- -moz-box-shadow: 2px 2px 0 #e7f2fd;
- -ms-box-shadow: 2px 2px 0 #e7f2fd;
- -o-box-shadow: 2px 2px 0 #e7f2fd;
- box-shadow: 2px 2px 0 #e7f2fd;
-}
-
-.wcf-mainMenu > ul > li.activeMenuItem > a:after {
- border-bottom-left-radius: 6px;
- border-width: 0 0 1px 1px;
- position: absolute;
- right: -7px;
- bottom: 0;
- width: 7px;
- height: 7px;
- content: "";
-
- -webkit-box-shadow: -2px 2px 0 #e7f2fd;
- -moz-box-shadow: -2px 2px 0 #e7f2fd;
- -ms-box-shadow: -2px 2px 0 #e7f2fd;
- -o-box-shadow: -2px 2px 0 #e7f2fd;
- box-shadow: -2px 2px 0 #e7f2fd;
-}
-
-/* ToDo: Special */
-
-.wcf-mainMenu > ul > li.activeMenuItem .wcf-badge {
- font-size: 65% !important;
- color: rgba(255, 255, 255, 1);
- background-color: #369;
-
- -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 1);
- -moz-box-shadow: 0 0 1px rgba(255, 255, 255, 1);
- -ms-box-shadow: 0 0 1px rgba(255, 255, 255, 1);
- -o-box-shadow: 0 0 1px rgba(255, 255, 255, 1);
- box-shadow: 0 0 1px rgba(255, 255, 255, 1);
-}
-
-
-
-/* -- -- -- Header/Footer Navigation -- -- -- */
-
-/* Menu Bars */
-
-.wcf-headerNavigation,
-.wcf-footerNavigation {
- background-color: #e7f2fd;
- border-style: solid;
- border-color: #bcd;
- margin: 0 23px;
- display: block;
- min-height: 7px;
- position: relative;
- box-sizing: border-box;
-}
-
-.wcf-headerNavigation {
- border-width: 0 0 1px 0;
- border-top-left-radius: 3px;
- border-top-right-radius: 3px;
-}
-
-.wcf-footerNavigation {
- border-width: 1px 0 0 0;
- border-bottom-left-radius: 3px;
- border-bottom-right-radius: 3px;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .wcf-headerNavigation,
- .wcf-footerNavigation {
- min-width: 800px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .wcf-headerNavigation,
- .wcf-footerNavigation {
- /* none */
- }
-
-}
-
-.wcf-headerNavigation:after,
-.wcf-footerNavigation:after {
- content: '';
- display: block;
- clear: both;
-}
-
-/* Icon Menus */
-
-.wcf-headerNavigation > ul,
-.wcf-footerNavigation > ul {
- padding: 0 7px;
- float: right;
-}
-
-.wcf-headerNavigation > ul > li,
-.wcf-footerNavigation > ul > li {
- padding: 0 3px;
- float: right;
-}
-
-.wcf-headerNavigation > ul > li.separator,
-.wcf-footerNavigation > ul > li.separator {
- border-right: 1px dotted #bcd;
-}
-
-.wcf-headerNavigation > ul > li a,
-.wcf-headerNavigation > ul > li p,
-.wcf-footerNavigation > ul > li a,
-.wcf-footerNavigation > ul > li p {
- text-decoration: none;
- color: #369;
- padding: 3px;
- display: inline-block;
-}
-
-.wcf-headerNavigation > ul > li a:hover,
-.wcf-footerNavigation > ul > li a:hover {
- text-decoration: none;
- background-color: #d8e7f5;
-}
-
-.wcf-headerNavigation > ul > li a:active,
-.wcf-headerNavigation > ul > li a:focus,
-
-.wcf-footerNavigation > ul > li a:active,
-.wcf-footerNavigation > ul > li a:focus {
- background-color: #fff9f4;
-}
-
-/* Special -> Page Scroll Links */
-
-#tplLogin .wcf-headerNavigation .toBottomLink,
-#tplLogin .wcf-footerNavigation .toTopLink {
- /* Removes the jump-to-links on the log-in page */
- position: absolute;
- left: -9000px;
- top: -9000px;
- width: 0;
-}
-
-/* Special -> Sub Menu */
-
-.wcf-headerNavigation .wcf-menu {
- padding: 0 7px;
- display: inline;
- max-width: 75%;
-}
-
-.wcf-headerNavigation .wcf-menu > ul {
- text-align: left;
- top: -3px;
- display: inline;
- position: relative;
-}
-
-.wcf-headerNavigation .wcf-menu > ul > li {
- margin-top: 7px;
-}
-
-
-
-/* ############## Main ############## */
-
-.wcf-main {
- background-color: rgba(216, 231, 245, 1);
- margin: 0 23px;
- position: relative;
- z-index: 90;
-
- -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
- -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
- -ms-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
- -o-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
- box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .wcf-main {
- min-width: 800px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .wcf-main {
- /* none */
- }
-
-}
-
-
-
-/* -- -- -- Content -- -- -- */
-
-/* ToDo: Change the class name, since now we have the class "content" 2 times! */
-
-section.wcf-content {
- background-color: rgba(255, 255, 255, 1);
- position: relative;
- min-height: 100px;
- z-index: 20;
- box-sizing: border-box;
-
- -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
- -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
- -ms-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
- /* ToDo: Opera doesn't like that so much! Bug-report sent to Opera
- -o-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
- box-shadow: 0 0 5px rgba(0, 0, 0, .1);*/
-
- -webkit-transition: margin .1s ease;
- -moz-transition: margin .1s ease;
- -ms-transition: margin .1s ease;
- -o-transition: margin .1s ease;
- transition: margin .1s ease;
-}
-
-section.wcf-content:after {
- content: '';
- display: block;
- clear: both;
-}
-
-.left section.wcf-content {
- border-left: 1px solid rgba(187, 204, 221, 1);
- margin-left: 249px;
-}
-
-.right section.wcf-content {
- border-right: 1px solid rgba(187, 204, 221, 1);
- margin-right: 249px;
-}
-
-/* ToDo: Does this still work? */
-.wcf-main > div section:only-child {
- border-width: 0 !important;
- margin: 0 !important;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- section.wcf-content {
- padding: 5px 40px 20px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- section.wcf-content {
- padding: 5px 15px 20px;
- }
-
-}
-
-.wcf-contentDecor {
- background-color: rgba(253, 253, 253, 1);
-}
-
-
-
-/* -- -- -- Content Header & Footer -- -- -- */
-
-.wcf-contentHeader,
-.wcf-contentFooter {
- margin-top: 15px;
- display: table;
- width: 100%;
- box-sizing: border-box;
-}
-
-
-
-/* ############## Sidebar ############## */
-
-/* Globals */
-
-.wcf-sidebar {
- margin-bottom: -10px;
- display: block;
- width: 250px;
- overflow: hidden;
- z-index: 10;
-
- -webkit-transition: width .1s ease;
- -moz-transition: width .1s ease;
- -ms-transition: width .1s ease;
- -o-transition: width .1s ease;
- transition: width .1s ease;
-}
-
-/* Toggle for sidebar orientation (options: left|right|top|bottom) */
-
-.left .wcf-sidebar {
- float: left;
-}
-
-.right .wcf-sidebar {
- float: right;
-}
-
-
-
-/* -- -- -- Collapsible Sidebar -- -- -- */
-
-/* Globals */
-
-.wcf-sidebar.collapsed {
- width: 0;
- height: 0;
-}
-
-.left .wcf-sidebar.collapsed + .wcf-content {
- border: 0;
- margin-left: 0;
-}
-
-.right .wcf-sidebar.collapsed + .wcf-content {
- border: 0;
- margin-right: 0;
-}
-
-
-
-/* -- -- -- Collapsible Sidebar Button -- -- -- */
-
-/* Globals */
-
-.wcf-collapsibleSidebarButton {
- cursor: pointer;
- background-position: center 1%, center 99%;
- background-size: 10px 10px, 10px 10px;
- background-repeat: no-repeat;
- position: absolute;
- top: 0;
- bottom: 0;
- width: 20px;
- height: 100%;
- overflow: hidden;
- z-index: 30;
- opacity: .3;
-}
-
-.wcf-collapsibleSidebarButton:hover,
-.wcf-collapsibleSidebarButton:hover span {
- background-color: rgba(252, 252, 252, 1);
- opacity: 1;
-}
-
-.wcf-collapsibleSidebarButton span {
- background-color: rgba(255, 255, 255, 1);
- background-position: center center;
- background-size: 10px 10px;
- background-repeat: no-repeat;
- margin-top: -300px;
- display: block;
- position: absolute;
- top: 50%;
- width: 20px;
- height: 600px;
-}
-
-.wcf-collapsibleSidebarButton span:focus,
-.wcf-collapsibleSidebarButton span:active {
- -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-}
-
-/* Orientation */
-
-.left .wcf-collapsibleSidebarButton {
- border-right: 1px solid rgba(187, 204, 221, .5);
- background-image: url('../../icon/arrowLeft1.svg'), url('../../icon/arrowLeft1.svg');
- left: 250px;
-
- -webkit-transition: left .1s ease;
- -moz-transition: left .1s ease;
- -ms-transition: left .1s ease;
- -o-transition: left .1s ease;
- transition: left .1s ease;
-}
-
-.left .wcf-collapsibleSidebarButton span {
- background-image: url('../../icon/arrowLeft1.svg');
-}
-
-.right .wcf-collapsibleSidebarButton {
- border-left: 1px solid rgba(187, 204, 221, .5);
- background-image: url('../../icon/arrowRight1.svg'), url('../../icon/arrowRight1.svg');
- right: 250px;
-
- -webkit-transition: right .1s ease;
- -moz-transition: right .1s ease;
- -ms-transition: right .1s ease;
- -o-transition: right .1s ease;
- transition: right .1s ease;
-}
-
-.right .wcf-collapsibleSidebarButton span {
- background-image: url('../../icon/arrowRight1.svg');
-}
-
-/* Collapsed (Left) */
-
-.left .collapsed .wcf-collapsibleSidebarButton {
- background-image: url('../../icon/arrowRight1.svg'), url('../../icon/arrowRight1.svg');
- left: 0;
-}
-
-.left .collapsed .wcf-collapsibleSidebarButton span {
- background-image: url('../../icon/arrowRight1.svg');
-}
-
-/* Collapsed (Right) */
-
-.right .collapsed .wcf-collapsibleSidebarButton {
- background-image: url('../../icon/arrowLeft1.svg'), url('../../icon/arrowLeft1.svg');
- right: 0;
-}
-
-.right .collapsed .wcf-collapsibleSidebarButton span {
- background-image: url('../../icon/arrowLeft1.svg');
-}
-
-
-
-/* -- -- -- Sidebar Content -- -- -- */
-
-.wcf-sidebarContent > div {
- text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
- position: relative;
- overflow: hidden;
- z-index: 40;
-}
-
-.collapsed .wcf-sidebarContent > div {
- width: 0;
-}
-
-.wcf-sidebarContent a:hover {
- text-decoration: none !important;
- color: #369;
-}
-
-.wcf-sidebarContent > div > h1 {
- cursor: pointer;
- font-weight: bold;
- color: #369;
- margin-top: 5px;
-}
-
-.wcf-sidebarContent > .collapsibleMenus > h1 {
- background-image: url('../../icon/arrowRight.svg');
- background-position: 15px center;
- background-size: 16px;
- background-repeat: no-repeat;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .wcf-sidebarContent > div > h1 {
- font-size: 130%;
- padding: 7px 15px 7px 35px;
- }
-
- .wcf-sidebarContent > div:not(.collapsibleMenus) > h1 {
- padding: 7px 15px 7px 15px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .wcf-sidebarContent > div > h1 {
- font-size: 150%;
- padding: 7px 15px 7px 35px;
- }
-
- .wcf-sidebarContent > div:not(.collapsibleMenus) > h1 {
- padding: 7px 15px 7px 15px;
- }
-
-}
-
-.wcf-sidebarContent > .collapsibleMenus h1.activeMenuItem {
- background-image: url('../../icon/arrowDown.svg');
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .wcf-sidebarContent > div ul > li {
- font-size: 110%;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .wcf-sidebarContent > div ul > li {
- font-size: 120%;
- }
-
-}
-
-.wcf-sidebarContent > div ul > li > a,
-.wcf-sidebarContent > div ul > li > div {
- text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
- color: #69c;
- padding: 5px 15px 7px 35px;
- display: block;
-}
-
-.wcf-sidebarContent > div ul > li.activeMenuItem {
- background-color: rgba(255, 255, 255, 1);
- margin-right: -1px;
- overflow: hidden;
-
- -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
- -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
- -ms-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
- -o-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
- box-shadow: 0 0 5px rgba(0, 0, 0, .1);
-}
-
-.wcf-sidebarContent > div ul > li.activeMenuItem a {
- font-weight: bold;
- color: #369;
-}
-
-
-
-/* ############## Status Display ############## */
-
-.wcf-statusDisplay {
- padding: 1px 0;
- float: right;
-}
-
-.wcf-statusDisplay .wcf-statusIcons li {
- display: inline-block;
-}
-
-
-
-/* ############## Headings ############## */
-
-/* -- -- -- Main Heading -- -- -- */
-
-.wcf-mainHeading {
- margin-top: 25px;
-}
-
-.wcf-mainHeading:not(:first-of-type) {
- margin-top: 30px;
-}
-
-.wcf-mainHeading > hgroup {
- min-height: 48px;
-}
-
-.wcf-mainHeading > hgroup h1 {
- font-weight: bold;
- border-bottom: 1px solid rgba(153, 153, 153, 1);
- padding: 1px 0 10px;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .wcf-mainHeading .wcf-containerIcon {
- width: 48px;
- height: 48px;
- }
-
- .wcf-mainHeading hgroup h1 {
- font-size: 175%;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .wcf-mainHeading .wcf-containerIcon {
- width: 64px;
- height: 64px;
- }
-
- .wcf-mainHeading hgroup h1 {
- font-size: 200%;
- }
-
-}
-
-.wcf-mainHeading > hgroup h1,
-.wcf-mainHeading > hgroup h1 a {
- text-decoration: none;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
- color: rgba(102, 102, 102, 1);
-}
-
-.wcf-mainHeading > hgroup h2 {
- font-size: 100%;
- font-weight: normal;
- color: rgba(153, 153, 153, 1);
- padding-top: 5px;
-}
-
-.wcf-mainHeading > hgroup p {
- padding-top: 3px;
-}
-
-/* Special -> Badges */
-
-.wcf-mainHeading > hgroup h1 .wcf-badge,
-.wcf-mainHeading > hgroup h1 a .wcf-badge {
- font-size: 75%;
- text-decoration: none;
- background-color: rgba(102, 102, 102, 1);
- color: rgba(255, 255, 255, 1);
-}
-
-/* Special -> Dialog */
-
-.wcf-dialogContainer .wcf-mainHeading {
- margin-top: 0;
-}
-
-.wcf-dialogContainer .wcf-mainHeading > hgroup h1,
-.wcf-dialogContainer .wcf-mainHeading > hgroup h1 a {
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
- color: rgba(255, 255, 255, 1);
-}
-
-
-
-/* -- -- -- Sub Heading -- -- -- */
-
-.wcf-subHeading h1 {
- font-size: 150%;
- font-weight: bold;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
- color: rgba(153, 153, 153, 1);
- border-bottom: 1px solid #ccc;
- margin: 10px 0;
- padding: 10px 0;
- box-sizing: border-box;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .wcf-subHeading h1 {
- font-size: 150%;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .wcf-subHeading h1 {
- font-size: 175%;
- }
-
-}
-
-.wcf-subHeading h2 {
- font-weight: normal;
- color: #aaa;
-}
-
-
-
-/* ############## Fieldsets ############## */
-
-fieldset {
- border: 1px solid #ccc;
- border-radius: 7px;
- background-color: rgba(250, 250, 250, 1);
- margin: 15px 0 0;
- padding: 5px 15px 15px;
- box-sizing: border-box;
-}
-
-fieldset:last-child,
-fieldset:only-child {
- margin-bottom: 7px !important;
-}
-
-fieldset legend {
- color: rgba(153, 153, 153, 1);
- padding: 0 7px 0;
- margin: auto -7px;
-}
-
-fieldset legend ~ p {
- margin-bottom: 14px;
-}
-
-/* Special Sidebar */
-
-.wcf-sidebar fieldset {
- border-width: 0;
- background-color: transparent;
-}
-
-.wcf-sidebar fieldset legend {
- text-transform: uppercase; /* That's possibly problematic */
- padding: 0;
-}
-
-.fieldsetDecor {
- border: 1px solid #ccc;
- border-radius: 7px;
- background-color: rgba(250, 250, 250, 1);
-}
-
-
-
-/* ############## Labeled Content ############## */
-
-/* Simple */
-
-dl {
- margin-top: 7px;
- position: relative;
-}
-
-fieldset dl:first-of-type {
- margin-top: 0;
-}
-
-dl > dt {
- text-align: right;
- color: rgba(102, 153, 204, 1);
- margin-top: 5px;
- float: left;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- dl > dt {
- width: 230px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- dl > dt {
- width: 130px;
- }
-
-}
-
-dl.wide > dt {
- width: auto; /* ToDo */
-}
-
-dl > dt > label {
- margin-top: 5px;
- display: block;
-}
-
-dl.disabled > dt {
- color: rgba(119, 119, 119, 1);
-}
-
-dl > dd {
- padding-top: 5px;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- dl > dd {
- margin-left: 250px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- dl > dd {
- margin-left: 150px;
- }
-
-}
-
-dl.wide > dd {
- margin-left: 0;
-}
-
-dl > dd > small {
- font-size: 85%;
- color: rgba(153, 153, 153, 1);
- margin: 3px 0 7px;
- display: block;
-}
-
-dl > dd > p {
- margin-top: 5px;
-}
-
-/* Nested */
-
-dl > dd > fieldset {
- margin-top: 0;
- margin-bottom: 0;
- padding-top: 5px;
- padding-bottom: 5px;
-}
-
-dl > dd > fieldset > legend {
- display: none;
-}
-
-dl > dd > fieldset > dl > dt {
- margin-right: 20px;
- width: 150px;
-}
-
-dl > dd > fieldset > dl > dd {
- margin-left: 0;
-}
-
-dl > dd > fieldset > dl > dd > label {
- display: block;
-}
-
-/* Reversed (flips the label aside the checkbox or radio button) -
- use only when automatically generating checkboxes or radio-buttons! */
-
-.reversed {
- text-align: left;
- margin-top: 2px;
- position: absolute;
- width: auto;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .reversed {
- left: 270px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .reversed {
- left: 170px;
- }
-
-}
-
-.reversed ~ dd > input[type='checkbox'] {
- margin-left: 0;
-}
-
-/* Special -> Sidebar */
-
-.wcf-sidebar dl > dt {
- text-align: left;
- float: none;
- width: auto;
-}
-
-.wcf-sidebar dl > dd {
- margin-left: 0;
- display: block;
- margin-bottom: 13px;
-}
-
-.wcf-sidebar dl > dd * {
- display: block;
-}
-
-/* Special -> Overlay */
-
-.wcf-dialogContainer dl > dt {
- width: 130px;
-}
-
-.wcf-dialogContainer dl > dd {
- margin-left: 150px;
-}
-
-.wcf-dialogContainer dl > .reversed {
- left: 170px;
- width: auto;
-}
-
-
-
-/* ############## Forms ############## */
-
-/* Globals */
-
-label {
- color: rgba(102, 153, 204, 1);
-}
-
-/* Structure */
-
-.wcf-formSubmit {
- text-align: center;
- margin-top: 15px;
-}
-
-input[type='checkbox'] ~ small,
-input[type='radio'] ~ small {
- margin-top: 0;
- margin-left: 21px;
-}
-
-
-
-/* -- -- -- Form Elements -- -- -- */
-
-/* Globals */
-
-button,
-input[type='reset'],
-input[type='submit'],
-input[type='button'],
-input[type='checkbox'],
-input[type='radio'],
-select:not([multiple]) {
- cursor: pointer;
-}
-
-input[type='text'],
-input[type='search'], /* Does not work in WebKit browsers */
-input[type='date'],
-input[type='email'],
-input[type='url'],
-input[type='password'],
-textarea,
-select[multiple] {
- padding: 5px 3px;
- box-sizing: border-box;
-}
-
-select[multiple] {
- font-family: 'Courier New', Courier, monospace;
-}
-
-/* Normal State */
-
-input[type='text'],
-input[type='search'],
-input[type='date'],
-input[type='email'],
-input[type='url'],
-input[type='password'],
-textarea,
-select[multiple] {
- border-width: 1px;
- border-style: solid;
- border-color: rgba(153, 153, 153, 1) rgba(204, 204, 204, 1) rgba(238, 238, 238, 1);
- border-radius: 3px;
- background-color: rgba(255, 255, 255, 1);
-
- -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
- -moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
- -ms-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
- -o-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
- box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
-
- -webkit-transition: background-color, border .2s linear;
- -moz-transition: background-color, border .2s linear;
- -ms-transition: background-color, border .2s linear;
- -o-transition: background-color, border .2s linear;
- transition: background-color, border .2s linear;
-}
-
-/* Hover State */
-
-input[type='text']:hover,
-input[type='search']:hover,
-input[type='date']:hover,
-input[type='email']:hover,
-input[type='url']:hover,
-input[type='password']:hover,
-textarea:hover,
-select[multiple]:hover {
- border: 1px solid rgba(255, 170, 34, 1);
- background-color: rgba(255, 249, 244, 1);
-}
-
-/* Active & Focus State */
-
-input[type='text']:active,
-input[type='search']:active,
-input[type='date']:active,
-input[type='email']:active,
-input[type='url']:active,
-input[type='password']:active,
-textarea:active,
-select[multiple]:active,
-
-input[type='text']:focus,
-input[type='search']:focus,
-input[type='date']:focus,
-input[type='email']:focus,
-input[type='url']:focus,
-input[type='password']:focus,
-textarea:focus,
-select[multiple]:focus {
- border: 1px solid rgba(255, 170, 34, 1);
- background-color: rgba(255, 249, 244, 1);
- outline: none;
-
- -webkit-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
- -moz-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
- -ms-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
- -o-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
- box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
-}
-
-/* Read Only State */
-
-input[type='text'][readonly],
-input[type='search'][readonly],
-input[type='email'][readonly],
-input[type='date'][readonly],
-input[type='url'][readonly],
-input[type='password'][readonly],
-textarea[readonly],
-select[multiple][readonly] {
- border-style: solid;
- border-color: rgba(204, 204, 204, 1) rgba(221, 221, 221, 1) rgba(238, 238, 238, 1);
- background-color: transparent;
-
- -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05);
- -moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05);
- -ms-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05);
- -o-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05);
- box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05);
-}
-
-/* Disabled State */
-
-input[type='text'][disabled],
-input[type='search'][disabled],
-input[type='date'][disabled],
-input[type='email'][disabled],
-input[type='url'][disabled],
-input[type='password'][disabled],
-textarea[disabled],
-select[multiple][disabled] {
- border-style: solid;
- border-color: rgba(255, 255, 255, .5);
- background-color: rgba(255, 255, 255, .5);
-}
-
-
-
-/* -- -- -- Input Widths -- -- -- */
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- textarea {
- width: 100%;
- min-width: 200px;
- }
-
- .tiny {
- width: 100px;
- }
-
- .short {
- width: 10%;
- min-width: 75px;
- }
-
- .medium {
- width: 50%;
- min-width: 150px;
- }
-
- .long {
- width: 100%;
- min-width: 200px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- textarea {
- width: 99%;
- /* none */
- }
-
- .tiny {
- width: 50px;
- }
-
- .short {
- width: 10%;
- min-width: 50px;
- }
-
- .medium {
- width: 30%;
- min-width: 100px;
- }
-
- .long {
- width: 100%;
- min-width: 150px;
- }
-
-}
-
-.auto {
- width: auto;
-}
-
-/* Special -> Search Input WebKit */
-
-input[type=search] {
- border-radius: 30px;
-
- -webkit-appearance: textfield;
- -webkit-box-sizing: content-box;
-}
-
-::-webkit-search-decoration {
- display: none;
-}
-
-
-
-/* -- -- -- Form Errors -- -- -- */
-
-.wcf-formError input[type='text'],
-.wcf-formError input[type='search'],
-.wcf-formError input[type='email'],
-.wcf-formError input[type='url'],
-.wcf-formError input[type='password'],
-.wcf-formError textarea {
- border-color: rgba(255, 0, 0, 1);
- background-color: rgba(255, 246, 246, 1);
-}
-
-
-
-/* ############## ToDo: Pre-Input Buttons & Dropdowns ############## */
-
-/* -- -- -- Bounding Box -- -- -- */
-
-/**
- * This defines the shape of the Pre-Input Buttons
- * Colors & effects are being defined by the
- * "Global Button Color & Effect Library"
- */
-
-.wcf-preInput {
- display: table;
- position: relative;
- width: 100%;
-}
-
-.wcf-preInput > input,
-.wcf-preInput > textarea { /* ToDo: The textarea solution is not so nice */
- border-radius: 0 3px 3px 0;
- margin: 0 !important;
- display: table-cell;
- width: 99%;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .wcf-preInput > input,
- .wcf-preInput > textarea {
- min-width: 300px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .wcf-preInput > input,
- .wcf-preInput > textarea {
- min-width: 100px;
- }
-
-}
-
-
-
-/* -- -- -- Dropdowns -- -- -- */
-
-/* Dropdown Caption */
-
-.wcf-preInput .wcf-dropdownCaption {
- letter-spacing: -1px;
- cursor: pointer;
- border-radius: 3px 0 0 3px;
- padding-right: 5px;
- display: table-cell;
- width: 1%;
- vertical-align: middle;
-}
-
-.wcf-preInput .wcf-dropdownCaption span {
- margin-right: -1px;
- padding-left: 5px;
- white-space: nowrap;
-}
-
-.wcf-preInput .wcf-dropdownCaption span.active {
- background-image: url('../../icon/dropdown1.svg');
- background-position: right center;
- background-repeat: no-repeat;
- padding-right: 10px;
-}
-
-
-
-/* -- -- -- Special -> System Notification -- -- -- */
-
-.wcf-preInput .wcf-dropdown > li.missingValue { /* ToDo */
- /* color: #990; */
- background-image: url('../../icon/systemWarning.svg');
- background-size: 16px;
- background-position: 95% center;
- background-repeat: no-repeat;
- /* background-color: #ffd; */
-}
-
-
-
-/* ############## ToDo: Small Buttons ############## */
-
-/**
- * This defines the shape of the Small Buttons
- * Colors & effects are being defined by the
- * "Global Button Color & Effect Library"
- */
-
-/* -- -- -- Standard -- -- -- */
-
-/* Globals */
-
-.wcf-smallButtons {
- list-style-type: none;
- margin-right: -1px;
- margin-bottom: -1px;
-}
-
-.wcf-smallButtons > li {
- margin-left: -5px;
- display: inline-block;
-}
-
-.wcf-smallButtons > li > a {
- white-space: nowrap;
- padding: 3px 7px;
- display: block;
- min-height: 16px;
-}
-
-.wcf-smallButtons > li.separator > a {
- border-right: 1px dotted #bcd;
-}
-
-.wcf-smallButtons > li:first-child > a {
- border-top-left-radius: 13px;
-}
-
-.wcf-smallButtons > li:last-child > a {
- border-bottom-right-radius: 7px;
-}
-
-
-
-/* -- -- -- Small Button Bar -- -- -- */
-
-.wcf-smallButtonBar {
- text-align: center !important;
- border-top: 1px solid rgba(204, 204, 204, 1);
- border-radius: 0 0 7px 7px;
-
- background-color: rgba(0, 0, 0, .015);
- background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
- background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
- background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
- background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
- background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
-
- padding: 3px;
- position: relative;
- z-index: 100;
-}
-
-.wcf-smallButtonBar li {
- display: inline;
- position: relative;
-}
-
-.wcf-smallButtonBar li span {
- /* Removes the button-caption */
- position: absolute;
- left: -9000px;
- top: -9000px;
- width: 0;
-}
-
-
-
-/* ############## Large Buttons ############## */
-
-/**
- * This defines the shape of the Large Buttons
- * Colors & effects are being defined by the
- * "Global Button Color & Effect Library"
- */
-
-/* Globals */
-
-.wcf-largeButtons {
- text-align: right;
- float: right;
-}
-
-.wcf-largeButtons > li {
- display: inline;
-}
-
-.wcf-largeButtons > li > a img {
- margin: -5px 1px -5px -5px;
- vertical-align: middle;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .wcf-largeButtons > li > a img {
- height: 24px;
- width: 24px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .wcf-largeButtons > li {
- font-size: 125%;
- }
-
- .wcf-largeButtons > li > a {
- padding: 10px 15px !important;
- white-space: nowrap;
- }
-
- .wcf-largeButtons > li > a img {
- height: 32px;
- width: 32px;
- }
-
-}
-
-/* Normal State */
-
-button,
-input[type='reset'],
-input[type='submit'],
-input[type='button'],
-.wcf-largeButtons > li > a {
- font-size: 100%;
- font-weight: bold;
- border-radius: 30px;
- margin: 3px 2px;
- padding: 5px 13px;
- display: inline-block;
-}
-
-/* ToDo: Special */
-
-.wcf-sidebar .wcf-largeButtons *,
-.wcf-sidebar input {
- font-size: 75% !important;
- padding: 3px 7px;
-}
-
-.wcf-sidebar .wcf-largeButtons *,
-.wcf-sidebar input {
- font-size: 75% !important;
-}
-
-
-
-/* ############## Boxes ############## */
-
-/**
- * This defines a box with rounded borders
- * Use the extra classes to further style boxes
- */
-
-/* Globals */
-
-.wcf-box {
- border: 1px solid rgba(204, 204, 204, 1);
- border-radius: 5px;
- box-sizing: border-box;
-}
-
-.wcf-boxTitle {
- border-radius: 7px;
- background-color: #369;
- /* Disabled, because the WoltLab header-image is not LGPL
- Activate it if you want to test your own header image */
- /* background-image: url('../../../images/header.png'); */
- background-position: left top;
- background-repeat: repeat-x;
- display: table;
- width: 100%;
-}
-
-.wcf-boxPadding {
- padding: 13px 23px 23px;
-}
-
-.wcf-boxDecor {
- background-color: rgba(253, 253, 253, 1);
-}
-
-/* Headings */
-
-.wcf-boxTitle > hgroup {
- text-shadow: 0 -1px 0 #000;
- color: rgba(255, 255, 255, 1);
- padding: 7px;
- display: inline-block;
-}
-
-.wcf-boxTitle > a,
-.wcf-boxTitle > hgroup a {
- text-decoration: none;
- color: rgba(255, 255, 255, 1);
-}
-
-.wcf-boxTitle > hgroup h1 {
- font-size: 120%;
- display: inline-block;
-}
-
-.wcf-boxTitle > hgroup h2 {
- font-size: 85%;
- color: rgba(255, 255, 255, .9);
- margin-top: 5px;
-}
-
-.wcf-boxTitle > hgroup .wcf-badge {
- font-size: 65%;
- color: #036;
-}
-
-/* Leading icon */
-
-.wcf-boxTitle > a {
- margin: 7px 0 0 10px;
- float: left;
-}
-
-.wcf-boxTitle > a img {
- height: 16px;
- width: 16px;
-}
-
-
-
-/* ############## Tab Menu ############## */
-
-/* Globals */
-
-.wcf-tabMenu {
- /* Toggle for tab menu orientation (options: left|center|right) */
- text-align: center;
- margin-top: 15px;
- padding: 0 10px;
- display: block;
- position: relative;
-}
-
-fieldset ~ .wcf-tabMenuContainer .wcf-tabMenu {
- margin-top: 30px;
-}
-
-/* -- -- -- Tabs -- -- -- */
-
-/* Globals */
-
-.wcf-tabMenu ul {
- text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
- white-space: nowrap;
- border-width: 1px 1px 0 1px;
- border-style: solid;
- border-color: #ddd;
- border-top-left-radius: 3px;
- border-top-right-radius: 3px;
- background-color: rgba(0, 0, 0, .05);
- padding: 0 5px 3px 5px;
- display: inline-block;
- position: relative;
-}
-
-.wcf-tabMenu li {
- white-space: nowrap;
- list-style: none;
- display: inline-block;
-}
-
-.wcf-tabMenu li.ui-state-active {
- margin-right: -7px;
- margin-left: -7px;
-}
-
-.wcf-tabMenu li a {
- text-decoration: none;
- color: rgba(153, 153, 153, 1);
- cursor: pointer;
- display: inline-block;
- position: relative;
- bottom: -3px;
- z-index: 10;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .wcf-tabMenu li a {
- font-size: 110%;
- padding: 1px 10px 3px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .wcf-tabMenu li a {
- font-size: 150%;
- padding: 5px 10px;
- max-width: 100px;
- }
-
-}
-
-.wcf-tabMenu li:not(.ui-state-active) a:hover {
- color: rgba(102, 102, 102, 1);
-}
-
-.wcf-tabMenu li.ui-state-active a {
- font-weight: bold;
- color: #333 !important;
- border-width: 1px;
- border-style: solid;
- border-top-right-radius: 6px;
- border-top-left-radius: 6px;
- border-color: #ccc #ccc #fff;
- background-color: rgba(255, 255, 255, 1);
- padding: 10px 15px 5px;
- margin-top: -10px;
- z-index: 30;
-}
-
-/* Rounded Bottom Corners */
-
-.wcf-tabMenu li.ui-state-active a:before {
- position: absolute;
- bottom: -1px;
- width: 5px;
- height: 5px;
- content: " ";
- border: 1px solid #ccc;
- left: -6px;
- border-bottom-right-radius: 6px;
- border-width: 0 1px 1px 0;
-
- -webkit-box-shadow: 2px 2px 0 #fff;
- -moz-box-shadow: 2px 2px 0 #fff;
- -ms-box-shadow: 2px 2px 0 #fff;
- -o-box-shadow: 2px 2px 0 #fff;
- box-shadow: 2px 2px 0 #fff;
-}
-
-.wcf-tabMenu li.ui-state-active a:after {
- position: absolute;
- bottom: -1px;
- width: 5px;
- height: 5px;
- content: " ";
- border: 1px solid #ccc;
- right: -6px;
- border-bottom-left-radius: 6px;
- border-width: 0 0 1px 1px;
-
- -webkit-box-shadow: -2px 2px 0 #fff;
- -moz-box-shadow: -2px 2px 0 #fff;
- -ms-box-shadow: -2px 2px 0 #fff;
- -o-box-shadow: -2px 2px 0 #fff;
- box-shadow: -2px 2px 0 #fff;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .wcf-tabMenu li.ui-state-active a {
- font-size: 130%;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .wcf-tabMenu li.ui-state-active a {
- font-size: 150%;
- }
-
-}
-
-.wcf-tabMenu li.ui-state-active a,
-.wcf-tabMenu li.ui-state-disabled a,
-.wcf-tabMenu li.ui-state-processing a {
- cursor: default;
-}
-
-
-
-/* -- -- -- Tab Menu Content -- -- -- */
-
-.wcf-tabMenuContent {
- background-color: rgba(255, 255, 255, 1);
- margin-top: -1px;
- display: block;
- position: relative;
- z-index: 20; /* Prevents border overlay during transition */
-}
-
-/* ToDo: 2x hidden? */
-
-.ui-tabs .ui-tabs-hide {
- display: none !important;
-}
-
-.ui-helper-hidden {
- display: none;
-}
-
-.ui-helper-hidden-accessible {
- position: absolute !important;
- clip: rect(1px 1px 1px 1px);
- clip: rect(1px,1px,1px,1px);
-}
-
-
-
-/* ############## Menu ############## */
-
-/* Standard */
-
-.wcf-menu {
- color: rgba(102, 102, 102, 1);
-}
-
-.wcf-menu ul {
- /* General toggle switch for menu orientation (options: left|center|right) */
- text-align: center;
-}
-
-.wcf-menu ul li {
- white-space: nowrap;
- margin-top: 10px;
- display: inline-block;
-}
-
-.wcf-menu ul li a {
- font-size: 85%;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
- text-decoration: none;
- color: rgba(153, 153, 153, 1);
- border: 1px solid rgba(0, 0, 0, .2);
- border-radius: 13px;
- background-color: rgba(255, 255, 255, .5);
- padding: 2px 10px;
-
- -webkit-transition: color .1s linear;
- -moz-transition: color .1s linear;
- -ms-transition: color .1s linear;
- -o-transition: color .1s linear;
- transition: color .1s linear;
-}
-
-.wcf-menu ul li:not(.ui-state-active) a:hover {
- color: #333;
- border-width: 1px;
- border-style: solid;
- border-color: #fa2;
- background-color: rgba(255, 249, 244, 1);
-}
-
-.wcf-menu ul li:not(.ui-state-active) a:active,
-.wcf-menu ul li:not(.ui-state-active) a:focus {
- -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-}
-
-.wcf-menu ul li.ui-state-active a {
- font-weight: bold;
- text-shadow: 0 1px 0 #000;
- color: rgba(255, 255, 255, 1);
- cursor: default;
- border: 1px solid rgba(0, 0, 0, .2);
- background-color: rgba(0, 0, 0, .5);
-}
-
-/* Special -> Menu within box-title */
-
-.wcf-boxTitle > .wcf-menu {
- color: rgba(255, 255, 255, 1);
- border: none;
- margin: 0 !important;
- padding: 6px 7px !important;
-}
-
-.wcf-boxTitle > .wcf-menu ul li {
- margin-top: 0;
-}
-
-.wcf-boxTitle > .wcf-menu ul li a {
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
- color: #eee !important;
- background-color: rgba(0, 0, 0, .1);
-}
-
-.wcf-boxTitle > .wcf-menu ul li a:hover {
- color: rgba(255, 255, 255, 1) !important;
- border: 1px solid rgba(0, 0, 0, .3);
- background-color: rgba(0, 0, 0, .2);
-}
-
-.wcf-boxTitle > .wcf-menu ul li a:active,
-.wcf-boxTitle > .wcf-menu ul li a:focus,
-.wcf-boxTitle > .wcf-menu ul li.ui-state-active a {
- border: 1px solid rgba(0, 0, 0, .5);
-
- -webkit-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
- -moz-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
- -ms-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
- -o-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
- box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
-}
-
-.wcf-boxTitle > .wcf-menu ul li a .wcf-badge {
- color: #369 !important;
-}
-
-/* Special: Menu below tab-menu */
-
-.wcf-tabMenuContainer > .wcf-menu {
- border-bottom: 1px solid #ccc;
- margin: -15px -23px 0;
- padding: 0 7px 10px;
-}
-
-.wcf-tabMenuContainer > .wcf-menu {
- background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
- background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
- background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
- background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
- background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
-}
-
-
-
-/* ############## Bread Crumbs ############## */
-
-/* Globals */
-
-.wcf-breadcrumbs {
- text-align: left;
- border: 1px solid rgba(204, 204, 204, 1);
- border-radius: 5px;
- background-color: rgba(255, 255, 255, 1);
- display: block;
- position: relative;
- overflow: hidden;
- box-sizing: border-box;
-}
-
-.wcf-breadcrumbs > ul > li {
- font-size: 85%;
- list-style: none;
- float: left;
- position: relative;
- max-width: 30%;
-
- -webkit-transition: max-width .2s linear;
- -moz-transition: max-width .2s linear;
- -ms-transition: max-width .2s linear;
- -o-transition: max-width .2s linear;
- transition: max-width .2s linear;
-}
-
-.wcf-breadcrumbs > ul > li:hover {
- max-width: 100%;
-}
-
-/* Arrow */
-
-.wcf-breadcrumbs > ul > li > span {
- border-width: 15px;
- border-style: solid none solid solid;
- border-color: transparent transparent transparent rgba(204, 204, 204, 1);
- display: block !important;
- position: absolute;
- width: 0;
- height: 0;
- top: -4px;
- right: -15px;
- z-index: 20;
-}
-
-.wcf-breadcrumbs > ul > li > .pointer > span {
- text-indent: -9000px;
- border-width: 15px;
- border-style: solid none solid solid;
- border-color: transparent transparent transparent rgba(255, 255, 255, 1);
- display: block;
- position: absolute;
- width: 0;
- height: 0;
- top: -15px;
- left: -16px;
- overflow: hidden;
-}
-
-/* Caption */
-
-.wcf-breadcrumbs > ul > li a {
- text-decoration: none;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
- color: rgba(153, 153, 153, 1);
- margin: 0;
- padding: 5px 1px 5px 20px;
- display: block;
- overflow: hidden;
- white-space: nowrap;
-}
-
-.wcf-breadcrumbs > ul > li:first-child a {
- border-radius: 5px 0 0 5px;
- background-image: url('../../icon/home1.svg');
- background-position: 7px center;
- background-repeat: no-repeat;
- background-size: 16px;
- padding-left: 30px;
-}
-
-.wcf-breadcrumbs > ul > li:hover a {
- color: rgba(102, 102, 102, 1);
- background-color: rgba(249, 249, 249, 1);
- position: relative;
- z-index: 10;
-}
-
-.wcf-breadcrumbs > ul > li:hover > .pointer > span {
- border-color: transparent transparent transparent rgba(249, 249, 249, 1);
-}
-
-
-
-/* ############## Tables ############## */
-
-/* Globals */
-
-table {
- border-spacing: 0;
- width: 100% !important;
-}
-
-
-
-/* -- -- -- Table Header -- -- -- */
-
-thead th {
- font-size: 87%;
- white-space: nowrap;
-}
-
-thead th:first-child {
- /* Rounded corners for the first table header cell
- (only in effect if the table is not inside a "div" with class ".boxTitle") */
- border-top-left-radius: 5px;
-}
-
-thead th:last-child {
- /* Rounded corners for the last table header cell
- (only in effect if the table is not inside a "div" with class ".boxTitle") */
- border-top-right-radius: 5px;
-}
-
-thead th {
- text-shadow: 0 -1px 0 #000;
- color: #69c;
- border-right: 1px solid rgba(0, 0, 0, .2);
-
- background-color: rgba(0, 0, 0, .3);
- background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
- background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
- background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
- background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
- background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
-
- padding: 7px;
-
- -webkit-transition: background .2s linear;
- -moz-transition: background .2s linear;
- -ms-transition: background .2s linear;
- -o-transition: background .2s linear;
- transition: background .2s linear;
-}
-
-thead th a {
- text-shadow: 0 -1px 0 #000;
- text-decoration: none !important;
- color: #69c;
- margin: -7px;
- padding: 7px;
- display: block;
-}
-
-thead th:last-child a {
- border-right-width: 0;
-}
-
-thead th:hover a {
- color: rgba(255, 255, 255, 1);
- background-color: rgba(0, 0, 0, .2);
-}
-
-thead th a:active,
-thead th a:focus,
-thead th.active a {
- color: rgba(255, 255, 255, 1);
- background-color: rgba(0, 0, 0, .1);
-
- -webkit-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4);
- -moz-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4);
- -ms-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4);
- -o-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4);
- box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4);
-}
-
-thead th.active a {
- font-weight: bold;
-}
-
-thead th.active:hover a {
- background-color: rgba(0, 0, 0, .3);
-}
-
-thead th a img {
- /* ToDo: Sort-icon orientation does not work */
- text-align: right;
- /* Negative margins to prevent table-cells from expanding vertically when the sort-icon shows up */
- margin-top: -5px !important;
- margin-bottom: -5px !important;
-}
-
-
-
-/* -- -- -- Table Body -- -- -- */
-
-tbody tr {
- border-bottom: 1px solid rgba(255, 255, 255, .3);
-}
-
-tbody tr:last-child {
- /* No border for the last table row */
- border-bottom-width: 0;
-}
-
-tbody tr:last-child td:first-child {
- /* Rounded corners for the first table cell in the last row */
- border-bottom-left-radius: 5px;
-}
-
-tbody tr:last-child td:last-child {
- /* Rounded corners for the last table cell in the last row */
- border-bottom-right-radius: 5px;
-}
-
-tbody td {
- background-color: #fcfdfe;
- border-right: 1px solid rgba(255, 255, 255, .3);
- padding: 5px;
-
- -webkit-transition: background .1s linear;
- -moz-transition: background .1s linear;
- -ms-transition: background .1s linear;
- -o-transition: background .1s linear;
- transition: background .1s linear;
-}
-
-tbody td:last-child {
- border-right-width: 0;
-}
-
-tbody tr:nth-child(2n+1) td {
- /* Auto-colorer for every 2nd row */
- background-color: #f2f6fa;
-}
-
-tbody tr:hover td {
- background-color: #d8e7f5;
-}
-
-
-
-/* -- -- -- Special -> Table Header -- -- -- */
-
-.wcf-menu ~ .wcf-box thead th:first-child { /* ToDo: Does this case really exist any more? */
- border-top-left-radius: 0 !important;
-}
-
-.wcf-menu ~ .wcf-box thead th:last-child { /* ToDo: Does this case really exist any more? */
- border-top-right-radius: 0 !important;
-}
-
-.wcf-boxTitle > hgroup + table th:first-child, /* Boxes with a title bar */
-.wcf-boxTitle > nav + table th:first-child { /* Boxes with a menu in the title bar */
- border-top-left-radius: 0 !important;
-}
-
-.wcf-boxTitle > hgroup + table th:last-child, /* Boxes with a title bar */
-.wcf-boxTitle > .wcf-menu + table th:last-child { /* Boxes with a menu in the title bar */
- border-top-right-radius: 0 !important;
-}
-
-
-
-/* -- -- -- Special -> Checkboxes in Table Headers -- -- -- */
-
-thead input[type='checkbox'] {
- margin-top: -5px !important;
- margin-bottom: -5px !important;
-}
-
-
-
-/* -- -- -- ToDo: Table Column Formats -- -- -- */
-
-.columnMark,
-.columnStatus {
- text-align: center;
- width: 1% !important;
- white-space: nowrap;
-}
-
-.columnStatus .wcf-badge {
- margin-right: 1px !important;
- margin-left: 1px !important;
-}
-
-.columnDigits,
-.columnID {
- text-align: right;
- width: 1% !important;
- white-space: nowrap;
-}
-
-.columnIcon {
- text-align: left;
- width: 1% !important;
- white-space: nowrap;
-}
-
-tr img[src$="D.svg"] {
- cursor: not-allowed;
-}
-
-tr .columnIcon img {
- height: 16px;
- width: 16px;
-}
-
-.big .columnIcon img {
- height: 24px;
- width: 24px;
-}
-
-.columnTitle {
- font-weight: bold;
- text-align: left;
-}
-
-.columnText {
- font-weight: normal;
- text-align: left;
- max-width: 20%;
-}
-
-.columnDate,
-.columnRegistrationDate {
- font-size: 85%;
- text-align: right;
- width: 1% !important;
- white-space: nowrap;
-}
-
-.columnURL {
- font-size: 85%;
- text-align: left;
-}
-
-
-
-/* ############## ToDo: Page Navigation ############## */
-
-/**
- * This defines the shape of the Page-Navigation widget
- * Colors & effects are being defined by the
- * "Global Button Color & Effect Library"
- */
-
-/* Globals */
-
-:not(.wcf-statusDisplay) > .wcf-pageNavigation {
- margin: 5px 0 3px;
- float: left;
-}
-
-/* -- -- -- Buttons (Level 1 & 2) -- -- -- */
-
-.wcf-pageNavigation ul li {
- font-weight: bold;
- text-align: center;
- border-radius: 3px;
- margin: 1px;
- float: left;
- min-width: 19px;
-}
-
-.wcf-contentHeader .wcf-pageNavigation ul li,
-.wcf-contentFooter .wcf-pageNavigation ul li {
- margin: 2px;
-}
-
-.wcf-pageNavigation ul li:not(.active):not(.disabled) {
- cursor: pointer;
-}
-
-.wcf-pageNavigation ul li.disabled {
- cursor: not-allowed;
- border: 1px solid rgba(0, 0, 0, .1) !important;
- background-image: none !important;
-}
-
-.wcf-pageNavigation ul li img {
- height: 16px;
- width: 16px;
-}
-
-.wcf-pageNavigation ul li.skip {
- padding: 2px 0 1px;
-}
-
-.wcf-pageNavigation ul li a {
- text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
- text-decoration: none;
- color: rgba(153, 153, 153, 1);
- display: inline-block;
-}
-
-.wcf-pageNavigation ul li:not(.disabled):hover a {
- color: rgba(102, 102, 102, 1);
-}
-
-.wcf-pageNavigation ul li:not(.skip) a {
- padding: 3px 1px;
-}
-
-.wcf-pageNavigation ul li:active a,
-.wcf-pageNavigation ul li:focus a {
- color: #333;
-}
-
-.wcf-pageNavigation ul li.active,
-.wcf-pageNavigation ul li.active:hover {
- text-shadow: 0 1px 0 #000 !important;
- color: rgba(255, 255, 255, 1) !important;
- border: 1px solid rgba(0, 0, 0, .3) !important;
-
- background-color: rgba(0, 0, 0, .5) !important;
- background-image: -webkit-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important;
- background-image: -moz-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important;
- background-image: -o-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important;
- background-image: -ms-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important;
- background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important;
-
- padding: 3px 0;
-}
-
-/* -- -- -- ToDo: Children (Level 2) -- -- -- */
-
-/* Buttons */
-
-.wcf-pageNavigation ul li.children {
- position: relative;
-}
-
-.wcf-pageNavigation ul li.children > a {
- margin-right: -10px;
- position: relative;
- z-index: 10;
-}
-
-.wcf-pageNavigation ul li.children input {
- margin-left: 1px;
- width: 30px;
- height: 9px;
-}
-
-.wcf-pageNavigation ul li.children img {
- position: relative;
- width: 7px;
- height: 9px;
- bottom: 1px;
- left: 25px;
-}
-
-/* Dropdown */
-
-.wcf-pageNavigation ul li.children .wcf-dropdown {
- text-align: left;
- border-color: transparent;
- border-radius: 3px;
- background-color: rgba(0, 0, 0, .7);
- margin-top: 28px;
- margin-left: -2px;
- padding: 2px 1px;
- display: inline-block;
- position: absolute;
- height: 0;
- overflow: hidden;
- min-width: 165px;
- max-width: 250px;
- opacity: 0;
-
- -webkit-transition: opacity .2s linear;
- -moz-transition: opacity .2s linear;
- -ms-transition: opacity .2s linear;
- -o-transition: opacity .2s linear;
- transition: opacity .2s linear;
-}
-
-.wcf-pageNavigation ul li.children:hover .wcf-dropdown {
- border-color: rgba(255, 255, 255, .7);
- height: auto;
- overflow: visible;
- opacity: 1;
-}
-
-.wcf-pageNavigation ul li.children .wcf-dropdown ul {
- padding: 0 5px 5px 2px;
- display: block;
-}
-
-.wcf-pageNavigation ul li.children .wcf-dropdown ul li {
- margin: 2px 3px;
-}
-
-/* Pointer */
-
-.wcf-pageNavigation ul li.children .pointer {
- border-width: 0 7px 7px;
- border-style: solid;
- border-color: rgba(255, 255, 255, .7) transparent;
- display: inline-block !important;
- width: 0;
- position: absolute;
- top: -7px !important;
- left: 11px;
-}
-
-.wcf-pageNavigation ul li.children .pointer span {
- border-width: 0 5px 5px;
- border-style: solid;
- border-color: rgba(0, 0, 0, .7) transparent;
- display: inline-block;
- width: 0;
- position: absolute;
- top: 2px;
- left: -5px;
-}
-
-/* Special -> Status Display */
-
-.wcf-statusDisplay .wcf-pageNavigation {
- font-size: 80%;
-}
-
-.wcf-statusDisplay .wcf-pageNavigation ul li {
- min-width: 13px;
-}
-
-.wcf-statusDisplay .wcf-pageNavigation ul li:not(.skip) a {
- padding: 1px;
-}
-
-
-
-/* ############## System Notifications (Inline) ############## */
-
-/* Globals */
-
-.wcf-info,
-.wcf-error,
-.wcf-success,
-.wcf-warning {
- text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
- line-height: 1.5;
- border-radius: 7px;
- margin-top: 15px;
- padding: 7px 15px 7px 50px;
- box-sizing: border-box;
-}
-
-/* Types */
-
-.wcf-info {
- color: #68b;
- border: 1px solid #9be;
- background-color: #def;
-
- background-image: url('../../icon/systemInfo.svg'), -webkit-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px);
- background-image: url('../../icon/systemInfo.svg'), -moz-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px);
- background-image: url('../../icon/systemInfo.svg'), -ms-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px);
- background-image: url('../../icon/systemInfo.svg'), -o-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px);
- background-image: url('../../icon/systemInfo.svg'), repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px);
-
- background-size: 24px, auto;
- background-position: 13px center, left top;
- background-repeat: no-repeat, repeat;
-}
-
-.wcf-success {
- color: #090;
- border: 1px solid #0c0;
- background-color: #efe;
-
- background-image: url('../../icon/systemSuccess.svg'), -webkit-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
- background-image: url('../../icon/systemSuccess.svg'), -moz-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
- background-image: url('../../icon/systemSuccess.svg'), -ms-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
- background-image: url('../../icon/systemSuccess.svg'), -o-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
- background-image: url('../../icon/systemSuccess.svg'), repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-
- background-size: 24px, auto;
- background-position: 13px center, left top;
- background-repeat: no-repeat, repeat;
-
-}
-
-.wcf-warning {
- color: #990;
- border: 1px solid #cc0;
- background-color: #ffd;
-
- background-image: url('../../icon/systemWarning.svg'), -webkit-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
- background-image: url('../../icon/systemWarning.svg'), -moz-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
- background-image: url('../../icon/systemWarning.svg'), -ms-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
- background-image: url('../../icon/systemWarning.svg'), -o-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
- background-image: url('../../icon/systemWarning.svg'), repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-
- background-size: 24px, auto;
- background-position: 13px center, left top;
- background-repeat: no-repeat, repeat;
-}
-
-.wcf-error {
- color: #c00;
- border: 1px solid #f99;
- background-color: #fee;
-
- background-image: url('../../icon/systemError.svg'), -webkit-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
- background-image: url('../../icon/systemError.svg'), -moz-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
- background-image: url('../../icon/systemError.svg'), -ms-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
- background-image: url('../../icon/systemError.svg'), -o-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
- background-image: url('../../icon/systemError.svg'), repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-
- background-size: 24px, auto;
- background-position: 13px center, left top;
- background-repeat: no-repeat, repeat;
-}
-
-/* Inline Errors */
-
-.wcf-innerError {
- text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
- line-height: 1.5;
- color: #c00;
- border: 1px solid #f99;
- border-radius: 7px;
- background-color: rgba(255, 238, 238, 1);
- background-image: url('../../icon/systemError.svg');
- background-size: 16px;
- background-position: 5px center;
- background-repeat: no-repeat;
- margin-top: 5px;
- padding: 2px 10px 2px 25px;
- display: table !important;
- position: relative; /* Firefox support (from version 10 on) is buggy */
- clear: both;
-
- -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
- -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
- -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
- -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
- box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
-}
-
-.wcf-innerError .pointer {
- border-width: 0 7px 7px;
- border-style: solid;
- border-color: #f99 transparent;
- display: inline-block !important;
- width: 0;
- position: absolute;
- top: -7px !important;
- left: 10%;
-}
-
-.wcf-innerError .pointer span {
- border-width: 0 5px 5px;
- border-style: solid;
- border-color: rgba(255, 238, 238, 1) transparent;
- display: inline-block;
- width: 0;
- position: absolute;
- top: 2px;
- left: -5px;
-}
-
-/* Special -> Pre Input */
-
-.wcf-preInput ~ .wcf-innerError .pointer {
- right: 10%;
- left: auto;
-}
-
-
-
-/* ############## ToDo: System Notifications (Sheet) ############## */
-
-/* Globals */
-
-.wcf-systemNotification { /* declarations taken from .success */
- background-color: rgba(238, 255, 238, 1);
- border: 1px solid rgba(0, 204, 0, 1);
- border-top-width: 0;
- border-radius: 0 0 5px 5px;
- color: rgba(0, 153, 0, 1);
- left: 40%;
- padding: 14px;
- padding-top: 10px;
- position: fixed;
- text-align: center;
- top: -38px;
- width: auto;
- z-index: 500;
-
- -webkit-transition: top .5s linear;
- -moz-transition: top .5s linear;
- -ms-transition: top .5s linear;
- -o-transition: top .5s linear;
- transition: top .5s linear;
-}
-
-.wcf-systemNotification.open {
- top: 0;
-}
-
-
-
-/* ############## ToDo: WCF Dialog ############## */
-
-/* Globals */
-
-.wcf-dialogContainer {
- border: 23px solid transparent;
- border-radius: 15px;
- background-color: rgba(0, 0, 0, .4);
- margin-right: auto !important;
- margin-left: auto !important;
- position: fixed !important;
-
- -webkit-box-shadow: 0 1px 23px rgba(0, 0, 0, .3);
- -moz-box-shadow: 0 1px 23px rgba(0, 0, 0, .3);
- -ms-box-shadow: 0 1px 23px rgba(0, 0, 0, .3);
- -o-box-shadow: 0 1px 23px rgba(0, 0, 0, .3);
- box-shadow: 0 1px 23px rgba(0, 0, 0, .3);
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .wcf-dialogContainer {
- min-width: 500px !important;
- max-width: 780px !important;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .wcf-dialogContainer {
- min-width: 200px !important;
- max-width: 380px !important;
- }
-
-}
-
-/* Titlebar */
-
-.wcf-dialogTitlebar {
- border-bottom: 1px solid #036;
- border-top-left-radius: 7px;
- border-top-right-radius: 7px;
- background-color: #29374a;
- /* Disabled, because the WoltLab header-image is not LGPL
- Activate it if you want to test your own header image */
- /* background-image: url('../../../images/header.png'); */
- background-position: left top;
- background-repeat: repeat-x;
- padding: 10px 20px;
- position: relative;
- display: block;
- /*cursor: move;*/
-}
-
-.wcf-dialogTitle {
- font-size: 170%;
- font-weight: bold;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
- color: rgba(255, 255, 255, 1);
- display: block;
-}
-
-.wcf-dialogCloseButton {
- background-image: url('../../icon/delete2.svg');
- background-size: 32px;
- background-position: top left;
- background-repeat: no-repeat;
- position: absolute !important;
- width: 32px;
- height: 32px;
- top: 5px;
- right: 10px;
- cursor: pointer;
-}
-
-.wcf-dialogCloseButton span {
- /* Removes the button-caption */
- position: absolute;
- left: -9000px;
- top: -9000px;
- width: 0;
-}
-
-/* Content */
-
-.wcf-dialogContent {
- color: rgba(238, 238, 238, 1);
- background-color: #333;
- overflow: auto;
-}
-
-.wcf-dialogContent a {
- color: #69c;
-}
-
-.wcf-dialogContent a:hover {
- color: #fff;
-}
-
-.wcf-dialogContainer > .wcf-dialogContent {
- border-radius: 7px;
- padding: 0;
- /*width: auto !important;*/
-}
-
-.wcf-dialogTitlebar ~ .wcf-dialogContent {
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- border-bottom-left-radius: 7px;
- border-bottom-right-radius: 7px;
- padding: 10px 20px 20px;
-}
-
-/* Special */
-
-#ajaxExceptionStacktrace {
- white-space: nowrap;
- overflow: scroll;
- overflow-y: hidden;
-}
-
-#ajaxExceptionStacktrace {
- font-family: monospace;
- font-size: 90%;
- line-height: 1.2;
- border: 1px solid #ccc;
- padding: 3px;
-}
-
-
-
-/* ############## ToDo: Overlay Spinner ############## */
-
-.wcf-dialogOverlay {
- background-color: rgba(0, 0, 0, 1);
- opacity: .5;
- position: fixed;
- width: 100% !important;
- top: 0;
- left: 0;
-}
-
-
-/* ToDo: What is that and change that class-name! */
-
-.wcf-overlayLoading {
- background-color: rgba(255, 255, 255, 1);
- background-image: url('../../icon/spinner1.svg');
- background-position: center center;
- background-size: 32px;
- background-repeat: no-repeat;
-}
-
-
-
-/* ############## Balloon Tooltips ############## */
-
-/* Globals */
-
-.jsTooltip { /* Do not change this style */
- cursor: pointer;
-}
-
-.wcf-balloonTooltip {
- font-size: .85em;
- color: rgba(255, 255, 255, 1);
- border: 1px solid rgba(255, 255, 255, .7);
- border-radius: 5px;
- background-color: rgba(0, 0, 0, .7);
- padding: 5px 10px 7px;
- position: absolute;
- max-width: 300px;
- z-index: 800;
-
- -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
- -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
- -ms-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
- -o-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
- box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
-}
-
-/* Pointer */
-
-.wcf-balloonTooltip .pointer {
- border-width: 0 7px 7px;
- border-style: solid;
- border-color: rgba(255, 255, 255, .7) transparent;
- display: inline-block !important;
- width: 0;
- position: absolute;
- top: -7px !important;
- left: 50%;
-}
-
-.wcf-balloonTooltip .pointer span {
- border-width: 0 5px 5px;
- border-style: solid;
- border-color: rgba(0, 0, 0, .7) transparent;
- display: inline-block;
- width: 0;
- position: absolute;
- top: 2px;
- left: -5px;
-}
-
-
-
-/* ############## ToDo: Likes Widget ############## */
-
-/* @see theadPostList.tpl */
-
-/**
- * This defines the shape of the Likes widget
- * Colors & effects are being defined by the
- * "Global Button Color & Effect Library"
- */
-
-/* -- -- -- -- Widget -- -- -- -- -- */
-
-/* Globals */
-
-.wcf-likesWidget {
- margin: 0 0 0 15px;
-}
-
-/* Buttons */
-
-.wcf-likesWidget > ul {
- float: right;
- margin-right: 7px;
- margin-left: 10px;
-}
-
-.wcf-likesWidget > ul > li {
- text-align: right;
- margin-top: 3px;
- display: inline-block;
-}
-
-.wcf-likesWidget > ul > li > a {
- padding: 2px 4px 3px;
-}
-
-.wcf-likesWidget > ul > li:first-child {
- margin-right: -5px;
-}
-
-
-
-/* ############## ToDo: Clipboard Editor Buttons ############## */
-
-/* Globals */
-
-.wcf-clipboardEditor > ul > li {
- font-size: .85em;
- border-radius: 30px;
- margin-top: 7px;
- margin-right: 3px;
- margin-left: 3px;
- float: left;
- position: relative;
-}
-
-.wcf-clipboardEditor > ul > li span {
- text-decoration: none !important;
- cursor: pointer;
- background-image: url('../../icon/dropdown1.svg');
- background-position: right center;
- background-repeat: no-repeat;
- margin-right: 5px;
- padding: 3px 12px 5px 10px;
- display: inline-block;
-}
-
-
-
-/* ############## ToDo: CK-Editor ############## */
-
-.wcf-wideEditor dt {
- display: none;
-}
-
-.wcf-wideEditor dd {
- margin-left: 0;
-}
-
-
-
-/* ############## Global Button Color & Effect Library ############## */
-
-/**
- * This defines the colors & effects of Button elements
- * Define the shape of the element in a separate class
- */
-
-/* -- -- -- Normal Buttons -- -- -- */
-
-/* Normal State */
-
-.wcf-button,
-input[type='reset']:not([disabled]),
-input[type='submit']:not([disabled]),
-input[type='button']:not([disabled]),
-button:not([disabled]) {
- text-decoration: none;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
- color: rgba(153, 153, 153, 1);
- border-width: 1px;
- border-style: solid;
- border-color: #ccc #bbb #aaa;
-
- background-color: #fefefe;
- background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
- background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
- background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
- background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
- background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
-
- -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
- -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
- -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
- -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
- box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
-
- -webkit-transition-property: border, box-shadow, background-color, background-image, color;
- -webkit-transition-duration: .1s;
- -webkit-transition-timing-function: linear;
-
- -moz-transition-property: border, box-shadow, background-color, background-image, color;
- -moz-transition-duration: .1s;
- -moz-transition-timing-function: linear;
-
- -ms-transition-property: border, box-shadow, background-color, background-image, color;
- -ms-transition-duration: .1s;
- -ms-transition-timing-function: linear;
-
- -o-transition-property: border, box-shadow, background-color, background-image, color;
- -o-transition-duration: .1s;
- -o-transition-timing-function: linear;
-
- transition-property: border, box-shadow, background-color, background-image, color;
- transition-duration: .1s;
- transition-timing-function: linear;
-}
-
-/* Hover State */
-
-.wcf-button:hover,
-.default .wcf-button:hover,
-input[type='reset']:not([disabled]):hover,
-input[type='submit']:not([disabled]):hover,
-input[type='button']:not([disabled]):hover,
-button:not([disabled]):hover {
- text-decoration: none;
- color: rgba(102, 102, 102, 1);
- border-width: 1px;
- border-style: solid;
- border-color: #ffc053 #fa2 #fc9e07;
-
- background-color: #fff9f4;
- background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-}
-
-/* Active State */
-
-.wcf-button:focus,
-.default .wcf-button:focus,
-input[type='reset']:not([disabled]):focus,
-input[type='submit']:not([disabled]):focus,
-input[type='button']:not([disabled]):focus,
-button:not([disabled]):focus,
-
-.wcf-button:active,
-.active .wcf-button,
-.default .wcf-button:active,
-input[type='reset']:not([disabled]):active,
-input[type='submit']:not([disabled]):active,
-input[type='button']:not([disabled]):active,
-button:not([disabled]):active {
- color: #333;
- border-width: 1px;
- border-style: solid;
- border-color: #fc9e07 #fa2 #ffc053;
-
- background-color: #fff9f4;
- background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -moz-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -ms-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -o-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-
- -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-}
-
-
-
-/* -- -- -- Default Buttons -- -- -- */
-
-/* Default State Glow */
-
-@-webkit-keyframes glowButtons {
- 0% {
- -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5);
- }
- 100% {
- -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1);
- }
-}
-@-moz-keyframes glowButtons {
- 0% {
- -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5);
- }
- 100% {
- -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1);
- }
-}
-@-ms-keyframes glowButtons {
- 0% {
- -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5);
- }
- 100% {
- -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1);
- }
-}
-/* disabled to ease rendering work for Opera
-@-o-keyframes glowButtons {
- 0% {
- -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5);
- }
- 100% {
- -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1);
- }
-}
-*/
-@keyframes glowButtons {
- 0% {
- box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5);
- }
- 100% {
- box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1);
- }
-}
-
-/* Default Normal State */
-
-.default .wcf-button,
-input[type='submit']:not([disabled]),
-input[type='button']:not([disabled]).default,
-button:not([disabled]).default {
- color: #69c;
- border-width: 1px;
- border-style: solid;
- border-color: #7aade0 #69c #5285b8;
-
- background-color: #e7f2fd;
- background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
- background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
- background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
- background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
- background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
-
- -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369;
- -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369;
- -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369;
- -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369;
- box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369;
-
- -webkit-animation-name: glowButtons;
- -webkit-animation-duration: 1s;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-direction: alternate;
- -webkit-animation-timing-function: ease-in-out;
-
- -moz-animation-name: glowButtons;
- -moz-animation-duration: 1s;
- -moz-animation-iteration-count: infinite;
- -moz-animation-direction: alternate;
- -moz-animation-timing-function: ease-in-out;
-
- -ms-animation-name: glowButtons;
- -ms-animation-duration: 1s;
- -ms-animation-iteration-count: infinite;
- -ms-animation-direction: alternate;
- -ms-animation-timing-function: ease-in-out;
- /* disabled to ease rendering work for Opera
- -o-animation-name: glowButtons;
- -o-animation-duration: 1s;
- -o-animation-iteration-count: infinite;
- -o-animation-direction: alternate;
- -o-animation-timing-function: ease-in-out;
- */
- animation-name: glowButtons;
- animation-duration: 1s;
- animation-iteration-count: infinite;
- animation-direction: alternate;
- animation-timing-function: ease-in-out;
-}
-
-/* Default Hover State Glow */
-
-@-webkit-keyframes glowButtonsHover {
- 0% {
- -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3);
- }
- 100% {
- -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1);
- }
-}
-@-moz-keyframes glowButtonsHover {
- 0% {
- -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3);
- }
- 100% {
- -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1);
- }
-}
-@-ms-keyframes glowButtonsHover {
- 0% {
- -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3);
- }
- 100% {
- -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1);
- }
-}
-/* disabled to ease rendering work for Opera
-@-o-keyframes glowButtonsHover {
- 0% {
- -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3);
- }
- 100% {
- -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1);
- }
-}
-*/
-@keyframes glowButtonsHover {
- 0% {
- box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3);
- }
- 100% {
- box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1);
- }
-}
-
-/* Default Hover State */
-
-.default .wcf-button:hover,
-input[type='submit']:not([disabled]):hover,
-input[type='button']:not([disabled]).default:hover,
-button:not([disabled]).default:hover {
- -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2;
- -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2;
- -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2;
- -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2;
- box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2;
-
- -webkit-animation-name: glowButtonsHover;
- -webkit-animation-duration: 1s;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-direction: alternate;
- -webkit-animation-timing-function: ease-in-out;
-
- -moz-animation-name: glowButtonsHover;
- -moz-animation-duration: 1s;
- -moz-animation-iteration-count: infinite;
- -moz-animation-direction: alternate;
- -moz-animation-timing-function: ease-in-out;
-
- -ms-animation-name: glowButtonsHover;
- -ms-animation-duration: 1s;
- -ms-animation-iteration-count: infinite;
- -ms-animation-direction: alternate;
- -ms-animation-timing-function: ease-in-out;
- /* disabled to ease rendering work for Opera
- -o-animation-name: glowButtonsHover;
- -o-animation-duration: 1s;
- -o-animation-iteration-count: infinite;
- -o-animation-direction: alternate;
- -o-animation-timing-function: ease-in-out;
- */
- animation-name: glowButtonsHover;
- animation-duration: 1s;
- animation-iteration-count: infinite;
- animation-direction: alternate;
- animation-timing-function: ease-in-out;
-}
-
-/* Default Active State Glow */
-
-@-webkit-keyframes glowDefaultButtonsActive {
- 0% {
- -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
- }
- 100% {
- -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
- }
-}
-@-moz-keyframes glowDefaultButtonsActive {
- 0% {
- -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
- }
- 100% {
- -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
- }
-}
-@-ms-keyframes glowDefaultButtonsActive {
- 0% {
- -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
- }
- 100% {
- -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
- }
-}
-/* disabled to ease rendering work for Opera
-@-o-keyframes glowDefaultButtonsActive {
- 0% {
- -o-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
- }
- 100% {
- -o-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
- }
-}
-*/
-@keyframes glowDefaultButtonsActive {
- 0% {
- box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
- }
- 100% {
- box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
- }
-}
-
-/* Default Active State */
-
-.default .wcf-button:focus,
-input[type='submit']:not([disabled]):focus,
-input[type='button']:not([disabled]).default:focus,
-button:not([disabled]).default:focus,
-
-.default .wcf-button:active,
-input[type='submit']:not([disabled]):active,
-input[type='button']:not([disabled]).default:active,
-button:not([disabled]).default:active {
- -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-
- -webkit-animation-name: glowDefaultButtonsActive;
- -webkit-animation-duration: 1s;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-direction: alternate;
- -webkit-animation-timing-function: ease-in-out;
-
- -moz-animation-name: glowDefaultButtonsActive;
- -moz-animation-duration: 1s;
- -moz-animation-iteration-count: infinite;
- -moz-animation-direction: alternate;
- -moz-animation-timing-function: ease-in-out;
-
- -ms-animation-name: glowDefaultButtonsActive;
- -ms-animation-duration: 1s;
- -ms-animation-iteration-count: infinite;
- -ms-animation-direction: alternate;
- -ms-animation-timing-function: ease-in-out;
- /* disabled to ease rendering work for Opera
- -o-animation-name: glowDefaultButtonsActive;
- -o-animation-duration: 1s;
- -o-animation-iteration-count: infinite;
- -o-animation-direction: alternate;
- -o-animation-timing-function: ease-in-out;
- */
- animation-name: glowDefaultButtonsActive;
- animation-duration: 1s;
- animation-iteration-count: infinite;
- animation-direction: alternate;
- animation-timing-function: ease-in-out;
-}
-
-
-
-/* -- -- -- Special Buttons -- -- -- */
-
-/* Disabled State */
-
-.disabled .wcf-button,
-input[disabled],
-input[type='button'][disabled],
-button[disabled] {
- color: rgba(153, 153, 153, 1);
- cursor: default;
- border-width: 1px;
- border-style: solid;
- border-color: #ccc #bbb #aaa;
- background-color: transparent;
-}
-
-
-
-/* ############## ACP Package List ############## */
-
-/* -- -- -- Application Package -- -- -- */
-
-/* Globals */
-
-.wcf-infoPackageApplication {
- position: relative;
-}
-
-.wcf-infoPackageApplication .wcf-packageApplicationIcon {
- position: absolute;
- top: 30px;
- left: 25px;
- width: 96px;
- height: 96px;
-}
-
-.wcf-infoPackageApplication div {
- margin-bottom: -15px;
- margin-left: 30px;
-}
-
-.wcf-infoPackageApplication footer {
- position: relative;
- right: -15px;
- bottom: -15px;
-}
-
-.wcf-infoPackageApplication footer nav {
- /* General toggle switch for package nav-bar orientation (options: left|center|right) */
- text-align: right;
-}
-
-
-
-/* -- -- -- Package Plugin -- -- -- */
-
-/* Globals */
-
-.wcf-infoPackagePlugin {
- text-align: center;
- margin: 15px 10px 0 0;
- display: inline-block;
- position: relative;
- width: 150px;
- height: 150px;
- overflow: hidden;
-
- -webkit-transition: background, border, color .1s linear;
- -moz-transition: background, border, color .1s linear;
- -ms-transition: background, border, color .1s linear;
- -o-transition: background, border, color .1s linear;
- transition: background, border, color .1s linear;
-}
-
-.wcf-infoPackagePlugin a {
- text-decoration: none;
-}
-
-.wcf-infoPackagePlugin > div > a {
- color: rgba(153, 153, 153, 1);
- background-size: 96px;
- background-position: center 70%;
- background-repeat: no-repeat;
- margin: 1px;
- display: block;
- position: relative;
- width: 148px;
- height: 148px;
-}
-
-.wcf-infoPackagePlugin:hover > div > a {
- color: rgba(102, 102, 102, 1);
-}
-
-.wcf-infoPackagePlugin > div > a > h1 { /* ToDo: h1 inside a ??? */
- font-size: 100%;
- font-weight: bold;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
- word-wrap: break-word;
- margin: 0 -1px;
- padding: 3px 1px;
- display: block;
- position: relative;
- z-index: 100;
-}
-
-.wcf-infoPackagePlugin:hover > div > a > h1 {
- border-bottom: 1px solid rgba(204, 204, 204, 1);
-
- background-color: rgba(0, 0, 0, .015);
- background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
- background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
- background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
- background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
- background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
-}
-
-.wcf-infoPackagePlugin footer {
- margin-top: -22px;
- width: 100%;
-}
-
-.wcf-infoPackagePlugin > div > a > small {
- font-size: 85%;
- font-weight: normal;
- text-shadow: none;
- border-radius: 7px;
- padding: 40px 5px;
- display: block;
- position: absolute;
- top: 0;
- bottom: 0;
- width: 139px;
- opacity: 0;
-
- -webkit-transition: opacity .1s linear;
- -moz-transition: opacity .1s linear;
- -ms-transition: opacity .1s linear;
- -o-transition: opacity .1s linear;
- transition: opacity .1s linear;
-}
-
-.wcf-infoPackagePlugin:hover > div > a > small {
- background-color: rgba(255, 255, 255, .9);
- z-index: 10;
- opacity: 1;
-}
-
-
-
-/* -- -- -- Package Footers -- -- -- */
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .wcf-infoPackageApplication footer nav,
- .wcf-infoPackagePlugin footer nav {
- opacity: 0;
-
- -webkit-transition: opacity .1s linear;
- -moz-transition: opacity .1s linear;
- -ms-transition: opacity .1s linear;
- -o-transition: opacity .1s linear;
- transition: opacity .1s linear;
- }
-
- .wcf-infoPackageApplication:hover footer nav,
- .wcf-infoPackagePlugin:hover footer nav {
- opacity: 1;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .wcf-infoPackageApplication footer nav,
- .wcf-infoPackagePlugin footer nav {
- opacity: 1;
- }
-
-}
-
-
-
-/* ############## TODO: Sortable lists ############## */
-
-/* TODO: Everything is working right now and looks pretty much like similar stuff. Adjust the colors, but take care
- when changing margins/paddings. Keep them relative to each other, otherwise you might encounter a strange
- behavior (in rare cases) which might lead to a situation where you will be unable to move an item properly. - Alex */
-
-/* This is the placeholder (or ghost) which will be inserted on runtime in order to show the possible insertation point - Alex */
-.wcf-sortableListContainer .wcf-badgeYellow {
- border-radius: 5px;
- margin: 3px 0;
- padding: 4px;
-}
-
-/* TODO: This was taken from badgeRed and is used to indicate a list which is not a valid drop target */
-.wcf-badgeYellow.wcf-sortableInvalidTarget {
- color: #c00;
- border: 1px solid #f99;
- background-color: #fee;
-}
-
-/* Notice: min-height was safely removed */
-.wcf-sortableList {
- list-style-position: outside;
- list-style-type: decimal;
- margin-left: 21px;
-}
-
-.wcf-sortableNode {
- cursor: move;
-}
-
-.wcf-sortableNodeLabel {
- border-bottom: 1px solid rgba(216, 231, 245, 1);
- padding: 7px 7px 11px 0;
- display: block; /* Do not use anything other than block here, otherwise the sortables go crazy - Alex */
-}
-
-
-
-
-
-
-/* ############## CSS Experiments (active) ############## */
-
-
-
-
-/* ############## ToDo: Action Proxy Loading ############## */
-
-/* Spinner */
-
-.wcf-spinner {
- text-align: center;
- text-shadow: 0 -1px 0 #000;
- color: #fff;
- border-width: 1px;
- border-style: solid;
- border-color: rgba(0, 0, 0, .3);
- border-radius: 5px;
-
- background-color: rgba(0, 0, 0, .5) !important;
- background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important;
- background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important;
- background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important;
- background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important;
- background-image: linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important;
-
- padding: 7px 0;
- position: fixed;
- top: 200px;
- left: 46%;
- right: 46%;
- width: 70px;
- z-index: 1000;
-
- -webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
- -moz-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
- -ms-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
- -o-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
- box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
-}
-
-.wcf-spinner img {
- margin-bottom: 10px;
- height: 48px;
- width: 48px;
-}
-
-
-
-
-
-
-
-
-
-
-
-/* DEBUG ONLY - DO NOT TOUCH! */
-
-.ajaxDebugMessage p {
- border-bottom: 1px solid rgb(192, 192, 192);
- margin: 0 3px;
- padding: 7px 0 3px 0;
-}
-
-.ajaxDebugMessage p:first-child,
-.ajaxDebugMessage p:last-child {
- border-bottom-width: 0;
- margin: 0;
- padding: 3px;
-}
-
-.ajaxDebugMessage p:last-child {
- font-family: Monospace;
- font-size: 110%;
-}
-
-
-
-
-
-/* Like colors */
-
-.wcf-liked {
- color: #090;
-}
-
-.wcf-disliked {
- color: #900;
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-/* -- -- -- -- -- EOF -- -- -- -- -- */
{include file='header'}
-<header class="wcf-container wcf-mainHeading">
- <img src="{@$__wcf->getPath()}icon/session1.svg" alt="" class="wcf-containerIcon" />
- <hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+ <img src="{@$__wcf->getPath()}icon/session1.svg" alt="" class="icon48" />
+ <hgroup>
<h1>{lang}wcf.acp.sessionLog.access.list{/lang}</h1>
</hgroup>
</header>
-<div class="wcf-contentHeader">
+<div class="contentNavigation">
{pages print=true assign=pagesLinks controller='ACPSessionLog' id=$sessionLogID link="pageNo=%d&sortField=$sortField&sortOrder=$sortOrder"}
</div>
{hascontent}
- <div class="wcf-box wcf-boxTitle wcf-marginTop wcf-shadow1">
+ <div class="tabularBox tabularBoxTitle marginTop shadow">
<hgroup>
- <h1>{lang}wcf.acp.sessionLog.access.list{/lang} <span class="wcf-badge" title="{lang}wcf.acp.sessionLog.access.list.count{/lang}">{#$items}</span></h1>
+ <h1>{lang}wcf.acp.sessionLog.access.list{/lang} <span class="badge" title="{lang}wcf.acp.sessionLog.access.list.count{/lang}">{#$items}</span></h1>
</hgroup>
- <table class="wcf-table">
+ <table class="table">
<thead>
<tr>
<th class="columnID columnSessionAccessLogID{if $sortField == 'sessionAccessLogID'} active{/if}"><a href="{link controller='ACPSessionLog' id=$sessionLogID}pageNo={@$pageNo}&sortField=sessionAccessLogID&sortOrder={if $sortField == 'sessionAccessLogID' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.objectID{/lang}{if $sortField == 'sessionAccessLogID'} <img src="{@$__wcf->getPath()}icon/sort{@$sortOrder}.svg" alt="" />{/if}</a></th>
</div>
- <div class="wcf-contentFooter">
+ <div class="contentNavigation">
{@$pagesLinks}
</div>
{/hascontent}
{include file='header'}
-<header class="wcf-container wcf-mainHeading">
- <img src="{@$__wcf->getPath()}icon/session1.svg" alt="" class="wcf-containerIcon" />
- <hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+ <img src="{@$__wcf->getPath()}icon/session1.svg" alt="" class="icon48" />
+ <hgroup>
<h1>{lang}wcf.acp.sessionLog.list{/lang}</h1>
</hgroup>
</header>
-<div class="wcf-contentHeader">
+<div class="contentNavigation">
{pages print=true assign=pagesLinks controller="ACPSessionLogList" link="pageNo=%d&sortField=$sortField&sortOrder=$sortOrder"}
</div>
{hascontent}
- <div class="wcf-box wcf-boxTitle wcf-marginTop wcf-shadow1">
+ <div class="tabularBox tabularBoxTitle marginTop shadow">
<hgroup>
- <h1>{lang}wcf.acp.sessionLog.list{/lang} <span class="wcf-badge" title="{lang}wcf.acp.sessionLog.list.count{/lang}">{#$items}</span></h1>
+ <h1>{lang}wcf.acp.sessionLog.list{/lang} <span class="badge" title="{lang}wcf.acp.sessionLog.list.count{/lang}">{#$items}</span></h1>
</hgroup>
- <table class="wcf-table">
+ <table class="table">
<thead>
<tr>
<th class="columnSessionLogID{if $sortField == 'sessionLogID'} active{/if}"><a href="{link controller='ACPSessionLogList'}pageNo={@$pageNo}&sortField=sessionLogID&sortOrder={if $sortField == 'sessionLogID' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.objectID{/lang}{if $sortField == 'sessionLogID'} <img src="{@$__wcf->getPath()}icon/sort{@$sortOrder}.svg" alt="" />{/if}</a></th>
{foreach from=$objects item=sessionLog}
<tr class="{if $sessionLog->active} activeContainer{/if}">
<td class="columnID columnSessionLogID"><p>{@$sessionLog->sessionLogID}</p></td>
- <td class="columnTitle columnUsername"><p>{if $__wcf->user->userID == $sessionLog->userID}<img src="{@$__wcf->getPath()}icon/user1.svg" alt="" />{/if} <a href="{link controller='ACPSessionLog' id=$sessionLog->sessionLogID}{/link}">{$sessionLog->username}</a></p></td>
+ <td class="columnTitle columnUsername"><p>{if $__wcf->user->userID == $sessionLog->userID}<img src="{@$__wcf->getPath()}icon/user1.svg" alt=""
class="icon16" />{/if} <a href="{link controller='ACPSessionLog' id=$sessionLog->sessionLogID}{/link}">{$sessionLog->username}</a></p></td>
<td class="columnURL columnIpAddress"><p><a href="{link controller='ACPSessionLog' id=$sessionLog->sessionLogID}{/link}">{$sessionLog->ipAddress}</a>{if $sessionLog->hostname != $sessionLog->ipAddress}<br /><a href="{link controller='ACPSessionLog' id=$sessionLog->sessionLogID}{/link}">{$sessionLog->hostname}</a>{/if}</p></td>
<td class="columnText columnUserAgent"><p><a href="{link controller='ACPSessionLog' id=$sessionLog->sessionLogID}{/link}">{$sessionLog->userAgent}</a></p></td>
<td class="columnDate columnTime"><p>{@$sessionLog->time|time}</p></td>
</table>
</div>
-
- <div class="wcf-contentFooter">
+
+ <div class="contentNavigation">
{@$pagesLinks}
</div>
{/hascontent}
-<p id="benchmark" class="wcf-marginTop" style="font-size: .85em">Execution time: {@$__wcf->getBenchmark()->getExecutionTime()}s ({#($__wcf->getBenchmark()->getExecutionTime()-$__wcf->getBenchmark()->getQueryExecutionTime())/$__wcf->getBenchmark()->getExecutionTime()*100}% PHP, {#$__wcf->getBenchmark()->getQueryExecutionTime()/$__wcf->getBenchmark()->getExecutionTime()*100}% SQL) | SQL queries: {#$__wcf->getBenchmark()->getQueryCount()} | Memory-Usage: {$__wcf->getBenchmark()->getMemoryUsage()}</p>
+<p class="marginTop" id="benchmark"><small>Execution time: {@$__wcf->getBenchmark()->getExecutionTime()}s ({#($__wcf->getBenchmark()->getExecutionTime()-$__wcf->getBenchmark()->getQueryExecutionTime())/$__wcf->getBenchmark()->getExecutionTime()*100}% PHP, {#$__wcf->getBenchmark()->getQueryExecutionTime()/$__wcf->getBenchmark()->getExecutionTime()*100}% SQL) | SQL queries: {#$__wcf->getBenchmark()->getQueryCount()} | Memory-Usage: {$__wcf->getBenchmark()->getMemoryUsage()}</small></p>
{if ENABLE_DEBUG_MODE}
<ul id="benchmarkDetails" style="display: none;">
//]]>
</script>
-<header class="wcf-container wcf-mainHeading">
- <img src="{@$__wcf->getPath()}icon/cache1.svg" alt="" class="wcf-containerIcon" />
- <hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+ <img src="{@$__wcf->getPath()}icon/cache1.svg" alt="" class="icon48" />
+ <hgroup>
<h1>{lang}wcf.acp.cache.list{/lang}</h1>
</hgroup>
</header>
{if $cleared}
- <p class="wcf-success">{lang}wcf.acp.cache.clear.success{/lang}</p>
+ <p class="success">{lang}wcf.acp.cache.clear.success{/lang}</p>
{/if}
<fieldset>
{event name='dataFields'}
</fieldset>
-<div class="wcf-contentHeader">
+<div class="contentNavigation">
<nav>
- <ul class="wcf-largeButtons">
- {if $cacheData.files}<li><a onclick="return confirm('{lang}wcf.acp.cache.clear.sure{/lang}')" href="{link controller='CacheClear'}{/link}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/delete1.svg" alt="" /> <span>{lang}wcf.acp.cache.button.clear{/lang}</span></a></li>{/if}
+ <ul>
+ {if $cacheData.files}<li><a onclick="return confirm('{lang}wcf.acp.cache.clear.sure{/lang}')" href="{link controller='CacheClear'}{/link}" class="button"><img src="{@$__wcf->getPath()}icon/delete1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.cache.button.clear{/lang}</span></a></li>{/if}
{event name='largeButtons'}
</ul>
{foreach from=$caches key=cache item=files}
{counter name=cacheIndex assign=cacheIndex print=false start=0}
{if $files|count}
- <div class="wcf-box wcf-boxTitle wcf-marginTop wcf-shadow1">
- <a class="jsCollapsible" data-is-open="0" data-collapsible-container="cache{@$cacheIndex}"><img src="{@$__wcf->getPath()}icon/closed2.svg" alt="" title="{lang}wcf.global.button.collapsible{/lang}" class="jsTooltip" /></a>
+ <div class="tabularBox tabularBoxTitle marginTop shadow">
<hgroup>
- <h1>{$cache} <span class="wcf-badge" title="{lang}wcf.acp.cache.data.files.count{/lang}">{#$files|count}</span></h1>
+ <h1><a class="jsCollapsible" data-is-open="0" data-collapsible-container="cache{@$cacheIndex}"><img src="{@$__wcf->getPath()}icon/closed2.svg" alt="" title="{lang}wcf.global.button.collapsible{/lang}" class="icon16 jsTooltip" /></a> {$cache} <span class="wcf-badge" title="{lang}wcf.acp.cache.data.files.count{/lang}">{#$files|count}</span></h1>
</hgroup>
- <table id="cache{@$cacheIndex}" style="display: none;" class="wcf-table">
+ <table id="cache{@$cacheIndex}" style="display: none;" class="table">
<thead>
<tr>
<th class="columnTitle">{lang}wcf.acp.cache.list.name{/lang}</th>
{/if}
{/foreach}
-<div class="wcf-contentFooter">
+<div class="contentNavigation">
<nav>
- <ul class="wcf-largeButtons">
- {if $cacheData.files}<li><a onclick="return confirm('{lang}wcf.acp.cache.clear.sure{/lang}')" href="{link controller='CacheClear'}{/link}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/delete1.svg" alt="" /> <span>{lang}wcf.acp.cache.button.clear{/lang}</span></a></li>{/if}
+ <ul>
+ {if $cacheData.files}<li><a onclick="return confirm('{lang}wcf.acp.cache.clear.sure{/lang}')" href="{link controller='CacheClear'}{/link}" class="button"><img src="{@$__wcf->getPath()}icon/delete1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.cache.button.clear{/lang}</span></a></li>{/if}
{event name='largeButtons'}
</ul>
{include file='header'}
-<header class="wcf-container wcf-mainHeading">
- <img src="{@$__wcf->getPath()}icon/{$action}1.svg" alt="" class="wcf-containerIcon" />
- <hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+ <img src="{@$__wcf->getPath()}icon/{$action}1.svg" alt="" class="icon48" />
+ <hgroup>
<h1>{lang}wcf.acp.cronjob.{$action}{/lang}</h1>
<h2>{lang}wcf.acp.cronjob.subtitle{/lang}</h2>
</hgroup>
</header>
{if $errorField}
- <p class="wcf-error">{lang}wcf.global.form.error{/lang}</p>
+ <p class="error">{lang}wcf.global.form.error{/lang}</p>
{/if}
-<p class="wcf-info">{lang}wcf.acp.cronjob.intro{/lang}</p>
+<p class="info">{lang}wcf.acp.cronjob.intro{/lang}</p>
{if $success|isset}
- <p class="wcf-success">{lang}wcf.global.form.{$action}.success{/lang}</p>
+ <p class="success">{lang}wcf.global.form.{$action}.success{/lang}</p>
{/if}
-<div class="wcf-contentHeader">
+<div class="contentNavigation">
<nav>
- <ul class="wcf-largeButtons">
- <li><a href="{link controller='CronjobList'}{/link}" title="{lang}wcf.acp.menu.link.cronjob.list{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/time1.svg" alt="" /> <span>{lang}wcf.acp.menu.link.cronjob.list{/lang}</span></a></li>
+ <ul>
+ <li><a href="{link controller='CronjobList'}{/link}" title="{lang}wcf.acp.menu.link.cronjob.list{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/time1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.menu.link.cronjob.list{/lang}</span></a></li>
{if $action == 'edit'}
- <li><a href="{link controller='CronjobExecute' id=$cronjobID}{/link}" title="{lang}wcf.acp.cronjob.execute{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/run1.svg" alt="" /> <span>{lang}wcf.acp.cronjob.execute{/lang}</span></a></li>
+ <li><a href="{link controller='CronjobExecute' id=$cronjobID}{/link}" title="{lang}wcf.acp.cronjob.execute{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/run1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.cronjob.execute{/lang}</span></a></li>
{/if}
{event name='largeButtons'}
</div>
<form method="post" action="{if $action == 'add'}{link controller='CronjobAdd'}{/link}{else}{link controller='CronjobEdit'}{/link}{/if}">
- <div class="wcf-box wcf-marginTop wcf-boxPadding wcf-boxDecor wcf-shadow1">
-
+ <div class="container containerPadding marginTop shadow">
<fieldset>
<legend>{lang}wcf.acp.cronjob.data{/lang}</legend>
- <dl{if $errorField == 'className'} class="wcf-formError"{/if}>
+ <dl{if $errorField == 'className'} class="formError"{/if}>
<dt><label for="className">{lang}wcf.acp.cronjob.className{/lang}</label></dt>
<dd>
<input type="text" id="className" name="className" value="{$className}" required="required" autofocus="autofocus" pattern="^\\?([a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*\\)*[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*$" class="long" />
{if $errorField == 'className'}
- <small class="wcf-innerError">
+ <small class="innerError">
{if $errorType == 'empty'}
{lang}wcf.global.form.error.empty{/lang}
{else}
<fieldset>
<legend>{lang}wcf.acp.cronjob.timing{/lang}</legend>
- <dl{if $errorField == 'startMinute'} class="wcf-formError"{/if}>
+ <dl{if $errorField == 'startMinute'} class="formError"{/if}>
<dt><label for="startMinute">{lang}wcf.acp.cronjob.startMinute{/lang}</label></dt>
<dd>
<input type="text" id="startMinute" name="startMinute" value="{$startMinute}" class="short" />
{if $errorField == 'startMinute'}
- <small class="wcf-innerError">
+ <small class="innerError">
{lang}wcf.acp.cronjob.timing.error.{@$errorType}{/lang}
</small>
{/if}
</dd>
</dl>
- <dl{if $errorField == 'startHour'} class="wcf-formError"{/if}>
+ <dl{if $errorField == 'startHour'} class="formError"{/if}>
<dt><label for="startHour">{lang}wcf.acp.cronjob.startHour{/lang}</label></dt>
<dd>
<input type="text" id="startHour" name="startHour" value="{$startHour}" class="short" />
{if $errorField == 'startHour'}
- <small class="wcf-innerError">
+ <small class="innerError">
{lang}wcf.acp.cronjob.timing.error.{@$errorType}{/lang}
</small>
{/if}
</dd>
</dl>
- <dl{if $errorField == 'startDom'} class="wcf-formError"{/if}>
+ <dl{if $errorField == 'startDom'} class="formError"{/if}>
<dt><label for="startDom">{lang}wcf.acp.cronjob.startDom{/lang}</label></dt>
<dd>
<input type="text" id="startDom" name="startDom" value="{$startDom}" class="short" />
{if $errorField == 'startDom'}
- <small class="wcf-innerError">
+ <small class="innerError">
{lang}wcf.acp.cronjob.timing.error.{@$errorType}{/lang}
</small>
{/if}
</dd>
</dl>
- <dl{if $errorField == 'startMonth'} class="wcf-formError"{/if}>
+ <dl{if $errorField == 'startMonth'} class="formError"{/if}>
<dt><label for="startMonth">{lang}wcf.acp.cronjob.startMonth{/lang}</label></dt>
<dd>
<input type="text" id="startMonth" name="startMonth" value="{$startMonth}" class="short" />
{if $errorField == 'startMonth'}
- <small class="wcf-innerError">
+ <small class="innerError">
{lang}wcf.acp.cronjob.timing.error.{@$errorType}{/lang}
</small>
{/if}
</dd>
</dl>
- <dl{if $errorField == 'startDow'} class="wcf-formError"{/if}>
+ <dl{if $errorField == 'startDow'} class="formError"{/if}>
<dt><label for="startDow">{lang}wcf.acp.cronjob.startDow{/lang}</label></dt>
<dd>
<input type="text" id="startDow" name="startDow" value="{$startDow}" class="short" />
{if $errorField == 'startDow'}
- <small class="wcf-innerError">
+ <small class="innerError">
{lang}wcf.acp.cronjob.timing.error.{@$errorType}{/lang}
</small>
{/if}
{event name='fieldsets'}
</div>
- <div class="wcf-formSubmit">
- <input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
+ <div class="formSubmit">
<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
- {@SID_INPUT_TAG}
{if $cronjobID|isset}<input type="hidden" name="id" value="{@$cronjobID}" />{/if}
</div>
</form>
{include file='header'}
-<header class="wcf-container wcf-mainHeading">
- <img src="{@$__wcf->getPath()}icon/time1.svg" alt="" class="wcf-containerIcon" />
- <hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+ <img src="{@$__wcf->getPath()}icon/time1.svg" alt="" class="icon48" />
+ <hgroup>
<h1>{lang}wcf.acp.cronjob.list{/lang}</h1>
<h2>{lang}wcf.acp.cronjob.subtitle{/lang}</h2>
</hgroup>
</script>
</header>
-<div class="wcf-contentHeader">
+<div class="contentNavigation">
{pages print=true assign=pagesLinks controller="CronjobList" link="pageNo=%d&sortField=$sortField&sortOrder=$sortOrder"}
{hascontent}
<nav>
- <ul class="wcf-largeButtons">
+ <ul>
{content}
{if $__wcf->session->getPermission('admin.system.cronjob.canAddCronjob')}
- <li><a href="{link controller='CronjobAdd'}{/link}" title="{lang}wcf.acp.cronjob.add{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" /> <span>{lang}wcf.acp.cronjob.add{/lang}</span></a></li>
+ <li><a href="{link controller='CronjobAdd'}{/link}" title="{lang}wcf.acp.cronjob.add{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.cronjob.add{/lang}</span></a></li>
{/if}
{event name='largeButtons'}
</div>
{hascontent}
- <div class="wcf-box wcf-boxTitle wcf-marginTop wcf-shadow1">
+ <div class="tabularBox tabularBoxTitle marginTop shadow">
<hgroup>
- <h1>{lang}wcf.acp.cronjob.list{/lang} <span class="wcf-badge" title="{lang}wcf.acp.cronjob.list.count{/lang}">{#$items}</span></h1>
+ <h1>{lang}wcf.acp.cronjob.list{/lang} <span class="badge" title="{lang}wcf.acp.cronjob.list.count{/lang}">{#$items}</span></h1>
</hgroup>
- <table class="wcf-table">
+ <table class="table">
<thead>
<tr>
<th class="columnID columnCronjobID{if $sortField == 'cronjobID'} active{/if}" colspan="2"><a href="{link controller='CronjobList'}pageNo={@$pageNo}&sortField=cronjobID&sortOrder={if $sortField == 'cronjobID' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.objectID{/lang}{if $sortField == 'cronjobID'} <img src="{@$__wcf->getPath()}icon/sort{@$sortOrder}.svg" alt="" />{/if}</a></th>
<tr class="jsCronjobRow">
<td class="columnIcon">
{if $__wcf->session->getPermission('admin.system.cronjob.canEditCronjob')}
- <img src="{@$__wcf->getPath()}icon/run1.svg" alt="" title="{lang}wcf.acp.cronjob.execute{/lang}" class="jsExecuteButton jsTooltip" data-object-id="{@$cronjob->cronjobID}" />
+ <img src="{@$__wcf->getPath()}icon/run1.svg" alt="" title="{lang}wcf.acp.cronjob.execute{/lang}" class="icon16 jsExecuteButton jsTooltip" data-object-id="{@$cronjob->cronjobID}" />
{else}
- <img src="{@$__wcf->getPath()}icon/run1D.svg" alt="" title="{lang}wcf.acp.cronjob.execute{/lang}" />
+ <img src="{@$__wcf->getPath()}icon/run1D.svg" alt="" title="{lang}wcf.acp.cronjob.execute{/lang}" class="icon16" />
{/if}
{if $cronjob->canBeDisabled()}
- <img src="{@$__wcf->getPath()}icon/{if $cronjob->active}enabled{else}disabled{/if}1.svg" alt="" title="{lang}wcf.global.button.{if $cronjob->active}disable{else}enable{/if}{/lang}" class="jsToggleButton jsTooltip" data-object-id="{@$cronjob->cronjobID}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" />
+ <img src="{@$__wcf->getPath()}icon/{if $cronjob->active}enabled{else}disabled{/if}1.svg" alt="" title="{lang}wcf.global.button.{if $cronjob->active}disable{else}enable{/if}{/lang}" class="icon16 jsToggleButton jsTooltip" data-object-id="{@$cronjob->cronjobID}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" />
{else}
{if $cronjob->active}
- <img src="{@$__wcf->getPath()}icon/enabled1D.svg" alt="" title="{lang}wcf.global.button.disable{/lang}" />
+ <img src="{@$__wcf->getPath()}icon/enabled1D.svg" alt="" title="{lang}wcf.global.button.disable{/lang}" class="icon16" />
{else}
- <img src="{@$__wcf->getPath()}icon/disabled1D.svg" alt="" title="{lang}wcf.global.button.enable{/lang}" />
+ <img src="{@$__wcf->getPath()}icon/disabled1D.svg" alt="" title="{lang}wcf.global.button.enable{/lang}" class="icon16" />
{/if}
{/if}
{if $cronjob->isEditable()}
- <a href="{link controller='CronjobEdit' id=$cronjob->cronjobID}{/link}"><img src="{@$__wcf->getPath()}icon/edit1.svg" alt="" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip" /></a>
+ <a href="{link controller='CronjobEdit' id=$cronjob->cronjobID}{/link}"><img src="{@$__wcf->getPath()}icon/edit1.svg" alt="" title="{lang}wcf.global.button.edit{/lang}" class="icon16 jsTooltip" /></a>
{else}
- <img src="{@$__wcf->getPath()}icon/edit1D.svg" alt="" title="{lang}wcf.global.button.edit{/lang}" />
+ <img src="{@$__wcf->getPath()}icon/edit1D.svg" alt="" title="{lang}wcf.global.button.edit{/lang}" class="icon16" />
{/if}
{if $cronjob->isDeletable()}
- <img src="{@$__wcf->getPath()}icon/delete1.svg" alt="" title="{lang}wcf.global.button.delete{/lang}" class="jsDeleteButton jsTooltip" data-object-id="{@$cronjob->cronjobID}" data-confirm-message="{lang}wcf.acp.cronjob.delete.sure{/lang}" />
+ <img src="{@$__wcf->getPath()}icon/delete1.svg" alt="" title="{lang}wcf.global.button.delete{/lang}" class="icon16 jsDeleteButton jsTooltip" data-object-id="{@$cronjob->cronjobID}" data-confirm-message="{lang}wcf.acp.cronjob.delete.sure{/lang}" />
{else}
- <img src="{@$__wcf->getPath()}icon/delete1D.svg" alt="" title="{lang}wcf.global.button.delete{/lang}" />
+ <img src="{@$__wcf->getPath()}icon/delete1D.svg" alt="" title="{lang}wcf.global.button.delete{/lang}" class="icon16" />
{/if}
{event name='buttons'}
</div>
- <div class="wcf-contentFooter">
+ <div class="contentNavigation">
{@$pagesLinks}
{* todo: add large button event *}
{if $__wcf->session->getPermission('admin.system.cronjob.canAddCronjob')}
<nav>
<ul class="wcf-largeButtons">
- <li><a href="{link controller='CronjobAdd'}{/link}" title="{lang}wcf.acp.cronjob.add{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" /> <span>{lang}wcf.acp.cronjob.add{/lang}</span></a></li>
+ <li><a href="{link controller='CronjobAdd'}{/link}" title="{lang}wcf.acp.cronjob.add{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.cronjob.add{/lang}</span></a></li>
</ul>
</nav>
{/if}
</div>
{hascontentelse}
- <p class="wcf-warning">{lang}wcf.acp.cronjob.noneAvailable{/lang}</p>
+ <p class="warning">{lang}wcf.acp.cronjob.noneAvailable{/lang}</p>
{/hascontent}
{include file='footer'}
{include file='header'}
-<header class="wcf-container wcf-mainHeading">
- <img src="{@$__wcf->getPath()}icon/time1.svg" alt="" class="wcf-containerIcon" />
- <hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+ <img src="{@$__wcf->getPath()}icon/time1.svg" alt="" class="icon48" />
+ <hgroup>
<h1>{lang}wcf.acp.cronjob.log{/lang}</h1>
<h2>{lang}wcf.acp.cronjob.subtitle{/lang}</h2>
</hgroup>
</header>
-<div class="wcf-contentHeader">
+<div class="contentNavigation">
{pages print=true assign=pagesLinks controller="CronjobLogList" link="pageNo=%d&sortField=$sortField&sortOrder=$sortOrder"}
</div>
{hascontent}
<form method="post" action="{link controller='CronjobLogDelete'}{/link}">
- <div class="wcf-box wcf-boxTitle wcf-marginTop wcf-shadow1">
+ <div class="tabularBox tabularBoxTitle marginTop shadow">
<hgroup>
- <h1>{lang}wcf.acp.cronjob.log{/lang} <span class="wcf-badge" title="{lang}wcf.acp.cronjob.log.count{/lang}">{#$items}</span></h1>
+ <h1>{lang}wcf.acp.cronjob.log{/lang} <span class="badge" title="{lang}wcf.acp.cronjob.log.count{/lang}">{#$items}</span></h1>
</hgroup>
- <table class="wcf-table">
+ <table class="table">
<thead>
<tr>
<th class="columnID columnCronjobID{if $sortField == 'cronjobID'} active{/if}"><a href="{link controller='CronjobLogList'}pageNo={@$pageNo}&sortField=cronjobID&sortOrder={if $sortField == 'cronjobID' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.objectID{/lang}{if $sortField == 'cronjobID'} <img src="{@$__wcf->getPath()}icon/sort{@$sortOrder}.svg" alt="" />{/if}</a></th>
</div>
- <div class="wcf-formSubmit">
- {@SID_INPUT_TAG}
+ <div class="formSubmit">
<input type="submit" onclick="return confirm('{lang}wcf.acp.cronjob.log.clear.confirm{/lang}')" value="{lang}wcf.acp.cronjob.log.clear{/lang}" accesskey="c" />
</div>
</form>
- <div class="wcf-contentFooter">
+ <div class="contentNavigation">
{@$pagesLinks}
</div>
{hascontentelse}
- <p class="wcf-info">{lang}wcf.acp.cronjob.log.noEntries{/lang}</p>
+ <p class="info">{lang}wcf.acp.cronjob.log.noEntries{/lang}</p>
{/hascontent}
{include file='footer'}
<!-- /MAIN -->
<!-- FOOTER -->
- <footer id="pageFooter" class="wcf-pageFooter">
- <div>
- <nav id="footerNavigation" class="wcf-footerNavigation">
- <ul>
- <li id="toTopLink" class="toTopLink"><a href="{$__wcf->getAnchor('top')}" title="{lang}wcf.global.scrollUp{/lang}" class="jsTooltip"><img src="{@$__wcf->getPath()}icon/toTop.svg" alt="" /> <span class="invisible">{lang}wcf.global.scrollUp{/lang}</span></a></li>
- {if PACKAGE_ID && SHOW_CLOCK}
- <li class="separator"><p><img src="{@$__wcf->getPath()}icon/time.svg" alt="" /> <span>{@TIME_NOW|plainTime}</span></p></li>
- {/if}
- </ul>
- </nav>
- </div>
-
- {if PACKAGE_ID && ENABLE_BENCHMARK}{include file='benchmark' sandbox=false}{/if}
+ <footer id="pageFooter" class="layoutFluid footer">
+ <nav id="footerNavigation" class="navigation navigationFooter clearfix">
+ <ul class="navigationIcons">
+ <li id="toTopLink" class="toTopLink"><a href="{$__wcf->getAnchor('top')}" title="{lang}wcf.global.scrollUp{/lang}" class="jsTooltip"><img src="{@$__wcf->getPath()}icon/toTop.svg" alt="" class="icon16" /> <span class="invisible">{lang}wcf.global.scrollUp{/lang}</span></a></li>
+ {if PACKAGE_ID && SHOW_CLOCK}
+ <li class="separator"><p><img src="{@$__wcf->getPath()}icon/time.svg" alt="" class="icon16" /> <span>{@TIME_NOW|plainTime}</span></p></li>
+ {/if}
+ </ul>
+ </nav>
- <address class="wcf-copyright"><a href="http://www.woltlab.com" title="Go to the WoltLab website">Copyright © 2001-2012 WoltLab® GmbH</a></address>
+ <div class="footerContent">
+ {if PACKAGE_ID && ENABLE_BENCHMARK}{include file='benchmark' sandbox=false}{/if}
+
+ <address class="copyright marginTop"><a href="http://www.woltlab.com" title="Go to the WoltLab website">Copyright © 2001-2012 WoltLab® GmbH</a></address>
+ </div>
</footer>
<!-- /FOOTER -->
<a id="bottom"></a>
{event name='javascriptInclude'}
<!-- Stylesheets -->
-
- <!-- LESS_FILES
- <link rel="stylesheet/less" type="text/css" media="screen" href="{link controller='LessStylesheets'}{/link}" />
- LESS_FILES -->
+ <link rel="stylesheet/less" type="text/css" href="{@$__wcf->getPath()}style/bootstrap.less" />
+ <script type="text/javascript">
+ //<![CDATA[
+ var less = { env: 'development' };
+ //]]>
+ </script>
<script type="text/javascript" src="{@$__wcf->getPath()}js/3rdParty/less.min.js"></script>
-
- <style type="text/css">
- @import url("{@$__wcf->getPath()}acp/style/wcf.css") screen;
- {*
- @import url("{@$__wcf->getPath()}acp/style/style-{@$__wcf->getLanguage()->getPageDirection()}.css") screen;
-
- @import url("{@$__wcf->getPath()}acp/style/print.css") print;
- *}
- </style>
+ <script type="text/javascript">
+ //<![CDATA[
+ less.watch();
+ //]]>
+ </script>
{*
{if $specialStyles|isset}
$('#sidebarContent').wcfSidebar();
+ WCF.Dropdown.init();
+
{event name='javascriptInit'}
});
//]]>
<body id="tpl{$templateName|ucfirst}">
<a id="top"></a>
<!-- HEADER -->
- <header id="pageHeader" class="wcf-pageHeader">
+ <header id="pageHeader" class="layoutFluid">
<div>
{if $__wcf->user->userID}
<!-- top menu -->
- <nav id="topMenu" class="wcf-topMenu">
- <div>
+ <nav id="topMenu" class="userPanel">
+ <div class="layoutFluid clearfix">
<ul>
- <li id="userMenu" class="wcf-userMenu"><!-- ToDo: We need an ID and/or class for each list here, this ID may also change! -->
- <span class="wcf-dropdownCaption wcf-userAvatarFramed">{lang}wcf.user.userNote{/lang}</span>
- <ul class="wcf-dropdown">
+ <li id="userMenu" class="dropdown">
+ <span class="dropdownToggle" data-toggle="userMenu">{lang}wcf.user.userNote{/lang}</span>
+ <ul class="dropdownMenu">
<li><a href="{link controller='Logout'}t={@SECURITY_TOKEN}{/link}" onclick="return confirm('{lang}wcf.user.logout.sure{/lang}')">{lang}wcf.user.logout{/lang}</a></li>
</ul>
</li>
{/if}
<!-- logo -->
- <div id="logo" class="wcf-logo">
+ <div id="logo" class="logo">
<!-- clickable area -->
<a href="{link controller='Index'}{/link}">
<h1>WoltLab Community Framework 2.0 Alpha 1</h1>
<!-- /logo -->
<!-- main menu -->
- <nav id="mainMenu" class="wcf-mainMenu">
+ <nav id="mainMenu" class="mainMenu">
{* work-around for unknown core-object during WCFSetup *}
{if PACKAGE_ID}
<ul>
<!-- /main menu -->
<!-- header navigation -->
- <nav class="wcf-headerNavigation">
- <ul>
- <li id="toBottomLink" class="toBottomLink"><a href="{@$__wcf->getAnchor('bottom')}" title="{lang}wcf.global.scrollDown{/lang}" class="jsTooltip"><img src="{@$__wcf->getPath()}icon/toBottom.svg" alt="" /> <span class="invisible">{lang}wcf.global.scrollDown{/lang}</span></a></li>
+ <nav class="navigation navigationHeader clearfix">
+ <ul class="navigationIcons">
+ <li id="toBottomLink" class="toBottomLink"><a href="{@$__wcf->getAnchor('bottom')}" title="{lang}wcf.global.scrollDown{/lang}" class="jsTooltip"><img src="{@$__wcf->getPath()}icon/toBottom.svg" alt="" class="icon16" /> <span class="invisible">{lang}wcf.global.scrollDown{/lang}</span></a></li>
</ul>
</nav>
<!-- /header navigation -->
<!-- /HEADER -->
<!-- MAIN -->
- <div id="main" class="wcf-main left">
+ <div id="main" class="layoutFluid sidebarOrientationLeft">
<div>
{hascontent}
<!-- SIDEBAR -->
- <aside class="wcf-sidebar">
+ <aside class="sidebar">
<!-- sidebar menu -->
- <nav id="sidebarContent" class="wcf-sidebarContent">
+ <nav id="sidebarContent" class="sidebarContent">
{content}
{* work-around for unknown core-object during WCFSetup *}
{if PACKAGE_ID}
{foreach from=$__wcf->getACPMenu()->getMenuItems('') item=parentMenuItem}
- <div id="{$parentMenuItem->menuItem}-container" style="display: none;" class="wcf-menuContainer collapsibleMenus" data-parent-menu-item="{$parentMenuItem->menuItem}">
+ <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}
- <h1 class="wcf-menuHeader" data-menu-item="{$menuItem->menuItem}">{lang}{@$menuItem->menuItem}{/lang}</h1>
- <div class="wcf-sidebarContentGroup">
+ <h1 class="menuHeader" data-menu-item="{$menuItem->menuItem}">{lang}{@$menuItem->menuItem}{/lang}</h1>
+ <div class="menuGroupItems">
<ul id="{$menuItem->menuItem}">
{foreach from=$__wcf->getACPMenu()->getMenuItems($menuItem->menuItem) item=menuItemCategory}
{if $__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem)|count > 0}
{/hascontent}
<!-- CONTENT -->
- <section id="content" class="wcf-content wcf-contentDecor">
+ <section id="content" class="content clearfix">
\ No newline at end of file
//]]>
</script>
-<header class="wcf-container wcf-mainHeading setup">
- <img src="{@$__wcf->getPath()}icon/logIn1.svg" alt="" class="wcf-containerIcon" />
- <hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+ <img src="{@$__wcf->getPath()}icon/logIn1.svg" alt="" class="icon48" />
+ <hgroup>
<h1>{@$pageTitle}</h1>
</hgroup>
</header>
<fieldset>
<legend>{lang}wcf.user.login.data{/lang}</legend>
- <dl{if $errorField == 'username'} class="wcf-formError"{/if}>
+ <dl{if $errorField == 'username'} class="formError"{/if}>
<dt><label for="username">{lang}wcf.user.username{/lang}</label></dt>
<dd><input type="text" id="username" name="username" value="{$username}" class="medium" />
{if $errorField == 'username'}
- <small class="wcf-innerError">
+ <small class="innerError">
{if $errorType == 'empty'}
{lang}wcf.global.form.error.empty{/lang}
{else}
</dd>
</dl>
- <dl{if $errorField == 'password'} class="wcf-formError"{/if}>
+ <dl{if $errorField == 'password'} class="formError"{/if}>
<dt><label for="password">{lang}wcf.user.password{/lang}</label></dt>
<dd><input type="password" id="password" name="password" value="" class="medium" />
{if $errorField == 'password'}
- <small class="wcf-innerError">
+ <small class="innerError">
{if $errorType == 'empty'}
{lang}wcf.global.form.error.empty{/lang}
{else}
{event name='fieldsets'}
- <div class="wcf-formSubmit">
+ <div class="formSubmit">
<input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
<input type="hidden" name="url" value="{$url}" />
- {@SID_INPUT_TAG}
</div>
</form>
//]]>
</script>
-<header class="wcf-container wcf-mainHeading">
- <img src="{@$__wcf->getPath()}icon/options1.svg" alt="" class="wcf-containerIcon" />
- <hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+ <img src="{@$__wcf->getPath()}icon/options1.svg" alt="" class="icon48" />
+ <hgroup>
<h1>{lang}wcf.acp.option.category.{$category->categoryName}{/lang}</h1>
{hascontent}<h2>{content}{lang __optional=true}wcf.acp.option.category.{$category->categoryName}.description{/lang}{/content}</h2>{/hascontent}
</hgroup>
</header>
{if $success|isset}
- <p class="wcf-success">{lang}wcf.global.form.edit.success{/lang}</p>
+ <p class="success">{lang}wcf.global.form.edit.success{/lang}</p>
{/if}
{if $errorField}
- <p class="wcf-error">{lang}wcf.global.form.error{/lang}</p>
+ <p class="error">{lang}wcf.global.form.error{/lang}</p>
{/if}
<form method="post" action="{link controller='Option' id=$category->categoryID}{/link}">
- <div class="wcf-tabMenuContainer" data-active="{$activeTabMenuItem}" data-store="activeTabMenuItem">
- <nav class="wcf-tabMenu">
+ <div class="tabMenuContainer" data-active="{$activeTabMenuItem}" data-store="activeTabMenuItem">
+ <nav class="tabMenu">
<ul>
{foreach from=$optionTree item=categoryLevel1}
- <li><a href="#{@$categoryLevel1[object]->categoryName}" title="{lang}wcf.acp.option.category.{@$categoryLevel1[object]->categoryName}{/lang}">{*<span>*}{lang}wcf.acp.option.category.{@$categoryLevel1[object]->categoryName}{/lang}{*</span>*}</a></li>
+ <li><a href="#{@$categoryLevel1[object]->categoryName}" title="{lang}wcf.acp.option.category.{@$categoryLevel1[object]->categoryName}{/lang}">{lang}wcf.acp.option.category.{@$categoryLevel1[object]->categoryName}{/lang}</a></li>
{/foreach}
</ul>
</nav>
{foreach from=$optionTree item=categoryLevel1}
- <div id="{@$categoryLevel1[object]->categoryName}" class="wcf-box wcf-boxPadding wcf-shadow2 wcf-tabMenuContent hidden">
- <hgroup class="wcf-subHeading">
+ <div id="{@$categoryLevel1[object]->categoryName}" class="container containerPadding shadow hidden tabMenuContent">
+ <hgroup class="boxSubHeadline">
<h1>{lang}wcf.acp.option.category.{@$categoryLevel1[object]->categoryName}{/lang}</h1>
<h2>{lang __optional=true}wcf.acp.option.category.{$categoryLevel1[object]->categoryName}.description{/lang}</h2>
</hgroup>
{/foreach}
</div>
- <div class="wcf-formSubmit">
+ <div class="formSubmit">
<input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
- {@SID_INPUT_TAG}
</div>
</form>
<dt{if $optionData[cssClassName]} class="{$optionData[cssClassName]}"{/if}><label for="{$option->optionName}">{lang}{@$langPrefix}{$option->optionName}{/lang}</label></dt>
<dd>{@$optionData[html]}
{if $error}
- <small class="wcf-innerError">
+ <small class="innerError">
{if $error == 'empty'}
{lang}wcf.global.form.error.empty{/lang}
{else}
{include file='header'}
-<header class="wcf-container wcf-mainHeading">
- <img src="{@$__wcf->getPath()}icon/upload1.svg" alt="" class="wcf-containerIcon" />
- <hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+ <img src="{@$__wcf->getPath()}icon/upload1.svg" alt="" class="icon48" />
+ <hgroup>
<h1>{lang}wcf.acp.option.import{/lang}</h1>
</hgroup>
</header>
{if $errorField != ''}
- <p class="wcf-error">{lang}wcf.global.form.error{/lang}</p>
+ <p class="error">{lang}wcf.global.form.error{/lang}</p>
{/if}
{if $success|isset}
- <p class="wcf-success">{lang}wcf.acp.option.import.success{/lang}</p>
+ <p class="success">{lang}wcf.acp.option.import.success{/lang}</p>
{/if}
<form method="post" action="{link controller='OptionImport'}{/link}" enctype="multipart/form-data">
<div>
-
<fieldset>
<legend>{lang}wcf.acp.option.import{/lang}</legend>
- <dl{if $errorField == 'optionImport'} class="wcf-formError"{/if}>
+ <dl{if $errorField == 'optionImport'} class="formError"{/if}>
<dt><label for="optionImport">{lang}wcf.acp.option.import.upload{/lang}</label></dt>
<dd>
<input type="file" id="optionImport" name="optionImport" value="" />
{if $errorField == 'optionImport'}
- <small class="wcf-innerError">
+ <small class="innerError">
{if $errorType == 'empty'}
{lang}wcf.global.form.error.empty{/lang}
{else}
{event name='importFieldsets'}
</div>
-
- <div class="wcf-formSubmit">
+
+ <div class="formSubmit">
<input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
<input type="submit" name="submitButton" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
- {@SID_INPUT_TAG}
</div>
</form>
-<header class="wcf-container wcf-mainHeading">
- <img src="{@$__wcf->getPath()}icon/download1.svg" alt="" class="wcf-containerIcon" />
- <hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+ <img src="{@$__wcf->getPath()}icon/download1.svg" alt="" class="icon48" />
+ <hgroup>
<h1>{lang}wcf.acp.option.export{/lang}</h1>
</hgroup>
</header>
<div>
-
<fieldset>
<legend>{lang}wcf.acp.option.export{/lang}</legend>
-
+
<dl id="optionExportDiv">
<dt><label>{lang}wcf.acp.option.export.download{/lang}</label></dt>
<dd>
- <p><a href="{link controller='OptionExport'}{/link}" id="optionExport" class="wcf-badge wcf-badgeButton wcf-button">{lang}wcf.acp.option.export{/lang}</a></p>
+ <p><a href="{link controller='OptionExport'}{/link}" id="optionExport" class="badge badgeButton button">{lang}wcf.acp.option.export{/lang}</a></p>
<small>{lang}wcf.acp.option.export.download.description{/lang}</small>
</dd>
</dl>
</script>
<form method="post" action="{link controller='PackageUpdate'}{/link}" id="updateForm">
- <header class="wcf-container wcf-mainHeading">
- <img src="{@$__wcf->getPath()}icon/update1.svg" alt="" class="wcf-containerIcon" />
- <hgroup class="wcf-containerContent">
+ <header class="box48 boxHeadline">
+ <img src="{@$__wcf->getPath()}icon/update1.svg" alt="" class="icon48" />
+ <hgroup>
<h1>{lang}wcf.acp.packageUpdate{/lang}</h1>
{if $availableUpdates|count}
<h2><label><input type="checkbox" onclick="checkUncheckAllPackages(document.getElementById('updateForm'))" /> {lang}wcf.acp.packageUpdate.selectAll{/lang}</label></h2>
</header>
{if !$availableUpdates|count}
- <p class="wcf-info">{lang}wcf.acp.packageUpdate.noneAvailable{/lang}</p>
+ <p class="info">{lang}wcf.acp.packageUpdate.noneAvailable{/lang}</p>
{else}
{foreach from=$availableUpdates item=availableUpdate}
<article class="wcf-message wcf-messageDecor{if $availableUpdate.version.updateType == 'security'} wcf-messageRed{/if}"><!-- ToDo: Style! -->
</article>
{/foreach}
- <div class="wcf-formSubmit">
+ <div class="formSubmit">
<input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
- {@SID_INPUT_TAG}
</div>
{/if}
</form>
//]]>
</script>
-<header class="wcf-container wcf-mainHeading">
- <img src="{@$__wcf->getPath()}icon/packageApplication1.svg" alt="" class="wcf-containerIcon" />
- <hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+ <img src="{@$__wcf->getPath()}icon/packageApplication1.svg" alt="" class="icon48" />
+ <hgroup>
<h1>{lang}wcf.acp.package.list{/lang}</h1>
</hgroup>
</header>
-<div class="wcf-tabMenuContainer">
- <nav class="wcf-tabMenu">
+<div class="tabMenuContainer">
+ <nav class="tabMenu">
<ul>
<li><a href="#applications" title="applications">{lang}wcf.acp.package.application.title{/lang}</a></li>
{if $plugins|count}<li><a href="#plugins" title="plugins">{lang}wcf.acp.package.plugin.title{/lang}</a></li>{/if}
</ul>
</nav>
- <div id="applications" class="wcf-box wcf-tabMenuContent wcf-boxPadding wcf-shadow1 hidden">
- <hgroup class="wcf-subHeading">
+ <div id="applications" class="container containerPadding tabMenuContent hidden">
+ <hgroup class="boxSubHeadline">
<h1>{lang}wcf.acp.package.application.installed{/lang}</h1>
</hgroup>
</div>
{hascontent}
- <div id="plugins" class="wcf-box wcf-boxPadding wcf-tabMenuContent wcf-shadow1 hidden">
- <hgroup class="wcf-subHeading">
+ <div id="plugins" class="container containerPadding tabMenuContent hidden">
+ <hgroup class="boxSubHeadline">
<h1>{lang}wcf.acp.package.plugin.installed{/lang}</h1>
</hgroup>
{/hascontent}
</div>
-<div class="wcf-contentFooter">
+<div class="contentNavigation">
<nav>
- <ul class="wcf-largeButtons">
- <li><a href="{link controller='PackageListDetailed'}{/link}" title="{lang}wcf.acp.menu.link.package.list{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/packageApplication1.svg" alt="" /> <span>{lang}wcf.acp.package.list.detailed{/lang}</span></a></li>
+ <ul>
+ <li><a href="{link controller='PackageListDetailed'}{/link}" title="{lang}wcf.acp.menu.link.package.list{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/packageApplication1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.package.list.detailed{/lang}</span></a></li>
</ul>
</nav>
</div>
//]]>
</script>
-<header class="wcf-container wcf-mainHeading">
- <img src="{@$__wcf->getPath()}icon/packageApplication1.svg" alt="" class="wcf-containerIcon" />
- <hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+ <img src="{@$__wcf->getPath()}icon/packageApplication1.svg" alt="" class="icon48" />
+ <hgroup>
<h1>{lang}wcf.acp.package.list{/lang}</h1>
</hgroup>
</header>
-<div class="wcf-contentHeader">
+<div class="contentNavigation">
{pages print=true assign=pagesLinks controller='PackageListDetailed' link="pageNo=%d&sortField=$sortField&sortOrder=$sortOrder"}
{hascontent}
<nav>
- <ul class="wcf-largeButtons">
+ <ul>
{content}
{if $__wcf->session->getPermission('admin.system.package.canInstallPackage')}
- <li><a href="{link controller='PackageStartInstall'}action=install{/link}" title="{lang}wcf.acp.package.startInstall{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" /> <span>{lang}wcf.acp.package.startInstall{/lang}</span></a></li>
+ <li><a href="{link controller='PackageStartInstall'}action=install{/link}" title="{lang}wcf.acp.package.startInstall{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.package.startInstall{/lang}</span></a></li>
{/if}
{event name='largeButtons'}
</div>
{if $objects|count > 0}
- <div class="wcf-box wcf-boxTitle wcf-marginTop wcf-shadow1">
+ <div class="tabularBox tabularBoxTitle marginTop shadow">
<hgroup>
- <h1><a href="{link controller='PackageList'}{/link}">{lang}wcf.acp.package.list{/lang} <span class="wcf-badge" title="{lang}wcf.acp.package.list.count{/lang}">{#$items}</span></a></h1>
+ <h1><a href="{link controller='PackageList'}{/link}">{lang}wcf.acp.package.list{/lang} <span class="badge" title="{lang}wcf.acp.package.list.count{/lang}">{#$items}</span></a></h1>
</hgroup>
- <table class="wcf-table">
+ <table class="table">
<thead>
<tr>
<th colspan="2" class="columnID{if $sortField == 'packageID'} active{/if}"><a href="{link controller='PackageListDetailed'}pageNo={@$pageNo}&sortField=packageID&sortOrder={if $sortField == 'packageID' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.objectID{/lang}{if $sortField == 'packageID'} <img src="{@$__wcf->getPath()}icon/sort{@$sortOrder}.svg" alt="" />{/if}</a></th>
<tr class="jsPackageRow">
<td class="columnIcon">
{if $__wcf->session->getPermission('admin.system.package.canUpdatePackage')}
- <a href="{link controller='PackageStartInstall' id=$package->packageID}action=update{/link}"><img src="{@RELATIVE_WCF_DIR}icon/update1.svg" alt="" title="{lang}wcf.acp.package.button.update{/lang}" class="jsTooltip" /></a>
+ <a href="{link controller='PackageStartInstall' id=$package->packageID}action=update{/link}"><img src="{@RELATIVE_WCF_DIR}icon/update1.svg" alt="" title="{lang}wcf.acp.package.button.update{/lang}" class="icon16 jsTooltip" /></a>
{else}
- <img src="{@$__wcf->getPath()}icon/update1D.svg" alt="" title="{lang}wcf.acp.package.button.update{/lang}" />
+ <img src="{@$__wcf->getPath()}icon/update1D.svg" alt="" title="{lang}wcf.acp.package.button.update{/lang}" class="icon16" />
{/if}
{if $__wcf->session->getPermission('admin.system.package.canUninstallPackage') && $package->package != 'com.woltlab.wcf' && $package->packageID != PACKAGE_ID}
- <img src="{@$__wcf->getPath()}icon/delete1.svg" alt="" title="{lang}wcf.acp.package.button.uninstall{/lang}" class="jsUninstallButton jsTooltip" data-object-id="{@$package->packageID}" data-confirm-message="{lang}wcf.acp.package.uninstallation.confirm{/lang}" />
+ <img src="{@$__wcf->getPath()}icon/delete1.svg" alt="" title="{lang}wcf.acp.package.button.uninstall{/lang}" class="icon16 jsUninstallButton jsTooltip" data-object-id="{@$package->packageID}" data-confirm-message="{lang}wcf.acp.package.uninstallation.confirm{/lang}" />
{else}
- <img src="{@$__wcf->getPath()}icon/delete1D.svg" alt="" title="{lang}wcf.acp.package.button.uninstall{/lang}" />
+ <img src="{@$__wcf->getPath()}icon/delete1D.svg" alt="" title="{lang}wcf.acp.package.button.uninstall{/lang}" class="icon16" />
{/if}
{event name='buttons'}
<td class="columnID"><p>{@$package->packageID}</p></td>
<td class="columnIcon">
{if $package->isApplication}
- <img src="{@$__wcf->getPath()}icon/packageApplication1.svg" alt="" title="{lang}wcf.acp.package.type.application{/lang}" class="jsTooltip" />
+ <img src="{@$__wcf->getPath()}icon/packageApplication1.svg" alt="" title="{lang}wcf.acp.package.type.application{/lang}" class="icon16 jsTooltip" />
{elseif $package->isPlugin()}
- <img src="{@$__wcf->getPath()}icon/packagePlugin1.svg" alt="" title="{lang}wcf.acp.package.type.plugin{/lang}" class="jsTooltip" />
+ <img src="{@$__wcf->getPath()}icon/packagePlugin1.svg" alt="" title="{lang}wcf.acp.package.type.plugin{/lang}" class="icon16 jsTooltip" />
{else}
- <img src="{@$__wcf->getPath()}icon/package1.svg" alt="" title="{lang}wcf.acp.package.type.other{/lang}" class="jsTooltip" />
+ <img src="{@$__wcf->getPath()}icon/package1.svg" alt="" title="{lang}wcf.acp.package.type.other{/lang}" class="icon16 jsTooltip" />
{/if}
</td>
<td id="packageName{@$package->packageID}" class="columnTitle" title="{$package->packageDescription|language}">
</div>
{/if}
-<div class="wcf-contentFooter">
+<div class="contentNavigation">
{@$pagesLinks}
{hascontent}
//]]>
</script>
<nav>
- <ul class="wcf-largeButtons">
+ <ul>
{content}
{if $__wcf->session->getPermission('admin.system.package.canInstallPackage')}
- <li><a href="{link controller='PackageStartInstall'}action=install{/link}" title="{lang}wcf.acp.package.startInstall{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" /> <span>{lang}wcf.acp.package.startInstall{/lang}</span></a></li>
+ <li><a href="{link controller='PackageStartInstall'}action=install{/link}" title="{lang}wcf.acp.package.startInstall{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.package.startInstall{/lang}</span></a></li>
{/if}
{event name='largeButtons'}
{include file='header'}
-<header class="wcf-container wcf-mainHeading">
+<header class="box48 boxHeadline">
{if $packageID == 0}
- <img src="{@$__wcf->getPath()}icon/add1.svg" alt="" class="wcf-containerIcon" />
- <hgroup class="wcf-containerContent">
+ <img src="{@$__wcf->getPath()}icon/add1.svg" alt="" class="icon48" />
+ <hgroup>
<h1>{lang}wcf.acp.package.startInstall{/lang}</h1>
</hgroup>
{else}
- <img src="{@$__wcf->getPath()}icon/update1.svg" alt="" class="wcf-containerIcon" />
- <hgroup class="wcf-containerContent">
+ <img src="{@$__wcf->getPath()}icon/update1.svg" alt="" class="icon48" />
+ <hgroup>
<h1>{lang}wcf.acp.package.startUpdate{/lang}</h1>
</hgroup>
{/if}
</header>
{if $errorField != ''}
- <p class="wcf-error">{lang}wcf.global.form.error{/lang}</p>
+ <p class="error">{lang}wcf.global.form.error{/lang}</p>
{/if}
-<div class="wcf-contentHeader">
+<div class="contentNavigation">
<nav>
- <ul class="wcf-largeButtons">
- <li><a href="{link controller='PackageList'}{/link}" title="{lang}wcf.acp.menu.link.package.list{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/packageApplication1.svg" alt="" /> <span>{lang}wcf.acp.menu.link.package.list{/lang}</span></a></li>
+ <ul>
+ <li><a href="{link controller='PackageList'}{/link}" title="{lang}wcf.acp.menu.link.package.list{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/packageApplication1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.menu.link.package.list{/lang}</span></a></li>
{event name='largeButtons'}
</ul>
</div>
<form method="post" action="{link controller='PackageStartInstall'}{/link}" enctype="multipart/form-data">
- <div class="wcf-box wcf-marginTop wcf-boxPadding wcf-boxDecor wcf-shadow1">
-
+ <div class="container containerPadding marginTop shadow">
<fieldset>
<legend>{lang}wcf.acp.package.source{/lang}</legend>
- <dl{if $errorField == 'uploadPackage'} class="wcf-formError"{/if}>
+ <dl{if $errorField == 'uploadPackage'} class="formError"{/if}>
<dt><label for="uploadPackage">{lang}wcf.acp.package.source.upload{/lang}</label></dt>
<dd>
<input type="file" id="uploadPackage" name="uploadPackage" value="" />
{if $errorField == 'uploadPackage'}
- <small class="wcf-innerError">
+ <small class="innerError">
{if $errorType == 'empty'}
{lang}wcf.global.form.error.empty{/lang}
{elseif $errorType == 'phpRequirements'}
</dd>
</dl>
- <dl{if $errorField == 'downloadPackage'} class="wcf-formError"{/if}>
+ <dl{if $errorField == 'downloadPackage'} class="formError"{/if}>
<dt><label for="downloadPackage">{lang}wcf.acp.package.source.download{/lang}</label></dt>
<dd>
<input type="text" id="downloadPackage" name="downloadPackage" value="" class="long" />
{if $errorField == 'downloadPackage'}
- <small class="wcf-innerError">
+ <small class="innerError">
{lang}wcf.acp.package.error.{@$errorType}{/lang}
</small>
{/if}
{event name='fieldsets'}
</div>
- <div class="wcf-formSubmit">
+ <div class="formSubmit">
<input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
<input type="submit" name="submitButton" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
- {@SID_INPUT_TAG}
<input type="hidden" name="action" value="{$action}" />
{if $packageID != 0}<input type="hidden" name="id" value="{@$packageID}" />{/if}
</div>
//]]>
</script>
-<header class="wcf-container wcf-mainHeading">
- <img src="{@$__wcf->getPath()}icon/search1.svg" alt="" class="wcf-containerIcon" />
- <hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+ <img src="{@$__wcf->getPath()}icon/search1.svg" alt="" class="icon48" />
+ <hgroup>
<h1>{lang}wcf.acp.packageUpdate.search{/lang}</h1>
</hgroup>
</header>
{if $errorField != ''}
- <p class="wcf-error">{lang}wcf.acp.packageUpdate.noneAvailable{/lang}</p>
+ <p class="error">{lang}wcf.acp.packageUpdate.noneAvailable{/lang}</p>
{/if}
{if !$updateServers|count}
- <p class="wcf-warning">{lang}wcf.acp.updateServer.view.noneAvailable{/lang}</p>
+ <p class="warning">{lang}wcf.acp.updateServer.view.noneAvailable{/lang}</p>
{else}
<form method="post" action="{link controller='PackageUpdateSearch'}{/link}">
- <div class="wcf-box wcf-marginTop wcf-boxPadding wcf-boxDecor">
-
+ <div class="container containerPadding marginTop shadow">
<fieldset>
<legend>{lang}wcf.acp.packageUpdate.search.server{/lang}</legend>
</dd>
</dl>
</fieldset>
-
</div>
- <div class="wcf-formSubmit">
+ <div class="formSubmit">
<input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
- {@SID_INPUT_TAG}
</div>
</form>
{/if}
{include file='header'}
-<header class="wcf-container wcf-mainHeading">
- <img src="{@$__wcf->getPath()}icon/{@$action}1.svg" alt="" class="wcf-containerIcon" />
- <hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+ <img src="{@$__wcf->getPath()}icon/{@$action}1.svg" alt="" class="icon48" />
+ <hgroup>
<h1>{lang}wcf.acp.updateServer.{$action}{/lang}</h1>
</hgroup>
</header>
{if $errorField}
- <p class="wcf-error">{lang}wcf.global.form.error{/lang}</p>
+ <p class="error">{lang}wcf.global.form.error{/lang}</p>
{/if}
{if $packageUpdateServer|isset && $packageUpdateServer->errorMessage}
- <p class="wcf-warning">{lang}wcf.acp.updateServer.lastErrorMessage{/lang}<br />{$packageUpdateServer->errorMessage}</p>
+ <p class="warning">{lang}wcf.acp.updateServer.lastErrorMessage{/lang}<br />{$packageUpdateServer->errorMessage}</p>
{/if}
{if $success|isset}
- <p class="wcf-success">{lang}wcf.global.form.{$action}.success{/lang}</p>
+ <p class="success">{lang}wcf.global.form.{$action}.success{/lang}</p>
{/if}
-<div class="wcf-contentHeader">
+<div class="contentNavigation">
<nav>
- <ul class="wcf-largeButtons">
- <li><a href="{link controller='UpdateServerList'}{/link}" title="{lang}wcf.acp.menu.link.package.server.list{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/server1.svg" alt="" /> <span>{lang}wcf.acp.menu.link.package.server.list{/lang}</span></a></li>
+ <ul>
+ <li><a href="{link controller='UpdateServerList'}{/link}" title="{lang}wcf.acp.menu.link.package.server.list{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/server1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.menu.link.package.server.list{/lang}</span></a></li>
{event name='largeButtons'}
</ul>
</div>
<form method="post" action="{if $action == 'add'}{link controller='UpdateServerAdd'}{/link}{else}{link controller='UpdateServerEdit'}{/link}{/if}">
- <div class="wcf-box wcf-marginTop wcf-boxPadding wcf-boxDecor">
-
+ <div class="container containerPadding marginTop shadow">
<fieldset>
<legend>{lang}wcf.acp.updateServer.data{/lang}</legend>
- <dl{if $errorField == 'serverURL'} class="wcf-formError"{/if}>
+ <dl{if $errorField == 'serverURL'} class="formError"{/if}>
<dt><label for="serverURL">{lang}wcf.acp.updateServer.serverURL{/lang}</label></dt>
<dd>
<input type="url" id="serverURL" name="serverURL" value="{$serverURL}" required="required" autofocus="autofocus" class="long" />
{if $errorField == 'serverURL'}
- <small class="wcf-innerError">
+ <small class="innerError">
{if $errorType == 'empty'}
{lang}wcf.global.form.error.empty{/lang}
{else}
{event name='fieldsets'}
</div>
- <div class="wcf-formSubmit">
- <input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
+ <div class="formSubmit">
<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
{if $packageUpdateServerID|isset}<input type="hidden" name="id" value="{@$packageUpdateServerID}" />{/if}
- {@SID_INPUT_TAG}
</div>
</form>
//]]>
</script>
-<header class="wcf-container wcf-mainHeading">
- <img src="{@$__wcf->getPath()}icon/server1.svg" alt="" class="wcf-containerIcon" />
- <hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+ <img src="{@$__wcf->getPath()}icon/server1.svg" alt="" class="icon48" />
+ <hgroup>
<h1>{lang}wcf.acp.updateServer.list{/lang}</h1>
</hgroup>
</header>
{if $deletedPackageUpdateServerID}
- <p class="wcf-success">{lang}wcf.acp.updateServer.delete.success{/lang}</p>
+ <p class="success">{lang}wcf.acp.updateServer.delete.success{/lang}</p>
{/if}
-<div class="wcf-contentHeader">
+<div class="contentNavigation">
{pages print=true assign=pagesLinks controller="UpdateServerList" link="pageNo=%d&sortField=$sortField&sortOrder=$sortOrder"}
<nav>
- <ul class="wcf-largeButtons">
- <li><a href="{link controller='UpdateServerAdd'}{/link}" title="{lang}wcf.acp.updateServer.add{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" /> <span>{lang}wcf.acp.updateServer.add{/lang}</span></a></li>
+ <ul>
+ <li><a href="{link controller='UpdateServerAdd'}{/link}" title="{lang}wcf.acp.updateServer.add{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.updateServer.add{/lang}</span></a></li>
{event name='largeButtons'}
</ul>
</div>
{hascontent}
- <div class="wcf-box wcf-boxTitle wcf-marginTop wcf-shadow1">
+ <div class="tabularBox tabularBoxTitle marginTop shadow">
<hgroup>
- <h1>{lang}wcf.acp.updateServer.list{/lang} <span class="wcf-badge" title="{lang}wcf.acp.updateServer.list.count{/lang}">{#$items}</span></h1>
+ <h1>{lang}wcf.acp.updateServer.list{/lang} <span class="badge" title="{lang}wcf.acp.updateServer.list.count{/lang}">{#$items}</span></h1>
</hgroup>
- <table class="wcf-table big">
+ <table class="table">
<thead>
<tr>
<th class="columnID columnPackageUpdateServerID{if $sortField == 'packageUpdateServerID'} active{/if}" colspan="2"><a href="{link controller='UpdateServerList'}pageNo={@$pageNo}&sortField=packageUpdateServerID&sortOrder={if $sortField == 'packageUpdateServerID' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.objectID{/lang}{if $sortField == 'packageUpdateServerID'} <img src="{@$__wcf->getPath()}icon/sort{@$sortOrder}.svg" alt="" />{/if}</a></th>
{foreach from=$objects item=updateServer}
<tr class="jsUpdateServerRow">
<td class="columnIcon">
- <img src="{@$__wcf->getPath()}icon/{if !$updateServer->disabled}enabled{else}disabled{/if}1.svg" alt="" title="{lang}wcf.global.button.{if !$updateServer->disabled}disable{else}enable{/if}{/lang}" class="jsToggleButton jsTooltip" data-object-id="{@$updateServer->packageUpdateServerID}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" />
- <a href="{link controller='UpdateServerEdit' id=$updateServer->packageUpdateServerID}{/link}"><img src="{@$__wcf->getPath()}icon/edit1.svg" alt="" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip" /></a>
- <img src="{@$__wcf->getPath()}icon/delete1.svg" alt="" title="{lang}wcf.global.button.delete{/lang}" class="jsDeleteButton jsTooltip" data-object-id="{@$updateServer->packageUpdateServerID}" data-confirm-message="{lang}wcf.acp.updateServer.delete.sure{/lang}" />
+ <img src="{@$__wcf->getPath()}icon/{if !$updateServer->disabled}enabled{else}disabled{/if}1.svg" alt="" title="{lang}wcf.global.button.{if !$updateServer->disabled}disable{else}enable{/if}{/lang}" class="icon16 jsToggleButton jsTooltip" data-object-id="{@$updateServer->packageUpdateServerID}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" />
+ <a href="{link controller='UpdateServerEdit' id=$updateServer->packageUpdateServerID}{/link}"><img src="{@$__wcf->getPath()}icon/edit1.svg" alt="" title="{lang}wcf.global.button.edit{/lang}" class="icon16 jsTooltip" /></a>
+ <img src="{@$__wcf->getPath()}icon/delete1.svg" alt="" title="{lang}wcf.global.button.delete{/lang}" class="icon16 jsDeleteButton jsTooltip" data-object-id="{@$updateServer->packageUpdateServerID}" data-confirm-message="{lang}wcf.acp.updateServer.delete.sure{/lang}" />
{event name='buttons'}
</td>
</div>
- <div class="wcf-contentFooter">
+ <div class="contentNavigation">
{@$pagesLinks}
<nav>
- <ul class="wcf-largeButtons">
- <li><a href="{link controller='UpdateServerAdd'}{/link}" title="{lang}wcf.acp.updateServer.add{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" /> <span>{lang}wcf.acp.updateServer.add{/lang}</span></a></li>
+ <ul>
+ <li><a href="{link controller='UpdateServerAdd'}{/link}" title="{lang}wcf.acp.updateServer.add{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.updateServer.add{/lang}</span></a></li>
{event name='largeButtons'}
</ul>
//]]>
</script>
-<header class="wcf-container wcf-mainHeading">
- <img {if $userID|isset}id="userEdit{@$userID}" {/if}src="{@$__wcf->getPath()}icon/{@$action}1.svg" alt="" class="wcf-containerIcon" />
- <hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+ <img {if $userID|isset}id="userEdit{@$userID}" {/if}src="{@$__wcf->getPath()}icon/{@$action}1.svg" alt="" class="icon48" />
+ <hgroup>
<h1>{lang}wcf.acp.user.{@$action}{/lang}</h1>
</hgroup>
</header>
{if $errorField}
- <p class="wcf-error">{lang}wcf.global.form.error{/lang}</p>
+ <p class="error">{lang}wcf.global.form.error{/lang}</p>
{/if}
{if $userID|isset && $__wcf->user->userID == $userID}
- <p class="wcf-warning">{lang}wcf.acp.user.edit.warning.selfEdit{/lang}</p>
+ <p class="warning">{lang}wcf.acp.user.edit.warning.selfEdit{/lang}</p>
{/if}
{if $success|isset}
- <p class="wcf-success">{lang}wcf.global.form.{@$action}.success{/lang}</p>
+ <p class="success">{lang}wcf.global.form.{@$action}.success{/lang}</p>
{/if}
-<div class="wcf-contentHeader">
+<div class="contentNavigation">
<nav>
- <ul class="wcf-largeButtons">
- <li><a href="{link controller='UserList'}{/link}" title="{lang}wcf.acp.menu.link.user.list{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/users1.svg" alt="" /> <span>{lang}wcf.acp.menu.link.user.list{/lang}</span></a></li>
- <li><a href="{link controller='UserSearch'}{/link}" title="{lang}wcf.acp.user.search{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/search1.svg" alt="" /> <span>{lang}wcf.acp.user.search{/lang}</span></a></li>
+ <ul>
+ <li><a href="{link controller='UserList'}{/link}" title="{lang}wcf.acp.menu.link.user.list{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/users1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.menu.link.user.list{/lang}</span></a></li>
+ <li><a href="{link controller='UserSearch'}{/link}" title="{lang}wcf.acp.user.search{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/search1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.user.search{/lang}</span></a></li>
{event name='largeButtons'}
</ul>
</div>
<form method="post" action="{if $action == 'add'}{link controller='UserAdd'}{/link}{else}{link controller='UserEdit'}{/link}{/if}">
- <div class="wcf-box wcf-marginTop wcf-boxPadding wcf-boxDecor wcf-shadow1">
- <dl{if $errorType.username|isset} class="wcf-formError"{/if}>
+ <div class="container containerPadding marginTop shadow">
+ <dl{if $errorType.username|isset} class="formError"{/if}>
<dt><label for="username">{lang}wcf.user.username{/lang}</label></dt>
<dd>
<input type="text" id="username" name="username" value="{$username}" pattern="^[^,\n]+$" autofocus="autofocus" class="medium" />
{if $errorType.username|isset}
- <small class="wcf-innerError">
+ <small class="innerError">
{if $errorType.username == 'empty'}
{lang}wcf.global.form.error.empty{/lang}
{else}
<fieldset>
<legend>{lang}wcf.user.email{/lang}</legend>
- <dl{if $errorType.email|isset} class="wcf-formError"{/if}>
+ <dl{if $errorType.email|isset} class="formError"{/if}>
<dt><label for="email">{lang}wcf.user.email{/lang}</label></dt>
<dd>
<input type="email" id="email" name="email" value="{$email}" required="required" class="medium" />
{if $errorType.email|isset}
- <small class="wcf-innerError">
+ <small class="innerError">
{if $errorType.email == 'empty'}
{lang}wcf.global.form.error.empty{/lang}
{else}
</dd>
</dl>
- <dl{if $errorType.confirmEmail|isset} class="wcf-formError"{/if}>
+ <dl{if $errorType.confirmEmail|isset} class="formError"{/if}>
<dt><label for="confirmEmail">{lang}wcf.user.confirmEmail{/lang}</label></dt>
<dd>
<input type="email" id="confirmEmail" name="confirmEmail" value="{$confirmEmail}" required="required" class="medium" />
{if $errorType.confirmEmail|isset}
- <small class="wcf-innerError">
+ <small class="innerError">
{lang}wcf.user.confirmEmail.error.{@$errorType.confirmEmail}{/lang}
</small>
{/if}
<fieldset>
<legend>{lang}wcf.user.password{/lang}</legend>
- <dl{if $errorType.password|isset} class="wcf-formError"{/if}>
+ <dl{if $errorType.password|isset} class="formError"{/if}>
<dt><label for="password">{lang}wcf.user.password{/lang}</label></dt>
<dd>
<input type="password" id="password" name="password" value="{$password}"{if $action == 'add'} required="required"{/if} class="medium" />
{if $errorType.password|isset}
- <small class="wcf-innerError">
+ <small class="innerError">
{if $errorType.password == 'empty'}
{lang}wcf.global.form.error.empty{/lang}
{else}
</dd>
</dl>
- <dl{if $errorType.confirmPassword|isset} class="wcf-formError"{/if}>
+ <dl{if $errorType.confirmPassword|isset} class="formError"{/if}>
<dt><label for="confirmPassword">{lang}wcf.user.confirmPassword{/lang}</label></dt>
<dd>
<input type="password" id="confirmPassword" name="confirmPassword" value="{$confirmPassword}"{if $action == 'add'} required="required"{/if} class="medium" />
{if $errorType.confirmPassword|isset}
- <small class="wcf-innerError">
+ <small class="innerError">
{lang}wcf.user.confirmPassword.error.{@$errorType.confirmPassword}{/lang}
</small>
{/if}
{event name='fieldsets'}
{if $optionTree|count || $additionalTabs|isset}
- <div class="wcf-tabMenuContainer">
- <nav class="wcf-tabMenu">
+ <div class="tabMenuContainer">
+ <nav class="tabMenu">
<ul>
{foreach from=$optionTree item=categoryLevel1}
<li><a href="#{@$categoryLevel1[object]->categoryName}">{lang}wcf.user.option.category.{@$categoryLevel1[object]->categoryName}{/lang}</a></li>
</nav>
{foreach from=$optionTree item=categoryLevel1}
- <div id="{@$categoryLevel1[object]->categoryName}" class="wcf-box wcf-boxPadding wcf-tabMenuContent">
- <hgroup class="wcf-subHeading">
+ <div id="{@$categoryLevel1[object]->categoryName}" class="container containerPadding tabMenuContent hidden">
+ <hgroup class="boxSubHeadline">
<h1>{lang}wcf.user.option.category.{@$categoryLevel1[object]->categoryName}{/lang}</h1>
</hgroup>
{/if}
</div>
- <div class="wcf-formSubmit">
- <input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
+ <div class="formSubmit">
<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
- {@SID_INPUT_TAG}
- <input type="hidden" name="action" value="{@$action}" />
+ <input type="hidden" name="action" value="{@$action}" />
{if $userID|isset}<input type="hidden" name="id" value="{@$userID}" />{/if}
</div>
</form>
//]]>
</script>
-<header class="wcf-container wcf-mainHeading">
- <img src="{@$__wcf->getPath()}icon/{@$action}1.svg" alt="" class="wcf-containerIcon" />
- <hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+ <img src="{@$__wcf->getPath()}icon/{@$action}1.svg" alt="" class="icon48" />
+ <hgroup>
<h1>{lang}wcf.acp.group.{@$action}{/lang}</h1>
</hgroup>
</header>
{if $errorField}
- <p class="wcf-error">{lang}wcf.global.form.error{/lang}</p>
+ <p class="error">{lang}wcf.global.form.error{/lang}</p>
{/if}
{if $warningSelfEdit|isset}
- <p class="wcf-warning">{lang}wcf.acp.group.edit.warning.selfIsMember{/lang}</p>
+ <p class="warning">{lang}wcf.acp.group.edit.warning.selfIsMember{/lang}</p>
{/if}
{if $success|isset}
- <p class="wcf-success">{lang}wcf.global.form.{@$action}.success{/lang}</p>
+ <p class="success">{lang}wcf.global.form.{@$action}.success{/lang}</p>
{/if}
-<div class="wcf-contentHeader">
+<div class="contentNavigation">
<nav>
- <ul class="wcf-largeButtons">
- <li><a href="{link controller='UserGroupList'}{/link}" title="{lang}wcf.acp.menu.link.group.list{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/users1.svg" alt="" /> <span>{lang}wcf.acp.menu.link.group.list{/lang}</span></a></li>
+ <ul>
+ <li><a href="{link controller='UserGroupList'}{/link}" title="{lang}wcf.acp.menu.link.group.list{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/users1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.menu.link.group.list{/lang}</span></a></li>
{event name='largeButtons'}
</ul>
</div>
<form method="post" action="{if $action == 'add'}{link controller='UserGroupAdd'}{/link}{else}{link controller='UserGroupEdit'}{/link}{/if}">
- <div class="wcf-box wcf-marginTop wcf-boxPadding wcf-boxDecor">
-
+ <div class="container containerPadding marginTop shadow">
<fieldset>
<legend>{lang}wcf.acp.group.data{/lang}</legend>
<dd>
<input type="text" id="groupName" name="groupName" value="{$i18nPlainValues['groupName']}" autofocus="autofocus" class="medium" />
{if $errorType.groupName|isset}
- <small class="wcf-innerError">
+ <small class="innerError">
{if $errorType.groupName == 'empty'}
{lang}wcf.global.form.error.empty{/lang}
{else}
{event name='fieldsets'}
- <div class="wcf-tabMenuContainer" data-active="{$activeMenuItem}" data-store="activeTabMenuItem">
- <nav class="wcf-tabMenu">
+ <div class="tabMenuContainer" data-active="{$activeMenuItem}" data-store="activeTabMenuItem">
+ <nav class="tabMenu">
<ul>
{foreach from=$optionTree item=categoryLevel1}
<li><a href="#{@$categoryLevel1[object]->categoryName}">{lang}wcf.acp.group.option.category.{@$categoryLevel1[object]->categoryName}{/lang}</a></li>
</nav>
{foreach from=$optionTree item=categoryLevel1}
- <div id="{@$categoryLevel1[object]->categoryName}" class="wcf-box wcf-boxPadding wcf-tabMenuContainer wcf-tabMenuContent" data-active="{$activeTabMenuItem}" data-store="activeMenuItem">
- <nav class="wcf-menu">
+ <div id="{@$categoryLevel1[object]->categoryName}" class="container containerPadding tabMenuContainer tabMenuContent" data-active="{$activeTabMenuItem}" data-store="activeMenuItem">
+ <nav class="menu">
<ul>
{foreach from=$categoryLevel1[categories] item=$categoryLevel2}
<li><a href="#{@$categoryLevel1[object]->categoryName}-{@$categoryLevel2[object]->categoryName}">{lang}wcf.acp.group.option.category.{@$categoryLevel2[object]->categoryName}{/lang}</a></li>
{foreach from=$categoryLevel1[categories] item=categoryLevel2}
<div id="{@$categoryLevel1[object]->categoryName}-{@$categoryLevel2[object]->categoryName}" class="hidden">
- <hgroup class="wcf-subHeading">
+ <hgroup class="boxSubHeadline">
<h1>{lang}wcf.acp.group.option.category.{@$categoryLevel2[object]->categoryName}{/lang}</h1>
{hascontent}<h2>{content}{lang __optional=true}wcf.acp.group.option.category.{@$categoryLevel2[object]->categoryName}.description{/lang}{/content}</h2>{/hascontent}
</hgroup>
</div>
</div>
- <div class="wcf-formSubmit">
- <input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
+ <div class="formSubmit">
<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
- {@SID_INPUT_TAG}
- <input type="hidden" name="action" value="{@$action}" />
+ <input type="hidden" name="action" value="{@$action}" />
{if $groupID|isset}<input type="hidden" name="id" value="{@$groupID}" />{/if}
<input type="hidden" id="activeTabMenuItem" name="activeTabMenuItem" value="{$activeTabMenuItem}" />
<input type="hidden" id="activeMenuItem" name="activeMenuItem" value="{$activeMenuItem}" />
//]]>
</script>
-<header class="wcf-container wcf-mainHeading">
- <img src="{@$__wcf->getPath()}icon/users1.svg" alt="" class="wcf-containerIcon" />
- <hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+ <img src="{@$__wcf->getPath()}icon/users1.svg" alt="" class="icon48" />
+ <hgroup>
<h1>{lang}wcf.acp.group.list{/lang}</h1>
</hgroup>
</header>
-<div class="wcf-contentHeader">
+<div class="contentNavigation">
{pages print=true assign=pagesLinks controller="UserGroupList" link="pageNo=%d&sortField=$sortField&sortOrder=$sortOrder"}
<nav>
- <ul class="wcf-largeButtons">
- <li><a href="{link controller='UserGroupAdd'}{/link}" title="{lang}wcf.acp.group.add{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" /> <span>{lang}wcf.acp.group.add{/lang}</span></a></li>
+ <ul>
+ <li><a href="{link controller='UserGroupAdd'}{/link}" title="{lang}wcf.acp.group.add{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.group.add{/lang}</span></a></li>
{event name='largeButtons'}
</ul>
</div>
{hascontent}
- <div class="wcf-box wcf-boxTitle wcf-marginTop wcf-shadow1">
+ <div class="tabularBox tabularBoxTitle marginTop shadow">
<hgroup>
- <h1>{lang}wcf.acp.group.list{/lang} <span class="wcf-badge" title="{lang}wcf.acp.group.list.count{/lang}">{#$items}</span></h1>
+ <h1>{lang}wcf.acp.group.list{/lang} <span class="badge" title="{lang}wcf.acp.group.list.count{/lang}">{#$items}</span></h1>
</hgroup>
- <table class="wcf-table big">
+ <table class="table">
<thead>
<tr>
<th class="columnID columnGroupID{if $sortField == 'groupID'} active{/if}" colspan="2"><a href="{link controller='UserGroupList'}pageNo={@$pageNo}&sortField=groupID&sortOrder={if $sortField == 'groupID' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.objectID{/lang}{if $sortField == 'groupID'} <img src="{@$__wcf->getPath()}icon/sort{@$sortOrder}.svg" alt="" />{/if}</a></th>
<tr id="groupContainer{@$group->groupID}" class="jsUserGroupRow">
<td class="columnIcon">
{if $group->isEditable()}
- <a href="{link controller='UserGroupEdit' id=$group->groupID}{/link}"><img src="{@$__wcf->getPath()}icon/edit1.svg" alt="" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip" /></a>
+ <a href="{link controller='UserGroupEdit' id=$group->groupID}{/link}"><img src="{@$__wcf->getPath()}icon/edit1.svg" alt="" title="{lang}wcf.global.button.edit{/lang}" class="icon16 jsTooltip" /></a>
{else}
- <img src="{@$__wcf->getPath()}icon/edit1D.svg" alt="" title="{lang}wcf.acp.group.edit{/lang}" />
+ <img src="{@$__wcf->getPath()}icon/edit1D.svg" alt="" title="{lang}wcf.acp.group.edit{/lang}" class="icon16" />
{/if}
{if $group->isDeletable()}
- <img src="{@$__wcf->getPath()}icon/delete1.svg" alt="" title="{lang}wcf.global.button.delete{/lang}" class="jsDeleteButton jsTooltip" data-object-id="{@$group->groupID}" data-confirm-message="{lang}wcf.acp.group.delete.sure{/lang}" />
+ <img src="{@$__wcf->getPath()}icon/delete1.svg" alt="" title="{lang}wcf.global.button.delete{/lang}" class="icon16 jsDeleteButton jsTooltip" data-object-id="{@$group->groupID}" data-confirm-message="{lang}wcf.acp.group.delete.sure{/lang}" />
{else}
- <img src="{@$__wcf->getPath()}icon/delete1D.svg" alt="" title="{lang}wcf.global.button.delete{/lang}" />
+ <img src="{@$__wcf->getPath()}icon/delete1D.svg" alt="" title="{lang}wcf.global.button.delete{/lang}" class="icon16" />
{/if}
{event name='buttons'}
</div>
- <div class="wcf-contentFooter">
+ <div class="contentNavigation">
{@$pagesLinks}
<nav>
- <ul class="wcf-largeButtons">
- <li><a href="{link controller='UserGroupAdd'}{/link}" title="{lang}wcf.acp.group.add{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" /> <span>{lang}wcf.acp.group.add{/lang}</span></a></li>
+ <ul>
+ <li><a href="{link controller='UserGroupAdd'}{/link}" title="{lang}wcf.acp.group.add{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.group.add{/lang}</span></a></li>
{event name='largeButtons'}
</ul>
//]]>
</script>
-<header class="wcf-container wcf-mainHeading">
- <img src="{@$__wcf->getPath()}icon/{if $searchID}search{else}user{/if}1.svg" alt="" class="wcf-containerIcon" />
- <hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+ <img src="{@$__wcf->getPath()}icon/{if $searchID}search{else}user{/if}1.svg" alt="" class="icon48" />
+ <hgroup>
<h1>{lang}wcf.acp.user.{if $searchID}search{else}list{/if}{/lang}</h1>
- <h2>{if $searchID}{lang}wcf.acp.user.search.matches{/lang}{/if}</h2><!-- ToDo: deprecated display -->
</hgroup>
</header>
{assign var=encodedURL value=$url|rawurlencode}
{assign var=encodedAction value=$action|rawurlencode}
-<div class="wcf-contentHeader">
+<div class="contentNavigation">
{pages print=true assign=pagesLinks controller="UserList" link="pageNo=%d&searchID=$searchID&action=$encodedAction&sortField=$sortField&sortOrder=$sortOrder"}
<nav>
- <ul class="wcf-largeButtons">
+ <ul>
{if $__wcf->session->getPermission('admin.user.canAddUser')}
- <li><a href="{link controller='UserAdd'}{/link}" title="{lang}wcf.acp.user.add{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" /> <span>{lang}wcf.acp.user.add{/lang}</span></a></li>
+ <li><a href="{link controller='UserAdd'}{/link}" title="{lang}wcf.acp.user.add{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.user.add{/lang}</span></a></li>
{/if}
- <li><a href="{link controller='UserSearch'}{/link}" title="{lang}wcf.acp.user.search{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/search1.svg" alt="" /> <span>{lang}wcf.acp.user.search{/lang}</span></a></li>
+ <li><a href="{link controller='UserSearch'}{/link}" title="{lang}wcf.acp.user.search{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/search1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.user.search{/lang}</span></a></li>
{event name='largeButtons'}
</ul>
</nav>
</div>
-<div id="userTableContainer" class="wcf-box wcf-boxTitle wcf-marginTop wcf-shadow1">
+<div id="userTableContainer" class="tabularBox marginTop shadow">
<nav class="wcf-menu">
<ul>
<li{if $action == ''} class="active"{/if}><a href="{link controller='UserList'}{/link}"><span>{lang}wcf.acp.user.list.all{/lang}</span> <span class="wcf-badge" title="{lang}wcf.acp.user.list.count{/lang}">{#$items}</span></a></li>
</nav>
{hascontent}
- <table data-type="com.woltlab.wcf.user" class="wcf-table jsClipboardContainer">
+ <table data-type="com.woltlab.wcf.user" class="table jsClipboardContainer">
<thead>
<tr>
<th class="columnMark"><label><input type="checkbox" class="jsClipboardMarkAll" /></label></th>
<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}"><img src="{@$__wcf->getPath()}icon/edit1.svg" alt="" title="{lang}wcf.acp.user.edit{/lang}" class="jsTooltip" /></a>
+ <a href="{link controller='UserEdit' id=$user->userID}{/link}"><img src="{@$__wcf->getPath()}icon/edit1.svg" alt="" title="{lang}wcf.acp.user.edit{/lang}" class="icon16 jsTooltip" /></a>
{else}
- <img src="{@$__wcf->getPath()}icon/edit1D.svg" alt="" title="{lang}wcf.acp.user.edit{/lang}" />
+ <img src="{@$__wcf->getPath()}icon/edit1D.svg" alt="" title="{lang}wcf.acp.user.edit{/lang}" class="icon16" />
{/if}
{if $user->deletable}
- <img src="{@$__wcf->getPath()}icon/delete1.svg" alt="" title="{lang}wcf.acp.user.delete{/lang}" class="jsTooltip jsDeleteButton" data-object-id="{@$user->userID}" data-confirm-message="{lang}wcf.acp.user.delete.sure{/lang}" />
+ <img src="{@$__wcf->getPath()}icon/delete1.svg" alt="" title="{lang}wcf.acp.user.delete{/lang}" class="icon16 jsTooltip jsDeleteButton" data-object-id="{@$user->userID}" data-confirm-message="{lang}wcf.acp.user.delete.sure{/lang}" />
{else}
- <img src="{@$__wcf->getPath()}icon/delete1D.svg" alt="" title="{lang}wcf.acp.user.delete{/lang}" />
+ <img src="{@$__wcf->getPath()}icon/delete1D.svg" alt="" title="{lang}wcf.acp.user.delete{/lang}" class="icon16" />
{/if}
{event name='buttons'}
</div>
- <div class="wcf-contentFooter">
+ <div class="contentNavigation">
{@$pagesLinks}
<div class="wcf-clipboardEditor jsClipboardEditor" data-types="[ 'com.woltlab.wcf.user' ]"></div>
<nav>
- <ul class="wcf-largeButtons">
+ <ul>
{if $__wcf->session->getPermission('admin.user.canAddUser')}
- <li><a href="{link controller='UserAdd'}{/link}" title="{lang}wcf.acp.user.add{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" /> <span>{lang}wcf.acp.user.add{/lang}</span></a></li>
+ <li><a href="{link controller='UserAdd'}{/link}" title="{lang}wcf.acp.user.add{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.user.add{/lang}</span></a></li>
{/if}
- <li><a href="{link controller='UserSearch'}{/link}" title="{lang}wcf.acp.user.search{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/search1.svg" alt="" /> <span>{lang}wcf.acp.user.search{/lang}</span></a></li>
+ <li><a href="{link controller='UserSearch'}{/link}" title="{lang}wcf.acp.user.search{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/search1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.user.search{/lang}</span></a></li>
{event name='largeButtons'}
</ul>
</script>
{/if}
-<header class="wcf-container wcf-mainHeading">
- <img src="{@$__wcf->getPath()}icon/email1.svg" alt="" class="wcf-containerIcon" />
- <hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+ <img src="{@$__wcf->getPath()}icon/email1.svg" alt="" class="icon48" />
+ <hgroup>
<h1>
{if $action == 'all'}
{lang}wcf.acp.user.sendMail.all{/lang}
</header>
{if $errorField}
- <p class="wcf-error">{lang}wcf.global.form.error{/lang}</p>
+ <p class="error">{lang}wcf.global.form.error{/lang}</p>
{/if}
-<div class="wcf-contentHeader">
+<div class="contentNavigation">
<nav>
- <ul class="wcf-largeButtons">
- <li><a href="{link controller='UserList'}{/link}" title="{lang}wcf.acp.menu.link.user.list{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/users1.svg" alt="" /> <span>{lang}wcf.acp.menu.link.user.list{/lang}</span></a></li>
- <li><a href="{link controller='UserSearch'}{/link}" title="{lang}wcf.acp.user.search{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/search1.svg" alt="" /> <span>{lang}wcf.acp.user.search{/lang}</span></a></li>
+ <ul>
+ <li><a href="{link controller='UserList'}{/link}" title="{lang}wcf.acp.menu.link.user.list{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/users1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.menu.link.user.list{/lang}</span></a></li>
+ <li><a href="{link controller='UserSearch'}{/link}" title="{lang}wcf.acp.user.search{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/search1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.user.search{/lang}</span></a></li>
{event name='largeButtons'}
</ul>
</div>
<form method="post" action="{link controller='UserMail'}{/link}">
- <div class="wcf-box wcf-marginTop wcf-boxPadding wcf-boxDecor">
-
+ <div class="container containerPadding marginTop shadow">
{if $action == ''}
<fieldset>
<legend>{lang}wcf.acp.user.sendMail.markedUsers{/lang}</legend>
<fieldset>
<legend>{lang}wcf.acp.user.sendMail.groups{/lang}</legend>
- <dl{if $errorField == 'groupIDs'} class="wcf-formError"{/if}>
+ <dl{if $errorField == 'groupIDs'} class="formError"{/if}>
<dt>
<label>{lang}wcf.acp.user.groups{/lang}</label>
</dt>
</dl>
</fieldset>
{if $errorField == 'groupIDs'}
- <small class="wcf-innerError">
+ <small class="innerError">
{if $errorType == 'empty'}
{lang}wcf.global.form.error.empty{/lang}
{else}
<fieldset>
<legend>{lang}wcf.acp.user.sendMail.mail{/lang}</legend>
- <dl{if $errorField == 'subject'} class="wcf-formError"{/if}>
+ <dl{if $errorField == 'subject'} class="formError"{/if}>
<dt><label for="subject">{lang}wcf.acp.user.sendMail.subject{/lang}</label></dt>
<dd>
<input type="text" id="subject" name="subject" value="{$subject}" autofocus="autofocus" placeholder="enter subject" class="long" />
{if $errorField == 'subject'}
- <small class="wcf-innerError">
+ <small class="innerError">
{if $errorType == 'empty'}
{lang}wcf.global.form.error.empty{/lang}
{else}
</dd>
</dl>
- <dl{if $errorField == 'from'} class="wcf-formError"{/if}>
+ <dl{if $errorField == 'from'} class="formError"{/if}>
<dt><label for="from">{lang}wcf.acp.user.sendMail.from{/lang}</label></dt>
<dd>
<input type="text" id="from" name="from" value="{$from}" class="medium" />
{if $errorField == 'from'}
- <small class="wcf-innerError">
+ <small class="innerError">
{if $errorType == 'empty'}
{lang}wcf.global.form.error.empty{/lang}
{else}
</dd>
</dl>
- <dl{if $errorField == 'text'} class="wcf-formError"{/if}>
+ <dl{if $errorField == 'text'} class="formError"{/if}>
<dt><label for="text">{lang}wcf.acp.user.sendMail.text{/lang}</label></dt>
<dd>
<textarea id="text" name="text" rows="15" cols="40" class="long">{$text}</textarea>
{if $errorField == 'text'}
- <small class="wcf-innerError">
+ <small class="innerError">
{if $errorType == 'empty'}
{lang}wcf.global.form.error.empty{/lang}
{else}
{event name='fieldsets'}
</div>
- <div class="wcf-formSubmit">
- <input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
+ <div class="formSubmit">
<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
<input type="hidden" name="action" value="{@$action}" />
- {@SID_INPUT_TAG}
<input type="hidden" name="userIDs" value="{@$userIDs}" />
</div>
</form>
//]]>
</script>
-<header class="wcf-container wcf-mainHeading">
- <img src="{@$__wcf->getPath()}icon/search1.svg" alt="" class="wcf-containerIcon" />
- <hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+ <img src="{@$__wcf->getPath()}icon/search1.svg" alt="" class="icon48" />
+ <hgroup>
<h1>{lang}wcf.acp.user.search{/lang}</h1>
</hgroup>
</header>
{if $errorField == 'search'}
- <p class="wcf-error">{lang}wcf.acp.user.search.error.noMatches{/lang}</p>
+ <p class="error">{lang}wcf.acp.user.search.error.noMatches{/lang}</p>
{/if}
{*if $deletedUsers}
- <p class="wcf-success">{lang}wcf.acp.user.delete.success{/lang}</p>
+ <p class="success">{lang}wcf.acp.user.delete.success{/lang}</p>
{elseif $deletedUsers === 0}
- <p class="wcf-error">{lang}wcf.acp.user.delete.error{/lang}</p>
+ <p class="error">{lang}wcf.acp.user.delete.error{/lang}</p>
{/if*}
-<div class="wcf-contentHeader">
+<div class="contentNavigation">
<nav>
- <ul class="wcf-largeButtons">
+ <ul>
{if $__wcf->session->getPermission('admin.user.canAddUser')}
- <li><a href="{link controller='UserAdd'}{/link}" title="{lang}wcf.acp.user.add{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" /> <span>{lang}wcf.acp.user.add{/lang}</span></a></li>
+ <li><a href="{link controller='UserAdd'}{/link}" title="{lang}wcf.acp.user.add{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/add1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.user.add{/lang}</span></a></li>
{/if}
- <li><a href="{link controller='UserList'}{/link}" title="{lang}wcf.acp.menu.link.user.list{/lang}" class="wcf-button"><img src="{@$__wcf->getPath()}icon/users1.svg" alt="" /> <span>{lang}wcf.acp.menu.link.user.list{/lang}</span></a></li>
+ <li><a href="{link controller='UserList'}{/link}" title="{lang}wcf.acp.menu.link.user.list{/lang}" class="button"><img src="{@$__wcf->getPath()}icon/users1.svg" alt="" class="icon24" /> <span>{lang}wcf.acp.menu.link.user.list{/lang}</span></a></li>
{event name='largeButtons'}
</ul>
</div>
<form method="post" action="{link controller='UserSearch'}{/link}">
- <div class="wcf-box wcf-marginTop wcf-boxPadding wcf-boxDecor">
-
+ <div class="container containerPadding marginTop shadow">
<fieldset>
<legend>{lang}wcf.acp.user.search.conditions.general{/lang}</legend>
{event name='fieldsets'}
- <div class="wcf-tabMenuContainer">
- <nav class="wcf-tabMenu">
+ <div class="tabMenuContainer">
+ <nav class="tabMenu">
<ul>
{if $optionTree|count}
<li><a href="#profile">{lang}wcf.acp.user.search.conditions.profile{/lang}</a></li>
</nav>
{if $optionTree|count}
- <div id="profile" class="wcf-box wcf-boxPadding wcf-tabMenuContent hidden">
- <hgroup class="wcf-subHeading">
+ <div id="profile" class="container containerPadding tabMenuContent hidden">
+ <hgroup class="boxSubHeadline">
<h1>{lang}wcf.acp.user.search.conditions.profile{/lang}</h1>
</hgroup>
{event name='tabMenuContent'}
- <div id="resultOptions" class="wcf-box wcf-boxPadding wcf-tabMenuContent hidden">
- <hgroup class="wcf-subHeading">
+ <div id="resultOptions" class="container containerPadding tabMenuContent hidden">
+ <hgroup class="boxSubHeadline">
<h1>{lang}wcf.acp.user.search.display{/lang}</h1>
</hgroup>
</div>
</div>
- <div class="wcf-formSubmit">
- <input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
+ <div class="formSubmit">
<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
- {@SID_INPUT_TAG}
</div>
</form>
//]]>
</script>
-<header class="wcf-container wcf-mainHeading">
- <img src="{@$__wcf->getPath()}icon/user1.svg" alt="" class="wcf-containerIcon" />
- <hgroup class="wcf-containerContent">
+<header class="box48 boxHeadline">
+ <img src="{@$__wcf->getPath()}icon/user1.svg" alt="" class="icon48" />
+ <hgroup>
<h1>{lang}wcf.acp.user.massProcessing{/lang}</h1>
</hgroup>
</header>
{if $errorField}
- <p class="wcf-error">{lang}wcf.global.form.error{/lang}</p>
+ <p class="error">{lang}wcf.global.form.error{/lang}</p>
{/if}
-<p class="wcf-warning">{lang}wcf.acp.user.massProcessing.warning{/lang}</p>
+<p class="warning">{lang}wcf.acp.user.massProcessing.warning{/lang}</p>
{if $affectedUsers|isset}
- <p class="wcf-success">{lang}wcf.acp.user.massProcessing.success{/lang}</p>
+ <p class="success">{lang}wcf.acp.user.massProcessing.success{/lang}</p>
{/if}
<form method="post" action="{link controller='UsersMassProcessing'}{/link}">
- <div class="wcf-box wcf-marginTop wcf-boxPadding wcf-shadow1">
-
- <hgroup class="wcf-subHeading">
+ <div class="container containerPadding marginTop shadow">
+ <hgroup class="boxSubHeadline">
<h1>{lang}wcf.acp.user.massProcessing.conditions{/lang}</h1>
</hgroup>
{event name='fieldsets'}
{hascontent}
- <div class="wcf-tabMenuContainer">
- <nav class="wcf-tabMenu">
+ <div class="tabMenuContainer">
+ <nav class="tabMenu">
<ul>
{content}
{if $options|count}
</nav>
{if $options|count}
- <div id="profile" class="wcf-box wcf-boxPadding wcf-tabMenuContent hidden">
- <hgroup class="wcf-subHeading">
+ <div id="profile" class="container containerPadding tabMenuContent hidden">
+ <hgroup class="boxSubHeadline">
<h1>{lang}wcf.acp.user.search.conditions.profile{/lang}</h1>
</hgroup>
{/hascontent}
</div>
- <div class="wcf-box wcf-marginTop wcf-boxPadding wcf-boxDecor">
- <hgroup class="wcf-subHeading">
+ <div class="container containerPadding marginTop shadow">
+ <hgroup class="boxSubHeadline">
<h1>{lang}wcf.acp.user.massProcessing.action{/lang}</h1>
</hgroup>
- <dl{if $errorField == 'action'} class="wcf-formError"{/if}>
+ <dl{if $errorField == 'action'} class="formError"{/if}>
<dt><label>{lang}wcf.acp.user.massProcessing.action{/lang}</label></dt>
<dd>
<fieldset>
{event name='additionalActions'}
{if $errorField == 'action'}
- <small class="wcf-innerError">
+ <small class="innerError">
{if $errorType == 'empty'}{lang}wcf.global.form.error.empty{/lang}{/if}
</small>
{/if}
<fieldset>
<legend>{lang}wcf.acp.user.sendMail.mail{/lang}</legend>
- <dl{if $errorField == 'from'} class="wcf-formError"{/if}>
+ <dl{if $errorField == 'from'} class="formError"{/if}>
<dt><label for="from">{lang}wcf.acp.user.sendMail.from{/lang}</label></dt>
<dd>
<input type="email" id="from" name="from" value="{$from}" class="medium" />
{if $errorField == 'from'}
- <small class="wcf-innerError">
+ <small class="innerError">
{if $errorType == 'empty'}{lang}wcf.global.form.error.empty{/lang}{/if}
</small>
{/if}
</dd>
</dl>
- <dl{if $errorField == 'subject'} class="wcf-formError"{/if}>
+ <dl{if $errorField == 'subject'} class="formError"{/if}>
<dt><label for="subject">{lang}wcf.acp.user.sendMail.subject{/lang}</label></dt>
<dd>
<input type="text" id="subject" name="subject" value="{$subject}" class="long" />
{if $errorField == 'subject'}
- <small class="wcf-innerError">
+ <small class="innerError">
{if $errorType == 'empty'}{lang}wcf.global.form.error.empty{/lang}{/if}
</small>
{/if}
</dd>
</dl>
- <dl{if $errorField == 'text'} class="wcf-formError"{/if}>
+ <dl{if $errorField == 'text'} class="formError"{/if}>
<dt><label for="text">{lang}wcf.acp.user.sendMail.text{/lang}</label></dt>
<dd>
<textarea id="text" name="text" rows="15" cols="40">{$text}</textarea>
{if $errorField == 'text'}
- <small class="wcf-innerError" class="long">
+ <small class="innerError" class="long">
{if $errorType == 'empty'}{lang}wcf.global.form.error.empty{/lang}{/if}
</small>
{/if}
<legend>{lang}wcf.acp.user.groups{/lang}</legend>
<dl>
- <dd{if $errorField == 'assignToGroupIDArray'} class="wcf-formError"{/if}>
+ <dd{if $errorField == 'assignToGroupIDArray'} class="formError"{/if}>
{htmlCheckboxes options=$availableGroups name=assignToGroupIDArray selected=$assignToGroupIDArray}
{if $errorField == 'assignToGroupIDArray'}
- <small class="wcf-innerError">
+ <small class="innerError">
{if $errorType == 'empty'}{lang}wcf.global.form.error.empty{/lang}{/if}
</small>
{/if}
{if $additionalActionSettings|isset}{@$additionalActionSettings}{/if}
</div>
- <div class="wcf-formSubmit">
- <input type="reset" value="{lang}wcf.global.button.reset{/lang}" accesskey="r" />
+ <div class="formSubmit">
<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
- {@SID_INPUT_TAG}
</div>
</form>
//
-// LESS - Leaner CSS v1.2.2
+// LESS - Leaner CSS v1.3.0
// http://lesscss.org
//
// Copyright (c) 2009-2011, Alexis Sellier
// Licensed under the Apache 2.0 License.
//
-(function(a,b){function c(b){return a.less[b.split("/")[1]]}function m(){var a=document.getElementsByTagName("style");for(var b=0;b<a.length;b++)a[b].type.match(k)&&(new d.Parser).parse(a[b].innerHTML||"",function(c,d){var e=d.toCSS(),f=a[b];f.type="text/css",f.styleSheet?f.styleSheet.cssText=e:f.innerHTML=e})}function n(a,b){for(var c=0;c<d.sheets.length;c++)o(d.sheets[c],a,b,d.sheets.length-(c+1))}function o(b,c,e,f){var g=a.location.href.replace(/[#?].*$/,""),i=b.href.replace(/\?.*$/,""),j=h&&h.getItem(i),k=h&&h.getItem(i+":timestamp"),l={css:j,timestamp:k};/^(https?|file):/.test(i)||(i.charAt(0)=="/"?i=a.location.protocol+"//"+a.location.host+i:i=g.slice(0,g.lastIndexOf("/")+1)+i);var m='lessStylesheet';/*i.match(/([^\/]+)$/)[1];*/s(b.href,b.type,function(a,g){if(!e&&l&&g&&(new Date(g)).valueOf()===(new Date(l.timestamp)).valueOf())r(l.css,b),c(null,null,a,b,{local:!0,remaining:f});else try{(new d.Parser({optimization:d.optimization,paths:[i.replace(/[\w\.-]+$/,"")],mime:b.type,filename:m})).parse(a,function(d,e){if(d)return w(d,i);try{c(d,e,a,b,{local:!1,lastModified:g,remaining:f}),u(document.getElementById("less-error-message:"+q(i)))}catch(d){w(d,i)}})}catch(h){w(h,i)}},function(a,b){throw new Error("Couldn't load "+b+" ("+a+")")})}function q(a){return a.replace(/^[a-z]+:\/\/?[^\/]+/,"").replace(/^\//,"").replace(/\?.*$/,"").replace(/\.[^\.\/]+$/,"").replace(/[^\.\w-]+/g,"-").replace(/\./g,":")}function r(a,b,c){var d,e=b.href?b.href.replace(/\?.*$/,""):"",f="less:"+(b.title||q(e));(d=document.getElementById(f))===null&&(d=document.createElement("style"),d.type="text/css",d.media=b.media||"screen",d.id=f,document.getElementsByTagName("head")[0].appendChild(d));if(d.styleSheet)try{d.styleSheet.cssText=a}catch(g){throw new Error("Couldn't reassign styleSheet.cssText.")}else(function(a){d.childNodes.length>0?d.firstChild.nodeValue!==a.nodeValue&&d.replaceChild(a,d.firstChild):d.appendChild(a)})(document.createTextNode(a));c&&h&&(v("saving "+e+" to cache."),h.setItem(e,a),h.setItem(e+":timestamp",c))}function s(a,b,c,e){function i(b,c,d){b.status>=200&&b.status<300?c(b.responseText,b.getResponseHeader("Last-Modified")):typeof d=="function"&&d(b.status,a)}var f=t(),h=g?!1:d.async;typeof f.overrideMimeType=="function"&&f.overrideMimeType("text/css"),f.open("GET",a,h),f.setRequestHeader("Accept",b||"text/x-less, text/css; q=0.9, */*; q=0.5"),f.send(null),g?f.status===0||f.status>=200&&f.status<300?c(f.responseText):e(f.status,a):h?f.onreadystatechange=function(){f.readyState==4&&i(f,c,e)}:i(f,c,e)}function t(){if(a.XMLHttpRequest)return new XMLHttpRequest;try{return new ActiveXObject("MSXML2.XMLHTTP.3.0")}catch(b){return v("browser doesn't support AJAX."),null}}function u(a){return a&&a.parentNode.removeChild(a)}function v(a){d.env=="development"&&typeof console!="undefined"&&console.log("less: "+a)}function w(a,b){var c="less-error-message:"+q(b),e='<li><label>{line}</label><pre class="{class}">{content}</pre></li>',f=document.createElement("div"),g,h,i=[],j=a.filename||b;f.id=c,f.className="less-error-message",h="<h3>"+(a.message||"There is an error in your .less file")+"</h3>"+'<p>in <a href="'+j+'">'+j+"</a> ";var k=function(a,b,c){a.extract[b]&&i.push(e.replace(/\{line\}/,parseInt(a.line)+(b-1)).replace(/\{class\}/,c).replace(/\{content\}/,a.extract[b]))};a.stack?h+="<br/>"+a.stack.split("\n").slice(1).join("<br/>"):a.extract&&(k(a,0,""),k(a,1,"line"),k(a,2,""),h+="on line "+a.line+", column "+(a.column+1)+":</p>"+"<ul>"+i.join("")+"</ul>"),f.innerHTML=h,r([".less-error-message ul, .less-error-message li {","list-style-type: none;","margin-right: 15px;","padding: 4px 0;","margin: 0;","}",".less-error-message label {","font-size: 12px;","margin-right: 15px;","padding: 4px 0;","color: #cc7777;","}",".less-error-message pre {","color: #dd6666;","padding: 4px 0;","margin: 0;","display: inline-block;","}",".less-error-message pre.line {","color: #ff0000;","}",".less-error-message h3 {","font-size: 20px;","font-weight: bold;","padding: 15px 0 5px 0;","margin: 0;","}",".less-error-message a {","color: #10a","}",".less-error-message .error {","color: red;","font-weight: bold;","padding-bottom: 2px;","border-bottom: 1px dashed red;","}"].join("\n"),{title:"error-message"}),f.style.cssText=["font-family: Arial, sans-serif","border: 1px solid #e00","background-color: #eee","border-radius: 5px","-webkit-border-radius: 5px","-moz-border-radius: 5px","color: #e00","padding: 15px","margin-bottom: 15px"].join(";"),d.env=="development"&&(g=setInterval(function(){document.body&&(document.getElementById(c)?document.body.replaceChild(f,document.getElementById(c)):document.body.insertBefore(f,document.body.firstChild),clearInterval(g))},10))}typeof define=="function"&&define.amd&&define("less",[],function(){return d}),Array.isArray||(Array.isArray=function(a){return Object.prototype.toString.call(a)==="[object Array]"||a instanceof Array}),Array.prototype.forEach||(Array.prototype.forEach=function(a,b){var c=this.length>>>0;for(var d=0;d<c;d++)d in this&&a.call(b,this[d],d,this)}),Array.prototype.map||(Array.prototype.map=function(a){var b=this.length>>>0,c=new Array(b),d=arguments[1];for(var e=0;e<b;e++)e in this&&(c[e]=a.call(d,this[e],e,this));return c}),Array.prototype.filter||(Array.prototype.filter=function(a){var b=[],c=arguments[1];for(var d=0;d<this.length;d++)a.call(c,this[d])&&b.push(this[d]);return b}),Array.prototype.reduce||(Array.prototype.reduce=function(a){var b=this.length>>>0,c=0;if(b===0&&arguments.length===1)throw new TypeError;if(arguments.length>=2)var d=arguments[1];else do{if(c in this){d=this[c++];break}if(++c>=b)throw new TypeError}while(!0);for(;c<b;c++)c in this&&(d=a.call(null,d,this[c],c,this));return d}),Array.prototype.indexOf||(Array.prototype.indexOf=function(a){var b=this.length,c=arguments[1]||0;if(!b)return-1;if(c>=b)return-1;c<0&&(c+=b);for(;c<b;c++){if(!Object.prototype.hasOwnProperty.call(this,c))continue;if(a===this[c])return c}return-1}),Object.keys||(Object.keys=function(a){var b=[];for(var c in a)Object.prototype.hasOwnProperty.call(a,c)&&b.push(c);return b}),String.prototype.trim||(String.prototype.trim=function(){return String(this).replace(/^\s\s*/,"").replace(/\s\s*$/,"")});var d,f;typeof environment=="object"&&{}.toString.call(environment)==="[object Environment]"?(typeof a=="undefined"?d={}:d=a.less={},f=d.tree={},d.mode="rhino"):typeof a=="undefined"?(d=exports,f=c("./tree"),d.mode="node"):(typeof a.less=="undefined"&&(a.less={}),d=a.less,f=a.less.tree={},d.mode="browser"),d.Parser=function(b){function t(){j=m[i],k=h,n=h}function u(){m[i]=j,h=k,n=h}function v(){h>n&&(m[i]=m[i].slice(h-n),n=h)}function w(a){var b,c,d,e,f,j,k,l;if(a instanceof Function)return a.call(o.parsers);if(typeof a=="string")b=g.charAt(h)===a?a:null,d=1,v();else{v();if(!(b=a.exec(m[i])))return null;d=b[0].length}if(b){l=h+=d,j=h+m[i].length-d;while(h<j){e=g.charCodeAt(h);if(e!==32&&e!==10&&e!==9)break;h++}return m[i]=m[i].slice(d+(h-l)),n=h,m[i].length===0&&i<m.length-1&&i++,typeof b=="string"?b:b.length===1?b[0]:b}}function x(a,b){var c=w(a);if(!!c)return c;y(b||(typeof a=="string"?"expected '"+a+"' got '"+g.charAt(h)+"'":"unexpected token"))}function y(a,b){throw{index:h,type:b||"Syntax",message:a}}function z(a){return typeof a=="string"?g.charAt(h)===a:a.test(m[i])?!0:!1}function A(a){return d.mode==="node"?c("path").basename(a):a.match(/[^\/]+$/)[0]}function B(a,b){return a.filename&&b.filename&&a.filename!==b.filename?o.imports.contents[A(a.filename)]:g}function C(a,b){for(var c=a,d=-1;c>=0&&b.charAt(c)!=="\n";c--)d++;return{line:typeof a=="number"?(b.slice(0,a).match(/\n/g)||"").length:null,column:d}}function D(a,b){var c=B(a,b),d=C(a.index,c),e=d.line,f=d.column,g=c.split("\n");this.type=a.type||"Syntax",this.message=a.message,this.filename=a.filename||b.filename,this.index=a.index,this.line=typeof e=="number"?e+1:null,this.callLine=a.call&&C(a.call,c)+1,this.callExtract=g[C(a.call,c)],this.stack=a.stack,this.column=f,this.extract=[g[e-1],g[e],g[e+1]]}var g,h,i,j,k,l,m,n,o,q=this,r=function(){},s=this.imports={paths:b&&b.paths||[],queue:[],files:{},contents:{},mime:b&&b.mime,error:null,push:function(a,c){var e=this;this.queue.push(a),d.Parser.importer(a,this.paths,function(b,d,f){e.queue.splice(e.queue.indexOf(a),1),e.files[a]=d,e.contents[a]=f,b&&!e.error&&(e.error=b),c(b,d),e.queue.length===0&&r()},b)}};return this.env=b=b||{},this.optimization="optimization"in this.env?this.env.optimization:1,this.env.filename=this.env.filename||null,o={imports:s,parse:function(a,e){var j,k,p,q,s,t,u=[],v,x=null;h=i=n=l=0,g=a.replace(/\r\n/g,"\n"),m=function(a){var c=0,d=/[^"'`\{\}\/\(\)\\]+/g,e=/\/\*(?:[^*]|\*+[^\/*])*\*+\/|\/\/.*/g,f=/"((?:[^"\\\r\n]|\\.)*)"|'((?:[^'\\\r\n]|\\.)*)'|`((?:[^`\\\r\n]|\\.)*)`/g,h=0,i,j=a[0],k;for(var l=0,m,n;l<g.length;l++){d.lastIndex=l,(i=d.exec(g))&&i.index===l&&(l+=i[0].length,j.push(i[0])),m=g.charAt(l),e.lastIndex=f.lastIndex=l,(i=f.exec(g))&&i.index===l&&(l+=i[0].length,j.push(i[0]),m=g.charAt(l)),!k&&m==="/"&&(n=g.charAt(l+1),(n==="/"||n==="*")&&(i=e.exec(g))&&i.index===l&&(l+=i[0].length,j.push(i[0]),m=g.charAt(l)));switch(m){case"{":if(!k){h++,j.push(m);break};case"}":if(!k){h--,j.push(m),a[++c]=j=[];break};case"(":if(!k){k=!0,j.push(m);break};case")":if(k){k=!1,j.push(m);break};default:j.push(m)}}return h>0&&(x=new D({index:l,type:"Parse",message:"missing closing `}`",filename:b.filename},b)),a.map(function(a){return a.join("")})}([[]]);if(x)return e(x);try{j=new f.Ruleset([],w(this.parsers.primary)),j.root=!0}catch(y){return e(new D(y,b))}j.toCSS=function(a){var e,g,h;return function(e,g){var h=[],i;e=e||{},typeof g=="object"&&!Array.isArray(g)&&(g=Object.keys(g).map(function(a){var b=g[a];return b instanceof f.Value||(b instanceof f.Expression||(b=new f.Expression([b])),b=new f.Value([b])),new f.Rule("@"+a,b,!1,0)}),h=[new f.Ruleset(null,g)]);try{var j=a.call(this,{frames:h}).toCSS([],{compress:e.compress||!1})}catch(k){throw new D(k,b)}if(i=o.imports.error)throw i instanceof D?i:new D(i,b);return e.yuicompress&&d.mode==="node"?c("./cssmin").compressor.cssmin(j):e.compress?j.replace(/(\s)+/g,"$1"):j}}(j.eval);if(h<g.length-1){h=l,t=g.split("\n"),s=(g.slice(0,h).match(/\n/g)||"").length+1;for(var z=h,A=-1;z>=0&&g.charAt(z)!=="\n";z--)A++;x={type:"Parse",message:"Syntax Error on line "+s,index:h,filename:b.filename,line:s,column:A,extract:[t[s-2],t[s-1],t[s]]}}this.imports.queue.length>0?r=function(){e(x,j)}:e(x,j)},parsers:{primary:function(){var a,b=[];while((a=w(this.mixin.definition)||w(this.rule)||w(this.ruleset)||w(this.mixin.call)||w(this.comment)||w(this.directive))||w(/^[\s\n]+/))a&&b.push(a);return b},comment:function(){var a;if(g.charAt(h)!=="/")return;if(g.charAt(h+1)==="/")return new f.Comment(w(/^\/\/.*/),!0);if(a=w(/^\/\*(?:[^*]|\*+[^\/*])*\*+\/\n?/))return new f.Comment(a)},entities:{quoted:function(){var a,b=h,c;g.charAt(b)==="~"&&(b++,c=!0);if(g.charAt(b)!=='"'&&g.charAt(b)!=="'")return;c&&w("~");if(a=w(/^"((?:[^"\\\r\n]|\\.)*)"|'((?:[^'\\\r\n]|\\.)*)'/))return new f.Quoted(a[0],a[1]||a[2],c)},keyword:function(){var a;if(a=w(/^[_A-Za-z-][_A-Za-z0-9-]*/))return f.colors.hasOwnProperty(a)?new f.Color(f.colors[a].slice(1)):new f.Keyword(a)},call:function(){var a,c,d=h;if(!(a=/^([\w-]+|%|progid:[\w\.]+)\(/.exec(m[i])))return;a=a[1].toLowerCase();if(a==="url")return null;h+=a.length;if(a==="alpha")return w(this.alpha);w("("),c=w(this.entities.arguments);if(!w(")"))return;if(a)return new f.Call(a,c,d,b.filename)},arguments:function(){var a=[],b;while(b=w(this.entities.assignment)||w(this.expression)){a.push(b);if(!w(","))break}return a},literal:function(){return w(this.entities.dimension)||w(this.entities.color)||w(this.entities.quoted)},assignment:function(){var a,b;if((a=w(/^\w+(?=\s?=)/i))&&w("=")&&(b=w(this.entity)))return new f.Assignment(a,b)},url:function(){var a;if(g.charAt(h)!=="u"||!w(/^url\(/))return;return a=w(this.entities.quoted)||w(this.entities.variable)||w(this.entities.dataURI)||w(/^[-\w%@$\/.&=:;#+?~]+/)||"",x(")"),new f.URL(a.value||a.data||a instanceof f.Variable?a:new f.Anonymous(a),s.paths)},dataURI:function(){var a;if(w(/^data:/)){a={},a.mime=w(/^[^\/]+\/[^,;)]+/)||"",a.charset=w(/^;\s*charset=[^,;)]+/)||"",a.base64=w(/^;\s*base64/)||"",a.data=w(/^,\s*[^)]+/);if(a.data)return a}},variable:function(){var a,c=h;if(g.charAt(h)==="@"&&(a=w(/^@@?[\w-]+/)))return new f.Variable(a,c,b.filename)},color:function(){var a;if(g.charAt(h)==="#"&&(a=w(/^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})/)))return new f.Color(a[1])},dimension:function(){var a,b=g.charCodeAt(h);if(b>57||b<45||b===47)return;if(a=w(/^(-?\d*\.?\d+)(px|%|em|rem|pc|ex|in|deg|s|ms|pt|cm|mm|rad|grad|turn)?/))return new f.Dimension(a[1],a[2])},javascript:function(){var a,b=h,c;g.charAt(b)==="~"&&(b++,c=!0);if(g.charAt(b)!=="`")return;c&&w("~");if(a=w(/^`([^`]*)`/))return new f.JavaScript(a[1],h,c)}},variable:function(){var a;if(g.charAt(h)==="@"&&(a=w(/^(@[\w-]+)\s*:/)))return a[1]},shorthand:function(){var a,b;if(!z(/^[@\w.%-]+\/[@\w.-]+/))return;if((a=w(this.entity))&&w("/")&&(b=w(this.entity)))return new f.Shorthand(a,b)},mixin:{call:function(){var a=[],c,d,e,i=h,j=g.charAt(h),k=!1;if(j!=="."&&j!=="#")return;while(c=w(/^[#.](?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+/))a.push(new f.Element(d,c,h)),d=w(">");w("(")&&(e=w(this.entities.arguments))&&w(")"),w(this.important)&&(k=!0);if(a.length>0&&(w(";")||z("}")))return new f.mixin.Call(a,e,i,b.filename,k)},definition:function(){var a,b=[],c,d,e,i,j;if(g.charAt(h)!=="."&&g.charAt(h)!=="#"||z(/^[^{]*(;|})/))return;t();if(c=w(/^([#.](?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+)\s*\(/)){a=c[1];while(e=w(this.entities.variable)||w(this.entities.literal)||w(this.entities.keyword)){e instanceof f.Variable?w(":")?(i=x(this.expression,"expected expression"),b.push({name:e.name,value:i})):b.push({name:e.name}):b.push({value:e});if(!w(","))break}x(")"),w(/^when/)&&(j=x(this.conditions,"expected condition")),d=w(this.block);if(d)return new f.mixin.Definition(a,b,d,j);u()}}},entity:function(){return w(this.entities.literal)||w(this.entities.variable)||w(this.entities.url)||w(this.entities.call)||w(this.entities.keyword)||w(this.entities.javascript)||w(this.comment)},end:function(){return w(";")||z("}")},alpha:function(){var a;if(!w(/^\(opacity=/i))return;if(a=w(/^\d+/)||w(this.entities.variable))return x(")"),new f.Alpha(a)},element:function(){var a,b,c,d;c=w(this.combinator),a=w(/^(?:\d+\.\d+|\d+)%/)||w(/^(?:[.#]?|:*)(?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+/)||w("*")||w(this.attribute)||w(/^\([^)@]+\)/),a||w("(")&&(d=w(this.entities.variable))&&w(")")&&(a=new f.Paren(d));if(a)return new f.Element(c,a,h);if(c.value&&c.value.charAt(0)==="&")return new f.Element(c,null,h)},combinator:function(){var a,b=g.charAt(h);if(b===">"||b==="+"||b==="~"){h++;while(g.charAt(h)===" ")h++;return new f.Combinator(b)}if(b==="&"){a="&",h++,g.charAt(h)===" "&&(a="& ");while(g.charAt(h)===" ")h++;return new f.Combinator(a)}if(b===":"&&g.charAt(h+1)===":"){h+=2;while(g.charAt(h)===" ")h++;return new f.Combinator("::")}return g.charAt(h-1)===" "?new f.Combinator(" "):new f.Combinator(null)},selector:function(){var a,b,c=[],d,e;while(b=w(this.element)){d=g.charAt(h),c.push(b);if(d==="{"||d==="}"||d===";"||d===",")break}if(c.length>0)return new f.Selector(c)},tag:function(){return w(/^[a-zA-Z][a-zA-Z-]*[0-9]?/)||w("*")},attribute:function(){var a="",b,c,d;if(!w("["))return;if(b=w(/^[a-zA-Z-]+/)||w(this.entities.quoted))(d=w(/^[|~*$^]?=/))&&(c=w(this.entities.quoted)||w(/^[\w-]+/))?a=[b,d,c.toCSS?c.toCSS():c].join(""):a=b;if(!w("]"))return;if(a)return"["+a+"]"},block:function(){var a;if(w("{")&&(a=w(this.primary))&&w("}"))return a},ruleset:function(){var a=[],b,c,d;t();while(b=w(this.selector)){a.push(b),w(this.comment);if(!w(","))break;w(this.comment)}if(a.length>0&&(c=w(this.block)))return new f.Ruleset(a,c);l=h,u()},rule:function(){var a,b,c=g.charAt(h),d,e;t();if(c==="."||c==="#"||c==="&")return;if(a=w(this.variable)||w(this.property)){a.charAt(0)!="@"&&(e=/^([^@+\/'"*`(;{}-]*);/.exec(m[i]))?(h+=e[0].length-1,b=new f.Anonymous(e[1])):a==="font"?b=w(this.font):b=w(this.value),d=w(this.important);if(b&&w(this.end))return new f.Rule(a,b,d,k);l=h,u()}},"import":function(){var a,b,c=h;if(w(/^@import\s+/)&&(a=w(this.entities.quoted)||w(this.entities.url))){b=w(this.mediaFeatures);if(w(";"))return new f.Import(a,s,b,c)}},mediaFeature:function(){var a=[];do if(e=w(this.entities.keyword))a.push(e);else if(w("(")){p=w(this.property),e=w(this.entity);if(!w(")"))return null;if(p&&e)a.push(new f.Paren(new f.Rule(p,e,null,h,!0)));else{if(!e)return null;a.push(new f.Paren(e))}}while(e);if(a.length>0)return new f.Expression(a)},mediaFeatures:function(){var a,b=[];while(a=w(this.mediaFeature)){b.push(a);if(!w(","))break}return b.length>0?b:null},media:function(){var a;if(w(/^@media/)){a=w(this.mediaFeatures);if(rules=w(this.block))return new f.Directive("@media",rules,a)}},directive:function(){var a,b,c,d,e,i;if(g.charAt(h)!=="@")return;if(b=w(this["import"])||w(this.media))return b;if(a=w(/^@page|@keyframes/)||w(/^@(?:-webkit-|-moz-|-o-|-ms-)[a-z0-9-]+/)){d=(w(/^[^{]+/)||"").trim();if(c=w(this.block))return new f.Directive(a+" "+d,c)}else if(a=w(/^@[-a-z]+/))if(a==="@font-face"){if(c=w(this.block))return new f.Directive(a,c)}else if((b=w(this.entity))&&w(";"))return new f.Directive(a,b)},font:function(){var a=[],b=[],c,d,e,g;while(g=w(this.shorthand)||w(this.entity))b.push(g);a.push(new f.Expression(b));if(w(","))while(g=w(this.expression)){a.push(g);if(!w(","))break}return new f.Value(a)},value:function(){var a,b=[],c;while(a=w(this.expression)){b.push(a);if(!w(","))break}if(b.length>0)return new f.Value(b)},important:function(){if(g.charAt(h)==="!")return w(/^! *important/)},sub:function(){var a;if(w("(")&&(a=w(this.expression))&&w(")"))return a},multiplication:function(){var a,b,c,d;if(a=w(this.operand)){while(!z(/^\/\*/)&&(c=w("/")||w("*"))&&(b=w(this.operand)))d=new f.Operation(c,[d||a,b]);return d||a}},addition:function(){var a,b,c,d;if(a=w(this.multiplication)){while((c=w(/^[-+]\s+/)||g.charAt(h-1)!=" "&&(w("+")||w("-")))&&(b=w(this.multiplication)))d=new f.Operation(c,[d||a,b]);return d||a}},conditions:function(){var a,b,c=h,d;if(a=w(this.condition)){while(w(",")&&(b=w(this.condition)))d=new f.Condition("or",d||a,b,c);return d||a}},condition:function(){var a,b,c,d,e=h,g=!1;w(/^not/)&&(g=!0),x("(");if(a=w(this.addition)||w(this.entities.keyword)||w(this.entities.quoted))return(d=w(/^(?:>=|=<|[<=>])/))?(b=w(this.addition)||w(this.entities.keyword)||w(this.entities.quoted))?c=new f.Condition(d,a,b,e,g):y("expected expression"):c=new f.Condition("=",a,new f.Keyword("true"),e,g),x(")"),w(/^and/)?new f.Condition("and",c,w(this.condition)):c},operand:function(){var a,b=g.charAt(h+1);g.charAt(h)==="-"&&(b==="@"||b==="(")&&(a=w("-"));var c=w(this.sub)||w(this.entities.dimension)||w(this.entities.color)||w(this.entities.variable)||w(this.entities.call);return a?new f.Operation("*",[new f.Dimension(-1),c]):c},expression:function(){var a,b,c=[],d;while(a=w(this.addition)||w(this.entity))c.push(a);if(c.length>0)return new f.Expression(c)},property:function(){var a;if(a=w(/^(\*?-?[-a-z_0-9]+)\s*:/))return a[1]}}}};if(d.mode==="browser"||d.mode==="rhino")d.Parser.importer=function(a,b,c,d){!/^([a-z]+:)?\//.test(a)&&b.length>0&&(a=b[0]+a),o({href:a,title:a,type:d.mime},function(e){e&&typeof d.errback=="function"?d.errback.call(null,a,b,c,d):c.apply(null,arguments)},!0)};(function(a){function b(b){return a.functions.hsla(b.h,b.s,b.l,b.a)}function c(b){if(b instanceof a.Dimension)return parseFloat(b.unit=="%"?b.value/100:b.value);if(typeof b=="number")return b;throw{error:"RuntimeError",message:"color functions take numbers as parameters"}}function d(a){return Math.min(1,Math.max(0,a))}a.functions={rgb:function(a,b,c){return this.rgba(a,b,c,1)},rgba:function(b,d,e,f){var g=[b,d,e].map(function(a){return c(a)}),f=c(f);return new a.Color(g,f)},hsl:function(a,b,c){return this.hsla(a,b,c,1)},hsla:function(a,b,d,e){function h(a){return a=a<0?a+1:a>1?a-1:a,a*6<1?g+(f-g)*a*6:a*2<1?f:a*3<2?g+(f-g)*(2/3-a)*6:g}a=c(a)%360/360,b=c(b),d=c(d),e=c(e);var f=d<=.5?d*(b+1):d+b-d*b,g=d*2-f;return this.rgba(h(a+1/3)*255,h(a)*255,h(a-1/3)*255,e)},hue:function(b){return new a.Dimension(Math.round(b.toHSL().h))},saturation:function(b){return new a.Dimension(Math.round(b.toHSL().s*100),"%")},lightness:function(b){return new a.Dimension(Math.round(b.toHSL().l*100),"%")},alpha:function(b){return new a.Dimension(b.toHSL().a)},saturate:function(a,c){var e=a.toHSL();return e.s+=c.value/100,e.s=d(e.s),b(e)},desaturate:function(a,c){var e=a.toHSL();return e.s-=c.value/100,e.s=d(e.s),b(e)},lighten:function(a,c){var e=a.toHSL();return e.l+=c.value/100,e.l=d(e.l),b(e)},darken:function(a,c){var e=a.toHSL();return e.l-=c.value/100,e.l=d(e.l),b(e)},fadein:function(a,c){var e=a.toHSL();return e.a+=c.value/100,e.a=d(e.a),b(e)},fadeout:function(a,c){var e=a.toHSL();return e.a-=c.value/100,e.a=d(e.a),b(e)},fade:function(a,c){var e=a.toHSL();return e.a=c.value/100,e.a=d(e.a),b(e)},spin:function(a,c){var d=a.toHSL(),e=(d.h+c.value)%360;return d.h=e<0?360+e:e,b(d)},mix:function(b,c,d){var e=d.value/100,f=e*2-1,g=b.toHSL().a-c.toHSL().a,h=((f*g==-1?f:(f+g)/(1+f*g))+1)/2,i=1-h,j=[b.rgb[0]*h+c.rgb[0]*i,b.rgb[1]*h+c.rgb[1]*i,b.rgb[2]*h+c.rgb[2]*i],k=b.alpha*e+c.alpha*(1-e);return new a.Color(j,k)},greyscale:function(b){return this.desaturate(b,new a.Dimension(100))},e:function(b){return new a.Anonymous(b instanceof a.JavaScript?b.evaluated:b)},escape:function(b){return new a.Anonymous(encodeURI(b.value).replace(/=/g,"%3D").replace(/:/g,"%3A").replace(/#/g,"%23").replace(/;/g,"%3B").replace(/\(/g,"%28").replace(/\)/g,"%29"))},"%":function(b){var c=Array.prototype.slice.call(arguments,1),d=b.value;for(var e=0;e<c.length;e++)d=d.replace(/%[sda]/i,function(a){var b=a.match(/s/i)?c[e].value:c[e].toCSS();return a.match(/[A-Z]$/)?encodeURIComponent(b):b});return d=d.replace(/%%/g,"%"),new a.Quoted('"'+d+'"',d)},round:function(a){return this._math("round",a)},ceil:function(a){return this._math("ceil",a)},floor:function(a){return this._math("floor",a)},_math:function(b,d){if(d instanceof a.Dimension)return new a.Dimension(Math[b](c(d)),d.unit);if(typeof d=="number")return Math[b](d);throw{type:"Argument",message:"argument must be a number"}},argb:function(b){return new a.Anonymous(b.toARGB())},percentage:function(b){return new a.Dimension(b.value*100,"%")},color:function(b){if(b instanceof a.Quoted)return new a.Color(b.value.slice(1));throw{type:"Argument",message:"argument must be a string"}},iscolor:function(b){return this._isa(b,a.Color)},isnumber:function(b){return this._isa(b,a.Dimension)},isstring:function(b){return this._isa(b,a.Quoted)},iskeyword:function(b){return this._isa(b,a.Keyword)},isurl:function(b){return this._isa(b,a.URL)},ispixel:function(b){return b instanceof a.Dimension&&b.unit==="px"?a.True:a.False},ispercentage:function(b){return b instanceof a.Dimension&&b.unit==="%"?a.True:a.False},isem:function(b){return b instanceof a.Dimension&&b.unit==="em"?a.True:a.False},_isa:function(b,c){return b instanceof c?a.True:a.False}}})(c("./tree")),function(a){a.colors={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgrey:"#a9a9a9",darkgreen:"#006400",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dimgrey:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",gold:"#ffd700",goldenrod:"#daa520",gray:"#808080",grey:"#808080",green:"#008000",greenyellow:"#adff2f",honeydew:"#f0fff0",hotpink:"#ff69b4",indianred:"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavender:"#e6e6fa",lavenderblush:"#fff0f5",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgray:"#d3d3d3",lightgrey:"#d3d3d3",lightgreen:"#90ee90",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightslategrey:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370d8",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#d87093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",slategrey:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32"}}(c("./tree")),function(a){a.Alpha=function(a){this.value=a},a.Alpha.prototype={toCSS:function(){return"alpha(opacity="+(this.value.toCSS?this.value.toCSS():this.value)+")"},eval:function(a){return this.value.eval&&(this.value=this.value.eval(a)),this}}}(c("../tree")),function(a){a.Anonymous=function(a){this.value=a.value||a},a.Anonymous.prototype={toCSS:function(){return this.value},eval:function(){return this}}}(c("../tree")),function(a){a.Assignment=function(a,b){this.key=a,this.value=b},a.Assignment.prototype={toCSS:function(){return this.key+"="+(this.value.toCSS?this.value.toCSS():this.value)},eval:function(a){return this.value.eval&&(this.value=this.value.eval(a)),this}}}(c("../tree")),function(a){a.Call=function(a,b,c,d){this.name=a,this.args=b,this.index=c,this.filename=d},a.Call.prototype={eval:function(b){var c=this.args.map(function(a){return a.eval(b)});if(!(this.name in a.functions))return new a.Anonymous(this.name+"("+c.map(function(a){return a.toCSS()}).join(", ")+")");try{return a.functions[this.name].apply(a.functions,c)}catch(d){throw{type:d.type||"Runtime",message:"error evaluating function `"+this.name+"`"+(d.message?": "+d.message:""),index:this.index,filename:this.filename}}},toCSS:function(a){return this.eval(a).toCSS()}}}(c("../tree")),function(a){a.Color=function(a,b){Array.isArray(a)?this.rgb=a:a.length==6?this.rgb=a.match(/.{2}/g).map(function(a){return parseInt(a,16)}):this.rgb=a.split("").map(function(a){return parseInt(a+a,16)}),this.alpha=typeof b=="number"?b:1},a.Color.prototype={eval:function(){return this},toCSS:function(){return this.alpha<1?"rgba("+this.rgb.map(function(a){return Math.round(a)}).concat(this.alpha).join(", ")+")":"#"+this.rgb.map(function(a){return a=Math.round(a),a=(a>255?255:a<0?0:a).toString(16),a.length===1?"0"+a:a}).join("")},operate:function(b,c){var d=[];c instanceof a.Color||(c=c.toColor());for(var e=0;e<3;e++)d[e]=a.operate(b,this.rgb[e],c.rgb[e]);return new a.Color(d,this.alpha+c.alpha)},toHSL:function(){var a=this.rgb[0]/255,b=this.rgb[1]/255,c=this.rgb[2]/255,d=this.alpha,e=Math.max(a,b,c),f=Math.min(a,b,c),g,h,i=(e+f)/2,j=e-f;if(e===f)g=h=0;else{h=i>.5?j/(2-e-f):j/(e+f);switch(e){case a:g=(b-c)/j+(b<c?6:0);break;case b:g=(c-a)/j+2;break;case c:g=(a-b)/j+4}g/=6}return{h:g*360,s:h,l:i,a:d}},toARGB:function(){var a=[Math.round(this.alpha*255)].concat(this.rgb);return"#"+a.map(function(a){return a=Math.round(a),a=(a>255?255:a<0?0:a).toString(16),a.length===1?"0"+a:a}).join("")}}}(c("../tree")),function(a){a.Comment=function(a,b){this.value=a,this.silent=!!b},a.Comment.prototype={toCSS:function(a){return a.compress?"":this.value},eval:function(){return this}}}(c("../tree")),function(a){a.Condition=function(a,b,c,d,e){this.op=a.trim(),this.lvalue=b,this.rvalue=c,this.index=d,this.negate=e},a.Condition.prototype.eval=function(a){var b=this.lvalue.eval(a),c=this.rvalue.eval(a),d=this.index,e,e=function(a){switch(a){case"and":return b&&c;case"or":return b||c;default:if(b.compare)e=b.compare(c);else{if(!c.compare)throw{type:"Type",message:"Unable to perform comparison",index:d};e=c.compare(b)}switch(e){case-1:return a==="<"||a==="=<";case 0:return a==="="||a===">="||a==="=<";case 1:return a===">"||a===">="}}}(this.op);return this.negate?!e:e}}(c("../tree")),function(a){a.Dimension=function(a,b){this.value=parseFloat(a),this.unit=b||null},a.Dimension.prototype={eval:function(){return this},toColor:function(){return new a.Color([this.value,this.value,this.value])},toCSS:function(){var a=this.value+this.unit;return a},operate:function(b,c){return new a.Dimension(a.operate(b,this.value,c.value),this.unit||c.unit)},compare:function(b){return b instanceof a.Dimension?b.value>this.value?-1:b.value<this.value?1:0:-1}}}(c("../tree")),function(a){a.Directive=function(b,c,d){this.name=b,this.features=d&&new a.Value(d),Array.isArray(c)?(this.ruleset=new a.Ruleset([],c),this.ruleset.allowImports=!0):this.value=c},a.Directive.prototype={toCSS:function(a,b){var c=this.features?" "+this.features.toCSS(b):"";return this.ruleset?(this.ruleset.root=!0,this.name+c+(b.compress?"{":" {\n ")+this.ruleset.toCSS(a,b).trim().replace(/\n/g,"\n ")+(b.compress?"}":"\n}\n")):this.name+" "+this.value.toCSS()+";\n"},eval:function(a){return this.features=this.features&&this.features.eval(a),a.frames.unshift(this),this.ruleset=this.ruleset&&this.ruleset.eval(a),a.frames.shift(),this},variable:function(b){return a.Ruleset.prototype.variable.call(this.ruleset,b)},find:function(){return a.Ruleset.prototype.find.apply(this.ruleset,arguments)},rulesets:function(){return a.Ruleset.prototype.rulesets.apply(this.ruleset)}}}(c("../tree")),function(a){a.Element=function(b,c,d){this.combinator=b instanceof a.Combinator?b:new a.Combinator(b),typeof c=="string"?this.value=c.trim():c?this.value=c:this.value="",this.index=d},a.Element.prototype.eval=function(b){return new a.Element(this.combinator,this.value.eval?this.value.eval(b):this.value,this.index)},a.Element.prototype.toCSS=function(a){return this.combinator.toCSS(a||{})+(this.value.toCSS?this.value.toCSS(a):this.value)},a.Combinator=function(a){a===" "?this.value=" ":a==="& "?this.value="& ":this.value=a?a.trim():""},a.Combinator.prototype.toCSS=function(a){return{"":""," ":" ","&":"","& ":" ",":":" :","::":"::","+":a.compress?"+":" + ","~":a.compress?"~":" ~ ",">":a.compress?">":" > "}[this.value]}}(c("../tree")),function(a){a.Expression=function(a){this.value=a},a.Expression.prototype={eval:function(b){return this.value.length>1?new a.Expression(this.value.map(function(a){return a.eval(b)})):this.value.length===1?this.value[0].eval(b):this},toCSS:function(a){return this.value.map(function(b){return b.toCSS?b.toCSS(a):""}).join(" ")}}}(c("../tree")),function(a){a.Import=function(b,c,d,e){var f=this;this.index=e,this._path=b,this.features=d&&new a.Value(d),b instanceof a.Quoted?this.path=/\.(le?|c)ss(\?.*)?$/.test(b.value)?b.value:b.value+".less":this.path=b.value.value||b.value,this.css=/css(\?.*)?$/.test(this.path),this.css||c.push(this.path,function(b,c){b&&(b.index=e),f.root=c||new a.Ruleset([],[])})},a.Import.prototype={toCSS:function(a){var b=this.features?" "+this.features.toCSS(a):"";return this.css?"@import "+this._path.toCSS()+b+";\n":""},eval:function(b){var c,d=this.features&&this.features.eval(b);if(this.css)return this;c=new a.Ruleset([],this.root.rules.slice(0));for(var e=0;e<c.rules.length;e++)c.rules[e]instanceof a.Import&&Array.prototype.splice.apply(c.rules,[e,1].concat(c.rules[e].eval(b)));return this.features?new
-a.Directive("@media",c.rules,this.features.value):c.rules}}}(c("../tree")),function(a){a.JavaScript=function(a,b,c){this.escaped=c,this.expression=a,this.index=b},a.JavaScript.prototype={eval:function(b){var c,d=this,e={},f=this.expression.replace(/@\{([\w-]+)\}/g,function(c,e){return a.jsify((new a.Variable("@"+e,d.index)).eval(b))});try{f=new Function("return ("+f+")")}catch(g){throw{message:"JavaScript evaluation error: `"+f+"`",index:this.index}}for(var h in b.frames[0].variables())e[h.slice(1)]={value:b.frames[0].variables()[h].value,toJS:function(){return this.value.eval(b).toCSS()}};try{c=f.call(e)}catch(g){throw{message:"JavaScript evaluation error: '"+g.name+": "+g.message+"'",index:this.index}}return typeof c=="string"?new a.Quoted('"'+c+'"',c,this.escaped,this.index):Array.isArray(c)?new a.Anonymous(c.join(", ")):new a.Anonymous(c)}}}(c("../tree")),function(a){a.Keyword=function(a){this.value=a},a.Keyword.prototype={eval:function(){return this},toCSS:function(){return this.value},compare:function(b){return b instanceof a.Keyword?b.value===this.value?0:1:-1}},a.True=new a.Keyword("true"),a.False=new a.Keyword("false")}(c("../tree")),function(a){a.mixin={},a.mixin.Call=function(b,c,d,e,f){this.selector=new a.Selector(b),this.arguments=c,this.index=d,this.filename=e,this.important=f},a.mixin.Call.prototype={eval:function(a){var b,c,d=[],e=!1;for(var f=0;f<a.frames.length;f++)if((b=a.frames[f].find(this.selector)).length>0){c=this.arguments&&this.arguments.map(function(b){return b.eval(a)});for(var g=0;g<b.length;g++)if(b[g].match(c,a))try{Array.prototype.push.apply(d,b[g].eval(a,this.arguments,this.important).rules),e=!0}catch(h){throw{message:h.message,index:h.index,filename:this.filename,stack:h.stack,call:this.index}}if(e)return d;throw{type:"Runtime",message:"No matching definition was found for `"+this.selector.toCSS().trim()+"("+this.arguments.map(function(a){return a.toCSS()}).join(", ")+")`",index:this.index,filename:this.filename}}throw{type:"Name",message:this.selector.toCSS().trim()+" is undefined",index:this.index,filename:this.filename}}},a.mixin.Definition=function(b,c,d,e){this.name=b,this.selectors=[new a.Selector([new a.Element(null,b)])],this.params=c,this.condition=e,this.arity=c.length,this.rules=d,this._lookups={},this.required=c.reduce(function(a,b){return!b.name||b.name&&!b.value?a+1:a},0),this.parent=a.Ruleset.prototype,this.frames=[]},a.mixin.Definition.prototype={toCSS:function(){return""},variable:function(a){return this.parent.variable.call(this,a)},variables:function(){return this.parent.variables.call(this)},find:function(){return this.parent.find.apply(this,arguments)},rulesets:function(){return this.parent.rulesets.apply(this)},evalParams:function(b,c){var d=new a.Ruleset(null,[]);for(var e=0,f;e<this.params.length;e++)if(this.params[e].name){if(!(f=c&&c[e]||this.params[e].value))throw{type:"Runtime",message:"wrong number of arguments for "+this.name+" ("+c.length+" for "+this.arity+")"};d.rules.unshift(new a.Rule(this.params[e].name,f.eval(b)))}return d},eval:function(b,c,d){var e=this.evalParams(b,c),f,g=[],h;for(var i=0;i<Math.max(this.params.length,c&&c.length);i++)g.push(c[i]||this.params[i].value);return e.rules.unshift(new a.Rule("@arguments",(new a.Expression(g)).eval(b))),h=d?this.rules.map(function(b){return new a.Rule(b.name,b.value,"!important",b.index)}):this.rules.slice(0),(new a.Ruleset(null,h)).eval({frames:[this,e].concat(this.frames,b.frames)})},match:function(a,b){var c=a&&a.length||0,d,e;if(c<this.required)return!1;if(this.required>0&&c>this.params.length)return!1;if(this.condition&&!this.condition.eval({frames:[this.evalParams(b,a)].concat(b.frames)}))return!1;d=Math.min(c,this.arity);for(var f=0;f<d;f++)if(!this.params[f].name&&a[f].eval(b).toCSS()!=this.params[f].value.eval(b).toCSS())return!1;return!0}}}(c("../tree")),function(a){a.Operation=function(a,b){this.op=a.trim(),this.operands=b},a.Operation.prototype.eval=function(b){var c=this.operands[0].eval(b),d=this.operands[1].eval(b),e;if(c instanceof a.Dimension&&d instanceof a.Color){if(this.op!=="*"&&this.op!=="+")throw{name:"OperationError",message:"Can't substract or divide a color from a number"};e=d,d=c,c=e}return c.operate(this.op,d)},a.operate=function(a,b,c){switch(a){case"+":return b+c;case"-":return b-c;case"*":return b*c;case"/":return b/c}}}(c("../tree")),function(a){a.Paren=function(a){this.value=a},a.Paren.prototype={toCSS:function(a){return"("+this.value.toCSS(a)+")"},eval:function(b){return new a.Paren(this.value.eval(b))}}}(c("../tree")),function(a){a.Quoted=function(a,b,c,d){this.escaped=c,this.value=b||"",this.quote=a.charAt(0),this.index=d},a.Quoted.prototype={toCSS:function(){return this.escaped?this.value:this.quote+this.value+this.quote},eval:function(b){var c=this,d=this.value.replace(/`([^`]+)`/g,function(d,e){return(new a.JavaScript(e,c.index,!0)).eval(b).value}).replace(/@\{([\w-]+)\}/g,function(d,e){var f=(new a.Variable("@"+e,c.index)).eval(b);return"value"in f?f.value:f.toCSS()});return new a.Quoted(this.quote+d+this.quote,d,this.escaped,this.index)}}}(c("../tree")),function(a){a.Rule=function(b,c,d,e,f){this.name=b,this.value=c instanceof a.Value?c:new a.Value([c]),this.important=d?" "+d.trim():"",this.index=e,this.inline=f||!1,b.charAt(0)==="@"?this.variable=!0:this.variable=!1},a.Rule.prototype.toCSS=function(a){return this.variable?"":this.name+(a.compress?":":": ")+this.value.toCSS(a)+this.important+(this.inline?"":";")},a.Rule.prototype.eval=function(b){return new a.Rule(this.name,this.value.eval(b),this.important,this.index,this.inline)},a.Shorthand=function(a,b){this.a=a,this.b=b},a.Shorthand.prototype={toCSS:function(a){return this.a.toCSS(a)+"/"+this.b.toCSS(a)},eval:function(){return this}}}(c("../tree")),function(a){a.Ruleset=function(a,b){this.selectors=a,this.rules=b,this._lookups={}},a.Ruleset.prototype={eval:function(b){var c=this.selectors&&this.selectors.map(function(a){return a.eval(b)}),d=new a.Ruleset(c,this.rules.slice(0));d.root=this.root,d.allowImports=this.allowImports,b.frames.unshift(d);if(d.root||d.allowImports)for(var e=0;e<d.rules.length;e++)d.rules[e]instanceof a.Import&&Array.prototype.splice.apply(d.rules,[e,1].concat(d.rules[e].eval(b)));for(var e=0;e<d.rules.length;e++)d.rules[e]instanceof a.mixin.Definition&&(d.rules[e].frames=b.frames.slice(0));for(var e=0;e<d.rules.length;e++)d.rules[e]instanceof a.mixin.Call&&Array.prototype.splice.apply(d.rules,[e,1].concat(d.rules[e].eval(b)));for(var e=0,f;e<d.rules.length;e++)f=d.rules[e],f instanceof a.mixin.Definition||(d.rules[e]=f.eval?f.eval(b):f);return b.frames.shift(),d},match:function(a){return!a||a.length===0},variables:function(){return this._variables?this._variables:this._variables=this.rules.reduce(function(b,c){return c instanceof a.Rule&&c.variable===!0&&(b[c.name]=c),b},{})},variable:function(a){return this.variables()[a]},rulesets:function(){return this._rulesets?this._rulesets:this._rulesets=this.rules.filter(function(b){return b instanceof a.Ruleset||b instanceof a.mixin.Definition})},find:function(b,c){c=c||this;var d=[],e,f,g=b.toCSS();return g in this._lookups?this._lookups[g]:(this.rulesets().forEach(function(e){if(e!==c)for(var g=0;g<e.selectors.length;g++)if(f=b.match(e.selectors[g])){b.elements.length>e.selectors[g].elements.length?Array.prototype.push.apply(d,e.find(new a.Selector(b.elements.slice(1)),c)):d.push(e);break}}),this._lookups[g]=d)},toCSS:function(b,c){var d=[],e=[],f=[],g=[],h,i;this.root||(b.length===0?g=this.selectors.map(function(a){return[a]}):this.joinSelectors(g,b,this.selectors));for(var j=0;j<this.rules.length;j++)i=this.rules[j],i.rules||i instanceof a.Directive?f.push(i.toCSS(g,c)):i instanceof a.Comment?i.silent||(this.root?f.push(i.toCSS(c)):e.push(i.toCSS(c))):i.toCSS&&!i.variable?e.push(i.toCSS(c)):i.value&&!i.variable&&e.push(i.value.toString());return f=f.join(""),this.root?d.push(e.join(c.compress?"":"\n")):e.length>0&&(h=g.map(function(a){return a.map(function(a){return a.toCSS(c)}).join("").trim()}).join(c.compress?",":",\n"),d.push(h,(c.compress?"{":" {\n ")+e.join(c.compress?"":"\n ")+(c.compress?"}":"\n}\n"))),d.push(f),d.join("")+(c.compress?"\n":"")},joinSelectors:function(a,b,c){for(var d=0;d<c.length;d++)this.joinSelector(a,b,c[d])},joinSelector:function(b,c,d){var e=[],f=[],g=[],h=[],i=!1,j;for(var k=0;k<d.elements.length;k++)j=d.elements[k],j.combinator.value.charAt(0)==="&"&&(i=!0),i?h.push(j):g.push(j);i||(h=g,g=[]),g.length>0&&e.push(new a.Selector(g)),h.length>0&&f.push(new a.Selector(h));for(var l=0;l<c.length;l++)b.push(e.concat(c[l]).concat(f))}}}(c("../tree")),function(a){a.Selector=function(a){this.elements=a,this.elements[0].combinator.value===""&&(this.elements[0].combinator.value=" ")},a.Selector.prototype.match=function(a){var b=this.elements.length,c=a.elements.length,d=Math.min(b,c);if(b<c)return!1;for(var e=0;e<d;e++)if(this.elements[e].value!==a.elements[e].value)return!1;return!0},a.Selector.prototype.eval=function(b){return new a.Selector(this.elements.map(function(a){return a.eval(b)}))},a.Selector.prototype.toCSS=function(a){return this._css?this._css:this._css=this.elements.map(function(b){return typeof b=="string"?" "+b.trim():b.toCSS(a)}).join("")}}(c("../tree")),function(b){b.URL=function(b,c){b.data?this.attrs=b:(typeof a!="undefined"&&!/^(?:https?:\/\/|file:\/\/|data:|\/)/.test(b.value)&&c.length>0&&(b.value=c[0]+(b.value.charAt(0)==="/"?b.value.slice(1):b.value)),this.value=b,this.paths=c)},b.URL.prototype={toCSS:function(){return"url("+(this.attrs?"data:"+this.attrs.mime+this.attrs.charset+this.attrs.base64+this.attrs.data:this.value.toCSS())+")"},eval:function(a){return this.attrs?this:new b.URL(this.value.eval(a),this.paths)}}}(c("../tree")),function(a){a.Value=function(a){this.value=a,this.is="value"},a.Value.prototype={eval:function(b){return this.value.length===1?this.value[0].eval(b):new a.Value(this.value.map(function(a){return a.eval(b)}))},toCSS:function(a){return this.value.map(function(b){return b.toCSS(a)}).join(a.compress?",":", ")}}}(c("../tree")),function(a){a.Variable=function(a,b,c){this.name=a,this.index=b,this.file=c},a.Variable.prototype={eval:function(b){var c,d,e=this.name;e.indexOf("@@")==0&&(e="@"+(new a.Variable(e.slice(1))).eval(b).value);if(c=a.find(b.frames,function(a){if(d=a.variable(e))return d.value.eval(b)}))return c;throw{type:"Name",message:"variable "+e+" is undefined",filename:this.file,index:this.index}}}}(c("../tree")),function(a){a.find=function(a,b){for(var c=0,d;c<a.length;c++)if(d=b.call(a,a[c]))return d;return null},a.jsify=function(a){return Array.isArray(a.value)&&a.value.length>1?"["+a.value.map(function(a){return a.toCSS(!1)}).join(", ")+"]":a.toCSS(!1)}}(c("./tree"));var g=location.protocol==="file:"||location.protocol==="chrome:"||location.protocol==="chrome-extension:"||location.protocol==="resource:";d.env=d.env||(location.hostname=="127.0.0.1"||location.hostname=="0.0.0.0"||location.hostname=="localhost"||location.port.length>0||g?"development":"production"),d.async=!1,d.poll=d.poll||(g?1e3:1500),d.watch=function(){return this.watchMode=!0},d.unwatch=function(){return this.watchMode=!1},d.env==="development"?(d.optimization=0,/!watch/.test(location.hash)&&d.watch(),d.watchTimer=setInterval(function(){d.watchMode&&n(function(a,b,c,d,e){b&&r(b.toCSS(),d,e.lastModified)})},d.poll)):d.optimization=3;var h;try{h=typeof a.localStorage=="undefined"?null:a.localStorage}catch(i){h=null}var j=document.getElementsByTagName("link"),k=/^text\/(x-)?less$/;d.sheets=[];for(var l=0;l<j.length;l++)(j[l].rel==="stylesheet/less"||j[l].rel.match(/stylesheet/)&&j[l].type.match(k))&&d.sheets.push(j[l]);d.refresh=function(a){var b,c;b=c=new Date,n(function(a,d,e,f,g){g.local?v("loading "+f.href+" from cache."):(v("parsed "+f.href+" successfully."),r(d.toCSS(),f,g.lastModified)),v("css for "+f.href+" generated in "+(new Date-c)+"ms"),g.remaining===0&&v("css generated in "+(new Date-b)+"ms"),c=new Date},a),m()},d.refreshStyles=m,d.refresh(d.env==="development")})(window);
\ No newline at end of file
+(function(a,b){function c(b){return a.less[b.split("/")[1]]}function l(){var a=document.getElementsByTagName("style");for(var b=0;b<a.length;b++)a[b].type.match(j)&&(new d.Parser).parse(a[b].innerHTML||"",function(c,d){var e=d.toCSS(),f=a[b];f.type="text/css",f.styleSheet?f.styleSheet.cssText=e:f.innerHTML=e})}function m(a,b){for(var c=0;c<d.sheets.length;c++)n(d.sheets[c],a,b,d.sheets.length-(c+1))}function n(b,c,e,f){var h=a.location.href.replace(/[#?].*$/,""),i=b.href.replace(/\?.*$/,""),j=g&&g.getItem(i),k=g&&g.getItem(i+":timestamp"),l={css:j,timestamp:k};/^(https?|file):/.test(i)||(i.charAt(0)=="/"?i=a.location.protocol+"//"+a.location.host+i:i=h.slice(0,h.lastIndexOf("/")+1)+i);var m=i.match(/([^\/]+)$/)[1];q(b.href,b.type,function(a,g){if(!e&&l&&g&&(new Date(g)).valueOf()===(new Date(l.timestamp)).valueOf())p(l.css,b),c(null,null,a,b,{local:!0,remaining:f});else try{(new d.Parser({optimization:d.optimization,paths:[i.replace(/[\w\.-]+$/,"")],mime:b.type,filename:m})).parse(a,function(d,e){if(d)return u(d,i);try{c(d,e,a,b,{local:!1,lastModified:g,remaining:f}),s(document.getElementById("less-error-message:"+o(i)))}catch(d){u(d,i)}})}catch(h){u(h,i)}},function(a,b){throw new Error("Couldn't load "+b+" ("+a+")")})}function o(a){return a.replace(/^[a-z]+:\/\/?[^\/]+/,"").replace(/^\//,"").replace(/\?.*$/,"").replace(/\.[^\.\/]+$/,"").replace(/[^\.\w-]+/g,"-").replace(/\./g,":")}function p(a,b,c){var d,e=b.href?b.href.replace(/\?.*$/,""):"",f="less:"+(b.title||o(e));(d=document.getElementById(f))===null&&(d=document.createElement("style"),d.type="text/css",d.media=b.media||"screen",d.id=f,document.getElementsByTagName("head")[0].appendChild(d));if(d.styleSheet)try{d.styleSheet.cssText=a}catch(h){throw new Error("Couldn't reassign styleSheet.cssText.")}else(function(a){d.childNodes.length>0?d.firstChild.nodeValue!==a.nodeValue&&d.replaceChild(a,d.firstChild):d.appendChild(a)})(document.createTextNode(a));c&&g&&(t("saving "+e+" to cache."),g.setItem(e,a),g.setItem(e+":timestamp",c))}function q(a,b,c,e){function i(b,c,d){b.status>=200&&b.status<300?c(b.responseText,b.getResponseHeader("Last-Modified")):typeof d=="function"&&d(b.status,a)}var g=r(),h=f?!1:d.async;typeof g.overrideMimeType=="function"&&g.overrideMimeType("text/css"),g.open("GET",a,h),g.setRequestHeader("Accept",b||"text/x-less, text/css; q=0.9, */*; q=0.5"),g.send(null),f?g.status===0||g.status>=200&&g.status<300?c(g.responseText):e(g.status,a):h?g.onreadystatechange=function(){g.readyState==4&&i(g,c,e)}:i(g,c,e)}function r(){if(a.XMLHttpRequest)return new XMLHttpRequest;try{return new ActiveXObject("MSXML2.XMLHTTP.3.0")}catch(b){return t("browser doesn't support AJAX."),null}}function s(a){return a&&a.parentNode.removeChild(a)}function t(a){d.env=="development"&&typeof console!="undefined"&&console.log("less: "+a)}function u(a,b){var c="less-error-message:"+o(b),e='<li><label>{line}</label><pre class="{class}">{content}</pre></li>',f=document.createElement("div"),g,h,i=[],j=a.filename||b;f.id=c,f.className="less-error-message",h="<h3>"+(a.message||"There is an error in your .less file")+"</h3>"+'<p>in <a href="'+j+'">'+j+"</a> ";var k=function(a,b,c){a.extract[b]&&i.push(e.replace(/\{line\}/,parseInt(a.line)+(b-1)).replace(/\{class\}/,c).replace(/\{content\}/,a.extract[b]))};a.stack?h+="<br/>"+a.stack.split("\n").slice(1).join("<br/>"):a.extract&&(k(a,0,""),k(a,1,"line"),k(a,2,""),h+="on line "+a.line+", column "+(a.column+1)+":</p>"+"<ul>"+i.join("")+"</ul>"),f.innerHTML=h,p([".less-error-message ul, .less-error-message li {","list-style-type: none;","margin-right: 15px;","padding: 4px 0;","margin: 0;","}",".less-error-message label {","font-size: 12px;","margin-right: 15px;","padding: 4px 0;","color: #cc7777;","}",".less-error-message pre {","color: #dd6666;","padding: 4px 0;","margin: 0;","display: inline-block;","}",".less-error-message pre.line {","color: #ff0000;","}",".less-error-message h3 {","font-size: 20px;","font-weight: bold;","padding: 15px 0 5px 0;","margin: 0;","}",".less-error-message a {","color: #10a","}",".less-error-message .error {","color: red;","font-weight: bold;","padding-bottom: 2px;","border-bottom: 1px dashed red;","}"].join("\n"),{title:"error-message"}),f.style.cssText=["font-family: Arial, sans-serif","border: 1px solid #e00","background-color: #eee","border-radius: 5px","-webkit-border-radius: 5px","-moz-border-radius: 5px","color: #e00","padding: 15px","margin-bottom: 15px"].join(";"),d.env=="development"&&(g=setInterval(function(){document.body&&(document.getElementById(c)?document.body.replaceChild(f,document.getElementById(c)):document.body.insertBefore(f,document.body.firstChild),clearInterval(g))},10))}typeof define=="function"&&define.amd&&define("less",[],function(){return d}),Array.isArray||(Array.isArray=function(a){return Object.prototype.toString.call(a)==="[object Array]"||a instanceof Array}),Array.prototype.forEach||(Array.prototype.forEach=function(a,b){var c=this.length>>>0;for(var d=0;d<c;d++)d in this&&a.call(b,this[d],d,this)}),Array.prototype.map||(Array.prototype.map=function(a){var b=this.length>>>0,c=new Array(b),d=arguments[1];for(var e=0;e<b;e++)e in this&&(c[e]=a.call(d,this[e],e,this));return c}),Array.prototype.filter||(Array.prototype.filter=function(a){var b=[],c=arguments[1];for(var d=0;d<this.length;d++)a.call(c,this[d])&&b.push(this[d]);return b}),Array.prototype.reduce||(Array.prototype.reduce=function(a){var b=this.length>>>0,c=0;if(b===0&&arguments.length===1)throw new TypeError;if(arguments.length>=2)var d=arguments[1];else do{if(c in this){d=this[c++];break}if(++c>=b)throw new TypeError}while(!0);for(;c<b;c++)c in this&&(d=a.call(null,d,this[c],c,this));return d}),Array.prototype.indexOf||(Array.prototype.indexOf=function(a){var b=this.length,c=arguments[1]||0;if(!b)return-1;if(c>=b)return-1;c<0&&(c+=b);for(;c<b;c++){if(!Object.prototype.hasOwnProperty.call(this,c))continue;if(a===this[c])return c}return-1}),Object.keys||(Object.keys=function(a){var b=[];for(var c in a)Object.prototype.hasOwnProperty.call(a,c)&&b.push(c);return b}),String.prototype.trim||(String.prototype.trim=function(){return String(this).replace(/^\s\s*/,"").replace(/\s\s*$/,"")});var d,e;typeof environment=="object"&&{}.toString.call(environment)==="[object Environment]"?(typeof a=="undefined"?d={}:d=a.less={},e=d.tree={},d.mode="rhino"):typeof a=="undefined"?(d=exports,e=c("./tree"),d.mode="node"):(typeof a.less=="undefined"&&(a.less={}),d=a.less,e=a.less.tree={},d.mode="browser"),d.Parser=function v(a){function q(){h=k[g],i=f,l=f}function r(){k[g]=h,f=i,l=f}function s(){f>l&&(k[g]=k[g].slice(f-l),l=f)}function t(a){var c,d,e,h,i,j,n,o;if(a instanceof Function)return a.call(m.parsers);if(typeof a=="string")c=b.charAt(f)===a?a:null,e=1,s();else{s();if(c=a.exec(k[g]))e=c[0].length;else return null}if(c){o=f+=e,j=f+k[g].length-e;while(f<j){h=b.charCodeAt(f);if(h!==32&&h!==10&&h!==9)break;f++}return k[g]=k[g].slice(e+(f-o)),l=f,k[g].length===0&&g<k.length-1&&g++,typeof c=="string"?c:c.length===1?c[0]:c}}function u(a,c){var d=t(a);if(!d)v(c||(typeof a=="string"?"expected '"+a+"' got '"+b.charAt(f)+"'":"unexpected token"));else return d}function v(a,b){throw{index:f,type:b||"Syntax",message:a}}function w(a){return typeof a=="string"?b.charAt(f)===a:a.test(k[g])?!0:!1}function x(a){return d.mode==="node"?c("path").basename(a):a.match(/[^\/]+$/)[0]}function y(a,c){return a.filename&&c.filename&&a.filename!==c.filename?m.imports.contents[x(a.filename)]:b}function z(a,b){for(var c=a,d=-1;c>=0&&b.charAt(c)!=="\n";c--)d++;return{line:typeof a=="number"?(b.slice(0,a).match(/\n/g)||"").length:null,column:d}}function A(a,b){var c=y(a,b),d=z(a.index,c),e=d.line,f=d.column,g=c.split("\n");this.type=a.type||"Syntax",this.message=a.message,this.filename=a.filename||b.filename,this.index=a.index,this.line=typeof e=="number"?e+1:null,this.callLine=a.call&&z(a.call,c).line+1,this.callExtract=g[z(a.call,c).line],this.stack=a.stack,this.column=f,this.extract=[g[e-1],g[e],g[e+1]]}var b,f,g,h,i,j,k,l,m,n=this,o=function(){},p=this.imports={paths:a&&a.paths||[],queue:[],files:{},contents:{},mime:a&&a.mime,error:null,push:function(b,c){var e=this;this.queue.push(b),d.Parser.importer(b,this.paths,function(a,d,f){e.queue.splice(e.queue.indexOf(b),1),e.files[b]=d,e.contents[b]=f,a&&!e.error&&(e.error=a),c(a,d),e.queue.length===0&&o()},a)}};return this.env=a=a||{},this.optimization="optimization"in this.env?this.env.optimization:1,this.env.filename=this.env.filename||null,m={imports:p,parse:function(h,i){var n,p,q,r,s,u,v=[],w,x=null;f=g=l=j=0,b=h.replace(/\r\n/g,"\n"),k=function(c){var d=0,e=/[^"'`\{\}\/\(\)\\]+/g,f=/\/\*(?:[^*]|\*+[^\/*])*\*+\/|\/\/.*/g,g=/"((?:[^"\\\r\n]|\\.)*)"|'((?:[^'\\\r\n]|\\.)*)'|`((?:[^`\\\r\n]|\\.)*)`/g,h=0,i,j=c[0],k;for(var l=0,m,n;l<b.length;l++){e.lastIndex=l,(i=e.exec(b))&&i.index===l&&(l+=i[0].length,j.push(i[0])),m=b.charAt(l),f.lastIndex=g.lastIndex=l,(i=g.exec(b))&&i.index===l&&(l+=i[0].length,j.push(i[0]),m=b.charAt(l)),!k&&m==="/"&&(n=b.charAt(l+1),(n==="/"||n==="*")&&(i=f.exec(b))&&i.index===l&&(l+=i[0].length,j.push(i[0]),m=b.charAt(l)));switch(m){case"{":if(!k){h++,j.push(m);break};case"}":if(!k){h--,j.push(m),c[++d]=j=[];break};case"(":if(!k){k=!0,j.push(m);break};case")":if(k){k=!1,j.push(m);break};default:j.push(m)}}return h>0&&(x=new A({index:l,type:"Parse",message:"missing closing `}`",filename:a.filename},a)),c.map(function(a){return a.join("")})}([[]]);if(x)return i(x);try{n=new e.Ruleset([],t(this.parsers.primary)),n.root=!0}catch(y){return i(new A(y,a))}n.toCSS=function(b){var f,g,h;return function(f,g){var h=[],i;f=f||{},typeof g=="object"&&!Array.isArray(g)&&(g=Object.keys(g).map(function(a){var b=g[a];return b instanceof e.Value||(b instanceof e.Expression||(b=new e.Expression([b])),b=new e.Value([b])),new e.Rule("@"+a,b,!1,0)}),h=[new e.Ruleset(null,g)]);try{var j=b.call(this,{frames:h}).toCSS([],{compress:f.compress||!1})}catch(k){throw new A(k,a)}if(i=m.imports.error)throw i instanceof A?i:new A(i,a);return f.yuicompress&&d.mode==="node"?c("./cssmin").compressor.cssmin(j):f.compress?j.replace(/(\s)+/g,"$1"):j}}(n.eval);if(f<b.length-1){f=j,u=b.split("\n"),s=(b.slice(0,f).match(/\n/g)||"").length+1;for(var z=f,B=-1;z>=0&&b.charAt(z)!=="\n";z--)B++;x={type:"Parse",message:"Syntax Error on line "+s,index:f,filename:a.filename,line:s,column:B,extract:[u[s-2],u[s-1],u[s]]}}this.imports.queue.length>0?o=function(){i(x,n)}:i(x,n)},parsers:{primary:function(){var a,b=[];while((a=t(this.mixin.definition)||t(this.rule)||t(this.ruleset)||t(this.mixin.call)||t(this.comment)||t(this.directive))||t(/^[\s\n]+/))a&&b.push(a);return b},comment:function(){var a;if(b.charAt(f)!=="/")return;if(b.charAt(f+1)==="/")return new e.Comment(t(/^\/\/.*/),!0);if(a=t(/^\/\*(?:[^*]|\*+[^\/*])*\*+\/\n?/))return new e.Comment(a)},entities:{quoted:function(){var a,c=f,d;b.charAt(c)==="~"&&(c++,d=!0);if(b.charAt(c)!=='"'&&b.charAt(c)!=="'")return;d&&t("~");if(a=t(/^"((?:[^"\\\r\n]|\\.)*)"|'((?:[^'\\\r\n]|\\.)*)'/))return new e.Quoted(a[0],a[1]||a[2],d)},keyword:function(){var a;if(a=t(/^[_A-Za-z-][_A-Za-z0-9-]*/))return e.colors.hasOwnProperty(a)?new e.Color(e.colors[a].slice(1)):new e.Keyword(a)},call:function(){var b,c,d=f;if(!(b=/^([\w-]+|%|progid:[\w\.]+)\(/.exec(k[g])))return;b=b[1].toLowerCase();if(b==="url")return null;f+=b.length;if(b==="alpha")return t(this.alpha);t("("),c=t(this.entities.arguments);if(!t(")"))return;if(b)return new e.Call(b,c,d,a.filename)},arguments:function(){var a=[],b;while(b=t(this.entities.assignment)||t(this.expression)){a.push(b);if(!t(","))break}return a},literal:function(){return t(this.entities.dimension)||t(this.entities.color)||t(this.entities.quoted)},assignment:function(){var a,b;if((a=t(/^\w+(?=\s?=)/i))&&t("=")&&(b=t(this.entity)))return new e.Assignment(a,b)},url:function(){var a;if(b.charAt(f)!=="u"||!t(/^url\(/))return;return a=t(this.entities.quoted)||t(this.entities.variable)||t(this.entities.dataURI)||t(/^[-\w%@$\/.&=:;#+?~]+/)||"",u(")"),new e.URL(a.value||a.data||a instanceof e.Variable?a:new e.Anonymous(a),p.paths)},dataURI:function(){var a;if(t(/^data:/)){a={},a.mime=t(/^[^\/]+\/[^,;)]+/)||"",a.charset=t(/^;\s*charset=[^,;)]+/)||"",a.base64=t(/^;\s*base64/)||"",a.data=t(/^,\s*[^)]+/);if(a.data)return a}},variable:function(){var c,d=f;if(b.charAt(f)==="@"&&(c=t(/^@@?[\w-]+/)))return new e.Variable(c,d,a.filename)},color:function(){var a;if(b.charAt(f)==="#"&&(a=t(/^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})/)))return new e.Color(a[1])},dimension:function(){var a,c=b.charCodeAt(f);if(c>57||c<45||c===47)return;if(a=t(/^(-?\d*\.?\d+)(px|%|em|rem|pc|ex|in|deg|s|ms|pt|cm|mm|rad|grad|turn)?/))return new e.Dimension(a[1],a[2])},javascript:function(){var a,c=f,d;b.charAt(c)==="~"&&(c++,d=!0);if(b.charAt(c)!=="`")return;d&&t("~");if(a=t(/^`([^`]*)`/))return new e.JavaScript(a[1],f,d)}},variable:function(){var a;if(b.charAt(f)==="@"&&(a=t(/^(@[\w-]+)\s*:/)))return a[1]},shorthand:function(){var a,b;if(!w(/^[@\w.%-]+\/[@\w.-]+/))return;if((a=t(this.entity))&&t("/")&&(b=t(this.entity)))return new e.Shorthand(a,b)},mixin:{call:function(){var c=[],d,g,h,i=f,j=b.charAt(f),k=!1;if(j!=="."&&j!=="#")return;while(d=t(/^[#.](?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+/))c.push(new e.Element(g,d,f)),g=t(">");t("(")&&(h=t(this.entities.arguments))&&t(")"),t(this.important)&&(k=!0);if(c.length>0&&(t(";")||w("}")))return new e.mixin.Call(c,h||[],i,a.filename,k)},definition:function(){var a,c=[],d,g,h,i,j,k=!1;if(b.charAt(f)!=="."&&b.charAt(f)!=="#"||w(/^[^{]*(;|})/))return;q();if(d=t(/^([#.](?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+)\s*\(/)){a=d[1];do{if(b.charAt(f)==="."&&t(/^\.{3}/)){k=!0;break}if(!(h=t(this.entities.variable)||t(this.entities.literal)||t(this.entities.keyword)))break;if(h instanceof e.Variable)if(t(":"))i=u(this.expression,"expected expression"),c.push({name:h.name,value:i});else{if(t(/^\.{3}/)){c.push({name:h.name,variadic:!0}),k=!0;break}c.push({name:h.name})}else c.push({value:h})}while(t(","));u(")"),t(/^when/)&&(j=u(this.conditions,"expected condition")),g=t(this.block);if(g)return new e.mixin.Definition(a,c,g,j,k);r()}}},entity:function(){return t(this.entities.literal)||t(this.entities.variable)||t(this.entities.url)||t(this.entities.call)||t(this.entities.keyword)||t(this.entities.javascript)||t(this.comment)},end:function(){return t(";")||w("}")},alpha:function(){var a;if(!t(/^\(opacity=/i))return;if(a=t(/^\d+/)||t(this.entities.variable))return u(")"),new e.Alpha(a)},element:function(){var a,b,c,d;c=t(this.combinator),a=t(/^(?:\d+\.\d+|\d+)%/)||t(/^(?:[.#]?|:*)(?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+/)||t("*")||t(this.attribute)||t(/^\([^)@]+\)/),a||t("(")&&(d=t(this.entities.variable))&&t(")")&&(a=new e.Paren(d));if(a)return new e.Element(c,a,f);if(c.value&&c.value.charAt(0)==="&")return new e.Element(c,null,f)},combinator:function(){var a,c=b.charAt(f);if(c===">"||c==="+"||c==="~"){f++;while(b.charAt(f)===" ")f++;return new e.Combinator(c)}if(c==="&"){a="&",f++,b.charAt(f)===" "&&(a="& ");while(b.charAt(f)===" ")f++;return new e.Combinator(a)}return b.charAt(f-1)===" "?new e.Combinator(" "):new e.Combinator(null)},selector:function(){var a,c,d=[],g,h;if(t("("))return a=t(this.entity),u(")"),new e.Selector([new e.Element("",a,f)]);while(c=t(this.element)){g=b.charAt(f),d.push(c);if(g==="{"||g==="}"||g===";"||g===",")break}if(d.length>0)return new e.Selector(d)},tag:function(){return t(/^[a-zA-Z][a-zA-Z-]*[0-9]?/)||t("*")},attribute:function(){var a="",b,c,d;if(!t("["))return;if(b=t(/^[a-zA-Z-]+/)||t(this.entities.quoted))(d=t(/^[|~*$^]?=/))&&(c=t(this.entities.quoted)||t(/^[\w-]+/))?a=[b,d,c.toCSS?c.toCSS():c].join(""):a=b;if(!t("]"))return;if(a)return"["+a+"]"},block:function(){var a;if(t("{")&&(a=t(this.primary))&&t("}"))return a},ruleset:function(){var b=[],c,d,g;q();while(c=t(this.selector)){b.push(c),t(this.comment);if(!t(","))break;t(this.comment)}if(b.length>0&&(d=t(this.block)))return new e.Ruleset(b,d,a.strictImports);j=f,r()},rule:function(){var a,c,d=b.charAt(f),h,l;q();if(d==="."||d==="#"||d==="&")return;if(a=t(this.variable)||t(this.property)){a.charAt(0)!="@"&&(l=/^([^@+\/'"*`(;{}-]*);/.exec(k[g]))?(f+=l[0].length-1,c=new e.Anonymous(l[1])):a==="font"?c=t(this.font):c=t(this.value),h=t(this.important);if(c&&t(this.end))return new e.Rule(a,c,h,i);j=f,r()}},"import":function(){var a,b,c=f;if(t(/^@import\s+/)&&(a=t(this.entities.quoted)||t(this.entities.url))){b=t(this.mediaFeatures);if(t(";"))return new e.Import(a,p,b,c)}},mediaFeature:function(){var a,b,c=[];do if(a=t(this.entities.keyword))c.push(a);else if(t("(")){b=t(this.property),a=t(this.entity);if(!t(")"))return null;if(b&&a)c.push(new e.Paren(new e.Rule(b,a,null,f,!0)));else if(a)c.push(new e.Paren(a));else return null}while(a);if(c.length>0)return new e.Expression(c)},mediaFeatures:function(){var a,b=[];do if(a=t(this.mediaFeature)){b.push(a);if(!t(","))break}else if(a=t(this.entities.variable)){b.push(a);if(!t(","))break}while(a);return b.length>0?b:null},media:function(){var a,b;if(t(/^@media/)){a=t(this.mediaFeatures);if(b=t(this.block))return new e.Media(b,a)}},directive:function(){var a,c,d,g,h,i;if(b.charAt(f)!=="@")return;if(c=t(this["import"])||t(this.media))return c;if(a=t(/^@page|@keyframes/)||t(/^@(?:-webkit-|-moz-|-o-|-ms-)[a-z0-9-]+/)){g=(t(/^[^{]+/)||"").trim();if(d=t(this.block))return new e.Directive(a+" "+g,d)}else if(a=t(/^@[-a-z]+/))if(a==="@font-face"){if(d=t(this.block))return new e.Directive(a,d)}else if((c=t(this.entity))&&t(";"))return new e.Directive(a,c)},font:function(){var a=[],b=[],c,d,f,g;while(g=t(this.shorthand)||t(this.entity))b.push(g);a.push(new e.Expression(b));if(t(","))while(g=t(this.expression)){a.push(g);if(!t(","))break}return new e.Value(a)},value:function(){var a,b=[],c;while(a=t(this.expression)){b.push(a);if(!t(","))break}if(b.length>0)return new e.Value(b)},important:function(){if(b.charAt(f)==="!")return t(/^! *important/)},sub:function(){var a;if(t("(")&&(a=t(this.expression))&&t(")"))return a},multiplication:function(){var a,b,c,d;if(a=t(this.operand)){while(!w(/^\/\*/)&&(c=t("/")||t("*"))&&(b=t(this.operand)))d=new e.Operation(c,[d||a,b]);return d||a}},addition:function(){var a,c,d,g;if(a=t(this.multiplication)){while((d=t(/^[-+]\s+/)||b.charAt(f-1)!=" "&&(t("+")||t("-")))&&(c=t(this.multiplication)))g=new e.Operation(d,[g||a,c]);return g||a}},conditions:function(){var a,b,c=f,d;if(a=t(this.condition)){while(t(",")&&(b=t(this.condition)))d=new e.Condition("or",d||a,b,c);return d||a}},condition:function(){var a,b,c,d,g=f,h=!1;t(/^not/)&&(h=!0),u("(");if(a=t(this.addition)||t(this.entities.keyword)||t(this.entities.quoted))return(d=t(/^(?:>=|=<|[<=>])/))?(b=t(this.addition)||t(this.entities.keyword)||t(this.entities.quoted))?c=new e.Condition(d,a,b,g,h):v("expected expression"):c=new e.Condition("=",a,new e.Keyword("true"),g,h),u(")"),t(/^and/)?new e.Condition("and",c,t(this.condition)):c},operand:function(){var a,c=b.charAt(f+1);b.charAt(f)==="-"&&(c==="@"||c==="(")&&(a=t("-"));var d=t(this.sub)||t(this.entities.dimension)||t(this.entities.color)||t(this.entities.variable)||t(this.entities.call);return a?new e.Operation("*",[new e.Dimension(-1),d]):d},expression:function(){var a,b,c=[],d;while(a=t(this.addition)||t(this.entity))c.push(a);if(c.length>0)return new e.Expression(c)},property:function(){var a;if(a=t(/^(\*?-?[-a-z_0-9]+)\s*:/))return a[1]}}}};if(d.mode==="browser"||d.mode==="rhino")d.Parser.importer=function(a,b,c,d){!/^([a-z]+:)?\//.test(a)&&b.length>0&&(a=b[0]+a),n({href:a,title:a,type:d.mime},function(e){e&&typeof d.errback=="function"?d.errback.call(null,a,b,c,d):c.apply(null,arguments)},!0)};(function(a){function b(b){return a.functions.hsla(b.h,b.s,b.l,b.a)}function c(b){if(b instanceof a.Dimension)return parseFloat(b.unit=="%"?b.value/100:b.value);if(typeof b=="number")return b;throw{error:"RuntimeError",message:"color functions take numbers as parameters"}}function d(a){return Math.min(1,Math.max(0,a))}a.functions={rgb:function(a,b,c){return this.rgba(a,b,c,1)},rgba:function(b,d,e,f){var g=[b,d,e].map(function(a){return c(a)}),f=c(f);return new a.Color(g,f)},hsl:function(a,b,c){return this.hsla(a,b,c,1)},hsla:function(a,b,d,e){function h(a){return a=a<0?a+1:a>1?a-1:a,a*6<1?g+(f-g)*a*6:a*2<1?f:a*3<2?g+(f-g)*(2/3-a)*6:g}a=c(a)%360/360,b=c(b),d=c(d),e=c(e);var f=d<=.5?d*(b+1):d+b-d*b,g=d*2-f;return this.rgba(h(a+1/3)*255,h(a)*255,h(a-1/3)*255,e)},hue:function(b){return new a.Dimension(Math.round(b.toHSL().h))},saturation:function(b){return new a.Dimension(Math.round(b.toHSL().s*100),"%")},lightness:function(b){return new a.Dimension(Math.round(b.toHSL().l*100),"%")},alpha:function(b){return new a.Dimension(b.toHSL().a)},saturate:function(a,c){var e=a.toHSL();return e.s+=c.value/100,e.s=d(e.s),b(e)},desaturate:function(a,c){var e=a.toHSL();return e.s-=c.value/100,e.s=d(e.s),b(e)},lighten:function(a,c){var e=a.toHSL();return e.l+=c.value/100,e.l=d(e.l),b(e)},darken:function(a,c){var e=a.toHSL();return e.l-=c.value/100,e.l=d(e.l),b(e)},fadein:function(a,c){var e=a.toHSL();return e.a+=c.value/100,e.a=d(e.a),b(e)},fadeout:function(a,c){var e=a.toHSL();return e.a-=c.value/100,e.a=d(e.a),b(e)},fade:function(a,c){var e=a.toHSL();return e.a=c.value/100,e.a=d(e.a),b(e)},spin:function(a,c){var d=a.toHSL(),e=(d.h+c.value)%360;return d.h=e<0?360+e:e,b(d)},mix:function(b,c,d){var e=d.value/100,f=e*2-1,g=b.toHSL().a-c.toHSL().a,h=((f*g==-1?f:(f+g)/(1+f*g))+1)/2,i=1-h,j=[b.rgb[0]*h+c.rgb[0]*i,b.rgb[1]*h+c.rgb[1]*i,b.rgb[2]*h+c.rgb[2]*i],k=b.alpha*e+c.alpha*(1-e);return new a.Color(j,k)},greyscale:function(b){return this.desaturate(b,new a.Dimension(100))},e:function(b){return new a.Anonymous(b instanceof a.JavaScript?b.evaluated:b)},escape:function(b){return new a.Anonymous(encodeURI(b.value).replace(/=/g,"%3D").replace(/:/g,"%3A").replace(/#/g,"%23").replace(/;/g,"%3B").replace(/\(/g,"%28").replace(/\)/g,"%29"))},"%":function(b){var c=Array.prototype.slice.call(arguments,1),d=b.value;for(var e=0;e<c.length;e++)d=d.replace(/%[sda]/i,function(a){var b=a.match(/s/i)?c[e].value:c[e].toCSS();return a.match(/[A-Z]$/)?encodeURIComponent(b):b});return d=d.replace(/%%/g,"%"),new a.Quoted('"'+d+'"',d)},round:function(a){return this._math("round",a)},ceil:function(a){return this._math("ceil",a)},floor:function(a){return this._math("floor",a)},_math:function(b,d){if(d instanceof a.Dimension)return new a.Dimension(Math[b](c(d)),d.unit);if(typeof d=="number")return Math[b](d);throw{type:"Argument",message:"argument must be a number"}},argb:function(b){return new a.Anonymous(b.toARGB())},percentage:function(b){return new a.Dimension(b.value*100,"%")},color:function(b){if(b instanceof a.Quoted)return new a.Color(b.value.slice(1));throw{type:"Argument",message:"argument must be a string"}},iscolor:function(b){return this._isa(b,a.Color)},isnumber:function(b){return this._isa(b,a.Dimension)},isstring:function(b){return this._isa(b,a.Quoted)},iskeyword:function(b){return this._isa(b,a.Keyword)},isurl:function(b){return this._isa(b,a.URL)},ispixel:function(b){return b instanceof a.Dimension&&b.unit==="px"?a.True:a.False},ispercentage:function(b){return b instanceof a.Dimension&&b.unit==="%"?a.True:a.False},isem:function(b){return b instanceof a.Dimension&&b.unit==="em"?a.True:a.False},_isa:function(b,c){return b instanceof c?a.True:a.False}}})(c("./tree")),function(a){a.colors={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgrey:"#a9a9a9",darkgreen:"#006400",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dimgrey:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",gold:"#ffd700",goldenrod:"#daa520",gray:"#808080",grey:"#808080",green:"#008000",greenyellow:"#adff2f",honeydew:"#f0fff0",hotpink:"#ff69b4",indianred:"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavender:"#e6e6fa",lavenderblush:"#fff0f5",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgray:"#d3d3d3",lightgrey:"#d3d3d3",lightgreen:"#90ee90",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightslategrey:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370d8",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#d87093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",slategrey:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32"}}(c("./tree")),function(a){a.Alpha=function(a){this.value=a},a.Alpha.prototype={toCSS:function(){return"alpha(opacity="+(this.value.toCSS?this.value.toCSS():this.value)+")"},eval:function(a){return this.value.eval&&(this.value=this.value.eval(a)),this}}}(c("../tree")),function(a){a.Anonymous=function(a){this.value=a.value||a},a.Anonymous.prototype={toCSS:function(){return this.value},eval:function(){return this}}}(c("../tree")),function(a){a.Assignment=function(a,b){this.key=a,this.value=b},a.Assignment.prototype={toCSS:function(){return this.key+"="+(this.value.toCSS?this.value.toCSS():this.value)},eval:function(a){return this.value.eval&&(this.value=this.value.eval(a)),this}}}(c("../tree")),function(a){a.Call=function(a,b,c,d){this.name=a,this.args=b,this.index=c,this.filename=d},a.Call.prototype={eval:function(b){var c=this.args.map(function(a){return a.eval(b)});if(!(this.name in a.functions))return new a.Anonymous(this.name+"("+c.map(function(a){return a.toCSS()}).join(", ")+")");try{return a.functions[this.name].apply(a.functions,c)}catch(d){throw{type:d.type||"Runtime",message:"error evaluating function `"+this.name+"`"+(d.message?": "+d.message:""),index:this.index,filename:this.filename}}},toCSS:function(a){return this.eval(a).toCSS()}}}(c("../tree")),function(a){a.Color=function(a,b){Array.isArray(a)?this.rgb=a:a.length==6?this.rgb=a.match(/.{2}/g).map(function(a){return parseInt(a,16)}):this.rgb=a.split("").map(function(a){return parseInt(a+a,16)}),this.alpha=typeof b=="number"?b:1},a.Color.prototype={eval:function(){return this},toCSS:function(){return this.alpha<1?"rgba("+this.rgb.map(function(a){return Math.round(a)}).concat(this.alpha).join(", ")+")":"#"+this.rgb.map(function(a){return a=Math.round(a),a=(a>255?255:a<0?0:a).toString(16),a.length===1?"0"+a:a}).join("")},operate:function(b,c){var d=[];c instanceof a.Color||(c=c.toColor());for(var e=0;e<3;e++)d[e]=a.operate(b,this.rgb[e],c.rgb[e]);return new a.Color(d,this.alpha+c.alpha)},toHSL:function(){var a=this.rgb[0]/255,b=this.rgb[1]/255,c=this.rgb[2]/255,d=this.alpha,e=Math.max(a,b,c),f=Math.min(a,b,c),g,h,i=(e+f)/2,j=e-f;if(e===f)g=h=0;else{h=i>.5?j/(2-e-f):j/(e+f);switch(e){case a:g=(b-c)/j+(b<c?6:0);break;case b:g=(c-a)/j+2;break;case c:g=(a-b)/j+4}g/=6}return{h:g*360,s:h,l:i,a:d}},toARGB:function(){var a=[Math.round(this.alpha*255)].concat(this.rgb);return"#"+a.map(function(a){return a=Math.round(a),a=(a>255?255:a<0?0:a).toString(16),a.length===1?"0"+a:a}).join("")}}}(c("../tree")),function(a){a.Comment=function(a,b){this.value=a,this.silent=!!b},a.Comment.prototype={toCSS:function(a){return a.compress?"":this.value},eval:function(){return this}}}(c("../tree")),function(a){a.Condition=function(a,b,c,d,e){this.op=a.trim(),this.lvalue=b,this.rvalue=c,this.index=d,this.negate=e},a.Condition.prototype.eval=function(a){var b=this.lvalue.eval(a),c=this.rvalue.eval(a),d=this.index,e,e=function(a){switch(a){case"and":return b&&c;case"or":return b||c;default:if(b.compare)e=b.compare(c);else if(c.compare)e=c.compare(b);else throw{type:"Type",message:"Unable to perform comparison",index:d};switch(e){case-1:return a==="<"||a==="=<";case 0:return a==="="||a===">="||a==="=<";case 1:return a===">"||a===">="}}}(this.op);return this.negate?!e:e}}(c("../tree")),function(a){a.Dimension=function(a,b){this.value=parseFloat(a),this.unit=b||null},a.Dimension.prototype={eval:function(){return this},toColor:function(){return new a.Color([this.value,this.value,this.value])},toCSS:function(){var a=this.value+this.unit;return a},operate:function(b,c){return new a.Dimension(a.operate(b,this.value,c.value),this.unit||c.unit)},compare:function(b){return b instanceof a.Dimension?b.value>this.value?-1:b.value<this.value?1:0:-1}}}(c("../tree")),function(a){a.Directive=function(b,c,d){this.name=b,Array.isArray(c)?(this.ruleset=new a.Ruleset([],c),this.ruleset.allowImports=!0):this.value=c},a.Directive.prototype={toCSS:function(a,b){return this.ruleset?(this.ruleset.root=!0,this.name+(b.compress?"{":" {\n ")+this.ruleset.toCSS(a,b).trim().replace(/\n/g,"\n ")+(b.compress?"}":"\n}\n")):this.name+" "+this.value.toCSS()+";\n"},eval:function(a){return a.frames.unshift(this),this.ruleset=this.ruleset&&this.ruleset.eval(a),a.frames.shift(),this},variable:function(b){return a.Ruleset.prototype.variable.call(this.ruleset,b)},find:function(){return a.Ruleset.prototype.find.apply(this.ruleset,arguments)},rulesets:function(){return a.Ruleset.prototype.rulesets.apply(this.ruleset)}}}(c("../tree")),function(a){a.Element=function(b,c,d){this.combinator=b instanceof a.Combinator?b:new a.Combinator(b),typeof c=="string"?this.value=c.trim():c?this.value=c:this.value="",this.index=d},a.Element.prototype.eval=function(b){return new a.Element(this.combinator,this.value.eval?this.value.eval(b):this.value,this.index)},a.Element.prototype.toCSS=function(a){return this.combinator.toCSS(a||{})+(this.value.toCSS?this.value.toCSS(a):this.value)},a.Combinator=function(a){a===" "?this.value=" ":a==="& "?this.value="& ":this.value=a?a.trim():""},a.Combinator.prototype.toCSS=function(a){return{"":""," ":" ","&":"","& ":" ",":":" :","+":a.compress?"+":" + ","~":a.compress?"~":" ~ ",">":a.compress?">":" > "}[this.value]}}(c("../tree")),function(a){a.Expression=function(a){this.value=a},a.Expression.prototype={eval:function(b){return this.value.length>1?new a.Expression(this.value.map(function(a){return a.eval(b)})):this.value.length===1?this.value[0].eval(b):this},toCSS:function(a){return this.value.map(function(b){return b.toCSS?b.toCSS(a):""}).join(" ")}}}(c("../tree")),function(a){a.Import=function(b,c,d,e){var f=this;this.index=e,this._path=b,this.features=d&&new a.Value(d),b instanceof a.Quoted?this.path=/\.(le?|c)ss(\?.*)?$/.test(b.value)?b.value:b.value+".less":this.path=b.value.value||b.value,this.css=/css(\?.*)?$/.test(this.path),this.css||c.push(this.path,function(b,c){b&&(b.index=e),f.root=c||new a.Ruleset([],[])})},a.Import.prototype={toCSS:function(a){var b=this.features?" "+this.features.toCSS(a):"";return this.css?"@import "+this._path.toCSS()+b+";\n":""},eval:function(b){var c,d=this.features&&this.features.eval(b);if(this.css)return this;c=new a.Ruleset([],this.root.rules.slice(0));for(var e=0;e<c.rules.length;e++)c.rules[e]instanceof a.Import&&Array.prototype
+.splice.apply(c.rules,[e,1].concat(c.rules[e].eval(b)));return this.features?new a.Media(c.rules,this.features.value):c.rules}}}(c("../tree")),function(a){a.JavaScript=function(a,b,c){this.escaped=c,this.expression=a,this.index=b},a.JavaScript.prototype={eval:function(b){var c,d=this,e={},f=this.expression.replace(/@\{([\w-]+)\}/g,function(c,e){return a.jsify((new a.Variable("@"+e,d.index)).eval(b))});try{f=new Function("return ("+f+")")}catch(g){throw{message:"JavaScript evaluation error: `"+f+"`",index:this.index}}for(var h in b.frames[0].variables())e[h.slice(1)]={value:b.frames[0].variables()[h].value,toJS:function(){return this.value.eval(b).toCSS()}};try{c=f.call(e)}catch(g){throw{message:"JavaScript evaluation error: '"+g.name+": "+g.message+"'",index:this.index}}return typeof c=="string"?new a.Quoted('"'+c+'"',c,this.escaped,this.index):Array.isArray(c)?new a.Anonymous(c.join(", ")):new a.Anonymous(c)}}}(c("../tree")),function(a){a.Keyword=function(a){this.value=a},a.Keyword.prototype={eval:function(){return this},toCSS:function(){return this.value},compare:function(b){return b instanceof a.Keyword?b.value===this.value?0:1:-1}},a.True=new a.Keyword("true"),a.False=new a.Keyword("false")}(c("../tree")),function(a){a.Media=function(b,c){var d=new a.Element("&",null,0),e=[new a.Selector([d])];this.features=new a.Value(c),this.ruleset=new a.Ruleset(e,b),this.ruleset.allowImports=!0},a.Media.prototype={toCSS:function(a,b){var c=this.features.toCSS(b);return this.ruleset.root=a.length===0||a[0].multiMedia,"@media "+c+(b.compress?"{":" {\n ")+this.ruleset.toCSS(a,b).trim().replace(/\n/g,"\n ")+(b.compress?"}":"\n}\n")},eval:function(b){b.mediaBlocks||(b.mediaBlocks=[],b.mediaPath=[]);var c=b.mediaBlocks.length;b.mediaPath.push(this),b.mediaBlocks.push(this);var d=new a.Media([],[]);return d.features=this.features.eval(b),b.frames.unshift(this.ruleset),d.ruleset=this.ruleset.eval(b),b.frames.shift(),b.mediaBlocks[c]=d,b.mediaPath.pop(),b.mediaPath.length===0?d.evalTop(b):d.evalNested(b)},variable:function(b){return a.Ruleset.prototype.variable.call(this.ruleset,b)},find:function(){return a.Ruleset.prototype.find.apply(this.ruleset,arguments)},rulesets:function(){return a.Ruleset.prototype.rulesets.apply(this.ruleset)},evalTop:function(b){var c=this;if(b.mediaBlocks.length>1){var d=new a.Element("&",null,0),e=[new a.Selector([d])];c=new a.Ruleset(e,b.mediaBlocks),c.multiMedia=!0}return delete b.mediaBlocks,delete b.mediaPath,c},evalNested:function(b){var c,d,e=b.mediaPath.concat([this]);for(c=0;c<e.length;c++)d=e[c].features instanceof a.Value?e[c].features.value:e[c].features,e[c]=Array.isArray(d)?d:[d];return this.features=new a.Value(this.permute(e).map(function(b){b=b.map(function(b){return b.toCSS?b:new a.Anonymous(b)});for(c=b.length-1;c>0;c--)b.splice(c,0,new a.Anonymous("and"));return new a.Expression(b)})),new a.Ruleset([],[])},permute:function(a){if(a.length===0)return[];if(a.length===1)return a[0];var b=[],c=this.permute(a.slice(1));for(var d=0;d<c.length;d++)for(var e=0;e<a[0].length;e++)b.push([a[0][e]].concat(c[d]));return b}}}(c("../tree")),function(a){a.mixin={},a.mixin.Call=function(b,c,d,e,f){this.selector=new a.Selector(b),this.arguments=c,this.index=d,this.filename=e,this.important=f},a.mixin.Call.prototype={eval:function(a){var b,c,d=[],e=!1;for(var f=0;f<a.frames.length;f++)if((b=a.frames[f].find(this.selector)).length>0){c=this.arguments&&this.arguments.map(function(b){return b.eval(a)});for(var g=0;g<b.length;g++)if(b[g].match(c,a))try{Array.prototype.push.apply(d,b[g].eval(a,this.arguments,this.important).rules),e=!0}catch(h){throw{message:h.message,index:this.index,filename:this.filename,stack:h.stack}}if(e)return d;throw{type:"Runtime",message:"No matching definition was found for `"+this.selector.toCSS().trim()+"("+this.arguments.map(function(a){return a.toCSS()}).join(", ")+")`",index:this.index,filename:this.filename}}throw{type:"Name",message:this.selector.toCSS().trim()+" is undefined",index:this.index,filename:this.filename}}},a.mixin.Definition=function(b,c,d,e,f){this.name=b,this.selectors=[new a.Selector([new a.Element(null,b)])],this.params=c,this.condition=e,this.variadic=f,this.arity=c.length,this.rules=d,this._lookups={},this.required=c.reduce(function(a,b){return!b.name||b.name&&!b.value?a+1:a},0),this.parent=a.Ruleset.prototype,this.frames=[]},a.mixin.Definition.prototype={toCSS:function(){return""},variable:function(a){return this.parent.variable.call(this,a)},variables:function(){return this.parent.variables.call(this)},find:function(){return this.parent.find.apply(this,arguments)},rulesets:function(){return this.parent.rulesets.apply(this)},evalParams:function(b,c){var d=new a.Ruleset(null,[]),e;for(var f=0,g,h;f<this.params.length;f++)if(h=this.params[f].name)if(this.params[f].variadic&&c){e=[];for(var i=f;i<c.length;i++)e.push(c[i].eval(b));d.rules.unshift(new a.Rule(h,(new a.Expression(e)).eval(b)))}else if(g=c&&c[f]||this.params[f].value)d.rules.unshift(new a.Rule(h,g.eval(b)));else throw{type:"Runtime",message:"wrong number of arguments for "+this.name+" ("+c.length+" for "+this.arity+")"};return d},eval:function(b,c,d){var e=this.evalParams(b,c),f,g=[],h,i;for(var j=0;j<Math.max(this.params.length,c&&c.length);j++)g.push(c[j]||this.params[j].value);return e.rules.unshift(new a.Rule("@arguments",(new a.Expression(g)).eval(b))),h=d?this.rules.map(function(b){return new a.Rule(b.name,b.value,"!important",b.index)}):this.rules.slice(0),(new a.Ruleset(null,h)).eval({frames:[this,e].concat(this.frames,b.frames)})},match:function(a,b){var c=a&&a.length||0,d,e;if(!this.variadic){if(c<this.required)return!1;if(c>this.params.length)return!1;if(this.required>0&&c>this.params.length)return!1}if(this.condition&&!this.condition.eval({frames:[this.evalParams(b,a)].concat(b.frames)}))return!1;d=Math.min(c,this.arity);for(var f=0;f<d;f++)if(!this.params[f].name&&a[f].eval(b).toCSS()!=this.params[f].value.eval(b).toCSS())return!1;return!0}}}(c("../tree")),function(a){a.Operation=function(a,b){this.op=a.trim(),this.operands=b},a.Operation.prototype.eval=function(b){var c=this.operands[0].eval(b),d=this.operands[1].eval(b),e;if(c instanceof a.Dimension&&d instanceof a.Color)if(this.op==="*"||this.op==="+")e=d,d=c,c=e;else throw{name:"OperationError",message:"Can't substract or divide a color from a number"};return c.operate(this.op,d)},a.operate=function(a,b,c){switch(a){case"+":return b+c;case"-":return b-c;case"*":return b*c;case"/":return b/c}}}(c("../tree")),function(a){a.Paren=function(a){this.value=a},a.Paren.prototype={toCSS:function(a){return"("+this.value.toCSS(a)+")"},eval:function(b){return new a.Paren(this.value.eval(b))}}}(c("../tree")),function(a){a.Quoted=function(a,b,c,d){this.escaped=c,this.value=b||"",this.quote=a.charAt(0),this.index=d},a.Quoted.prototype={toCSS:function(){return this.escaped?this.value:this.quote+this.value+this.quote},eval:function(b){var c=this,d=this.value.replace(/`([^`]+)`/g,function(d,e){return(new a.JavaScript(e,c.index,!0)).eval(b).value}).replace(/@\{([\w-]+)\}/g,function(d,e){var f=(new a.Variable("@"+e,c.index)).eval(b);return"value"in f?f.value:f.toCSS()});return new a.Quoted(this.quote+d+this.quote,d,this.escaped,this.index)}}}(c("../tree")),function(a){a.Rule=function(b,c,d,e,f){this.name=b,this.value=c instanceof a.Value?c:new a.Value([c]),this.important=d?" "+d.trim():"",this.index=e,this.inline=f||!1,b.charAt(0)==="@"?this.variable=!0:this.variable=!1},a.Rule.prototype.toCSS=function(a){return this.variable?"":this.name+(a.compress?":":": ")+this.value.toCSS(a)+this.important+(this.inline?"":";")},a.Rule.prototype.eval=function(b){return new a.Rule(this.name,this.value.eval(b),this.important,this.index,this.inline)},a.Shorthand=function(a,b){this.a=a,this.b=b},a.Shorthand.prototype={toCSS:function(a){return this.a.toCSS(a)+"/"+this.b.toCSS(a)},eval:function(){return this}}}(c("../tree")),function(a){a.Ruleset=function(a,b,c){this.selectors=a,this.rules=b,this._lookups={},this.strictImports=c},a.Ruleset.prototype={eval:function(b){var c=this.selectors&&this.selectors.map(function(a){return a.eval(b)}),d=new a.Ruleset(c,this.rules.slice(0),this.strictImports);d.root=this.root,d.allowImports=this.allowImports,b.frames.unshift(d);if(d.root||d.allowImports||!d.strictImports)for(var e=0;e<d.rules.length;e++)d.rules[e]instanceof a.Import&&Array.prototype.splice.apply(d.rules,[e,1].concat(d.rules[e].eval(b)));for(var e=0;e<d.rules.length;e++)d.rules[e]instanceof a.mixin.Definition&&(d.rules[e].frames=b.frames.slice(0));for(var e=0;e<d.rules.length;e++)d.rules[e]instanceof a.mixin.Call&&Array.prototype.splice.apply(d.rules,[e,1].concat(d.rules[e].eval(b)));for(var e=0,f;e<d.rules.length;e++)f=d.rules[e],f instanceof a.mixin.Definition||(d.rules[e]=f.eval?f.eval(b):f);return b.frames.shift(),d},match:function(a){return!a||a.length===0},variables:function(){return this._variables?this._variables:this._variables=this.rules.reduce(function(b,c){return c instanceof a.Rule&&c.variable===!0&&(b[c.name]=c),b},{})},variable:function(a){return this.variables()[a]},rulesets:function(){return this._rulesets?this._rulesets:this._rulesets=this.rules.filter(function(b){return b instanceof a.Ruleset||b instanceof a.mixin.Definition})},find:function(b,c){c=c||this;var d=[],e,f,g=b.toCSS();return g in this._lookups?this._lookups[g]:(this.rulesets().forEach(function(e){if(e!==c)for(var g=0;g<e.selectors.length;g++)if(f=b.match(e.selectors[g])){b.elements.length>e.selectors[g].elements.length?Array.prototype.push.apply(d,e.find(new a.Selector(b.elements.slice(1)),c)):d.push(e);break}}),this._lookups[g]=d)},toCSS:function(b,c){var d=[],e=[],f=[],g=[],h,i;this.root||(b.length===0?g=this.selectors.map(function(a){return[a]}):this.joinSelectors(g,b,this.selectors));for(var j=0;j<this.rules.length;j++)i=this.rules[j],i.rules||i instanceof a.Directive||i instanceof a.Media?f.push(i.toCSS(g,c)):i instanceof a.Comment?i.silent||(this.root?f.push(i.toCSS(c)):e.push(i.toCSS(c))):i.toCSS&&!i.variable?e.push(i.toCSS(c)):i.value&&!i.variable&&e.push(i.value.toString());return f=f.join(""),this.root?d.push(e.join(c.compress?"":"\n")):e.length>0&&(h=g.map(function(a){return a.map(function(a){return a.toCSS(c)}).join("").trim()}).join(c.compress?",":",\n"),d.push(h,(c.compress?"{":" {\n ")+e.join(c.compress?"":"\n ")+(c.compress?"}":"\n}\n"))),d.push(f),d.join("")+(c.compress?"\n":"")},joinSelectors:function(a,b,c){for(var d=0;d<c.length;d++)this.joinSelector(a,b,c[d])},joinSelector:function(b,c,d){var e=[],f=[],g=[],h=[],i=!1,j;for(var k=0;k<d.elements.length;k++)j=d.elements[k],j.combinator.value.charAt(0)==="&"&&(i=!0),i?h.push(j):g.push(j);i||(h=g,g=[]),g.length>0&&e.push(new a.Selector(g)),h.length>0&&f.push(new a.Selector(h));for(var l=0;l<c.length;l++)b.push(e.concat(c[l]).concat(f))}}}(c("../tree")),function(a){a.Selector=function(a){this.elements=a,this.elements[0].combinator.value===""&&(this.elements[0].combinator.value=" ")},a.Selector.prototype.match=function(a){var b=this.elements.length,c=a.elements.length,d=Math.min(b,c);if(b<c)return!1;for(var e=0;e<d;e++)if(this.elements[e].value!==a.elements[e].value)return!1;return!0},a.Selector.prototype.eval=function(b){return new a.Selector(this.elements.map(function(a){return a.eval(b)}))},a.Selector.prototype.toCSS=function(a){return this._css?this._css:this._css=this.elements.map(function(b){return typeof b=="string"?" "+b.trim():b.toCSS(a)}).join("")}}(c("../tree")),function(b){b.URL=function(b,c){b.data?this.attrs=b:(typeof a!="undefined"&&!/^(?:https?:\/\/|file:\/\/|data:|\/)/.test(b.value)&&c.length>0&&(b.value=c[0]+(b.value.charAt(0)==="/"?b.value.slice(1):b.value)),this.value=b,this.paths=c)},b.URL.prototype={toCSS:function(){return"url("+(this.attrs?"data:"+this.attrs.mime+this.attrs.charset+this.attrs.base64+this.attrs.data:this.value.toCSS())+")"},eval:function(a){return this.attrs?this:new b.URL(this.value.eval(a),this.paths)}}}(c("../tree")),function(a){a.Value=function(a){this.value=a,this.is="value"},a.Value.prototype={eval:function(b){return this.value.length===1?this.value[0].eval(b):new a.Value(this.value.map(function(a){return a.eval(b)}))},toCSS:function(a){return this.value.map(function(b){return b.toCSS(a)}).join(a.compress?",":", ")}}}(c("../tree")),function(a){a.Variable=function(a,b,c){this.name=a,this.index=b,this.file=c},a.Variable.prototype={eval:function(b){var c,d,e=this.name;e.indexOf("@@")==0&&(e="@"+(new a.Variable(e.slice(1))).eval(b).value);if(c=a.find(b.frames,function(a){if(d=a.variable(e))return d.value.eval(b)}))return c;throw{type:"Name",message:"variable "+e+" is undefined",filename:this.file,index:this.index}}}}(c("../tree")),function(a){a.find=function(a,b){for(var c=0,d;c<a.length;c++)if(d=b.call(a,a[c]))return d;return null},a.jsify=function(a){return Array.isArray(a.value)&&a.value.length>1?"["+a.value.map(function(a){return a.toCSS(!1)}).join(", ")+"]":a.toCSS(!1)}}(c("./tree"));var f=location.protocol==="file:"||location.protocol==="chrome:"||location.protocol==="chrome-extension:"||location.protocol==="resource:";d.env=d.env||(location.hostname=="127.0.0.1"||location.hostname=="0.0.0.0"||location.hostname=="localhost"||location.port.length>0||f?"development":"production"),d.async=!1,d.poll=d.poll||(f?1e3:1500),d.watch=function(){return this.watchMode=!0},d.unwatch=function(){return this.watchMode=!1},d.env==="development"?(d.optimization=0,/!watch/.test(location.hash)&&d.watch(),d.watchTimer=setInterval(function(){d.watchMode&&m(function(a,b,c,d,e){b&&p(b.toCSS(),d,e.lastModified)})},d.poll)):d.optimization=3;var g;try{g=typeof a.localStorage=="undefined"?null:a.localStorage}catch(h){g=null}var i=document.getElementsByTagName("link"),j=/^text\/(x-)?less$/;d.sheets=[];for(var k=0;k<i.length;k++)(i[k].rel==="stylesheet/less"||i[k].rel.match(/stylesheet/)&&i[k].type.match(j))&&d.sheets.push(i[k]);d.refresh=function(a){var b,c;b=c=new Date,m(function(a,d,e,f,g){g.local?t("loading "+f.href+" from cache."):(t("parsed "+f.href+" successfully."),p(d.toCSS(),f,g.lastModified)),t("css for "+f.href+" generated in "+(new Date-c)+"ms"),g.remaining===0&&t("css generated in "+(new Date-b)+"ms"),c=new Date},a),l()},d.refreshStyles=l,d.refresh(d.env==="development")})(window);
\ No newline at end of file
});
/**
+ * Dropdown API
+ */
+WCF.Dropdown = {
+ /**
+ * list of callbacks
+ * @var object
+ */
+ _callbacks: { },
+
+ /**
+ * initialization state
+ * @var boolean
+ */
+ _didInit: false,
+
+ /**
+ * list of registered dropdowns
+ * @var object
+ */
+ _dropdowns: { },
+
+ /**
+ * Initializes dropdowns.
+ */
+ init: function() {
+ var self = this;
+ $('.dropdownToggle').each(function(index, dropdown) {
+ var $dropdown = $(dropdown);
+ var $toggle = $dropdown.data('toggle');
+
+ // ignore dropdowns with a missing or invalid target
+ if (!$toggle || !$('#' + $toggle).length) {
+ return true;
+ }
+
+ var $toggle = $('#' + $toggle);
+ var $containerID = $toggle.wcfIdentify();
+ if (!self._dropdowns[$containerID]) {
+ $dropdown.click($.proxy(self._toggle, self));
+ self._dropdowns[$containerID] = $toggle;
+
+ // calculate top offset for menu
+ $dropdown.next('.dropdownMenu').css({
+ top: $dropdown.outerHeight() + 10
+ });
+ }
+ });
+
+ if (!this._didInit) {
+ this._didInit = true;
+
+ WCF.CloseOverlayHandler.addCallback('WCF.Dropdown', $.proxy(this._closeAll, this));
+ WCF.DOMNodeInsertedHandler.addCallback('WCF.Dropdown', $.proxy(this.init, this));
+ }
+ },
+
+ /**
+ * Registers a callback notified upon dropdown state change.
+ *
+ * @param string identifier
+ * @var object callback
+ */
+ registerCallback: function(identifier, callback) {
+ if (!$.isFunction(callback)) {
+ console.debug("[WCF.Dropdown] Callback for '" + identifier + "' is invalid");
+ return false;
+ }
+
+ if (!this._callbacks[identifier]) {
+ this._callbacks[identifier] = [ ];
+ }
+
+ this._callbacks[identifier].push(callback);
+ },
+
+ /**
+ * Toggles a dropdown.
+ *
+ * @param object event
+ */
+ _toggle: function(event) {
+ console.debug($(event.currentTarget));
+ console.debug($(event.currentTarget).data());
+ var $dropdown = $('#' + $(event.currentTarget).data('toggle')).toggleClass('dropdownOpen');
+ console.debug('Trying to toggle ' + $(event.currentTarget).data('toggle'));
+ if (!$dropdown.hasClass('dropdownOpen')) {
+ this._notifyCallbacks($dropdown, 'close');
+ }
+ else {
+ this._notifyCallbacks($dropdown, 'open');
+ }
+
+ event.stopPropagation();
+ return false;
+ },
+
+ /**
+ * Closes all dropdowns.
+ */
+ _closeAll: function() {
+ for (var $containerID in this._dropdowns) {
+ var $dropdown = this._dropdowns[$containerID];
+ if ($dropdown.hasClass('dropdownOpen')) {
+ $dropdown.removeClass('dropdownOpen');
+
+ this._notifyCallbacks($dropdown, 'close');
+ }
+ }
+ },
+
+ /**
+ * Closes a dropdown without notifying callbacks.
+ *
+ * @param string containerID
+ */
+ close: function(containerID) {
+ if (!this._dropdowns[containerID]) {
+ return;
+ }
+
+ this._dropdowns[containerID].removeClass('open');
+ },
+
+ /**
+ * Notifies callbacks.
+ *
+ * @param jQuery dropdown
+ * @param string action
+ */
+ _notifyCallbacks: function(dropdown, action) {
+ var $containerID = dropdown.wcfIdentify();
+ if (!this._callbacks[$containerID]) {
+ return;
+ }
+
+ for (var $i = 0, $length = this._callbacks[$containerID].length; $i < $length; $i++) {
+ this._callbacks[$containerID][$i](dropdown, action);
+ }
+ }
+};
+/**
* Clipboard API
*/
WCF.Clipboard = {
* @param boolean enableOnInit
*/
_prepareElement: function(enableOnInit) {
- this._element.wrap('<div class="wcf-preInput" />');
+ this._element.wrap('<div class="dropdown preInput" />');
var $wrapper = this._element.parent();
- var $button = $('<p class="wcf-button wcf-dropdownCaption"><span>' + WCF.Language.get('wcf.global.button.disabledI18n') + '</span></p>').prependTo($wrapper);
+ var $button = $('<p class="button dropdownToggle"><span>' + WCF.Language.get('wcf.global.button.disabledI18n') + '</span></p>').prependTo($wrapper);
+ $button.data('toggle', $wrapper.wcfIdentify()).click($.proxy(this._enable, this));
+
+ // add a special class if next item is a textarea
+ if ($button.next().getTagName() === 'textarea') {
+ $button.addClass('dropdownCaptionTextarea');
+ }
+ else {
+ $button.addClass('dropdownCaption');
+ }
+
+ // insert list
+ this._list = $('<ul class="dropdownMenu"></ul>').insertAfter($button);
+
+ // calculate top offset for menu
+ this._list.css({
+ top: $button.parent().outerHeight() + 10
+ });
+
+ // insert available languages
+ for (var $languageID in this._availableLanguages) {
+ $('<li><span>' + this._availableLanguages[$languageID] + '</span></li>').data('languageID', $languageID).click($.proxy(this._changeLanguage, this)).appendTo(this._list);
+ }
- $button.click($.proxy(this._enable, this));
- WCF.CloseOverlayHandler.addCallback(this._element.wcfIdentify(), $.proxy(this._closeSelection, this));
+ // disable language input
+ if (!this._forceSelection) {
+ $('<li class="dropdownDivider" />').appendTo(this._list);
+ $('<li><span>' + WCF.Language.get('wcf.global.button.disabledI18n') + '</span></li>').click($.proxy(this._disable, this)).appendTo(this._list);
+ }
if (enableOnInit || this._forceSelection) {
$button.trigger('click');
}
}, this));
}
+
+ WCF.Dropdown.registerCallback($wrapper.wcfIdentify(), $.proxy(this._handleAction, this));
+ },
+
+ /**
+ * Handles dropdown actions.
+ *
+ * @param jQuery dropdown
+ * @param string action
+ */
+ _handleAction: function(dropdown, action) {
+ if (action === 'close') {
+ this._closeSelection();
+ }
},
/**
*/
_enable: function(event) {
if (!this._isEnabled) {
- var $button = $(event.target);
- if ($button.getTagName() == 'p') {
- $button = $button.children('span');
+ var $button = $(event.currentTarget);
+ if ($button.getTagName() === 'p') {
+ $button = $button.children('span:eq(0)');
}
-
+
$button.addClass('active');
-
- // insert list
- if (this._list === null) {
- this._list = $('<ul class="wcf-dropdown"></ul>').insertAfter($button.parent());
- this._list.click(function(event) {
- // discard click event
- event.stopPropagation();
- });
-
- // insert available languages
- for (var $languageID in this._availableLanguages) {
- $('<li>' + this._availableLanguages[$languageID] + '</li>').data('languageID', $languageID).click($.proxy(this._changeLanguage, this)).appendTo(this._list);
- }
-
- // disable language input
- if (!this._forceSelection) {
- $('<li class="divider">' + WCF.Language.get('wcf.global.button.disabledI18n') + '</li>').click($.proxy(this._disable, this)).appendTo(this._list);
- }
- }
-
+
this._isEnabled = true;
this._insertedDataAfterInit = false;
}
-
+
// toggle list
if (this._list.is(':visible')) {
this._closeSelection();
}
}
}, this));
-
- // show list
- this._list.addClass('open');
}
},
this._disable();
}
-
- if (this._list !== null) {
- this._list.removeClass('open');
- }
},
/**
* @param object event
*/
_changeLanguage: function(event) {
- var $button = $(event.target);
+ var $button = $(event.currentTarget);
this._insertedDataAfterInit = true;
// save current value
$button.addClass('active');
// update label
- this._list.prev('.wcf-dropdownCaption').children('span').text(this._availableLanguages[this._languageID]);
+ this._list.prev('.dropdownCaption').children('span').text(this._availableLanguages[this._languageID]);
// close selection and set focus on input element
this._closeSelection();
* Disables language selection for current element.
*/
_disable: function() {
- if (this._forceSelection) {
+ if (this._forceSelection || !this._list) {
return;
}
// remove active marking
- this._list.prev('.wcf-dropdownCaption').children('span').removeClass('active').text(WCF.Language.get('wcf.global.button.disabledI18n'));
+ this._list.prev('.dropdownCaption').children('span').removeClass('active').text(WCF.Language.get('wcf.global.button.disabledI18n'));
this._closeSelection();
// update element value
* Initializes all TabMenus
*/
init: function() {
- var $containers = $('.wcf-tabMenuContainer');
+ var $containers = $('.tabMenuContainer');
var self = this;
$containers.each(function(index, tabMenu) {
var $tabMenu = $(tabMenu);
$tabMenu.wcfTabs({
select: function(event, ui) {
var $panel = $(ui.panel);
- var $container = $panel.closest('.wcf-tabMenuContainer');
+ var $container = $panel.closest('.tabMenuContainer');
// store currently selected item
if ($container.data('store')) {
// display active item on init
if ($tabMenu.data('active')) {
- $tabMenu.find('.wcf-tabMenuContent').each(function(innerIndex, tabMenuItem) {
+ $tabMenu.find('.tabMenuContent').each(function(innerIndex, tabMenuItem) {
var $tabMenuItem = $(tabMenuItem);
if ($tabMenuItem.attr('id') == $tabMenu.data('active')) {
$tabMenu.wcfTabs('select', innerIndex);
if ($tabMenu.wcfTabs('hasAnchor', $hash, false)) {
if ($subIndex !== null) {
// try to find child tabMenu
- var $childTabMenu = $tabMenu.find('#' + $.wcfEscapeID($hash) + '.wcf-tabMenuContainer');
+ var $childTabMenu = $tabMenu.find('#' + $.wcfEscapeID($hash) + '.tabMenuContainer');
if ($childTabMenu.length !== 1) {
return;
}
init: function() {
if (!this._didInit) {
// create empty div
- this._tooltip = $('<div id="balloonTooltip" class="wcf-balloonTooltip"><span id="balloonTooltipText"></span><span class="pointer"><span></span></span></div>').appendTo($('body')).hide();
+ this._tooltip = $('<div id="balloonTooltip" class="balloonTooltip"><span id="balloonTooltipText"></span><span class="pointer"><span></span></span></div>').appendTo($('body')).hide();
// get viewport dimensions
this._updateViewportDimensions();
hideTitle: false,
modal: true,
title: '',
- zIndex: 1000,
+ zIndex: 400,
// AJAX support
ajax: false,
*/
_create: function() {
// create dialog container
- this._container = $('<div class="wcf-dialogContainer"></div>').hide().css({ zIndex: this.options.zIndex }).appendTo(document.body);
+ this._container = $('<div class="dialogContainer"></div>').hide().css({ zIndex: this.options.zIndex }).appendTo(document.body);
// create title
if (!this.options.hideTitle && this.options.title != '') {
- this._titlebar = $('<header class="wcf-dialogTitlebar"></header>').appendTo(this._container);
- this._title = $('<span class="wcf-dialogTitle"></div>').html(this.options.title).appendTo(this._titlebar);
+ this._titlebar = $('<header class="dialogTitlebar"></header>').appendTo(this._container);
+ this._title = $('<span class="dialogTitle"></div>').html(this.options.title).appendTo(this._titlebar);
}
// create close button
if (this.options.closable) {
- this._closeButton = $('<a class="wcf-dialogCloseButton" title="' + this.options.closeButtonLabel + '"><span>' + this.options.closeButtonLabel + '</span></a>').click($.proxy(this.close, this));
+ this._closeButton = $('<a class="dialogCloseButton" title="' + this.options.closeButtonLabel + '"><span>' + this.options.closeButtonLabel + '</span></a>').click($.proxy(this.close, this));
if (!this.options.hideTitle && this.options.title != '') {
this._closeButton.appendTo(this._titlebar);
}
// create content container
- this._content = $('<div class="wcf-dialogContent"></div>').appendTo(this._container);
+ this._content = $('<div class="dialogContent"></div>').appendTo(this._container);
// move target element into content
var $content = this.element.detach();
if (this.options.modal) {
this._overlay = $('#jsWcfDialogOverlay');
if (!this._overlay.length) {
- this._overlay = $('<div id="jsWcfDialogOverlay" class="wcf-dialogOverlay"></div>').css({ height: '100%', zIndex: 900 }).appendTo(document.body);
+ this._overlay = $('<div id="jsWcfDialogOverlay" class="dialogOverlay"></div>').css({ height: '100%', zIndex: 399 }).appendTo(document.body);
}
if (this.options.closable) {
--- /dev/null
+/* ############## System Notifications (Inline) ############## */
+
+/* Globals */
+
+.info,
+.error,
+.success,
+.warning {
+ background-position: 13px center, left top;
+ background-repeat: no-repeat, repeat;
+ background-size: 24px, auto;
+ border-radius: @wcfContainerBorderRadius;
+ border-width: @wcfContainerBorderWidth;
+ border-style: @wcfContainerBorderStyle;
+ box-sizing: border-box;
+ line-height: 1.5;
+ margin-top: @wcfGapMedium;
+ padding: @wcfGapSmall @wcfGapMedium @wcfGapSmall 50px;
+
+ .textShadow(@errorBackgroundColor);
+}
+
+/* Types */
+
+.info {
+ background-color: @infoBackgroundColor;
+ background-image: url('../../icon/systemInfo.svg');
+ border-color: @infoBorderColor;
+ color: @infoColor;
+}
+
+.success {
+ background-color: @successBackgroundColor;
+ background-image: url('../../icon/systemSuccess.svg');
+ border-color: @successBorderColor;
+ color: @successColor;
+}
+
+.warning {
+ background-color: @warningBackgroundColor;
+ background-image: url('../../icon/systemWarning.svg');
+ border-color: @warningBorderColor;
+ color: @warningColor;
+}
+
+.error {
+ background-color: @errorBackgroundColor;
+ background-image: url('../../icon/systemError.svg');
+ border-color: @errorBorderColor;
+ color: @errorColor;
+}
+
+/* Inline Errors */
+
+.innerError {
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+ line-height: 1.5;
+ color: @errorColor;
+ border: @wcfContainerBorderWidth @wcfContainerBorderStyle @errorBorderColor;
+ border-radius: @wcfContainerBorderRadius;
+ background-color: @errorBackgroundColor;
+ background-image: url('../../icon/systemError.svg');
+ background-size: 16px;
+ background-position: 5px center;
+ background-repeat: no-repeat;
+ margin-top: 5px;
+ padding: 2px 10px 2px 25px;
+ display: table !important;
+ position: relative; /* Firefox support (from version 10 on) is buggy */
+ clear: both;
+
+ .boxShadow(0, 1px, rgba(0, 0, 0, .1), 3px);
+ .textShadow(@errorBackgroundColor);
+
+ .pointer {
+ border-width: 0 7px 7px;
+ border-style: solid;
+ border-color: @errorBackgroundColor transparent;
+ display: inline-block !important;
+ width: 0;
+ position: absolute;
+ top: -7px !important;
+ left: 10%;
+
+ span {
+ border-width: 0 5px 5px;
+ border-style: solid;
+ border-color: @errorBackgroundColor transparent;
+ display: inline-block;
+ width: 0;
+ position: absolute;
+ top: 2px;
+ left: -5px;
+ }
+ }
+}
--- /dev/null
+/* ############## Badges ############## */
+
+/* Globals */
+
+.badge {
+ border-radius: 9px;
+ color: @wcfPageLinkHoverColor;
+ display: inline-block;
+ font-size: 11px;
+ font-weight: bold;
+ padding: 2px 6px 2px;
+ position: relative;
+ text-shadow: none;
+ top: -1px;
+ white-space: nowrap;
+
+ .linearGradient(lighten(@wcfPageBackgroundColor, 10%), lighten(@wcfPageBackgroundColor, 20%), lighten(@wcfPageBackgroundColor, 5%));
+
+ &.badgeInverse {
+ background-color: @wcfPageLinkHoverColor;
+ background-image: none;
+ color: lighten(@wcfPageBackgroundColor, 10%);
+ }
+}
\ No newline at end of file
+++ /dev/null
-/**
- * BBCode Styles
- *
- * @author Harald Szekely
- * @copyright 2011 WoltLab GmbH
- */
-
-/* ############## Code Box ############## */
-
-.wcf-codeBox {
- display: block;
-}
-
-.wcf-codeBox hgroup {
- padding: 0 7px;
-}
-
-.wcf-codeBox > div {
- font-size: 140%;
- line-height: 1.3;
- display: block;
- overflow-x: auto;
-}
-
-.wcf-codeBox .wcf-codeLineNumbers {
- text-align: right;
- background-color: @backColor21;
- padding: 0 4px;
- width: 0%;
-}
-
-.wcf-codeBox .wcf-codeLineNumbers pre {
- white-space: normal;
-}
-
-.wcf-codeBox .wcf-codeLineNumbers a {
- text-decoration: none;
- margin: 0 -5px;
- padding: 0 5px;
- display: block;
-}
-
-.wcf-codeBox .wcf-codeLineNumbers a:hover {
- color: @fontColor51;
- background-color: darken(@backColor21, 10%);
-}
-
-.wcf-codeBox .wcf-codeLineNumbers a:target {
- color: @fontColor5;
- background-color: #ff3;
-}
-
-.wcf-codeBox .wcf-codeLines {
- background-color: @backColor1;
- width: 100%;
-}
-
-.wcf-codeBox .wcf-codeLines pre {
- padding: 0 5px;
-}
-
-
-
-/* ############## Code Styles ############## */
-
-/* -- -- -- Code Box -- -- -- */
-
-.wcf-codeBox .hlQuotes {
- color: red;
-}
-
-.wcf-codeBox .hlComments,
-.wcf-codeBox .hlOperators {
- color: green;
-}
-
-.wcf-codeBox .hlKeywords1 {
- color: blue;
-}
-
-.wcf-codeBox .hlKeywords2 {
- color: darkred;
-}
-
-.wcf-codeBox .hlKeywords3 {
- color: darkviolet;
-}
-
-.wcf-codeBox .hlKeywords4 {
- color: darkgoldenrod;
-}
-
-.wcf-codeBox .hlKeywords5 {
- color: crimson;
-}
-
-.wcf-codeBox .hlNumbers {
- color: darkorange;
-}
-
-/* -- -- -- Code Highlighters -- -- -- */
-
-/* DIFF */
-
-.wcf-diffHighlighter .hlComments {
- color: darkviolet;
-}
-
-.wcf-diffHighlighter .hlRemoved {
- color: red;
-}
-
-.wcf-diffHighlighter .hlAdded {
- color: green;
-}
-
-/* PHP */
-
-.wcf-phpHighlighter .hlKeywords2 {
- color: green;
-}
-
-.wcf-phpHighlighter .hlComments {
- color: darkgoldenrod;
-}
-
-/* CSS */
-
-.wcf-cssHighlighter .hlComments {
- color: #236e26;
-}
-
-.wcf-cssHighlighter .hlColors {
- color: #751116;
-}
-
-.wcf-cssHighlighter .hlNumbers,
-.wcf-sqlHighlighter .hlNumbers {
- color: #1906fd;
-}
-
-.wcf-cssHighlighter .hlKeywords1 {
- color: #87154f;
-}
-
-.wcf-cssHighlighter .hlKeywords2 {
- color: #994509;
-}
-
-.wcf-cssHighlighter .hlKeywords3,
-.wcf-cssHighlighter .hlKeywords4 {
- color: inherit;
-}
-
-/* SQL */
-
-.wcf-sqlHighlighter .hlKeywords1 {
- color: #663821;
-}
-
-.wcf-sqlHighlighter .hlKeywords2 {
- color: #871550;
-}
-
-/* -- -- -- Quote Box -- -- -- */
-
-.wcf-quoteBox {
- /*background: url("...quote.svg") 12px 12px no-repeat @backColor1;*/
- background-color: @backColor1;
- padding: 10px 20px 10px 58px;
-}
-
-.wcf-quoteBox header {
- padding: 0 0 4px 0 !important;
- border-bottom: @borderWidthSeparator @borderStyleSeparator @borderColor12;
- margin-bottom: 8px;
-}
-
-/* -- -- -- -- -- EOF -- -- -- -- -- */
--- /dev/null
+@import "reset.less";
+
+/* core */
+@import "variables.less";
+@import "mixins.less";
+
+/* layout */
+@import "layout.less";
+@import "userPanel.less";
+@import "logo.less";
+@import "navigation.less";
+@import "content.less";
+@import "footer.less";
+@import "dropdown.less";
+@import "badge.less";
+
+@import "tabular.less";
+@import "inputs.less";
+@import "button.less";
+@import "breadcrumbs.less";
+@import "forms.less";
+@import "alerts.less";
+@import "tabs.less";
+@import "codebox.less";
+@import "pagination.less";
+@import "comments.less";
+
+@import "message.less";
+@import "dialog.less";
+@import "tooltip.less";
+@import "user.less";
+
+/* application */
+@import "wbb.less";
\ No newline at end of file
--- /dev/null
+/* ############## Bread Crumbs ############## */
+
+/* Globals */
+
+.breadcrumbs {
+ background-color: @wcfContentBackgroundColor;
+ border: 1px solid @wcfContainerBorderColor;
+ border-radius: @wcfContainerBorderRadius;
+ box-sizing: border-box;
+ display: block;
+ overflow: hidden;
+ position: relative;
+ text-align: left;
+
+ > ul {
+ > li {
+ float: left;
+ font-size: 85%;
+ list-style: none;
+ max-width: 30%;
+ position: relative;
+
+ .transition(max-width, .2s);
+
+ &:hover {
+ max-width: 100%;
+
+ a {
+ background-color: @wcfContainerAccentBackgroundColor;
+ color: @wcfLinkHoverColor;
+ position: relative;
+ z-index: 10;
+ }
+
+ > .pointer > span {
+ border-color: transparent transparent transparent @wcfContainerAccentBackgroundColor;
+ }
+ }
+
+ > span {
+ border-width: 15px;
+ border-style: solid none solid solid;
+ border-color: transparent transparent transparent @wcfContainerBorderColor;
+ display: block !important;
+ position: absolute;
+ width: 0;
+ height: 0;
+ top: -4px;
+ right: -15px;
+ z-index: 20;
+ }
+
+ > .pointer > span {
+ text-indent: -9000px;
+ border-width: 15px;
+ border-style: solid none solid solid;
+ border-color: transparent transparent transparent @wcfContentBackgroundColor;
+ display: block;
+ position: absolute;
+ width: 0;
+ height: 0;
+ top: -15px;
+ left: -16px;
+ overflow: hidden;
+ }
+
+ a {
+ color: @wcfLinkColor;
+ display: block;
+ margin: 0;
+ overflow: hidden;
+ padding: 5px 1px 5px 20px;
+ text-decoration: none;
+ white-space: nowrap;
+
+ .textShadow(@wcfContentBackgroundColor);
+ }
+
+ &:first-child a {
+ background-image: url('../../icon/home1.svg');
+ background-position: 7px center;
+ background-repeat: no-repeat;
+ background-size: 16px;
+ border-radius: 5px 0 0 5px;
+ padding-left: 30px;
+ }
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+/* Normal State */
+
+button,
+input[type='reset'],
+input[type='submit'],
+input[type='button'],
+.button {
+ border-radius: 30px;
+ border-style: solid;
+ border-width: 1px;
+ display: inline-block;
+ font-size: 100%;
+ font-weight: bold;
+ margin: 3px 2px;
+ padding: 5px 13px;
+}
+
+/* ToDo: Special */
+
+.sidebar {
+ button,
+ input[type='reset'],
+ input[type='submit'],
+ input[type='button'],
+ .button {
+ font-size: 75% !important;
+ padding: 3px 7px;
+ }
+}
+
+.button img {
+ margin: -5px 1px -5px -5px;
+ vertical-align: middle;
+}
+
+/* Normal State */
+
+.button,
+input[type='reset']:not([disabled]),
+input[type='submit']:not([disabled]),
+input[type='button']:not([disabled]),
+button:not([disabled]) {
+ color: @wcfButtonColor;
+ border-color: @wcfButtonBorderColor darken(@wcfButtonBorderColor, 7%) darken(@wcfButtonBorderColor, 14%);
+ text-decoration: none;
+
+ .boxShadow(0, 1px, rgba(0, 0, 0, .1), 3px);
+ .linearGradient(@wcfButtonBackgroundColor, lighten(@wcfButtonBackgroundColor, 5%), @wcfButtonBackgroundColor 2px, darken(@wcfButtonBackgroundColor, 5%));
+ .textShadow(@wcfButtonBackgroundColor);
+ .transition(~"background-color, background-image, border, box-shadow, color", .1s);
+}
+
+/* primary */
+.button.buttonPrimary,
+input[type='submit']:not([disabled]),
+input[type='button']:not([disabled]).buttonPrimary,
+button:not([disabled]).buttonPrimary {
+ color: @wcfButtonPrimaryColor;
+ border-color: @wcfButtonPrimaryBorderColor darken(@wcfButtonPrimaryBorderColor, 7%) darken(@wcfButtonPrimaryBorderColor, 14%);
+
+ .boxShadowNative(~"0 1px 3px rgba(0, 0, 0, .1), 0 0 10px" darken(@wcfButtonPrimaryBackgroundColor, 20%));
+ .linearGradient(@wcfButtonPrimaryBackgroundColor, lighten(@wcfButtonPrimaryBackgroundColor, 5%), @wcfButtonPrimaryBackgroundColor 2px, darken(@wcfButtonPrimaryBackgroundColor, 5%));
+}
+
+/* hover */
+.button:hover,
+input[type='reset']:not([disabled]):hover,
+input[type='submit']:not([disabled]):hover,
+input[type='button']:not([disabled]):hover,
+button:not([disabled]):hover {
+ border-color: @wcfButtonHoverBorderColor darken(@wcfButtonHoverBorderColor, 7%) darken(@wcfButtonHoverBorderColor, 14%);
+ color: @wcfButtonHoverColor;
+ text-decoration: none;
+
+ .boxShadow(0, 1px, rgba(0, 0, 0, .1), 3px);
+ .linearGradient(@wcfButtonHoverBackgroundColor, lighten(@wcfButtonHoverBackgroundColor, 5%), @wcfButtonHoverBackgroundColor 2px, darken(@wcfButtonHoverBackgroundColor, 5%));
+}
+
+/* active */
+.button:active,
+input[type='reset']:not([disabled]):active,
+input[type='submit']:not([disabled]):active,
+input[type='button']:not([disabled]):active,
+button:not([disabled]):active {
+ color: darken(@wcfButtonHoverColor, 10%);
+ border-color: darken(@wcfButtonHoverBorderColor, 14%) darken(@wcfButtonHoverBorderColor, 7%) @wcfButtonHoverBorderColor;
+
+ .boxShadowInset(0, 1px, rgba(0, 0, 0, .1), 3px);
+ .linearGradient(@wcfButtonHoverBackgroundColor, lighten(@wcfButtonHoverBackgroundColor, 5%), @wcfButtonHoverBackgroundColor 2px, darken(@wcfButtonHoverBackgroundColor, 5%), bottom);
+}
\ No newline at end of file
--- /dev/null
+/* Code Box */
+.codeBox {
+ padding: 0;
+
+ hgroup {
+ background-color: @wcfHighlightBackgroundColor;
+ border-top-left-radius: @wcfContainerBorderRadius;
+ border-top-right-radius: @wcfContainerBorderRadius;
+
+ h1 {
+ padding: 4px 7px;
+ font-weight: bold;
+ }
+ }
+
+ dl {
+ display: table;
+ width: 100%;
+ padding: 0;
+ margin: 0;
+ overflow-x: auto;
+
+ dt {
+ text-align: right;
+ background-color: @wcfContainerAccentBackgroundColor;
+ border-bottom-left-radius: @wcfContainerBorderRadius;
+ padding: 0;
+ margin: 0;
+ display: table-cell;
+ width: 1%;
+ float: none;
+
+ pre {
+ padding: 4px;
+
+ a {
+ display: block;
+ margin: 0 -4px;
+ padding: 0 5px;
+ text-decoration: none;
+
+ &:target {
+ color: rgba(0, 0, 0, 1);
+ background-color: #ff3;
+ }
+ }
+ }
+ }
+
+ dd {
+ background-color: @wcfContentBackgroundColor;
+ display: table-cell;
+ width: 100%;
+ padding: 0;
+ margin: 0;
+ border-bottom-right-radius: @wcfContainerBorderRadius;
+
+ pre {
+ padding: 4px;
+ }
+ }
+
+ }
+}
+
+/* ############## Code Styles ############## */
+
+/* -- -- -- Code Box -- -- -- */
+
+.codeBox .hlQuotes {
+ color: red;
+}
+
+.codeBox .hlComments,
+.codeBox .hlOperators {
+ color: green;
+}
+
+.codeBox .hlKeywords1 {
+ color: blue;
+}
+
+.codeBox .hlKeywords2 {
+ color: darkred;
+}
+
+.codeBox .hlKeywords3 {
+ color: darkviolet;
+}
+
+.codeBox .hlKeywords4 {
+ color: darkgoldenrod;
+}
+
+.codeBox .hlKeywords5 {
+ color: crimson;
+}
+
+.codeBox .hlNumbers {
+ color: darkorange;
+}
+
+/* -- -- -- Code Highlighters -- -- -- */
+
+/* DIFF */
+
+.diffHighlighter .hlComments {
+ color: darkviolet;
+}
+
+.diffHighlighter .hlRemoved {
+ color: red;
+}
+
+.diffHighlighter .hlAdded {
+ color: green;
+}
+
+/* PHP */
+
+.phpHighlighter .hlKeywords2 {
+ color: green;
+}
+
+.phpHighlighter .hlComments {
+ color: darkgoldenrod;
+}
+
+/* CSS */
+
+.cssHighlighter .hlComments {
+ color: #236e26;
+}
+
+.cssHighlighter .hlColors {
+ color: #751116;
+}
+
+.cssHighlighter .hlNumbers,
+.sqlHighlighter .hlNumbers {
+ color: #1906fd;
+}
+
+.cssHighlighter .hlKeywords1 {
+ color: #87154f;
+}
+
+.cssHighlighter .hlKeywords2 {
+ color: #994509;
+}
+
+.cssHighlighter .hlKeywords3,
+.cssHighlighter .hlKeywords4 {
+ color: inherit;
+}
+
+/* SQL */
+
+.sqlHighlighter .hlKeywords1 {
+ color: #663821;
+}
+
+.sqlHighlighter .hlKeywords2 {
+ color: #871550;
+}
+
+/* Quote Box */
+.quoteBox {
+ /*background: url("...quote.svg") 12px 12px no-repeat #fff;*/
+ background-color: @wcfContentBackgroundColor;
+ padding: 10px 20px 10px 58px;
+
+ header {
+ padding: 0 0 4px 0 !important;
+ border-bottom: 1px dotted @wcfContainerBorderColor;
+ margin-bottom: 8px;
+
+ h1 {
+ font-weight: bold;
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+/* ############## Profile Comments ############## */
+
+.commentList > li, .commentResponseList > li {
+ position: relative;
+}
+
+.commentOptions {
+ display: block;
+ position: absolute;
+ top: @wcfGapMedium;
+ right: @wcfGapMedium;
+
+ li {
+ float: left;
+ opacity: 0;
+
+ .transition(opacity, .1s);
+ }
+}
+
+.commentContent:hover .commentOptions li {
+ opacity: 1;
+}
+
+.commentAdd small, .commentResponseAdd small {
+ color: @wcfDimmedColor;
+ margin-top: 3px;
+}
+
+.commentContent {
+ //margin-bottom: 7px;
+}
+
+.commentResponseList > li {
+ border-top: 1px solid @wcfContainerBorderColor;
+ padding: 7px;
+
+ &:last-child {
+ margin-bottom: -7px;
+ }
+
+ &:nth-child(2n) {
+ //background-color: @wcfContainerAccentBackgroundColor;
+ }
+}
+
+.commentResponseAdd {
+ border-top: 1px solid @wcfContainerBorderColor;
+ margin-top: 14px;
+ padding: 7px;
+}
+
+.commentList > li&:nth-child(2n) .commentResponseList > li&:nth-child(2n+1) {
+ background-color: @wcfContainerBackgroundColor;
+}
+
+.commentList > li&:nth-child(2n+1) .commentResponseList > li&:nth-child(2n+1) {
+ background-color: @wcfContainerAccentBackgroundColor;
+}
+
+
+
+
+/* Comment List */
+
+.wcf-commentList > .wcf-container {
+ border-top: 1px solid rgba(204, 204, 204, 1);
+ padding: 7px;
+}
+
+.wcf-commentList > .wcf-container:first-child {
+ border-top-width: 0;
+}
+
+/* Comment Add */
+
+.wcf-commentAdd .wcf-containerIcon {
+ margin-left: 2em;
+}
+
+.wcf-commentResponseAdd {
+ border-top: 1px solid rgba(204, 204, 204, 1);
+ background-color: rgba(0, 0, 0, .015);
+ margin-top: 7px;
+ padding: 7px;
+}
+
+.wcf-commentResponseAdd .wcf-containerIcon {
+ margin-left: 10px;
+}
+
+
+
+/* Comment Response List */
+
+.wcf-commentResponseList {
+ margin-top: 7px;
+}
+
+.wcf-commentResponseAdd ~ .wcf-commentResponseList {
+ margin-top: 0;
+}
+
+.wcf-commentResponseList > .wcf-container,
+.wcf-commentResponseList > div > .wcf-container {
+ border-top: 1px solid rgba(204, 204, 204, 1);
+ background-color: rgba(0, 0, 0, .015);
+ padding: 7px;
+}
+
+.wcf-commentResponseList > .wcf-container:nth-child(2n+1) {
+ /* Auto-colorer for every 2nd row */
+ background-color: rgba(0, 0, 0, .0);
+}
+
+
+
+/* Comment Options */
+
+.wcf-commentContent > div > .wcf-commentOptions,
+.wcf-commentResponseList > li .wcf-commentOptions {
+ font-size: 85%;
+ display: block;
+ position: absolute;
+ top: 2px;
+ right: 2px;
+}
+
+.wcf-commentContent > div > .wcf-commentOptions > li,
+.wcf-commentResponseList > li .wcf-commentOptions > li {
+ float: left;
+ opacity: 0;
+
+ -webkit-transition: opacity .1s linear;
+ -moz-transition: opacity .1s linear;
+ -ms-transition: opacity .1s linear;
+ -o-transition: opacity .1s linear;
+ transition: opacity .1s linear;
+}
+
+.wcf-commentContent > div:hover > .wcf-commentOptions > li,
+.wcf-commentResponseList > li:hover .wcf-commentOptions > li {
+ opacity: 1;
+}
+
+.wcf-commentContent > div > .wcf-commentOptions > li a,
+.wcf-commentResponseList > li .wcf-commentOptions li a {
+ color: rgba(153, 153, 153, 1);
+ cursor: pointer;
+ display: inline-block;
+ padding: 5px 10px;
+}
\ No newline at end of file
--- /dev/null
+#main {
+ z-index: 110;
+
+ > div {
+ background-color: @wcfHighlightBackgroundColor;
+ .boxShadowInset(0, 0, rgba(0, 0, 0, .1));
+ }
+
+ &.not(.sidebarOrientationLeft):not(.sidebarOrientationRight) {
+ .sidebar {
+ display: none;
+ }
+ }
+
+ &.sidebarOrientationLeft {
+ .content {
+ border-left: @wcfContainerBorderWidth @wcfContainerBorderStyle darken(@wcfHighlightBackgroundColor, 8%);
+ margin-left: 249px;
+ }
+
+ .sidebar {
+ float: left;
+ }
+ }
+
+ &.sidebarOrientationRight {
+ .content {
+ border-right: @wcfContainerBorderWidth @wcfContainerBorderStyle darken(@wcfHighlightBackgroundColor, 8%);
+ margin-right: 249px;
+ }
+
+ .sidebar {
+ float: right;
+ }
+ }
+}
+
+.sidebar {
+ width: 250px;
+ z-index: 120;
+}
+
+.content {
+ background-color: @wcfContentBackgroundColor;
+ min-height: 100px;
+ padding: @wcfGapSmall @wcfGapLarge * 2 - @wcfGapTiny @wcfGapLarge;
+ z-index: 130;
+
+ .boxShadow(0, 0, rgba(0, 0, 0, .1));
+}
\ No newline at end of file
--- /dev/null
+.dialogContainer {
+ background-color: rgba(0, 0, 0, .4);
+ border: 23px solid transparent;
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 90%;
+ min-width: 500px;
+ position: fixed;
+
+ .borderRadius(15px);
+ .boxShadow(0, 1px, rgba(0, 0, 0, .3), 23px);
+
+ .boxHeadline hgroup {
+ h1,
+ h1 a {
+ color: @wcfDimmedColor;
+
+ .textShadow(@wcfPageBackgroundColor);
+ }
+ }
+
+ /*dl {
+ > .reversed {
+ left: 170px;
+ width: auto;
+ }
+
+ > dd {
+ margin-left: 150px;
+ }
+
+ > dt {
+ width: 130px;
+ }
+ }*/
+}
+
+.dialogTitlebar {
+ background-color: saturate(lighten(@wcfPageBackgroundColor, 20%), 20%);
+ background-image: url(../../images/header.png);
+ background-position: top left;
+ background-repeat: repeat-x;
+ border-bottom: 1px solid rgba(0, 0, 0, .1);
+ display: block;
+ padding: 10px 20px;
+ position: relative;
+
+ .borderRadius(7px, 0);
+
+ .dialogTitle {
+ color: @wcfPageLinkHoverColor;
+ display: block;
+ font-size: 170%;
+ font-weight: bold;
+
+ .textShadow(saturate(lighten(@wcfPageBackgroundColor, 20%), 20%));
+ }
+
+ .dialogCloseButton {
+ background-image: url(../icon/delete2.svg);
+ background-position: top left;
+ background-repeat: no-repeat;
+ background-size: 32px;
+ cursor: pointer;
+ height: 32px;
+ position: absolute;
+ right: 10px;
+ top: 5px;
+ width: 32px;
+
+ span {
+ /* remove caption - it's over 9000! */
+ left: -9001px;
+ position: absolute;
+ top: -9001px;
+ width: 0;
+ }
+ }
+}
+
+.dialogContent {
+ background-color: rgba(51, 51, 51, .9);
+ color: lighten(@wcfLabelColor, 10%);
+ overflow: auto;
+ padding: 10px 20px 20px;
+
+ .borderRadius(0, 7px);
+}
+
+.dialogOverlay {
+ background-color: rgba(0, 0, 0, .5);
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+}
\ No newline at end of file
--- /dev/null
+.dropdown {
+ position: relative;
+
+ .dropdownToggle:active,
+ &.dropdownOpen .dropdownToggle {
+ outline: 0;
+ }
+
+ &.preInput {
+ display: table;
+ width: 100%;
+
+ input,
+ textarea {
+ min-width: 300px;
+ }
+
+ input {
+ display: table-cell;
+ margin: 0;
+ width: 99%;
+
+ .borderRadius(0, @wcfContainerBorderRadius, @wcfContainerBorderRadius, 0);
+ }
+
+ textarea {
+ display: block;
+ margin-top: 0;
+
+ .borderRadius(0, @wcfContainerBorderRadius, @wcfContainerBorderRadius, @wcfContainerBorderRadius);
+ }
+
+ .dropdownCaption {
+ cursor: pointer;
+ display: table-cell;
+ letter-spacing: -1px;
+ padding-left: @wcfGapTiny;
+ padding-right: @wcfGapSmall;
+ vertical-align: middle;
+ width: 1%;
+
+ .borderRadius(@wcfContainerBorderRadius, 0, 0, @wcfContainerBorderRadius);
+
+ span {
+ margin-right: -1px;
+ padding-left: @wcfGapTiny;
+ white-space: nowrap;
+
+ &.active {
+ background-image: url(../icon/dropdown1.svg);
+ background-position: right center;
+ background-repeat: no-repeat;
+ color: @wcfColor;
+ padding-right: @wcfGapMedium;
+ }
+ }
+ }
+
+ .dropdownCaptionTextarea {
+ cursor: pointer;
+ margin: 0 0 -1px 0;
+ padding-left: @wcfGapSmall;
+ padding-right: @wcfGapSmall;
+
+ .borderRadius(@wcfContainerBorderRadius, 0);
+
+ &~ .dropdownMenu {
+ top: 10%;
+ }
+
+ span {
+ white-space: nowrap;
+
+ &.active {
+ background-image: url(../icon/dropdown1.svg);
+ background-position: right center;
+ background-repeat: no-repeat;
+ color: @wcfColor;
+ padding-right: @wcfGapMedium;
+ }
+ }
+ }
+ }
+
+ .dropdownMenu {
+ background-color: @wcfDropdownBackgroundColor;
+ border: 1px solid @wcfContainerBorderColor;
+ color: @wcfDropdownColor;
+ display: none;
+ float: left;
+ left: 0;
+ min-width: 160px;
+ padding: 4px 0;
+ position: absolute;
+ z-index: 350;
+
+ .borderRadius();
+ .boxShadow(0, 5px, rgba(0, 0, 0, .2), 10px);
+
+ &:after {
+ border: 7px solid transparent;
+ border-bottom-color: @wcfContainerBorderColor;
+ 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;
+ }
+
+ li {
+ display: block;
+
+ &:hover:not(.dropdownDivider) {
+ background-color: @wcfDropdownHoverBackgroundColor;
+ }
+
+ &.dropdownDivider {
+ border-top: 1px dotted rgba(0, 0, 0, .2);
+ margin: @wcfGapTiny;
+ }
+
+ > a,
+ > span {
+ clear: both;
+ color: @wcfDropdownColor;
+ cursor: pointer;
+ display: block;
+ padding: @wcfGapTiny @wcfGapMedium;
+ white-space: nowrap;
+
+ .textShadow(@wcfDropdownBackgroundColor);
+
+ &:hover {
+ color: @wcfDropdownColor;
+
+ .textShadow(@wcfDropdownHoverBackgroundColor);
+ }
+ }
+ }
+ }
+
+ &.dropdownOpen {
+ .dropdownToggle {
+ color: @wcfPageLinkHoverColor;
+ }
+
+ .dropdownMenu {
+ display: block;
+ }
+ }
+}
\ No newline at end of file
+++ /dev/null
-/**
- * Print Styles (LTR)
- *
- * @author Arian Glander, Harald Szekely
- * @copyright 2006-2011 WoltLab GmbH
- */
-
-/* -- -- -- -- -- General -- -- -- -- -- */
-
-a {
- color: black;
-}
-
-.copyright {
- font-size: .7em;
- text-align: center;
- padding-top: 20px;
- clear: both;
- display: block;
-}
-
-#page {
- width: auto !important;
-}
-
-/* -- -- -- -- -- Hidden Elements -- -- -- -- -- */
-
-.hidden, #header, #userPanel, .tabMenu, .subTabMenu, .signature, .pmView, th img, .messageNumber, .editNote, .pmFolders, .infoBox, .largeButtons, .smallButtons, .optionButtons, .pageNavigation, .pageOptions, .quickJump, .userExtras, .scrollUp, .userMessenger, .mainHeadline img, .userAvatar, .userAvatarFramed, .columnUsername img, .userProfileBox, .containerIcon, .userPosts, .userName img, .boardlistLastPost, .boardlistCounter,.boardlistStats, .boardlistUsersOnline, .moderators, .smallPages, .columnIcon img, .columnMarkTopics, .columnMark, .columnReplies, .columnAvatar, .columnViews, .columnLastPost, .breadCrumbs img, legend img, .columnHomepage a img, .columnEmail a img, .columnPosts, .columnRegistrationDate, .userRank, .userTitle, .messageCount, .footerMenu, .footerOptions, .mainMenu, .quickReply, .userSymbols, .userCredits, .statusDisplay, .info, #userCard, #tplUserGalleryPhoto form, .thumbnailButtons, .quoteHeader img, #tplCalendarEvent form, #tplCalendarEvent #participation img, .monthJump {
- display: none;
-}
-
-/* -- -- -- -- -- Tables -- -- -- -- -- */
-
-table {
- border-collapse: collapse;
- width: 100%;
-}
-
-td, th {
- border: 1px solid black;
-}
-
-th, th a {
- color: #fff;
- text-align: left;
- white-space: nowrap;
- background-color: #000;
-}
-
-td {
- vertical-align: top;
-}
-
-.mainHeadline .headlineContainer h1 {
- font-size: 1.5em;
-}
-
-.columnIcon {
- width: 0;
-}
-
-td p, th p {
- margin: 0;
- padding: 0;
-}
-
-.columnRating {
- text-align: center;
- width: 0;
-}
-
-.columnTopic {
- width: 80%;
-}
-
-.columnTitle p {
- overflow: hidden;
-}
-
-.columnDate {
- white-space: nowrap;
-}
-
-td.columnHomepage a:after {
- content: ""attr(href)"";
-}
-
-td.columnEmail a[href^="mailto:"]:after {
- content: ""attr(href)"";
-}
-
-/* -- -- -- -- -- Breadcrumb Style Navigation -- -- -- -- -- */
-
-.breadCrumbs {
- list-style: none;
- padding: 0;
- margin: 0;
-}
-
-.breadCrumbs li {
- font-style: italic;
- margin-right: 5px;
- display: inline;
-}
-
-/* -- -- -- -- -- Message Layout -- -- -- -- -- */
-
-.message {
- border: 1px solid black;
- margin: 7px 3px;
- padding: 13px;
-}
-
-.message hr {
- display: none;
-}
-
-.messageHeader {
- font-style: italic;
- margin: -1em 0 0 0;
- padding: 0;
- text-align: right;
-}
-
-.messageHeader p {
- margin: 0;
-}
-
-.messageContent h3 {
- font-size: 1em;
- margin: 0;
- padding: 7px;
- clear: both;
-}
-
-.messageBody {
- border-top: 1px solid black;
- padding-top: 7px;
- clear: both;
-}
-
-.messageInner {
- margin: -10px 0;
- padding: 0;
-}
-
-.messageText {
- margin: 7px 0;
-}
-
-.messageAuthor, .messageAuthor .userName {
- margin: 0;
- padding: 0;
-}
-
-.messageAuthor .userName {
- font-style: italic;
- font-weight: bold;
- display: inline;
-}
-
-.messageAuthor .userCredits .userTitle {
- font-size: .8em;
- margin: 0 0 -10px 0;
- padding: 0;
-}
-
-blockquote {
- margin: 5px;
-}
-
-.quoteBox {
- border: 1px solid black;
- margin-bottom: 5px;
- padding: 10px;
-}
-
-.quoteBox h3 {
- font-style: italic;
- margin: 0;
- padding: 0;
-}
-
-.codeBox h3 {
- font-style: italic;
- margin: 0;
- padding: 0;
-}
-
-.poll .containerContent h3 {
- font-style: italic;
- margin: 0;
- padding: 0;
-}
-
-.attachmentPreview fieldset {
- margin-top: 13px;
-}
-
-.attachmentPreview ul {
- margin: 0;
- list-style: none;
- padding: 0;
-}
-
-.attachmentPreview li {
- margin-right: 10px;
- float: left;
-}
-
-.attachmentPreview li img {
- margin: 0 !important;
-}
-
-.attachmentFile img {
- display: none;
-}
-
-
-/* -- -- -- -- -- calendar.css -- -- -- -- -- */
-
-#tplCalendarEvent #participation .messageHeader {
- text-align: left;
-}
-
-/* -- -- -- -- -- Form Element -- -- -- -- -- */
-
-.formElement {
- margin: 5px 0 3px 0;
- min-height: 0;
-}
-
-.formElement:after {
- content: "";
- height: 0;
- display: block;
- clear: both;
-}
-
-/* -- -- -- -- -- Form Field -- -- -- -- -- */
-
-.formField {
- padding: 0;
- min-height: 1em;
- border-bottom: 1px solid black;
-}
-
-.formElement .formField {
- margin-left: 216px;
-}
-
-/* -- -- -- -- -- Form Field Label -- -- -- -- -- */
-
-.formFieldLabel {
- text-align: right;
- float: left;
- width: 200px;
- margin: 0;
-}
-
-fieldset {
- margin: 20px 1px 0 1px !important;
-}
-
-.formSubmit {
- display: none;
-}
-
-/* -- -- -- -- -- EOF -- -- -- -- -- */
--- /dev/null
+.footer {
+ padding-bottom: @wcfGapSmall;
+ z-index: 100;
+
+ .footerContent {
+ text-align: center;
+
+ a {
+ color: @wcfPageLinkColor;
+
+ .textShadow(@wcfPageBackgroundColor);
+ .transition(color, .1s);
+
+ &:hover {
+ color: @wcfPageLinkHoverColor;
+ text-decoration: none;
+ }
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+/* ############## Fieldsets ############## */
+fieldset {
+ background-color: @wcfContainerBackgroundColor;
+ border: @wcfContainerBorderWidth @wcfContainerBorderStyle @wcfContainerBorderColor;
+ border-radius: @wcfContainerBorderRadius;
+ box-sizing: border-box;
+ margin: @wcfGapMedium 0 0;
+ padding: @wcfGapTiny @wcfGapMedium @wcfGapMedium;
+}
+
+.container fieldset {
+ background-color: @wcfContainerAccentBackgroundColor;
+}
+
+fieldset:last-child,
+fieldset:only-child {
+ margin-bottom: @wcfGapSmall !important;
+}
+
+fieldset legend {
+ color: @wcfLinkColor;
+ margin: auto -@wcfGapSmall;
+ padding: 0 @wcfGapSmall 0;
+
+ .textShadow(@wcfContainerAccentBackgroundColor);
+}
+
+fieldset legend ~ p {
+ margin-bottom: @wcfGapMedium;
+}
+
+/* Special Sidebar */
+
+.sidebar fieldset {
+ background-color: transparent;
+ border-width: 0;
+}
+
+.sidebar fieldset legend {
+ color: @wcfColor;
+ padding: 0;
+ text-transform: uppercase;
+
+ .textShadow(@wcfHighlightBackgroundColor);
+}
+
+/* ############## Labeled Content ############## */
+
+/* Simple */
+
+dl {
+ margin-top: @wcfGapSmall;
+ position: relative;
+}
+
+fieldset dl:first-of-type {
+ margin-top: 0;
+}
+
+dl > dt {
+ color: @wcfLabelColor; //rgba(102, 153, 204, 1);
+ float: left;
+ margin-top: 5px;
+ text-align: right;
+}
+
+dl > dt {
+ width: 230px;
+}
+
+dl.wide > dt {
+ display: none;
+}
+
+dl > dt > label {
+ display: block;
+ margin-top: 5px;
+}
+
+dl.disabled > dt {
+ color: @wcfDimmedColor;
+}
+
+dl > dd {
+ padding-top: 5px;
+}
+
+dl > dd {
+ margin-left: 250px;
+}
+
+dl.wide > dd {
+ margin-left: 0;
+}
+
+dl > dd > small {
+ color: @wcfDimmedColor;
+ display: block;
+ font-size: 85%;
+ margin: 3px 0 7px;
+}
+
+dl > dd > p {
+ margin-top: 5px;
+}
+
+/* Nested */
+
+dl > dd > fieldset {
+ margin-top: 0;
+ margin-bottom: 0;
+ padding-top: 5px;
+ padding-bottom: 5px;
+}
+
+dl > dd > fieldset > legend {
+ display: none;
+}
+
+dl > dd > fieldset > dl > dt {
+ margin-right: 20px;
+ width: 150px;
+}
+
+dl > dd > fieldset > dl > dd {
+ margin-left: 0;
+}
+
+dl > dd > fieldset > dl > dd > label {
+ display: block;
+}
+
+/* Reversed (flips the label aside the checkbox or radio button) -
+ use only when automatically generating checkboxes or radio-buttons! */
+
+.reversed {
+ margin-top: 2px;
+ position: absolute;
+ text-align: left;
+ width: auto;
+}
+
+.reversed {
+ left: 270px;
+}
+
+.reversed ~ dd > input[type='checkbox'] {
+ margin-left: 0;
+}
+
+/* Special -> Sidebar */
+
+.sidebar dl > dt {
+ text-align: left;
+ float: none;
+ width: auto;
+}
+
+.sidebar dl > dd {
+ display: block;
+ margin-left: 0;
+ margin-bottom: 13px;
+}
+
+.sidebar dl > dd * {
+ display: block;
+}
+
+/* Globals */
+
+label {
+ color: @wcfLabelColor;
+}
+
+/* Structure */
+
+.formSubmit {
+ margin-top: 15px;
+ text-align: center;
+}
+
+input[type='checkbox'] ~ small,
+input[type='radio'] ~ small {
+ margin-top: 0;
+ margin-left: 21px;
+}
+
+/* todo ckeditor fixes */
+.cke_skin_kama {
+ border-width: 0 !important;
+ padding: 0 !important;
+}
\ No newline at end of file
+++ /dev/null
-@import "wcf.less";
-@import "user.less";
-@import "message.less";
-@import "label.less";
-@import "bbcode.less";
\ No newline at end of file
--- /dev/null
+/* -- -- -- Form Elements -- -- -- */
+/* Globals */
+
+button,
+input[type='reset'],
+input[type='submit'],
+input[type='button'],
+input[type='checkbox'],
+input[type='radio'],
+select:not([multiple]) {
+ cursor: pointer;
+}
+
+input[type='text'],
+input[type='search'], /* Does not work in WebKit browsers */
+input[type='date'],
+input[type='email'],
+input[type='url'],
+input[type='password'],
+textarea,
+select[multiple] {
+ box-sizing: border-box;
+ padding: 5px 3px;
+}
+
+select[multiple] {
+ font-family: 'Courier New', Courier, monospace;
+}
+
+/* Normal State */
+
+input[type='text'],
+input[type='search'],
+input[type='date'],
+input[type='email'],
+input[type='url'],
+input[type='password'],
+textarea,
+select[multiple] {
+ background-color: @wcfInputBackgroundColor;
+ border-color: darken(@wcfInputBorderColor, 20%) @wcfInputBorderColor lighten(@wcfInputBorderColor, 13%);
+ border-radius: 3px;
+ border-style: solid;
+ border-width: 1px;
+ color: @wcfInputColor;
+
+ .boxShadowInset(0, 1px, rgba(0, 0, 0, .1));
+ .transition(~"background-color, border", .2s);
+}
+
+/* Hover State */
+
+input[type='text']:hover,
+input[type='search']:hover,
+input[type='date']:hover,
+input[type='email']:hover,
+input[type='url']:hover,
+input[type='password']:hover,
+textarea:hover,
+select[multiple]:hover {
+ background-color: @wcfInputHoverBackgroundColor;
+ border-color: @wcfInputHoverBorderColor;
+ //border: 1px solid rgba(255, 170, 34, 1);
+ //background-color: rgba(255, 249, 244, 1);
+}
+
+/* Active & Focus State */
+
+input[type='text']:active,
+input[type='search']:active,
+input[type='date']:active,
+input[type='email']:active,
+input[type='url']:active,
+input[type='password']:active,
+textarea:active,
+select[multiple]:active,
+
+input[type='text']:focus,
+input[type='search']:focus,
+input[type='date']:focus,
+input[type='email']:focus,
+input[type='url']:focus,
+input[type='password']:focus,
+textarea:focus,
+select[multiple]:focus {
+ background-color: @wcfInputHoverBackgroundColor;
+ border-color: @wcfInputHoverBorderColor;
+ outline: none;
+
+ // TODO: use mixin
+ box-shadow: 0 0 5px fade(@wcfInputHoverBorderColor, 50%), inset 0 1px 5px rgba(0, 0, 0, .2);
+ -webkit-box-shadow: 0 0 5px fade(@wcfInputHoverBorderColor, 50%), inset 0 1px 5px rgba(0, 0, 0, .2);
+ -moz-box-shadow: 0 0 5px fade(@wcfInputHoverBorderColor, 50%), inset 0 1px 5px rgba(0, 0, 0, .2);
+ -ms-box-shadow: 0 0 5px fade(@wcfInputHoverBorderColor, 50%), inset 0 1px 5px rgba(0, 0, 0, .2);
+ -o-box-shadow: 0 0 5px fade(@wcfInputHoverBorderColor, 50%), inset 0 1px 5px rgba(0, 0, 0, .2);
+}
+
+/* Read Only State */
+
+input[type='text'][readonly],
+input[type='search'][readonly],
+input[type='email'][readonly],
+input[type='date'][readonly],
+input[type='url'][readonly],
+input[type='password'][readonly],
+textarea[readonly],
+select[multiple][readonly] {
+ background-color: transparent;
+ // TODO:
+ border-color: rgba(204, 204, 204, 1) rgba(221, 221, 221, 1) rgba(238, 238, 238, 1);
+
+ .boxShadowInset(0, 1px, rgba(0, 0, 0, .01));
+}
+
+/* Disabled State */
+
+input[type='text'][disabled],
+input[type='search'][disabled],
+input[type='date'][disabled],
+input[type='email'][disabled],
+input[type='url'][disabled],
+input[type='password'][disabled],
+textarea[disabled],
+select[multiple][disabled] {
+ background-color: rgba(255, 255, 255, .5);
+ border-color: rgba(255, 255, 255, .5);
+}
+
+/* Width */
+textarea {
+ width: 99%;
+}
+
+.tiny {
+ width: 50px;
+}
+
+.short {
+ min-width: 50px;
+ width: 10%;
+}
+
+.medium {
+ min-width: 100px;
+ width: 30%;
+}
+
+.long {
+ min-width: 150px;
+ width: 100%;
+}
+
+/* Form Errors */
+
+.formError input[type='text'],
+.formError input[type='search'],
+.formError input[type='email'],
+.formError input[type='url'],
+.formError input[type='password'],
+.formError textarea {
+ border-color: @errorBorderColor;
+ background-color: @errorBackgroundColor;
+ color: @errorColor;
+}
\ No newline at end of file
--- /dev/null
+/* general definitions */
+body {
+ background-color: @wcfPageBackgroundColor;
+ background-image: url(../../images/header.png);
+ background-repeat: repeat-x;
+ color: @wcfPageColor;
+ font-family: @wcfBaseFontFamily;
+ font-size: @wcfBaseFontSize;
+ line-height: 1;
+}
+
+a {
+ color: @wcfLinkColor;
+ cursor: pointer;
+ text-decoration: none;
+
+ &:hover {
+ color: @wcfLinkHoverColor;
+ text-decoration: underline;
+ }
+}
+
+#pageHeader {
+ margin-top: 57px;
+ z-index: 100;
+}
+
+#top {
+ display: block;
+ height: 1px;
+ visibility: hidden;
+}
+
+small {
+ font-size: 85%;
+ margin-top: 2px;
+}
+
+.invisible {
+ display: none;
+}
+
+.marginTop {
+ margin-top: @wcfGapMedium;
+}
+
+img {
+ vertical-align: middle !important;
+}
+
+/* basic layout elements */
+.layoutFluid {
+ padding: 0 @wcfLayoutFluidGap;
+}
+
+.layoutFixed {
+ margin: 0 auto;
+ width: @wcfLayoutFixedWidth;
+}
+
+.container {
+ background-color: @wcfContainerBackgroundColor;
+ border: @wcfContainerBorderWidth @wcfContainerBorderStyle @wcfContainerBorderColor;
+ border-radius: @wcfContainerBorderRadius;
+}
+
+.containerPadding {
+ padding: @wcfGapMedium @wcfGapLarge @wcfGapMedium;
+}
+
+.containerList {
+ > li {
+ padding: @wcfGapMedium @wcfGapLarge;
+
+ .transition(background-color, .1s);
+
+ &:nth-child(2n) {
+ background-color: @wcfContainerAccentBackgroundColor;
+ }
+
+ &:first-child {
+ .borderRadius(@wcfContainerBorderRadius, 0);
+ }
+
+ &:last-child {
+ .borderRadius(0, @wcfContainerBorderRadius);
+ }
+
+ &:hover {
+ background-color: @wcfHighlightBackgroundColor;
+ }
+ }
+}
+
+.containerHeadline {
+ margin-bottom: @wcfGapSmall;
+
+ > h1 {
+ font-size: 120%;
+ font-weight: bold;
+ margin-bottom: 2px;
+
+ > small {
+ color: @wcfDimmedColor;
+ font-weight: normal;
+ text-shadow: none;
+ font-size: 70%;
+ }
+ }
+
+ > h1, > h1 > a {
+ .textShadow(@wcfContainerBackgroundColor);
+ }
+}
+
+/* boxes with an image */
+.box(@imageSize, @gapOffset: 0) {
+ /* using a min-height prevents us from clearing (which causes a lot of issues) */
+ min-height: @imageSize + 4px;
+
+ > :first-child {
+ float: left;
+ }
+
+ > *:not(:first-child) {
+ margin-left: (@imageSize + @gapOffset);
+ }
+
+ > .framed ~ * {
+ margin-left: (@imageSize + @gapOffset) + 4px;
+ }
+}
+
+.box16 { .box(16px, 3px); }
+.box24 { .box(24px, 5px); }
+.box32 { .box(32px, 4px); }
+.box48 { .box(48px, 8px); }
+.box64 { .box(64px, 10px); }
+.box96 { .box(96px, 12px); }
+.box128 { .box(128px, 16px); }
+.box256 { .box(256px, 32px); }
+
+.boxHeadline {
+ margin-top: @wcfGapLarge;
+
+ hgroup {
+ > h1 {
+ font-size: 170%;
+ font-weight: bold;
+ border-bottom: 1px solid @wcfColor;
+ padding: 1px 0 10px;
+
+ .textShadow(@wcfContentBackgroundColor);
+
+ a {
+ color: @wcfColor;
+ text-decoration: none;
+ }
+ }
+
+ > h2 {
+ color: @wcfDimmedColor;
+ padding-top: 5px;
+ }
+ }
+}
+
+.boxSubHeadline {
+ > h1 {
+ border-bottom: 1px solid @wcfDimmedColor;
+ color: @wcfDimmedColor;
+ font-size: 150%;
+ font-weight: bold;
+ padding: 1px 0 10px;
+
+ .textShadow(@wcfContainerBackgroundColor);
+ }
+}
+
+.icon(@imageSize) {
+ .square(@imageSize);
+}
+
+.icon16 { .icon(16px); }
+.icon24 { .icon(24px); }
+.icon32 { .icon(32px); }
+.icon48 { .icon(48px); }
+.icon64 { .icon(64px); }
+.icon96 { .icon(96px); }
+.icon128 { .icon(128px); }
+.icon256 { .icon(256px); }
+
+dl.dataList {
+ display: inline-block;
+ font-size: 90%;
+ margin: 0;
+ position: static;
+
+ dd {
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+ }
+
+ dt {
+ color: @wcfDimmedColor;
+ display: inline-block;
+ float: none;
+ margin: 0;
+ text-align: left;
+ width: auto;
+
+ &:after {
+ content: ":";
+ }
+ }
+}
+
+.framed {
+ img {
+ background-color: @wcfContentBackgroundColor;
+ border: 1px solid @wcfContainerBorderColor;
+ padding: 1px;
+ }
+}
+
+/* -- -- -- Shadows -- -- -- */
+
+/* Shadows for boxes - do not use on small boxes! */
+
+.shadow {
+ .boxShadow(0, 10px, rgba(0, 0, 0, .1), 10px, -10px);
+}
--- /dev/null
+.logo {
+ a {
+ display: block;
+ min-height: 100px;
+
+ &:hover {
+ text-decoration: none;
+ }
+
+ h1 {
+ color: @wcfPageLinkHoverColor;
+ float: right;
+ font-size: 160%;
+ padding-top: @wcfGapLarge;
+
+ .textShadow(@wcfPageBackgroundColor);
+ }
+ }
+}
\ No newline at end of file
-/**
- * Message Styles
- *
- * @author Harald Szekely
- * @copyright 2011 WoltLab GmbH
- */
-
-
-
-/* ############## LESS Definitions ############## */
-
-/* -- -- -- LESS: Posts -- -- -- */
-
-/* Back Image */
-
-/* Back Image (header.png) */
-@backImagePost: url('../images/header.png');
-
-/* Orientations */
-
-/* Post Orientation (left|top|right|bottom) */
-@postOrientation: left;
-
-/* Post Sidebar Orientation (left|center|right) */
-@postSidebarOrientation: center;
-
-
-
-/* ############## Article ############## */
-
-/* Globals */
-
-.wcf-message {
- border-color: @borderColor22;
- background-color: #d8e7f5;
+.message {
+ background-color: @wcfHighlightBackgroundColor;
+ border: @wcfContainerBorderWidth @wcfContainerBorderStyle @wcfContainerBorderColor;
position: relative;
-}
-
-.wbb-threadStarter .wcf-message {
- .mxStripes1;
- background-position: @postOrientation top, @postOrientation top;
- background-repeat: repeat, repeat;
-}
-
-.wcf-message:after {
- content: '';
- display: block;
- clear: both;
-}
-
-/* Message Deleted */
-
-.wcf-message.deleted {
- opacity: .5;
-}
-
-/* Special */
-
-.wcf-messageRed {
- border-color: #c00;
- background-color: #fee;
-}
-
-
-
-/* -- -- -- -- Message Content -- -- -- -- -- */
-
-/* Globals */
-
-.wcf-message .wcf-messageContent {
- .mxBorderRadius;
-
- background-color: #fcfdfe;
-}
-
-li:nth-child(2n+1) .wcf-message .wcf-messageContent {
- /* Auto-colorer for every 2nd message */
- background-color: #f3f7fb;
-}
-
-/* Orientation */
-
-@media screen and (min-width: 480px) {
+ .boxShadow(0, 0, #eee, 7px);
+ .borderRadius();
- .wcf-message.left .wcf-messageContent {
- border-left: 1px solid @borderColor22;
- margin: 0 0 0 211px;
- }
-
- .wcf-message.right .wcf-messageContent {
- border-right: 1px solid @borderColor22;
- margin: 0 211px 0 0;
+ &:after {
+ clear: both;
+ content: '';
+ display: block;
}
-}
-
-@media screen and (max-width: 480px) {
-
- .wcf-message .wcf-messageContent {
- border-top: 1px solid @borderColor22;
- margin: 0;
+ &:hover .messageFooter nav {
+ opacity: 1;
}
-
-}
-
-
-
-/* Message Header */
-
-.wcf-message .wcf-messageContent header {
- position: relative;
-}
-
-@media screen and (min-width: 480px) {
- .wcf-message .wcf-messageContent header {
- padding: 20px 20px 5px;
+ &.deleted {
+ opacity: .5;
}
-
}
-
-@media screen and (max-width: 480px) {
- .wcf-message .wcf-messageContent header {
- padding: 10px 20px 0;
+.message.messageSidebarOrientationLeft {
+ .messageContent {
+ border-left: @wcfContainerBorderWidth @wcfContainerBorderStyle @wcfContainerBorderColor;
+ margin: 0 0 0 211px;
}
-
-}
-
-
-
-/* Message Header Contents */
-
-.wcf-message .wcf-messageContent header time {
- font-size: 85%;
- color: @fontColor53;
- margin-top: 7px;
-}
-
-.wcf-message .wcf-messageContent header .wcf-likesDisplay {
- margin-top: 1px;
- margin-left: 5px;
- display: inline-block;
-}
-
-.wcf-message .wcf-messageContent header .wcf-likesDisplay .wcf-badge {
- font-size: 75%;
- margin-left: 0;
- top: 0;
-}
-
-.wcf-message .wcf-messageContent header .wcf-messageTitle {
- font-weight: bold;
- color: @fontColor53;
- text-shadow: 0 1px 1px rgba(255, 255, 255, 1);
-}
-
-@media screen and (min-width: 480px) {
- .wcf-message .wcf-messageContent header .wcf-messageTitle {
- font-size: 130%;
- padding: 13px 0 0;
+ .messageSidebar {
+ float: left;
}
-
-}
-
-@media screen and (max-width: 480px) {
- .wcf-message .wcf-messageContent header .wcf-messageTitle {
- font-size: 170%;
- padding: 7px 0 0;
+ header > .pointer {
+ border-color: transparent @wcfContainerBorderColor transparent transparent;
+ border-style: @wcfContainerBorderStyle @wcfContainerBorderStyle @wcfContainerBorderStyle none;
+ left: -20px;
+
+ > span {
+ border-color: transparent @wcfContainerBackgroundColor transparent transparent;
+ border-style: @wcfContainerBorderStyle @wcfContainerBorderStyle @wcfContainerBorderStyle none;
+ left: 1px;
+ }
}
-
-}
-
-.wcf-message header .wcf-messageCounter {
- font-size: 90%;
- font-weight: bold;
- float: right;
- margin-left: 7px;
-}
-
-.wcf-message header .wcf-messageCounter a {
- padding: 2px 5px;
-}
-
-
-
-/* -- -- -- -- Message Pointer -- -- -- -- -- */
-
-/* Level 1 - Globals */
-
-.wcf-message header > .pointer {
- display: block !important;
- position: absolute;
- width: 0;
- height: 0;
- z-index: 100;
-}
-
-/* Level 2 - Globals */
-
-.wcf-message header > .pointer > span {
- display: block;
- position: absolute;
- width: 0;
- height: 0;
}
-@media screen and (min-width: 480px) {
-
- /* Level 1 - Globals */
-
- .wcf-message header > .pointer {
- border-width: 20px;
- top: 35px;
+.message.messageSidebarOrientationRight {
+ .messageContent {
+ border-right: @wcfContainerBorderWidth @wcfContainerBorderStyle @wcfContainerBorderColor;
+ margin: 0 211px 0 0;
}
- /* Level 1 - Left-Right */
-
- .wcf-message.left header > .pointer {
- border-style: solid solid solid none;
- border-color: transparent @borderColor22 transparent transparent;
- left: -20px;
+ .messageSidebar {
+ float: right;
}
- .wcf-message.right header > .pointer {
- border-style: solid none solid solid;
- border-color: transparent transparent transparent @borderColor22;
+ header > .pointer {
+ border-color: transparent transparent transparent @wcfContainerBorderColor;
+ border-style: @wcfContainerBorderStyle none @wcfContainerBorderStyle @wcfContainerBorderStyle;
right: -20px;
+
+ > span {
+ border-color: transparent transparent transparent @wcfContainerBorderColor;
+ border-style: @wcfContainerBorderStyle none @wcfContainerBorderStyle @wcfContainerBorderStyle;
+ right: 1px;
+ }
}
-
- /* Level 2 - Globals */
-
- .wcf-message header > .pointer > span {
- border-width: 20px;
- top: -20px;
- }
-
- /* Level 2 - Left-Right */
-
- .wcf-message.left header > .pointer > span {
- border-style: solid solid solid none;
- border-color: transparent #fcfdfe transparent transparent;
- left: 1px;
- }
-
- .wcf-message.right header > .pointer > span {
- border-style: solid none solid solid;
- border-color: transparent transparent transparent #fcfdfe;
- right: 1px;
- }
-
- li:nth-child(2n+1) .wcf-message.left header > .pointer > span {
- /* Auto-colorer for every 2nd message-left */
- border-right-color: #f3f7fb;
- }
-
- li:nth-child(2n+1) .wcf-message.right header > .pointer > span {
- /* Auto-colorer for every 2nd message-right arrow */
- border-left-color: #f3f7fb;
- }
-
}
-@media screen and (max-width: 480px) {
-
- /* Level 1 - Globals */
-
- .wcf-message header > .pointer {
- border-width: 10px;
- top: -10px;
- }
-
- /* Level 1 - Left-Right */
-
- .wcf-message header > .pointer {
- border-style: none solid solid solid;
- border-color: transparent transparent @borderColor22 transparent;
- left: 47%;
+.message.dividers {
+ .userAvatar,
+ .userRank,
+ .userCredits,
+ .userStatus {
+ border-bottom: @wcfContainerBorderWidth dotted darken(@wcfContainerBorderColor, 10%);
}
- /* Level 2 - Globals */
-
- .wcf-message header > .pointer > span {
- border-width: 10px;
- top: 1px;
- }
-
- /* Level 2 - Left-Right */
-
- .wcf-message header > .pointer > span {
- border-style: none solid solid solid;
- border-color: transparent transparent #fcfdfe transparent;
- left: -10px;
+ .messageSidebar div:last-child {
+ border: 0;
}
- li:nth-child(2n+1) .wcf-message header > .pointer > span {
- /* Auto-colorer for every 2nd message arrow */
- border-bottom-color: #f3f7fb;
+ .messageSidebar > div {
+ > div,
+ > header {
+ vertical-align: top;
+ }
}
-
-}
-
-
-
-/* -- -- -- -- Message Content -- -- -- -- -- */
-
-/* Message Body */
-
-.wcf-message .wcf-messageBody {
- color: @fontColor52;
- display: block;
- position: relative;
}
-@media screen and (min-width: 480px) {
-
- .wcf-message .wcf-messageBody {
- font-size: 90%;
- line-height: 1.75;
- padding: 10px 20px 1px;
+.message header {
+ > .pointer {
+ border-width: 20px;
+ display: block !important;
+ height: 0;
+ position: absolute;
+ top: 35px;
+ width: 0;
+ z-index: 100;
+
+ > span {
+ border-width: 20px;
+ display: block;
+ height: 0;
+ position: absolute;
+ top: -20px;
+ width: 0;
+ }
}
-}
-
-@media screen and (max-width: 480px) {
-
- .wcf-message .wcf-messageBody {
- font-size: 120%;
- line-height: 1.9;
- padding: 5px 20px 1px;
+ .messageCounter {
+ float: right;
+ font-size: 90%;
+ font-weight: bold;
+ margin-left: @wcfGapSmall;
+
+ a {
+ padding: 2px 5px;
+ }
}
-
-}
-
-.wcf-message .wcf-messageBody:after {
- content: '';
- display: block;
- clear: both;
}
-.wcf-message .wcf-messageBody > div,
-.wcf-message .wcf-messageBody > wcf-signature {
- border-top: @borderWidthSeparator @borderStyleSeparator @borderColor11;
- padding: 10px 0;
+.message .messageBody {
+ color: @wcfColor;
display: block;
- overflow: hidden;
-}
-
-.wcf-message .wcf-messageBody .wcf-signature {
- color: @fontColor53;
- overflow: hidden;
-}
-
-@media screen and (min-width: 480px) {
-
- .wcf-message .wcf-messageBody .wcf-signature {
- padding: 10px 0 20px;
- }
-
-}
-
-@media screen and (max-width: 480px) {
-
- .wcf-message .wcf-messageBody .wcf-signature {
- padding: 5px 0;
- }
-
-}
-
-
-
-/* -- -- -- -- Message Sidebar -- -- -- -- -- */
-
-/* Globals */
-
-.wcf-message .wcf-messageSidebar {
font-size: 90%;
- line-height: 1.3;
+ line-height: 1.75;
+ padding: 10px 20px 1px;
position: relative;
- box-sizing: border-box;
-}
-
-@media screen and (min-width: 480px) {
-
- .wcf-message .wcf-messageSidebar {
- text-align: center;
- margin-bottom: -1px;
- padding: 10px 20px 20px;
- /* Width toggle */
- width: 210px;
- }
-}
-
-@media screen and (max-width: 480px) {
-
- .wcf-message .wcf-messageSidebar {
- text-align: left;
- padding: 5px 0 10px;
- width: 100%;
- }
-
-}
-
-.wcf-message .wcf-messageSidebar:after {
- content: '';
- display: block;
- clear: both;
-}
-
-/* Orientation */
-
-@media screen and (min-width: 480px) {
-
- .wcf-message.left .wcf-messageSidebar {
- float: left;
- }
- .wcf-message.right .wcf-messageSidebar {
- float: right;
+ &:after {
+ clear: both;
+ content: '';
+ display: block;
}
-}
-
-@media screen and (max-width: 480px) {
-
- .wcf-message .wcf-messageSidebar {
- float: none;
- }
-
-}
-
-
-
-/* Message Sidebar Header */
-
-.wcf-message .wcf-messageSidebar header .wcf-username,
-.wcf-message .wcf-messageSidebar header .wcf-username a {
- font-size: 110%;
- font-weight: bold;
- text-decoration: none;
- text-shadow: 0 1px 1px rgba(255, 255, 255, 1);
- color: @fontColor3;
- padding: 1px 3px;
-}
-
-/* Message Sidebar Contents */
-
-.wcf-message .wcf-messageSidebar a {
- color: @fontColor3;
-}
-
-.wcf-message .wcf-messageSidebar a:hover {
- color: @fontColor3;
-}
-
-.wcf-message .wcf-messageSidebar .userTitle .wcf-badge {
- font-size: 95%;
- color: @fontColor1;
- /* border-radius: 13px; obsolete? */
- background-color: @backColor3;
- margin-top: 3px;
- padding: 0 10px;
- display: inline-block;
-
- -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 1);
- -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 1);
- -ms-box-shadow: 0 1px 0 rgba(255, 255, 255, 1);
- -o-box-shadow: 0 1px 0 rgba(255, 255, 255, 1);
- box-shadow: 0 1px 0 rgba(255, 255, 255, 1);
-}
-
-.wcf-message .wcf-messageSidebar .userRank {
- font-size: 95%;
- color: @fontColor1;
- margin: 3px 0 0;
- padding: 0 0 7px;
- display: block;
-}
-
-.wcf-message .wcf-messageSidebar .wcf-userAvatar {
- margin: 7px 0 0;
- padding: 0 0 7px;
- display: block;
-}
-
-.wcf-message .wcf-messageSidebar .wcf-userAvatar img {
- border: none;
- padding: 0;
-}
-
-.wcf-message .wcf-messageSidebar .userCredits {
- font-size: 95%;
- color: @fontColor3;
- margin: 7px 0 0;
- padding: 0 0 7px;
- display: block;
-}
-
-.wcf-message .wcf-messageSidebar .userCredits p,
-.wcf-message .wcf-messageSidebar .userCredits a {
- color: @fontColor3;
-}
-
-.wcf-message .wcf-messageSidebar .userStatus,
-.wcf-message .wcf-messageSidebar .userContacts {
- color: @fontColor3;
- margin: 7px 0 0;
- display: block;
-}
-
-.wcf-message .wcf-messageSidebar .userStatus ul,
-.wcf-message .wcf-messageSidebar .userContact ul {
- list-style-type: none;
-}
-
-.wcf-message .wcf-messageSidebar .userStatus ul li,
-.wcf-message .wcf-messageSidebar .userContact ul li {
- display: inline;
-}
-
-.wcf-message .wcf-messageSidebar .userStatus ul li a,
-.wcf-message .wcf-messageSidebar .userContact ul li a {
- text-align: left;
- text-decoration: none;
- margin: 0 -3px;
- padding: 1px 3px 0;
- display: inline-block;
-
- .mxTransition1 (background-color, .2s);
-}
-
-.wcf-message .wcf-messageSidebar .userStatus ul li a:hover,
-.wcf-message .wcf-messageSidebar .userContacts ul li a:hover {
- .mxBorderRadius (7px);
-
- background-color: #bcd;
-
- -webkit-box-shadow: 0 1px 7px #eee;
- -moz-box-shadow: 0 1px 7px #eee;
- -ms-box-shadow: 0 1px 7px #eee;
- -o-box-shadow: 0 1px 7px #eee;
- box-shadow: 0 1px 7px #eee;
-}
-
-.wcf-message .wcf-messageSidebar .userStatus ul li a span,
-.wcf-message .wcf-messageSidebar .userContact ul li a span {
- display: block;
- position: absolute;
- left: -9000px;
- top: -9000px;
-}
-@media screen and (min-width: 480px) {
-
- /* Message Sidebar Dividers only when sidebar not on top */
- .wcf-message.dividers .wcf-userAvatar,
- .wcf-message.dividers .userRank,
- .wcf-message.dividers .userCredits,
- .wcf-message.dividers .userStatus {
- border-bottom: @borderWidthSeparator @borderStyleSeparator @borderColor22;
- }
-
- .wcf-message.dividers .wcf-messageSidebar div:last-child {
- border: 0;
- }
-
- .wcf-message .wcf-messageSidebar > div > header,
- .wcf-message .wcf-messageSidebar > div > div {
- vertical-align: top;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .wcf-message .wcf-messageSidebar {
- display: table !important;
- border-collapse: separate;
- width: 100%;
- }
-
- .wcf-message .wcf-messageSidebar > div {
- display: table-row !important;
- }
-
- .wcf-message .wcf-messageSidebar > div > header,
- .wcf-message .wcf-messageSidebar > div > div {
- padding: 10px !important;
- display: table-cell !important;
- vertical-align: top;
- width: 25%;
- }
-
- .wcf-message .wcf-messageSidebar header {
- min-width: 25%;
- }
-
- .wcf-message .wcf-messageSidebar header .wcf-username,
- .wcf-message .wcf-messageSidebar header .wcf-username a {
- font-size: 130%;
- padding: 3px;
- }
-
- .wcf-message .wcf-messageSidebar .wcf-userAvatar img {
- height: auto;
- width: 50%;
- min-width: 50px;
+ > div {
+ border-top: @wcfContainerBorderWidth dotted @wcfContainerBorderColor;
+ display: block;
+ overflow: hidden;
+ padding: 10px 0;
}
- .wcf-message .wcf-messageSidebar .userCredits {
- font-size: 75%;
+ .signature {
+ overflow: hidden;
+ padding: 10px 0 20px;
}
-
-}
-
-
-
-/* -- -- -- -- Thread Starter Badge -- -- -- -- -- */
-
-/* Globals */
-
-.wcf-message .wcf-messageSidebar .userStatus .wbb-threadStarter {
- border: 1px solid #ccc;
- background-color: @backColor1;
- display: block !important;
- position: absolute;
}
-@media screen and (min-width: 480px) {
-
- .wcf-message.left .wcf-messageSidebar .userStatus .wbb-threadStarter {
- top: -3px;
- left: 15px;
- width: 16px;
- height: 15px;
- }
-
- .wcf-message.right .wcf-messageSidebar .userStatus .wbb-threadStarter {
- top: -3px;
- right: 15px;
- width: 16px;
- height: 15px;
- }
+.message .messageContent {
+ background-color: @wcfContainerBackgroundColor;
-}
-
-@media screen and (max-width: 480px) {
+ .borderRadius();
- .wcf-message .wcf-messageSidebar .userStatus .wbb-threadStarter {
- top: -3px;
- left: 47%;
- width: 16px;
- height: 15px;
+ header {
+ padding: 20px 20px 5px;
+ position: relative;
+
+ time {
+ color: @wcfDimmedColor;
+ font-size: 85%;
+ margin-top: @wcfGapSmall;
+ }
+
+ .likesDisplay {
+ display: inline-block;
+ margin-left: @wcfGapMedium;
+ margin-top: 1px;
+
+ .badge {
+ font-size: 76%;
+ margin-left: 0;
+ top: 0;
+ }
+ }
+
+ .messageTitle {
+ color: @wcfColor;
+ font-size: 130%;
+ font-weight: bold;
+ padding: 13px 0 0;
+
+ .textShadow(@wcfContainerBackgroundColor);
+ }
}
-
-}
-
-/* Level 1 - Globals */
-
-.wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer {
- display: block !important;
- position: absolute;
- width: 0;
- height: 0;
- z-index: 100;
-}
-
-/* Level 2 - Globals */
-
-.wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer > span {
- display: block;
- position: absolute;
- width: 0;
- height: 0;
-}
-
-.wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer > span img {
- position: absolute;
}
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- /* Level 1 - Globals */
-
- .wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer {
- border-width: 9px;
- top: 15px;
- }
-
- /* Level 1 - Left-Right */
-
- .wcf-message.left .wcf-messageSidebar .wbb-threadStarter > .pointer {
- border-style: none solid solid solid;
- border-color: #ccc #ccc transparent #ccc;
- left: -1px;
- }
-
- .wcf-message.right .wcf-messageSidebar .wbb-threadStarter > .pointer {
- border-style: none solid solid solid;
- border-color: #ccc #ccc transparent #ccc;
- left: -1px;
- }
-
- /* Level 2 - Globals */
-
- .wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer > span {
- border-width: 8px;
- top: -1px;
- }
-
- /* Level 2 - Left-Right */
-
- .wcf-message.left .wcf-messageSidebar .wbb-threadStarter > .pointer > span {
- border-style: none solid solid solid;
- border-color: #fff #fff transparent #fff;
- left: -8px;
- }
+.message .messageSidebar {
+ font-size: 90%;
+ line-height: 1.3;
+ margin-bottom: -1px;
+ padding: 10px 20px 20px;
+ position: relative;
+ text-align: center;
+ width: 170px; /* Width toggle */
- .wcf-message.right .wcf-messageSidebar .wbb-threadStarter > .pointer > span {
- border-style: none solid solid solid;
- border-color: #fff #fff transparent #fff;
- right: -8px;
+ &:after {
+ clear: both;
+ content: '';
+ display: block;
}
- .wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer > span img {
- top: -13px;
- left: -8px;
+ header .username,
+ header .username a {
+ color: @wcfLinkColor;
+ font-size: 110%;
+ font-weight: bold;
+ padding: 1px 3px;
+ text-decoration: none;
+
+ .textShadow(@wcfHighlightBackgroundColor);
}
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- /* Level 1 - Globals */
-
- .wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer {
- border-width: 9px;
- top: 15px;
+ header .username a img {
+ vertical-align: middle;
}
- /* Level 1 - Left-Right */
-
- .wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer {
- border-style: none solid solid solid;
- border-color: #ccc #ccc transparent #ccc;
- left: -1px;
+ a {
+ color: @wcfLinkColor;
+
+ &:hover {
+ color: @wcfLinkHoverColor;
+ }
+ }
+
+ .userTitle .badge {
+ background-color: @wcfLinkColor;
+ color: rgba(255, 255, 255, 1);
+ display: inline-block;
+ font-size: 95%;
+ margin-top: 3px;
+ padding: 0 10px;
+
+ .borderRadius(13px);
+ .boxShadow(0, 1px, rgba(255, 255, 255, 1), 0);
}
- /* Level 2 - Globals */
-
- .wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer > span {
- border-width: 8px;
- top: -1px;
+ .userRank {
+ color: rgba(255, 255, 255, 1);
+ display: block;
+ font-size: 95%;
+ margin: 3px 0 0;
+ padding: 0 0 7px;
}
- /* Level 2 - Left-Right */
-
- .wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer > span {
- border-style: none solid solid solid;
- border-color: #fff #fff transparent #fff;
- left: -8px;
+ .userAvatar {
+ display: block;
+ margin: 7px 0 0;
+ padding: 0 0 7px;
+
+ img {
+ border: 0;
+ padding: 0;
+ }
+ }
+
+ .userCredits {
+ color: @wcfLinkColor;
+ display: block;
+ font-size: 95%;
+ margin: 7px 0 0;
+ padding: 0 0 7px;
+
+ a,
+ p {
+ color: @wcfLinkColor;
+ }
}
- .wcf-message .wcf-messageSidebar .wbb-threadStarter > .pointer > span img {
- top: -15px;
- left: -8px;
+ .userStatus,
+ .userContacts {
+ color: @wcfLinkColor;
+ display: block;
+ margin: @wcfGapSmall 0 0;
}
-}
-
-
-
-/* -- -- -- -- Message Footer -- -- -- -- -- */
-
-/* Footer */
-
-.wcf-message .wcf-messageFooter {
- font-size: 100%;
- line-height: 1;
- position: relative;
-}
-
-.wcf-message .wcf-messageFooter:after {
- content: '';
- display: block;
- clear: both;
-}
-
-/* Message Footer Navi */
-
-.wcf-message .wcf-messageFooter nav {
- /* General toggle switch for nav-bar orientation (options: left|center|right) */
- text-align: right;
- position: absolute;
-}
-
-@media screen and (min-width: 480px) {
+ .userStatus ul,
+ .userContact ul {
+ list-style-type: none;
- .wcf-message .wcf-messageSignature {
+ li {
+ display: inline;
+
+ a {
+ display: inline-block;
+ margin: 0 -3px;
+ padding: 1px 3px 0;
+ text-align: left;
+ text-decoration: none;
+
+ .transition(background-color, .2s);
+
+ &:hover {
+ background-color: @wcfContainerBorderColor;
+
+ .borderRadius(7px);
+ .boxShadow(0, 1px, #eee, 7px);
+ }
+
+ span {
+ display: block;
+ left: -9000px;
+ position: absolute;
+ top: -9000px;
+ }
+ }
+ }
+ }
+}
+
+.message {
+ .messageSignature {
+ border-top: @wcfContainerBorderWidth dotted @wcfContainerBorderColor;
+ color: lighten(@wcfColor, 10%);
+ display: block;
margin: 10px 0 0;
padding: 10px 0;
}
-
- .wcf-message .wcf-messageFooter nav {
- right: -20px;
- bottom: -1px;
- opacity: 0;
-
- .mxTransition1 (opacity, .2s);
- }
- .wcf-message:hover .wcf-messageFooter nav {
- opacity: 1;
- }
-
-}
-
-@media screen and (max-width: 480px) {
-
- .wcf-message .wcf-messageSignature {
- margin: 5px 0 0;
- padding: 0;
- }
-
- .wcf-message .wcf-messageFooter nav {
- font-size: 125%;
- right: -20px;
- bottom: -1px;
- opacity: 1;
- }
+ .messageFooter {
+ font-size: 100%;
+ line-height: 1;
+ position: relative;
- .wcf-message .wcf-messageFooter nav .wcf-smallButtons > li {
- margin-left: -7px;
- }
+ /*
+ &:after {
+ clear: both;
+ content: "";
+ position: relative;
+ }
+ */
- .wcf-message .wcf-messageFooter nav .wcf-smallButtons > li > a {
- padding: 5px 8px;
- }
+ nav {
+ bottom: -2px;
+ opacity: 0;
+ position: absolute;
+ right: -21px;
+ text-align: right;
+
+ .transition(opacity, .1s);
+
+ li {
+ display: inline-block;
+ margin-left: -5px;
+
+ &:first-child a.button {
+ border-top-left-radius: 14px;
+ }
+
+ &:last-child a.button {
+ border-bottom-right-radius: @wcfContainerBorderRadius;
+ }
+
+ a.button {
+ margin: 0;
+ padding-right: @wcfGapSmall;
+
+ .borderRadius(0);
+ }
+ }
+ }
+ }
+}
+
+li:nth-child(2n+1) .message {
+ &.messageSidebarOrientationLeft header > .pointer > span {
+ border-right-color: @wcfContainerAccentBackgroundColor;
+ }
+
+ &.messageSidebarOrientationRight header > .pointer > span {
+ border-left-color: @wcfContainerAccentBackgroundColor;
+ }
+
+ .messageContent {
+ background-color: @wcfContainerAccentBackgroundColor;
+ }
+}
+
+.messageReduced {
+ .messageCredits {
+ display: table-cell;
+ width: 25%;
- .wcf-message .wcf-messageFooter nav .wcf-smallButtons > li > a > img {
- width: 24px;
- height: 24px;
- }
+ > .userAvatar {
+ float: left;
+ }
- .wcf-message .wcf-messageFooter nav .wcf-smallButtons > li > a > span {
- position: absolute;
- left: -9000px;
- top: -9000px;
+ > div {
+ padding-left: 50px;
+ position: relative;
+ }
}
-}
-
-/* ToDo: Reduced Messages */
-
-.wcf-messageReduced .messageCredits {
- display: table-cell;
- width: 25%;
-}
-
-.wcf-messageReduced .wcf-messageCredits > .wcf-userAvatar {
- float: left;
-}
-
-.wcf-messageReduced .wcf-messageCredits > div {
- padding-left: 50px;
- position: relative;
-}
-
-.wcf-messageReduced .wcf-messageFooter > .wcf-breadcrumbs {
- position: relative;
- bottom: 10px;
- left: 0;
- opacity: 1;
-}
-
-
-
-/* ToDo: CK-Editor */
-
-.cke_skin_kama {
- /* Removes the fat border around the editor, should better be moved into the wcf-stylesheet */
- padding: 0 !important;
-}
-
-/* ToDo: Message Tabs */
-
-/* Smilies */
-
-.wcf-smiliesContent {
- /* none */
- text-align: center;
-}
-
-.wcf-smiliesContent li {
- display: inline-block;
- margin: 2px;
- cursor: pointer;
-}
-
-
-
-
-/* -- -- -- -- -- EOF -- -- -- -- -- */
+ .messageFooter > .breadcrumbs {
+ bottom: 10px;
+ left: 0;
+ opacity: 1;
+ position: relative;
+ }
+}
\ No newline at end of file
--- /dev/null
+/* shortcuts */
+// clearing floats like a boss h5bp.com/q
+.clearfix {
+ // trigger 'hasLayout'
+ *zoom: 1;
+
+ &:before,
+ &:after {
+ display: table;
+ content: "";
+ }
+
+ &:after {
+ clear: both;
+ }
+}
+
+.square(@size) {
+ height: @size;
+ width: @size;
+}
+
+
+// sets default text shadows depending on background color
+.textShadow(@backgroundColor) when (lightness(@backgroundColor) >= 50%) {
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+}
+.textShadow(@backgroundColor) when (lightness(@backgroundColor) < 50%) {
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
+}
+
+/* CSS 3 */
+.linearGradient(@backgroundColor, @gradientColor1, @gradientColor2) {
+ background-color: @backgroundColor;
+ background-image: -webkit-linear-gradient(@gradientColor1, @gradientColor2);
+ background-image: -moz-linear-gradient(@gradientColor1, @gradientColor2);
+ background-image: -o-linear-gradient(@gradientColor1, @gradientColor2);
+ background-image: -ms-linear-gradient(@gradientColor1, @gradientColor2);
+ background-image: linear-gradient(@gradientColor1, @gradientColor2);
+}
+
+.linearGradient(@backgroundColor, @gradientColor1, @gradientColor2, @gradientColor3, @direction: top) {
+ background-color: @backgroundColor;
+ background-image: -webkit-linear-gradient(@direction, @gradientColor1, @gradientColor2, @gradientColor3);
+ background-image: -moz-linear-gradient(@direction, @gradientColor1, @gradientColor2, @gradientColor3);
+ background-image: -o-linear-gradient(@direction, @gradientColor1, @gradientColor2, @gradientColor3);
+ background-image: -ms-linear-gradient(@direction, @gradientColor1, @gradientColor2, @gradientColor3);
+ background-image: linear-gradient(@direction, @gradientColor1, @gradientColor2, @gradientColor3);
+}
+
+.linearGradientNative(@parameters) {
+ background-image: -webkit-linear-gradient(@parameters);
+ background-image: -moz-linear-gradient(@parameters);
+ background-image: -o-linear-gradient(@parameters);
+ background-image: -ms-linear-gradient(@parameters);
+ background-image: linear-gradient(@parameters);
+}
+
+.transition(@property, @duration, @type: linear) {
+ -webkit-transition: @arguments;
+ -moz-transition: @arguments;
+ -ms-transition: @arguments;
+ -o-transition: @arguments;
+ transition: @arguments;
+}
+
+.boxShadow(@topOffset, @leftOffset, @color, @blurriness: 5px, @shadowHeight: 0) {
+ -webkit-box-shadow: @topOffset @leftOffset @blurriness @shadowHeight @color;
+ -moz-box-shadow: @topOffset @leftOffset @blurriness @shadowHeight @color;
+ -ms-box-shadow: @topOffset @leftOffset @blurriness @shadowHeight @color;
+ -o-box-shadow: @topOffset @leftOffset @blurriness @shadowHeight @color;
+ box-shadow: @topOffset @leftOffset @blurriness @shadowHeight @color;
+}
+
+.boxShadowInset(@topOffset, @leftOffset, @color, @blurriness: 5px, @shadowHeight: 0) {
+ -webkit-box-shadow: inset @topOffset @leftOffset @blurriness @shadowHeight @color;
+ -moz-box-shadow: inset @topOffset @leftOffset @blurriness @shadowHeight @color;
+ -ms-box-shadow: inset @topOffset @leftOffset @blurriness @shadowHeight @color;
+ -o-box-shadow: inset @topOffset @leftOffset @blurriness @shadowHeight @color;
+ box-shadow: inset @topOffset @leftOffset @blurriness @shadowHeight @color;
+}
+
+.boxShadowNative(@parameters) {
+ -webkit-box-shadow: @parameters;
+ -moz-box-shadow: @parameters;
+ -ms-box-shadow: @parameters;
+ -o-box-shadow: @parameters;
+ box-shadow: @parameters;
+}
+
+.borderRadius(@borderRadius: @wcfContainerBorderRadius) {
+ .borderRadius(@borderRadius, @borderRadius, @borderRadius, @borderRadius);
+}
+
+.borderRadius(@borderTopRadius, @borderBottomRadius) {
+ .borderRadius(@borderTopRadius, @borderTopRadius, @borderBottomRadius, @borderBottomRadius);
+}
+
+.borderRadius(@borderTopLeftRadius, @borderTopRightRadius, @borderBottomRightRadius, @borderBottomLeftRadius) {
+ border-radius: @arguments;
+}
\ No newline at end of file
--- /dev/null
+.navigation {
+ background-color: @wcfNavigationBackgroundColor;
+ padding: 0 7px;
+
+ a {
+ color: @wcfLinkColor;
+
+ &:hover {
+ color: @wcfLinkHoverColor;
+ }
+ }
+
+ ul {
+ display: inline-block;
+
+
+ &.navigationIcons {
+ float: right;
+
+ li {
+ float: right;
+ padding: 0 3px;
+
+ &.separator {
+ border-right: 1px dotted darken(@wcfNavigationBackgroundColor, 20%);
+ }
+
+ > * {
+ padding: 3px;
+ display: inline-block;
+ color: @wcfLinkColor;
+ }
+
+ a:hover {
+ background-color: @wcfHighlightBackgroundColor;
+ }
+ }
+ }
+
+ &:not(.navigationIcons) {
+
+ li {
+ display: inline-block;
+ margin-top: 5px;
+
+ a {
+ padding: 2px 4px;
+
+ .textShadow(@wcfNavigationBackgroundColor);
+
+ &:hover {
+ text-decoration: none;
+ }
+ }
+ }
+ }
+ }
+}
+
+.navigationHeader {
+ border-bottom: @wcfContainerBorderWidth @wcfContainerBorderStyle darken(@wcfHighlightBackgroundColor, 8%);
+ border-radius: @wcfContainerBorderRadius @wcfContainerBorderRadius 0 0;
+}
+
+.navigationFooter {
+ border-top: @wcfContainerBorderWidth @wcfContainerBorderStyle darken(@wcfHighlightBackgroundColor, 8%);
+ border-radius: 0 0 @wcfContainerBorderRadius @wcfContainerBorderRadius;
+}
+
+
+.mainMenu {
+ box-sizing: border-box;
+ display: block;
+ margin: 0 9px;
+ position: relative;
+ text-align: left;
+
+ &:after {
+ clear: both;
+ content: '';
+ display: block;
+ }
+
+ > ul {
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ background-color: rgba(0, 0, 0, .4);
+ display: inline-block;
+ position: relative;
+
+ > li {
+ display: inline-block;
+ font-size: 120%;
+
+ &.active {
+ margin: -5px 0 0;
+
+ &:first-child {
+ margin-right: -5px;
+ }
+
+ &:last-child {
+ margin-left: -5px;
+ }
+
+ &:only-child {
+ margin: -5px 0 0;
+ }
+
+ a {
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ color: #369;
+ font-size: 110%;
+ font-weight: bold;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+ z-index: 10;
+
+ .linearGradient(@wcfNavigationBackgroundColor, rgba(255, 255, 255, 1), @wcfNavigationBackgroundColor);
+
+ &:after {
+ border-bottom-left-radius: 6px;
+ border-width: 0 0 1px 1px;
+ bottom: 0;
+ content: "";
+ height: 7px;
+ position: absolute;
+ right: -7px;
+ width: 7px;
+
+ .boxShadow(-2px, 2px, lighten(@wcfHighlightBackgroundColor, 3%), 0);
+ }
+
+ &:before {
+ border-bottom-right-radius: 6px;
+ border-width: 0 1px 1px 0;
+ bottom: 0;
+ content: "";
+ height: 7px;
+ left: -7px;
+ position: absolute;
+ width: 7px;
+
+ .boxShadow(2px, 2px, lighten(@wcfHighlightBackgroundColor, 3%), 0);
+ }
+ }
+ }
+
+ &:not(.active) {
+ margin-top: -3px;
+
+ &:hover {
+ > a {
+ color: rgba(255, 255, 255, 1);
+ }
+ }
+ }
+
+ > a {
+ color: #69c;
+ cursor: pointer;
+ display: inline-block;
+ font-weight: normal;
+ padding: 8px 20px;
+ position: relative;
+ text-decoration: none;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
+ white-space: nowrap;
+
+ .transition(border, .3s, ease);
+ .transition(background-color, .3s, ease);
+ .transition(background-image, .3s, ease);
+ .transition(color, .3s, ease);
+ }
+ }
+ }
+}
+
+.contentNavigation {
+ display: table;
+ margin-top: @wcfGapMedium;
+ width: 100%;
+ nav ul {
+ float: left;
+
+ &:not(.pageNavigation) {
+ float: right;
+ text-align: right;
+ }
+
+ li {
+ display: inline;
+ }
+ }
+}
+
+.sidebarContent {
+ a:hover {
+ text-decoration: none;
+ }
+
+ > div {
+ overflow: hidden;
+ position: relative;
+
+ &.collapsibleMenus > h1 {
+ background-image: url(../icon/arrowRight.svg);
+ background-position: 15px center;
+ background-repeat: no-repeat;
+ background-size: 16px;
+
+ &.active {
+ background-image: url(../icon/arrowDown.svg);
+ }
+ }
+
+ &:not(.collapsibleMenus) > h1 {
+ padding-right: @wcfGapLarge;
+ }
+
+ > h1 {
+ color: @wcfLinkColor;
+ cursor: pointer;
+ font-size: 130%;
+ font-weight: bold;
+ padding: @wcfGapSmall @wcfGapMedium @wcfGapSmall (@wcfGapLarge + 16px + @wcfGapTiny); // icon size + gap
+
+ .textShadow(@wcfHighlightBackgroundColor);
+ }
+
+ ul > li {
+ font-size: 110%;
+
+ &.active {
+ background-color: @wcfContentBackgroundColor;
+ margin-right: -1px;
+ overflow: hidden;
+
+ .boxShadow(0, 0, rgba(0, 0, 0, .1));
+
+ a {
+ font-weight: bold;
+ }
+ }
+
+ > a,
+ > div {
+ color: @wcfLinkColor;
+ display: block;
+ padding: @wcfGapTiny @wcfGapMedium @wcfGapSmall (@wcfGapLarge + 16px + @wcfGapTiny);
+
+ .textShadow(@wcfHighlightBackgroundColor);
+ }
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+/* ############## ToDo: Page Navigation ############## */
+
+/**
+ * This defines the shape of the Page-Navigation widget
+ * Colors & effects are being defined by the
+ * "Global Button Color & Effect Library"
+ */
+
+/* Globals */
+
+:not(.statusDisplay) > .pageNavigation {
+ float: left;
+ margin: 5px 0 3px;
+}
+
+.contentNavigation .pageNavigation ul li {
+ margin: 2px;
+}
+
+/* -- -- -- Buttons (Level 1 & 2) -- -- -- */
+
+.pageNavigation {
+ ul {
+ li {
+ border-radius: 3px;
+ float: left;
+ font-weight: bold;
+ margin: 1px;
+ min-width: 19px;
+ padding: 0;
+ text-align: center;
+
+ &:not(.active):not(.disabled) {
+ cursor: pointer;
+ }
+
+ &.disabled {
+ background-image: none !important;
+ border: 1px solid rgba(0, 0, 0, .1) !important;
+ cursor: not-allowed;
+ }
+
+ &.skip {
+ padding: 2px 0 1px;
+ }
+
+ &:not(.disabled):hover a {
+ color: @wcfButtonHoverColor;
+ }
+
+ &:not(.skip) a {
+ padding: 3px 1px;
+ }
+
+ &.active, &.active:hover {
+ border: 1px solid darken(@wcfButtonColor, 5%);
+ color: lighten(@wcfButtonBackgroundColor, 5%);
+ padding: 3px 0;
+
+ .linearGradient(@wcfButtonColor, darken(@wcfButtonColor, 10%), @wcfButtonColor 3px);
+ .textShadow(#000);
+ }
+
+ img {
+ height: 16px;
+ margin: 0;
+ width: 16px;
+ }
+
+ a {
+ color: @wcfButtonColor;
+ display: inline-block;
+ text-decoration: none;
+
+ .textShadow(@wcfButtonBackgroundColor);
+ }
+ }
+ }
+}
+
+
+/* Special -> Status Display */
+
+.statusDisplay .pageNavigation {
+ font-size: 80%;
+
+ ul {
+ li {
+ min-width: 13px;
+
+ &:not(.skip) a {
+ padding: 1px;
+ }
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+/**
+ * Parts taken from
+ * http://meyerweb.com/eric/tools/css/reset/
+ * v2.0 | 20110126
+ * License: none (public domain)
+ * modifyed to meet the needs of WoltLab
+ */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+}
+
+h1, h2, h3, h4, h5, h6 {
+ font-weight: normal;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+
+ol, ul {
+ list-style: none;
+}
+
+blockquote, q {
+ quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+ content: '';
+ content: none;
+}
\ No newline at end of file
--- /dev/null
+/* ############## Tab Menu ############## */
+
+/* Globals */
+
+.tabMenu {
+ display: block;
+ margin-top: @wcfGapMedium;
+ padding: 0 10px;
+ position: relative;
+ text-align: center;
+
+ ul {
+ background-color: @wcfContainerAccentBackgroundColor;
+ border-color: @wcfContainerBorderColor;
+ border-style: solid;
+ border-width: 1px 1px 0 1px;
+ border-top-left-radius: @wcfContainerBorderRadius;
+ border-top-right-radius: @wcfContainerBorderRadius;
+ display: inline-block;
+ padding: 0 5px 3px 5px;
+ position: relative;
+ white-space: nowrap;
+
+ .textShadow(@wcfContainerBackgroundColor);
+
+ li {
+ display: inline-block;
+ white-space: nowrap;
+
+ &.ui-state-active {
+ margin-right: -7px;
+ margin-left: -7px;
+
+ a {
+ background-color: @wcfContainerBackgroundColor;
+ border-color: @wcfContainerBorderColor @wcfContainerBorderColor @wcfContainerBackgroundColor; //#ccc #ccc #fff;
+ border-style: solid;
+ border-top-right-radius: 6px;
+ border-top-left-radius: 6px;
+ border-width: 1px;
+ color: @wcfLinkColor;
+ font-weight: bold;
+ font-size: 130%;
+ margin-top: -10px;
+ padding: 10px 15px 5px;
+ z-index: 30;
+
+ &:before {
+ border: 1px solid @wcfContainerBorderColor;
+ border-bottom-right-radius: 6px;
+ border-width: 0 1px 1px 0;
+ bottom: -1px;
+ content: " ";
+ height: 5px;
+ left: -6px;
+ position: absolute;
+ width: 5px;
+
+ .boxShadow(2px, 1px, @wcfContainerBackgroundColor, 0);
+ }
+
+ &:after {
+ border: 1px solid @wcfContainerBorderColor;
+ border-bottom-left-radius: 6px;
+ border-width: 0 0 1px 1px;
+ bottom: -1px;
+ content: " ";
+ height: 5px;
+ position: absolute;
+ right: -6px;
+ width: 5px;
+
+ .boxShadow(-2px, 1px, @wcfContainerBackgroundColor, 0);
+ }
+ }
+ }
+
+ a {
+ bottom: -3px;
+ color: @wcfDimmedColor;
+ display: inline-block;
+ font-size: 110%;
+ padding: 1px 10px 3px;
+ position: relative;
+ text-decoration: none;
+ z-index: 10;
+ }
+
+ &:not(.ui-state-active) a:hover {
+ color: @wcfLinkColor;
+ }
+ }
+ }
+}
+
+.tabMenu li.ui-state-active a,
+.tabMenu li.ui-state-disabled a,
+.tabMenu li.ui-state-processing a {
+ cursor: default;
+}
+
+.tabMenuContent {
+ display: block;
+ margin-top: -1px;
+ position: relative;
+ z-index: 20; /* Prevents border overlay during transition */
+}
+
+/* randum stuff */
+fieldset ~ .tabMenuContainer .tabMenu {
+ margin-top: 30px;
+}
+
+/* ToDo: 2x hidden? */
+.ui-tabs .ui-tabs-hide {
+ display: none !important;
+}
+
+.ui-helper-hidden {
+ display: none;
+}
+
+.ui-helper-hidden-accessible {
+ position: absolute !important;
+ clip: rect(1px 1px 1px 1px);
+ clip: rect(1px,1px,1px,1px);
+}
\ No newline at end of file
--- /dev/null
+.tabularBox {
+ background-image: url(../../images/header.png);
+
+ background-color: saturate(lighten(@wcfPageBackgroundColor, 20%), 20%);
+ border: @wcfContainerBorderWidth @wcfContainerBorderStyle @wcfContainerBorderColor;
+
+ .borderRadius();
+}
+
+.tabularBoxTitle > hgroup {
+ color: @wcfPageLinkHoverColor;
+ padding: @wcfGapSmall;
+
+ h1 {
+ font-size: 120%;
+ font-weight: bold;
+
+ .textShadow(saturate(lighten(@wcfPageBackgroundColor, 20%), 20%));
+
+ a {
+ color: @wcfPageLinkHoverColor;
+
+ &:hover {
+ color: @wcfPageLinkHoverColor;
+ text-decoration: none;
+ }
+ }
+ }
+}
+
+.table {
+ border-spacing: 0;
+ width: 100% !important;
+
+ /* cells */
+ th,
+ td {
+ padding: @wcfGapSmall;
+ text-align: left;
+ vertical-align: middle;
+ }
+
+ /* headline */
+ th {
+ border-right: @wcfContainerBorderWidth @wcfContainerBorderStyle rgba(0, 0, 0, .2);
+ font-size: 85%;
+ font-weight: bold;
+ white-space: nowrap;
+
+ .linearGradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
+
+ a {
+ color: @wcfPageLinkColor;
+ display: block;
+ margin: -@wcfGapSmall;
+
+ .textShadow(saturate(lighten(@wcfPageBackgroundColor, 20%), 20%));
+
+ &:hover {
+ text-decoration: none;
+ }
+
+ img {
+ margin: -5px 0;
+ }
+ }
+
+ &:hover a,
+ &.active a {
+ background-color: rgba(0, 0, 0, .1);
+ color: @wcfPageLinkHoverColor;
+ }
+
+ &.active a {
+ .boxShadowInset(0, 10px, rgba(0, 0, 0, .1), 10px, -10px);
+ }
+
+ > * {
+ padding: 7px;
+ }
+ }
+
+ /* content */
+ td {
+ background-color: @wcfContainerBackgroundColor;
+
+ .transition(background, .1s);
+
+ h1 {
+ font-size: 100%;
+ }
+
+ &.columnMark,
+ &.columnStatus {
+ text-align: center;
+ width: 1% !important;
+ white-space: nowrap;
+ }
+
+ &.columnDigits,
+ &.columnID {
+ text-align: right;
+ width: 1% !important;
+ white-space: nowrap;
+ }
+
+ &.columnIcon {
+ text-align: left;
+ width: 1% !important;
+ white-space: nowrap;
+ }
+
+ &.columnTitle {
+ font-weight: bold;
+ text-align: left;
+ }
+
+ &.columnText {
+ font-weight: normal;
+ text-align: left;
+ max-width: 20%;
+ }
+
+ &.columnDate,
+ &.columnRegistrationDate {
+ font-size: 85%;
+ text-align: right;
+ width: 1% !important;
+ white-space: nowrap;
+ }
+
+ &.columnURL {
+ font-size: 85%;
+ text-align: left;
+ }
+ }
+
+ /* striped */
+ tbody {
+ background-color: @wcfContainerBackgroundColor;
+
+ tr:nth-child(odd) td {
+ background-color: @wcfContainerAccentBackgroundColor;
+ }
+ }
+
+ /* hover */
+ tbody {
+ tr {
+ &:not(:last-child) {
+ border-bottom: @wcfContainerBorderWidth @wcfContainerBorderStyle rgba(255, 255, 255, .3);
+ }
+
+ &:hover {
+ td {
+ background-color: @wcfHighlightBackgroundColor;
+ }
+ }
+
+ td:not(:last-child) {
+ border-right: @wcfContainerBorderWidth @wcfContainerBorderStyle rgba(255, 255, 255, .3);
+ }
+ }
+ }
+}
+
+.tabularBox .table {
+ tbody tr:last-child td {
+ &:first-child {
+ .borderRadius(0, 0, 0, 4px);
+ }
+
+ &:last-child {
+ .borderRadius(0, 0, 4px, 0);
+ }
+ }
+}
+
+.statusDisplay {
+ padding: 1px 0;
+ float: right;
+
+ .statusIcons li {
+ display: inline-block;
+ }
+}
\ No newline at end of file
--- /dev/null
+/* ############## Balloon Tooltips ############## */
+
+/* Globals */
+
+.jsTooltip { /* Do not change this style */
+ cursor: pointer;
+}
+
+.balloonTooltip {
+ font-size: .85em;
+ color: @wcfTooltipColor;
+ border: 1px solid @wcfTooltipBorderColor;
+ border-radius: @wcfContainerBorderRadius;
+ background-color: @wcfTooltipBackgroundColor;
+ padding: 5px 10px 7px;
+ position: absolute;
+ max-width: 300px;
+ z-index: 800;
+
+ .boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
+
+ .pointer {
+ border-width: 0 7px 7px;
+ border-style: solid;
+ border-color: @wcfTooltipBorderColor transparent;
+ display: inline-block !important;
+ width: 0;
+ position: absolute;
+ top: -8px !important;
+ left: 50%;
+
+ span {
+ border-width: 0 5px 5px;
+ border-style: solid;
+ border-color: @wcfTooltipBackgroundColor transparent;
+ display: inline-block;
+ width: 0;
+ position: absolute;
+ top: 2px;
+ left: -5px;
+ }
+ }
+}
\ No newline at end of file
-/**
- * User Styles
- *
- * @author Harald Szekely
- * @copyright 2011-2012 WoltLab GmbH
- */
-
-/* ############## User ############## */
-
-/* User Avatar */
-
-.wcf-userAvatar {
- /* none */
-}
-
-/* User Avatar Boxed */
-
-.wcf-userAvatarFramed {
- /* none */
-}
-
-.wcf-userAvatarFramed img {
- border: 1px @borderStyle @borderColor11;
- background-color: @backColor1;
- padding: 1px;
-}
-
-/* User Name */
-
-.wcf-username {
- /* none */
-}
-
-
-
-/* ############## ToDo: Sidebar ############## */
-
-/* I've changed the layout, so the classes may not match any more! */
-
-.wcf-sidebar .wcf-userAvatar {
- text-align: center;
- padding: 5px 25px;
-}
-
-.wcf-sidebar .userFollowing ul,
-.wcf-sidebar .userFollowers ul {
- margin: 0 25px;
- white-space: normal;
-}
-
-.wcf-sidebar .userFollowing ul:after,
-.wcf-sidebar .userFollowers ul:after {
- content: "";
- height: 0;
- display: block;
- clear: both;
-}
-
-.wcf-sidebar .userFollowing li,
-.wcf-sidebar .userFollowers li {
- float: left;
- margin-right: 3px;
-}
-
-.wcf-sidebar .userFollowing .wcf-userAvatarFramed,
-.wcf-sidebar .userFollowers .wcf-userAvatarFramed {
- display: inline-block;
- padding: 3px 0 0;
-}
-
-.wcf-sidebar .userFollowing .wcf-badgeButton,
-.wcf-sidebar .userFollowers .wcf-badgeButton {
- margin: 15px 15px 0;
- float: right;
-}
-
-
-
-/* ############## User Notifications ############## */
-
-/* ToDo:
-
-Be careful with the following classes!
- - [.scrollableContainer] Don't touch!
- - [.scrollableItems] Keep the inflated width, you may lower its number but it must be incredible bloated
- - [.scrollableItems > div] Must be a fixed-width float, otherwise it would break the "scrollable"-class from jQueryTools.
- Do NOT use css-tables or [display: inline-block] as it won't work with the whole magic
-
-*/
-
-/* ToDo: User Notification Container */
-
-.userNotificationContainer {
- width: 240px;
- z-index: 500; /* adjust to any value you like, it *MUST* be higher than 'header.pageHeader nav.topMenu' */
- overflow: hidden;
-}
-
-/* ToDo: Scrollable Container (jQueryTools - do not modify the class-name!) */
-
-.scrollableContainer {
- position: relative;
- width: 250px;
- overflow: hidden;
-}
-
-.scrollableContainer .scrollableItems {
- position: relative;
- width: 20000em;
-}
-
-.scrollableContainer .scrollableItems > div {
- border-right: 1px solid rgba(192, 192, 192, 1);
- float: left;
- width: 250px;
-}
-
-.scrollableContainer {
- font-size: 90%;
-}
-
-.scrollableContainer > div:first-child ul {
- margin: 0;
- padding: 0;
-}
-
-.scrollableContainer > div:first-child li {
- border-top: 1px solid rgba(192, 192, 192, 1);
- cursor: pointer;
- padding: 7px;
-}
-
-.scrollableContainer > div:first-child li:first-child {
- border-top-width: 0;
-}
-
-.scrollableContainer > div:first-child p {
- padding: 0 1px;
-}
-
-/* ToDo: User Notification Details */
-
-.userNotificationDetails {
- padding: 7px;
- width: 236px;
-}
-
-.userNotificationDetails header {
- margin-bottom: 7px;
- display: table;
- width: 100%;
-}
-
-.userNotificationDetails .row {
- display: table-row;
-}
-
-.userNotificationDetails .row div {
- text-align: center;
- display: table-cell;
- vertical-align: middle;
-}
-
-.userNotificationDetails .row div:first-child {
- width: 64px;
-}
-
-.userNotificationDetails .row div:last-child {
- padding-left: 7px;
-}
-
-.userNotificationDetails .avatar img {
- height: 64px;
- width: 64px;
-}
-
-.userNotificationDetails h1 {
- font-size: 110%;
-}
-
-.userNotificationDetails section {
- border-top: 1px solid rgba(192, 192, 192, 1);
- padding-top: 7px;
-}
-
-.userNotificationDetails nav {
- text-align: center;
- border-top: 1px solid rgba(192, 192, 192, 1);
- margin-top: 7px;
- padding-top: 7px;
-}
-
-.userNotificationDetails ul {
- list-style-type: none;
- display: inline-block;
-}
-
-.userNotificationDetails li {
- cursor: pointer;
- border: 1px solid rgba(192, 192, 192, 1) !important;
- padding: 3px;
- display: inline-block;
-}
-
-/* User Notification Details Loading */
-
-#userNotificationDetailsLoading {
- background-color: rgba(255, 255, 255, .5);
- background-image: url('{../../icon/spinner1.svg');
- background-position: center center;
- background-size: 24px;
- background-repeat: no-repeat;
- position: absolute;
-}
-
-
-
-/* ############## Profile Comments ############## */
-
-/* Globals */
-
-.wcf-commentList .wcf-containerContent {
- position: relative;
-}
-
-.wcf-commentList .wcf-containerContent small {
- font-size: 85%;
- color: @fontColor11;
- margin-top: 3px;
-}
-
-/* Comment List */
-
-.wcf-commentList > .wcf-container {
- padding: 7px;
-}
-
-/* Comment Add */
-
-.wcf-commentAdd .wcf-containerIcon {
- margin-left: 2em;
-}
-
-.wcf-commentResponseAdd {
- border-top: @borderWidthSeparator @borderStyleSeparator @borderColor12;
- margin-top: 7px;
- padding: 7px;
-}
-
-.wcf-commentResponseAdd .wcf-containerIcon {
- margin-left: 10px;
-}
-
-/* Comment Response List */
-
-.wcf-commentResponseList {
- margin-top: 7px;
-}
-
-.wcf-commentResponseAdd ~ .wcf-commentResponseList {
- margin-top: 0;
-}
-
-/* Comment Options */
-
-.wcf-commentContent > div > .wcf-commentOptions,
-.wcf-commentResponseList > li .wcf-commentOptions {
- display: block;
- position: absolute;
- top: 2px;
- right: 2px;
-}
-
-.wcf-commentContent > div > .wcf-commentOptions > li,
-.wcf-commentResponseList > li .wcf-commentOptions > li {
- float: left;
- opacity: 0;
-
- .mxTransition1(opacity);
-}
-
-.wcf-commentContent > div:hover > .wcf-commentOptions > li,
-.wcf-commentResponseList > li:hover .wcf-commentOptions > li {
- opacity: 1;
-}
-
-.wcf-commentContent > div > .wcf-commentOptions > li a,
-.wcf-commentResponseList > li .wcf-commentOptions li a {
- cursor: pointer;
- padding: 3px;
- display: inline-block;
-}
-
-/* Toggle Comments Links */
-
-.wcf-commentResponsePrevious,
-.wcf-commentResponseRecent {
- text-align: center;
- border-top: @borderWidthSeparator @borderStyleSeparator @borderColor12;
- margin-left: auto;
- margin-right: auto;
- padding-top: 7px;
- width: 100%;
-}
-
-.wcf-commentResponsePrevious a,
-.wcf-commentResponseRecent a {
- white-space: nowrap;
- cursor: pointer;
- border-radius: 3px;
- padding: 0 13px;
- display: inline-block;
-}
-
-
-
-/* ############## Members List ############## */
-
-/* Globals */
-
-.wcf-userList {
- /* none */
-}
-
-.wcf-userList > li {
-
-}
-
-.wcf-userList > li:not(:only-child) {
- margin-left: -1px !important;
-}
-
-/* Long/Short */
-
-@media screen and (max-width: 1023px) {
-
- .wcf-userList > li {
- padding: 0 !important;
- width: 100%;
- }
-
- .wcf-userList > li > div {
- border-width: 0 !important;
- height: auto !important;
- box-shadow: none;
- }
-
-}
-
-@media screen and (min-width: 1024px) {
-
- .wcf-userList > li {
- border-width: 0;
- background-color: transparent;
- float: left;
- width: 50%;
- min-width: 300px;
- }
-
-}
-
-@media screen and (min-width: 1600px) {
-
- .wcf-userList > li {
- border-width: 0;
- background-color: transparent;
- float: left;
- width: 33.3%;
- }
-
-}
-
-@media screen and (min-width: 2000px) {
-
- .wcf-userList > li {
- border-width: 0;
- background-color: transparent;
- float: left;
- width: 20%;
- }
-
-}
-
-.wcf-userList > li > .wcf-container {
- border-width: @borderWidthSeparator;
- border-style: @borderStyleSeparator;
- border-color: @borderColor12;
- height: 80px;
- padding: 7px;
-}
-
-/* ToDo */
-.wcf-userList > li > .wcf-container .wcf-userJoinDate {
- font-size: 85%;
- color: @fontColor11;
- display: block;
-}
-
-/* -- -- -- -- -- EOF -- -- -- -- -- */
--- /dev/null
+.userPanel {
+ background-color: rgba(0, 0, 0, .5);
+ border-bottom: 1px solid rgba(0, 0, 0, .1);
+ height: 30px;
+ left: 0;
+ padding: @wcfGapSmall 0;
+ position: fixed;
+ top: 0;
+ right: 0;
+ z-index: 200;
+
+ .boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
+ .transition(background-color, .3s);
+
+ &:hover {
+ background-color: rgba(0, 0, 0, .9);
+ }
+
+ ul {
+ display: block;
+ float: left;
+ margin-top: -3px;
+
+ &.userPanelItems > li:not(:first-child) {
+ margin-left: @wcfGapSmall;
+ }
+
+ > li {
+ display: inline-block;
+
+ > a,
+ > span,
+ > span > a {
+ color: lighten(@wcfPageLinkColor, 10%);
+ cursor: pointer;
+ display: block;
+ padding: 10px 0;
+
+ .transition(color, .1s);
+ .textShadow(@wcfPageBackgroundColor);
+
+ &:hover {
+ color: @wcfPageLinkHoverColor;
+ text-decoration: none;
+ }
+ }
+ }
+ }
+
+ .searchBar {
+ float: right;
+
+ input[type="search"] {
+ border: @wcfContainerBorderWidth @wcfContainerBorderStyle @wcfContainerBorderColor;
+ border-radius: 30px;
+ padding: @wcfGapTiny @wcfGapSmall;
+ }
+ }
+
+ .framed img {
+ padding: 0px;
+ margin-top: -3px;
+ margin-bottom: -3px;
+ }
+}
\ No newline at end of file
--- /dev/null
+/* backgrounds */
+@wcfPageBackgroundColor: rgba(41, 55, 74, 1);
+@wcfHighlightBackgroundColor: rgba(216, 231, 245, 1);
+@wcfHoverBackgroundColor: rgba(255, 229, 200, 1);
+@wcfContentBackgroundColor: rgba(255, 255, 255, 1);
+@wcfContainerBackgroundColor: rgba(252, 253, 254, 1);
+@wcfNavigationBackgroundColor: lighten(@wcfHighlightBackgroundColor, 3%);
+
+/* text colors */
+@wcfColor: rgba(102, 102, 102, 1);
+@wcfLinkColor: rgba(51, 102, 153, 1);
+@wcfLinkHoverColor: darken(@wcfLinkColor, 10%);
+@wcfPageColor: @wcfColor;
+@wcfPageLinkColor: lighten(@wcfLinkColor, 10%);
+@wcfPageLinkHoverColor: #fff;
+@wcfDimmedColor: lighten(@wcfColor, 15%);
+@wcfLabelColor: @wcfLinkColor;
+
+/* font */
+@wcfBaseFontSize: 13px;
+@wcfBaseFontFamily: "Trebuchet MS", Arial, sans-serif;
+@wcfBaseLineHeight: 15px;
+
+/* container */
+@wcfContainerAccentBackgroundColor: darken(@wcfContainerBackgroundColor, 3%);
+@wcfContainerBorderColor: rgba(187, 204, 221, 1); //#CCC;
+@wcfContainerBorderRadius: 5px;
+@wcfContainerBorderWidth: 1px;
+@wcfContainerBorderStyle: solid;
+
+/* dropdown */
+@wcfDropdownBackgroundColor: @wcfContentBackgroundColor;
+@wcfDropdownColor: @wcfColor;
+@wcfDropdownHoverBackgroundColor: @wcfHighlightBackgroundColor;
+
+/* gap */
+@wcfGapTiny: 4px;
+@wcfGapSmall: 7px;
+@wcfGapMedium: 14px;
+@wcfGapLarge: 21px;
+
+/* buttons */
+// default
+@wcfButtonBackgroundColor: lighten(#CCC, 15%);
+@wcfButtonBorderColor: #CCC;
+@wcfButtonColor: darken(#CCC, 20%);
+
+// hover
+@wcfButtonHoverBackgroundColor: lighten(@wcfHoverBackgroundColor, 5%);
+@wcfButtonHoverBorderColor: darken(@wcfHoverBackgroundColor, 10%);
+@wcfButtonHoverColor: darken(@wcfButtonColor, 10%);
+
+// primary
+@wcfButtonPrimaryBackgroundColor: lighten(@wcfHighlightBackgroundColor, 5%);
+@wcfButtonPrimaryBorderColor: darken(@wcfHighlightBackgroundColor, 10%);
+@wcfButtonPrimaryColor: darken(@wcfHighlightBackgroundColor, 30%);
+
+/* form elements */
+@wcfInputBackgroundColor: @wcfContentBackgroundColor;
+@wcfInputColor: @wcfColor;
+@wcfInputBorderColor: @wcfContainerBorderColor;
+@wcfInputHoverBackgroundColor: lighten(@wcfHoverBackgroundColor, 8%);
+@wcfInputHoverBorderColor: darken(@wcfHoverBackgroundColor, 25%);
+
+/* form states and alerts */
+@warningColor: #c09853;
+@warningBackgroundColor: #fcf8e3;
+@warningBorderColor: darken(spin(@warningBackgroundColor, -10), 3%);
+
+@errorColor: #b94a48;
+@errorBackgroundColor: #f2dede;
+@errorBorderColor: darken(spin(@errorBackgroundColor, -10), 3%);
+
+@successColor: #468847;
+@successBackgroundColor: #dff0d8;
+@successBorderColor: darken(spin(@successBackgroundColor, -10), 5%);
+
+@infoColor: #3a87ad;
+@infoBackgroundColor: #d9edf7;
+@infoBorderColor: darken(spin(@infoBackgroundColor, -10), 7%);
+
+/* layouts */
+@wcfLayoutFluidGap: 21px;
+@wcfLayoutFixedWidth: 1000px;
+
+/* tooltip */
+@wcfTooltipBackgroundColor: rgba(0, 0, 0, .8);
+@wcfTooltipBorderColor: transparent;
+@wcfTooltipColor: white;
\ No newline at end of file
--- /dev/null
+.wbbStats {
+ margin-top: 2px;
+
+ /* TODO: This should be mentioned in the documentation but not included in stylesheets */
+ //&.wbbStatsAside {
+ left: 50%;
+ position: absolute;
+ top: @wcfGapSmall;
+ width: 15%;
+
+ dl {
+ display: block;
+
+ dt {
+ float: right;
+ width: 40%;
+ padding-bottom: 4px;
+
+ &:after {
+ content: "";
+ }
+ }
+
+ dd {
+ float: left;
+ text-align: right;
+ width: 58%;
+ padding-bottom: 4px;
+ }
+ }
+ //}
+}
+
+.wbbLastPost {
+ left: 65%;
+ position: absolute;
+ top: @wcfGapSmall;
+ width: 35%; /* = 100% - left */
+
+ > div {
+ background-color: @wcfContentBackgroundColor;
+ padding: 7px;
+ border: 1px solid @wcfContainerBorderColor;
+ border-radius: @wcfContainerBorderRadius;
+ margin-right: 7px;
+ }
+
+ hgroup {
+ h1 a {
+ display: inline-block;
+ overflow: hidden;
+ padding-bottom: 2px; /* prevents letters from being cut */
+ text-overflow: ellipsis;
+ width: 98%;
+ white-space: nowrap;
+ }
+
+ h2 {
+ font-size: 85%;
+
+ time {
+ color: @wcfDimmedColor;
+ }
+ }
+ }
+}
+
+.wbbSubBoards {
+ margin-top: @wcfGapSmall;
+
+ li {
+ display: inline-block;
+ }
+}
+
+.wbbBoardDescription {
+ font-size: 90%;
+ padding-top: @wcfGapTiny;
+}
+
+.wbbBoardContainer {
+ position: relative;
+}
+
+.wbbBoardNodeTop {
+ margin-top: @wcfGapMedium;
+}
+
+.wbbBoard {
+ min-height: 42px;
+ padding: @wcfGapSmall;
+ padding-right: 51%;
+
+ .transition(background, .1s);
+
+ &~ ul > .wbbBoardContainer > .wbbBoard {
+ padding-left: 43px;
+
+ &~ ul > .wbbBoardContainer > .wbbBoard {
+ padding-left: 79px;
+ }
+ }
+
+ &:hover {
+ background-color: @wcfHighlightBackgroundColor;
+ }
+}
+
+.wbbBoardNode1 {
+ background-color: @wcfContainerAccentBackgroundColor;
+}
+
+.wbbBoardNode2 {
+ background-color: @wcfContentBackgroundColor;
+}
+
+.wbbBoardList > li.wbbBoardNodeTop:not(.wbbBoardNodeTopEmpty) > div {
+ .borderRadius(@wcfContainerBorderRadius, 0);
+}
+
+.wbbBoardList > li > ul > li:last-child div.wbbBoard:last-child {
+ .borderRadius(0, @wcfContainerBorderRadius);
+}
+
+.wbbBoardNodeTopEmpty div.wbbBoard {
+ .borderRadius(@wcfContainerBorderRadius);
+}
+
+.wbbThreadListLastPost h2 {
+ color: @wcfDimmedColor;
+ font-size: 85%;
+ margin-top: 2px;
+}
+
+.wbbBoardList .new > div > hgroup > h1 {
+ font-weight: bold;
+}
+
+.wbbBoard > div > hgroup > h1 {
+ font-size: 120%;
+}
+
+/* ############## Thread List ############## */
+
+/* Column Avatar */
+.wbbThreadList .columnAvatar div {
+ position: relative;
+ width: 40px;
+ height: 38px;
+}
+
+.wbbThreadList .columnAvatar div > p > img {
+ opacity: .5;
+
+ .transition(opacity, .2s);
+}
+
+.wbbThreadList tr.new .columnAvatar div > p > img,
+.wbbThreadList tr:hover .columnAvatar div > p > img {
+ opacity: 1;
+}
+
+.wbbThreadList .columnAvatar .myAvatar {
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ bottom: -2px;
+ left: 24px;
+ opacity: 1;
+
+ .boxShadow(0, 0, rgba(0, 0, 0, .3), 3px);
+}
+
+
+.wbbThreadStarter {
+ position: relative;
+
+
+ > .message {
+ &:after,
+ &:before {
+ content: "";
+ display: block;
+ height: 128px;
+ left: 0;
+ position: absolute;
+ top: 0;
+ width: 128px;
+ }
+
+ &:after {
+ background-image: url(../../icon/threadStarter1.svg);
+ background-position: 4px 4px;
+ background-repeat: no-repeat;
+ background-size: 16px;
+ height: 20px;
+ width: 20px;
+ }
+
+ &:before {
+ background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, .85)), color-stop(.4, rgba(255, 255, 255, 0)));
+
+ .borderRadius(@wcfContainerBorderRadius, 0, 0, 0);
+ }
+ }
+}
+
+.newMessageBadge {
+
+ display: inline-block;
+ border: 1px solid @wcfLinkColor; //@wcfContainerBorderColor;
+ border-radius: 2px;
+ //border-bottom-left-radius: 0px;
+ padding: 6px 10px;
+ position: absolute;
+ left: -220px;
+ top: 30px;
+ font-weight: bold;
+ color: @wcfLinkColor;
+ text-transform: uppercase;
+ font-size: 85%;
+ //
+ .linearGradient(darken(@wcfHighlightBackgroundColor, 10%), @wcfHighlightBackgroundColor, darken(@wcfHighlightBackgroundColor, 10%));
+ .textShadow(darken(@wcfHighlightBackgroundColor, 10%));
+ .boxShadow(1px, 1px, rgba(0, 0, 0, .2), 3px);
+}
+
+.newMessageBadge:before {
+ content: "";
+ display: block;
+
+ width: 0px;
+ height: 0px;
+ position: absolute;
+ bottom: -7px;
+ left: -8px;
+
+
+ border-width: 0px 7px 7px;
+ border-style: solid;
+ border-color: transparent @wcfLinkColor transparent transparent;
+ /*
+ border: 5px solid red;
+ border-width: 5px 0 0 5px;*/
+}
+
+
+/* rotated badge
+.newMessageBadge {
+ background-color: @wcfHoverBackgroundColor;
+ color: @wcfColor;
+ display: block;
+ font-size: 15px;
+ left: -260px;
+ padding: 6px 4px;
+ position: absolute;
+ text-align: center;
+ text-transform: uppercase;
+ top: 20px;
+ width: 150px;
+
+ -webkit-backface-visibility: hidden;
+ -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
+ -webkit-transform: rotate(-45deg);
+ -o-transform: rotate(-45deg);
+}
+
+.wbbThreadPostList > li {
+ overflow: hidden;
+}*/
\ No newline at end of file
+++ /dev/null
-/**
- * WCF Styles
- *
- * @author Harald Szekely
- * @copyright 2011-2012 WoltLab GmbH
- */
-
-/* ############## Reset ############## */
-
-/**
- * Parts taken from
- * http://meyerweb.com/eric/tools/css/reset/
- * v2.0 | 20110126
- * License: none (public domain)
- * modifyed to meet the needs of WoltLab
- */
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
- margin: 0;
- padding: 0;
- border: 0;
- font-size: 100%;
-}
-
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
- display: block;
-}
-
-ol, ul {
- list-style: none;
-}
-
-blockquote, q {
- quotes: none;
-}
-
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
- content: '';
- content: none;
-}
-
-
-
-/* ############## LESS Definitions ############## */
-
-/* -- -- -- LESS: Borders -- -- -- */
-
-/* Appearance */
-
-/* Border Widths (1px) */
-@borderWidth: 1px;
-@borderWidthSeparator: 1px;
-@borderWidthBadge: 1px;
-
-/* Border Styles (solid) */
-@borderStyle: solid;
-@borderStyleSeparator: dotted;
-@borderStyleBadge: solid;
-
-/* Border Colors */
-
-/* Border Color (Middle Grey) */
-@borderColor1: rgba(153, 153, 153, 1);
-@borderColor11: lighten(@borderColor1, 20%);
-@borderColor12: lighten(@borderColor11, 10%);
-
-/* Border Color (Middle Blue) */
-@borderColor2: rgba(51, 102, 153, 1);
-@borderColor21: lighten(@borderColor2, 20%);
-@borderColor22: lighten(@borderColor21, 20%);
-
-/* Rounded Corners */
-
-.mxBorderRadius (@radius: 5px) {
- -webkit-border-radius: @radius;
- -khtml-border-radius: @radius;
- -moz-border-radius: @radius;
- -ms-border-radius: @radius;
- -o-border-radius: @radius;
- border-radius: @radius;
-}
-
-.mxBorderRadiusTL (@radius: 5px) {
- -webkit-border-top-left-radius: @radius;
- -khtml-border-top-left-radius: @radius;
- -moz-border-radius-topleft: @radius;
- -ms-border-top-left-radius: @radius;
- -o-border-top-left-radius: @radius;
- border-top-left-radius: @radius;
-}
-
-.mxBorderRadiusTR (@radius: 5px) {
- -webkit-border-top-right-radius: @radius;
- -khtml-border-top-right-radius: @radius;
- -moz-border-radius-topright: @radius;
- -ms-border-top-right-radius: @radius;
- -o-border-top-right-radius: @radius;
- border-top-right-radius: @radius;
-}
-
-.mxBorderRadiusBR (@radius: 5px) {
- -webkit-border-bottom-right-radius: @radius;
- -khtml-border-bottom-right-radius: @radius;
- -moz-border-radius-bottomright: @radius;
- -ms-border-bottom-right-radius: @radius;
- -o-border-bottom-right-radius: @radius;
- border-bottom-right-radius: @radius;
-}
-
-.mxBorderRadiusBL (@radius: 5px) {
- -webkit-border-bottom-left-radius: @radius;
- -khtml-border-bottom-left-radius: @radius;
- -moz-border-radius-bottomleft: @radius;
- -ms-border-bottom-left-radius: @radius;
- -o-border-bottom-left-radius: @radius;
- border-bottom-left-radius: @radius;
-}
-
-
-
-/* -- -- -- LESS: Backgrounds -- -- -- */
-
-/* Back Images */
-
-/* Back Image (header.png) */
-@backImage: url('../images/header.png');
-
-/* Back Colors */
-
-/* Back Color 1 (White) */
-@backColor1: rgba(255, 255, 255, 1);
-@backColor10: darken(@backColor1, 1%);
-@backColor11: darken(@backColor1, 20%);
-
-/* Back Color 2 (Lite Blue) */
-@backColor2: rgba(214, 232, 246, 1);
-@backColor21: saturate(lighten(@backColor2, 3%), 10%);
-@backColor22: desaturate(darken(@backColor2, 15%), 20%);
-
-/* Back Color 3 (Middle Blue) */
-@backColor3: rgba(51, 102, 153, 1);
-
-/* Back Color 4 (Dark Blue) */
-@backColor4: rgba(41, 55, 74, 1);
-
-/* Back Color 5 (Black) */
-@backColor5: rgba(0, 0, 0, 1);
-@backColor51: lighten(@backColor5, 20%);
-@backColor52: lighten(@backColor51, 20%);
-
-
-
-/* Just a future experiment! Has no function yet.
-
-.mxBackColorSwitch (@xxx) when (lightness(@backColor1) >= 50%) {
- color: black;
-}
-
-.mxBackColorSwitch (@xxx) when (lightness(@backColor1) < 50%) {
- color: white;
-}
-
-*/
-
-
-
-/* -- -- -- LESS: Fonts -- -- -- */
-
-/* Font Colors */
-
-/* Font Color 1 (White) */
-@fontColor1: rgba(255, 255, 255, 1);
-@fontColor11: darken(@fontColor1, 20%);
-
-/* Font Color 2 (Lite Blue) */
-@fontColor2: rgba(214, 232, 246, 1);
-
-/* Font Color 3 (Middle Blue) */
-@fontColor3: rgba(51, 102, 153, 1);
-@fontColor31: lighten(@fontColor3, 20%);
-
-/* Font Color 4 (Dark Blue) */
-@fontColor4: rgba(41, 55, 74, 1);
-
-/* Font Color 5 (Black) */
-@fontColor5: rgba(0, 0, 0, 1);
-@fontColor51: lighten(@fontColor5, 20%);
-@fontColor52: lighten(@fontColor51, 20%);
-@fontColor53: lighten(@fontColor52, 20%);
-
-/* Text Shadows */
-@textShadowColor1: rgba(0, 0, 0, 1);
-@textShadowColor2: rgba(255, 255, 255, 1);
-
-
-
-/* -- -- -- LESS: Inputs -- -- -- */
-
-/* Colors */
-
-@backColorInput1: rgba(255, 255, 255, 1);
-@backColorInput2: rgba(255, 170, 34, 1);
-@backColorInput21: lighten(@backColorInput2, 40%);
-
-/* Borders */
-
-@borderWidthInput: 1px;
-@borderStyleInput: solid;
-
-/* Border Colors */
-
-/* Normal (Grey) */
-@borderColorInputTop1: darken(@backColorInput1, 40%);
-@borderColorInputSide1: lighten(@borderColorInputTop1, 15%);
-@borderColorInputBottom1: lighten(@borderColorInputSide1, 15%);
-
-/* Hover & Active (Orange) */
-@borderColorInputTop2: @backColorInput2; /* ToDo */
-@borderColorInputSide2: lighten(@borderColorInputTop2, 5%);
-@borderColorInputBottom2: lighten(@borderColorInputSide2, 5%);
-
-
-
-/* -- -- -- LESS: Buttons -- -- -- */
-
-/* Main Colors */
-
-/* Button Color 1 Normal (Grey) */
-@backColorButton1: rgba(245, 245, 245, 1);
-@backColorButton11: lighten(@backColorButton1, 20%);
-@backColorButton12: darken(@backColorButton1, 3%);
-
-/* Button Color 2 Hover (Orange) */
-@backColorButton2: rgba(255, 228, 198, 1);
-@backColorButton21: lighten(@backColorButton2, 20%);
-@backColorButton22: darken(@backColorButton2, 3%);
-
-/* Button Color3 Default (Blue) */
-@backColorButton3: rgba(231, 242, 253, 1);
-@backColorButton31: lighten(@backColorButton3, 20%);
-@backColorButton32: darken(@backColorButton3, 3%);
-
-
-/* Borders */
-
-@borderWidthButton: 1px;
-@borderStyleButton: solid;
-@borderStyleButton2: dotted;
-
-/* Border Colors */
-
-/* Button Color 1 Normal (Grey) */
-@borderColorButtonTop1: darken(@backColorButton1, 15);
-@borderColorButtonSide1: darken(@borderColorButtonTop1, 5%);
-@borderColorButtonBottom1: darken(@borderColorButtonSide1, 5%);
-
-/* Button Color 2 Hover (Orange) */
-@borderColorButtonTop2: darken(@backColorButton2, 15); /* ToDo */
-@borderColorButtonSide2: darken(@borderColorButtonTop2, 5%);
-@borderColorButtonBottom2: darken(@borderColorButtonSide2, 5%);
-
-/* Button Color 3 Default (Blue) */
-@borderColorButtonTop3: darken(@backColorButton3, 15);
-@borderColorButtonSide3: darken(@borderColorButtonTop3, 5%);
-@borderColorButtonBottom3: darken(@borderColorButtonSide3, 5%);
-
-/* Font Colors */
-
-/* Button Font Color 1 (Grey) */
-@fontColorButton1: desaturate(darken(@borderColorButtonBottom1, 10%), 30%);
-
-/* Button Font Color 2 (Orange = Hover) */
-@fontColorButton2: desaturate(darken(@borderColorButtonBottom2, 30%), 70%);
-
-/* Button Font Color 3 (Blue) */
-@fontColorButton3: desaturate(darken(@borderColorButtonBottom3, 10%), 30%);
-
-
-
-/* Transitions 1 */
-
-.mxTransition1 (@object: color, @time: 1ms, @type: linear) {
- -webkit-transition: @arguments;
- -khtml-transition: @arguments;
- -moz-transition: @arguments;
- -ms-transition: @arguments;
- -o-transition: @arguments;
- transition: @arguments;
-}
-
-/* Stripes 1 */
-
-.mxStripes1 {
- background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px), @backImagePost;
- background-image: -khtml-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px), @backImagePost;
- background-image: -moz-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px), @backImagePost;
- background-image: -ms-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px), @backImagePost;
- background-image: -o-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px), @backImagePost;
- background-image: repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px), @backImagePost;
-}
-
-
-
-
-
-
-
-/* ############## Globals ############## */
-
-* {
- text-overflow: ellipsis;
-}
-
-img {
- vertical-align: middle !important;
-}
-
-a {
- color: @fontColor3;
- text-decoration: none;
-
- .mxTransition1;
-}
-
-a:hover {
- text-decoration: underline;
- color: #036;
-}
-
-hr {
- display: none;
-}
-
-::selection {
- text-shadow: 0 1px 0 fade(@fontColor1, 50%) !important;
- color: @fontColor51;
- background-color: rgba(255, 170, 34, .7);
-}
-
-a,
-img[src*='delete'],
-img[src*='uninstall'],
-img[src*='install'],
-img[src*='update'],
-img[src*='run'],
-img[src*='info'],
-img[src*='disable'],
-img[src*='enable'] {
- cursor: pointer;
-}
-
-
-
-/* ############## ToDo: Global Structural Classes ############## */
-
-/* -- -- -- Misc -- -- -- */
-
-.hot {
- color: #b00;
-}
-
-.invisible {
- position: absolute;
- left: -9000px;
- top: -9000px;
-}
-
-
-
-/* -- -- -- URLs -- -- -- */
-
-.wcf-externalURL {
- background-image: url('../icon/externalURL1.svg');
- background-position: right center;
- background-repeat: no-repeat;
- padding-right: 17px;
-}
-
-.wcf-eMailLink,
-a[href^="mailto:"] {
- background-image: url('../icon/email1.svg');
- background-position: left center;
- background-repeat: no-repeat;
- padding-left: 17px;
-}
-
-/* -- -- -- Margins -- -- -- */
-
-.wcf-marginTop {
- margin-top: 15px;
-}
-
-.wcf-marginBottom {
- margin-bottom: 15px;
-}
-
-/* -- -- -- Paddings -- -- -- */
-
-/* ToDo: Columns */
-
-.wcf-columns-2 {
- width: 45%;
-}
-
-.wcf-columns-3 {
- width: 30%;
-}
-
-
-/* -- -- -- ToDo: Floated Elements -- -- -- */
-
-/* possibly obsolete */
-.floatContainer:after {
- content: "";
- height: 0;
- display: block;
- clear: both;
-}
-
-.floated {
- margin-right: 5px;
- margin-left: 5px;
- float: left;
-}
-
-
-
-/* -- -- -- Shadows -- -- -- */
-
-/* Shadows for boxes - do not use on small boxes! */
-.wcf-shadow1 {
- -webkit-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);
- -khtml-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);
- -moz-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);
- -ms-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);
- /* ToDo: Opera doesn't like that so much! Bug-report sent to Opera
- -o-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);
- box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);*/
-}
-
-/* Use that shadow for tab menus - do not use on small boxes! */
-.wcf-shadow2 {
- -webkit-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1), 0 -8px 10px -10px rgba(0, 0, 0, .1);
- -khtml-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1), 0 -8px 10px -10px rgba(0, 0, 0, .1);
- -moz-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1), 0 -8px 10px -10px rgba(0, 0, 0, .1);
- -ms-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1), 0 -8px 10px -10px rgba(0, 0, 0, .1);
- /* ToDo: Opera doesn't like that so much! Bug-report sent to Opera
- -o-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1), 0 -8px 10px -10px rgba(0, 0, 0, .1);
- box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1), 0 -8px 10px -10px rgba(0, 0, 0, .1);*/
-}
-
-/* Simple shadow for small boxes */
-.wcf-shadow3 {
- -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
- -khtml-box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
- -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
- -ms-box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
- -o-box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
- box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
-}
-
-
-
-/* ############## Containers ############## */
-
-/* -- -- -- Globals -- -- -- */
-
-/**
- * This is a generic container for surrounding blocks of
- * text with an optional leading icon. The icon-size is
- * free. The icon-Container is optional.
- * Note:
- * This box does not support RTL in WebKit-browsers!
- * Thus the box-style may change in the future.
- */
-
-.wcf-container {
- overflow: hidden;
- box-sizing: border-box;
-}
-
-.wcf-containerIcon {
- float: left;
- margin-right: 5px;
-}
-
-.wcf-containerContent {
- padding: 1px;
- overflow: hidden;
-}
-
-
-
-/* ############## Badges ############## */
-
-/* Globals */
-
-.wcf-badge {
- font-size: 85%;
- font-weight: bold;
- text-shadow: none;
- text-decoration: none;
- .mxBorderRadius (30px);
- background-color: @backColor1;
- margin-right: -3px;
- margin-left: 3px;
- padding: 2px 5px;
- display: inline-block;
- position: relative;
- top: -1px;
-}
-
-/* Badge Types */
-
-.wcf-badgeBorder { /* ToDo: Obsolete? */
- border: @borderWidthBadge @borderStyleBadge #ccc;
-}
-
-.wcf-badgeBlue {
- color: #68b;
- border: @borderWidthBadge @borderStyleBadge #9be;
- background-color: #def;
-}
-
-.wcf-badgeGreen {
- color: #090;
- border: @borderWidthBadge @borderStyleBadge #0c0;
- background-color: #efe;
-}
-
-.wcf-badgeYellow {
- color: #990;
- border: @borderWidthBadge @borderStyleBadge #cc0;
- background-color: #ffd;
-}
-
-.wcf-badgeRed {
- color: #c00;
- border: @borderWidthBadge @borderStyleBadge #f99;
- background-color: #fee;
-}
-
-/* Buttons */
-
-.wcf-badgeButton {
- cursor: pointer;
- .mxBorderRadius (30px);
- margin-right: 0;
- margin-left: 0;
- padding: 3px 10px 5px;
- display: inline-block;
-}
-
-li.wcf-badgeButton,
-li > .wcf-badgeButton {
- margin-top: 7px;
- margin-right: 3px;
- margin-left: 3px;
- float: left;
-}
-
-.wcf-badgeButton,
-.wcf-badgeButton a {
- text-decoration: none !important;
-}
-
-
-
-/* ############## Labels ############## */
-
-/* -- -- -- Label List -- -- -- */
-
-.wcf-labelList {
- margin: 0;
- padding: 5px 0 0;
- display: inline-block;
-}
-
-/* -- -- -- Label -- -- -- */
-
-/* Globals */
-
-.wcf-label {
- font-size: 85%;
- font-weight: bold;
- color: #eee;
- text-shadow: none;
- text-decoration: none;
- .mxBorderRadius (30px);
- background-color: rgba(102, 102, 102, 1);
- margin-right: 3px;
- padding: 3px 8px 4px;
- display: inline-block;
- position: relative;
- top: -1px;
- cursor: pointer;
-}
-
-.wcf-label:hover {
- color: @fontColor1;
- background-color: rgba(51, 51, 51, 1);
-}
-
-.wcf-label a {
- color: #eee;
- text-decoration: none;
-}
-
-.wcf-label a:hover {
- color: @fontColor1;
-}
-
-/* Default Colors */
-
-.wcf-label.black {
- background-color: #333;
-}
-
-.wcf-label.black:hover {
- background-color: #000;
-}
-
-.wcf-label.brown {
- background-color: #c63;
-}
-
-.wcf-label.brown:hover {
- background-color: #930;
-}
-
-.wcf-label.red {
- background-color: #c00;
-}
-
-.wcf-label.red:hover {
- background-color: #900;
-}
-
-.wcf-label.orange {
- background-color: #f90;
-}
-
-.wcf-label.orange:hover {
- background-color: #f60;
-}
-
-.wcf-label.yellow {
- background-color: #ff0;
-}
-
-.wcf-label.yellow:hover {
- background-color: #cc0;
-}
-
-.wcf-label.green {
- background-color: #0c0;
-}
-
-.wcf-label.green:hover {
- background-color: #090;
-}
-
-.wcf-label.blue {
- background-color: #09f;
-}
-
-.wcf-label.blue:hover {
- background-color: #06c;
-}
-
-.wcf-label.purple {
- background-color: #c0f;
-}
-
-.wcf-label.purple:hover {
- background-color: #90c;
-}
-
-.wcf-label.pink {
- background-color: #f0c;
-}
-
-.wcf-label.pink:hover {
- background-color: #c09;
-}
-
-/* Special */
-
-table .wcf-label {
- padding: 1px 6px 2px;
-}
-
-
-
-/* ############## ToDo: Dropdown ############## */
-
-/* Dropdown Caption */
-
-.wcf-dropdownCaption,
-.wcf-dropdownCaption a {
- text-decoration: none;
- cursor: pointer;
- display: inline-block;
-}
-
-.wcf-dropdownCaption:hover,
-.wcf-dropdownCaption a:hover {
- text-decoration: none;
-}
-
-/* Dropdown */
-
-.wcf-dropdown {
- color: @fontColor1;
- border-width: @borderWidth;
- border-style: @borderStyle;
- border-color: rgba(255, 255, 255, .7);
- .mxBorderRadius;
- background-color: fade(@backColor5, 50%);
- margin-top: 25px;
- display: none;
- position: absolute;
- top: 0;
- left: 0;
- z-index: 400;
- overflow: hidden;
- white-space: nowrap;
-
- -webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
- -khtml-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
- -moz-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
- -ms-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
- -o-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
- box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
-
- .mxTransition1 (color background, .1s, ease); /* This multiple shorthand format seems to be deprecated! */
-}
-
-.wcf-dropdown.open {
- display: block;
-}
-
-/* Dropdown Items */
-
-.wcf-dropdown > li,
-.wcf-dropdown > div {
- text-shadow: none;
- color: #ccc;
- cursor: pointer;
-
- .mxTransition1 (color background, .2s); /* This multiple shorthand format seems to be deprecated! */
-}
-
-.wcf-dropdown > div {
- padding: 5px 7px;
-}
-
-.wcf-dropdown > :first-child {
- .mxBorderRadiusTL;
- .mxBorderRadiusTR;
-}
-
-.wcf-dropdown > :last-child {
- .mxBorderRadiusBR;
- .mxBorderRadiusBL;
-}
-
-.wcf-dropdown > :hover:not(ul):not(.pointer),
-.wcf-dropdown > .active {
- color: @fontColor1;
- cursor: pointer;
- background-color: fade(@backColor5, 50%);
-}
-
-.wcf-dropdown > li.divider:not(:first-child) {
- border-top: @borderWidth @borderStyle rgba(255, 255, 255, .7);
-}
-
-.wcf-dropdown > li {
- text-decoration: none;
- padding: 5px 7px;
- display: block;
-}
-
-.wcf-dropdown > li a {
- text-decoration: none;
- color: #ccc;
- padding: -5px -7px; /* ToDo: what's that? ;-) */
- display: block;
-}
-
-.wcf-dropdown > li a:hover {
- color: @fontColor1;
- background-color: fade(@backColor5, 50%);
-}
-
-
-
-/* ############## Body ############## */
-
-/* Globals */
-
-body {
- font-family: 'Trebuchet MS', Arial, sans-serif;
- font-size: 80%;
- color: @fontColor52;
- line-height: 1;
- background-color: @backColor4;
-}
-
-
-
-/* ############## Page Header & Page Footer ############## */
-
-/* Globals */
-
-header.wcf-pageHeader {
- background-image: @backImage;
- background-position: center top;
- background-repeat: repeat-x;
- background-attachment: fixed;
- width: 100%;
- overflow: hidden;
- position: relative;
- z-index: 100;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- header.wcf-pageHeader,
- header.wcf-pageFooter {
- min-width: 800px;
- }
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- header.wcf-pageHeader,
- header.wcf-pageFooter {
- /* none */
- }
-}
-
-.wcf-pageHeader:after,
-.wcf-pageFooter:after {
- content: '';
- display: block;
- clear: both;
-}
-
-.wcf-pageFooter {
- text-align: center;
- padding-bottom: 23px;
- position: relative;
- z-index: 80;
-}
-
-
-
-/* -- -- -- Copyright -- -- -- */
-
-.wcf-pageFooter .wcf-copyright {
- padding-top: 20px;
- display: inline-block;
-}
-
-.wcf-pageFooter .wcf-copyright a {
- text-shadow: 0 -1px 0 @textShadowColor1;
-}
-
-.wcf-pageFooter .wcf-copyright a:hover {
- text-decoration: none;
- color: @fontColor31;
-}
-
-
-
-/* -- -- -- Top Menu -- -- -- */
-
-/* Globals */
-
-nav.wcf-topMenu {
- border-bottom: @borderWidth @borderStyle rgba(0, 0, 0, .1);
- background-color: fade(@backColor5, 40%);
- position: fixed;
- top: 0;
- right: 0;
- left: 0;
- z-index: 300;
- box-sizing: border-box;
-
- -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
- -khtml-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
- -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
- -ms-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
- -o-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
- box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
-
- .mxTransition1 (background, .2s);
-
- -webkit-animation-name: showTopMenu;
- -webkit-animation-duration: .3s;
- -webkit-animation-timing-function: linear;
-
- -khtml-animation-name: showTopMenu;
- -khtml-animation-duration: .3s;
- -khtml-animation-timing-function: linear;
-
- -moz-animation-name: showTopMenu;
- -moz-animation-duration: .3s;
- -moz-animation-timing-function: linear;
-
- -ms-animation-name: showTopMenu;
- -ms-animation-duration: .3s;
- -ms-animation-timing-function: linear;
- /* disabled to ease rendering work for Opera
- -o-animation-name: showTopMenu;
- -o-animation-duration: .3s;
- -o-animation-timing-function: linear;
- */
- animation-name: showTopMenu;
- animation-duration: .3s;
- animation-timing-function: linear;
-}
-
-/* Show Top Menu */
-
-@-webkit-keyframes showTopMenu {
- 0% {
- opacity: 0;
- top: -50px;
- }
- 60% {
- top: 0;
- }
- 80% {
- top: -15px;
- }
- 100% {
- opacity: 1;
- top: auto;
- }
-}
-/* LESS doesn't like that! Wtf?
-@-khtml-keyframes showTopMenu {
- 0% {
- opacity: 0;
- top: -50px;
- }
- 60% {
- top: 0;
- }
- 80% {
- top: -15px;
- }
- 100% {
- opacity: 1;
- top: auto;
- }
-}
-*/
-@-moz-keyframes showTopMenu {
- 0% {
- opacity: 0;
- top: -50px;
- }
- 60% {
- top: 0;
- }
- 80% {
- top: -15px;
- }
- 100% {
- opacity: 1;
- top: auto;
- }
-}
-@-ms-keyframes showTopMenu {
- 0% {
- opacity: 0;
- top: -50px;
- }
- 60% {
- top: 0;
- }
- 80% {
- top: -15px;
- }
- 100% {
- opacity: 1;
- top: auto;
- }
-}
-/* disabled to ease rendering work for Opera
-@-o-keyframes showTopMenu {
- 0% {
- opacity: 0;
- top: -50px;
- }
- 60% {
- top: 0;
- }
- 80% {
- top: -15px;
- }
- 100% {
- opacity: 1;
- top: auto;
- }
-}
-*/
-@keyframes showTopMenu {
- 0% {
- opacity: 0;
- top: -50px;
- }
- 60% {
- top: 0;
- }
- 80% {
- top: -15px;
- }
- 100% {
- opacity: 1;
- top: auto;
- }
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- nav.wcf-topMenu {
- min-width: 800px;
- }
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- nav.wcf-topMenu {
- /* none */
- }
-}
-
-.wcf-topMenu:hover {
- background-color: fade(@backColor5, 50%);
-}
-
-.wcf-topMenu > div {
- padding: 0 23px 0;
-}
-
-.wcf-topMenu ul li {
- white-space: nowrap;
-}
-
-/* Menu Items (1st level) */
-
-.wcf-topMenu > div > ul > li {
- border-width: 0 1px;
- border-style: @borderStyle;
- border-color: transparent;
- float: left;
- position: relative;
-}
-
-.wcf-topMenu > div > ul > li,
-.wcf-topMenu > div > ul > li a {
- text-shadow: 0 -1px 0 rgba(0, 0, 0, .7);
- color: @fontColor31;
-}
-
-.wcf-topMenu > div > ul > li:hover,
-.wcf-topMenu > div > ul > li:hover a {
- border-color: rgba(255, 255, 255, .5);
-}
-
-/* Removes the doubled padding if there's a link in the top menu */
-.wcf-topMenu > div > ul > li > span > a {
- margin: -6px 0 -6px -6px;
-}
-
-
-
-/* ToDo: Top-Menu Dropdown Caption */
-
-.wcf-topMenu > div > ul > li > .wcf-dropdownCaption {
- background-image: url('../icon/dropdown2.svg');
- background-position: 97% center;
- background-repeat: no-repeat;
- padding-right: 15px !important;
-}
-
-.wcf-topMenu > div > ul > li > .wcf-dropdownCaption,
-.wcf-topMenu > div > ul > li > .wcf-dropdownCaption > a {
- padding: 6px;
-}
-
-.wcf-topMenu > div > ul > li:hover > .wcf-dropdownCaption,
-.wcf-topMenu > div > ul > li:hover > .wcf-dropdownCaption a {
- text-shadow: 0 -1px 0 rgba(0, 0, 0, .7);
- color: @fontColor1;
- background-color: fade(@backColor5, 70%);
-}
-
-/* Badges */
-
-.wcf-topMenu > div > ul > li > .wcf-dropdownCaption > .wcf-badge {
- margin: -3px 3px;
- padding: 1px 3px;
-}
-
-.wcf-topMenu > div > ul > li > .wcf-dropdownCaption > .wcf-badge,
-.wcf-topMenu > div > ul > li:hover > .wcf-dropdownCaption > .wcf-badge {
- font-size: 75%;
- color: @fontColor3 !important;
-}
-
-/* Images in front of the caption */
-
-.wcf-topMenu > div > ul > li > .wcf-dropdownCaption > img {
- margin: -7px 0 -5px 0;
-}
-
-
-
-/* ToDo: Top-Menu Dropdown Tweaks */
-
-/* Auto-Opening Dropdowns */
-.wcf-topMenu ul li .wcf-dropdownCaption ~ .wcf-dropdown {
- border-color: rgba(255, 255, 255, .5);
- background-color: fade(@backColor5, 70%);
- left: -1px;
- min-width: 100%;
-}
-
-.wcf-topMenu ul li:hover .wcf-dropdownCaption ~ .wcf-dropdown {
- display: block;
-}
-
-.wcf-topMenu ul li .wcf-dropdown {
- border-width: 0 1px 1px 1px !important;
- border-radius: 0 0 5px 5px;
-}
-
-.wcf-topMenu ul li .wcf-dropdown > :first-child {
- border-top-width: 0;
-}
-
-
-
-/* -- -- -- Logo -- -- -- */
-
-.wcf-logo {
- margin: 0 23px 0;
- position: relative;
- box-sizing: border-box;
-}
-
-.wcf-logo > a,
-.wcf-logo > div {
- text-align: right;
- display: block;
- height: 120px;
-}
-
-.wcf-logo > a:hover {
- text-decoration: none !important;
- color: #d8e7f5;
-}
-
-.wcf-logo h1 {
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
- color: #d8e7f5;
- position: relative;
- top: 70px;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .logo h1,
- .wcf-logo h1 {
- font-size: 150%;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .wcf-logo h1 {
- font-size: 175%;
- }
-
-}
-
-.wcf-logo > div > img,
-.wcf-logo > a > img {
- position: absolute;
- bottom: 20px;
- left: 0;
-}
-
-
-
-/* -- -- -- Search -- -- -- */
-
-.wcf-search {
- border: @borderWidthInput @borderStyleInput rgba(0, 0, 0, .1);
- .mxBorderRadius;
- background-color: fade(@backColor5, 20%);
- padding: 5px;
- position: absolute;
- top: 50px;
- right: 0;
- min-width: 240px;
-
- -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
- -khtml-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
- -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
- -ms-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
- -o-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
- box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
-
- .mxTransition1(background, .2s);
-}
-
-.wcf-search:hover {
- background-color: fade(@backColor5, 50%);
-}
-
-.wcf-search input[type='search'] {
- width: 175px;
- margin: 2px 4px;
-}
-
-.wcf-search > .wcf-searchButton {
- width: 32px;
- height: 32px;
- margin-left: 5px;
-}
-
-
-
-/* -- -- -- Main Menu -- -- -- */
-
-.wcf-mainMenu {
- /* General toggle switch for main menu orientation (options: left|center|right) */
- text-align: left;
- margin: 0 30px;
- display: block;
- position: relative;
- box-sizing: border-box;
-}
-
-.wcf-mainMenu:after {
- content: '';
- display: block;
- clear: both;
-}
-
-.wcf-mainMenu > ul {
- .mxBorderRadiusTL;
- .mxBorderRadiusTR;
- background-color: fade(@backColor5, 20%);
- display: inline-block;
- position: relative;
-}
-
-.wcf-mainMenu > ul > li {
- display: inline-block;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .wcf-mainMenu > ul > li {
- font-size: 120%;
- }
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .wcf-mainMenu > ul > li {
- font-size: 150%;
- }
-}
-
-.wcf-mainMenu > ul > li.activeMenuItem {
- margin: -5px 0 0;
-}
-
-.wcf-mainMenu > ul > li.activeMenuItem:first-child {
- margin-right: -5px;
-}
-
-.wcf-mainMenu > ul > li.activeMenuItem:last-child {
- margin-left: -5px;
-}
-
-.wcf-mainMenu > ul > li.activeMenuItem:only-child {
- margin: -5px 0 0;
-}
-
-.wcf-mainMenu > ul > li > a {
- font-weight: normal;
- text-decoration: none;
- text-shadow: 0 -1px 0 @textShadowColor1;
- color: @fontColor31;
- cursor: pointer;
- white-space: nowrap;
- display: inline-block;
- position: relative;
-
- -webkit-transition-property: border, background-color, background-image, color;
- -webkit-transition-duration: .3s;
- -webkit-transition-timing-function: ease;
-
- -khtml-transition-property: border, background-color, background-image, color;
- -khtml-transition-duration: .3s;
- -khtml-transition-timing-function: ease;
-
- -moz-transition-property: border, background-color, background-image, color;
- -moz-transition-duration: .3s;
- -moz-transition-timing-function: ease;
-
- -ms-transition-property: border, background-color, background-image, color;
- -ms-transition-duration: .3s;
- -ms-transition-timing-function: ease;
-
- -o-transition-property: border, background-color, background-image, color;
- -o-transition-duration: .3s;
- -o-transition-timing-function: ease;
-
- transition-property: border, background-color, background-image, color;
- transition-duration: .3s;
- transition-timing-function: ease;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .wcf-mainMenu > ul > li > a {
- padding: 10px 20px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .wcf-mainMenu > ul > li > a {
- padding: 10px 10px;
- }
-
-}
-
-.wcf-mainMenu > ul > li:not(.activeMenuItem) {
- margin-top: -3px;
-}
-
-.wcf-mainMenu > ul > li:not(.activeMenuItem):hover > a {
- color: @fontColor1;
-}
-
-.wcf-mainMenu > ul > li.activeMenuItem > a {
- font-size: 110%;
- font-weight: bold;
- text-shadow: 0 1px 0 @textShadowColor2;
- color: @fontColor3;
- .mxBorderRadiusTL;
- .mxBorderRadiusTR;
-
- background-color: @backColor21;
- background-image: -webkit-linear-gradient(lighten(@backColor21, 20%), @backColor21 50%);
- background-image: -khtml-linear-gradient(lighten(@backColor21, 20%), @backColor21 50%);
- background-image: -moz-linear-gradient(lighten(@backColor21, 20%), @backColor21 50%);
- background-image: -ms-linear-gradient(lighten(@backColor21, 20%), @backColor21 50%);
- background-image: -o-linear-gradient(lighten(@backColor21, 20%), @backColor21 50%);
- background-image: linear-gradient(lighten(@backColor21, 20%), @backColor21 50%);
-
- z-index: 10;
-}
-
-/* Rounded Bottom Corners: Active Tab */
-
-.wcf-mainMenu > ul > li.activeMenuItem > a:before {
- .mxBorderRadiusBR(6px);
- border-width: 0 1px 1px 0;
- position: absolute;
- bottom: 0;
- left: -7px;
- width: 7px;
- height: 7px;
- content: "";
-
- -webkit-box-shadow: 2px 2px 0 @backColor21;
- -khtml-box-shadow: 2px 2px 0 @backColor21;
- -moz-box-shadow: 2px 2px 0 @backColor21;
- -ms-box-shadow: 2px 2px 0 @backColor21;
- -o-box-shadow: 2px 2px 0 @backColor21;
- box-shadow: 2px 2px 0 @backColor21;
-}
-
-.wcf-mainMenu > ul > li.activeMenuItem > a:after {
- .mxBorderRadiusBL (6px);
- border-width: 0 0 1px 1px;
- position: absolute;
- right: -7px;
- bottom: 0;
- width: 7px;
- height: 7px;
- content: "";
-
- -webkit-box-shadow: -2px 2px 0 @backColor21;
- -khtml-box-shadow: -2px 2px 0 @backColor21;
- -moz-box-shadow: -2px 2px 0 @backColor21;
- -ms-box-shadow: -2px 2px 0 @backColor21;
- -o-box-shadow: -2px 2px 0 @backColor21;
- box-shadow: -2px 2px 0 @backColor21;
-}
-
-/* ToDo: Special */
-
-.wcf-mainMenu > ul > li .wcf-badge {
- font-size: 60% !important;
- color: @fontColor5;
- background-color: @fontColor3; /* This shows the badge in the font-color */
- margin: -10px 0;
-
- -webkit-box-shadow: 0 0 1px @backColor1;
- -khtml-box-shadow: 0 0 1px @backColor1;
- -moz-box-shadow: 0 0 1px @backColor1;
- -ms-box-shadow: 0 0 1px @backColor1;
- -o-box-shadow: 0 0 1px @backColor1;
- box-shadow: 0 0 1px @backColor1;
-}
-
-.wcf-mainMenu > ul > li.activeMenuItem .wcf-badge {
- color: @fontColor1;
- background-color: @fontColor3; /* This shows the badge in the font-color */
- margin: -10px 0;
-
- -webkit-box-shadow: 0 0 1px @backColor1;
- -khtml-box-shadow: 0 0 1px @backColor1;
- -moz-box-shadow: 0 0 1px @backColor1;
- -ms-box-shadow: 0 0 1px @backColor1;
- -o-box-shadow: 0 0 1px @backColor1;
- box-shadow: 0 0 1px @backColor1;
-}
-
-
-
-/* -- -- -- Header/Footer Navigation -- -- -- */
-
-/* Menu Bars */
-
-.wcf-headerNavigation,
-.wcf-footerNavigation {
- background-color: @backColor21;
- border-style: @borderStyle;
- border-color: @borderColor22;
- margin: 0 23px;
- padding: 2px 0;
- display: block;
- min-height: 7px;
- position: relative;
- box-sizing: border-box;
-}
-
-.wcf-headerNavigation {
- border-width: 0 0 @borderWidth 0;
- .mxBorderRadiusTL (3px);
- .mxBorderRadiusTR (3px);
-}
-
-.wcf-footerNavigation {
- border-width: @borderWidth 0 0 0;
- .mxBorderRadiusBR (3px);
- .mxBorderRadiusBL (3px);
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .wcf-headerNavigation,
- .wcf-footerNavigation {
- min-width: 800px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .wcf-headerNavigation,
- .wcf-footerNavigation {
- /* none */
- }
-
-}
-
-.wcf-headerNavigation:after,
-.wcf-footerNavigation:after {
- content: '';
- display: block;
- clear: both;
-}
-
-/* Icon Menus */
-
-.wcf-headerNavigation > ul,
-.wcf-footerNavigation > ul {
- padding: 0 7px;
- float: right;
-}
-
-.wcf-headerNavigation > ul > li,
-.wcf-footerNavigation > ul > li {
- padding: 0 3px;
- float: right;
-}
-
-.wcf-headerNavigation > ul > li.separator,
-.wcf-footerNavigation > ul > li.separator {
- border-right: @borderWidthSeparator @borderStyleSeparator @borderColor22;
-}
-
-.wcf-headerNavigation > ul > li a,
-.wcf-headerNavigation > ul > li p,
-.wcf-footerNavigation > ul > li a,
-.wcf-footerNavigation > ul > li p {
- text-decoration: none;
- color: @fontColor3;
- padding: 3px;
- display: inline-block;
-}
-
-.wcf-headerNavigation > ul > li a:hover,
-.wcf-footerNavigation > ul > li a:hover {
- text-decoration: none;
- background-color: #d8e7f5;
-}
-
-.wcf-headerNavigation > ul > li a:active,
-.wcf-headerNavigation > ul > li a:focus,
-
-.wcf-footerNavigation > ul > li a:active,
-.wcf-footerNavigation > ul > li a:focus {
- background-color: #fff9f4;
-}
-
-/* Special -> Page Scroll Links */
-
-#tplLogin .wcf-headerNavigation .toBottomLink,
-#tplLogin .wcf-footerNavigation .toTopLink {
- /* Removes the jump-to-links on the log-in page */
- position: absolute;
- left: -9000px;
- top: -9000px;
- width: 0;
-}
-
-/* Special -> Sub Menu */
-
-.wcf-headerNavigation .wcf-menu {
- padding: 0 7px;
- display: inline;
- max-width: 75%;
-}
-
-.wcf-headerNavigation .wcf-menu > ul {
- text-align: left;
- top: -3px;
- display: inline;
- position: relative;
-}
-
-.wcf-headerNavigation .wcf-menu > ul > li {
- margin-top: 7px;
-}
-
-.wcf-headerNavigation .wcf-menu > ul > li > a {
- color: @fontColor31;
- border-color: @backColor2;
- background-color: @backColor21;
-}
-
-
-
-/* ############## Main ############## */
-
-.wcf-main {
- background-color: @backColor2;
- margin: 0 23px;
- position: relative;
- z-index: 90;
-
- -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
- -khtml-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
- -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
- -ms-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
- -o-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
- box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .wcf-main {
- min-width: 800px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .wcf-main {
- /* none */
- }
-
-}
-
-
-
-/* -- -- -- Content -- -- -- */
-
-/* ToDo: Change the class name, since now we have the class "content" 2 times! */
-
-section.wcf-content {
- background-color: @backColor1;
- position: relative;
- min-height: 100px;
- z-index: 20;
- box-sizing: border-box;
-
- -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
- -khtml-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
- -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
- -ms-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
- /* ToDo: Opera doesn't like that so much! Bug-report sent to Opera
- -o-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
- box-shadow: 0 0 5px rgba(0, 0, 0, .1);*/
-
- .mxTransition1 (margin, .1s, ease);
-}
-
-section.wcf-content:after {
- content: '';
- display: block;
- clear: both;
-}
-
-.left section.wcf-content {
- border-left: 1px @borderStyle rgba(187, 204, 221, 1);
- margin-left: 249px;
-}
-
-.right section.wcf-content {
- border-right: 1px @borderStyle rgba(187, 204, 221, 1);
- margin-right: 249px;
-}
-
-/* ToDo: Does this still work? */
-.wcf-main > div section:only-child {
- border-width: 0 !important;
- margin: 0 !important;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- section.wcf-content {
- padding: 5px 40px 20px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- section.wcf-content {
- padding: 5px 15px 20px;
- }
-
-}
-
-/* ToDo */
-.wcf-contentDecor {
- background-color: rgba(253, 253, 253, 1);
-}
-
-
-
-/* -- -- -- Content Header & Footer -- -- -- */
-
-.wcf-contentHeader,
-.wcf-contentFooter {
- margin-top: 15px;
- display: table;
- width: 100%;
- box-sizing: border-box;
-}
-
-
-
-/* ############## Sidebar ############## */
-
-/* Globals */
-
-.wcf-sidebar {
- margin-bottom: -10px;
- display: block;
- width: 250px;
- overflow: hidden;
- z-index: 10;
-
- .mxTransition1 (width, .1s, ease)
-}
-
-/* Toggle for sidebar orientation (options: left|right|top|bottom) */
-
-.left .wcf-sidebar {
- float: left;
-}
-
-.right .wcf-sidebar {
- float: right;
-}
-
-
-
-/* -- -- -- Collapsible Sidebar -- -- -- */
-
-/* Globals */
-
-.wcf-sidebar.collapsed {
- width: 0;
- height: 0;
-}
-
-.left .wcf-sidebar.collapsed + .wcf-content {
- border: 0;
- margin-left: 0;
-}
-
-.right .wcf-sidebar.collapsed + .wcf-content {
- border: 0;
- margin-right: 0;
-}
-
-
-
-/* -- -- -- Collapsible Sidebar Button -- -- -- */
-
-/* Globals */
-
-.wcf-collapsibleSidebarButton {
- cursor: pointer;
- background-color: @backColor1;
- background-position: center 1%, center 99%;
- background-size: 10px 10px, 10px 10px;
- background-repeat: no-repeat;
- position: absolute;
- top: 0;
- bottom: 0;
- width: 20px;
- height: 100%;
- overflow: hidden;
- z-index: 30;
- opacity: .3;
-}
-
-.wcf-collapsibleSidebarButton span {
- background-color: @backColor1;
- background-position: center center;
- background-size: 10px 10px;
- background-repeat: no-repeat;
- margin-top: -300px;
- display: block;
- position: absolute;
- top: 50%;
- width: 20px;
- height: 600px;
-}
-
-.wcf-collapsibleSidebarButton:hover,
-.wcf-collapsibleSidebarButton:hover span {
- background-color: @backColor10;
- opacity: 1;
-}
-
-.wcf-collapsibleSidebarButton span:focus,
-.wcf-collapsibleSidebarButton span:active {
- -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -khtml-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-}
-
-/* Orientation */
-
-.left .wcf-collapsibleSidebarButton {
- border-right: 1px @borderStyleButton darken(@backColor1, 10%);
- background-image: url('../icon/arrowLeft1.svg'), url('../icon/arrowLeft1.svg');
- left: 250px;
-
- .mxTransition1 (left, .1s, ease)
-}
-
-.left .wcf-collapsibleSidebarButton span {
- background-image: url('../icon/arrowLeft1.svg');
-}
-
-.right .wcf-collapsibleSidebarButton {
- border-left: 1px @borderStyleButton darken(@backColor1, 10%);
- background-image: url('../icon/arrowRight1.svg'), url('../icon/arrowRight1.svg');
- right: 250px;
-
- .mxTransition1 (wight, .1s, ease)
-}
-
-.right .wcf-collapsibleSidebarButton span {
- background-image: url('../icon/arrowRight1.svg');
-}
-
-/* Collapsed (Left) */
-
-.left .collapsed .wcf-collapsibleSidebarButton {
- background-image: url('../icon/arrowRight1.svg'), url('../icon/arrowRight1.svg');
- left: 0;
-}
-
-.left .collapsed .wcf-collapsibleSidebarButton span {
- background-image: url('../icon/arrowRight1.svg');
-}
-
-/* Collapsed (Right) */
-
-.right .collapsed .wcf-collapsibleSidebarButton {
- background-image: url('../icon/arrowLeft1.svg'), url('../icon/arrowLeft1.svg');
- right: 0;
-}
-
-.right .collapsed .wcf-collapsibleSidebarButton span {
- background-image: url('../icon/arrowLeft1.svg');
-}
-
-
-
-/* -- -- -- Sidebar Content -- -- -- */
-
-.wcf-sidebarContent > div {
- text-shadow: 0 1px 0 @textShadowColor2;
- position: relative;
- overflow: hidden;
- z-index: 40;
-}
-
-.collapsed .wcf-sidebarContent > div {
- width: 0;
-}
-
-.wcf-sidebarContent a:hover {
- text-decoration: none !important;
- color: @fontColor3;
-}
-
-.wcf-sidebarContent > div > h1 {
- cursor: pointer;
- font-weight: bold;
- color: @fontColor3;
- margin-top: 5px;
-}
-
-.wcf-sidebarContent > .collapsibleMenus > h1 {
- background-image: url('../icon/arrowRight.svg');
- background-position: 15px center;
- background-size: 16px;
- background-repeat: no-repeat;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .wcf-sidebarContent > div > h1 {
- font-size: 130%;
- padding: 7px 15px 7px 35px;
- }
-
- .wcf-sidebarContent > div:not(.collapsibleMenus) > h1 {
- padding: 7px 15px 7px 15px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .wcf-sidebarContent > div > h1 {
- font-size: 150%;
- padding: 7px 15px 7px 35px;
- }
-
- .wcf-sidebarContent > div:not(.collapsibleMenus) > h1 {
- padding: 7px 15px 7px 15px;
- }
-
-}
-
-.wcf-sidebarContent > .collapsibleMenus h1.activeMenuItem {
- background-image: url('../icon/arrowDown.svg');
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .wcf-sidebarContent > div ul > li {
- font-size: 110%;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .wcf-sidebarContent > div ul > li {
- font-size: 120%;
- }
-
-}
-
-.wcf-sidebarContent > div ul > li > a,
-.wcf-sidebarContent > div ul > li > div {
- text-shadow: 0 1px 0 @textShadowColor2;
- color: @fontColor31;
- padding: 5px 15px 7px 35px;
- display: block;
-}
-
-.wcf-sidebarContent > div ul > li.activeMenuItem {
- background-color: @backColor1; /* ToDo */
- margin-right: -1px;
- overflow: hidden;
-
- -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
- -khtml-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
- -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
- -ms-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
- -o-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
- box-shadow: 0 0 5px rgba(0, 0, 0, .1);
-}
-
-.wcf-sidebarContent > div ul > li.activeMenuItem a {
- font-weight: bold;
- color: @fontColor3;
-}
-
-
-
-/* ############## Status Display ############## */
-
-.wcf-statusDisplay {
- padding: 1px 0;
- float: right;
-}
-
-.wcf-statusDisplay .wcf-statusIcons li {
- display: inline-block;
-}
-
-
-
-/* ############## Headings ############## */
-
-/* -- -- -- Main Heading -- -- -- */
-
-.wcf-mainHeading {
- margin-top: 25px;
-}
-
-.wcf-mainHeading:not(:first-of-type) {
- margin-top: 30px;
-}
-
-.wcf-mainHeading > hgroup h1 {
- font-weight: bold;
- border-bottom: @borderWidth @borderStyle @borderColor1;
- padding: 1px 0 10px;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .wcf-mainHeading .wcf-containerIcon {
- width: 48px;
- height: 48px;
- }
-
- .wcf-mainHeading hgroup h1 {
- font-size: 175%;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .wcf-mainHeading .wcf-containerIcon {
- width: 64px;
- height: 64px;
- }
-
- .wcf-mainHeading hgroup h1 {
- font-size: 200%;
- }
-
-}
-
-.wcf-mainHeading > hgroup h1,
-.wcf-mainHeading > hgroup h1 a {
- text-decoration: none;
- text-shadow: 0 1px 0 @textShadowColor2;
- color: @fontColor52;
-}
-
-.wcf-mainHeading > hgroup h2 {
- font-size: 100%;
- font-weight: normal;
- color: @fontColor53;
- padding-top: 5px;
-}
-
-.wcf-mainHeading > hgroup p {
- padding-top: 3px;
-}
-
-/* Special -> Badges */
-
-.wcf-mainHeading > hgroup h1 .wcf-badge,
-.wcf-mainHeading > hgroup h1 a .wcf-badge {
- font-size: 75%;
- text-decoration: none;
- background-color: @fontColor52; /* This shows the badge in the font-color */
- color: @fontColor1;
-}
-
-/* Special -> Dialog */
-
-.wcf-dialogContainer .wcf-mainHeading {
- margin-top: 0;
-}
-
-.wcf-dialogContainer .wcf-mainHeading > hgroup h1,
-.wcf-dialogContainer .wcf-mainHeading > hgroup h1 a {
- text-shadow: 0 -1px 0 @textShadowColor1;
- color: @fontColor1;
-}
-
-
-
-/* -- -- -- Sub Heading -- -- -- */
-
-.wcf-subHeading h1 {
- font-size: 150%;
- font-weight: bold;
- text-shadow: 0 1px 0 @textShadowColor2;
- color: @fontColor53;
- border-bottom: @borderWidthSeparator @borderStyleSeparator @borderColor11;
- margin: 10px 0;
- padding: 10px 0;
- box-sizing: border-box;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .wcf-subHeading h1 {
- font-size: 150%;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .wcf-subHeading h1 {
- font-size: 175%;
- }
-
-}
-
-.wcf-subHeading h2 {
- font-weight: normal;
- color: lighten(@fontColor53, 5%);
-}
-
-
-
-/* ############## Fieldsets ############## */
-
-fieldset {
- border: @borderWidth @borderStyle @borderColor11;
- .mxBorderRadius (7px);
- background-color: @backColor10; /* we should remove that asap! */
- margin: 15px 0 0;
- padding: 5px 15px 15px;
- box-sizing: border-box;
-}
-
-fieldset:last-child,
-fieldset:only-child {
- margin-bottom: 7px !important;
-}
-
-fieldset legend {
- color: @borderColor1;
- padding: 0 7px 0;
- margin: auto -7px;
-}
-
-fieldset legend ~ p {
- margin-bottom: 14px;
-}
-
-/* Special Sidebar */
-
-.wcf-sidebar fieldset {
- border-width: 0;
- background-color: transparent;
-}
-
-.wcf-sidebar fieldset legend {
- text-transform: uppercase; /* That's probably problematic */
- padding: 0;
-}
-
-
-
-/* ############## Labeled Content ############## */
-
-/* Simple */
-
-dl {
- margin-top: 7px;
- position: relative;
-}
-
-fieldset dl:first-of-type {
- margin-top: 0;
-}
-
-dl > dt {
- text-align: right;
- color: rgba(102, 153, 204, 1);
- margin-top: 5px;
- float: left;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- dl > dt {
- width: 230px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- dl > dt {
- width: 130px;
- }
-
-}
-
-dl.wide > dt {
- width: auto; /* ToDo */
-}
-
-dl > dt > label {
- margin-top: 5px;
- display: block;
-}
-
-dl.disabled > dt {
- color: rgba(119, 119, 119, 1);
-}
-
-dl > dd {
- padding-top: 5px;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- dl > dd {
- margin-left: 250px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- dl > dd {
- margin-left: 150px;
- }
-
-}
-
-dl.wide > dd {
- margin-left: 0;
-}
-
-dl > dd > small {
- font-size: 85%;
- color: @fontColor53;
- margin: 3px 0 7px;
- display: block;
-}
-
-input[type='checkbox'] ~ small,
-input[type='radio'] ~ small {
- margin-top: 0;
- margin-left: 21px;
-}
-
-dl > :not(dt) > label ~ small {
- margin-left: 21px;
-}
-
-dl > dd > p {
- margin-top: 5px;
-}
-
-/* Nested */
-
-dl > dd > fieldset {
- margin-top: 0;
- margin-bottom: 0;
- padding-top: 5px;
- padding-bottom: 5px;
-}
-
-dl > dd > fieldset > legend {
- display: none;
-}
-
-dl > dd > fieldset > dl > dt {
- margin-right: 20px;
- width: 150px;
-}
-
-dl > dd > fieldset > dl > dd {
- margin-left: 0;
-}
-
-dl > dd > fieldset > dl > dd > label {
- display: block;
-}
-
-/* Reversed (flips the label aside the checkbox or radio button) -
- use only when automatically generating checkboxes or radio-buttons! */
-
-.reversed {
- text-align: left;
- margin-top: 2px;
- position: absolute;
- width: auto;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .reversed {
- left: 270px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .reversed {
- left: 170px;
- }
-
-}
-
-.reversed ~ dd > input[type='checkbox'] {
- margin-left: 0;
-}
-
-/* Special -> Sidebar */
-
-.wcf-sidebar dl > dt {
- text-align: left;
- float: none;
- width: auto;
-}
-
-.wcf-sidebar dl > dd {
- margin-left: 0;
- display: block;
- margin-bottom: 13px;
-}
-
-.wcf-sidebar dl > dd * {
- display: block;
-}
-
-/* Special -> Overlay */
-
-.wcf-dialogContainer dl > dt {
- width: 130px;
-}
-
-.wcf-dialogContainer dl > dd {
- margin-left: 150px;
-}
-
-.wcf-dialogContainer dl > .reversed {
- left: 170px;
- width: auto;
-}
-
-
-
-/* ############## Forms ############## */
-
-/* Globals */
-
-label {
- color: rgba(102, 153, 204, 1);
-}
-
-/* Structure */
-
-.wcf-formSubmit {
- text-align: center;
- margin-top: 15px;
-}
-
-
-
-/* -- -- -- Form Elements -- -- -- */
-
-/* Globals */
-
-button,
-input[type='reset'],
-input[type='submit'],
-input[type='button'],
-input[type='checkbox'],
-input[type='radio'],
-select:not([multiple]) {
- cursor: pointer;
-}
-
-input[type='text'],
-input[type='search'], /* Does not work in WebKit browsers */
-input[type='date'],
-input[type='email'],
-input[type='url'],
-input[type='password'],
-textarea,
-select[multiple] {
- padding: 5px 3px;
- box-sizing: border-box;
-}
-
-select[multiple] {
- font-family: 'Courier New', Courier, monospace;
-}
-
-/* Normal State */
-
-input[type='text'],
-input[type='search'],
-input[type='date'],
-input[type='email'],
-input[type='url'],
-input[type='password'],
-textarea,
-select[multiple] {
- border-width: @borderWidthInput;
- border-style: @borderStyleInput;
- border-color: @borderColorInputTop1 @borderColorInputSide1 @borderColorInputBottom1;
- .mxBorderRadius (3px);
- background-color: @backColorInput1;
-
- -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
- -khtml-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
- -moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
- -ms-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
- -o-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
- box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
-
- .mxTransition1 (background-color border, 2s); /* This multiple shorthand format seems to be deprecated! */
-}
-
-/* Hover State */
-
-input[type='text']:hover,
-input[type='search']:hover,
-input[type='date']:hover,
-input[type='email']:hover,
-input[type='url']:hover,
-input[type='password']:hover,
-textarea:hover,
-select[multiple]:hover {
- border-style: @borderStyleInput;
- border-color: @borderColorInputTop2 @borderColorInputSide2 @borderColorInputBottom2;
- background-color: @backColorInput21;
-}
-
-/* Active & Focus State */
-
-input[type='text']:active,
-input[type='search']:active,
-input[type='date']:active,
-input[type='email']:active,
-input[type='url']:active,
-input[type='password']:active,
-textarea:active,
-select[multiple]:active,
-
-input[type='text']:focus,
-input[type='search']:focus,
-input[type='date']:focus,
-input[type='email']:focus,
-input[type='url']:focus,
-input[type='password']:focus,
-textarea:focus,
-select[multiple]:focus {
- border-style: @borderStyleInput;
- border-color: @borderColorInputTop2 @borderColorInputSide2 @borderColorInputBottom2;
- background-color: @backColorInput21;
- outline: none;
-
- -webkit-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
- -khtml-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
- -moz-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
- -ms-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
- -o-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
- box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
-}
-
-/* Read Only State */
-
-input[type='text'][readonly],
-input[type='search'][readonly],
-input[type='email'][readonly],
-input[type='date'][readonly],
-input[type='url'][readonly],
-input[type='password'][readonly],
-textarea[readonly],
-select[multiple][readonly] {
- border-style: @borderStyleInput;
- border-color: fade(@borderColor1, 50%);
- background-color: transparent;
-
- -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05);
- -khtml-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05);
- -moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05);
- -ms-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05);
- -o-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05);
- box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05);
-}
-
-/* Disabled State */
-
-input[type='text'][disabled],
-input[type='search'][disabled],
-input[type='date'][disabled],
-input[type='email'][disabled],
-input[type='url'][disabled],
-input[type='password'][disabled],
-textarea[disabled],
-select[multiple][disabled] {
- border-style: @borderStyleInput;
- border-color: fade(@backColorInput1, 50%);
- background-color: fade(@backColor1, 50%);
-}
-
-
-
-/* -- -- -- Input Widths -- -- -- */
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- textarea {
- width: 100%;
- min-width: 200px;
- }
-
- .tiny {
- width: 100px;
- }
-
- .short {
- width: 10%;
- min-width: 75px;
- }
-
- .medium {
- width: 50%;
- min-width: 150px;
- }
-
- .long {
- width: 100%;
- min-width: 200px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- textarea {
- width: 99%;
- /* none */
- }
-
- .tiny {
- width: 50px;
- }
-
- .short {
- width: 10%;
- min-width: 50px;
- }
-
- .medium {
- width: 30%;
- min-width: 100px;
- }
-
- .long {
- width: 100%;
- min-width: 150px;
- }
-
-}
-
-.auto {
- width: auto;
-}
-
-/* Special -> Search Input WebKit */
-
-input[type=search] {
- .mxBorderRadius (30px);
-
- -webkit-appearance: textfield;
- -webkit-box-sizing: content-box;
-}
-
-::-webkit-search-decoration {
- display: none;
-}
-
-
-
-/* -- -- -- Form Errors -- -- -- */
-
-.wcf-formError input[type='text'],
-.wcf-formError input[type='search'],
-.wcf-formError input[type='email'],
-.wcf-formError input[type='url'],
-.wcf-formError input[type='password'],
-.wcf-formError textarea {
- border-color: rgba(255, 0, 0, 1);
- background-color: rgba(255, 246, 246, 1);
-}
-
-
-
-/* ############## ToDo: Pre-Input Buttons & Dropdowns ############## */
-
-/* -- -- -- Bounding Box -- -- -- */
-
-/**
- * This defines the shape of the Pre-Input Buttons
- * Colors & effects are being defined by the
- * "Global Button Color & Effect Library"
- */
-
-.wcf-preInput {
- display: table;
- position: relative;
- width: 100%;
-}
-
-.wcf-preInput > input,
-.wcf-preInput > textarea { /* ToDo: The textarea solution is not so nice */
- border-radius: 0 3px 3px 0;
- margin: 0 !important;
- display: table-cell;
- width: 100%;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .wcf-preInput > input,
- .wcf-preInput > textarea {
- min-width: 300px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .wcf-preInput > input,
- .wcf-preInput > textarea {
- min-width: 100px;
- }
-
-}
-
-
-
-/* -- -- -- Dropdowns -- -- -- */
-
-/* Dropdown Caption */
-
-.wcf-preInput .wcf-dropdownCaption {
- letter-spacing: -1px;
- cursor: pointer;
- border-radius: 3px 0 0 3px;
- padding-right: 5px;
- display: table-cell;
- width: 1%;
- vertical-align: middle;
-}
-
-.wcf-preInput .wcf-dropdownCaption span {
- margin-right: -1px;
- padding-left: 5px;
- white-space: nowrap;
-}
-
-.wcf-preInput .wcf-dropdownCaption span.active {
- background-image: url('../icon/dropdown1.svg');
- background-position: right center;
- background-repeat: no-repeat;
- padding-right: 10px;
-}
-
-
-
-/* Special -> System Notification */
-
-.wcf-preInput .wcf-dropdown > li.missingValue { /* ToDo */
- /* color: #990; */
- background-image: url('../icon/systemWarning.svg');
- background-size: 16px;
- background-position: 95% center;
- background-repeat: no-repeat;
- /* background-color: #ffd; */
-}
-
-
-
-/* ############## ToDo: Small Buttons ############## */
-
-/**
- * This defines the shape of the Small Buttons
- * Colors & effects are being defined by the
- * "Global Button Color & Effect Library"
- */
-
-/* -- -- -- Standard -- -- -- */
-
-/* Globals */
-
-.wcf-smallButtons {
- list-style-type: none;
- margin-right: -1px;
- margin-bottom: -1px;
-}
-
-.wcf-smallButtons > li {
- margin-left: -5px;
- display: inline-block;
-}
-
-.wcf-smallButtons > li > a {
- white-space: nowrap;
- padding: 3px 7px;
- display: block;
- min-height: 16px;
-}
-
-.wcf-smallButtons > li.separator > a {
- border-right: @borderWidthSeparator @borderStyleSeparator @borderColorButtonTop3; /* ToDo */
-}
-
-.wcf-smallButtons > li:first-child > a {
- .mxBorderRadiusTL (13px);
-}
-
-.wcf-smallButtons > li:last-child > a {
- .mxBorderRadiusBR (7px);
-}
-
-
-
-/* -- -- -- Small Button Bar -- -- -- */
-
-.wcf-smallButtonBar {
- text-align: center !important;
- border-top: @borderWidthButton @borderStyleButton @borderColorButtonTop1;
- border-radius: 0 0 7px 7px;
-
- background-color: rgba(0, 0, 0, .015);
- background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
- background-image: -khtml-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
- background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
- background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
- background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
- background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
-
- padding: 3px;
- position: relative;
- z-index: 100;
-}
-
-.wcf-smallButtonBar li {
- display: inline;
- position: relative;
-}
-
-.wcf-smallButtonBar li span {
- /* Removes the button-caption */
- position: absolute;
- left: -9000px;
- top: -9000px;
- width: 0;
-}
-
-/* ToDo: Separators */
-.wcf-smallButtonBar li.separator > a {
- border-right: @borderWidthSeparator @borderStyleSeparator @borderColorButtonTop3;
-}
-
-
-
-/* ############## Large Buttons ############## */
-
-/**
- * This defines the shape of the Large Buttons
- * Colors & effects are being defined by the
- * "Global Button Color & Effect Library"
- */
-
-/* Globals */
-
-.wcf-largeButtons {
- text-align: right;
- float: right;
-}
-
-.wcf-largeButtons > li {
- display: inline;
-}
-
-.wcf-largeButtons > li > a img {
- margin: -5px 1px -5px -5px;
- vertical-align: middle;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .wcf-largeButtons > li > a img {
- height: 24px;
- width: 24px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .wcf-largeButtons > li {
- font-size: 125%;
- }
-
- .wcf-largeButtons > li > a {
- padding: 10px 15px !important;
- white-space: nowrap;
- }
-
- .wcf-largeButtons > li > a img {
- height: 32px;
- width: 32px;
- }
-
-}
-
-/* Normal State */
-
-button,
-input[type='reset'],
-input[type='submit'],
-input[type='button'],
-.wcf-largeButtons > li > a {
- font-size: 100%;
- font-weight: bold;
- .mxBorderRadius (30px);
- margin: 3px 2px;
- padding: 5px 13px;
- display: inline-block;
-}
-
-/* ToDo: Special */
-
-.wcf-sidebar .wcf-largeButtons *,
-.wcf-sidebar input {
- font-size: 75% !important;
- padding: 3px 7px;
-}
-
-.wcf-sidebar .wcf-largeButtons *,
-.wcf-sidebar input {
- font-size: 75% !important;
-}
-
-
-
-/* ############## Boxes ############## */
-
-/**
- * This defines a box with rounded borders
- * Use the extra classes to further style boxes
- */
-
-/* Globals */
-
-.wcf-box {
- border: @borderWidth @borderStyle @borderColor11;
- .mxBorderRadius;
- box-sizing: border-box;
-}
-
-.wcf-boxTitle {
- .mxBorderRadius (7px);
- background-color: @backColor3;
- background-image: @backImage;
- background-position: left top;
- background-repeat: repeat-x;
- display: table;
- width: 100%;
- box-sizing: border-box;
-}
-
-.wcf-boxPadding {
- padding: 13px 23px 23px;
-}
-
-.wcf-boxDecor {
- background-color: @backColor10;
-}
-
-/* Headings */
-
-.wcf-boxTitle > hgroup {
- text-shadow: 0 -1px 0 @textShadowColor1;
- color: @fontColor1;
- padding: 7px;
- display: inline-block;
-}
-
-.wcf-boxTitle > a,
-.wcf-boxTitle > hgroup a {
- text-decoration: none;
- color: @fontColor1;
-}
-
-.wcf-boxTitle > hgroup h1 {
- font-size: 120%;
- display: inline-block;
-}
-
-.wcf-boxTitle > hgroup h2 {
- font-size: 85%;
- color: @fontColor11;
- margin-top: 5px;
-}
-
-.wcf-boxTitle > hgroup .wcf-badge {
- font-size: 65%;
- color: #036;
-}
-
-/* Leading icon */
-
-.wcf-boxTitle > a {
- margin: 7px 0 0 10px;
- float: left;
-}
-
-.wcf-boxTitle > a img {
- height: 16px;
- width: 16px;
-}
-
-
-
-/* ############## List Box ############## */
-
-/* Globals */
-
-.wcf-listBox {
- line-height: 1.5;
- border-width: 1px 0;
- border-style: @borderStyle;
- border-color: @borderColor11;
- background-color: @backColor10;
- margin-top: -1px !important;
- box-sizing: border-box;
-}
-
-.wcf-listBox .wcf-listBox {
- border-style: @borderStyleSeparator;
- border-color: @borderColor12;
- background-color: transparent;
-}
-
-.wcf-listBox:first-child {
- border-top-width: 0;
-}
-
-.wcf-listBox:last-child {
- border-bottom-width: 0;
-}
-
-.wcf-listBox:nth-child(2n+1) {
- /* auto-colorer for every 2nd row */
- background-color: transparent;
-}
-
-.wcf-listBox:hover,
-.wcf-listBox .wcf-listBox:hover {
- background-color: darken(@backColor10, 2%);
-}
-
-.wcf-listBox .wcf-listBox:first-child {
- border-top-width: 1px;
-}
-
-/* List Box Contents */
-
-.wcf-listBox > .wcf-container {
- margin-top: 0;
- padding: 7px;
-}
-
-.wcf-listBox .wcf-username {
- font-size: 120%;
- display: inline;
-}
-
-.wcf-listBox time {
- font-size: 85%;
- color: rgba(153, 153, 153, 1);
- display: inline;
-}
-
-.wcf-listBox .wcf-badge {
- font-size: 85%;
- margin-left: 0;
- padding: 0 5px;
- display: inline-block;
-}
-
-.wcf-listBox .wcf-likesDisplay {
- display: inline;
-}
-
-
-
-/* ############## Tab Menu ############## */
-
-/* Globals */
-
-.wcf-tabMenu {
- /* Toggle for tab menu orientation (options: left|center|right) */
- text-align: center;
- margin-top: 15px;
- padding: 0 10px;
- display: block;
- position: relative;
-}
-
-fieldset ~ .wcf-tabMenuContainer .wcf-tabMenu {
- margin-top: 30px;
-}
-
-/* -- -- -- Tabs -- -- -- */
-
-/* Globals */
-
-.wcf-tabMenu ul {
- text-shadow: 0 1px 0 @textShadowColor2;
- white-space: nowrap;
- border-width: 1px 1px 0 1px;
- border-style: @borderStyle;
- border-color: fade(@borderColor11, 50%);
- .mxBorderRadiusTL (3px);
- .mxBorderRadiusTR (3px);
- background-color: fade(@backColor5, 5%);
- padding: 0 5px 3px 5px;
- display: inline-block;
- position: relative;
-}
-
-.wcf-tabMenu li {
- white-space: nowrap;
- list-style: none;
- display: inline-block;
-}
-
-.wcf-tabMenu li.ui-state-active {
- margin-right: -7px;
- margin-left: -7px;
- margin-top: -@borderWidth;
-}
-
-.wcf-tabMenu li a {
- text-decoration: none;
- color: @fontColor53;
- cursor: pointer;
- display: inline-block;
- position: relative;
- bottom: -(2px + @borderWidth);
- z-index: 10;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .wcf-tabMenu li a {
- font-size: 110%;
- padding: 1px 10px 3px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .wcf-tabMenu li a {
- font-size: 150%;
- padding: 5px 10px;
- max-width: 100px;
- }
-
-}
-
-.wcf-tabMenu li:not(.ui-state-active) a:hover {
- color: @fontColor52;
-}
-
-.wcf-tabMenu li.ui-state-active a {
- font-weight: bold;
- color: @fontColor52 !important;
- border-width: @borderWidth;
- border-style: @borderStyle;
- .mxBorderRadiusTL (6px);
- .mxBorderRadiusTR (6px);
- border-color: @borderColor11 @borderColor11 @backColor1;
- background-color: @backColor1; /* ToDo: Less: make grey! */
- padding: 10px 15px 5px;
- margin-top: -10px;
- z-index: 30;
-}
-
-/* Rounded Bottom Corners */
-
-.wcf-tabMenu li.ui-state-active a:before {
- position: absolute;
- bottom: -@borderWidth;
- width: 5px;
- height: 5px;
- content: "";
- border: @borderWidth @borderStyle @borderColor11;
- left: -(5px + @borderWidth);
- .mxBorderRadiusBR (6px);
- border-width: 0 @borderWidth @borderWidth 0;
-
- -webkit-box-shadow: 2px 2px 0 @backColor1;
- -khtml-box-shadow: 2px 2px 0 @backColor1;
- -moz-box-shadow: 2px 2px 0 @backColor1;
- -ms-box-shadow: 2px 2px 0 @backColor1;
- -o-box-shadow: 2px 2px 0 @backColor1;
- box-shadow: 2px 2px 0 @backColor1;
-}
-
-.wcf-tabMenu li.ui-state-active a:after {
- position: absolute;
- bottom: -@borderWidth;
- width: 5px;
- height: 5px;
- content: "";
- border: @borderWidth @borderStyle @borderColor11;
- right: -(5px + @borderWidth);
- .mxBorderRadiusBL (6px);
- border-width: 0 0 @borderWidth @borderWidth;
-
- -webkit-box-shadow: -2px 2px 0 @backColor1;
- -khtml-box-shadow: -2px 2px 0 @backColor1;
- -moz-box-shadow: -2px 2px 0 @backColor1;
- -ms-box-shadow: -2px 2px 0 @backColor1;
- -o-box-shadow: -2px 2px 0 @backColor1;
- box-shadow: -2px 2px 0 @backColor1;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .wcf-tabMenu li.ui-state-active a {
- font-size: 130%;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .wcf-tabMenu li.ui-state-active a {
- font-size: 150%;
- }
-
-}
-
-.wcf-tabMenu li.ui-state-active a,
-.wcf-tabMenu li.ui-state-disabled a,
-.wcf-tabMenu li.ui-state-processing a {
- cursor: default;
-}
-
-
-
-/* -- -- -- Tab Menu Content -- -- -- */
-
-.wcf-tabMenuContent {
- background-color: @backColor1; /* ToDo: Less: Grey! */
- margin-top: -1px;
- display: block;
- position: relative;
- z-index: 20; /* Prevents border overlay during transition */
-}
-
-/* ToDo: 2x hidden? */
-
-.ui-tabs .ui-tabs-hide {
- display: none !important;
-}
-
-.ui-helper-hidden {
- display: none;
-}
-
-.ui-helper-hidden-accessible {
- position: absolute !important;
- clip: rect(1px 1px 1px 1px);
- clip: rect(1px,1px,1px,1px);
-}
-
-
-
-/* ############## Menu ############## */
-
-/* Standard */
-
-.wcf-menu {
- color: @fontColor53;
-}
-
-.wcf-menu ul {
- /* General toggle switch for menu orientation (options: left|center|right) */
- text-align: center;
-}
-
-.wcf-menu ul li {
- white-space: nowrap;
- margin-top: 10px;
- display: inline-block;
-}
-
-.wcf-menu ul li a {
- font-size: 85%;
- text-shadow: 0 1px 0 @textShadowColor2;
- text-decoration: none;
- color: @fontColor53;
- border: @borderWidthButton @borderStyle fade(@backColor5, 20%);
-
- .mxBorderRadius (13px);
-
- background-color: @backColor1;
- padding: 2px 10px;
-
- .mxTransition1;
-}
-
-.wcf-menu ul li:not(.ui-state-active) a:hover {
- color: @fontColor52;
- border-width: @borderWidthButton;
- border-style: @borderStyleButton;
- border-color: #fa2;
- background-color: rgba(255, 249, 244, 1);
-}
-
-.wcf-menu ul li:not(.ui-state-active) a:active,
-.wcf-menu ul li:not(.ui-state-active) a:focus {
- -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -khtml-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-}
-
-.wcf-menu ul li.ui-state-active a {
- font-weight: bold;
- text-shadow: 0 1px 0 @textShadowColor1;
- color: @fontColor1;
- cursor: default;
- border: @borderWidthButton @borderStyleButton fade(@backColor5, 20%);
- background-color: fade(@backColor5, 50%);
-}
-
-/* Special -> Menu within box-title */
-
-.wcf-boxTitle > .wcf-menu {
- color: @fontColor1;
- border: none;
- margin: 0 !important;
- padding: 6px 7px !important;
-}
-
-.wcf-boxTitle > .wcf-menu ul li {
- margin-top: 0;
-}
-
-.wcf-boxTitle > .wcf-menu ul li a {
- text-shadow: 0 -1px 0 @textShadowColor1;
- color: #eee !important;
- background-color: fade(@backColor5, 10%);
-}
-
-.wcf-boxTitle > .wcf-menu ul li a:hover {
- color: @fontColor1 !important;
- border: @borderWidthButton @borderStyleButton fade(@backColor5, 30%);
- background-color: fade(@backColor5, 20%);
-}
-
-.wcf-boxTitle > .wcf-menu ul li a:active,
-.wcf-boxTitle > .wcf-menu ul li a:focus,
-.wcf-boxTitle > .wcf-menu ul li.ui-state-active a {
- border: @borderWidthButton @borderStyleButton fade(@backColor5, 50%);
-
- -webkit-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
- -khtml-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
- -moz-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
- -ms-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
- -o-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
- box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
-}
-
-.wcf-boxTitle > .wcf-menu ul li a .wcf-badge {
- color: @backColor3 !important;
-}
-
-/* Special: Menu below tab-menu */
-
-.wcf-tabMenuContainer > .wcf-menu {
- border-bottom: @borderWidthSeparator @borderStyle @borderColor11;
- margin: -15px -23px 0;
- padding: 0 7px 10px;
-}
-
-.wcf-tabMenuContainer > .wcf-menu {
- background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
- background-image: -khtml-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
- background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
- background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
- background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
- background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
-}
-
-
-
-/* ############## Bread Crumbs ############## */
-
-/* Globals */
-
-.wcf-breadcrumbs {
- text-align: left;
- border: 1px @borderStyle rgba(204, 204, 204, 1);
- .mxBorderRadius;
- background-color: @backColor1;
- display: block;
- position: relative;
- overflow: hidden;
- box-sizing: border-box;
-}
-
-.wcf-breadcrumbs > ul > li {
- font-size: 85%;
- list-style: none;
- float: left;
- position: relative;
- max-width: 30%;
-
- .mxTransition1 (max-width, .2s);
-}
-
-.wcf-breadcrumbs > ul > li:hover {
- max-width: 100%;
-}
-
-/* Arrow */
-
-.wcf-breadcrumbs > ul > li > span {
- border-width: 15px;
- border-style: solid none solid solid;
- border-color: transparent transparent transparent rgba(204, 204, 204, 1);
- display: block !important;
- position: absolute;
- width: 0;
- height: 0;
- top: -4px;
- right: -15px;
- z-index: 20;
-}
-
-.wcf-breadcrumbs > ul > li > .pointer > span {
- text-indent: -9000px;
- border-width: 15px;
- border-style: solid none solid solid;
- border-color: transparent transparent transparent @backColor1;
- display: block;
- position: absolute;
- width: 0;
- height: 0;
- top: -15px;
- left: -16px;
- overflow: hidden;
-}
-
-/* Caption */
-
-.wcf-breadcrumbs > ul > li a {
- text-decoration: none;
- text-shadow: 0 1px 0 @textShadowColor2;
- color: @fontColor53;
- margin: 0;
- padding: 5px 1px 5px 20px;
- display: block;
- overflow: hidden;
- white-space: nowrap;
-}
-
-.wcf-breadcrumbs > ul > li:first-child a {
- border-radius: 5px 0 0 5px;
- background-image: url('../icon/home1.svg');
- background-position: 7px center;
- background-repeat: no-repeat;
- background-size: 16px;
- padding-left: 30px;
-}
-
-.wcf-breadcrumbs > ul > li:hover a {
- color: @fontColor52;
- background-color: rgba(249, 249, 249, 1);
- position: relative;
- z-index: 10;
-}
-
-.wcf-breadcrumbs > ul > li:hover > .pointer > span {
- border-color: transparent transparent transparent rgba(249, 249, 249, 1);
-}
-
-
-
-/* ############## Tables ############## */
-
-/* Globals */
-
-table {
- border-spacing: 0;
- width: 100% !important;
-}
-
-
-
-/* -- -- -- Table Header -- -- -- */
-
-thead th {
- font-size: 87%;
- white-space: nowrap;
-}
-
-thead th:first-child {
- /* Rounded corners for the first table header cell
- (only in effect if the table is not inside a "div" with class ".boxTitle") */
- .mxBorderRadiusTL;
-}
-
-thead th:last-child {
- /* Rounded corners for the last table header cell
- (only in effect if the table is not inside a "div" with class ".boxTitle") */
- .mxBorderRadiusTR;
-}
-
-thead th {
- text-shadow: 0 -1px 0 @textShadowColor1;
- color: @fontColor31;
- border-right: 1px @borderStyle rgba(0, 0, 0, .2);
-
- background-color: fade(@backColor5, 30%);
- background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
- background-image: -khtml-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
- background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
- background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
- background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
- background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
-
- padding: 7px;
-
- .mxTransition1 (background, .2s);
-}
-
-thead th a {
- text-shadow: 0 -1px 0 @textShadowColor1;
- text-decoration: none !important;
- color: @fontColor31;
- margin: -7px;
- padding: 7px;
- display: block;
-}
-
-thead th:last-child a {
- border-right-width: 0;
-}
-
-thead th:hover a {
- color: @fontColor1;
- background-color: fade(@backColor5, 20%);
-}
-
-thead th a:active,
-thead th a:focus,
-thead th.active a {
- color: @fontColor1;
- background-color: fade(@backColor5, 10%);
-
- -webkit-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4);
- -khtml-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4);
- -moz-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4);
- -ms-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4);
- -o-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4);
- box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4);
-}
-
-thead th.active a {
- font-weight: bold;
-}
-
-thead th.active:hover a {
- background-color: fade(@backColor5, 30%);
-}
-
-thead th a img {
- /* ToDo: Sort-icon orientation does not work */
- text-align: right;
- /* Negative margins to prevent table-cells from expanding vertically when the sort-icon shows up */
- margin-top: -5px !important;
- margin-bottom: -5px !important;
-}
-
-
-
-/* -- -- -- Table Body -- -- -- */
-
-tbody tr {
- border-bottom: 1px solid rgba(255, 255, 255, .3);
-}
-
-tbody tr:last-child {
- /* No border for the last table row */
- border-bottom-width: 0;
-}
-
-tbody tr:last-child td:first-child {
- /* Rounded corners for the first table cell in the last row */
- .mxBorderRadiusBL;
-}
-
-tbody tr:last-child td:last-child {
- /* Rounded corners for the last table cell in the last row */
- .mxBorderRadiusBR;
-}
-
-tbody td {
- background-color: #fcfdfe;
- border-right: 1px @borderStyle rgba(255, 255, 255, .3);
- padding: 5px;
-
- .mxTransition1 (background);
-}
-
-tbody td:last-child {
- border-right-width: 0;
-}
-
-tbody tr:nth-child(2n+1) td {
- /* Auto-colorer for every 2nd row */
- background-color: #f2f6fa;
-}
-
-tbody tr:hover td {
- background-color: #d8e7f5;
-}
-
-
-
-/* -- -- -- Special -> Table Header -- -- -- */
-
-.wcf-menu ~ .wcf-box thead th:first-child { /* ToDo: Does this case really exist any more? */
- .mxBorderRadiusTL (0) !important;
-}
-
-.wcf-menu ~ .wcf-box thead th:last-child { /* ToDo: Does this case really exist any more? */
- .mxBorderRadiusTR (0) !important;
-}
-
-.wcf-boxTitle > hgroup + table th:first-child, /* Boxes with a title bar */
-.wcf-boxTitle > nav + table th:first-child { /* Boxes with a menu in the title bar */
- .mxBorderRadiusTL (0) !important;
-}
-
-.wcf-boxTitle > hgroup + table th:last-child, /* Boxes with a title bar */
-.wcf-boxTitle > .wcf-menu + table th:last-child { /* Boxes with a menu in the title bar */
- .mxBorderRadiusTR (0) !important;
-}
-
-
-
-/* -- -- -- Special -> Checkboxes in Table Headers -- -- -- */
-
-thead input[type='checkbox'] {
- margin-top: -5px !important;
- margin-bottom: -5px !important;
-}
-
-
-
-/* -- -- -- ToDo: Table Column Formats -- -- -- */
-
-.columnMark,
-.columnStatus {
- text-align: center;
- width: 1% !important;
- white-space: nowrap;
-}
-
-.columnStatus .wcf-badge {
- margin-right: 1px !important;
- margin-left: 1px !important;
-}
-
-.columnDigits,
-.columnID {
- text-align: right;
- width: 1% !important;
- white-space: nowrap;
-}
-
-.columnIcon {
- text-align: left;
- width: 1% !important;
- white-space: nowrap;
-}
-
-tr img[src$="D.svg"] {
- cursor: not-allowed;
-}
-
-tr .columnIcon img {
- height: 16px;
- width: 16px;
-}
-
-.big .columnIcon img {
- height: 24px;
- width: 24px;
-}
-
-.columnTitle {
- font-weight: bold;
- text-align: left;
-}
-
-.columnText {
- font-weight: normal;
- text-align: left;
- max-width: 20%;
-}
-
-.columnDate,
-.columnRegistrationDate {
- font-size: 85%;
- text-align: right;
- width: 1% !important;
- white-space: nowrap;
-}
-
-.columnURL {
- font-size: 85%;
- text-align: left;
-}
-
-
-
-/* ############## ToDo: Page Navigation ############## */
-
-/**
- * This defines the shape of the Page-Navigation widget
- * Colors & effects are being defined by the
- * "Global Button Color & Effect Library"
- */
-
-/* Globals */
-
-:not(.wcf-statusDisplay) > .wcf-pageNavigation {
- margin: 5px 0 3px;
- float: left;
-}
-
-/* -- -- -- Buttons (Level 1 & 2) -- -- -- */
-
-.wcf-pageNavigation ul li {
- font-weight: bold;
- text-align: center;
- .mxBorderRadius (3px);
- margin: 1px;
- float: left;
- min-width: 19px;
-}
-
-.wcf-contentHeader .wcf-pageNavigation ul li,
-.wcf-contentFooter .wcf-pageNavigation ul li {
- margin: 2px;
-}
-
-.wcf-pageNavigation ul li:not(.active):not(.disabled) {
- cursor: pointer;
-}
-
-.wcf-pageNavigation ul li.disabled {
- cursor: not-allowed;
- border: 1px @borderStyleButton rgba(0, 0, 0, .1) !important;
- background-image: none !important;
-}
-
-.wcf-pageNavigation ul li img {
- height: 16px;
- width: 16px;
-}
-
-.wcf-pageNavigation ul li.skip {
- padding: 2px 0 1px;
-}
-
-.wcf-pageNavigation ul li a {
- text-shadow: 0 1px 0 @textShadowColor2;
- text-decoration: none;
- color: @fontColor53;
- display: inline-block;
-}
-
-.wcf-pageNavigation ul li:not(.disabled):hover a {
- color: @fontColor52;
-}
-
-.wcf-pageNavigation ul li:not(.skip) a {
- padding: 3px 1px;
-}
-
-.wcf-pageNavigation ul li:active a,
-.wcf-pageNavigation ul li:focus a {
- color: @fontColor52;
-}
-
-.wcf-pageNavigation ul li.active,
-.wcf-pageNavigation ul li.active:hover {
- text-shadow: 0 1px 0 @textShadowColor1 !important;
- color: @fontColor1 !important;
- border: 1px @borderStyleButton rgba(0, 0, 0, .3) !important;
-
- background-color: rgba(0, 0, 0, .5) !important;
- background-image: -webkit-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important;
- background-image: -khtml-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important;
- background-image: -moz-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important;
- background-image: -o-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important;
- background-image: -ms-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important;
- background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important;
-
- padding: 3px 0;
-}
-
-/* -- -- -- ToDo: Children (Level 2) -- -- -- */
-
-/* Buttons */
-
-.wcf-pageNavigation ul li.children {
- position: relative;
-}
-
-.wcf-pageNavigation ul li.children > a {
- margin-right: -10px;
- position: relative;
- z-index: 10;
-}
-
-.wcf-pageNavigation ul li.children input {
- margin-left: 1px;
- width: 30px;
- height: 9px;
-}
-
-.wcf-pageNavigation ul li.children img {
- position: relative;
- width: 7px;
- height: 9px;
- bottom: 1px;
- left: 25px;
-}
-
-/* Dropdown */
-
-.wcf-pageNavigation ul li.children .wcf-dropdown {
- text-align: left;
- border-color: transparent;
- .mxBorderRadius (3px);
- background-color: fade(@backColor5, 70%);
- margin-top: 28px;
- margin-left: -2px;
- padding: 2px 1px;
- display: inline-block;
- position: absolute;
- height: 0;
- overflow: hidden;
- min-width: 165px;
- max-width: 250px;
- opacity: 0;
-
- .mxTransition1 (opacity, .2s);
-}
-
-.wcf-pageNavigation ul li.children:hover .wcf-dropdown {
- border-color: rgba(255, 255, 255, .7);
- height: auto;
- overflow: visible;
- opacity: 1;
-}
-
-.wcf-pageNavigation ul li.children .wcf-dropdown ul {
- padding: 0 5px 5px 2px;
- display: block;
-}
-
-.wcf-pageNavigation ul li.children .wcf-dropdown ul li {
- margin: 2px 3px;
-}
-
-/* Pointer */
-
-.wcf-pageNavigation ul li.children .pointer {
- border-width: 0 7px 7px;
- border-style: solid;
- border-color: rgba(255, 255, 255, .7) transparent;
- display: inline-block !important;
- width: 0;
- position: absolute;
- top: -7px !important;
- left: 11px;
-}
-
-.wcf-pageNavigation ul li.children .pointer span {
- border-width: 0 5px 5px;
- border-style: solid;
- border-color: rgba(0, 0, 0, .7) transparent;
- display: inline-block;
- width: 0;
- position: absolute;
- top: 2px;
- left: -5px;
-}
-
-/* Special -> Status Display */
-
-.wcf-statusDisplay .wcf-pageNavigation {
- font-size: 80%;
-}
-
-.wcf-statusDisplay .wcf-pageNavigation ul li {
- min-width: 13px;
-}
-
-.wcf-statusDisplay .wcf-pageNavigation ul li:not(.skip) a {
- padding: 1px;
-}
-
-
-
-/* ############## System Notifications (Inline) ############## */
-
-/* Globals */
-
-.wcf-info,
-.wcf-error,
-.wcf-success,
-.wcf-warning {
- text-shadow: 0 1px 0 @textShadowColor2;
- line-height: 1.5;
- .mxBorderRadius (7px);
- margin-top: 15px;
- padding: 7px 15px 7px 50px;
- box-sizing: border-box;
-}
-
-/* Types */
-
-.wcf-info {
- color: #68b;
- border: 1px @borderStyle #9be;
- background-color: #def;
-
- background-image: url('../icon/systemInfo.svg'), -webkit-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px);
- background-image: url('../icon/systemInfo.svg'), -khtml-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px);
- background-image: url('../icon/systemInfo.svg'), -moz-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px);
- background-image: url('../icon/systemInfo.svg'), -ms-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px);
- background-image: url('../icon/systemInfo.svg'), -o-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px);
- background-image: url('../icon/systemInfo.svg'), repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px);
-
- background-size: 24px, auto;
- background-position: 13px center, left top;
- background-repeat: no-repeat, repeat;
-}
-
-.wcf-success {
- color: #090;
- border: 1px @borderStyle #0c0;
- background-color: #efe;
-
- background-image: url('../icon/systemSuccess.svg'), -webkit-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
- background-image: url('../icon/systemSuccess.svg'), -khtml-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
- background-image: url('../icon/systemSuccess.svg'), -moz-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
- background-image: url('../icon/systemSuccess.svg'), -ms-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
- background-image: url('../icon/systemSuccess.svg'), -o-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
- background-image: url('../icon/systemSuccess.svg'), repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-
- background-size: 24px, auto;
- background-position: 13px center, left top;
- background-repeat: no-repeat, repeat;
-
-}
-
-.wcf-warning {
- color: #990;
- border: 1px @borderStyle #cc0;
- background-color: #ffd;
-
- background-image: url('../icon/systemWarning.svg'), -webkit-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
- background-image: url('../icon/systemWarning.svg'), -khtml-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
- background-image: url('../icon/systemWarning.svg'), -moz-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
- background-image: url('../icon/systemWarning.svg'), -ms-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
- background-image: url('../icon/systemWarning.svg'), -o-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
- background-image: url('../icon/systemWarning.svg'), repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-
- background-size: 24px, auto;
- background-position: 13px center, left top;
- background-repeat: no-repeat, repeat;
-}
-
-.wcf-error {
- color: #c00;
- border: 1px @borderStyle #f99;
- background-color: #fee;
-
- background-image: url('../icon/systemError.svg'), -webkit-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
- background-image: url('../icon/systemError.svg'), -khtml-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
- background-image: url('../icon/systemError.svg'), -moz-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
- background-image: url('../icon/systemError.svg'), -ms-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
- background-image: url('../icon/systemError.svg'), -o-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
- background-image: url('../icon/systemError.svg'), repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
-
- background-size: 24px, auto;
- background-position: 13px center, left top;
- background-repeat: no-repeat, repeat;
-}
-
-/* Inline Errors */
-
-.wcf-innerError {
- text-shadow: 0 1px 0 @textShadowColor2;
- line-height: 1.5;
- color: #c00;
- border: 1px @borderStyle #f99;
- .mxBorderRadius (7px);
- background-color: rgba(255, 238, 238, 1);
- background-image: url('../icon/systemError.svg');
- background-size: 16px;
- background-position: 5px center;
- background-repeat: no-repeat;
- margin-top: 5px;
- padding: 2px 10px 2px 25px;
- display: table !important;
- position: relative; /* Firefox support (from version 10 on) is buggy */
- clear: both;
-
- -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
- -khtml-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
- -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
- -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
- -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
- box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
-}
-
-.wcf-innerError .pointer {
- border-width: 0 7px 7px;
- border-style: solid;
- border-color: #f99 transparent;
- display: inline-block !important;
- width: 0;
- position: absolute;
- top: -7px !important;
- left: 10%;
-}
-
-.wcf-innerError .pointer span {
- border-width: 0 5px 5px;
- border-style: solid;
- border-color: rgba(255, 238, 238, 1) transparent;
- display: inline-block;
- width: 0;
- position: absolute;
- top: 2px;
- left: -5px;
-}
-
-/* Special -> Pre Input */
-
-.wcf-preInput ~ .wcf-innerError .pointer {
- right: 10%;
- left: auto;
-}
-
-
-
-/* ############## ToDo: System Notifications (Sheet) ############## */
-
-/* Globals */
-
-.wcf-systemNotification { /* declarations taken from .success */
- background-color: rgba(238, 255, 238, 1);
- border: @borderWidth @borderStyle rgba(0, 204, 0, 1);
- border-top-width: 0;
- border-radius: 0 0 5px 5px;
- color: rgba(0, 153, 0, 1);
- left: 40%;
- padding: 14px;
- padding-top: 10px;
- position: fixed;
- text-align: center;
- top: -38px;
- width: auto;
- z-index: 500;
-
- .mxTransition1 (top, .5s);
-}
-
-.wcf-systemNotification.open {
- top: 0;
-}
-
-
-
-/* ############## ToDo: WCF Dialog ############## */
-
-/* Globals */
-
-.wcf-dialogContainer {
- border: 23px @borderStyle transparent;
- .mxBorderRadius (15px);
- background-color: fade(@backColor5, 40%);
- margin-right: auto !important;
- margin-left: auto !important;
- position: fixed !important;
-
- -webkit-box-shadow: 0 1px 23px rgba(0, 0, 0, .3);
- -khtml-box-shadow: 0 1px 23px rgba(0, 0, 0, .3);
- -moz-box-shadow: 0 1px 23px rgba(0, 0, 0, .3);
- -ms-box-shadow: 0 1px 23px rgba(0, 0, 0, .3);
- -o-box-shadow: 0 1px 23px rgba(0, 0, 0, .3);
- box-shadow: 0 1px 23px rgba(0, 0, 0, .3);
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .wcf-dialogContainer {
- min-width: 500px !important;
- max-width: 780px !important;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .wcf-dialogContainer {
- min-width: 200px !important;
- max-width: 380px !important;
- }
-
-}
-
-/* Titlebar */
-
-.wcf-dialogTitlebar {
- border-bottom: @borderWidth @borderStyle #036;
- .mxBorderRadiusTL (7px);
- .mxBorderRadiusTR (7px);
- background-color: @backColor3;
- background-image: @backImage;
- background-position: left top;
- background-repeat: repeat-x;
- padding: 10px 20px;
- position: relative;
- display: block;
-}
-
-.wcf-dialogTitle {
- font-size: 170%;
- font-weight: bold;
- text-shadow: 0 -1px 0 @textShadowColor1;
- color: @fontColor1;
- display: block;
-}
-
-.wcf-dialogCloseButton {
- background-image: url('../icon/delete2.svg');
- background-size: 32px;
- background-position: top left;
- background-repeat: no-repeat;
- position: absolute !important;
- width: 32px;
- height: 32px;
- top: 5px;
- right: 10px;
- cursor: pointer;
-}
-
-.wcf-dialogCloseButton span {
- /* Removes the button-caption */
- position: absolute;
- left: -9000px;
- top: -9000px;
- width: 0;
-}
-
-/* Content */
-
-.wcf-dialogContent {
- color: @fontColor11;
- background-color: @backColor51;
- overflow: auto;
-}
-
-.wcf-dialogContent a {
- color: @fontColor2;
-}
-
-.wcf-dialogContent a:hover {
- color: @fontColor1;
-}
-
-.wcf-dialogContainer > .wcf-dialogContent {
- .mxBorderRadius (7px);
- padding: 0;
- /*width: auto !important;*/
-}
-
-.wcf-dialogTitlebar ~ .wcf-dialogContent {
- .mxBorderRadiusTL (0);
- .mxBorderRadiusTR (0);
- .mxBorderRadiusBL (7px);
- .mxBorderRadiusBR (7px);
- padding: 10px 20px 20px;
-}
-
-/* Special */
-
-#ajaxExceptionStacktrace {
- white-space: nowrap;
- overflow: scroll;
- overflow-y: hidden;
-}
-
-#ajaxExceptionStacktrace {
- font-family: monospace;
- font-size: 90%;
- line-height: 1.2;
- border: 1px @borderStyle #ccc;
- padding: 3px;
-}
-
-
-
-/* ############## ToDo: Overlay Spinner ############## */
-
-.wcf-dialogOverlay {
- background-color: fade(@backColor5, 50%);
- position: fixed;
- width: 100% !important;
- top: 0;
- left: 0;
-}
-
-
-/* ToDo: What is that and change that class-name! */
-
-.wcf-overlayLoading {
- background-color: @backColor1;
- background-image: url('../icon/spinner1.svg');
- background-position: center center;
- background-size: 32px;
- background-repeat: no-repeat;
-}
-
-
-
-/* ############## Balloon Tooltips ############## */
-
-/* Globals */
-
-.jsTooltip { /* Do not change this style */
- cursor: pointer;
-}
-
-.wcf-balloonTooltip {
- font-size: .85em;
- color: @fontColor1;
- border: 1px @borderStyle rgba(255, 255, 255, .7);
- .mxBorderRadius;
- background-color: fade(@backColor5, 70%);
- padding: 5px 10px 7px;
- position: absolute;
- max-width: 300px;
- z-index: 800;
-
- -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
- -khtml-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
- -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
- -ms-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
- -o-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
- box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
-}
-
-/* Pointer */
-
-.wcf-balloonTooltip .pointer {
- border-width: 0 7px 7px;
- border-style: solid;
- border-color: rgba(255, 255, 255, .7) transparent;
- display: inline-block !important;
- width: 0;
- position: absolute;
- top: -7px !important;
- left: 50%;
-}
-
-.wcf-balloonTooltip .pointer span {
- border-width: 0 5px 5px;
- border-style: solid;
- border-color: rgba(0, 0, 0, .7) transparent;
- display: inline-block;
- width: 0;
- position: absolute;
- top: 2px;
- left: -5px;
-}
-
-
-
-/* ############## ToDo: Likes Widget ############## */
-
-/* @see theadPostList.tpl */
-
-/**
- * This defines the shape of the Likes widget
- * Colors & effects are being defined by the
- * "Global Button Color & Effect Library"
- */
-
-/* -- -- -- -- Widget -- -- -- -- -- */
-
-/* Globals */
-
-.wcf-likesWidget {
- margin: 0 0 0 15px;
-}
-
-/* Buttons */
-
-.wcf-likesWidget > ul {
- float: right;
- margin-right: 7px;
- margin-left: 10px;
-}
-
-.wcf-likesWidget > ul > li {
- text-align: right;
- margin-top: 3px;
- display: inline-block;
-}
-
-.wcf-likesWidget > ul > li > a {
- padding: 2px 4px 3px;
-}
-
-.wcf-likesWidget > ul > li:first-child {
- margin-right: -5px;
-}
-
-
-
-/* ############## ToDo: Clipboard Editor Buttons ############## */
-
-/* Globals */
-
-.wcf-clipboardEditor > ul > li {
- font-size: .85em;
- .mxBorderRadius (30px);
- margin-top: 7px;
- margin-right: 3px;
- margin-left: 3px;
- float: left;
- position: relative;
-}
-
-.wcf-clipboardEditor > ul > li span {
- text-decoration: none !important;
- cursor: pointer;
- background-image: url('../icon/dropdown1.svg');
- background-position: right center;
- background-repeat: no-repeat;
- margin-right: 5px;
- padding: 3px 12px 5px 10px;
- display: inline-block;
-}
-
-
-
-/* ############## ToDo: CK-Editor ############## */
-
-.wcf-wideEditor dt {
- display: none;
-}
-
-.wcf-wideEditor dd {
- margin-left: 0;
-}
-
-
-
-/* ############## Global Button Color & Effect Library ############## */
-
-/**
- * This defines the colors & effects of Button elements
- * Define the shape of the element in a separate class
- */
-
-/* -- -- -- Normal Buttons -- -- -- */
-
-/* Normal State */
-
-.wcf-button,
-input[type='reset']:not([disabled]),
-input[type='submit']:not([disabled]),
-input[type='button']:not([disabled]),
-button:not([disabled]) {
- text-decoration: none;
- text-shadow: 0 1px 0 @textShadowColor2;
- color: @fontColorButton1;
- border-width: @borderWidthButton;
- border-style: @borderStyleButton;
- border-color: @borderColorButtonTop1 @borderColorButtonSide1 @borderColorButtonBottom1;
-
- background-color: @backColorButton1;
- background-image: -webkit-linear-gradient(@backColorButton11, @backColorButton1 2px, @backColorButton12);
- background-image: -khtml-linear-gradient(@backColorButton11, @backColorButton1 2px, @backColorButton12);
- background-image: -moz-linear-gradient(@backColorButton11, @backColorButton1 2px, @backColorButton12);
- background-image: -ms-linear-gradient(@backColorButton11, @backColorButton1 2px, @backColorButton12);
- background-image: -o-linear-gradient(@backColorButton11, @backColorButton1 2px, @backColorButton12);
- background-image: linear-gradient(@backColorButton11, @backColorButton1 2px, @backColorButton12);
-
- -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
- -khtml-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
- -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
- -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
- -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
- box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
-
- -webkit-transition-property: border, box-shadow, background-color, background-image, color;
- -webkit-transition-duration: .1s;
- -webkit-transition-timing-function: linear;
-
- -khtml-transition-property: border, box-shadow, background-color, background-image, color;
- -khtml-transition-duration: .1s;
- -khtml-transition-timing-function: linear;
-
- -moz-transition-property: border, box-shadow, background-color, background-image, color;
- -moz-transition-duration: .1s;
- -moz-transition-timing-function: linear;
-
- -ms-transition-property: border, box-shadow, background-color, background-image, color;
- -ms-transition-duration: .1s;
- -ms-transition-timing-function: linear;
-
- -o-transition-property: border, box-shadow, background-color, background-image, color;
- -o-transition-duration: .1s;
- -o-transition-timing-function: linear;
-
- transition-property: border, box-shadow, background-color, background-image, color;
- transition-duration: .1s;
- transition-timing-function: linear;
-}
-
-/* Hover State */
-
-.wcf-button:hover,
-.default .wcf-button:hover,
-input[type='reset']:not([disabled]):hover,
-input[type='submit']:not([disabled]):hover,
-input[type='button']:not([disabled]):hover,
-button:not([disabled]):hover {
- text-decoration: none;
- color: @fontColorButton2;
- border-style: @borderStyleButton;
- border-color: @borderColorButtonTop2 @borderColorButtonSide2 @borderColorButtonBottom2;
-
- background-color: @backColorButton2;
- background-image: -webkit-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22);
- background-image: -khtml-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22);
- background-image: -moz-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22);
- background-image: -ms-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22);
- background-image: -o-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22);
- background-image: linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22);
-}
-
-/* Active State */
-
-.wcf-button:focus,
-.default .wcf-button:focus,
-input[type='reset']:not([disabled]):focus,
-input[type='submit']:not([disabled]):focus,
-input[type='button']:not([disabled]):focus,
-button:not([disabled]):focus,
-
-.wcf-button:active,
-.active .wcf-button,
-.default .wcf-button:active,
-input[type='reset']:not([disabled]):active,
-input[type='submit']:not([disabled]):active,
-input[type='button']:not([disabled]):active,
-button:not([disabled]):active {
- color: @fontColorButton2;
- border-style: @borderStyleButton;
- border-color: @borderColorButtonTop2 @borderColorButtonSide2 @borderColorButtonBottom2;
-
- background-color: @backColorButton2;
- background-image: -webkit-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22);
- background-image: -khtml-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22);
- background-image: -moz-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22);
- background-image: -ms-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22);
- background-image: -o-linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22);
- background-image: linear-gradient(@backColorButton21, @backColorButton2 2px, @backColorButton22);
-
- -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -khtml-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-}
-
-
-
-/* -- -- -- Default Buttons -- -- -- */
-
-/* Default State Glow */
-
-@-webkit-keyframes glowButtons {
- 0% {
- -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5);
- }
- 100% {
- -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1);
- }
-}
-/* LESS doesn't like that! Wtf?
-@-khtml-keyframes glowButtons {
- 0% {
- -khtml-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5);
- }
- 100% {
- -khtml-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1);
- }
-}
-*/
-@-moz-keyframes glowButtons {
- 0% {
- -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5);
- }
- 100% {
- -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1);
- }
-}
-@-ms-keyframes glowButtons {
- 0% {
- -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5);
- }
- 100% {
- -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1);
- }
-}
-/* disabled to ease rendering work for Opera
-@-o-keyframes glowButtons {
- 0% {
- -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5);
- }
- 100% {
- -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1);
- }
-}
-*/
-@keyframes glowButtons {
- 0% {
- box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5);
- }
- 100% {
- box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1);
- }
-}
-
-/* Default Normal State */
-
-.default .wcf-button,
-input[type='submit']:not([disabled]),
-input[type='button']:not([disabled]).default,
-button:not([disabled]).default {
- color: @fontColorButton3;
- border-width: @borderWidthButton;
- border-style: @borderStyleButton;
- border-color: @borderColorButtonTop3 @borderColorButtonSide3 @borderColorButtonBottom3;
-
- background-color: @backColorButton3;
- background-image: -webkit-linear-gradient(@backColorButton31, @backColorButton3 2px, @backColorButton32);
- background-image: -khtml-linear-gradient(@backColorButton31, @backColorButton3 2px, @backColorButton32);
- background-image: -moz-linear-gradient(@backColorButton31, @backColorButton3 2px, @backColorButton32);
- background-image: -ms-linear-gradient(@backColorButton31, @backColorButton3 2px, @backColorButton32);
- background-image: -o-linear-gradient(@backColorButton31, @backColorButton3 2px, @backColorButton32);
- background-image: linear-gradient(@backColorButton31, @backColorButton3 2px, @backColorButton32);
-
- -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369;
- -khtml-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369;
- -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369;
- -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369;
- -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369;
- box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369;
-
- -webkit-animation-name: glowButtons;
- -webkit-animation-duration: 1s;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-direction: alternate;
- -webkit-animation-timing-function: ease-in-out;
-
- -khtml-animation-name: glowButtons;
- -khtml-animation-duration: 1s;
- -khtml-animation-iteration-count: infinite;
- -khtml-animation-direction: alternate;
- -khtml-animation-timing-function: ease-in-out;
-
- -moz-animation-name: glowButtons;
- -moz-animation-duration: 1s;
- -moz-animation-iteration-count: infinite;
- -moz-animation-direction: alternate;
- -moz-animation-timing-function: ease-in-out;
-
- -ms-animation-name: glowButtons;
- -ms-animation-duration: 1s;
- -ms-animation-iteration-count: infinite;
- -ms-animation-direction: alternate;
- -ms-animation-timing-function: ease-in-out;
- /* disabled to ease rendering work for Opera
- -o-animation-name: glowButtons;
- -o-animation-duration: 1s;
- -o-animation-iteration-count: infinite;
- -o-animation-direction: alternate;
- -o-animation-timing-function: ease-in-out;
- */
- animation-name: glowButtons;
- animation-duration: 1s;
- animation-iteration-count: infinite;
- animation-direction: alternate;
- animation-timing-function: ease-in-out;
-}
-
-/* Default Hover State Glow */
-
-@-webkit-keyframes glowButtonsHover {
- 0% {
- -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3);
- }
- 100% {
- -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1);
- }
-}
-/* LESS doesn't like that! Wtf?
-@-khtml-keyframes glowButtonsHover {
- 0% {
- -khtml-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3);
- }
- 100% {
- -khtml-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1);
- }
-}
-*/
-@-moz-keyframes glowButtonsHover {
- 0% {
- -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3);
- }
- 100% {
- -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1);
- }
-}
-@-ms-keyframes glowButtonsHover {
- 0% {
- -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3);
- }
- 100% {
- -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1);
- }
-}
-/* disabled to ease rendering work for Opera
-@-o-keyframes glowButtonsHover {
- 0% {
- -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3);
- }
- 100% {
- -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1);
- }
-}
-*/
-@keyframes glowButtonsHover {
- 0% {
- box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3);
- }
- 100% {
- box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1);
- }
-}
-
-/* Default Hover State */
-
-.default .wcf-button:hover,
-input[type='submit']:not([disabled]):hover,
-input[type='button']:not([disabled]).default:hover,
-button:not([disabled]).default:hover {
- -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2;
- -khtml-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2;
- -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2;
- -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2;
- -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2;
- box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2;
-
- -webkit-animation-name: glowButtonsHover;
- -webkit-animation-duration: 1s;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-direction: alternate;
- -webkit-animation-timing-function: ease-in-out;
-
- -khtml-animation-name: glowButtonsHover;
- -khtml-animation-duration: 1s;
- -khtml-animation-iteration-count: infinite;
- -khtml-animation-direction: alternate;
- -khtml-animation-timing-function: ease-in-out;
-
- -moz-animation-name: glowButtonsHover;
- -moz-animation-duration: 1s;
- -moz-animation-iteration-count: infinite;
- -moz-animation-direction: alternate;
- -moz-animation-timing-function: ease-in-out;
-
- -ms-animation-name: glowButtonsHover;
- -ms-animation-duration: 1s;
- -ms-animation-iteration-count: infinite;
- -ms-animation-direction: alternate;
- -ms-animation-timing-function: ease-in-out;
- /* disabled to ease rendering work for Opera
- -o-animation-name: glowButtonsHover;
- -o-animation-duration: 1s;
- -o-animation-iteration-count: infinite;
- -o-animation-direction: alternate;
- -o-animation-timing-function: ease-in-out;
- */
- animation-name: glowButtonsHover;
- animation-duration: 1s;
- animation-iteration-count: infinite;
- animation-direction: alternate;
- animation-timing-function: ease-in-out;
-}
-
-/* Default Active State Glow */
-
-@-webkit-keyframes glowDefaultButtonsActive {
- 0% {
- -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
- }
- 100% {
- -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
- }
-}
-/* LESS doesn't like that! Wtf?
-@-khtml-keyframes glowDefaultButtonsActive {
- 0% {
- -khtml-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
- }
- 100% {
- -khtml-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
- }
-}
-*/
-@-moz-keyframes glowDefaultButtonsActive {
- 0% {
- -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
- }
- 100% {
- -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
- }
-}
-@-ms-keyframes glowDefaultButtonsActive {
- 0% {
- -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
- }
- 100% {
- -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
- }
-}
-/* disabled to ease rendering work for Opera
-@-o-keyframes glowDefaultButtonsActive {
- 0% {
- -o-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
- }
- 100% {
- -o-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
- }
-}
-*/
-@keyframes glowDefaultButtonsActive {
- 0% {
- box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
- }
- 100% {
- box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
- }
-}
-
-/* Default Active State */
-
-.default .wcf-button:focus,
-input[type='submit']:not([disabled]):focus,
-input[type='button']:not([disabled]).default:focus,
-button:not([disabled]).default:focus,
-
-.default .wcf-button:active,
-input[type='submit']:not([disabled]):active,
-input[type='button']:not([disabled]).default:active,
-button:not([disabled]).default:active {
- -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-
- -webkit-animation-name: glowDefaultButtonsActive;
- -webkit-animation-duration: 1s;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-direction: alternate;
- -webkit-animation-timing-function: ease-in-out;
-
- -khtml-animation-name: glowDefaultButtonsActive;
- -khtml-animation-duration: 1s;
- -khtml-animation-iteration-count: infinite;
- -khtml-animation-direction: alternate;
- -khtml-animation-timing-function: ease-in-out;
-
- -moz-animation-name: glowDefaultButtonsActive;
- -moz-animation-duration: 1s;
- -moz-animation-iteration-count: infinite;
- -moz-animation-direction: alternate;
- -moz-animation-timing-function: ease-in-out;
-
- -ms-animation-name: glowDefaultButtonsActive;
- -ms-animation-duration: 1s;
- -ms-animation-iteration-count: infinite;
- -ms-animation-direction: alternate;
- -ms-animation-timing-function: ease-in-out;
- /* disabled to ease rendering work for Opera
- -o-animation-name: glowDefaultButtonsActive;
- -o-animation-duration: 1s;
- -o-animation-iteration-count: infinite;
- -o-animation-direction: alternate;
- -o-animation-timing-function: ease-in-out;
- */
- animation-name: glowDefaultButtonsActive;
- animation-duration: 1s;
- animation-iteration-count: infinite;
- animation-direction: alternate;
- animation-timing-function: ease-in-out;
-}
-
-
-
-/* -- -- -- Special Buttons -- -- -- */
-
-/* Disabled State */
-
-.disabled .wcf-button,
-input[disabled],
-input[type='button'][disabled],
-button[disabled] {
- color: lighten(@fontColorButton1, 20%);
- cursor: default;
- border-style: @borderStyleButton;
- border-color: lighten(@borderColorButtonTop1, 10%) lighten(@borderColorButtonSide1, 10%) lighten(@borderColorButtonBottom1, 10%);
- background-color: transparent;
-}
-
-
-
-/* ############## ACP Package List ############## */
-
-/* -- -- -- Application Package -- -- -- */
-
-/* Globals */
-
-.wcf-infoPackageApplication {
- position: relative;
-}
-
-.wcf-infoPackageApplication .wcf-packageApplicationIcon {
- position: absolute;
- top: 30px;
- left: 25px;
- width: 96px;
- height: 96px;
-}
-
-.wcf-infoPackageApplication div {
- margin-bottom: -15px;
- margin-left: 30px;
-}
-
-.wcf-infoPackageApplication footer {
- position: relative;
- right: -15px;
- bottom: -15px;
-}
-
-.wcf-infoPackageApplication footer nav {
- /* General toggle switch for package nav-bar orientation (options: left|center|right) */
- text-align: right;
-}
-
-
-
-/* -- -- -- Package Plugin -- -- -- */
-
-/* Globals */
-
-.wcf-infoPackagePlugin {
- text-align: center;
- margin: 15px 10px 0 0;
- display: inline-block;
- position: relative;
- width: 150px;
- height: 150px;
- overflow: hidden;
-
- .mxTransition1 (background border color); /* This multiple shorthand format seems to be deprecated! */
-}
-
-.wcf-infoPackagePlugin a {
- text-decoration: none;
-}
-
-.wcf-infoPackagePlugin > div > a {
- color: @fontColor53;
- background-size: 96px;
- background-position: center 70%;
- background-repeat: no-repeat;
- margin: 1px;
- display: block;
- position: relative;
- width: 148px;
- height: 148px;
-}
-
-.wcf-infoPackagePlugin:hover > div > a {
- color: @fontColor52;
-}
-
-.wcf-infoPackagePlugin > div > a > h1 { /* ToDo: h1 inside a ??? */
- font-size: 100%;
- font-weight: bold;
- text-shadow: 0 1px 0 @textShadowColor2;
- word-wrap: break-word;
- margin: 0 -1px;
- padding: 3px 1px;
- display: block;
- position: relative;
- z-index: 100;
-}
-
-.wcf-infoPackagePlugin:hover > div > a > h1 {
- border-bottom: 1px @borderStyle rgba(204, 204, 204, 1);
-
- background-color: rgba(0, 0, 0, .015);
- background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
- background-image: -khtml-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
- background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
- background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
- background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
- background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
-}
-
-.wcf-infoPackagePlugin footer {
- margin-top: -22px;
- width: 100%;
-}
-
-.wcf-infoPackagePlugin > div > a > small {
- font-size: 85%;
- font-weight: normal;
- text-shadow: none;
- .mxBorderRadius (7px);
- padding: 40px 5px;
- display: block;
- position: absolute;
- top: 0;
- bottom: 0;
- width: 139px;
- opacity: 0;
-
- .mxTransition1 (opacity);
-}
-
-.wcf-infoPackagePlugin:hover > div > a > small {
- background-color: rgba(255, 255, 255, .9);
- z-index: 10;
- opacity: 1;
-}
-
-
-
-/* -- -- -- Package Footers -- -- -- */
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .wcf-infoPackageApplication footer nav,
- .wcf-infoPackagePlugin footer nav {
- opacity: 0;
-
- .mxTransition1 (opacity);
- }
-
- .wcf-infoPackageApplication:hover footer nav,
- .wcf-infoPackagePlugin:hover footer nav {
- opacity: 1;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .wcf-infoPackageApplication footer nav,
- .wcf-infoPackagePlugin footer nav {
- opacity: 1;
- }
-
-}
-
-
-
-/* ############## TODO: Sortable lists ############## */
-
-/* TODO: Everything is working right now and looks pretty much like similar stuff. Adjust the colors, but take care
- when changing margins/paddings. Keep them relative to each other, otherwise you might encounter a strange
- behavior (in rare cases) which might lead to a situation where you will be unable to move an item properly. - Alex */
-
-/* This is the placeholder (or ghost) which will be inserted on runtime in order to show the possible insertation point - Alex */
-.wcf-sortableListContainer .wcf-badgeYellow {
- .mxBorderRadius;
- margin: 3px 0;
- padding: 4px;
-}
-
-/* TODO: This was taken from badgeRed and is used to indicate a list which is not a valid drop target */
-.wcf-badgeYellow.wcf-sortableInvalidTarget {
- color: #c00;
- border: @borderWidth @borderStyle #f99;
- background-color: #fee;
-}
-
-/* Notice: min-height was safely removed */
-.wcf-sortableList {
- list-style-position: outside;
- list-style-type: decimal;
- margin-left: 21px;
-}
-
-.wcf-sortableNode {
- cursor: move;
-}
-
-.wcf-sortableNodeLabel {
- border-bottom: 1px @borderStyle rgba(216, 231, 245, 1);
- padding: 7px 7px 11px 0;
- display: block; /* Do not use anything other than block here, otherwise the sortables go crazy - Alex */
-}
-
-
-
-
-
-
-/* ############## CSS Experiments (active) ############## */
-
-
-
-
-/* ############## ToDo: Action Proxy Loading ############## */
-
-/* Spinner */
-
-.wcf-spinner {
- text-align: center;
- text-shadow: 0 -1px 0 @textShadowColor1;
- color: @fontColor1;
- border-width: @borderWidth;
- border-style: @borderStyle;
- border-color: rgba(0, 0, 0, .3);
- .mxBorderRadius;
-
- background-color: fade(@backColor5, 50%) !important;
- background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important;
- background-image: -khtml-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important;
- background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important;
- background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important;
- background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important;
- background-image: linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important;
-
- padding: 7px 0;
- position: fixed;
- top: 200px;
- left: 46%;
- right: 46%;
- width: 70px;
- z-index: 1000;
-
- -webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
- -khtml-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
- -moz-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
- -ms-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
- -o-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
- box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
-}
-
-.wcf-spinner img {
- margin-bottom: 10px;
- height: 48px;
- width: 48px;
-}
-
-
-
-
-
-
-
-
-
-
-
-/* DEBUG ONLY - DO NOT TOUCH! */
-
-.ajaxDebugMessage p {
- border-bottom: 1px solid rgb(192, 192, 192);
- margin: 0 3px;
- padding: 7px 0 3px 0;
-}
-
-.ajaxDebugMessage p:first-child,
-.ajaxDebugMessage p:last-child {
- border-bottom-width: 0;
- margin: 0;
- padding: 3px;
-}
-
-.ajaxDebugMessage p:last-child {
- font-family: Monospace;
- font-size: 110%;
-}
-
-
-
-
-
-/* Like colors */
-
-.wcf-liked {
- color: #090;
-}
-
-.wcf-disliked {
- color: #900;
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-/* -- -- -- -- -- EOF -- -- -- -- -- */
projects / GitHub / WoltLab / WCF.git / commitdiff