Elastic: Logo related fixes/improvements

- Use only one image for logo and watermark
- Fix watermark.html in devel_mode (no generated styles.css file)

skins/elastic/images/logo.svg

@@ -1,7 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 73 73" style="enable-background:new 0 0 73 73;" xml:space="preserve">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 73 73">
 <style type="text/css">
 	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#404F54;}
 	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#37BEFF;}
@@ -10,10 +8,8 @@
 </style>
 <polygon class="st0" points="36.6,23.3 0.6,37 0.6,59.2 36.6,45.4 "/>
 <polygon class="st1" points="72.5,59.2 36.6,45.4 36.6,23.3 72.5,37 "/>
-<path class="st2" d="M36.6,1.1c13.7,0,24.9,11.1,24.9,24.9c0,13.7-11.1,24.9-24.9,24.9S11.7,39.7,11.7,26
-	C11.7,12.2,22.9,1.1,36.6,1.1"/>
-<path class="st3" d="M36.6,1.1c13.7,0,24.9,11.1,24.9,24.9S50.3,50.8,36.6,50.8c-7.9-5.3-11.1-16-11.1-24.8
-	C25.4,17.1,28.7,6.4,36.6,1.1"/>
+<path class="st2" d="M36.6,1.1c13.7,0,24.9,11.1,24.9,24.9c0,13.7-11.1,24.9-24.9,24.9S11.7,39.7,11.7,26 C11.7,12.2,22.9,1.1,36.6,1.1"/>
+<path class="st3" d="M36.6,1.1c13.7,0,24.9,11.1,24.9,24.9S50.3,50.8,36.6,50.8c-7.9-5.3-11.1-16-11.1-24.8 C25.4,17.1,28.7,6.4,36.6,1.1"/>
 <polygon class="st1" points="72.5,37 36.6,50.8 36.6,73 72.5,59.2 "/>
 <polygon class="st0" points="0.6,37 36.6,50.8 36.6,73 0.6,59.2 "/>
 </svg>

skins/elastic/images/roundcube-watermark.svg

@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 155 155" style="enable-background:new 0 0 155 155;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#C6CDCF;}
-	.st1{fill:#E3E7E8;}
-	.st2{fill:#F3F5F5;}
-	.st3{fill:#FAFAFB;}
-</style>
-<polygon class="st0" points="77.7,48.9 1.4,77.9 1.4,124.9 77.7,95.7 "/>
-<polygon class="st1" points="153.7,124.9 77.7,95.7 77.7,48.9 153.7,77.9 "/>
-<path class="st2" d="M77.7,1.9c29,0,52.7,23.5,52.7,52.7c0,29-23.5,52.7-52.7,52.7S24.9,83.7,24.9,54.7C24.9,25.4,48.6,1.9,77.7,1.9
-	"/>
-<path class="st3" d="M77.7,1.9c29,0,52.7,23.5,52.7,52.7s-23.7,52.5-52.7,52.5C60.9,95.9,54.2,73.3,54.2,54.7
-	C53.9,35.8,60.9,13.2,77.7,1.9"/>
-<polygon class="st1" points="153.7,77.9 77.7,107.2 77.7,154.2 153.7,124.9 "/>
-<polygon class="st0" points="1.4,77.9 77.7,107.2 77.7,154.2 1.4,124.9 "/>
-</svg>

skins/elastic/styles/variables.less

@@ -49,6 +49,3 @@
 // Additional icons
 @icon-resize-corner:    data-uri("image/svg+xml;charset=utf-8", "../images/corner-handle.svg"); // size: 512x512
 @icon-file-drop:        data-uri("image/svg+xml;charset=utf-8", "../images/download.svg");
-
-@logo-image: 'images/roundcube-logo-elastic.svg';
-@watermark-image: 'images/roundcube-watermark.svg';

skins/elastic/styles/widgets/common.less

@@ -189,14 +189,6 @@ fieldset.image-attachment {
     overflow-y: auto;
 }
 
-#watermark > .content,
-#layout > .content .watermark {
-    background: url('../@{watermark-image}') center no-repeat;
-    background-size: 30% auto;
-    width: 100%;
-    height: 100%;
-}
-
 .noselect {
     user-select: none;
     -moz-user-select: none;

skins/elastic/styles/widgets/taskmenu.less

@@ -176,6 +176,7 @@
 
         img {
             max-height: @layout-header-height;
+            padding: .25rem;
         }
 
         @media screen and (min-width: (@screen-width-xs + 1px)) {
@@ -185,23 +186,12 @@
             a {
                 display: none !important;
             }
-
-            img {
-                max-width: @layout-menu-width / 3;
-            }
-        }
-
-        @media screen and (min-width: (@screen-width-medium + 1px)) {
-            img {
-                max-width: @layout-menu-width * 0.65;
-            }
         }
 
         html.layout-phone & {
             padding: 0 .5rem;
 
             img {
-                max-height: @layout-touch-header-height * 0.65;
                 max-width: @layout-mobile-menu-width - 50px;
             }
 

skins/elastic/templates/includes/menu.html

@@ -1,7 +1,7 @@
 <div class="menu">
 	<h2 id="aria-label-tasknav" class="voice"><roundcube:label name="arialabeltasknav" /></h2>
 	<div class="popover-header">
-		<roundcube:object name="logo" src="/images/roundcube-logo-elastic.svg" data-src-small="0" id="logo" alt="Logo" />
+		<roundcube:object name="logo" src="/images/logo.svg" data-src-small="0" id="logo" alt="Logo" />
 		<a class="button icon cancel"><span class="inner"><roundcube:label name="close" /></span></a>
 	</div>
 	<div id="taskmenu" role="navigation" aria-labelledby="aria-label-tasknav">

skins/elastic/templates/login.html

@@ -3,7 +3,7 @@
 <h1 class="voice"><roundcube:object name="productname" /> <roundcube:label name="login" /></h1>
 
 <div class="content selected no-navbar" role="main">
-	<roundcube:object name="logo" src="/images/roundcube-logo-elastic.svg" data-src-small="0" id="logo" alt="Logo" />
+	<roundcube:object name="logo" src="/images/logo.svg" data-src-small="0" id="logo" alt="Logo" />
 	<roundcube:form id="login-form" name="login-form" method="post" class="propform">
 	<roundcube:object name="loginform" form="login-form" size="40" submit=true />
 		<div id="login-footer" role="contentinfo">

skins/elastic/templates/messageerror.html

@@ -10,7 +10,6 @@
 			<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
 		</div>
 	<roundcube:endif />
-	<div class="watermark"></div>
 </div>
 
 <roundcube:include file="includes/footer.html" />

skins/elastic/watermark.html

@@ -1,15 +1,12 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <meta charset="utf-8">
-  <link href="./styles/styles.css"
-        rel="stylesheet">
-  <title></title>
-  <style type="text/css">
-    html, body { height: 100%; overflow: hidden; }
-  </style>
+<title></title>
+<style type="text/css">
+html, body { height: 100%; overflow: hidden; }
+body { background: url(images/logo.svg) center no-repeat #fff; background-size: 30%; }
+body:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 255, .85); }
+</style>
 </head>
-<body id="watermark">
-  <div class="content"></div>
-</body>
+<body></body>
 </html>