diff --git a/README.md b/README.md index 94ebd0e..8c663cd 100644 --- a/README.md +++ b/README.md @@ -1,51 +1,119 @@ -# Elastic2022 +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 +------- -Elastic2022 is a Roundcube skin based on Elastic +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 -- Design changed to fit android dark theme. -- Better user interface -- Modern menus -- Plugin support -- New Dark / Light mode +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. +``` + $ 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. -## New features -### Pull down to refresh email - +FOR DEVELOPERS +-------------- -### Email autoresize - +- Supported browsers: IE11+, Edge, Last 2 versions for Chrome/Firefox/Safari, + Android Browser 5+, iOS Safari 9+. -### Contact thumbail -![screenshot](img/preview-icon.png) +- 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. -## Screenshot +- 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) -![screenshot](img/2022-2.png) -![screenshot](img/phone2.png) +- 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. -![screenshot](img/phone2.jpg) +- 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 + + +
+ +
+
+ + +
+ +
+
+ + +   + + +
+
+ + +   + + +
+
+ + + + + + + + + +
+
+ + +
+ +
+ +
+ +
+ +
+

+ + +
+ +
+

+ +
+ + + + + +
+

Event Title

+

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + ⇢ + +
+
+ + ⇢ + +
+
+ + ⇢ + +
+
+ + ⇢ + +
+
+ + ⇢ + +
+
+ + ⇢ + +
+
+ + ⇢ + +
+
+ + ⇢ + +
+
+ +
+
+
+
+ + + + + + diff --git a/plugins/calendar/templates/dialog.html b/plugins/calendar/templates/dialog.html new file mode 100644 index 0000000..28dcf79 --- /dev/null +++ b/plugins/calendar/templates/dialog.html @@ -0,0 +1,7 @@ + + +

+ + + + diff --git a/plugins/calendar/templates/eventedit.html b/plugins/calendar/templates/eventedit.html new file mode 100644 index 0000000..6abec04 --- /dev/null +++ b/plugins/calendar/templates/eventedit.html @@ -0,0 +1,155 @@ +
formcontent" aria-hidden="true" data-notabs="true"> +
+ +
+ +
+ + +
+
+ + + + + +
+
+ + +
+
+ +
+   + + +
+
+
+ +
+   + +
+
+
+ +
+
+ + + + + +
+
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+ +
+ +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +

+ + + +
+ +
+ +

+ + + +
+ +
+ +
+

+
+ + +
+
+ +
+
+ +
+
+
diff --git a/plugins/calendar/templates/freebusylegend.html b/plugins/calendar/templates/freebusylegend.html new file mode 100644 index 0000000..356e939 --- /dev/null +++ b/plugins/calendar/templates/freebusylegend.html @@ -0,0 +1,9 @@ +
+ + + + + +
diff --git a/plugins/calendar/templates/itipattend.html b/plugins/calendar/templates/itipattend.html new file mode 100644 index 0000000..0dd4dfb --- /dev/null +++ b/plugins/calendar/templates/itipattend.html @@ -0,0 +1,11 @@ + + + +