From 72595c97c5dc42619bd84f0aec6597fb029b3ee7 Mon Sep 17 00:00:00 2001 From: Marcel Werk Date: Sun, 1 Apr 2012 21:28:41 +0200 Subject: [PATCH] More style fixes --- wcfsetup/install/files/style/alerts.less | 6 ++--- wcfsetup/install/files/style/content.less | 4 ++-- wcfsetup/install/files/style/forms.less | 2 +- wcfsetup/install/files/style/layout.less | 17 +++++++------ wcfsetup/install/files/style/message.less | 20 ++++++++-------- wcfsetup/install/files/style/navigation.less | 25 +++++++++----------- wcfsetup/install/files/style/tabular.less | 24 +++++++++---------- wcfsetup/install/files/style/user.less | 20 +++++++++------- wcfsetup/install/files/style/userPanel.less | 2 +- wcfsetup/install/files/style/variables.less | 8 +++++-- wcfsetup/install/files/style/wbb.less | 6 ++--- 11 files changed, 71 insertions(+), 63 deletions(-) diff --git a/wcfsetup/install/files/style/alerts.less b/wcfsetup/install/files/style/alerts.less index 8fbc837a5a..b141e4725f 100644 --- a/wcfsetup/install/files/style/alerts.less +++ b/wcfsetup/install/files/style/alerts.less @@ -10,8 +10,8 @@ background-repeat: no-repeat, repeat; background-size: 24px, auto; border-radius: @wcfContainerBorderRadius; - border-width: @wcfContainerBorderWidth; - border-style: @wcfContainerBorderStyle; + border-width: 1px; + border-style: solid; box-sizing: border-box; line-height: 1.5; margin-top: @wcfGapMedium; @@ -56,7 +56,7 @@ text-shadow: 0 1px 0 rgba(255, 255, 255, 1); line-height: 1.5; color: @errorColor; - border: @wcfContainerBorderWidth @wcfContainerBorderStyle @errorBorderColor; + border: 1px solid @errorBorderColor; border-radius: @wcfContainerBorderRadius; background-color: @errorBackgroundColor; background-image: url('../../icon/systemError.svg'); diff --git a/wcfsetup/install/files/style/content.less b/wcfsetup/install/files/style/content.less index 02310e05fc..d3a2348e33 100644 --- a/wcfsetup/install/files/style/content.less +++ b/wcfsetup/install/files/style/content.less @@ -14,7 +14,7 @@ &.sidebarOrientationLeft { .content { - border-left: @wcfContainerBorderWidth @wcfContainerBorderStyle darken(@wcfHighlightBackgroundColor, 8%); + border-left: 1px solid darken(@wcfHighlightBackgroundColor, 8%); margin-left: 249px; } @@ -25,7 +25,7 @@ &.sidebarOrientationRight { .content { - border-right: @wcfContainerBorderWidth @wcfContainerBorderStyle darken(@wcfHighlightBackgroundColor, 8%); + border-right: 1px solid darken(@wcfHighlightBackgroundColor, 8%); margin-right: 249px; } diff --git a/wcfsetup/install/files/style/forms.less b/wcfsetup/install/files/style/forms.less index 783d3f33af..104e023343 100644 --- a/wcfsetup/install/files/style/forms.less +++ b/wcfsetup/install/files/style/forms.less @@ -1,7 +1,7 @@ /* ############## Fieldsets ############## */ fieldset { background-color: @wcfContainerBackgroundColor; - border: @wcfContainerBorderWidth @wcfContainerBorderStyle @wcfContainerBorderColor; + border: 1px solid @wcfContainerBorderColor; border-radius: @wcfContainerBorderRadius; box-sizing: border-box; margin: @wcfGapMedium 0 0; diff --git a/wcfsetup/install/files/style/layout.less b/wcfsetup/install/files/style/layout.less index f1540d1010..8439d8e2a3 100644 --- a/wcfsetup/install/files/style/layout.less +++ b/wcfsetup/install/files/style/layout.less @@ -60,7 +60,7 @@ img { .container { background-color: @wcfContainerBackgroundColor; - border: @wcfContainerBorderWidth @wcfContainerBorderStyle @wcfContainerBorderColor; + border: 1px solid @wcfContainerBorderColor; border-radius: @wcfContainerBorderRadius; } @@ -74,20 +74,22 @@ img { .transition(background-color, .1s); - &:nth-child(2n) { + &:nth-child(even) { background-color: @wcfContainerAccentBackgroundColor; } &:first-child { - .borderRadius(@wcfContainerBorderRadius, 0); + border-top-left-radius: @wcfContainerBorderRadius; + border-top-right-radius: @wcfContainerBorderRadius; } &:last-child { - .borderRadius(0, @wcfContainerBorderRadius); + border-bottom-left-radius: @wcfContainerBorderRadius; + border-bottom-right-radius: @wcfContainerBorderRadius; } &:hover { - background-color: @wcfHighlightBackgroundColor; + background-color: @wcfContainerHoverBackgroundColor; } } } @@ -145,15 +147,16 @@ img { hgroup { > h1 { + color: @wcfHeadlineColor; font-size: 170%; font-weight: bold; - border-bottom: 1px solid @wcfColor; + border-bottom: 1px solid @wcfHeadlineColor; padding: 1px 0 10px; .textShadow(@wcfContentBackgroundColor); a { - color: @wcfColor; + color: @wcfHeadlineColor; text-decoration: none; } } diff --git a/wcfsetup/install/files/style/message.less b/wcfsetup/install/files/style/message.less index 760d7b16c2..7b92719c1f 100644 --- a/wcfsetup/install/files/style/message.less +++ b/wcfsetup/install/files/style/message.less @@ -1,6 +1,6 @@ .message { background-color: @wcfHighlightBackgroundColor; - border: @wcfContainerBorderWidth @wcfContainerBorderStyle @wcfContainerBorderColor; + border: 1px solid @wcfContainerBorderColor; position: relative; .boxShadow(0, 0, #eee, 7px); @@ -23,7 +23,7 @@ .message.messageSidebarOrientationLeft { .messageContent { - border-left: @wcfContainerBorderWidth @wcfContainerBorderStyle @wcfContainerBorderColor; + border-left: 1px solid @wcfContainerBorderColor; margin: 0 0 0 211px; } @@ -33,12 +33,12 @@ header > .pointer { border-color: transparent @wcfContainerBorderColor transparent transparent; - border-style: @wcfContainerBorderStyle @wcfContainerBorderStyle @wcfContainerBorderStyle none; + border-style: solid solid solid none; left: -20px; > span { border-color: transparent @wcfContainerBackgroundColor transparent transparent; - border-style: @wcfContainerBorderStyle @wcfContainerBorderStyle @wcfContainerBorderStyle none; + border-style: solid solid solid none; left: 1px; } } @@ -46,7 +46,7 @@ .message.messageSidebarOrientationRight { .messageContent { - border-right: @wcfContainerBorderWidth @wcfContainerBorderStyle @wcfContainerBorderColor; + border-right: 1px solid @wcfContainerBorderColor; margin: 0 211px 0 0; } @@ -56,12 +56,12 @@ header > .pointer { border-color: transparent transparent transparent @wcfContainerBorderColor; - border-style: @wcfContainerBorderStyle none @wcfContainerBorderStyle @wcfContainerBorderStyle; + border-style: solid none solid solid; right: -20px; > span { border-color: transparent transparent transparent @wcfContainerBorderColor; - border-style: @wcfContainerBorderStyle none @wcfContainerBorderStyle @wcfContainerBorderStyle; + border-style: solid none solid solid; right: 1px; } } @@ -72,7 +72,7 @@ .userRank, .userCredits, .userStatus { - border-bottom: @wcfContainerBorderWidth dotted darken(@wcfContainerBorderColor, 10%); + border-bottom: 1px dotted darken(@wcfContainerBorderColor, 10%); } .messageSidebar div:last-child { @@ -134,7 +134,7 @@ } > div { - border-top: @wcfContainerBorderWidth dotted @wcfContainerBorderColor; + border-top: 1px dotted @wcfContainerBorderColor; display: block; overflow: hidden; padding: 10px 0; @@ -301,7 +301,7 @@ .message { .messageSignature { - border-top: @wcfContainerBorderWidth dotted @wcfContainerBorderColor; + border-top: 1px dotted @wcfContainerBorderColor; color: lighten(@wcfColor, 10%); display: block; margin: 10px 0 0; diff --git a/wcfsetup/install/files/style/navigation.less b/wcfsetup/install/files/style/navigation.less index c5716eb687..e5378a0397 100644 --- a/wcfsetup/install/files/style/navigation.less +++ b/wcfsetup/install/files/style/navigation.less @@ -58,12 +58,12 @@ } .navigationHeader { - border-bottom: @wcfContainerBorderWidth @wcfContainerBorderStyle darken(@wcfHighlightBackgroundColor, 8%); + border-bottom: 1px solid darken(@wcfHighlightBackgroundColor, 8%); border-radius: @wcfContainerBorderRadius @wcfContainerBorderRadius 0 0; } .navigationFooter { - border-top: @wcfContainerBorderWidth @wcfContainerBorderStyle darken(@wcfHighlightBackgroundColor, 8%); + border-top: 1px solid darken(@wcfHighlightBackgroundColor, 8%); border-radius: 0 0 @wcfContainerBorderRadius @wcfContainerBorderRadius; } @@ -110,13 +110,13 @@ a { border-top-left-radius: 5px; border-top-right-radius: 5px; - color: #369; + color: @wcfPageLinkColor; font-size: 110%; font-weight: bold; - text-shadow: 0 1px 0 rgba(255, 255, 255, 1); z-index: 10; - .linearGradient(@wcfNavigationBackgroundColor, rgba(255, 255, 255, 1), @wcfNavigationBackgroundColor); + .linearGradient(@wcfNavigationBackgroundColor, lighten(@wcfNavigationBackgroundColor, 20%), @wcfNavigationBackgroundColor); + .textShadow(@wcfNavigationBackgroundColor); &:after { border-bottom-left-radius: 6px; @@ -128,7 +128,7 @@ right: -7px; width: 7px; - .boxShadow(-2px, 2px, lighten(@wcfHighlightBackgroundColor, 3%), 0); + .boxShadow(-2px, 2px, @wcfNavigationBackgroundColor, 0); } &:before { @@ -141,7 +141,7 @@ position: absolute; width: 7px; - .boxShadow(2px, 2px, lighten(@wcfHighlightBackgroundColor, 3%), 0); + .boxShadow(2px, 2px, @wcfNavigationBackgroundColor, 0); } } } @@ -151,26 +151,23 @@ &:hover { > a { - color: rgba(255, 255, 255, 1); + color: @wcfPageLinkHoverColor; } } } > a { - color: #69c; + color: @wcfPageLinkColor; cursor: pointer; display: inline-block; font-weight: normal; padding: 8px 20px; position: relative; text-decoration: none; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 1); white-space: nowrap; - .transition(border, .3s, ease); - .transition(background-color, .3s, ease); - .transition(background-image, .3s, ease); - .transition(color, .3s, ease); + .transition(~"border, background-color, background-image, color", .3s, ease); + .textShadow(@wcfPageBackgroundColor); } } } diff --git a/wcfsetup/install/files/style/tabular.less b/wcfsetup/install/files/style/tabular.less index d4857d14f7..e34f6a3bbe 100644 --- a/wcfsetup/install/files/style/tabular.less +++ b/wcfsetup/install/files/style/tabular.less @@ -1,27 +1,27 @@ .tabularBox { background-image: url(../../images/header.png); - background-color: saturate(lighten(@wcfPageBackgroundColor, 20%), 20%); - border: @wcfContainerBorderWidth @wcfContainerBorderStyle @wcfContainerBorderColor; + background-color: @wcfTabularBoxBackgroundColor; + border: 1px solid @wcfContainerBorderColor; .borderRadius(); } .tabularBoxTitle > hgroup { - color: @wcfPageLinkHoverColor; + color: @wcfTabularBoxColor; padding: @wcfGapSmall; h1 { font-size: 120%; font-weight: bold; - .textShadow(saturate(lighten(@wcfPageBackgroundColor, 20%), 20%)); + .textShadow(@wcfTabularBoxBackgroundColor); a { - color: @wcfPageLinkHoverColor; + color: @wcfTabularBoxColor; &:hover { - color: @wcfPageLinkHoverColor; + color: @wcfTabularBoxColor; text-decoration: none; } } @@ -54,14 +54,14 @@ /* headline */ th { - border-right: @wcfContainerBorderWidth @wcfContainerBorderStyle rgba(0, 0, 0, .2); + border-right: 1px solid rgba(0, 0, 0, .2); color: @wcfPageLinkColor; font-size: 85%; font-weight: bold; white-space: nowrap; .linearGradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0), rgba(0, 0, 0, .4)); - .textShadow(saturate(lighten(@wcfPageBackgroundColor, 20%), 20%)); + .textShadow(@wcfTabularBoxBackgroundColor); a { color: @wcfPageLinkColor; @@ -149,7 +149,7 @@ /* striped */ tbody { - tr:nth-child(odd) td { + tr:nth-child(even) td { background-color: @wcfContainerAccentBackgroundColor; } } @@ -158,17 +158,17 @@ tbody { tr { &:not(:last-child) { - border-bottom: @wcfContainerBorderWidth @wcfContainerBorderStyle rgba(255, 255, 255, .3); + border-bottom: 1px solid rgba(255, 255, 255, .3); } &:hover { td { - background-color: @wcfHighlightBackgroundColor; + background-color: @wcfContainerHoverBackgroundColor; } } td:not(:last-child) { - border-right: @wcfContainerBorderWidth @wcfContainerBorderStyle rgba(255, 255, 255, .3); + border-right: 1px solid rgba(255, 255, 255, .3); } } } diff --git a/wcfsetup/install/files/style/user.less b/wcfsetup/install/files/style/user.less index 7a47d693ed..1274d5854f 100644 --- a/wcfsetup/install/files/style/user.less +++ b/wcfsetup/install/files/style/user.less @@ -45,30 +45,34 @@ height: 90px; overflow: hidden; + &:last-child { + border-radius: 0; + } + + &:first-child { + border-radius: @wcfContainerBorderRadius - 1 0 0 0; + } + &:nth-child(2n) { float: right; &:last-child { - .borderRadius(0, 0, @wcfContainerBorderRadius - 1, 0); + border-bottom-right-radius: @wcfContainerBorderRadius - 1; } } &:nth-child(2n+1) { &:last-child { - .borderRadius(0, 0, 0, @wcfContainerBorderRadius - 1); + border-bottom-left-radius: @wcfContainerBorderRadius - 1; } } &:nth-last-child(2) { - .borderRadius(0, 0, 0, @wcfContainerBorderRadius - 1); - } - - &:first-child { - .borderRadius(@wcfContainerBorderRadius - 1, 0, 0, 0); + border-bottom-left-radius: @wcfContainerBorderRadius - 1; } &:nth-child(2) { - .borderRadius(0, @wcfContainerBorderRadius - 1, 0, 0); + border-top-right-radius: @wcfContainerBorderRadius - 1; } > div { diff --git a/wcfsetup/install/files/style/userPanel.less b/wcfsetup/install/files/style/userPanel.less index 22ad3f68aa..3411088396 100644 --- a/wcfsetup/install/files/style/userPanel.less +++ b/wcfsetup/install/files/style/userPanel.less @@ -51,7 +51,7 @@ float: right; input[type="search"] { - border: @wcfContainerBorderWidth @wcfContainerBorderStyle @wcfContainerBorderColor; + border: 1px solid @wcfContainerBorderColor; border-radius: 30px; padding: @wcfGapTiny @wcfGapSmall; } diff --git a/wcfsetup/install/files/style/variables.less b/wcfsetup/install/files/style/variables.less index e40a16c93e..06e883eee3 100644 --- a/wcfsetup/install/files/style/variables.less +++ b/wcfsetup/install/files/style/variables.less @@ -15,6 +15,7 @@ @wcfPageLinkHoverColor: #fff; @wcfDimmedColor: lighten(@wcfColor, 15%); @wcfLabelColor: @wcfLinkColor; +@wcfHeadlineColor: @wcfColor; /* font */ @wcfBaseFontSize: 13px; @@ -25,8 +26,11 @@ @wcfContainerAccentBackgroundColor: darken(@wcfContainerBackgroundColor, 3%); @wcfContainerBorderColor: rgba(187, 204, 221, 1); //#CCC; @wcfContainerBorderRadius: 5px; -@wcfContainerBorderWidth: 1px; -@wcfContainerBorderStyle: solid; +@wcfContainerHoverBackgroundColor: @wcfHighlightBackgroundColor; + +/* tabular box */ +@wcfTabularBoxBackgroundColor: saturate(lighten(@wcfPageBackgroundColor, 20%), 20%); +@wcfTabularBoxColor: @wcfPageLinkHoverColor; /* dropdown */ @wcfDropdownBackgroundColor: @wcfContentBackgroundColor; diff --git a/wcfsetup/install/files/style/wbb.less b/wcfsetup/install/files/style/wbb.less index 7e5cec5d90..d683d69cb8 100644 --- a/wcfsetup/install/files/style/wbb.less +++ b/wcfsetup/install/files/style/wbb.less @@ -109,16 +109,16 @@ } &:hover { - background-color: @wcfHighlightBackgroundColor; + background-color: @wcfContainerHoverBackgroundColor; } } .wbbBoardNode1 { - background-color: @wcfContainerAccentBackgroundColor; + background-color: @wcfContainerBackgroundColor; } .wbbBoardNode2 { - background-color: @wcfContentBackgroundColor; + background-color: @wcfContainerAccentBackgroundColor; } .wbbBoardNodeTopEmpty div.wbbBoard { -- 2.20.1