From: Marcel Werk Date: Tue, 17 Apr 2012 20:43:18 +0000 (+0200) Subject: New design for data list X-Git-Tag: 2.0.0_Beta_1~1152 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=a7f1316eff00bf10e198e10438ce8aa4831bafce;p=GitHub%2FWoltLab%2FWCF.git New design for data list Some minor style fixes --- diff --git a/wcfsetup/install/files/style/codebox.less b/wcfsetup/install/files/style/codebox.less index 7b94469966..0e23463a03 100644 --- a/wcfsetup/install/files/style/codebox.less +++ b/wcfsetup/install/files/style/codebox.less @@ -172,9 +172,9 @@ margin-bottom: @wcfGapTiny; header { - padding-bottom: 4px; + padding-bottom: @wcfGapTiny; border-bottom: 1px dotted @wcfContainerBorderColor; - margin-bottom: 7px; + margin-bottom: @wcfGapSmall; h1 { font-weight: bold; @@ -183,7 +183,7 @@ .quoteBox { background-image: none; - padding-left: 21px; + padding-left: @wcfGapLarge; min-height: 0; } } \ No newline at end of file diff --git a/wcfsetup/install/files/style/layout.less b/wcfsetup/install/files/style/layout.less index 48b7507e9c..29f4c23537 100644 --- a/wcfsetup/install/files/style/layout.less +++ b/wcfsetup/install/files/style/layout.less @@ -150,14 +150,14 @@ img { } } -.box16 { .box(16px, 3px); } -.box24 { .box(24px, 5px); } -.box32 { .box(32px, 4px); } -.box48 { .box(48px, 8px); } -.box64 { .box(64px, 10px); } -.box96 { .box(96px, 12px); } -.box128 { .box(128px, 16px); } -.box256 { .box(256px, 32px); } +.box16 { .box(16px, 4px); } +.box24 { .box(24px, 4px); } +.box32 { .box(32px, 7px); } +.box48 { .box(48px, 7px); } +.box64 { .box(64px, 7px); } +.box96 { .box(96px, 14px); } +.box128 { .box(128px, 14px); } +.box256 { .box(256px, 21px); } .boxHeadline { margin-top: @wcfGapMedium; @@ -198,8 +198,51 @@ img { .icon256 { .icon(256px); } dl.dataList { + display: block; + + dt { + color: @wcfDimmedColor; + display: block; + float: right; + font-size: @wcfSmallFontSize; + line-height: 1.5; + overflow: hidden; + text-align: left; + white-space: nowrap; + width: 68%; + + a { + color: @wcfDimmedColor; + text-decoration: none; + } + } + + dd { + color: @wcfColor; + float: left; + font-weight: bold; + margin: 0; + overflow: hidden; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; + width: 30%; + + a { + color: @wcfColor; + text-decoration: none; + } + } + + &:after { + display: table; + content: ""; + clear: both; + } +} + +dl.inlineDataList { display: inline-block; - margin: 0; dd { display: inline-block; @@ -210,7 +253,6 @@ dl.dataList { dt { color: @wcfDimmedColor; display: inline-block; - float: none; margin: 0; text-align: left; width: auto; @@ -247,7 +289,7 @@ ul.dataList { bottom: -2px; opacity: 0; position: absolute; - right: -21px; + right: -22px; text-align: right; .transition(opacity, .1s); diff --git a/wcfsetup/install/files/style/message.less b/wcfsetup/install/files/style/message.less index 6153dc107b..e87506cfa0 100644 --- a/wcfsetup/install/files/style/message.less +++ b/wcfsetup/install/files/style/message.less @@ -122,7 +122,7 @@ color: @wcfColor; display: block; line-height: 1.5; - padding: 10px 20px 1px; + padding: @wcfGapMedium @wcfGapLarge 1px; position: relative; &:after { @@ -135,11 +135,11 @@ border-top: 1px dotted @wcfContainerBorderColor; display: block; overflow: hidden; - padding: 10px 0; + padding: @wcfGapMedium 0; } > *:last-child { - padding-bottom: 20px; + //padding-bottom: @wcfGapMedium; } } @@ -149,7 +149,7 @@ .borderRadius(); .messageHeader { - padding: 20px 20px 0; + padding: @wcfGapMedium @wcfGapLarge 0; position: relative; time { @@ -174,10 +174,10 @@ } .message .messageSidebar { - font-size: 90%; + //font-size: 90%; line-height: 1.3; margin-bottom: -1px; - padding: 10px 20px 20px; + padding: @wcfGapMedium @wcfGapLarge @wcfGapLarge; position: relative; text-align: center; width: 170px; /* Width toggle */ @@ -188,78 +188,48 @@ display: block; } - header .username, - header .username a { + header .username { color: @wcfLinkColor; - font-size: 110%; + font-size: @wcfTitleFontSize; font-weight: bold; - padding: 1px 3px; - text-decoration: none; + padding: 0 3px 1px; .textShadow(@wcfContainerHoverBackgroundColor); - } - - header .username a img { - vertical-align: middle; - } - - a { - color: @wcfLinkColor; - &:hover { - color: @wcfLinkHoverColor; + a { + text-decoration: none; } } - .userTitle .badge { - background-color: @wcfLinkColor; - color: rgba(255, 255, 255, 1); - display: inline-block; - font-size: 95%; - margin-top: 3px; - padding: 0 10px; - - .borderRadius(13px); - .boxShadow(0, 1px, rgba(255, 255, 255, 1), 0); + .userTitle { + /* todo */ } .userRank { - color: rgba(255, 255, 255, 1); - display: block; - font-size: 95%; - margin: 3px 0 0; - padding: 0 0 7px; + /* todo */ + margin: 2px 0 0; } .userAvatar { display: block; - margin: 7px 0 0; - padding: 0 0 7px; - - img { - border: 0; - padding: 0; - } + margin: @wcfGapSmall 0 0; + padding: 0 0 @wcfGapSmall; } .userCredits { color: @wcfLinkColor; display: block; - font-size: 95%; - margin: 7px 0 0; - padding: 0 0 7px; - - a, - p { - color: @wcfLinkColor; - } + margin: @wcfGapSmall 0 0; + padding: 0 0 @wcfGapSmall; } .userStatus, .userContacts { color: @wcfLinkColor; + font-size: @wcfSmallFontSize; display: block; margin: @wcfGapSmall 0 0; + padding: 0 0 @wcfGapSmall; } .userStatus ul, diff --git a/wcfsetup/install/files/style/mixins.less b/wcfsetup/install/files/style/mixins.less index 4f96bd6e60..908328dc98 100644 --- a/wcfsetup/install/files/style/mixins.less +++ b/wcfsetup/install/files/style/mixins.less @@ -22,10 +22,10 @@ // sets default text shadows depending on background color -.textShadow(@backgroundColor) when (lightness(@backgroundColor) >= 50%) { +.textShadow(@backgroundColor) when (lightness(@backgroundColor) >= 40%) { text-shadow: 0 1px 0 rgba(255, 255, 255, .5); } -.textShadow(@backgroundColor) when (lightness(@backgroundColor) < 50%) { +.textShadow(@backgroundColor) when (lightness(@backgroundColor) < 60%) { text-shadow: 0 -1px 0 rgba(0, 0, 0, .5); } diff --git a/wcfsetup/install/files/style/sidebar.less b/wcfsetup/install/files/style/sidebar.less index cb02225aab..1746a88b73 100644 --- a/wcfsetup/install/files/style/sidebar.less +++ b/wcfsetup/install/files/style/sidebar.less @@ -67,19 +67,6 @@ } } - dl.dataList { - margin-bottom: -4px; - - dd { - margin-bottom: 4px; - } - - dt { - font-size: 85%; - color: @wcfLinkColor; - } - } - /* forms */ fieldset { padding: @wcfGapSmall 0 0; diff --git a/wcfsetup/install/files/style/wbb.less b/wcfsetup/install/files/style/wbb.less index 2f7fc77e1a..2a1c1bfc2d 100644 --- a/wcfsetup/install/files/style/wbb.less +++ b/wcfsetup/install/files/style/wbb.less @@ -22,7 +22,6 @@ } .wbbStats { - font-size: @wcfSmallFontSize; left: 50%; margin-top: @wcfGapSmall; position: absolute; @@ -30,21 +29,14 @@ width: 15%; dl { - display: block; - dt { - float: right; + line-height: @wcfBaseLineHeight; width: 40%; - - &:after { - content: ""; - } } dd { - float: left; - margin: 0; - text-align: right; + font-weight: normal; + font-size: @wcfSmallFontSize; width: 58%; } }