Many style fixes
authorMarcel Werk <burntime@woltlab.com>
Thu, 5 Apr 2012 15:56:18 +0000 (17:56 +0200)
committerMarcel Werk <burntime@woltlab.com>
Thu, 5 Apr 2012 15:56:18 +0000 (17:56 +0200)
16 files changed:
wcfsetup/install/files/style/badge.less
wcfsetup/install/files/style/breadcrumbs.less
wcfsetup/install/files/style/codebox.less
wcfsetup/install/files/style/comments.less
wcfsetup/install/files/style/dialog.less
wcfsetup/install/files/style/dropdown.less
wcfsetup/install/files/style/forms.less
wcfsetup/install/files/style/layout.less
wcfsetup/install/files/style/like.less
wcfsetup/install/files/style/message.less
wcfsetup/install/files/style/pagination.less
wcfsetup/install/files/style/tabular.less
wcfsetup/install/files/style/user.less
wcfsetup/install/files/style/userPanel.less
wcfsetup/install/files/style/variables.less
wcfsetup/install/files/style/wbb.less

index 78496b406e64a8268a332ce35a09a870b5320441..57df5b2d67bb5a9d8660a51454e469405dd37ef2 100644 (file)
@@ -15,8 +15,8 @@
        border-radius: 13px;
        color: @wcfPageLinkHoverColor;
        display: inline-block;
-       font-size: 70%;
-       padding: 2px 8px;
+       font-size: @wcfSmallFontSize;
+       padding: 1px 8px 2px;
        position: relative;
        text-shadow: none;
        white-space: nowrap;
@@ -24,7 +24,7 @@
        .badgeShadow(@wcfContentBackgroundColor);
        
        &.badgeUpdate {
-               background-color: #336699;
+               background-color: #369;
                color: @wcfPageLinkHoverColor;
        }
        
                
                .badgeShadow(@wcfPageBackgroundColor);
        }
+}
+
+/* special */
+.containerHeadline h1 .badge {
+       font-size: 70%;
+       top: -1px;
+}
+
+.boxHeadline > hgroup h1 .badge {
+       font-size: 50%;
+       top: -3px;
+}
+
+.mainMenu .badge {
+       font-size: 70%;
+       top: -1px;
+}
+
+.mainMenu .active .badge {
+       font-size: 65%;
+       top: -2px;
 }
\ No newline at end of file
index f50f8d898bc0828005426fc3341f52b6d436f789..5195efe2000d140ec62d33a1dbc51d2269e256e7 100644 (file)
@@ -15,7 +15,7 @@
        > ul {
                > li {
                        float: left;
-                       font-size: 85%;
+                       font-size: @wcfSmallFontSize;
                        list-style: none;
                        max-width: 30%;
                        position: relative;
index 7b8e862807b528b33cc4c0dedae72394e1d768fb..0e5e4648ccb8ad52e3b5879366f22c5b56096d05 100644 (file)
        background-position: 12px 12px;
        background-repeat: no-repeat;
        padding: 10px 20px 10px 58px;
+       min-height: 28px;
        
        header {
                padding: 0 0 4px 0 !important;
index 8268d9164100a7fee4eab4240387141cc202a8f0..64581e98f4e3e6ebfb82d059b04a04052c8a68d4 100644 (file)
@@ -1,63 +1,58 @@
 /* ############## Profile Comments ############## */
 
-.commentList > li, .commentResponseList > li {
-       position: relative;
-}
-
-.commentOptions {
-       display: block;
-       position: absolute;
-       top: @wcfGapMedium;
-       right: @wcfGapMedium;
+.commentList {
+       .comment, .commentResponse {
+               position: relative;
+       }
        
-       li {
-               float: left;
-               opacity: 0;
+       .commentOptions {
+               display: block;
+               position: absolute;
+               top: @wcfGapMedium;
+               right: @wcfGapMedium;
                
-               .transition(opacity, .1s);
-               
-               a {
-                       padding: 4px;
+               li {
+                       float: left;
+                       opacity: 0;
+                       
+                       .transition(opacity, .1s);
+                       
+                       a {
+                               padding: 4px;
+                       }
                }
        }
-}
-
-.commentResponseList .commentOptions {
-       top: @wcfGapSmall;
-       right: @wcfGapSmall;
-}
-
-.commentContent:hover .commentOptions li {
-       opacity: 1;
-}
-
-.commentAdd small, .commentResponseAdd small {
-       color: @wcfDimmedColor;
-       margin-top: 3px;
-}
-
-.commentList > li > div > div > .commentContent {
-       margin-bottom: @wcfGapMedium;
-}
+       
+       .commentResponseList .commentOptions {
+               top: @wcfGapSmall;
+               right: @wcfGapSmall;
+       }
+       
+       .commentContent:hover .commentOptions li {
+               opacity: 1;
+       }
 
-.commentResponseList {
-       > li {
+       .commentAdd small, .commentResponseAdd small {
+               color: @wcfDimmedColor;
+       }
+       
+       .commentContent:not(.commentResponseContent) {
+               margin-bottom: @wcfGapMedium;
+       }
+       
+       .commentResponseList .commentResponse {
                border-top: 1px solid @wcfContainerBorderColor;
                padding: @wcfGapSmall;
-               
-               &:nth-child(2n) {
-                       //background-color: @wcfContainerAccentBackgroundColor;
-               }
        }
-}
-
-.commentResponseAdd {
-       border-top: 1px solid @wcfContainerBorderColor;
-       padding: 7px 7px 0;
-}
-
-.commentResponseAdd ~ .commentResponseList > li:first-child {
-       margin-top: 7px;
+       
+       .commentResponseAdd {
+               border-top: 1px solid @wcfContainerBorderColor;
+               padding: 7px 7px 0;
+       }
+       
+       .commentResponseAdd ~ .commentResponseList .commentResponse:first-child {
+               margin-top: 7px;
+       }
 }
 
 .commentList > li:nth-child(2n) .commentResponseList > li:nth-child(2n+1) {
index 207b1d020700ff2aa215598790dd4f0d04fe999b..df0fc5f1f56ba4abb835961fda9293789360dd2e 100644 (file)
@@ -21,7 +21,7 @@
 }
 
 .dialogTitlebar {
-       background-color: saturate(lighten(@wcfPageBackgroundColor, 20%), 20%);
+       background-color: @wcfTabularBoxBackgroundColor;
        background-image: url(../../images/header.png);
        background-position: top left;
        background-repeat: repeat-x;
@@ -35,7 +35,7 @@
        .dialogTitle {
                color: @wcfPageLinkHoverColor;
                display: block;
-               font-size: 170%;
+               font-size: @wcfHeadlineFontSize;
                font-weight: bold;
                
                .textShadow(saturate(lighten(@wcfPageBackgroundColor, 20%), 20%));
index 5012d350770e98e0bafb0f28764c23cc9a74bfa5..a287c389f53409de0fcaa3a84ef4c7aea5ba623f 100644 (file)
                                        .textShadow(@wcfDropdownHoverBackgroundColor);
                                }
                        }
+                       
+                       .containerHeadline {
+                               margin-bottom: 0;
+                               
+                               h2 {
+                                       font-size: @wcfSmallFontSize;
+                               }
+                       }
                }
        }
        
index 150fc5fcf666cde659b0c1eee53f1ca3f40f5a82..e1f2dfd8862cf03e744483ce1c292e6e98f5eee6 100644 (file)
@@ -84,12 +84,6 @@ dl.wide > dd {
 dl > dd > small {
        color: @wcfDimmedColor;
        display: block;
-       font-size: 85%;
-       margin: 3px 0 7px;
-}
-
-dl > dd > p {
-       margin-top: 5px;
 }
 
 /* Nested */
index 312393a58f8e7f965b09c9a8fab6125d4456893f..7f20272d925dcba4d5847d43306e02f0b3941537 100644 (file)
@@ -6,7 +6,7 @@ body {
        color: @wcfPageColor;
        font-family: @wcfBaseFontFamily;
        font-size: @wcfBaseFontSize;
-       line-height: 1;
+       line-height: @wcfBaseLineHeight;
 }
 
 a {
@@ -36,8 +36,7 @@ a {
 }
 
 small {
-       font-size: 85%;
-       margin-top: 2px;
+       font-size: @wcfSmallFontSize;
 }
 
 .invisible {
@@ -96,15 +95,18 @@ img {
                        background-color: @wcfContainerHoverBackgroundColor;
                }
        }
+       
+       > * > li {
+               padding: @wcfGapMedium @wcfGapLarge;
+       }
 }
 
 .containerHeadline {
        margin-bottom: @wcfGapSmall;
        
        > h1 {
-               font-size: 120%;
+               font-size: @wcfTitleFontSize;
                font-weight: bold;
-               margin-bottom: 2px;
                
                > small {
                        color: @wcfDimmedColor;
@@ -152,10 +154,11 @@ img {
        hgroup {
                > h1 {
                        color: @wcfHeadlineColor;
-                       font-size: 170%;
+                       font-family: @wcfHeadlineFontFamily;
+                       font-size: @wcfHeadlineFontSize;
                        font-weight: bold;
                        border-bottom: 1px solid @wcfHeadlineColor;
-                       padding: 1px 0 10px;
+                       padding: 1px 0 5px;
                        
                        .textShadow(@wcfContentBackgroundColor);
                        
@@ -180,9 +183,10 @@ img {
        > h1 {
                border-bottom: 1px solid @wcfDimmedColor;
                color: @wcfDimmedColor;
-               font-size: 150%;
+               font-family: @wcfHeadlineFontFamily;
+               font-size: @wcfSubHeadlineFontSize;
                font-weight: bold;
-               padding: 1px 0 10px;
+               padding: 1px 0 5px;
 
                .textShadow(@wcfContainerBackgroundColor);
        }
@@ -244,8 +248,7 @@ ul.dataList {
 }
 
 .contentOptions {
-       font-size: 100%;
-       line-height: 1;
+       font-size: @wcfSmallFontSize;
        position: relative;
        
        nav {
index af9639b60b87a7dd4ed6c9069178b843e1cae86d..fd7088afd69ae7b9e296cec8b04eaa4bb3beb48f 100644 (file)
@@ -26,7 +26,6 @@
 
 .likesWidget > ul > li {
        text-align: right;
-       margin-top: 3px;
        display: inline-block;
 }
 
index ef4cc048a46f43f8528ecf2ce4a75804c4e9acd5..2deca5152dbd49b8aef4188a124b8c54b5cd9344 100644 (file)
@@ -3,7 +3,6 @@
        border: 1px solid @wcfContainerBorderColor;
        position: relative;
        
-       //.boxShadow(0, 0, #eee, 7px);
        .borderRadius();
        
        &:after {
        
        .messageCounter {
                float: right;
-               font-size: 90%;
+               font-size: @wcfSmallFontSize;
                font-weight: bold;
                margin-left: @wcfGapSmall;
                
                a {
-                       padding: 2px 5px;
+                       padding: 1px 5px;
                }
        }
 }
        .borderRadius();
        
        header {
-               padding: 20px 20px 5px;
+               padding: 20px 20px 0;
                position: relative;
                
                time {
                        color: @wcfDimmedColor;
-                       font-size: 85%;
-                       margin-top: @wcfGapSmall;
+                       font-size: @wcfSmallFontSize;
                }
                
                .likesDisplay {
                        display: inline-block;
-                       margin: -2px 0 -2px @wcfGapTiny;
+                       margin: -2px 0 -2px 4px;
                }
                
                .messageTitle {
                        color: @wcfColor;
-                       font-size: 130%;
+                       font-size: @wcfSubHeadlineFontSize;
                        font-weight: bold;
-                       padding: 13px 0 0;
+                       padding: @wcfGapSmall 0 0;
                        
                        .textShadow(@wcfContainerBackgroundColor);
                }
 }
 
 .message {
-       .messageSignature {
-               border-top: 1px dotted @wcfContainerBorderColor;
+       .signature {
                color: lighten(@wcfColor, 10%);
-               display: block;
-               margin: 10px 0 0;
-               padding: 10px 0;
        }
 }
 
index 7cd589bc8dc0284ac64d3d04a85d8b05204dd402..6caf3411e4991c77d479f54e0cc43af3619b6a0b 100644 (file)
@@ -41,7 +41,7 @@
                        }
                        
                        &.skip {        
-                               padding: 2px 0 1px;
+                               padding: 1px 0 1px;
                        }
                        
                        &:not(.disabled):hover a {
                        }
                        
                        &:not(.skip) a {
-                               padding: 3px 1px;
+                               padding: 2px 1px;
                        }
                        
                        &.active, &.active:hover {
                                border: 1px solid darken(@wcfButtonColor, 5%);
                                color: lighten(@wcfButtonBackgroundColor, 5%);
-                               padding: 3px 0;
+                               padding: 2px 0;
                                
                                .linearGradient(@wcfButtonColor, darken(@wcfButtonColor, 10%), @wcfButtonColor 3px);
                                .textShadow(#000);
@@ -82,9 +82,8 @@
 /* Special -> Status Display */
 
 .statusDisplay .pageNavigation {
-       font-size: 80%;
+       font-size: @wcfSmallFontSize;
        float: left;
-       margin-right: 7px;
        margin-top: 2px;
        
        ul {
index 8d8d2c5864ddf67622af22677fadc6cdd657ec0f..5083974e2b63a3a7ba126ed1e6e583aad089c6eb 100644 (file)
        
        .statusIcons {
                float: right;
+               margin-left: 7px;
                
                li {
                        display: inline-block;
                }
        }
-       
-       img {
-               cursor: pointer;
-       }
 }
\ No newline at end of file
index 1274d5854ffbe10fb3f49b4eeb2b03a5d5e707a7..b47fc77a65a55f43fe9534a31108d5c037a15af6 100644 (file)
@@ -10,7 +10,7 @@
 .framedIconList {
        li {
                float: left;
-               margin: 0 4px 4px 0;
+               margin: 0 2px 4px 0;
                
                .framed {
                        display: inline-block;
 /* ##### User List #### */
 .simpleUserList {
        h2, p, dl {
-               font-size: 85%;
-       }
-       
-       p, dl {
-               margin-bottom: 2px;
+               font-size: @wcfSmallFontSize;
        }
 }
 
index 6addb00085d925ae775b850dea794c91b8d8b79e..df03061952b63390a17828ec840a41822f09d3d3 100644 (file)
@@ -15,7 +15,7 @@
        &:hover {
                background-color: rgba(0, 0, 0, .9);
                
-               .searchBar input[type="text"] {
+               .searchBar input[type="search"] {
                        background-color: darken(@wcfPageBackgroundColor, 5%);
                }
        }
index 49de61522273ebec3b03a8e22799ba5b72ce26ed..92e83a7b9d84e16b85ea9eef01032f87bb10e9d6 100644 (file)
 /* font */
 @wcfBaseFontSize: 13px;
 @wcfBaseFontFamily: "Trebuchet MS", Arial, sans-serif;
-@wcfBaseLineHeight: 15px;
+@wcfBaseLineHeight: 1.27;
+@wcfHeadlineFontSize: 170%;
+@wcfHeadlineFontFamily: @wcfBaseFontFamily;
+@wcfSubHeadlineFontSize: 140%;
+@wcfTitleFontSize: 120%;
+@wcfSmallFontSize: 85%;
 
 /* container */
 @wcfContainerAccentBackgroundColor: darken(@wcfContainerBackgroundColor, 3%);
index 705eb87c7059f1a4fa9dd0442bf67cb8b8e558f0..324d0ef0338c59648004f5247469f30b33b5db1b 100644 (file)
@@ -22,7 +22,7 @@
        }
        
        .wbbStats {
-               font-size: 85%;
+               font-size: @wcfSmallFontSize;
                left: 50%;
                margin-top: @wcfGapSmall;
                position: absolute;
@@ -34,7 +34,6 @@
                        
                        dt {
                                float: right;
-                               padding-bottom: 4px;
                                width: 40%;
                                
                                &:after {
@@ -45,7 +44,6 @@
                        dd {
                                float: left;
                                margin: 0;
-                               padding-bottom: 4px;
                                text-align: right;
                                width: 58%;
                        }
                        h1 a {
                                display: inline-block;
                                overflow: hidden;
-                               padding-bottom: 2px; /* prevents letters from being cut */
                                text-overflow: ellipsis;
                                width: 98%;
                                white-space: nowrap;
                        }
                        
                        h2 {
-                               font-size: 85%;
+                               font-size: @wcfSmallFontSize;
                                
                                time {
                                        color: @wcfDimmedColor;
@@ -89,8 +86,6 @@
        }
        
        .wbbSubBoards {
-               margin-top: @wcfGapSmall;
-               
                li {
                        display: inline-block;
                }
@@ -98,7 +93,6 @@
 
        .wbbBoardDescription {
                font-size: 90%;
-               padding-top: @wcfGapTiny;
        }
 
        .wbbBoardContainer {
                .borderRadius(@wcfContainerBorderRadius);
        }
        
-       .new > div > hgroup > h1 {
-               font-weight: bold;
+       .wbbBoard > div > hgroup > h1 {
+               font-weight: normal;
        }
        
-       .wbbBoard > div > hgroup > h1 {
-               font-size: 120%;
+       .new > div > hgroup > h1, .wbbSubBoards li.new a {
+               font-weight: bold;
        }
        
        .wbbCollapsibleCategory .collapsibleButton {
 .wbbThreadList {
        .wbbLastPost h2 {
                color: @wcfDimmedColor;
-               font-size: 85%;
-               margin-top: 2px;
+               font-size: @wcfSmallFontSize;
        }
        
        .columnLastPost {
                }
        }
        
+       .columnTopic .labelList {
+               float: right;
+               padding-left: 7px;
+       }
+       
+       .columnTopic .wbbTopicLink {
+               font-size: @wcfTitleFontSize;
+       }
+       
        tr.new .columnTopic > h1 {
                font-weight: bold;
        }
                color: @wcfLinkColor;
                display: inline-block;
                font-weight: bold;
-               font-size: 85%;
+               font-size: @wcfSmallFontSize;
                left: -220px;
                top: 30px;
                padding: 6px 10px;
                }
                
                time {
-                       font-size: 85%;
+                       font-size: @wcfSmallFontSize;
                        font-style: italic;
                }