Page MenuHomePhorge
Files F2571543

No OneTemporary
Actions

Size
15 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/skins/elastic/styles/colors.less b/skins/elastic/styles/colors.less
index 6f72ed608..ab9bf3c3e 100644
--- a/skins/elastic/styles/colors.less
+++ b/skins/elastic/styles/colors.less
@@ -1,202 +1,207 @@
/**
* Roundcube webmail styles for the Elastic skin
*
* Copyright (c) 2017-2018, The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
@color-main: #37beff;
@color-main-dark: darken(@color-main, 35%);
@color-black: #161b1d;
@color-font: lighten(@color-black, 10%);
@color-link: #00acff;
@color-link-hover: darken(@color-link, 10%);
@color-border: #ddd;
@color-error: #ff5552;
@color-success: #41b849;
@color-warning: #ffd452;
@color-link-secondary: lighten(@color-font, 60%);
-@color-black-shade-text: lighten(@color-black, 35%);
+@color-black-shade-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-special: @color-taskmenu-button;
@color-taskmenu-button-selected-background: lighten(@color-taskmenu-background, 10%);
@color-taskmenu-button-action-background: transparent;
@color-taskmenu-button-special-background: @color-taskmenu-background;
@color-taskmenu-button-hover: #fff;
@color-taskmenu-button-selected-hover: #fff;
@color-taskmenu-button-action-hover: @color-main;
@color-taskmenu-button-special-hover: lighten(@color-taskmenu-button-special, 10%);
@color-taskmenu-button-background-hover: lighten(@color-taskmenu-background, 10%);
@color-taskmenu-button-action-background-hover: @color-taskmenu-button-background-hover;
@color-taskmenu-button-special-background-hover:lighten(@color-taskmenu-button-special-background, 10%);
@color-taskmenu-button-logout-hover: @color-error;
// Toolbar
@color-toolbar-button: @color-font;
@color-toolbar-button-background-hover: darken(@color-layout-header-background, 3%);
@color-searchbar-icon-active: green;
@color-searchbar-background: #fbfbfb;
// Toolbar menu
@color-toolbarmenu-hover: #fff;
@color-toolbarmenu-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: lighten(@color-black, 50%);
@color-list-secondary: @color-black-shade-text;
@color-list-droptarget-background: #ffffcc;
@color-list-focus-indicator: lighten(@color-main, 20%);
@color-list-border: @color-black-shade-bg;
@color-list-badge: #fff;
@color-list-badge-background: @color-main;
@color-list-recent: blue;
@color-list-recent-badge: #fff;
@color-list-recent-badge-background: @color-list-recent;
@color-list-pagenav: @color-black-shade-text;
@color-list-icon: fadeout(@color-list-secondary, 25%);
// Drag-n-drop layer
@color-drag-layer: #fff;
@color-drag-layer-background: @color-taskmenu-background;
@color-drag-layer-shadow: @color-black-shade-bg;
// Messages
@color-message: @color-font;
@color-message-border: rgba(0, 0, 0, 0.15);
@color-message-background: fadeout(@color-main, 95%);
@color-message-link: @color-main;
+@color-message-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: #333;
-@color-message-error-background: fadeout(@color-message-error, 85%);
-@color-message-information-background: fadeout(@color-message-information, 85%);
-@color-message-success-background: fadeout(@color-message-success, 85%);
-@color-message-warning-background: fadeout(#ffff66, 75%);
+@color-message-loading: @color-taskmenu-background;
+@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, 85%);
+@color-message-information-box-background: fadeout(@color-message-information, 85%);
+@color-message-success-box-background: fadeout(@color-message-success, 85%);
+@color-message-warning-box-background: fadeout(#ffff66, 75%);
// Popovers (menus)
@color-popover-header: @color-black-shade-text;
@color-popover-header-background: transparent;
@color-popover-shadow: @color-black-shade-bg;
@color-popover-separator: @color-black-shade-text;
@color-popover-separator-background: @color-black-shade-bg;
@color-popover-mobile-header: #fff;
@color-popover-mobile-header-background: @color-main-dark;
// Dialogs
@color-dialog-overlay-background: fade(@color-font, 50%);
@color-dialog-header: @color-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-focus: darken(@color-checkbox, 30%);
@color-checkbox-checked-focus: darken(@color-checkbox-checked, 30%);
@color-form-hint: @color-black-shade-text;
@color-image-upload-background: @color-black-shade-bg;
@color-btn-secondary: #fff;
@color-btn-secondary-background: lighten(@color-black, 50%);
@color-btn-primary: #fff;
@color-btn-primary-background: @color-main;
@color-btn-danger: #fff;
@color-btn-danger-background: @color-error;
@color-quota-background: #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-spellcheck-link: @color-error;
@color-table-border: @color-layout-border;
@color-table-selected: @color-list-selected;
@color-table-selected-background: @color-list-selected-background;
// Datepicker
@color-datepicker-border: @color-layout-border;
@color-datepicker-font: @color-font;
@color-datepicker-highlight: !default;
@color-datepicker-highlight-background: lighten(@color-main, 30%);
@color-datepicker-active: #fff;
@color-datepicker-active-background: @color-main;
// Image tools
@color-image-tools: #fff;
@color-image-tools-background: fadeout(@color-main, 60%);
@color-image-tools-hover: fadeout(@color-main, 50%);
diff --git a/skins/elastic/styles/widgets/messages.less b/skins/elastic/styles/widgets/messages.less
index 97452a557..72a5a487b 100644
--- a/skins/elastic/styles/widgets/messages.less
+++ b/skins/elastic/styles/widgets/messages.less
@@ -1,250 +1,253 @@
/**
* Roundcube webmail styles for the Elastic skin
*
* Copyright (c) 2017-2018, The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
/*** UI Messages ***/
// .boxwarning/.boxerror/.boxinformation classes are converted to .ui.alert in bootstrap_init()
.ui.alert {
margin: 0;
opacity: .95;
float: left;
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;
border-radius: 0;
min-height: 4.2rem;
}
@media screen and (min-width: (@screen-width-xs + 1px)) {
&:not(:last-child) {
margin-bottom: .2rem;
}
}
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;
}
&.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
}
// 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: normal;
+ font-weight: @color-message-link-font-weight;
}
h3 {
font-weight: bold;
font-size: 1.2rem;
}
p {
margin: 1rem 0;
}
&.boxerror,
&.boxconfirmation,
&.boxinformation,
&.boxwarning {
float: none;
border-radius: 0;
border: none;
padding: .5em;
margin-top: 0; // this can be a <p> element, reset default margin
i.icon {
font-size: 1.5em !important;
}
&:not(:last-child) {
margin-bottom: .2rem;
}
}
&.boxerror {
- background-color: @color-message-error-background;
+ 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-background;
+ 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-background;
+ 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-background;
+ 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 {
border-color: transparent;
&.voice {
position: absolute;
top: -1000px;
}
i.icon {
font-size: 1.5em !important;
}
}
.loading {
- background-color: @color-list-selected-background;
- border-color: @color-main;
- color: @color-main;
+ background-color: @color-message-loading;
+ color: #fff;
& > i.icon:before {
- color: @color-main;
+ color: #fff;
}
}
.alert-info.information {
color: #fff;
background-color: @color-message-information;
& > i.icon:before {
color: #fff;
}
}
.alert-info.notice {
color: #fff;
background-color: @color-taskmenu-background;
& > i.icon:before {
color: #fff;
}
&.chat > i.icon:before {
content: @fa-var-comment;
}
}
.alert-success {
color: #fff;
background-color: @color-message-success;
& > i.icon:before {
color: #fff;
}
}
.alert-warning {
background-color: @color-message-warning;
& > i.icon:before {
color: #fff;
}
}
.alert-danger {
color: #fff;
background-color: @color-message-error;
& > i.icon:before {
color: #fff;
}
}
a {
color: inherit !important;
text-decoration: underline;
cursor: pointer;
}
}

File Metadata

Mime Type
text/x-diff
Expires
Thu, Mar 19, 8:44 AM (19 h, 58 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
457621
Default Alt Text
(15 KB)

Event Timeline