<aside class="sidebar">
<!-- sidebar menu -->
<nav id="sidebarContent" class="sidebarContent">
- {content}
- {* work-around for unknown core-object during WCFSetup *}
- {if PACKAGE_ID}
- {foreach from=$__wcf->getACPMenu()->getMenuItems('') item=parentMenuItem}
- <div id="{$parentMenuItem->menuItem}-container" style="display: none;" class="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>
- {/foreach}
- {/if}
- {/content}
+ <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>
+ {/foreach}
+ {/if}
+ {/content}
+ </li>
+ </ul>
</nav>
<!-- /sidebar menu -->
</aside>
@import "comments.less";
@import "user.less";
@import "like.less";
+@import "sidebar.less";
@import "message.less";
@import "dialog.less";
margin-bottom: @wcfGapMedium;
}
-/* Special Sidebar */
-
-.sidebar fieldset {
- background-color: transparent;
- border-width: 0;
-}
-
-.sidebar fieldset legend {
- padding: 0;
- text-transform: uppercase;
-
- .textShadow(@wcfHighlightBackgroundColor);
-}
-
/* ############## Labeled Content ############## */
/* Simple */
color: @wcfDimmedColor;
padding-top: 5px;
}
+
+ > h3 {
+ color: @wcfDimmedColor;
+ }
}
}
}
}
+ul.dataList {
+ li {
+ display: inline-block;
+
+ &:not(:last-child):after {
+ content: ",";
+ }
+ }
+}
+
.framed {
img {
background-color: @wcfContentBackgroundColor;
display: inline;
}
}
-}
-
-.sidebarContent {
- a:hover {
- text-decoration: none;
- }
-
- > div {
- overflow: hidden;
- position: relative;
-
- &.collapsibleMenus > h1 {
- background-image: url(../icon/arrowRight.svg);
- background-position: 15px center;
- background-repeat: no-repeat;
- background-size: 16px;
-
- &.active {
- background-image: url(../icon/arrowDown.svg);
- }
- }
-
- &:not(.collapsibleMenus) > h1 {
- padding-right: @wcfGapLarge;
- }
-
- > h1 {
- color: @wcfLinkColor;
- cursor: pointer;
- font-size: 130%;
- font-weight: bold;
- padding: @wcfGapSmall @wcfGapMedium @wcfGapSmall (@wcfGapLarge + 16px + @wcfGapTiny); // icon size + gap
-
- .textShadow(@wcfHighlightBackgroundColor);
- }
-
- ul > li {
- font-size: 110%;
-
- &.active {
- background-color: @wcfContentBackgroundColor;
- margin-right: -1px;
- overflow: hidden;
-
- .boxShadow(0, 0, rgba(0, 0, 0, .1));
-
- a {
- font-weight: bold;
- }
- }
-
- > a,
- > div {
- color: @wcfLinkColor;
- display: block;
- padding: @wcfGapTiny @wcfGapMedium @wcfGapSmall (@wcfGapLarge + 16px + @wcfGapTiny);
-
- .textShadow(@wcfHighlightBackgroundColor);
- }
- }
- }
}
\ No newline at end of file
--- /dev/null
+.sidebarContent {
+ padding-top: @wcfGapLarge;
+
+ > ul {
+ > li {
+ margin-bottom: @wcfGapMedium;
+
+ &:not(:last-child) {
+ border-bottom: 1px solid darken(@wcfHighlightBackgroundColor, 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(@wcfHighlightBackgroundColor);
+
+ .badge {
+ float: right;
+ }
+ }
+ }
+
+ dl.dataList {
+ margin-bottom: -4px;
+
+ dd {
+ margin-bottom: 4px;
+ }
+
+ dt {
+ font-size: 85%;
+ color: @wcfLinkColor;
+ }
+ }
+
+ /* forms */
+ fieldset {
+ background-color: transparent;
+ border-width: 0;
+ margin: 0;
+ padding: @wcfGapSmall 0 0;
+
+ legend {
+ padding: 0;
+ text-transform: uppercase;
+
+ .textShadow(@wcfHighlightBackgroundColor);
+ }
+ }
+ }
+ }
+
+ /* menu groups */
+ .menuGroup {
+ overflow: hidden;
+ position: relative;
+
+ > h1 {
+ margin-bottom: @wcfGapMedium;
+ padding: 0 @wcfGapMedium;
+
+ .textShadow(@wcfHighlightBackgroundColor);
+ }
+
+ .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/arrowRight.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/arrowDown.svg);
+ }
+ }
+
+ ul > li {
+ font-size: 110%;
+
+ > a,
+ > div {
+ padding-left: (@wcfGapLarge + 16px + @wcfGapTiny);
+ .textShadow(@wcfHighlightBackgroundColor);
+ }
+ }
+ }
+
+ &:not(.collapsibleMenus) {
+ > h1 {
+ text-transform: uppercase;
+ }
+ }
+ }
+}
\ No newline at end of file
+/* ##### User Sidebar #### */
+.sidebarContent {
+ .userAvatar {
+ text-align: center;
+ overflow: hidden;
+ }
+}
+
+/* todo: framed icon list */
+.framedIconList {
+ li {
+ float: left;
+ margin: 0 4px 4px 0;
+
+ .framed {
+ display: inline-block;
+ }
+ }
+
+ &:after {
+ content: "";
+ height: 0;
+ display: block;
+ clear: both;
+ }
+}
+
+
+/* ##### User List #### */
.simpleUserList {
h2, p, dl {
font-size: 85%;