No OneTemporary
Actions

Size

84 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/skins/elastic/README.md b/skins/elastic/README.md
	index 99fa938bb..33fcf50d2 100644
	--- a/skins/elastic/README.md
	+++ b/skins/elastic/README.md
	@@ -1,98 +1,105 @@
	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:
	+INSTALLATION
	------------
	+
	All styles are written using LESS syntax. Thus it needs to be compiled
	using the `lessc` command line tool. This comes with the `nodejs-less`
	RPM package which depends 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
	```
	(the -x option minifies the CSS code)

	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.


	-RULES:
	-------
	+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:
	```
	<body>
	<div id="layout">
	<div class="menu"></div>
	<div class="sidebar"></div>
	<div class="list"></div>
	<div class="content"></div>
	</div>
	</body>
	```
	where `sidebar` and `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 `<html>` 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 <button> nor <input> should have inner <span class="inner"> element
	for the button label.

	- Every iframe need to be wrapped by an element with `iframe-wrapper` class. It is
	required to have proper scrolling on mobile devices.

	- Special attributes:
	- `data-hidden`: Makes a menu entry/button hidden on specified screen sizes.
	Can be used for example for functionality not implemented or that has no sense
	on phones or touch devices. Contains a comma-separated list following values:
	`large` (width > 1200px), `big` (width > 768px), `small` (width =< 768px),
	`phone` (width =< 480px).

	- `data-content-button`: Makes the action button with this attribute to be copied
	to the content frame header on small/phone screens.

	- Special URLs:
	In phone mode we display Prev/Next navigation buttons below the content preview
	frame. We do this e.g. for mail preview or contact preview. Plugins should use
	_action=add* or _action=create* or _nav=hide in the frame URL if the navigation
	should be hidden, which is the case when you create a content object.
	diff --git a/skins/elastic/images/logo.png b/skins/elastic/images/logo.png
	new file mode 100644
	index 000000000..627c2f614
	Binary files /dev/null and b/skins/elastic/images/logo.png differ
	diff --git a/skins/elastic/styles/colors.less b/skins/elastic/styles/colors.less
	index d42060492..4bac88c35 100644
	--- a/skins/elastic/styles/colors.less
	+++ b/skins/elastic/styles/colors.less
	@@ -1,199 +1,201 @@
	/**
	* Roundcube webmail styles for the Elastic skin
	*
	* Copyright (c) 2017-2018, The Roundcube Dev Team
	*
	* The contents 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.
	*/

	@color-main: #37beff;
	@color-main-dark: darken(@color-main, 35%);
	@color-black: #161b1d;
	-@color-font: @color-black;
	+@color-font: lighten(@color-black, 10%);
	@color-link: #00acff;
	@color-link-hover: darken(@color-link, 10%);
	@color-border: #ddd;
	@color-error: #ff5552;
	@color-success: #41b849;
	@color-warning: #ffd452;

	@color-link-secondary: lighten(@color-font, 60%);
	@color-black-shade-text: lighten(@color-black, 35%);
	@color-black-shade-border: lighten(@color-black, 75%);
	@color-black-shade-bg: lighten(@color-black, 85%);


	// Layout elements
	@color-layout-border: @color-black-shade-border;
	@color-layout-sidebar-background: #fff;
	@color-layout-list-background: #fff;
	@color-layout-content-background: #fff;
	@color-layout-header-background: #fff;
	+@color-layout-footer-background: #fff;


	// Task menu
	@color-taskmenu-background: #414e54;
	@color-taskmenu-button: #fff;
	@color-taskmenu-button-selected: @color-taskmenu-button;
	-@color-taskmenu-button-action: @color-taskmenu-button;
	+@color-taskmenu-button-action: @color-main;
	@color-taskmenu-button-special: @color-taskmenu-button;

	@color-taskmenu-button-selected-background: lighten(@color-taskmenu-background, 10%);
	-@color-taskmenu-button-action-background: @color-main;
	+@color-taskmenu-button-action-background: transparent;
	@color-taskmenu-button-special-background: @color-taskmenu-background;

	+@color-taskmenu-button-hover: #fff;
	@color-taskmenu-button-selected-hover: #fff;
	-@color-taskmenu-button-action-hover: #fff;
	+@color-taskmenu-button-action-hover: @color-main;
	@color-taskmenu-button-special-hover: lighten(@color-taskmenu-button-special, 10%);

	@color-taskmenu-button-background-hover: lighten(@color-taskmenu-background, 10%);
	-@color-taskmenu-button-action-background-hover: lighten(@color-taskmenu-button-action-background, 10%);
	+@color-taskmenu-button-action-background-hover: @color-taskmenu-button-background-hover;
	@color-taskmenu-button-special-background-hover:lighten(@color-taskmenu-button-special-background, 10%);
	@color-taskmenu-button-logout-hover: @color-error;


	// Toolbar
	@color-toolbar-button: @color-font;
	@color-toolbar-button-background-hover: tint(@color-main, 96%);

	@color-searchbar-icon-active: green;


	// Toolbar menu
	@color-toolbarmenu-hover: #fff;
	@color-toolbarmenu-hover-background: @color-main;


	// Listings
	@color-list: @color-font;
	@color-list-selected: inherit;
	-@color-list-selected-background: tint(@color-main, 94%);
	+@color-list-selected-background: tint(@color-main, 90%);
	@color-list-flagged: @color-error;
	@color-list-deleted: lighten(@color-black, 50%);
	@color-list-secondary: @color-black-shade-text;
	@color-list-droptarget-background: #ffffcc;
	@color-list-focus-indicator: lighten(@color-main, 20%);

	@color-list-border: @color-black-shade-bg;
	@color-list-badge: #fff;
	@color-list-badge-background: @color-main;
	@color-list-recent: blue;
	@color-list-recent-badge: #fff;
	@color-list-recent-badge-background: @color-list-recent;

	@color-list-pagenav: @color-black-shade-text;
	@color-list-icon: fadeout(@color-list-secondary, 25%);



	// Drag-n-drop layer
	@color-drag-layer: #fff;
	@color-drag-layer-background: @color-taskmenu-background;
	@color-drag-layer-shadow: @color-black-shade-bg;


	// Messages
	@color-message: @color-font;
	@color-message-border: rgba(0, 0, 0, 0.15);
	@color-message-background: fadeout(@color-main, 95%);
	@color-message-link: @color-main;
	@color-message-information: @color-main;
	@color-message-success: @color-success;
	@color-message-warning: @color-warning;
	@color-message-error: @color-error;
	@color-message-loading: #333;
	@color-message-shadow: @color-black-shade-bg;
	@color-message-error-background: fadeout(@color-message-error, 95%);
	@color-message-information-background: fadeout(@color-message-information, 95%);
	@color-message-success-background: fadeout(@color-message-success, 95%);
	@color-message-warning-background: fadeout(#ffff66, 75%);


	// Popovers (menus)
	@color-popover-header: @color-black-shade-text;
	@color-popover-header-background: transparent;
	@color-popover-shadow: @color-black-shade-bg;
	@color-popover-separator: @color-black-shade-text;
	@color-popover-separator-background: @color-black-shade-bg;
	@color-popover-mobile-header: #fff;
	@color-popover-mobile-header-background: @color-main-dark;


	// Dialogs
	@color-dialog-overlay-background: fade(@color-font, 50%);
	@color-dialog-header: @color-font;
	@color-dialog-header-border: @color-border;


	@color-spinner-circle: @color-black-shade-bg;
	@color-spinner-item: @color-black-shade-text;


	// Forms
	@color-input: @color-font;
	@color-input-border: rgba(22, 27, 29, 0.15);
	@color-input-border-focus: @color-main;
	@color-input-border-focus-shadow: fadeout(@color-main, 75);
	@color-input-border-invalid: @color-error;
	@color-input-border-invalid-shadow: fadeout(@color-error, 75);
	@color-input-addon-background: @color-black-shade-bg;
	@color-recipient-input-border: @color-input-border;
	@color-recipient-input-background: @color-black-shade-bg;
	@color-input-placeholder: #bbb;

	@color-checkbox: @color-main;
	@color-checkbox-checked: @color-main;
	@color-checkbox-focus: darken(@color-checkbox, 30%);
	@color-checkbox-checked-focus: darken(@color-checkbox-checked, 30%);

	@color-form-hint: @color-black-shade-text;

	@color-image-upload-background: @color-black-shade-bg;

	@color-btn-secondary: #fff;
	@color-btn-secondary-background: lighten(@color-black, 50%);
	@color-btn-primary: #fff;
	@color-btn-primary-background: @color-main;
	@color-btn-danger: #fff;
	@color-btn-danger-background: @color-error;

	@color-quota-background: @color-black-shade-border;
	@color-quota-text: @color-black-shade-text;
	@color-quota-value: @color-main;
	@color-quota-value-warning: @color-error;

	@color-blockquote-background: fadeout(@color-black-shade-bg, 50%);
	@color-blockquote-0: darken(@color-main, 30%);
	@color-blockquote-1: darken(@color-success, 25%);
	@color-blockquote-2: darken(@color-error, 20%);
	@color-blockquote-0-border: @color-blockquote-0;
	@color-blockquote-1-border: @color-blockquote-1;
	@color-blockquote-2-border: @color-blockquote-2;

	@color-mail-signature: @color-black-shade-text;
	@color-mail-headers: @color-black-shade-text;

	@color-spellcheck-link: @color-error;

	@color-table-border: @color-layout-border;
	@color-table-selected: @color-list-selected;
	@color-table-selected-background: @color-list-selected-background;


	// Datepicker
	@color-datepicker-border: @color-layout-border;
	@color-datepicker-font: @color-font;
	@color-datepicker-highlight: !default;
	@color-datepicker-highlight-background: lighten(@color-main, 30%);
	@color-datepicker-active: #fff;
	@color-datepicker-active-background: @color-main;


	// Image tools
	@color-image-tools: #fff;
	@color-image-tools-background: fadeout(@color-main, 60%);
	@color-image-tools-hover: fadeout(@color-main, 50%);

	diff --git a/skins/elastic/styles/layout.less b/skins/elastic/styles/layout.less
	index 2a89b90d1..1424e8697 100644
	--- a/skins/elastic/styles/layout.less
	+++ b/skins/elastic/styles/layout.less
	@@ -1,291 +1,292 @@
	/**
	* Roundcube webmail styles for the Elastic skin
	*
	* Copyright (c) 2017-2018, The Roundcube Dev Team
	*
	* The contents 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.
	*/

	/* Responsive design - Layout */

	/*
	- Large screen (width > 1200px)
	-----------------------------------------------------------------------------------------------------
	\| menu \| sidebar \| list \| content \|
	-----------------------------------------------------------------------------------------------------
	- Normal screen (1200px => width => 768px) - typical: 768x1024 (iPad Mini/Air)
	-------------------------------------------------------------------
	\|menu\| sidebar/list \| content \|
	-------------------------------------------------------------------
	- Small (480px < width < 768px)
	------------------------------------------
	\|menu\| sidebar/list/content \|
	------------------------------------------
	- Phone (width <= 480px) - typical: 320x480 (iPhone 5), 375x667 (iPhone 6-7), 360x564 (Galaxy S6)
	------------------------
	\| sidebar/list/content \|
	------------------------
	*/

	html {
	height: 100%;
	font-size: @page-font-size;
	}

	body {
	min-width: @page-min-width;
	height: 100%;
	color: @color-font;
	overflow: hidden;
	}

	body > #layout {
	overflow: hidden;
	display: flex;
	height: 100%;
	width: 100%;

	& > div {
	&.sidebar,
	&.list {
	display: flex;
	flex-direction: column;
	max-width: 30%;
	border-right: 1px solid @color-layout-border;

	& > .header {
	a.button {
	margin: 0;
	padding: 0 .5rem;
	}
	}
	}

	&.content {
	display: flex;
	flex: 6;
	flex-direction: column;
	min-width: 50%;
	background-color: @color-layout-content-background;

	& > .formcontent, // e.g. Help plugin
	& > .content {
	height: 100%;
	width: 100%;
	overflow: auto;
	flex: 1;
	}

	.iframe-wrapper {
	width: 100%;
	height: 100%;
	flex: 1;

	iframe {
	width: 100%;
	height: 100%;
	border: 0;
	}
	}
	}

	&.sidebar {
	display: flex;
	min-width: 220px;
	background-color: @color-layout-sidebar-background;
	flex: 2;
	}

	&.list {
	display: flex;
	flex: 3;
	min-width: 300px;
	background-color: @color-layout-list-background;
	}
	& > .scroller {
	flex: 1;
	position: relative; // for .listing-info positioning
	}

	& > .content.only > .scroller {
	overflow: auto;
	}

	& > .header,
	& > .footer {
	background-color: @color-layout-header-background;
	font-size: @layout-header-font-size;
	font-weight: bold;
	line-height: @layout-header-height;
	height: @layout-header-height;
	min-height: @layout-header-height;
	padding: 0 .25em;
	margin: 0;
	position: relative; // for absolute positioning of searchbar
	overflow: hidden;
	white-space: nowrap;
	display: flex;
	justify-content: center;
	}

	& > .header {
	border-bottom: 1px solid @color-layout-border;

	.header-title {
	.overflow-ellipsis;
	flex: 1;
	text-align: center;
	margin: 0 -20rem;
	}
	}

	& > .footer {
	border-top: 1px solid @color-layout-border;
	+ background-color: @color-layout-footer-background;

	&:empty {
	display: none;
	}
	}
	}
	}

	html.iframe {
	body {
	overflow: auto;

	#layout > .content {
	height: 100%;
	}
	}
	}


	@media screen and (max-width: @screen-width-large) {
	body > #layout > div.sidebar,
	body > #layout > div.list {
	min-width: 260px;
	flex: 3;
	}
	}

	@media screen and (max-width: @screen-width-medium) {
	}

	@media screen and (max-width: @screen-width-small) {
	body > #layout > div.sidebar,
	body > #layout > div.list {
	max-width: none;
	border: 0;
	}

	body > #layout > div > .header {
	a.button {
	// make the button active area smaller on touch devices
	margin: 0 .3rem !important;
	padding: 0 !important;

	&:before {
	font-size: 1.75rem;
	height: @layout-touch-header-height;
	margin: 0;
	}

	&.filter:before {
	font-size: 1.6rem; // this icon is too big in FA5
	}

	.inner {
	display: none;
	}
	}
	}

	body > #layout > div > .header {
	&.with-search:not(.no-toolbar) {
	.searchbar {
	right: @layout-touch-icon-width;
	}

	.searchfilterbar {
	right: (@layout-touch-icon-width * 2);
	}
	}
	}
	}

	@media screen and (max-width: @screen-width-xs) {
	}

	@media screen and (max-width: @screen-width-mini) {
	body > #layout > div.sidebar,
	body > #layout > div.list {
	min-width: @page-min-width;
	}
	}

	@media screen and (min-width: (@screen-width-xs + 1px)) {
	body > #layout > div > .header > a.menu-button {
	display: none;
	}

	body > #layout > .menu {
	// FIXME: we set background color here not in taskmenu.less, because
	// otherwise background is partially white on Android/iOS
	background-color: @color-taskmenu-background;
	}
	}

	@media screen and (min-width: (@screen-width-small + 1px)) {
	.floating-action-buttons,
	body > #layout > .content > .header > .header-title,
	body > #layout > div > .header > .buttons,
	body > #layout > div > .header > a.toolbar-menu-button {
	display: none;
	}

	body > #layout > .menu {
	width: @layout-menu-width/2;
	}
	}

	@media screen and (min-width: (@screen-width-medium + 1px)) {
	body > #layout > .menu {
	width: @layout-menu-width;
	}
	}

	@media screen and (min-width: (@screen-width-large + 1px)) {
	body > #layout > div > .header > a.back-list-button,
	body > #layout > div > .header > a.back-sidebar-button {
	display: none;
	}
	}

	html.layout-phone {
	.hidden-phone {
	display: none !important;
	}
	}

	html.layout-phone,
	html.layout-small {
	.hidden-small {
	display: none !important;
	}
	}

	html.layout-large,
	html.layout-normal {
	.hidden-big {
	display: none !important;
	}
	}

	html.layout-large {
	.hidden-large {
	display: none !important;
	}
	}
	diff --git a/skins/elastic/styles/styles.less b/skins/elastic/styles/styles.less
	index 89f9ece18..778401c0d 100644
	--- a/skins/elastic/styles/styles.less
	+++ b/skins/elastic/styles/styles.less
	@@ -1,219 +1,217 @@
	/**
	* Roundcube webmail styles for the Elastic skin
	*
	* Copyright (c) 2017-2018, The Roundcube Dev Team
	*
	* The contents 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.
	*/

	@import (reference) "variables";
	@import (reference) "mixins";

	/* Fonts */

	@font-face {
	font-family: 'Icons';
	font-style: normal;
	font-weight: 900;
	src: url("../fonts/fa-solid-900.woff2") format('woff2'),
	url("../fonts/fa-solid-900.woff") format('woff');
	}

	@font-face {
	font-family: 'Icons';
	font-style: normal;
	font-weight: 400;
	src: url("../fonts/fa-regular-400.woff2") format('woff2'),
	url("../fonts/fa-regular-400.woff") format('woff');
	}

	@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto'), local('Roboto-Regular'),
	url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-regular.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
	url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-regular.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
	}

	@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 400;
	src: local('Roboto Italic'), local('Roboto-Italic'),
	url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-italic.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
	url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-italic.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
	}

	@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	src: local('Roboto Bold'), local('Roboto-Bold'),
	url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-700.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
	url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-700.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
	}

	@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 700;
	src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
	url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-700italic.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
	url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-700italic.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
	}

	/* E.g. for animated 'loading' icon */

	@-webkit-keyframes fa-spin {
	0% {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	}
	100% {
	-webkit-transform: rotate(359deg);
	transform: rotate(359deg);
	}
	}
	@keyframes fa-spin {
	0% {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	}
	100% {
	-webkit-transform: rotate(359deg);
	transform: rotate(359deg);
	}
	}


	/* Reset some Bootstrap style */

	body, button, input, optgroup, select, textarea, .popover {
	.font-family;
	}

	button, input, select, textarea {
	line-height: initial;
	}

	input {
	vertical-align: middle;
	}

	a {
	color: @color-link;

	&:hover {
	color: @color-link-hover;
	}

	&.disabled:not(.btn) {
	opacity: .5;
	}
	}

	@import "layout";
	-
	-/* Widgets */
	-
	@import "widgets/common";
	@import "widgets/buttons";
	@import "widgets/jqueryui";
	@import "widgets/dialogs";
	@import "widgets/taskmenu";
	@import "widgets/messages";
	@import "widgets/toolbar";
	@import "widgets/searchbar";
	@import "widgets/lists";
	@import "widgets/forms";
	@import "widgets/mail";


	-
	/* Login form */

	.task-login #layout > .content {
	text-align: center;
	width: 100%;
	background: url(../images/watermark.jpg) center -20px no-repeat;
	background-size: auto 40%;
	}

	#login-form {
	margin: 0 auto;
	top: 35vh;
	width: 95%;
	max-width: 280px;
	position: relative;

	// Fixes input width and position in IE11
	.row {
	max-width: 280px;
	margin-right: 0;
	margin-left: 0;
	}
	}

	#login-footer {
	flex: 1;
	color: @color-black-shade-text;
	}

	#login-addon {
	position: absolute;
	bottom: 0;
	max-height: 30%;
	margin: 1rem !important;
	width: auto !important;
	overflow: auto;

	@media screen and (min-width: (@screen-width-small + 1px)) {
	max-width: @screen-width-small;
	margin: auto !important;
	bottom: 1rem;
	left: 0;
	right: 0;
	}
	}


	/* Addressbook UI */

	#contactpic {
	min-width: @layout-contact-icon-width;
	min-height: @layout-contact-icon-width;
	border-radius: .5rem;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;

	img {
	max-width: @layout-contact-icon-width;
	max-height: @layout-contact-icon-height;
	}
	}

	#contacthead {
	.names {
	margin-bottom: .5rem;

	span.namefield {
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1.2;
	}
	}

	&.readonly {
	.source.row {
	color: @color-form-hint;
	font-size: 90%;
	margin-bottom: .25rem;
	}
	}
	}
	+
	+@import "_styles";
	diff --git a/skins/elastic/styles/variables.less b/skins/elastic/styles/variables.less
	index 2cd9d2698..800c13e4e 100644
	--- a/skins/elastic/styles/variables.less
	+++ b/skins/elastic/styles/variables.less
	@@ -1,47 +1,48 @@
	/**
	* Roundcube webmail styles for the Elastic skin
	*
	* Copyright (c) 2017-2018, The Roundcube Dev Team
	*
	* The contents 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.
	*/

	@import (reference) "fontawesome";
	@import (reference) "colors";
	+@import (reference) "_variables";

	@screen-width-large: 1200px;
	@screen-width-medium: 1024px;
	@screen-width-small: 768px;
	@screen-width-xs: 480px;
	@screen-width-mini: 320px;
	@screen-width-touch: @screen-width-medium;
	@screen-width-bs-phone: 576px;

	@page-font-size: 14px;
	@page-min-width: 240px;

	@layout-menu-width: 5rem;
	@layout-header-height: 4.2rem;
	@layout-header-font-size: 1rem;
	@layout-pagenav-height: 2rem;

	@layout-touch-header-height: @layout-header-height;
	@layout-touch-header-font-size: 1.2rem;
	@layout-touch-menu-record-height: 3.4rem;
	@layout-touch-menu-record-font-size: 1.2rem;
	@layout-touch-icon-width: 2.2em;

	@layout-mobile-menu-width: (@screen-width-mini * .85);

	@layout-contact-icon-width: 112px;
	@layout-contact-icon-height: 135px;

	@listing-line-height: 2.5rem;
	@listing-touch-line-height: 3.4rem;
	@listing-treetoggle-width: 1.5em;

	// Additional icons
	@icon-resize-corner: data-uri("image/svg+xml;charset=utf-8", "../images/corner-handle.svg"); // size: 512x512
	diff --git a/skins/elastic/styles/widgets/buttons.less b/skins/elastic/styles/widgets/buttons.less
	index f24eb7c1b..0406b0e22 100644
	--- a/skins/elastic/styles/widgets/buttons.less
	+++ b/skins/elastic/styles/widgets/buttons.less
	@@ -1,295 +1,295 @@
	/**
	* Roundcube webmail styles for the Elastic skin
	*
	* Copyright (c) 2017-2018, The Roundcube Dev Team
	*
	* The contents 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.
	*/

	/* Buttons */


	a.rcmaddcontact {
	display: none;
	}

	.button.disabled {
	opacity: .5;
	}

	a.button {
	text-decoration: none;

	&.active {
	cursor: pointer;
	}
	}


	/* font-icons */

	a.button.icon,
	button.btn {
	&:before {
	&:extend(.font-icon-class);
	}
	&.toolbar-menu-button:before {
	content: @fa-var-ellipsis-v;
	}
	&.menu-button:before {
	content: @fa-var-bars;
	}
	&.back-sidebar-button:before,
	&.back-content-button:before,
	&.back-list-button:before {
	content: @fa-var-chevron-left;
	}
	&.generate:before,
	&.yes:before,
	&.submit:before,
	&.continue:before,
	&.save:before {
	content: @fa-var-check;
	}
	&.create:before {
	content: @fa-var-plus-square;
	}
	&.edit:before {
	content: @fa-var-pencil-alt;
	}
	&.qrcode:before {
	content: @fa-var-qrcode;
	}
	&.search:before {
	content: @fa-var-search;
	}
	&.filter:before {
	content: @fa-var-filter;
	font-size: 1.2em; // this icon is too-big in FA5
	}
	&.import:before {
	content: @fa-var-upload;
	}
	&.export:before {
	content: @fa-var-download;
	}
	&.discard:before,
	&.delete:before {
	.font-icon-regular(@fa-var-trash-alt);
	}
	&.next:before {
	content: @fa-var-arrow-right;
	}
	&.restore:before {
	content: @fa-var-undo;
	}
	&.send:before,
	&.bounce:before {
	content: @fa-var-paper-plane;
	}
	&.attach:before {
	content: @fa-var-paperclip;
	}
	&.no:before,
	&.close:before,
	&.cancel:before {
	content: @fa-var-times;
	}
	&.mark:before {
	.font-icon-regular(@fa-var-star);
	}
	&.back:before {
	content: @fa-var-chevron-left;
	}
	&.remove:before {
	content: @fa-var-times;
	}
	&.unlock:before {
	content: @fa-var-unlock;
	}
	&.help:before {
	.font-icon-regular(@fa-var-life-ring);
	}
	&.toggleselect:before {
	.font-icon-regular(@fa-var-check-square);
	}
	&.folders:before {
	content: @fa-var-folder-open;
	}
	&.tools:before,
	&.settings:before {
	content: @fa-var-wrench;
	}

	&.properties:before {
	content: @fa-var-info-circle;
	}
	}

	a.btn,
	button.btn {
	// FIXME: Maybe button text (and icon) alignment requires some rework
	padding-bottom: .5rem;

	&:before {
	display: inline !important;
	float: none !important;
	}
	}

	a.button.icon {
	&.dropdown:before {
	content: @fa-var-caret-down;
	font-size: 1em;
	}
	& > span.inner {
	display: none;
	}
	}

	html.touch {
	.btn:focus {
	box-shadow: none;
	}
	}

	@floating-action-button-size: 4rem;

	.floating-action-buttons {
	position: absolute;
	right: 0;
	bottom: 0;

	.footer:not(:empty) + & {
	bottom: @layout-touch-header-height;
	}

	a.button {
	display: block;
	float: left;
	width: @floating-action-button-size;
	height: @floating-action-button-size;
	border-radius: 50%;
	- background: @color-taskmenu-background;
	+ background: @color-main;
	color: white;
	opacity: .95;
	- box-shadow: 0 0 5px 5px @color-popover-shadow;
	+ box-shadow: 0 0 5px 5px lighten(@color-main, 35%);
	margin: 0 1rem 1rem 0;

	&:before {
	&:extend(.font-icon-class);
	content: @fa-var-plus;
	width: @floating-action-button-size;
	height: @floating-action-button-size;
	line-height: @floating-action-button-size;
	}

	.inner {
	display: none;
	}
	}
	}

	/* Bootstrap button style overrides */

	.btn-secondary {
	color: @color-btn-secondary;
	background: @color-btn-secondary-background;
	border-color: @color-btn-secondary-background;

	&:focus {
	box-shadow: 0 0 0 .2rem fade(@color-btn-secondary-background, 50%);
	}

	&:hover {
	background: darken(@color-btn-secondary-background, 8%);
	border-color: darken(@color-btn-secondary-background, 10%);
	}

	&.disabled,
	&:disabled {
	background: lighten(@color-btn-secondary-background, 20%);
	border-color: lighten(@color-btn-secondary-background, 20%);
	opacity: 1;
	}

	&:not(:disabled):not(.disabled):active {
	background: darken(@color-btn-secondary-background, 11%);
	border-color: darken(@color-btn-secondary-background, 13%);
	box-shadow: 0 0 0 .2rem fade(@color-btn-secondary-background, 53%);
	}

	&:not(:disabled):not(.disabled).active {
	background: darken(@color-btn-secondary-background, 20%);
	border-color: darken(@color-btn-secondary-background, 22%);
	}
	}

	.btn-primary {
	color: @color-btn-primary;
	background: @color-btn-primary-background;
	border-color: @color-btn-primary-background;

	&:focus {
	box-shadow: 0 0 0 .2rem fade(@color-btn-primary-background, 50%);
	}

	&:hover {
	background: darken(@color-btn-primary-background, 8%);
	border-color: darken(@color-btn-primary-background, 10%);
	}

	&.disabled,
	&:disabled {
	background: lighten(@color-btn-primary-background, 20%);
	border-color: lighten(@color-btn-primary-background, 20%);
	opacity: 1;
	}

	&:not(:disabled):not(.disabled):active {
	background: darken(@color-btn-primary-background, 11%);
	border-color: darken(@color-btn-primary-background, 13%);
	box-shadow: 0 0 0 .2rem fade(@color-btn-primary-background, 53%);
	}

	&:not(:disabled):not(.disabled).active {
	background: darken(@color-btn-primary-background, 20%);
	border-color: darken(@color-btn-primary-background, 22%);
	}
	}

	.btn-danger {
	color: @color-btn-danger;
	background: @color-btn-danger-background;
	border-color: @color-btn-danger-background;

	&:focus {
	box-shadow: 0 0 0 .2rem fade(@color-btn-danger-background, 50%);
	}

	&:hover {
	background: darken(@color-btn-danger-background, 8%);
	border-color: darken(@color-btn-danger-background, 10%);
	}

	&.disabled,
	&:disabled {
	background: lighten(@color-btn-danger-background, 20%);
	border-color: lighten(@color-btn-danger-background, 20%);
	opacity: 1;
	}

	&:not(:disabled):not(.disabled):active {
	background: darken(@color-btn-danger-background, 11%);
	border-color: darken(@color-btn-danger-background, 13%);
	box-shadow: 0 0 0 .2rem fade(@color-btn-danger-background, 53%);
	}

	&:not(:disabled):not(.disabled).active {
	background: darken(@color-btn-danger-background, 20%);
	border-color: darken(@color-btn-danger-background, 22%);
	}
	}
	diff --git a/skins/elastic/styles/widgets/lists.less b/skins/elastic/styles/widgets/lists.less
	index 21107214c..36e14680a 100644
	--- a/skins/elastic/styles/widgets/lists.less
	+++ b/skins/elastic/styles/widgets/lists.less
	@@ -1,952 +1,952 @@
	/**
	* Roundcube webmail styles for the Elastic skin
	*
	* Copyright (c) 2017-2018, The Roundcube Dev Team
	*
	* The contents 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.
	*/

	/* List and treelist widgets */

	.listing {
	tbody td,
	li {
	border-bottom: 1px solid @color-list-border;
	cursor: default;
	font-weight: normal;
	line-height: @listing-line-height;
	}

	tbody td,
	li a {
	padding: 0 .5rem;
	white-space: nowrap;
	vertical-align: middle;
	color: @color-list;
	}

	tbody td {
	.overflow-ellipsis;
	outline: none;

	a {
	color: @color-list;
	}
	}

	li a {
	display: block;
	text-decoration: none;
	cursor: default;
	width: 100%;
	}

	li.selected,
	tr.selected td {
	color: @color-list-selected;
	background-color: @color-list-selected-background;
	}

	td.selection {
	padding: 0 0 0 .5em;
	width: 2em;
	text-align: center;

	& > input {
	vertical-align: middle;
	}
	}

	&:not(.withselection) td.selection {
	display: none;
	}

	td.name {
	.overflow-ellipsis;
	}

	td.action {
	padding: 0 .5em;
	width: 2em;
	text-align: center;

	&:empty {
	width: 0;
	}

	a {
	display: block;
	overflow: hidden;
	text-decoration: none;

	&:before {
	&:extend(.font-icon-class);
	margin: 0;
	font-size: 1rem;
	}
	}

	a.pushgroup:before {
	content: @fa-var-chevron-right;
	}
	}

	li.droptarget > a,
	tr.droptarget > td {
	background-color: @color-list-droptarget-background;
	}

	li.disabled,
	tr.disabled td {
	color: @color-list-deleted;
	}

	li > a.virtual,
	li.virtual > a {
	opacity: .4;
	}

	span.secondary {
	color: @color-list-secondary;
	}

	// Focus indicator
	@media screen and (min-width: @screen-width-large) {
	li > a,
	tbody tr > td:first-child,
	&:not(.withselection) tbody tr > td.selection + td {
	border-left: 2px solid transparent;
	}

	li > a:focus,
	&.focus tbody tr.focused > td:first-child,
	&.focus:not(.withselection) tbody tr.focused > td.selection + td {
	border-left: 2px solid @color-list-focus-indicator;
	outline: 0;
	}
	}
	}

	table.listing {
	width: 100%;
	table-layout: fixed;
	// border-spacing/border-collapse here fix problem with our focus indicator
	// when the table cells use overflow: hidden. I.e. we use border-spacing:0
	// instead of Bootstrap's border-collapse:collapse. Is this cross-browser?
	border-spacing: 0;
	border-collapse: unset;
	}

	ul.listing {
	margin: 0;
	padding: 0;

	& > ul {
	padding: 0;
	}

	li {
	.overflow-ellipsis;
	white-space: nowrap;
	position: relative;
	list-style: none;

	ul {
	border-top: 1px solid @color-list-border;
	padding-left: 1.5em;

	li:last-child {
	border-bottom: none;
	}
	}

	input.icon-checkbox + label,
	input[type=checkbox] {
	position: absolute;
	padding: 0;
	top: 0;
	right: .5rem;
	height: @listing-line-height;
	vertical-align: middle;
	}
	}

	&.simplelist {
	li {
	padding: 0 .5rem;
	}
	}
	}

	.listing-info {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	text-align: center;
	font-weight: bold;
	color: @color-list-secondary;
	}

	html.touch {
	.listing:not(.toolbar) li,
	.listing tbody td {
	line-height: @listing-touch-line-height;
	font-size: 1.2rem;
	}

	li input[type=checkbox] {
	height: @listing-touch-line-height;
	}

	td.selection {
	padding: 0;
	width: 3em;
	}
	}

	@media screen and (max-width: @screen-width-large) {
	.listing.selection-large-only {
	li.selected {
	color: @color-list;
	background-color: transparent;
	}
	}
	}


	/* icons */

	.listing.iconized li {
	a:before {
	&:extend(.font-icon-class);
	height: 2em; // TODO: ?
	margin-right: .5rem;
	}
	&.preferences > a:before {
	content: @fa-var-sliders-h;
	}
	&.folders > a:before {
	content: @fa-var-folder;
	}
	&.responses > a:before {
	content: @fa-var-comment;
	}
	&.identities > a:before {
	content: @fa-var-id-card;
	}
	&.password > a:before {
	content: @fa-var-lock;
	}
	&.addressbook a:before {
	.font-icon-regular(@fa-var-address-book);
	}
	&.contactgroup a:before {
	.font-icon-solid(@fa-var-users);
	}
	&.contactsearch a:before {
	content: @fa-var-search;
	}
	&.filter > a:before {
	content: @fa-var-filter;
	}
	&.vacation > a:before {
	.font-icon-regular(@fa-var-clock);
	}
	&.forward > a:before {
	content: @fa-var-share-square;
	}
	&.enigma.keys > a:before {
	content: @fa-var-key;
	}
	&.userinfo > a:before {
	content: @fa-var-info-circle;
	}
	&.twofactorauth > a:before {
	content: @fa-var-sign-in-alt;
	}

	a.help:before {
	content: @fa-var-life-ring;
	}
	a.about:before {
	.font-icon-regular(@fa-var-question-circle);
	}
	a.license:before {
	content: @fa-var-shield-alt;
	}

	// autocomplete popup
	& > i:before {
	&:extend(.font-icon-class);
	content: @fa-var-user;
	margin-left: .5rem;
	}
	&.group > i:before {
	content: @fa-var-users;
	}
	}

	html.ie11 .listing.iconized li a:before {
	font-size: 1.25rem;
	}

	.listing.iconized tr {
	td:before {
	&:extend(.font-icon-class);
	margin-right: .5rem;
	}
	&.contact.person td.name:before {
	content: @fa-var-user;
	}
	&.contact.group td.name:before {
	content: @fa-var-users;
	}
	&.general > td.section:before {
	content: @fa-var-desktop;
	}
	&.mailbox > td.section:before {
	.font-icon-regular(@fa-var-envelope);
	}
	&.mailview > td.section:before {
	content: @fa-var-inbox;
	}
	&.compose > td.section:before {
	content: @fa-var-paper-plane;
	}
	&.addressbook > td.section:before {
	- content: @fa-var-user;
	+ content: @fa-var-users;
	}
	&.folders > td.section:before {
	.font-icon-regular(@fa-var-folder);
	}
	&.server > td.section:before {
	content: @fa-var-server;
	}
	&.enigma > td.section:before {
	content: @fa-var-lock;
	}
	&.calendar > td.section:before {
	content: @fa-var-calendar;
	}
	}

	/* selecatable list: e.g. spellcheck language selection */
	.listing.iconized.selectable li {
	a:before {
	&:extend(.font-icon-class);
	content: "";
	}
	a.selected:before {
	content: @fa-var-check;
	}
	}

	.popupmenu .listing {
	li > a {
	border-left: 0;
	}

	li.selected {
	color: @color-toolbarmenu-hover;
	background-color: @color-toolbarmenu-hover-background;
	}

	td {
	.overflow-ellipsis;
	}
	}

	ul.treelist {
	li {
	div.treetoggle {
	position: absolute;
	top: 0;
	left: 0;
	width: @listing-treetoggle-width;
	cursor: pointer;
	background-color: transparent;

	&:before {
	&:extend(.font-icon-class);
	content: @fa-var-angle-right;
	margin-left: .25em;
	font-size: 1em;
	}

	&.expanded:before {
	content: @fa-var-angle-down;
	}
	}

	& > a {
	.overflow-ellipsis;
	padding-left: @listing-treetoggle-width;
	}

	&.selected {
	// reset .listing selection style
	color: inherit;
	background-color: transparent;

	& > div > a, // this is used e.g. by kolab_addressbook
	& > a {
	color: @color-list-selected;
	background-color: @color-list-selected-background;
	}
	}

	ul {
	padding: 0;

	li {
	padding-left: 0;
	a { padding-left: (2 * @listing-treetoggle-width); }
	div.treetoggle { left: @listing-treetoggle-width; }

	li {
	a { padding-left: (3 * @listing-treetoggle-width); }
	div.treetoggle { left: (2 * @listing-treetoggle-width); }

	li {
	a { padding-left: (4 * @listing-treetoggle-width); }
	div.treetoggle { left: (3 * @listing-treetoggle-width); }

	li {
	a { padding-left: (5 * @listing-treetoggle-width); }
	div.treetoggle { left: (4 * @listing-treetoggle-width); }

	li {
	a { padding-left: (6 * @listing-treetoggle-width); }
	div.treetoggle { left: (5 * @listing-treetoggle-width); }
	}
	}
	}
	}
	}
	}
	}

	&.notree {
	div.treetoggle {
	display: none;
	}

	li > a {
	padding-left: .5em;
	}
	}
	}

	/* Folders list widget */

	.folderlist {
	li {
	&.mailbox {
	&.unread {
	// TODO
	& > a {
	padding-right: 2.8em;
	}
	}

	&.recent {
	color: @color-list-recent;
	}

	.unreadcount {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 2em;
	line-height: 1.4rem;
	margin: (@listing-line-height - 1.4rem)/2;
	padding: 0 .3em;
	border-radius: .4em;
	background: @color-list-badge-background;
	color: @color-list-badge;
	text-align: center;
	font-weight: bold;

	html.touch & {
	line-height: 2rem;
	margin: (@listing-touch-line-height - 2rem)/2;
	}
	}

	&.selected .unreadcount {
	// todo
	}

	&.recent > .unreadcount {
	background: @color-list-recent-badge-background;
	color: @color-list-recent-badge;
	}

	&.root {
	display: none !important;
	// FIXME: This element is confusing, I propose to not use it
	}
	}

	a:before {
	&:extend(.font-icon-class);
	.font-icon-regular(@fa-var-folder);
	margin-right: .5rem;
	}

	&.inbox > a:before {
	.font-icon-solid(@fa-var-inbox);
	}
	&.trash a:before {
	.font-icon-solid(@fa-var-trash-alt);
	}
	&.trash.empty > a:before {
	.font-icon-regular(@fa-var-trash-alt);
	}
	&.drafts a:before {
	.font-icon-solid(@fa-var-pencil-alt);
	}
	&.sent a:before {
	.font-icon-solid(@fa-var-paper-plane);
	}
	&.junk a:before {
	.font-icon-solid(@fa-var-fire);
	}
	&.archive > a:before {
	.font-icon-solid(@fa-var-archive);
	}
	}

	// folder-selector fix for left padding
	&.toolbarmenu a:before {
	margin-left: .5em;
	}

	&.toolbarmenu {
	li {
	a:before {
	margin-right: .25em;
	}
	}
	}
	}


	/* Messages list widget */

	.messagelist > thead,
	.messagelist .branch,
	table.fixedcopy {
	display: none;
	}

	.messagelist {
	td {
	border-left: 0;
	width: 2em;
	vertical-align: top;
	font-size: 1rem !important;
	}

	td.subject {
	width: 100%;
	padding-right: 0;
	display: flex;
	flex-wrap: wrap;

	a {
	text-decoration: none;
	cursor: default;
	}

	span {
	line-height: 2em;

	&.date {
	font-size: 90%;
	color: @color-list-secondary;
	}

	&.fromto {
	.overflow-ellipsis;
	flex: 1;
	font-size: 90%;
	color: @color-list-secondary;
	padding-left: 1.5em;
	padding-right: .5rem;
	}

	&.subject {
	.overflow-ellipsis;
	width: 100%;
	}
	}
	}

	td.threads {
	padding: 0 0 0 .25rem;
	width: 1.5em;
	}

	td.flags {
	width: 2.5em;

	& > span {
	height: 1.7em;
	line-height: 1.7em;
	display: block;

	&.flag {
	cursor: pointer;
	}
	}
	}

	tr.flagged td,
	tr.flagged td.subject span.subject a,
	tr.flagged td.subject span.date,
	tr.flagged td.subject span.fromto {
	color: @color-list-flagged;
	}

	tr.deleted td,
	tr.deleted td.subject span.subject a,
	tr.deleted td.subject span.date,
	tr.deleted td.subject span.fromto {
	color: @color-list-deleted;
	}

	tr.unread td.subject span.subject {
	font-weight: bold;
	}

	// thread parent message with unread children
	tr.unroot td.subject a {
	text-decoration: underline;
	}

	tr.thread td.threads div:before {
	&:extend(.font-icon-class);
	content: @fa-var-angle-right;
	cursor: pointer;
	width: 1em;
	}
	tr.thread.expanded td.threads div:before {
	content: @fa-var-angle-down;
	}
	td.subject span.msgicon.status:before {
	&:extend(.font-icon-class);
	content: @fa-var-circle;
	cursor: pointer;
	font-size: .4em;
	width: 3em;
	height: 2rem;
	}
	td.subject span.msgicon.status.unread:before {
	content: @fa-var-star;
	font-size: 1.1em;
	width: 1.1em;
	line-height: 1.75;
	color: @color-warning;
	}
	td.subject span.msgicon.status.unreadchildren:before {
	.font-icon-regular(@fa-var-star);
	font-size: 1.1em;
	width: 1.1em;
	line-height: 1.75;
	}
	td.subject span.msgicon.status.replied:before {
	content: @fa-var-reply;
	font-size: 1.1em;
	line-height: 1.75;
	width: 1.1em;
	}
	td.subject span.msgicon.status.forwarded:before {
	.font-icon-solid(@fa-var-share);
	font-size: 1.1em;
	line-height: 1.75;
	width: 1.1em;
	}
	td.subject span.msgicon.status.replied.forwarded:before {
	content: @fa-var-reply; // TODO
	font-size: 1.1em;
	line-height: 1.75;
	width: 1.1em;
	}
	tr.deleted td.subject span.msgicon.status:before {
	content: @fa-var-ban;
	font-size: 1.1em;
	line-height: 1.75;
	width: 1.1em;
	}

	span.attachment span {
	&:extend(.font-icon-class);
	color: @color-list-icon;

	&:before {
	margin: 0;
	content: @fa-var-paperclip;
	}
	&.report:before {
	.font-icon-regular(@fa-var-file-alt);
	}
	&.encrypted:before {
	content: @fa-var-lock;
	}
	&.vcard:before {
	.font-icon-regular(@fa-var-user); // vcard_attachments plugin
	}
	}

	span.flagged:before {
	&:extend(.font-icon-class);
	content: @fa-var-flag;
	}

	tr:hover span.unflagged:before {
	&:extend(.font-icon-class);
	.font-icon-regular(@fa-var-flag);
	}

	}

	html.layout-phone,
	html.touch {
	.messagelist {
	td.flags {
	display: none;
	}
	td.subject {
	padding-right: .5em;
	}
	}
	}


	/* Contacts list */

	.contactlist {
	.contact.readonly td {
	font-style: italic;
	}

	td.action {
	// TODO
	a {
	// TODO
	}
	}

	// for contacts list in mail compose
	td.contact:before {
	&:extend(.font-icon-class);
	content: @fa-var-user;
	}

	// for contacts list in mail compose
	td.contactgroup:before {
	&:extend(.font-icon-class);
	content: @fa-var-users;
	}

	span.email {
	display: inline;
	color: @color-list-secondary;
	font-style: italic;
	margin-left: .5em;
	}

	li {
	a:before {
	&:extend(.font-icon-class);
	margin-right: .5rem;
	}

	a.addressbook::before {
	.font-icon-regular(@fa-var-address-book);
	}

	a.contactgroup::before {
	.font-icon-solid(@fa-var-users);
	}
	}
	}


	/* Attachments list */

	@attachmentslist-item-height: 2rem;

	.attachmentslist {
	padding: 0;
	margin: 0;

	li {
	list-style: none;
	display: inline-flex;
	white-space: nowrap;
	line-height: @attachmentslist-item-height;
	max-width: 100%;

	&:before {
	&:extend(.font-icon-class);
	.font-icon-regular(@fa-var-file);
	height: @attachmentslist-item-height;
	}

	&.txt:before,
	&.text:before {
	.font-icon-regular(@fa-var-file-alt);
	}

	&.pdf:before {
	.font-icon-regular(@fa-var-file-pdf);
	}

	&.odt:before,
	&.doc:before,
	&.docx:before,
	&.msword:before {
	.font-icon-regular(@fa-var-file-word);
	}

	&.ods:before,
	&.xls:before,
	&.xlsx:before,
	&.msexcel:before {
	.font-icon-regular(@fa-var-file-excel);
	}

	&.rar:before,
	&.zip:before,
	&.gz:before {
	.font-icon-regular(@fa-var-file-archive);
	}

	&.image:before,
	&.jpg:before,
	&.jpeg:before,
	&.png:before {
	.font-icon-regular(@fa-var-file-image);
	}

	&.mp3:before,
	&.audio:before {
	.font-icon-regular(@fa-var-file-audio);
	}

	&.m4p:before,
	&.video:before {
	.font-icon-regular(@fa-var-file-video);
	}

	&.ics:before,
	&.calendar:before {
	// TODO
	}

	&.vcard:before {
	.font-icon-regular(@fa-var-address-card);
	}

	&.html:before {
	.font-icon-regular(@fa-var-file-code);
	}

	&.eml:before,
	&.rfc822:before {
	// TODO
	}

	&.odp:before,
	&.otp:before,
	&.ppt:before,
	&.pptx:before,
	&.ppsx:before,
	&.vnd.mspowerpoint:before {
	.font-icon-regular(@fa-var-file-powerpoint);
	}

	&.sig:before,
	&.pgp-signature:before,
	&.pkcs7-signature:before {
	// TODO
	}

	&.application.asc:before {
	// TODO
	}

	&.application.pgp-keys:before {
	// TODO
	}

	a {
	text-decoration: none;
	line-height: @attachmentslist-item-height;
	height: @attachmentslist-item-height;
	}

	a.cancelupload:before,
	a.delete:before {
	&:extend(.font-icon-class);
	content: @fa-var-trash-alt;
	line-height: @attachmentslist-item-height;
	height: @attachmentslist-item-height;
	}

	&.uploading:before {
	.animated-icon-class;
	.font-icon-solid(@fa-var-circle-notch);
	}

	a.filename {
	display: flex;
	overflow: hidden;
	}

	.attachment-name {
	.overflow-ellipsis;
	color: @color-font;
	}

	.attachment-size {
	color: @color-list-secondary;
	padding: 0 .25em;
	}
	}
	}

	#identities-table {
	td.mail:before {
	&:extend(.font-icon-class);
	content: @fa-var-id-card;
	}
	}

	#responses-table {
	td.name:before {
	&:extend(.font-icon-class);
	content: @fa-var-comment;
	}
	}

	#filterslist {
	td.name:before {
	&:extend(.font-icon-class);
	content: @fa-var-filter;
	}
	}

	#filtersetslist {
	td.name:before {
	&:extend(.font-icon-class);
	content: @fa-var-file-alt;
	}
	}
	diff --git a/skins/elastic/styles/widgets/taskmenu.less b/skins/elastic/styles/widgets/taskmenu.less
	index 525276b15..1abfade0f 100644
	--- a/skins/elastic/styles/widgets/taskmenu.less
	+++ b/skins/elastic/styles/widgets/taskmenu.less
	@@ -1,173 +1,220 @@
	/**
	* Roundcube webmail styles for the Elastic skin
	*
	* Copyright (c) 2017-2018, The Roundcube Dev Team
	*
	* The contents 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.
	*/

	/* Taskmenu */

	#taskmenu {
	height: 100%;

	a {
	.overflow-ellipsis;
	text-decoration: none;
	display: block;

	&:before {
	&:extend(.font-icon-class);
	}

	&.mail:before {
	content: @fa-var-envelope;
	}
	&.addressbook:before {
	- content: @fa-var-user;
	+ content: @fa-var-users;
	}
	&.settings:before {
	content: @fa-var-sliders-h;
	}
	&.help:before {
	content: @fa-var-life-ring;
	}
	&.logout:before {
	content: @fa-var-power-off;
	}
	&.about:before {
	content: @fa-var-question;
	}
	&.refresh:before {
	content: @fa-var-sync;
	}
	&.compose:before {
	content: @fa-var-edit;
	}
	&.calendar:before {
	content: @fa-var-calendar-alt;
	}
	&.tasklist:before {
	content: @fa-var-tasks;
	}
	&.files:before {
	content: @fa-var-folder;
	}
	&.notes:before {
	content: @fa-var-sticky-note;
	}
	}

	- a.logout {
	- color: @color-taskmenu-button-logout-hover !important;
	- }
	-
	@media screen and (max-width: @screen-width-xs) {
	z-index: 30001; // because autocompletion popup uses z-index:30000
	overflow-x: hidden;

	a {
	width: 100%;
	padding: 0 .5em;
	text-align: left;
	line-height: @layout-touch-menu-record-height;
	height: @layout-touch-menu-record-height;
	border-bottom: 1px solid @color-list-border;
	color: @color-list;
	font-size: 1.2rem;

	&:before {
	margin-right: .5rem;
	}
	}
	}

	@media screen and (min-width: (@screen-width-xs + 1px)) {
	a {
	text-align: center;
	color: @color-taskmenu-button;
	padding: .45rem 0;
	width: @layout-menu-width/2;
	font-size: 1.2rem;
	+ margin-bottom: 1px;

	&:before {
	display: block;
	height: 2.1rem;
	line-height: 1.5;
	width: @layout-menu-width/2;
	margin: 0;
	}

	- &:hover {
	- color: @color-taskmenu-button;
	- background: @color-taskmenu-button-background-hover;
	- }
	-
	&.selected {
	color: @color-taskmenu-button-selected;
	background: @color-taskmenu-button-selected-background;
	}
	+
	+ &:hover {
	+ color: @color-taskmenu-button-hover;
	+ background: @color-taskmenu-button-background-hover;
	+ }
	}

	.special-buttons {
	position: absolute;
	bottom: 0;
	left: 0;
	width: @layout-menu-width;
	}

	.action-buttons {
	a {
	- color: @color-taskmenu-button-action-background;
	- background: @color-taskmenu-background;
	+ color: @color-taskmenu-button-action;
	+ background: @color-taskmenu-button-action-background;

	&:hover {
	color: @color-taskmenu-button-action-hover;
	background: @color-taskmenu-button-action-background-hover;
	}
	+
	+ &.selected {
	+ background: @color-taskmenu-button-selected-background;
	+ }
	}
	}

	span.inner {
	display: none;
	}
	+
	+ a.logout {
	+ color: @color-taskmenu-button-logout-hover !important;
	+ }
	}

	@media screen and (min-width: (@screen-width-medium + 1px)) {
	a {
	width: @layout-menu-width;
	height: (@layout-header-height - .05rem);
	font-size: 1rem;

	&:before {
	width: @layout-menu-width;
	height: 1.75rem;
	line-height: 1.5;
	}
	}

	- .action-buttons {
	- a {
	- color: @color-taskmenu-button-action;
	- background: @color-taskmenu-button-action-background;
	- }
	- }
	-
	span.inner {
	display: inline;
	font-size: 85%;
	padding: 0 .1em;
	}
	}
	}

	.menu {
	.popover-header {
	+ height: @layout-header-height;
	+ display: flex !important;
	+ align-items: center;
	+ justify-content: center;
	+ border: 0;
	+ border-radius: 0;
	+
	+ img {
	+ max-height: @layout-header-height;
	+ }
	+
	@media screen and (min-width: (@screen-width-xs + 1px)) {
	- display: none !important;
	+ padding: 0 !important;
	+ background-color: @color-taskmenu-background !important;
	+
	+ a {
	+ display: none !important;
	+ }
	+
	+ img {
	+ max-width: @layout-menu-width/2;
	+ }
	+ }
	+
	+ @media screen and (min-width: (@screen-width-medium + 1px)) {
	+ img {
	+ max-width: @layout-menu-width;
	+ }
	+ }
	+
	+ html.layout-phone & {
	+ padding: 0 .5rem;
	+
	+ img {
	+ max-height: @layout-touch-header-height;
	+ max-width: @layout-menu-width;
	+ }
	+
	+ a {
	+ width: auto;
	+ flex: 1;
	+
	+ &:before {
	+ height: @layout-touch-header-height;
	+ float: right;
	+ }
	+
	+ .inner {
	+ display: none;
	+ }
	+ }
	}
	}
	}
	diff --git a/skins/elastic/styles/widgets/toolbar.less b/skins/elastic/styles/widgets/toolbar.less
	index 1f49433c4..e070f60b6 100644
	--- a/skins/elastic/styles/widgets/toolbar.less
	+++ b/skins/elastic/styles/widgets/toolbar.less
	@@ -1,741 +1,741 @@
	/**
	* Roundcube webmail styles for the Elastic skin
	*
	* Copyright (c) 2017-2018, The Roundcube Dev Team
	*
	* The contents 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.
	*/

	/* Toolbar widget */

	.toolbar {
	margin: 0;
	font-size: 1rem;

	&.listing a,
	a {
	text-decoration: none;
	cursor: pointer !important; // TODO: re-consider .listing class use on toolbar
	color: @color-toolbar-button;
	}

	a.button {
	display: inline-block;
	border: 0 !important;
	height: @layout-header-height;
	min-width: 3.5rem;
	max-width: 6rem;
	width: auto; // reset width defined for links in .listing
	padding: .45rem;
	text-align: center;
	text-overflow: ellipsis;
	overflow-x: hidden;
	line-height: 1.5;

	&:hover,
	&:focus {
	outline: 0;
	}

	&.selected {
	color: @color-success;
	}

	&:before {
	&:extend(.font-icon-class);
	display: inline;
	float: none;
	margin: 0;
	line-height: 1.75;
	}

	&.reply:before {
	content: @fa-var-reply;
	}
	&.reply-all:before {
	content: @fa-var-reply-all;
	}
	&.forward:before {
	content: @fa-var-share;
	}
	&.delete:before {
	content: @fa-var-trash-alt;
	}
	&.markmessage:before {
	content: @fa-var-tag;
	}
	&.more:before {
	content: @fa-var-ellipsis-h;
	}
	&.dropdown:before {
	content: @fa-var-caret-down;
	}
	&.settings:before {
	content: @fa-var-sliders-h;
	}
	&.create:before {
	content: @fa-var-plus-square;
	}
	&.move:before {
	content: @fa-var-arrows-alt;
	}
	&.purge:before {
	content: @fa-var-eraser;
	}
	&.print:before {
	content: @fa-var-print;
	}
	&.search:before {
	content: @fa-var-search;
	}
	&.upload:before,
	&.import:before {
	content: @fa-var-upload;
	}
	&.download:before,
	&.export:before {
	content: @fa-var-download;
	}
	&.compose:before {
	content: @fa-var-edit;
	}
	&.archive:before {
	content: @fa-var-archive;
	}
	&.junk:before {
	content: @fa-var-fire;
	}
	&.enigma:before,
	&.encrypt:before {
	content: @fa-var-lock;
	}
	&.firstpage:before {
	content: @fa-var-fast-backward;
	}
	&.prev:before {
	content: @fa-var-arrow-left;
	}
	&.next:before {
	content: @fa-var-arrow-right;
	}
	&.prevpage:before {
	content: @fa-var-backward;
	}
	&.nextpage:before {
	content: @fa-var-forward;
	}
	&.lastpage:before {
	content: @fa-var-fast-forward;
	}
	&.send:before {
	content: @fa-var-paper-plane;
	}
	&.back:before {
	content: @fa-var-arrow-left;
	}
	&.closewin:before {
	content: @fa-var-window-close;
	}
	&.save:before {
	.font-icon-regular(@fa-var-save);
	}
	&.vcard:before,
	&.attach:before {
	content: @fa-var-paperclip;
	}
	&.spellcheck:before {
	content: @fa-var-magic; // TODO
	}
	&.signature:before {
	content: @fa-var-id-card;
	}
	&.responses:before {
	content: @fa-var-comment;
	}
	&.select:before {
	.font-icon-regular(@fa-var-check-square);
	}
	&.threads:before {
	content: @fa-var-comments;
	}
	&.actions:before {
	content: @fa-var-cog;
	}
	&.refresh:before {
	content: @fa-var-sync;
	}
	&.addto:before {
	content: @fa-var-user-plus;
	}
	&.addcc:before {
	content: @fa-var-user-plus;
	}
	&.addbcc:before {
	content: @fa-var-user-plus;
	}
	&.addressbook:before {
	content: @fa-var-user;
	}
	&.expand:before {
	content: @fa-var-caret-down;
	}
	&.collapse:before {
	content: @fa-var-caret-up;
	}
	&.submit:before {
	content: @fa-var-check;
	}
	&.edit:before {
	content: @fa-var-pencil-alt;
	}
	&.qrcode:before {
	content: @fa-var-qrcode;
	}
	&.properties:before {
	content: @fa-var-file;
	}
	&.zoomin:before {
	content: @fa-var-search-plus;
	}
	&.zoomout:before {
	content: @fa-var-search-minus;
	}
	&.rotate:before {
	content: @fa-var-redo-alt;
	}
	}

	&:not(.popupmenu) span.inner {
	font-size: 90%;
	font-weight: normal;
	}

	.dropbutton {
	a.button.dropdown {
	font-size: 75%;
	overflow: hidden; // for IE11

	span.inner {
	display: none;
	}
	}

	a.button:first-child {
	padding-right: 0;
	}
	}

	& > .spacer {
	width: 1em;
	}

	&.pagenav {
	text-align: center;
	display: flex;
	border-bottom: 1px solid @color-layout-border;
	height: @layout-pagenav-height;
	overflow: hidden;

	a.button {
	flex-grow: 1;
	font-size: 80%;
	min-width: 2rem !important;
	height: @layout-pagenav-height !important;
	color: @color-list-pagenav;
	overflow: hidden;

	&:before {
	line-height: 1 !important;
	}
	}

	.pagenav-text {
	.overflow-ellipsis;
	flex-grow: 4;
	line-height: @layout-pagenav-height;
	font-size: 80%;
	color: @color-list-pagenav;
	white-space: nowrap;
	}

	input {
	width: 3rem;
	font-size: 90%;
	line-height: 1;
	padding: .25rem;
	margin: .15rem;
	display: inline;
	text-align: center;
	}

	span.inner {
	display: none;
	}

	&.pagenav-list {
	cursor: pointer;

	a.button {
	flex-grow: initial;
	}

	.pagenav-text {
	text-align: left;
	}

	& + .navlist {
	background-color: #fbfbfb;
	}
	}
	}

	&.footer {
	a.button:before {
	height: 1.75rem;
	float: none;
	display: block;
	width: auto;
	}
	}

	&.content-frame-navigation.hide-nav-buttons {
	a.next,
	a.prev {
	display: none;
	}
	}

	.listselectors {
	max-width: 100%;
	display: flex;
	justify-content: space-around;
	}
	}


	.header {
	a.button {
	- color: @color-font;
	+ color: @color-toolbar-button;
	}

	.buttons {
	display: block;

	button {
	display: block;
	float: left;
	cursor: pointer;
	color: @color-toolbar-button;
	background-color: transparent;
	border: 0;
	padding: 0;
	height: @layout-touch-header-height;
	line-height: @layout-touch-header-height;
	width: 2.5em;

	&:before {
	font-size: 1.75rem;
	}
	}

	a.button {
	display: inline-block;

	&:before {
	&:extend(.font-icon-class);
	float: none;
	}

	&.reply:before {
	content: @fa-var-reply;
	}

	&.send:before {
	content: @fa-var-paper-plane;
	}
	}
	}
	}

	.popupmenu.toolbar.listing {
	a.button {
	max-width: 100%;
	width: 100%;
	text-align: left;
	line-height: @layout-touch-menu-record-height;
	height: @layout-touch-menu-record-height;

	&:before {
	display: inline-block;
	line-height: inherit;
	margin-right: .5rem;
	}
	}

	.dropbutton {
	display: flex;

	a.button:first-child {
	.overflow-ellipsis;
	flex: 1;
	}

	a.button.dropdown {
	font-size: 100%;
	cursor: pointer;
	width: auto;

	&:before {
	content: @fa-var-angle-right;
	margin-left: .5em;
	margin-right: 0;
	}

	span.inner {
	display: none;
	}
	}
	}

	li.spacer {
	display: none;
	}

	li:last-child {
	border: 0;
	}
	}


	.toolbarmenu li {
	&.separator {
	// TODO: all separator properties
	line-height: 1.5rem !important;
	font-size: .75rem !important;
	padding: 0 .5rem;
	color: @color-popover-separator;
	background-color: @color-popover-separator-background;

	label {
	margin: 0; // Unsets Bootstrap label margin, bug?
	}
	}

	&.checkbox > label {
	margin: 0;
	width: 100%;

	input.icon-checkbox {
	right: auto;

	& + label {
	left: 0;
	margin: 0 .2em 0 .35em;
	font-size: 1.1rem;
	}
	}
	}

	a {
	opacity: .5;

	&.active {
	opacity: 1;
	}
	}

	&:last-child {
	border-bottom: none;
	}

	a:before {
	&:extend(.font-icon-class);
	}

	a.print:before {
	content: @fa-var-print;
	}
	a.copy:before {
	content: @fa-var-copy;
	}
	a.move:before {
	content: @fa-var-arrows-alt;
	}
	a.purge:before {
	content: @fa-var-eraser;
	}
	a.source:before {
	content: @fa-var-file-code;
	}
	a.download:before {
	content: @fa-var-download;
	}
	a.extwin:before {
	content: @fa-var-external-link-square-alt;
	}
	a.create:before {
	content: @fa-var-plus-square;
	}
	a.edit:before {
	content: @fa-var-edit;
	}
	a.edit.asnew:before {
	content: @fa-var-pencil-alt;
	}
	a.rename:before {
	content: @fa-var-pencil-alt;
	}
	a.read:before {
	.font-icon-regular(@fa-var-star);
	}
	a.unread:before {
	content: @fa-var-star;
	}
	a.flag:before {
	content: @fa-var-flag;
	}
	a.unflag:before {
	.font-icon-regular(@fa-var-flag);
	}
	a.filterlink:before {
	content: @fa-var-filter;
	}
	a.reply.list:before,
	a.reply.all:before {
	content: @fa-var-reply-all;
	}
	a.forward:before,
	a.forward.bounce:before,
	a.forward.attachment:before,
	a.forward.inline:before {
	content: @fa-var-share;
	}
	a.download.mbox:before,
	a.download.eml:before,
	a.download.maildir:before {
	content: @fa-var-download;
	}
	a.export.selection:before,
	a.export.all:before {
	content: @fa-var-download;
	}
	a.select.all:before {
	.font-icon-regular(@fa-var-check-square);
	}
	a.select.none:before {
	content: @fa-var-times;
	}
	a.select.page:before {
	content: @fa-var-bars;
	}
	a.select.flagged:before {
	content: @fa-var-flag;
	}
	a.select.unread:before {
	content: @fa-var-star;
	}
	a.select.invert:before {
	.font-icon-regular(@fa-var-square);
	}
	a.expand.all:before,
	a.expand.unread:before,
	a.expand.none:before {
	content: @fa-var-comments;
	}
	a.search:before {
	content: @fa-var-search;
	}
	a.delete:before {
	content: @fa-var-trash-alt;
	}
	a.expunge:before {
	content: @fa-var-compress;
	}
	a.import:before {
	content: @fa-var-upload;
	}
	a.settings:before {
	content: @fa-var-sliders-h;
	}
	a.insertresponse:before {
	content: @fa-var-comment;
	}
	a.compose:before {
	content: @fa-var-edit;
	}
	a.addressbook:before {
	content: @fa-var-user;
	}
	a.recipient:before {
	.font-icon-regular(@fa-var-envelope);
	}
	a.status:before {
	.font-icon-regular(@fa-var-lightbulb);
	}
	a.folders:before {
	content: @fa-var-folder;
	}
	a.remove:before {
	content: @fa-var-eraser;
	}
	a.showurl:before {
	content: @fa-var-link;
	}
	a.qrcode:before {
	content: @fa-var-qrcode;
	}
	a.assigngroup:before {
	content: @fa-var-user-plus;
	}
	a.removegroup:before {
	content: @fa-var-user-times;
	}
	a.vcard:before {
	content: @fa-var-paperclip;
	}
	a.encrypt:before {
	content: @fa-var-lock;
	}
	a.encrypt.sign:before {
	content: @fa-var-lock; // TODO
	}
	}

	.toolbarmenu.listing li {
	&.checkbox > label {
	padding: 0 .5rem 0 2.5em;
	}

	&:hover {
	&.checkbox > label,
	input.icon-checkbox + label:before,
	a.active {
	color: @color-toolbarmenu-hover;
	background-color: @color-toolbarmenu-hover-background;
	}
	}
	}

	#layout > .sidebar > .header,
	#layout > .list > .header {
	span.inner {
	display: none;
	}
	}

	#layout > .content > * > .toolbar {
	text-align: center;
	}

	html.touch {
	.toolbarmenu.listing td,
	.toolbarmenu.listing li,
	#layout > :not(.content) > .header a.button {
	font-size: 1.2rem;
	}

	.toolbarmenu.listing li {
	&.checkbox > label {
	padding: 0 .5rem 0 2.75rem;
	}
	}

	.toolbarmenu li {
	input.icon-checkbox + label {
	font-size: 1.3rem;
	}
	}
	}

	html.ie11 .toolbar .dropbutton a.dropdown:before {
	font-size: 80%;
	}

	@media screen and (min-width: (@screen-width-small + 1px)) {
	ul.toolbar {
	flex: 1;
	}

	.toolbar {
	a.button {
	&:not(.disabled):focus,
	&:not(.disabled):hover {
	background-color: @color-toolbar-button-background-hover;
	}
	}

	&.listing li {
	display: inline-block;
	border: 0;

	a.button:before {
	height: 1.75rem;
	float: none;
	display: block;
	width: auto;
	margin: 0;
	}
	}

	.dropbutton {
	height: @layout-header-height;
	display: inline-block;

	&:hover {
	background-color: @color-toolbar-button-background-hover;
	}

	a.button.dropdown {
	min-width: 1.1rem;
	padding: 0 .3rem;

	&:hover {
	background-color: darken(@color-toolbar-button-background-hover, 5%);
	}

	&:before {
	height: @layout-header-height;
	line-height: 4.2;
	}
	}
	}
	}

	.toolbar.content-frame-navigation {
	display: none !important;
	}

	.header a.button.icon {
	&:not(.disabled):focus,
	&:not(.disabled):hover {
	background-color: @color-toolbar-button-background-hover;
	outline: 0;
	}

	&:before {
	margin: 0;
	}
	}
	}

	@media screen and (max-width: @screen-width-small) {
	body > #layout > div > .toolbar.footer {
	justify-content: space-around;

	& > * {
	flex-grow: 1;
	}

	.buttons {
	display: flex;
	justify-content: space-around;
	}

	.listselectors > * {
	flex-grow: 1;
	}
	}
	}
	diff --git a/skins/elastic/templates/includes/menu.html b/skins/elastic/templates/includes/menu.html
	index 87bd4de7b..2579488a0 100644
	--- a/skins/elastic/templates/includes/menu.html
	+++ b/skins/elastic/templates/includes/menu.html
	@@ -1,26 +1,37 @@
	<div class="menu">
	<h2 id="aria-label-tasknav" class="voice"><roundcube:label name="arialabeltasknav" /></h2>
	<div class="popover-header">
	- <a class="button icon cancel"><roundcube:label name="close" /></a>
	+ <roundcube:object name="logo" src="/images/logo.png" 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">
	<span class="action-buttons">
	- <roundcube:button command="compose" type="link" class="button compose"
	- label="compose" title="writenewmessage" innerclass="inner"
	- data-fab="true" data-fab-task="mail" data-fab-action="none" />
	+ <roundcube:if condition="env:action == 'compose' and env:task == 'mail'" />
	+ <roundcube:button command="compose" type="link" class="button compose selected"
	+ label="compose" title="writenewmessage" innerclass="inner" />
	+ <roundcube:else />
	+ <roundcube:button command="compose" type="link" class="button compose"
	+ label="compose" title="writenewmessage" innerclass="inner"
	+ data-fab="true" data-fab-task="mail" data-fab-action="none" />
	+ <roundcube:endif />
	</span>
	- <roundcube:button command="mail" label="mail" type="link" innerClass="inner"
	- class="button mail" classAct="button mail" classSel="button mail selected" />
	+ <roundcube:if condition="env:action == 'compose' and env:task == 'mail'" />
	+ <roundcube:button command="mail" label="mail" type="link" innerClass="inner"
	+ class="button mail" />
	+ <roundcube:else />
	+ <roundcube:button command="mail" label="mail" type="link" innerClass="inner"
	+ class="button mail" classSel="button mail selected" />
	+ <roundcube:endif />
	<roundcube:button command="addressbook" label="contacts" type="link" innerClass="inner"
	- class="button addressbook" classAct="button addressbook" classSel="button addressbook selected" />
	+ class="button addressbook" classSel="button addressbook selected" />
	<roundcube:container name="taskbar" id="taskmenu" />
	<roundcube:button command="settings" label="settings" type="link" innerClass="inner"
	- class="button settings" classAct="button settings" classSel="button settings selected" />
	+ class="button settings" classSel="button settings selected" />
	<span class="special-buttons">
	<roundcube:button name="about" label="about" type="link"
	class="button about" innerClass="inner" onclick="UI.about_dialog(this)" />
	<roundcube:button command="logout" label="logout" type="link"
	class="button logout" innerClass="inner" />
	</span>
	</div>
	</div>

File Metadata

Mime Type: text/x-diff
Expires: Sat, Apr 18, 10:11 AM (4 h, 36 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 435642
Default Alt Text: (84 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions