Page Menu
Home
Phorge
Search
Configure Global Search
Log In
Files
F2513251
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Flag For Later
Award Token
Size
46 KB
Referenced Files
None
Subscribers
None
View Options
diff --git a/skins/elastic/styles/colors.less b/skins/elastic/styles/colors.less
index 4bac88c35..15dd09a25 100644
--- a/skins/elastic/styles/colors.less
+++ b/skins/elastic/styles/colors.less
@@ -1,201 +1,202 @@
/**
* 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-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: #fff;
@color-layout-footer-background: #fff;
// Task menu
@color-taskmenu-background: #414e54;
@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: tint(@color-main, 96%);
@color-searchbar-icon-active: green;
// Toolbar menu
@color-toolbarmenu-hover: #fff;
@color-toolbarmenu-hover-background: @color-main;
// Listings
@color-list: @color-font;
@color-list-selected: inherit;
@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-information: @color-main;
@color-message-success: @color-success;
@color-message-warning: @color-warning;
@color-message-error: @color-error;
@color-message-loading: #333;
@color-message-shadow: @color-black-shade-bg;
-@color-message-error-background: fadeout(@color-message-error, 95%);
-@color-message-information-background: fadeout(@color-message-information, 95%);
-@color-message-success-background: fadeout(@color-message-success, 95%);
+@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%);
// 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-font;
+@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: rgba(22, 27, 29, 0.15);
@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: @color-black-shade-border;
+@color-quota-background: @color-black-shade-bg;
@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/layout.less b/skins/elastic/styles/layout.less
index 1424e8697..642ae9088 100644
--- a/skins/elastic/styles/layout.less
+++ b/skins/elastic/styles/layout.less
@@ -1,292 +1,293 @@
/**
* 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.
*/
/*** 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;
}
body > #layout {
overflow: hidden;
display: flex;
height: 100%;
width: 100%;
& > div {
&.sidebar,
&.list {
display: flex;
flex-direction: column;
max-width: 30%;
border-right: 1px solid @color-layout-border;
& > .header {
a.button {
margin: 0;
padding: 0 .5rem;
}
}
}
&.content {
display: flex;
flex: 6;
flex-direction: column;
min-width: 50%;
background-color: @color-layout-content-background;
& > .formcontent, // e.g. Help plugin
& > .content {
height: 100%;
width: 100%;
overflow: auto;
flex: 1;
}
.iframe-wrapper {
width: 100%;
height: 100%;
flex: 1;
iframe {
width: 100%;
height: 100%;
border: 0;
}
}
}
&.sidebar {
display: flex;
min-width: 220px;
background-color: @color-layout-sidebar-background;
flex: 2;
}
&.list {
display: flex;
flex: 3;
min-width: 300px;
background-color: @color-layout-list-background;
}
& > .scroller {
flex: 1;
position: relative; // for .listing-info positioning
}
& > .content.only > .scroller {
overflow: auto;
}
& > .header,
& > .footer {
background-color: @color-layout-header-background;
font-size: @layout-header-font-size;
font-weight: bold;
line-height: @layout-header-height;
height: @layout-header-height;
min-height: @layout-header-height;
padding: 0 .25em;
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;
.header-title {
.overflow-ellipsis;
flex: 1;
text-align: center;
margin: 0 -20rem;
}
}
& > .footer {
border-top: 1px solid @color-layout-border;
background-color: @color-layout-footer-background;
&:empty {
display: none;
}
}
}
}
html.iframe {
body {
overflow: auto;
#layout > .content {
height: 100%;
}
}
}
@media screen and (max-width: @screen-width-large) {
body > #layout > div.sidebar,
body > #layout > div.list {
min-width: 260px;
flex: 3;
}
}
@media screen and (max-width: @screen-width-medium) {
}
@media screen and (max-width: @screen-width-small) {
body > #layout > div.sidebar,
body > #layout > div.list {
max-width: none;
border: 0;
}
body > #layout > div > .header {
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;
}
}
}
body > #layout > div > .header {
&.with-search:not(.no-toolbar) {
.searchbar {
right: @layout-touch-icon-width;
}
.searchfilterbar {
right: (@layout-touch-icon-width * 2);
}
}
}
}
@media screen and (max-width: @screen-width-xs) {
}
@media screen and (max-width: @screen-width-mini) {
body > #layout > div.sidebar,
body > #layout > div.list {
min-width: @page-min-width;
}
}
@media screen and (min-width: (@screen-width-xs + 1px)) {
body > #layout > div > .header > a.menu-button {
display: none;
}
body > #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;
}
}
@media screen and (min-width: (@screen-width-small + 1px)) {
.floating-action-buttons,
body > #layout > .content > .header > .header-title,
body > #layout > div > .header > .buttons,
body > #layout > div > .header > a.toolbar-menu-button {
display: none;
}
body > #layout > .menu {
width: @layout-menu-width/2;
}
}
@media screen and (min-width: (@screen-width-medium + 1px)) {
body > #layout > .menu {
width: @layout-menu-width;
}
}
@media screen and (min-width: (@screen-width-large + 1px)) {
body > #layout > div > .header > a.back-list-button,
body > #layout > div > .header > 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-large,
html.layout-normal {
.hidden-big {
display: none !important;
}
}
html.layout-large {
.hidden-large {
display: none !important;
}
}
diff --git a/skins/elastic/styles/widgets/mail.less b/skins/elastic/styles/widgets/mail.less
index 38ef6d54b..8ed9886ee 100644
--- a/skins/elastic/styles/widgets/mail.less
+++ b/skins/elastic/styles/widgets/mail.less
@@ -1,287 +1,287 @@
/**
* 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.
*/
/*** Mail message body elements ***/
@mail-header-photo-height: 4rem;
#message-header {
margin-bottom: 1rem;
.subject {
.overflow-ellipsis;
font-size: 1.5rem;
font-weight: bold;
white-space: nowrap;
}
.short-header {
display: flex;
img.contactphoto {
margin: 0 1rem 0 0;
border-radius: 50%;
width: @mail-header-photo-height;
height: @mail-header-photo-height;
}
div.header-content {
min-height: @mail-header-photo-height;
flex: 1;
}
div.header-subject {
line-height: @mail-header-photo-height/2;
& > span {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
}
div.header-links {
a {
font-size: 90%;
margin-right: .5rem;
text-decoration: none;
white-space: nowrap;
line-height: 1.5;
display: inline-block;
&:before {
&:extend(.font-icon-class);
display: inline-block;
float: none;
}
&.extwin:before {
content: @fa-var-external-link-square-alt;
}
&.headers:before {
content: @fa-var-wrench;
}
&.envelope:before {
.font-icon-regular(@fa-var-envelope);
}
&.html:before {
content: @fa-var-image;
}
&.plain:before {
content: @fa-var-align-justify;
}
&.zipdownload:before {
content: @fa-var-download;
}
}
}
.message-partheaders {
margin: 0 !important;
padding: .25rem 0 !important;
}
}
}
#message-content {
.attachmentslist:not(:empty) {
margin-bottom: 1rem;
}
}
#message-objects + .ui.alert {
float: left;
}
#messagebody {
// TODO
&.mailvelope {
margin: 0;
}
}
.message-part,
.message-htmlpart {
padding-top: .5rem;
&:not(:first-child) {
border-top: 1px solid lighten(@color-mail-headers, 50%);
margin-top: .5rem;
}
div.rcmBody {
// Remove margins that can be set by the mail message styles
margin: 0 !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;
}
&.mailvelope iframe {
min-height: 35em;
}
}
.message-partheaders {
padding: .5rem 0;
margin: .5rem 0 0 0;
font-size: 90%;
- border-top: 1px solid lighten(@color-mail-headers, 50%);
- border-bottom: 1px solid lighten(@color-mail-headers, 50%);
+ border-top: 1px solid @color-list-border;
+ border-bottom: 1px solid @color-list-border;
color: @color-mail-headers;
.header-title {
.overflow-ellipsis;
white-space: nowrap;
max-width: 7em;
font-weight: bold;
padding-right: 1rem;
vertical-align: top;
}
.subject {
font-weight: bold;
}
& + .message-part,
& + .message-htmlpart {
border-top: 0;
margin: 0;
}
}
.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;
.toolbar {
float: left;
height: @layout-header-height;
a.button:before {
width: auto;
height: 1.75rem;
display: block;
float: none;
}
}
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;
&:focus,
&:hover {
background-color: @color-image-tools-hover !important;
outline: 0;
}
}
}
diff --git a/skins/elastic/styles/widgets/messages.less b/skins/elastic/styles/widgets/messages.less
index a09a29fd2..3e0b12618 100644
--- a/skins/elastic/styles/widgets/messages.less
+++ b/skins/elastic/styles/widgets/messages.less
@@ -1,246 +1,246 @@
/**
* 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;
}
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;
}
&.boxinformation {
- background-color: @color-message-background;
+ background-color: @color-message-information-background;
}
&.boxconfirmation {
background-color: @color-message-success-background;
}
&.boxwarning {
background-color: @color-message-warning-background;
}
& + 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;
& > i.icon:before {
color: @color-main;
}
}
.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;
}
}
.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;
}
}
diff --git a/skins/elastic/styles/widgets/toolbar.less b/skins/elastic/styles/widgets/toolbar.less
index e070f60b6..b874d0b42 100644
--- a/skins/elastic/styles/widgets/toolbar.less
+++ b/skins/elastic/styles/widgets/toolbar.less
@@ -1,741 +1,745 @@
/**
* 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.
*/
/*** Toolbar widget ***/
.toolbar {
margin: 0;
font-size: 1rem;
&.listing a,
a {
text-decoration: none;
cursor: pointer !important; // TODO: re-consider .listing class use on toolbar
color: @color-toolbar-button;
}
a.button {
display: inline-block;
border: 0 !important;
height: @layout-header-height;
min-width: 3.5rem;
max-width: 6rem;
width: auto; // reset width defined for links in .listing
padding: .45rem;
text-align: center;
text-overflow: ellipsis;
overflow-x: hidden;
line-height: 1.5;
&:hover,
&:focus {
outline: 0;
}
&.selected {
color: @color-success;
}
&:before {
&:extend(.font-icon-class);
display: inline;
float: none;
margin: 0;
line-height: 1.75;
}
&.reply:before {
content: @fa-var-reply;
}
&.reply-all:before {
content: @fa-var-reply-all;
}
&.forward:before {
content: @fa-var-share;
}
&.delete:before {
content: @fa-var-trash-alt;
}
&.markmessage:before {
content: @fa-var-tag;
}
&.more:before {
content: @fa-var-ellipsis-h;
}
&.dropdown:before {
content: @fa-var-caret-down;
}
&.settings:before {
content: @fa-var-sliders-h;
}
&.create:before {
content: @fa-var-plus-square;
}
&.move:before {
content: @fa-var-arrows-alt;
}
&.purge:before {
content: @fa-var-eraser;
}
&.print:before {
content: @fa-var-print;
}
&.search:before {
content: @fa-var-search;
}
&.upload:before,
&.import:before {
content: @fa-var-upload;
}
&.download:before,
&.export:before {
content: @fa-var-download;
}
&.compose:before {
content: @fa-var-edit;
}
&.archive:before {
content: @fa-var-archive;
}
&.junk:before {
content: @fa-var-fire;
}
&.enigma:before,
&.encrypt:before {
content: @fa-var-lock;
}
&.firstpage:before {
content: @fa-var-fast-backward;
}
&.prev:before {
content: @fa-var-arrow-left;
}
&.next:before {
content: @fa-var-arrow-right;
}
&.prevpage:before {
content: @fa-var-backward;
}
&.nextpage:before {
content: @fa-var-forward;
}
&.lastpage:before {
content: @fa-var-fast-forward;
}
&.send:before {
content: @fa-var-paper-plane;
}
&.back:before {
content: @fa-var-arrow-left;
}
&.closewin:before {
content: @fa-var-window-close;
}
&.save:before {
.font-icon-regular(@fa-var-save);
}
&.vcard:before,
&.attach:before {
content: @fa-var-paperclip;
}
&.spellcheck:before {
content: @fa-var-magic; // TODO
}
&.signature:before {
content: @fa-var-id-card;
}
&.responses:before {
content: @fa-var-comment;
}
&.select:before {
.font-icon-regular(@fa-var-check-square);
}
&.threads:before {
content: @fa-var-comments;
}
&.actions:before {
content: @fa-var-cog;
}
&.refresh:before {
content: @fa-var-sync;
}
&.addto:before {
content: @fa-var-user-plus;
}
&.addcc:before {
content: @fa-var-user-plus;
}
&.addbcc:before {
content: @fa-var-user-plus;
}
&.addressbook:before {
content: @fa-var-user;
}
&.expand:before {
content: @fa-var-caret-down;
}
&.collapse:before {
content: @fa-var-caret-up;
}
&.submit:before {
content: @fa-var-check;
}
&.edit:before {
content: @fa-var-pencil-alt;
}
&.qrcode:before {
content: @fa-var-qrcode;
}
&.properties:before {
content: @fa-var-file;
}
&.zoomin:before {
content: @fa-var-search-plus;
}
&.zoomout:before {
content: @fa-var-search-minus;
}
&.rotate:before {
content: @fa-var-redo-alt;
}
}
&:not(.popupmenu) span.inner {
font-size: 90%;
font-weight: normal;
}
.dropbutton {
a.button.dropdown {
font-size: 75%;
overflow: hidden; // for IE11
span.inner {
display: none;
}
}
a.button:first-child {
padding-right: 0;
}
}
& > .spacer {
width: 1em;
}
&.pagenav {
text-align: center;
display: flex;
border-bottom: 1px solid @color-layout-border;
height: @layout-pagenav-height;
overflow: hidden;
a.button {
flex-grow: 1;
font-size: 80%;
min-width: 2rem !important;
height: @layout-pagenav-height !important;
color: @color-list-pagenav;
overflow: hidden;
&:before {
line-height: 1 !important;
}
}
.pagenav-text {
.overflow-ellipsis;
flex-grow: 4;
line-height: @layout-pagenav-height;
font-size: 80%;
color: @color-list-pagenav;
white-space: nowrap;
}
input {
width: 3rem;
font-size: 90%;
line-height: 1;
padding: .25rem;
margin: .15rem;
display: inline;
text-align: center;
}
span.inner {
display: none;
}
&.pagenav-list {
cursor: pointer;
a.button {
flex-grow: initial;
}
.pagenav-text {
text-align: left;
}
& + .navlist {
background-color: #fbfbfb;
}
}
}
&.footer {
a.button:before {
height: 1.75rem;
float: none;
display: block;
width: auto;
}
}
&.content-frame-navigation.hide-nav-buttons {
a.next,
a.prev {
display: none;
}
}
.listselectors {
max-width: 100%;
display: flex;
justify-content: space-around;
}
}
.header {
a.button {
color: @color-toolbar-button;
}
.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;
}
}
a.button {
display: inline-block;
&:before {
&:extend(.font-icon-class);
float: none;
}
&.reply:before {
content: @fa-var-reply;
}
&.send:before {
content: @fa-var-paper-plane;
}
}
}
}
.popupmenu.toolbar.listing {
a.button {
max-width: 100%;
width: 100%;
text-align: left;
line-height: @layout-touch-menu-record-height;
height: @layout-touch-menu-record-height;
&:before {
display: inline-block;
line-height: inherit;
margin-right: .5rem;
}
}
.dropbutton {
display: flex;
a.button:first-child {
.overflow-ellipsis;
flex: 1;
}
a.button.dropdown {
font-size: 100%;
cursor: pointer;
width: auto;
&:before {
content: @fa-var-angle-right;
margin-left: .5em;
margin-right: 0;
}
span.inner {
display: none;
}
}
}
li.spacer {
display: none;
}
li:last-child {
border: 0;
}
}
.toolbarmenu li {
&.separator {
// TODO: all separator properties
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?
}
}
&.checkbox > label {
margin: 0;
width: 100%;
input.icon-checkbox {
right: auto;
& + label {
left: 0;
margin: 0 .2em 0 .35em;
font-size: 1.1rem;
}
}
}
a {
opacity: .5;
&.active {
opacity: 1;
}
}
&:last-child {
border-bottom: none;
}
a:before {
&:extend(.font-icon-class);
}
a.print:before {
content: @fa-var-print;
}
a.copy:before {
content: @fa-var-copy;
}
a.move:before {
content: @fa-var-arrows-alt;
}
a.purge:before {
content: @fa-var-eraser;
}
a.source:before {
content: @fa-var-file-code;
}
a.download:before {
content: @fa-var-download;
}
a.extwin:before {
content: @fa-var-external-link-square-alt;
}
a.create:before {
content: @fa-var-plus-square;
}
a.edit:before {
content: @fa-var-edit;
}
a.edit.asnew:before {
content: @fa-var-pencil-alt;
}
a.rename:before {
content: @fa-var-pencil-alt;
}
a.read:before {
.font-icon-regular(@fa-var-star);
}
a.unread:before {
content: @fa-var-star;
}
a.flag:before {
content: @fa-var-flag;
}
a.unflag:before {
.font-icon-regular(@fa-var-flag);
}
a.filterlink:before {
content: @fa-var-filter;
}
a.reply.list:before,
a.reply.all:before {
content: @fa-var-reply-all;
}
a.forward:before,
a.forward.bounce:before,
a.forward.attachment:before,
a.forward.inline:before {
content: @fa-var-share;
}
a.download.mbox:before,
a.download.eml:before,
a.download.maildir:before {
content: @fa-var-download;
}
a.export.selection:before,
a.export.all:before {
content: @fa-var-download;
}
a.select.all:before {
.font-icon-regular(@fa-var-check-square);
}
a.select.none:before {
content: @fa-var-times;
}
a.select.page:before {
content: @fa-var-bars;
}
a.select.flagged:before {
content: @fa-var-flag;
}
a.select.unread:before {
content: @fa-var-star;
}
a.select.invert:before {
.font-icon-regular(@fa-var-square);
}
a.expand.all:before,
a.expand.unread:before,
a.expand.none:before {
content: @fa-var-comments;
}
a.search:before {
content: @fa-var-search;
}
a.delete:before {
content: @fa-var-trash-alt;
}
a.expunge:before {
content: @fa-var-compress;
}
a.import:before {
content: @fa-var-upload;
}
a.settings:before {
content: @fa-var-sliders-h;
}
a.insertresponse:before {
content: @fa-var-comment;
}
a.compose:before {
content: @fa-var-edit;
}
a.addressbook:before {
content: @fa-var-user;
}
a.recipient:before {
.font-icon-regular(@fa-var-envelope);
}
a.status:before {
.font-icon-regular(@fa-var-lightbulb);
}
a.folders:before {
content: @fa-var-folder;
}
a.remove:before {
content: @fa-var-eraser;
}
a.showurl:before {
content: @fa-var-link;
}
a.qrcode:before {
content: @fa-var-qrcode;
}
a.assigngroup:before {
content: @fa-var-user-plus;
}
a.removegroup:before {
content: @fa-var-user-times;
}
a.vcard:before {
content: @fa-var-paperclip;
}
a.encrypt:before {
content: @fa-var-lock;
}
a.encrypt.sign:before {
content: @fa-var-lock; // TODO
}
}
.toolbarmenu.listing li {
&.checkbox > label {
padding: 0 .5rem 0 2.5em;
}
&:hover {
&.checkbox > label,
input.icon-checkbox + label:before,
a.active {
color: @color-toolbarmenu-hover;
background-color: @color-toolbarmenu-hover-background;
}
}
}
#layout > .sidebar > .header,
#layout > .list > .header {
span.inner {
display: none;
}
}
#layout > .content > * > .toolbar {
text-align: center;
}
html.touch {
.toolbarmenu.listing td,
.toolbarmenu.listing li,
#layout > :not(.content) > .header a.button {
font-size: 1.2rem;
}
.toolbarmenu.listing li {
&.checkbox > label {
padding: 0 .5rem 0 2.75rem;
}
}
.toolbarmenu li {
input.icon-checkbox + label {
font-size: 1.3rem;
}
}
}
html.ie11 .toolbar .dropbutton a.dropdown:before {
font-size: 80%;
}
@media screen and (min-width: (@screen-width-small + 1px)) {
ul.toolbar {
flex: 1;
}
.toolbar {
a.button {
&:not(.disabled):focus,
&:not(.disabled):hover {
background-color: @color-toolbar-button-background-hover;
}
}
&.listing li {
display: inline-block;
border: 0;
a.button:before {
height: 1.75rem;
float: none;
display: block;
width: auto;
margin: 0;
}
}
.dropbutton {
height: @layout-header-height;
display: inline-block;
&:hover {
background-color: @color-toolbar-button-background-hover;
}
a.button.dropdown {
min-width: 1.1rem;
padding: 0 .3rem;
&:hover {
background-color: darken(@color-toolbar-button-background-hover, 5%);
}
&:before {
height: @layout-header-height;
line-height: 4.2;
}
}
}
}
.toolbar.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) {
body > #layout > div > .toolbar.footer {
justify-content: space-around;
& > * {
flex-grow: 1;
}
.buttons {
display: flex;
justify-content: space-around;
}
.listselectors > * {
flex-grow: 1;
}
}
+
+ .toolbar.listing a {
+ color: @color-font;
+ }
}
File Metadata
Details
Attached
Mime Type
text/x-diff
Expires
Sat, Apr 18, 10:14 AM (6 h, 15 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
436199
Default Alt Text
(46 KB)
Attached To
Mode
R3 roundcubemail
Attached
Detach File
Event Timeline
Log In to Comment