Roundcube Webmail Skin "Elastic"
================================
This skin package contains a theme for the Roundcube Webmail
software. It can be used, modified and redistributed according to
the terms described in the LICENSE section.
For information about building or modifying Roundcube skins please visit
https://github.com/roundcube/roundcubemail/wiki/Skins
LICENSE
-------
The contents of this folder are subject to the Creative Commons
Attribution-ShareAlike License. It is allowed to copy, distribute,
transmit and to adapt the work by keeping credits to the original
authors in the README.md file.
See http://creativecommons.org/licenses/by-sa/3.0/ for details.
This folder also contains code licensed separately:
- Bootstrap Framework 4 from https://github.com/twbs/bootstrap
- FontAwesome 5 fonts from https://fontawesome.com/
- Roboto font from https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=cyrillic,latin-ext,cyrillic-ext,latin,greek,greek-ext
INSTALLATION
------------
All styles are written using LESS syntax. Thus it needs to be compiled
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.
Here is how you can install those on Debian:
```
curl -sL https://deb.nodesource.com/setup_16.x | sudo bash -
apt-get install -y nodejs
npm install -g less
npm install -g less-plugin-clean-css
```
Then, go to the `styles` folder, and when you're done editing your files, do the following, as needed:
```
$ 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
```
(`--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.
Run `bin/updatecss.sh --dir skins/elastic` before packaging the skin
or after installing it on the destination system.
FOR DEVELOPERS
--------------
- Supported browsers: IE11+, Edge, Last 2 versions for Chrome/Firefox/Safari,
Android Browser 5+, iOS Safari 9+.
- Skin color palette changes and other css modifications can be done
via _styles.less and _variables.less files. Where you can overwrite all
variables and add custom styles.
- Minimum supported screen width is 240px (note that even if the device screen
resolution is e.g.320x372 changing the text size in device settings will reduce
the resolution)
- Every page (which is not a frame) has following required structure:
```
```
where `#layout-sidebar` and `#layout-list` are optional. Which element of the `#layout` will be displayed
as a main view on mobile devices can be defined by adding `selected` class to it.
- The `` element will receive special classes that will be updated on resize
or orientation change:
- `touch`: A touch device, screen width <= 1024px,
- `layout-large`: Screen width > 1200px,
- `layout-normal`: Screen width <= 1200px and >= 768px,
- `layout-small`: Screen width < 768px and > 480px,
- `layout-phone`: Screen width <= 480px.
Frames will have the same classes applied as their parent windows.
- Every button, that is not