1Roundcube Webmail Skin "Elastic"
2================================
3
4This skin package contains a theme for the Roundcube Webmail
5software. It can be used, modified and redistributed according to
6the terms described in the LICENSE section.
7
8For information about building or modifying Roundcube skins please visit
9https://github.com/roundcube/roundcubemail/wiki/Skins
10
11
12LICENSE
13-------
14
15The contents of this folder are subject to the Creative Commons
16Attribution-ShareAlike License. It is allowed to copy, distribute,
17transmit and to adapt the work by keeping credits to the original
18authors in the README.md file.
19See http://creativecommons.org/licenses/by-sa/3.0/ for details.
20
21This folder also contains code licensed separately:
22- Bootstrap Framework 4 from https://github.com/twbs/bootstrap
23- FontAwesome 5 fonts from https://fontawesome.com/
24- Roboto font from https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=cyrillic,latin-ext,cyrillic-ext,latin,greek,greek-ext
25
26
27INSTALLATION
28------------
29
30All styles are written using LESS syntax. Thus it needs to be compiled
31using the `lessc` (>= 2.5.2) command line tool. This comes with the `nodejs-less`
32RPM package or using `npm install less` which depend on nodejs.
33```
34    $ lessc --clean-css="--s1 --advanced" styles/styles.less > styles/styles.min.css
35    $ lessc --clean-css="--s1 --advanced" styles/print.less > styles/print.min.css
36    $ lessc --clean-css="--s1 --advanced" styles/embed.less > styles/embed.min.css
37```
38(`--clean-css="--s1 --advanced"` minifies the css, requires the clean-css Less plugin.
39The plugin can be installed using `npm install less-plugin-clean-css`)
40
41References to image files from the included CSS files can be appended
42with cache-buster marks to avoid browser caching issues after updating.
43
44Run `bin/updatecss.sh --dir skins/elastic` before packaging the skin
45or after installing it on the destination system.
46
47
48FOR DEVELOPERS
49--------------
50
51- Supported browsers: IE11+, Edge, Last 2 versions for Chrome/Firefox/Safari,
52  Android Browser 5+, iOS Safari 9+.
53
54- Skin color palette changes and other css modifications can be done
55  via _styles.less and _variables.less files. Where you can overwrite all
56  variables and add custom styles.
57
58- Minimum supported screen width is 240px (note that even if the device screen
59  resolution is e.g.320x372 changing the text size in device settings will reduce
60  the resolution)
61
62- Every page (which is not a frame) has following required structure:
63```
64    <body>
65        <div id="layout">
66            <div id="layout-menu"></div>
67            <div id="layout-sidebar"></div>
68            <div id="layout-list"></div>
69            <div id="layout-content"></div>
70        </div>
71    </body>
72```
73  where `#layout-sidebar` and `#layout-list` are optional. Which element of the `#layout` will be displayed
74  as a main view on mobile devices can be defined by adding `selected` class to it.
75
76- The `<html>` element will receive special classes that will be updated on resize
77  or orientation change:
78    - `touch`: A touch device, screen width <= 1024px,
79    - `layout-large`: Screen width > 1200px,
80    - `layout-normal`: Screen width <= 1200px and >= 768px,
81    - `layout-small`: Screen width < 768px and > 480px,
82    - `layout-phone`: Screen width <= 480px.
83
84  Frames will have the same classes applied as their parent windows.
85
86- Every button, that is not <button> nor <input> should have inner <span class="inner"> element
87  for the button label.
88
89- Every iframe need to be wrapped by an element with `iframe-wrapper` class. It is
90  required to have proper scrolling on mobile devices.
91
92- Special attributes:
93    - `data-hidden`: Makes a menu entry/button hidden on specified screen sizes.
94      Can be used for example for functionality not implemented or that has no sense
95      on phones or touch devices. Contains a comma-separated list following values:
96      `large` (width > 1200px), `big` (width > 768px), `small` (width =< 768px),
97      `phone` (width =< 480px), `lbs` (width > 480px).
98
99    - `data-content-button`: Makes the action button with this attribute to be copied
100      to the content frame header on small/phone screens.
101
102- Special URLs:
103    In phone mode we display Prev/Next navigation buttons below the content preview
104    frame. We do this e.g. for mail preview or contact preview. Plugins should use
105    _action=add* or _action=create* or _nav=hide in the frame URL if the navigation
106    should be hidden, which is the case when you create a content object.
107
108- Dark mode:
109    In dark mode html element will have `dark-mode` class assigned.
110    It is possible to disable dark mode using less variable `@dark-mode-enabled`.
111    Option `dark_mode_support` in meta.json controls addition of the mode switch in the menu.
112
113
114KNOWN ISSUES
115------------
116
1171. There are known issues with running less in Roundcube devel_mode:
118    - Dialogs executed on page load are displayed out of screen.
119    - CodeMirror editor (in managesieve raw script editing mode) is broken.
120