</div>
{if $items}
- <div class="container marginTop">
+ <div class="section">
<ol class="containerList userList">
{foreach from=$objects item=user}
{include file='userListItem'}
{include file='__commentJavaScript' commentContainerID='moderationQueueCommentList'}
-<div class="container containerList marginTop moderationComments">
+<div class="container marginTop moderationComments">
<ul id="moderationQueueCommentList" class="commentList containerList" data-can-add="true" data-object-id="{@$queueID}" data-object-type-id="{@$commentObjectTypeID}" data-comments="{@$commentList->countObjects()}" data-last-comment-time="{@$lastCommentTime}">
{include file='commentList'}
</ul>
{include file='__commentJavaScript' commentContainerID='moderationQueueCommentList'}
-<div class="container containerList marginTop moderationComments">
+<div class="container marginTop moderationComments">
<ul id="moderationQueueCommentList" class="commentList containerList" data-can-add="true" data-object-id="{@$queueID}" data-object-type-id="{@$commentObjectTypeID}" data-comments="{if $queue->comments}{@$commentList->countObjects()}{else}0{/if}" data-last-comment-time="{@$lastCommentTime}">
{include file='commentList'}
</ul>
</script>
</li>
- <li><a href="{link controller='Settings'}{/link}" class="noJsOnly" style="display: none"><span class="icon icon16 fa-cogs"></span> <span>{lang}wcf.user.menu.settings{/lang}</span></a></li>
+ <li><a href="{link controller='Settings'}{/link}" class="noJsOnly" style="display: none"><span class="icon icon32 fa-cogs"></span> <span>{lang}wcf.user.menu.settings{/lang}</span></a></li>
<!-- user notifications -->
{if !$__hideUserMenu|isset}
<li id="userNotifications" data-count="{#$__wcf->getUserNotificationHandler()->getNotificationCount()}">
- <a href="{link controller='NotificationList'}{/link}"><span class="icon icon16 fa-bell-o"></span> <span>{lang}wcf.user.notification.notifications{/lang}</span>{if $__wcf->getUserNotificationHandler()->getNotificationCount()} <span class="badge badgeInverse">{#$__wcf->getUserNotificationHandler()->getNotificationCount()}</span>{/if}</a>
+ <a href="{link controller='NotificationList'}{/link}"><span class="icon icon32 fa-bell-o"></span> <span>{lang}wcf.user.notification.notifications{/lang}</span>{if $__wcf->getUserNotificationHandler()->getNotificationCount()} <span class="badge badgeUpdate">{#$__wcf->getUserNotificationHandler()->getNotificationCount()}</span>{/if}</a>
{if !OFFLINE || $__wcf->session->getPermission('admin.general.canViewPageDuringOfflineMode')}
<script data-relocate="true">
//<![CDATA[
{if $__wcf->user->userID && $__wcf->session->getPermission('mod.general.canUseModeration')}
<li id="outstandingModeration" data-count="{#$__wcf->getModerationQueueManager()->getOutstandingModerationCount()}">
<a href="{link controller='ModerationList'}{/link}">
- <span class="icon icon16 fa-exclamation-triangle"></span>
+ <span class="icon icon32 fa-exclamation-triangle"></span>
<span>{lang}wcf.moderation.moderation{/lang}</span>
- {if $__wcf->getModerationQueueManager()->getUnreadModerationCount()}<span class="badge badgeInverse">{#$__wcf->getModerationQueueManager()->getUnreadModerationCount()}</span>{/if}
+ {if $__wcf->getModerationQueueManager()->getUnreadModerationCount()}<span class="badge badgeUpdate">{#$__wcf->getModerationQueueManager()->getUnreadModerationCount()}</span>{/if}
</a>
{if !OFFLINE || $__wcf->session->getPermission('admin.general.canViewPageDuringOfflineMode')}
<script data-relocate="true">
{/if}
{if $__wcf->user->userID}
- <li><a href="{link controller='Logout'}t={@SECURITY_TOKEN}{/link}" class="noJsOnly" style="display: none"><span class="icon icon16 fa-sign-out"></span> <span>{lang}wcf.user.logout{/lang}</span></a></li>
+ <li><a href="{link controller='Logout'}t={@SECURITY_TOKEN}{/link}" class="noJsOnly" style="display: none"><span class="icon icon32 fa-sign-out"></span> <span>{lang}wcf.user.logout{/lang}</span></a></li>
{/if}
</ul>
</nav>
\ No newline at end of file
{include file='header'}
-<header class="boxHeadline">
- <h1>{lang}wcf.search.title{/lang}</h1>
+<header class="contentHeader">
+ <h1 class="contentTitle">{lang}wcf.search.title{/lang}</h1>
</header>
{include file='userNotice'}
{/if}
<form method="post" action="{link controller='Search'}{/link}">
- <div class="container containerPadding marginTop">
- <fieldset>
- <legend>{lang}wcf.search.general{/lang}</legend>
-
- <dl{if $errorField == 'q'} class="formError"{/if}>
- <dt><label for="searchTerm">{lang}wcf.search.query{/lang}</label></dt>
- <dd>
- <input type="text" id="searchTerm" name="q" value="{$query}" class="long" maxlength="255" autofocus="autofocus" />
- {if $errorField == 'q'}
- <small class="innerError">
- {if $errorType == 'empty'}
- {lang}wcf.global.form.error.empty{/lang}
- {else}
- {lang}wcf.search.query.error.{@$errorType}{/lang}
- {/if}
- </small>
- {/if}
- <label><input type="checkbox" name="subjectOnly" value="1"{if $subjectOnly == 1} checked="checked"{/if} /> {lang}wcf.search.subjectOnly{/lang}</label>
- {event name='queryOptions'}
-
- <p><small>{lang}wcf.search.query.description{/lang}</small></p>
- </dd>
- </dl>
-
- <dl>
- <dt><label for="searchAuthor">{lang}wcf.search.author{/lang}</label></dt>
- <dd>
- <input type="text" id="searchAuthor" name="username" value="{$username}" class="long" maxlength="255" autocomplete="off" />
- <label><input type="checkbox" name="nameExactly" value="1"{if $nameExactly == 1} checked="checked"{/if} /> {lang}wcf.search.matchExactly{/lang}</label>
- {event name='authorOptions'}
- </dd>
- </dl>
-
- <dl>
- <dt><label for="startDate">{lang}wcf.search.period{/lang}</label></dt>
- <dd>
- <input type="date" id="startDate" name="startDate" value="{$startDate}" data-placeholder="{lang}wcf.date.period.start{/lang}" />
- <input type="date" id="endDate" name="endDate" value="{$endDate}" data-placeholder="{lang}wcf.date.period.end{/lang}" />
- {event name='periodOptions'}
- </dd>
- </dl>
-
- <dl>
- <dt><label for="sortField">{lang}wcf.search.sortBy{/lang}</label></dt>
- <dd>
- <select id="sortField" name="sortField">
- <option value="relevance"{if $sortField == 'relevance'} selected="selected"{/if}>{lang}wcf.search.sortBy.relevance{/lang}</option>
- <option value="subject"{if $sortField == 'subject'} selected="selected"{/if}>{lang}wcf.global.subject{/lang}</option>
- <option value="time"{if $sortField == 'time'} selected="selected"{/if}>{lang}wcf.search.sortBy.time{/lang}</option>
- <option value="username"{if $sortField == 'username'} selected="selected"{/if}>{lang}wcf.search.sortBy.username{/lang}</option>
- </select>
-
- <select name="sortOrder">
- <option value="ASC"{if $sortOrder == 'ASC'} selected="selected"{/if}>{lang}wcf.global.sortOrder.ascending{/lang}</option>
- <option value="DESC"{if $sortOrder == 'DESC'} selected="selected"{/if}>{lang}wcf.global.sortOrder.descending{/lang}</option>
- </select>
- {event name='displayOptions'}
- </dd>
- </dl>
-
- {event name='generalFields'}
-
- <dl>
- <dt>{lang}wcf.search.type{/lang}</dt>
- <dd class="floated">
- {foreach from=$objectTypes key=objectTypeName item=objectType}
- {if $objectType->isAccessible()}
- <label><input id="{@'.'|str_replace:'_':$objectTypeName}" type="checkbox" name="types[]" value="{@$objectTypeName}"{if $objectTypeName|in_array:$selectedObjectTypes} checked="checked"{/if} /> {lang}wcf.search.type.{@$objectTypeName}{/lang}</label>
+ <div class="section">
+ <dl{if $errorField == 'q'} class="formError"{/if}>
+ <dt><label for="searchTerm">{lang}wcf.search.query{/lang}</label></dt>
+ <dd>
+ <input type="text" id="searchTerm" name="q" value="{$query}" class="long" maxlength="255" autofocus="autofocus" />
+ {if $errorField == 'q'}
+ <small class="innerError">
+ {if $errorType == 'empty'}
+ {lang}wcf.global.form.error.empty{/lang}
+ {else}
+ {lang}wcf.search.query.error.{@$errorType}{/lang}
{/if}
- {/foreach}
- </dd>
- </dl>
- </fieldset>
+ </small>
+ {/if}
+ <label><input type="checkbox" name="subjectOnly" value="1"{if $subjectOnly == 1} checked="checked"{/if} /> {lang}wcf.search.subjectOnly{/lang}</label>
+ {event name='queryOptions'}
+
+ <small>{lang}wcf.search.query.description{/lang}</small>
+ </dd>
+ </dl>
- {event name='fieldsets'}
+ <dl>
+ <dt><label for="searchAuthor">{lang}wcf.search.author{/lang}</label></dt>
+ <dd>
+ <input type="text" id="searchAuthor" name="username" value="{$username}" class="long" maxlength="255" autocomplete="off" />
+ <label><input type="checkbox" name="nameExactly" value="1"{if $nameExactly == 1} checked="checked"{/if} /> {lang}wcf.search.matchExactly{/lang}</label>
+ {event name='authorOptions'}
+ </dd>
+ </dl>
- {include file='captcha'}
+ <dl>
+ <dt><label for="startDate">{lang}wcf.search.period{/lang}</label></dt>
+ <dd>
+ <input type="date" id="startDate" name="startDate" value="{$startDate}" data-placeholder="{lang}wcf.date.period.start{/lang}" />
+ <input type="date" id="endDate" name="endDate" value="{$endDate}" data-placeholder="{lang}wcf.date.period.end{/lang}" />
+ {event name='periodOptions'}
+ </dd>
+ </dl>
- {foreach from=$objectTypes key=objectTypeName item=objectType}
- {if $objectType->isAccessible() && $objectType->getFormTemplateName()}
- {assign var='__jsID' value='.'|str_replace:'_':$objectTypeName}
- <fieldset id="{@$__jsID}Form">
- <legend>{lang}wcf.search.type.{@$objectTypeName}{/lang}</legend>
-
- {include file=$objectType->getFormTemplateName() application=$objectType->getApplication()}
-
- <script data-relocate="true">
- //<![CDATA[
- $(function() {
- $('#{@$__jsID}').click(function() {
- if (this.checked) $('#{@$__jsID}Form').wcfFadeIn();
- else $('#{@$__jsID}Form').wcfFadeOut();
- });
- {if !$objectTypeName|in_array:$selectedObjectTypes}$('#{@$__jsID}Form').hide();{/if}
- });
- //]]>
- </script>
- </fieldset>
- {/if}
- {/foreach}
+ <dl>
+ <dt><label for="sortField">{lang}wcf.search.sortBy{/lang}</label></dt>
+ <dd>
+ <select id="sortField" name="sortField">
+ <option value="relevance"{if $sortField == 'relevance'} selected="selected"{/if}>{lang}wcf.search.sortBy.relevance{/lang}</option>
+ <option value="subject"{if $sortField == 'subject'} selected="selected"{/if}>{lang}wcf.global.subject{/lang}</option>
+ <option value="time"{if $sortField == 'time'} selected="selected"{/if}>{lang}wcf.search.sortBy.time{/lang}</option>
+ <option value="username"{if $sortField == 'username'} selected="selected"{/if}>{lang}wcf.search.sortBy.username{/lang}</option>
+ </select>
+
+ <select name="sortOrder">
+ <option value="ASC"{if $sortOrder == 'ASC'} selected="selected"{/if}>{lang}wcf.global.sortOrder.ascending{/lang}</option>
+ <option value="DESC"{if $sortOrder == 'DESC'} selected="selected"{/if}>{lang}wcf.global.sortOrder.descending{/lang}</option>
+ </select>
+ {event name='displayOptions'}
+ </dd>
+ </dl>
+
+ {event name='generalFields'}
+
+ <dl>
+ <dt>{lang}wcf.search.type{/lang}</dt>
+ <dd class="floated">
+ {foreach from=$objectTypes key=objectTypeName item=objectType}
+ {if $objectType->isAccessible()}
+ <label><input id="{@'.'|str_replace:'_':$objectTypeName}" type="checkbox" name="types[]" value="{@$objectTypeName}"{if $objectTypeName|in_array:$selectedObjectTypes} checked="checked"{/if} /> {lang}wcf.search.type.{@$objectTypeName}{/lang}</label>
+ {/if}
+ {/foreach}
+ </dd>
+ </dl>
</div>
+
+ {event name='sections'}
+
+ {include file='captcha'}
+
+ {foreach from=$objectTypes key=objectTypeName item=objectType}
+ {if $objectType->isAccessible() && $objectType->getFormTemplateName()}
+ {assign var='__jsID' value='.'|str_replace:'_':$objectTypeName}
+ <section class="section" id="{@$__jsID}Form">
+ <h2 class="sectionTitle">{lang}wcf.search.type.{@$objectTypeName}{/lang}</h2>
+
+ {include file=$objectType->getFormTemplateName() application=$objectType->getApplication()}
+
+ <script data-relocate="true">
+ //<![CDATA[
+ $(function() {
+ $('#{@$__jsID}').click(function() {
+ if (this.checked) $('#{@$__jsID}Form').wcfFadeIn();
+ else $('#{@$__jsID}Form').wcfFadeOut();
+ });
+ {if !$objectTypeName|in_array:$selectedObjectTypes}$('#{@$__jsID}Form').hide();{/if}
+ });
+ //]]>
+ </script>
+ </section>
+ {/if}
+ {/foreach}
<div class="formSubmit">
<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
'wcfHeaderSearchBoxBackground': '#spSearchBox { background-color: VALUE; }',
'wcfHeaderSearchBoxBorder': '#spSearchBox { border-color: VALUE; }',
'wcfHeaderSearchBoxText': '#spSearchBox { color: VALUE; }',
- 'wcfHeaderSearchBoxPlaceholderText': '#spSearchBox::-webkit-input-placeholder { color: VALUE; } __COMBO_RULE__ #spSearchBox::-moz-placeholder { color: VALUE; } __COMBO_RULE__ #spSearchBox:-ms-input-placeholder { color: VALUE; }',
+ 'wcfHeaderSearchBoxPlaceholder': '#spSearchBox::-webkit-input-placeholder { color: VALUE; } __COMBO_RULE__ #spSearchBox::-moz-placeholder { color: VALUE; } __COMBO_RULE__ #spSearchBox:-ms-input-placeholder { color: VALUE; }',
'wcfHeaderSearchBoxBackgroundActive': '#spSearchBox:focus, #spSearchBox:hover { background-color: VALUE; }',
'wcfHeaderSearchBoxBorderActive': '#spSearchBox:focus, #spSearchBox:hover { border-color: VALUE; }',
'wcfHeaderSearchBoxTextActive': '#spSearchBox:focus, #spSearchBox:hover { color: VALUE; }',
$this->colors = [
'wcfHeader' => ['background', 'text', 'link', 'linkActive'],
- 'wcfHeaderSearchBox' => ['background', 'border', 'text', 'placeholderText', 'backgroundActive', 'borderActive', 'textActive'],
+ 'wcfHeaderSearchBox' => ['background', 'border', 'text', 'placeholder', 'backgroundActive', 'borderActive', 'textActive'],
'wcfHeaderMenu' => ['background', 'link', 'backgroundActive', 'linkActive'],
'wcfHeaderMenuDropdown' => ['background', 'border', 'link', 'backgroundActive', 'linkActive'],
'wcfNavigation' => ['background', 'text', 'link', 'linkActive'],
'wcfContentDimmed' => ['text', 'link', 'linkActive'],
'wcfContentHeadline' => ['border', 'text', 'link', 'linkActive'],
'wcfTabularBox' => ['borderInner', 'headline', 'backgroundActive', 'headlineActive'],
- 'wcfInput' => ['background', 'border', 'text', 'placeholderText', 'backgroundActive', 'borderActive', 'textActive'],
+ 'wcfInput' => ['background', 'border', 'text', 'placeholder', 'backgroundActive', 'borderActive', 'textActive'],
'wcfInputDisabled' => ['background', 'border', 'text'],
'wcfButton' => ['background', 'border', 'text', 'backgroundActive', 'borderActive', 'textActive'],
'wcfButtonPrimary' => ['background', 'border', 'text', 'backgroundActive', 'borderActive', 'textActive'],
--- /dev/null
+dl {
+ &:not(.plain) {
+ display: block;
+
+ &:not(:first-child) {
+ margin-top: 10px;
+ }
+
+ &:not(:last-child) {
+ margin-bottom: 10px;
+ }
+
+ > dt {
+ display: block;
+
+ &:not(:empty) {
+ margin-bottom: 5px;
+ }
+ }
+
+ > dd {
+ display: block;
+
+ &.floated {
+ display: flex;
+ flex-wrap: wrap;
+
+ > label {
+ flex: 0 0 auto;
+ margin: 0 10px 5px 0;
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+ }
+
+ &:not(:last-child) {
+ margin-bottom: 10px;
+ }
+
+ > small:not(.innerError) {
+ color: $wcfContentDimmedText;
+ display: block;
+ margin-top: 5px;
+ }
+
+ > label {
+ display: block;
+ }
+
+ > label:not(:first-child) {
+ margin-top: 3px;
+ }
+ }
+
+ &.wide > dt {
+ display: none;
+ }
+
+ & + dl:not(.plain) {
+ padding-top: 10px;
+ }
+ }
+
+ &.dataList {
+ @extend .clearfix;
+
+ > dt {
+ clear: right;
+ color: rgba(128, 128, 128, 1);
+ float: left;
+ margin-right: 4px;
+ text-align: left;
+
+ &:after {
+ content: ":";
+ }
+ }
+
+ > dd {
+ float: right;
+ text-align: right;
+
+ &:not(:last-child) {
+ margin-bottom: 3px;
+ }
+ }
+ }
+
+ &.inlineDataList {
+ @extend .wcfFontSmall;
+
+ > dt {
+ display: inline-block;
+
+ &:after {
+ content: ":";
+ padding-left: 1px;
+ }
+ }
+
+ > dd {
+ display: inline-block;
+
+ &:not(:last-of-type):after {
+ content: ",";
+ padding-left: 1px;
+ }
+ }
+ }
+
+ &.statsDataList {
+ align-items: center;
+ display: flex;
+ flex-direction: row-reverse;
+ flex-wrap: wrap;
+
+ > dt {
+ color: $wcfContentDimmedText;
+ flex: 0 0 60%;
+ margin-left: 5px;
+ overflow: hidden;
+ text-align: left;
+ white-space: nowrap;
+
+ @extend .wcfFontSmall;
+ }
+
+ > dd {
+ flex: 0 0 auto;
+ width: calc(40% - 5px); /* IE work-around */
+
+ overflow: hidden;
+ text-align: right;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ }
+}
+/* makes an inline-list */
.inlineList {
display: flex;
flex-wrap: wrap;
display: inline-flex;
}
}
+
+ /* adds a comma after each list item */
+ &.commaSeparated {
+ @extend .wcfFontSmall;
+
+ > li {
+ &:not(:last-child):after {
+ content: ",";
+ padding-left: 1px;
+ }
+ }
+ }
}
+/* restores the native styling for lists */
.nativeList {
margin: 1em 0 1em 40px;
margin: 7px 0;
}
}
-
-ol.dataList,
-ul.dataList {
- @extend .inlineList;
-
- font-size: .85rem;
-
- > li {
- &:not(:last-child):after {
- content: ",";
- padding-left: 1px;
- }
- }
+ul.nativeList {
+ list-style-type: disc;
+}
+ol.nativeList {
+ list-style-type: decimal;
}
+
+/*@todo*/
.framedIconList {
display: flex;
flex-wrap: wrap;
}
}
+/*@todo*/
.tagList {
@extend .inlineList;
align-items: baseline;
}
+/*@todo*/
.smileyList {
align-items: center;
}
+
+/* legacy styling (deprecated) */
+ol.dataList,
+ul.dataList {
+ @extend .inlineList;
+ @extend .wcfFontSmall;
+
+ > li {
+ &:not(:last-child):after {
+ content: ",";
+ padding-left: 1px;
+ }
+ }
+}
transform: scale(1, -1);
}
+/* ringing animation for fa-bell */
+@keyframes fa-bell-ring {
+ 0% { transform:rotate(-15deg) }
+ 2% { transform:rotate(15deg) }
+ 4% { transform:rotate(-18deg) }
+ 6% { transform:rotate(18deg) }
+ 8% { transform:rotate(-22deg) }
+ 10% { transform:rotate(22deg) }
+ 12% { transform:rotate(-18deg) }
+ 14% { transform:rotate(18deg) }
+ 16% { transform:rotate(-12deg) }
+ 18% { transform:rotate(12deg) }
+ 20%, 100% { transform:rotate(0deg) }
+}
+
@import "variables";
@import "icons";
padding: 20px 0;
&:not(:last-child) {
- // TODO: border-bottom: 1px solid $wcfContentBorder;
+ border-bottom: 1px solid $wcfContentBorderInner;
+ }
+
+ &:first-child {
+ border-top: 1px solid $wcfContentBorder;
+ }
+
+ &:last-child {
+ border-bottom: 1px solid $wcfContentBorder;
}
&.showMore {
position: relative;
> .containerContentType {
- opacity: .6;
+ color: $wcfContentDimmedText;
position: absolute;
- top: 0;
+ top: 5px;
right: 0;
}
+
+ + * {
+ margin-top: 10px;
+ }
}
}
/* content header */
.contentHeader,
.boxHeadline { // deprecated
- border-bottom: 1px solid $wcfContentBorderInner;
color: $wcfContentHeadlineText; // todo: rename variable
margin-bottom: 30px;
- padding-bottom: 10px;
.contentTitle,
> h1 { // deprecated
}
}
-dl {
- &:not(.plain) {
- display: block;
-
- &:not(:first-child) {
- margin-top: 10px;
- }
-
- &:not(:last-child) {
- margin-bottom: 10px;
- }
-
- > dt {
- display: block;
-
- &:not(:empty) {
- margin-bottom: 5px;
- }
- }
-
- > dd {
- display: block;
-
- > small:not(.innerError) {
- color: $wcfContentDimmedText;
- display: block;
- margin-top: 5px;
- }
-
- &.floated {
- display: flex;
- flex-wrap: wrap;
-
- > label {
- flex: 0 0 auto;
- margin: 0 10px 5px 0;
-
- &:last-child {
- margin-right: 0;
- }
- }
- }
-
- &:not(:last-child) {
- margin-bottom: 10px;
- }
- }
-
- &.wide > dt {
- display: none;
- }
-
- & + dl:not(.plain) {
- padding-top: 10px;
- }
- }
-
- &.dataList {
- @extend .clearfix;
-
- > dt {
- clear: right;
- color: rgba(128, 128, 128, 1);
- float: left;
- margin-right: 4px;
- text-align: left;
-
- &:after {
- content: ":";
- }
- }
-
- > dd {
- float: right;
- text-align: right;
-
- &:not(:last-child) {
- margin-bottom: 3px;
- }
- }
- }
-
- &.inlineDataList {
- @extend .wcfFontSmall;
-
- > dt {
- display: inline-block;
-
- &:after {
- content: ":";
- padding-left: 1px;
- }
- }
-
- > dd {
- display: inline-block;
-
- &:not(:last-of-type):after {
- content: ",";
- padding-left: 1px;
- }
- }
- }
-
- &.statsDataList {
- align-items: center;
- display: flex;
- flex-direction: row-reverse;
- flex-wrap: wrap;
-
- > dt {
- color: $wcfContentDimmedText;
- flex: 0 0 60%;
- margin-left: 5px;
- overflow: hidden;
- text-align: left;
- white-space: nowrap;
-
- @extend .wcfFontSmall;
- }
-
- > dd {
- flex: 0 0 auto;
- width: calc(40% - 5px); /* IE work-around */
-
- overflow: hidden;
- text-align: right;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- }
-
- &.condensed {
- display: block;
-
- > dt,
- > dd {
- display: block;
- margin: 0;
- text-align: left;
- width: 100%;
- }
-
- > dd + dt {
- margin-top: 15px;
- }
-
- > dt:not(:empty) {
- margin-bottom: 5px;
- }
- }
-}
+
.formSubmit {
text-align: center;
}
.marginTop {
- margin-top: 20px;
-}
-
-.framed {
- > canvas,
- > img,
- > .icon {
- //background-color: @wcfContentBackgroundColor;
- //border: 1px solid @wcfContainerBorderColor;
- padding: 1px;
- }
+ margin-top: 30px;
}
.invisible {
@mixin box($imageSize, $margin: 0) {
display: flex !important;
- &:not(:last-child) {
- margin-bottom: ($margin + 3px);
- }
-
> :first-child:not(:last-child) {
flex: 0 auto !important;
margin-right: $margin;
}
}
-.box16 { @include box(16px, 4px); }
-.box24 { @include box(24px, 4px); }
-.box32 { @include box(32px, 7px); }
-.box48 { @include box(48px, 7px); }
-.box64 { @include box(64px, 7px); }
-.box96 { @include box(96px, 11px); }
-.box128 { @include box(128px, 11px); }
+.box16 { @include box(16px, 5px); }
+.box24 { @include box(24px, 5px); }
+.box32 { @include box(32px, 8px); }
+.box48 { @include box(48px, 8px); }
+.box64 { @include box(64px, 8px); }
+.box96 { @include box(96px, 12px); }
+.box128 { @include box(128px, 12px); }
.box256 { @include box(256px, 21px); }
.wcfFontDefault {
@extend .wcfFontHeadline;
> .badge {
- margin-left: 5px;
+ top: -2px;
}
}
}
display: flex;
&:not(:first-child) {
- margin-top: 20px;
+ margin-top: 30px;
}
&:not(:last-child) {
- margin-bottom: 20px;
+ margin-bottom: 30px;
}
> nav {
}
}
-/* USER PANEL */
-#topMenu {
+/* user panel */
+.userPanel {
flex: 0 0 auto;
> ul {
display: flex;
flex: 0 auto;
- &:not(:last-child) > a {
- margin: 0 5px;
+ /* item margins (list item can contain <a> and <div>) */
+ > a,
+ > div {
+ margin-left: 10px;
+
+ &:not(:last-child) {
+ margin-right: 10px;
+ }
}
-
- &.active > a {
- // @TODO
- color: rgba(255, 255, 255, 1);
- font-family: "Segoe UI Semibold";
- font-weight: bold;
+ &:not(:last-child) {
+ > a,
+ > div {
+ margin-right: 10px;
+ }
}
> a {
- color: rgba(255, 255, 255, .8);
flex: 0 auto;
- transition: color .2s linear;
- text-decoration: none;
- text-transform: uppercase;
+ position: relative;
+ /* set icon color */
+ > .icon {
+ color: $wcfHeaderLink;
+ }
&:hover {
- color: rgba(255, 255, 255, 1);
-
> .icon {
- color: rgba(255, 255, 255, 1);
+ color: $wcfHeaderLinkActive;
}
}
- > .icon {
- color: rgba(255, 255, 255, .8);
- transition: color .2s linear;
-
- @extend .icon24;
- }
-
+ /* hide icon label */
> span:not(.icon):not(.badge) {
display: none;
}
+
+ /* special styling for update badge */
+ > span.badgeUpdate {
+ box-shadow: -1px 2px 3px rgba(0, 0, 0, .3), inset 0 2px 5px rgba(225, 225, 225, .3);
+ left: 16px;
+ position: absolute;
+ top: -5px;
+ }
+ }
+
+ /* ringing animation for notification icon */
+ &#userNotifications:not([data-count="0"]) {
+ > a > .icon {
+ animation: fa-bell-ring 5s ease 10s 6;
+ transform-origin: 50% 0;
+ }
}
}
}
> div {
background-color: $wcfHeaderBackground; /* @TODO */
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+ //@todobox-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
left: 0;
position: fixed;
top: 0;
margin: 0 20px;
}
- #topMenu {
+ .userPanel {
flex: 0 auto;
order: 3;
- margin-right: 10px;
+ margin-right: 20px;
}
- #pageHeaderSearch {
+ .pageHeaderSearch {
flex: 0 auto;
order: 4;
}
.badge,
a.badge {
background-color: $wcfContentText;
+ border-radius: 3px;
color: $wcfContentBackground;
display: inline-block;
- padding: 1px 5px;
+ padding: 2px 6px;
position: relative;
text-shadow: none !important; /* necessary to avoid ugly text shadows in comment lists; @todo: better solution without "!important" */
vertical-align: middle;
/* colors */
&.badgeUpdate {
- background-color: rgba(224, 48, 48, 1);
- color: rgba(255, 238, 238, 1);
+ background-color: rgba(204, 0, 1, 1);
+ color: rgba(255, 255, 255, 1);
+ font-weight: 600;
}
&.badgeInverse {
> li {
margin-top: 0;
- padding: 40px 0;
+ padding: 30px 0;
&:not(:first-child) {
border-top: 1px solid $wcfContentBorder;
}
.columnLastPost {
+ > .box32 {
+ align-items: center;
+ }
+
+
time {
color: $wcfContentDimmedText;
}
}
.tabularList {
- border-bottom: 1px solid $wcfTabularBoxHeadline;
+ border-bottom: 1px solid $wcfContentBorder;
display: flex;
flex-direction: column;
}
padding: 5px 0;
&.divider + li:not(.divider) {
- border-top-color: $wcfTabularBoxHeadline;
+ border-top-color: $wcfContentBorder;
}
&:not(.tabularListRowHead):hover {
/* table */
.table {
- border-bottom: 1px solid $wcfTabularBoxHeadline;
+ border-bottom: 1px solid $wcfContentBorder;
border-spacing: 0;
width: 100%;
th {
border-bottom: 2px solid currentColor;
- color: $wcfTabularBoxHeadline;
+ color: $wcfContentBorder;
text-align: left;
white-space: nowrap;
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonText', 'rgba(127, 140, 141, 1)');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonTextActive', 'rgba(255, 255, 255, 1)');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentBackground', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentBorder', 'rgba(44, 62, 80, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentBorder', 'rgba(79, 129, 189, 1)');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentBorderInner', 'rgba(238, 238, 238, 1)');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentDimmedLink', 'rgba(52, 73, 94, 1)');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentDimmedLinkActive', 'rgba(52, 73, 94, 1)');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfGapTiny', '4px');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderBackground', 'rgba(44, 62, 80, 1)');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderText', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderLink', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderLink', 'rgba(255, 255, 255, .8)');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderLinkActive', 'rgba(255, 255, 255, 1)');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuBackground', 'rgba(52, 73, 94, 1)');
INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuBackgroundActive', 'rgba(41, 128, 185, 1)');
projects / GitHub / WoltLab / WCF.git / commitdiff