No OneTemporary
Actions

Size

91 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/less-build.sh b/less-build.sh
	index 08bbace5..be63e9f6 100755
	--- a/less-build.sh
	+++ b/less-build.sh
	@@ -1,9 +1,6 @@
	#!/bin/sh

	# First you have to link/copy /skins directory from Roundcube repo
	# into ./skins here

	-# Note: You can remove -x option to generate non-minified file
	-# (remember to remove ".min" from the output file name)
	-
	-lessc --relative-urls -x plugins/libkolab/skins/elastic/libkolab.less > plugins/libkolab/skins/elastic/libkolab.min.css
	+lessc --clean-css="--s1 --advanced" --rewrite-urls=all plugins/libkolab/skins/elastic/libkolab.less > plugins/libkolab/skins/elastic/libkolab.min.css
	diff --git a/plugins/libkolab/skins/elastic/include/calendar.less b/plugins/libkolab/skins/elastic/include/calendar.less
	index 479803ef..0d553247 100644
	--- a/plugins/libkolab/skins/elastic/include/calendar.less
	+++ b/plugins/libkolab/skins/elastic/include/calendar.less
	@@ -1,1309 +1,1310 @@
	/**
	* Kolab core library
	*
	* This file contains Elastic skin styles for calendar plugin.
	*
	* @author Aleksander Machniak <machniak@kolabsys.com>
	*
	* Copyright (C) 2012-2018, Kolab Systems AG <contact@kolabsys.com>
	*
	* This program is free software: you can redistribute it and/or modify
	* it under the terms of the GNU Affero General Public License as
	* published by the Free Software Foundation, either version 3 of the
	* License, or (at your option) any later version.
	*
	* This program is distributed in the hope that it will be useful,
	* but WITHOUT ANY WARRANTY; without even the implied warranty of
	* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
	* GNU Affero General Public License for more details.
	*
	* You should have received a copy of the GNU Affero General Public License
	* along with this program. If not, see <http://www.gnu.org/licenses/>.
	*/

	.menu {
	a.calendarlink:before {
	content: @fa-var-calendar-alt;
	}

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

	// Icon for resources in autocompletion list
	.listing.iconized li.resource > i:before {
	content: @fa-var-cube;
	}

	a.button {
	&.today:before {
	.font-icon-regular(@fa-var-calendar);
	}

	&.date:before {
	.font-icon-regular(@fa-var-calendar-alt);
	}
	}

	.listing {
	li {
	& > div {
	&.calendar {
	.calname:before {
	&:extend(.font-icon-class);
	content: @fa-var-calendar-alt;
	}

	.actions {
	padding-right: .25rem;

	:last-child {
	margin-right: 0;
	}
	}
	}

	&.calendar.cal---invitation--pending .calname:before,
	&.calendar.cal---invitation--declined .calname:before {
	.font-icon-regular(@fa-var-calendar-alt);
	}

	&.calendar.cal-__bdays__ .calname:before {
	content: @fa-var-birthday-cake;
	}

	&.calendar.cal---invitation--pending,
	&.calendar.cal---invitation--declined,
	&.calendar.cal-__bdays__ {
	font-style: italic;

	a.calname {
	padding-right: 2.5em;
	}

	.count {
	right: 4.2em;
	font-style: normal;
	}
	}
	}

	// Calednars list element (color indicator) used in Larry
	span.handle {
	display: none;
	}
	}
	}

	#calendarcategories {
	.input-group:not(:last-child) {
	margin-bottom: .25rem;
	}
	}

	fieldset.categories .input-group {
	.minicolors-input {
	border-radius: 0;
	}

	.minicolors + .input-group-append {
	margin-left: 0;
	}

	a.button.create {
	&:before {
	&:extend(.font-icon-class);
	content: @fa-var-plus;
	line-height: 1;
	}
	}
	}

	.calendar-invitebox {
	& > i.icon:before {
	content: @fa-var-calendar !important;
	}
	}

	.calendar-agenda-preview {
	display: none;
	margin-top: .5rem;
	border-top: 1px solid #ddd;

	h3 {
	margin-top: .5rem;
	}

	.event-row {
	white-space: nowrap;
	- .overflow-ellipsis;
	+ .overflow-ellipsis();

	&.current {
	color: #333;
	font-weight: bold;
	}

	&.no-event {
	font-style: italic;
	}

	&.fc-invitation-needs-action {
	color: @color-black-shade-text;

	.event-title {
	font-style: italic;
	}
	}
	}

	.event-title {
	padding-left: .5rem;
	}

	.event-date {
	}
	}

	#calendar.content {
	- overflow: hidden !important; // fullcalendar widget implements scrolling on its own
	+ // fullcalendar widget implements scrolling on its own
	+ overflow: hidden !important;
	position: relative;
	}

	.calendar-datepicker {
	// overwrite jQuery-UI datepicker styles
	.ui-datepicker {
	margin: 0 !important;
	border: 0;
	border-radius: 0;
	width: auto;
	min-width: auto !important;
	font-size: .9rem;
	background-color: @color-black-shade-bg;

	table {
	margin: 0;
	}

	td a {
	font-size: .9rem !important;
	}
	}

	.ui-datepicker-header {
	background-color: @color-black-shade-bg;
	border-top: 1px solid @color-layout-border;
	}

	.ui-dialog & {
	.ui-datepicker {
	background: transparent;
	}

	.ui-datepicker-header {
	background: transparent;
	border: 0;
	}

	td a {
	line-height: 3em !important;
	font-size: 1rem !important;
	}
	}
	}

	// Fullcalendar styles
	@import "fullcalendar";

	@color-calendar-border: @color-layout-border;
	@color-calendar-free-bg: fadeout(@color-black-shade-text, 80%);
	@color-calendar-today: fadeout(@color-warning, 80%);
	@color-event-default: #c00;

	.fc {
	body.quickview-active & .fc-scroller {
	background: data-uri("image/svg+xml;charset=utf-8", "../images/eye.svg") center no-repeat;
	background-size: 50%;
	}

	.fc-header-toolbar {
	display: flex;
	background-color: @color-black-shade-bg;
	margin: 0;

	& > * > * {
	float: none;
	margin: 0;
	}
	}

	.fc-left {
	order: 1;

	.fc-button-group {
	display: none;
	}
	}

	.fc-center {
	flex: 1;
	order: 2;
	text-align: center;
	padding: .25rem;

	h2 {
	margin: 0;
	color: @color-black-shade-text;
	white-space: nowrap;
	font-size: 1.25rem;
	font-weight: bold;
	}
	}

	.fc-right {
	order: 3;
	text-align: right;

	.fc-button {
	display: none;
	}
	}

	button {
	height: unset;
	padding: .3rem .75rem;
	}

	button.prev:before {
	&:extend(.font-icon-class);
	content: @fa-var-angle-left;
	margin: 0 !important;
	line-height: 1;
	}

	button.next:before {
	&:extend(.font-icon-class);
	content: @fa-var-angle-right;
	margin: 0 !important;
	line-height: 1;
	}

	.btn-group {
	padding: .5rem;
	margin: 0;
	}

	.fc-type-freebusy {
	opacity: 0.6;

	.fc-title {
	position: absolute;
	top: -5000px;
	}

	td {
	color: #999;
	}
	}

	.fc-event-dot {
	background-color: @color-event-default;
	}

	a.fc-event, a.fc-event:hover {
	color: #fff;
	}

	.fc-event {
	font-size: 13px;
	background-color: @color-event-default;
	border-color: @color-event-default;

	.fc-title {
	font-weight: bold;
	}

	.fc-bg {
	opacity: .15;
	margin-top: 1.1rem;
	}

	&.fc-invitation-needs-action,
	&.fc-invitation-tentative,
	&.fc-invitation-declined {
	border: 1px dashed #999;
	}

	&.fc-event-ns-other.fc-invitation-declined {
	opacity: 0.7;

	.fc-title {
	text-decoration: line-through;
	}
	}

	&.fc-invitation-tentative .fc-bg {
	background: url(data:image/gif;base64,R0lGODlhCAAIAPABAOuJAP///yH/C1hNUCBEYXRhWE1QAT8AIfkEBQAAAQAsAAAAAAgACAAAAg4Egmipx+ZaDPCtVPFNBQA7) 0 0 repeat #fff;
	}

	&.fc-invitation-needs-action .fc-bg {
	background: url(data:image/gif;base64,R0lGODlhCAAIAPABAFdXx////yH/C1hNUCBEYXRhWE1QAT8AIfkEBQAAAQAsAAAAAAgACAAAAg4Egmipx+ZaDPCtVPFNBQA7) 0 0 repeat #fff;
	}

	&.fc-invitation-declined .fc-bg {
	background: url(data:image/gif;base64,R0lGODlhCAAIAPABAMwAAP///yH/C1hNUCBEYXRhWE1QAT8AIfkEBQAAAQAsAAAAAAgACAAAAg4Egmipx+ZaDPCtVPFNBQA7) 0 0 repeat #fff;
	}
	}

	.fc-list-view {
	tr.fc-invitation-tentative,
	tr.fc-invitation-declined,
	tr.fc-invitation-needs-action {
	color: #888;

	.fc-event-dot {
	background-color: #888;
	}
	}
	}

	.fc-needs-action,
	.fc-declined,
	.cal-event-status-cancelled {
	opacity: 0.6;
	}

	.fc-time i {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-left: .25rem;

	&:before {
	&:extend(.font-icon-class);
	font-size: 1em;
	line-height: 1;
	margin-top: .1rem;
	}

	&.fc-icon-recurring:before {
	.font-icon-regular(@fa-var-clone);
	}

	&.fc-icon-alarms:before {
	content: @fa-var-bell;
	}

	&.fc-icon-sensitive:before {
	content: @fa-var-lock;
	}
	}

	.fc-event-temp {
	opacity: 0.4;
	}

	.fc-nonbusiness {
	background-color: @color-calendar-free-bg;
	}

	.fc-day.fc-today {
	background: @color-calendar-today !important;
	}

	.fc-now-indicator {
	border-color: @color-success;
	border-width: 1.5px;
	}

	.fc-list-item,
	.fc-list-item:hover td {
	background: transparent;
	}

	.fc-list-item td,
	.fc-list-item a {
	cursor: default;
	}

	.fc-list-item-title {
	font-weight: bold;
	}

	.fc-list-table td {
	padding: .5rem;
	}

	.fc-list-heading td {
	background: fadeout(@color-black-shade-text, 90%);
	}

	.fc-list-empty {
	display: none;
	}

	.fc-more {
	color: @color-link !important;
	white-space: nowrap;
	}

	.fc-axis,
	.fc-day-number,
	.fc-week-number,
	.fc-day-header,
	.fc-week-header {
	color: @color-black-shade-text;
	font-size: .95rem;
	padding: .15rem !important;
	}

	.fc-week-number {
	text-align: center;
	}

	.fc-popover {
	border-radius: .3rem;

	.fc-header {
	color: @color-black-shade-text;
	font-size: .95rem;
	font-weight: bold;
	}

	.fc-icon-x::after {
	top: 3px;
	}
	}

	// remove redundant borders
	.fc-view.fc-widget-content,
	td.fc-head-container {
	border-left-width: 0;
	}

	.fc-list-view,
	.fc-body > tr > .fc-widget-content,
	.fc-body .fc-bg-sceleton .fc-widget-content,
	.fc-body .fc-bg .fc-widget-content {
	border-bottom-width: 0;
	}

	// fullcalendar style overrides for printing
	.print-content & {
	.fc-header-toolbar {
	background-color: #fff;
	}

	.fc-center h2 {
	color: #000;
	padding-bottom: .75rem;
	font-size: 1.5rem !important;
	}

	.fc-day.fc-today {
	background: transparent !important;
	}

	a.fc-event {
	color: #000;
	background-color: #fff !important;
	}

	.fc-event-description {
	white-space: pre-wrap;
	font-size: 90%;
	}

	.fc-event-location {
	width: 20%;
	}

	.fc-event-row-secondary td {
	border: 0;
	padding-top: 0 !important;
	}

	.fc-scroller {
	overflow: visible !important;
	height: auto !important;
	}

	// Re-add removed borders
	.fc-view.fc-widget-content,
	td.fc-head-container {
	border-left-width: 1px;
	}

	.fc-list-view,
	.fc-agenda-view,
	.fc-month-view {
	border-bottom: 1px solid #ddd;
	}
	}

	@media screen and (max-width: @screen-width-small) {
	.fc-left {
	display: block;
	width: 100%;
	padding: 0;

	button {
	flex: 1 1 auto;
	border-radius: 0;
	}

	.btn-group {
	padding: 0;
	display: flex;
	}
	}

	.fc-list-table .fc-event-location,
	.fc-center,
	.fc-right {
	display: none;
	}
	}

	@media screen and (min-width: (@screen-width-small + 1px)) and (max-width: 920px) {
	.fc-center {
	- .overflow-ellipsis;
	+ .overflow-ellipsis();
	flex: 1;

	h2 {
	font-size: 1rem;
	line-height: 1;
	padding-top: .45rem;
	}
	}

	.fc-left,
	.fc-right {
	.btn {
	padding-left: .5rem;
	padding-right: .5rem;
	}
	}
	}
	}

	// Add scrollbar on iOS
	html:matches(.ipad,.iphone) {
	.ui-dialog-content:not(.iframe),
	#fish-eye-view,
	.fc-scroller {
	&::-webkit-scrollbar {
	-webkit-appearance: none;
	}

	&::-webkit-scrollbar:vertical {
	width: .6rem;
	}

	&::-webkit-scrollbar:horizontal {
	height: .6rem;
	}

	&::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, .4);
	border-radius: .3rem;
	border: 2px solid #fff;
	}
	}
	}

	body.task-calendar {
	#print-layout {
	#calendar-view-selector {
	float: right;
	padding-top: .25rem;
	}

	#calendarlist {
	margin-top: 1rem;

	&, ul {
	list-style: none;
	padding: 0;
	}

	li {
	display: inline-block;
	white-space: nowrap;
	}

	ul, li, div {
	float: left;
	}

	div {
	margin-right: 2rem;
	}

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

	input,
	span.actions,
	span.handle {
	display: none;
	}
	}
	}

	@media screen and (min-width: (@screen-width-small + 1px)) {
	#layout-sidebar {
	flex: 2;
	max-width: 400px;
	min-width: 240px;
	}
	}

	// improve datepicker
	.ui-datepicker {
	td {
	width: 12.5%;
	}

	.ui-datepicker-week-col {
	color: @color-black-shade-border;
	text-align: center;
	}
	}

	.ui-datepicker-inline {
	.ui-datepicker-week-col {
	color: @color-link;
	cursor: pointer;
	}

	.ui-datepicker-activerange {
	background-color: @color-list-selected-background;
	}
	}
	}

	#timezone-display {
	font-size: .9rem;
	color: @color-black-shade-text;
	}

	#agendaoptions {
	padding: 0 .5rem .5rem .5rem;
	display: flex;
	background-color: @color-black-shade-bg;

	.input-group {
	padding-right: .5rem;
	flex-wrap: nowrap;
	// width: 50%;

	&:last-child {
	padding-right: 0;
	}
	}

	select {
	min-width: 7em;
	}

	.input-group-prepend {
	overflow: hidden;
	margin-bottom: 0;

	span {
	display: block;
	- .overflow-ellipsis;
	+ .overflow-ellipsis();
	}
	}
	}

	#eventshow {
	margin: 0;

	.event-title {
	font-size: 1.5rem;
	font-weight: bold;
	}

	.event-location {
	- .overflow-ellipsis;
	+ .overflow-ellipsis();
	white-space: nowrap;
	}

	.event-description {
	margin: 1rem 0;
	}

	.event-attendees {
	margin-bottom: 1rem;

	.attendee {
	margin-right: .25rem;
	}
	}

	.event-partstat {
	& > span {
	display: flex;
	}

	.rsvp-status {
	&:before {
	display: inline;
	float: none;
	}
	}

	.changersvp {
	cursor: pointer;
	font-size: 1.2rem;
	margin-left: 1em;

	&:before {
	&:extend(.font-icon-class);
	content: @fa-var-pen-square;
	float: none;
	display: inline;
	line-height: 1;
	}
	}

	.inner {
	display: none;
	}
	}
	}

	#eventedit {
	.edit-attendees-table td {
	padding-top: .15rem;

	&.role {
	padding-left: 0;
	width: 9em;
	}
	}
	}

	#fish-eye-view {
	padding: 0;

	@media screen and (min-width: (@screen-width-small + 1px)) {
	border-bottom: 1px solid @color-calendar-border;
	}
	}

	@color-availability-unknown: #bbb; // Larry: #ddd;
	@color-availability-free: @color-success; // Larry: #abd640;
	@color-availability-busy: @color-error; // Larry: #e26569;
	@color-availability-tentative: #8383fc;
	@color-availability-out-of-office: #fbaa68;

	.availability {
	span {
	margin-right: .5rem;
	color: @color-black-shade-text;

	&:before {
	&:extend(.font-icon-class);
	content: @fa-var-square;
	display: inline;
	float: none;
	}

	&.legend:before {
	font-size: 1em;
	}

	&.loading:before {
	- .animated-icon-class;
	+ .animated-icon-class();
	content: @fa-var-circle-notch;
	display: block;
	line-height: 1;
	}

	&.unknown:before {
	color: @color-availability-unknown;
	}

	&.free:before {
	color: @color-availability-free;
	}

	&.busy:before {
	color: @color-availability-busy;
	}

	&.tentative:before {
	color: @color-availability-tentative;
	}

	&.out-of-office:before {
	color: @color-availability-out-of-office;
	}
	}
	}

	// fixes additional checkbox in Elastic's .datetime widget
	.datetime {
	.custom-switch {
	padding-left: .5rem;

	label {
	line-height: 2;
	margin-top: .2rem;
	}
	}

	input {
	width: 10em !important;
	}

	@media screen and (max-width: 420px) {
	input {
	width: 8em !important;

	& + input {
	width: 6em !important;
	}
	}
	}
	}

	.calendar-scheduler {
	.nav {
	align-items: center;

	button:first-child {
	margin-right: .25rem;
	}

	& > div {
	white-space: nowrap;
	}

	@media screen and (max-width: 420px) {
	button {
	padding-left: .5rem;
	padding-right: .5rem;
	}
	}
	}

	.schedule-buttons {
	.prev-slot:before {
	content: @fa-var-chevron-left;
	}

	.next-slot:after {
	&:extend(.font-icon-class);
	content: @fa-var-chevron-right;
	display: inline-block;
	float: none;
	margin-right: 0;
	}
	}

	.schedule-options {
	flex: 1;
	margin-left: 1rem;

	html.layout-phone & {
	order: 100;
	margin-left: 0;
	}
	}

	.schedule-nav {
	flex: 1;
	margin-left: .3rem;
	text-align: right;

	button {
	line-height: 1.8;
	}
	}

	.schedule-range {
	width: 60%;
	margin-top: 2rem;

	html.layout-phone & {
	margin: 0;
	}
	}

	.schedule-legend {
	.attendee {
	margin-right: .5rem;
	}
	}

	.attendees-list {
	position: relative;

	a.attendee-role-toggle {
	position: absolute;
	left: 0;
	display: inline-block;
	width: 1em;
	cursor: pointer;
	}

	div.attendee {
	border-top: 1px solid @color-list-border;
	line-height: 1.7rem;
	height: 1.8rem;
	}

	.attendee {
	white-space: nowrap;

	&.spacer {
	height: 10px;
	}

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

	&.total {
	font-weight: bold;
	}

	&.total,
	&.spacer {
	&:before {
	display: none;
	}
	}
	}
	}

	.schedule-table {
	table-layout: fixed;

	th {
	border-top: 0;
	}

	td.attendees {
	width: 25%;
	overflow: hidden;
	border-top: 0;

	html.layout-phone & {
	width: 35%;
	}

	.attendees-list {
	border-bottom: 1px solid @color-table-border;
	}
	}

	td.times {
	width: auto;
	border-top: 0;

	table {
	margin: 0;
	}

	td {
	height: 1.8rem;
	border-top: 1px solid @color-list-border;
	white-space: nowrap;
	}
	}

	div.scroll {
	position: relative;
	overflow: auto;
	}

	.timesheader {
	height: 1.4rem;
	border-top: 1px solid @color-table-border;
	}

	.boxtitle {
	margin: 0;
	padding: 0;
	font-size: 1rem;
	font-weight: bold;
	padding-top: .5rem;
	line-height: 2;
	}

	td {
	padding: 4px;
	}

	tbody td {
	padding: 0;

	div {
	height: 100%;
	}
	}

	tr.spacer td {
	padding: 0;
	height: 10px;
	}

	tr.dates th[colspan="1"] {
	min-width: 48px;
	max-width: 48px;
	text-align: center;
	font-size: .7rem;
	line-height: 2.9;
	}

	tr.times td {
	cursor: pointer;
	min-width: 48px;
	max-width: 48px;
	font-size: .7rem;
	text-align: center;
	color: @color-link;
	height: 1.4rem;
	padding: 0 .1rem;
	vertical-align: middle;
	border-top: 1px solid @color-table-border;
	border-left: 1px solid @color-list-border;
	}

	.fbcontent {
	td {
	border-left: 1px solid @color-list-border;
	}

	&:last-child td {
	border-bottom: 1px solid @color-table-border;
	}
	}

	div.unknown {
	background-color: @color-availability-unknown;
	}

	div.free {
	background-color: @color-availability-free;
	}

	div.busy {
	background-color: @color-availability-busy;
	}

	div.tentative {
	background-color: @color-availability-tentative;
	}

	div.out-of-office {
	background-color: @color-availability-out-of-office;
	}

	div.all-busy,
	div.all-tentative,
	div.all-out-of-office {
	overflow: hidden;

	// This span imitates a slanting line across the parent element
	span {
	display: block;
	width: 300%;
	height: 300%;
	border: 1px solid #fff;
	background: darken(@color-availability-busy, 10%);
	transform: rotate(42deg) translate(2%);
	}

	&.w10 span {
	display: none;
	}

	&.w20 span,
	&.w25 span {
	transform: rotate(17deg) translate(-9%);
	}

	&.w30 span {
	transform: rotate(28deg) translate(-7%);
	}

	&.w33 span {
	transform: rotate(32deg) translate(-5%);
	}

	&.w40 span {
	transform: rotate(36deg) translate(-3%);
	}

	&.w60 span {
	transform: rotate(48deg) translate(6%);
	}

	&.w67 span {
	transform: rotate(52deg) translate(9%);
	}

	&.w70 span,
	&.w75 span {
	transform: rotate(55deg) translate(12%, 30%);
	}

	&.w80 span {
	transform: rotate(56deg) translate(13%, 30%);
	}

	&.w90 span {
	transform: rotate(59deg) translate(16%, 30%);
	}

	&.w100 span {
	transform: rotate(62deg) translate(19%, 30%);
	}
	}

	div.all-tentative span {
	background: darken(@color-availability-tentative, 10%);
	}

	div.all-out-of-office span {
	background: darken(@color-availability-out-of-office, 10%);
	}
	}
	}

	#schedule-event-time {
	position: absolute;
	border-radius: .3rem;
	cursor: move;
	border: 2px solid #444;
	background-color: rgba(0, 0, 0, .3);
	}

	.resources-dialog {
	.resource-selection {
	flex: 4;
	min-width: 300px;
	}

	.resource-content {
	flex: 10;
	margin-left: 1em;
	}

	.listing li.resource > a {
	color: @color-font;

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

	.slot-nav {
	display: none; // TODO
	}
	}

	#resource-availability {
	height: 100%;

	.fc {
	height: 100%;
	overflow: hidden;
	position: relative;
	border-bottom: 1px solid #ddd;
	}

	.fc-view {
	border-left: 1px solid #ddd;
	}

	.fc-header-toolbar {
	height: 0;
	}
	}

	.standalone-invitebox {
	margin: 0 auto;
	max-width: 500px;
	width: 95%;
	display: flex;
	flex-direction: column;
	top: 15vh;
	position: relative;

	#logo {
	max-height: 90px;
	}

	.invitebox {
	margin-top: 3em !important;
	}
	}

	.searchbar a.button.date {
	@media screen and (min-width: (@screen-width-small + 1px)) {
	display: none;
	}
	}

	#rcmfd_alarmvalue {
	max-width: 80px;
	}

	@media screen and (max-width: @screen-width-small) {
	#agendaoptions {
	padding-top: .5rem;
	}

	.calendar-scheduler {
	.schedule-range {
	width: 100%;
	}
	}

	#layout-sidebar .calendar-datepicker {
	display: none;
	}

	.resources-dialog {
	.resource-content {
	display: none;
	margin: 0;
	}

	.resource-content {
	ul {
	margin: 1em 1em 0 1em;
	}
	}
	}

	#resource-availability {
	margin: 0 1em;
	}
	}

	body.task-calendar .header-title {
	position: relative;

	.tz {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	line-height: 2;
	font-size: .8rem;
	font-weight: normal;
	color: @color-black-shade-text;
	}
	}
	diff --git a/plugins/libkolab/skins/elastic/include/darkmode.less b/plugins/libkolab/skins/elastic/include/darkmode.less
	new file mode 100644
	index 00000000..3f018b2a
	--- /dev/null
	+++ b/plugins/libkolab/skins/elastic/include/darkmode.less
	@@ -0,0 +1,168 @@
	+/**
	+ * Kolab core library
	+ *
	+ * This file contains Elastic skin dark mode styles for all Kolab plugins
	+ *
	+ * @author Aleksander Machniak <machniak@kolabsys.com>
	+ *
	+ * Copyright (C) 2012-2018, Kolab Systems AG <contact@kolabsys.com>
	+ *
	+ * This program is free software: you can redistribute it and/or modify
	+ * it under the terms of the GNU Affero General Public License as
	+ * published by the Free Software Foundation, either version 3 of the
	+ * License, or (at your option) any later version.
	+ *
	+ * This program is distributed in the hope that it will be useful,
	+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
	+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
	+ * GNU Affero General Public License for more details.
	+ *
	+ * You should have received a copy of the GNU Affero General Public License
	+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
	+ */
	+
	+html.dark-mode {
	+ // Use icons-only on taskmenu with small screen height
	+ @media screen and (max-height: 750px) and (min-width: (@screen-width-small + 1px)) {
	+ #taskmenu a {
	+ width: @layout-menu-width-sm - 1px;
	+ }
	+ }
	+
	+ .watermark {
	+ background-color: @color-dark-background;
	+ background-blend-mode: soft-light;
	+
	+ &:before {
	+ background: none;
	+ }
	+ }
	+
	+ #filelistcontainer,
	+ .fc-scroller {
	+ scrollbar-width: thin;
	+ }
	+
	+ .fc {
	+ .fc-header-toolbar {
	+ background-color: @color-dark-list-selected-background;
	+ }
	+
	+ #timezone-display,
	+ .fc-center h2 {
	+ color: @color-dark-font;
	+ }
	+ }
	+
	+ .filelist tr.session.owner > td.name::after,
	+ .rsvp-status:not(.accepted):not(.tentative):not(.declined)::before,
	+ .resources-dialog .listing li.resource > a {
	+ color: @color-dark-font;
	+ }
	+
	+ .fc-unthemed th,
	+ .fc-unthemed td,
	+ .fc-unthemed .fc-divider,
	+ .fc-unthemed .fc-row,
	+ .fc-unthemed .fc-content,
	+ .fc-unthemed .fc-popover,
	+ .fc-unthemed .fc-list-view,
	+ .fc-unthemed .fc-list-heading td,
	+ #tasklist li.taskitem > div,
	+ #tasklist li.taskitem > span {
	+ border-color: @color-dark-list-border;
	+ }
	+
	+ .files-dialog .selection-content,
	+ .calendar-scheduler .schedule-table td.times td,
	+ .calendar-scheduler .attendees-list div.attendee,
	+ .calendar-scheduler .schedule-table .timesheader,
	+ .calendar-scheduler .schedule-table td.attendees .attendees-list,
	+ .fc-unthemed th,
	+ .fc-unthemed td {
	+ border-color: @color-dark-border;
	+ }
	+
	+ #resource-availability .fc,
	+ #resource-availability .fc-view {
	+ border-color: @color-dark-border;
	+ }
	+
	+ .selection-dialog .form-addon,
	+ .selection-dialog .header,
	+ .selection-dialog .selection-list,
	+ .edit-attendees-table th {
	+ border-color: @color-dark-border !important;
	+ }
	+
	+ .selection-dialog .listing ul,
	+ .selection-dialog .form-addon,
	+ .selection-dialog .header {
	+ background-color: transparent;
	+ }
	+
	+ .fc-unthemed .fc-divider,
	+ .fc-unthemed .fc-popover .fc-header,
	+ .fc-unthemed .fc-list-heading td,
	+ body.task-calendar .ui-datepicker-inline .ui-datepicker-activerange,
	+ .listing li.selected > div > *,
	+ #tasklist li.taskitem div.taskhead.selected {
	+ color: @color-dark-list-selected;
	+ background-color: @color-dark-list-selected-background;
	+ }
	+
	+ #folder-mount-form td.source.selected {
	+ background-color: @color-dark-list-selected-background;
	+ }
	+
	+ #tagsform option,
	+ .tagedit-list li.tagedit-listelement-new input {
	+ color: @color-dark-input;
	+ }
	+
	+ .fc .fc-axis,
	+ .fc .fc-day-number,
	+ .fc .fc-week-number,
	+ .fc .fc-day-header,
	+ .fc .fc-week-header,
	+ .formcontent.text-only .faded *,
	+ .availability span,
	+ .invitebox td.label,
	+ .invitebox .rsvp-status.hint,
	+ .calendar-agenda-preview .event-row.current,
	+ #tasklist span.date,
	+ #kolabnoteslist td.date,
	+ #notedetailstitle .dates {
	+ color: @color-dark-hint;
	+ }
	+
	+ .invitebox .folder-select select {
	+ background-color: @color-dark-input-background;
	+ }
	+
	+ .tagedit-list[tabindex="-1"] {
	+ border-color: @color-dark-input-border-focus;
	+ box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow;
	+ background: @color-dark-input-background-focus;
	+ }
	+
	+ #tasklist .progressbar .progressvalue {
	+ border-color: @color-dark-warning;
	+ }
	+
	+ .listing {
	+ li > div.readonly a:first-child,
	+ li.readonly:not(.virtual) > div a:first-child {
	+ &:after {
	+ color: @color-dark-font;
	+ background-color: @color-dark-background;
	+ }
	+ }
	+ }
	+
	+ .dialog-message {
	+ opacity: 1;
	+ color: @color-dark-font;
	+ background-color: @color-dark-warning;
	+ }
	+}
	diff --git a/plugins/libkolab/skins/elastic/include/kolab_activesync.less b/plugins/libkolab/skins/elastic/include/kolab_activesync.less
	index 95700df9..98c4fa52 100644
	--- a/plugins/libkolab/skins/elastic/include/kolab_activesync.less
	+++ b/plugins/libkolab/skins/elastic/include/kolab_activesync.less
	@@ -1,53 +1,53 @@
	/**
	* Kolab core library
	*
	* This file contains Elastic skin styles for kolab_activesync plugin.
	*
	* @author Aleksander Machniak <machniak@kolabsys.com>
	*
	* Copyright (C) 2012-2018, Kolab Systems AG <contact@kolabsys.com>
	*
	* This program is free software: you can redistribute it and/or modify
	* it under the terms of the GNU Affero General Public License as
	* published by the Free Software Foundation, either version 3 of the
	* License, or (at your option) any later version.
	*
	* This program is distributed in the hope that it will be useful,
	* but WITHOUT ANY WARRANTY; without even the implied warranty of
	* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
	* GNU Affero General Public License for more details.
	*
	* You should have received a copy of the GNU Affero General Public License
	* along with this program. If not, see <http://www.gnu.org/licenses/>.
	*/

	.listing.iconized li {
	&.activesync > a:before {
	content: @fa-var-rss-square;
	}
	}

	#devices-table {
	td:not(.selection) {
	display: flex;

	&:before {
	&:extend(.font-icon-class);
	content: @fa-var-rss-square; // TODO: mobile icon is not free
	}

	span {
	- .overflow-ellipsis;
	+ .overflow-ellipsis();
	}
	}

	.devicealias {
	flex: 1;
	}

	.devicetype {
	max-width: 40%;
	font-style: italic;
	padding-left: .5em;
	}
	}
	diff --git a/plugins/libkolab/skins/elastic/include/kolab_files.less b/plugins/libkolab/skins/elastic/include/kolab_files.less
	index 401c1823..ad12f4cc 100644
	--- a/plugins/libkolab/skins/elastic/include/kolab_files.less
	+++ b/plugins/libkolab/skins/elastic/include/kolab_files.less
	@@ -1,525 +1,525 @@
	/**
	* Kolab core library
	*
	* This file contains Elastic skin styles for kolab_files plugin.
	*
	* @author Aleksander Machniak <machniak@kolabsys.com>
	*
	* Copyright (C) 2012-2018, Kolab Systems AG <contact@kolabsys.com>
	*
	* This program is free software: you can redistribute it and/or modify
	* it under the terms of the GNU Affero General Public License as
	* published by the Free Software Foundation, either version 3 of the
	* License, or (at your option) any later version.
	*
	* This program is distributed in the hope that it will be useful,
	* but WITHOUT ANY WARRANTY; without even the implied warranty of
	* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
	* GNU Affero General Public License for more details.
	*
	* You should have received a copy of the GNU Affero General Public License
	* along with this program. If not, see <http://www.gnu.org/licenses/>.
	*/

	a.btn.fromcloud:before,
	li > a.icon.saveas:before,
	a.button.filesaveall:before,
	a.button.saveas:before {
	&:extend(.font-icon-class);
	content: @fa-var-folder;
	}

	.menu {
	a.mount.storage:before {
	content: @fa-var-database;
	}

	a.open:before {
	content: @fa-var-eye;
	}

	a.cancel:before {
	content: @fa-var-times;
	}

	a.share:before {
	content: @fa-var-share-alt;
	}
	}

	.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link.options.add-folder {
	order: -1;

	&:before {
	content: @fa-var-plus;
	}
	}

	.folderlist {
	li.collection {
	a.name {
	padding-left: .5em;
	}

	&.audio a.name:before {
	.font-icon-solid(@fa-var-volume-up);
	}

	&.video a.name:before {
	.font-icon-solid(@fa-var-video);
	}

	&.image a.name:before {
	content: @fa-var-image;
	}

	&.document a.name:before {
	.font-icon-solid(@fa-var-book);
	}

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

	li.mailbox {
	a.subscription {
	cursor: pointer;
	// reset listing's link style
	padding: 0 !important;
	border-left: 0;
	width: auto;

	&:before {
	.font-icon-regular(@fa-var-bookmark); // TODO: better icon
	height: auto;
	color: @color-link;
	margin-right: .25rem;
	}

	&.subscribed:before {
	&:extend(.font-icon-class);
	.font-icon-solid(@fa-var-bookmark); // TODO: better icon
	}
	}
	}
	}

	#filelistcontainer {
	position: relative;
	}

	#filesuploadform {
	// force upload form position, otherwise it breaks layout
	position: absolute !important;
	}

	#filelistbox {
	height: 100%;

	&.droptarget {
	&.active {
	box-shadow: 0 0 2px 1px darken(@color-toolbar-button-background-hover, 20%) inset;
	}

	&.hover {
	box-shadow: 0 0 2px 1px darken(@color-toolbar-button-background-hover, 20%) inset;
	background-color: @color-toolbar-button-background-hover;
	}
	}
	}

	.filelist {
	thead {
	display: none;
	}

	td.options {
	display: none;
	}

	td.name {
	position: relative;
	}

	td.mtime {
	width: 11em;
	}

	td.size {
	text-align: right;
	width: 6em;
	}

	tr.session > td.name {
	padding-right: 2em;

	&:after {
	&:extend(.font-icon-class);
	content: @fa-var-users;
	color: @color-black-shade-border;
	position: absolute;
	right: .25em;
	top: 0;
	}
	}

	tr.session.invited > td.name:after {
	color: @color-success;
	}

	tr.session.owner > td.name:after {
	color: @color-black;
	}
	}

	@media screen and (max-width: @screen-width-xs) {
	.filelist {
	td.mtime {
	display: none;
	}
	}
	}

	.filelist tbody td.filename {
	& span {
	background: transparent !important;
	}

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

	&.pdf span:before,
	&.application_pdf span:before {
	content: @fa-var-file-pdf;
	}

	&.application_vnd_openxmlformats_officedocument_wordprocessingml_document span:before,
	&.application_vnd_openxmlformats_officedocument_wordprocessingml_template span:before,
	&.application_vnd_ms_word span:before,
	&.application_msword span:before {
	content: @fa-var-file-word;
	}

	&.application_vnd_ms_excel span:before,
	&.application_vnd_openxmlformats_officedocument_spreadsheetml_sheet span:before,
	&.application_vnd_openxmlformats_officedocument_spreadsheetml_template span:before,
	&.application_vnd_oasis_opendocument_spreadsheet span:before,
	&.application_vnd_oasis_opendocument_spreadsheet_template span:before {
	content: @fa-var-file-excel;
	}

	&.application_vnd_openxmlformats_officedocument_presentationml_presentation span:before,
	&.application_vnd_openxmlformats_officedocument_presentationml_template span:before,
	&.application_vnd_openxmlformats_officedocument_presentationml_slideshow span:before,
	&.application_vnd_ms_powerpoint span:before {
	content: @fa-var-file-powerpoint;
	}

	&.application_vnd_oasis_opendocument_text span:before {
	content: @fa-var-file-alt; // TODO
	}

	&.application_vnd_oasis_opendocument_presentation span:before,
	&.application_vnd_oasis_opendocument_presentation_template span:before {
	content: @fa-var-file-powerpoint; // TODO
	}

	&.tar span:before,
	&.application_zip span:before,
	&.application_x_7z_compressed span:before,
	&.application_x_ace span:before,
	&.application_x_arc span:before,
	&.application_x_arj span:before,
	&.application_x_bzip_compressed_tar span:before,
	&.application_x_lha span:before,
	&.application_x_rar span:before,
	&.application_x_tarz span:before,
	&.application_x_tzo span:before,
	&.application_x_zip span:before,
	&.application_x_zoo span:before {
	content: @fa-var-file-archive;
	}

	&.image span:before,
	&.image_png span:before,
	&.image_svg_xml span:before,
	&.image_jpeg span:before,
	&.image_jpeg2000 span:before,
	&.image_x_eps span:before,
	&.application_vnd_stardivision_draw span:before,
	&.application_vnd_sun_xml_draw span:before,
	&.application_vnd_sun_xml_draw_template span:before {
	content: @fa-var-file-image;
	}

	&.application_pgp_keys span:before,
	&.application_pkcs7_mime span:before {
	// TODO
	}

	&.audio span:before {
	content: @fa-var-file-audio;
	}

	&.video span:before {
	content: @fa-var-file-video;
	}

	&.ascii span:before,
	&.text_plain span:before {
	content: @fa-var-file-alt;
	}

	&.vcalendar span:before {
	// TODO
	}

	&.vcard span:before,
	&.text_x_vcard span:before {
	// TODO
	}

	&.text_html span:before {
	content: @fa-var-file-code;
	}

	&.style_css span:before {
	// TODO
	}

	&.text_csv span:before {
	// TODO
	}

	&.message_rfc822 span:before {
	// TODO
	}
	}

	#folder-mount-form {
	td.source {
	display: flex;
	align-items: flex-start;
	padding: .5rem;

	&.selected {
	background-color: @color-list-selected-background;
	}

	& > input {
	height: 32px;
	margin-right: .5rem;
	}

	& > div {
	flex: 1;
	}

	img {
	height: 32px;
	margin-right: .5rem;
	}

	.name {
	font-weight: bold;
	}

	.description {
	font-size: 90%;
	}

	table {
	margin-top: .5rem;
	}

	.form-group {
	margin-bottom: 0;
	}
	}

	.auth-options {
	margin-top: .5rem;

	& > label:before {
	line-height: 1;
	}
	}
	}

	.files-dialog {
	.selection-list {
	flex: 1;
	min-width: 220px;
	}

	.selection-content {
	flex: 2;

	@media screen and (min-width: (@screen-width-small + 1px)) {
	border: 1px solid @color-layout-border;
	border-left: 0;
	}
	}

	a.subscription {
	display: none;
	}

	@media screen and (max-width: @screen-width-small) {
	.selection-list {
	display: none;
	}
	}
	}

	.document-editor-header {
	.toolbar {
	text-align: left !important;
	flex: 1;

	a {
	text-align: center;
	}
	}

	a.button.icon.members:before {
	content: @fa-var-users;
	}

	#collaborators {
	order: 9;
	display: flex;
	margin-right: .5rem;
	margin-left: 2rem;

	a.button.add:before {
	&:extend(.font-icon-class);
	content: @fa-var-plus;
	}

	.inner {
	display: none;
	}
	}

	#doc-title {
	flex: 1;
	order: 8;

	input {
	display: inline;
	}
	}
	}

	.session-members {
	img.photo {
	width: 48px;
	height: 48px;
	min-width: 48px;
	overflow: hidden;
	background: url("@{skin-path}/images/contactpic.png") center center no-repeat #fff;
	background-size: cover;
	border-radius: 50%;
	border: solid 3px #eee;
	margin-left: .5rem;
	}

	ul {
	padding: 0;
	margin: 0;
	list-style-type: none;

	li {
	display: flex;
	align-items: center;
	}

	img.photo {
	margin-left: 0;
	margin-right: 1em;
	}
	}
	}

	.editors-dialog {
	table {
	th {
	border: 0;
	}

	tr:last-child td {
	border-bottom: 1px solid @color-layout-border;
	}

	td.options {
	width: 1%;

	a.delete:before {
	&:extend(.font-icon-class);
	content: @fa-var-trash-alt;
	display: inline;
	line-height: 1;
	}
	}
	}

	label {
	display: block;
	}
	}

	button.participant.add:before {
	content: @fa-var-user-plus;
	}

	.iframe-wrapper.file-type-audio,
	.iframe-wrapper.file-type-video {
	display: flex;
	align-items: center;
	justify-content: center;

	@media screen and (min-width: (@screen-width-small + 1px)) {
	padding: 1em;
	}
	}

	#shareform {
	table {
	td,th {
	padding-left: .15rem;
	max-width: 10vw; // needed for overflow
	- .overflow-ellipsis;
	+ .overflow-ellipsis();

	&:last-child {
	padding-right: .15rem;
	width: 1%;
	max-width: unset;
	}
	}

	td {
	vertical-align: middle;

	&.form {
	input {
	margin-bottom: .25rem;
	width: 100%;
	}
	}
	}

	tr + tr > td {
	border-top: 0;
	padding-bottom: .25rem;
	}

	button {
	padding: .185rem .75rem;
	width: 100%;
	}
	}
	}
	diff --git a/plugins/libkolab/skins/elastic/include/kolab_notes.less b/plugins/libkolab/skins/elastic/include/kolab_notes.less
	index 2d4fa4a7..bc856c2b 100644
	--- a/plugins/libkolab/skins/elastic/include/kolab_notes.less
	+++ b/plugins/libkolab/skins/elastic/include/kolab_notes.less
	@@ -1,97 +1,97 @@
	/**
	* Kolab core library
	*
	* This file contains Elastic skin styles for kolab_notes plugin.
	*
	* @author Aleksander Machniak <machniak@kolabsys.com>
	*
	* Copyright (C) 2012-2018, Kolab Systems AG <contact@kolabsys.com>
	*
	* This program is free software: you can redistribute it and/or modify
	* it under the terms of the GNU Affero General Public License as
	* published by the Free Software Foundation, either version 3 of the
	* License, or (at your option) any later version.
	*
	* This program is distributed in the hope that it will be useful,
	* but WITHOUT ANY WARRANTY; without even the implied warranty of
	* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
	* GNU Affero General Public License for more details.
	*
	* You should have received a copy of the GNU Affero General Public License
	* along with this program. If not, see <http://www.gnu.org/licenses/>.
	*/

	.menu {
	a.appendnote:before {
	content: @fa-var-sticky-note;
	}
	}

	// Fixes TinyMCE editor height=0 issue
	#noteform iframe {
	min-height: 10rem;
	}

	#notereferences {
	margin-top: .5rem;

	.attachmentslist a.delete {
	margin-left: .5rem;
	}
	}

	#notedetailstitle {
	.dates {
	color: @color-list-secondary;
	}
	}

	#print-layout {
	#notetitle {
	font-size: 1.5rem;
	line-height: 2;
	}

	#notetags {
	margin-bottom: .5rem;
	}

	#notecreated {
	margin-right: 2rem;
	}
	}

	#kolabnoteslist {
	tr {
	display: flex;
	}

	td.title {
	- .overflow-ellipsis;
	+ .overflow-ellipsis();
	flex: 1;

	&:before {
	&:extend(.font-icon-class);
	.font-icon-regular(@fa-var-sticky-note);
	}
	}

	td.date {
	overflow: unset;
	color: @color-list-secondary;
	font-style: italic;
	}
	}

	.kolabmessagenotes {
	& > i.icon:before {
	.font-icon-regular(@fa-var-sticky-note) !important;
	}

	& > a {
	- .overflow-ellipsis;
	+ .overflow-ellipsis();
	white-space: nowrap;
	display: block;
	text-decoration: none;
	}
	}
	diff --git a/plugins/libkolab/skins/elastic/include/kolab_tags.less b/plugins/libkolab/skins/elastic/include/kolab_tags.less
	index 527c84bf..71f6b7bc 100644
	--- a/plugins/libkolab/skins/elastic/include/kolab_tags.less
	+++ b/plugins/libkolab/skins/elastic/include/kolab_tags.less
	@@ -1,123 +1,116 @@
	/**
	* Kolab core library
	*
	* This file contains Elastic skin style of kolab_tags plugin.
	*
	* @author Aleksander Machniak <machniak@kolabsys.com>
	*
	* Copyright (C) 2012-2018, Kolab Systems AG <contact@kolabsys.com>
	*
	* This program is free software: you can redistribute it and/or modify
	* it under the terms of the GNU Affero General Public License as
	* published by the Free Software Foundation, either version 3 of the
	* License, or (at your option) any later version.
	*
	* This program is distributed in the hope that it will be useful,
	* but WITHOUT ANY WARRANTY; without even the implied warranty of
	* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
	* GNU Affero General Public License for more details.
	*
	* You should have received a copy of the GNU Affero General Public License
	* along with this program. If not, see <http://www.gnu.org/licenses/>.
	*/

	.menu {
	a.tags:before {
	content: @fa-var-tags;
	}

	a.tag:before,
	a.tag.remove:before,
	a.tag.remove.all:before {
	content: @fa-var-tag;
	}
	}

	#taglist {
	li {
	padding: 0 .5rem;

	&:before {
	&:extend(.font-icon-class);
	content: @fa-var-tag;
	margin: 0 .5rem 0 .2rem;
	}
	}
	}

	#tagsform option:before,
	#taglist li:before,
	#tag-selector li a:before {
	color: darken(@color-main, 15%); // default tag color
	}

	#tagsform option:checked:before,
	#tag-selector li:hover a:before {
	color: #fff;
	}

	#tagsform {
	min-height: 15rem;

	select {
	padding: 0;
	margin-bottom: .5rem;
	-
	- &:focus {
	- box-shadow: none !important;
	- border: 1px solid @color-layout-border;
	- }
	}

	option {
	- color: @color-font; // fix Firefox issue caused by text-shadow below
	- text-shadow: none;
	padding: .5rem;
	outline: 0;
	border: 0;

	&:before {
	&:extend(.font-icon-class);
	content: @fa-var-tag;
	line-height: 1;
	}
	}

	.buttons {
	text-align: center;

	button {
	margin: 0 .25rem;
	}
	}
	}

	.tagbox {
	color: #fff;
	background-color: @color-main !important;
	border: 0 !important;
	border-radius: .25rem;
	max-width: 4em;
	padding: .1rem .4rem;
	margin-right: .2rem;
	font-weight: bold;

	&:not(.tagedit-listelement) a {
	color: inherit;
	padding-left: .5rem;
	text-decoration: none;
	}

	h2 > & {
	font-size: 1.2rem;
	}
	}

	.tag-droppable.formcontainer {
	&.ui-droppable-active {
	background-color: @color-black-shade-bg !important;
	}
	&.ui-droppable-hover {
	background-color: @color-list-droptarget-background !important;
	}
	}
	diff --git a/plugins/libkolab/skins/elastic/include/libcalendaring.less b/plugins/libkolab/skins/elastic/include/libcalendaring.less
	index 40a47e88..f4451057 100644
	--- a/plugins/libkolab/skins/elastic/include/libcalendaring.less
	+++ b/plugins/libkolab/skins/elastic/include/libcalendaring.less
	@@ -1,717 +1,717 @@
	/**
	* Kolab core library
	*
	* This file contains Elastic skin styles for libcalendaring plugin.
	*
	* @author Aleksander Machniak <machniak@kolabsys.com>
	*
	* Copyright (C) 2012-2018, Kolab Systems AG <contact@kolabsys.com>
	*
	* This program is free software: you can redistribute it and/or modify
	* it under the terms of the GNU Affero General Public License as
	* published by the Free Software Foundation, either version 3 of the
	* License, or (at your option) any later version.
	*
	* This program is distributed in the hope that it will be useful,
	* but WITHOUT ANY WARRANTY; without even the implied warranty of
	* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
	* GNU Affero General Public License for more details.
	*
	* You should have received a copy of the GNU Affero General Public License
	* along with this program. If not, see <http://www.gnu.org/licenses/>.
	*/

	.invitebox {
	& > i.icon {
	position: absolute;
	top: 0;
	padding-top: .5em;
	}

	& > span {
	padding-left: 2.5em;
	}

	td {
	padding: 2px;
	vertical-align: top;

	&.ititle {
	font-weight: bold;
	padding-right: 0.5em;
	}

	&.label {
	color: #666;
	padding-right: 1em;
	}

	&.sensitivity {
	font-weight: bold;
	}

	&.recurrence-id {
	text-transform: uppercase;
	font-style: italic;
	}

	&.date.modified {
	font-weight: bold;
	color: @color-error;
	}

	em {
	font-weight: bold;
	}
	}

	.itip-buttons {
	display: flex;
	flex-wrap: wrap;

	input.button {
	margin: 0 .25rem .25rem 0;
	}
	}

	.rsvp-buttons {
	width: 100%;
	padding-top: .25rem;
	}

	.itip-reply-controls {
	margin-top: .25rem;
	width: 100%;
	line-height: 2;

	& > label {
	display: inline;

	label {
	line-height: 1;
	margin-right: .25rem;
	}
	}

	a {
	margin-left: 1em;
	white-space: nowrap;
	}
	}

	.rsvp-status {
	margin: .5rem 0;
	width: 100%;

	&.hint {
	color: #666;
	font-style: italic;
	}
	}

	.folder-select {
	white-space: nowrap;

	select {
	display: initial;
	width: auto;
	}
	}
	}

	.rsvp-status {
	&:before {
	line-height: 1.1;
	color: lighten(@color-black, 25%);
	float: none;
	display: inline;
	}

	&.loading:before {
	&:extend(.font-icon-class);
	- .animated-icon-class;
	+ .animated-icon-class();
	content: @fa-var-circle-notch;
	line-height: 1;
	}

	&.declined:before {
	&:extend(.font-icon-class);
	content: @fa-var-ban;
	color: @color-error;
	}

	&.tentative:before {
	&:extend(.font-icon-class);
	content: @fa-var-check-circle;
	color: @color-warning;
	}

	&.accepted:before {
	&:extend(.font-icon-class);
	content: @fa-var-check-circle;
	color: @color-success;
	}

	&.delegated:before {
	&:extend(.font-icon-class);
	content: @fa-var-share;
	}

	&.needs-action:before {
	&:extend(.font-icon-class);
	content: @fa-var-question-circle;
	}
	}

	.attendee {
	&:before {
	&:extend(.font-icon-class);
	content: @fa-var-question-circle;
	display: inline;
	float: none;
	font-size: 1em;
	color: @color-black-shade-text;
	}

	&.req-participant:before {
	content: @fa-var-user;
	}

	&.opt-participant:before {
	.font-icon-regular(@fa-var-user);
	}

	&.non-participant:before {
	content: @fa-var-user;
	color: #ccc;
	}

	&.chair:before {
	content: @fa-var-user; // todo
	color: @color-warning;
	}

	&.completed:before,
	&.accepted:before {
	content: @fa-var-check-circle;
	color: @color-success;
	}

	&.declined:before {
	content: @fa-var-ban;
	color: @color-error;
	}

	&.tentative:before {
	content: @fa-var-check-circle;
	color: @color-warning;
	}

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

	&.organizer:before {
	content: @fa-var-briefcase; // TODO: better icon
	}

	&.in-process:before {
	content: @fa-var-cog;
	}
	}

	.attendees-comentbox {
	label {
	display: inline;
	}
	}

	.edit-attendees-table {
	width: 100%;

	th, td {
	width: 1%;
	text-align: center;
	}

	td {
	border: 0;
	padding: 0 .3rem;
	}

	th {
	border-bottom: 1px solid #eee !important;
	}

	th.name, td.name, th.role, td.role {
	width: auto;
	text-align: left;
	}

	th.invite {
	input {
	display: none;
	}

	label {
	cursor: pointer;
	}

	label:before {
	&:extend(.font-icon-class);
	content: @fa-var-envelope;
	display: inline;
	float: none;
	margin-left: .25rem;
	}

	}

	td.invite {
	.custom-switch {
	margin-top: .15rem;
	}
	}

	td.name {
	span {
	line-height: 2.5;
	display: flex;

	& > :first-child {
	- .overflow-ellipsis;
	+ .overflow-ellipsis();
	// width and flex is required to make overflow working
	flex: 1;
	width: 1px;
	white-space: nowrap;
	}
	}
	}

	td.availability,
	td.confirmstate {
	span {
	margin: 0;
	}

	span:after,
	span:before {
	line-height: 2;
	margin: 0;
	font-size: 1.2em;
	height: 2em;
	width: 2em;
	}
	}

	td.options {
	a {
	display: inline-block;
	height: 2em;

	&:before {
	line-height: 1.8;
	margin: 0;
	}
	}
	}

	a.expandlink {
	&:before {
	content: @fa-var-plus-square;
	line-height: 2;
	}
	}

	.inner {
	display: none;
	}

	html.layout-phone & {
	th.availability,
	th.confirmstate {
	text-indent: -5000px;
	}

	td.role {
	max-width: 7em;
	}

	select {
	padding-left: .5rem;
	}
	}
	}

	.form-searchbar {
	display: flex;
	margin-bottom: .5rem;

	input[type=text] {
	flex: 1;

	html.layout-phone & {
	max-width: 50%;
	}
	}

	input[type=button] {
	margin-left: .5em;
	- .overflow-ellipsis;
	+ .overflow-ellipsis();
	}
	}

	.attachmentslist li.ics:before,
	.attachmentslist li.text.calendar:before,
	.messagelist tbody .attachment span.ical:before {
	.font-icon-regular(@fa-var-calendar-alt);
	}

	.alarms-input {
	.edit-alarm-item {
	display: flex;

	& + .edit-alarm-item {
	margin-top: .25rem;
	}

	&.first .delete-alarm,
	&:not(.first) .add-alarm {
	display: none;
	}
	}

	.edit-alarm-buttons {
	a {
	border-top-right-radius: .25rem !important;
	border-bottom-right-radius: .25rem !important;

	&:before {
	margin: 0;
	width: 1em;
	}

	&:focus {
	box-shadow: none;
	}

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

	.inner {
	display: none;
	}
	}

	.edit-alarm-type {
	flex: 1;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;

	&:focus {
	z-index: 2;
	}
	}

	.edit-alarm-set {
	display: flex;
	flex: 1;
	}

	.edit-alarm-values {
	flex: 5;

	.form-control {
	border-radius: 0;
	}

	:first-child {
	border-left: 0;
	}
	}

	.edit-alarm-offset {
	flex: 5;
	}

	.edit-alarm-date,
	.edit-alarm-time,
	.edit-alarm-related {
	flex: 3;
	}
	}

	.recurrence-form {
	.recurrence-rdates {
	width: 100%;
	padding: 0;
	list-style-type: none;

	&:empty {
	margin: 0;
	}

	a.delete {
	margin-left: 2em;
	&:before {
	display: inline-block;
	float: none;
	}
	}

	.inner {
	display: none;
	}
	}

	.recurrence-onevery {
	select {
	width: 40%;
	display: inline;
	}
	}

	.inputform {
	display: flex;

	input.button {
	margin-left: .25rem;
	}
	}

	div.line {
	width: 100%;
	display: flex;
	margin-bottom: .25rem;

	label {
	margin-left: .5em;
	min-width: 4em;
	line-height: 2.5;
	}
	}

	.month,
	.monthday,
	.weekday {
	display: inline-block;
	width: 3.5em;
	margin-right: .5rem;
	white-space: nowrap;

	input {
	margin-right: .25rem;
	}
	}

	.monthday {
	width: 2.75em;
	}

	.table td {
	border: 0;
	padding: 0;

	&.label {
	white-space: nowrap;
	}

	&:first-child label {
	line-height: 2.5;
	}

	& label.monthday:first-child {
	margin-top: .5rem;
	}
	}

	.input-group-append,
	.input-group-prepend {
	display: initial; // fixes buggy height of the element
	}
	}

	#event-status-badge {
	width: 7rem;
	height: 7rem;
	position: absolute;
	top: 0;
	right: 0;
	overflow: hidden;

	span {
	display: none;
	text-transform: uppercase;
	line-height: 20px;
	position: absolute;
	left: -2.4rem;
	top: 2.4rem;
	width: 13.2rem;
	text-align: center;
	font-weight: bold;
	font-size: .85rem;
	color: #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);

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

	.status-cancelled & {
	background-color: darken(@color-error, 10%);
	display: block;

	&:before {
	content: @fa-var-times-circle;
	}
	}

	.sensitivity-private & {
	background-color: darken(@color-warning, 10%);
	display: block;

	&:before {
	content: @fa-var-lock;
	}
	}

	.sensitivity-confidential & {
	background-color: darken(@color-error, 10%);
	display: block;

	&:before {
	content: @fa-var-user-secret;
	}
	}
	}
	}

	#alarm-display {
	h3 {
	font-size: 1.2rem;
	margin-bottom: .25rem;

	&:before {
	&:extend(.font-icon-class);
	.font-icon-regular(@fa-var-calendar-alt);
	font-size: 1em;
	}

	&.type-task:before {
	.font-icon-regular(@fa-var-calendar-check);
	}
	}

	.event-section {
	font-size: .9rem;
	color: @color-black-shade-text;
	white-space: nowrap;
	- .overflow-ellipsis;
	+ .overflow-ellipsis();
	}

	.alarm-actions {
	text-align: right;
	margin-bottom: .25rem;

	a {
	&:first-child {
	margin-right: 1em;
	}

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

	a.alarm-action-snooze:before {
	content: @fa-var-bell-slash;
	}

	a.alarm-action-dismiss:before {
	content: @fa-var-trash-alt;
	}
	}

	#alarm-snooze-dropdown a:before {
	.font-icon-regular(@fa-var-clock);
	}

	.dialog-message {
	margin: 0;
	opacity: .95;
	width: 100%;
	padding: .75em;
	margin-top: .25em;
	color: @color-message;
	background-color: @color-message-warning-box-background;

	& > label {
	margin: 0;
	display: block;

	label:before {
	line-height: 1.25;
	margin-right: .25rem;
	}
	}

	.message {
	display: flex;
	}

	& + .savemode {
	margin-top: 1rem;

	a.btn {
	margin-right: .5rem;
	}
	}

	& > .savemode {
	margin-top: .5rem;

	label {
	margin-right: 1rem;
	}

	input {
	margin-right: .25rem;
	}
	}
	}

	@media screen and (max-width: 420px) {
	.nav-link.nav-icon {
	width: 3em;
	margin-right: 5px;
	padding: .5rem .5rem .5rem .65rem;

	&:before {
	- .font-icon-class;
	+ .font-icon-class();
	margin: 0 1rem 0 0;
	width: 1em;
	line-height: 1.2;
	}

	&.resources:before {
	content: @fa-var-cube;
	margin-left: .1rem;
	}

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

	&.attendees:before {
	content: @fa-var-users;
	}
	}
	}
	diff --git a/plugins/libkolab/skins/elastic/include/tasklist.less b/plugins/libkolab/skins/elastic/include/tasklist.less
	index f4aae230..8cc8196d 100644
	--- a/plugins/libkolab/skins/elastic/include/tasklist.less
	+++ b/plugins/libkolab/skins/elastic/include/tasklist.less
	@@ -1,363 +1,362 @@
	/**
	* Kolab core library
	*
	* This file contains Elastic skin styles for tasklist plugin.
	*
	* @author Aleksander Machniak <machniak@kolabsys.com>
	*
	* Copyright (C) 2012-2018, Kolab Systems AG <contact@kolabsys.com>
	*
	* This program is free software: you can redistribute it and/or modify
	* it under the terms of the GNU Affero General Public License as
	* published by the Free Software Foundation, either version 3 of the
	* License, or (at your option) any later version.
	*
	* This program is distributed in the hope that it will be useful,
	* but WITHOUT ANY WARRANTY; without even the implied warranty of
	* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
	* GNU Affero General Public License for more details.
	*
	* You should have received a copy of the GNU Affero General Public License
	* along with this program. If not, see <http://www.gnu.org/licenses/>.
	*/


	.menu {
	a.tasklist:before,
	a.tasklistlink:before,
	a.taskaddlink:before {
	content: @fa-var-calendar-check;
	}
	}

	.tasklist-invitebox {
	& > i.icon:before {
	content: @fa-var-calendar-check !important;
	}
	}

	.listing {
	li {
	& > div {
	&.tasklist .listname:before {
	&:extend(.font-icon-class);
	content: @fa-var-calendar-check;
	}
	}
	}
	}

	@tasklist-record-height: 3.8rem;

	#tasklist {
	li.taskitem {
	border-bottom: 0;

	div.taskhead {
	position: relative;
	display: block;
	height: @tasklist-record-height;
	padding-left: (1 * @listing-treetoggle-width);
	outline: 0;

	&.flagged {
	color: @color-list-flagged !important;
	}

	&.selected {
	background-color: @color-list-selected-background;
	}

	&.droptarget {
	background-color: @color-list-droptarget-background;
	}

	&.complete {
	span.title {
	color: @color-list-deleted;
	}

	.progressbar {
	display: none;
	}
	}
	}

	& > div,
	& > span {
	border-bottom: 1px solid @color-list-border;
	}

	ul {
	padding: 0;
	border: 0;

	li {
	padding-left: 0;
	.taskhead, .title { padding-left: (2 * @listing-treetoggle-width + .25rem); }
	.childtoggle { left: @listing-treetoggle-width; }

	li {
	.taskhead, .title { padding-left: (3 * @listing-treetoggle-width + .25rem); }
	.childtoggle { left: (2 * @listing-treetoggle-width); }

	li {
	.taskhead, .title { padding-left: (4 * @listing-treetoggle-width + .25rem); }
	.childtoggle { left: (3 * @listing-treetoggle-width); }

	li {
	.taskhead, .title { padding-left: (5 * @listing-treetoggle-width + .25rem); }
	.childtoggle { left: (4 * @listing-treetoggle-width); }

	li {
	.taskhead, .title { padding-left: (6 * @listing-treetoggle-width + .25rem); }
	.childtoggle { left: (5 * @listing-treetoggle-width); }
	}
	}
	}
	}
	}
	}
	}

	.childtoggle {
	position: absolute;
	left: 0;
	top: 0;
	width: @listing-treetoggle-width;
	padding: 0 0 0 .25rem;
	height: @tasklist-record-height;
	cursor: pointer;
	z-index: 1;

	.inner {
	display: none;
	}

	&:before {
	&:extend(.font-icon-class);
	content: @fa-var-angle-right;
	margin: 0;
	width: 1em;
	line-height: @tasklist-record-height;
	}

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

	&.collapsed:before {
	content: @fa-var-angle-right;
	}
	}

	span.title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	line-height: 2em;
	padding: 0 0 0 .2em;
	padding-left: (1 * @listing-treetoggle-width + .25rem);
	margin-right: 2em;
	- .overflow-ellipsis;
	+ .overflow-ellipsis();
	}

	span.tags {
	position: absolute;
	right: 2em;
	top: 0;
	line-height: 2em;
	text-align: right;
	}

	span.date {
	position: absolute;
	padding-left: .2em;
	font-size: 90%;
	line-height: 2.5;
	color: @color-list-secondary;
	cursor: pointer;

	input {
	line-height: 1;
	padding: 0;
	margin-top: -2px;
	}
	}

	span.flagged {
	position: absolute;
	right: 0;
	top: 0;
	line-height: 1.8em;
	cursor: pointer;
	}

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

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

	.progressbar {
	position: absolute;
	bottom: 1px;
	left: .2em;
	right: .2em;

	.progressvalue {
	border-top: 2px solid @color-warning;
	}
	}

	.custom-switch {
	position: absolute;
	top: 1.4rem;
	z-index: 1;
	height: 2.3em;
	}

	.actions {
	display: none;
	}

	// Focus indicator
	@media screen and (min-width: @screen-width-large) {
	.taskhead {
	border-left: 2px solid transparent;
	}

	.taskhead.focused {
	border-left: 2px solid @color-list-focus-indicator;
	outline: 0;
	}
	}
	}

	html.touch #tasklist {
	li {
	font-size: 1rem;
	}

	span.flagged,
	input[type=checkbox],
	.custom-switch {
	display: none;
	}

	span.title {
	margin-right: .5rem;
	}

	span.tags {
	right: .5rem;
	}
	}

	#taskshow {
	& + .formbuttons {
	button.disabled {
	display: none;
	}
	}

	.task-parent-title {
	color: @color-black-shade-text;
	font-size: 90%;
	margin-bottom: .5rem;
	}

	.task-title {
	font-size: 1.5rem;
	font-weight: bold;
	}

	.task-description {
	margin: 1rem 0;
	}

	&.status-completed h2 {
	color: @color-list-deleted;
	}

	&.status-flagged h2:before {
	&:extend(.font-icon-class);
	content: @fa-var-flag;
	color: @color-error;
	font-size: .9em;
	}

	.attachmentslist li {
	margin-right: 1em;
	}
	}

	#taskedit-attachment-form {
	// fixes redundant scrolling and height issue on task edit form
	position: absolute;
	}

	.messagetasklinks {
	& > i.icon:before {
	content: @fa-var-calendar-check !important;
	}

	.tasklist {
	list-style-type: none;
	margin: 0;
	padding: 0;

	li {
	display: flex;
	align-items: center;
	}
	}

	input {
	height: auto !important;
	}
	}

	#print-layout {
	#tasklist {
	padding: 0;

	li {
	list-style-type: none;
	}

	.description {
	display: block;
	white-space: pre-wrap;
	}

	.title {
	position: relative;
	font-weight: bold;
	padding: 0;
	margin: 0;
	}

	.taskhead {
	height: auto;
	}
	}
	}

	.taskitem-draghelper {
	- .overflow-ellipsis;
	+ .overflow-ellipsis();
	}

	.quickview-active {
	// TODO ?
	}

	#rootdroppable {
	// TODO ?
	}
	-
	diff --git a/plugins/libkolab/skins/elastic/libkolab.less b/plugins/libkolab/skins/elastic/libkolab.less
	index adc30425..00b1b5ca 100644
	--- a/plugins/libkolab/skins/elastic/libkolab.less
	+++ b/plugins/libkolab/skins/elastic/libkolab.less
	@@ -1,622 +1,630 @@
	/**
	* Kolab core library
	*
	* This file contains Elastic skin styles for various Kolab plugins.
	*
	* @author Aleksander Machniak <machniak@kolabsys.com>
	*
	* Copyright (C) 2012-2018, Kolab Systems AG <contact@kolabsys.com>
	*
	* This program is free software: you can redistribute it and/or modify
	* it under the terms of the GNU Affero General Public License as
	* published by the Free Software Foundation, either version 3 of the
	* License, or (at your option) any later version.
	*
	* This program is distributed in the hope that it will be useful,
	* but WITHOUT ANY WARRANTY; without even the implied warranty of
	* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
	* GNU Affero General Public License for more details.
	*
	* You should have received a copy of the GNU Affero General Public License
	* along with this program. If not, see <http://www.gnu.org/licenses/>.
	*/

	@skin: "elastic";
	@skin-path: "../../../../skins/@{skin}";

	+// Disable dark mode support for compatibility with Roundcube 1.4.
	+// The variable has been added to variables.less in Roundcube 1.5.
	+@dark-mode-enabled: false;
	+
	@import (reference) "@{skin-path}/styles/variables";
	@import (reference) "@{skin-path}/styles/mixins";


	/* Common folders list extensions */

	.listing {
	// Fix focus indicator, because we add div element in the list record
	@media screen and (min-width: @screen-width-large) {
	li > div > a {
	border-left: 2px solid transparent;
	}
	li > div > a:focus {
	border-left: 2px solid @color-list-focus-indicator;
	outline: 0;
	}
	}

	li {
	& > div {
	display: flex;

	& > a:first-child {
	- .overflow-ellipsis;
	+ .overflow-ellipsis();
	position: relative;
	flex-grow: 1;

	& + input {
	position: initial;
	}
	}

	.custom-switch {
	position: relative;
	}

	&.folder .listname:before {
	&:extend(.font-icon-class);
	content: @fa-var-sticky-note;
	margin-right: .5rem;
	}

	span.actions {
	display: flex;

	input + & {
	padding-right: 2em;
	}

	a {
	padding: 0;
	margin: 0;
	margin-right: .2rem;
	cursor: pointer;

	&:before {
	margin: 0;
	}

	&.remove {
	display: none;
	}
	}

	html.touch & {
	padding-left: .2rem;
	a {
	margin-right: .5rem;
	}
	}
	}

	a.quickview {
	&:before {
	content: @fa-var-eye;
	opacity: .2;
	color: @color-link;
	}

	&:after {
	display: none !important;
	}
	}

	&.focusview {
	a.quickview:before {
	content: @fa-var-eye;
	opacity: 1;
	}
	}

	.subscribed {
	cursor: pointer;
	// reset listing's link style
	padding: 0 !important;
	border-left: 0;
	width: auto;

	&:before {
	.font-icon-regular(@fa-var-bookmark); // TODO: better icon
	height: auto;
	color: @color-link;
	margin-right: .25rem;
	}
	}

	// span.subscribed is used on addressbooks list, a.subscribed in other places
	span.subscribed:before {
	&:extend(.font-icon-class);
	.font-icon-regular(@fa-var-bookmark); // TODO: better icon
	}

	&.subscribed {
	.subscribed:before {
	.font-icon-solid(@fa-var-bookmark); // TODO: better icon
	}
	}
	}

	&.selected > div > * {
	color: @color-list-selected;
	background-color: @color-list-selected-background;
	}

	& > div.readonly a:first-child,
	&.readonly:not(.virtual) > div a:first-child {
	&:after {
	&:extend(.font-icon-class);
	content: @fa-var-lock;
	position: absolute;
	left: 2.25rem;
	- top: @listing-line-height / 2;
	+ top: (@listing-line-height / 2);
	font-size: .9em !important;
	width: .9em;
	line-height: 1;
	height: 1em !important;
	background-color: #fff;
	border-radius: 50% 50% 0 0;
	color: @color-font;
	opacity: .9;

	html.touch & {
	- top: @listing-touch-line-height / 2;
	+ top: (@listing-touch-line-height / 2);
	left: 2.7rem;
	}
	}
	}

	& > div.other.user > .listname,
	&.other.user > div a:first-child {
	&:before {
	.font-icon-solid(@fa-var-user);
	}
	}

	& > div.virtual.user > .listname,
	&.virtual.user > div a:first-child {
	&:after {
	display: none;
	}
	}

	& > div.virtual.shared > .listname,
	&.virtual.shared > div a:first-child {
	&:before {
	.font-icon-solid(@fa-var-share-alt);
	}

	&:after {
	display: none;
	}
	}

	&.virtual > div > a {
	opacity: .5;
	}
	}

	// Tree structure fix
	&.treelist:not(.notree) {
	& > li > div > a {
	padding-left: @listing-treetoggle-width;
	}
	}

	li.droptarget > div {
	background-color: @color-list-droptarget-background;
	}

	li .count {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 2em;
	line-height: 1.4rem;
	- margin: (@listing-line-height - 1.4 * @page-font-size)/2;
	+ margin: ((@listing-line-height - 1.4 * @page-font-size) / 2);
	padding: 0 .3em;
	border-radius: .4em;
	background: @color-list-secondary;
	color: #fff;
	text-align: center;
	font-weight: bold;

	html.touch & {
	line-height: 2rem;
	- margin: (@listing-touch-line-height - 2 * @page-font-size)/2;
	+ margin: ((@listing-touch-line-height - 2 * @page-font-size) / 2);
	}
	}
	}

	@treelist-readonly-icon-margin: 1.7em;
	.treelist {
	ul {
	li {
	a:first-child:after {
	margin-left: 1 * @treelist-readonly-icon-margin !important;
	}

	li {
	a:first-child:after {
	margin-left: 2 * @treelist-readonly-icon-margin !important;
	}

	li {
	a:first-child:after {
	margin-left: 3 * @treelist-readonly-icon-margin !important;
	}

	li {
	a:first-child:after {
	margin-left: 4 * @treelist-readonly-icon-margin !important;
	}

	li {
	a:first-child:after {
	margin-left: 5 * @treelist-readonly-icon-margin !important;
	}

	li {
	a:first-child:after {
	margin-left: 6 * @treelist-readonly-icon-margin !important;
	}
	}
	}
	}
	}
	}
	}
	}

	&.notree {
	li a:first-child:after {
	left: 1.3rem !important;
	}
	}
	}

	.searchresults {
	.boxtitle {
	line-height: 2rem !important;
	font-size: 80%;
	padding: 0 .5rem;
	margin: 0;
	color: @color-popover-separator;
	background-color: @color-popover-separator-background;
	text-align: center;
	border-bottom: 1px solid @color-layout-border;
	}
	}

	.folderlist li.mailbox {
	&.type-event > a:before {
	.font-icon-solid(@fa-var-calendar);
	}
	&.type-task > a:before {
	.font-icon-solid(@fa-var-calendar-check);
	}
	&.type-journal > a:before {
	.font-icon-regular(@fa-var-calendar);
	}
	&.type-contact > a:before {
	.font-icon-regular(@fa-var-address-book);
	}
	&.type-note > a:before {
	.font-icon-regular(@fa-var-sticky-note);
	}
	&.type-configuration > a:before {
	.font-icon-solid(@fa-var-cog);
	}
	&.type-freebusy > a:before {
	.font-icon-regular(@fa-var-calendar);
	}
	&.type-file > a:before {
	.font-icon-solid(@fa-var-folder);
	}
	}

	.menu {
	li.search {
	padding: .25rem .5rem;
	}

	a.history:before {
	content: @fa-var-history;
	}
	}

	button.btn {
	&.save.notify:before {
	content: @fa-var-envelope;
	}

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

	// E.g. notes preview frame
	.watermark {
	background: url("@{skin-path}/images/logo.svg") center no-repeat #fff;
	background-size: 30%;
	background-blend-mode: luminosity;
	width: 100%;
	height: 100%;

	& > * {
	display: none;
	}

	// this is to blend the watermark image
	&:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(255, 255, 255, .85);
	}

	&.formcontainer {
	background: transparent !important;

	&:before {
	display: none;
	}

	& > * {
	display: block;
	}

	html.layout-small &,
	html.layout-phone & {
	overflow-y: auto !important;
	}
	}
	}

	.form-group > .datetime {
	display: flex;
	white-space: nowrap;

	input {
	width: 10em;
	}

	input:first-child {
	margin-right: .5rem;
	width: 15em;
	}

	a {
	margin-left: 1em;
	text-align: right;
	flex: 1;
	line-height: 2.4;
	}
	}

	.form-section.form-group.form-check {
	display: flex;
	padding: 0;

	label {
	order: 10;
	}
	}

	.formcontent.text-only .faded * {
	color: @color-black-shade-text;
	}

	.linkslist {
	// Reset .attachmentslist style
	border: 0 !important;
	background: transparent !important;

	li.link {
	padding: 0;

	&.message.eml:before {
	content: @fa-var-envelope;
	}

	a.messagelink {
	- .overflow-ellipsis;
	+ .overflow-ellipsis();
	}

	a.delete .inner {
	display: none;
	}
	}
	}

	.print-config {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10000;
	padding: .5em 1em;
	background-color: @color-black-shade-bg;

	button.print {
	margin-right: 1rem;
	}

	.prop {
	line-height: 2;
	margin-left: .5rem;
	display: inline-block;
	vertical-align: middle;

	label {
	margin: 0;
	}
	}

	@media print {
	display: none;
	}

	& + .print-content {
	position: relative;
	top: 0;
	left: 0;
	height: auto;
	margin: 5em auto 0 auto;
	overflow: visible;
	}
	}

	.selection-dialog {
	.ui-dialog-content {
	display: flex !important;
	overflow: hidden !important;
	}

	.selection-list {
	display: flex;
	flex-direction: column;
	border: 1px solid @color-layout-border;
	justify-content: center;
	}

	.ui-dialog-content .popupmenu {
	display: flex !important; // overwrites .popupmenu style
	width: 100%;
	}

	.scroller {
	flex: 1;
	overflow-y: auto;
	}

	.header {
	border-bottom: 1px solid @color-layout-border;
	display: flex;
	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;
	position: relative; // for absolute positioning of searchbar
	overflow: hidden;
	white-space: nowrap;

	a.button {
	color: @color-toolbar-button;
	margin: 0 .3rem;

	&:before {
	margin: 0;
	}
	}
	}

	.header-title {
	width: 100%;
	text-align: center;
	margin: 0 2em;
	}

	.selection-content {
	display: flex;
	flex-direction: column;
	}

	.tab-content {
	margin-top: 1rem;
	height: 100%;
	overflow-y: auto;
	}

	.form-addon {
	margin: 0;
	padding: .5rem 0;
	width: 100%;
	background-color: @color-black-shade-bg;
	border-top: 1px solid @color-layout-border;
	}

	// overwrite .popupmenu colors
	.listing {
	ul {
	background-color: @color-layout-list-background;
	}

	li.selected {
	color: @color-font;
	}
	}

	@media screen and (max-width: @screen-width-small) {
	.ui-dialog-content {
	padding: 0 !important;
	}

	.ui-dialog-titlebar {
	display: none;
	margin: 0;
	}

	.selection-list {
	border: 0;
	}

	.selection-list,
	.selection-content {
	.header-title {
	margin-left: 0;
	}
	}

	.header {
	a:before {
	font-size: 1.75rem;
	}
	}
	}
	}

	// Use icons-only on taskmenu with small screen height
	-@media screen and (max-height: 640px) and (min-width: (@screen-width-small + 1px)) {
	+@media screen and (max-height: 750px) and (min-width: (@screen-width-small + 1px)) {
	#layout-menu .popover-header img,
	#layout-menu {
	width: @layout-menu-width-sm;
	}

	#taskmenu {
	a {
	height: @layout-menu-width-sm;
	- width: 100%;
	+ width: @layout-menu-width-sm;
	font-size: 1.2rem !important;
	}

	.special-buttons {
	width: @layout-menu-width-sm;
	}

	span.inner {
	display: none;
	}
	}
	}

	@import "include/calendar";
	@import "include/kolab_activesync";
	@import "include/kolab_delegation";
	@import "include/kolab_files";
	@import "include/kolab_notes";
	@import "include/kolab_tags";
	@import "include/libcalendaring";
	@import "include/tasklist";
	+
	+& when (@dark-mode-enabled = true) {
	+ @import "include/darkmode";
	+}

File Metadata

Mime Type: text/x-diff
Expires: Sun, Jan 11, 1:30 AM (3 h, 23 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 421945
Default Alt Text: (91 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions