roundcubemail/skins/elastic/styles/styles.less

@import (reference) "fontawesome.less";
@import (reference) "layout.less";
@import (reference) "colors.less";

/*** Responsive design - Layout ***/

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

NOTE: below 1024px we do some UI elements bigger, as this is good (imho)
      assumption that in this size we're dealing with touch device. Is it?
      should we rather feature detect tables/phones?
*/

body {
	font-size: @page-font-size;
	min-width: @page-min-width; /* overwrite semantic-ui's limit of 320px */
}

body > #layout {
	overflow: hidden;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	height: 100%;
	width: 100%;
}

body > #layout > div.menu {
	width: 60px;
	background-color: @taskmenu-background-color;
}

#layout > div.sidebar,
#layout > div.list {
	display: flex;
	flex-grow: 2;
	flex-direction: column;
	min-width: 300px;
	max-width: 30%;
	border-right: 1px solid @layout-border-color;
}

body > #layout > div.content {
	display: flex;
	flex-grow: 6;
	flex-direction: column;
	min-width: 50%;
}

body > #layout > div.sidebar {
	min-width: 220px;
}

body > #layout > div.list {
	min-width: 300px;
}

body > #layout > div.menu a,
body > #layout > div.menu a:before {
	display: block;
	width: 60px;
}

body:not(.iframe) > *:not(#layout),
body > #layout > div > .header > a.back-list-button,
body > #layout > div > .header > a.back-sidebar-button,
body > #layout > div > .header > .buttons,
body > #layout > div > .header > a.toolbar-menu-button,
body > #layout > div > .header > a.menu-button {
	display: none;
}

#layout > div .toolbar {
	float: right;
}

#layout > div.content > iframe,
#layout > div.content > .content,
#layout > div.content > .content > iframe {
	height: 100%;
	width: 100%;
	overflow: auto;
	border: 0;
	flex: 1;
}

#layout > div > .scroller {
	flex: 1;
}

#layout > .content.only > .scroller {
	overflow: auto;
}

#layout > div > .header,
#layout > div > .footer {
	background-color: @layout-header-background-color;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 2.4em;
	height: 2.4em;
	padding: 0 0.5em;
	margin: 0;
	position: relative; /* for absolute positioning of searchbar */
	/* overflow: hidden; breaks semantic-ui popups */
}
#layout > div > .header {
	border-bottom: 1px solid #ddd;
}
#layout > div > .footer {
	border-top: 1px solid #ddd;
}

#taskmenu a.button-logout {
	position: absolute;
	bottom: 0;
	color: @taskmenu-logout-button-color;
}


@media screen and (max-width: 1200px) { /* small */
	body > #layout > div.sidebar,
	body > #layout > div.list {
		min-width: 260px;
	}
	body > #layout > div:not(.selected),
	body > #layout > div.menu span.button-inner {
		display: none;
	}
	body > #layout > div > .header > a.back-sidebar-button {
		display: inline;
	}
	body > #layout > div.menu,
	body > #layout > div.content {
		display: flex;
	}
	body > #layout > div.menu a,
	body > #layout > div.menu a:before,
	body > #layout > div.menu {
		width: 45px;
	}
	body > #layout > div.menu a:before {
		margin: 0.4em 0;
	}
}

@media screen and (max-width: 768px) { /* tablet */
	body {
		font-size: 1.2em;
	}
	#layout > div > .header > .toolbar:not(.searchbar),
	body > #layout > div:not(.selected) {
		display: none;
	}
	body > #layout > div.menu {
		display: flex;
	}
	body > #layout > div.sidebar,
	body > #layout > div.list {
		max-width: 100%;
	}
	body > #layout > div > .header > a.toolbar-menu-button,
	body > #layout > div > .header > .buttons {
		display: block;
		float: right;
	}
	body > #layout > div > .header > a.back-list-button {
		display: block;
		float: left;
	}
}

@media screen and (max-width: 480px) { /* phone */
	body > #layout > div > .header > a.menu-button {
		display: inline;
	}
	body > #layout > div.menu span.button-inner {
		display: block;
	}
	body > #layout > div.menu {
		display: none;
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
		right: 0;
		width: auto;
		margin: 38pt 3pt 3pt 3pt;
		padding-bottom: 8pt;
		opacity: 0.96;
		text-align:center;
		border-radius: 4pt;
	}
	body > #layout > div.menu a,
	body > #layout > div.menu a:before {
		display: inline-block;
		width: 100px;
	}
	#taskmenu a.button-logout {
		position: relative;
	}
}

@media screen and (max-width: 319px) {
	#layout > div > .header > .buttons > button:before {
		content: "" !important;
		float: none !important;
	}
	body > #layout > div.sidebar,
	body > #layout > div.list {
		min-width: @page-min-width;
	}
}



/*** Login form ***/

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

#login-form {
	margin: auto;
	width: 95%;
	max-width: 320px;
}

#login-form table {
	display: none;
}

#login-form div.ui.input {
	width: 100%;
	margin-bottom: 1em;
}

/*** Common UI elements ***/

#uploadform,
.ui.modal,
.voice {
	display: none;
}

body.iframe .formcontent {
	padding: 1em;
}

body.iframe .formbuttons {
	padding: 0 1em 1em 1em;
}

#messagestack {
	position: absolute;
	bottom: 0.5em;
	right: 0.5em;
	z-index: 50000;
	width: 300px;
	height: auto;
	max-height: 85%;
	overflow-y: auto;
}

#messagestack div.voice {
	position: absolute;
	top: -1000px;
}

#messagestack div a {
	color: #94c0da; /* TODO: less'ify this color */
}

#messagestack div i.icon {
	font-size: 2em !important;
}

#messagestack div a:hover {
	text-decoration: underline;
	cursor: pointer;
}

.ui.message {
	margin-top: 0.5em;
}

.ui.popup {
	padding: 0;
	min-width: 180px;
}

.button.disabled,
.listing li a.disabled {
	opacity: 0.5;
}

.listbox .scroller {
	width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}

.listing tbody td,
.listing li {
	display: block;
	border-bottom: 1px solid #f4f4f4;
	cursor: default;
	font-weight: normal;
}

.listbox .listitem a,
.listbox .listitem span,
.listbox .tablink a,
.listing tbody td,
.listing li a {
	display: block;
	text-decoration: none;
	cursor: default;
	padding: 0 0.5em;
	white-space: nowrap;
	vertical-align: middle;
	line-height: 2.4em;
}

.listing tbody td {
	display: table-cell;
	outline: none;
}

table.listing {
	width: 100%;
}

ul.listing {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.listing li {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	position: relative;
}

ul.listing li ul {
	border-top: 1px solid #f4f4f4;
	padding-left: 1.5em;
}
ul.listing li ul li:last-child {
	border-bottom: none;
}

ul.treelist li div.treetoggle {
	position: absolute;
	top: 7px;
	left: 4px;
	width: 13px;
	height: 13px;
	background: /* TODO */ no-repeat;
	cursor: pointer;
}

.folderlist li.mailbox .unreadcount {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 2em;
	line-height: 1.4em;
	margin: 0.5em 0.2em;
	padding: 0 0.3em;
	background:  /* todo */ #1e70bf;
	border-radius: 0.4em;
	color: @badge-font-color;
	text-align: center;
	font-weight: bold;
}

ul.listing li input[type=checkbox] {
	position: absolute;
	top: 0;
	right: 0.2em;
	height: 2.4em;
	vertical-align: middle;
}

.folderlist li.mailbox.selected > a .unreadcount {
	background: /* todo */;
}

.folderlist li.mailbox.recent > a .unreadcount {
	background: /* todo */;
}

.toolbar {
	height: 2.4em;
}

.toolbar .ui.popup,
.toolbar.ui.popup {
	height: auto;
}

.toolbar > .spacer {
	display: inline-block;
	width: 1.2em;
}

.toolbar a.button span.inner {
	display: none;
}

.searchbar {
	display: table;
	text-align: right;
	position: absolute;
	background-color: @layout-header-background-color;
	z-index: 10;
	top: 0;
	right: 0;
}

.searchbar > * {
	height: 2.4em;
}

.searchbar > form,
.searchbar > a.button.options,
.searchbar > a.button.reset {
	display: none;
	width: 1%;
}

.searchbar > form,
.searchbar > form > input {
	width: 98%;
}

.searchbar input {
	border: none;
	border-bottom: 1px solid #ddd;
	background: transparent;
}

.searchbar > a.button.search.active {
	color: @searchbar-icon-active-color;
}

.header > .buttons > input.button {
	padding: 0.3em 0.8em;
	font-size: 1em;
}

/* fixes border set by accordion widget */
.propform.ui.accordion td.title {
	border: none;
}


/* make some elements bigger on tablets/phones */
/* TODO: we should/could maybe do this more globally? */
@media screen and (max-width: 1024px) {
}

@media screen and (min-width: 769px) {
	ul.toolbar {
		margin: 0;
}
	ul.toolbar > li {
		display: inline-block;
	}
}

@media screen and (max-width: 768px) {
	ul.toolbar a.button .inner {
		display: inline;
	}
}

@media screen and (max-width: 480px) {
	#messagestack {
		left: 0.5em;
		width: auto;
	}
}


/* font-icons */

button.ui.button.icon:before,
.toolbar a.button:before,
.toolbarmenu li a:before,
.folderlist li a:before,
.listing.iconized tr td:before,
.listing.iconized li a:before,
#taskmenu a:before {
	font-size: 1.25em;
	/*display: inline-block;*/
	/* FIXME: with inline-block we have a problem with icon alignment,
	use display:block; float: left;
	 */
	display: block;
	float: left;
	margin: 0em 0.25rem 0em 0em;
	width: 1.18em;
	height: 1em;
	font-family: 'Icons';
	font-style: normal;
	font-weight: normal;
	text-decoration: inherit;
	text-align: center;
	speak: none;
	font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

button.ui.button.icon:before {
	height: auto;
}

.toolbar a.button:before {
	display: inline;
	float: initial;
}

.toolbar a.button {
	padding: 0 0.3em;
}

.toolbar .dropbutton > a.button:first-child {
	padding-right: 0;
}
.toolbar .dropbutton > a.button.dropdown {
	font-size: 70%;
	padding-left: 0;
}

#taskmenu a {
	padding: 0.4em 0;
}

#taskmenu a,
#taskmenu a:before {
	display: block;
	width: 60px;
	text-align: center;
}

#taskmenu a:before {
	font-size: 1.5em;
	margin-bottom: 0.1em;
}

#taskmenu a.button-mail:before {
	content: @fa-var-envelope;
}
#taskmenu a.button-addressbook:before {
	content: @fa-var-user;
}
#taskmenu a.button-settings:before {
	content: @fa-var-cog;
}
#taskmenu a.button-help:before {
	content: @fa-var-life-bouy;
}
#taskmenu a.button-logout:before {
	content: @fa-var-power-off;
}
#taskmenu a.button-logout:hover {
	color: @taskmenu-logout-button-hover-color;
}

.listing.iconized li.preferences > a:before {
	content: @fa-var-sliders;
}
.listing.iconized li.folders > a:before {
	content: @fa-var-folder;
}
.listing.iconized li.responses > a:before {
	content: @fa-var-comment;
}
.listing.iconized li.identities > a:before {
	content: @fa-var-at;
}
.listing.iconized li.password > a:before {
	content: @fa-var-lock;
}
.listing.iconized li.addressbook a:before {
	content: @fa-var-book;
}
.listing.iconized li.contactgroup a:before {
	content: @fa-var-group;
}
.listing.iconized li.contactsearch a:before {
	content: @fa-var-search;
}
.listing.iconized tr.contact.person td.name:before {
	content: @fa-var-user;
}
.listing.iconized tr.general > td.section:before {
	content: @fa-var-desktop;
}
.listing.iconized tr.mailbox > td.section:before {
	content: @fa-var-envelope-o;
}
.listing.iconized tr.mailview > td.section:before {
	content: @fa-var-inbox;
}
.listing.iconized tr.compose > td.section:before {
	content: @fa-var-paper-plane;
}
.listing.iconized tr.addressbook > td.section:before {
	content: @fa-var-user;
}
.listing.iconized tr.folders > td.section:before {
	content: @fa-var-folder-o;
}
.listing.iconized tr.server > td.section:before {
	content: @fa-var-server;
}

.folderlist li a:before {
	content: @fa-var-folder-o;
}
.folderlist li.inbox a:before {
	content: @fa-var-inbox;
}
.folderlist li.trash a:before {
	content: @fa-var-trash;
}
.folderlist li.trash.empty a:before {
	content: @fa-var-trash-o;
}
.folderlist li.drafts a:before {
	content: @fa-var-edit;
}
.folderlist li.sent a:before {
	content: @fa-var-paper-plane;
}
.folderlist li.junk a:before {
	content: ""; /* TODO */
}
.folderlist li.archive a:before {
	content: @fa-var-archive;
}

.toolbarmenu li a.print:before {
	content: @fa-var-print;
}
.toolbarmenu li a.copy:before {
	content: @fa-var-copy;
}
.toolbarmenu li a.move:before {
	content: @fa-var-arrows;
}
.toolbarmenu li a.source:before {
	content: @fa-var-flask;
}
.toolbarmenu li a.download:before {
	content: @fa-var-download;
}
.toolbarmenu li a.extwin:before {
	content: @fa-var-external-link;
}
.toolbarmenu li a.edit:before {
	content: @fa-var-edit; /* TODO: edit.asnew */
}
.toolbarmenu li a.read:before {
	content: @fa-var-star-o;
}
.toolbarmenu li a.unread:before {
	content: @fa-var-star;
}
.toolbarmenu li a.flag:before {
	content: @fa-var-flag;
}
.toolbarmenu li a.unflag:before {
	content: @fa-var-flag-o;
}
.toolbar a.button.reply:before {
	content: @fa-var-mail-reply;
}
.toolbar a.button.reply-all:before {
	content: @fa-var-mail-reply-all;
}
.toolbar a.button.forward:before {
	content: @fa-var-mail-forward;
}
.toolbar a.button.delete:before {
	content: @fa-var-trash-o;
}
.toolbar a.button.markmessage:before {
	content: @fa-var-tag;
}
.toolbar a.button.more:before {
	content: @fa-var-ellipsis-h;
}
.toolbar a.button.dropdown:before {
	content: @fa-var-caret-down;
}
.toolbar a.button.settings:before {
	content: @fa-var-cog;
}
.toolbar a.button.print:before {
	content: @fa-var-print;
}
.toolbar a.button.search:before {
	content: @fa-var-search;
}
.toolbar a.button.upload:before,
.toolbar a.button.import:before {
	content: @fa-var-upload;
}
.toolbar a.button.download:before,
.toolbar a.button.export:before {
	content: @fa-var-download;
}
.toolbar a.button.compose:before {
	content: @fa-var-edit;
}
.toolbar a.button.refresh:before {
	content: @fa-var-refresh;
}
.toolbar a.button.archive:before {
	content: @fa-var-archive;
}
.toolbar a.button.encrypt:before {
	content: @fa-var-lock;
}
.toolbar a.button.firstpage:before {
	content: @fa-var-fast-backward;
}
.toolbar a.button.prevpage:before {
	content: @fa-var-backward;
}
.toolbar a.button.nextpage:before {
	content: @fa-var-forward;
}
.toolbar a.button.lastpage:before {
	content: @fa-var-fast-forward;
}

.searchbar > a.button.reset:before {
	content: @fa-var-remove;
}
.searchbar > a.button.options:before {
	content: @fa-var-angle-down;
}

button.icon.save:before {
  content: @fa-var-check;
}
button.icon.edit:before {
	content: @fa-var-pencil;
}
button.icon.qrcode:before {
  content: @fa-var-qrcode;
}
button.icon.search:before {
	content: @fa-var-search;
}


/**** Styles for widescreen (3-column) view ****/
/* copied from larry removing .widescreen prefix */


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

.messagelist td {
	border-left: 0;
	vertical-align: top;
	padding: 3px 2px !important;
}

.messagelist td.subject {
	width: 99%;
	white-space: wrap;
	position: relative; /* for span.date positioning in Firefox */
}

.messagelist td.threads {
	width: 20px;
	vertical-align: bottom;
}

.messagelist td.threads div {
	padding-bottom: 1px;
}

.messagelist td.flags {
	width: 22px;
}

.messagelist td.subject span {
	line-height: 2em;
}

.messagelist td.subject span.date {
	right: 2px;
	top: 3px;
	position: absolute;
	color: #666; /* TODO */
}

.messagelist td.subject span.fromto {
	padding-left: 1.5em;
	display: block;
	margin-right: 10em;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #666; /* TODO */
}

.messagelist tr.flagged td.subject span.date,
.messagelist tr.flagged td.subject span.fromto {
	color: #ff5c33; /* TODO */
}

.messagelist tr.deleted td.subject span.date,
.messagelist tr.deleted td.subject span.fromto {
	color: #ccc; /* TODO */
}

.messagelist td.subject span.subject {
	clear: both;
	display: block;
	font-size: 1em;
	overflow: hidden;
	text-overflow: ellipsis;
}

.messagelist td.flags span {
	width: 20px;
	height: 20px;
	display: block;
	margin-left: 1px;
}

.messagelist td.flags span.flag {
	cursor: pointer;
}

.messagelist tr td.subject span.msgicon,
.messagelist tr td.subject span.unreadchildren {
	width: 20px;
	height: 20px;
}