From e2368a74eb34742afa68631bf96d1ed7c6668569 Mon Sep 17 00:00:00 2001 From: Marcel Werk Date: Mon, 11 Jan 2016 23:14:16 +0100 Subject: [PATCH] Style overhaul * Redesigned user panel icons * Added containerList styling * Some minor tweaks * Some cleanups --- com.woltlab.wcf/templates/membersList.tpl | 2 +- .../templates/moderationActivation.tpl | 2 +- .../templates/moderationReport.tpl | 2 +- com.woltlab.wcf/templates/pageHeaderUser.tpl | 10 +- com.woltlab.wcf/templates/search.tpl | 192 +++++++++--------- .../install/files/acp/templates/styleAdd.tpl | 2 +- .../files/lib/acp/form/StyleAddForm.class.php | 4 +- wcfsetup/install/files/style/element/dl.scss | 140 +++++++++++++ .../install/files/style/element/list.scss | 50 +++-- wcfsetup/install/files/style/icon/icon.scss | 15 ++ .../files/style/layout/containerList.scss | 18 +- .../install/files/style/layout/content.scss | 2 - wcfsetup/install/files/style/layout/form.scss | 153 +------------- .../install/files/style/layout/global.scss | 30 +-- .../install/files/style/layout/layout.scss | 2 +- .../files/style/layout/navigation.scss | 4 +- .../files/style/layout/pageHeader.scss | 62 +++--- .../files/style/layout/pageHeaderSticky.scss | 8 +- wcfsetup/install/files/style/ui/badge.scss | 8 +- wcfsetup/install/files/style/ui/message.scss | 7 +- .../install/files/style/ui/tabularBox.scss | 8 +- wcfsetup/setup/db/install.sql | 4 +- 22 files changed, 383 insertions(+), 342 deletions(-) create mode 100644 wcfsetup/install/files/style/element/dl.scss diff --git a/com.woltlab.wcf/templates/membersList.tpl b/com.woltlab.wcf/templates/membersList.tpl index 81524be4d7..15f6ace8b5 100644 --- a/com.woltlab.wcf/templates/membersList.tpl +++ b/com.woltlab.wcf/templates/membersList.tpl @@ -129,7 +129,7 @@ {if $items} -
+
    {foreach from=$objects item=user} {include file='userListItem'} diff --git a/com.woltlab.wcf/templates/moderationActivation.tpl b/com.woltlab.wcf/templates/moderationActivation.tpl index d698f45a13..15067b2e56 100644 --- a/com.woltlab.wcf/templates/moderationActivation.tpl +++ b/com.woltlab.wcf/templates/moderationActivation.tpl @@ -92,7 +92,7 @@ {include file='__commentJavaScript' commentContainerID='moderationQueueCommentList'} -
    +
      {include file='commentList'}
    diff --git a/com.woltlab.wcf/templates/moderationReport.tpl b/com.woltlab.wcf/templates/moderationReport.tpl index 3d7a6e7f3e..fb63e5fae2 100644 --- a/com.woltlab.wcf/templates/moderationReport.tpl +++ b/com.woltlab.wcf/templates/moderationReport.tpl @@ -125,7 +125,7 @@ {include file='__commentJavaScript' commentContainerID='moderationQueueCommentList'} -
    +
      {include file='commentList'}
    diff --git a/com.woltlab.wcf/templates/pageHeaderUser.tpl b/com.woltlab.wcf/templates/pageHeaderUser.tpl index d483d7b512..50a4ebcff0 100644 --- a/com.woltlab.wcf/templates/pageHeaderUser.tpl +++ b/com.woltlab.wcf/templates/pageHeaderUser.tpl @@ -77,12 +77,12 @@ -
    2. +
    3. {if !$__hideUserMenu|isset}
  3. - {lang}wcf.user.notification.notifications{/lang}{if $__wcf->getUserNotificationHandler()->getNotificationCount()} {#$__wcf->getUserNotificationHandler()->getNotificationCount()}{/if} + {lang}wcf.user.notification.notifications{/lang}{if $__wcf->getUserNotificationHandler()->getNotificationCount()} {#$__wcf->getUserNotificationHandler()->getNotificationCount()}{/if} {if !OFFLINE || $__wcf->session->getPermission('admin.general.canViewPageDuringOfflineMode')} - - {/if} - {/foreach} +
    +
    +
    + + + + {event name='displayOptions'} +
    +
    + + {event name='generalFields'} + +
    +
    {lang}wcf.search.type{/lang}
    +
    + {foreach from=$objectTypes key=objectTypeName item=objectType} + {if $objectType->isAccessible()} + + {/if} + {/foreach} +
    +
    4. + + {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} +
    +

    {lang}wcf.search.type.{@$objectTypeName}{/lang}

    + + {include file=$objectType->getFormTemplateName() application=$objectType->getApplication()} + + +
    + {/if} + {/foreach}
    diff --git a/wcfsetup/install/files/acp/templates/styleAdd.tpl b/wcfsetup/install/files/acp/templates/styleAdd.tpl index fb3499dac3..efea2ee23a 100644 --- a/wcfsetup/install/files/acp/templates/styleAdd.tpl +++ b/wcfsetup/install/files/acp/templates/styleAdd.tpl @@ -716,7 +716,7 @@ '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; }', diff --git a/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php b/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php index fcf3953b52..d7c5e51061 100644 --- a/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php +++ b/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php @@ -439,7 +439,7 @@ class StyleAddForm extends AbstractForm { $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'], @@ -450,7 +450,7 @@ class StyleAddForm extends AbstractForm { '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'], diff --git a/wcfsetup/install/files/style/element/dl.scss b/wcfsetup/install/files/style/element/dl.scss new file mode 100644 index 0000000000..1a3b91837f --- /dev/null +++ b/wcfsetup/install/files/style/element/dl.scss @@ -0,0 +1,140 @@ +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; + } + } +} diff --git a/wcfsetup/install/files/style/element/list.scss b/wcfsetup/install/files/style/element/list.scss index dde1dc7f7a..c12856967b 100644 --- a/wcfsetup/install/files/style/element/list.scss +++ b/wcfsetup/install/files/style/element/list.scss @@ -1,3 +1,4 @@ +/* makes an inline-list */ .inlineList { display: flex; flex-wrap: wrap; @@ -14,8 +15,21 @@ 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; @@ -23,21 +37,15 @@ 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; @@ -58,12 +66,28 @@ ul.dataList { } } +/*@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; + } + } +} diff --git a/wcfsetup/install/files/style/icon/icon.scss b/wcfsetup/install/files/style/icon/icon.scss index dd4ea36b94..2c56811ea6 100644 --- a/wcfsetup/install/files/style/icon/icon.scss +++ b/wcfsetup/install/files/style/icon/icon.scss @@ -175,5 +175,20 @@ a > span.fa:not(.pointer) { 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"; diff --git a/wcfsetup/install/files/style/layout/containerList.scss b/wcfsetup/install/files/style/layout/containerList.scss index dbc8ae62d1..31b192c88a 100644 --- a/wcfsetup/install/files/style/layout/containerList.scss +++ b/wcfsetup/install/files/style/layout/containerList.scss @@ -2,7 +2,15 @@ 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 { @@ -13,11 +21,15 @@ position: relative; > .containerContentType { - opacity: .6; + color: $wcfContentDimmedText; position: absolute; - top: 0; + top: 5px; right: 0; } + + + * { + margin-top: 10px; + } } } diff --git a/wcfsetup/install/files/style/layout/content.scss b/wcfsetup/install/files/style/layout/content.scss index 0daefbd204..ef4c592c7b 100644 --- a/wcfsetup/install/files/style/layout/content.scss +++ b/wcfsetup/install/files/style/layout/content.scss @@ -3,10 +3,8 @@ /* content header */ .contentHeader, .boxHeadline { // deprecated - border-bottom: 1px solid $wcfContentBorderInner; color: $wcfContentHeadlineText; // todo: rename variable margin-bottom: 30px; - padding-bottom: 10px; .contentTitle, > h1 { // deprecated diff --git a/wcfsetup/install/files/style/layout/form.scss b/wcfsetup/install/files/style/layout/form.scss index f9353e0848..7532ca033f 100644 --- a/wcfsetup/install/files/style/layout/form.scss +++ b/wcfsetup/install/files/style/layout/form.scss @@ -89,158 +89,7 @@ textarea { } } -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; diff --git a/wcfsetup/install/files/style/layout/global.scss b/wcfsetup/install/files/style/layout/global.scss index b6c2535a09..73f92dd3f9 100644 --- a/wcfsetup/install/files/style/layout/global.scss +++ b/wcfsetup/install/files/style/layout/global.scss @@ -11,17 +11,7 @@ } .marginTop { - margin-top: 20px; -} - -.framed { - > canvas, - > img, - > .icon { - //background-color: @wcfContentBackgroundColor; - //border: 1px solid @wcfContainerBorderColor; - padding: 1px; - } + margin-top: 30px; } .invisible { @@ -37,10 +27,6 @@ @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; @@ -51,13 +37,13 @@ } } -.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 { diff --git a/wcfsetup/install/files/style/layout/layout.scss b/wcfsetup/install/files/style/layout/layout.scss index 97e84ffb6e..6d7d23d398 100644 --- a/wcfsetup/install/files/style/layout/layout.scss +++ b/wcfsetup/install/files/style/layout/layout.scss @@ -80,7 +80,7 @@ a { @extend .wcfFontHeadline; > .badge { - margin-left: 5px; + top: -2px; } } } diff --git a/wcfsetup/install/files/style/layout/navigation.scss b/wcfsetup/install/files/style/layout/navigation.scss index ebacf9f368..d8f4b5ca08 100644 --- a/wcfsetup/install/files/style/layout/navigation.scss +++ b/wcfsetup/install/files/style/layout/navigation.scss @@ -50,11 +50,11 @@ display: flex; &:not(:first-child) { - margin-top: 20px; + margin-top: 30px; } &:not(:last-child) { - margin-bottom: 20px; + margin-bottom: 30px; } > nav { diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss index 485072fb9b..d52c7f18cc 100644 --- a/wcfsetup/install/files/style/layout/pageHeader.scss +++ b/wcfsetup/install/files/style/layout/pageHeader.scss @@ -136,8 +136,8 @@ } } -/* USER PANEL */ -#topMenu { +/* user panel */ +.userPanel { flex: 0 0 auto; > ul { @@ -149,42 +149,56 @@ display: flex; flex: 0 auto; - &:not(:last-child) > a { - margin: 0 5px; + /* item margins (list item can contain and
    ) */ + > 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; + } } } } diff --git a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss index a3cd7f36c4..57250d1646 100644 --- a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss +++ b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss @@ -12,7 +12,7 @@ > 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; @@ -43,13 +43,13 @@ margin: 0 20px; } - #topMenu { + .userPanel { flex: 0 auto; order: 3; - margin-right: 10px; + margin-right: 20px; } - #pageHeaderSearch { + .pageHeaderSearch { flex: 0 auto; order: 4; } diff --git a/wcfsetup/install/files/style/ui/badge.scss b/wcfsetup/install/files/style/ui/badge.scss index 486aa5ae9e..ab2fd89072 100644 --- a/wcfsetup/install/files/style/ui/badge.scss +++ b/wcfsetup/install/files/style/ui/badge.scss @@ -1,9 +1,10 @@ .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; @@ -14,8 +15,9 @@ a.badge { /* 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 { diff --git a/wcfsetup/install/files/style/ui/message.scss b/wcfsetup/install/files/style/ui/message.scss index aaf1fa9801..c8ac0392e0 100644 --- a/wcfsetup/install/files/style/ui/message.scss +++ b/wcfsetup/install/files/style/ui/message.scss @@ -5,7 +5,7 @@ > li { margin-top: 0; - padding: 40px 0; + padding: 30px 0; &:not(:first-child) { border-top: 1px solid $wcfContentBorder; @@ -378,6 +378,11 @@ } .columnLastPost { + > .box32 { + align-items: center; + } + + time { color: $wcfContentDimmedText; } diff --git a/wcfsetup/install/files/style/ui/tabularBox.scss b/wcfsetup/install/files/style/ui/tabularBox.scss index 8d3ce74489..2a3b8e1b61 100644 --- a/wcfsetup/install/files/style/ui/tabularBox.scss +++ b/wcfsetup/install/files/style/ui/tabularBox.scss @@ -3,7 +3,7 @@ } .tabularList { - border-bottom: 1px solid $wcfTabularBoxHeadline; + border-bottom: 1px solid $wcfContentBorder; display: flex; flex-direction: column; } @@ -13,7 +13,7 @@ padding: 5px 0; &.divider + li:not(.divider) { - border-top-color: $wcfTabularBoxHeadline; + border-top-color: $wcfContentBorder; } &:not(.tabularListRowHead):hover { @@ -111,7 +111,7 @@ /* table */ .table { - border-bottom: 1px solid $wcfTabularBoxHeadline; + border-bottom: 1px solid $wcfContentBorder; border-spacing: 0; width: 100%; @@ -131,7 +131,7 @@ th { border-bottom: 2px solid currentColor; - color: $wcfTabularBoxHeadline; + color: $wcfContentBorder; text-align: left; white-space: nowrap; diff --git a/wcfsetup/setup/db/install.sql b/wcfsetup/setup/db/install.sql index d760d002c4..ab99143e3e 100644 --- a/wcfsetup/setup/db/install.sql +++ b/wcfsetup/setup/db/install.sql @@ -1980,7 +1980,7 @@ INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonP 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)'); @@ -2027,7 +2027,7 @@ INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfGapSmal 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)'); -- 2.20.1