Elastic: make custom less files optional (#7497)

* elastic: make custom less files optional
* add installation note for Less clean-css plugin
* Travis: try to install Less direct from npm
* fix typo and remove redundant files

.ci/install.sh

@@ -20,3 +20,6 @@ composer remove endroid/qr-code --no-update
 
 # Install PHP dependencies
 composer install --prefer-dist
+
+# Install Less for Elastic CSS compilation
+npm install --force -g less

.gitignore

@@ -21,3 +21,7 @@ program/js/jquery.min.js
 program/js/jstz.min.js
 program/js/publickey.js
 program/js/tinymce/
+
+# skin customization files
+skins/elastic/styles/_styles.less
+skins/elastic/styles/_variables.less

.travis.yml

@@ -18,9 +18,6 @@ matrix:
       env: BROWSER_TESTS=1
       addons:
         chrome: stable
-        apt:
-          packages:
-            - node-less
     - php: 7.4
 
 cache:

skins/elastic/README.md

@@ -28,14 +28,15 @@ INSTALLATION
 ------------
 
 All styles are written using LESS syntax. Thus it needs to be compiled
-using the `lessc` (>= 1.5.0) command line tool. This comes with the `nodejs-less`
-RPM package which depends on nodejs.
+using the `lessc` (>= 2.5.2) command line tool. This comes with the `nodejs-less`
+RPM package or using `npm install less` which depend on nodejs.
 ```
-    $ lessc -x styles/styles.less > styles/styles.css
-    $ lessc -x styles/print.less > styles/print.css
-    $ lessc -x styles/embed.less > styles/embed.css
+    $ lessc --clean-css="--s1 --advanced" styles/styles.less > styles/styles.min.css
+    $ lessc --clean-css="--s1 --advanced" styles/print.less > styles/print.min.css
+    $ lessc --clean-css="--s1 --advanced" styles/embed.less > styles/embed.min.css
 ```
-(the -x option minifies the CSS code)
+(`--clean-css="--s1 --advanced"` minifies the css, requires the clean-css Less plugin.
+The plugin can be installed using `npm install less-plugin-clean-css`)
 
 References to image files from the included CSS files can be appended
 with cache-buster marks to avoid browser caching issues after updating.

skins/elastic/styles/_styles.less

@@ -1 +0,0 @@
-/* Here you can put your custom styles that will be appended to the output css file */

skins/elastic/styles/_variables.less

@@ -1 +0,0 @@
-/* Here you can re-define any of variables from variables.less, colors.less and fontawesome.less */

skins/elastic/styles/styles.less

@@ -440,4 +440,4 @@ body.task-error-login #layout {
     @import "dark";
 }
 
-@import "_styles";
+@import (optional) "_styles";

skins/elastic/styles/variables.less

@@ -57,4 +57,4 @@
 @icon-resize-corner:    data-uri("image/svg+xml;charset=utf-8", "../images/corner-handle.svg"); // size: 16x16
 @icon-file-drop:        data-uri("image/svg+xml;charset=utf-8", "../images/download.svg");
 
-@import (reference) "_variables";
+@import (reference, optional) "_variables";