删除文件 styles
This commit is contained in:
和平才子
Gitee
parent
4be4e308cf
commit
ca7c54347e
|
|
@ -1,46 +0,0 @@
|
|||
// Beetroot and Darkbeet colors
|
||||
@color-main: #50162d;
|
||||
@color-link: #bd139a;
|
||||
@color-success: #50162d;
|
||||
@color-warning: #F6609D;
|
||||
@color-link-secondary: lighten(@color-font, 60%);
|
||||
@color-layout-header-background: #50162d;
|
||||
|
||||
// Task menu
|
||||
@color-taskmenu-background: #50162d;
|
||||
@color-taskmenu-button-action: #E0548D;
|
||||
@color-taskmenu-button-special: @color-taskmenu-button;
|
||||
@color-taskmenu-button-special-background: @color-taskmenu-background;
|
||||
@color-taskmenu-button-action-hover: #fff;
|
||||
@color-taskmenu-button-special-hover: lighten(@color-taskmenu-button-special, 10%);
|
||||
// @color-taskmenu-button-special-background-hover:lighten(@color-taskmenu-button-special-background, 10%);
|
||||
|
||||
// Toolbar
|
||||
@color-toolbar-button-background-hover: lighten(@color-layout-header-background, 10%);
|
||||
@color-searchbar-icon-active: green;
|
||||
|
||||
// Popovers (menus)
|
||||
@color-popover-header: @color-black-shade-text;
|
||||
@color-popover-header-background: transparent;
|
||||
|
||||
//Forms
|
||||
@color-btn-secondary-background: lighten(@color-main, 10%);
|
||||
|
||||
// Dark mode colors
|
||||
@color-dark-main: darken(@color-main, 10%);
|
||||
@color-dark-background: #252121;
|
||||
@color-dark-font: #DDDDDD;
|
||||
@color-dark-border: #292525;
|
||||
@color-dark-taskmenu-button-action: #4F8F93;
|
||||
@color-dark-taskmenu-button-action-hover: @color-dark-font;
|
||||
|
||||
@color-dark-list-selected: #FFFFFF;
|
||||
@color-dark-list-selected-background: #50162D;
|
||||
@color-dark-list-droptarget-background: #353131;
|
||||
@color-dark-list-border: #353131;
|
||||
@color-dark-input-border: #471328;
|
||||
@color-dark-input-addon-background: #292525;
|
||||
@color-dark-popover-background: #201c1c;
|
||||
@color-dark-popover-border: #50162d;
|
||||
|
||||
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
// Darkbeet modifications based on elastic skin
|
||||
@import "_darkc";
|
||||
|
||||
html.dark-mode {
|
||||
|
||||
// Have a black background when writing an email
|
||||
// .tox {
|
||||
// .tox-edit-area__iframe {
|
||||
// background-color: @color-dark-popover-background;
|
||||
// color: white;
|
||||
// }
|
||||
// }
|
||||
|
||||
#taskmenu {
|
||||
a {
|
||||
&.selected {
|
||||
color: white;
|
||||
background-color: @color-dark-list-selected-background;
|
||||
}
|
||||
}
|
||||
.action-buttons a {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.menu
|
||||
a.compose::before {
|
||||
color: white;
|
||||
}
|
||||
#layout > div > .header,
|
||||
#layout-menu {
|
||||
background-color: @color-dark-popover-background;
|
||||
border: unset;
|
||||
}
|
||||
|
||||
// The two following are to get lighter borders when composing message (to: and subject:), when focus
|
||||
.custom-file-label:focus:not(.is-invalid), .form-control:focus:not(.is-invalid) {
|
||||
border-color: #741d3f;
|
||||
}
|
||||
|
||||
.recipient-input.focus {
|
||||
border-color: #911648 !important;
|
||||
}
|
||||
|
||||
// Get dotted line around attachment brighter
|
||||
.file-upload {
|
||||
border: .2rem dashed @color-main;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
|
||||
@color-font: blue;
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
//Modification for Beetroot based on Elastic skin
|
||||
//
|
||||
@import "_colors";
|
||||
|
||||
#layout > div > .header {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.menu.toolbar a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
#layout > div > .header a.button {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.popover .menu li a {
|
||||
color: #2c363a;
|
||||
}
|
||||
|
||||
|
||||
/* login page */
|
||||
|
||||
& when (@dark-mode-enabled = true) {
|
||||
@import "_dark";
|
||||
}
|
||||
/*** Fonts ***/
|
||||
|
||||
@font-face {
|
||||
font-family: 'Icons';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src: url("../fonts/la-solid-900.woff2") format('woff2'),
|
||||
url("../fonts/la-solid-900.woff") format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url("../fonts/la-regular-400.woff2") format('woff2'),
|
||||
url("../fonts/la-regular-400.woff") format('woff');
|
||||
}
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
// Variables for custom Darkbeet/Beetroot theme based on Elastic skin
|
||||
|
||||
@import "_colors";
|
||||
|
||||
@dark-mode-enabled: true; // on change also have to change dark_mode_support in meta.json
|
||||
|
||||
@screen-width-large: 1200px;
|
||||
@screen-width-medium: 1024px;
|
||||
@screen-width-small: 768px;
|
||||
@screen-width-xs: 480px;
|
||||
@screen-width-mini: 320px;
|
||||
@screen-width-touch: @screen-width-medium;
|
||||
@screen-width-bs-phone: 576px;
|
||||
|
||||
@page-font-size: 14px;
|
||||
@page-min-width: 240px;
|
||||
|
||||
// Note: we'll set some values in pixels instead of rem to eliminate
|
||||
// Firefox sub-pixel rendering bug(s)
|
||||
|
||||
@layout-menu-width: floor(5.6 * @page-font-size);
|
||||
@layout-menu-width-sm: floor(3 * @page-font-size);
|
||||
@layout-header-height: floor(4.2 * @page-font-size);
|
||||
@layout-footer-height: @layout-header-height;
|
||||
@layout-footer-small-height: floor(2.5 * @page-font-size);
|
||||
@layout-header-font-size: 1rem;
|
||||
@layout-searchbar-height: floor(2.6 * @page-font-size);
|
||||
|
||||
@layout-touch-header-height: @layout-header-height;
|
||||
@layout-touch-header-font-size: floor(1.2 * @page-font-size);
|
||||
@layout-touch-menu-record-height: floor(3.4 * @page-font-size);
|
||||
@layout-touch-menu-record-font-size: floor(1.2 * @page-font-size);
|
||||
@layout-touch-icon-width: 2.2em;
|
||||
|
||||
@layout-mobile-menu-width: (@screen-width-mini * .85);
|
||||
|
||||
@layout-contact-icon-width: 112px;
|
||||
@layout-contact-icon-height: 135px;
|
||||
|
||||
@listing-line-height: floor(2.5 * @page-font-size);
|
||||
@listing-touch-line-height: floor(3.4 * @page-font-size);
|
||||
@listing-treetoggle-width: 1.5em;
|
||||
|
||||
@mail-header-photo-height: 4rem;
|
||||
|
||||
// Additional icons
|
||||
@icon-resize-corner: data-uri("image/svg+xml;charset=utf-8", "../images/corner-handle.svg"); // size: 16x16
|
||||
@icon-file-drop: data-uri("image/svg+xml;charset=utf-8", "../images/download.svg");
|
||||
|
||||
|
|
@ -1,278 +0,0 @@
|
|||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) The Roundcube Dev Team
|
||||
*
|
||||
* The contents are subject to the Creative Commons Attribution-ShareAlike
|
||||
* License. It is allowed to copy, distribute, transmit and to adapt the work
|
||||
* by keeping credits to the original authors in the README.md file.
|
||||
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
|
||||
*/
|
||||
|
||||
@color-main: #37beff;
|
||||
@color-main-dark: darken(@color-main, 35%);
|
||||
@color-black: #161b1d;
|
||||
@color-font: lighten(@color-black, 10%);
|
||||
@color-link: #00acff;
|
||||
@color-link-hover: darken(@color-link, 10%);
|
||||
@color-border: #ddd;
|
||||
@color-error: #ff5552;
|
||||
@color-success: #41b849;
|
||||
@color-warning: #ffd452;
|
||||
|
||||
@color-black-shade-text: tint(@color-black, 40%);
|
||||
@color-black-shade-border: lighten(@color-black, 75%);
|
||||
@color-black-shade-bg: lighten(@color-black, 85%);
|
||||
|
||||
|
||||
// Layout elements
|
||||
@color-layout-border: @color-black-shade-border;
|
||||
@color-layout-header: @color-font;
|
||||
@color-layout-sidebar-background: #fff;
|
||||
@color-layout-list-background: #fff;
|
||||
@color-layout-content-background: #fff;
|
||||
@color-layout-header-background: #f4f4f4;
|
||||
@color-layout-footer-background: #fff;
|
||||
|
||||
@color-layout-mobile-header-background: @color-layout-header-background;
|
||||
@color-layout-mobile-footer-background: @color-layout-header-background;
|
||||
|
||||
// Task menu
|
||||
@color-taskmenu-background: #2f3a3f;
|
||||
@color-taskmenu-button: #fff;
|
||||
@color-taskmenu-button-selected: @color-taskmenu-button;
|
||||
@color-taskmenu-button-action: @color-main;
|
||||
|
||||
@color-taskmenu-button-selected-background: lighten(@color-taskmenu-background, 10%);
|
||||
@color-taskmenu-button-action-background: transparent;
|
||||
|
||||
@color-taskmenu-button-hover: #fff;
|
||||
@color-taskmenu-button-selected-hover: #fff;
|
||||
@color-taskmenu-button-action-hover: @color-main;
|
||||
|
||||
@color-taskmenu-button-background-hover: lighten(@color-taskmenu-background, 10%);
|
||||
@color-taskmenu-button-action-background-hover: @color-taskmenu-button-background-hover;
|
||||
@color-taskmenu-button-logout: @color-error;
|
||||
@color-taskmenu-button-logout-hover: @color-error;
|
||||
|
||||
|
||||
// Toolbar
|
||||
@color-toolbar-button: @color-font;
|
||||
@color-toolbar-button-background-hover: darken(@color-layout-header-background, 3%);
|
||||
|
||||
@color-searchbar-background: #fbfbfb;
|
||||
|
||||
// Toolbar menu
|
||||
@color-menu-hover: #fff;
|
||||
@color-menu-hover-background: @color-main;
|
||||
|
||||
|
||||
// Listings
|
||||
@color-list: @color-font;
|
||||
@color-list-selected: @color-font;
|
||||
@color-list-selected-background: tint(@color-main, 90%);
|
||||
@color-list-flagged: @color-error;
|
||||
@color-list-deleted: fadeout(@color-font, 50%);
|
||||
@color-list-secondary: @color-black-shade-text;
|
||||
@color-list-droptarget-background: #ffffcc;
|
||||
@color-list-focus-indicator: lighten(@color-main, 20%);
|
||||
|
||||
@color-list-border: @color-black-shade-bg;
|
||||
@color-list-badge: #fff;
|
||||
@color-list-badge-background: @color-main;
|
||||
@color-list-recent: darken(@color-main, 20%);
|
||||
@color-list-recent-badge: #fff;
|
||||
@color-list-recent-badge-background: @color-main;
|
||||
|
||||
@color-list-pagenav: @color-black-shade-text;
|
||||
@color-list-icon: fadeout(@color-list-secondary, 25%);
|
||||
@color-list-unread-status: @color-warning;
|
||||
|
||||
@color-attachmentlist-border: #f4f4f4;
|
||||
@color-attachmentlist-background: #fcfcfc;
|
||||
|
||||
// Drag-n-drop layer
|
||||
@color-drag-layer: #fff;
|
||||
@color-drag-layer-background: @color-taskmenu-background;
|
||||
@color-drag-layer-shadow: @color-black-shade-bg;
|
||||
|
||||
|
||||
// Messages
|
||||
@color-message: @color-font;
|
||||
@color-message-border: transparent;
|
||||
@color-message-background: fadeout(@color-main, 95%);
|
||||
@color-message-text: #fff;
|
||||
@color-message-link: @color-main;
|
||||
@color-message-link-font-weight: normal;
|
||||
@color-message-information: @color-main;
|
||||
@color-message-success: @color-success;
|
||||
@color-message-warning: @color-warning;
|
||||
@color-message-error: @color-error;
|
||||
@color-message-loading: tint(@color-font, 30%);
|
||||
@color-message-information-text: @color-message-text;
|
||||
@color-message-success-text: @color-message-text;
|
||||
@color-message-warning-text: @color-message;
|
||||
@color-message-error-text: @color-message-text;
|
||||
@color-message-loading-text: @color-message-text;
|
||||
@color-message-error-box: @color-message;
|
||||
@color-message-information-box: @color-message;
|
||||
@color-message-success-box: @color-message;
|
||||
@color-message-warning-box: @color-message;
|
||||
@color-message-error-box-background: fadeout(@color-message-error, 80%);
|
||||
@color-message-information-box-background: fadeout(@color-message-information, 80%);
|
||||
@color-message-success-box-background: fadeout(@color-message-success, 80%);
|
||||
@color-message-warning-box-background: fadeout(@color-message-warning, 80%);
|
||||
|
||||
|
||||
// Popovers (menus)
|
||||
@color-popover-shadow: @color-black-shade-bg;
|
||||
@color-popover-separator: @color-black-shade-text;
|
||||
@color-popover-separator-background: @color-black-shade-bg;
|
||||
@color-popover-mobile-header: #fff;
|
||||
@color-popover-mobile-header-background: @color-main-dark;
|
||||
@color-popover-mobile-dropbutton-background: #f6f6f6;
|
||||
|
||||
// Dialogs
|
||||
@color-dialog-overlay-background: fade(@color-font, 50%);
|
||||
@color-dialog-header: @color-layout-header;
|
||||
@color-dialog-header-border: @color-border;
|
||||
|
||||
|
||||
@color-spinner-circle: @color-black-shade-bg;
|
||||
@color-spinner-item: @color-black-shade-text;
|
||||
|
||||
|
||||
// Forms
|
||||
@color-input: @color-font;
|
||||
@color-input-border: #ced4da; // from Bootstrap's .form-control
|
||||
@color-input-border-focus: @color-main;
|
||||
@color-input-border-focus-shadow: fadeout(@color-main, 75);
|
||||
@color-input-border-invalid: @color-error;
|
||||
@color-input-border-invalid-shadow: fadeout(@color-error, 75);
|
||||
@color-input-addon-background: @color-black-shade-bg;
|
||||
@color-recipient-input-border: @color-input-border;
|
||||
@color-recipient-input-background: @color-black-shade-bg;
|
||||
@color-input-placeholder: #bbb;
|
||||
|
||||
@color-checkbox: @color-main;
|
||||
@color-checkbox-checked: @color-main;
|
||||
@color-checkbox-checked-disabled: lighten(@color-main, 15%);
|
||||
@color-checkbox-focus: @color-input-border-focus;
|
||||
@color-checkbox-focus-shadow: @color-input-border-focus-shadow;
|
||||
|
||||
@color-form-hint: @color-black-shade-text;
|
||||
|
||||
@color-image-upload-background: #f4f4f4;
|
||||
|
||||
@color-btn-secondary: #fff;
|
||||
@color-btn-secondary-background: lighten(@color-black, 50%);
|
||||
@color-btn-primary: #fff;
|
||||
@color-btn-primary-background: @color-main;
|
||||
@color-btn-danger: #fff;
|
||||
@color-btn-danger-background: @color-error;
|
||||
|
||||
@color-quota-background: #fff;
|
||||
@color-quota-text: @color-black-shade-text;
|
||||
@color-quota-value: @color-main;
|
||||
@color-quota-value-warning: @color-error;
|
||||
|
||||
@color-blockquote-background: fadeout(@color-black-shade-bg, 50%);
|
||||
@color-blockquote-0: darken(@color-main, 30%);
|
||||
@color-blockquote-1: darken(@color-success, 25%);
|
||||
@color-blockquote-2: darken(@color-error, 20%);
|
||||
@color-blockquote-0-border: @color-blockquote-0;
|
||||
@color-blockquote-1-border: @color-blockquote-1;
|
||||
@color-blockquote-2-border: @color-blockquote-2;
|
||||
|
||||
@color-mail-signature: @color-black-shade-text;
|
||||
@color-mail-headers: @color-black-shade-text;
|
||||
|
||||
@color-messagepart-border: #f4f4f4;
|
||||
@color-messagepart-background: #fcfcfc;
|
||||
|
||||
@color-spellcheck-link: @color-error;
|
||||
|
||||
@color-table-border: @color-layout-border;
|
||||
@color-table-selected: @color-list-selected;
|
||||
@color-table-selected-background: @color-list-selected-background;
|
||||
|
||||
|
||||
// Datepicker
|
||||
@color-datepicker-border: @color-layout-border;
|
||||
@color-datepicker-font: @color-font;
|
||||
@color-datepicker-highlight: @color-main;
|
||||
@color-datepicker-highlight-background: lighten(@color-main, 30%);
|
||||
@color-datepicker-active: #fff;
|
||||
@color-datepicker-active-background: @color-main;
|
||||
|
||||
|
||||
// HTML editor
|
||||
@color-editor-disabled-mask: fadeout(lighten(@color-black, 85), 10);
|
||||
|
||||
|
||||
// Image tools
|
||||
@color-image-tools: #fff;
|
||||
@color-image-tools-background: fadeout(@color-main, 60%);
|
||||
@color-image-tools-hover: fadeout(@color-main, 50%);
|
||||
|
||||
|
||||
// Scrollbars
|
||||
@color-scrollbar-thumb: #c1c1c1;
|
||||
@color-scrollbar-track: #f1f1f1;
|
||||
|
||||
|
||||
// Dark mode colors
|
||||
@color-dark-main: darken(@color-main, 30%);
|
||||
@color-dark-background: #21292c;
|
||||
@color-dark-font: #c5d1d3;
|
||||
@color-dark-border: #4d6066;
|
||||
@color-dark-hint: darken(@color-dark-font, 20%);
|
||||
@color-dark-information: shade(@color-main, 40%);
|
||||
@color-dark-success: shade(@color-success, 40%);
|
||||
@color-dark-warning: shade(@color-warning, 40%);
|
||||
@color-dark-error: shade(@color-error, 40%);
|
||||
|
||||
@color-dark-list-selected: @color-main;
|
||||
@color-dark-list-selected-background: #374549;
|
||||
@color-dark-list-badge: lighten(@color-dark-font, 10%);
|
||||
@color-dark-list-badge-background: @color-dark-border;
|
||||
@color-dark-list-deleted: darken(@color-dark-hint, 15%);
|
||||
@color-dark-list-droptarget-background: #4d4d00;
|
||||
@color-dark-list-border: #2c373a;
|
||||
|
||||
@color-dark-input: @color-dark-font;
|
||||
@color-dark-input-border: #7c949c;
|
||||
@color-dark-input-background: @color-dark-background;
|
||||
@color-dark-input-focus: #e2e7e9;
|
||||
@color-dark-input-border-focus: @color-main;
|
||||
@color-dark-input-background-focus: lighten(@color-dark-background, 5%);
|
||||
@color-dark-input-addon-background: #374549;
|
||||
@color-dark-input-addon-background-focus: lighten(@color-dark-list-selected-background, 15%);
|
||||
@color-dark-checkbox: @color-dark-border;
|
||||
@color-dark-checkbox-checked: @color-dark-main;
|
||||
|
||||
@color-dark-btn: lighten(@color-dark-font, 10%);
|
||||
@color-dark-btn-primary-background: @color-dark-main;
|
||||
@color-dark-btn-secondary-background: @color-dark-border;
|
||||
@color-dark-btn-danger-background: @color-dark-error;
|
||||
|
||||
@color-dark-dialog-overlay-background: fade(black, 70%);
|
||||
|
||||
@color-dark-popover-background: #161b1d;
|
||||
@color-dark-popover-border: lighten(#161b1d, 50%);
|
||||
|
||||
@color-dark-message-information: @color-dark-information;
|
||||
@color-dark-message-success: @color-dark-success;
|
||||
@color-dark-message-warning: @color-dark-warning;
|
||||
@color-dark-message-error: @color-dark-error;
|
||||
@color-dark-message-loading: lighten(@color-dark-background, 10%);
|
||||
|
||||
@color-dark-scrollbar-thumb: darken(@color-main, 25%);
|
||||
@color-dark-scrollbar-track: @color-dark-border;
|
||||
|
||||
@color-dark-blockquote-0: lighten(@color-main, 10%);
|
||||
@color-dark-blockquote-1: lighten(@color-success, 10%);
|
||||
@color-dark-blockquote-2: lighten(@color-error, 10%);
|
||||
@color-dark-blockquote-0-border: @color-dark-blockquote-0;
|
||||
@color-dark-blockquote-1-border: @color-dark-blockquote-1;
|
||||
@color-dark-blockquote-2-border: @color-dark-blockquote-2;
|
||||
1123
styles/dark.less
1123
styles/dark.less
File diff suppressed because it is too large
Load Diff
|
|
@ -1,95 +0,0 @@
|
|||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) 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.
|
||||
*/
|
||||
|
||||
/* Style for embedded pages and TinyMCE editor content page */
|
||||
|
||||
@import "global";
|
||||
|
||||
.mce-content-body {
|
||||
margin: 4px;
|
||||
color: @color-input;
|
||||
|
||||
div.pre {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: #1010ff 2px solid;
|
||||
margin: 0;
|
||||
padding: 0 0.4em;
|
||||
}
|
||||
}
|
||||
|
||||
.rcmail-inline-message {
|
||||
.font-family();
|
||||
font-size: @page-font-size;
|
||||
padding: .5em;
|
||||
margin: 0 0 .5em 0;
|
||||
opacity: .95;
|
||||
color: @color-message;
|
||||
background-color: @color-message-warning-box-background;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:before {
|
||||
.font-icon-class();
|
||||
font-size: 1.5em;
|
||||
line-height: 1;
|
||||
width: 1em;
|
||||
margin-right: .3em;
|
||||
content: @fa-var-exclamation-triangle;
|
||||
color: @color-message-warning;
|
||||
}
|
||||
|
||||
span {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
a {
|
||||
color: @color-link;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: @color-link-hover;
|
||||
}
|
||||
|
||||
button {
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
padding: .375em .75em;
|
||||
margin-left: .5em;
|
||||
font-size: 1em;
|
||||
line-height: 1.5;
|
||||
border-radius: .25em;
|
||||
border: 1px solid transparent;
|
||||
color: @color-btn-primary;
|
||||
background: @color-btn-primary-background;
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 .2rem fade(@color-btn-primary-background, 50%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken(@color-btn-primary-background, 8%);
|
||||
border-color: darken(@color-btn-primary-background, 10%);
|
||||
}
|
||||
|
||||
&:not([disabled]):not(.disabled):active {
|
||||
background: darken(@color-btn-primary-background, 11%);
|
||||
border-color: darken(@color-btn-primary-background, 13%);
|
||||
box-shadow: 0 0 0 .2rem fade(@color-btn-primary-background, 53%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rcmail-inline-buttons {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
.popover,.rcmail-inline-message,body,button,input,optgroup,select,textarea{font-family:Roboto,sans-serif}@font-face{font-family:Icons;font-style:normal;font-weight:900;src:url(../fonts/fa-solid-900.woff2) format('woff2'),url(../fonts/fa-solid-900.woff) format('woff')}@font-face{font-family:Icons;font-style:normal;font-weight:400;src:url(../fonts/fa-regular-400.woff2) format('woff2'),url(../fonts/fa-regular-400.woff) format('woff')}@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:local('Roboto'),local('Roboto-Regular'),url(../fonts/roboto-v29-regular.woff2) format('woff2'),url(../fonts/roboto-v29-regular.woff) format('woff')}@font-face{font-family:Roboto;font-style:italic;font-weight:400;src:local('Roboto Italic'),local('Roboto-Italic'),url(../fonts/roboto-v29-italic.woff2) format('woff2'),url(../fonts/roboto-v29-italic.woff) format('woff')}@font-face{font-family:Roboto;font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(../fonts/roboto-v29-regular-700.woff2) format('woff2'),url(../fonts/roboto-v29-regular-700.woff) format('woff')}@font-face{font-family:Roboto;font-style:italic;font-weight:700;src:local('Roboto Bold Italic'),local('Roboto-BoldItalic'),url(../fonts/roboto-v29-italic-700.woff2) format('woff2'),url(../fonts/roboto-v29-italic-700.woff) format('woff')}button,input,select,textarea{line-height:initial}input{vertical-align:middle}a{color:#bd139a}a:hover{color:#8f0e74}a.disabled{pointer-events:none}a.disabled:not(.btn){opacity:.5}html:not(.touch) ::-webkit-scrollbar{width:6px}html{scrollbar-color:#c1c1c1 #f1f1f1}html:not(.touch) ::-webkit-scrollbar-track{background-color:#f1f1f1}html:not(.touch) ::-webkit-scrollbar-thumb{background-color:#c1c1c1}.mce-content-body{margin:4px;color:#2c363a}.mce-content-body div.pre{font-family:monospace}.mce-content-body blockquote{border-left:#1010ff 2px solid;margin:0;padding:0 .4em}.rcmail-inline-message{font-size:14px;padding:.5em;margin:0 0 .5em;opacity:.95;color:#2c363a;background-color:rgba(246,96,157,.2);display:flex;align-items:center}.rcmail-inline-message:before{display:block;float:left;margin:0 .3em 0 0;height:1em;font-family:Icons;font-style:normal;font-weight:900;text-decoration:inherit;text-align:center;speak:none;font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:1.5em;line-height:1;width:1em;content:"\f071";color:#F6609D}.rcmail-inline-message span{line-height:1.5}.rcmail-inline-message a{color:#bd139a}.rcmail-inline-message a:hover{color:#8f0e74}.rcmail-inline-message button{vertical-align:middle;white-space:nowrap;padding:.375em .75em;margin-left:.5em;font-size:1em;line-height:1.5;border-radius:.25em;border:1px solid transparent;color:#fff;background:#50162d}.rcmail-inline-message button:focus{box-shadow:0 0 0 .2rem rgba(80,22,45,.5)}.rcmail-inline-message button:hover{background:#300d1b;border-color:#280b17}.rcmail-inline-message button:not([disabled]):not(.disabled):active{background:#240a14;border-color:#1c0810;box-shadow:0 0 0 .2rem rgba(80,22,45,.53)}.rcmail-inline-buttons{margin:0}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,149 +0,0 @@
|
|||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) The Roundcube Dev Team
|
||||
*
|
||||
* The contents are subject to the Creative Commons Attribution-ShareAlike
|
||||
* License. It is allowed to copy, distribute, transmit and to adapt the work
|
||||
* by keeping credits to the original authors in the README.md file.
|
||||
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
|
||||
*/
|
||||
|
||||
@import (reference) "variables";
|
||||
@import (reference) "mixins";
|
||||
|
||||
/*** Fonts ***/
|
||||
|
||||
@font-face {
|
||||
font-family: 'Icons';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src: url("../fonts/fa-solid-900.woff2") format('woff2'),
|
||||
url("../fonts/fa-solid-900.woff") format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url("../fonts/fa-regular-400.woff2") format('woff2'),
|
||||
url("../fonts/fa-regular-400.woff") format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Roboto'), local('Roboto-Regular'),
|
||||
url('../fonts/roboto-v29-regular.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
|
||||
url('../fonts/roboto-v29-regular.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Roboto Italic'), local('Roboto-Italic'),
|
||||
url('../fonts/roboto-v29-italic.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
|
||||
url('../fonts/roboto-v29-italic.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Roboto Bold'), local('Roboto-Bold'),
|
||||
url('../fonts/roboto-v29-regular-700.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
|
||||
url('../fonts/roboto-v29-regular-700.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
|
||||
url('../fonts/roboto-v29-italic-700.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
|
||||
url('../fonts/roboto-v29-italic-700.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
|
||||
}
|
||||
|
||||
/* Reset some Bootstrap style */
|
||||
|
||||
body, button, input, optgroup, select, textarea, .popover {
|
||||
.font-family();
|
||||
}
|
||||
|
||||
button, input, select, textarea {
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
input {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
a {
|
||||
color: @color-link;
|
||||
|
||||
&:hover {
|
||||
color: @color-link-hover;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.disabled:not(.btn) {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
/* Scrollbar styles */
|
||||
|
||||
html when not (@scrollbar-width = unset) {
|
||||
// Ignore thin width setting for Firefox, it makes the scrollbar very very thin in Firefox >= 100
|
||||
& when not (@scrollbar-width = thin) {
|
||||
scrollbar-width: @scrollbar-width;
|
||||
|
||||
textarea,
|
||||
select,
|
||||
.popover-body,
|
||||
.popupmenu,
|
||||
.ui-menu,
|
||||
.ui-dialog-content,
|
||||
.frame-content,
|
||||
.formcontent,
|
||||
.table-responsive,
|
||||
.table-responsive-sm,
|
||||
.tox-menu,
|
||||
.tox-dialog__body-nav,
|
||||
.tox-collection__group,
|
||||
.scroller {
|
||||
// Firefox does not inherit scrollbar size from the html element
|
||||
scrollbar-width: @scrollbar-width;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.touch) {
|
||||
::-webkit-scrollbar when (@scrollbar-width = auto) {
|
||||
// Note: If we do not set the width a default scrollbar is used in Chrome.
|
||||
// And the custom colors set below do not work
|
||||
width: 12px;
|
||||
}
|
||||
::-webkit-scrollbar when (@scrollbar-width = thin) {
|
||||
width: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
scrollbar-color: @color-scrollbar-thumb @color-scrollbar-track;
|
||||
|
||||
&:not(.touch) {
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: @color-scrollbar-track;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: @color-scrollbar-thumb;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,414 +0,0 @@
|
|||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) The Roundcube Dev Team
|
||||
*
|
||||
* The contents are subject to the Creative Commons Attribution-ShareAlike
|
||||
* License. It is allowed to copy, distribute, transmit and to adapt the work
|
||||
* by keeping credits to the original authors in the README.md file.
|
||||
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
|
||||
*/
|
||||
|
||||
/*** Responsive design - Layout ***/
|
||||
|
||||
/*
|
||||
- Large screen (width > 1200px)
|
||||
-----------------------------------------------------------------------------------------------------
|
||||
| menu | sidebar | list | content |
|
||||
-----------------------------------------------------------------------------------------------------
|
||||
- Normal screen (1200px => width => 768px) - typical: 768x1024 (iPad Mini/Air)
|
||||
-------------------------------------------------------------------
|
||||
|menu| sidebar/list | content |
|
||||
-------------------------------------------------------------------
|
||||
- Small (480px < width < 768px)
|
||||
------------------------------------------
|
||||
|menu| sidebar/list/content |
|
||||
------------------------------------------
|
||||
- Phone (width <= 480px) - typical: 320x480 (iPhone 5), 375x667 (iPhone 6-7), 360x564 (Galaxy S6)
|
||||
------------------------
|
||||
| sidebar/list/content |
|
||||
------------------------
|
||||
*/
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
font-size: @page-font-size;
|
||||
}
|
||||
|
||||
body {
|
||||
min-width: @page-min-width;
|
||||
height: 100%;
|
||||
color: @color-font;
|
||||
overflow: hidden;
|
||||
|
||||
html.iframe & {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
#layout {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
& > div {
|
||||
& > .scroller {
|
||||
flex: 1;
|
||||
position: relative; // for .listing-info positioning
|
||||
}
|
||||
|
||||
& > .header,
|
||||
& > .footer {
|
||||
font-size: @layout-header-font-size;
|
||||
font-weight: bold;
|
||||
line-height: @layout-header-height;
|
||||
height: @layout-header-height;
|
||||
min-height: @layout-header-height;
|
||||
padding: 0 .25em;
|
||||
margin: 0;
|
||||
position: relative; // for absolute positioning of searchbar
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
& > .header {
|
||||
border-bottom: 1px solid @color-layout-border;
|
||||
color: @color-layout-header;
|
||||
background-color: @color-layout-header-background;
|
||||
|
||||
.header-title {
|
||||
.overflow-ellipsis();
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
margin: 0 -20rem;
|
||||
}
|
||||
|
||||
a.button {
|
||||
color: @color-toolbar-button;
|
||||
}
|
||||
|
||||
a.toolbar-list-button,
|
||||
a.toolbar-menu-button {
|
||||
order: 99; // always the last button
|
||||
}
|
||||
}
|
||||
|
||||
& > .footer {
|
||||
border-top: 1px solid @color-layout-border;
|
||||
background-color: @color-layout-footer-background;
|
||||
|
||||
& when not (@layout-footer-height = @layout-header-height) {
|
||||
height: @layout-footer-height;
|
||||
min-height: @layout-footer-height;
|
||||
line-height: @layout-footer-height;
|
||||
}
|
||||
|
||||
&.small {
|
||||
height: @layout-footer-small-height;
|
||||
min-height: @layout-footer-small-height;
|
||||
line-height: @layout-footer-small-height;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#layout-sidebar {
|
||||
position: relative; // e.g. for .column-resizer
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 2;
|
||||
max-width: 30%;
|
||||
min-width: 220px;
|
||||
border-right: 1px solid @color-layout-border;
|
||||
background-color: @color-layout-sidebar-background;
|
||||
|
||||
&.sidebar-right {
|
||||
order: 2;
|
||||
border-right: 0;
|
||||
border-left: 1px solid @color-layout-border;
|
||||
// sidebar on right is unusual situation, probably there's no list in layout,
|
||||
// in such a case we can make it a little bit wider
|
||||
flex: 3;
|
||||
}
|
||||
}
|
||||
|
||||
#layout-list {
|
||||
position: relative; // e.g. for .column-resizer
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 3;
|
||||
max-width: 30%;
|
||||
min-width: 300px;
|
||||
border-right: 1px solid @color-layout-border;
|
||||
background-color: @color-layout-list-background;
|
||||
}
|
||||
|
||||
#layout-content {
|
||||
display: flex;
|
||||
flex: 6;
|
||||
flex-direction: column;
|
||||
background-color: @color-layout-content-background;
|
||||
width: 100%;
|
||||
|
||||
html.iframe & {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
& > .formcontent, // e.g. Help plugin
|
||||
& > .content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.iframe-wrapper {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.only > .scroller {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
#layout-menu {
|
||||
&.popover {
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
.popover-header {
|
||||
height: @layout-header-height;
|
||||
line-height: @layout-header-height;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
max-height: @layout-header-height;
|
||||
max-width: @layout-menu-width;
|
||||
padding: .25rem;
|
||||
|
||||
@media screen and (min-width: (@screen-width-xs + 1px)) and (max-width: @screen-width-medium) {
|
||||
max-width: @layout-menu-width * 0.45;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: (@screen-width-xs + 1px)) {
|
||||
padding: 0 !important;
|
||||
background-color: @color-taskmenu-background !important;
|
||||
|
||||
a {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
html.layout-phone & {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 .5rem;
|
||||
|
||||
img {
|
||||
max-width: @layout-mobile-menu-width - 50px;
|
||||
}
|
||||
|
||||
a {
|
||||
width: auto;
|
||||
flex: 1;
|
||||
|
||||
&:before {
|
||||
height: @layout-touch-header-height;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.inner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.column-resizer {
|
||||
cursor: col-resize;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -3px;
|
||||
width: 6px;
|
||||
height: 100%;
|
||||
|
||||
&.inverted {
|
||||
right: auto;
|
||||
left: -3px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
width: 10000px;
|
||||
right: -5000px;
|
||||
|
||||
&.inverted {
|
||||
right: auto;
|
||||
left: -5000px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-width-large) {
|
||||
#layout-sidebar,
|
||||
#layout-list {
|
||||
min-width: 260px;
|
||||
flex: 3;
|
||||
}
|
||||
|
||||
#layout-list > .header > a.button {
|
||||
padding: 0 .25rem;
|
||||
margin: 0 .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-width-medium) {
|
||||
// Disable column resizing by hiding splitters and resetting columns width
|
||||
.column-resizer {
|
||||
display: none;
|
||||
}
|
||||
#layout-sidebar,
|
||||
#layout-list {
|
||||
width: auto !important;
|
||||
flex: 3 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-width-small) {
|
||||
#layout-sidebar,
|
||||
#layout-list {
|
||||
max-width: none;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
#layout > div > .header {
|
||||
background-color: @color-layout-mobile-header-background;
|
||||
|
||||
a.button {
|
||||
// make the button active area smaller on touch devices
|
||||
margin: 0 .3rem !important;
|
||||
padding: 0 !important;
|
||||
|
||||
&:before {
|
||||
font-size: 1.75rem;
|
||||
height: @layout-touch-header-height;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.filter:before {
|
||||
font-size: 1.6rem; // this icon is too big in FA5
|
||||
}
|
||||
|
||||
.inner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#layout > div > .footer {
|
||||
background-color: @color-layout-mobile-footer-background;
|
||||
}
|
||||
|
||||
a.toolbar-list-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-width-xs) {
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-width-mini) {
|
||||
#layout-sidebar,
|
||||
#layout-list {
|
||||
min-width: @page-min-width;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: (@screen-width-xs + 1px)) {
|
||||
a.task-menu-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#layout-menu {
|
||||
// FIXME: we set background color here not in taskmenu.less, because
|
||||
// otherwise background is partially white on Android/iOS
|
||||
background-color: @color-taskmenu-background;
|
||||
width: @layout-menu-width-sm;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: (@screen-width-small + 1px)) {
|
||||
.floating-action-buttons,
|
||||
#layout-content > .header > .header-title,
|
||||
#layout > div > .header > .buttons,
|
||||
a.toolbar-menu-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: (@screen-width-medium + 1px)) {
|
||||
#layout-menu {
|
||||
width: @layout-menu-width;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: (@screen-width-large + 1px)) {
|
||||
#layout-list > .header > .header-title:not(.all-sizes),
|
||||
a.toolbar-list-button,
|
||||
a.back-list-button,
|
||||
a.back-sidebar-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
html.layout-phone {
|
||||
.hidden-phone {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
html.layout-phone,
|
||||
html.layout-small {
|
||||
.hidden-small {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
html.layout-small {
|
||||
.hidden-lbs {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
html.layout-large,
|
||||
html.layout-normal {
|
||||
.hidden-lbs,
|
||||
.hidden-big {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
html.layout-large {
|
||||
.hidden-large {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) 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.
|
||||
*/
|
||||
|
||||
/*** Font-icons ***/
|
||||
|
||||
.font-icon-class {
|
||||
font-size: 1.25em;
|
||||
// FIXME: with inline-block we have some problems with icon alignment
|
||||
// display: inline-block;
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 0 .25rem 0 0;
|
||||
width: 1.18em;
|
||||
height: 1em;
|
||||
font-family: 'Icons';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
text-decoration: inherit;
|
||||
text-align: center;
|
||||
speak: none;
|
||||
font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.animated-icon-class {
|
||||
// spinner-border is defined in Bootstrap
|
||||
-webkit-animation: spinner-border 1.5s infinite linear;
|
||||
animation: spinner-border 1.5s infinite linear;
|
||||
}
|
||||
|
||||
.font-icon-solid(@icon) {
|
||||
content: @icon;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.font-icon-regular(@icon) {
|
||||
content: @icon;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.overflow-ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.font-family {
|
||||
font-family: Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.style-input-focus {
|
||||
border-color: @color-input-border-focus;
|
||||
box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow;
|
||||
}
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) 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.
|
||||
*/
|
||||
|
||||
/*** Additional styles for printouts ***/
|
||||
|
||||
body {
|
||||
overflow: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#print-layout {
|
||||
margin: 1rem;
|
||||
|
||||
#logo {
|
||||
max-height: 80px;
|
||||
}
|
||||
|
||||
// Overwrites for mail message printouts
|
||||
|
||||
.image-attachment {
|
||||
.image-link {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.attachment-links {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#message-header {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.attachment-size {
|
||||
padding-left: .1rem;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
page-break-inside: auto;
|
||||
}
|
||||
|
||||
// Overwrites for contact printouts
|
||||
|
||||
.formcontent {
|
||||
padding: 0;
|
||||
|
||||
legend {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
.row .form-control-plaintext {
|
||||
padding: .1rem;
|
||||
}
|
||||
|
||||
.contactfield {
|
||||
padding: .2rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.propform.grouped .row.input-group .input-group-text {
|
||||
padding: 0;
|
||||
min-width: 12rem;
|
||||
background: #fff;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.contact-header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
#print-layout #message-header,#print-layout .image-attachment .image-link{margin-bottom:.5rem}body{overflow:auto;height:auto}#print-layout{margin:1rem}#print-layout #logo{max-height:80px}#print-layout .image-attachment .attachment-links{display:none}#print-layout .attachment-size{padding-left:.1rem}#print-layout blockquote{page-break-inside:auto}#print-layout .formcontent{padding:0}#print-layout .formcontent legend{margin-top:.5rem}#print-layout .formcontent .row .form-control-plaintext{padding:.1rem}#print-layout .formcontent .contactfield{padding:.2rem 0}#print-layout .propform.grouped .row.input-group .input-group-text{padding:0;min-width:12rem;background:#fff;border:0}#print-layout .contact-header{margin-bottom:0}
|
||||
|
|
@ -1,458 +0,0 @@
|
|||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) The Roundcube Dev Team
|
||||
*
|
||||
* The contents are subject to the Creative Commons Attribution-ShareAlike
|
||||
* License. It is allowed to copy, distribute, transmit and to adapt the work
|
||||
* by keeping credits to the original authors in the README.md file.
|
||||
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
|
||||
*/
|
||||
|
||||
@import "global";
|
||||
@import "layout";
|
||||
@import "widgets/common";
|
||||
@import "widgets/buttons";
|
||||
@import "widgets/jqueryui";
|
||||
@import "widgets/dialogs";
|
||||
@import "widgets/menu";
|
||||
@import "widgets/messages";
|
||||
@import "widgets/lists";
|
||||
@import "widgets/forms";
|
||||
@import "widgets/editor";
|
||||
|
||||
|
||||
/*** Login form ***/
|
||||
|
||||
.task-login {
|
||||
#layout-content {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#logo {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 16vh;
|
||||
max-height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
#login-form {
|
||||
margin: 0 auto;
|
||||
top: 20vh;
|
||||
width: 95%;
|
||||
max-width: 320px;
|
||||
position: relative;
|
||||
|
||||
// Fixes table width in IE11
|
||||
table, tbody {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Fixes input width in IE11
|
||||
.row {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.oauthlogin {
|
||||
margin-top: 1em;
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.formbuttons + .oauthlogin {
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
#rcmloginsubmit {
|
||||
&:before {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
#login-footer {
|
||||
flex: 1;
|
||||
color: @color-black-shade-text;
|
||||
|
||||
& > div {
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
background: @color-black-shade-bg;
|
||||
border-radius: .3rem;
|
||||
}
|
||||
}
|
||||
|
||||
#login-addon {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
max-height: 30%;
|
||||
margin: 1rem !important;
|
||||
width: auto !important;
|
||||
overflow: auto;
|
||||
|
||||
@media screen and (min-width: (@screen-width-small + 1px)) {
|
||||
max-width: @screen-width-small;
|
||||
margin: auto !important;
|
||||
bottom: 1rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
body.task-error-login #layout {
|
||||
#layout-menu,
|
||||
#layout-content > .header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*** Addressbook UI ***/
|
||||
|
||||
#contactpic {
|
||||
width: @layout-contact-icon-width;
|
||||
height: @layout-contact-icon-height;
|
||||
border-radius: .5rem;
|
||||
overflow: hidden;
|
||||
display:table-cell;
|
||||
vertical-align:middle;
|
||||
text-align: center;
|
||||
background-color: @color-image-upload-background;
|
||||
|
||||
img {
|
||||
max-width: @layout-contact-icon-width;
|
||||
max-height: @layout-contact-icon-height;
|
||||
}
|
||||
}
|
||||
|
||||
#contacthead {
|
||||
.names {
|
||||
margin-bottom: .5rem;
|
||||
|
||||
span.namefield {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
&.readonly {
|
||||
.source.row {
|
||||
color: @color-form-hint;
|
||||
font-size: 90%;
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*** Mail UI ***/
|
||||
|
||||
#message-header {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
& > .subject {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
|
||||
body.status-flagged &:before {
|
||||
&:extend(.font-icon-class);
|
||||
display: inline;
|
||||
float: none;
|
||||
content: @fa-var-flag;
|
||||
font-size: 1em;
|
||||
color: @color-error;
|
||||
}
|
||||
|
||||
a.extwin {
|
||||
text-decoration: none;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
float: none;
|
||||
display: inline-block;
|
||||
font-size: 75%;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
content: @fa-var-external-link-square-alt;
|
||||
}
|
||||
}
|
||||
|
||||
span.inner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
& > .header {
|
||||
display: flex;
|
||||
|
||||
img.contactphoto {
|
||||
margin: 0 1rem 0 0;
|
||||
border-radius: 50%;
|
||||
width: @mail-header-photo-height;
|
||||
height: @mail-header-photo-height;
|
||||
object-fit: cover;
|
||||
background: @color-image-upload-background;
|
||||
}
|
||||
}
|
||||
|
||||
.header-content {
|
||||
min-height: @mail-header-photo-height;
|
||||
flex: 1;
|
||||
|
||||
&.details-view {
|
||||
.header-summary {
|
||||
display: none;
|
||||
}
|
||||
.header-headers {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-summary {
|
||||
margin-top: .25rem;
|
||||
|
||||
& > span {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.header-headers {
|
||||
display: none;
|
||||
|
||||
.header-title {
|
||||
white-space: nowrap;
|
||||
color: @color-black-shade-text;
|
||||
font-weight: bold;
|
||||
padding-right: 1rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.header-links {
|
||||
margin-top: .25rem;
|
||||
|
||||
a {
|
||||
font-size: 90%;
|
||||
margin-right: .5rem;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
height: 1.5rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
&.headers-details:before {
|
||||
content: @fa-var-envelope;
|
||||
}
|
||||
|
||||
&.headers-summary:before {
|
||||
.font-icon-regular(@fa-var-envelope);
|
||||
}
|
||||
|
||||
&.headers-all:before {
|
||||
content: @fa-var-info-circle;
|
||||
}
|
||||
|
||||
&.html:before {
|
||||
content: @fa-var-image;
|
||||
}
|
||||
|
||||
&.plain:before {
|
||||
content: @fa-var-align-justify;
|
||||
}
|
||||
|
||||
&.zipdownload:before {
|
||||
content: @fa-var-download;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-partheaders {
|
||||
padding: .25rem .5rem;
|
||||
margin: .5rem 0 -.5rem 0;
|
||||
border-top: 1px solid @color-messagepart-border;
|
||||
background-color: @color-messagepart-background;
|
||||
|
||||
table.headers-table {
|
||||
font-size: 90%;
|
||||
color: @color-mail-headers;
|
||||
|
||||
.header-title {
|
||||
.overflow-ellipsis();
|
||||
white-space: nowrap;
|
||||
max-width: 8em;
|
||||
font-weight: bold;
|
||||
padding-right: 1rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.subject {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
& + .message-part,
|
||||
& + .message-htmlpart {
|
||||
border-top: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#message-content {
|
||||
.attachmentslist:not(:empty) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
#messagebody {
|
||||
&.mailvelope {
|
||||
iframe {
|
||||
min-height: 75vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-part,
|
||||
.message-htmlpart {
|
||||
padding-top: .5rem;
|
||||
// Fixes absolute positioned mail message content
|
||||
position: relative;
|
||||
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid @color-messagepart-border;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
div.rcmBody {
|
||||
// Remove margins that can be set by the mail message styles
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
.overflow-ellipsis();
|
||||
color: @color-blockquote-0;
|
||||
border-left: 2px solid @color-blockquote-0-border;
|
||||
border-right: 2px solid @color-blockquote-0-border;
|
||||
background-color: @color-blockquote-background;
|
||||
margin: 2px 0;
|
||||
padding: 0 .4em;
|
||||
|
||||
blockquote {
|
||||
color: @color-blockquote-1;
|
||||
border-left: 2px solid @color-blockquote-1-border;
|
||||
border-right: 2px solid @color-blockquote-1-border;
|
||||
|
||||
blockquote {
|
||||
color: @color-blockquote-2;
|
||||
border-left: 2px solid @color-blockquote-2-border;
|
||||
border-right: 2px solid @color-blockquote-2-border;
|
||||
}
|
||||
}
|
||||
|
||||
span.blockquote-link {
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
right: .5rem;
|
||||
min-width: 4rem;
|
||||
padding: .2rem .25rem .2rem .5rem;
|
||||
font-size: 90%;
|
||||
text-align: center;
|
||||
color: @color-black-shade-text;
|
||||
background: @color-black-shade-bg;
|
||||
border: 1px solid @color-black-shade-border;
|
||||
border-radius: .3rem;
|
||||
line-height: 1;
|
||||
.font-family(); // don't inherit monospace font
|
||||
|
||||
&:after {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-angle-down;
|
||||
display: inline-block;
|
||||
float: none;
|
||||
margin: 0;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
&.collapsed:after {
|
||||
content: @fa-var-angle-up;
|
||||
}
|
||||
}
|
||||
|
||||
&.blockquote-header {
|
||||
text-overflow: ellipsis !important;
|
||||
padding-right: 5rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-part {
|
||||
span.sig {
|
||||
color: @color-mail-signature;
|
||||
}
|
||||
|
||||
div.pre {
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
// This is needed for proper display of quoted plain text
|
||||
blockquote {
|
||||
display: inline-block;
|
||||
min-width: 100%;
|
||||
|
||||
& + br {
|
||||
// compensate the spacing "removed" by the inline-block style above
|
||||
display: block;
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#compose-attachments {
|
||||
margin: 1rem 1rem 0 1rem;
|
||||
}
|
||||
|
||||
#composestatusbar {
|
||||
opacity: .3;
|
||||
right: 2.5rem;
|
||||
|
||||
@media screen and (min-width: (@screen-width-small + 1px)) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a.button {
|
||||
display: inline-block;
|
||||
|
||||
&:before {
|
||||
line-height: @layout-touch-header-height;
|
||||
font-size: 1.25rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*** Settings UI ***/
|
||||
|
||||
// A default icon for settings menu entries added by plugins
|
||||
.settings-default-icon {
|
||||
tr > td.section::before,
|
||||
li > a:before {
|
||||
content: @fa-var-cog;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@dark-mode-enabled = true) {
|
||||
@import "dark";
|
||||
}
|
||||
|
||||
@import (optional) "_styles";
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,63 +0,0 @@
|
|||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) The Roundcube Dev Team
|
||||
*
|
||||
* The contents are subject to the Creative Commons Attribution-ShareAlike
|
||||
* License. It is allowed to copy, distribute, transmit and to adapt the work
|
||||
* by keeping credits to the original authors in the README.md file.
|
||||
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
|
||||
*/
|
||||
|
||||
@import (reference) "fontawesome";
|
||||
@import (reference) "colors";
|
||||
|
||||
@dark-mode-enabled: true; // on change also have to change dark_mode_support in meta.json
|
||||
|
||||
@screen-width-large: 1200px;
|
||||
@screen-width-medium: 1024px;
|
||||
@screen-width-small: 768px;
|
||||
@screen-width-xs: 480px;
|
||||
@screen-width-mini: 320px;
|
||||
@screen-width-touch: @screen-width-medium;
|
||||
@screen-width-bs-phone: 576px;
|
||||
|
||||
@page-font-size: 14px;
|
||||
@page-min-width: 240px;
|
||||
|
||||
// Note: we'll set some values in pixels instead of rem to eliminate
|
||||
// Firefox sub-pixel rendering bug(s)
|
||||
|
||||
@layout-menu-width: floor(5.6 * @page-font-size);
|
||||
@layout-menu-width-sm: floor(3 * @page-font-size);
|
||||
@layout-header-height: floor(4.2 * @page-font-size);
|
||||
@layout-footer-height: @layout-header-height;
|
||||
@layout-footer-small-height: floor(2.5 * @page-font-size);
|
||||
@layout-header-font-size: 1rem;
|
||||
@layout-searchbar-height: floor(2.6 * @page-font-size);
|
||||
|
||||
@layout-touch-header-height: @layout-header-height;
|
||||
@layout-touch-header-font-size: floor(1.2 * @page-font-size);
|
||||
@layout-touch-menu-record-height: floor(3.4 * @page-font-size);
|
||||
@layout-touch-menu-record-font-size: floor(1.2 * @page-font-size);
|
||||
@layout-touch-icon-width: 2.2em;
|
||||
|
||||
@layout-mobile-menu-width: (@screen-width-mini * .85);
|
||||
|
||||
@layout-contact-icon-width: 112px;
|
||||
@layout-contact-icon-height: 135px;
|
||||
|
||||
@listing-line-height: floor(2.5 * @page-font-size);
|
||||
@listing-touch-line-height: floor(3.4 * @page-font-size);
|
||||
@listing-treetoggle-width: 1.5em;
|
||||
|
||||
@mail-header-photo-height: 4rem;
|
||||
|
||||
// Scrollbars
|
||||
@scrollbar-width: thin; // 'auto' or 'thin' or 'unset'
|
||||
|
||||
// Additional icons
|
||||
@icon-resize-corner: data-uri("image/svg+xml;charset=utf-8", "../images/corner-handle.svg"); // size: 16x16
|
||||
@icon-file-drop: data-uri("image/svg+xml;charset=utf-8", "../images/download.svg");
|
||||
|
||||
@import (reference, optional) "_variables";
|
||||
|
|
@ -1,349 +0,0 @@
|
|||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) 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 ***/
|
||||
|
||||
|
||||
.button.disabled {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
a.button {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
|
||||
/* 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;
|
||||
}
|
||||
&.task-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;
|
||||
}
|
||||
&.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;
|
||||
}
|
||||
&.options:before {
|
||||
content: @fa-var-sliders-h;
|
||||
}
|
||||
&.tools:before,
|
||||
&.settings:before {
|
||||
content: @fa-var-cog;
|
||||
}
|
||||
&.properties:before {
|
||||
content: @fa-var-info-circle;
|
||||
}
|
||||
&.selection:before {
|
||||
.font-icon-regular(@fa-var-check-square);
|
||||
}
|
||||
&.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;
|
||||
}
|
||||
&.extwin:before {
|
||||
content: @fa-var-external-link-square-alt;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn,
|
||||
button.btn {
|
||||
&:before {
|
||||
display: inline !important;
|
||||
float: none !important;
|
||||
vertical-align: middle;
|
||||
margin-right: .4rem !important; // !important needed for a.btn
|
||||
}
|
||||
|
||||
&.oauth.google:before,
|
||||
&.oauth.outlook:before {
|
||||
content: " ";
|
||||
display: inline-block !important;
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
margin-right: .8rem !important;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
&.oauth.google:before {
|
||||
background: url('../images/google-icon.svg') top left no-repeat;
|
||||
}
|
||||
|
||||
&.oauth.outlook:before {
|
||||
background: url('../images/microsoft-icon.svg') top left no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
a.button.icon {
|
||||
&.dropdown:before {
|
||||
content: @fa-var-caret-down;
|
||||
font-size: 1em;
|
||||
}
|
||||
& > span.inner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
html.touch {
|
||||
.btn:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
&.compose {
|
||||
&:before {
|
||||
content: @fa-var-pen;
|
||||
}
|
||||
}
|
||||
|
||||
.inner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*** Bootstrap button style overrides ***/
|
||||
|
||||
.btn {
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 .2rem fade(@color-btn-primary-background, 30%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
color: @color-link;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
color: @color-btn-secondary;
|
||||
background: @color-btn-secondary-background;
|
||||
border-color: @color-btn-secondary-background;
|
||||
|
||||
&:focus {
|
||||
background: darken(@color-btn-secondary-background, 5%);
|
||||
border-color: darken(@color-btn-secondary-background, 7%);
|
||||
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: @color-btn-secondary-background;
|
||||
border-color: @color-btn-secondary-background;
|
||||
}
|
||||
|
||||
&: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 {
|
||||
background: darken(@color-btn-primary-background, 5%);
|
||||
border-color: darken(@color-btn-primary-background, 7%);
|
||||
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: @color-btn-primary-background;
|
||||
border-color: @color-btn-primary-background;
|
||||
}
|
||||
|
||||
&: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 {
|
||||
background: darken(@color-btn-danger-background, 5%);
|
||||
border-color: darken(@color-btn-danger-background, 7%);
|
||||
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: @color-btn-danger-background;
|
||||
border-color: @color-btn-danger-background;
|
||||
}
|
||||
|
||||
&: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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,585 +0,0 @@
|
|||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) 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.
|
||||
*/
|
||||
|
||||
/*** Common UI elements ***/
|
||||
|
||||
.rcmaddcontact,
|
||||
.hidden,
|
||||
.voice {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
font.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#rcmdraglayer {
|
||||
min-width: 260px;
|
||||
width: 260px;
|
||||
background-color: @color-drag-layer-background;
|
||||
color: @color-drag-layer;
|
||||
box-shadow: 3px 3px 5px @color-drag-layer-shadow;
|
||||
border-radius: .3rem;
|
||||
z-index: 250;
|
||||
opacity: .92;
|
||||
padding: .5rem;
|
||||
white-space: nowrap;
|
||||
|
||||
div {
|
||||
line-height: 1.6em;
|
||||
.overflow-ellipsis();
|
||||
}
|
||||
}
|
||||
|
||||
.frame-content {
|
||||
padding: 1rem;
|
||||
|
||||
h2 {
|
||||
font-weight: bold;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: bold;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.listbox {
|
||||
.scroller {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.navlist {
|
||||
height: 0;
|
||||
flex: initial !important;
|
||||
|
||||
.listing {
|
||||
tr:last-child td,
|
||||
li:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup & {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.scroller {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.footer {
|
||||
border-top: 1px solid @color-layout-border;
|
||||
background-color: @color-searchbar-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact-header {
|
||||
display: flex;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.contact-photo {
|
||||
min-width: @layout-contact-icon-width;
|
||||
}
|
||||
|
||||
.contact-head {
|
||||
margin-left: 1rem;
|
||||
margin-top: 0 !important;
|
||||
|
||||
legend {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@image-attachment-size: 250px;
|
||||
|
||||
// this is when image thumbnails are enabled
|
||||
p.image-attachment {
|
||||
position: relative;
|
||||
border: 1px solid @color-border;
|
||||
border-radius: .3rem;
|
||||
background-color: @color-message-background;
|
||||
float: left;
|
||||
margin: .5rem;
|
||||
min-width: 47%;
|
||||
min-height: @image-attachment-size;
|
||||
overflow: hidden;
|
||||
// use flexbox to center the image
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@media screen and (max-width: @screen-width-xs) {
|
||||
float: none;
|
||||
margin: .5rem 0 .5rem 0;
|
||||
}
|
||||
|
||||
.image-link {
|
||||
align-self: center;
|
||||
text-align: center;
|
||||
margin: 1.6rem .5rem;
|
||||
}
|
||||
|
||||
span {
|
||||
color: @color-form-hint;
|
||||
padding: 0 .5rem;
|
||||
font-size: 90%;
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.image-filename {
|
||||
.overflow-ellipsis();
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding-right: 4rem;
|
||||
}
|
||||
|
||||
.image-filesize {
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.attachment-links {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
padding: 0 .5rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
a:before {
|
||||
&:extend(.font-icon-class);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
a.open:before {
|
||||
content: @fa-var-external-link-square-alt;
|
||||
}
|
||||
|
||||
a.download:before {
|
||||
content: @fa-var-download;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// this is when image thumbnails are disabled
|
||||
fieldset.image-attachment {
|
||||
margin-top: .5rem;
|
||||
|
||||
legend {
|
||||
color: @color-form-hint;
|
||||
font-size: .9rem;
|
||||
border-top: 1px solid lighten(@color-mail-headers, 50%);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#folder-selector {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.noselect {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.iframe-loader {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 255, 255, .95);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 3;
|
||||
|
||||
.spinner-border {
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
color: @color-spinner-circle;
|
||||
border: 1rem solid;
|
||||
border-color: currentColor @color-spinner-item currentColor currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.footer.toolbar + .iframe-loader {
|
||||
top: @layout-header-height;
|
||||
bottom: @layout-header-height;
|
||||
}
|
||||
|
||||
// iOS: Fix scrolling of iframe, display scrollbars on scrollable elements
|
||||
.ios-scroll {
|
||||
padding: 0;
|
||||
-webkit-overflow-scrolling: touch !important;
|
||||
overflow: scroll !important;
|
||||
|
||||
&.iframe-wrapper {
|
||||
margin-top: 1px; // FIXME: without this scrolling hides the wrapper neighbours' border
|
||||
}
|
||||
}
|
||||
|
||||
.webkit-scroller {
|
||||
&::-webkit-scrollbar {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar:vertical {
|
||||
width: .5rem;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar:horizontal {
|
||||
height: .5rem;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
border-radius: .25rem;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.quota-widget {
|
||||
width: 100%;
|
||||
max-width: 15em;
|
||||
padding: .5rem 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: @color-quota-text;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-hdd;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.count {
|
||||
font-size: 80%;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.bar {
|
||||
flex: 1;
|
||||
height: .5rem;
|
||||
margin: 0 1rem;
|
||||
background-color: @color-quota-background;
|
||||
border: 1px solid @color-layout-border;
|
||||
border-radius: .25rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.value {
|
||||
display: block;
|
||||
background-color: @color-quota-value;
|
||||
height: 1rem;
|
||||
opacity: .75;
|
||||
|
||||
&.warning {
|
||||
background-color: @color-quota-value-warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-tools {
|
||||
position: absolute;
|
||||
top: 5rem;
|
||||
left: 0;
|
||||
height: @layout-header-height;
|
||||
overflow: hidden;
|
||||
transform: translateX(-87%);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
background-color: @color-image-tools-background;
|
||||
border-radius: 0 .3rem .3rem 0;
|
||||
|
||||
.menu {
|
||||
float: left;
|
||||
}
|
||||
|
||||
a.button.icon.tools {
|
||||
padding: 0 .25rem;
|
||||
display: inline-block;
|
||||
height: @layout-header-height;
|
||||
|
||||
span.inner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:before {
|
||||
line-height: @layout-header-height;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.open {
|
||||
transform: translateX(0);
|
||||
|
||||
a.button.icon.tools:before {
|
||||
content: @fa-var-chevron-left;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: @color-image-tools !important;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: @color-image-tools-hover !important;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quota-info {
|
||||
width: 100%;
|
||||
display: table !important;
|
||||
|
||||
td,th {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
th {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.root {
|
||||
line-height: 1;
|
||||
font-style: italic;
|
||||
color: @color-popover-separator;
|
||||
background-color: @color-popover-separator-background;
|
||||
}
|
||||
|
||||
th:first-child,
|
||||
.name {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
// Make Bootstrap tabs non-wrappable
|
||||
.nav-tabs {
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.nav-item {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
.overflow-ellipsis();
|
||||
}
|
||||
}
|
||||
|
||||
.props-table {
|
||||
td.title {
|
||||
width: 7em;
|
||||
}
|
||||
}
|
||||
|
||||
.table-widget {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: .5rem;
|
||||
border: 1px solid @color-table-border;
|
||||
|
||||
& > .content {
|
||||
overflow-x: auto;
|
||||
flex-grow: 1;
|
||||
height: 18.5em;
|
||||
|
||||
table th {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& > .footer {
|
||||
height: 3.5rem;
|
||||
border-top: 1px solid @color-table-border;
|
||||
text-align: left;
|
||||
|
||||
a {
|
||||
padding: .2rem .45rem !important;
|
||||
height: ~"calc(3.5rem - 1px)" !important;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
margin: 0;
|
||||
max-height: 18.5em;
|
||||
}
|
||||
|
||||
// Options table is a table with first column for identifier/description
|
||||
// and other columns for a state flag. E.g. ACL table
|
||||
table.options-table {
|
||||
td,th {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
&:first-child {
|
||||
.overflow-ellipsis();
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: 1px solid @color-table-border;
|
||||
}
|
||||
|
||||
tr.selected td {
|
||||
background-color: @color-table-selected-background;
|
||||
color: @color-table-selected;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
td:not(:first-child) span {
|
||||
display: inline-block;
|
||||
line-height: 1.25;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
}
|
||||
}
|
||||
|
||||
td.enabled span:before {
|
||||
content: @fa-var-check;
|
||||
}
|
||||
|
||||
td.partial span:before {
|
||||
opacity: .3;
|
||||
content: @fa-var-check;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table.compact-table {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
||||
*:not(.invalid-feedback) {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: .25rem;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
table.table {
|
||||
.checkbox-cell {
|
||||
width: 3rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
padding: .5rem;
|
||||
|
||||
html.touch & {
|
||||
padding: .5rem .3rem;
|
||||
}
|
||||
}
|
||||
|
||||
th.checkbox-cell {
|
||||
padding: .75rem 0;
|
||||
max-width: 1rem;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
cursor: pointer;
|
||||
margin: 0 1rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&.subscription:before {
|
||||
content: @fa-var-rss-square;
|
||||
}
|
||||
|
||||
&.alarm:before {
|
||||
.font-icon-regular(@fa-var-bell);
|
||||
}
|
||||
|
||||
&.read:before {
|
||||
content: @fa-var-eye;
|
||||
}
|
||||
|
||||
&.write:before {
|
||||
content: @fa-var-pencil-alt;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons-cell {
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
|
||||
a.button:before {
|
||||
line-height: 1;
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@media screen and (min-width: @screen-width-xs) {
|
||||
a.button .inner {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
margin: 0;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
fieldset.tab-pane & thead th {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
tr.deleted td {
|
||||
color: @color-list-deleted !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Bootstrap's .table style overwrites */
|
||||
.table {
|
||||
thead th {
|
||||
border-width: 1px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,263 +0,0 @@
|
|||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) 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.
|
||||
*/
|
||||
|
||||
/*** Dialogs and popovers ***/
|
||||
|
||||
.popupmenu {
|
||||
display: none;
|
||||
padding: 0;
|
||||
min-width: 180px;
|
||||
height: 100%;
|
||||
|
||||
li > a {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.propform {
|
||||
overflow: hidden;
|
||||
padding: .25rem; // so overflow do not truncate focus outline on inputs
|
||||
}
|
||||
|
||||
&.simplelist {
|
||||
min-width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.popup.justified {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.popover-body {
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
|
||||
& > .popupmenu {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.popover {
|
||||
box-shadow: 3px 3px 5px @color-popover-shadow;
|
||||
border-color: @color-layout-border;
|
||||
padding: 0;
|
||||
z-index: 1300;
|
||||
|
||||
.popover-header {
|
||||
// On mobile don't display popup arrows and titles
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: (@screen-width-small + 1px)) {
|
||||
.listing {
|
||||
li:first-child {
|
||||
border-radius: .25rem .25rem 0 0;
|
||||
}
|
||||
|
||||
li:last-child {
|
||||
border-bottom-right-radius: .25rem;
|
||||
border-bottom-left-radius: .25rem;
|
||||
}
|
||||
|
||||
ul.rounded-0 > li {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html.layout-small,
|
||||
html.layout-phone {
|
||||
.popover:not(.select-menu) {
|
||||
margin: 0 !important;
|
||||
padding: 0;
|
||||
right: 0;
|
||||
left: initial !important;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
width: @layout-mobile-menu-width;
|
||||
transform: none !important;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: none;
|
||||
|
||||
div.arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.listing li:last-child {
|
||||
border-bottom: 1px solid @color-list-border;
|
||||
}
|
||||
}
|
||||
|
||||
.popover-overlay {
|
||||
z-index: 1299;
|
||||
background-color: @color-dialog-overlay-background;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.popover-header {
|
||||
display: block;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
padding: 0 .5em;
|
||||
height: @layout-touch-header-height;
|
||||
min-height: @layout-touch-header-height; // for when it's a flex item
|
||||
line-height: @layout-touch-header-height;
|
||||
font-size: @layout-touch-header-font-size;
|
||||
color: @color-popover-mobile-header;
|
||||
background-color: @color-popover-mobile-header-background;
|
||||
|
||||
&:before {
|
||||
display: none; // hide the Bootstrap's popover arrow element
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
color: @color-popover-mobile-header;
|
||||
}
|
||||
}
|
||||
|
||||
.popover-body > * {
|
||||
max-height: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
html.touch .popover {
|
||||
.listing {
|
||||
li a {
|
||||
line-height: @layout-touch-menu-record-height;
|
||||
font-size: @layout-touch-menu-record-font-size;
|
||||
padding: 0 .5em;
|
||||
|
||||
&:before {
|
||||
float: left; // overwrite icon float to have unified element height
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-menu {
|
||||
max-width: initial;
|
||||
margin: 0;
|
||||
height: auto;
|
||||
z-index: 1301; // above TinyMCE dialogs
|
||||
|
||||
.popover-header {
|
||||
border-radius: .25rem .25rem 0 0 !important;
|
||||
}
|
||||
|
||||
.listing li {
|
||||
a {
|
||||
padding-left: .25rem;
|
||||
outline: 0; // for Android browser
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-right-radius: .25rem;
|
||||
border-bottom-left-radius: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Use 'inline' class for menus that have a list elements with no <a> inside
|
||||
// and no header
|
||||
&.inline {
|
||||
.listing li {
|
||||
padding-right: .5rem;
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: .25rem;
|
||||
border-top-right-radius: .25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** PGP Key search/import dialog **/
|
||||
|
||||
.pgpkeyimport {
|
||||
div.key {
|
||||
position: relative;
|
||||
padding: .5rem 0;
|
||||
|
||||
&.revoked,
|
||||
&.disabled {
|
||||
color: @color-list-secondary;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-right: 0.5em;
|
||||
margin-bottom: 0;
|
||||
|
||||
&:after {
|
||||
content: ":";
|
||||
}
|
||||
|
||||
&.keyid {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
label + a,
|
||||
label + span {
|
||||
line-height: 2.6rem;
|
||||
margin-right: 1em;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
label.keyid + a {
|
||||
font-weight: bold;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-key;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.uids {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li.uid {
|
||||
border: 0;
|
||||
padding: .25rem 0 0 1.5em;
|
||||
line-height: 1.5rem !important;
|
||||
list-style-type: none;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-user;
|
||||
opacity: 0.25;
|
||||
font-size: 1em;
|
||||
line-height: 1.25;
|
||||
}
|
||||
}
|
||||
|
||||
button.importkey {
|
||||
position: absolute;
|
||||
top: .5rem;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,537 +0,0 @@
|
|||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) 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) ***/
|
||||
|
||||
// use of div.tox instead of just .tox is to have prio over TinyMCE styles
|
||||
div.tox {
|
||||
font-size: 1rem;
|
||||
|
||||
&, :not(.svg) {
|
||||
.font-family();
|
||||
}
|
||||
|
||||
&.tox-tinymce {
|
||||
border-radius: .25rem;
|
||||
border: 1px solid @color-input-border;
|
||||
}
|
||||
|
||||
&.focused {
|
||||
border-color: @color-input-border-focus !important;
|
||||
box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow !important;
|
||||
}
|
||||
|
||||
.tox-toolbar-overlord {
|
||||
z-index: 1; // for sticky header feature
|
||||
|
||||
& > div {
|
||||
// The svg is copied from TinyMCE with modified height params
|
||||
background: url("data:image/svg+xml;charset=utf8,%3Csvg height='33px' viewBox='0 0 40 33px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='32px' width='100' height='1' fill='%23cccccc'/%3E%3C/svg%3E");
|
||||
background-color: @color-input-addon-background;
|
||||
}
|
||||
}
|
||||
|
||||
.tox-toolbar__primary {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
// This one is for mobile
|
||||
.tox-toolbar {
|
||||
background-color: @color-input-addon-background;
|
||||
}
|
||||
|
||||
.tox-edit-area {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.tox-dialog {
|
||||
border-radius: 0;
|
||||
border-color: @color-layout-border;
|
||||
box-shadow: none;
|
||||
align-self: unset !important;
|
||||
|
||||
.tox-form__group {
|
||||
margin-top: 0;
|
||||
margin-bottom: .75rem;
|
||||
}
|
||||
|
||||
.tox-dialog__body-nav-item--active {
|
||||
color: @color-link;
|
||||
border-color: transparent;
|
||||
|
||||
&:hover {
|
||||
color: @color-link-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tox-dialog__body-content {
|
||||
overflow: unset;
|
||||
}
|
||||
|
||||
.tox-dialog__content-js {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.tox-dialog-wrap__backdrop {
|
||||
background-color: @color-dialog-overlay-background;
|
||||
}
|
||||
|
||||
.tox-dialog__header {
|
||||
height: (@layout-header-height - 1px);
|
||||
border-bottom: 1px solid @color-dialog-header-border;
|
||||
justify-content: flex-end; // fixes close button position when dialog has no title
|
||||
padding: 0;
|
||||
|
||||
.tox-button {
|
||||
color: @color-dialog-header;
|
||||
right: 0;
|
||||
height: (@layout-header-height - .7rem);
|
||||
width: 2.25em;
|
||||
margin-right: .4rem;
|
||||
|
||||
&:hover {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.tox-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-times;
|
||||
line-height: 1.5rem;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tox-dialog__footer {
|
||||
height: (@layout-footer-height - 1px) !important;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0 1rem;
|
||||
|
||||
@media screen and (max-width: @screen-width-xs) {
|
||||
border-top: 1px solid @color-dialog-header-border;
|
||||
}
|
||||
|
||||
& > div {
|
||||
white-space: nowrap;
|
||||
max-height: (@layout-footer-height - 1px);
|
||||
|
||||
button:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tox-button {
|
||||
.btn-primary();
|
||||
font-weight: normal;
|
||||
padding: .5rem .75rem;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
width: 1em;
|
||||
content: @fa-var-check;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// this is redundant, but required because of tinymce styles interference
|
||||
&:focus:not(:disabled) {
|
||||
background: @color-btn-primary-background;
|
||||
border-color: @color-btn-primary-background;
|
||||
}
|
||||
|
||||
&.tox-button--secondary {
|
||||
.btn-secondary();
|
||||
color: @color-btn-secondary;
|
||||
|
||||
&:before {
|
||||
content: @fa-var-times;
|
||||
}
|
||||
|
||||
// this is redundant, but required because of tinymce styles interference
|
||||
&:focus:not(:disabled) {
|
||||
background: @color-btn-secondary-background;
|
||||
border-color: @color-btn-secondary-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tox-search-dialog {
|
||||
.tox-form__group:not(:first-child) {
|
||||
flex: initial !important;
|
||||
}
|
||||
|
||||
.tox-dialog__footer-start {
|
||||
button {
|
||||
padding: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.tox-dialog__footer-end {
|
||||
button {
|
||||
&:before {
|
||||
content: @fa-var-pencil-alt !important;
|
||||
}
|
||||
|
||||
&:nth-of-type(1):before {
|
||||
content: @fa-var-search !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tox-dialog__title {
|
||||
line-height: calc(@layout-header-height - 1px);
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
padding: 0 0 0 1rem;
|
||||
width: 100%;
|
||||
color: @color-dialog-header;
|
||||
}
|
||||
|
||||
// Make toolbar buttons smaller
|
||||
.tox-tbtn {
|
||||
height: 28px;
|
||||
|
||||
&:not(.tox-tbtn--select,.tox-split-button__chevron) {
|
||||
width: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.tox-button {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.tox-label {
|
||||
color: @color-font;
|
||||
padding-bottom: .25rem;
|
||||
}
|
||||
|
||||
// Adding .form-control does not work with TinyMCE skins,
|
||||
// so we have to overwrite some props here
|
||||
.tox-color-input > input,
|
||||
.tox-listboxfield .tox-listbox--select,
|
||||
.tox-textarea,
|
||||
.tox-textfield {
|
||||
.font-family() !important;
|
||||
font-size: @page-font-size;
|
||||
line-height: 1.5;
|
||||
color: @color-font;
|
||||
border-radius: .25rem;
|
||||
min-height: 0;
|
||||
padding: .375rem .75rem;
|
||||
|
||||
&:focus {
|
||||
border-color: @color-input-border-focus;
|
||||
box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.tox-listbox__select-label {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tox-color-input span {
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.custom-switch {
|
||||
position: relative;
|
||||
font-size: 1rem;
|
||||
margin-top: .15rem;
|
||||
|
||||
.tox-checkbox__icons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tox-checkbox__label {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.image-selector {
|
||||
font-size: 1rem;
|
||||
button {
|
||||
.btn-secondary();
|
||||
padding: .5rem .75rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
// small fix for image dialog
|
||||
.tox-form__controls-h-stack div:not(:last-child) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tox-collection__item-label {
|
||||
white-space: nowrap; // fix TinyMCE bug
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-width-xs) {
|
||||
div.tox {
|
||||
.tox-dialog {
|
||||
margin: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100%;
|
||||
left: 0 !important;
|
||||
top: 0 !important;
|
||||
border-width: 0 !important;
|
||||
}
|
||||
|
||||
.tox-dialog__header {
|
||||
background-color: @color-layout-mobile-header-background;
|
||||
|
||||
.tox-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tox-dialog__title {
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.tox-dialog__footer {
|
||||
background-color: @color-layout-mobile-footer-background;
|
||||
|
||||
.tox-button {
|
||||
color: @color-font !important;
|
||||
background: transparent !important;
|
||||
padding: .45rem;
|
||||
margin: 0 !important;
|
||||
border: 0;
|
||||
font-size: 90%;
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
float: none;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
line-height: 1.75;
|
||||
height: 1.75rem;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
color: @color-font;
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
justify-content: space-evenly;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*** Media file selector for TinyMCE ***/
|
||||
|
||||
.image-selector {
|
||||
padding: 1rem .5rem 10rem .5rem !important;
|
||||
|
||||
&.droptarget {
|
||||
border: .2rem dashed @color-table-border;
|
||||
|
||||
&:after {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.attachmentslist {
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
height: 19.1em;
|
||||
padding: 0 !important;
|
||||
|
||||
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;
|
||||
margin-bottom: .2rem;
|
||||
|
||||
.editor-toolbar {
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
border-radius: .25rem .25rem 0 0;
|
||||
border-bottom: 1px solid @color-input-border;
|
||||
background-color: @color-input-addon-background;
|
||||
|
||||
.mce-i-html {
|
||||
display: block;
|
||||
margin: 2px 2px 2px 4px;
|
||||
width: 34px;
|
||||
height: 28px;
|
||||
border-radius: .25rem;
|
||||
color: #222f3e; // from TinyMCE
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
border-color: #e2e4e7;
|
||||
background-color: #dee0e2; // from TinyMCE
|
||||
}
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-image;
|
||||
margin: 0;
|
||||
width: 34px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: .7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// hide toolbar in html mode and in mailvelope mode
|
||||
&.mailvelope .editor-toolbar,
|
||||
.tox-tinymce + .editor-toolbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& > .googie_edit_layer,
|
||||
& > textarea {
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
width: 100% !important;
|
||||
padding-top: 40px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
& > iframe { // e.g. mailvelope frame
|
||||
border-radius: .3rem;
|
||||
border: 1px solid @color-input-border;
|
||||
min-height: 30em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*** GoogieSpell widget ***/
|
||||
|
||||
.googie_window {
|
||||
width: 16rem;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.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.5;
|
||||
}
|
||||
|
||||
.googie_link {
|
||||
color: @color-spellcheck-link;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.googie_list {
|
||||
li {
|
||||
min-width: 8rem;
|
||||
width: auto;
|
||||
|
||||
&.googie_list_onhover {
|
||||
color: @color-menu-hover;
|
||||
background-color: @color-menu-hover-background;
|
||||
}
|
||||
|
||||
.googie_list_revert:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-undo;
|
||||
}
|
||||
|
||||
.googie_add_to_dict:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-plus-square;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
display: inline-block;
|
||||
margin: .25rem .5rem;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,440 +0,0 @@
|
|||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) 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-menu-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 .5rem;
|
||||
margin: ((@layout-header-height - 2 * @page-font-size) / 2) .5rem;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-times;
|
||||
line-height: 1.5rem;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-dialog-content {
|
||||
& > .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: floor(.65 * @page-font-size) floor(.3 * @page-font-size);
|
||||
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
|
||||
// Fix scrollbar/resize issue e.g. in qr-code dialog
|
||||
.ui-dialog,
|
||||
.ui-dialog-content {
|
||||
box-sizing: initial;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
top: 0 !important; // for Chrome
|
||||
|
||||
.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 !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;
|
||||
color: @color-font;
|
||||
text-decoration: none;
|
||||
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
|
||||
@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 diff suppressed because it is too large
Load Diff
|
|
@ -1,952 +0,0 @@
|
|||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) The Roundcube Dev Team
|
||||
*
|
||||
* The contents are subject to the Creative Commons Attribution-ShareAlike
|
||||
* License. It is allowed to copy, distribute, transmit and to adapt the work
|
||||
* by keeping credits to the original authors in the README.md file.
|
||||
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
|
||||
*/
|
||||
|
||||
/*** Toolbar widget ***/
|
||||
|
||||
.menu {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
|
||||
a {
|
||||
.overflow-ellipsis();
|
||||
text-decoration: none;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: "\00a0"; // blank placeholder
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:not(.disabled):focus,
|
||||
&:not(.disabled):hover {
|
||||
background-color: @color-toolbar-button-background-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&.toolbar {
|
||||
li {
|
||||
display: inline-block;
|
||||
height: @layout-touch-header-height;
|
||||
}
|
||||
|
||||
a {
|
||||
color: @color-toolbar-button;
|
||||
display: block;
|
||||
float: left;
|
||||
border: 0 !important;
|
||||
height: @layout-header-height;
|
||||
min-width: 3.2rem;
|
||||
max-width: 6rem;
|
||||
width: auto; // reset width defined for links in .listing
|
||||
padding: .45rem;
|
||||
line-height: 1.5;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
|
||||
&:before {
|
||||
height: 1.75rem !important;
|
||||
float: none !important;
|
||||
width: auto !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: @color-success;
|
||||
}
|
||||
}
|
||||
|
||||
& > .spacer {
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
.dropbutton {
|
||||
&:not(.disabled):hover {
|
||||
background-color: @color-toolbar-button-background-hover;
|
||||
}
|
||||
|
||||
a.dropdown {
|
||||
padding: 0 .3rem;
|
||||
|
||||
&:before {
|
||||
line-height: @layout-header-height;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: darken(@color-toolbar-button-background-hover, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span.inner {
|
||||
font-size: 90%;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.dropbutton {
|
||||
display: inline-block;
|
||||
|
||||
a.dropdown {
|
||||
font-size: 75%;
|
||||
min-width: 0;
|
||||
|
||||
html.ie11 &:before {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
span.inner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
a:first-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.pagenav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 !important;
|
||||
font-size: 100%; // in case this is .footer.small
|
||||
|
||||
a {
|
||||
flex-grow: 1;
|
||||
display: inline-block;
|
||||
min-width: 2rem !important;
|
||||
height: @layout-footer-small-height;
|
||||
color: @color-toolbar-button;
|
||||
|
||||
&:before {
|
||||
margin: 0;
|
||||
display: inline;
|
||||
float: none;
|
||||
line-height: @layout-footer-small-height;
|
||||
}
|
||||
}
|
||||
|
||||
.pagenav-text {
|
||||
.overflow-ellipsis();
|
||||
color: @color-list-pagenav;
|
||||
flex-grow: 4;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 3rem;
|
||||
max-width: 5rem;
|
||||
font-size: 90%;
|
||||
text-align: center;
|
||||
max-height: 1.6rem;
|
||||
margin: 0 .2rem;
|
||||
|
||||
html.layout-phone & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
span.inner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.pagenav-list {
|
||||
cursor: pointer;
|
||||
background-color: @color-searchbar-background;
|
||||
border-bottom: 1px solid @color-list-border;
|
||||
|
||||
a {
|
||||
flex-grow: unset;
|
||||
}
|
||||
|
||||
.pagenav-text {
|
||||
text-align: left;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
& + .navlist {
|
||||
background-color: #fbfbfb;
|
||||
}
|
||||
|
||||
&.expanded + .navlist {
|
||||
border-bottom: 1px solid @color-layout-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.content-frame-navigation.hide-nav-buttons {
|
||||
a.next,
|
||||
a.prev {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.listselectors {
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: block;
|
||||
|
||||
button {
|
||||
display: block;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
color: @color-toolbar-button;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
height: @layout-touch-header-height;
|
||||
line-height: @layout-touch-header-height;
|
||||
width: 2.5em;
|
||||
|
||||
&:before {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popover & {
|
||||
li {
|
||||
display: block;
|
||||
height: auto;
|
||||
text-align: left;
|
||||
|
||||
&.spacer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&.separator {
|
||||
line-height: 1.5rem !important;
|
||||
font-size: .75rem !important;
|
||||
padding: 0 .5rem;
|
||||
color: @color-popover-separator;
|
||||
background-color: @color-popover-separator-background;
|
||||
|
||||
label {
|
||||
margin: 0; // Unsets Bootstrap label margin, bug?
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
height: unset;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
line-height: @listing-line-height;
|
||||
display: block;
|
||||
padding: 0 .5rem;
|
||||
text-align: left;
|
||||
|
||||
&:before {
|
||||
line-height: inherit;
|
||||
height: inherit !important;
|
||||
margin-right: .5rem !important;
|
||||
float: left !important;
|
||||
width: 1.18em !important;
|
||||
min-width: 1.18em;
|
||||
}
|
||||
|
||||
&:not(.disabled):hover {
|
||||
color: @color-menu-hover;
|
||||
background-color: @color-menu-hover-background;
|
||||
}
|
||||
|
||||
&[aria-haspopup] {
|
||||
display: flex;
|
||||
|
||||
&:after {
|
||||
&:extend(.font-icon-class);
|
||||
color: @color-black-shade-text;
|
||||
font-size: .9em;
|
||||
margin: 0 0 0 .2em;
|
||||
min-width: 1.18em;
|
||||
content: @fa-var-chevron-right;
|
||||
|
||||
html.layout-small & {
|
||||
margin: 0 .2em;
|
||||
}
|
||||
}
|
||||
|
||||
&.dropdown:after {
|
||||
color: @color-list;
|
||||
margin: 0 .6em !important;
|
||||
}
|
||||
|
||||
&:hover:after {
|
||||
color: @color-menu-hover;
|
||||
}
|
||||
|
||||
& > span {
|
||||
.overflow-ellipsis();
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span.inner {
|
||||
font-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.dropbutton {
|
||||
display: flex;
|
||||
|
||||
a:first-child {
|
||||
.overflow-ellipsis();
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&:not(.disabled):hover {
|
||||
background-color: @color-popover-mobile-dropbutton-background;
|
||||
}
|
||||
|
||||
a.dropdown {
|
||||
width: 3.5rem;
|
||||
padding: 0 .5em;
|
||||
background-color: @color-popover-mobile-dropbutton-background;
|
||||
|
||||
&:hover {
|
||||
background-color: @color-menu-hover-background;
|
||||
}
|
||||
|
||||
// Note: :before icon is replaced with :after icon by a[aria-haspopup] above
|
||||
|
||||
&:before,
|
||||
span.inner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.no-icon a:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: (@screen-width-small + 1px)) {
|
||||
.content-frame-navigation {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.header a.button.icon {
|
||||
&:not(.disabled):focus,
|
||||
&:not(.disabled):hover {
|
||||
background-color: @color-toolbar-button-background-hover;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:before {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-width-small) {
|
||||
.menu.footer {
|
||||
justify-content: space-around !important;
|
||||
|
||||
& > * {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.listselectors > * {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.menu.listing a {
|
||||
color: @color-font;
|
||||
}
|
||||
}
|
||||
|
||||
a.toolbar-button {
|
||||
cursor: pointer;
|
||||
|
||||
@media screen and (min-width: (@screen-width-large + 1px)) {
|
||||
line-height: 1.5;
|
||||
padding: .45rem;
|
||||
|
||||
&:before {
|
||||
float: none !important;
|
||||
height: 1.75rem !important;
|
||||
line-height: 1.5;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
span.inner {
|
||||
display: inline !important;
|
||||
font-weight: normal;
|
||||
font-size: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*** Menu button icons ***/
|
||||
|
||||
.menu a {
|
||||
&.mail:before {
|
||||
content: @fa-var-envelope;
|
||||
}
|
||||
&.contacts:before {
|
||||
content: @fa-var-users;
|
||||
}
|
||||
&.options:before {
|
||||
content: @fa-var-sliders-h;
|
||||
}
|
||||
&.settings:before {
|
||||
content: @fa-var-cog;
|
||||
}
|
||||
&.theme.light:before {
|
||||
content: @fa-var-sun;
|
||||
}
|
||||
&.theme.dark:before {
|
||||
content: @fa-var-moon;
|
||||
}
|
||||
&.help:before {
|
||||
content: @fa-var-life-ring;
|
||||
}
|
||||
&.logout:before {
|
||||
content: @fa-var-power-off;
|
||||
}
|
||||
&.about:before {
|
||||
content: @fa-var-question;
|
||||
}
|
||||
&.refresh:before {
|
||||
content: @fa-var-sync;
|
||||
}
|
||||
&.compose:before {
|
||||
content: @fa-var-edit;
|
||||
}
|
||||
&.calendar:before {
|
||||
content: @fa-var-calendar-alt;
|
||||
}
|
||||
&.tasklist:before {
|
||||
content: @fa-var-tasks;
|
||||
}
|
||||
&.files:before {
|
||||
content: @fa-var-folder;
|
||||
}
|
||||
&.notes:before {
|
||||
content: @fa-var-sticky-note;
|
||||
}
|
||||
&.chat:before {
|
||||
content: @fa-var-comments;
|
||||
}
|
||||
&.actions:before {
|
||||
content: @fa-var-cog;
|
||||
}
|
||||
&.addressbook:before {
|
||||
content: @fa-var-user;
|
||||
}
|
||||
&.archive:before {
|
||||
content: @fa-var-archive;
|
||||
}
|
||||
&.assigngroup:before {
|
||||
content: @fa-var-user-plus;
|
||||
}
|
||||
&.attach:before,
|
||||
&.vcard:before {
|
||||
content: @fa-var-paperclip;
|
||||
}
|
||||
&.next:before {
|
||||
content: @fa-var-arrow-right;
|
||||
}
|
||||
&.prev:before,
|
||||
&.back:before {
|
||||
content: @fa-var-arrow-left;
|
||||
}
|
||||
&.check:before {
|
||||
content: "\00a0"; // just a space
|
||||
}
|
||||
&.check.selected:before {
|
||||
content: @fa-var-check;
|
||||
}
|
||||
&.closewin:before {
|
||||
content: @fa-var-window-close;
|
||||
}
|
||||
&.collapse:before {
|
||||
content: @fa-var-angle-down;
|
||||
}
|
||||
&.copy:before {
|
||||
content: @fa-var-copy;
|
||||
}
|
||||
&.create:before {
|
||||
content: @fa-var-plus-square;
|
||||
}
|
||||
&.delete:before {
|
||||
content: @fa-var-trash-alt;
|
||||
}
|
||||
&.download:before,
|
||||
&.download.eml:before,
|
||||
&.download.maildir:before,
|
||||
&.download.mbox:before {
|
||||
content: @fa-var-download;
|
||||
}
|
||||
&.dropdown:before {
|
||||
content: @fa-var-caret-down;
|
||||
}
|
||||
&.edit:before {
|
||||
content: @fa-var-pencil-alt;
|
||||
}
|
||||
&.encrypt:before,
|
||||
&.enigma:before {
|
||||
content: @fa-var-lock;
|
||||
}
|
||||
&.encrypt.sign:before {
|
||||
content: @fa-var-lock; // TODO
|
||||
}
|
||||
&.expand:before {
|
||||
content: @fa-var-angle-right;
|
||||
}
|
||||
&.expand.all:before {
|
||||
content: @fa-var-angle-double-down;
|
||||
}
|
||||
&.expand.none:before {
|
||||
content: @fa-var-angle-double-up;
|
||||
}
|
||||
&.export:before,
|
||||
&.export.all:before,
|
||||
&.export.selection:before {
|
||||
content: @fa-var-download;
|
||||
}
|
||||
&.expunge:before {
|
||||
content: @fa-var-compress-arrows-alt;
|
||||
}
|
||||
&.extwin:before {
|
||||
content: @fa-var-external-link-square-alt;
|
||||
}
|
||||
&.filterlink:before {
|
||||
content: @fa-var-filter;
|
||||
}
|
||||
&.firstpage:before {
|
||||
content: @fa-var-angle-double-left;
|
||||
}
|
||||
&.nextpage:before {
|
||||
content: @fa-var-angle-right;
|
||||
}
|
||||
&.prevpage:before {
|
||||
content: @fa-var-angle-left;
|
||||
}
|
||||
&.lastpage:before {
|
||||
content: @fa-var-angle-double-right;
|
||||
}
|
||||
&.flag:before,
|
||||
&.select.flagged:before {
|
||||
.font-icon-solid(@fa-var-flag);
|
||||
}
|
||||
&.unflag:before {
|
||||
.font-icon-regular(@fa-var-flag);
|
||||
}
|
||||
&.undo:before {
|
||||
content: @fa-var-redo;
|
||||
}
|
||||
&.folders:before {
|
||||
content: @fa-var-folder;
|
||||
}
|
||||
&.forward:before,
|
||||
&.forward.attachment:before,
|
||||
&.forward.bounce:before,
|
||||
&.forward.inline:before {
|
||||
content: @fa-var-share;
|
||||
}
|
||||
&.import:before,
|
||||
&.upload:before {
|
||||
content: @fa-var-upload;
|
||||
}
|
||||
&.insertresponse:before {
|
||||
content: @fa-var-comment;
|
||||
}
|
||||
&.junk:before {
|
||||
content: @fa-var-fire-alt;
|
||||
}
|
||||
&.notjunk:before {
|
||||
content: @fa-var-inbox;
|
||||
}
|
||||
&.markmessage:before {
|
||||
content: @fa-var-tag;
|
||||
}
|
||||
&.more:before {
|
||||
content: @fa-var-ellipsis-h;
|
||||
}
|
||||
&.move:before {
|
||||
content: @fa-var-folder-open;
|
||||
}
|
||||
&.print:before {
|
||||
content: @fa-var-print;
|
||||
}
|
||||
&.properties:before {
|
||||
content: @fa-var-file;
|
||||
}
|
||||
&.purge:before {
|
||||
content: @fa-var-eraser;
|
||||
}
|
||||
&.qrcode:before {
|
||||
content: @fa-var-qrcode;
|
||||
}
|
||||
&.read:before {
|
||||
.font-icon-regular(@fa-var-envelope-open);
|
||||
}
|
||||
&.unread:before,
|
||||
&.expand.unread:before,
|
||||
&.select.unread:before {
|
||||
.font-icon-solid(@fa-var-envelope);
|
||||
}
|
||||
&.recipient:before {
|
||||
.font-icon-regular(@fa-var-envelope);
|
||||
}
|
||||
&.refresh:before {
|
||||
content: @fa-var-sync;
|
||||
}
|
||||
&.remove:before {
|
||||
content: @fa-var-eraser;
|
||||
}
|
||||
&.removegroup:before {
|
||||
content: @fa-var-user-times;
|
||||
}
|
||||
&.rename:before {
|
||||
content: @fa-var-pencil-alt;
|
||||
}
|
||||
&.reply:before {
|
||||
content: @fa-var-reply;
|
||||
}
|
||||
&.reply-all:before,
|
||||
&.reply.all:before,
|
||||
&.reply.list:before {
|
||||
content: @fa-var-reply-all;
|
||||
}
|
||||
&.responses:before {
|
||||
content: @fa-var-comment;
|
||||
}
|
||||
&.rotate:before {
|
||||
content: @fa-var-redo-alt;
|
||||
}
|
||||
&.save:before {
|
||||
.font-icon-regular(@fa-var-save);
|
||||
}
|
||||
&.search:before {
|
||||
content: @fa-var-search;
|
||||
}
|
||||
&.search.delete:before {
|
||||
content: @fa-var-trash-alt;
|
||||
}
|
||||
&.select:before {
|
||||
content: @fa-var-mouse-pointer;
|
||||
}
|
||||
&.select.all:before {
|
||||
content: @fa-var-asterisk;
|
||||
}
|
||||
&.select.invert:before {
|
||||
content: @fa-var-check-square;
|
||||
}
|
||||
&.select.none:before {
|
||||
.font-icon-solid(@fa-var-times);
|
||||
}
|
||||
&.select.page:before {
|
||||
.font-icon-solid(@fa-var-bars);
|
||||
}
|
||||
&.selection:before {
|
||||
.font-icon-regular(@fa-var-check-square) !important;
|
||||
}
|
||||
&.send:before {
|
||||
content: @fa-var-paper-plane;
|
||||
}
|
||||
&.showurl:before {
|
||||
content: @fa-var-link;
|
||||
}
|
||||
&.signature:before {
|
||||
content: @fa-var-signature;
|
||||
}
|
||||
&.source:before {
|
||||
content: @fa-var-file-code;
|
||||
}
|
||||
&.spellcheck:before {
|
||||
content: @fa-var-spell-check;
|
||||
}
|
||||
&.status:before {
|
||||
.font-icon-regular(@fa-var-lightbulb);
|
||||
}
|
||||
&.submit:before {
|
||||
content: @fa-var-check;
|
||||
}
|
||||
&.info:before {
|
||||
content: @fa-var-info-circle;
|
||||
}
|
||||
&.threads:before {
|
||||
content: @fa-var-comments;
|
||||
}
|
||||
&.zoomin:before {
|
||||
content: @fa-var-search-plus;
|
||||
}
|
||||
&.zoomout:before {
|
||||
content: @fa-var-search-minus;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*** Searchbar and searchoptions widgets ***/
|
||||
|
||||
.searchbar {
|
||||
height: @layout-searchbar-height;
|
||||
min-height: @layout-searchbar-height; // because of Flexbox
|
||||
line-height: @layout-searchbar-height;
|
||||
background-color: @color-searchbar-background;
|
||||
border-bottom: 1px solid @color-list-border;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
form {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-search;
|
||||
height: @layout-searchbar-height;
|
||||
color: @color-list-pagenav;
|
||||
margin: 0 0 0 .75rem;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: .5rem;
|
||||
line-height: normal; // fixes placeholder misalignment in IE11
|
||||
outline: 0; // removes focus outline in Chrome
|
||||
|
||||
&::-ms-clear {
|
||||
display: none; // for IE
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: @color-toolbar-button;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
width: 2rem;
|
||||
height: @layout-searchbar-height;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.options:before {
|
||||
content: @fa-var-angle-down;
|
||||
}
|
||||
|
||||
&.reset:before {
|
||||
content: @fa-var-times;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&.unread:before {
|
||||
.font-icon-solid(@fa-var-envelope);
|
||||
}
|
||||
|
||||
&.reset,
|
||||
&.search {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: @color-success;
|
||||
}
|
||||
}
|
||||
|
||||
span.inner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
a.reset {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
&.open a.options:before {
|
||||
content: @fa-var-angle-up;
|
||||
}
|
||||
}
|
||||
|
||||
.searchoptions {
|
||||
button.search {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul.proplist {
|
||||
& + div {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.input-group-prepend {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
label {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.formbuttons {
|
||||
// this is needed because we hide .formbuttons on small devices
|
||||
// we don't want it for search options form
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*** Taskmenu ***/
|
||||
|
||||
#taskmenu {
|
||||
a {
|
||||
display: block;
|
||||
float: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-width-xs) {
|
||||
z-index: 30001; // because autocompletion popup uses z-index:30000
|
||||
overflow-x: hidden;
|
||||
|
||||
a {
|
||||
max-width: unset;
|
||||
padding: 0 .5em;
|
||||
margin-top: 1px;
|
||||
text-align: left;
|
||||
line-height: @layout-touch-menu-record-height;
|
||||
height: @layout-touch-menu-record-height;
|
||||
border-bottom: 1px solid @color-list-border !important;
|
||||
color: @color-list;
|
||||
font-size: 1.2rem;
|
||||
|
||||
&:before {
|
||||
float: left !important;
|
||||
width: 1.2em !important;
|
||||
margin-right: .5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
span.inner {
|
||||
font-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: (@screen-width-xs + 1px)) {
|
||||
a {
|
||||
color: @color-taskmenu-button;
|
||||
padding: .45rem 0;
|
||||
min-width: unset;
|
||||
|
||||
&.selected {
|
||||
color: @color-taskmenu-button-selected;
|
||||
background: @color-taskmenu-button-selected-background;
|
||||
|
||||
&:hover {
|
||||
color: @color-taskmenu-button-selected-hover;
|
||||
background: @color-taskmenu-button-background-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: @color-taskmenu-button-hover;
|
||||
background: @color-taskmenu-button-background-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.special-buttons {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: @color-taskmenu-background;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
a {
|
||||
color: @color-taskmenu-button-action;
|
||||
background: @color-taskmenu-button-action-background;
|
||||
|
||||
&:hover {
|
||||
color: @color-taskmenu-button-action-hover;
|
||||
background: @color-taskmenu-button-action-background-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.logout {
|
||||
color: @color-taskmenu-button-logout !important;
|
||||
|
||||
&:hover {
|
||||
color: @color-taskmenu-button-logout-hover !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: (@screen-width-xs + 1px)) and (max-width: @screen-width-medium) {
|
||||
a {
|
||||
width: @layout-menu-width-sm;
|
||||
height: @layout-menu-width-sm;
|
||||
font-size: 1.2rem;
|
||||
padding: 0;
|
||||
|
||||
&:before {
|
||||
line-height: @layout-menu-width-sm;
|
||||
}
|
||||
}
|
||||
|
||||
span.inner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: (@screen-width-medium + 1px)) {
|
||||
a {
|
||||
width: @layout-menu-width;
|
||||
font-size: 1rem;
|
||||
|
||||
&:before {
|
||||
float: none; // fixed overflowing text in Edge
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: @color-taskmenu-button-selected-background;
|
||||
}
|
||||
}
|
||||
|
||||
span.inner {
|
||||
padding: 0 .1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,267 +0,0 @@
|
|||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) 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.
|
||||
*/
|
||||
|
||||
/*** UI Messages ***/
|
||||
|
||||
// .boxwarning/.boxerror/.boxinformation classes are converted to .ui.alert in bootstrap_init()
|
||||
|
||||
.ui.alert {
|
||||
margin: 0;
|
||||
margin-bottom: .2rem;
|
||||
opacity: .95;
|
||||
width: 100%;
|
||||
padding: .75em;
|
||||
color: @color-message;
|
||||
border: 1px solid @color-message-border;
|
||||
background-color: @color-message-background;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media screen and (max-width: @screen-width-xs) {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
& > i.icon {
|
||||
line-height: 1;
|
||||
color: lighten(@color-black, 25%);
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
& > i.icon:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-info-circle;
|
||||
margin-right: .6rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
&.loading {
|
||||
color: @color-message-loading;
|
||||
|
||||
& > i.icon:before {
|
||||
content: @fa-var-circle-notch;
|
||||
.animated-icon-class();
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
&.alert-success > i.icon:before {
|
||||
content: @fa-var-check-circle;
|
||||
color: @color-message-success;
|
||||
}
|
||||
|
||||
&.alert-warning > i.icon:before {
|
||||
content: @fa-var-exclamation-triangle;
|
||||
color: @color-message-warning;
|
||||
}
|
||||
|
||||
&.alert-danger > i.icon:before {
|
||||
content: @fa-var-exclamation-circle;
|
||||
color: @color-message-error;
|
||||
}
|
||||
|
||||
&.vcardattachment > i.icon:before {
|
||||
content: @fa-var-address-card; // vcard_attachments plugin
|
||||
}
|
||||
|
||||
&.enigmaattachment > i.icon:before {
|
||||
content: @fa-var-key; // enigma plugin
|
||||
}
|
||||
|
||||
&.signed > i.icon:before,
|
||||
&.encrypted > i.icon:before {
|
||||
content: @fa-var-lock; // enigma plugin
|
||||
}
|
||||
|
||||
&.chat > i.icon:before {
|
||||
content: @fa-var-comment;
|
||||
}
|
||||
|
||||
// #6797: Fix for long buttons issue
|
||||
.boxbuttons {
|
||||
white-space: nowrap;
|
||||
|
||||
.btn {
|
||||
.overflow-ellipsis();
|
||||
max-width: 220px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-width-xs) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.btn {
|
||||
max-width: 160px;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: .25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// This works with following structure: <i> <span> [button].
|
||||
// <span> here is a one-line text, and button can be anything but <span>.
|
||||
&.aligned-buttons {
|
||||
display: flex;
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
a:not(.btn) {
|
||||
color: @color-message-link;
|
||||
font-weight: @color-message-link-font-weight;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
&.boxerror,
|
||||
&.boxconfirmation,
|
||||
&.boxinformation,
|
||||
&.boxwarning {
|
||||
padding: .5em;
|
||||
border-radius: 0;
|
||||
|
||||
i.icon {
|
||||
font-size: 1.5em !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.boxerror {
|
||||
background-color: @color-message-error-box-background;
|
||||
& when not(@color-message-error-box = @color-message) { color: @color-message-error-box; }
|
||||
}
|
||||
|
||||
&.boxinformation {
|
||||
background-color: @color-message-information-box-background;
|
||||
& when not(@color-message-information-box = @color-message) { color: @color-message-information-box; }
|
||||
}
|
||||
|
||||
&.boxconfirmation {
|
||||
background-color: @color-message-success-box-background;
|
||||
& when not(@color-message-error-box = @color-message) { color: @color-message-error-box; }
|
||||
}
|
||||
|
||||
&.boxwarning {
|
||||
background-color: @color-message-warning-box-background;
|
||||
& when not(@color-message-warning-box = @color-message) { color: @color-message-warning-box; }
|
||||
}
|
||||
|
||||
& + table {
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
#messagestack {
|
||||
position: absolute;
|
||||
bottom: .5em;
|
||||
right: .7em;
|
||||
z-index: 105; // needs to be above .ui-widget-overlay
|
||||
width: 320px;
|
||||
height: auto;
|
||||
max-height: 85%;
|
||||
|
||||
@media screen and (max-width: @screen-width-xs) {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
div {
|
||||
background-color: @color-message;
|
||||
color: @color-message-text;
|
||||
|
||||
@media screen and (max-width: @screen-width-xs) {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
min-height: 4.2rem;
|
||||
}
|
||||
|
||||
&.voice {
|
||||
position: absolute;
|
||||
top: -1000px;
|
||||
}
|
||||
|
||||
i.icon {
|
||||
font-size: 1.5em !important;
|
||||
}
|
||||
|
||||
& > i.icon:before {
|
||||
color: @color-message-text;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
background-color: @color-message-loading;
|
||||
& when not(@color-message-loading-text = @color-message-text) { color: @color-message-loading-text; }
|
||||
& > i.icon:before {
|
||||
& when not(@color-message-loading-text = @color-message-text) { color: @color-message-loading-text; }
|
||||
}
|
||||
}
|
||||
|
||||
.alert-info.information {
|
||||
background-color: @color-message-information;
|
||||
& when not(@color-message-information-text = @color-message-text) { color: @color-message-information-text; }
|
||||
& > i.icon:before {
|
||||
& when not(@color-message-information-text = @color-message-text) { color: @color-message-information-text; }
|
||||
}
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background-color: @color-message-success;
|
||||
& when not(@color-message-success-text = @color-message-text) { color: @color-message-success-text; }
|
||||
& > i.icon:before {
|
||||
& when not(@color-message-success-text = @color-message-text) { color: @color-message-success-text; }
|
||||
}
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
background-color: @color-message-warning;
|
||||
& when not(@color-message-warning-text = @color-message-text) { color: @color-message-warning-text; }
|
||||
& > i.icon:before {
|
||||
& when not(@color-message-warning-text = @color-message-text) { color: @color-message-warning-text; }
|
||||
}
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background-color: @color-message-error;
|
||||
& when not(@color-message-error-text = @color-message-text) { color: @color-message-error-text; }
|
||||
& > i.icon:before {
|
||||
& when not(@color-message-error-text = @color-message-text) { color: @color-message-error-text; }
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit !important;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue