Small basic style improvements

diff --git a/wcfsetup/install/files/style/form.less b/wcfsetup/install/files/style/form.less
index 799dd1997489e85ecb3ab5df19b12b630f75fa9c..9204274b423dce3cab99b18234277e5c62c6d02d 100644 (file)
--- a/wcfsetup/install/files/style/form.less
+++ b/wcfsetup/install/files/style/form.less
@@ -26,121 +26,119 @@ fieldset {
        &:not(:first-of-type) {
                margin-top: @wcfGapMedium;
        }
+}
+
+/* definition list */
+dl:not(.plain) {
+       position: relative;
        
-       /* definition list */
-       dl {
-               position: relative;
-               
-               .clearfix();
+       .clearfix();
+       
+       > dd:not(:first-of-type), > dt:not(:first-of-type) {
+               margin-top: @wcfGapSmall;
+       }
+       
+       > dt {
+               color: @wcfLabelColor;
+               float: left;
+               text-align: right;
+               width: 230px;
                
-               > dd:not(:first-of-type), > dt:not(:first-of-type) {
-                       margin-top: @wcfGapSmall;
+               > label {
+                       display: block;
                }
                
-               > dt {
-                       color: @wcfLabelColor;
-                       float: left;
-                       text-align: right;
-                       width: 230px;
+               /* Reversed (flips the label aside the checkbox or radio button) - 
+                       use only when automatically generating checkboxes or radio-buttons! */
+               &.reversed {
+                       left: 270px;
+                       margin-top: 2px;
+                       position: absolute;
+                       text-align: left;
+                       width: auto;
                        
-                       > label {
-                               display: block;
-                       }
-                       
-                       /* Reversed (flips the label aside the checkbox or radio button) - 
-                               use only when automatically generating checkboxes or radio-buttons! */
-                       &.reversed {
-                               left: 270px;
-                               margin-top: 2px;
-                               position: absolute;
-                               text-align: left;
-                               width: auto;
-                               
-                               ~ dd > input[type='checkbox'], ~ dd > input[type='radio'] {
-                                       margin-left: 0;
-                               }
+                       ~ dd > input[type='checkbox'], ~ dd > input[type='radio'] {
+                               margin-left: 0;
                        }
                }
+       }
+       
+       > dd {
+               margin-left: 250px;
                
-               > dd {
-                       margin-left: 250px;
-                       
-                       > small {
-                               color: @wcfDimmedColor;
-                               display: block;
-                               margin-top: 2px;
-                       }
-                       
-                       > label {
-                               color: @wcfLabelColor;
-                               display: block;
-                               
-                               > input[type='checkbox'], > input[type='radio'] {
-                                       margin: 2px 2px 2px 0;
-                               }
-                       }
+               > small {
+                       color: @wcfDimmedColor;
+                       display: block;
+                       margin-top: 2px;
+               }
+               
+               > label {
+                       color: @wcfLabelColor;
+                       display: block;
                        
                        > input[type='checkbox'], > input[type='radio'] {
-                               ~ small {
-                                       margin-left: 21px;
-                               }
-                       }
-                       
-                       &:not(.floated) {
-                               > label ~ small {
-                                       margin-left: 21px;
-                               }
+                               margin: 2px 2px 2px 0;
                        }
-                       
-                       &.floated {
-                               > label {
-                                       display: inline-block;
-                                       margin-right: @wcfGapSmall;
-                               }
-                       }
-                       
-                       > input, textarea, select {
-                               + label {
-                                       margin-top: 2px;
-                               }
+               }
+               
+               > input[type='checkbox'], > input[type='radio'] {
+                       ~ small {
+                               margin-left: 21px;
                        }
                }
                
-               /* wide */
-               &.wide {
-                       > dt {
-                               display: none;
+               &:not(.floated) {
+                       > label ~ small {
+                               margin-left: 21px;
                        }
-                       
-                       > dd {
-                               margin-left: 0;
+               }
+               
+               &.floated {
+                       > label {
+                               display: inline-block;
+                               margin-right: @wcfGapSmall;
                        }
                }
                
-               /* disabled state */
-               &.disabled {
-                       > dt, > dd > label {
-                               color: @wcfDimmedColor;
+               > input, textarea, select {
+                       + label {
+                               margin-top: 2px;
                        }
                }
        }
+       
+       /* wide */
+       &.wide {
+               > dt {
+                       display: none;
+               }
+               
+               > dd {
+                       margin-left: 0;
+               }
+       }
+       
+       /* disabled state */
+       &.disabled {
+               > dt, > dd > label {
+                       color: @wcfDimmedColor;
+               }
+       }
 }
 
 /* sidebar */
 .sidebar {
-       fieldset {
-               > dl {
-                       > dt {
-                               text-align: left;
-                               float: none;
-                               width: auto;
-                       }
-                       
-                       > dd {
-                               margin-top: 2px;
-                               margin-left: 0;
-                               margin-bottom: @wcfGapMedium;
-                       }
+       dl:not(.plain) {
+               > dt {
+                       text-align: left;
+                       float: none;
+                       width: auto;
+               }
+               
+               > dd {
+                       margin-top: 2px;
+                       margin-left: 0;
+                       margin-bottom: @wcfGapMedium;
                }
        }
 }

diff --git a/wcfsetup/install/files/style/layout.less b/wcfsetup/install/files/style/layout.less
index aaa4ef0294958f96c3b2307bf1eb0c06f1fdf78e..159bddc69d13b0cde9399f443e735f5d3f678472 100644 (file)
--- a/wcfsetup/install/files/style/layout.less
+++ b/wcfsetup/install/files/style/layout.less
@@ -364,7 +364,7 @@
                        color: @wcfDimmedColor;
                        font-weight: normal;
                        text-shadow: none;
-                       font-size: 70%;
+                       font-size: 75%;
                }
        }
        
@@ -434,31 +434,34 @@
                        font-size: @wcfSmallFontSize;
                        list-style: none;
                        max-width: 30%;
+                       padding-right: 10px;
                        position: relative;
                        
-                       .transition(max-width, .2s);
-                       
-                       &:hover {
-                               max-width: 100%;
+                       &:first-child > a {
+                               background-image: url('../icon/home.svg');
+                               background-position: 1px center;
+                               background-repeat: no-repeat;
+                               background-size: 16px;
+                               padding-left: 21px;
                        }
                        
                        > a {
                                color: @wcfColor;
-                               display: inline-block;
+                               display: block;
                                overflow: hidden;
                                padding: 5px 1px 5px 5px;
                                text-decoration: none;
+                               text-overflow: ellipsis;
                                white-space: nowrap;
                                
                                .textShadow(@wcfContentBackgroundColor);
                        }
                        
-                       &:first-child > a {
-                               background-image: url('../icon/home.svg');
-                               background-position: 1px center;
-                               background-repeat: no-repeat;
-                               background-size: 16px;
-                               padding-left: 21px;
+                       > .pointer {
+                               padding: 5px 0;
+                               position: absolute;
+                               top: 0;
+                               right: 0;
                        }
                }
        }
@@ -910,6 +913,8 @@ ul.dataList {
                        padding: 0;
                        text-align: center;
                        
+                       .borderRadius(3px);
+                       
                        &:not(.active):not(.disabled) {
                                cursor: pointer;
                        }
@@ -1006,6 +1011,8 @@ ul.dataList {
                        
                        > .badge {
                                float: right;
+                               font-size: 70%;
+                               top: 3px;
                        }
                        
                        > a {