<dl>
<dt></dt>
<dd>
- <ul class="buttonList">
+ <ul class="buttonList smallButtons">
<li><a class="button small" href="{link controller='LostPassword'}{/link}"><span>{lang}wcf.user.lostPassword{/lang}</span></a></li>
</ul>
</dd>
<dl>
<dt></dt>
<dd>
- <ul class="buttonList">
+ <ul class="buttonList smallButtons">
<li><a class="button small" href="{link controller='EmailActivation'}{/link}"><span>{lang}wcf.user.emailActivation{/lang}</span></a></li>
</ul>
</dd>
<dl>
<dt></dt>
<dd>
- <ul class="buttonList">
+ <ul class="buttonList smallButtons">
<li><a class="button small" href="{link controller='EmailNewActivationCode'}{/link}"><span>{lang}wcf.user.newActivationCode{/lang}</span></a></li>
{event name='buttons'}
</ul>
{include file='userInformationHeadline'}
<nav class="jsMobileNavigation buttonGroupNavigation">
- <ul class="buttonList jsOnly">
+ <ul class="buttonList iconList jsOnly">
<li><span class="icon icon16 icon-remove pointer jsTooltip jsDeleteButton" title="{lang}wcf.user.button.unfollow{/lang}" data-object-id="{@$user->followID}"></span></li>
{event name='userButtons'}
</ul>
{include file='userInformationHeadline'}
<nav class="jsMobileNavigation buttonGroupNavigation">
- <ul class="buttonList jsOnly">
+ <ul class="buttonList iconList jsOnly">
<li><span class="icon icon16 icon-remove pointer jsTooltip jsDeleteButton" title="{lang}wcf.user.button.unignore{/lang}" data-object-id="{@$user->ignoreID}"></span></li>
{event name='userButtons'}
</ul>
<dl>
<dt></dt>
<dd>
- <ul class="buttonList">
+ <ul class="buttonList smallButtons">
<li><a class="button small" href="{link controller='LostPassword'}{/link}"><span>{lang}wcf.user.lostPassword{/lang}</span></a></li>
{if !REGISTER_DISABLED && REGISTER_ACTIVATION_METHOD == 1}<li><a class="button small" href="{link controller='RegisterActivation'}{/link}"><span>{lang}wcf.user.registerActivation{/lang}</span></a></li>{/if}
{event name='buttons'}
<dl>
<dt></dt>
<dd>
- <ul class="buttonList">
+ <ul class="buttonList smallButtons">
{content}
{if GITHUB_PUBLIC_KEY !== '' && GITHUB_PRIVATE_KEY !== ''}
<li id="githubAuth" class="3rdPartyAuth">
{if $__wcf->getPageMenu()->getMenuItems('header')|count > 0}
<nav id="mainMenu" class="mainMenu jsMobileNavigation" data-button-label="{lang}wcf.page.mainMenu{/lang}">
- <ul>{foreach from=$__wcf->getPageMenu()->getMenuItems('header') item=menuItem}<li{if $__wcf->getPageMenu()->getActiveMenuItem() == $menuItem->menuItem} class="active"{/if}>{*
- *}<a href="{$menuItem->getProcessor()->getLink()}">{lang}{$menuItem->menuItem}{/lang}{if $menuItem->getProcessor()->getNotifications()} <span class="badge badgeUpdate">{#$menuItem->getProcessor()->getNotifications()}</span>{/if}</a>{*
- *}{if $__wcf->getPageMenu()->getMenuItems($menuItem->menuItem)|count > 0 && $__wcf->getPageMenu()->getActiveMenuItem() == $menuItem->menuItem}<ul class="invisible">{*
- *}{foreach from=$__wcf->getPageMenu()->getMenuItems($menuItem->menuItem) item=subMenuItem}{*
- *}<li{if $__wcf->getPageMenu()->getActiveMenuItem(1) == $subMenuItem->menuItem} class="active"{/if}><a href="{$subMenuItem->getProcessor()->getLink()}"><span>{lang}{$subMenuItem->menuItem}{/lang}</span></a>{if $subMenuItem->getProcessor()->getNotifications()} <span class="badge badgeUpdate">{#$subMenuItem->getProcessor()->getNotifications()}</span>{/if}</li>{*
- *}{/foreach}{*
- *}{event name='items'}</ul>{/if}</li>{/foreach}</ul>
+ <ul>
+ {foreach from=$__wcf->getPageMenu()->getMenuItems('header') item=menuItem}
+ <li{if $__wcf->getPageMenu()->getActiveMenuItem() == $menuItem->menuItem} class="active"{/if}>
+ <a href="{$menuItem->getProcessor()->getLink()}">{lang}{$menuItem->menuItem}{/lang}{if $menuItem->getProcessor()->getNotifications()} <span class="badge badgeUpdate">{#$menuItem->getProcessor()->getNotifications()}</span>{/if}</a>
+ {if $__wcf->getPageMenu()->getMenuItems($menuItem->menuItem)|count > 0 && $__wcf->getPageMenu()->getActiveMenuItem() == $menuItem->menuItem}
+ <ul class="invisible">
+ {foreach from=$__wcf->getPageMenu()->getMenuItems($menuItem->menuItem) item=subMenuItem}
+ <li{if $__wcf->getPageMenu()->getActiveMenuItem(1) == $subMenuItem->menuItem} class="active"{/if}><a href="{$subMenuItem->getProcessor()->getLink()}"><span>{lang}{$subMenuItem->menuItem}{/lang}</span></a>{if $subMenuItem->getProcessor()->getNotifications()} <span class="badge badgeUpdate">{#$subMenuItem->getProcessor()->getNotifications()}</span>{/if}</li>
+ {/foreach}
+ {event name='items'}
+ </ul>
+ {/if}
+ </li>
+ {/foreach}
+ </ul>
</nav>
{/if}
<fieldset>
<legend>{lang}wcf.user.members.sort.letters{/lang}</legend>
- <ul class="buttonList letters">
+ <ul class="buttonList smallButtons letters">
{foreach from=$letters item=__letter}
<li><a href="{if $searchID}{link controller='MembersList' id=$searchID}sortField={$sortField}&sortOrder={$sortOrder}&letter={$__letter|rawurlencode}{/link}{else}{link controller='MembersList'}sortField={$sortField}&sortOrder={$sortOrder}&letter={$__letter|rawurlencode}{/link}{/if}" class="button small{if $letter == $__letter} active{/if}">{$__letter}</a></li>
{/foreach}
<p>{@$notification[event]->getMessage()}</p>
<nav class="jsMobileNavigation buttonGroupNavigation">
- <ul class="buttonList jsOnly">
+ <ul class="buttonList iconList jsOnly">
<li><a class="jsMarkAsConfirmed jsTooltip" title="{lang}wcf.user.notification.markAsConfirmed{/lang}"><span class="icon icon16 icon-remove"></span></a></li>
</ul>
</nav>
{event name='fields'}
<dd class="jsOnly">
- <ul class="buttonList">
+ <ul class="buttonList smallButtons">
<li><a href="javascript:Recaptcha.reload()" class="button small"><span class="icon icon16 icon-repeat"></span> <span>{lang}wcf.recaptcha.reload{/lang}</span></a></li>
<li class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')" class="button small"><span class="icon icon16 icon-volume-up"></span> <span>{lang}wcf.recaptcha.audio{/lang}</span></a></li>
<li class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')" class="button small"><span class="icon icon16 icon-eye-open"></span> <span>{lang}wcf.recaptcha.image{/lang}</span></a></li>
<dl>
<dt></dt>
<dd>
- <ul class="buttonList">
+ <ul class="buttonList smallButtons">
<li><a class="button small" href="{link controller='RegisterNewActivationCode'}{/link}"><span>{lang}wcf.user.newActivationCode{/lang}</span></a></li>
{event name='buttons'}
</ul>
{hascontent}
<nav class="jsMobileNavigation buttonGroupNavigation">
- <ul class="buttonList">
+ <ul class="buttonList iconList">
{content}
{if $user->homepage && $user->homepage != 'http://'}
<li><a class="jsTooltip" href="{$user->homepage}" title="{lang}wcf.user.option.homepage{/lang}"{if EXTERNAL_LINK_REL_NOFOLLOW} rel="nofollow"{/if}{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}><span class="icon icon16 icon-home"></span> <span class="invisible">{lang}wcf.user.option.homepage{/lang}</span></a></li>
<dd>{if $style->authorURL}<a href="{@$__wcf->getPath()}acp/dereferrer.php?url={$style->authorURL}">{$style->authorName}</a>{else}{$style->authorName}{/if}</dd>
</dl>
<nav class="jsMobileNavigation buttonGroupNavigation">
- <ul class="buttonList" data-style-id="{@$style->styleID}">
+ <ul class="buttonList iconList" data-style-id="{@$style->styleID}">
<li><a href="{link controller='StyleEdit' id=$style->styleID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 icon-pencil"></span></a></li>
<li><a href="{link controller='StyleExport' id=$style->styleID}{/link}" title="{lang}wcf.acp.style.exportStyle{/lang}" class="jsTooltip"><span class="icon icon16 icon-download-alt"></span></a></li>
border-width: 1px;
cursor: pointer;
display: inline-block;
- margin: 0 2px;
+ margin: 0 4px;
padding: 5px 13px;
position: relative;
}
}
}
+/* small buttons */
+button.small,
+.button.small {
+ border-radius: @wcfSmallButtonBorderRadius;
+ font-size: @wcfSmallFontSize;
+ min-height: 13px;
+ padding: 5px 11px;
+ margin: 0 2px;
+}
+
/* button list */
.buttonList {
+ font-size: 0;
+
> li {
display: inline-block;
+ font-size: 1rem;
- > .button {
+ &:not(:last-child) {
+ margin-right: 8px;
+ }
+
+ .button {
margin: 0;
}
}
+
+ &.smallButtons {
+ > li:not(:last-child) {
+ margin-right: 4px;
+ }
+ }
+
+ &.iconList {
+ > li:not(:last-child) {
+ margin-right: 2px;
+ }
+ }
}
/* button group */
}
}
-/* small buttons */
-button.small,
-.button.small {
- border-radius: @wcfSmallButtonBorderRadius;
- font-size: @wcfSmallFontSize;
- min-height: 13px;
- padding: 5px 11px;
-}
-
/* button icons */
.button > .icon {
margin: -1px -5px;
/* submit buttons */
.formSubmit {
+ font-size: 0;
margin-top: @wcfGapMedium;
text-align: center;
+
+ button,
+ input[type='reset'],
+ input[type='submit'],
+ input[type='button'],
+ .button {
+ font-size: 1rem;
+ }
}
/* #### Labels #### */
/* label list */
+.labelList {
+ font-size: 0;
+}
+
.labelList, .labelList > li {
- display: inline-block;
+ display: inline-block;
+}
+
+.labelList > li:not(:last-child) {
+ margin-right: 4px;
}
/* ACP label list */
/* main menu */
@media screen and (min-width: 801px), print {
.mainMenu {
+ font-size: 0;
+
> ul {
background-color: @wcfMainMenuBackgroundColor;
display: inline-block;
> ul {
display: inline-block;
+ font-size: 0;
&.navigationItems, &.navigationIcons {
float: right;
> a {
display: inline-block;
- padding: 3px;
+ padding: 4px 3px 3px;
}
}
}
&.navigationItems, &.navigationMenuItems {
> li {
- margin: 4px 7px 1px;
+ font-size: 1rem;
+ margin: 4px 7px 2px;
> a {
color: @wcfLinkColor;
- padding: 2px 0;
&:hover {
color: @wcfLinkHoverColor;
margin-top: @wcfGapMedium;
}
- nav ul {
- text-align: left;
+ > nav.pageNavigation > ul {
+ float: left;
}
- nav > ul {
- float: left;
-
- &:not(.pageNavigation) {
- float: right;
- text-align: right;
- }
-
- li {
- display: inline;
- }
+ > nav:not(.pageNavigation) > ul {
+ margin-right: 2px;
+ float: right;
+ .buttonList;
}
}