{if $skipBreadcrumbs|empty}{include file='breadcrumbs' __microdata=false}{/if}
</section>
- <!-- /CONTENT -->
</div>
</div>
-<!-- /MAIN -->
-<!-- FOOTER -->
<footer id="pageFooter" class="layoutFluid footer">
- <!-- footer navigation -->
<nav id="footerNavigation" class="navigation navigationFooter clearfix">
{include file='footerMenu'}
{/if}
</ul>
</nav>
- <!-- /footer navigation -->
<div class="footerContent">
{if ENABLE_BENCHMARK}{include file='benchmark'}{/if}
{event name='copyright'}
</div>
</footer>
-<!-- /FOOTER -->
+
<a id="bottom"></a>
<a id="top"></a>
-<!-- HEADER -->
+
<header id="pageHeader" class="layoutFluid">
<div>
- <!-- top menu -->
<nav id="topMenu" class="userPanel">
<div class="layoutFluid clearfix">
{hascontent}
</ul>
{/hascontent}
- <!-- search area -->
{event name='searchArea'}
- <!-- /search area -->
</div>
</nav>
- <!-- /top menu -->
- <!-- logo -->
<div id="logo" class="logo">
- <!-- clickable area -->
<a href="{link controller='Index'}{/link}">
- <img src="{@$__wcf->getPath('wbb')}images/wbbLogo2.svg" alt="" style="height: 80px; width: 300px;" />
+ <img src="{@$__wcf->getPath('wbb')}images/wbbLogo2.svg" alt="" style="height: 90px; width: 246px;" />
{*event name='headerLogo'*}
</a>
- <!-- /clickable area -->
</div>
- <!-- /logo -->
- <!-- main menu -->
{include file='mainMenu'}
- <!-- /main menu -->
- <!-- header navigation -->
<nav class="navigation navigationHeader clearfix">
- <!-- sub menu -->
{include file='mainMenuSubMenu'}
<ul class="navigationIcons">
{event name='headerNavigation'}
</ul>
</nav>
- <!-- /header navigation -->
</div>
</header>
-<!-- /HEADER -->
-<!-- MAIN -->
<div id="main" class="layoutFluid{if $sidebarOrientation|isset && $sidebar|isset} sidebarOrientation{@$sidebarOrientation|ucfirst} clearfix{/if}">
<div>
{if $sidebar|isset}
</aside>
{/if}
- <!-- CONTENT -->
<section id="content" class="content clearfix">
{if $skipBreadcrumbs|empty}{include file='breadcrumbs'}{/if}
*/
init: function(activeMenuItems) {
this._headerNavigation = $('nav#mainMenu');
- this._sidebarNavigation = $('nav#sidebarContent');
+ this._sidebarNavigation = $('aside.collapsibleMenu');
this._prepareElements(activeMenuItems);
},
_prepareElements: function(activeMenuItems) {
this._headerNavigation.find('li').removeClass('active');
- this._sidebarNavigation.find('div h1').each($.proxy(function(index, menuHeader) {
+ this._sidebarNavigation.find('legend').each($.proxy(function(index, menuHeader) {
$(menuHeader).click($.proxy(this._toggleItem, this));
}, this));
// close all navigation groups
- this._sidebarNavigation.find('div div').each(function() {
+ this._sidebarNavigation.find('nav ul').each(function() {
$(this).hide();
});
_toggleItem: function(event) {
var $menuItem = $(event.target);
- $menuItem.next().stop(true, true).toggle('blind', { }, 200).end().toggleClass('active');
+ $menuItem.parent().find('nav ul').stop(true, true).toggle('blind', { }, 200).end();
+ $menuItem.toggleClass('active');
},
/**
_renderSidebar: function(menuItem, activeMenuItems) {
// reset visible and active items
this._headerNavigation.find('li').removeClass('active');
- this._sidebarNavigation.find('div.menuGroup').hide();
+ this._sidebarNavigation.find('> div').hide();
if (activeMenuItems.length === 0) {
// show active menu
var $menuItem = $('#' + $.wcfEscapeID($item));
if ($menuItem.getTagName() === 'ul') {
- $menuItem.parent('div').show().prev().addClass('active');
+ $menuItem.show().parents('fieldset').children('legend').addClass('active');
}
else {
$menuItem.addClass('active');
<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()}js/WCF.js"></script>
- <script type="text/javascript" src="{@$__wcf->getPath()}acp/js/WCF.ACP.js"></script>
+ <script type="text/javascript" src="{@$__wcf->getPath()}acp/js/WCF.ACP.js?t={@TIME_NOW}"></script>
<script type="text/javascript">
//<![CDATA[
WCF.User.init({$__wcf->user->userID}, '{@$__wcf->user->username|encodeJS}');
<div class="layoutFluid clearfix">
<ul class="userPanelItems">
<li id="userMenu" class="dropdown">
- <a class="dropdownToggle" data-toggle="userMenu">{event name='userAvatar'} {lang}wcf.user.userNote{/lang}</a>
+ <a class="dropdownToggle framed" data-toggle="userMenu">{event name='userAvatar'} {lang}wcf.user.userNote{/lang}</a>
<ul class="dropdownMenu">
<li><a href="../">FRONTEND</a></li>
<li class="dropdownDivider"></li>
<div id="main" class="layoutFluid{if PACKAGE_ID && $__wcf->getACPMenu()->getMenuItems('')|count} sidebarOrientationLeft{/if}">
<div>
{hascontent}
- <!-- SIDEBAR -->
- <aside class="sidebar">
- <!-- sidebar menu -->
- <nav id="sidebarContent" class="sidebarContent">
- <ul>
- <li>
- {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="menuGroup collapsibleMenus" data-parent-menu-item="{$parentMenuItem->menuItem}">
- {foreach from=$__wcf->getACPMenu()->getMenuItems($parentMenuItem->menuItem) item=menuItem}
- <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}
- {foreach from=$__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem) item=subMenuItem}
- <li id="{$subMenuItem->menuItem}" data-menu-item="{$subMenuItem->menuItem}"><a href="{$subMenuItem->getLink()}">{lang}{$subMenuItem->menuItem}{/lang}</a></li>
- {/foreach}
- {else}
- <li id="{$menuItemCategory->menuItem}" data-menu-item="{$menuItemCategory->menuItem}"><a href="{$menuItemCategory->getLink()}">{lang}{$menuItemCategory->menuItem}{/lang}</a></li>
- {/if}
- {/foreach}
- </ul>
- </div>
- {/foreach}
- </div>
+ <aside class="sidebar collapsibleMenu">
+ {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="menuGroup collapsibleMenus" data-parent-menu-item="{$parentMenuItem->menuItem}">
+ {foreach from=$__wcf->getACPMenu()->getMenuItems($parentMenuItem->menuItem) item=menuItem}
+ <fieldset>
+ <legend class="menuHeader" data-menu-item="{$menuItem->menuItem}">{lang}{@$menuItem->menuItem}{/lang}</legend>
+
+ <nav class="menuGroupItems">
+ <ul id="{$menuItem->menuItem}">
+ {foreach from=$__wcf->getACPMenu()->getMenuItems($menuItem->menuItem) item=menuItemCategory}
+ {if $__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem)|count > 0}
+ {foreach from=$__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem) item=subMenuItem}
+ <li id="{$subMenuItem->menuItem}" data-menu-item="{$subMenuItem->menuItem}"><a href="{$subMenuItem->getLink()}">{lang}{$subMenuItem->menuItem}{/lang}</a></li>
+ {/foreach}
+ {else}
+ <li id="{$menuItemCategory->menuItem}" data-menu-item="{$menuItemCategory->menuItem}"><a href="{$menuItemCategory->getLink()}">{lang}{$menuItemCategory->menuItem}{/lang}</a></li>
+ {/if}
+ {/foreach}
+ </ul>
+ </nav>
+ </fieldset>
{/foreach}
- {/if}
- {/content}
- </li>
- </ul>
- </nav>
- <!-- /sidebar menu -->
+ </div>
+ {/foreach}
+ {/if}
+ {/content}
</aside>
- <!-- /SIDEBAR -->
{/hascontent}
<!-- CONTENT -->
$this->compiler->setVariables($variables);
// add mixins
- $content .= $this->prepareFile(WCF_DIR.'style/bootstrap/mixins.less');
+ $content .= $this->prepareFile(WCF_DIR.'style/bootstrap/mixin.less');
return $content;
}
+++ /dev/null
-.aclContainer > dd > span {
- position: relative;
-}
-
-.aclList,
-.aclPermissionList {
- margin-top: 0;
- min-height: 100px;
-
- > li {
- display: block;
- padding: @wcfGapTiny;
-
- &:first-child {
- border-top-left-radius: @wcfContainerBorderRadius;
- border-top-right-radius: @wcfContainerBorderRadius;
- }
-
- &:last-child:not(:first-child) {
- border-bottom-left-radius: @wcfContainerBorderRadius;
- border-bottom-right-radius: @wcfContainerBorderRadius;
- }
- }
-}
-
-.aclList {
- margin-bottom: @wcfGapSmall;
-
- > li {
- cursor: pointer;
-
- &:hover,
- &.active:hover {
- background-color: @wcfButtonHoverBackgroundColor;
- }
-
- &.active {
- background-color: @wcfContainerAccentBackgroundColor;
- }
-
- > img:last-child {
- float: right;
- margin-right: @wcfGapSmall;
- }
- }
-}
-
-.aclPermissionList {
- margin-top: @wcfGapSmall;
- min-height: 200px;
- text-align: right;
-
- > li {
- &:hover {
- background-color: @wcfButtonHoverBackgroundColor;
- }
-
- &.aclCategory {
- background-color: @wcfContainerHoverBackgroundColor;
- padding: @wcfGapSmall;
- text-align: left;
- }
-
- &.aclFullAccess {
- background-color: @wcfContainerAccentBackgroundColor;
- }
-
- > span {
- float: left;
- padding-left: @wcfGapSmall;
- }
-
- > label {
- cursor: pointer;
- margin: 0 @wcfGapSmall;
- padding: 0 @wcfGapLarge;
- }
- }
-}
\ No newline at end of file
--- /dev/null
+/* todo: ############## System Notifications (Inline) ############## */
+
+/* default values */
+.info,
+.error,
+.success,
+.warning {
+ font-weight: bold;
+ line-height: 1.5;
+ margin-top: @wcfGapMedium;
+ padding: @wcfGapSmall @wcfGapMedium @wcfGapSmall 50px;
+ position: relative;
+
+ .borderRadius();
+ .boxShadowNative(~"0 1px 2px rgba(0, 0, 0, .5), inset 0 0 1px rgba(0, 0, 0, .2)");
+
+ &:after {
+ background-repeat: no-repeat, repeat;
+ background-size: 24px, auto;
+ content: "";
+ display: block;
+ height: 24px;
+ left: 13px;
+ position: absolute;
+ top: 5px;
+ width: 24px;
+ }
+
+ > a {
+ text-decoration: underline;
+ }
+}
+
+/* types */
+.info {
+ color: @wcfInfoColor;
+
+ .linearGradient(@wcfInfoBackgroundColor2, @wcfInfoBackgroundColor, @wcfInfoBackgroundColor2);
+ .textShadow(@wcfInfoBackgroundColor2);
+
+ &:after {
+ background-image: url('../icon/infoInverse.svg');
+ }
+
+ > a {
+ color: @wcfInfoColor;
+ }
+}
+
+.success {
+ color: @wcfSuccessColor;
+
+ .linearGradient(@wcfSuccessBackgroundColor2, @wcfSuccessBackgroundColor, @wcfSuccessBackgroundColor2);
+ .textShadow(@wcfSuccessBackgroundColor2);
+
+ &:after {
+ background-image: url('../icon/successInverse.svg');
+ }
+
+ > a {
+ color: @wcfInfoColor;
+ }
+}
+
+.warning {
+ color: @wcfWarningColor;
+
+ .linearGradient(@wcfWarningBackgroundColor2, @wcfWarningBackgroundColor, @wcfWarningBackgroundColor2);
+ .textShadow(@wcfWarningBackgroundColor2);
+
+ &:after {
+ background-image: url('../icon/warningInverse.svg');
+ }
+
+ > a {
+ color: @wcfInfoColor;
+ }
+}
+
+.error {
+ color: @wcfErrorColor;
+
+ .linearGradient(@wcfErrorBackgroundColor2, @wcfErrorBackgroundColor, @wcfErrorBackgroundColor2);
+ .textShadow(@wcfErrorBackgroundColor2);
+
+ &:after {
+ background-image: url('../icon/errorInverse.svg');
+ }
+
+ > a {
+ color: @wcfInfoColor;
+ }
+}
+
+/* inline errors */
+.innerError {
+ //clear: both;
+ color: @wcfErrorColor;
+ display: table !important;
+ line-height: 1.5;
+ margin-top: 7px;
+ padding: 2px 10px;
+ position: relative; /* Firefox support (from version 10 on) is buggy */
+
+ .borderRadius();
+ .boxShadowNative(~"0 1px 2px rgba(0, 0, 0, .5), inset 0 0 1px rgba(0, 0, 0, .2)");
+ .linearGradient(@wcfErrorBackgroundColor2, @wcfErrorBackgroundColor, @wcfErrorBackgroundColor2);
+ .textShadow(@wcfErrorBackgroundColor2);
+
+ /* pointer */
+ &:after {
+ border: 7px solid transparent;
+ border-bottom-color: @wcfErrorBackgroundColor;
+ border-top-width: 0;
+ content: "";
+ display: inline-block;
+ left: 9px;
+ position: absolute;
+ top: -6px;
+ z-index: 100;
+ }
+
+ &:before {
+ border: 6px solid transparent;
+ border-bottom-color: @wcfErrorBackgroundColor;
+ border-top-width: 0;
+ content: "";
+ display: inline-block;
+ left: 10px;
+ position: absolute;
+ top: -6px;
+ z-index: 101;
+ }
+}
+++ /dev/null
-/* ############## System Notifications (Inline) ############## */
-
-/* default values */
-.info,
-.error,
-.success,
-.warning {
- font-weight: bold;
- line-height: 1.5;
- margin-top: @wcfGapMedium;
- padding: @wcfGapSmall @wcfGapMedium @wcfGapSmall 50px;
- position: relative;
-
- .borderRadius();
- .boxShadowNative(~"0 1px 2px rgba(0, 0, 0, .5), inset 0 0 1px rgba(0, 0, 0, .2)");
-
- &:after {
- background-repeat: no-repeat, repeat;
- background-size: 24px, auto;
- content: "";
- display: block;
- height: 24px;
- left: 13px;
- position: absolute;
- top: 5px;
- width: 24px;
- }
-
- > a {
- text-decoration: underline;
- }
-}
-
-/* types */
-.info {
- color: @wcfInfoColor;
-
- .linearGradient(@wcfInfoBackgroundColor2, @wcfInfoBackgroundColor, @wcfInfoBackgroundColor2);
- .textShadow(@wcfInfoBackgroundColor2);
-
- &:after {
- background-image: url('../icon/infoInverse.svg');
- }
-
- > a {
- color: @wcfInfoColor;
- }
-}
-
-.success {
- color: @wcfSuccessColor;
-
- .linearGradient(@wcfSuccessBackgroundColor2, @wcfSuccessBackgroundColor, @wcfSuccessBackgroundColor2);
- .textShadow(@wcfSuccessBackgroundColor2);
-
- &:after {
- background-image: url('../icon/successInverse.svg');
- }
-
- > a {
- color: @wcfInfoColor;
- }
-}
-
-.warning {
- color: @wcfWarningColor;
-
- .linearGradient(@wcfWarningBackgroundColor2, @wcfWarningBackgroundColor, @wcfWarningBackgroundColor2);
- .textShadow(@wcfWarningBackgroundColor2);
-
- &:after {
- background-image: url('../icon/warningInverse.svg');
- }
-
- > a {
- color: @wcfInfoColor;
- }
-}
-
-.error {
- color: @wcfErrorColor;
-
- .linearGradient(@wcfErrorBackgroundColor2, @wcfErrorBackgroundColor, @wcfErrorBackgroundColor2);
- .textShadow(@wcfErrorBackgroundColor2);
-
- &:after {
- background-image: url('../icon/errorInverse.svg');
- }
-
- > a {
- color: @wcfInfoColor;
- }
-}
-
-/* inline errors */
-.innerError {
- //clear: both;
- color: @wcfErrorColor;
- display: table !important;
- line-height: 1.5;
- margin-top: 7px;
- padding: 2px 10px;
- position: relative; /* Firefox support (from version 10 on) is buggy */
-
- .borderRadius();
- .boxShadowNative(~"0 1px 2px rgba(0, 0, 0, .5), inset 0 0 1px rgba(0, 0, 0, .2)");
- .linearGradient(@wcfErrorBackgroundColor2, @wcfErrorBackgroundColor, @wcfErrorBackgroundColor2);
- .textShadow(@wcfErrorBackgroundColor2);
-
- /* pointer */
- &:after {
- border: 7px solid transparent;
- border-bottom-color: @wcfErrorBackgroundColor;
- border-top-width: 0;
- content: "";
- display: inline-block;
- left: 9px;
- position: absolute;
- top: -6px;
- z-index: 100;
- }
-
- &:before {
- border: 6px solid transparent;
- border-bottom-color: @wcfErrorBackgroundColor;
- border-top-width: 0;
- content: "";
- display: inline-block;
- left: 10px;
- position: absolute;
- top: -6px;
- z-index: 101;
- }
-}
+++ /dev/null
-/* #### Attachments #### */
-
-/* attachment thumbnail list */
-.attachmentThumbnailList, .attachmentFileList {
- margin-top: @wcfGapMedium;
- padding-top: @wcfGapSmall;
-
- > legend {
- border-bottom: 0;
- border-top: 1px dotted @wcfContainerBorderColor;
- color: @wcfColor;
- font-size: @wcfTitleFontSize;
- padding: @wcfGapTiny 0 0;
- }
-}
-
-.attachmentThumbnailList {
- > ul > li {
- margin: 0 0 @wcfGapMedium @wcfGapSmall;
- }
-}
-
-.attachmentFileList {
- > ul > li {
- &:not(:first-child) {
- margin-top: @wcfGapTiny;
- }
-
- > hgroup h2 {
- font-size: @wcfSmallFontSize;
- }
- }
-}
-
-.attachmentThumbnail {
- display: inline-block;
- position: relative;
-
- .borderRadius();
- .boxShadow(0, 1px, rgba(0, 0, 0, 0.2), 1px);
- .transition(box-shadow, .1s);
-
- > img,
- > a > img {
- .borderRadius();
- }
-
- > hgroup {
- background-color: rgba(0, 0, 0, 0.6);
- bottom: 0;
- color: #fff;
- position: absolute;
- width: 100%;
- padding: @wcfGapSmall 0;
-
- .borderRadius(0, 0, @wcfContainerBorderRadius - 2, @wcfContainerBorderRadius - 2);
-
- > h1,
- > h2 {
- margin: 0 @wcfGapSmall;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
-
- > h2 {
- font-size: @wcfSmallFontSize;
- height: 0;
-
- .transition(height, .25s, ease-out);
- }
- }
-
- &:hover {
- .boxShadow(0, 0, @wcfButtonHoverBorderColor, 20px);
-
- > hgroup > h2 {
- height: 1.27em;
- }
- }
-}
-
-
-/* attachment form */
-.formAttachmentList {
- border-bottom: 1px solid @wcfContainerBorderColor;
- margin-bottom: @wcfGapSmall;
- padding-bottom: @wcfGapSmall;
-
- > li {
- width: 33%;
- float: left;
-
- > .thumbnail {
- width: 48px;
- height: 48px;
-
- .borderRadius();
- }
-
- > div {
- padding-top: @wcfGapSmall;
-
- > hgroup {
- float: left;
- margin-right: @wcfGapSmall;
- }
- }
- }
-}
+++ /dev/null
-/* ############## Badges ############## */
-
-// sets default badge shadows depending on background color
-.badgeShadow(@backgroundColor) when (lightness(@backgroundColor) >= 50%) {
- box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, .8);
-}
-.badgeShadow(@backgroundColor) when (lightness(@backgroundColor) < 50%) {
- box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, .8);
-}
-
-/* default values */
-.badge {
- background-color: @wcfColor;
- border-radius: 13px;
- color: @wcfContentBackgroundColor;
- display: inline-block;
- font-size: @wcfSmallFontSize;
- font-weight: normal !important;
- padding: 1px 8px 2px;
- position: relative;
- text-shadow: none !important;
- white-space: nowrap;
-
- .badgeShadow(@wcfContentBackgroundColor);
-
- /* colors */
- &.badgeUpdate {
- background-color: @wcfTabularBoxBackgroundColor;
- color: @wcfTabularBoxColor;
- }
-
- &.badgeGreen {
- background-color: @wcfSuccessBackgroundColor;
- color: @wcfSuccessColor;
- }
-
- &.badgeRed {
- background-color: @wcfErrorBackgroundColor;
- color: @wcfErrorColor;
- }
-
- &.badgeInverse {
- background-color: @wcfTabularBoxColor;
- color: @wcfTabularBoxBackgroundColor;
-
- .badgeShadow(@wcfTabularBoxBackgroundColor);
- }
-}
-
-a.badge:hover {
- color: @wcfContentBackgroundColor;
- text-decoration: none;
-}
-
-/* special */
-.containerHeadline > h1 > .badge {
- font-size: 70%;
- top: -1px;
-}
-
-.boxHeadline > hgroup > h1 .badge {
- font-size: 50%;
- top: -3px;
-}
-
-.mainMenu > ul > li > a > .badge {
- font-size: 70%;
- top: -1px;
-}
-
-.mainMenu > ul > li.active > a > .badge {
- font-size: 65%;
- top: -2px;
-}
-
-.tabularBoxTitle > hgroup > h1 > .badge {
- font-size: 70%;
- top: -1px;
-}
-
-fieldset > legend > .badge {
- font-size: 50%;
- top: -3px;
-}
\ 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) >= 40%) {
+ text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
+}
+.textShadow(@backgroundColor) when (lightness(@backgroundColor) < 60%) {
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
+}
+
+/* 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
-/* 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) >= 40%) {
- text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
-}
-.textShadow(@backgroundColor) when (lightness(@backgroundColor) < 60%) {
- text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
-}
-
-/* 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
-/*
- ***
- *** W A R N I N G
- ***
- *** This file is no longer in use and was replaced by wcf1_style_variable.
- *** It will be removed in the near feature.
- ***
-*/
-
-/* ###### sxf values ###### */
-/* these values will be defined by the style editor (don't it touch here) */
-
-/* ### general (content) ### */
-@wcfContentBackgroundColor: #fff; // bg color for main content area
-@wcfColor: #666; // default text color
-@wcfLinkColor: #369; // default link color
-@wcfLinkHoverColor: #036; // link hover color
-
-/* ### containers ### */
-/* containers use the default text / link color, so the container bg color should be similar to the content bg color */
-@wcfContainerBackgroundColor: rgba(252, 253, 254, 1); // bg color for containers
-@wcfContainerAccentBackgroundColor: rgba(241, 245, 250, 1); // light variantion of the container bg color
-@wcfContainerHoverBackgroundColor: rgba(216, 231, 245, 1); // bg color for hover effects
-@wcfContainerBorderColor: #ccc; //#bcd; // border color for containers
-@wcfContainerBorderRadius: 6px; // border radius
-
-/* ### box header (table header) ### */
-@wcfTabularBoxBackgroundColor: #369; // bg color
-@wcfTabularBoxColor: #fff; // text / link color
-@wcfTabularBoxHoverColor: #fff; // link hover color
-
-/* ### user panel ### */
-@wcfUserPanelBackgroundColor: rgba(0, 0, 0, .5); // bg color
-@wcfUserPanelColor: #fff; // text / link color
-@wcfUserPanelHoverColor: #fff; // link hover color
-
-/* ### buttons ### */
-/* default */
-@wcfButtonBackgroundColor: #e3e3e3;
-@wcfButtonBorderColor: #bbb;
-@wcfButtonColor: #999;
-
-/* primary */
-@wcfButtonPrimaryBackgroundColor: rgba(216, 231, 245, 1);
-@wcfButtonPrimaryBorderColor: #69C;
-@wcfButtonPrimaryColor: #69C;
-
-/* hover */
-@wcfButtonHoverBackgroundColor: rgba(255, 229, 200, 1);
-@wcfButtonHoverBorderColor: #fa2;
-@wcfButtonHoverColor: #666;
-
-/* ### form elements ### */
-@wcfInputBackgroundColor: #fff;
-@wcfInputColor: #666;
-@wcfInputBorderColor: #ccc;
-@wcfInputHoverBackgroundColor: rgba(255, 249, 244, 1);
-@wcfInputHoverBorderColor: #fa2;
-
-/* ### fonts ### */
-@wcfBaseFontSize: 13px;
-@wcfBaseFontFamily: "Trebuchet MS", Arial, sans-serif;
-
-/* ### layouts ### */
-@wcfLayoutFluidGap: 21px;
-@wcfLayoutFixedWidth: 1200px;
-
-
-/* ###### additional variables ###### */
-/* values are taken from sxf variables; but you can overwrite them by individual less */
-
-/* ### outer page bg ### */
-@wcfPageBackgroundColor: @wcfContentBackgroundColor;
-@wcfPageColor: @wcfColor;
-@wcfPageLinkColor: @wcfLinkColor;
-@wcfPageLinkHoverColor: @wcfLinkHoverColor;
-
-/* ### sidebar ### */
-@wcfSidebarBackgroundColor: @wcfContentBackgroundColor;
-
-/* ### additional text variables ### */
-@wcfDimmedColor: lighten(@wcfColor, 10%);
-@wcfLabelColor: @wcfColor;
-@wcfHeadlineColor: @wcfColor;
-@wcfHeadlineFontFamily: @wcfBaseFontFamily;
-
-/* ### dropdown ### */
-@wcfDropdownBackgroundColor: @wcfContentBackgroundColor;
-@wcfDropdownColor: @wcfColor;
-@wcfDropdownBorderColor: @wcfContainerBorderColor;
-@wcfDropdownHoverBackgroundColor: @wcfContainerHoverBackgroundColor;
-
-
-/* ###### hardcoded values ###### */
-/* values are hardcoded; you can overwrite them by individual less */
-
-/* ### font size ### */
-@wcfBaseLineHeight: 1.27;
-@wcfHeadlineFontSize: 170%;
-@wcfSubHeadlineFontSize: 140%;
-@wcfTitleFontSize: 120%;
-@wcfSmallFontSize: 85%;
-
-/* ### form states and alerts ### */
-/* warning (orange) */
-@wcfWarningColor: #fff;
-@wcfWarningBackgroundColor: #ffb800;
-@wcfWarningBackgroundColor2: #a67800;
-
-/* error (red) */
-@wcfErrorColor: #fff;
-@wcfErrorBackgroundColor: #c95145;
-@wcfErrorBackgroundColor2: #913d37;
-
-/* success (green) */
-@wcfSuccessColor: #fff;
-@wcfSuccessBackgroundColor: #74a446;
-@wcfSuccessBackgroundColor2: #4d7730;
-
-/* info (blue) */
-@wcfInfoColor: #fff;
-@wcfInfoBackgroundColor: #4674a4;
-@wcfInfoBackgroundColor2: #304d77;
-
-/* ### tooltip ### */
-@wcfTooltipBackgroundColor: rgba(0, 0, 0, .8);
-@wcfTooltipColor: white;
-
-/* ### gap ### */
-@wcfGapTiny: 4px;
-@wcfGapSmall: 7px;
-@wcfGapMedium: 14px;
-@wcfGapLarge: 21px;
-
-
-/* ###### individual less values ###### */
-/* overwrite additional variables for blue sunrise */
-@wcfPageBackgroundColor: @wcfTabularBoxBackgroundColor;
-@wcfSidebarBackgroundColor: @wcfContainerHoverBackgroundColor;
-@wcfPageLinkColor: lighten(@wcfLinkColor, 10%);
-@wcfPageLinkHoverColor: @wcfUserPanelHoverColor;
-@wcfLabelColor: @wcfLinkColor;
-
-/* additional variables for blue sunrise */
-@wcfNavigationBackgroundColor: lighten(@wcfSidebarBackgroundColor, 3%);
\ No newline at end of file
+++ /dev/null
-/* ############## Bread Crumbs ############## */
-
-/* Globals */
-
-.breadcrumbs {
- background-color: @wcfContentBackgroundColor;
- border: 1px solid @wcfContainerBorderColor;
- box-sizing: border-box;
- display: block;
- overflow: hidden;
- position: relative;
- text-align: left;
-
- .borderRadius();
-
- > ul {
- > li {
- float: left;
- font-size: @wcfSmallFontSize;
- list-style: none;
- max-width: 30%;
- position: relative;
-
- .transition(max-width, .2s);
-
- &:hover {
- max-width: 100%;
-
- a {
- background-color: @wcfContainerAccentBackgroundColor;
- position: relative;
- z-index: 10;
- }
-
- > .pointer > span {
- border-color: transparent transparent transparent @wcfContainerAccentBackgroundColor;
- }
- }
-
- > .pointer {
- border-color: transparent transparent transparent @wcfContainerBorderColor;
- border-style: solid none solid solid;
- border-width: 15px;
- display: block !important;
- height: 0;
- position: absolute;
- right: -15px;
- top: -4px;
- width: 0;
- z-index: 20;
-
- > span {
- border-color: transparent transparent transparent @wcfContentBackgroundColor;
- border-style: solid none solid solid;
- border-width: 15px;
- display: block;
- height: 0;
- left: -16px;
- overflow: hidden;
- position: absolute;
- text-indent: -9000px;
- top: -15px;
- width: 0;
- }
- }
-
- > a {
- color: @wcfColor;
- 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/home.svg');
- background-position: 7px center;
- background-repeat: no-repeat;
- background-size: 16px;
- padding-left: 30px;
-
- .borderRadius(@wcfContainerBorderRadius - 2, 0, 0, @wcfContainerBorderRadius - 2);
- }
- }
- }
-}
\ No newline at end of file
input[type='submit'],
input[type='button'],
.button {
- border-radius: 30px;
border-style: solid;
border-width: 1px;
cursor: pointer;
display: inline-block;
- font-size: 100%;
- font-weight: bold;
margin: 0 2px;
padding: 5px 13px;
}
input[type='submit']:not([disabled]),
input[type='button']:not([disabled]),
button:not([disabled]) {
- border-color: lighten(@wcfButtonBorderColor, 7%) @wcfButtonBorderColor darken(@wcfButtonBorderColor, 7%);
+ background-color: @wcfButtonBackgroundColor;
+ border-color: @wcfButtonBorderColor;
color: @wcfButtonColor;
text-decoration: none;
- .boxShadow(0, 1px, rgba(0, 0, 0, .1), 3px);
- .linearGradient(lighten(@wcfButtonBackgroundColor, 5%), lighten(@wcfButtonBackgroundColor, 10%), lighten(@wcfButtonBackgroundColor, 5%) 2px, @wcfButtonBackgroundColor);
.textShadow(@wcfButtonBackgroundColor);
- .transition(~"background-color, background-image, border, box-shadow, color", .1s);
}
/* primary */
+/* todo */
.button.buttonPrimary,
input[type='submit']:not([disabled]),
input[type='button']:not([disabled]).buttonPrimary,
button:not([disabled]).buttonPrimary {
- border-color: lighten(@wcfButtonPrimaryBorderColor, 7%) @wcfButtonPrimaryBorderColor darken(@wcfButtonPrimaryBorderColor, 7%);
+ background-color: @wcfButtonPrimaryBackgroundColor;
+ border-color: @wcfButtonPrimaryBorderColor;
color: @wcfButtonPrimaryColor;
- .boxShadowNative(~"0 1px 3px rgba(0, 0, 0, .1), 0 0 10px" @wcfButtonPrimaryBorderColor);
- .linearGradient(lighten(@wcfButtonPrimaryBackgroundColor, 5%), lighten(@wcfButtonPrimaryBackgroundColor, 10%), lighten(@wcfButtonPrimaryBackgroundColor, 5%) 2px, @wcfButtonPrimaryBackgroundColor);
.textShadow(@wcfButtonPrimaryBackgroundColor);
}
input[type='submit']:not([disabled]):hover,
input[type='button']:not([disabled]):hover,
button:not([disabled]):hover {
- border-color: lighten(@wcfButtonHoverBorderColor, 7%) @wcfButtonHoverBorderColor darken(@wcfButtonHoverBorderColor, 7%);
+ background-color: @wcfButtonHoverBackgroundColor;
+ border-color: @wcfButtonHoverBorderColor;
color: @wcfButtonHoverColor;
text-decoration: none;
- .boxShadowNative(~"0 1px 3px rgba(0, 0, 0, .1), 0 0 10px" @wcfButtonHoverBorderColor);
- .linearGradient(lighten(@wcfButtonHoverBackgroundColor, 5%), lighten(@wcfButtonHoverBackgroundColor, 10%), lighten(@wcfButtonHoverBackgroundColor, 5%) 2px, @wcfButtonHoverBackgroundColor);
.textShadow(@wcfButtonHoverBackgroundColor);
}
/* active (pressed) */
+/* todo */
.button:active,
input[type='reset']:not([disabled]):active,
input[type='submit']:not([disabled]):active,
}
/* disabled state */
+/* todo */
input[type='reset']:disabled,
input[type='submit']:disabled,
input[type='button']:disabled,
}
/* active (permanently) */
+/* todo */
.button.active,
input[type='button'].active,
button.active,
+++ /dev/null
-/* Code Box */
-.codeBox {
- background-color: @wcfContentBackgroundColor;
-
- > div {
- overflow: hidden;
-
- > dl {
- display: table;
- margin-top: 7px;
- width: 100%;
-
- > dt {
- text-align: right;
- display: table-cell;
- width: 1%;
-
- > pre {
- padding: 4px 7px;
-
- > a {
- display: block;
- margin: 0 -7px;
- padding: 0 7px;
- text-decoration: none;
-
- &:target {
- color: #000;
- background-color: #ff3;
- }
- }
- }
- }
-
- > dd {
- display: table-cell;
- width: 100%;
-
- > pre {
- padding: 4px 7px;
- }
- }
- }
- }
-
- &:hover {
- > div {
- overflow: auto;
- }
- }
-
- > hgroup {
- border-bottom: 1px dotted @wcfContainerBorderColor;
-
- > h1 {
- padding-bottom: 4px;
- font-weight: bold;
- }
- }
-}
-
-/* ############## 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-color: @wcfContentBackgroundColor;
- background-image: url('../images/quote.png');
- background-position: 12px 12px;
- background-repeat: no-repeat;
- padding-left: 58px;
- min-height: 28px;
- margin-bottom: @wcfGapTiny;
-
- > header {
- padding-bottom: @wcfGapTiny;
- border-bottom: 1px dotted @wcfContainerBorderColor;
- margin-bottom: @wcfGapSmall;
-
- > h1 {
- font-weight: bold;
- }
- }
-
- /* nested quotes */
- .quoteBox {
- background-image: none;
- padding-left: @wcfGapLarge;
- min-height: 0;
- }
-}
-
-/* spoiler box */
-.spoilerBox {
- background-color: @wcfContentBackgroundColor;
- padding-bottom: @wcfGapSmall;
-
- > header {
- margin-bottom: @wcfGapSmall;
- }
-
- > div {
- padding-bottom: @wcfGapSmall;
- }
-}
\ No newline at end of file
+++ /dev/null
-/* ############## Profile Comments ############## */
-.comment,
-.commentResponse {
- position: relative;
-}
-
-.commentOptions {
- display: block;
- position: absolute;
- top: @wcfGapMedium;
- right: @wcfGapMedium;
-
- > li {
- float: left;
- opacity: 0;
-
- .transition(opacity, .1s);
-
- > a {
- padding: @wcfGapTiny;
- }
- }
-}
-
-.commentResponseList .commentOptions {
- top: @wcfGapSmall;
- right: @wcfGapSmall;
-}
-
-.commentContent:hover > .commentOptions > li {
- opacity: 1;
-}
-
-.commentAdd > div > small,
-.commentResponseAdd > div > small {
- color: @wcfDimmedColor;
- display: block;
- opacity: 0;
-
- .transition(opacity, .1s);
-}
-
-.commentAdd > div > input:focus + small,
-.commentResponseAdd > div > input:focus + small {
- opacity: 1;
-}
-
-.commentContent:not(.commentResponseContent) {
- margin-bottom: @wcfGapMedium;
-}
-
-.commentResponse {
- border-top: 1px solid @wcfContainerBorderColor;
- padding: @wcfGapSmall;
-}
-
-.commentResponseAdd {
- border-top: 1px solid @wcfContainerBorderColor;
- padding: 7px 7px 0;
-}
-
-.commentResponseAdd + .commentResponseList > .commentResponse:first-child {
- margin-top: 7px;
-}
-
-.commentList > li:nth-child(2n) .commentResponseList > li:nth-child(2n+1) {
- background-color: @wcfContainerBackgroundColor;
-
- .transition(background-color, .1s);
-}
-
-.commentList > li:nth-child(2n+1) .commentResponseList > li:nth-child(2n+1) {
- background-color: @wcfContainerAccentBackgroundColor;
-
- .transition(background-color, .1s);
-}
-
-.commentResponseList > li:hover {
- background-color: @wcfContainerHoverBackgroundColor !important;
-}
-
-.commentList > li:not(.commentAdd):hover {
- background-color: @wcfContainerBackgroundColor;
-
- &:nth-child(2n) {
- background-color: @wcfContainerAccentBackgroundColor;
- }
-}
-
-/* like display */
-.commentList .likesBadge {
- display: inline-block;
- margin: -2px 0 -2px @wcfGapTiny;
-}
-
-/* Toggle Comments Links */
-.commentResponsePrevious,
-.commentResponseRecent {
- width: 100%;
- text-align: center;
- margin-left: auto;
- margin-right: auto;
- margin-top: 7px;
-
- a {
- border-radius: 3px;
- display: inline-block;
- padding: 3px 13px;
- white-space: nowrap;
- }
-}
\ No newline at end of file
+++ /dev/null
-#main {
- z-index: 110;
-
- > div {
- background-color: @wcfSidebarBackgroundColor;
- .boxShadowInset(0, 0, rgba(0, 0, 0, .1));
- }
-
- &.not(.sidebarOrientationLeft):not(.sidebarOrientationRight) {
- .sidebar {
- display: none;
- }
- }
-
- &.sidebarOrientationLeft {
- .content {
- border-left: 1px solid darken(@wcfSidebarBackgroundColor, 8%);
- margin-left: 299px;
- }
-
- .sidebar {
- float: left;
- }
- }
-
- &.sidebarOrientationRight {
- .content {
- border-right: 1px solid darken(@wcfSidebarBackgroundColor, 8%);
- margin-right: 299px;
- }
-
- .sidebar {
- float: right;
- }
- }
-}
-
-.sidebar {
- width: 300px;
- 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
-#conversationLabelFilter {
- margin-bottom: @wcfGapMedium;
-}
-
-.conversationLabelList {
- margin-bottom: @wcfGapMedium;
-
- li:not(:last-child) {
- margin-bottom: @wcfGapTiny;
- }
-
- &~small {
- display: block;
- }
-}
-
-#unreadConversations .dropdownMenu > li {
- h1 {
- max-width: 250px;
- overflow: hidden;
- text-overflow: ellipsis;
- }
-}
-
-.conversationParticipantList {
- > li {
- float: left;
- width: 30%;
- overflow: hidden;
-
- > hgroup {
- > h2 {
- font-size: @wcfSmallFontSize;
- }
- }
- }
-}
-
-.conversationLeft {
- text-decoration: line-through;
-}
\ No newline at end of file
.borderRadius(15px);
.boxShadow(0, 1px, rgba(0, 0, 0, .3), 23px);
-
- .boxHeadline hgroup {
- h1,
- h1 a {
- //color: @wcfDimmedColor;
-
- //.textShadow(@wcfPageBackgroundColor);
- }
- }
}
.dialogTitlebar {
background-color: @wcfTabularBoxBackgroundColor;
- 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;
+++ /dev/null
-.footer {
- padding-bottom: @wcfGapMedium;
- 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 {
+ padding-top: @wcfGapMedium;
+
+ > legend {
+ border-bottom: 1px solid @wcfContainerBorderColor;
+ color: @wcfDimmedColor;
+ font-family: @wcfHeadlineFontFamily;
+ font-size: @wcfSubHeadlineFontSize;
+ font-weight: bold;
+ width: 100%;
+ padding-bottom: @wcfGapTiny;
+
+ .textShadow(@wcfContainerBackgroundColor);
+
+ + small {
+ top: -7px;
+ position: relative;
+ }
+ }
+
+ > dl:not(:first-of-type) {
+ margin-top: @wcfGapSmall;
+ }
+
+ &:not(:first-of-type) {
+ margin-top: @wcfGapMedium;
+ }
+
+ /* definition list */
+ dl {
+ position: relative;
+
+ .clearfix();
+
+ > dd:not(:first-of-type), > dt:not(:first-of-type) {
+ margin-top: @wcfGapSmall;
+ }
+
+ > dt {
+ color: @wcfLabelColor;
+ float: left;
+ text-align: right;
+ width: 230px;
+
+ > label {
+ display: block;
+ }
+
+ /* Reversed (flips the label aside the checkbox or radio button) -
+ use only when automatically generating checkboxes or radio-buttons! */
+ &.reversed {
+ left: 270px;
+ margin-top: 2px;
+ position: absolute;
+ text-align: left;
+ width: auto;
+
+ ~ dd > input[type='checkbox'], ~ dd > input[type='radio'] {
+ margin-left: 0;
+ }
+ }
+ }
+
+ > dd {
+ margin-left: 250px;
+
+ > small {
+ color: @wcfDimmedColor;
+ display: block;
+ margin-top: 2px;
+ }
+
+ > label {
+ color: @wcfLabelColor;
+ display: block;
+
+ > input[type='checkbox'], > input[type='radio'] {
+ margin: 2px 2px 2px 0;
+ }
+ }
+
+ > input[type='checkbox'], > input[type='radio'] {
+ ~ small {
+ margin-left: 21px;
+ }
+ }
+
+ &:not(.floated) {
+ > label ~ small {
+ margin-left: 21px;
+ }
+ }
+
+ &.floated {
+ > label {
+ display: inline-block;
+ margin-right: @wcfGapSmall;
+ }
+ }
+
+ > input, textarea, select {
+ + label {
+ margin-top: 2px;
+ }
+ }
+ }
+
+ /* wide */
+ &.wide {
+ > dt {
+ display: none;
+ }
+
+ > dd {
+ margin-left: 0;
+ }
+ }
+
+ /* disabled state */
+ &.disabled {
+ > dt, > dd > label {
+ color: @wcfDimmedColor;
+ }
+ }
+ }
+}
+
+/* sidebar */
+.sidebar {
+ fieldset {
+ > dl {
+ > dt {
+ text-align: left;
+ float: none;
+ width: auto;
+ }
+
+ > dd {
+ margin-top: 2px;
+ margin-left: 0;
+ margin-bottom: @wcfGapMedium;
+ }
+ }
+ }
+}
+
+/* submit buttons */
+.formSubmit {
+ margin-top: @wcfGapMedium;
+ text-align: center;
+}
+
+
+/* ### inputs ### */
+/* 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;
+ margin: 0;
+}
+
+select {
+ padding: 1px 1px 1px 3px;
+ margin: 0;
+}
+
+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: @wcfInputBorderColor;
+ border-style: solid;
+ border-width: 1px;
+ color: @wcfInputColor;
+}
+
+/* hover */
+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;
+}
+
+/* active / focus */
+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: 0;
+
+ .boxShadowNative(~"0 0 5px" fade(@wcfInputHoverBorderColor, 50%) ~", inset 0 1px 5px rgba(0, 0, 0, .1)");
+}
+
+/* read only state */
+/* todo */
+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;
+ border-color: @wcfInputBorderColor;
+}
+
+/* disabled state */
+/* todo */
+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: transparent;
+ border-color: @wcfInputBorderColor;
+ color: @wcfDimmedColor;
+}
+
+/* error state */
+/* todo */
+.formError input[type='text'],
+.formError input[type='search'],
+.formError input[type='email'],
+.formError input[type='url'],
+.formError input[type='password'],
+.formError textarea {
+ border-color: @wcfErrorBackgroundColor;
+}
+
+/* success state */
+/* todo */
+.formSuccess input[type='text'],
+.formSuccess input[type='search'],
+.formSuccess input[type='email'],
+.formSuccess input[type='url'],
+.formSuccess input[type='password'],
+.formSuccess textarea {
+ border-color: @wcfSuccessBackgroundColor;
+}
+
+/* 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%;
+}
+
+/* upload button */
+.uploadButton {
+ overflow: hidden;
+ position: relative;
+
+ input {
+ left: 0;
+ opacity: 0;
+ position: absolute;
+ top: 0;
+ }
+}
+
+
+
+
+
+
+
+
+
+/* todo: ckeditor fixes */
+.cke_skin_kama {
+ border-width: 0 !important;
+ padding: 0 !important;
+}
+
+/* todo: smiley list */
+#smilies > ul > li {
+ display: inline;
+}
+
+/* todo: element list with checkboxes */
+.structuredList {
+ background-color: @wcfContainerBackgroundColor;
+
+ li {
+ padding: @wcfGapTiny @wcfGapSmall;
+ text-align: right;
+
+ &:hover {
+ background-color: @wcfButtonHoverBackgroundColor;
+ }
+
+ &:first-child {
+ border-radius: @wcfContainerBorderRadius @wcfContainerBorderRadius 0 0;
+ }
+
+ &:last-child {
+ border-radius: 0 0 @wcfContainerBorderRadius @wcfContainerBorderRadius;
+ }
+
+ &.category {
+ background-color: @wcfNavigationBackgroundColor;
+
+ &:hover {
+ background-color: @wcfButtonHoverBackgroundColor;
+ }
+ }
+
+ span {
+ float: left;
+ }
+
+ label {
+ cursor: pointer;
+ margin: 0 @wcfGapSmall;
+ padding: 0 @wcfGapLarge;
+ }
+ }
+}
+
+/* todo: missing doc */
+.editableItemList ul li {
+ cursor: pointer;
+ margin-left: @wcfGapTiny;
+
+ &:first-child {
+ margin-left: 0;
+ }
+}
+
+/* todo */
+select > option {
+ /* Fixes weird firefox bug */
+ display: block !important;
+}
\ No newline at end of file
+++ /dev/null
-/* ############## Fieldsets ############## */
-fieldset {
- padding-top: @wcfGapMedium;
-
- legend {
- border-bottom: 1px solid @wcfContainerBorderColor;
- color: @wcfDimmedColor;
- font-family: @wcfHeadlineFontFamily;
- font-size: @wcfSubHeadlineFontSize;
- font-weight: bold;
- width: 100%;
- padding-bottom: @wcfGapTiny;
-
- .textShadow(@wcfContainerBackgroundColor);
-
- + small {
- top: -7px;
- position: relative;
- }
- }
-
- > dl:not(:first-of-type) {
- margin-top: @wcfGapSmall;
- }
-
- &:not(:first-of-type) {
- margin-top: @wcfGapMedium;
- }
-
- /* definition list */
- dl {
- position: relative;
-
- .clearfix();
-
- > dd:not(:first-of-type), > dt:not(:first-of-type) {
- margin-top: @wcfGapSmall;
- }
-
- > dt {
- color: @wcfLabelColor;
- float: left;
- text-align: right;
- width: 230px;
-
- > label {
- display: block;
- }
-
- /* Reversed (flips the label aside the checkbox or radio button) -
- use only when automatically generating checkboxes or radio-buttons! */
- &.reversed {
- left: 270px;
- margin-top: 2px;
- position: absolute;
- text-align: left;
- width: auto;
-
- ~ dd > input[type='checkbox'], ~ dd > input[type='radio'] {
- margin-left: 0;
- }
- }
- }
-
- > dd {
- margin-left: 250px;
-
- > small {
- color: @wcfDimmedColor;
- display: block;
- margin-top: 2px;
- }
-
- > label {
- color: @wcfLabelColor;
- display: block;
-
- > input[type='checkbox'], > input[type='radio'] {
- margin: 2px 2px 2px 0;
- }
- }
-
- > input[type='checkbox'], > input[type='radio'] {
- ~ small {
- margin-left: 21px;
- }
- }
-
- &:not(.floated) {
- > label ~ small {
- margin-left: 21px;
- }
- }
-
- &.floated {
- > label {
- display: inline-block;
- margin-right: @wcfGapSmall;
- }
- }
-
- > input, textarea, select {
- + label {
- margin-top: 2px;
- }
- }
- }
-
- /* wide */
- &.wide {
- > dt {
- display: none;
- }
-
- > dd {
- margin-left: 0;
- }
- }
-
- /* disabled state */
- &.disabled {
- > dt, > dd > label {
- color: @wcfDimmedColor;
- }
- }
- }
-}
-
-/* Special -> Sidebar */
-.sidebar {
- fieldset {
- > dl {
- > dt {
- text-align: left;
- float: none;
- width: auto;
- }
-
- > dd {
- margin-top: 2px;
- margin-left: 0;
- margin-bottom: @wcfGapMedium;
- }
- }
- }
-}
-
-/* Structure */
-.formSubmit {
- margin-top: @wcfGapMedium;
- 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;
-}
-
-/* todo: smiley list */
-#smilies > ul > li {
- display: inline;
-}
-
-/* element list with checkboxes */
-.structuredList {
- background-color: @wcfContainerBackgroundColor;
-
- li {
- padding: @wcfGapTiny @wcfGapSmall;
- text-align: right;
-
- &:hover {
- background-color: @wcfButtonHoverBackgroundColor;
- }
-
- &:first-child {
- border-radius: @wcfContainerBorderRadius @wcfContainerBorderRadius 0 0;
- }
-
- &:last-child {
- border-radius: 0 0 @wcfContainerBorderRadius @wcfContainerBorderRadius;
- }
-
- &.category {
- background-color: @wcfNavigationBackgroundColor;
-
- &:hover {
- background-color: @wcfButtonHoverBackgroundColor;
- }
- }
-
- span {
- float: left;
- }
-
- label {
- cursor: pointer;
- margin: 0 @wcfGapSmall;
- padding: 0 @wcfGapLarge;
- }
- }
-}
-
-.editableItemList ul li {
- cursor: pointer;
- margin-left: @wcfGapTiny;
-
- &:first-child {
- margin-left: 0;
- }
-}
-
-/* todo */
-select > option {
- /* Fixes weird firefox bug */
- display: block !important;
-}
\ No newline at end of file
--- /dev/null
+/* ### globals ### */
+body {
+ background-color: @wcfPageBackgroundColor;
+ color: @wcfPageColor;
+ font-family: @wcfBaseFontFamily;
+ font-size: @wcfBaseFontSize;
+ line-height: @wcfBaseLineHeight;
+}
+
+small {
+ font-size: @wcfSmallFontSize;
+}
+
+img {
+ vertical-align: middle;
+
+ &.disabled {
+ opacity: .3;
+ }
+}
+
+a {
+ color: @wcfLinkColor;
+ cursor: pointer;
+ text-decoration: none;
+
+ &:hover {
+ color: @wcfLinkHoverColor;
+ text-decoration: underline;
+ }
+}
+
+.invisible {
+ display: none;
+}
+
+.marginTop {
+ margin-top: @wcfGapMedium;
+}
+
+/* icons */
+.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); }
+
+.iconFlag {
+ height: 15px;
+ width: 24px;
+}
+
+.framed {
+ > img {
+ background-color: @wcfContentBackgroundColor;
+ border: 1px solid @wcfContainerBorderColor;
+ padding: 1px;
+ }
+}
+
+/* balloon tooltips */
+.balloonTooltip {
+ background-color: @wcfTooltipBackgroundColor;
+ color: @wcfTooltipColor;
+ font-size: .85em;
+ max-width: 300px;
+ padding: 5px 10px 7px;
+ position: absolute;
+ z-index: 800;
+
+ .borderRadius(6px);
+ .boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
+
+ .pointer {
+ border-color: @wcfTooltipBackgroundColor transparent;
+ border-style: solid;
+ border-width: 0 5px 5px;
+ left: 50%;
+ position: absolute;
+ top: -5px;
+ }
+}
+
+/* popover */
+.popover {
+ background-color: rgba(0, 0, 0, .4);
+ background-image: url(../icon/spinner.svg);
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-size: 32px;
+ max-width: 450px;
+ min-height: 32px;
+ min-width: 150px;
+ padding: @wcfGapSmall;
+ position: absolute;
+ vertical-align: middle;
+ z-index: 320;
+
+ .borderRadius(6px);
+ .boxShadow(0, 1px, rgba(0, 0, 0, .3), 7px);
+
+ &:after {
+ border: 10px solid transparent;
+ content: "";
+ display: inline-block;
+ position: absolute;
+ z-index: 100;
+ }
+
+ &.top:after {
+ border-bottom-width: 0;
+ border-top-color: rgba(0, 0, 0, .4);
+ bottom: -10px;
+ }
+
+ &.bottom:after {
+ border-bottom-color: rgba(0, 0, 0, .4);
+ border-top-width: 0;
+ top: -10px;
+ }
+
+ &.right:after {
+ left: 10px;
+ }
+
+ &.left:after {
+ right: 10px;
+ }
+}
+
+.popoverContent {
+ background-color: @wcfContainerBackgroundColor;
+ color: @wcfColor;
+ opacity: 0;
+ padding: @wcfGapSmall @wcfGapMedium;
+
+ .borderRadius(6px);
+}
+
+/* ### badges ### */
+// sets default badge shadows depending on background color
+.badgeShadow(@backgroundColor) when (lightness(@backgroundColor) >= 50%) {
+ box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, .8);
+}
+.badgeShadow(@backgroundColor) when (lightness(@backgroundColor) < 50%) {
+ box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, .8);
+}
+
+/* default values */
+.badge {
+ background-color: @wcfColor;
+ border-radius: 13px;
+ color: @wcfContentBackgroundColor;
+ display: inline-block;
+ font-size: @wcfSmallFontSize;
+ font-weight: normal !important;
+ padding: 1px 8px 2px;
+ position: relative;
+ text-shadow: none !important;
+ white-space: nowrap;
+
+ .badgeShadow(@wcfContentBackgroundColor);
+
+ /* colors */
+ &.badgeUpdate {
+ background-color: @wcfTabularBoxBackgroundColor;
+ color: @wcfTabularBoxColor;
+ }
+
+ &.badgeGreen {
+ background-color: @wcfSuccessBackgroundColor;
+ color: @wcfSuccessColor;
+ }
+
+ &.badgeRed {
+ background-color: @wcfErrorBackgroundColor;
+ color: @wcfErrorColor;
+ }
+
+ &.badgeInverse {
+ background-color: @wcfTabularBoxColor;
+ color: @wcfTabularBoxBackgroundColor;
+
+ .badgeShadow(@wcfTabularBoxBackgroundColor);
+ }
+}
+
+a.badge:hover {
+ color: @wcfContentBackgroundColor;
+ text-decoration: none;
+}
+
+/* special */
+.containerHeadline > h1 > .badge {
+ font-size: 70%;
+ top: -1px;
+}
+
+.boxHeadline > hgroup > h1 .badge {
+ font-size: 50%;
+ top: -3px;
+}
+
+.mainMenu > ul > li > a > .badge {
+ font-size: 70%;
+ top: -1px;
+}
+
+.mainMenu > ul > li.active > a > .badge {
+ font-size: 65%;
+ top: -2px;
+}
+
+.tabularBoxTitle > hgroup > h1 > .badge {
+ font-size: 70%;
+ top: -1px;
+}
+
+fieldset > legend > .badge {
+ font-size: 50%;
+ top: -3px;
+}
+
+
+/* todo */
+.dropdownMenu {
+display: none;
+}
\ No newline at end of file
}
&:hover > span {
- .boxShadow(0, 0, @wcfButtonHoverBorderColor, 20px);
+ .boxShadow(0, 0, @wcfButtonHoverBorderColor, 20px); /* todo */
}
}
+++ /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;
- margin: 0;
-}
-
-select {
- padding: 1px 1px 1px 3px;
- margin: 0;
-}
-
-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, 10%);
- border-radius: 3px;
- border-style: solid;
- border-width: 1px;
- color: @wcfInputColor;
-
- .boxShadowInset(0, 1px, rgba(0, 0, 0, .1));
- .transition(~"background-color, border, box-shadow", .2s);
-}
-
-/* hover */
-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;
-}
-
-/* active / focus */
-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: 0;
-
- .boxShadowNative(~"0 0 5px" fade(@wcfInputHoverBorderColor, 50%) ~", inset 0 1px 5px rgba(0, 0, 0, .1)");
-}
-
-/* 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;
- border-color: @wcfInputBorderColor;
-
- .boxShadowInset(0, 1px, rgba(0, 0, 0, .1));
-}
-
-/* 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: transparent;
- border-color: @wcfInputBorderColor;
- color: @wcfDimmedColor;
-
- .boxShadowInset(0, 1px, rgba(0, 0, 0, .1));
-}
-
-/* error state */
-.formError input[type='text'],
-.formError input[type='search'],
-.formError input[type='email'],
-.formError input[type='url'],
-.formError input[type='password'],
-.formError textarea {
- border-color: @wcfErrorBackgroundColor;
-
- .boxShadowNative(~"0 0 5px" fade(@wcfErrorBackgroundColor, 50%) ~", inset 0 1px 5px rgba(0, 0, 0, .1)");
-}
-
-/* success state */
-.formSuccess input[type='text'],
-.formSuccess input[type='search'],
-.formSuccess input[type='email'],
-.formSuccess input[type='url'],
-.formSuccess input[type='password'],
-.formSuccess textarea {
- border-color: @wcfSuccessBackgroundColor;
-
- .boxShadowNative(~"0 0 5px" fade(@wcfSuccessBackgroundColor, 50%) ~", inset 0 1px 5px rgba(0, 0, 0, .1)");
-}
-
-/* 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%;
-}
-
-/* upload button */
-.uploadButton {
- overflow: hidden;
- position: relative;
-
- input {
- left: 0;
- opacity: 0;
- position: absolute;
- top: 0;
- }
-}
\ No newline at end of file
+++ /dev/null
-/* #### Labels #### */
-.badge.label {
- font-size: 90%;
- color: #fff;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-
- /* default label colors */
- &.black {
- background-color: #333;
- }
-
- &.brown {
- background-color: #c63;
- }
-
- &.red {
- background-color: #c00;
- }
-
- &.orange {
- background-color: #f90;
- }
-
- &.yellow {
- background-color: #ff0;
- color: #333;
- text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4);
- }
-
- &.green {
- background-color: #0c0;
- }
-
- &.blue {
- background-color: #09f;
- }
-
- &.purple {
- background-color: #c0f;
- }
-
- &.pink {
- background-color: #f0c;
- }
-}
-
-/* hover */
-a.badge.label:hover {
- text-decoration: none;
-
- &.black {
- background-color: #000;
- }
-
- &.brown {
- background-color: #930;
- }
-
- &.red {
- background-color: #900;
- }
-
- &.orange {
- background-color: #f60;
- }
-
- &.yellow {
- background-color: #cc0;
- }
-
- &.green {
- background-color: #090;
- }
-
- &.blue {
- background-color: #06c;
- }
-
- &.purple {
- background-color: #90c;
- }
-
- &.pink {
- background-color: #c09;
- }
-}
-
-/* label list */
-.labelList, .labelList > li {
- display: inline-block;
-}
-
-/* ACP label list */
-#labelList li {
- float: left;
- margin-right: 1%;
- width: 30%;
-
- &.labelCustomClass {
- position: relative;
-
- input[type='radio'] {
- left: 0;
- position: absolute;
- top: 0;
- }
-
- span {
- display: block;
- margin-left: 24px;
- }
- }
-}
-
-.labelChooser > .dropdownToggle > span {
- cursor: pointer;
-}
\ No newline at end of file
-/* general definitions */
-body {
- background-color: darken(@wcfPageBackgroundColor, 20%);
- background-repeat: repeat-x;
- color: @wcfPageColor;
- font-family: @wcfBaseFontFamily;
- font-size: @wcfBaseFontSize;
- line-height: @wcfBaseLineHeight;
-
- background-image: url(../../images/header.png), -webkit-linear-gradient(@wcfPageBackgroundColor, darken(@wcfPageBackgroundColor, 20%) 200px);
- background-image: url(../../images/header.png), -moz-linear-gradient(@wcfPageBackgroundColor, darken(@wcfPageBackgroundColor, 20%) 200px);
- background-image: url(../../images/header.png), -o-linear-gradient(@wcfPageBackgroundColor, darken(@wcfPageBackgroundColor, 20%) 200px);
- background-image: url(../../images/header.png), -ms-linear-gradient(@wcfPageBackgroundColor, darken(@wcfPageBackgroundColor, 20%) 200px);
- background-image: url(../../images/header.png), linear-gradient(@wcfPageBackgroundColor, darken(@wcfPageBackgroundColor, 20%) 200px);
-}
-
-a {
- color: @wcfLinkColor;
- cursor: pointer;
- text-decoration: none;
-
- &:hover {
- color: @wcfLinkHoverColor;
- text-decoration: underline;
- }
+/* ### layout globals ### */
+.layoutFluid {
+ padding: 0 @wcfLayoutFluidGap;
}
-:focus {
- /*outline: 0;*/
+.layoutFixed {
+ margin: 0 auto;
+ width: @wcfLayoutFixedWidth;
}
+/* ### header ### */
#pageHeader {
margin-top: 57px;
z-index: 100;
visibility: hidden;
}
-small {
- font-size: @wcfSmallFontSize;
+/* user panel */
+.userPanel {
+ background-color: @wcfUserPanelBackgroundColor;
+ border-bottom: 1px solid rgba(0, 0, 0, .1);
+ height: 40px;
+ left: 0;
+ position: fixed;
+ top: 0;
+ right: 0;
+ z-index: 200;
+
+ > div {
+ /* todo */
+ > ul.userPanelItems {
+ float: left;
+
+ .clearfix();
+
+ > li {
+ float: left;
+
+ > a,
+ > div:not(.dropdownMenu) {
+ color: @wcfUserPanelColor;
+ display: block;
+ height: 20px;
+ padding: 10px 8px;
+ position: relative;
+
+ .textShadow(@wcfUserPanelBackgroundColor);
+ .transition(background-color, .2s);
+
+ &:hover {
+ background-color: rgba(0, 0, 0, .4);
+ color: @wcfUserPanelHoverColor;
+ text-decoration: none;
+ }
+
+ > .badge.badgeInverse {
+ background-color: rgb(204, 0, 0);
+ color: white;
+ padding: 0 6px 1px;
+ position: absolute;
+ bottom: 4px;
+ left: 24px;
+ z-index: 300;
+ }
+ }
+
+ > .framed > img {
+ padding: 0px;
+ margin-top: -2px;
+ margin-bottom: -2px;
+ }
+ }
+ }
+
+ > .searchBar {
+ float: right;
+ padding: 6px 0;
+
+ > form input[type="search"] {
+ background-color: rgba(0, 0, 0, .5);
+ background-image: url("../icon/searchInverse.svg");
+ background-repeat: no-repeat;
+ background-position: 7px 5px;
+ border: 1px solid rgba(0, 0, 0, .9);
+ border-radius: 30px;
+ color: @wcfUserPanelColor;
+ padding: 6px 12px 5px 26px;
+ width: 180px;
+ -webkit-appearance: textfield;
+
+ .boxShadowNative(~"inset 0px 1px 3px rgba(0, 0, 0, .9), 0px 1px 0px rgba(255, 255, 255, .1)");
+ .textShadow(@wcfUserPanelBackgroundColor);
+ }
+ }
+ }
}
-.invisible {
- display: none;
+/* header logo */
+.logo {
+ a {
+ display: block;
+ min-height: 100px;
+
+ &:hover {
+ text-decoration: none;
+ }
+
+ h1 {
+ color: @wcfPageLinkHoverColor;
+ float: right;
+ font-size: 160%;
+ padding-top: @wcfGapLarge;
+
+ .textShadow(@wcfPageBackgroundColor);
+ }
+ }
}
-.marginTop {
- margin-top: @wcfGapMedium;
+/* main menu */
+/* todo */
+.mainMenu {
+ > ul {
+ background-color: @wcfMainMenuBackgroundColor;
+ border-bottom: 1px solid @wcfContainerBorderColor;
+
+ &:after {
+ clear: both;
+ content: '';
+ display: block;
+ }
+
+ > li {
+ float: left;
+ font-size: @wcfSubHeadlineFontSize;
+
+ margin-bottom: -1px;
+ border-right: 1px solid @wcfContainerBorderColor;
+
+ > a {
+ color: @wcfPageColor;
+ display: inline-block;
+ padding: 11px 35px;
+ font-weight: bold;
+
+ &:hover {
+ border-bottom: 1px solid @wcfContainerBorderColor;
+ background-color: #f4f4f4;
+ text-decoration: none;
+ }
+ }
+
+ &.active {
+ > a {
+ border-bottom: 1px solid #fff;
+ background-color: #fff;
+ color: #000;
+ }
+ }
+ }
+ }
+}
+
+/* navigation */
+.navigation {
+ padding: 0 7px;
+
+ > ul {
+ display: inline-block;
+
+ &.navigationIcons {
+ float: right;
+
+ > li {
+ float: right;
+ padding: 0 3px;
+
+ &.separator {
+ border-right: 1px dotted @wcfContainerBorderColor;
+ }
+
+ > *:not(script) {
+ padding: 3px;
+ display: inline-block;
+ }
+ }
+ }
+
+ &:not(.navigationIcons) {
+ > li {
+ display: inline-block;
+ margin-top: 5px;
+
+ > a {
+ padding: 2px 4px;
+
+ &:hover {
+ text-decoration: none;
+ }
+ }
+ }
+ }
+ }
}
-img {
- vertical-align: middle !important;
+.navigationHeader {
+ background-color: @wcfNavigationHeaderBackgroundColor;
+ border-bottom: 1px solid @wcfContainerBorderColor;
+}
+
+.navigationFooter {
+ background-color: @wcfNavigationFooterBackgroundColor;
+ border-top: 1px solid @wcfContainerBorderColor;
+ border-radius: 0 0 @wcfContainerBorderRadius @wcfContainerBorderRadius;
}
-::selection {
- text-shadow: 0 1px 0 rgba(255, 255, 255, .5) !important;
- color: #300;
- background-color: rgba(255, 170, 34, .7);
+/* ### footer ### */
+.footer {
+ padding-bottom: @wcfGapMedium;
+ z-index: 100;
+
+ .footerContent {
+ text-align: center;
+
+ a {
+ color: @wcfPageLinkColor;
+
+ .textShadow(@wcfPageBackgroundColor);
+ .transition(color, .1s);
+
+ &:hover {
+ color: @wcfPageLinkHoverColor;
+ text-decoration: none;
+ }
+ }
+ }
+}
+
+/* ### content ### */
+#main {
+ z-index: 110;
+
+ > div {
+ background-color: @wcfSidebarBackgroundColor;
+
+ > .sidebar {
+ width: 300px;
+ z-index: 120;
+ }
+
+ > .content {
+ background-color: @wcfContentBackgroundColor;
+ min-height: 100px;
+ padding: @wcfGapSmall @wcfGapLarge * 2 - @wcfGapTiny @wcfGapLarge;
+ z-index: 130;
+ }
+ }
+
+ &.not(.sidebarOrientationLeft):not(.sidebarOrientationRight) {
+ .sidebar {
+ display: none;
+ }
+ }
+
+ &.sidebarOrientationLeft {
+ .content {
+ margin-left: 300px;
+ }
+
+ .sidebar {
+ float: left;
+ }
+ }
+
+ &.sidebarOrientationRight {
+ .content {
+ margin-right: 300px;
+ }
+
+ .sidebar {
+ float: right;
+ }
+ }
}
/* basic layout elements */
-.layoutFluid {
- padding: 0 @wcfLayoutFluidGap;
+.boxHeadline {
+ margin-top: @wcfGapMedium;
+
+ hgroup {
+ > h1 {
+ color: @wcfHeadlineColor;
+ font-family: @wcfHeadlineFontFamily;
+ font-size: @wcfHeadlineFontSize;
+ font-weight: bold;
+
+ .textShadow(@wcfContentBackgroundColor);
+
+ a {
+ color: @wcfHeadlineColor;
+ text-decoration: none;
+ }
+ }
+
+ > h2, h3 {
+ color: @wcfDimmedColor;
+ font-size: @wcfSmallFontSize;
+ }
+ }
}
-.layoutFixed {
- margin: 0 auto;
- width: @wcfLayoutFixedWidth;
+.contentNavigation {
+ display: table;
+ width: 100%;
+
+ > * {
+ margin-top: @wcfGapMedium;
+ }
+
+ nav ul {
+ text-align: left;
+ }
+
+ nav > ul {
+ float: left;
+
+ &:not(.pageNavigation) {
+ float: right;
+ text-align: right;
+ }
+
+ li {
+ display: inline;
+ }
+ }
}
.container {
padding: @wcfGapMedium @wcfGapLarge @wcfGapMedium;
}
+.containerHeadline {
+ margin-bottom: @wcfGapSmall;
+
+ > h1 {
+ font-size: @wcfTitleFontSize;
+ font-weight: bold;
+
+ > small {
+ color: @wcfDimmedColor;
+ font-weight: normal;
+ text-shadow: none;
+ font-size: 70%;
+ }
+ }
+
+ > h1, > h1 > a {
+ .textShadow(@wcfContainerBackgroundColor);
+ }
+}
+
.containerList {
> li {
padding: @wcfGapMedium @wcfGapLarge;
}
}
-.containerHeadline {
- margin-bottom: @wcfGapSmall;
-
- > h1 {
- font-size: @wcfTitleFontSize;
- font-weight: bold;
-
- > 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) */
.box128 { .box(128px, 14px); }
.box256 { .box(256px, 21px); }
-/*
- language selection
-*/
-.boxFlag {
- cursor: pointer;
- min-height: 23px;
- padding: 0 @wcfGapTiny;
- vertical-align: middle;
+/* bread crumbs */
+.breadcrumbs {
+ box-sizing: border-box;
+ display: block;
+ overflow: hidden;
+ position: relative;
+ text-align: left;
- > div {
- float: left;
+ > ul {
+ > li {
+ float: left;
+ font-size: @wcfSmallFontSize;
+ list-style: none;
+ max-width: 30%;
+ position: relative;
+
+ .transition(max-width, .2s);
+
+ &:hover {
+ max-width: 100%;
+ }
+
+ > a {
+ color: @wcfColor;
+ display: inline-block;
+ overflow: hidden;
+ padding: 5px 1px 5px 5px;
+ text-decoration: none;
+ white-space: nowrap;
+
+ .textShadow(@wcfContentBackgroundColor);
+ }
+
+ &:first-child > a {
+ background-image: url('../icon/home.svg');
+ background-position: 1px center;
+ background-repeat: no-repeat;
+ background-size: 16px;
+ padding-left: 21px;
+ }
+ }
}
+}
+
+
+/* tab menus */
+.tabMenu {
+ display: block;
+ margin-top: @wcfGapLarge;
+ position: relative;
+ text-align: left;
- > hgroup {
- margin-left: 34px;
- min-height: 23px;
+ > ul {
+ background-color: @wcfContainerAccentBackgroundColor;
+ border-color: @wcfContainerBorderColor;
+ border-style: solid;
+ border-width: 1px 1px 0 1px;
+ display: inline-block;
+ padding: 0 5px 3px 5px;
+ position: relative;
+ white-space: nowrap;
- h1 {
- padding-top: 2px;
+ .textShadow(@wcfContainerBackgroundColor);
+
+ > li {
+ display: inline-block;
+ white-space: nowrap;
+
+ &.ui-state-active {
+ margin-right: -7px;
+ margin-left: -6px;
+
+ > a {
+ background-color: @wcfContainerBackgroundColor;
+ border-color: @wcfContainerBorderColor @wcfContainerBorderColor @wcfContainerBackgroundColor;
+ border-style: solid;
+ border-width: 1px;
+ color: @wcfLinkColor;
+ font-weight: bold;
+ font-size: 130%;
+ margin-top: -10px;
+ padding: 10px 15px 5px;
+ z-index: 30;
+ }
+ }
+
+ > 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;
+ }
+ }
}
}
}
-.boxHeadline {
- margin-top: @wcfGapMedium;
+.tabMenu > ul > li.ui-state-active > a,
+.tabMenu > ul > li.ui-state-disabled > a,
+.tabMenu > ul > li.ui-state-processing > a {
+ cursor: default;
+}
+
+.tabMenuContent {
+ border-top-left-radius: 0;
+ display: block;
+ margin-top: -1px;
+ min-height: @wcfGapLarge;
+ position: relative;
+ z-index: 20; /* Prevents border overlay during transition */
+}
+
+/* todo */
+.tabMenuContainer > .menu {
+ border-bottom: 1px solid @wcfContainerBorderColor;
+ margin: -@wcfGapMedium -@wcfGapLarge @wcfGapSmall -@wcfGapLarge; /* reverse paddings from .containerPadding */
+ padding: @wcfGapSmall 0;
+ text-align: center;
- hgroup {
- > h1 {
- color: @wcfHeadlineColor;
- font-family: @wcfHeadlineFontFamily;
- font-size: @wcfHeadlineFontSize;
- font-weight: bold;
+ .borderRadius(@wcfContainerBorderRadius, 0);
+ .linearGradient(rgba(0, 0, 0, 0), @wcfContainerBackgroundColor, @wcfContainerAccentBackgroundColor);
+
+ ul{
+ display: inline-block;
+
+ li {
+ display: inline-block;
- .textShadow(@wcfContentBackgroundColor);
+ &.ui-state-active a,
+ &.ui-state-active a:hover {
+ background-color: @wcfButtonPrimaryBackgroundColor;
+ border-color: @wcfButtonPrimaryBorderColor;
+ color: @wcfButtonPrimaryColor;
+ cursor: default;
+ }
a {
- color: @wcfHeadlineColor;
- text-decoration: none;
+ background-color: @wcfContainerBackgroundColor;
+ border: 1px solid @wcfContainerBorderColor;
+ color: @wcfButtonColor;
+ display: block;
+ font-size: 85%;
+
+ padding: @wcfGapTiny @wcfGapSmall;
+
+ .borderRadius(30px);
+
+ &:hover {
+ background-color: @wcfButtonHoverBackgroundColor;
+ border-color: @wcfButtonHoverBorderColor;
+ color: @wcfButtonHoverColor;
+ text-decoration: none;
+ }
}
}
-
- > h2, h3 {
- color: @wcfDimmedColor;
- font-size: @wcfSmallFontSize;
- }
}
}
-.icon(@imageSize) {
- .square(@imageSize);
+.containerPadding > .tabMenuContainer:last-child {
+ margin-bottom: @wcfGapSmall;
}
-.icon16 { .icon(16px); }
-.icon24 { .icon(24px); }
-.icon32 { .icon(32px); }
-.icon48 { .icon(48px); }
-.icon64 { .icon(64px); }
-.icon96 { .icon(96px); }
-.icon128 { .icon(128px); }
-.icon256 { .icon(256px); }
+/* ToDo: 2x hidden? */
+.ui-tabs .ui-tabs-hide {
+ display: none !important;
+}
-.iconFlag {
- height: 15px;
- width: 24px;
+.ui-helper-hidden {
+ display: none;
}
-dl.dataList {
- dt {
- float: left;
- overflow: hidden;
- text-align: right;
- text-overflow: ellipsis;
- white-space: nowrap;
- width: 35%;
+.ui-helper-hidden-accessible {
+ position: absolute !important;
+ clip: rect(1px 1px 1px 1px);
+ clip: rect(1px,1px,1px,1px);
+}
+
+/* ### tabular boxes ### */
+.tabularBox {
+ background-color: @wcfTabularBoxBackgroundColor;
+ border: 1px solid @wcfContainerBorderColor;
+
+ .borderRadius();
+}
+
+.tabularBoxTitle > hgroup {
+ color: @wcfTabularBoxColor;
+ padding: 5px 7px;
+
+ > h1 {
+ font-size: @wcfTitleFontSize;
+ font-weight: bold;
+
+ .textShadow(@wcfTabularBoxBackgroundColor);
+
+ > a {
+ color: @wcfTabularBoxColor;
+
+ &:hover {
+ color: @wcfTabularBoxHoverColor;
+ text-decoration: none;
+ }
+ }
}
+}
+
+.tabularBox:not(.tabularBoxTitle) > .table {
+ > thead > tr:first-child > th {
+ &:first-child {
+ .borderRadius(@wcfContainerBorderRadius - 2, 0, 0, 0);
+ }
+
+ &:last-child {
+ .borderRadius(0, @wcfContainerBorderRadius - 2, 0, 0);
+ }
+ }
+}
+
+.table {
+ border-spacing: 0;
+ width: 100%;
- dd {
+ /* cells */
+ th,
+ td {
+ padding: @wcfGapSmall;
text-align: left;
- margin-left: 38%;
+ vertical-align: middle;
+
+ > label {
+ cursor: pointer;
+ display: block;
+ margin: -@wcfGapSmall;
+ padding: @wcfGapSmall;
+
+ > input[type="checkbox"] {
+ margin: 0 3px;
+ }
+ }
+ }
+
+ /* headline */
+ th {
+ background-color: rgba(0, 0, 0, .4);
+ border-right: 1px solid rgba(0, 0, 0, .2);
+ color: @wcfTabularBoxColor;
+ font-size: @wcfSmallFontSize;
+ font-weight: bold;
+ white-space: nowrap;
+
+ .textShadow(@wcfTabularBoxBackgroundColor);
+
+ > a {
+ color: @wcfTabularBoxColor;
+ display: block;
+ margin: -@wcfGapSmall;
+
+ &:hover {
+ text-decoration: none;
+ }
+
+ > img {
+ margin: -5px 0;
+ }
+ }
+
+ &:hover > a,
+ &.active > a {
+ background-color: rgba(0, 0, 0, .1);
+ color: @wcfTabularBoxHoverColor;
+
+ .boxShadowInset(0, 10px, rgba(0, 0, 0, .1), 10px, -10px);
+ }
+
+ > * {
+ padding: @wcfGapSmall;
+ }
+ }
+
+ /* content */
+ td {
+ background-color: @wcfContainerBackgroundColor;
+
+ .transition(background, .1s);
+
+ &.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: @wcfSmallFontSize;
+ text-align: right;
+ width: 1% !important;
+ white-space: nowrap;
+ }
+
+ &.columnURL, &.columnSmallText {
+ font-size: @wcfSmallFontSize;
+ text-align: left;
+ }
+ }
+
+ /* striped */
+ > tbody {
+ > tr:nth-child(even) > td {
+ background-color: @wcfContainerAccentBackgroundColor;
+ }
+ }
+
+ /* hover */
+ > tbody {
+ > tr {
+ &:not(:last-child) {
+ > td {
+ border-bottom: 1px solid rgba(255, 255, 255, .3);
+ }
+ }
+
+ &:hover {
+ > td {
+ background-color: @wcfContainerHoverBackgroundColor;
+ }
+ }
+
+ > td:not(:last-child) {
+ border-right: 1px solid rgba(255, 255, 255, .3);
+ }
+
+ > td.focus {
+ background-color: @wcfContainerHoverBackgroundColor;
+ }
+
+ > td.left {
+ text-align: left;
+ }
+
+ > td.right {
+ text-align: right;
+ }
+ }
+ }
+
+ .statusDisplay {
+ padding: 1px 0;
+ float: right;
+
+ .statusIcons {
+ float: right;
+ margin-left: @wcfGapSmall;
+
+ li {
+ display: inline-block;
+ }
+ }
}
}
+.tabularBox .table {
+ tbody tr:last-child td {
+ &:first-child {
+ .borderRadius(0, 0, 0, @wcfContainerBorderRadius - 2);
+ }
+
+ &:last-child {
+ .borderRadius(0, 0, @wcfContainerBorderRadius - 2, 0);
+ }
+ }
+}
+
+/* ### definition lists ### */
dl.statsDataList {
- dt {
+ > dt {
color: @wcfDimmedColor;
display: block;
float: right;
white-space: nowrap;
width: 62%;
- a {
+ > a {
color: @wcfDimmedColor;
text-decoration: none;
}
}
- dd {
+ > dd {
color: @wcfColor;
float: left;
font-weight: bold;
white-space: nowrap;
width: 35%;
- a {
+ > a {
color: @wcfColor;
text-decoration: none;
}
overflow: hidden;
white-space: nowrap;
- dd {
+ > dd {
display: inline-block;
margin: 0 4px 0 0;
padding: 0;
}
- dt {
+ > dt {
color: @wcfDimmedColor;
display: inline-block;
margin: 0;
}
}
+dl.dataList {
+ dt {
+ float: left;
+ overflow: hidden;
+ text-align: right;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ width: 35%;
+ }
+
+ dd {
+ text-align: left;
+ margin-left: 38%;
+ }
+}
+
ul.dataList {
li {
display: inline-block;
}
}
-.framed {
- img {
- background-color: @wcfContentBackgroundColor;
- border: 1px solid @wcfContainerBorderColor;
- padding: 1px;
+/* ### page navigation ### */
+.contentNavigation .pageNavigation {
+ float: left;
+ margin: @wcfGapMedium + 5 0 3px;
+
+ ul li {
+ margin: 0 2px;
}
}
-.contentOptions {
- font-size: @wcfSmallFontSize;
- position: relative;
-
- nav {
- bottom: -2px;
- opacity: 0;
- position: absolute;
- right: -22px;
- text-align: right;
-
- .transition(opacity, .1s);
-
- ul.smallButtons > li {
- display: inline-block;
- margin-left: -5px;
+.pageNavigation {
+ ul {
+ li {
+ float: left;
+ font-weight: bold;
+ margin: 0 1px;
+ min-width: 19px;
+ padding: 0;
+ text-align: center;
+
+ &:not(.active):not(.disabled) {
+ cursor: pointer;
+ }
- &:first-child a.button {
- border-top-left-radius: 14px;
+ &.disabled {
+ background-image: none !important;
+ border: 1px solid rgba(0, 0, 0, .1) !important;
+ cursor: not-allowed;
}
- &:last-child a.button {
- border-bottom-right-radius: @wcfContainerBorderRadius;
+ &.skip {
+ padding: 1px 0 1px;
+ }
+
+ &:not(.disabled):hover a {
+ color: @wcfButtonHoverColor;
+ }
+
+ &:not(.skip) a {
+ padding: 2px 1px;
+ }
+
+ &.active, &.active:hover {
+ border: 1px solid darken(@wcfButtonColor, 5%);
+ color: lighten(@wcfButtonBackgroundColor, 5%);
+ padding: 2px 0;
+
+ /* todo */
+ .linearGradient(@wcfButtonColor, darken(@wcfButtonColor, 10%), @wcfButtonColor 3px);
+ .textShadow(#000);
}
- a.button {
+ img {
+ height: 16px;
margin: 0;
- padding-right: @wcfGapSmall;
+ width: 16px;
+ }
+
+ a {
+ color: @wcfButtonColor;
+ display: block;
+ text-decoration: none;
- .borderRadius(0);
+ .textShadow(@wcfButtonBackgroundColor);
}
}
}
}
-.applicationList:hover .contentOptions nav {
- opacity: 1;
+.statusDisplay .pageNavigation {
+ font-size: @wcfSmallFontSize;
+ float: left;
+ margin-top: 2px;
+
+ ul {
+ li {
+ min-width: 13px;
+
+ &:not(.skip) a {
+ padding: 1px;
+ }
+ }
+ }
}
-img.disabled {
- opacity: .3;
+/* ### sidebar ### */
+.sidebar > fieldset:not(:last-child), .sidebar > div:not(:last-child) {
+ border-bottom: 1px solid @wcfContainerBorderColor;
+ margin-bottom: @wcfGapMedium;
}
-/* -- -- -- Shadows -- -- -- */
-
-/* Shadows for boxes - do not use on small boxes! */
+.sidebar.collapsibleMenu > fieldset, .sidebar.collapsibleMenu > div {
+ border-bottom-width: 0;
+}
-.shadow {
- //.boxShadow(0, 10px, rgba(0, 0, 0, .1), 10px, -10px);
- //.boxShadow(0, 1px, rgba(0, 0, 0, .5), 5px, 0); //
+.sidebar {
+ padding-top: @wcfGapLarge;
+
+ fieldset {
+ padding: @wcfGapSmall @wcfGapMedium @wcfGapMedium;
+ margin-top: 0;
+ width: 300px - @wcfGapMedium * 2;
+
+ > legend {
+ border-width: 0;
+ color: @wcfColor;
+ font-family: @wcfBaseFontFamily;
+ font-weight: normal;
+ font-size: 100%;
+ padding: 0;
+ text-transform: uppercase;
+
+ .textShadow(@wcfSidebarBackgroundColor);
+
+ > .badge {
+ float: right;
+ }
+
+ > a {
+ color: @wcfColor;
+ text-decoration: none;
+ }
+ }
+
+ &:after {
+ content: "";
+ height: 0;
+ display: block;
+ clear: both;
+ }
+
+ .button.more {
+ margin: 5px 0 0;
+ float: right;
+ }
+
+ nav {
+ margin: 0 -@wcfGapMedium 0;
+
+ ul {
+ > li {
+ &.active {
+ background-color: @wcfContentBackgroundColor;
+
+ > a {
+ font-weight: bold;
+ }
+ }
+
+ &:hover:not(.active) {
+ background-color: @wcfContainerHoverBackgroundColor;
+ }
+
+ > a {
+ color: @wcfLinkColor;
+ display: block;
+ padding: @wcfGapTiny @wcfGapMedium @wcfGapSmall @wcfGapLarge;
+
+ &:hover {
+ text-decoration: none;
+ }
+ }
+ }
+ }
+ }
+
+ }
+
+ .sidebarBoxList > li:not(:last-child) {
+ margin-bottom: 7px;
+ }
+
+ .sidebarBoxHeadline {
+ > h1 {
+ margin-bottom: 1px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+
+ .textShadow(@wcfSidebarBackgroundColor);
+
+ a {
+ .textShadow(@wcfSidebarBackgroundColor);
+ }
+
+ small {
+ text-shadow: none;
+ }
+ }
+ }
+
+ .formSubmit {
+ margin-top: 0;
+ }
+
+ &.collapsibleMenu {
+ legend {
+ background-image: url(../icon/arrowRightColored.svg);
+ background-position: 15px center;
+ background-repeat: no-repeat;
+ background-size: 16px;
+ color: @wcfLinkColor;
+ cursor: pointer;
+ font-weight: bold;
+ font-size: 130%;
+ padding-left: (@wcfGapLarge + 16px + @wcfGapTiny);
+ margin-left: -@wcfGapMedium;
+ text-transform: none;
+
+ &.active {
+ background-image: url(../icon/arrowDownColored.svg);
+ }
+ }
+
+ nav {
+ ul {
+ > li {
+ > a {
+ padding-left: (@wcfGapLarge + 16px + @wcfGapTiny);
+ }
+ }
+ }
+ }
+ }
}
+++ /dev/null
-/* ############## 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 */
-
-.likesWidget {
- margin: 0 0 0 15px;
-}
-
-.likesWidget > ul {
- float: right;
- margin-right: 7px;
- margin-left: 10px;
-}
-
-.likesWidget > ul > li {
- text-align: right;
- display: inline-block;
-}
-
-.likesWidget > ul > li:first-child {
- margin-right: 2px;
-}
-
\ No newline at end of file
+++ /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
+++ /dev/null
-.message {
- background-color: @wcfContainerHoverBackgroundColor;
- border: 1px solid @wcfContainerBorderColor;
- position: relative;
-
- .borderRadius();
-
- &:after {
- clear: both;
- content: '';
- display: block;
- }
-
- &:hover .contentOptions nav {
- opacity: 1;
- }
-
- &.messageDeleted {
- background-color: @wcfErrorBackgroundColor;
-
- .messageSidebar {
- color: @wcfErrorColor !important;
-
- a {
- color: @wcfErrorColor !important;
- }
- }
- }
-
- &.messageDisabled:not(.messageDeleted) {
- background-color: @wcfSuccessBackgroundColor;
-
- .messageSidebar {
- color: @wcfSuccessColor !important;
-
- a {
- color: @wcfSuccessColor !important;
- }
- }
- }
-}
-
-.message.messageSidebarOrientationLeft {
- .messageContent {
- border-left: 1px solid @wcfContainerBorderColor;
- margin: 0 0 0 211px;
- }
-
- .messageSidebar {
- float: left;
- }
-
- .messageHeader > .pointer {
- border-color: transparent @wcfContainerBorderColor transparent transparent;
- border-style: solid solid solid none;
- left: -20px;
-
- > span {
- border-color: transparent @wcfContainerBackgroundColor transparent transparent;
- border-style: solid solid solid none;
- left: 1px;
- }
- }
-}
-
-.message.messageSidebarOrientationRight {
- .messageContent {
- border-right: 1px solid @wcfContainerBorderColor;
- margin: 0 211px 0 0;
- }
-
- .messageSidebar {
- float: right;
- }
-
- .messageHeader > .pointer {
- border-color: transparent transparent transparent @wcfContainerBorderColor;
- border-style: solid none solid solid;
- right: -20px;
-
- > span {
- border-color: transparent transparent transparent @wcfContainerBorderColor;
- border-style: solid none solid solid;
- right: 1px;
- }
- }
-}
-
-.message.dividers {
- .userCredits {
- border-top: 1px solid darken(@wcfSidebarBackgroundColor, 8%); //darken(@wcfContainerBorderColor, 10%);
-
- .boxShadowInset(0, 1px, #fff, 0);
- }
-}
-
-.message .messageHeader {
- > .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;
- }
- }
-
- .messageCounter {
- float: right;
- font-size: @wcfSmallFontSize;
- font-weight: bold;
- margin-left: @wcfGapSmall;
-
- a {
- padding: 1px 5px;
- vertical-align: middle;
- }
-
- input[type=checkbox] {
- vertical-align: middle;
- }
- }
-}
-
-.message .messageBody {
- color: @wcfColor;
- display: block;
- line-height: 1.5;
- padding: @wcfGapMedium @wcfGapLarge 1px;
- position: relative;
-
- &:after {
- clear: both;
- content: '';
- display: block;
- }
-
- > div:not(.messageFooter) {
- border-top: 1px dotted @wcfContainerBorderColor;
- overflow: hidden;
- padding: @wcfGapMedium 0;
- }
-
- > *:last-child {
- //padding-bottom: @wcfGapMedium;
- }
-
- > footer {
- padding-bottom: @wcfGapMedium;
- }
-
- > .messageSignature {
- color: @wcfDimmedColor;
- }
-
- .messageFooter {
- > *:not(:first-child) {
- margin-top: @wcfGapSmall;
- }
-
- > .messageFooterNote {
- border-left: 2px solid @wcfContainerBorderColor;
- color: @wcfDimmedColor;
- font-size: @wcfSmallFontSize;
- padding: @wcfGapTiny @wcfGapSmall;
-
- @messageFooterNoteGradientColor: fade(@wcfContainerBorderColor, 20%);
- .linearGradientNative(~"left top, @{messageFooterNoteGradientColor} 0%, transparent 40%");
- }
- }
-}
-
-.message .messageContent {
- background-color: @wcfContainerBackgroundColor;
-
- .borderRadius(5px, 4px, 4px, 5px);
-
- .messageHeader {
- padding: @wcfGapMedium @wcfGapLarge 0;
- position: relative;
-
- > time {
- color: @wcfDimmedColor;
- font-size: @wcfSmallFontSize;
- }
-
- > .likesBadge {
- display: inline-block;
- margin: -2px 0 -2px 4px;
- }
-
- > .messageTitle {
- color: @wcfColor;
- font-size: @wcfSubHeadlineFontSize;
- font-weight: bold;
- padding: @wcfGapSmall 0 0;
-
- .textShadow(@wcfContainerBackgroundColor);
- }
- }
-}
-
-.message .messageSidebar {
- //font-size: 90%;
- line-height: 1.3;
- margin-bottom: -1px;
- padding: @wcfGapMedium @wcfGapLarge @wcfGapLarge;
- position: relative;
- text-align: center;
- width: 170px; /* Width toggle */
-
- &:after {
- clear: both;
- content: '';
- display: block;
- }
-
- header .username {
- color: @wcfLinkColor;
- font-size: @wcfTitleFontSize;
- font-weight: bold;
- padding: 0 3px 1px;
-
- .textShadow(@wcfContainerHoverBackgroundColor);
-
- a {
- text-decoration: none;
- }
- }
-
- .userTitle {
- /* todo */
- margin: 7px 0 0;
- }
-
- .userRank {
- /* todo */
- margin: 2px 0 0;
- }
-
- .userAvatar {
- display: inline-block;
- margin: @wcfGapSmall 0 0;
- position: relative;
- text-align: left;
-
- > a > img {
- /* todo */
- -webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.6, transparent), to(rgba(0, 0, 0, .3)));
- }
-
- > .badgeOnline {
- background-color: fade(@wcfSuccessBackgroundColor, 70%);
- border-bottom: 1px solid rgba(255, 255, 255, .7); /*todo*/
- bottom: 7px;
- position: absolute;
- right: -5px;
- text-transform: uppercase;
-
-
- .borderRadius(2px);
- .boxShadow(0, 1px, rgba(0, 0, 0, .3), 7px);
- }
- }
-
- .userCredits {
- font-size: @wcfSmallFontSize;
- margin: @wcfGapSmall 0 0;
- padding: @wcfGapSmall 0 0;
-
- .dataList {
- dt {
- width: 47%;
- }
-
- dd {
- margin-left: 50%;
- }
- }
- }
-
- /*&.online {
- .userAvatar {
- .boxShadow(0, 0, @wcfSuccessBackgroundColor, 10px);
-
- // todo
- -webkit-animation-name: onlineStatus;
- -webkit-animation-duration: 2s;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-direction: alternate;
- -webkit-animation-timing-function: ease-in-out;
- }
- }*/
-}
-
-li:nth-child(2n+1) .message {
- &.messageSidebarOrientationLeft .messageHeader > .pointer > span {
- border-right-color: @wcfContainerAccentBackgroundColor;
- }
-
- &.messageSidebarOrientationRight .messageHeader > .pointer > span {
- border-left-color: @wcfContainerAccentBackgroundColor;
- }
-
- .messageContent {
- background-color: @wcfContainerAccentBackgroundColor;
- }
-}
-
-.messageReduced {
- .contentOptions > .breadcrumbs {
- bottom: 10px;
- left: 0;
- opacity: 1;
- position: relative;
- }
-}
-
-.messageCollapsed {
- background-color: lighten(@wcfContainerBorderColor, 16%);
- border-color: lighten(@wcfContainerBorderColor, 8%);
- color: @wcfDimmedColor;
- opacity: .7;
- padding: @wcfGapMedium @wcfGapLarge;
-
- .boxShadow(0, 0, @wcfContainerBorderColor, 10px);
- .transition(opacity, .1s);
-
- &:hover {
- opacity: 1;
- }
-
- &.messageCollapsedExpandable {
- cursor: pointer;
- }
-
- p {
- display: inline-block;
- vertical-align: middle;
-
- span {
- display: block;
- font-size: @wcfSmallFontSize;
- margin-left: @wcfGapSmall;
- }
- }
-
- .messageCounter {
- padding-top: 3px;
- }
-}
-
-/*todo: move*/
-.highlight {
- background-color: rgba(255, 200, 0, 1);
-}
-
-/* todo */
-/*@-webkit-keyframes onlineStatus {
- 0% {
- -webkit-box-shadow: 0 0 10px @wcfSuccessBackgroundColor;
- }
- 100% {
- -webkit-box-shadow: 0 0 20px @wcfSuccessBackgroundColor;
- }
-}*/
-
-/* quick reply and inline editor */
-.jsMessageLoading {
- background-image: url(../icon/spinner.svg);
- background-position: center center;
- background-repeat: no-repeat;
- background-size: 64px;
-}
-
-#messageQuickReply {
- .messageQuickReplyLoading {
- background-image: url(../icon/spinner.svg);
- background-position: center center;
- background-repeat: no-repeat;
- background-size: 64px;
- }
-
- .formSubmit {
- padding-bottom: @wcfGapMedium;
- }
-}
-
-/* message quotes */
-#showQuotes {
- bottom: @wcfGapLarge + @wcfGapTiny;
- cursor: pointer;
- opacity: .7;
- position: fixed;
- right: @wcfGapLarge + @wcfGapTiny;
-
- .transition(opacity, .2s);
-
- &:hover {
- opacity: 1;
- }
-}
-
-#messageQuoteList {
- max-width: 800px !important;
-
- li {
- &:not(:first-child) {
- margin-top: @wcfGapSmall;
- }
-
- span {
- float: left;
- width: 40px;
-
- > input {
- vertical-align: bottom;
- }
-
- > img {
- cursor: pointer;
- vertical-align: middle;
- }
- }
-
- div.jsQuote {
- margin-left: 60px;
- }
-
- div.jsFullQuote {
- display: none;
- }
- }
-}
-
-#quoteManagerCopy {
- cursor: pointer;
-
- .pointer {
- border-width: 5px 5px 0;
- bottom: -5px;
- top: auto;
- }
-}
+++ /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%);
- }
-
- > *:not(script) {
- padding: 3px;
- display: inline-block;
- color: @wcfLinkColor;
- }
-
- a:hover {
- background-color: @wcfSidebarBackgroundColor;
- }
- }
- }
-
- &:not(.navigationIcons) {
-
- li {
- display: inline-block;
- margin-top: 5px;
-
- a {
- padding: 2px 4px;
-
- .textShadow(@wcfNavigationBackgroundColor);
-
- &:hover {
- text-decoration: none;
- }
- }
- }
- }
- }
-}
-
-.navigationHeader {
- border-bottom: 1px solid darken(@wcfSidebarBackgroundColor, 8%);
- border-radius: @wcfContainerBorderRadius @wcfContainerBorderRadius 0 0;
-}
-
-.navigationFooter {
- border-top: 1px solid darken(@wcfSidebarBackgroundColor, 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: -4px 0 0;
-
- &:first-child {
- margin-right: -5px;
- }
-
- &:last-child {
- margin-left: -5px;
- }
-
- &:only-child {
- margin: -4px 0 0;
- }
-
- a {
- border-top-left-radius: 5px;
- border-top-right-radius: 5px;
- color: @wcfPageLinkColor;
- font-size: 110%;
- font-weight: bold;
- z-index: 10;
-
- .linearGradient(@wcfNavigationBackgroundColor, lighten(@wcfNavigationBackgroundColor, 20%), @wcfNavigationBackgroundColor);
- .textShadow(@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, @wcfNavigationBackgroundColor, 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, @wcfNavigationBackgroundColor, 0);
- }
- }
- }
-
- &:not(.active) {
- margin-top: -3px;
-
- &:hover {
- > a {
- color: @wcfPageLinkHoverColor;
- }
- }
- }
-
- > a {
- color: @wcfPageLinkColor;
- cursor: pointer;
- display: inline-block;
- font-weight: normal;
- padding: 8px 20px;
- position: relative;
- text-decoration: none;
- white-space: nowrap;
-
- .transition(~"border, background-color, background-image, color", .3s, ease);
- .textShadow(@wcfPageBackgroundColor);
- }
- }
- }
-
- .badge {
- margin: -5px 0;
- }
-}
-
-.contentNavigation {
- display: table;
- width: 100%;
-
- > * {
- margin-top: @wcfGapMedium;
- }
-
- nav ul {
- text-align: left;
- }
-
- nav > ul {
- float: left;
-
- &:not(.pageNavigation) {
- float: right;
- text-align: right;
- }
-
- li {
- display: inline;
- }
- }
-}
\ No newline at end of file
+++ /dev/null
-/*
-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
-*/
-
-.userNotificationContainer {
- width: 250px;
-}
-
-.userNotificationDetails {
- padding: @wcfGapMedium;
- width: 250px - 2 * @wcfGapMedium;
-
- > header {
- margin-top: 0;
-
- hgroup {
- h1 {
- border-bottom: 1px solid @wcfContainerBorderColor;
- font-size: 150%;
- margin-bottom: @wcfGapTiny;
- padding-bottom: @wcfGapTiny;
- }
-
- h2 {
- color: @wcfDimmedColor;
- font-size: 90%;
- }
- }
- }
-
- section {
- border-top: 1px dotted @wcfContainerBorderColor;
- margin-top: @wcfGapTiny;
- padding-top: @wcfGapMedium;
- }
-
- nav {
- border-top: 1px dotted @wcfContainerBorderColor;
- margin-bottom: -@wcfGapSmall;
- margin-top: @wcfGapMedium;
- padding-top: @wcfGapSmall;
- text-align: center;
-
- ul {
- display: inline-block;
- float: none;
- }
- }
-}
-
-.userNotificationItem hgroup {
- h2 {
- color: @wcfDimmedColor;
- font-size: 85%;
- }
-}
-
-.scrollableContainer {
- overflow: hidden;
- position: relative;
- width: 250px;
-
- .scrollableItems {
- position: relative;
- width: 20000em;
-
- > div {
- float: left;
- width: 250px;
-
- &:first-child {
- border-right: 1px solid @wcfContainerBorderColor;
-
- ul li {
- cursor: pointer;
- display: inline-block;
- overflow: hidden;
- padding: @wcfGapSmall @wcfGapMedium;
- text-overflow: ellipsis;
- white-space: nowrap;
- width: 250px - 2 * @wcfGapMedium;
-
- &:first-child {
- margin-top: @wcfGapSmall;
- }
-
- &.dropdownDivider {
- padding-left: 0;
- }
- }
-
- p {
- padding: @wcfGapSmall;
- }
- }
- }
- }
-}
\ 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 */
-
-.contentNavigation .pageNavigation {
- float: left;
- margin: @wcfGapMedium + 5 0 3px;
-
- ul li {
- margin: 0 2px;
- }
-}
-
-/* -- -- -- Buttons (Level 1 & 2) -- -- -- */
-
-.pageNavigation {
- ul {
- li {
- border-radius: 3px;
- float: left;
- font-weight: bold;
- margin: 0 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: 1px 0 1px;
- }
-
- &:not(.disabled):hover a {
- color: @wcfButtonHoverColor;
- }
-
- &:not(.skip) a {
- padding: 2px 1px;
- }
-
- &.active, &.active:hover {
- border: 1px solid darken(@wcfButtonColor, 5%);
- color: lighten(@wcfButtonBackgroundColor, 5%);
- padding: 2px 0;
-
- .linearGradient(@wcfButtonColor, darken(@wcfButtonColor, 10%), @wcfButtonColor 3px);
- .textShadow(#000);
- }
-
- img {
- height: 16px;
- margin: 0;
- width: 16px;
- }
-
- a {
- color: @wcfButtonColor;
- display: block;
- text-decoration: none;
-
- .textShadow(@wcfButtonBackgroundColor);
- }
- }
- }
-}
-
-
-/* Special -> Status Display */
-
-.statusDisplay .pageNavigation {
- font-size: @wcfSmallFontSize;
- float: left;
- margin-top: 2px;
-
- ul {
- li {
- min-width: 13px;
-
- &:not(.skip) a {
- padding: 1px;
- }
- }
- }
-}
\ No newline at end of file
+++ /dev/null
-#pollOptionContainer .sortableList {
- padding: @wcfGapSmall 0;
-
- .sortableNode {
- margin-top: @wcfGapSmall;
-
- .sortableButtonContainer > img {
- cursor: pointer;
- margin-right: @wcfGapMedium;
- }
- }
-}
-
-.pollContainer {
- float: left;
- margin: 0 @wcfGapMedium @wcfGapSmall 0;
- max-width: 50%;
- min-width: 300px;
-}
-
-.pollResultList {
- li {
- margin-bottom: 8px;
- padding: 1px 0;
- position: relative;
- z-index: 0;
-
- .transition(background-color, .1s);
-
- &:last-child {
- margin-bottom: 0px;
- }
-
- &:hover {
- background-color: @wcfContainerAccentBackgroundColor;
- }
-
- .pollMeter {
- background-color: @wcfContainerHoverBackgroundColor;
- height: 1.5em;
- left: 0;
- position: absolute;
- top: 1px;
- z-index: -1;
-
- .borderRadius(0, 5px, 5px, 0);
- }
-
- .caption {
- color: @wcfLinkColor;
-
- .optionName {
- padding: 0 2.5em 0 @wcfGapTiny;
- }
-
- .relativeVotes {
- position: absolute;
- right: 0;
- top: 3px;
- }
- }
- }
-}
\ No newline at end of file
+++ /dev/null
-.popover {
- background-color: rgba(0, 0, 0, .4);
- background-image: url(../icon/spinner.svg);
- background-position: center center;
- background-repeat: no-repeat;
- background-size: 32px;
- max-width: 450px;
- min-height: 32px;
- min-width: 150px;
- padding: @wcfGapSmall;
- position: absolute;
- vertical-align: middle;
- z-index: 320;
-
- .borderRadius();
- .boxShadow(0, 1px, rgba(0, 0, 0, .3), 7px);
-
- &:after {
- border: 10px solid transparent;
- content: "";
- display: inline-block;
- position: absolute;
- z-index: 100;
- }
-
- &.top:after {
- border-bottom-width: 0;
- border-top-color: rgba(0, 0, 0, .4);
- bottom: -10px;
- }
-
- &.bottom:after {
- border-bottom-color: rgba(0, 0, 0, .4);
- border-top-width: 0;
- top: -10px;
- }
-
- &.right:after {
- left: 10px;
- }
-
- &.left:after {
- right: 10px;
- }
-}
-
-.popoverContent {
- background-color: @wcfContainerBackgroundColor;
- color: @wcfColor;
- opacity: 0;
- padding: @wcfGapSmall @wcfGapMedium;
-
- .borderRadius();
-}
\ No newline at end of file
+++ /dev/null
-.sidebarContent {
- padding-top: @wcfGapLarge;
-
- > ul {
- > li {
- margin-bottom: @wcfGapMedium;
-
- &:not(:last-child) {
- border-bottom: 1px solid darken(@wcfSidebarBackgroundColor, 8%);
- }
-
- &.sidebarContainer {
- padding: 0 @wcfGapMedium @wcfGapMedium;
-
- .button.more {
- margin: 5px 0 0;
- float: right;
- }
-
- &:after {
- content: "";
- height: 0;
- display: block;
- clear: both;
- }
- }
-
- .sidebarContainerHeadline {
- margin-bottom: @wcfGapSmall;
-
- > h1 {
- text-transform: uppercase;
-
- .textShadow(@wcfSidebarBackgroundColor);
-
- .badge {
- float: right;
- }
-
- a {
- color: @wcfColor;
- text-decoration: none;
- }
- }
- }
-
- .sidebarBox:not(:last-child) {
- margin-bottom: 7px;
- }
-
- .sidebarBoxHeadline {
- > h1 {
- margin-bottom: 1px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-
- .textShadow(@wcfSidebarBackgroundColor);
-
- a {
- .textShadow(@wcfSidebarBackgroundColor);
- }
-
- small {
- text-shadow: none;
- }
- }
- }
-
- /* forms */
- fieldset {
- padding: @wcfGapSmall 0 0;
-
- legend {
- border-width: 0;
- color: @wcfColor;
- font-family: @wcfBaseFontFamily;
- font-weight: normal;
- font-size: 100%;
- padding: 0;
- text-transform: uppercase;
-
- .textShadow(@wcfSidebarBackgroundColor);
- }
- }
- }
- }
-
- /* menu groups */
- .menuGroup {
- overflow: hidden;
- position: relative;
-
- > h1 {
- margin-bottom: @wcfGapMedium;
- padding: 0 @wcfGapMedium;
-
- .textShadow(@wcfSidebarBackgroundColor);
- }
-
- .menuGroupItems {
- margin-bottom: @wcfGapSmall;
- margin-top: -@wcfGapSmall;
- }
-
- a:hover {
- text-decoration: none;
- }
-
- ul > li {
- &.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;
- }
- }
-
- &.collapsibleMenus {
- > h1 {
- background-image: url(../icon/arrowRightColored.svg);
- background-position: 15px center;
- background-repeat: no-repeat;
- background-size: 16px;
- color: @wcfLinkColor;
- cursor: pointer;
- font-weight: bold;
- font-size: 130%;
- padding-left: (@wcfGapLarge + 16px + @wcfGapTiny);
-
- &.active {
- background-image: url(../icon/arrowDownColored.svg);
- }
- }
-
- ul > li {
- font-size: 110%;
-
- > a,
- > div {
- padding-left: (@wcfGapLarge + 16px + @wcfGapTiny);
- .textShadow(@wcfSidebarBackgroundColor);
- }
- }
- }
-
- &:not(.collapsibleMenus) {
- > h1 {
- text-transform: uppercase;
- }
- }
- }
-}
\ No newline at end of file
+++ /dev/null
-.sitemapList li {
- padding-left: @wcfGapLarge;
-
- &.sitemapCategory {
- margin-top: @wcfGapMedium;
- }
-}
\ No newline at end of file
+++ /dev/null
-/* ############## Tab Menu ############## */
-
-/* Globals */
-
-.tabMenu {
- display: block;
- margin-top: @wcfGapLarge;
- padding: 0 10px;
- position: relative;
- text-align: left;
-
- 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;
- min-height: @wcfGapLarge;
- position: relative;
- z-index: 20; /* Prevents border overlay during transition */
-}
-
-.tabMenuContainer > .menu {
- border-bottom: 1px solid @wcfContainerBorderColor;
- margin: -@wcfGapMedium -@wcfGapLarge @wcfGapSmall -@wcfGapLarge; /* reverse paddings from .containerPadding */
- padding: @wcfGapSmall 0;
- text-align: center;
-
- .borderRadius(@wcfContainerBorderRadius, 0);
- .linearGradient(rgba(0, 0, 0, 0), @wcfContainerBackgroundColor, @wcfContainerAccentBackgroundColor);
-
- ul{
- display: inline-block;
-
- li {
- display: inline-block;
-
- &.ui-state-active a,
- &.ui-state-active a:hover {
- background-color: @wcfButtonPrimaryBackgroundColor;
- border-color: @wcfButtonPrimaryBorderColor;
- color: @wcfButtonPrimaryColor;
- cursor: default;
- }
-
- a {
- background-color: @wcfContainerBackgroundColor;
- border: 1px solid @wcfContainerBorderColor;
- color: @wcfButtonColor;
- display: block;
- font-size: 85%;
-
- padding: @wcfGapTiny @wcfGapSmall;
-
- .borderRadius(30px);
-
- &:hover {
- background-color: @wcfButtonHoverBackgroundColor;
- border-color: @wcfButtonHoverBorderColor;
- color: @wcfButtonHoverColor;
- text-decoration: none;
- }
- }
- }
- }
-}
-
-.containerPadding > .tabMenuContainer:last-child {
- margin-bottom: @wcfGapSmall;
-}
-
-/* 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-color: @wcfTabularBoxBackgroundColor;
- background-image: url(../../images/header.png);
- border: 1px solid @wcfContainerBorderColor;
-
- .borderRadius();
-}
-
-.tabularBoxTitle > hgroup {
- color: @wcfTabularBoxColor;
- padding: 5px 7px;
-
- h1 {
- font-size: @wcfTitleFontSize;
- font-weight: bold;
-
- .textShadow(@wcfTabularBoxBackgroundColor);
-
- a {
- color: @wcfTabularBoxColor;
-
- &:hover {
- color: @wcfTabularBoxHoverColor;
- text-decoration: none;
- }
- }
- }
-}
-
-.tabularBox:not(.tabularBoxTitle) .table {
- thead tr:first-child th {
- &:first-child {
- .borderRadius(@wcfContainerBorderRadius - 2, 0, 0, 0);
- }
-
- &:last-child {
- .borderRadius(0, @wcfContainerBorderRadius - 2, 0, 0);
- }
- }
-}
-
-.table {
- border-spacing: 0;
- width: 100%;
-
- /* cells */
- th,
- td {
- padding: @wcfGapSmall;
- text-align: left;
- vertical-align: middle;
-
- > label {
- cursor: pointer;
- display: block;
- margin: -@wcfGapSmall;
- padding: @wcfGapSmall;
-
- > input[type="checkbox"] {
- margin: 0 3px;
- }
- }
- }
-
- /* headline */
- th {
- background-color: rgba(0, 0, 0, .4);
- border-right: 1px solid rgba(0, 0, 0, .2);
- color: @wcfTabularBoxColor;
- font-size: @wcfSmallFontSize;
- font-weight: bold;
- white-space: nowrap;
-
- .textShadow(@wcfTabularBoxBackgroundColor);
-
- > a {
- color: @wcfTabularBoxColor;
- display: block;
- margin: -@wcfGapSmall;
-
- &:hover {
- text-decoration: none;
- }
-
- > img {
- margin: -5px 0;
- }
- }
-
- &:hover > a,
- &.active > a {
- background-color: rgba(0, 0, 0, .1);
- color: @wcfTabularBoxHoverColor;
-
- .boxShadowInset(0, 10px, rgba(0, 0, 0, .1), 10px, -10px);
- }
-
- > * {
- padding: @wcfGapSmall;
- }
- }
-
- /* content */
- td {
- background-color: @wcfContainerBackgroundColor;
-
- .transition(background, .1s);
-
- &.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: @wcfSmallFontSize;
- text-align: right;
- width: 1% !important;
- white-space: nowrap;
- }
-
- &.columnURL, &.columnSmallText {
- font-size: @wcfSmallFontSize;
- text-align: left;
- }
- }
-
- /* striped */
- tbody {
- tr:nth-child(even) td {
- background-color: @wcfContainerAccentBackgroundColor;
- }
- }
-
- /* hover */
- tbody {
- tr {
- &:not(:last-child) {
- td {
- border-bottom: 1px solid rgba(255, 255, 255, .3);
- }
- }
-
- &:hover {
- td {
- background-color: @wcfContainerHoverBackgroundColor;
- }
- }
-
- td:not(:last-child) {
- border-right: 1px solid rgba(255, 255, 255, .3);
- }
-
- td.focus {
- background-color: @wcfContainerHoverBackgroundColor;
- }
-
- td.left {
- text-align: left;
- }
-
- td.right {
- text-align: right;
- }
- }
- }
-}
-
-.tabularBox .table {
- tbody tr:last-child td {
- &:first-child {
- .borderRadius(0, 0, 0, @wcfContainerBorderRadius - 2);
- }
-
- &:last-child {
- .borderRadius(0, 0, @wcfContainerBorderRadius - 2, 0);
- }
- }
-}
-
-.statusDisplay {
- padding: 1px 0;
- float: right;
-
- .statusIcons {
- float: right;
- margin-left: @wcfGapSmall;
-
- li {
- display: inline-block;
- }
- }
-}
\ No newline at end of file
+++ /dev/null
-/* ############## Balloon Tooltips ############## */
-
-/* Globals */
-.balloonTooltip {
- background-color: @wcfTooltipBackgroundColor;
- color: @wcfTooltipColor;
- font-size: .85em;
- max-width: 300px;
- padding: 5px 10px 7px;
- position: absolute;
- z-index: 800;
-
- .borderRadius();
- .boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
-
- .pointer {
- border-color: @wcfTooltipBackgroundColor transparent;
- border-style: solid;
- border-width: 0 5px 5px;
- left: 50%;
- position: absolute;
- top: -5px;
- }
-}
\ No newline at end of file
+++ /dev/null
-/* ##### User Sidebar #### */
-.sidebarContent {
- .userAvatar {
- text-align: center;
- overflow: hidden;
- }
-}
-
-/* todo: framed icon list */
-.framedIconList {
- li {
- float: left;
- margin: 0 2px 4px 0;
-
- .framed {
- display: inline-block;
- }
- }
-
- &:after {
- content: "";
- height: 0;
- display: block;
- clear: both;
- }
-}
-
-/* user information */
-.userInformation {
- > hgroup > h2,
- > .inlineDataList,
- > .dataList {
- font-size: @wcfSmallFontSize;
- }
-}
-
-.userProfilePreview {
- position: relative;
-
- > .userInformation {
- padding-bottom: 16px;// + @wcfGapTiny;
-
- > .inlineDataList,
- > .dataList {
- margin-bottom: @wcfGapTiny;
- padding-top: @wcfGapTiny;
- border-top: 1px dotted @wcfContainerBorderColor;
- }
-
- > .dataList {
- padding-bottom: @wcfGapTiny;
- border-bottom: 1px dotted @wcfContainerBorderColor;
- }
-
- > .buttonList {
- position: absolute;
- bottom: 0;
- right: 0;
- }
- }
-}
-
-/* ##### User List #### */
-.simpleUserList {
- > li > div > .userInformation {
- position: relative;
-
- > .buttonList {
- opacity: 0;
- position: absolute;
- right: 0;
- top: 0;
-
- .transition(opacity, .1s);
- }
- }
-
- > li:hover > div > .userInformation > .buttonList {
- opacity: 1;
- }
-}
-
-.userList {
- > li {
- padding: 0;
- float: left;
- width: 50%;
- height: 90px;
- overflow: hidden;
-
- &:last-child {
- border-radius: 0;
- }
-
- &:first-child {
- border-radius: @wcfContainerBorderRadius - 1 0 0 0;
- }
-
- &:nth-child(2) {
- border-top-right-radius: @wcfContainerBorderRadius - 1;
- }
-
- &:nth-child(even) {
- float: right;
-
- &:last-child {
- border-bottom-right-radius: @wcfContainerBorderRadius - 1;
- }
- }
-
- &:nth-child(odd) {
- &:last-child, &:nth-last-child(2) {
- border-bottom-left-radius: @wcfContainerBorderRadius - 1;
- }
- }
-
- &:nth-child(4n), &:nth-child(4n+1) {
- background-color: @wcfContainerBackgroundColor;
- }
-
- &:nth-child(4n+2), &:nth-child(4n+3) {
- background-color: @wcfContainerAccentBackgroundColor;
- }
-
- &:hover {
- background-color: @wcfContainerHoverBackgroundColor;
- }
-
- > div {
- padding: 14px 21px;
- }
- }
-
- &:after {
- content: "";
- display: table;
- clear: left;
- }
-}
-
-.userHeadline {
- position: relative;
-
- > .buttonList {
- position: absolute;
- right: @wcfGapTiny;
- top: @wcfGapTiny;
- }
-}
-
-.letters {
- > li {
- margin-bottom: @wcfGapTiny;
-
- > .button {
- min-width: 1.2em;
- text-align: center;
- }
- }
-}
-
-/* user title badges */
-.badge.userTitleBadge {
- &.blue {
- color: #fff;
- background-color: #369;
- }
-}
\ No newline at end of file
+++ /dev/null
-.userPanel {
- background-color: @wcfUserPanelBackgroundColor;
- border-bottom: 1px solid rgba(0, 0, 0, .1);
- height: 40px;
- left: 0;
- position: fixed;
- top: 0;
- right: 0;
- z-index: 200;
-
- .boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
-
- > div {
- > ul.userPanelItems {
- float: left;
-
- .clearfix();
-
- > li {
- float: left;
-
- > a,
- > div:not(.dropdownMenu) {
- color: @wcfUserPanelColor;
- display: block;
- height: 20px;
- padding: 10px 8px;
- position: relative;
-
- .textShadow(@wcfUserPanelBackgroundColor);
- .transition(background-color, .2s);
-
- &:hover {
- background-color: rgba(0, 0, 0, .4);
- color: @wcfUserPanelHoverColor;
- text-decoration: none;
- }
-
- > .badge.badgeInverse {
- background-color: rgb(204, 0, 0);
- color: white;
- padding: 0 6px 1px;
- position: absolute;
- bottom: 4px;
- left: 24px;
- z-index: 300;
- }
- }
-
- > .framed > img {
- padding: 0px;
- margin-top: -2px;
- margin-bottom: -2px;
- }
- }
- }
-
- > .searchBar {
- float: right;
- padding: 6px 0;
-
- > form > input[type="search"] {
- background-color: rgba(0, 0, 0, .5);
- background-image: url("../icon/searchInverse.svg");
- background-repeat: no-repeat;
- background-position: 7px 5px;
- border: 1px solid rgba(0, 0, 0, .9);
- border-radius: 30px;
- color: @wcfUserPanelColor;
- padding: 6px 12px 5px 26px;
- width: 180px;
- -webkit-appearance: textfield;
-
- .boxShadowNative(~"inset 0px 1px 3px rgba(0, 0, 0, .9), 0px 1px 0px rgba(255, 255, 255, .1)");
- .textShadow(@wcfUserPanelBackgroundColor);
- }
- }
- }
-}
\ No newline at end of file
+++ /dev/null
-/* ############## Board List ############## */
-.wbbBoardList {
- > li.wbbBoardNodeTop:not(.wbbBoardNodeTopEmpty) > div {
- .borderRadius(@wcfContainerBorderRadius - 2, 0);
- }
-
- > li > ul > li:last-child div.wbbBoard:last-child {
- .borderRadius(0, @wcfContainerBorderRadius - 2);
- }
-
- > li > ul > .wbbCategory > hgroup {
- padding-left: 43px;
- }
-
- > li > ul > li > ul > .wbbCategory > hgroup {
- padding-left: 79px;
- }
-
- .tabularBox:not(.wbbBoardNodeTop) {
- border-radius: 0;
- border-width: 1px 0 0;
- }
-
- .wbbStats {
- left: 50%;
- margin-top: @wcfGapSmall;
- position: absolute;
- top: @wcfGapSmall;
- width: 15%;
-
- > dl {
- > dt {
- line-height: @wcfBaseLineHeight;
- width: 40%;
- }
-
- > dd {
- font-weight: normal;
- font-size: @wcfSmallFontSize;
- width: 58%;
- }
- }
- }
-
- .wbbLastPost {
- left: 65%;
- position: absolute;
- top: @wcfGapSmall;
- width: 35%; /* = 100% - left */
-
- > div {
- background-color: @wcfContentBackgroundColor;
- padding: @wcfGapSmall;
- margin-right: @wcfGapSmall;
-
- .borderRadius();
- .boxShadowNative(~"inset 0 1px 1px rgba(0, 0, 0, .1)");
- }
-
- hgroup {
- > h1 {
- display: inline-block;
- overflow: hidden;
- text-overflow: ellipsis;
- width: 98%;
- white-space: nowrap;
-
- > .badge {
- font-size: @wcfSmallFontSize;
- }
- }
-
- > h2 {
- font-size: @wcfSmallFontSize;
-
- time {
- color: @wcfDimmedColor;
- }
- }
- }
- }
-
- .wbbSubBoards {
- li {
- display: inline-block;
- }
- }
-
- .wbbBoardDescription {
- font-size: 90%;
- }
-
- .wbbBoardContainer {
- position: relative;
- }
-
- .wbbBoardNodeTop {
- margin-top: @wcfGapMedium;
- }
-
- .wbbBoard {
- min-height: 44px;
- padding: @wcfGapSmall;
- padding-right: 51%;
-
- .transition(background, .1s);
-
- &~ ul > .wbbBoardContainer > .wbbBoard {
- padding-left: 43px;
-
- &~ ul > .wbbBoardContainer > .wbbBoard {
- padding-left: 79px;
- }
- }
-
- &:hover {
- background-color: @wcfContainerHoverBackgroundColor;
- }
- }
-
- .wbbBoardNode1 {
- background-color: @wcfContainerBackgroundColor;
- }
-
- .wbbBoardNode2 {
- background-color: @wcfContainerAccentBackgroundColor;
- }
-
- .wbbBoardNodeTopEmpty div.wbbBoard {
- .borderRadius(@wcfContainerBorderRadius - 2);
- }
-
- .wbbBoard > div > hgroup > h1 {
- font-weight: normal;
- }
-
- .new > div > hgroup > h1, .wbbSubBoards li.new a {
- font-weight: bold;
- }
-
- .wbbCollapsibleCategory .collapsibleButton {
- display: inline-block;
- margin-right: 7px;
- }
-}
-
-/* ignored boards */
-.wbbBoardListReduced {
- .wbbCategory > hgroup label {
- color: @wcfPageLinkHoverColor;
- }
-
- .wbbBoardContainer {
- > div {
- padding: 7px;
- }
-
- > ul > .wbbBoardContainer {
- > div {
- padding-left: 28px;
- }
-
- > ul > .wbbBoardContainer > div {
- padding-left: 56px;
- }
- }
- }
-}
-
-/* ############## Thread List ############## */
-.wbbThreadList {
- /* TODO: keep these colors? */
- .wbbThreadDeleted:not(:hover) {
- td {
- background-color: @wcfErrorBackgroundColor;
- color: @wcfErrorColor;
-
- a {
- color: @wcfErrorColor;
- }
- }
- }
-
- /* TODO: keep these colors? */
- .wbbThreadDisabled:not(.wbbThreadDeleted):not(:hover) {
- td {
- background-color: @wcfSuccessBackgroundColor;
- color: @wcfSuccessColor;
-
- a {
- color: @wcfSuccessColor;
- }
- }
- }
-
- .wbbLastPost h2 {
- color: @wcfDimmedColor;
- font-size: @wcfSmallFontSize;
- }
-
- .columnLastPost {
- white-space: nowrap;
- }
-
- .columnAvatar {
- div {
- position: relative;
- width: 40px;
- height: 38px;
-
- > p > img {
- opacity: .6;
-
- .transition(opacity, .2s);
- }
- }
-
- .myAvatar {
- position: absolute;
- width: 16px;
- height: 16px;
- bottom: -2px;
- left: 24px;
- opacity: 1;
-
- .boxShadow(0, 0, rgba(0, 0, 0, .3), 3px);
- }
- }
-
- .columnTopic {
- > h1 > .labelList {
- float: right;
- padding-left: 7px;
-
- > li > .badge {
- font-size: @wcfSmallFontSize;
- }
- }
-
- > small {
- display: block;
- }
-
- > nav {
- font-size: @wcfSmallFontSize;
-
- > ul > li {
- float: left;
- margin-right: @wcfGapSmall;
- }
- }
- }
-
- .columnTopic .wbbTopicLink {
- font-size: @wcfTitleFontSize;
- }
-
- tr.new .columnTopic > h1 {
- font-weight: bold;
- }
-
- tr.new .columnAvatar div > p > img, tr:hover .columnAvatar div > p > img {
- opacity: 1;
- }
-}
-
-
-/* ############## Post List ############## */
-.wbbThreadPostList {
- .wbbThreadStarter {
- position: relative;
-
- > .message {
- &:after,
- &:before {
- content: "";
- display: block;
- height: 128px;
- left: 0;
- position: absolute;
- top: 0;
- width: 128px;
- }
-
- &:after {
- background-image: url(../icon/circleStar.svg);
- background-position: 4px 4px;
- background-repeat: no-repeat;
- background-size: 16px;
- height: 20px;
- width: 20px;
- }
-
- &:before {
- .borderRadius(@wcfContainerBorderRadius, 0, 0, 0);
- .linearGradientNative(~"left top, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 40%");
- }
- }
- }
-
- .newMessageBadge {
- border: 1px solid @wcfLinkColor;
- border-radius: 2px;
- color: @wcfLinkColor;
- display: inline-block;
- font-weight: bold;
- font-size: @wcfSmallFontSize;
- left: -220px;
- top: 30px;
- padding: 6px 10px;
- position: absolute;
- text-transform: uppercase;
-
- .linearGradient(darken(@wcfContainerHoverBackgroundColor, 10%), @wcfContainerHoverBackgroundColor, darken(@wcfContainerHoverBackgroundColor, 10%));
- .textShadow(darken(@wcfContainerHoverBackgroundColor, 10%));
- .boxShadow(1px, 1px, rgba(0, 0, 0, .2), 3px);
-
- &:before {
- border-color: transparent @wcfLinkColor transparent transparent;
- border-width: 0px 7px 7px;
- border-style: solid;
- bottom: -7px;
- content: "";
- display: block;
- height: 0px;
- left: -8px;
- position: absolute;
- width: 0px;
- }
- }
-
- .messageCollapsed {
- &.wbbPostDeleted {
- .boxShadow(0, 0, @wcfErrorBackgroundColor, 10px);
- }
- }
-}
\ No newline at end of file
projects / GitHub / WoltLab / WCF.git / commitdiff