Merge remote-tracking branch 'elastic/master'
Aleksander Machniak
6 years ago
commit
94ee0094b1
@ -0,0 +1,3 @@
|
||||
styles/styles.css
|
||||
styles/print.css
|
||||
styles/embed.css
|
||||
@ -0,0 +1,114 @@
|
||||
Roundcube Webmail Skin "Elastic"
|
||||
================================
|
||||
|
||||
This skin package contains a theme for the Roundcube Webmail
|
||||
software. It can be used, modified and redistributed according to
|
||||
the terms described in the LICENSE section.
|
||||
|
||||
For information about building or modifying Roundcube skins please visit
|
||||
https://github.com/roundcube/roundcubemail/wiki/Skins
|
||||
|
||||
|
||||
LICENSE
|
||||
-------
|
||||
The contents of this folder 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.
|
||||
|
||||
This folder also contains code licensed separately:
|
||||
- Bootstrap Framework 4 from https://github.com/twbs/bootstrap
|
||||
- FontAwesome 5 fonts from https://fontawesome.com/
|
||||
- Roboto font from https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=cyrillic,latin-ext,cyrillic-ext,latin,greek,greek-ext
|
||||
|
||||
|
||||
PROJECT GOALS
|
||||
-------------
|
||||
Create a user interface that is clean and usable with any screen size.
|
||||
Use new technologies like e.g. flexbox, @media, font-icons or less.
|
||||
Cleanup css/html and unify as much as possible.
|
||||
|
||||
|
||||
INSTALLATION (development):
|
||||
---------------------------
|
||||
1. git clone https://github.com/roundcube/roundcubemail.git
|
||||
2. cd roundcubemail/skins
|
||||
3. git clone https://github.com/roundcube/elastic.git
|
||||
4. Disable all external plugins and set devel_mode=true.
|
||||
|
||||
|
||||
INSTALLATION (production):
|
||||
--------------------------
|
||||
All styles are written using LESS syntax. Thus it needs to be compiled
|
||||
using the `lessc` command line tool. This comes with the `nodejs-less`
|
||||
RPM package which depends on nodejs.
|
||||
```
|
||||
$ lessc -x styles/styles.less > styles/styles.css
|
||||
$ lessc -x styles/print.less > styles/print.css
|
||||
$ lessc -x styles/embed.less > styles/embed.css
|
||||
```
|
||||
(the -x option minifies the CSS code)
|
||||
|
||||
References to image files from the included CSS files can be appended
|
||||
with cache-buster marks to avoid browser caching issues after updating.
|
||||
|
||||
Run `bin/updatecss.sh --dir skins/elastic` from the Roundcube
|
||||
package before packaging the skin or after installing it on the
|
||||
destination system.
|
||||
|
||||
|
||||
RULES:
|
||||
------
|
||||
- Supported browsers: IE11+, Edge, Last 2 versions for Chrome/Firefox/Safari,
|
||||
Android Browser 5+, iOS Safari 9+.
|
||||
|
||||
- Minimum supported screen width is 240px (note that even if the device screen
|
||||
resolution is e.g.320x372 changing the text size in device settings will reduce
|
||||
the resolution)
|
||||
|
||||
- Every page (which is not a frame) has following required structure:
|
||||
```
|
||||
<body>
|
||||
<div id="layout">
|
||||
<div class="menu"></div>
|
||||
<div class="sidebar"></div>
|
||||
<div class="list"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</body>
|
||||
```
|
||||
where `sidebar` and `list` are optional. Which element of the `layout` will be displayed
|
||||
as a main view on mobile devices can be defined by adding `selected` class to it.
|
||||
|
||||
- The `<html>` element will receive special classes that will be updated on resize
|
||||
or orientation change:
|
||||
- `touch`: A touch device, screen width <= 1024px,
|
||||
- 'layout-large`: Screen width > 1200px,
|
||||
- `layout-normal`: Screen width <= 1200px and >= 768px,
|
||||
- `layout-small`: Screen width < 768px and > 480px,
|
||||
- `layout-phone`: Screen width <= 480px.
|
||||
|
||||
Frames will have the same classes applied as their parent windows.
|
||||
|
||||
- Every button, that is not <button> nor <input> should have inner <span class="inner"> element
|
||||
for the button label.
|
||||
|
||||
- Every iframe need to be wrapped by an element with `iframe-wrapper` class. It is
|
||||
required to have proper scrolling on mobile devices.
|
||||
|
||||
- Special attributes:
|
||||
- `data-hidden`: Makes a menu entry/button hidden on specified screen sizes.
|
||||
Can be used for example for functionality not implemented or that has no sense
|
||||
on phones or touch devices. Contains a comma-separated list following values:
|
||||
`large` (width > 1200px), `big` (width > 768px), `small` (width =< 768px),
|
||||
`phone` (width =< 480px).
|
||||
|
||||
- `data-content-button`: Makes the action button with this attribute to be copied
|
||||
to the content frame header on small/phone screens.
|
||||
|
||||
- Special URLs:
|
||||
In phone mode we display Prev/Next navigation buttons below the content preview
|
||||
frame. We do this e.g. for mail preview or contact preview. Plugins should use
|
||||
_action=add* or _action=create* or _nav=hide in the frame URL if the navigation
|
||||
should be hidden, which is the case when you create a content object.
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 935 B |
Binary file not shown.
|
After Width: | Height: | Size: 831 B |
@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="512px" height="512px" viewBox="0 0 16 16">
|
||||
<path fill="#888888" d="M6.7 16l9.3-9.3v-1.4l-10.7 10.7z"/>
|
||||
<path fill="#888888" d="M9.7 16l6.3-6.3v-1.4l-7.7 7.7z"/>
|
||||
<path fill="#888888" d="M12.7 16l3.3-3.3v-1.4l-4.7 4.7z"/>
|
||||
<path fill="#888888" d="M15.7 16l0.3-0.3v-1.4l-1.7 1.7z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 390 B |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
@ -0,0 +1,11 @@
|
||||
{
|
||||
"name": "Elastic",
|
||||
"author": "Aleksander Machniak",
|
||||
"license": "Creative Commons Attribution-ShareAlike",
|
||||
"license-url": "http://creativecommons.org/licenses/by-sa/3.0/",
|
||||
"config": {
|
||||
"layout": "widescreen",
|
||||
"jquery_ui_colors_theme": "bootstrap",
|
||||
"embed_css_location": "/styles/embed.css"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,198 @@
|
||||
/**
|
||||
* 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: @color-black;
|
||||
@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-sidebar-background: #fff;
|
||||
@color-layout-list-background: #fff;
|
||||
@color-layout-content-background: #fff;
|
||||
@color-layout-header-background: #fff;
|
||||
|
||||
|
||||
// Task menu
|
||||
@color-taskmenu-background: #414e54;
|
||||
@color-taskmenu-button: #fff;
|
||||
@color-taskmenu-button-selected: @color-taskmenu-button;
|
||||
@color-taskmenu-button-action: @color-taskmenu-button;
|
||||
@color-taskmenu-button-special: @color-taskmenu-button;
|
||||
|
||||
@color-taskmenu-button-selected-background: lighten(@color-taskmenu-background, 10%);
|
||||
@color-taskmenu-button-action-background: @color-main;
|
||||
@color-taskmenu-button-special-background: @color-taskmenu-background;
|
||||
|
||||
@color-taskmenu-button-selected-hover: #fff;
|
||||
@color-taskmenu-button-action-hover: #fff;
|
||||
@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: lighten(@color-taskmenu-button-action-background, 10%);
|
||||
@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, 94%);
|
||||
@color-list-flagged: @color-error;
|
||||
@color-list-deleted: @color-black-shade-border;
|
||||
@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-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-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-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-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%);
|
||||
|
||||
@ -0,0 +1,106 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
/* Style for embedded inline warning */
|
||||
|
||||
@import (reference) "variables";
|
||||
@import (reference) "mixins";
|
||||
|
||||
@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-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-regular.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
|
||||
url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-regular.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
|
||||
}
|
||||
|
||||
.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-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;
|
||||
}
|
||||
@ -0,0 +1,803 @@
|
||||
// Variables
|
||||
// --------------------------
|
||||
|
||||
@fa-font-path: "../webfonts";
|
||||
@fa-font-size-base: 16px;
|
||||
@fa-line-height-base: 1;
|
||||
@fa-css-prefix: fa;
|
||||
@fa-version: "5.0.4";
|
||||
@fa-border-color: #eee;
|
||||
@fa-inverse: #fff;
|
||||
@fa-li-width: 2em;
|
||||
|
||||
@fa-var-500px: "\f26e";
|
||||
@fa-var-accessible-icon: "\f368";
|
||||
@fa-var-accusoft: "\f369";
|
||||
@fa-var-address-book: "\f2b9";
|
||||
@fa-var-address-card: "\f2bb";
|
||||
@fa-var-adjust: "\f042";
|
||||
@fa-var-adn: "\f170";
|
||||
@fa-var-adversal: "\f36a";
|
||||
@fa-var-affiliatetheme: "\f36b";
|
||||
@fa-var-algolia: "\f36c";
|
||||
@fa-var-align-center: "\f037";
|
||||
@fa-var-align-justify: "\f039";
|
||||
@fa-var-align-left: "\f036";
|
||||
@fa-var-align-right: "\f038";
|
||||
@fa-var-amazon: "\f270";
|
||||
@fa-var-amazon-pay: "\f42c";
|
||||
@fa-var-ambulance: "\f0f9";
|
||||
@fa-var-american-sign-language-interpreting: "\f2a3";
|
||||
@fa-var-amilia: "\f36d";
|
||||
@fa-var-anchor: "\f13d";
|
||||
@fa-var-android: "\f17b";
|
||||
@fa-var-angellist: "\f209";
|
||||
@fa-var-angle-double-down: "\f103";
|
||||
@fa-var-angle-double-left: "\f100";
|
||||
@fa-var-angle-double-right: "\f101";
|
||||
@fa-var-angle-double-up: "\f102";
|
||||
@fa-var-angle-down: "\f107";
|
||||
@fa-var-angle-left: "\f104";
|
||||
@fa-var-angle-right: "\f105";
|
||||
@fa-var-angle-up: "\f106";
|
||||
@fa-var-angrycreative: "\f36e";
|
||||
@fa-var-angular: "\f420";
|
||||
@fa-var-app-store: "\f36f";
|
||||
@fa-var-app-store-ios: "\f370";
|
||||
@fa-var-apper: "\f371";
|
||||
@fa-var-apple: "\f179";
|
||||
@fa-var-apple-pay: "\f415";
|
||||
@fa-var-archive: "\f187";
|
||||
@fa-var-arrow-alt-circle-down: "\f358";
|
||||
@fa-var-arrow-alt-circle-left: "\f359";
|
||||
@fa-var-arrow-alt-circle-right: "\f35a";
|
||||
@fa-var-arrow-alt-circle-up: "\f35b";
|
||||
@fa-var-arrow-circle-down: "\f0ab";
|
||||
@fa-var-arrow-circle-left: "\f0a8";
|
||||
@fa-var-arrow-circle-right: "\f0a9";
|
||||
@fa-var-arrow-circle-up: "\f0aa";
|
||||
@fa-var-arrow-down: "\f063";
|
||||
@fa-var-arrow-left: "\f060";
|
||||
@fa-var-arrow-right: "\f061";
|
||||
@fa-var-arrow-up: "\f062";
|
||||
@fa-var-arrows-alt: "\f0b2";
|
||||
@fa-var-arrows-alt-h: "\f337";
|
||||
@fa-var-arrows-alt-v: "\f338";
|
||||
@fa-var-assistive-listening-systems: "\f2a2";
|
||||
@fa-var-asterisk: "\f069";
|
||||
@fa-var-asymmetrik: "\f372";
|
||||
@fa-var-at: "\f1fa";
|
||||
@fa-var-audible: "\f373";
|
||||
@fa-var-audio-description: "\f29e";
|
||||
@fa-var-autoprefixer: "\f41c";
|
||||
@fa-var-avianex: "\f374";
|
||||
@fa-var-aviato: "\f421";
|
||||
@fa-var-aws: "\f375";
|
||||
@fa-var-backward: "\f04a";
|
||||
@fa-var-balance-scale: "\f24e";
|
||||
@fa-var-ban: "\f05e";
|
||||
@fa-var-bandcamp: "\f2d5";
|
||||
@fa-var-barcode: "\f02a";
|
||||
@fa-var-bars: "\f0c9";
|
||||
@fa-var-bath: "\f2cd";
|
||||
@fa-var-battery-empty: "\f244";
|
||||
@fa-var-battery-full: "\f240";
|
||||
@fa-var-battery-half: "\f242";
|
||||
@fa-var-battery-quarter: "\f243";
|
||||
@fa-var-battery-three-quarters: "\f241";
|
||||
@fa-var-bed: "\f236";
|
||||
@fa-var-beer: "\f0fc";
|
||||
@fa-var-behance: "\f1b4";
|
||||
@fa-var-behance-square: "\f1b5";
|
||||
@fa-var-bell: "\f0f3";
|
||||
@fa-var-bell-slash: "\f1f6";
|
||||
@fa-var-bicycle: "\f206";
|
||||
@fa-var-bimobject: "\f378";
|
||||
@fa-var-binoculars: "\f1e5";
|
||||
@fa-var-birthday-cake: "\f1fd";
|
||||
@fa-var-bitbucket: "\f171";
|
||||
@fa-var-bitcoin: "\f379";
|
||||
@fa-var-bity: "\f37a";
|
||||
@fa-var-black-tie: "\f27e";
|
||||
@fa-var-blackberry: "\f37b";
|
||||
@fa-var-blind: "\f29d";
|
||||
@fa-var-blogger: "\f37c";
|
||||
@fa-var-blogger-b: "\f37d";
|
||||
@fa-var-bluetooth: "\f293";
|
||||
@fa-var-bluetooth-b: "\f294";
|
||||
@fa-var-bold: "\f032";
|
||||
@fa-var-bolt: "\f0e7";
|
||||
@fa-var-bomb: "\f1e2";
|
||||
@fa-var-book: "\f02d";
|
||||
@fa-var-bookmark: "\f02e";
|
||||
@fa-var-braille: "\f2a1";
|
||||
@fa-var-briefcase: "\f0b1";
|
||||
@fa-var-btc: "\f15a";
|
||||
@fa-var-bug: "\f188";
|
||||
@fa-var-building: "\f1ad";
|
||||
@fa-var-bullhorn: "\f0a1";
|
||||
@fa-var-bullseye: "\f140";
|
||||
@fa-var-buromobelexperte: "\f37f";
|
||||
@fa-var-bus: "\f207";
|
||||
@fa-var-buysellads: "\f20d";
|
||||
@fa-var-calculator: "\f1ec";
|
||||
@fa-var-calendar: "\f133";
|
||||
@fa-var-calendar-alt: "\f073";
|
||||
@fa-var-calendar-check: "\f274";
|
||||
@fa-var-calendar-minus: "\f272";
|
||||
@fa-var-calendar-plus: "\f271";
|
||||
@fa-var-calendar-times: "\f273";
|
||||
@fa-var-camera: "\f030";
|
||||
@fa-var-camera-retro: "\f083";
|
||||
@fa-var-car: "\f1b9";
|
||||
@fa-var-caret-down: "\f0d7";
|
||||
@fa-var-caret-left: "\f0d9";
|
||||
@fa-var-caret-right: "\f0da";
|
||||
@fa-var-caret-square-down: "\f150";
|
||||
@fa-var-caret-square-left: "\f191";
|
||||
@fa-var-caret-square-right: "\f152";
|
||||
@fa-var-caret-square-up: "\f151";
|
||||
@fa-var-caret-up: "\f0d8";
|
||||
@fa-var-cart-arrow-down: "\f218";
|
||||
@fa-var-cart-plus: "\f217";
|
||||
@fa-var-cc-amazon-pay: "\f42d";
|
||||
@fa-var-cc-amex: "\f1f3";
|
||||
@fa-var-cc-apple-pay: "\f416";
|
||||
@fa-var-cc-diners-club: "\f24c";
|
||||
@fa-var-cc-discover: "\f1f2";
|
||||
@fa-var-cc-jcb: "\f24b";
|
||||
@fa-var-cc-mastercard: "\f1f1";
|
||||
@fa-var-cc-paypal: "\f1f4";
|
||||
@fa-var-cc-stripe: "\f1f5";
|
||||
@fa-var-cc-visa: "\f1f0";
|
||||
@fa-var-centercode: "\f380";
|
||||
@fa-var-certificate: "\f0a3";
|
||||
@fa-var-chart-area: "\f1fe";
|
||||
@fa-var-chart-bar: "\f080";
|
||||
@fa-var-chart-line: "\f201";
|
||||
@fa-var-chart-pie: "\f200";
|
||||
@fa-var-check: "\f00c";
|
||||
@fa-var-check-circle: "\f058";
|
||||
@fa-var-check-square: "\f14a";
|
||||
@fa-var-chevron-circle-down: "\f13a";
|
||||
@fa-var-chevron-circle-left: "\f137";
|
||||
@fa-var-chevron-circle-right: "\f138";
|
||||
@fa-var-chevron-circle-up: "\f139";
|
||||
@fa-var-chevron-down: "\f078";
|
||||
@fa-var-chevron-left: "\f053";
|
||||
@fa-var-chevron-right: "\f054";
|
||||
@fa-var-chevron-up: "\f077";
|
||||
@fa-var-child: "\f1ae";
|
||||
@fa-var-chrome: "\f268";
|
||||
@fa-var-circle: "\f111";
|
||||
@fa-var-circle-notch: "\f1ce";
|
||||
@fa-var-clipboard: "\f328";
|
||||
@fa-var-clock: "\f017";
|
||||
@fa-var-clone: "\f24d";
|
||||
@fa-var-closed-captioning: "\f20a";
|
||||
@fa-var-cloud: "\f0c2";
|
||||
@fa-var-cloud-download-alt: "\f381";
|
||||
@fa-var-cloud-upload-alt: "\f382";
|
||||
@fa-var-cloudscale: "\f383";
|
||||
@fa-var-cloudsmith: "\f384";
|
||||
@fa-var-cloudversify: "\f385";
|
||||
@fa-var-code: "\f121";
|
||||
@fa-var-code-branch: "\f126";
|
||||
@fa-var-codepen: "\f1cb";
|
||||
@fa-var-codiepie: "\f284";
|
||||
@fa-var-coffee: "\f0f4";
|
||||
@fa-var-cog: "\f013";
|
||||
@fa-var-cogs: "\f085";
|
||||
@fa-var-columns: "\f0db";
|
||||
@fa-var-comment: "\f075";
|
||||
@fa-var-comment-alt: "\f27a";
|
||||
@fa-var-comments: "\f086";
|
||||
@fa-var-compass: "\f14e";
|
||||
@fa-var-compress: "\f066";
|
||||
@fa-var-connectdevelop: "\f20e";
|
||||
@fa-var-contao: "\f26d";
|
||||
@fa-var-copy: "\f0c5";
|
||||
@fa-var-copyright: "\f1f9";
|
||||
@fa-var-cpanel: "\f388";
|
||||
@fa-var-creative-commons: "\f25e";
|
||||
@fa-var-credit-card: "\f09d";
|
||||
@fa-var-crop: "\f125";
|
||||
@fa-var-crosshairs: "\f05b";
|
||||
@fa-var-css3: "\f13c";
|
||||
@fa-var-css3-alt: "\f38b";
|
||||
@fa-var-cube: "\f1b2";
|
||||
@fa-var-cubes: "\f1b3";
|
||||
@fa-var-cut: "\f0c4";
|
||||
@fa-var-cuttlefish: "\f38c";
|
||||
@fa-var-d-and-d: "\f38d";
|
||||
@fa-var-dashcube: "\f210";
|
||||
@fa-var-database: "\f1c0";
|
||||
@fa-var-deaf: "\f2a4";
|
||||
@fa-var-delicious: "\f1a5";
|
||||
@fa-var-deploydog: "\f38e";
|
||||
@fa-var-deskpro: "\f38f";
|
||||
@fa-var-desktop: "\f108";
|
||||
@fa-var-deviantart: "\f1bd";
|
||||
@fa-var-digg: "\f1a6";
|
||||
@fa-var-digital-ocean: "\f391";
|
||||
@fa-var-discord: "\f392";
|
||||
@fa-var-discourse: "\f393";
|
||||
@fa-var-dochub: "\f394";
|
||||
@fa-var-docker: "\f395";
|
||||
@fa-var-dollar-sign: "\f155";
|
||||
@fa-var-dot-circle: "\f192";
|
||||
@fa-var-download: "\f019";
|
||||
@fa-var-draft2digital: "\f396";
|
||||
@fa-var-dribbble: "\f17d";
|
||||
@fa-var-dribbble-square: "\f397";
|
||||
@fa-var-dropbox: "\f16b";
|
||||
@fa-var-drupal: "\f1a9";
|
||||
@fa-var-dyalog: "\f399";
|
||||
@fa-var-earlybirds: "\f39a";
|
||||
@fa-var-edge: "\f282";
|
||||
@fa-var-edit: "\f044";
|
||||
@fa-var-eject: "\f052";
|
||||
@fa-var-elementor: "\f430";
|
||||
@fa-var-ellipsis-h: "\f141";
|
||||
@fa-var-ellipsis-v: "\f142";
|
||||
@fa-var-ember: "\f423";
|
||||
@fa-var-empire: "\f1d1";
|
||||
@fa-var-envelope: "\f0e0";
|
||||
@fa-var-envelope-open: "\f2b6";
|
||||
@fa-var-envelope-square: "\f199";
|
||||
@fa-var-envira: "\f299";
|
||||
@fa-var-eraser: "\f12d";
|
||||
@fa-var-erlang: "\f39d";
|
||||
@fa-var-ethereum: "\f42e";
|
||||
@fa-var-etsy: "\f2d7";
|
||||
@fa-var-euro-sign: "\f153";
|
||||
@fa-var-exchange-alt: "\f362";
|
||||
@fa-var-exclamation: "\f12a";
|
||||
@fa-var-exclamation-circle: "\f06a";
|
||||
@fa-var-exclamation-triangle: "\f071";
|
||||
@fa-var-expand: "\f065";
|
||||
@fa-var-expand-arrows-alt: "\f31e";
|
||||
@fa-var-expeditedssl: "\f23e";
|
||||
@fa-var-external-link-alt: "\f35d";
|
||||
@fa-var-external-link-square-alt: "\f360";
|
||||
@fa-var-eye: "\f06e";
|
||||
@fa-var-eye-dropper: "\f1fb";
|
||||
@fa-var-eye-slash: "\f070";
|
||||
@fa-var-facebook: "\f09a";
|
||||
@fa-var-facebook-f: "\f39e";
|
||||
@fa-var-facebook-messenger: "\f39f";
|
||||
@fa-var-facebook-square: "\f082";
|
||||
@fa-var-fast-backward: "\f049";
|
||||
@fa-var-fast-forward: "\f050";
|
||||
@fa-var-fax: "\f1ac";
|
||||
@fa-var-female: "\f182";
|
||||
@fa-var-fighter-jet: "\f0fb";
|
||||
@fa-var-file: "\f15b";
|
||||
@fa-var-file-alt: "\f15c";
|
||||
@fa-var-file-archive: "\f1c6";
|
||||
@fa-var-file-audio: "\f1c7";
|
||||
@fa-var-file-code: "\f1c9";
|
||||
@fa-var-file-excel: "\f1c3";
|
||||
@fa-var-file-image: "\f1c5";
|
||||
@fa-var-file-pdf: "\f1c1";
|
||||
@fa-var-file-powerpoint: "\f1c4";
|
||||
@fa-var-file-video: "\f1c8";
|
||||
@fa-var-file-word: "\f1c2";
|
||||
@fa-var-film: "\f008";
|
||||
@fa-var-filter: "\f0b0";
|
||||
@fa-var-fire: "\f06d";
|
||||
@fa-var-fire-extinguisher: "\f134";
|
||||
@fa-var-firefox: "\f269";
|
||||
@fa-var-first-order: "\f2b0";
|
||||
@fa-var-firstdraft: "\f3a1";
|
||||
@fa-var-flag: "\f024";
|
||||
@fa-var-flag-checkered: "\f11e";
|
||||
@fa-var-flask: "\f0c3";
|
||||
@fa-var-flickr: "\f16e";
|
||||
@fa-var-fly: "\f417";
|
||||
@fa-var-folder: "\f07b";
|
||||
@fa-var-folder-open: "\f07c";
|
||||
@fa-var-font: "\f031";
|
||||
@fa-var-font-awesome: "\f2b4";
|
||||
@fa-var-font-awesome-alt: "\f35c";
|
||||
@fa-var-font-awesome-flag: "\f425";
|
||||
@fa-var-fonticons: "\f280";
|
||||
@fa-var-fonticons-fi: "\f3a2";
|
||||
@fa-var-fort-awesome: "\f286";
|
||||
@fa-var-fort-awesome-alt: "\f3a3";
|
||||
@fa-var-forumbee: "\f211";
|
||||
@fa-var-forward: "\f04e";
|
||||
@fa-var-foursquare: "\f180";
|
||||
@fa-var-free-code-camp: "\f2c5";
|
||||
@fa-var-freebsd: "\f3a4";
|
||||
@fa-var-frown: "\f119";
|
||||
@fa-var-futbol: "\f1e3";
|
||||
@fa-var-gamepad: "\f11b";
|
||||
@fa-var-gavel: "\f0e3";
|
||||
@fa-var-gem: "\f3a5";
|
||||
@fa-var-genderless: "\f22d";
|
||||
@fa-var-get-pocket: "\f265";
|
||||
@fa-var-gg: "\f260";
|
||||
@fa-var-gg-circle: "\f261";
|
||||
@fa-var-gift: "\f06b";
|
||||
@fa-var-git: "\f1d3";
|
||||
@fa-var-git-square: "\f1d2";
|
||||
@fa-var-github: "\f09b";
|
||||
@fa-var-github-alt: "\f113";
|
||||
@fa-var-github-square: "\f092";
|
||||
@fa-var-gitkraken: "\f3a6";
|
||||
@fa-var-gitlab: "\f296";
|
||||
@fa-var-gitter: "\f426";
|
||||
@fa-var-glass-martini: "\f000";
|
||||
@fa-var-glide: "\f2a5";
|
||||
@fa-var-glide-g: "\f2a6";
|
||||
@fa-var-globe: "\f0ac";
|
||||
@fa-var-gofore: "\f3a7";
|
||||
@fa-var-goodreads: "\f3a8";
|
||||
@fa-var-goodreads-g: "\f3a9";
|
||||
@fa-var-google: "\f1a0";
|
||||
@fa-var-google-drive: "\f3aa";
|
||||
@fa-var-google-play: "\f3ab";
|
||||
@fa-var-google-plus: "\f2b3";
|
||||
@fa-var-google-plus-g: "\f0d5";
|
||||
@fa-var-google-plus-square: "\f0d4";
|
||||
@fa-var-google-wallet: "\f1ee";
|
||||
@fa-var-graduation-cap: "\f19d";
|
||||
@fa-var-gratipay: "\f184";
|
||||
@fa-var-grav: "\f2d6";
|
||||
@fa-var-gripfire: "\f3ac";
|
||||
@fa-var-grunt: "\f3ad";
|
||||
@fa-var-gulp: "\f3ae";
|
||||
@fa-var-h-square: "\f0fd";
|
||||
@fa-var-hacker-news: "\f1d4";
|
||||
@fa-var-hacker-news-square: "\f3af";
|
||||
@fa-var-hand-lizard: "\f258";
|
||||
@fa-var-hand-paper: "\f256";
|
||||
@fa-var-hand-peace: "\f25b";
|
||||
@fa-var-hand-point-down: "\f0a7";
|
||||
@fa-var-hand-point-left: "\f0a5";
|
||||
@fa-var-hand-point-right: "\f0a4";
|
||||
@fa-var-hand-point-up: "\f0a6";
|
||||
@fa-var-hand-pointer: "\f25a";
|
||||
@fa-var-hand-rock: "\f255";
|
||||
@fa-var-hand-scissors: "\f257";
|
||||
@fa-var-hand-spock: "\f259";
|
||||
@fa-var-handshake: "\f2b5";
|
||||
@fa-var-hashtag: "\f292";
|
||||
@fa-var-hdd: "\f0a0";
|
||||
@fa-var-heading: "\f1dc";
|
||||
@fa-var-headphones: "\f025";
|
||||
@fa-var-heart: "\f004";
|
||||
@fa-var-heartbeat: "\f21e";
|
||||
@fa-var-hire-a-helper: "\f3b0";
|
||||
@fa-var-history: "\f1da";
|
||||
@fa-var-home: "\f015";
|
||||
@fa-var-hooli: "\f427";
|
||||
@fa-var-hospital: "\f0f8";
|
||||
@fa-var-hotjar: "\f3b1";
|
||||
@fa-var-hourglass: "\f254";
|
||||
@fa-var-hourglass-end: "\f253";
|
||||
@fa-var-hourglass-half: "\f252";
|
||||
@fa-var-hourglass-start: "\f251";
|
||||
@fa-var-houzz: "\f27c";
|
||||
@fa-var-html5: "\f13b";
|
||||
@fa-var-hubspot: "\f3b2";
|
||||
@fa-var-i-cursor: "\f246";
|
||||
@fa-var-id-badge: "\f2c1";
|
||||
@fa-var-id-card: "\f2c2";
|
||||
@fa-var-image: "\f03e";
|
||||
@fa-var-images: "\f302";
|
||||
@fa-var-imdb: "\f2d8";
|
||||
@fa-var-inbox: "\f01c";
|
||||
@fa-var-indent: "\f03c";
|
||||
@fa-var-industry: "\f275";
|
||||
@fa-var-info: "\f129";
|
||||
@fa-var-info-circle: "\f05a";
|
||||
@fa-var-instagram: "\f16d";
|
||||
@fa-var-internet-explorer: "\f26b";
|
||||
@fa-var-ioxhost: "\f208";
|
||||
@fa-var-italic: "\f033";
|
||||
@fa-var-itunes: "\f3b4";
|
||||
@fa-var-itunes-note: "\f3b5";
|
||||
@fa-var-jenkins: "\f3b6";
|
||||
@fa-var-joget: "\f3b7";
|
||||
@fa-var-joomla: "\f1aa";
|
||||
@fa-var-js: "\f3b8";
|
||||
@fa-var-js-square: "\f3b9";
|
||||
@fa-var-jsfiddle: "\f1cc";
|
||||
@fa-var-key: "\f084";
|
||||
@fa-var-keyboard: "\f11c";
|
||||
@fa-var-keycdn: "\f3ba";
|
||||
@fa-var-kickstarter: "\f3bb";
|
||||
@fa-var-kickstarter-k: "\f3bc";
|
||||
@fa-var-korvue: "\f42f";
|
||||
@fa-var-language: "\f1ab";
|
||||
@fa-var-laptop: "\f109";
|
||||
@fa-var-laravel: "\f3bd";
|
||||
@fa-var-lastfm: "\f202";
|
||||
@fa-var-lastfm-square: "\f203";
|
||||
@fa-var-leaf: "\f06c";
|
||||
@fa-var-leanpub: "\f212";
|
||||
@fa-var-lemon: "\f094";
|
||||
@fa-var-less: "\f41d";
|
||||
@fa-var-level-down-alt: "\f3be";
|
||||
@fa-var-level-up-alt: "\f3bf";
|
||||
@fa-var-life-ring: "\f1cd";
|
||||
@fa-var-lightbulb: "\f0eb";
|
||||
@fa-var-line: "\f3c0";
|
||||
@fa-var-link: "\f0c1";
|
||||
@fa-var-linkedin: "\f08c";
|
||||
@fa-var-linkedin-in: "\f0e1";
|
||||
@fa-var-linode: "\f2b8";
|
||||
@fa-var-linux: "\f17c";
|
||||
@fa-var-lira-sign: "\f195";
|
||||
@fa-var-list: "\f03a";
|
||||
@fa-var-list-alt: "\f022";
|
||||
@fa-var-list-ol: "\f0cb";
|
||||
@fa-var-list-ul: "\f0ca";
|
||||
@fa-var-location-arrow: "\f124";
|
||||
@fa-var-lock: "\f023";
|
||||
@fa-var-lock-open: "\f3c1";
|
||||
@fa-var-long-arrow-alt-down: "\f309";
|
||||
@fa-var-long-arrow-alt-left: "\f30a";
|
||||
@fa-var-long-arrow-alt-right: "\f30b";
|
||||
@fa-var-long-arrow-alt-up: "\f30c";
|
||||
@fa-var-low-vision: "\f2a8";
|
||||
@fa-var-lyft: "\f3c3";
|
||||
@fa-var-magento: "\f3c4";
|
||||
@fa-var-magic: "\f0d0";
|
||||
@fa-var-magnet: "\f076";
|
||||
@fa-var-male: "\f183";
|
||||
@fa-var-map: "\f279";
|
||||
@fa-var-map-marker: "\f041";
|
||||
@fa-var-map-marker-alt: "\f3c5";
|
||||
@fa-var-map-pin: "\f276";
|
||||
@fa-var-map-signs: "\f277";
|
||||
@fa-var-mars: "\f222";
|
||||
@fa-var-mars-double: "\f227";
|
||||
@fa-var-mars-stroke: "\f229";
|
||||
@fa-var-mars-stroke-h: "\f22b";
|
||||
@fa-var-mars-stroke-v: "\f22a";
|
||||
@fa-var-maxcdn: "\f136";
|
||||
@fa-var-medapps: "\f3c6";
|
||||
@fa-var-medium: "\f23a";
|
||||
@fa-var-medium-m: "\f3c7";
|
||||
@fa-var-medkit: "\f0fa";
|
||||
@fa-var-medrt: "\f3c8";
|
||||
@fa-var-meetup: "\f2e0";
|
||||
@fa-var-meh: "\f11a";
|
||||
@fa-var-mercury: "\f223";
|
||||
@fa-var-microchip: "\f2db";
|
||||
@fa-var-microphone: "\f130";
|
||||
@fa-var-microphone-slash: "\f131";
|
||||
@fa-var-microsoft: "\f3ca";
|
||||
@fa-var-minus: "\f068";
|
||||
@fa-var-minus-circle: "\f056";
|
||||
@fa-var-minus-square: "\f146";
|
||||
@fa-var-mix: "\f3cb";
|
||||
@fa-var-mixcloud: "\f289";
|
||||
@fa-var-mizuni: "\f3cc";
|
||||
@fa-var-mobile: "\f10b";
|
||||
@fa-var-mobile-alt: "\f3cd";
|
||||
@fa-var-modx: "\f285";
|
||||
@fa-var-monero: "\f3d0";
|
||||
@fa-var-money-bill-alt: "\f3d1";
|
||||
@fa-var-moon: "\f186";
|
||||
@fa-var-motorcycle: "\f21c";
|
||||
@fa-var-mouse-pointer: "\f245";
|
||||
@fa-var-music: "\f001";
|
||||
@fa-var-napster: "\f3d2";
|
||||
@fa-var-neuter: "\f22c";
|
||||
@fa-var-newspaper: "\f1ea";
|
||||
@fa-var-nintendo-switch: "\f418";
|
||||
@fa-var-node: "\f419";
|
||||
@fa-var-node-js: "\f3d3";
|
||||
@fa-var-npm: "\f3d4";
|
||||
@fa-var-ns8: "\f3d5";
|
||||
@fa-var-nutritionix: "\f3d6";
|
||||
@fa-var-object-group: "\f247";
|
||||
@fa-var-object-ungroup: "\f248";
|
||||
@fa-var-odnoklassniki: "\f263";
|
||||
@fa-var-odnoklassniki-square: "\f264";
|
||||
@fa-var-opencart: "\f23d";
|
||||
@fa-var-openid: "\f19b";
|
||||
@fa-var-opera: "\f26a";
|
||||
@fa-var-optin-monster: "\f23c";
|
||||
@fa-var-osi: "\f41a";
|
||||
@fa-var-outdent: "\f03b";
|
||||
@fa-var-page4: "\f3d7";
|
||||
@fa-var-pagelines: "\f18c";
|
||||
@fa-var-paint-brush: "\f1fc";
|
||||
@fa-var-palfed: "\f3d8";
|
||||
@fa-var-paper-plane: "\f1d8";
|
||||
@fa-var-paperclip: "\f0c6";
|
||||
@fa-var-paragraph: "\f1dd";
|
||||
@fa-var-paste: "\f0ea";
|
||||
@fa-var-patreon: "\f3d9";
|
||||
@fa-var-pause: "\f04c";
|
||||
@fa-var-pause-circle: "\f28b";
|
||||
@fa-var-paw: "\f1b0";
|
||||
@fa-var-paypal: "\f1ed";
|
||||
@fa-var-pen-square: "\f14b";
|
||||
@fa-var-pencil-alt: "\f303";
|
||||
@fa-var-percent: "\f295";
|
||||
@fa-var-periscope: "\f3da";
|
||||
@fa-var-phabricator: "\f3db";
|
||||
@fa-var-phoenix-framework: "\f3dc";
|
||||
@fa-var-phone: "\f095";
|
||||
@fa-var-phone-square: "\f098";
|
||||
@fa-var-phone-volume: "\f2a0";
|
||||
@fa-var-pied-piper: "\f2ae";
|
||||
@fa-var-pied-piper-alt: "\f1a8";
|
||||
@fa-var-pied-piper-pp: "\f1a7";
|
||||
@fa-var-pinterest: "\f0d2";
|
||||
@fa-var-pinterest-p: "\f231";
|
||||
@fa-var-pinterest-square: "\f0d3";
|
||||
@fa-var-plane: "\f072";
|
||||
@fa-var-play: "\f04b";
|
||||
@fa-var-play-circle: "\f144";
|
||||
@fa-var-playstation: "\f3df";
|
||||
@fa-var-plug: "\f1e6";
|
||||
@fa-var-plus: "\f067";
|
||||
@fa-var-plus-circle: "\f055";
|
||||
@fa-var-plus-square: "\f0fe";
|
||||
@fa-var-podcast: "\f2ce";
|
||||
@fa-var-pound-sign: "\f154";
|
||||
@fa-var-power-off: "\f011";
|
||||
@fa-var-print: "\f02f";
|
||||
@fa-var-product-hunt: "\f288";
|
||||
@fa-var-pushed: "\f3e1";
|
||||
@fa-var-puzzle-piece: "\f12e";
|
||||
@fa-var-python: "\f3e2";
|
||||
@fa-var-qq: "\f1d6";
|
||||
@fa-var-qrcode: "\f029";
|
||||
@fa-var-question: "\f128";
|
||||
@fa-var-question-circle: "\f059";
|
||||
@fa-var-quora: "\f2c4";
|
||||
@fa-var-quote-left: "\f10d";
|
||||
@fa-var-quote-right: "\f10e";
|
||||
@fa-var-random: "\f074";
|
||||
@fa-var-ravelry: "\f2d9";
|
||||
@fa-var-react: "\f41b";
|
||||
@fa-var-rebel: "\f1d0";
|
||||
@fa-var-recycle: "\f1b8";
|
||||
@fa-var-red-river: "\f3e3";
|
||||
@fa-var-reddit: "\f1a1";
|
||||
@fa-var-reddit-alien: "\f281";
|
||||
@fa-var-reddit-square: "\f1a2";
|
||||
@fa-var-redo: "\f01e";
|
||||
@fa-var-redo-alt: "\f2f9";
|
||||
@fa-var-registered: "\f25d";
|
||||
@fa-var-rendact: "\f3e4";
|
||||
@fa-var-renren: "\f18b";
|
||||
@fa-var-reply: "\f3e5";
|
||||
@fa-var-reply-all: "\f122";
|
||||
@fa-var-replyd: "\f3e6";
|
||||
@fa-var-resolving: "\f3e7";
|
||||
@fa-var-retweet: "\f079";
|
||||
@fa-var-road: "\f018";
|
||||
@fa-var-rocket: "\f135";
|
||||
@fa-var-rocketchat: "\f3e8";
|
||||
@fa-var-rockrms: "\f3e9";
|
||||
@fa-var-rss: "\f09e";
|
||||
@fa-var-rss-square: "\f143";
|
||||
@fa-var-ruble-sign: "\f158";
|
||||
@fa-var-rupee-sign: "\f156";
|
||||
@fa-var-safari: "\f267";
|
||||
@fa-var-sass: "\f41e";
|
||||
@fa-var-save: "\f0c7";
|
||||
@fa-var-schlix: "\f3ea";
|
||||
@fa-var-scribd: "\f28a";
|
||||
@fa-var-search: "\f002";
|
||||
@fa-var-search-minus: "\f010";
|
||||
@fa-var-search-plus: "\f00e";
|
||||
@fa-var-searchengin: "\f3eb";
|
||||
@fa-var-sellcast: "\f2da";
|
||||
@fa-var-sellsy: "\f213";
|
||||
@fa-var-server: "\f233";
|
||||
@fa-var-servicestack: "\f3ec";
|
||||
@fa-var-share: "\f064";
|
||||
@fa-var-share-alt: "\f1e0";
|
||||
@fa-var-share-alt-square: "\f1e1";
|
||||
@fa-var-share-square: "\f14d";
|
||||
@fa-var-shekel-sign: "\f20b";
|
||||
@fa-var-shield-alt: "\f3ed";
|
||||
@fa-var-ship: "\f21a";
|
||||
@fa-var-shirtsinbulk: "\f214";
|
||||
@fa-var-shopping-bag: "\f290";
|
||||
@fa-var-shopping-basket: "\f291";
|
||||
@fa-var-shopping-cart: "\f07a";
|
||||
@fa-var-shower: "\f2cc";
|
||||
@fa-var-sign-in-alt: "\f2f6";
|
||||
@fa-var-sign-language: "\f2a7";
|
||||
@fa-var-sign-out-alt: "\f2f5";
|
||||
@fa-var-signal: "\f012";
|
||||
@fa-var-simplybuilt: "\f215";
|
||||
@fa-var-sistrix: "\f3ee";
|
||||
@fa-var-sitemap: "\f0e8";
|
||||
@fa-var-skyatlas: "\f216";
|
||||
@fa-var-skype: "\f17e";
|
||||
@fa-var-slack: "\f198";
|
||||
@fa-var-slack-hash: "\f3ef";
|
||||
@fa-var-sliders-h: "\f1de";
|
||||
@fa-var-slideshare: "\f1e7";
|
||||
@fa-var-smile: "\f118";
|
||||
@fa-var-snapchat: "\f2ab";
|
||||
@fa-var-snapchat-ghost: "\f2ac";
|
||||
@fa-var-snapchat-square: "\f2ad";
|
||||
@fa-var-snowflake: "\f2dc";
|
||||
@fa-var-sort: "\f0dc";
|
||||
@fa-var-sort-alpha-down: "\f15d";
|
||||
@fa-var-sort-alpha-up: "\f15e";
|
||||
@fa-var-sort-amount-down: "\f160";
|
||||
@fa-var-sort-amount-up: "\f161";
|
||||
@fa-var-sort-down: "\f0dd";
|
||||
@fa-var-sort-numeric-down: "\f162";
|
||||
@fa-var-sort-numeric-up: "\f163";
|
||||
@fa-var-sort-up: "\f0de";
|
||||
@fa-var-soundcloud: "\f1be";
|
||||
@fa-var-space-shuttle: "\f197";
|
||||
@fa-var-speakap: "\f3f3";
|
||||
@fa-var-spinner: "\f110";
|
||||
@fa-var-spotify: "\f1bc";
|
||||
@fa-var-square: "\f0c8";
|
||||
@fa-var-stack-exchange: "\f18d";
|
||||
@fa-var-stack-overflow: "\f16c";
|
||||
@fa-var-star: "\f005";
|
||||
@fa-var-star-half: "\f089";
|
||||
@fa-var-staylinked: "\f3f5";
|
||||
@fa-var-steam: "\f1b6";
|
||||
@fa-var-steam-square: "\f1b7";
|
||||
@fa-var-steam-symbol: "\f3f6";
|
||||
@fa-var-step-backward: "\f048";
|
||||
@fa-var-step-forward: "\f051";
|
||||
@fa-var-stethoscope: "\f0f1";
|
||||
@fa-var-sticker-mule: "\f3f7";
|
||||
@fa-var-sticky-note: "\f249";
|
||||
@fa-var-stop: "\f04d";
|
||||
@fa-var-stop-circle: "\f28d";
|
||||
@fa-var-stopwatch: "\f2f2";
|
||||
@fa-var-strava: "\f428";
|
||||
@fa-var-street-view: "\f21d";
|
||||
@fa-var-strikethrough: "\f0cc";
|
||||
@fa-var-stripe: "\f429";
|
||||
@fa-var-stripe-s: "\f42a";
|
||||
@fa-var-studiovinari: "\f3f8";
|
||||
@fa-var-stumbleupon: "\f1a4";
|
||||
@fa-var-stumbleupon-circle: "\f1a3";
|
||||
@fa-var-subscript: "\f12c";
|
||||
@fa-var-subway: "\f239";
|
||||
@fa-var-suitcase: "\f0f2";
|
||||
@fa-var-sun: "\f185";
|
||||
@fa-var-superpowers: "\f2dd";
|
||||
@fa-var-superscript: "\f12b";
|
||||
@fa-var-supple: "\f3f9";
|
||||
@fa-var-sync: "\f021";
|
||||
@fa-var-sync-alt: "\f2f1";
|
||||
@fa-var-table: "\f0ce";
|
||||
@fa-var-tablet: "\f10a";
|
||||
@fa-var-tablet-alt: "\f3fa";
|
||||
@fa-var-tachometer-alt: "\f3fd";
|
||||
@fa-var-tag: "\f02b";
|
||||
@fa-var-tags: "\f02c";
|
||||
@fa-var-tasks: "\f0ae";
|
||||
@fa-var-taxi: "\f1ba";
|
||||
@fa-var-telegram: "\f2c6";
|
||||
@fa-var-telegram-plane: "\f3fe";
|
||||
@fa-var-tencent-weibo: "\f1d5";
|
||||
@fa-var-terminal: "\f120";
|
||||
@fa-var-text-height: "\f034";
|
||||
@fa-var-text-width: "\f035";
|
||||
@fa-var-th: "\f00a";
|
||||
@fa-var-th-large: "\f009";
|
||||
@fa-var-th-list: "\f00b";
|
||||
@fa-var-themeisle: "\f2b2";
|
||||
@fa-var-thermometer-empty: "\f2cb";
|
||||
@fa-var-thermometer-full: "\f2c7";
|
||||
@fa-var-thermometer-half: "\f2c9";
|
||||
@fa-var-thermometer-quarter: "\f2ca";
|
||||
@fa-var-thermometer-three-quarters: "\f2c8";
|
||||
@fa-var-thumbs-down: "\f165";
|
||||
@fa-var-thumbs-up: "\f164";
|
||||
@fa-var-thumbtack: "\f08d";
|
||||
@fa-var-ticket-alt: "\f3ff";
|
||||
@fa-var-times: "\f00d";
|
||||
@fa-var-times-circle: "\f057";
|
||||
@fa-var-tint: "\f043";
|
||||
@fa-var-toggle-off: "\f204";
|
||||
@fa-var-toggle-on: "\f205";
|
||||
@fa-var-trademark: "\f25c";
|
||||
@fa-var-train: "\f238";
|
||||
@fa-var-transgender: "\f224";
|
||||
@fa-var-transgender-alt: "\f225";
|
||||
@fa-var-trash: "\f1f8";
|
||||
@fa-var-trash-alt: "\f2ed";
|
||||
@fa-var-tree: "\f1bb";
|
||||
@fa-var-trello: "\f181";
|
||||
@fa-var-tripadvisor: "\f262";
|
||||
@fa-var-trophy: "\f091";
|
||||
@fa-var-truck: "\f0d1";
|
||||
@fa-var-tty: "\f1e4";
|
||||
@fa-var-tumblr: "\f173";
|
||||
@fa-var-tumblr-square: "\f174";
|
||||
@fa-var-tv: "\f26c";
|
||||
@fa-var-twitch: "\f1e8";
|
||||
@fa-var-twitter: "\f099";
|
||||
@fa-var-twitter-square: "\f081";
|
||||
@fa-var-typo3: "\f42b";
|
||||
@fa-var-uber: "\f402";
|
||||
@fa-var-uikit: "\f403";
|
||||
@fa-var-umbrella: "\f0e9";
|
||||
@fa-var-underline: "\f0cd";
|
||||
@fa-var-undo: "\f0e2";
|
||||
@fa-var-undo-alt: "\f2ea";
|
||||
@fa-var-uniregistry: "\f404";
|
||||
@fa-var-universal-access: "\f29a";
|
||||
@fa-var-university: "\f19c";
|
||||
@fa-var-unlink: "\f127";
|
||||
@fa-var-unlock: "\f09c";
|
||||
@fa-var-unlock-alt: "\f13e";
|
||||
@fa-var-untappd: "\f405";
|
||||
@fa-var-upload: "\f093";
|
||||
@fa-var-usb: "\f287";
|
||||
@fa-var-user: "\f007";
|
||||
@fa-var-user-circle: "\f2bd";
|
||||
@fa-var-user-md: "\f0f0";
|
||||
@fa-var-user-plus: "\f234";
|
||||
@fa-var-user-secret: "\f21b";
|
||||
@fa-var-user-times: "\f235";
|
||||
@fa-var-users: "\f0c0";
|
||||
@fa-var-ussunnah: "\f407";
|
||||
@fa-var-utensil-spoon: "\f2e5";
|
||||
@fa-var-utensils: "\f2e7";
|
||||
@fa-var-vaadin: "\f408";
|
||||
@fa-var-venus: "\f221";
|
||||
@fa-var-venus-double: "\f226";
|
||||
@fa-var-venus-mars: "\f228";
|
||||
@fa-var-viacoin: "\f237";
|
||||
@fa-var-viadeo: "\f2a9";
|
||||
@fa-var-viadeo-square: "\f2aa";
|
||||
@fa-var-viber: "\f409";
|
||||
@fa-var-video: "\f03d";
|
||||
@fa-var-vimeo: "\f40a";
|
||||
@fa-var-vimeo-square: "\f194";
|
||||
@fa-var-vimeo-v: "\f27d";
|
||||
@fa-var-vine: "\f1ca";
|
||||
@fa-var-vk: "\f189";
|
||||
@fa-var-vnv: "\f40b";
|
||||
@fa-var-volume-down: "\f027";
|
||||
@fa-var-volume-off: "\f026";
|
||||
@fa-var-volume-up: "\f028";
|
||||
@fa-var-vuejs: "\f41f";
|
||||
@fa-var-weibo: "\f18a";
|
||||
@fa-var-weixin: "\f1d7";
|
||||
@fa-var-whatsapp: "\f232";
|
||||
@fa-var-whatsapp-square: "\f40c";
|
||||
@fa-var-wheelchair: "\f193";
|
||||
@fa-var-whmcs: "\f40d";
|
||||
@fa-var-wifi: "\f1eb";
|
||||
@fa-var-wikipedia-w: "\f266";
|
||||
@fa-var-window-close: "\f410";
|
||||
@fa-var-window-maximize: "\f2d0";
|
||||
@fa-var-window-minimize: "\f2d1";
|
||||
@fa-var-window-restore: "\f2d2";
|
||||
@fa-var-windows: "\f17a";
|
||||
@fa-var-won-sign: "\f159";
|
||||
@fa-var-wordpress: "\f19a";
|
||||
@fa-var-wordpress-simple: "\f411";
|
||||
@fa-var-wpbeginner: "\f297";
|
||||
@fa-var-wpexplorer: "\f2de";
|
||||
@fa-var-wpforms: "\f298";
|
||||
@fa-var-wrench: "\f0ad";
|
||||
@fa-var-xbox: "\f412";
|
||||
@fa-var-xing: "\f168";
|
||||
@fa-var-xing-square: "\f169";
|
||||
@fa-var-y-combinator: "\f23b";
|
||||
@fa-var-yahoo: "\f19e";
|
||||
@fa-var-yandex: "\f413";
|
||||
@fa-var-yandex-international: "\f414";
|
||||
@fa-var-yelp: "\f1e9";
|
||||
@fa-var-yen-sign: "\f157";
|
||||
@fa-var-yoast: "\f2b1";
|
||||
@fa-var-youtube: "\f167";
|
||||
@fa-var-youtube-square: "\f431";
|
||||
@ -0,0 +1,292 @@
|
||||
/**
|
||||
* 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;
|
||||
|
||||
.header-title {
|
||||
.overflow-ellipsis;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
margin: 0 -20rem;
|
||||
}
|
||||
}
|
||||
|
||||
& > .footer {
|
||||
border-top: 1px solid @color-layout-border;
|
||||
|
||||
&: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 > .header > .toolbar {
|
||||
font-size: @layout-touch-header-font-size;
|
||||
display: none;
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,62 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
/*** 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 {
|
||||
// fa-spin is defined in styles.less
|
||||
-webkit-animation: fa-spin 2s infinite linear;
|
||||
animation: fa-spin 2s 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;
|
||||
}
|
||||
@ -0,0 +1,79 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
/*** Additional styles for printouts ***/
|
||||
|
||||
body {
|
||||
overflow: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#print-layout {
|
||||
margin: 1rem;
|
||||
|
||||
// Overwrites for mail message printouts
|
||||
|
||||
.image-attachment {
|
||||
.image-link {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.attachment-links {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.header-content {
|
||||
.message-partheaders {
|
||||
padding: 0 !important;
|
||||
border: 0;
|
||||
font-size: 1rem;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
#message-header {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.attachment-size {
|
||||
padding-left: .1rem;
|
||||
}
|
||||
|
||||
// Overwrites for contact printouts
|
||||
|
||||
.formcontent {
|
||||
padding: 0;
|
||||
|
||||
legend {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
.row .form-control-plaintext {
|
||||
padding: .1rem;
|
||||
}
|
||||
|
||||
.contactfield {
|
||||
padding: .2rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.propform.groupped .row.input-group .input-group-text {
|
||||
padding: 0;
|
||||
min-width: 12rem;
|
||||
background: #fff;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.contact-header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,219 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
@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-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-regular.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
|
||||
url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-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-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-italic.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
|
||||
url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-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-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-700.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
|
||||
url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-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-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-700italic.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
|
||||
url('../fonts/roboto-v18-greek-ext_cyrillic-ext_cyrillic_greek_latin-ext_latin-700italic.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
|
||||
}
|
||||
|
||||
/* E.g. for animated 'loading' icon */
|
||||
|
||||
@-webkit-keyframes fa-spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(359deg);
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@keyframes fa-spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(359deg);
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 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:not(.btn) {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
@import "layout";
|
||||
|
||||
/*** Widgets ***/
|
||||
|
||||
@import "widgets/common";
|
||||
@import "widgets/buttons";
|
||||
@import "widgets/jqueryui";
|
||||
@import "widgets/dialogs";
|
||||
@import "widgets/taskmenu";
|
||||
@import "widgets/messages";
|
||||
@import "widgets/toolbar";
|
||||
@import "widgets/searchbar";
|
||||
@import "widgets/lists";
|
||||
@import "widgets/forms";
|
||||
@import "widgets/mail";
|
||||
|
||||
|
||||
|
||||
/*** Login form ***/
|
||||
|
||||
.task-login #layout > .content {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
background: url(../images/watermark.jpg) center -20px no-repeat;
|
||||
background-size: auto 40%;
|
||||
}
|
||||
|
||||
#login-form {
|
||||
margin: 0 auto;
|
||||
top: 35vh;
|
||||
width: 95%;
|
||||
max-width: 280px;
|
||||
position: relative;
|
||||
|
||||
// Fixes input width and position in IE11
|
||||
.row {
|
||||
max-width: 280px;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#login-footer {
|
||||
flex: 1;
|
||||
color: @color-black-shade-text;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*** Addressbook UI ***/
|
||||
|
||||
#contactpic {
|
||||
min-width: @layout-contact-icon-width;
|
||||
min-height: @layout-contact-icon-width;
|
||||
border-radius: .5rem;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,47 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
@import (reference) "fontawesome";
|
||||
@import (reference) "colors";
|
||||
|
||||
@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;
|
||||
|
||||
@layout-menu-width: 5rem;
|
||||
@layout-header-height: 4.2rem;
|
||||
@layout-header-font-size: 1rem;
|
||||
@layout-pagenav-height: 2rem;
|
||||
|
||||
@layout-touch-header-height: @layout-header-height;
|
||||
@layout-touch-header-font-size: 1.2rem;
|
||||
@layout-touch-menu-record-height: 3.4rem;
|
||||
@layout-touch-menu-record-font-size: 1.2rem;
|
||||
@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: 2.5rem;
|
||||
@listing-touch-line-height: 3.4rem;
|
||||
@listing-treetoggle-width: 1.5em;
|
||||
|
||||
// Additional icons
|
||||
@icon-resize-corner: data-uri("data:image/svg+xml;charset=utf-8", "../images/corner-handle.svg"); // size: 512x512
|
||||
@ -0,0 +1,276 @@
|
||||
/**
|
||||
* Roundcube webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) 2017-2018, The Roundcube Dev Team
|
||||
*
|
||||
* The contents are subject to the Creative Commons Attribution-ShareAlike
|
||||
* License. It is allowed to copy, distribute, transmit and to adapt the work
|
||||
* by keeping credits to the original authors in the README.md file.
|
||||
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
|
||||
*/
|
||||
|
||||
/*** Buttons ***/
|
||||
|
||||
|
||||
a.rcmaddcontact {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.button.disabled {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
a.button {
|
||||
text-decoration: none;
|
||||
|
||||
&.active {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* font-icons */
|
||||
|
||||
a.button.icon,
|
||||
button.btn {
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
}
|
||||
&.toolbar-menu-button:before {
|
||||
content: @fa-var-ellipsis-v;
|
||||
}
|
||||
&.menu-button:before {
|
||||
content: @fa-var-bars;
|
||||
}
|
||||
&.back-sidebar-button:before,
|
||||
&.back-content-button:before,
|
||||
&.back-list-button:before {
|
||||
content: @fa-var-chevron-left;
|
||||
}
|
||||
&.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;
|
||||
}
|
||||
&.no:before,
|
||||
&.close:before,
|
||||
&.cancel:before {
|
||||
content: @fa-var-times;
|
||||
}
|
||||
&.mark:before {
|
||||
.font-icon-regular(@fa-var-star);
|
||||
}
|
||||
&.back:before {
|
||||
content: @fa-var-chevron-left;
|
||||
}
|
||||
&.remove:before {
|
||||
content: @fa-var-times;
|
||||
}
|
||||
&.unlock:before {
|
||||
content: @fa-var-unlock;
|
||||
}
|
||||
&.help:before {
|
||||
.font-icon-regular(@fa-var-life-ring);
|
||||
}
|
||||
&.toggleselect:before {
|
||||
.font-icon-regular(@fa-var-check-square);
|
||||
}
|
||||
&.folders:before {
|
||||
content: @fa-var-folder-open;
|
||||
}
|
||||
&.tools:before,
|
||||
&.settings:before {
|
||||
content: @fa-var-wrench;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn,
|
||||
button.btn {
|
||||
// FIXME: Maybe button text (and icon) alignment requires some rework
|
||||
padding-bottom: .5rem;
|
||||
|
||||
&:before {
|
||||
display: inline !important;
|
||||
float: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
a.button.icon {
|
||||
&.dropdown:before {
|
||||
content: @fa-var-caret-down;
|
||||
font-size: 1em;
|
||||
}
|
||||
& > span.inner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
html.touch {
|
||||
.btn:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@floating-action-button-size: 4rem;
|
||||
|
||||
.floating-action-buttons {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
.footer:not(:empty) + & {
|
||||
bottom: @layout-touch-header-height;
|
||||
}
|
||||
|
||||
a.button {
|
||||
display: block;
|
||||
float: left;
|
||||
width: @floating-action-button-size;
|
||||
height: @floating-action-button-size;
|
||||
border-radius: 50%;
|
||||
background: @color-taskmenu-background;
|
||||
color: white;
|
||||
opacity: .95;
|
||||
box-shadow: 0 0 5px 5px @color-popover-shadow;
|
||||
margin: 0 1rem 1rem 0;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-plus;
|
||||
width: @floating-action-button-size;
|
||||
height: @floating-action-button-size;
|
||||
line-height: @floating-action-button-size;
|
||||
}
|
||||
|
||||
.inner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*** Bootstrap button style overrides ***/
|
||||
|
||||
.btn-secondary {
|
||||
color: @color-btn-secondary;
|
||||
background: @color-btn-secondary-background;
|
||||
border-color: @color-btn-secondary-background;
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 .2rem fade(@color-btn-secondary-background, 50%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken(@color-btn-secondary-background, 8%);
|
||||
border-color: darken(@color-btn-secondary-background, 10%);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
background: lighten(@color-btn-secondary-background, 20%);
|
||||
border-color: lighten(@color-btn-secondary-background, 20%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:not([disabled]):not(.disabled):active {
|
||||
background: darken(@color-btn-secondary-background, 11%);
|
||||
border-color: darken(@color-btn-secondary-background, 13%);
|
||||
box-shadow: 0 0 0 .2rem fade(@color-btn-secondary-background, 53%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
color: @color-btn-primary;
|
||||
background: @color-btn-primary-background;
|
||||
border-color: @color-btn-primary-background;
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 .2rem fade(@color-btn-primary-background, 50%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken(@color-btn-primary-background, 8%);
|
||||
border-color: darken(@color-btn-primary-background, 10%);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
background: lighten(@color-btn-primary-background, 20%);
|
||||
border-color: lighten(@color-btn-primary-background, 20%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&: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%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
color: @color-btn-danger;
|
||||
background: @color-btn-danger-background;
|
||||
border-color: @color-btn-danger-background;
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 .2rem fade(@color-btn-danger-background, 50%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken(@color-btn-danger-background, 8%);
|
||||
border-color: darken(@color-btn-danger-background, 10%);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
background: lighten(@color-btn-danger-background, 20%);
|
||||
border-color: lighten(@color-btn-danger-background, 20%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:not([disabled]):not(.disabled):active {
|
||||
background: darken(@color-btn-danger-background, 11%);
|
||||
border-color: darken(@color-btn-danger-background, 13%);
|
||||
box-shadow: 0 0 0 .2rem fade(@color-btn-danger-background, 53%);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,517 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
/*** Common UI elements ***/
|
||||
|
||||
.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 {
|
||||
border-bottom: 1px solid @color-layout-border;
|
||||
|
||||
tr:last-child td,
|
||||
li:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.contact-header {
|
||||
display: flex;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.contact-photo {
|
||||
min-width: @layout-contact-icon-width;
|
||||
}
|
||||
|
||||
.contact-head {
|
||||
margin-left: 1rem;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
#layout > .content .watermark {
|
||||
background: url(../images/watermark.jpg) center no-repeat;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
.spinner {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
overflow: hidden;
|
||||
text-indent: -999em;
|
||||
color: @color-spinner-circle;
|
||||
border: 1rem solid;
|
||||
border-color: currentColor @color-spinner-item currentColor currentColor;
|
||||
border-radius: 50%;
|
||||
-webkit-animation: fa-spin 1s infinite linear;
|
||||
animation: fa-spin 1s infinite linear;
|
||||
}
|
||||
}
|
||||
|
||||
.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: .6rem;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar:horizontal {
|
||||
height: .6rem;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0, 0, 0, .4);
|
||||
border-radius: .3rem;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.quota-widget {
|
||||
width: 5rem;
|
||||
max-width: 8rem;
|
||||
padding: .5rem;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
.count {
|
||||
display: block;
|
||||
color: @color-quota-text;
|
||||
font-size: 1.1rem;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.bar {
|
||||
display: block;
|
||||
height: .5rem;
|
||||
position: absolute;
|
||||
bottom: .85rem;
|
||||
left: .5rem;
|
||||
right: .5rem;
|
||||
background-color: @color-quota-background;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.value {
|
||||
display: block;
|
||||
background-color: @color-quota-value;
|
||||
border-radius: .25rem;
|
||||
height: .5rem;
|
||||
opacity: .75;
|
||||
|
||||
&.warning {
|
||||
background-color: @color-quota-value-warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
a.button {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
*: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;
|
||||
|
||||
input.icon-checkbox + label {
|
||||
padding: 0;
|
||||
|
||||
&:before {
|
||||
line-height: 1;
|
||||
height: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
html.touch {
|
||||
table.table {
|
||||
th.checkbox-cell:before {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Bootstrap's .table style overwrites */
|
||||
.table {
|
||||
thead th {
|
||||
border-width: 1px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,220 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
/*** Dialogs and popovers ***/
|
||||
|
||||
.popupmenu {
|
||||
display: none;
|
||||
padding: 0;
|
||||
min-width: 180px;
|
||||
|
||||
li > a {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.propform {
|
||||
overflow: hidden;
|
||||
margin-top: 1rem;
|
||||
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;
|
||||
padding: 0;
|
||||
|
||||
.popover-header {
|
||||
// On mobile don't display popup arrows and titles
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#rcmKSearchpane {
|
||||
width: auto;
|
||||
max-width: none;
|
||||
overflow: hidden;
|
||||
|
||||
li {
|
||||
padding-right: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
html.layout-small,
|
||||
html.layout-phone {
|
||||
.popover {
|
||||
margin: 0 !important;
|
||||
padding: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
width: @layout-mobile-menu-width;
|
||||
transform: none !important;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
div.arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.listing li:last-child {
|
||||
border-bottom: 1px solid @color-list-border;
|
||||
}
|
||||
}
|
||||
|
||||
.popover:not(#rcmKSearchpane) {
|
||||
left: initial !important;
|
||||
}
|
||||
|
||||
.popover-overlay {
|
||||
z-index: 1000;
|
||||
background-color: @color-dialog-overlay-background;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#rcmKSearchpane {
|
||||
bottom: auto;
|
||||
border: 1px solid @color-input-border;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.popover-header {
|
||||
display: block;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
padding: 0 .5em;
|
||||
height: @layout-touch-header-height;
|
||||
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;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 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;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,351 @@
|
||||
/**
|
||||
* Roundcube webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) 2017-2018, The Roundcube Dev Team
|
||||
*
|
||||
* The contents are subject to the Creative Commons Attribution-ShareAlike
|
||||
* License. It is allowed to copy, distribute, transmit and to adapt the work
|
||||
* by keeping credits to the original authors in the README.md file.
|
||||
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
|
||||
*/
|
||||
|
||||
/*** jQuery-UI widgets' style overrides ***/
|
||||
|
||||
.ui-widget-overlay {
|
||||
background-color: @color-dialog-overlay-background;
|
||||
opacity: 1 !important; // override jQuery-UI opacity, the color above is semi-transparent
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
.ui-state-active {
|
||||
border: 0 !important;
|
||||
background-color: @color-toolbarmenu-hover-background !important;
|
||||
}
|
||||
|
||||
.ui-menu-item {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.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;
|
||||
height: (@layout-header-height - .7rem);
|
||||
margin: .25rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-times;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-dialog-content {
|
||||
// fixes resize issue e.g. in qr-code dialog
|
||||
box-sizing: initial;
|
||||
|
||||
& > .popupmenu {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-dialog-buttonpane {
|
||||
.ui-dialog-buttonset {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
button {
|
||||
.overflow-ellipsis;
|
||||
min-width: 5rem;
|
||||
margin: .65rem .3rem;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
iframe,
|
||||
.ui-dialog-content.iframe {
|
||||
padding: 0;
|
||||
width: 100% !important;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
// Overwriting this icon generally prevents from loading bigger images sprite from jQuery-UI
|
||||
.ui-widget-content .ui-icon.ui-resizable-se {
|
||||
background: @icon-resize-corner;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/* FIXME: why do I need !important here? */
|
||||
|
||||
@media screen and (max-width: @screen-width-xs) {
|
||||
.ui-dialog {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.ui-resizable-handle,
|
||||
.ui-dialog-titlebar-close {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ui-dialog-titlebar {
|
||||
height: @layout-touch-header-height;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
.ui-dialog-buttonset {
|
||||
justify-content: space-around;
|
||||
|
||||
button {
|
||||
margin: 0 !important;
|
||||
border: 0 !important;
|
||||
height: @layout-header-height;
|
||||
box-shadow: none;
|
||||
|
||||
&:before {
|
||||
display: block !important;
|
||||
width: auto;
|
||||
height: 1.25em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Datepicker widget */
|
||||
|
||||
.ui-datepicker {
|
||||
z-index: 3 !important; // above Bootstrap form controls that use z-index: 3
|
||||
// Always display datepicker centered, overwriting widgets position
|
||||
position: fixed !important;
|
||||
top: 50% !important;
|
||||
left: 50% !important;
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow: 10px 10px 10px 1000px @color-dialog-overlay-background;
|
||||
|
||||
.ui-datepicker-header,
|
||||
.ui-datepicker-title {
|
||||
line-height: 4rem;
|
||||
height: 4rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ui-datepicker-header {
|
||||
border-bottom: 1px solid @color-dialog-header-border;
|
||||
|
||||
a {
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
select {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.ui-icon {
|
||||
background-image: none !important;
|
||||
background-position: none !important;
|
||||
}
|
||||
|
||||
.ui-datepicker-prev,
|
||||
.ui-datepicker-next {
|
||||
cursor: pointer;
|
||||
width: auto;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: "\f053";
|
||||
margin: 0 .25em;
|
||||
height: auto;
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-datepicker-prev:before {
|
||||
content: "\f053";
|
||||
}
|
||||
|
||||
.ui-datepicker-next:before {
|
||||
content: "\f054";
|
||||
}
|
||||
|
||||
td a {
|
||||
padding: 0;
|
||||
line-height: 1.8em;
|
||||
border-radius: .3rem;
|
||||
}
|
||||
|
||||
.ui-state-default,
|
||||
&.ui-widget-content .ui-state-default {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: @color-datepicker-font;
|
||||
}
|
||||
|
||||
.ui-state-highlight,
|
||||
&.ui-widget-content .ui-state-highlight {
|
||||
background: @color-datepicker-highlight-background;
|
||||
color: @color-datepicker-highlight;
|
||||
}
|
||||
|
||||
.ui-state-active,
|
||||
&.ui-widget-content .ui-state-active {
|
||||
background: @color-datepicker-active-background;
|
||||
color: @color-datepicker-active;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
html.touch {
|
||||
.ui-datepicker {
|
||||
min-width: (@screen-width-mini - 20px);
|
||||
|
||||
td a {
|
||||
font-size: 1.2em;
|
||||
line-height: 2.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.minicolors-panel {
|
||||
border: 1px solid @color-datepicker-border;
|
||||
box-shadow: 3px 3px 5px @color-popover-shadow;
|
||||
border-radius: .3rem;
|
||||
height: 152px;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
.minicolors-input {
|
||||
width: 100%;
|
||||
// needed so minicolors panel is not out of screen
|
||||
// when the input is on the right side, e.g. Calendar plugin settings
|
||||
// This is obviously minicolors script issue
|
||||
min-width: 130px;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.minicolors-swatch {
|
||||
height: 25px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-width-mini) {
|
||||
.ui-widget-content {
|
||||
border-radius: 0;
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,975 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
/*** List and treelist widgets ***/
|
||||
|
||||
.listing {
|
||||
tbody td,
|
||||
li {
|
||||
border-bottom: 1px solid @color-list-border;
|
||||
cursor: default;
|
||||
font-weight: normal;
|
||||
line-height: @listing-line-height;
|
||||
}
|
||||
|
||||
tbody td,
|
||||
li a {
|
||||
padding: 0 .5rem;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
color: @color-list;
|
||||
}
|
||||
|
||||
tbody td {
|
||||
.overflow-ellipsis;
|
||||
outline: none;
|
||||
|
||||
a {
|
||||
color: @color-list;
|
||||
}
|
||||
}
|
||||
|
||||
li a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
li.selected,
|
||||
tr.selected td {
|
||||
color: @color-list-selected;
|
||||
background-color: @color-list-selected-background;
|
||||
}
|
||||
|
||||
td.selection {
|
||||
padding: 0 0 0 .5em;
|
||||
width: 2em;
|
||||
text-align: center;
|
||||
|
||||
& > input {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.withselection) td.selection {
|
||||
display: none;
|
||||
}
|
||||
|
||||
td.name {
|
||||
.overflow-ellipsis;
|
||||
}
|
||||
|
||||
td.action {
|
||||
padding: 0 .5em;
|
||||
width: 2em;
|
||||
text-align: center;
|
||||
|
||||
&:empty {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
a.pushgroup:before {
|
||||
content: @fa-var-chevron-right;
|
||||
}
|
||||
}
|
||||
|
||||
li.droptarget > a,
|
||||
tr.droptarget > td {
|
||||
background-color: @color-list-droptarget-background;
|
||||
}
|
||||
|
||||
li.disabled,
|
||||
tr.disabled td {
|
||||
color: @color-list-deleted;
|
||||
}
|
||||
|
||||
li > a.virtual,
|
||||
li.virtual > a {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
span.secondary {
|
||||
color: @color-list-secondary;
|
||||
}
|
||||
|
||||
// Focus indicator
|
||||
@media screen and (min-width: @screen-width-large) {
|
||||
li > a,
|
||||
tbody tr > td:first-child,
|
||||
&:not(.withselection) tbody tr > td.selection + td {
|
||||
border-left: 2px solid transparent;
|
||||
}
|
||||
|
||||
li > a:focus,
|
||||
&.focus tbody tr.focused > td:first-child,
|
||||
&.focus:not(.withselection) tbody tr.focused > td.selection + td {
|
||||
border-left: 2px solid @color-list-focus-indicator;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table.listing {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
// border-spacing/border-collapse here fix problem with our focus indicator
|
||||
// when the table cells use overflow: hidden. I.e. we use border-spacing:0
|
||||
// instead of Bootstrap's border-collapse:collapse. Is this cross-browser?
|
||||
border-spacing: 0;
|
||||
border-collapse: unset;
|
||||
}
|
||||
|
||||
ul.listing {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
& > ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
.overflow-ellipsis;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
list-style: none;
|
||||
|
||||
ul {
|
||||
border-top: 1px solid @color-list-border;
|
||||
padding-left: 1.5em;
|
||||
|
||||
li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
input.icon-checkbox + label,
|
||||
input[type=checkbox] {
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
top: 0;
|
||||
right: .5rem;
|
||||
height: @listing-line-height;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&.simplelist {
|
||||
li {
|
||||
padding: 0 .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.listing-info {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 80%;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: @color-list-secondary;
|
||||
}
|
||||
|
||||
html.touch {
|
||||
.listing:not(.toolbar) li,
|
||||
.listing tbody td {
|
||||
line-height: @listing-touch-line-height;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
li input[type=checkbox] {
|
||||
height: @listing-touch-line-height;
|
||||
}
|
||||
|
||||
td.selection {
|
||||
padding: 0;
|
||||
width: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-width-large) {
|
||||
.listing.selection-large-only {
|
||||
li.selected {
|
||||
color: @color-list;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* icons */
|
||||
|
||||
.listing.iconized li {
|
||||
a:before {
|
||||
&:extend(.font-icon-class);
|
||||
height: 2em; // TODO: ?
|
||||
margin-right: .5rem;
|
||||
}
|
||||
&.preferences > a:before {
|
||||
content: @fa-var-sliders-h;
|
||||
}
|
||||
&.folders > a:before {
|
||||
content: @fa-var-folder;
|
||||
}
|
||||
&.responses > a:before {
|
||||
content: @fa-var-comment;
|
||||
}
|
||||
&.identities > a:before {
|
||||
content: @fa-var-id-card;
|
||||
}
|
||||
&.password > a:before {
|
||||
content: @fa-var-lock;
|
||||
}
|
||||
&.addressbook a:before {
|
||||
.font-icon-regular(@fa-var-address-book);
|
||||
}
|
||||
&.contactgroup a:before {
|
||||
.font-icon-solid(@fa-var-users);
|
||||
}
|
||||
&.contactsearch a:before {
|
||||
content: @fa-var-search;
|
||||
}
|
||||
&.filter > a:before {
|
||||
content: @fa-var-filter;
|
||||
}
|
||||
&.vacation > a:before {
|
||||
.font-icon-regular(@fa-var-clock);
|
||||
}
|
||||
&.forward > a:before {
|
||||
content: @fa-var-share-square;
|
||||
}
|
||||
&.enigma.keys > a:before {
|
||||
content: @fa-var-key;
|
||||
}
|
||||
&.userinfo > a:before {
|
||||
content: @fa-var-info-circle;
|
||||
}
|
||||
&.twofactorauth > a:before {
|
||||
content: @fa-var-sign-in-alt;
|
||||
}
|
||||
|
||||
a.help:before {
|
||||
content: @fa-var-life-ring;
|
||||
}
|
||||
a.about:before {
|
||||
.font-icon-regular(@fa-var-question-circle);
|
||||
}
|
||||
a.license:before {
|
||||
content: @fa-var-shield-alt;
|
||||
}
|
||||
|
||||
// autocomplete popup
|
||||
& > i:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-user;
|
||||
margin-left: .5rem;
|
||||
}
|
||||
&.group > i:before {
|
||||
content: @fa-var-users;
|
||||
}
|
||||
}
|
||||
|
||||
html.ie11 .listing.iconized li a:before {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.listing.iconized tr {
|
||||
td:before {
|
||||
&:extend(.font-icon-class);
|
||||
margin-right: .5rem;
|
||||
}
|
||||
&.contact.person td.name:before {
|
||||
content: @fa-var-user;
|
||||
}
|
||||
&.contact.group td.name:before {
|
||||
content: @fa-var-users;
|
||||
}
|
||||
&.general > td.section:before {
|
||||
content: @fa-var-desktop;
|
||||
}
|
||||
&.mailbox > td.section:before {
|
||||
.font-icon-regular(@fa-var-envelope);
|
||||
}
|
||||
&.mailview > td.section:before {
|
||||
content: @fa-var-inbox;
|
||||
}
|
||||
&.compose > td.section:before {
|
||||
content: @fa-var-paper-plane;
|
||||
}
|
||||
&.addressbook > td.section:before {
|
||||
content: @fa-var-user;
|
||||
}
|
||||
&.folders > td.section:before {
|
||||
.font-icon-regular(@fa-var-folder);
|
||||
}
|
||||
&.server > td.section:before {
|
||||
content: @fa-var-server;
|
||||
}
|
||||
&.enigma > td.section:before {
|
||||
content: @fa-var-lock;
|
||||
}
|
||||
&.calendar > td.section:before {
|
||||
content: @fa-var-calendar;
|
||||
}
|
||||
}
|
||||
|
||||
/* selecatable list: e.g. spellcheck language selection */
|
||||
.listing.iconized.selectable li {
|
||||
a:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: "";
|
||||
}
|
||||
a.selected:before {
|
||||
content: @fa-var-check;
|
||||
}
|
||||
}
|
||||
|
||||
.popupmenu .listing {
|
||||
li > a {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
li.selected {
|
||||
color: @color-toolbarmenu-hover;
|
||||
background-color: @color-toolbarmenu-hover-background;
|
||||
}
|
||||
|
||||
td {
|
||||
.overflow-ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
ul.treelist {
|
||||
li {
|
||||
div.treetoggle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: @listing-treetoggle-width;
|
||||
cursor: pointer;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-angle-right;
|
||||
margin-left: .25em;
|
||||
}
|
||||
|
||||
&.expanded:before {
|
||||
content: @fa-var-angle-down;
|
||||
}
|
||||
}
|
||||
|
||||
& > a {
|
||||
.overflow-ellipsis;
|
||||
padding-left: @listing-treetoggle-width;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
// reset .listing selection style
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
|
||||
& > div > a, // this is used e.g. by kolab_addressbook
|
||||
& > a {
|
||||
color: @color-list-selected;
|
||||
background-color: @color-list-selected-background;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
padding-left: 0;
|
||||
a { padding-left: (2 * @listing-treetoggle-width); }
|
||||
div.treetoggle { left: @listing-treetoggle-width; }
|
||||
|
||||
li {
|
||||
a { padding-left: (3 * @listing-treetoggle-width); }
|
||||
div.treetoggle { left: (2 * @listing-treetoggle-width); }
|
||||
|
||||
li {
|
||||
a { padding-left: (4 * @listing-treetoggle-width); }
|
||||
div.treetoggle { left: (3 * @listing-treetoggle-width); }
|
||||
|
||||
li {
|
||||
a { padding-left: (5 * @listing-treetoggle-width); }
|
||||
div.treetoggle { left: (4 * @listing-treetoggle-width); }
|
||||
|
||||
li {
|
||||
a { padding-left: (6 * @listing-treetoggle-width); }
|
||||
div.treetoggle { left: (5 * @listing-treetoggle-width); }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.notree {
|
||||
div.treetoggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
li > a {
|
||||
padding-left: .5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*** Folders list widget ***/
|
||||
|
||||
.folderlist {
|
||||
li {
|
||||
&.mailbox {
|
||||
&.unread {
|
||||
// TODO
|
||||
& > a {
|
||||
padding-right: 2.8em;
|
||||
}
|
||||
}
|
||||
|
||||
&.recent {
|
||||
color: @color-list-recent;
|
||||
}
|
||||
|
||||
.unreadcount {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
min-width: 2em;
|
||||
line-height: 1.4rem;
|
||||
margin: (@listing-line-height - 1.4rem)/2;
|
||||
padding: 0 .3em;
|
||||
border-radius: .4em;
|
||||
background: @color-list-badge-background;
|
||||
color: @color-list-badge;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
|
||||
html.touch & {
|
||||
line-height: 2rem;
|
||||
margin: (@listing-touch-line-height - 2rem)/2;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected .unreadcount {
|
||||
// todo
|
||||
}
|
||||
|
||||
&.recent > .unreadcount {
|
||||
background: @color-list-recent-badge-background;
|
||||
color: @color-list-recent-badge;
|
||||
}
|
||||
|
||||
&.root {
|
||||
display: none !important;
|
||||
// FIXME: This element is confusing, I propose to not use it
|
||||
}
|
||||
}
|
||||
|
||||
a:before {
|
||||
&:extend(.font-icon-class);
|
||||
.font-icon-regular(@fa-var-folder);
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
&.inbox > a:before {
|
||||
.font-icon-solid(@fa-var-inbox);
|
||||
}
|
||||
&.trash a:before {
|
||||
.font-icon-solid(@fa-var-trash-alt);
|
||||
}
|
||||
&.trash.empty > a:before {
|
||||
.font-icon-regular(@fa-var-trash-alt);
|
||||
}
|
||||
&.drafts a:before {
|
||||
.font-icon-solid(@fa-var-pencil-alt);
|
||||
}
|
||||
&.sent a:before {
|
||||
.font-icon-solid(@fa-var-paper-plane);
|
||||
}
|
||||
&.junk a:before {
|
||||
.font-icon-solid(@fa-var-fire);
|
||||
}
|
||||
&.archive > a:before {
|
||||
.font-icon-solid(@fa-var-archive);
|
||||
}
|
||||
|
||||
&.type-event > a:before {
|
||||
.font-icon-solid(@fa-var-calendar);
|
||||
}
|
||||
&.type-task > a:before {
|
||||
.font-icon-solid(@fa-var-tasks);
|
||||
}
|
||||
&.type-journal > a:before {
|
||||
.font-icon-regular(@fa-var-calendar);
|
||||
}
|
||||
&.type-contact > a:before {
|
||||
.font-icon-regular(@fa-var-address-book);
|
||||
}
|
||||
&.type-note > a:before {
|
||||
.font-icon-regular(@fa-var-sticky-note);
|
||||
}
|
||||
&.type-configuration > a:before {
|
||||
.font-icon-solid(@fa-var-cog);
|
||||
}
|
||||
&.type-freebusy > a:before {
|
||||
.font-icon-regular(@fa-var-calendar);
|
||||
}
|
||||
&.type-file > a:before {
|
||||
.font-icon-solid(@fa-var-folder);
|
||||
}
|
||||
}
|
||||
|
||||
// folder-selector fix for left padding
|
||||
&.toolbarmenu a:before {
|
||||
margin-left: .5em;
|
||||
}
|
||||
|
||||
&.toolbarmenu {
|
||||
li {
|
||||
a:before {
|
||||
margin-right: .25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*** Messages list widget ***/
|
||||
|
||||
.messagelist > thead,
|
||||
.messagelist .branch,
|
||||
table.fixedcopy {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.messagelist {
|
||||
td {
|
||||
border-left: 0;
|
||||
width: 2em;
|
||||
vertical-align: top;
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
td.subject {
|
||||
width: 100%;
|
||||
padding-right: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
span {
|
||||
line-height: 2em;
|
||||
|
||||
&.date {
|
||||
font-size: 90%;
|
||||
color: @color-list-secondary;
|
||||
}
|
||||
|
||||
&.fromto {
|
||||
.overflow-ellipsis;
|
||||
flex: 1;
|
||||
font-size: 90%;
|
||||
color: @color-list-secondary;
|
||||
padding-left: 1.5em;
|
||||
padding-right: .5rem;
|
||||
}
|
||||
|
||||
&.subject {
|
||||
.overflow-ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td.threads {
|
||||
padding: 0 0 0 .25rem;
|
||||
width: 1.5em;
|
||||
}
|
||||
|
||||
td.flags {
|
||||
width: 2.5em;
|
||||
|
||||
& > span {
|
||||
height: 1.7em;
|
||||
line-height: 1.7em;
|
||||
display: block;
|
||||
|
||||
&.flag {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tr.flagged td,
|
||||
tr.flagged td.subject span.subject a,
|
||||
tr.flagged td.subject span.date,
|
||||
tr.flagged td.subject span.fromto {
|
||||
color: @color-list-flagged;
|
||||
}
|
||||
|
||||
tr.deleted td,
|
||||
tr.deleted td.subject span.subject a,
|
||||
tr.deleted td.subject span.date,
|
||||
tr.deleted td.subject span.fromto {
|
||||
color: @color-list-deleted;
|
||||
}
|
||||
|
||||
tr.unread td.subject span.subject {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// thread parent message with unread children
|
||||
tr.unroot td.subject a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
tr.thread td.threads div:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-angle-right;
|
||||
cursor: pointer;
|
||||
width: 1em;
|
||||
}
|
||||
tr.thread.expanded td.threads div:before {
|
||||
content: @fa-var-angle-down;
|
||||
}
|
||||
td.subject span.msgicon.status:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-circle;
|
||||
cursor: pointer;
|
||||
font-size: .4em;
|
||||
width: 3em;
|
||||
height: 2rem;
|
||||
}
|
||||
td.subject span.msgicon.status.unread:before {
|
||||
content: @fa-var-star;
|
||||
font-size: 1.1em;
|
||||
width: 1.1em;
|
||||
line-height: 1.75;
|
||||
color: @color-warning;
|
||||
}
|
||||
td.subject span.msgicon.status.unreadchildren:before {
|
||||
.font-icon-regular(@fa-var-star);
|
||||
font-size: 1.1em;
|
||||
width: 1.1em;
|
||||
line-height: 1.75;
|
||||
}
|
||||
td.subject span.msgicon.status.replied:before {
|
||||
content: @fa-var-reply;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.75;
|
||||
width: 1.1em;
|
||||
}
|
||||
td.subject span.msgicon.status.forwarded:before {
|
||||
.font-icon-solid(@fa-var-share);
|
||||
font-size: 1.1em;
|
||||
line-height: 1.75;
|
||||
width: 1.1em;
|
||||
}
|
||||
td.subject span.msgicon.status.replied.forwarded:before {
|
||||
content: @fa-var-reply; // TODO
|
||||
font-size: 1.1em;
|
||||
line-height: 1.75;
|
||||
width: 1.1em;
|
||||
}
|
||||
tr.deleted td.subject span.msgicon.status:before {
|
||||
content: @fa-var-ban;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.75;
|
||||
width: 1.1em;
|
||||
}
|
||||
|
||||
span.attachment span {
|
||||
&:extend(.font-icon-class);
|
||||
color: @color-list-icon;
|
||||
|
||||
&:before {
|
||||
margin: 0;
|
||||
content: @fa-var-paperclip;
|
||||
}
|
||||
&.report:before {
|
||||
.font-icon-regular(@fa-var-file-alt);
|
||||
}
|
||||
&.encrypted:before {
|
||||
content: @fa-var-lock;
|
||||
}
|
||||
&.vcard:before {
|
||||
.font-icon-regular(@fa-var-user); // vcard_attachments plugin
|
||||
}
|
||||
}
|
||||
|
||||
span.flagged:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-flag;
|
||||
}
|
||||
|
||||
tr:hover span.unflagged:before {
|
||||
&:extend(.font-icon-class);
|
||||
.font-icon-regular(@fa-var-flag);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
html.layout-phone,
|
||||
html.touch {
|
||||
.messagelist {
|
||||
td.flags {
|
||||
display: none;
|
||||
}
|
||||
td.subject {
|
||||
padding-right: .5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Contacts list */
|
||||
|
||||
.contactlist {
|
||||
.contact.readonly td {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
td.action {
|
||||
// TODO
|
||||
a {
|
||||
// TODO
|
||||
}
|
||||
}
|
||||
|
||||
// for contacts list in mail compose
|
||||
td.contact:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-user;
|
||||
}
|
||||
|
||||
// for contacts list in mail compose
|
||||
td.contactgroup:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-users;
|
||||
}
|
||||
|
||||
span.email {
|
||||
display: inline;
|
||||
color: @color-list-secondary;
|
||||
font-style: italic;
|
||||
margin-left: .5em;
|
||||
}
|
||||
|
||||
li {
|
||||
a:before {
|
||||
&:extend(.font-icon-class);
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
a.addressbook::before {
|
||||
.font-icon-regular(@fa-var-address-book);
|
||||
}
|
||||
|
||||
a.contactgroup::before {
|
||||
.font-icon-solid(@fa-var-users);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Attachments list */
|
||||
|
||||
@attachmentslist-item-height: 2rem;
|
||||
|
||||
.attachmentslist {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
display: inline-flex;
|
||||
white-space: nowrap;
|
||||
line-height: @attachmentslist-item-height;
|
||||
max-width: 100%;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
.font-icon-regular(@fa-var-file);
|
||||
height: @attachmentslist-item-height;
|
||||
}
|
||||
|
||||
&.txt:before,
|
||||
&.text:before {
|
||||
.font-icon-regular(@fa-var-file-alt);
|
||||
}
|
||||
|
||||
&.pdf:before {
|
||||
.font-icon-regular(@fa-var-file-pdf);
|
||||
}
|
||||
|
||||
&.odt:before,
|
||||
&.doc:before,
|
||||
&.docx:before,
|
||||
&.msword:before {
|
||||
.font-icon-regular(@fa-var-file-word);
|
||||
}
|
||||
|
||||
&.ods:before,
|
||||
&.xls:before,
|
||||
&.xlsx:before,
|
||||
&.msexcel:before {
|
||||
.font-icon-regular(@fa-var-file-excel);
|
||||
}
|
||||
|
||||
&.rar:before,
|
||||
&.zip:before,
|
||||
&.gz:before {
|
||||
.font-icon-regular(@fa-var-file-archive);
|
||||
}
|
||||
|
||||
&.image:before,
|
||||
&.jpg:before,
|
||||
&.jpeg:before,
|
||||
&.png:before {
|
||||
.font-icon-regular(@fa-var-file-image);
|
||||
}
|
||||
|
||||
&.mp3:before,
|
||||
&.audio:before {
|
||||
.font-icon-regular(@fa-var-file-audio);
|
||||
}
|
||||
|
||||
&.m4p:before,
|
||||
&.video:before {
|
||||
.font-icon-regular(@fa-var-file-video);
|
||||
}
|
||||
|
||||
&.ics:before,
|
||||
&.calendar:before {
|
||||
// TODO
|
||||
}
|
||||
|
||||
&.vcard:before {
|
||||
.font-icon-regular(@fa-var-address-card);
|
||||
}
|
||||
|
||||
&.html:before {
|
||||
.font-icon-regular(@fa-var-file-code);
|
||||
}
|
||||
|
||||
&.eml:before,
|
||||
&.rfc822:before {
|
||||
// TODO
|
||||
}
|
||||
|
||||
&.odp:before,
|
||||
&.otp:before,
|
||||
&.ppt:before,
|
||||
&.pptx:before,
|
||||
&.ppsx:before,
|
||||
&.vnd.mspowerpoint:before {
|
||||
.font-icon-regular(@fa-var-file-powerpoint);
|
||||
}
|
||||
|
||||
&.sig:before,
|
||||
&.pgp-signature:before,
|
||||
&.pkcs7-signature:before {
|
||||
// TODO
|
||||
}
|
||||
|
||||
&.application.asc:before {
|
||||
// TODO
|
||||
}
|
||||
|
||||
&.application.pgp-keys:before {
|
||||
// TODO
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
line-height: @attachmentslist-item-height;
|
||||
height: @attachmentslist-item-height;
|
||||
}
|
||||
|
||||
a.cancelupload:before,
|
||||
a.delete:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-trash-alt;
|
||||
line-height: @attachmentslist-item-height;
|
||||
height: @attachmentslist-item-height;
|
||||
}
|
||||
|
||||
&.uploading:before {
|
||||
.animated-icon-class;
|
||||
.font-icon-solid(@fa-var-circle-notch);
|
||||
}
|
||||
|
||||
a.filename {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.attachment-name {
|
||||
.overflow-ellipsis;
|
||||
color: @color-font;
|
||||
}
|
||||
|
||||
.attachment-size {
|
||||
color: @color-list-secondary;
|
||||
padding: 0 .25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#identities-table {
|
||||
td.mail:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-id-card;
|
||||
}
|
||||
}
|
||||
|
||||
#responses-table {
|
||||
td.name:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-comment;
|
||||
}
|
||||
}
|
||||
|
||||
#filterslist {
|
||||
td.name:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-filter;
|
||||
}
|
||||
}
|
||||
|
||||
#filtersetslist {
|
||||
td.name:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-file-alt;
|
||||
}
|
||||
}
|
||||
@ -0,0 +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%);
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +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;
|
||||
}
|
||||
|
||||
&.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: 102; // 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;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,105 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
/*** Searchbar and searchfilterbar widgets ***/
|
||||
|
||||
.searchbar {
|
||||
position: absolute;
|
||||
background-color: @color-layout-header-background;
|
||||
right: .25rem;
|
||||
height: @layout-header-height;
|
||||
display: block !important;
|
||||
|
||||
a.button {
|
||||
min-width: auto;
|
||||
padding: 0;
|
||||
display: block;
|
||||
|
||||
&:before {
|
||||
line-height: @layout-header-height;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-top: calc(@layout-header-height/2 - 2.25rem/2);
|
||||
display: none;
|
||||
padding: 0 .5rem;
|
||||
|
||||
.icon:before {
|
||||
font-size: 1em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.icon.filter,
|
||||
.icon.search {
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a.icon {
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.reset:before {
|
||||
content: @fa-var-trash-alt;
|
||||
}
|
||||
&.options:before {
|
||||
content: @fa-var-angle-down;
|
||||
}
|
||||
}
|
||||
|
||||
&.active a.button.search {
|
||||
color: @color-searchbar-icon-active;
|
||||
}
|
||||
|
||||
&.open {
|
||||
z-index: 10;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
a.button.filter,
|
||||
a.button.search {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.searchfilterbar {
|
||||
right: @layout-touch-icon-width + .25rem;
|
||||
|
||||
&.active a.button.filter {
|
||||
color: @color-searchbar-icon-active;
|
||||
}
|
||||
}
|
||||
|
||||
html.ie11 {
|
||||
.searchbar {
|
||||
a.button.filter:before,
|
||||
a.button.search:before {
|
||||
line-height: 3.2;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,173 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
/*** Taskmenu ***/
|
||||
|
||||
#taskmenu {
|
||||
height: 100%;
|
||||
|
||||
a {
|
||||
.overflow-ellipsis;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
}
|
||||
|
||||
&.mail:before {
|
||||
content: @fa-var-envelope;
|
||||
}
|
||||
&.addressbook:before {
|
||||
content: @fa-var-user;
|
||||
}
|
||||
&.settings:before {
|
||||
content: @fa-var-sliders-h;
|
||||
}
|
||||
&.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;
|
||||
}
|
||||
}
|
||||
|
||||
a.logout {
|
||||
color: @color-taskmenu-button-logout-hover !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-width-xs) {
|
||||
z-index: 30001; // because autocompletion popup uses z-index:30000
|
||||
overflow-x: hidden;
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
padding: 0 .5em;
|
||||
text-align: left;
|
||||
line-height: @layout-touch-menu-record-height;
|
||||
height: @layout-touch-menu-record-height;
|
||||
border-bottom: 1px solid @color-list-border;
|
||||
color: @color-list;
|
||||
font-size: 1.2rem;
|
||||
|
||||
&:before {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: (@screen-width-xs + 1px)) {
|
||||
a {
|
||||
text-align: center;
|
||||
color: @color-taskmenu-button;
|
||||
padding: .45rem 0;
|
||||
width: @layout-menu-width/2;
|
||||
font-size: 1.2rem;
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
height: 2.1rem;
|
||||
line-height: 1.5;
|
||||
width: @layout-menu-width/2;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: @color-taskmenu-button;
|
||||
background: @color-taskmenu-button-background-hover;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: @color-taskmenu-button-selected;
|
||||
background: @color-taskmenu-button-selected-background;
|
||||
}
|
||||
}
|
||||
|
||||
.special-buttons {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: @layout-menu-width;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
a {
|
||||
color: @color-taskmenu-button-action-background;
|
||||
background: @color-taskmenu-background;
|
||||
|
||||
&:hover {
|
||||
color: @color-taskmenu-button-action-hover;
|
||||
background: @color-taskmenu-button-action-background-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span.inner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: (@screen-width-medium + 1px)) {
|
||||
a {
|
||||
width: @layout-menu-width;
|
||||
height: (@layout-header-height - .05rem);
|
||||
font-size: 1rem;
|
||||
|
||||
&:before {
|
||||
width: @layout-menu-width;
|
||||
height: 1.75rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
a {
|
||||
color: @color-taskmenu-button-action;
|
||||
background: @color-taskmenu-button-action-background;
|
||||
}
|
||||
}
|
||||
|
||||
span.inner {
|
||||
display: inline;
|
||||
font-size: 85%;
|
||||
padding: 0 .1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
.popover-header {
|
||||
@media screen and (min-width: (@screen-width-xs + 1px)) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,736 @@
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.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-font;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
<roundcube:include file="includes/layout.html" />
|
||||
|
||||
<h1 class="voice"><roundcube:label name="about" /></h1>
|
||||
|
||||
<roundcube:object name="aboutcontent" />
|
||||
|
||||
<div class="content frame-content">
|
||||
<h2 class="sysname">Roundcube Webmail <roundcube:object name="version" /></h2>
|
||||
<p class="copyright">Copyright © 2005-2016, The Roundcube Dev Team</p>
|
||||
<p class="license">This program is free software;
|
||||
you can redistribute it and/or modify it under the terms of the
|
||||
<a href="http://www.gnu.org/licenses/gpl.html" target="_blank">GNU General Public License</a>
|
||||
as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.<br/>
|
||||
Some <a href="https://roundcube.net/license" target="_blank">exceptions</a> for skins & plugins apply.
|
||||
</p>
|
||||
<div class="readtext">
|
||||
<h3><roundcube:label name="installedplugins" /></h3>
|
||||
<roundcube:object name="pluginlist" id="pluginlist" class="records-table" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
@ -0,0 +1,152 @@
|
||||
<roundcube:include file="includes/layout.html" />
|
||||
<roundcube:include file="includes/menu.html" />
|
||||
|
||||
<h1 class="voice"><roundcube:label name="addressbook" /></h1>
|
||||
|
||||
<!-- sources/groups list -->
|
||||
<div class="sidebar listbox" role="navigation" aria-labelledby="directorylist-header">
|
||||
<div class="header">
|
||||
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
|
||||
<span id="directorylist-header" class="header-title"><roundcube:label name="groups" /></span>
|
||||
</div>
|
||||
<div class="scroller">
|
||||
<roundcube:object name="directorylist" id="directorylist" class="treelist listing iconized" />
|
||||
<h3 class="voice"><roundcube:label name="savedsearches" /></h3>
|
||||
<roundcube:object name="savedsearchlist" id="savedsearchlist" class="treelist listing iconized" />
|
||||
</div>
|
||||
<div class="footer toolbar" role="toolbar">
|
||||
<roundcube:button command="group-create" type="link" title="newgroup" label="addgroup"
|
||||
class="button create disabled" classAct="button create" innerClass="inner" />
|
||||
<roundcube:button name="groupoptions" type="link" title="arialabelabookgroupoptions" label="actions"
|
||||
class="button actions" innerClass="inner" data-popup="groupoptions-menu" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- contacts list -->
|
||||
<div class="list listbox selected" aria-labelledby="aria-label-contactslist">
|
||||
<div class="header">
|
||||
<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
|
||||
<a class="button icon back-sidebar-button folders" href="#sidebar"><span class="inner"><roundcube:label name="groups" /></span></a>
|
||||
<roundcube:object name="addresslisttitle" label="contacts" tag="span" class="header-title" />
|
||||
<roundcube:object name="searchform" id="searchform" wrapper="searchbar toolbar"
|
||||
label="contactsearchform" buttontitle="findcontacts" options="search-menu" ariatag="h2" />
|
||||
<a class="button icon toolbar-menu-button" href="#list-menu"><span class="inner"><roundcube:label name="menu" /></span></a>
|
||||
</div>
|
||||
<roundcube:include file="includes/pagenav.html" />
|
||||
<div class="scroller">
|
||||
<h2 id="aria-label-contactslist" class="voice"><roundcube:label name="contacts" /></h2>
|
||||
<roundcube:object name="addresslist" id="contacts-table" class="listing iconized contactlist"
|
||||
noheader="true" role="listbox" data-list="contact_list"
|
||||
data-label-msg="listempty" data-label-ext="listusebutton" data-create-command="add" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- contact details frame -->
|
||||
<div class="content" role="main">
|
||||
<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
|
||||
<div class="header" role="toolbar" aria-labelledby="aria-label-toolbar">
|
||||
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
|
||||
<span class="header-title"></span>
|
||||
<!-- toolbar -->
|
||||
<div id="addressbooktoolbar" class="toolbar">
|
||||
<roundcube:button command="add" type="link"
|
||||
class="button create disabled" classAct="button create"
|
||||
label="create" title="newcontact" innerclass="inner" data-fab="true" />
|
||||
<roundcube:button command="print" type="link" data-hidden="small"
|
||||
class="button print disabled" classAct="button print"
|
||||
label="print" title="printcontact" innerclass="inner" />
|
||||
<roundcube:button command="delete" type="link"
|
||||
class="button delete disabled" classAct="button delete"
|
||||
label="delete" title="deletecontact" innerClass="inner" />
|
||||
<span class="spacer"></span>
|
||||
<!--
|
||||
<roundcube:button command="compose" type="link"
|
||||
class="button compose disabled" classAct="button compose"
|
||||
label="compose" title="writenewmessage" innerclass="inner" />
|
||||
-->
|
||||
<roundcube:button command="advanced-search" type="link"
|
||||
class="button search disabled" classAct="button search"
|
||||
label="search" title="advsearch" innerclass="inner" />
|
||||
<roundcube:container name="toolbar" id="addressbooktoolbar" />
|
||||
<roundcube:button command="import" type="link"
|
||||
class="button import disabled" classAct="button import"
|
||||
label="import" title="importcontacts" innerclass="inner" />
|
||||
<span class="dropbutton">
|
||||
<roundcube:button command="export" type="link"
|
||||
class="button export disabled" classAct="button export"
|
||||
label="export" title="exportvcards" innerclass="inner" />
|
||||
<a href="#export" class="button dropdown" data-popup="export-menu">
|
||||
<span class="inner"><roundcube:label name="arialabelcontactexportoptions" /></span>
|
||||
</a>
|
||||
</span>
|
||||
<roundcube:button name="contactmenulink" id="contactmenulink" type="link"
|
||||
class="button more" label="more" title="moreactions"
|
||||
data-popup="contact-menu" innerclass="inner" />
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="aria-label-contact-frame" class="voice"><roundcube:label name="contactproperties" /></h2>
|
||||
<div class="iframe-wrapper">
|
||||
<roundcube:object name="addressframe" id="contact-frame" src="/watermark.html" title="contactproperties"
|
||||
aria-labelledby="aria-label-contact-frame" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- popup menus -->
|
||||
<div id="export-menu" class="popupmenu">
|
||||
<h3 id="aria-label-export-menu" class="voice"><roundcube:label name="arialabelcontactexportoptions" /></h3>
|
||||
<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-export-menu">
|
||||
<roundcube:button type="link-menuitem" command="export" label="exportall" prop="sub" class="export all" classAct="export all active" />
|
||||
<roundcube:button type="link-menuitem" command="export-selected" label="exportsel" prop="sub" class="export selection" classAct="export selection active" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="groupoptions-menu" class="popupmenu">
|
||||
<h3 id="aria-label-groupoptions-menu" class="voice"><roundcube:label name="arialabelabookgroupoptions" /></h3>
|
||||
<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-groupoptions-menu">
|
||||
<roundcube:button type="link-menuitem" command="group-rename" label="grouprename" class="group rename" classAct="group rename active" />
|
||||
<roundcube:button type="link-menuitem" command="group-delete" label="groupdelete" class="group delete" classAct="group delete active" />
|
||||
<roundcube:button type="link-menuitem" command="search-create" label="searchsave" class="search" classAct="search active" />
|
||||
<roundcube:button type="link-menuitem" command="search-delete" label="searchdelete" class="search delete" classAct="search delete active" />
|
||||
<roundcube:container name="groupoptions" id="groupoptionsmenu" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="search-menu" class="popupmenu form" data-editable="true" data-popup-init="searchmenu">
|
||||
<h3 id="aria-label-search-menu" class="voice"><roundcube:label name="searchmod" /></h3>
|
||||
<ul class="toolbarmenu" role="menu" aria-labelledby="aria-label-search-menu">
|
||||
<li role="menuitem" class="checkbox"><label><input type="checkbox" name="s_mods[]" value="name" id="s_mod_name" /><roundcube:label name="name" /></label></li>
|
||||
<li role="menuitem" class="checkbox"><label><input type="checkbox" name="s_mods[]" value="firstname" id="s_mod_firstname" /><roundcube:label name="firstname" /></label></li>
|
||||
<li role="menuitem" class="checkbox"><label><input type="checkbox" name="s_mods[]" value="surname" id="s_mod_surname" /><roundcube:label name="surname" /></label></li>
|
||||
<li role="menuitem" class="checkbox"><label><input type="checkbox" name="s_mods[]" value="email" id="s_mod_email" /><roundcube:label name="email" /></label></li>
|
||||
<li role="menuitem" class="checkbox"><label><input type="checkbox" name="s_mods[]" value="*" id="s_mod_all" /><roundcube:label name="allfields" /></label></li>
|
||||
</ul>
|
||||
<div class="buttons"><button class="btn btn-primary icon search" href="#" onclick="if (rcmail.command('search')) UI.menu_hide('search-menu')"><roundcube:label name="search" /></button></div>
|
||||
</div>
|
||||
|
||||
<div id="dragcontact-menu" class="popupmenu">
|
||||
<h3 id="aria-label-dragcontact-menu" class="voice"><roundcube:label name="arialabeldropactionmenu" /></h3>
|
||||
<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-dragcontact-menu">
|
||||
<roundcube:button type="link-menuitem" command="move" onclick="return rcmail.drag_menu_action('move')" label="move" classAct="active" />
|
||||
<roundcube:button type="link-menuitem" command="copy" onclick="return rcmail.drag_menu_action('copy')" label="copy" classAct="active" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="contact-menu" class="popupmenu">
|
||||
<h3 id="aria-label-contact-menu" class="voice"><roundcube:label name="arialabelmorecontactactions" /></h3>
|
||||
<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-contact-menu">
|
||||
<roundcube:if condition="env:qrcode" />
|
||||
<roundcube:button type="link-menuitem" command="qrcode" label="qrcode" class="qrcode" classAct="qrcode active" />
|
||||
<roundcube:endif />
|
||||
<roundcube:button type="link-menuitem" command="group-assign-selected" label="groupassign" class="assigngroup" classAct="assigngroup active" innerclass="folder-selector-link" aria-haspopup="true" />
|
||||
<roundcube:button type="link-menuitem" command="group-remove-selected" label="groupremove" class="removegroup" classAct="removegroup active" />
|
||||
<roundcube:if condition="env:contact_move_enabled" />
|
||||
<roundcube:button type="link-menuitem" command="move" label="moveto" class="move" classAct="move active" innerclass="folder-selector-link" aria-haspopup="true" />
|
||||
<roundcube:endif />
|
||||
<roundcube:if condition="env:contact_copy_enabled" />
|
||||
<roundcube:button type="link-menuitem" command="copy" label="copyto" class="copy" classAct="copy active" innerclass="folder-selector-link" aria-haspopup="true" />
|
||||
<roundcube:endif />
|
||||
<roundcube:container name="contactmenu" id="contact-menu" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
@ -0,0 +1,73 @@
|
||||
<roundcube:include file="includes/layout.html" />
|
||||
|
||||
<h1 class="voice"><roundcube:label name="bouncemsg" /></h1>
|
||||
|
||||
<div class="formcontent">
|
||||
<roundcube:object name="composeFormHead" role="main" />
|
||||
<div id="bounceheaders" role="region" aria-labelledby="aria-label-composeheaders">
|
||||
<h2 id="aria-label-composeheaders" class="voice"><roundcube:label name="arialabelmessageheaders" /></h2>
|
||||
<div class="compose-headers">
|
||||
<div id="compose_from" class="form-group row">
|
||||
<label for="_from" class="col-2 col-form-label"><roundcube:label name="from" /></label>
|
||||
<div class="col-10">
|
||||
<div class="input-group">
|
||||
<roundcube:object name="composeHeaders" part="from" id="_from" form="form" tabindex="1" class="form-control" />
|
||||
<span class="input-group-append">
|
||||
<a href="#identities" onclick="return rcmail.command('identities')" class="input-group-text icon edit" title="<roundcube:label name="editidents" />" tabindex="1"><span class="inner"><roundcube:label name="editidents" /></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="compose_to" class="form-group row">
|
||||
<label for="_to" class="col-2 col-form-label"><roundcube:label name="to" /></label>
|
||||
<div class="col-10">
|
||||
<div class="input-group">
|
||||
<roundcube:object name="composeHeaders" part="to" id="_to" form="form" tabindex="1" aria-required="true" data-recipient-input="true" />
|
||||
<span class="input-group-append">
|
||||
<a href="#add-header" data-popup="headers-menu" class="input-group-text icon add" title="<roundcube:label name="addheader" />" tabindex="1"><span class="inner"><roundcube:label name="addheader" /></span></a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="compose_cc" class="hidden form-group row">
|
||||
<label for="_cc" class="col-2 col-form-label"><roundcube:label name="cc" /></label>
|
||||
<div class="col-10">
|
||||
<div class="input-group">
|
||||
<roundcube:object name="composeHeaders" part="cc" id="_cc" form="form" tabindex="1" data-recipient-input="true" />
|
||||
<span class="input-group-append">
|
||||
<a href="#delete" onclick="$('#_cc').val('').change()" class="input-group-text icon cancel" title="<roundcube:label name='delete' />" tabindex="1"><span class="inner"><roundcube:label name="delete" /></span></a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="compose_bcc" class="hidden form-group row">
|
||||
<label for="_bcc" class="col-2 col-form-label"><roundcube:label name="bcc" /></label>
|
||||
<div class="col-10">
|
||||
<div class="input-group">
|
||||
<roundcube:object name="composeHeaders" part="bcc" id="_bcc" form="form" tabindex="1" data-recipient-input="true" />
|
||||
<span class="input-group-append">
|
||||
<a href="#delete" onclick="$('#_bcc').val('').change()" class="input-group-text icon cancel" title="<roundcube:label name='delete' />" tabindex="1"><span class="inner"><roundcube:label name="delete" /></span></a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<roundcube:if condition="!config:no_save_sent_messages" />
|
||||
<div class="form-group row">
|
||||
<label for="compose-store-target" class="col-form-label col-6"><roundcube:label name="savesentmessagein" /></label>
|
||||
<div class="col-6">
|
||||
<roundcube:object name="storetarget" id="compose-store-target" noform="true" tabindex="2" class="form-control" />
|
||||
</div>
|
||||
</div>
|
||||
<roundcube:endif />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="headers-menu" class="popupmenu" data-popup-init="headersmenu">
|
||||
<h3 id="aria-label-headersmenu" class="voice"><roundcube:label name="arialabelheadersmenu" /></h3>
|
||||
<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-headersmenu">
|
||||
<li role="menuitem"><a data-target="cc" href="#" role="button" tabindex="-1"><roundcube:label name="cc" /></a></li>
|
||||
<li role="menuitem"><a data-target="bcc" href="#" role="button" tabindex="-1"><roundcube:label name="bcc" /></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
@ -0,0 +1,284 @@
|
||||
<roundcube:include file="includes/layout.html" />
|
||||
<roundcube:include file="includes/menu.html" condition="!env:extwin && !env:framed" />
|
||||
<roundcube:add_label name="recipientsadded" />
|
||||
<roundcube:add_label name="nocontactselected" />
|
||||
<roundcube:add_label name="recipient" />
|
||||
<roundcube:add_label name="recipientedit" />
|
||||
|
||||
<h1 class="voice"><roundcube:label name="compose" /></h1>
|
||||
|
||||
<!-- inline address book -->
|
||||
<div class="sidebar listbox" role="region" aria-labelledby="aria-label-composecontacts">
|
||||
<div class="header no-toolbar">
|
||||
<a class="button icon back-content-button" href="#content" data-hidden="big"><span class="inner"><roundcube:label name="back" /></span></a>
|
||||
<span id="aria-label-composecontacts" class="header-title"><roundcube:label name="contacts" /></span>
|
||||
<roundcube:object name="searchform" id="searchform" wrapper="searchbar toolbar"
|
||||
label="contactsearchform" buttontitle="findcontacts" ariatag="h2" />
|
||||
</div>
|
||||
<roundcube:include file="includes/pagenav.html" />
|
||||
<div class="scroller" tabindex="-1">
|
||||
<roundcube:object name="addressbooks" id="directorylist" class="treelist listing iconized"
|
||||
summary="ariasummarycomposecontacts" />
|
||||
<roundcube:object name="addresslist" id="contacts-table" class="listing iconized contactlist"
|
||||
noheader="true" role="listbox" data-list="contact_list" />
|
||||
</div>
|
||||
<div class="footer toolbar" role="toolbar">
|
||||
<roundcube:button command="add-recipient" prop="to" type="link" title="to"
|
||||
class="button addto disabled" classAct="button addto" innerClass="inner" content="To+" />
|
||||
<roundcube:button command="add-recipient" prop="cc" type="link" title="cc"
|
||||
class="button addcc disabled" classAct="button addcc" innerClass="inner" content="Cc+" />
|
||||
<roundcube:button command="add-recipient" prop="bcc" type="link" title="bcc"
|
||||
class="button addbcc disabled" classAct="button addbcc" innerClass="inner" content="Bcc+" />
|
||||
<roundcube:container name="compose-contacts-toolbar" id="compose-contacts-toolbar" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- compose options and attachments list -->
|
||||
<div class="list listbox">
|
||||
<div class="header">
|
||||
<a class="button icon back-content-button" href="#content" data-hidden="big"><span class="inner"><roundcube:label name="back" /></span></a>
|
||||
<span class="header-title"><roundcube:label name="optionsandattachments" /></span>
|
||||
</div>
|
||||
<div class="scroller">
|
||||
<!-- compose options -->
|
||||
<div id="compose-options" class="formcontent" role="region" aria-labelledby="aria-label-composeoptions">
|
||||
<h2 id="aria-label-composeoptions" class="voice"><roundcube:label name="arialabelcomposeoptions" /></h2>
|
||||
<roundcube:if condition="!in_array('mdn_default', (array)config:dont_override)" />
|
||||
<div class="form-group row form-check">
|
||||
<label for="compose-mdn" class="col-form-label col-6"><roundcube:label name="returnreceipt" /></label>
|
||||
<div class="col-6 form-check">
|
||||
<roundcube:object name="mdnCheckBox" id="compose-mdn" noform="true" tabindex="2" class="form-check-input" />
|
||||
</div>
|
||||
</div>
|
||||
<roundcube:endif />
|
||||
<roundcube:if condition="!in_array('dsn_default', (array)config:dont_override)" />
|
||||
<div class="form-group row form-check">
|
||||
<label for="compose-dsn" class="col-form-label col-6"><roundcube:label name="dsn" /></label>
|
||||
<div class="col-6 form-check">
|
||||
<roundcube:object name="dsnCheckBox" id="compose-dsn" noform="true" tabindex="2" class="form-check-input" />
|
||||
</div>
|
||||
</div>
|
||||
<roundcube:endif />
|
||||
<div class="form-group row">
|
||||
<label for="compose-priority" class="col-form-label col-6"><roundcube:label name="priority" /></label>
|
||||
<div class="col-6">
|
||||
<roundcube:object name="prioritySelector" id="compose-priority" noform="true" tabindex="2" class="form-control" />
|
||||
</div>
|
||||
</div>
|
||||
<roundcube:if condition="!config:no_save_sent_messages" />
|
||||
<div class="form-group row">
|
||||
<label for="compose-store-target" class="col-form-label col-6"><roundcube:label name="savesentmessagein" /></label>
|
||||
<div class="col-6">
|
||||
<roundcube:object name="storetarget" id="compose-store-target" noform="true" tabindex="2" class="form-control" />
|
||||
</div>
|
||||
</div>
|
||||
<roundcube:endif />
|
||||
<roundcube:container name="composeoptions" id="compose-options" />
|
||||
<roundcube:if condition="!in_array('htmleditor', (array)config:dont_override)" />
|
||||
<div class="form-group row hidden">
|
||||
<label for="editor-selector" class="col-form-label col-6"><roundcube:label name="editortype" /></label>
|
||||
<div class="col-6">
|
||||
<roundcube:object name="editorSelector" id="editor-selector" editorid="composebody" noform="true" tabindex="2" class="form-control" />
|
||||
</div>
|
||||
</div>
|
||||
<roundcube:endif />
|
||||
</div>
|
||||
<div id="compose-attachments" class="file-upload" role="region" aria-labelledby="aria-label-compose-attachments">
|
||||
<h2 id="aria-label-compose-attachments" class="voice"><roundcube:label name="attachments" /></h2>
|
||||
<div class="upload-form">
|
||||
<roundcube:object name="composeAttachmentForm" mode="hint" />
|
||||
<button class="btn btn-secondary attach" tabindex="2" href="#" onclick="rcmail.upload_input('uploadform')"><roundcube:label name="addattachment" /></button>
|
||||
</div>
|
||||
<roundcube:object name="composeAttachmentList" id="attachment-list" class="attachmentslist" tabindex="2" />
|
||||
<roundcube:object name="fileDropArea" id="compose-attachments" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content listbox selected" role="main">
|
||||
<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
|
||||
<div class="header">
|
||||
<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
|
||||
<span class="header-title"><roundcube:label name="compose" /></span>
|
||||
<!-- toolbar -->
|
||||
<div id="messagetoolbar" class="toolbar" role="toolbar" aria-labelledby="aria-label-toolbar">
|
||||
<a class="button settings" href="#options" onclick="UI.show_list(true)" data-hidden="big">
|
||||
<span class="inner"><roundcube:label name="optionsandattachments"></span>
|
||||
</a>
|
||||
<a class="button addressbook" href="#contacts" onclick="UI.show_sidebar()" data-hidden="big">
|
||||
<span class="inner"><roundcube:label name="contacts"></span>
|
||||
</a>
|
||||
<roundcube:button command="savedraft" type="link" class="button save draft disabled" classAct="button save draft"
|
||||
label="save" title="savemessage" tabindex="2" innerclass="inner" data-content-button="true" />
|
||||
<span class="spacer"></span>
|
||||
<roundcube:button name="addattachment" type="link" class="button attach"
|
||||
label="attach" title="addattachment" data-hidden="small"
|
||||
onclick="if (!$(this).is('.disabled')) rcmail.upload_input('uploadform')"
|
||||
aria-haspopup="true" aria-expanded="false" tabindex="2" innerclass="inner" />
|
||||
<roundcube:button command="insert-sig" type="link" class="button signature disabled" classAct="button signature"
|
||||
label="signature" title="insertsignature" tabindex="2" innerclass="inner" />
|
||||
<a href="#responses" class="button responses" label="responses" title="<roundcube:label name='insertresponse' />" unselectable="on" tabindex="2" data-popup="responses-menu">
|
||||
<span class="inner"><roundcube:label name="responses" /></span>
|
||||
</a>
|
||||
<a id="composeoptionslink" class="button settings hidden" href="#options" onclick="UI.show_list(); $(this).addClass('hidden'); $('#composecontactslink').removeClass('hidden')" data-hidden="large,small">
|
||||
<span class="inner"><roundcube:label name="options"></span>
|
||||
</a>
|
||||
<a id="composecontactslink" class="button addressbook" href="#contacts" onclick="UI.show_sidebar(true); $(this).addClass('hidden'); $('#composeoptionslink').removeClass('hidden')" data-hidden="large,small">
|
||||
<span class="inner"><roundcube:label name="contacts"></span>
|
||||
</a>
|
||||
<roundcube:if condition="config:enable_spellcheck" />
|
||||
<span class="dropbutton">
|
||||
<roundcube:button command="spellcheck" type="link" class="button spellcheck disabled"
|
||||
classAct="button spellcheck" classSel="button spellcheck pressed"
|
||||
label="spellcheck" title="checkspelling" tabindex="2" innerclass="inner" />
|
||||
<a href="#languages" class="button dropdown" tabindex="2" data-popup="spell-menu">
|
||||
<span class="inner"><roundcube:label name="language" /></span>
|
||||
</a>
|
||||
</span>
|
||||
<roundcube:endif />
|
||||
<span class="dropbutton" style="display:none">
|
||||
<roundcube:button command="compose-encrypted" type="link" class="button encrypt disabled"
|
||||
classAct="button encrypt" classSel="button encrypt selected" innerclass="inner"
|
||||
label="encrypt" title="encryptmessagemailvelope" tabindex="2" />
|
||||
<a href="#encryption" id="encryption-menu-button" class="button dropdown" tabindex="2" data-popup="encryption-menu">
|
||||
<span class="inner"><roundcube:label name="encryptmessagemailvelope" /></span>
|
||||
</a>
|
||||
</span>
|
||||
<roundcube:container name="toolbar" id="compose-toolbar" />
|
||||
</div>
|
||||
</div>
|
||||
<div id="compose-content" class="formcontainer content scroller">
|
||||
<roundcube:object name="composeFormHead" role="main" class="formcontent" />
|
||||
<!-- message headers -->
|
||||
<div id="compose-headers" role="region" aria-labelledby="aria-label-composeheaders">
|
||||
<h2 id="aria-label-composeheaders" class="voice"><roundcube:label name="arialabelmessageheaders" /></h2>
|
||||
<div class="compose-headers">
|
||||
<div id="compose_from" class="form-group row">
|
||||
<label for="_from" class="col-2 col-form-label"><roundcube:label name="from" /></label>
|
||||
<div class="col-10">
|
||||
<div class="input-group">
|
||||
<roundcube:object name="composeHeaders" part="from" id="_from" form="form" tabindex="1" class="form-control" />
|
||||
<span class="input-group-append">
|
||||
<a href="#identities" onclick="return rcmail.command('identities')" class="input-group-text icon edit" title="<roundcube:label name="editidents" />" tabindex="1"><span class="inner"><roundcube:label name="editidents" /></span></a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="compose_to" class="form-group row">
|
||||
<label for="_to" class="col-2 col-form-label"><roundcube:label name="to" /></label>
|
||||
<div class="col-10">
|
||||
<div class="input-group">
|
||||
<roundcube:object name="composeHeaders" part="to" id="_to" form="form" tabindex="1" aria-required="true" data-recipient-input="true" />
|
||||
<span class="input-group-append">
|
||||
<a href="#add-header" data-popup="headers-menu" class="input-group-text icon add" title="<roundcube:label name="addheader" />" tabindex="1"><span class="inner"><roundcube:label name="addheader" /></span></a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="compose_cc" class="hidden form-group row">
|
||||
<label for="_cc" class="col-2 col-form-label"><roundcube:label name="cc" /></label>
|
||||
<div class="col-10">
|
||||
<div class="input-group">
|
||||
<roundcube:object name="composeHeaders" part="cc" id="_cc" form="form" tabindex="1" data-recipient-input="true" />
|
||||
<span class="input-group-append">
|
||||
<a href="#delete" onclick="$('#_cc').val('').change()" class="input-group-text icon cancel" title="<roundcube:label name='delete' />" tabindex="1"><span class="inner"><roundcube:label name="delete" /></span></a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="compose_bcc" class="hidden form-group row">
|
||||
<label for="_bcc" class="col-2 col-form-label"><roundcube:label name="bcc" /></label>
|
||||
<div class="col-10">
|
||||
<div class="input-group">
|
||||
<roundcube:object name="composeHeaders" part="bcc" id="_bcc" form="form" tabindex="1" data-recipient-input="true" />
|
||||
<span class="input-group-append">
|
||||
<a href="#delete" onclick="$('#_bcc').val('').change()" class="input-group-text icon cancel" title="<roundcube:label name='delete' />" tabindex="1"><span class="inner"><roundcube:label name="delete" /></span></a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="compose_replyto" class="hidden form-group row">
|
||||
<label for="_replyto" class="col-2 col-form-label"><roundcube:label name="replyto" /></label>
|
||||
<div class="col-10">
|
||||
<div class="input-group">
|
||||
<roundcube:object name="composeHeaders" part="replyto" id="_replyto" form="form" tabindex="1" data-recipient-input="true" />
|
||||
<span class="input-group-append">
|
||||
<a href="#delete" onclick="$('#_replyto').val('').change()" class="input-group-text icon cancel" title="<roundcube:label name='delete' />" tabindex="1"><span class="inner"><roundcube:label name="delete" /></span></a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="compose_followupto" class="hidden form-group row">
|
||||
<label for="_followupto" class="col-2 col-form-label"><roundcube:label name="followupto" /></label>
|
||||
<div class="col-10">
|
||||
<div class="input-group">
|
||||
<roundcube:object name="composeHeaders" part="followupto" id="_followupto" form="form" tabindex="1" data-recipient-input="true" />
|
||||
<span class="input-group-append">
|
||||
<a href="#delete" onclick="$('#_followupto').val('').change()" class="input-group-text icon cancel" title="<roundcube:label name='delete' />" tabindex="1"><span class="inner"><roundcube:label name="delete" /></span></a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="compose_subject" class="form-group row">
|
||||
<label for="_subject" class="col-2 col-form-label"><roundcube:label name="subject" /></label>
|
||||
<div class="col-10">
|
||||
<roundcube:object name="composeSubject" id="_subject" form="form" tabindex="1" class="form-control" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- message compose body -->
|
||||
<div id="composebodycontainer">
|
||||
<label for="composebody" class="voice"><roundcube:label name="arialabelmessagebody" /></label>
|
||||
<roundcube:object name="composeBody" id="composebody" form="form" cols="70" rows="20" class="form-control" tabindex="1" />
|
||||
</div>
|
||||
</form>
|
||||
<div class="formbuttons">
|
||||
<roundcube:button command="send" class="btn btn-primary send" label="send" tabindex="1" data-content-button="true" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<roundcube:object name="composeAttachmentForm" id="uploadform" mode="smart" />
|
||||
|
||||
<div id="spell-menu" class="popupmenu" data-popup-init="spellmenu"></div>
|
||||
|
||||
<div id="headers-menu" class="popupmenu" data-popup-init="headersmenu">
|
||||
<h3 id="aria-label-headersmenu" class="voice"><roundcube:label name="arialabelheadersmenu" /></h3>
|
||||
<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-headersmenu">
|
||||
<li role="menuitem"><a data-target="cc" href="#" role="button" tabindex="-1" class="recipient"><roundcube:label name="cc" /></a></li>
|
||||
<li role="menuitem"><a data-target="bcc" href="#" role="button" tabindex="-1" class="recipient"><roundcube:label name="bcc" /></a></li>
|
||||
<li role="menuitem"><a data-target="replyto" href="#" role="button" tabindex="-1" class="recipient"><roundcube:label name="replyto" /></a></li>
|
||||
<li role="menuitem"><a data-target="followupto" href="#" role="button" tabindex="-1" class="recipient"><roundcube:label name="followupto" /></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="responses-menu" class="popupmenu">
|
||||
<h3 id="aria-label-responsesmenu" class="voice"><roundcube:label name="arialabelresponsesmenu" /></h3>
|
||||
<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-responsesmenu">
|
||||
<li role="separator" class="separator"><label><roundcube:label name="insertresponse" /></label></li>
|
||||
<roundcube:object name="responseslist" id="responseslist" tagname="ul" itemclass="active" />
|
||||
<li role="separator" class="separator"><label><roundcube:label name="manageresponses" /></label></li>
|
||||
<roundcube:button command="save-response" type="link-menuitem" label="newresponse" class="create responses" classAct="create responses active" unselectable="on" />
|
||||
<roundcube:button command="responses" type="link-menuitem" label="editresponses" class="edit responses" classAct="edit responses active" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="attachmentmenu" class="popupmenu">
|
||||
<h3 id="aria-label-attachmentmenu" class="voice"><roundcube:label name="arialabelattachmentmenu" /></h3>
|
||||
<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-attachmentmenu">
|
||||
<roundcube:button command="open-attachment" id="attachmenuopen" type="link-menuitem" label="open" class="extwin" classAct="extwin active" />
|
||||
<roundcube:button command="download-attachment" id="attachmenudownload" type="link-menuitem" label="download" class="download" classAct="download active" />
|
||||
<roundcube:button command="rename-attachment" id="attachmenurename" type="link-menuitem" label="rename" class="rename" classAct="rename active" />
|
||||
<roundcube:container name="attachmentmenu" id="attachmentoptionsmenu" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="encryption-menu" class="popupmenu">
|
||||
<ul class="toolbarmenu listing" role="menu">
|
||||
<roundcube:button command="compose-encrypted" type="link-menuitem" label="encryptmessage" class="encrypt" classAct="encrypt active" />
|
||||
<roundcube:button command="compose-encrypted-signed" type="link-menuitem" label="encryptandsign" class="encrypt sign" classAct="encrypt sign active" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
@ -0,0 +1,23 @@
|
||||
<roundcube:include file="includes/layout.html" />
|
||||
|
||||
<h1 class="voice"><roundcube:label name="contactproperties" /></h1>
|
||||
|
||||
<div class="formcontent">
|
||||
<div class="contact-header">
|
||||
<div id="contactphoto" class="contact-photo">
|
||||
<roundcube:object name="contactphoto" id="contactpic" placeholder="/images/contactpic.png"
|
||||
placeholderGroup="/images/contactgroup.png" />
|
||||
</div>
|
||||
<roundcube:object name="contacthead" id="contacthead" class="contact-head readonly" with-source="true" />
|
||||
</div>
|
||||
<div id="contacttabs" class="tabbed">
|
||||
<roundcube:object name="contactdetails" fieldset-class="propform groupped readonly"
|
||||
short-legend-labels="true" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="formbuttons">
|
||||
<roundcube:button command="edit" class="btn btn-primary edit" label="edit" condition="!ENV:readonly" />
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
@ -0,0 +1,29 @@
|
||||
<roundcube:include file="includes/layout.html" />
|
||||
|
||||
<h1 class="voice"><roundcube:object name="steptitle" /></h1>
|
||||
|
||||
<roundcube:form name="editform" method="post" id="contact-details" class="formcontent">
|
||||
<div class="contact-header">
|
||||
<fieldset id="contactphoto" class="contact-photo">
|
||||
<legend class="voice"><roundcube:label name="contactphoto" /></legend>
|
||||
<roundcube:object name="contactphoto" id="contactpic" class="image-upload" placeholder="/images/contactpic.png" />
|
||||
<roundcube:if condition="env:photocol" />
|
||||
<roundcube:object name="fileDropArea" id="contactpic" />
|
||||
<roundcube:endif />
|
||||
</fieldset>
|
||||
<roundcube:object name="contactedithead" id="contacthead" form="editform"
|
||||
class="propform contact-head" use-labels="true" with-source="true" />
|
||||
</div>
|
||||
<div id="contacttabs" class="tabbed">
|
||||
<roundcube:object name="contacteditform" textareacols="60" form="editform"
|
||||
fieldset-class="propform groupped" compact-form="true" short-legend-labels="true" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="formbuttons">
|
||||
<roundcube:button command="save" class="btn btn-primary submit" label="save" />
|
||||
</div>
|
||||
|
||||
<roundcube:object name="photoUploadForm" id="upload-form" mode="smart" />
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
@ -0,0 +1,9 @@
|
||||
<roundcube:include file="includes/layout.html" />
|
||||
|
||||
<h1 class="voice"><roundcube:label name="addressbook" /> : <roundcube:label name="importcontacts" /></h1>
|
||||
|
||||
<div class="formcontent">
|
||||
<roundcube:object name="importstep" class="propform" />
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
@ -0,0 +1,17 @@
|
||||
<roundcube:include file="includes/layout.html" />
|
||||
|
||||
<div class="print-content formcontent" role="main">
|
||||
<div class="contact-header">
|
||||
<div id="contactphoto" class="contact-photo">
|
||||
<roundcube:object name="contactphoto" id="contactpic" placeholder="/images/contactpic.png"
|
||||
placeholderGroup="/images/contactgroup.png" />
|
||||
</div>
|
||||
<roundcube:object name="contacthead" id="contacthead" class="contact-head readonly" with-source="true" />
|
||||
</div>
|
||||
<div id="contacttabs">
|
||||
<roundcube:object name="contactdetails" fieldset-class="propform groupped readonly"
|
||||
short-legend-labels="true" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
@ -0,0 +1,9 @@
|
||||
<roundcube:include file="includes/layout.html" />
|
||||
|
||||
<h1 class="voice"><roundcube:label name="addressbook" /> : <roundcube:label name="advsearch" /></h1>
|
||||
|
||||
<div class="formcontent">
|
||||
<roundcube:object name="searchform" id="advsearchform" class="tabbed propform" short-legend-labels="true" />
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
@ -0,0 +1,7 @@
|
||||
<roundcube:include file="includes/layout.html" />
|
||||
|
||||
<div class="content frame-content">
|
||||
<roundcube:object name="dialogcontent" />
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
@ -0,0 +1,20 @@
|
||||
<roundcube:include file="includes/layout.html" />
|
||||
|
||||
<roundcube:if condition="!env:framed && !env:extwin" />
|
||||
<roundcube:include file="includes/menu.html" />
|
||||
<div class="content selected" role="main">
|
||||
<div class="header">
|
||||
<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
|
||||
</div>
|
||||
<div class="frame-content scroller">
|
||||
<roundcube:else />
|
||||
<div class="content selected" role="main">
|
||||
<div class="frame-content scroller">
|
||||
<roundcube:endif />
|
||||
|
||||
$__page_content
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
@ -0,0 +1,13 @@
|
||||
<roundcube:include file="includes/layout.html" />
|
||||
|
||||
<h1 class="voice"><roundcube:label name="folderproperties" /></h1>
|
||||
|
||||
<div class="formcontent">
|
||||
<roundcube:object name="folderdetails" class="propform" />
|
||||
</div>
|
||||
|
||||
<div class="formbuttons">
|
||||
<roundcube:button command="save" class="btn btn-primary submit" label="save" />
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
@ -0,0 +1,59 @@
|
||||
<roundcube:include file="includes/layout.html" />
|
||||
<roundcube:include file="includes/menu.html" />
|
||||
<roundcube:include file="includes/settings-menu.html" />
|
||||
|
||||
<h1 class="voice"><roundcube:label name="folders" /></h1>
|
||||
|
||||
<!-- folders list -->
|
||||
<div class="list listbox selected" aria-labelledby="aria-label-folderslist">
|
||||
<div class="header">
|
||||
<a class="button icon back-sidebar-button" href="#sidebar"><span class="inner"><roundcube:label name="settings" /></span></a>
|
||||
<span id="aria-label-folderslist" class="header-title"><roundcube:label name="folders" /></span>
|
||||
<roundcube:object name="searchform" id="foldersearch" wrapper="searchbar toolbar"
|
||||
label="foldersearchform" buttontitle="findfolders" options="search-filter" ariatag="h2" />
|
||||
<a class="button icon toolbar-menu-button" href="#list-menu"><span class="inner"><roundcube:label name="menu" /></span></a>
|
||||
</div>
|
||||
<div class="scroller" tabindex="-1">
|
||||
<roundcube:object name="foldersubscription" id="subscription-table"
|
||||
class="treelist listing folderlist iconized" role="listbox" data-list="subscription_list"
|
||||
data-label-msg="listempty" data-label-ext="listusebutton" data-create-command="folder-create" />
|
||||
</div>
|
||||
<div class="footer">
|
||||
<roundcube:if condition="env:quota" />
|
||||
<div id="quotadisplay" class="quota-widget">
|
||||
<span class="voice"><roundcube:label name="quota"></span>
|
||||
<roundcube:object name="quotaDisplay" class="count" display="text" />
|
||||
</div>
|
||||
<roundcube:endif />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- folder info frame -->
|
||||
<div class="content" role="main">
|
||||
<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
|
||||
<div class="header" role="toolbar" aria-labelledby="aria-label-toolbar">
|
||||
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
|
||||
<span class="header-title"></span>
|
||||
<!-- toolbar -->
|
||||
<div id="folderstoolbar" class="toolbar">
|
||||
<roundcube:button command="create-folder" type="link"
|
||||
class="button create disabled" classAct="button create"
|
||||
label="create" title="createfolder" innerClass="inner" data-fab="true" />
|
||||
<roundcube:button command="delete-folder" type="link"
|
||||
class="button delete disabled" classAct="button delete"
|
||||
label="delete" title="delete" innerclass="inner" />
|
||||
<roundcube:button command="purge" type="link"
|
||||
class="button purge disabled" classAct="button purge"
|
||||
label="empty" title="empty" innerclass="inner" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="iframe-wrapper">
|
||||
<roundcube:object name="folderframe" id="preferences-frame" src="/watermark.html" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="search-filter" class="popupmenu form nolist toolbarmenu" data-editable="true">
|
||||
<roundcube:object name="folderfilter" id="folderlist-filter" noheader="true" />
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
@ -0,0 +1,45 @@
|
||||
<roundcube:include file="includes/layout.html" />
|
||||
<roundcube:include file="includes/menu.html" />
|
||||
<roundcube:include file="includes/settings-menu.html" />
|
||||
|
||||
<h1 class="voice"><roundcube:label name="settings" /> : <roundcube:label name="identities" /></h1>
|
||||
|
||||
<!-- responses list -->
|
||||
<div class="list listbox selected" aria-labelledby="aria-label-identitieslist">
|
||||
<div class="header">
|
||||
<a class="button icon back-sidebar-button" href="#sidebar"><span class="inner"><roundcube:label name="settings" /></span></a>
|
||||
<span id="aria-label-identitieslist" class="header-title"><roundcube:label name="identities" /></span>
|
||||
<a class="button icon toolbar-menu-button" href="#list-menu"><span class="inner"><roundcube:label name="menu" /></span></a>
|
||||
</div>
|
||||
<div class="scroller">
|
||||
<roundcube:object name="identitieslist" id="identities-table" class="listing"
|
||||
noheader="true" role="listbox" data-list="identity_list"
|
||||
data-label-msg="listempty" data-label-ext="listusebutton" data-create-command="add" />
|
||||
</div>
|
||||
<div class="footer"></div>
|
||||
</div>
|
||||
|
||||
<!-- response details frame -->
|
||||
<div class="content" role="main">
|
||||
<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
|
||||
<div class="header" role="toolbar" aria-labelledby="aria-label-toolbar">
|
||||
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
|
||||
<span class="header-title"></span>
|
||||
<!-- toolbar -->
|
||||
<div id="identitiestoolbar" class="toolbar">
|
||||
<roundcube:button command="add" type="link"
|
||||
label="create" title="newidentity" innerClass="inner"
|
||||
class="button create disabled" classAct="button create"
|
||||
condition="config:identities_level:0<2" data-fab="true" />
|
||||
<roundcube:button command="delete" type="link"
|
||||
label="delete" title="delete" innerClass="inner"
|
||||
class="button delete disabled" classAct="button delete"
|
||||
condition="config:identities_level:0<2" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="iframe-wrapper">
|
||||
<roundcube:object name="identityframe" id="preferences-frame" src="/watermark.html" title="arialabelidentityeditfrom" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
@ -0,0 +1,13 @@
|
||||
<roundcube:include file="includes/layout.html" />
|
||||
|
||||
<h1 class="voice"><roundcube:object name="steptitle" /></h1>
|
||||
|
||||
<div class="formcontent">
|
||||
<roundcube:object name="identityform" class="propform" size="40" textareacols="40" textarearows="6" />
|
||||
</div>
|
||||
|
||||
<div class="formbuttons">
|
||||
<roundcube:button command="save" class="btn btn-primary submit" label="save" condition="!env:readonly" />
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
@ -0,0 +1,14 @@
|
||||
<roundcube:if condition="!env:framed || env:extwin" />
|
||||
</div>
|
||||
<roundcube:if condition="config:support_url" />
|
||||
<a href="<roundcube:var name='config:support_url' />" target="_blank" id="supportlink" class="hidden"><roundcube:label name="support" /></a>
|
||||
<roundcube:endif />
|
||||
<roundcube:endif />
|
||||
|
||||
<roundcube:object name="message" id="messagestack" />
|
||||
|
||||
<script src="/bootstrap/bootstrap.bundle.min.js"></script>
|
||||
<script src="/ui.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,34 @@
|
||||
<roundcube:add_label name="back" />
|
||||
<roundcube:add_label name="errortitle" />
|
||||
<roundcube:add_label name="options" />
|
||||
<roundcube:add_label name="plaintoggle" />
|
||||
<roundcube:add_label name="htmltoggle" />
|
||||
<roundcube:add_label name="previous" />
|
||||
<roundcube:add_label name="next" />
|
||||
<roundcube:object name="doctype" value="html5" />
|
||||
<roundcube:if condition="!env:framed || env:extwin" />
|
||||
<html>
|
||||
<roundcube:else />
|
||||
<html class="iframe">
|
||||
<roundcube:endif />
|
||||
<head>
|
||||
<title><roundcube:object name="pagetitle" /></title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, maximum-scale=1.0" id="viewport">
|
||||
<link rel="shortcut icon" href="/images/favicon.ico">
|
||||
<link rel="stylesheet" href="/bootstrap/bootstrap.min.css">
|
||||
<roundcube:if condition="config:devel_mode" />
|
||||
<link rel="stylesheet/less" href="/styles/styles.less">
|
||||
<roundcube:link rel="stylesheet/less" href="/styles/print.less" condition="env:action == 'print'" />
|
||||
<script src="/styles/less.min.js" data-env="development"></script>
|
||||
<roundcube:else />
|
||||
<link rel="stylesheet" href="/styles/styles.css">
|
||||
<roundcube:link rel="stylesheet" href="/styles/print.css" condition="env:action == 'print'" />
|
||||
<roundcube:endif />
|
||||
<roundcube:if condition="template:name == 'error'" />
|
||||
<script src="program/js/jquery.min.js"></script>
|
||||
<roundcube:endif />
|
||||
</head>
|
||||
<body class="task-<roundcube:exp expression="env:task ?: 'error'">">
|
||||
<roundcube:if condition="!env:framed || env:extwin" />
|
||||
<div id="<roundcube:exp expression="env:action == 'print' ? 'print-' : ''">layout">
|
||||
<roundcube:endif />
|
||||
@ -0,0 +1,85 @@
|
||||
<roundcube:add_label name="viewsource" />
|
||||
<div id="mailtoolbar" class="toolbar" role="toolbar">
|
||||
<roundcube:button command="reply" type="link"
|
||||
class="button reply disabled" classAct="button reply"
|
||||
label="reply" title="replytomessage" innerclass="inner" data-content-button="true" />
|
||||
<span class="dropbutton">
|
||||
<roundcube:button command="reply-all" type="link"
|
||||
class="button reply-all disabled" classAct="button reply-all"
|
||||
label="replyall" title="replytoallmessage" innerclass="inner" />
|
||||
<a href="#reply-all" id="replyallmenulink" class="button dropdown" data-popup="replyall-menu" tabindex="0">
|
||||
<span class="inner"><roundcube:label name="arialabelreplyalloptions" /></span>
|
||||
</a>
|
||||
</span>
|
||||
<span class="dropbutton">
|
||||
<roundcube:button command="forward" type="link"
|
||||
class="button forward disabled" classAct="button forward"
|
||||
label="forward" title="forwardmessage" innerclass="inner" />
|
||||
<a href="#forward" id="forwardmenulink" class="button dropdown" data-popup="forward-menu" tabindex="0">
|
||||
<span class="inner"><roundcube:label name="arialabelforwardingoptions" /></span>
|
||||
</a>
|
||||
</span>
|
||||
<span class="spacer"></span>
|
||||
<roundcube:button command="delete" type="link"
|
||||
class="button delete disabled" classAct="button delete"
|
||||
label="delete" title="deletemessage" innerclass="inner" />
|
||||
<roundcube:if condition="template:name == 'message'" />
|
||||
<roundcube:button command="print" type="link" data-hidden="small"
|
||||
class="button print disabled" classAct="button print"
|
||||
label="print" title="printmessage" innerclass="inner" />
|
||||
<roundcube:endif />
|
||||
<roundcube:container name="toolbar" id="mailtoolbar" />
|
||||
<roundcube:button name="markmenulink" id="markmessagemenulink" type="link"
|
||||
class="button markmessage" label="mark" title="markmessages"
|
||||
data-popup="markmessage-menu" innerclass="inner" />
|
||||
<roundcube:button name="messagemenulink" id="messagemenulink" type="link"
|
||||
class="button more" label="more" title="moreactions"
|
||||
data-popup="message-menu" innerclass="inner" />
|
||||
</div>
|
||||
|
||||
<div id="forward-menu" class="popupmenu">
|
||||
<h3 id="aria-label-forward-menu" class="voice"><roundcube:label name="arialabelforwardingoptions" /></h3>
|
||||
<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-forward-menu">
|
||||
<roundcube:button type="link-menuitem" command="forward-inline" label="forwardinline" prop="sub" class="forward inline" classAct="forward inline active" />
|
||||
<roundcube:button type="link-menuitem" command="forward-attachment" label="forwardattachment" prop="sub" class="forward attachment" classAct="forward attachment active" />
|
||||
<roundcube:button type="link-menuitem" command="bounce" label="bouncemsg" class="forward bounce" classAct="forward bounce active" />
|
||||
<roundcube:container name="forwardmenu" id="forward-menu" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="replyall-menu" class="popupmenu">
|
||||
<h3 id="aria-label-replyall-menu" class="voice"><roundcube:label name="arialabelreplyalloptions" /></h3>
|
||||
<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-replyall-menu">
|
||||
<roundcube:button type="link-menuitem" command="reply-all" label="replyall" prop="sub" class="reply all" classAct="reply all active" />
|
||||
<roundcube:button type="link-menuitem" command="reply-list" label="replylist" prop="sub" class="reply list" classAct="reply list active" />
|
||||
<roundcube:container name="replyallmenu" id="replyall-menu" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="message-menu" class="popupmenu">
|
||||
<h3 id="aria-label-message-menu" class="voice"><roundcube:label name="arialabelmoremessageactions" /></h3>
|
||||
<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-message-menu">
|
||||
<roundcube:button type="link-menuitem" command="print" label="printmessage" class="print" classAct="print active" data-hidden="small"/>
|
||||
<roundcube:if condition="template:name != 'message'" />
|
||||
<roundcube:button type="link-menuitem" command="import-messages" label="import" class="import" classAct="import active" name="messageimport" onclick="if (rcmail.command_enabled('import-messages')) rcmail.upload_input('uploadform')" />
|
||||
<roundcube:endif />
|
||||
<roundcube:button type="link-menuitem" command="download" label="export" class="download" classAct="download active" />
|
||||
<roundcube:button type="link-menuitem" command="edit" prop="new" label="editasnew" class="edit asnew" classAct="edit asnew active" />
|
||||
<roundcube:button type="link-menuitem" command="viewsource" label="viewsource" class="source" classAct="source active" />
|
||||
<roundcube:button type="link-menuitem" command="move" label="moveto" class="move" classAct="move active" innerclass="folder-selector-link" aria-haspopup="true" />
|
||||
<roundcube:button type="link-menuitem" command="copy" label="copyto" class="copy" classAct="copy active" innerclass="folder-selector-link" aria-haspopup="true" />
|
||||
<roundcube:button type="link-menuitem" command="open" label="openinextwin" target="_blank" class="extwin" classAct="extwin active" data-hidden="small" />
|
||||
<roundcube:container name="messagemenu" id="message-menu" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="markmessage-menu" class="popupmenu">
|
||||
<h3 id="aria-label-markmessage-menu" class="voice"><roundcube:label name="arialabelmarkmessagesas" /></h3>
|
||||
<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-markmessage-menu">
|
||||
<roundcube:button type="link-menuitem" command="mark" prop="read" label="markread" classAct="read active" class="read" />
|
||||
<roundcube:button type="link-menuitem" command="mark" prop="unread" label="markunread" classAct="unread active" class="unread" />
|
||||
<roundcube:button type="link-menuitem" command="mark" prop="flagged" label="markflagged" classAct="flag active" class="flag" />
|
||||
<roundcube:button type="link-menuitem" command="mark" prop="unflagged" label="markunflagged" classAct="unflag active" class="unflag" />
|
||||
<roundcube:container name="markmenu" id="markmessage-menu" />
|
||||
</ul>
|
||||
</div>
|
||||
@ -0,0 +1,26 @@
|
||||
<div class="menu">
|
||||
<h2 id="aria-label-tasknav" class="voice"><roundcube:label name="arialabeltasknav" /></h2>
|
||||
<div class="popover-header">
|
||||
<a class="button icon cancel"><roundcube:label name="close" /></a>
|
||||
</div>
|
||||
<div id="taskmenu" role="navigation" aria-labelledby="aria-label-tasknav">
|
||||
<span class="action-buttons">
|
||||
<roundcube:button command="compose" type="link" class="button compose"
|
||||
label="compose" title="writenewmessage" innerclass="inner"
|
||||
data-fab="true" data-fab-task="mail" data-fab-action="none" />
|
||||
</span>
|
||||
<roundcube:button command="mail" label="mail" type="link" innerClass="inner"
|
||||
class="button mail" classAct="button mail" classSel="button mail selected" />
|
||||
<roundcube:button command="addressbook" label="contacts" type="link" innerClass="inner"
|
||||
class="button addressbook" classAct="button addressbook" classSel="button addressbook selected" />
|
||||
<roundcube:container name="taskbar" id="taskmenu" />
|
||||
<roundcube:button command="settings" label="settings" type="link" innerClass="inner"
|
||||
class="button settings" classAct="button settings" classSel="button settings selected" />
|
||||
<span class="special-buttons">
|
||||
<roundcube:button name="about" label="about" type="link"
|
||||
class="button about" innerClass="inner" onclick="UI.about_dialog(this)" />
|
||||
<roundcube:button command="logout" label="logout" type="link"
|
||||
class="button logout" innerClass="inner" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,24 @@
|
||||
<div class="pagenav toolbar" role="toolbar">
|
||||
<roundcube:button command="firstpage" type="link"
|
||||
class="button firstpage disabled" classAct="button firstpage"
|
||||
title="firstpage" label="first" innerclass="inner" />
|
||||
<roundcube:button command="previouspage" type="link"
|
||||
class="button prevpage disabled" classAct="button prevpage"
|
||||
title="previouspage" label="previous" innerclass="inner" />
|
||||
<roundcube:if condition="template:name == 'mail'" />
|
||||
<roundcube:object name="messageCountDisplay" class="pagenav-text" aria-live="polite" aria-relevant="text" />
|
||||
<input class="form-control" type="text" size="3" disabled title="<roundcube:label name="currpage" />" />
|
||||
<roundcube:elseif condition="template:name == 'addressbook'" />
|
||||
<span class="pagenav-text" aria-live="polite" aria-relevant="text">
|
||||
<roundcube:object name="recordsCountDisplay" label="fromtoshort" />
|
||||
</span>
|
||||
<roundcube:else />
|
||||
<span class="pagenav-text" aria-live="polite" aria-relevant="text"> </span>
|
||||
<roundcube:endif />
|
||||
<roundcube:button command="nextpage" type="link"
|
||||
class="button nextpage disabled" classAct="button nextpage"
|
||||
title="nextpage" label="next" innerclass="inner" />
|
||||
<roundcube:button command="lastpage" type="link"
|
||||
class="button lastpage disabled" classAct="button lastpage"
|
||||
title="lastpage" label="last" innerclass="inner" />
|
||||
</div>
|
||||
@ -0,0 +1,12 @@
|
||||
<div class="sidebar listbox<roundcube:exp expression="!request:_action ? ' selected' : ''"/>" role="navigation" aria-labelledby="aria-label-settingstabs">
|
||||
<div class="header">
|
||||
<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
|
||||
<span id="aria-label-settingstabs" class="header-title"><roundcube:label name="settings" /></span>
|
||||
</div>
|
||||
<div class="scroller">
|
||||
<ul id="settings-menu" class="listing iconized<roundcube:exp expression="!request:_action ? ' selection-large-only' : ''"/>">
|
||||
<roundcube:object name="settingstabs" class="listitem" tagname="li" />
|
||||
<roundcube:container name="tabs" id="settings-menu" />
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,23 @@
|
||||
<roundcube:include file="includes/layout.html" />
|
||||
|
||||
<h1 class="voice"><roundcube:object name="productname" /> <roundcube:label name="login" /></h1>
|
||||
|
||||
<div class="content selected no-navbar" role="main">
|
||||
<roundcube:form id="login-form" name="login-form" method="post" class="propform">
|
||||
<roundcube:object name="loginform" form="login-form" size="40" submit=true />
|
||||
<div id="login-footer" role="contentinfo">
|
||||
<roundcube:object name="productname" condition="config:display_product_info > 0" />
|
||||
<roundcube:object name="version" condition="config:display_product_info == 2" />
|
||||
<roundcube:if condition="config:support_url" />
|
||||
⚫ <a href="<roundcube:var name='config:support_url' />" target="_blank" class="support-link"><roundcube:label name="support" /></a>
|
||||
<roundcube:endif />
|
||||
<roundcube:container name="loginfooter" id="login-footer" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<noscript>
|
||||
<p class="noscriptwarning"><roundcube:label name="noscriptwarning" /></p>
|
||||
</noscript>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
@ -0,0 +1,189 @@
|
||||
<roundcube:include file="includes/layout.html" />
|
||||
<roundcube:include file="includes/menu.html" />
|
||||
|
||||
<h1 class="voice"><roundcube:label name="mail" /></h1>
|
||||
|
||||
<!-- folders list -->
|
||||
<div class="sidebar listbox" role="navigation" aria-labelledby="aria-label-folderlist">
|
||||
<div class="header">
|
||||
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
|
||||
<span class="header-title username"><roundcube:object name="username" /></span>
|
||||
</div>
|
||||
<h2 id="aria-label-folderlist" class="voice"><roundcube:label name="arialabelfolderlist" /></h2>
|
||||
<div id="folderlist-content" class="scroller">
|
||||
<roundcube:object name="mailboxlist" id="mailboxlist" class="treelist listing folderlist" folder_filter="mail" unreadwrap="%s" />
|
||||
</div>
|
||||
<div id="folderlist-footer" class="footer toolbar">
|
||||
<roundcube:button name="folderactions" type="link" title="folderactions" label="actions"
|
||||
class="button actions" innerclass="inner" data-popup="mailboxoptions-menu" />
|
||||
<roundcube:if condition="env:quota" />
|
||||
<div id="quotadisplay" class="quota-widget">
|
||||
<span class="voice"><roundcube:label name="quota"></span>
|
||||
<roundcube:object name="quotaDisplay" class="count" display="text" />
|
||||
</div>
|
||||
<roundcube:endif />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- messages list -->
|
||||
<div class="list listbox selected">
|
||||
<div id="messagelist-header" class="header">
|
||||
<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
|
||||
<a class="button icon back-sidebar-button folders" href="#sidebar"><span class="inner"><roundcube:label name="mailboxlist" /></span></a>
|
||||
<span class="header-title"></span>
|
||||
<roundcube:object name="searchfilter" id="mailsearchfilter" class="searchfilterbar hidden" aria-controls="messagelist" />
|
||||
<roundcube:add_label name="filter" />
|
||||
<roundcube:object name="searchform" id="mailsearchform" wrapper="searchbar toolbar"
|
||||
label="mailquicksearchbox" buttontitle="findmail" options="search-menu" ariatag="h2" />
|
||||
<a class="button icon toolbar-menu-button" href="#list-menu"><span class="inner"><roundcube:label name="menu" /></span></a>
|
||||
</div>
|
||||
<roundcube:include file="includes/pagenav.html" />
|
||||
<div id="messagelist-content" class="scroller" tabindex="-1">
|
||||
<h2 id="aria-label-messagelist" class="voice"><roundcube:label name="arialabelmessagelist" /></h2>
|
||||
<roundcube:object name="messages" id="messagelist" optionsmenuIcon="true"
|
||||
class="listing messagelist sortheader fixedheader"
|
||||
aria-labelledby="aria-label-messagelist"
|
||||
data-list="message_list" data-label-msg="listempty"
|
||||
/>
|
||||
</div>
|
||||
<div id="messagelist-footer" class="footer toolbar" role="toolbar">
|
||||
<div id="listcontrols" class="listselectors">
|
||||
<a href="#select" class="button select" data-popup="listselect-menu" title="<roundcube:label name="select" />"><span class="inner"><roundcube:label name="select" /></span></a>
|
||||
<roundcube:if condition="env:threads" />
|
||||
<a href="#threads" class="button threads" data-popup="threadselect-menu" title="<roundcube:label name="threads" />"><span class="inner"><roundcube:label name="threads" /></span></a>
|
||||
<roundcube:endif />
|
||||
<roundcube:object name="listmenulink" class="button settings" label="options" innerclass="inner" />
|
||||
<roundcube:button command="checkmail" type="link" class="button refresh" label="refresh" title="checkmail" innerclass="inner" />
|
||||
<roundcube:container name="listcontrols" id="listcontrols" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- message preview -->
|
||||
<div class="content">
|
||||
<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
|
||||
<div class="header" role="toolbar" aria-labelledby="aria-label-toolbar">
|
||||
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
|
||||
<span class="header-title"></span>
|
||||
<roundcube:include file="includes/mail-menu.html" />
|
||||
</div>
|
||||
<h2 id="aria-label-mailpreviewframe" class="voice"><roundcube:label name="arialabelmailpreviewframe" /></h2>
|
||||
<div class="iframe-wrapper">
|
||||
<roundcube:object name="messagecontentframe"
|
||||
id="messagecontframe"
|
||||
aria-labelledby="aria-label-mailpreviewframe"
|
||||
src="/watermark.html"
|
||||
title="arialabelmailpreviewframe"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- popup menus -->
|
||||
<div id="search-menu" class="popupmenu form" data-editable="true" data-popup-init="searchmenu">
|
||||
<h3 id="aria-label-search-menu" class="voice"><roundcube:label name="searchmod" /></h3>
|
||||
<ul class="toolbarmenu" role="menu" aria-labelledby="aria-label-search-menu">
|
||||
<li role="menuitem" class="checkbox"><label><input type="checkbox" name="s_mods[]" value="subject" id="s_mod_subject" /><roundcube:label name="subject" /></label></li>
|
||||
<li role="menuitem" class="checkbox"><label><input type="checkbox" name="s_mods[]" value="from" id="s_mod_from" /><roundcube:label name="from" /></label></li>
|
||||
<li role="menuitem" class="checkbox"><label><input type="checkbox" name="s_mods[]" value="to" id="s_mod_to" /><roundcube:label name="to" /></label></li>
|
||||
<li role="menuitem" class="checkbox"><label><input type="checkbox" name="s_mods[]" value="cc" id="s_mod_cc" /><roundcube:label name="cc" /></label></li>
|
||||
<li role="menuitem" class="checkbox"><label><input type="checkbox" name="s_mods[]" value="bcc" id="s_mod_bcc" /><roundcube:label name="bcc" /></label></li>
|
||||
<li role="menuitem" class="checkbox"><label><input type="checkbox" name="s_mods[]" value="body" id="s_mod_body" /><roundcube:label name="body" /></label></li>
|
||||
<li role="menuitem" class="checkbox"><label><input type="checkbox" name="s_mods[]" value="text" id="s_mod_text" /><roundcube:label name="msgtext" /></label></li>
|
||||
<li role="separator" class="separator"><label><roundcube:label name="date" /></label></li>
|
||||
<li role="menuitem"><roundcube:object name="searchinterval" id="s_interval" onchange="rcmail.set_searchinterval($(this).val())" /></li>
|
||||
<li role="separator" class="separator"><label><roundcube:label name="searchscope" /></label></li>
|
||||
<li role="menuitem"><label><input type="radio" name="s_scope" value="base" id="s_scope_base" /> <span><roundcube:label name="currentfolder" /></span></label></li>
|
||||
<li role="menuitem"><label><input type="radio" name="s_scope" value="sub" id="s_scope_sub" /> <span><roundcube:label name="subfolders" /></span></label></li>
|
||||
<li role="menuitem"><label><input type="radio" name="s_scope" value="all" id="s_scope_all" /> <span><roundcube:label name="allfolders" /></span></label></li>
|
||||
</ul>
|
||||
<div class="buttons"><button class="btn btn-primary icon search" href="#" onclick="if (rcmail.command('search')) UI.menu_hide('search-menu')"><roundcube:label name="search" /></button></div>
|
||||
</div>
|
||||
|
||||
<div id="dragmessage-menu" class="popupmenu">
|
||||
<h3 id="aria-label-dragmessage-menu" class="voice"><roundcube:label name="arialabeldropactionmenu" /></h3>
|
||||
<ul class="toolbarmenu" role="menu" aria-labelledby="aria-label-dragmessage-menu">
|
||||
<roundcube:button command="move" type="link-menuitem" onclick="return rcmail.drag_menu_action('move')" label="move" classAct="active" />
|
||||
<roundcube:button command="copy" type="link-menuitem" onclick="return rcmail.drag_menu_action('copy')" label="copy" classAct="active" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="mailboxoptions-menu" class="popupmenu">
|
||||
<h3 id="aria-label-mailboxoptions-menu" class="voice"><roundcube:label name="arialabelmailboxmenu" /></h3>
|
||||
<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-mailboxoptions-menu">
|
||||
<roundcube:button command="expunge" type="link-menuitem" label="compact" class="expunge" classAct="expunge active" />
|
||||
<roundcube:button command="purge" type="link-menuitem" label="empty" class="purge" classAct="purge active" />
|
||||
<roundcube:button command="mark-all-read" type="link-menuitem" label="markallread" class="read" classAct="read active" />
|
||||
<roundcube:button command="folders" task="settings" type="link-menuitem" label="managefolders" class="settings" classAct="settings active" />
|
||||
<roundcube:container name="mailboxoptions" id="mailboxoptionsmenu" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="listselect-menu" class="popupmenu">
|
||||
<h3 id="aria-label-listselect-menu" class="voice"><roundcube:label name="arialabellistselectmenu" /></h3>
|
||||
<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-listselect-menu">
|
||||
<roundcube:button command="select-all" type="link-menuitem" label="all" class="select all" classAct="select all active" />
|
||||
<roundcube:button command="select-all" type="link-menuitem" prop="page" label="currpage" class="select page" classAct="select page active" />
|
||||
<roundcube:button command="select-all" type="link-menuitem" prop="unread" label="unread" class="select unread" classAct="select unread active" />
|
||||
<roundcube:button command="select-all" type="link-menuitem" prop="flagged" label="flagged" class="select flagged" classAct="select flagged active" />
|
||||
<roundcube:button command="select-all" type="link-menuitem" prop="invert" label="invert" class="select invert" classAct="select invert active" />
|
||||
<roundcube:button command="select-none" type="link-menuitem" label="none" class="select none" classAct="select none active" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="threadselect-menu" class="popupmenu">
|
||||
<h3 id="aria-label-threadselectmenu" class="voice"><roundcube:label name="arialabelthreadselectmenu" /></h3>
|
||||
<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-threadselectmenu">
|
||||
<roundcube:button command="expand-all" type="link-menuitem" label="expand-all" class="expand all" classAct="expand all active" />
|
||||
<roundcube:button command="expand-unread" type="link-menuitem" label="expand-unread" class="expand unread" classAct="expand unread active" />
|
||||
<roundcube:button command="collapse-all" type="link-menuitem" label="collapse-all" class="expand none" classAct="expand none active" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="listoptions-menu" class="popupmenu propform" role="dialog" aria-labelledby="aria-label-listoptions">
|
||||
<h3 id="aria-label-listoptions" class="voice"><roundcube:label name="arialabelmessagelistoptions" /></h3>
|
||||
<roundcube:if condition="!in_array('message_sort_col', (array)config:dont_override)" />
|
||||
<div class="form-group row">
|
||||
<label for="listoptions-sortcol" class="col-form-label col-sm-4"><roundcube:label name="listsorting" /></label>
|
||||
<div class="col-sm-8">
|
||||
<select id="listoptions-sortcol" name="sort_col" class="form-control">
|
||||
<option value=""><roundcube:label name="nonesort" /></option>
|
||||
<option value="arrival"><roundcube:label name="arrival" /></option>
|
||||
<option value="date"><roundcube:label name="sentdate" /></option>
|
||||
<option value="subject"><roundcube:label name="subject" /></option>
|
||||
<option value="fromto"><roundcube:label name="fromto" /></option>
|
||||
<option value="from"><roundcube:label name="from" /></option>
|
||||
<option value="to"><roundcube:label name="to" /></option>
|
||||
<option value="cc"><roundcube:label name="cc" /></option>
|
||||
<option value="size"><roundcube:label name="size" /></option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<roundcube:endif />
|
||||
<roundcube:if condition="!in_array('message_sort_order', (array)config:dont_override)" />
|
||||
<div class="form-group row">
|
||||
<label for="listoptions-sortord" class="col-form-label col-sm-4"><roundcube:label name="listorder" /></label>
|
||||
<div class="col-sm-8">
|
||||
<select id="listoptions-sortord" name="sort_ord" class="form-control">
|
||||
<option value="ASC"><roundcube:label name="asc" /></option>
|
||||
<option value="DESC"><roundcube:label name="desc" /></option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<roundcube:endif />
|
||||
<roundcube:if condition="env:threads" />
|
||||
<div class="form-group row">
|
||||
<label for="listoptions-threads" class="col-form-label col-sm-4"><roundcube:label name="lmode" /></label>
|
||||
<div class="col-sm-8">
|
||||
<select id="listoptions-threads" name="mode" class="form-control">
|
||||
<option value="list"><roundcube:label name="list" /></option>
|
||||
<option value="threads"><roundcube:label name="threads" /></option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<roundcube:endif />
|
||||
<roundcube:add_label name="listoptionstitle" />
|
||||
</div>
|
||||
|
||||
<roundcube:object name="messageimportform" id="uploadform" mode="smart" />
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
@ -0,0 +1,85 @@
|
||||
<roundcube:include file="includes/layout.html" />
|
||||
<roundcube:include file="includes/menu.html" condition="!env:framed && !env:extwin" />
|
||||
|
||||
<roundcube:object name="mailboxlist" folder_filter="mail" type="js" />
|
||||
|
||||
<h1 class="voice"><roundcube:label name="arialabelmailpreviewframe" /></h1>
|
||||
|
||||
<div class="content selected">
|
||||
<roundcube:if condition="!env:framed" />
|
||||
<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
|
||||
<div class="header" role="toolbar" aria-labelledby="aria-label-toolbar">
|
||||
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
|
||||
<span class="header-title"></span>
|
||||
<roundcube:include file="includes/mail-menu.html" />
|
||||
</div>
|
||||
<roundcube:endif />
|
||||
<div class="content frame-content" role="main">
|
||||
<div id="message-header">
|
||||
<h2 class="subject">
|
||||
<span onmouseover="rcube_webmail.long_subject_title(this)">
|
||||
<span class="voice"><roundcube:label name="subject" />: </span>
|
||||
<roundcube:object name="messageHeaders" valueOf="subject" />
|
||||
</span>
|
||||
</h2>
|
||||
<div class="short-header">
|
||||
<roundcube:object name="contactphoto" class="contactphoto" placeholder="/images/contactpic.png" />
|
||||
<div class="header-content">
|
||||
<roundcube:object name="messageSummary" addicon="virtual" class="header-subject" />
|
||||
<div class="message-partheaders hidden">
|
||||
<roundcube:object name="messageHeaders" class="headers-table" addicon="virtual" exclude="subject" max="10" />
|
||||
</div>
|
||||
<div class="header-links">
|
||||
<a href="#headers" class="envelope" onclick="return UI.headers_show(this)"><roundcube:label name="envelope" /></a>
|
||||
<a href="#all-headers" class="headers" onclick="return UI.headers_dialog()"><roundcube:label name="headers" /></a>
|
||||
<roundcube:add_label name="arialabelmessageheaders" />
|
||||
<roundcube:if condition="!env:message_context && !env:extwin">
|
||||
<roundcube:button command="extwin" type="link" class="extwin" innerClass="inner"
|
||||
label="openinextwin" data-hidden="small" />
|
||||
<roundcube:endif />
|
||||
<roundcube:if condition="env:optional_format=='text'" />
|
||||
<roundcube:button command="change-format" prop="text" type="link" class="plain" innerClass="inner"
|
||||
title="changeformattext" label="plaintoggle" />
|
||||
<roundcube:elseif condition="env:optional_format=='html'" />
|
||||
<roundcube:button command="change-format" prop="html" type="link" class="html" innerClass="inner"
|
||||
title="changeformathtml" label="htmltoggle" />
|
||||
<roundcube:endif />
|
||||
<roundcube:container name="headerlinks" id="header-links" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="message-content">
|
||||
<div class="leftcol" role="region" aria-labelledby="aria-label-messageattachments">
|
||||
<h2 id="aria-label-messageattachments" class="voice"><roundcube:label name="attachments" /></h2>
|
||||
<roundcube:object name="messageAttachments" id="attachment-list" class="attachmentslist" />
|
||||
</div>
|
||||
<div class="rightcol" role="region" aria-labelledby="aria-label-messagebody">
|
||||
<h2 id="aria-label-messagebody" class="voice"><roundcube:label name="arialabelmessagebody" /></h2>
|
||||
<roundcube:object name="messageObjects" id="message-objects" />
|
||||
<roundcube:object name="messageBody" id="messagebody" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- popup menus -->
|
||||
<div id="attachmentmenu" class="popupmenu">
|
||||
<h3 id="aria-label-attachmentmenu" class="voice"><roundcube:label name="arialabelattachmentmenu" /></h3>
|
||||
<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-attachmentmenu">
|
||||
<roundcube:button command="open-attachment" type="link-menuitem" id="attachmenuopen" label="open" class="extwin" classAct="extwin active" />
|
||||
<roundcube:button command="download-attachment" type="link-menuitem" id="attachmenudownload" label="download" class="download" classAct="download active" />
|
||||
<roundcube:container name="attachmentmenu" id="attachmentmenu" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="mailto-menu" class="popupmenu">
|
||||
<h3 id="aria-label-mailtomenu" class="voice"><roundcube:label name="arialabelmailtomenu" /></h3>
|
||||
<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-mailtomenu">
|
||||
<roundcube:button name="addtoaddressbook" type="link-menuitem" label="addtoaddressbook" class="addressbook" />
|
||||
<roundcube:button name="composeto" type="link-menuitem" label="composeto" class="compose active" />
|
||||
<roundcube:container name="mailtomenu" id="mailto-menu" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
@ -0,0 +1,16 @@
|
||||
<roundcube:include file="includes/layout.html" />
|
||||
<roundcube:include file="includes/menu.html" condition="!env:framed && !env:extwin" />
|
||||
|
||||
<h1 class="voice"><roundcube:label name="messageopenerror" /></h1>
|
||||
|
||||
<div class="content selected">
|
||||
<roundcube:if condition="env:action == 'show'" />
|
||||
<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
|
||||
<div class="header" role="toolbar" aria-labelledby="aria-label-toolbar">
|
||||
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
|
||||
</div>
|
||||
<roundcube:endif />
|
||||
<div class="watermark"></div>
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
@ -0,0 +1,123 @@
|
||||
<roundcube:include file="includes/layout.html" />
|
||||
|
||||
<h1 class="voice"><roundcube:var name="env:filename" /></h1>
|
||||
|
||||
<div class="sidebar listbox">
|
||||
<div class="header">
|
||||
<a class="button icon back-content-button" href="#content" data-hidden="big"><span class="inner"><roundcube:label name="back" /></span></a>
|
||||
<span class="header-title" id="aria-label-contentinfo"><roundcube:label name="properties" /></span>
|
||||
</div>
|
||||
<roundcube:object name="messagePartControls" class="listing" role="contentinfo"
|
||||
aria-labelledby="aria-label-contentinfo" />
|
||||
</div>
|
||||
|
||||
<div class="content selected">
|
||||
<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
|
||||
<div class="header" role="toolbar" aria-labelledby="aria-label-toolbar">
|
||||
<span class="header-title constant"><roundcube:var name="env:filename" /></span>
|
||||
<div id="messagetoolbar" class="toolbar">
|
||||
<a class="button properties" id="properties-button" href="#properties" onclick="UI.show_sidebar()" data-hidden="big">
|
||||
<span class="inner"><roundcube:label name="properties"></span>
|
||||
</a>
|
||||
<roundcube:button command="download" type="link" label="download" title="download"
|
||||
class="button download disabled" classAct="button download" innerclass="inner" />
|
||||
<roundcube:button command="print" type="link" label="print" title="print"
|
||||
class="button print disabled" classAct="button print" innerclass="inner" data-hidden="small" />
|
||||
<roundcube:container name="toolbar" id="messagetoolbar" />
|
||||
<roundcube:if condition="env:is_message" />
|
||||
<span class="spacer"></span>
|
||||
<roundcube:button command="reply" type="link"
|
||||
class="button reply disabled" classAct="button reply"
|
||||
label="reply" title="replytomessage" innerclass="inner" />
|
||||
<span class="dropbutton">
|
||||
<roundcube:button command="reply-all" type="link"
|
||||
class="button reply-all disabled" classAct="button reply-all"
|
||||
label="replyall" title="replytoallmessage" innerclass="inner" />
|
||||
<a href="#reply-all" id="replyallmenulink" class="button dropdown" data-popup="replyall-menu" tabindex="0">
|
||||
<span class="inner"><roundcube:label name="arialabelreplyalloptions" /></span>
|
||||
</a>
|
||||
</span>
|
||||
<span class="dropbutton">
|
||||
<roundcube:button command="forward" type="link"
|
||||
class="button forward disabled" classAct="button forward"
|
||||
label="forward" title="forwardmessage" innerclass="inner" />
|
||||
<a href="#forward" id="forwardmenulink" class="button dropdown" data-popup="forward-menu" tabindex="0">
|
||||
<span class="inner"><roundcube:label name="arialabelforwardingoptions" /></span>
|
||||
</a>
|
||||
</span>
|
||||
<span class="spacer"></span>
|
||||
<roundcube:button name="messagemenulink" id="messagemenulink" type="link"
|
||||
class="button more" label="more" title="moreactions" data-popup="message-menu"
|
||||
innerclass="inner" data-hidden="small" />
|
||||
<roundcube:endif />
|
||||
<roundcube:if condition="stripos(env:mimetype, 'image/') === 0" />
|
||||
<roundcube:button command="image-scale" type="link" prop="+" data-hidden="small"
|
||||
class="button zoomin disabled" classAct="button zoomin"
|
||||
label="zoomin" title="increaseimage" innerclass="inner" />
|
||||
<roundcube:button command="image-scale" type="link" prop="-" data-hidden="small"
|
||||
class="button zoomout disabled" classAct="button zoomout"
|
||||
label="zoomout" title="decreaseimage" innerclass="inner" />
|
||||
<roundcube:button command="image-rotate" type="link"
|
||||
class="button rotate disabled" classAct="button rotate" data-hidden="small"
|
||||
label="rotate" title="rotateimage" innerclass="inner" />
|
||||
<roundcube:endif />
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="aria-label-messagepart" class="voice"><roundcube:label name="arialabelattachmentpreview" /></h2>
|
||||
<div class="iframe-wrapper">
|
||||
<roundcube:object name="messagePartFrame" id="messagepartframe" title="arialabelattachmentpreview"
|
||||
role="main" aria-labelledby="aria-label-messagepart" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<roundcube:if condition="env:is_message" />
|
||||
<div id="forward-menu" class="popupmenu">
|
||||
<h3 id="aria-label-forwardmenu" class="voice"><roundcube:label name="arialabelforwardingoptions" /></h3>
|
||||
<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-forwardmenu">
|
||||
<roundcube:button type="link-menuitem" command="forward-inline" label="forwardinline" prop="sub" classAct="forward inline active" class="forward" />
|
||||
<roundcube:button type="link-menuitem" command="forward-attachment" label="forwardattachment" prop="sub" classAct="forward attachment active" class="forward attachment" />
|
||||
<roundcube:container name="forwardmenu" id="forward-menu" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="replyall-menu" class="popupmenu">
|
||||
<h3 id="aria-label-replyallmenu" class="voice"><roundcube:label name="arialabelreplyalloptions" /></h3>
|
||||
<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-replyallmenu">
|
||||
<roundcube:button type="link-menuitem" command="reply-all" label="replyall" prop="sub" class="reply all" classAct="reply all active" />
|
||||
<roundcube:button type="link-menuitem" command="reply-list" label="replylist" prop="sub" class="reply list" classAct="reply list active" />
|
||||
<roundcube:container name="replyallmenu" id="replyall-menu" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="message-menu" class="popupmenu">
|
||||
<h3 id="aria-label-messagemenu" class="voice"><roundcube:label name="arialabelmoremessageactions" /></h3>
|
||||
<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-messagemenu">
|
||||
<roundcube:button type="link-menuitem" command="edit" prop="new" label="editasnew" class="edit asnew" classAct="edit asnew active" />
|
||||
<roundcube:button type="link-menuitem" command="viewsource" label="viewsource" class="source" classAct="source active" />
|
||||
<roundcube:container name="messagemenu" id="message-menu" />
|
||||
</ul>
|
||||
</div>
|
||||
<roundcube:endif />
|
||||
|
||||
<roundcube:if condition="stripos(env:mimetype, 'image/') === 0" />
|
||||
<div id="image-tools" class="image-tools" data-hidden="big">
|
||||
<h3 id="aria-label-imagetools" class="voice"><roundcube:label name="arialabelimagetools" /></h3>
|
||||
<div class="toolbar" role="menu" aria-labelledby="aria-label-imagetools">
|
||||
<roundcube:button command="image-scale" type="link" prop="+"
|
||||
class="button zoomin disabled" classAct="button zoomin"
|
||||
label="zoomin" title="increaseimage" innerclass="inner" />
|
||||
<roundcube:button command="image-scale" type="link" prop="-"
|
||||
class="button zoomout disabled" classAct="button zoomout"
|
||||
label="zoomout" title="decreaseimage" innerclass="inner" />
|
||||
<roundcube:button command="image-rotate" type="link"
|
||||
class="button rotate disabled" classAct="button rotate"
|
||||
label="rotate" title="rotateimage" innerclass="inner" />
|
||||
</div>
|
||||
<a href="#" class="button icon tools" onclick="$(this).attr('title', $(this).data('label-' + ($('#image-tools').toggleClass('open').is('.open') ? 'hide' : 'show')))"
|
||||
data-label-show="<roundcube:label name="showtools" />" data-label-hide="<roundcube:label name="hidetools" />" title="<roundcube:label name="showtools" />">
|
||||
<span class="inner"><roundcube:label name="showtools" /></span>
|
||||
</a>
|
||||
</div>
|
||||
<roundcube:endif />
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
@ -0,0 +1,27 @@
|
||||
<roundcube:include file="includes/layout.html" />
|
||||
|
||||
<div class="print-content" role="main">
|
||||
<div id="message-header">
|
||||
<h2 class="subject">
|
||||
<roundcube:object name="messageHeaders" valueOf="subject" />
|
||||
</h2>
|
||||
<div class="short-header">
|
||||
<roundcube:object name="contactphoto" class="contactphoto" placeholder="/images/contactpic.png" />
|
||||
<div class="header-content">
|
||||
<div class="message-partheaders">
|
||||
<roundcube:object name="messageHeaders" class="headers-table" addicon="virtual" exclude="subject" max="10" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="message-content">
|
||||
<div role="region">
|
||||
<roundcube:object name="messageAttachments" id="attachment-list" class="attachmentslist" />
|
||||
</div>
|
||||
<div role="region">
|
||||
<roundcube:object name="messageBody" id="messagebody" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
@ -0,0 +1,15 @@
|
||||
<roundcube:include file="includes/layout.html" />
|
||||
<roundcube:include file="includes/menu.html" />
|
||||
<roundcube:include file="includes/settings-menu.html" condition="env:task == 'settings'" />
|
||||
|
||||
<div class="content selected" role="main">
|
||||
<div class="header">
|
||||
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
|
||||
<span class="header-title"></span>
|
||||
</div>
|
||||
<roundcube:object name="plugin.body" />
|
||||
</div>
|
||||
|
||||
<roundcube:object name="plugin.footer" />
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
@ -0,0 +1,13 @@
|
||||
<roundcube:include file="includes/layout.html" />
|
||||
|
||||
<h1 class="voice"><roundcube:object name="steptitle" /></h1>
|
||||
|
||||
<div class="formcontent">
|
||||
<roundcube:object name="responseform" class="propform" size="60" textareacols="60" textarearows="18" />
|
||||
</div>
|
||||
|
||||
<div class="formbuttons">
|
||||
<roundcube:button command="save" class="btn btn-primary submit" label="save" condition="!env:readonly" />
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
@ -0,0 +1,43 @@
|
||||
<roundcube:include file="includes/layout.html" />
|
||||
<roundcube:include file="includes/menu.html" />
|
||||
<roundcube:include file="includes/settings-menu.html" />
|
||||
|
||||
<h1 class="voice"><roundcube:label name="responses" /></h1>
|
||||
|
||||
<!-- responses list -->
|
||||
<div class="list listbox selected" aria-labelledby="aria-label-responseslist">
|
||||
<div class="header">
|
||||
<a class="button icon back-sidebar-button" href="#sidebar"><span class="inner"><roundcube:label name="settings" /></span></a>
|
||||
<span id="aria-label-responseslist" class="header-title"><roundcube:label name="responses" /></span>
|
||||
<a class="button icon toolbar-menu-button" href="#list-menu"><span class="inner"><roundcube:label name="menu" /></span></a>
|
||||
</div>
|
||||
<div class="scroller">
|
||||
<roundcube:object name="responseslist" id="responses-table" class="listing"
|
||||
noheader="true" role="listbox" data-list="responses_list"
|
||||
data-label-msg="listempty" data-label-ext="listusebutton" data-create-command="add" />
|
||||
</div>
|
||||
<div class="footer"></div>
|
||||
</div>
|
||||
|
||||
<!-- response details frame -->
|
||||
<div class="content" role="main">
|
||||
<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
|
||||
<div class="header" role="toolbar" aria-labelledby="aria-label-toolbar">
|
||||
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
|
||||
<span class="header-title"></span>
|
||||
<!-- toolbar -->
|
||||
<div id="responsestoolbar" class="toolbar">
|
||||
<roundcube:button command="add" type="link"
|
||||
label="create" title="newresponse" innerClass="inner"
|
||||
class="button create disabled" classAct="button create" data-fab="true" />
|
||||
<roundcube:button command="delete" type="link"
|
||||
label="delete" title="delete" innerClass="inner"
|
||||
class="button delete disabled" classAct="button delete" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="iframe-wrapper">
|
||||
<roundcube:object name="responseframe" id="preferences-frame" src="/watermark.html" title="arialabelresonseeditfrom" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
@ -0,0 +1,29 @@
|
||||
<roundcube:include file="includes/layout.html" />
|
||||
<roundcube:include file="includes/menu.html" />
|
||||
<roundcube:include file="includes/settings-menu.html" />
|
||||
|
||||
<h1 class="voice"><roundcube:label name="preferences" /></h1>
|
||||
|
||||
<div class="list listbox<roundcube:exp expression="!request:_action ? '' : ' selected'"/>" aria-labelledby="aria-label-prefsection">
|
||||
<div class="header">
|
||||
<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
|
||||
<a class="button icon back-sidebar-button" href="#sidebar"><span class="inner"><roundcube:label name="settings" /></span></a>
|
||||
<span id="aria-label-prefsection" class="header-title"><roundcube:label name="preferences" /></span>
|
||||
</div>
|
||||
<div class="scroller">
|
||||
<roundcube:object name="sectionslist" id="sections-table" class="listing iconized" noheader="true"
|
||||
role="listbox" data-list="sections_list" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content" role="main">
|
||||
<div class="header">
|
||||
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
|
||||
<span class="header-title"></span>
|
||||
</div>
|
||||
<div class="iframe-wrapper">
|
||||
<roundcube:object name="prefsframe" id="preferences-frame" src="/watermark.html" title="arialabelpreferencesform" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
@ -0,0 +1,13 @@
|
||||
<roundcube:include file="includes/layout.html" />
|
||||
|
||||
<h1 class="voice"><roundcube:object name="sectionname" /></h1>
|
||||
|
||||
<div class="formcontent">
|
||||
<roundcube:object name="userprefs" form="form" class="propform" />
|
||||
</div>
|
||||
|
||||
<div class="formbuttons">
|
||||
<roundcube:button command="save" class="btn btn-primary submit" label="save" />
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
html, body { height: 100%; overflow: hidden; }
|
||||
body { background: url(images/watermark.jpg) center no-repeat #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue