Fixed and improved borders in editor toolbar

Using linear gradient with pixel-based color stops is awful since the browser will draw a gradient instead of a sharp border. To avoid this, one can simply set the background-size in pixels and then use percentage values, resulting in sharp borders where wanted and a smooth gradient on top.

diff --git a/wcfsetup/install/files/style/redactor.less b/wcfsetup/install/files/style/redactor.less
index 0d9138e8db73ca2a9eac09a8d5a2d4cb7d7acba4..bdc6629a9717359f5c2fa7f49f347a04c2f234ea 100644 (file)
--- a/wcfsetup/install/files/style/redactor.less
+++ b/wcfsetup/install/files/style/redactor.less
@@ -227,12 +227,12 @@
 }
 
 .redactor-toolbar {
-       background: repeating-linear-gradient(0deg, @wcfContainerBackgroundColor, @wcfContainerAccentBackgroundColor 29px, @wcfContainerBorderColor 30px, @wcfContainerBorderColor 30px);
-       border-bottom: 1px solid @wcfContainerBorderColor;
-       margin-top: -1px;
+       background: repeating-linear-gradient(0deg, @wcfContainerBorderColor 0px, @wcfContainerBorderColor 3%, @wcfContainerBackgroundColor 3%, @wcfContainerAccentBackgroundColor 100%);
+       background-size: 100% 31px;
        
        > li {
                display: inline-block;
+               margin-bottom: 1px;
                vertical-align: middle;
                
                &:last-of-type,