From 348f38de8cda7f577babf3ba0f9176f00042bd49 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Thu, 29 Jan 2015 11:54:18 +0100 Subject: [PATCH] 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. --- wcfsetup/install/files/style/redactor.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/wcfsetup/install/files/style/redactor.less b/wcfsetup/install/files/style/redactor.less index 0d9138e8db..bdc6629a97 100644 --- 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, -- 2.20.1