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 7b9446996690e193fc1f62590a7b6d87f6dc08ac..0e23463a03a8c6670230e08cd573a8307687542e 100644 (file)
--- 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 48b7507e9ce42673be35c03d9a780e26e646b3c3..29f4c2353754fde1211d8e98b85a11dc31124dbf 100644 (file)
--- 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 6153dc107b83af6d9713185a40fc9ee9f21c1d1b..e87506cfa0122efcced9dc503c2a574387dc7909 100644 (file)
--- 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 4f96bd6e60e3d213f16dacf0509ce41f46f9173f..908328dc981be06b342573247162687d3073cddd 100644 (file)
--- 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 cb02225aabd86d1c13af829e2e1bccb2f2129449..1746a88b73a6ae48bb2034d23b9743a701f11feb 100644 (file)
--- 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 2f7fc77e1a09d55026f4b5e9eabdecb7ce2f08d7..2a1c1bfc2d8c600c3e89f2e6e4ff0d40583bc0cd 100644 (file)
--- 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%;
                        }
                }