From ae5f98e151bb73c7f56dec0203ce50b74feb2d7a Mon Sep 17 00:00:00 2001 From: Marcel Werk Date: Thu, 29 Mar 2012 16:45:52 +0200 Subject: [PATCH] Some small style fixes / code optimizations --- wcfsetup/install/files/style/layout.less | 2 +- wcfsetup/install/files/style/navigation.less | 8 +- wcfsetup/install/files/style/tabular.less | 2 - wcfsetup/install/files/style/wbb.less | 423 +++++++++---------- 4 files changed, 203 insertions(+), 232 deletions(-) diff --git a/wcfsetup/install/files/style/layout.less b/wcfsetup/install/files/style/layout.less index 5f80809ca6..07f43d5672 100644 --- a/wcfsetup/install/files/style/layout.less +++ b/wcfsetup/install/files/style/layout.less @@ -196,7 +196,7 @@ dl.dataList { dd { display: inline-block; - margin: 0; + margin: 0 4px 0 0; padding: 0; } diff --git a/wcfsetup/install/files/style/navigation.less b/wcfsetup/install/files/style/navigation.less index 774ddd6b4f..968067bbfa 100644 --- a/wcfsetup/install/files/style/navigation.less +++ b/wcfsetup/install/files/style/navigation.less @@ -93,7 +93,7 @@ font-size: 120%; &.active { - margin: -5px 0 0; + margin: -4px 0 0; &:first-child { margin-right: -5px; @@ -104,7 +104,7 @@ } &:only-child { - margin: -5px 0 0; + margin: -4px 0 0; } a { @@ -174,6 +174,10 @@ } } } + + .badge { + margin: -5px 0; + } } .contentNavigation { diff --git a/wcfsetup/install/files/style/tabular.less b/wcfsetup/install/files/style/tabular.less index 19a778840d..d4857d14f7 100644 --- a/wcfsetup/install/files/style/tabular.less +++ b/wcfsetup/install/files/style/tabular.less @@ -149,8 +149,6 @@ /* striped */ tbody { - background-color: @wcfContainerBackgroundColor; - tr:nth-child(odd) td { background-color: @wcfContainerAccentBackgroundColor; } diff --git a/wcfsetup/install/files/style/wbb.less b/wcfsetup/install/files/style/wbb.less index db06c48424..7e5cec5d90 100644 --- a/wcfsetup/install/files/style/wbb.less +++ b/wcfsetup/install/files/style/wbb.less @@ -1,9 +1,16 @@ -.wbbStats { - margin-top: 2px; +/* ############## Board List ############## */ +.wbbBoardList { + > li.wbbBoardNodeTop:not(.wbbBoardNodeTopEmpty) > div { + .borderRadius(@wcfContainerBorderRadius, 0); + } + + > li > ul > li:last-child div.wbbBoard:last-child { + .borderRadius(0, @wcfContainerBorderRadius); + } - /* TODO: This should be mentioned in the documentation but not included in stylesheets */ - //&.wbbStatsAside { + .wbbStats { left: 50%; + margin-top: 2px; position: absolute; top: @wcfGapSmall; width: 15%; @@ -13,8 +20,8 @@ dt { float: right; - width: 40%; padding-bottom: 4px; + width: 40%; &:after { content: ""; @@ -23,121 +30,108 @@ dd { float: left; + margin: 0; + padding-bottom: 4px; text-align: right; width: 58%; - padding-bottom: 4px; } } - //} -} - -.wbbLastPost { - left: 65%; - position: absolute; - top: @wcfGapSmall; - width: 35%; /* = 100% - left */ - - > div { - background-color: @wcfContentBackgroundColor; - padding: 7px; - border: 1px solid @wcfContainerBorderColor; - border-radius: @wcfContainerBorderRadius; - margin-right: 7px; } - hgroup { - h1 a { - display: inline-block; - overflow: hidden; - padding-bottom: 2px; /* prevents letters from being cut */ - text-overflow: ellipsis; - width: 98%; - white-space: nowrap; + .wbbLastPost { + left: 65%; + position: absolute; + top: @wcfGapSmall; + width: 35%; /* = 100% - left */ + + > div { + background-color: @wcfContentBackgroundColor; + padding: 7px; + border: 1px solid @wcfContainerBorderColor; + border-radius: @wcfContainerBorderRadius; + margin-right: 7px; } - h2 { - font-size: 85%; + hgroup { + h1 a { + display: inline-block; + overflow: hidden; + padding-bottom: 2px; /* prevents letters from being cut */ + text-overflow: ellipsis; + width: 98%; + white-space: nowrap; + } - time { - color: @wcfDimmedColor; + h2 { + font-size: 85%; + + time { + color: @wcfDimmedColor; + } } } } -} - -.wbbSubBoards { - margin-top: @wcfGapSmall; - li { - display: inline-block; + .wbbSubBoards { + margin-top: @wcfGapSmall; + + li { + display: inline-block; + } } -} -.wbbBoardDescription { - font-size: 90%; - padding-top: @wcfGapTiny; -} - -.wbbBoardContainer { - position: relative; -} + .wbbBoardDescription { + font-size: 90%; + padding-top: @wcfGapTiny; + } -.wbbBoardNodeTop { - margin-top: @wcfGapMedium; -} + .wbbBoardContainer { + position: relative; + } -.wbbBoard { - min-height: 42px; - padding: @wcfGapSmall; - padding-right: 51%; - - .transition(background, .1s); - - &~ ul > .wbbBoardContainer > .wbbBoard { - padding-left: 43px; + .wbbBoardNodeTop { + margin-top: @wcfGapMedium; + } + .wbbBoard { + min-height: 42px; + padding: @wcfGapSmall; + padding-right: 51%; + + .transition(background, .1s); + &~ ul > .wbbBoardContainer > .wbbBoard { - padding-left: 79px; + padding-left: 43px; + + &~ ul > .wbbBoardContainer > .wbbBoard { + padding-left: 79px; + } + } + + &:hover { + background-color: @wcfHighlightBackgroundColor; } } - - &:hover { - background-color: @wcfHighlightBackgroundColor; - } -} - -.wbbBoardNode1 { - background-color: @wcfContainerAccentBackgroundColor; -} - -.wbbBoardNode2 { - background-color: @wcfContentBackgroundColor; -} - -.wbbBoardList > li.wbbBoardNodeTop:not(.wbbBoardNodeTopEmpty) > div { - .borderRadius(@wcfContainerBorderRadius, 0); -} -.wbbBoardList > li > ul > li:last-child div.wbbBoard:last-child { - .borderRadius(0, @wcfContainerBorderRadius); -} - -.wbbBoardNodeTopEmpty div.wbbBoard { - .borderRadius(@wcfContainerBorderRadius); -} - -.wbbThreadListLastPost h2 { - color: @wcfDimmedColor; - font-size: 85%; - margin-top: 2px; -} - -.wbbBoardList .new > div > hgroup > h1 { - font-weight: bold; -} + .wbbBoardNode1 { + background-color: @wcfContainerAccentBackgroundColor; + } -.wbbBoard > div > hgroup > h1 { - font-size: 120%; + .wbbBoardNode2 { + background-color: @wcfContentBackgroundColor; + } + + .wbbBoardNodeTopEmpty div.wbbBoard { + .borderRadius(@wcfContainerBorderRadius); + } + + .new > div > hgroup > h1 { + font-weight: bold; + } + + .wbbBoard > div > hgroup > h1 { + font-size: 120%; + } } /* ignored boards */ @@ -163,135 +157,110 @@ } } - /* ############## Thread List ############## */ - -/* Column Avatar */ -.wbbThreadList .columnAvatar div { - position: relative; - width: 40px; - height: 38px; -} - -.wbbThreadList .columnAvatar div > p > img { - opacity: .5; +.wbbThreadList { + .wbbLastPost h2 { + color: @wcfDimmedColor; + font-size: 85%; + margin-top: 2px; + } - .transition(opacity, .2s); -} - -.wbbThreadList tr.new .columnAvatar div > p > img, -.wbbThreadList tr:hover .columnAvatar div > p > img { - opacity: 1; -} - -.wbbThreadList .columnAvatar .myAvatar { - position: absolute; - width: 16px; - height: 16px; - bottom: -2px; - left: 24px; - opacity: 1; + .columnAvatar { + div { + position: relative; + width: 40px; + height: 38px; + + > p > img { + opacity: .5; + + .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); + } + } - .boxShadow(0, 0, rgba(0, 0, 0, .3), 3px); -} + tr.new .columnAvatar div > p > img, tr:hover .columnAvatar div > p > img { + opacity: 1; + } +} -.wbbThreadStarter { - position: relative; - +/* ############## 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/threadStarter1.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%"); + } + } + } - > .message { - &:after, + .newMessageBadge { + border: 1px solid @wcfLinkColor; + border-radius: 2px; + color: @wcfLinkColor; + display: inline-block; + font-weight: bold; + font-size: 85%; + left: -220px; + top: 30px; + padding: 6px 10px; + position: absolute; + text-transform: uppercase; + + .linearGradient(darken(@wcfHighlightBackgroundColor, 10%), @wcfHighlightBackgroundColor, darken(@wcfHighlightBackgroundColor, 10%)); + .textShadow(darken(@wcfHighlightBackgroundColor, 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: 128px; - left: 0; + height: 0px; + left: -8px; position: absolute; - top: 0; - width: 128px; - } - - &:after { - background-image: url(../../icon/threadStarter1.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%"); + width: 0px; } } } -.newMessageBadge { - - display: inline-block; - border: 1px solid @wcfLinkColor; //@wcfContainerBorderColor; - border-radius: 2px; - //border-bottom-left-radius: 0px; - padding: 6px 10px; - position: absolute; - left: -220px; - top: 30px; - font-weight: bold; - color: @wcfLinkColor; - text-transform: uppercase; - font-size: 85%; - // - .linearGradient(darken(@wcfHighlightBackgroundColor, 10%), @wcfHighlightBackgroundColor, darken(@wcfHighlightBackgroundColor, 10%)); - .textShadow(darken(@wcfHighlightBackgroundColor, 10%)); - .boxShadow(1px, 1px, rgba(0, 0, 0, .2), 3px); -} - -.newMessageBadge:before { - content: ""; - display: block; - - width: 0px; - height: 0px; - position: absolute; - bottom: -7px; - left: -8px; - - - border-width: 0px 7px 7px; - border-style: solid; - border-color: transparent @wcfLinkColor transparent transparent; - /* - border: 5px solid red; - border-width: 5px 0 0 5px;*/ -} - - -/* rotated badge -.newMessageBadge { - background-color: @wcfHoverBackgroundColor; - color: @wcfColor; - display: block; - font-size: 15px; - left: -260px; - padding: 6px 4px; - position: absolute; - text-align: center; - text-transform: uppercase; - top: 20px; - width: 150px; - - -webkit-backface-visibility: hidden; - -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2); - -webkit-transform: rotate(-45deg); - -o-transform: rotate(-45deg); -} - -.wbbThreadPostList > li { - overflow: hidden; -}*/ - /* ############## Post Preview ############## */ .wbbPostPreview { background-color: @wcfTooltipBackgroundColor; @@ -314,20 +283,20 @@ position: absolute; bottom: -9px; } -} - -.wbbPostPreviewContent { - h1 { - display: inline-block; - } - - time { - font-size: 85%; - font-style: italic; - } - h1, time, p { - line-height: 1.5; - margin-bottom: 7px; + .wbbPostPreviewContent { + h1 { + display: inline-block; + } + + time { + font-size: 85%; + font-style: italic; + } + + h1, time, p { + line-height: 1.5; + margin-bottom: 7px; + } } -} \ No newline at end of file +} -- 2.20.1