No OneTemporary
Actions

Size

41 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/skins/elastic/styles/widgets/buttons.less b/skins/elastic/styles/widgets/buttons.less
	index b47809561..50e6d4639 100644
	--- a/skins/elastic/styles/widgets/buttons.less
	+++ b/skins/elastic/styles/widgets/buttons.less
	@@ -1,325 +1,323 @@
	/**
	* 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);
	}
	&.sidebar-menu:before,
	&.toolbar-menu-button:before,
	&.toolbar-list-button:before {
	content: @fa-var-ellipsis-v;
	width: 1em;
	}
	&.menu-button:before {
	content: @fa-var-bars;
	}
	&.back-sidebar-button:before,
	&.back-content-button:before,
	&.back-list-button:before {
	content: @fa-var-chevron-left;
	}
	&.refresh:before {
	content: @fa-var-sync;
	}
	&.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;
	}
	&.attach.vcard:before {
	content: @fa-var-user;
	}
	&.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);
	}
	&.folders:before {
	content: @fa-var-folder-open;
	}
	&.tools:before,
	&.settings:before {
	content: @fa-var-wrench;
	}
	&.properties:before {
	content: @fa-var-info-circle;
	}
	&.select:before {
	.font-icon-regular(@fa-var-check-circle);
	}
	&.insert.recipient:before {
	content: @fa-var-user-plus;
	}
	&.encrypt:before {
	content: @fa-var-lock;
	}
	&.sign:before {
	content: @fa-var-signature;
	}
	&.sso:before {
	content: @fa-var-sign-in-alt;
	}
	}

	a.btn,
	button.btn {
	- line-height: 1.8;
	-
	&:before {
	- margin-right: .4rem;
	- height: 1.8rem;
	- line-height: 1.8rem;
	- width: 1em;
	+ display: inline !important;
	+ float: none !important;
	+ vertical-align: middle;
	+ margin-right: .4rem !important; // !important needed for a.btn
	}
	}

	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-footer-small-height;
	}

	a.button {
	display: block;
	float: left;
	width: @floating-action-button-size;
	height: @floating-action-button-size;
	border-radius: 50%;
	background: @color-main;
	color: white;
	opacity: .95;
	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 {
	&:focus {
	box-shadow: 0 0 0 .2rem fade(@color-btn-primary-background, 30%);
	}
	}

	.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, 5%);
	border-color: darken(@color-btn-secondary-background, 7%);
	}

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

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

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

	.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, 5%);
	border-color: darken(@color-btn-primary-background, 7%);
	}

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

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

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

	.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, 5%);
	border-color: darken(@color-btn-danger-background, 7%);
	}

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

	&:not(:disabled):not(.disabled) {
	&:active,
	&.active {
	background: darken(@color-btn-danger-background, 10%);
	border-color: darken(@color-btn-danger-background, 12%);

	&:focus {
	box-shadow: 0 0 0 .2rem fade(@color-btn-danger-background, 53%);
	}
	}
	}
	}
	diff --git a/skins/elastic/styles/widgets/editor.less b/skins/elastic/styles/widgets/editor.less
	index fdb68932c..a123b51dd 100644
	--- a/skins/elastic/styles/widgets/editor.less
	+++ b/skins/elastic/styles/widgets/editor.less
	@@ -1,941 +1,943 @@
	/**
	* 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.
	*/


	/* Text Editor widget (and TinyMCE editor) */

	.mce-tinymce {
	&.mce-container.mce-panel {
	border-radius: .25rem;
	border-color: @color-input-border;
	overflow: hidden;
	}

	.mce-btn,
	.mce-panel {
	background-color: @color-input-addon-background;
	}

	.mce-panel {
	border-color: @color-input-border;
	}
	}

	.mce-top-part::before,
	.mce-tinymce,
	.mce-window {
	box-shadow: none !important;
	}

	.mce-btn {
	&.mce-active {
	background: @color-btn-secondary-background !important;
	}
	}

	.mce-window {
	&.mce-container {
	border: 0;

	& :not(.mce-ico) {
	.font-family;
	}
	}

	.mce-reset {
	background: #fff;
	}

	.mce-container-body {
	&.mce-abs-layout {
	overflow: unset;
	}

	.mce-abs-end {
	display: none;
	}
	}

	.mce-window-head {
	height: @layout-header-height;
	border-bottom: 1px solid @color-dialog-header-border;
	padding: 0;

	.mce-title {
	line-height: @layout-header-height;
	font-size: 1.25rem;
	padding: 0 3rem 0 1rem;
	color: @color-dialog-header;
	}

	.mce-close {
	border: 0;
	color: @color-dialog-header;
	background: transparent;
	right: 0;
	top: 0;
	position: absolute;
	height: (@layout-header-height - .7rem);
	width: 1.25em;
	margin: .25rem;
	padding: .1rem .75rem;
	cursor: pointer;

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

	i {
	display: none;
	}
	}
	}

	.mce-foot {
	border: 0;
	height: @layout-header-height !important;
	position: relative;

	@media screen and (max-width: @screen-width-xs) {
	border-top: 1px solid @color-dialog-header-border;
	}

	.mce-container-body {
	height: 100% !important;
	display: flex;
	align-items: center;
	justify-content: flex-end; // just 'end' does not work in Chrome

	.mce-btn {
	position: initial;
	margin-right: .5rem;
	line-height: 1;
	width: auto !important;
	height: auto !important;

	&:last-child {
	margin-right: 1rem;
	}

	.mce-txt {
	line-height: 1.5;
	vertical-align: unset;
	}

	button:before {
	&:extend(.font-icon-class);
	display: inline;
	float: none;
	+ vertical-align: middle;
	+ margin-right: .4rem;
	}
	}

	.mce-abs-end {
	position: initial;
	width: 1rem;
	order: 9;
	}
	}

	.mce-btn {
	.btn-secondary;
	border-radius: .3rem;
	border-color: transparent;

	&:focus {
	border-color: transparent !important;
	color: @color-btn-secondary;
	background: @color-btn-secondary-background;
	}

	&.mce-primary {
	.btn-primary;
	}

	button:hover,
	button {
	color: @color-btn-secondary;
	padding: .5rem .75rem;
	}
	}

	.mce-btn:last-child button:before {
	content: @fa-var-times;
	}

	.mce-btn.mce-primary button:before {
	content: @fa-var-check;
	}

	.mce-search-foot {
	div:nth-of-type(2) button:before {
	content: @fa-var-search;
	}
	div:nth-of-type(3) button:before,
	div:nth-of-type(4) button:before {
	content: @fa-var-pencil-alt;
	}
	div:nth-of-type(6) button:before {
	content: @fa-var-chevron-left;
	}
	div:nth-of-type(7) button:before {
	content: @fa-var-chevron-right;
	}
	div:nth-of-type(7) button:after {
	&:extend(.font-icon-class);
	display: inline;
	float: none;
	margin: 0 0 0 .2rem;
	content: @fa-var-chevron-right;
	}

	@media screen and (min-width: (@screen-width-xs + 1px)) {
	div:nth-of-type(6) {
	margin-left: .5rem;
	}
	div:nth-of-type(7) button {
	&:before {
	display: none;
	}
	}
	}
	}
	}

	// Form elements, let's keep'em in .mce-window to make overwriting simpler

	.mce-formitem {
	min-width: 450px;
	position: unset !important;

	& > .mce-container-body {
	margin-bottom: .5rem;

	& > * {
	width: 75% !important;
	position: unset !important;
	}

	& > label {
	max-width: 25%;
	min-width: 25%;
	line-height: 2.5 !important;
	}
	}

	.mce-widget {
	border-radius: .25rem;
	}
	}

	.mce-form {
	padding: 1rem;
	box-sizing: border-box;

	.mce-form {
	padding: 0;
	position: unset !important;
	width: 100% !important;

	& > .mce-container-body {
	flex-wrap: wrap;
	height: auto !important;
	}

	.mce-formitem {
	min-width: 100%;
	width: 100% !important;
	}
	}

	.mce-container {
	height: auto !important;

	.mce-container-body {
	display: flex;
	height: auto !important;

	& > input:not([size="5"]) {
	position: relative;
	left: 0 !important;
	flex: 1;
	}

	}
	}

	& > .mce-container-body {
	box-sizing: border-box;
	width: 100% !important;
	}

	.mce-form-split {
	.mce-formitem {
	min-width: auto;

	& > .mce-container-body {
	width: 100% !important;
	}
	}
	}

	label {
	position: unset;
	line-height: 2.5 !important;
	height: auto !important;
	}
	}

	.mce-colorpicker {
	& + .mce-form {
	width: 150px !important;
	padding: 0;

	.mce-formitem {
	min-width: unset;

	& + :not(.mce-formitem) {
	height: 50px !important;
	}
	}
	}
	}

	.mce-textbox {
	padding: .375rem .75rem !important;
	line-height: 1.5;
	color: @color-font;

	&:not(textarea) {
	height: auto !important;
	}

	&:focus {
	color: @color-font;
	border-color: @color-input-border-focus;
	box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow;
	}

	&[size="5"] {
	width: auto !important;
	}

	&.mce-multiline {
	line-height: 1.25;
	width: 100% !important;
	position: unset;
	box-sizing: border-box;
	display: block;
	}
	}

	.mce-listbox {
	button {
	line-height: 1.5;
	padding: .375rem .75rem;
	}

	&:focus {
	border-color: @color-input-border-focus !important;
	box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow !important;
	}
	}

	.mce-checkbox {
	line-height: 2.5;

	i.mce-i-checkbox {
	border: 0;
	width: auto;
	color: @color-checkbox;
	text-indent: 0;

	&:before {
	&:extend(.font-icon-class);
	margin: 0;
	content: @fa-var-toggle-off;
	}
	}

	&.mce-checked i.mce-i-checkbox:before {
	content: @fa-var-toggle-on;
	}

	&:focus {
	i.mce-i-checkbox {
	border: 0;
	color: @color-checkbox-focus;
	}
	}
	}

	.mce-combobox {
	display: flex;

	input {
	border-radius: .3rem 0 0 .3rem;
	flex: 1;

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

	&.mce-combobox-fake {
	input {
	border-radius: .3rem;
	}
	}

	button {
	padding: .4rem .6rem;
	}

	.mce-btn {
	border-radius: 0 .3rem .3rem 0;
	background: @color-input-addon-background;

	&:focus {
	background-color: @color-input-border-focus-shadow;
	border-color: #c5c5c5;
	}
	}
	}

	.mce-tabs {
	padding-top: 1rem;
	margin: 0 1rem;
	border-color: @color-layout-border;

	.mce-tab {
	border-radius: .25rem .25rem 0 0;
	padding: .5rem 1rem;
	height: auto !important;
	border: 1px solid transparent;
	color: @color-link;
	background: transparent;
	margin-bottom: -1px;

	&.mce-active {
	border: 1px solid @color-layout-border;
	border-bottom-color: #fff;
	color: @color-font !important;
	}

	&:not(.mce-active):hover {
	border: 1px solid @color-list-border;
	border-bottom-color: transparent;
	border-bottom: 0;
	}

	&:focus {
	outline: unset !important;
	}
	}
	}

	.mce-label {
	text-shadow: none;
	color: @color-font;
	}
	}


	// Menus and popovers, e.g. color selector, emoticons selector, font selector
	.mce-menu,
	.mce-floatpanel.mce-popover {
	box-shadow: 3px 3px 5px @color-popover-shadow !important;
	border-color: @color-layout-border !important;
	border-radius: .3rem;
	}

	.mce-menu {
	.mce-menu-item.mce-active {
	color: @color-toolbarmenu-hover;
	background-color: @color-toolbarmenu-hover-background;
	}

	.popover-header {
	display: none !important;
	}
	}

	div.mce-menubtn.mce-opened {
	z-index: 65530 !important; // BUG: https://github.com/tinymce/tinymce/issues/4542
	}

	#mce-modal-block.mce-in {
	background-color: @color-dialog-overlay-background;
	opacity: 1 !important;
	}

	@media screen and (max-width: @screen-width-xs) {
	.mce-window {
	width: 100% !important;
	height: 100% !important;
	left: 0 !important;
	top: 0 !important;
	border-width: 0 !important;

	& > .mce-reset {
	display: flex;
	flex-direction: column;
	height: 100%;
	}

	.mce-window-body {
	flex: 1;
	overflow-y: auto !important;
	}

	& > .mce-reset > div,
	.mce-container-body {
	width: 100% !important;
	}

	.mce-window-head {
	background-color: @color-layout-mobile-header-background;

	.mce-title {
	font-size: 1rem;
	text-align: center;
	padding: 0 1rem;
	}

	.mce-close {
	display: none;
	}
	}

	.mce-foot {
	background-color: @color-layout-mobile-footer-background;

	.mce-container-body {
	justify-content: space-evenly;

	.mce-btn {
	position: initial;
	height: 100% !important;
	margin: 0;
	background: transparent;
	border-width: 0;

	&:focus {
	box-shadow: none;
	}

	&:hover {
	background: transparent;
	}

	&:last-child {
	margin: 0;
	}

	button {
	color: @color-font;
	padding: .45rem;
	font-size: .9rem;

	&:before {
	display: block;
	float: none;
	width: 100%;
	margin: 0;
	line-height: 1.75;
	height: 1.75rem;
	}
	}
	}

	.mce-abs-end {
	display: none;
	}
	}

	.mce-search-foot {
	div:nth-of-type(7) button:after {
	display: none;
	}
	}
	}

	.mce-form,
	.mce-form + .mce-container, // for Embed tab in Media dialog
	.mce-formitem,
	.mce-combobox,
	.mce-panel:not(.mce-popover) {
	width: 100% !important;
	}

	.mce-formitem {
	min-width: unset;
	}

	.mce-form {
	& > .mce-container-body {
	display: flex;
	flex-direction: column;
	left: 0;
	right: 0;
	box-sizing: border-box;
	}

	.mce-container-body {
	height: auto !important;
	flex-direction: column;

	& > label {
	position: unset !important;
	width: 100% !important;
	max-width: 100%;
	}

	& > label + * {
	position: unset !important;
	width: auto !important;
	}

	& > .mce-checkbox {
	position: absolute;
	left: 0 !important;
	top: 3rem !important;
	}
	}
	}

	// FIXME: How to fix the input width in less hacky way?
	.mce-combobox input {
	max-width: ~"calc(100% - 4rem)";
	}
	.mce-combobox-fake input {
	max-width: ~"calc(100% - 1.7rem)";
	}
	}

	.mce-menu {
	width: @layout-mobile-menu-width !important;
	right: 0;
	top: 0 !important;
	left: auto !important;
	height: 100% !important;
	max-height: unset !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0;
	border: 0 !important;

	.popover-header {
	display: block !important;

	a {
	font-size: 1.2rem;
	line-height: @layout-touch-header-height;

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

	.mce-container-body {
	width: 100% !important;
	}

	.mce-menu-item {
	height: @layout-touch-menu-record-height;
	line-height: @layout-touch-menu-record-height;
	padding: 0 .5rem;
	border-left: 0;
	border-bottom: 1px solid @color-list-border;
	margin: 0;

	.mce-ico {
	font-size: 150%;
	padding: 0 .7rem 0 .25rem;
	margin-top: -.2rem;
	}

	.mce-text {
	font-size: 1.2rem;
	.font-family;
	line-height: @layout-touch-menu-record-height;
	color: @color-font;
	}

	.mce-caret {
	display: none;
	}

	&.mce-menu-item-preview {
	&.mce-active {
	border-left: none;
	position: relative;

	&:after {
	.font-icon-class; // :extend() does not work here
	content: @fa-var-check;
	position: absolute;
	right: .5rem;
	top: 0;
	color: @color-font;
	}
	}
	}

	&.mce-menu-item-expand {
	position: relative;

	&:after {
	.font-icon-class; // :extend() does not work here
	content: @fa-var-angle-right;
	position: absolute;
	right: .5rem;
	top: 0;
	color: @color-font;
	}
	}
	}
	}

	.mce-menu-item-sep,
	.mce-menu-shortcut {
	display: none !important;
	}

	.mce-charmap-dialog {
	position: unset !important;

	+ .mce-container {
	display: none;
	}
	}

	.mce-charmap {
	display: block;

	tbody {
	display: block;
	}

	tr {
	display: flex;
	flex-wrap: wrap;
	}

	td {
	flex: 1;
	height: auto !important;
	min-width: 17%;
	padding: 0 !important;
	border: 0 !important;
	border-bottom: 1px solid @color-list-border !important;

	div {
	font-size: 3rem;
	line-height: 2;
	}
	}
	}
	}

	html.touch .mce-grid td {
	padding: .5rem;
	}


	/* Media file selector for TinyMCE */

	.image-selector {
	margin: 1rem 1rem 1rem 1rem !important;
	padding: 1rem .5rem 10rem .5rem !important;

	&.droptarget {
	border: .2rem dashed @color-table-border;

	&:after {
	margin-top: 2rem;
	}
	}

	button {
	.btn-secondary;
	padding: .5rem .75rem;
	line-height: 1.5;
	position: relative;

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

	form {
	position: absolute;
	top: 0;
	}

	.attachmentslist {
	margin-left: 0;
	overflow-x: hidden;
	overflow-y: auto;
	height: 19.1em;

	li {
	padding: .25rem;
	cursor: pointer;

	&:before {
	display: none;
	}

	&:hover,
	&:focus {
	background: @color-list-selected-background;
	}

	span.name {
	flex: 1;
	margin: auto;
	padding-left: 1rem;
	.overflow-ellipsis;
	}

	span.img {
	height: 80px;
	width: 80px;
	display: flex;
	border: 1px solid @color-list-border;
	background: white;
	border-radius: .75rem;
	overflow: hidden;
	}

	img {
	margin: auto;
	}
	}

	html.layout-phone & {
	height: auto;
	}
	}
	}


	/* HTML editor widget */

	.html-editor {
	position: relative;
	display: flex;
	margin-bottom: .25rem;

	& > .nav {
	border-color: transparent;
	z-index: 1;
	position: absolute;
	right: 1rem;

	a.active {
	border-color: @color-input-border !important;

	&.mode-html {
	background-color: @color-input-addon-background;
	border-bottom-color: @color-input-addon-background !important;
	}

	&.mode-plain {
	border-bottom-color: #fff !important;
	}
	}

	a:hover,
	a:focus {
	border-bottom-color: transparent;
	outline: 0;
	}
	}

	& > iframe, // e.g. mailvelope frame
	& > .googie_edit_layer,
	& > .mce-tinymce,
	& > textarea {
	margin-top: 2.55rem;
	font-family: monospace;
	width: 100% !important;
	}

	& > iframe { // e.g. mailvelope frame
	border-radius: .3rem;
	border: 1px solid @color-input-border;
	min-height: 30em;
	}

	#composebody_ifr {
	min-height: 30em;
	}

	& > .mce-tinymce.focused {
	border-color: @color-input-border-focus;
	box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow !important;
	}
	}


	/* GoogieSpell widget */

	.googie_window {
	width: 16rem;
	}

	.googie_edit_layer {
	font-family: monospace;

	// from Bootstrap's textarea
	padding: .5rem .75rem;
	border: 1px solid @color-input-border;
	border-radius: .3rem;
	line-height: 1.25;
	}

	.googie_link {
	color: @color-spellcheck-link;
	text-decoration: underline;
	cursor: pointer;
	}

	.googie_list {
	td {
	min-width: 8rem;
	width: auto;

	&.googie_list_onhover {
	color: @color-toolbarmenu-hover;
	background-color: @color-toolbarmenu-hover-background;
	}

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

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

	input {
	display: inline-block;
	margin: .5rem .5rem .5rem 0 !important;
	padding: .5rem .75rem !important;
	}
	}
	diff --git a/skins/elastic/styles/widgets/jqueryui.less b/skins/elastic/styles/widgets/jqueryui.less
	index b47b6bde3..069356ec1 100644
	--- a/skins/elastic/styles/widgets/jqueryui.less
	+++ b/skins/elastic/styles/widgets/jqueryui.less
	@@ -1,439 +1,439 @@
	/**
	* 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.
	*/

	/* jQuery-UI widgets' style overrides */

	.ui-widget-overlay {
	background-color: @color-dialog-overlay-background;
	opacity: 1 !important; // override jQuery-UI opacity, the color above is semi-transparent

	&.datepicker {
	z-index: 119; // above Bootstrap's form controls, below datepicker
	}
	}

	.ui-widget {
	border: 1px solid @color-datepicker-border;
	box-shadow: 3px 3px 5px @color-popover-shadow;
	border-radius: .3rem;
	}

	.ui-menu {
	overflow-y: auto;
	overflow-x: hidden;
	max-height: 400px;
	border-radius: .3rem;
	z-index: 240;
	position: absolute;

	.ui-state-active {
	border: 0 !important;
	background-color: @color-toolbarmenu-hover-background !important;
	}

	.ui-menu-item {
	white-space: nowrap;
	cursor: default;
	}

	.ui-menu-item-wrapper {
	margin: 0 !important;
	}
	}

	.ui-dialog {
	border-radius: 0;
	box-shadow: none;

	&.no-titlebar {
	.ui-dialog-titlebar {
	display: none;
	}
	}

	.ui-dialog-titlebar {
	height: @layout-header-height;
	border-bottom: 1px solid @color-dialog-header-border;

	button {
	&:before {
	margin: 0;
	}
	}
	}

	.ui-dialog-title {
	line-height: @layout-header-height;
	font-size: 1.25rem;
	padding: 0 3rem 0 1rem;
	color: @color-dialog-header;
	}

	.ui-dialog-titlebar-close {
	border: 0;
	color: @color-dialog-header;
	background: transparent;
	right: 0;
	top: 0;
	position: absolute;
	- padding: .25rem;
	+ padding: .25rem .5rem;
	margin: ((@layout-header-height - 2rem) / 2) .5rem;

	&:before {
	&:extend(.font-icon-class);
	content: @fa-var-times;
	line-height: 1.5rem;
	- height: 1.5rem;
	+ margin: 0 !important;
	}
	}

	.ui-dialog-content {
	// fixes resize issue e.g. in qr-code dialog
	box-sizing: initial;

	& > .popupmenu {
	display: block !important;
	}
	}

	.ui-dialog-buttonpane {
	.ui-dialog-buttonset {
	display: flex;
	justify-content: flex-end;

	a.btn-link,
	button {
	.overflow-ellipsis;
	min-width: 5rem;
	margin: .65rem .3rem;

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

	a.btn-link {
	padding-right: 0;
	padding-left: 0;
	text-decoration: none;
	color: @color-font;

	&:focus {
	background-color: fade(@color-btn-primary-background, 50%);
	}

	&.options {
	order: -1;
	padding: .375rem .25rem;
	margin-right: .3rem;

	&:before {
	// this icon is for mobile version
	&:extend(.font-icon-class);
	content: @fa-var-cog;
	width: 100%;
	height: 1.25em;
	}
	}
	}
	}
	}

	iframe,
	.ui-dialog-content.iframe {
	padding: 0;
	width: 100% !important;
	height: 100%;
	border: 0;
	overflow: hidden;
	}
	}

	// Overwriting this icon generally prevents from loading bigger images sprite from jQuery-UI
	.ui-widget-content .ui-icon.ui-resizable-se {
	background: @icon-resize-corner;
	background-size: cover;
	}

	/* FIXME: why do I need !important here? */

	@media screen and (max-width: @screen-width-xs) {
	.ui-dialog {
	width: 100% !important;
	height: 100% !important;
	display: flex;
	flex-direction: column;
	border: 0;

	.ui-resizable-handle,
	.ui-dialog-titlebar-close {
	display: none !important;
	}

	.ui-dialog-titlebar {
	height: @layout-touch-header-height;
	text-align: center;
	background-color: @color-layout-mobile-header-background;
	}

	.ui-dialog-title {
	line-height: @layout-touch-header-height;
	font-size: @layout-header-font-size;
	padding: 0 1rem;
	}

	.ui-dialog-content {
	flex: 1;
	&:not(.iframe) {
	padding: 1rem;
	}
	}

	.ui-dialog-buttonpane {
	padding: 0 !important;
	text-align: center !important;
	border-top: 1px solid @color-dialog-header-border;
	height: @layout-header-height !important;
	background-color: @color-layout-mobile-footer-background;

	.ui-dialog-buttonset {
	justify-content: space-around;

	button {
	margin: 0 !important;
	padding: .45rem;
	border: 0 !important;
	height: @layout-header-height;
	box-shadow: none;
	font-size: 90%;
	line-height: 1.5;

	&:before {
	display: block !important;
	float: none;
	width: auto;
	height: 1.75rem;
	line-height: 1.75;
	- margin: 0;
	+ margin: 0 !important;
	}

	&:active {
	box-shadow: none;
	}

	&.btn-primary,
	&.btn-secondary {
	color: @color-toolbar-button;
	background: transparent;
	}

	&.btn-danger {
	color: @color-btn-danger-background;
	background: transparent;
	}

	&.disabled,
	&:disabled {
	opacity: .5;
	}

	&.cancel {
	order: 100; // makes Cancel/close button the last one
	}
	}

	a.btn-link {
	color: @color-toolbar-button;
	margin: 0;
	padding: .45rem;
	font-size: 90%;

	&.options:before {
	display: block !important;
	height: 1.75rem;
	line-height: 1.75;
	margin: 0;
	}
	}
	}
	}
	}
	}

	/* Slider widget */

	.ui-slider {
	box-shadow: none;

	.ui-slider-range {
	border-radius: .3rem;
	background: lighten(@color-main, 30%);
	}

	.ui-slider-handle {
	border-radius: .3rem;

	&.ui-state-active {
	background: @color-main;
	border-color: @color-main-dark;
	}
	}
	}

	/* Datepicker widget */

	.ui-datepicker {
	// Always display datepicker centered, overwriting widgets position
	margin: ~"calc(50vh - 10em) calc(50vw - 10em) !important";
	top: 0 !important;
	left: 0 !important;
	box-shadow: none;
	user-select: none;

	&:not(.ui-datepicker-inline) {
	z-index: 120 !important; // fixes datepicker over input-group and dialogs
	}

	.ui-datepicker-header,
	.ui-datepicker-title {
	line-height: 4rem;
	height: 4rem;
	padding: 0;
	}

	.ui-datepicker-header {
	border-bottom: 1px solid @color-dialog-header-border;

	a {
	height: 4rem;
	}

	select {
	display: inline-block;
	}
	}

	.ui-icon {
	background-image: none !important;
	background-position: none !important;
	}

	.ui-datepicker-prev,
	.ui-datepicker-next {
	cursor: pointer;
	width: auto;

	&:before {
	&:extend(.font-icon-class);
	content: "\f053";
	margin: 0 .25em;
	height: auto;
	width: 1em;
	}
	}

	.ui-datepicker-prev:before {
	content: "\f053";
	}

	.ui-datepicker-next:before {
	content: "\f054";
	}

	td a {
	padding: 0;
	line-height: 1.8em;
	border-radius: .3rem;
	}

	.ui-state-default,
	&.ui-widget-content .ui-state-default {
	border: 0;
	background: transparent;
	color: @color-datepicker-font;
	}

	.ui-datepicker-days-cell-over a,
	.ui-datepicker-days-cell-over a.ui-state-default,
	.ui-state-highlight,
	&.ui-widget-content .ui-state-highlight {
	background: @color-datepicker-highlight-background;
	color: @color-datepicker-highlight;
	}

	a.ui-state-active {
	background: @color-datepicker-active-background !important;
	color: @color-datepicker-active !important;
	font-weight: bold;
	}

	html.touch {
	& {
	td a {
	font-size: 1.2em;
	line-height: 2.2em;
	}
	}
	}
	}

	// Fixes datepicker z-index issue on input-group inputs in dialogs
	// With non-relative position the input's z-index is ignored
	.input-group > .form-control.hasDatepicker {
	position: initial;
	}

	.minicolors-panel {
	border: 1px solid @color-datepicker-border;
	box-shadow: 3px 3px 5px @color-popover-shadow;
	border-radius: .3rem;
	height: 152px;
	padding: 1px;
	}

	.input-group {
	.minicolors-input {
	width: 100%;
	// needed so minicolors panel is not out of screen
	// when the input is on the right side, e.g. Calendar plugin settings
	// This is obviously minicolors script issue
	min-width: 130px;
	border-left: 0;
	border-right: 0;
	}

	.minicolors-swatch {
	height: 25px !important;
	}
	}

	@media screen and (max-width: @screen-width-mini) {
	.ui-widget-content {
	border-radius: 0;
	}

	.ui-menu {
	border-radius: .3rem;
	left: 15px !important;
	right: 15px;
	width: auto;
	}

	.ui-dialog {
	.ui-dialog-content:not(.iframe) {
	padding: .65rem;
	}
	}

	.ui-autocomplete {
	// TODO: e.g. time input autocompletion on mobile
	}
	}

File Metadata

Mime Type: text/x-diff
Expires: Fri, Feb 6, 9:17 AM (3 h, 6 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 428195
Default Alt Text: (41 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions