Elastic Fork
This commit is contained in:
parent
dbad8152a9
commit
f49f55f958
GPG key ID:
BEFC41DA223CEC55
75 changed files with 16213 additions and 0 deletions
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
styles/styles.css
|
||||
styles/print.css
|
||||
styles/embed.css
|
||||
deps/*
|
||||
8
Makefile
Normal file
8
Makefile
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
# No default target to avoid this being mistaken as sufficient preparation for
|
||||
# running the code (these styles depend on bootstrap, which needs to be
|
||||
# downloaded, too; see bin/install-jsdeps.sh in the repo's root).
|
||||
|
||||
css:
|
||||
npx lessc --clean-css="--s1 --advanced" styles/styles.less > styles/styles.min.css
|
||||
npx lessc --clean-css="--s1 --advanced" styles/print.less > styles/print.min.css
|
||||
npx lessc --clean-css="--s1 --advanced" styles/embed.less > styles/embed.min.css
|
||||
BIN
fonts/fa-regular-400.woff
Normal file
BIN
fonts/fa-regular-400.woff
Normal file
Binary file not shown.
BIN
fonts/fa-regular-400.woff2
Normal file
BIN
fonts/fa-regular-400.woff2
Normal file
Binary file not shown.
BIN
fonts/fa-solid-900.woff
Normal file
BIN
fonts/fa-solid-900.woff
Normal file
Binary file not shown.
BIN
fonts/fa-solid-900.woff2
Normal file
BIN
fonts/fa-solid-900.woff2
Normal file
Binary file not shown.
BIN
fonts/roboto-v29-italic-700.woff
Normal file
BIN
fonts/roboto-v29-italic-700.woff
Normal file
Binary file not shown.
BIN
fonts/roboto-v29-italic-700.woff2
Normal file
BIN
fonts/roboto-v29-italic-700.woff2
Normal file
Binary file not shown.
BIN
fonts/roboto-v29-italic.woff
Normal file
BIN
fonts/roboto-v29-italic.woff
Normal file
Binary file not shown.
BIN
fonts/roboto-v29-italic.woff2
Normal file
BIN
fonts/roboto-v29-italic.woff2
Normal file
Binary file not shown.
BIN
fonts/roboto-v29-regular-700.woff
Normal file
BIN
fonts/roboto-v29-regular-700.woff
Normal file
Binary file not shown.
BIN
fonts/roboto-v29-regular-700.woff2
Normal file
BIN
fonts/roboto-v29-regular-700.woff2
Normal file
Binary file not shown.
BIN
fonts/roboto-v29-regular.woff
Normal file
BIN
fonts/roboto-v29-regular.woff
Normal file
Binary file not shown.
BIN
fonts/roboto-v29-regular.woff2
Normal file
BIN
fonts/roboto-v29-regular.woff2
Normal file
Binary file not shown.
3
images/contactgroup.svg
Normal file
3
images/contactgroup.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
|
||||
<path d="M133.5 273.5c30.3 0 55-24.7 55-55s-24.7-55-55-55-55 24.7-55 55 24.7 55 55 55zm385 0c30.3 0 55-24.7 55-55s-24.7-55-55-55-55 24.7-55 55 24.7 55 55 55zM546 301h-55c-15.1 0-28.8 6.1-38.8 16 34.6 19 59.2 53.3 64.5 94h56.7c15.2 0 27.5-12.3 27.5-27.5V356c.1-30.3-24.6-55-54.9-55zm-220 0c53.2 0 96.2-43.1 96.2-96.2s-43.1-96.2-96.2-96.2-96.2 43.1-96.2 96.2 43 96.2 96.2 96.2zm66 27.5h-7.1c-17.9 8.6-37.7 13.8-58.9 13.8s-40.9-5.2-58.9-13.8H260c-54.7 0-99 44.3-99 99v24.8c0 22.8 18.5 41.2 41.2 41.2h247.5c22.8 0 41.2-18.5 41.2-41.2v-24.8c.1-54.7-44.2-99-98.9-99zM199.8 317c-10-9.9-23.6-16-38.8-16h-55c-30.3 0-55 24.7-55 55v27.5c0 15.2 12.3 27.5 27.5 27.5h56.6c5.4-40.7 30-75 64.7-94z" fill="#ccc"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 769 B |
3
images/contactpic.svg
Normal file
3
images/contactpic.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M256 246c50.5 0 91.4-40.9 91.4-91.4S306.5 63.1 256 63.1s-91.4 40.9-91.4 91.4S205.5 246 256 246zm64 22.9h-11.9c-15.9 7.3-33.5 11.4-52.1 11.4s-36.1-4.1-52.1-11.4H192c-53 0-96 43-96 96v29.7c0 18.9 15.4 34.3 34.3 34.3h251.4c18.9 0 34.3-15.4 34.3-34.3v-29.7c0-53-43-96-96-96z" fill="#ccc"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 367 B |
3
images/corner-handle.svg
Normal file
3
images/corner-handle.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
<path fill="#888" d="M6.7 16L16 6.7V5.3L5.3 16zM9.7 16L16 9.7V8.3L8.3 16zM12.7 16l3.3-3.3v-1.4L11.3 16zM15.7 16l.3-.3v-1.4L14.3 16z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 205 B |
3
images/download.svg
Normal file
3
images/download.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 560">
|
||||
<path fill="#d4dbde" d="M690 245c0 9.2-3.5 17.9-10.1 24.9l-175 175c-6.6 6.6-15.3 10.1-24.9 10.1-9.2 0-18.4-3.5-24.9-10.1l-175-175c-6.6-7-10.1-15.8-10.1-24.9 0-4.4.9-9.2 2.6-13.6C277.9 218.3 291 210 305 210h87.5V35c0-19.2 15.8-35 35-35h105c19.2 0 35 15.8 35 35v175H655c14 0 27.1 8.3 32.4 21.4 1.7 4.4 2.6 9.2 2.6 13.6zm0 245H270V350h-70v140c0 38.5 31.5 70 70 70h420c38.5 0 70-31.5 70-70V350h-70v140z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 472 B |
BIN
images/favicon.ico
Normal file
BIN
images/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
1
images/google-icon.svg
Normal file
1
images/google-icon.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="#4285F4" d="M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z"></path><path fill="#34A853" d="M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z"></path><path fill="#FBBC05" d="M11.69 28.18C11.25 26.86 11 25.45 11 24s.25-2.86.69-4.18v-5.7H4.34C2.85 17.09 2 20.45 2 24c0 3.55.85 6.91 2.34 9.88l7.35-5.7z"></path><path fill="#EA4335" d="M24 10.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 4.18 29.93 2 24 2 15.4 2 7.96 6.93 4.34 14.12l7.35 5.7c1.73-5.2 6.58-9.07 12.31-9.07z"></path><path fill="none" d="M2 2h44v44H2z"></path></svg>
|
||||
|
After Width: | Height: | Size: 764 B |
11
images/logo.svg
Normal file
11
images/logo.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="9.14 141.8 573.65 573.65">
|
||||
<style>
|
||||
.st0,.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#404f54}.st3{fill:#37beff}
|
||||
</style>
|
||||
<path class="st3" d="M582.79 549.77L295.96 384.1V207.27l286.83 165.68z"/>
|
||||
<path class="st0" d="M9.14 549.77L295.96 384.1V207.27L9.14 372.95z"/>
|
||||
<path d="M295.96 141.8c109.56 0 198.41 88.85 198.41 198.41s-88.85 198.41-198.41 198.41S97.55 449.77 97.55 340.21 186.4 141.8 295.96 141.8" fill-rule="evenodd" clip-rule="evenodd" fill="#ccc"/>
|
||||
<path d="M295.96 141.8c109.6 0 198.48 88.85 198.48 198.41s-88.88 198.41-198.48 198.41c-62.91-42.34-88.94-127.64-88.94-198.3s26.03-156.1 88.94-198.52" fill-rule="evenodd" clip-rule="evenodd" fill="#e5e5e5"/>
|
||||
<path class="st3" d="M582.79 372.95L295.96 538.62v176.83l286.83-165.68z"/>
|
||||
<path class="st0" d="M9.14 372.95l286.82 165.67v176.83L9.14 549.77z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 888 B |
8
images/microsoft-icon.svg
Normal file
8
images/microsoft-icon.svg
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 116 116" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g transform="matrix(1,0,0,1,-22.0613,-141.704)"><path d="M26.088,145.515L77.643,145.515L77.639,197.07L26.088,197.07L26.088,145.515Z" style="fill:rgb(246,83,20);"/></g>
|
||||
<g transform="matrix(1,0,0,1,-22.0613,-141.704)"><path d="M82.907,145.515L134.462,145.515C134.462,162.7 134.465,179.885 134.459,197.07C117.277,197.067 100.092,197.07 82.91,197.07C82.904,179.885 82.907,162.7 82.907,145.515Z" style="fill:rgb(127,187,65);"/></g>
|
||||
<g transform="matrix(1,0,0,1,-22.0613,-141.704)"><path d="M26.088,202.331C43.273,202.337 60.458,202.329 77.643,202.337C77.646,219.522 77.643,236.704 77.643,253.889L26.088,253.889L26.088,202.331Z" style="fill:rgb(0,161,241);"/></g>
|
||||
<g transform="matrix(1,0,0,1,-22.0613,-141.704)"><path d="M82.91,202.337C100.092,202.331 117.277,202.334 134.462,202.334L134.462,253.889L82.907,253.889C82.91,236.704 82.904,219.519 82.91,202.337Z" style="fill:rgb(255,187,0);"/></g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
20
meta.json
Normal file
20
meta.json
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"name": "Elastic",
|
||||
"author": "Aleksander Machniak",
|
||||
"license": "Creative Commons Attribution-ShareAlike",
|
||||
"license-url": "http://creativecommons.org/licenses/by-sa/3.0/",
|
||||
"config": {
|
||||
"supported_layouts": ["widescreen"],
|
||||
"jquery_ui_colors_theme": "bootstrap",
|
||||
"embed_css_location": "/styles/embed.css",
|
||||
"editor_css_location": "/styles/embed.css",
|
||||
"dark_mode_support": true,
|
||||
"media_browser_css_location": "none",
|
||||
"additional_logo_types": ["dark", "small", "small-dark"]
|
||||
},
|
||||
"meta": {
|
||||
"viewport": "width=device-width, initial-scale=1.0, shrink-to-fit=no, maximum-scale=1.0",
|
||||
"theme-color": "#f4f4f4",
|
||||
"msapplication-navbutton-color": "#f4f4f4"
|
||||
}
|
||||
}
|
||||
278
styles/colors.less
Normal file
278
styles/colors.less
Normal file
|
|
@ -0,0 +1,278 @@
|
|||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) The Roundcube Dev Team
|
||||
*
|
||||
* The contents are subject to the Creative Commons Attribution-ShareAlike
|
||||
* License. It is allowed to copy, distribute, transmit and to adapt the work
|
||||
* by keeping credits to the original authors in the README.md file.
|
||||
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
|
||||
*/
|
||||
|
||||
@color-main: #37beff;
|
||||
@color-main-dark: darken(@color-main, 35%);
|
||||
@color-black: #161b1d;
|
||||
@color-font: lighten(@color-black, 10%);
|
||||
@color-link: #00acff;
|
||||
@color-link-hover: darken(@color-link, 10%);
|
||||
@color-border: #ddd;
|
||||
@color-error: #ff5552;
|
||||
@color-success: #41b849;
|
||||
@color-warning: #ffd452;
|
||||
|
||||
@color-black-shade-text: tint(@color-black, 40%);
|
||||
@color-black-shade-border: lighten(@color-black, 75%);
|
||||
@color-black-shade-bg: lighten(@color-black, 85%);
|
||||
|
||||
|
||||
// Layout elements
|
||||
@color-layout-border: @color-black-shade-border;
|
||||
@color-layout-header: @color-font;
|
||||
@color-layout-sidebar-background: #fff;
|
||||
@color-layout-list-background: #fff;
|
||||
@color-layout-content-background: #fff;
|
||||
@color-layout-header-background: #f4f4f4;
|
||||
@color-layout-footer-background: #fff;
|
||||
|
||||
@color-layout-mobile-header-background: @color-layout-header-background;
|
||||
@color-layout-mobile-footer-background: @color-layout-header-background;
|
||||
|
||||
// Task menu
|
||||
@color-taskmenu-background: #2f3a3f;
|
||||
@color-taskmenu-button: #fff;
|
||||
@color-taskmenu-button-selected: @color-taskmenu-button;
|
||||
@color-taskmenu-button-action: @color-main;
|
||||
|
||||
@color-taskmenu-button-selected-background: lighten(@color-taskmenu-background, 10%);
|
||||
@color-taskmenu-button-action-background: transparent;
|
||||
|
||||
@color-taskmenu-button-hover: #fff;
|
||||
@color-taskmenu-button-selected-hover: #fff;
|
||||
@color-taskmenu-button-action-hover: @color-main;
|
||||
|
||||
@color-taskmenu-button-background-hover: lighten(@color-taskmenu-background, 10%);
|
||||
@color-taskmenu-button-action-background-hover: @color-taskmenu-button-background-hover;
|
||||
@color-taskmenu-button-logout: @color-error;
|
||||
@color-taskmenu-button-logout-hover: @color-error;
|
||||
|
||||
|
||||
// Toolbar
|
||||
@color-toolbar-button: @color-font;
|
||||
@color-toolbar-button-background-hover: darken(@color-layout-header-background, 3%);
|
||||
|
||||
@color-searchbar-background: #fbfbfb;
|
||||
|
||||
// Toolbar menu
|
||||
@color-menu-hover: #fff;
|
||||
@color-menu-hover-background: @color-main;
|
||||
|
||||
|
||||
// Listings
|
||||
@color-list: @color-font;
|
||||
@color-list-selected: @color-font;
|
||||
@color-list-selected-background: tint(@color-main, 90%);
|
||||
@color-list-flagged: @color-error;
|
||||
@color-list-deleted: fadeout(@color-font, 50%);
|
||||
@color-list-secondary: @color-black-shade-text;
|
||||
@color-list-droptarget-background: #ffffcc;
|
||||
@color-list-focus-indicator: lighten(@color-main, 20%);
|
||||
|
||||
@color-list-border: @color-black-shade-bg;
|
||||
@color-list-badge: #fff;
|
||||
@color-list-badge-background: @color-main;
|
||||
@color-list-recent: darken(@color-main, 20%);
|
||||
@color-list-recent-badge: #fff;
|
||||
@color-list-recent-badge-background: @color-main;
|
||||
|
||||
@color-list-pagenav: @color-black-shade-text;
|
||||
@color-list-icon: fadeout(@color-list-secondary, 25%);
|
||||
@color-list-unread-status: @color-warning;
|
||||
|
||||
@color-attachmentlist-border: #f4f4f4;
|
||||
@color-attachmentlist-background: #fcfcfc;
|
||||
|
||||
// Drag-n-drop layer
|
||||
@color-drag-layer: #fff;
|
||||
@color-drag-layer-background: @color-taskmenu-background;
|
||||
@color-drag-layer-shadow: @color-black-shade-bg;
|
||||
|
||||
|
||||
// Messages
|
||||
@color-message: @color-font;
|
||||
@color-message-border: transparent;
|
||||
@color-message-background: fadeout(@color-main, 95%);
|
||||
@color-message-text: #fff;
|
||||
@color-message-link: @color-main;
|
||||
@color-message-link-font-weight: normal;
|
||||
@color-message-information: @color-main;
|
||||
@color-message-success: @color-success;
|
||||
@color-message-warning: @color-warning;
|
||||
@color-message-error: @color-error;
|
||||
@color-message-loading: tint(@color-font, 30%);
|
||||
@color-message-information-text: @color-message-text;
|
||||
@color-message-success-text: @color-message-text;
|
||||
@color-message-warning-text: @color-message;
|
||||
@color-message-error-text: @color-message-text;
|
||||
@color-message-loading-text: @color-message-text;
|
||||
@color-message-error-box: @color-message;
|
||||
@color-message-information-box: @color-message;
|
||||
@color-message-success-box: @color-message;
|
||||
@color-message-warning-box: @color-message;
|
||||
@color-message-error-box-background: fadeout(@color-message-error, 80%);
|
||||
@color-message-information-box-background: fadeout(@color-message-information, 80%);
|
||||
@color-message-success-box-background: fadeout(@color-message-success, 80%);
|
||||
@color-message-warning-box-background: fadeout(@color-message-warning, 80%);
|
||||
|
||||
|
||||
// Popovers (menus)
|
||||
@color-popover-shadow: @color-black-shade-bg;
|
||||
@color-popover-separator: @color-black-shade-text;
|
||||
@color-popover-separator-background: @color-black-shade-bg;
|
||||
@color-popover-mobile-header: #fff;
|
||||
@color-popover-mobile-header-background: @color-main-dark;
|
||||
@color-popover-mobile-dropbutton-background: #f6f6f6;
|
||||
|
||||
// Dialogs
|
||||
@color-dialog-overlay-background: fade(@color-font, 50%);
|
||||
@color-dialog-header: @color-layout-header;
|
||||
@color-dialog-header-border: @color-border;
|
||||
|
||||
|
||||
@color-spinner-circle: @color-black-shade-bg;
|
||||
@color-spinner-item: @color-black-shade-text;
|
||||
|
||||
|
||||
// Forms
|
||||
@color-input: @color-font;
|
||||
@color-input-border: #ced4da; // from Bootstrap's .form-control
|
||||
@color-input-border-focus: @color-main;
|
||||
@color-input-border-focus-shadow: fadeout(@color-main, 75);
|
||||
@color-input-border-invalid: @color-error;
|
||||
@color-input-border-invalid-shadow: fadeout(@color-error, 75);
|
||||
@color-input-addon-background: @color-black-shade-bg;
|
||||
@color-recipient-input-border: @color-input-border;
|
||||
@color-recipient-input-background: @color-black-shade-bg;
|
||||
@color-input-placeholder: #bbb;
|
||||
|
||||
@color-checkbox: @color-main;
|
||||
@color-checkbox-checked: @color-main;
|
||||
@color-checkbox-checked-disabled: lighten(@color-main, 15%);
|
||||
@color-checkbox-focus: @color-input-border-focus;
|
||||
@color-checkbox-focus-shadow: @color-input-border-focus-shadow;
|
||||
|
||||
@color-form-hint: @color-black-shade-text;
|
||||
|
||||
@color-image-upload-background: #f4f4f4;
|
||||
|
||||
@color-btn-secondary: #fff;
|
||||
@color-btn-secondary-background: lighten(@color-black, 50%);
|
||||
@color-btn-primary: #fff;
|
||||
@color-btn-primary-background: @color-main;
|
||||
@color-btn-danger: #fff;
|
||||
@color-btn-danger-background: @color-error;
|
||||
|
||||
@color-quota-background: #fff;
|
||||
@color-quota-text: @color-black-shade-text;
|
||||
@color-quota-value: @color-main;
|
||||
@color-quota-value-warning: @color-error;
|
||||
|
||||
@color-blockquote-background: fadeout(@color-black-shade-bg, 50%);
|
||||
@color-blockquote-0: darken(@color-main, 30%);
|
||||
@color-blockquote-1: darken(@color-success, 25%);
|
||||
@color-blockquote-2: darken(@color-error, 20%);
|
||||
@color-blockquote-0-border: @color-blockquote-0;
|
||||
@color-blockquote-1-border: @color-blockquote-1;
|
||||
@color-blockquote-2-border: @color-blockquote-2;
|
||||
|
||||
@color-mail-signature: @color-black-shade-text;
|
||||
@color-mail-headers: @color-black-shade-text;
|
||||
|
||||
@color-messagepart-border: #f4f4f4;
|
||||
@color-messagepart-background: #fcfcfc;
|
||||
|
||||
@color-spellcheck-link: @color-error;
|
||||
|
||||
@color-table-border: @color-layout-border;
|
||||
@color-table-selected: @color-list-selected;
|
||||
@color-table-selected-background: @color-list-selected-background;
|
||||
|
||||
|
||||
// Datepicker
|
||||
@color-datepicker-border: @color-layout-border;
|
||||
@color-datepicker-font: @color-font;
|
||||
@color-datepicker-highlight: @color-main;
|
||||
@color-datepicker-highlight-background: lighten(@color-main, 30%);
|
||||
@color-datepicker-active: #fff;
|
||||
@color-datepicker-active-background: @color-main;
|
||||
|
||||
|
||||
// HTML editor
|
||||
@color-editor-disabled-mask: fadeout(lighten(@color-black, 85), 10);
|
||||
|
||||
|
||||
// Image tools
|
||||
@color-image-tools: #fff;
|
||||
@color-image-tools-background: fadeout(@color-main, 60%);
|
||||
@color-image-tools-hover: fadeout(@color-main, 50%);
|
||||
|
||||
|
||||
// Scrollbars
|
||||
@color-scrollbar-thumb: #c1c1c1;
|
||||
@color-scrollbar-track: #f1f1f1;
|
||||
|
||||
|
||||
// Dark mode colors
|
||||
@color-dark-main: darken(@color-main, 30%);
|
||||
@color-dark-background: #21292c;
|
||||
@color-dark-font: #c5d1d3;
|
||||
@color-dark-border: #4d6066;
|
||||
@color-dark-hint: darken(@color-dark-font, 20%);
|
||||
@color-dark-information: shade(@color-main, 40%);
|
||||
@color-dark-success: shade(@color-success, 40%);
|
||||
@color-dark-warning: shade(@color-warning, 40%);
|
||||
@color-dark-error: shade(@color-error, 40%);
|
||||
|
||||
@color-dark-list-selected: @color-main;
|
||||
@color-dark-list-selected-background: #374549;
|
||||
@color-dark-list-badge: lighten(@color-dark-font, 10%);
|
||||
@color-dark-list-badge-background: @color-dark-border;
|
||||
@color-dark-list-deleted: darken(@color-dark-hint, 15%);
|
||||
@color-dark-list-droptarget-background: #4d4d00;
|
||||
@color-dark-list-border: #2c373a;
|
||||
|
||||
@color-dark-input: @color-dark-font;
|
||||
@color-dark-input-border: #7c949c;
|
||||
@color-dark-input-background: @color-dark-background;
|
||||
@color-dark-input-focus: #e2e7e9;
|
||||
@color-dark-input-border-focus: @color-main;
|
||||
@color-dark-input-background-focus: lighten(@color-dark-background, 5%);
|
||||
@color-dark-input-addon-background: #374549;
|
||||
@color-dark-input-addon-background-focus: lighten(@color-dark-list-selected-background, 15%);
|
||||
@color-dark-checkbox: @color-dark-border;
|
||||
@color-dark-checkbox-checked: @color-dark-main;
|
||||
|
||||
@color-dark-btn: lighten(@color-dark-font, 10%);
|
||||
@color-dark-btn-primary-background: @color-dark-main;
|
||||
@color-dark-btn-secondary-background: @color-dark-border;
|
||||
@color-dark-btn-danger-background: @color-dark-error;
|
||||
|
||||
@color-dark-dialog-overlay-background: fade(black, 70%);
|
||||
|
||||
@color-dark-popover-background: #161b1d;
|
||||
@color-dark-popover-border: lighten(#161b1d, 50%);
|
||||
|
||||
@color-dark-message-information: @color-dark-information;
|
||||
@color-dark-message-success: @color-dark-success;
|
||||
@color-dark-message-warning: @color-dark-warning;
|
||||
@color-dark-message-error: @color-dark-error;
|
||||
@color-dark-message-loading: lighten(@color-dark-background, 10%);
|
||||
|
||||
@color-dark-scrollbar-thumb: darken(@color-main, 25%);
|
||||
@color-dark-scrollbar-track: @color-dark-border;
|
||||
|
||||
@color-dark-blockquote-0: lighten(@color-main, 10%);
|
||||
@color-dark-blockquote-1: lighten(@color-success, 10%);
|
||||
@color-dark-blockquote-2: lighten(@color-error, 10%);
|
||||
@color-dark-blockquote-0-border: @color-dark-blockquote-0;
|
||||
@color-dark-blockquote-1-border: @color-dark-blockquote-1;
|
||||
@color-dark-blockquote-2-border: @color-dark-blockquote-2;
|
||||
1137
styles/dark.less
Normal file
1137
styles/dark.less
Normal file
File diff suppressed because it is too large
Load diff
95
styles/embed.less
Normal file
95
styles/embed.less
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) The Roundcube Dev Team
|
||||
*
|
||||
* The contents are subject to the Creative Commons Attribution-ShareAlike
|
||||
* License. It is allowed to copy, distribute, transmit and to adapt the work
|
||||
* by keeping credits to the original authors in the README.md file.
|
||||
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
|
||||
*/
|
||||
|
||||
/* Style for embedded pages and TinyMCE editor content page */
|
||||
|
||||
@import "global";
|
||||
|
||||
.mce-content-body {
|
||||
margin: 4px;
|
||||
color: @color-input;
|
||||
|
||||
div.pre {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: #1010ff 2px solid;
|
||||
margin: 0;
|
||||
padding: 0 0.4em;
|
||||
}
|
||||
}
|
||||
|
||||
.rcmail-inline-message {
|
||||
.font-family();
|
||||
font-size: @page-font-size;
|
||||
padding: .5em;
|
||||
margin: 0 0 .5em 0;
|
||||
opacity: .95;
|
||||
color: @color-message;
|
||||
background-color: @color-message-warning-box-background;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:before {
|
||||
.font-icon-class();
|
||||
font-size: 1.5em;
|
||||
line-height: 1;
|
||||
width: 1em;
|
||||
margin-right: .3em;
|
||||
content: @fa-var-exclamation-triangle;
|
||||
color: @color-message-warning;
|
||||
}
|
||||
|
||||
span {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
a {
|
||||
color: @color-link;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: @color-link-hover;
|
||||
}
|
||||
|
||||
button {
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
padding: .375em .75em;
|
||||
margin-left: .5em;
|
||||
font-size: 1em;
|
||||
line-height: 1.5;
|
||||
border-radius: .25em;
|
||||
border: 1px solid transparent;
|
||||
color: @color-btn-primary;
|
||||
background: @color-btn-primary-background;
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 .2rem fade(@color-btn-primary-background, 50%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken(@color-btn-primary-background, 8%);
|
||||
border-color: darken(@color-btn-primary-background, 10%);
|
||||
}
|
||||
|
||||
&:not([disabled]):not(.disabled):active {
|
||||
background: darken(@color-btn-primary-background, 11%);
|
||||
border-color: darken(@color-btn-primary-background, 13%);
|
||||
box-shadow: 0 0 0 .2rem fade(@color-btn-primary-background, 53%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rcmail-inline-buttons {
|
||||
margin: 0;
|
||||
}
|
||||
1397
styles/fontawesome.less
vendored
Normal file
1397
styles/fontawesome.less
vendored
Normal file
File diff suppressed because it is too large
Load diff
149
styles/global.less
Normal file
149
styles/global.less
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) The Roundcube Dev Team
|
||||
*
|
||||
* The contents are subject to the Creative Commons Attribution-ShareAlike
|
||||
* License. It is allowed to copy, distribute, transmit and to adapt the work
|
||||
* by keeping credits to the original authors in the README.md file.
|
||||
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
|
||||
*/
|
||||
|
||||
@import (reference) "variables";
|
||||
@import (reference) "mixins";
|
||||
|
||||
/*** Fonts ***/
|
||||
|
||||
@font-face {
|
||||
font-family: 'Icons';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src: url("../fonts/fa-solid-900.woff2") format('woff2'),
|
||||
url("../fonts/fa-solid-900.woff") format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url("../fonts/fa-regular-400.woff2") format('woff2'),
|
||||
url("../fonts/fa-regular-400.woff") format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Roboto'), local('Roboto-Regular'),
|
||||
url('../fonts/roboto-v29-regular.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
|
||||
url('../fonts/roboto-v29-regular.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Roboto Italic'), local('Roboto-Italic'),
|
||||
url('../fonts/roboto-v29-italic.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
|
||||
url('../fonts/roboto-v29-italic.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Roboto Bold'), local('Roboto-Bold'),
|
||||
url('../fonts/roboto-v29-regular-700.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
|
||||
url('../fonts/roboto-v29-regular-700.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
|
||||
url('../fonts/roboto-v29-italic-700.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
|
||||
url('../fonts/roboto-v29-italic-700.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
|
||||
}
|
||||
|
||||
/* Reset some Bootstrap style */
|
||||
|
||||
body, button, input, optgroup, select, textarea, .popover {
|
||||
.font-family();
|
||||
}
|
||||
|
||||
button, input, select, textarea {
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
input {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
a {
|
||||
color: @color-link;
|
||||
|
||||
&:hover {
|
||||
color: @color-link-hover;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.disabled:not(.btn) {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
/* Scrollbar styles */
|
||||
|
||||
html when not (@scrollbar-width = unset) {
|
||||
// Ignore thin width setting for Firefox, it makes the scrollbar very very thin in Firefox >= 100
|
||||
& when not (@scrollbar-width = thin) {
|
||||
scrollbar-width: @scrollbar-width;
|
||||
|
||||
textarea,
|
||||
select,
|
||||
.popover-body,
|
||||
.popupmenu,
|
||||
.ui-menu,
|
||||
.ui-dialog-content,
|
||||
.frame-content,
|
||||
.formcontent,
|
||||
.table-responsive,
|
||||
.table-responsive-sm,
|
||||
.tox-menu,
|
||||
.tox-dialog__body-nav,
|
||||
.tox-collection__group,
|
||||
.scroller {
|
||||
// Firefox does not inherit scrollbar size from the html element
|
||||
scrollbar-width: @scrollbar-width;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.touch) {
|
||||
::-webkit-scrollbar when (@scrollbar-width = auto) {
|
||||
// Note: If we do not set the width a default scrollbar is used in Chrome.
|
||||
// And the custom colors set below do not work
|
||||
width: 12px;
|
||||
}
|
||||
::-webkit-scrollbar when (@scrollbar-width = thin) {
|
||||
width: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
scrollbar-color: @color-scrollbar-thumb @color-scrollbar-track;
|
||||
|
||||
&:not(.touch) {
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: @color-scrollbar-track;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: @color-scrollbar-thumb;
|
||||
}
|
||||
}
|
||||
}
|
||||
414
styles/layout.less
Normal file
414
styles/layout.less
Normal file
|
|
@ -0,0 +1,414 @@
|
|||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) The Roundcube Dev Team
|
||||
*
|
||||
* The contents are subject to the Creative Commons Attribution-ShareAlike
|
||||
* License. It is allowed to copy, distribute, transmit and to adapt the work
|
||||
* by keeping credits to the original authors in the README.md file.
|
||||
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
|
||||
*/
|
||||
|
||||
/*** Responsive design - Layout ***/
|
||||
|
||||
/*
|
||||
- Large screen (width > 1200px)
|
||||
-----------------------------------------------------------------------------------------------------
|
||||
| menu | sidebar | list | content |
|
||||
-----------------------------------------------------------------------------------------------------
|
||||
- Normal screen (1200px => width => 768px) - typical: 768x1024 (iPad Mini/Air)
|
||||
-------------------------------------------------------------------
|
||||
|menu| sidebar/list | content |
|
||||
-------------------------------------------------------------------
|
||||
- Small (480px < width < 768px)
|
||||
------------------------------------------
|
||||
|menu| sidebar/list/content |
|
||||
------------------------------------------
|
||||
- Phone (width <= 480px) - typical: 320x480 (iPhone 5), 375x667 (iPhone 6-7), 360x564 (Galaxy S6)
|
||||
------------------------
|
||||
| sidebar/list/content |
|
||||
------------------------
|
||||
*/
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
font-size: @page-font-size;
|
||||
}
|
||||
|
||||
body {
|
||||
min-width: @page-min-width;
|
||||
height: 100%;
|
||||
color: @color-font;
|
||||
overflow: hidden;
|
||||
|
||||
html.iframe & {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
#layout {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
& > div {
|
||||
& > .scroller {
|
||||
flex: 1;
|
||||
position: relative; // for .listing-info positioning
|
||||
}
|
||||
|
||||
& > .header,
|
||||
& > .footer {
|
||||
font-size: @layout-header-font-size;
|
||||
font-weight: bold;
|
||||
line-height: @layout-header-height;
|
||||
height: @layout-header-height;
|
||||
min-height: @layout-header-height;
|
||||
padding: 0 .25em;
|
||||
margin: 0;
|
||||
position: relative; // for absolute positioning of searchbar
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
& > .header {
|
||||
border-bottom: 1px solid @color-layout-border;
|
||||
color: @color-layout-header;
|
||||
background-color: @color-layout-header-background;
|
||||
|
||||
.header-title {
|
||||
.overflow-ellipsis();
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
margin: 0 -20rem;
|
||||
}
|
||||
|
||||
a.button {
|
||||
color: @color-toolbar-button;
|
||||
}
|
||||
|
||||
a.toolbar-list-button,
|
||||
a.toolbar-menu-button {
|
||||
order: 99; // always the last button
|
||||
}
|
||||
}
|
||||
|
||||
& > .footer {
|
||||
border-top: 1px solid @color-layout-border;
|
||||
background-color: @color-layout-footer-background;
|
||||
|
||||
& when not (@layout-footer-height = @layout-header-height) {
|
||||
height: @layout-footer-height;
|
||||
min-height: @layout-footer-height;
|
||||
line-height: @layout-footer-height;
|
||||
}
|
||||
|
||||
&.small {
|
||||
height: @layout-footer-small-height;
|
||||
min-height: @layout-footer-small-height;
|
||||
line-height: @layout-footer-small-height;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#layout-sidebar {
|
||||
position: relative; // e.g. for .column-resizer
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 2;
|
||||
max-width: 30%;
|
||||
min-width: 220px;
|
||||
border-right: 1px solid @color-layout-border;
|
||||
background-color: @color-layout-sidebar-background;
|
||||
|
||||
&.sidebar-right {
|
||||
order: 2;
|
||||
border-right: 0;
|
||||
border-left: 1px solid @color-layout-border;
|
||||
// sidebar on right is unusual situation, probably there's no list in layout,
|
||||
// in such a case we can make it a little bit wider
|
||||
flex: 3;
|
||||
}
|
||||
}
|
||||
|
||||
#layout-list {
|
||||
position: relative; // e.g. for .column-resizer
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 3;
|
||||
max-width: 30%;
|
||||
min-width: 300px;
|
||||
border-right: 1px solid @color-layout-border;
|
||||
background-color: @color-layout-list-background;
|
||||
}
|
||||
|
||||
#layout-content {
|
||||
display: flex;
|
||||
flex: 6;
|
||||
flex-direction: column;
|
||||
background-color: @color-layout-content-background;
|
||||
width: 100%;
|
||||
|
||||
html.iframe & {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
& > .formcontent, // e.g. Help plugin
|
||||
& > .content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.iframe-wrapper {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.only > .scroller {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
#layout-menu {
|
||||
&.popover {
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
.popover-header {
|
||||
height: @layout-header-height;
|
||||
line-height: @layout-header-height;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
max-height: @layout-header-height;
|
||||
max-width: @layout-menu-width;
|
||||
padding: .25rem;
|
||||
|
||||
@media screen and (min-width: (@screen-width-xs + 1px)) and (max-width: @screen-width-medium) {
|
||||
max-width: @layout-menu-width * 0.45;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: (@screen-width-xs + 1px)) {
|
||||
padding: 0 !important;
|
||||
background-color: @color-taskmenu-background !important;
|
||||
|
||||
a {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
html.layout-phone & {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 .5rem;
|
||||
|
||||
img {
|
||||
max-width: @layout-mobile-menu-width - 50px;
|
||||
}
|
||||
|
||||
a {
|
||||
width: auto;
|
||||
flex: 1;
|
||||
|
||||
&:before {
|
||||
height: @layout-touch-header-height;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.inner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.column-resizer {
|
||||
cursor: col-resize;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -3px;
|
||||
width: 6px;
|
||||
height: 100%;
|
||||
|
||||
&.inverted {
|
||||
right: auto;
|
||||
left: -3px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
width: 10000px;
|
||||
right: -5000px;
|
||||
|
||||
&.inverted {
|
||||
right: auto;
|
||||
left: -5000px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-width-large) {
|
||||
#layout-sidebar,
|
||||
#layout-list {
|
||||
min-width: 260px;
|
||||
flex: 3;
|
||||
}
|
||||
|
||||
#layout-list > .header > a.button {
|
||||
padding: 0 .25rem;
|
||||
margin: 0 .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-width-medium) {
|
||||
// Disable column resizing by hiding splitters and resetting columns width
|
||||
.column-resizer {
|
||||
display: none;
|
||||
}
|
||||
#layout-sidebar,
|
||||
#layout-list {
|
||||
width: auto !important;
|
||||
flex: 3 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-width-small) {
|
||||
#layout-sidebar,
|
||||
#layout-list {
|
||||
max-width: none;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
#layout > div > .header {
|
||||
background-color: @color-layout-mobile-header-background;
|
||||
|
||||
a.button {
|
||||
// make the button active area smaller on touch devices
|
||||
margin: 0 .3rem !important;
|
||||
padding: 0 !important;
|
||||
|
||||
&:before {
|
||||
font-size: 1.75rem;
|
||||
height: @layout-touch-header-height;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.filter:before {
|
||||
font-size: 1.6rem; // this icon is too big in FA5
|
||||
}
|
||||
|
||||
.inner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#layout > div > .footer {
|
||||
background-color: @color-layout-mobile-footer-background;
|
||||
}
|
||||
|
||||
a.toolbar-list-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-width-xs) {
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-width-mini) {
|
||||
#layout-sidebar,
|
||||
#layout-list {
|
||||
min-width: @page-min-width;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: (@screen-width-xs + 1px)) {
|
||||
a.task-menu-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#layout-menu {
|
||||
// FIXME: we set background color here not in taskmenu.less, because
|
||||
// otherwise background is partially white on Android/iOS
|
||||
background-color: @color-taskmenu-background;
|
||||
width: @layout-menu-width-sm;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: (@screen-width-small + 1px)) {
|
||||
.floating-action-buttons,
|
||||
#layout-content > .header > .header-title,
|
||||
#layout > div > .header > .buttons,
|
||||
a.toolbar-menu-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: (@screen-width-medium + 1px)) {
|
||||
#layout-menu {
|
||||
width: @layout-menu-width;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: (@screen-width-large + 1px)) {
|
||||
#layout-list > .header > .header-title:not(.all-sizes),
|
||||
a.toolbar-list-button,
|
||||
a.back-list-button,
|
||||
a.back-sidebar-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
html.layout-phone {
|
||||
.hidden-phone {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
html.layout-phone,
|
||||
html.layout-small {
|
||||
.hidden-small {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
html.layout-small {
|
||||
.hidden-lbs {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
html.layout-large,
|
||||
html.layout-normal {
|
||||
.hidden-lbs,
|
||||
.hidden-big {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
html.layout-large {
|
||||
.hidden-large {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
62
styles/mixins.less
Normal file
62
styles/mixins.less
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) The Roundcube Dev Team
|
||||
*
|
||||
* The contents are subject to the Creative Commons Attribution-ShareAlike
|
||||
* License. It is allowed to copy, distribute, transmit and to adapt the work
|
||||
* by keeping credits to the original authors in the README.md file.
|
||||
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
|
||||
*/
|
||||
|
||||
/*** Font-icons ***/
|
||||
|
||||
.font-icon-class {
|
||||
font-size: 1.25em;
|
||||
// FIXME: with inline-block we have some problems with icon alignment
|
||||
// display: inline-block;
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 0 .25rem 0 0;
|
||||
width: 1.18em;
|
||||
height: 1em;
|
||||
font-family: 'Icons';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
text-decoration: inherit;
|
||||
text-align: center;
|
||||
speak: none;
|
||||
font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.animated-icon-class {
|
||||
// spinner-border is defined in Bootstrap
|
||||
-webkit-animation: spinner-border 1.5s infinite linear;
|
||||
animation: spinner-border 1.5s infinite linear;
|
||||
}
|
||||
|
||||
.font-icon-solid(@icon) {
|
||||
content: @icon;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.font-icon-regular(@icon) {
|
||||
content: @icon;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.overflow-ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.font-family {
|
||||
font-family: Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.style-input-focus {
|
||||
border-color: @color-input-border-focus;
|
||||
box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow;
|
||||
}
|
||||
78
styles/print.less
Normal file
78
styles/print.less
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) The Roundcube Dev Team
|
||||
*
|
||||
* The contents are subject to the Creative Commons Attribution-ShareAlike
|
||||
* License. It is allowed to copy, distribute, transmit and to adapt the work
|
||||
* by keeping credits to the original authors in the README.md file.
|
||||
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
|
||||
*/
|
||||
|
||||
/*** Additional styles for printouts ***/
|
||||
|
||||
body {
|
||||
overflow: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#print-layout {
|
||||
margin: 1rem;
|
||||
|
||||
#logo {
|
||||
max-height: 80px;
|
||||
}
|
||||
|
||||
// Overwrites for mail message printouts
|
||||
|
||||
.image-attachment {
|
||||
.image-link {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.attachment-links {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#message-header {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.attachment-size {
|
||||
padding-left: .1rem;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
page-break-inside: auto;
|
||||
}
|
||||
|
||||
// Overwrites for contact printouts
|
||||
|
||||
.formcontent {
|
||||
padding: 0;
|
||||
|
||||
legend {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
.row .form-control-plaintext {
|
||||
padding: .1rem;
|
||||
}
|
||||
|
||||
.contactfield {
|
||||
padding: .2rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.propform.grouped .row.input-group .input-group-text {
|
||||
padding: 0;
|
||||
min-width: 12rem;
|
||||
background: #fff;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.contact-header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
458
styles/styles.less
Normal file
458
styles/styles.less
Normal file
|
|
@ -0,0 +1,458 @@
|
|||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) The Roundcube Dev Team
|
||||
*
|
||||
* The contents are subject to the Creative Commons Attribution-ShareAlike
|
||||
* License. It is allowed to copy, distribute, transmit and to adapt the work
|
||||
* by keeping credits to the original authors in the README.md file.
|
||||
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
|
||||
*/
|
||||
|
||||
@import "global";
|
||||
@import "layout";
|
||||
@import "widgets/common";
|
||||
@import "widgets/buttons";
|
||||
@import "widgets/jqueryui";
|
||||
@import "widgets/dialogs";
|
||||
@import "widgets/menu";
|
||||
@import "widgets/messages";
|
||||
@import "widgets/lists";
|
||||
@import "widgets/forms";
|
||||
@import "widgets/editor";
|
||||
|
||||
|
||||
/*** Login form ***/
|
||||
|
||||
.task-login {
|
||||
#layout-content {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#logo {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 16vh;
|
||||
max-height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
#login-form {
|
||||
margin: 0 auto;
|
||||
top: 20vh;
|
||||
width: 95%;
|
||||
max-width: 320px;
|
||||
position: relative;
|
||||
|
||||
// Fixes table width in IE11
|
||||
table, tbody {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Fixes input width in IE11
|
||||
.row {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.oauthlogin {
|
||||
margin-top: 1em;
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.formbuttons + .oauthlogin {
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
#rcmloginsubmit {
|
||||
&:before {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
#login-footer {
|
||||
flex: 1;
|
||||
color: @color-black-shade-text;
|
||||
|
||||
& > div {
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
background: @color-black-shade-bg;
|
||||
border-radius: .3rem;
|
||||
}
|
||||
}
|
||||
|
||||
#login-addon {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
max-height: 30%;
|
||||
margin: 1rem !important;
|
||||
width: auto !important;
|
||||
overflow: auto;
|
||||
|
||||
@media screen and (min-width: (@screen-width-small + 1px)) {
|
||||
max-width: @screen-width-small;
|
||||
margin: auto !important;
|
||||
bottom: 1rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
body.task-error-login #layout {
|
||||
#layout-menu,
|
||||
#layout-content > .header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*** Addressbook UI ***/
|
||||
|
||||
#contactpic {
|
||||
width: @layout-contact-icon-width;
|
||||
height: @layout-contact-icon-height;
|
||||
border-radius: .5rem;
|
||||
overflow: hidden;
|
||||
display:table-cell;
|
||||
vertical-align:middle;
|
||||
text-align: center;
|
||||
background-color: @color-image-upload-background;
|
||||
|
||||
img {
|
||||
max-width: @layout-contact-icon-width;
|
||||
max-height: @layout-contact-icon-height;
|
||||
}
|
||||
}
|
||||
|
||||
#contacthead {
|
||||
.names {
|
||||
margin-bottom: .5rem;
|
||||
|
||||
span.namefield {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
&.readonly {
|
||||
.source.row {
|
||||
color: @color-form-hint;
|
||||
font-size: 90%;
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*** Mail UI ***/
|
||||
|
||||
#message-header {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
& > .subject {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
|
||||
body.status-flagged &:before {
|
||||
&:extend(.font-icon-class);
|
||||
display: inline;
|
||||
float: none;
|
||||
content: @fa-var-flag;
|
||||
font-size: 1em;
|
||||
color: @color-error;
|
||||
}
|
||||
|
||||
a.extwin {
|
||||
text-decoration: none;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
float: none;
|
||||
display: inline-block;
|
||||
font-size: 75%;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
content: @fa-var-external-link-square-alt;
|
||||
}
|
||||
}
|
||||
|
||||
span.inner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
& > .header {
|
||||
display: flex;
|
||||
|
||||
img.contactphoto {
|
||||
margin: 0 1rem 0 0;
|
||||
border-radius: 50%;
|
||||
width: @mail-header-photo-height;
|
||||
height: @mail-header-photo-height;
|
||||
object-fit: cover;
|
||||
background: @color-image-upload-background;
|
||||
}
|
||||
}
|
||||
|
||||
.header-content {
|
||||
min-height: @mail-header-photo-height;
|
||||
flex: 1;
|
||||
|
||||
&.details-view {
|
||||
.header-summary {
|
||||
display: none;
|
||||
}
|
||||
.header-headers {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-summary {
|
||||
margin-top: .25rem;
|
||||
|
||||
& > span {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.header-headers {
|
||||
display: none;
|
||||
|
||||
.header-title {
|
||||
white-space: nowrap;
|
||||
color: @color-black-shade-text;
|
||||
font-weight: bold;
|
||||
padding-right: 1rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.header-links {
|
||||
margin-top: .25rem;
|
||||
|
||||
a {
|
||||
font-size: 90%;
|
||||
margin-right: .5rem;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
height: 1.5rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
&.headers-details:before {
|
||||
content: @fa-var-envelope;
|
||||
}
|
||||
|
||||
&.headers-summary:before {
|
||||
.font-icon-regular(@fa-var-envelope);
|
||||
}
|
||||
|
||||
&.headers-all:before {
|
||||
content: @fa-var-info-circle;
|
||||
}
|
||||
|
||||
&.html:before {
|
||||
content: @fa-var-image;
|
||||
}
|
||||
|
||||
&.plain:before {
|
||||
content: @fa-var-align-justify;
|
||||
}
|
||||
|
||||
&.zipdownload:before {
|
||||
content: @fa-var-download;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-partheaders {
|
||||
padding: .25rem .5rem;
|
||||
margin: .5rem 0 -.5rem 0;
|
||||
border-top: 1px solid @color-messagepart-border;
|
||||
background-color: @color-messagepart-background;
|
||||
|
||||
table.headers-table {
|
||||
font-size: 90%;
|
||||
color: @color-mail-headers;
|
||||
|
||||
.header-title {
|
||||
.overflow-ellipsis();
|
||||
white-space: nowrap;
|
||||
max-width: 8em;
|
||||
font-weight: bold;
|
||||
padding-right: 1rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.subject {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
& + .message-part,
|
||||
& + .message-htmlpart {
|
||||
border-top: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#message-content {
|
||||
.attachmentslist:not(:empty) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
#messagebody {
|
||||
&.mailvelope {
|
||||
iframe {
|
||||
min-height: 75vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-part,
|
||||
.message-htmlpart {
|
||||
padding-top: .5rem;
|
||||
// Fixes absolute positioned mail message content
|
||||
position: relative;
|
||||
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid @color-messagepart-border;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
div.rcmBody {
|
||||
// Remove margins that can be set by the mail message styles
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
.overflow-ellipsis();
|
||||
color: @color-blockquote-0;
|
||||
border-left: 2px solid @color-blockquote-0-border;
|
||||
border-right: 2px solid @color-blockquote-0-border;
|
||||
background-color: @color-blockquote-background;
|
||||
margin: 2px 0;
|
||||
padding: 0 .4em;
|
||||
|
||||
blockquote {
|
||||
color: @color-blockquote-1;
|
||||
border-left: 2px solid @color-blockquote-1-border;
|
||||
border-right: 2px solid @color-blockquote-1-border;
|
||||
|
||||
blockquote {
|
||||
color: @color-blockquote-2;
|
||||
border-left: 2px solid @color-blockquote-2-border;
|
||||
border-right: 2px solid @color-blockquote-2-border;
|
||||
}
|
||||
}
|
||||
|
||||
span.blockquote-link {
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
right: .5rem;
|
||||
min-width: 4rem;
|
||||
padding: .2rem .25rem .2rem .5rem;
|
||||
font-size: 90%;
|
||||
text-align: center;
|
||||
color: @color-black-shade-text;
|
||||
background: @color-black-shade-bg;
|
||||
border: 1px solid @color-black-shade-border;
|
||||
border-radius: .3rem;
|
||||
line-height: 1;
|
||||
.font-family(); // don't inherit monospace font
|
||||
|
||||
&:after {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-angle-down;
|
||||
display: inline-block;
|
||||
float: none;
|
||||
margin: 0;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
&.collapsed:after {
|
||||
content: @fa-var-angle-up;
|
||||
}
|
||||
}
|
||||
|
||||
&.blockquote-header {
|
||||
text-overflow: ellipsis !important;
|
||||
padding-right: 5rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-part {
|
||||
span.sig {
|
||||
color: @color-mail-signature;
|
||||
}
|
||||
|
||||
div.pre {
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
// This is needed for proper display of quoted plain text
|
||||
blockquote {
|
||||
display: inline-block;
|
||||
min-width: 100%;
|
||||
|
||||
& + br {
|
||||
// compensate the spacing "removed" by the inline-block style above
|
||||
display: block;
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#compose-attachments {
|
||||
margin: 1rem 1rem 0 1rem;
|
||||
}
|
||||
|
||||
#composestatusbar {
|
||||
opacity: .3;
|
||||
right: 2.5rem;
|
||||
|
||||
@media screen and (min-width: (@screen-width-small + 1px)) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a.button {
|
||||
display: inline-block;
|
||||
|
||||
&:before {
|
||||
line-height: @layout-touch-header-height;
|
||||
font-size: 1.25rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*** Settings UI ***/
|
||||
|
||||
// A default icon for settings menu entries added by plugins
|
||||
.settings-default-icon {
|
||||
tr > td.section::before,
|
||||
li > a:before {
|
||||
content: @fa-var-cog;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@dark-mode-enabled = true) {
|
||||
@import "dark";
|
||||
}
|
||||
|
||||
@import (optional) "_styles";
|
||||
63
styles/variables.less
Normal file
63
styles/variables.less
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) The Roundcube Dev Team
|
||||
*
|
||||
* The contents are subject to the Creative Commons Attribution-ShareAlike
|
||||
* License. It is allowed to copy, distribute, transmit and to adapt the work
|
||||
* by keeping credits to the original authors in the README.md file.
|
||||
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
|
||||
*/
|
||||
|
||||
@import (reference) "fontawesome";
|
||||
@import (reference) "colors";
|
||||
|
||||
@dark-mode-enabled: true; // on change also have to change dark_mode_support in meta.json
|
||||
|
||||
@screen-width-large: 1200px;
|
||||
@screen-width-medium: 1024px;
|
||||
@screen-width-small: 768px;
|
||||
@screen-width-xs: 480px;
|
||||
@screen-width-mini: 320px;
|
||||
@screen-width-touch: @screen-width-medium;
|
||||
@screen-width-bs-phone: 576px;
|
||||
|
||||
@page-font-size: 14px;
|
||||
@page-min-width: 240px;
|
||||
|
||||
// Note: we'll set some values in pixels instead of rem to eliminate
|
||||
// Firefox sub-pixel rendering bug(s)
|
||||
|
||||
@layout-menu-width: floor(5.6 * @page-font-size);
|
||||
@layout-menu-width-sm: floor(3 * @page-font-size);
|
||||
@layout-header-height: floor(4.2 * @page-font-size);
|
||||
@layout-footer-height: @layout-header-height;
|
||||
@layout-footer-small-height: floor(2.5 * @page-font-size);
|
||||
@layout-header-font-size: 1rem;
|
||||
@layout-searchbar-height: floor(2.6 * @page-font-size);
|
||||
|
||||
@layout-touch-header-height: @layout-header-height;
|
||||
@layout-touch-header-font-size: floor(1.2 * @page-font-size);
|
||||
@layout-touch-menu-record-height: floor(3.4 * @page-font-size);
|
||||
@layout-touch-menu-record-font-size: floor(1.2 * @page-font-size);
|
||||
@layout-touch-icon-width: 2.2em;
|
||||
|
||||
@layout-mobile-menu-width: (@screen-width-mini * .85);
|
||||
|
||||
@layout-contact-icon-width: 112px;
|
||||
@layout-contact-icon-height: 135px;
|
||||
|
||||
@listing-line-height: floor(2.5 * @page-font-size);
|
||||
@listing-touch-line-height: floor(3.4 * @page-font-size);
|
||||
@listing-treetoggle-width: 1.5em;
|
||||
|
||||
@mail-header-photo-height: 4rem;
|
||||
|
||||
// Scrollbars
|
||||
@scrollbar-width: thin; // 'auto' or 'thin' or 'unset'
|
||||
|
||||
// Additional icons
|
||||
@icon-resize-corner: data-uri("image/svg+xml;charset=utf-8", "../images/corner-handle.svg"); // size: 16x16
|
||||
@icon-file-drop: data-uri("image/svg+xml;charset=utf-8", "../images/download.svg");
|
||||
|
||||
@import (reference, optional) "_variables";
|
||||
349
styles/widgets/buttons.less
Normal file
349
styles/widgets/buttons.less
Normal file
|
|
@ -0,0 +1,349 @@
|
|||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) The Roundcube Dev Team
|
||||
*
|
||||
* The contents are subject to the Creative Commons Attribution-ShareAlike
|
||||
* License. It is allowed to copy, distribute, transmit and to adapt the work
|
||||
* by keeping credits to the original authors in the README.md file.
|
||||
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
|
||||
*/
|
||||
|
||||
/*** Buttons ***/
|
||||
|
||||
|
||||
.button.disabled {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
a.button {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
|
||||
/* font-icons */
|
||||
|
||||
a.button.icon,
|
||||
button.btn {
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
}
|
||||
&.sidebar-menu:before,
|
||||
&.toolbar-menu-button:before,
|
||||
&.toolbar-list-button:before {
|
||||
content: @fa-var-ellipsis-v;
|
||||
width: 1em;
|
||||
}
|
||||
&.task-menu-button:before {
|
||||
content: @fa-var-bars;
|
||||
}
|
||||
&.back-sidebar-button:before,
|
||||
&.back-content-button:before,
|
||||
&.back-list-button:before {
|
||||
content: @fa-var-chevron-left;
|
||||
}
|
||||
&.refresh:before {
|
||||
content: @fa-var-sync;
|
||||
}
|
||||
&.generate:before,
|
||||
&.yes:before,
|
||||
&.submit:before,
|
||||
&.continue:before,
|
||||
&.save:before {
|
||||
content: @fa-var-check;
|
||||
}
|
||||
&.create:before {
|
||||
content: @fa-var-plus-square;
|
||||
}
|
||||
&.edit:before {
|
||||
content: @fa-var-pencil-alt;
|
||||
}
|
||||
&.qrcode:before {
|
||||
content: @fa-var-qrcode;
|
||||
}
|
||||
&.search:before {
|
||||
content: @fa-var-search;
|
||||
}
|
||||
&.filter:before {
|
||||
content: @fa-var-filter;
|
||||
font-size: 1.2em; // this icon is too-big in FA5
|
||||
}
|
||||
&.import:before {
|
||||
content: @fa-var-upload;
|
||||
}
|
||||
&.export:before {
|
||||
content: @fa-var-download;
|
||||
}
|
||||
&.discard:before,
|
||||
&.delete:before {
|
||||
.font-icon-regular(@fa-var-trash-alt);
|
||||
}
|
||||
&.next:before {
|
||||
content: @fa-var-arrow-right;
|
||||
}
|
||||
&.restore:before {
|
||||
content: @fa-var-undo;
|
||||
}
|
||||
&.send:before,
|
||||
&.bounce:before {
|
||||
content: @fa-var-paper-plane;
|
||||
}
|
||||
&.attach:before {
|
||||
content: @fa-var-paperclip;
|
||||
}
|
||||
&.attach.vcard:before {
|
||||
content: @fa-var-user;
|
||||
}
|
||||
&.no:before,
|
||||
&.close:before,
|
||||
&.cancel:before {
|
||||
content: @fa-var-times;
|
||||
}
|
||||
&.back:before {
|
||||
content: @fa-var-chevron-left;
|
||||
}
|
||||
&.remove:before {
|
||||
content: @fa-var-times;
|
||||
}
|
||||
&.unlock:before {
|
||||
content: @fa-var-unlock;
|
||||
}
|
||||
&.help:before {
|
||||
.font-icon-regular(@fa-var-life-ring);
|
||||
}
|
||||
&.folders:before {
|
||||
content: @fa-var-folder-open;
|
||||
}
|
||||
&.options:before {
|
||||
content: @fa-var-sliders-h;
|
||||
}
|
||||
&.tools:before,
|
||||
&.settings:before {
|
||||
content: @fa-var-cog;
|
||||
}
|
||||
&.properties:before {
|
||||
content: @fa-var-info-circle;
|
||||
}
|
||||
&.selection:before {
|
||||
.font-icon-regular(@fa-var-check-square);
|
||||
}
|
||||
&.insert.recipient:before {
|
||||
content: @fa-var-user-plus;
|
||||
}
|
||||
&.encrypt:before {
|
||||
content: @fa-var-lock;
|
||||
}
|
||||
&.sign:before {
|
||||
content: @fa-var-signature;
|
||||
}
|
||||
&.sso:before {
|
||||
content: @fa-var-sign-in-alt;
|
||||
}
|
||||
&.extwin:before {
|
||||
content: @fa-var-external-link-square-alt;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn,
|
||||
button.btn {
|
||||
&:before {
|
||||
display: inline !important;
|
||||
float: none !important;
|
||||
vertical-align: middle;
|
||||
margin-right: .4rem !important; // !important needed for a.btn
|
||||
}
|
||||
|
||||
&.oauth.google:before,
|
||||
&.oauth.outlook:before {
|
||||
content: " ";
|
||||
display: inline-block !important;
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
margin-right: .8rem !important;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
&.oauth.google:before {
|
||||
background: url('../images/google-icon.svg') top left no-repeat;
|
||||
}
|
||||
|
||||
&.oauth.outlook:before {
|
||||
background: url('../images/microsoft-icon.svg') top left no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
a.button.icon {
|
||||
&.dropdown:before {
|
||||
content: @fa-var-caret-down;
|
||||
font-size: 1em;
|
||||
}
|
||||
& > span.inner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
html.touch {
|
||||
.btn:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@floating-action-button-size: 4rem;
|
||||
|
||||
.floating-action-buttons {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
.footer:not(:empty) + & {
|
||||
bottom: @layout-footer-small-height;
|
||||
}
|
||||
|
||||
a.button {
|
||||
display: block;
|
||||
float: left;
|
||||
width: @floating-action-button-size;
|
||||
height: @floating-action-button-size;
|
||||
border-radius: 50%;
|
||||
background: @color-main;
|
||||
color: white;
|
||||
opacity: .95;
|
||||
box-shadow: 0 0 5px 5px lighten(@color-main, 35%);
|
||||
margin: 0 1rem 1rem 0;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-plus;
|
||||
width: @floating-action-button-size;
|
||||
height: @floating-action-button-size;
|
||||
line-height: @floating-action-button-size;
|
||||
}
|
||||
|
||||
&.compose {
|
||||
&:before {
|
||||
content: @fa-var-pen;
|
||||
}
|
||||
}
|
||||
|
||||
.inner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*** Bootstrap button style overrides ***/
|
||||
|
||||
.btn {
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 .2rem fade(@color-btn-primary-background, 30%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
color: @color-link;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
color: @color-btn-secondary;
|
||||
background: @color-btn-secondary-background;
|
||||
border-color: @color-btn-secondary-background;
|
||||
|
||||
&:focus {
|
||||
background: darken(@color-btn-secondary-background, 5%);
|
||||
border-color: darken(@color-btn-secondary-background, 7%);
|
||||
box-shadow: 0 0 0 .2rem fade(@color-btn-secondary-background, 50%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken(@color-btn-secondary-background, 5%);
|
||||
border-color: darken(@color-btn-secondary-background, 7%);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
background: @color-btn-secondary-background;
|
||||
border-color: @color-btn-secondary-background;
|
||||
}
|
||||
|
||||
&:not(:disabled):not(.disabled) {
|
||||
&:active,
|
||||
&.active {
|
||||
background: darken(@color-btn-secondary-background, 10%);
|
||||
border-color: darken(@color-btn-secondary-background, 12%);
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 .2rem fade(@color-btn-secondary-background, 53%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
color: @color-btn-primary;
|
||||
background: @color-btn-primary-background;
|
||||
border-color: @color-btn-primary-background;
|
||||
|
||||
&:focus {
|
||||
background: darken(@color-btn-primary-background, 5%);
|
||||
border-color: darken(@color-btn-primary-background, 7%);
|
||||
box-shadow: 0 0 0 .2rem fade(@color-btn-primary-background, 50%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken(@color-btn-primary-background, 5%);
|
||||
border-color: darken(@color-btn-primary-background, 7%);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
background: @color-btn-primary-background;
|
||||
border-color: @color-btn-primary-background;
|
||||
}
|
||||
|
||||
&:not(:disabled):not(.disabled) {
|
||||
&:active,
|
||||
&.active {
|
||||
background: darken(@color-btn-primary-background, 10%);
|
||||
border-color: darken(@color-btn-primary-background, 12%);
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 .2rem fade(@color-btn-primary-background, 53%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
color: @color-btn-danger;
|
||||
background: @color-btn-danger-background;
|
||||
border-color: @color-btn-danger-background;
|
||||
|
||||
&:focus {
|
||||
background: darken(@color-btn-danger-background, 5%);
|
||||
border-color: darken(@color-btn-danger-background, 7%);
|
||||
box-shadow: 0 0 0 .2rem fade(@color-btn-danger-background, 50%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken(@color-btn-danger-background, 5%);
|
||||
border-color: darken(@color-btn-danger-background, 7%);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
background: @color-btn-danger-background;
|
||||
border-color: @color-btn-danger-background;
|
||||
}
|
||||
|
||||
&:not(:disabled):not(.disabled) {
|
||||
&:active,
|
||||
&.active {
|
||||
background: darken(@color-btn-danger-background, 10%);
|
||||
border-color: darken(@color-btn-danger-background, 12%);
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 .2rem fade(@color-btn-danger-background, 53%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
585
styles/widgets/common.less
Normal file
585
styles/widgets/common.less
Normal file
|
|
@ -0,0 +1,585 @@
|
|||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) The Roundcube Dev Team
|
||||
*
|
||||
* The contents are subject to the Creative Commons Attribution-ShareAlike
|
||||
* License. It is allowed to copy, distribute, transmit and to adapt the work
|
||||
* by keeping credits to the original authors in the README.md file.
|
||||
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
|
||||
*/
|
||||
|
||||
/*** Common UI elements ***/
|
||||
|
||||
.rcmaddcontact,
|
||||
.hidden,
|
||||
.voice {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
font.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#rcmdraglayer {
|
||||
min-width: 260px;
|
||||
width: 260px;
|
||||
background-color: @color-drag-layer-background;
|
||||
color: @color-drag-layer;
|
||||
box-shadow: 3px 3px 5px @color-drag-layer-shadow;
|
||||
border-radius: .3rem;
|
||||
z-index: 250;
|
||||
opacity: .92;
|
||||
padding: .5rem;
|
||||
white-space: nowrap;
|
||||
|
||||
div {
|
||||
line-height: 1.6em;
|
||||
.overflow-ellipsis();
|
||||
}
|
||||
}
|
||||
|
||||
.frame-content {
|
||||
padding: 1rem;
|
||||
|
||||
h2 {
|
||||
font-weight: bold;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: bold;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.listbox {
|
||||
.scroller {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.navlist {
|
||||
height: 0;
|
||||
flex: initial !important;
|
||||
|
||||
.listing {
|
||||
tr:last-child td,
|
||||
li:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup & {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.scroller {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.footer {
|
||||
border-top: 1px solid @color-layout-border;
|
||||
background-color: @color-searchbar-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact-header {
|
||||
display: flex;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.contact-photo {
|
||||
min-width: @layout-contact-icon-width;
|
||||
}
|
||||
|
||||
.contact-head {
|
||||
margin-left: 1rem;
|
||||
margin-top: 0 !important;
|
||||
|
||||
legend {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@image-attachment-size: 250px;
|
||||
|
||||
// this is when image thumbnails are enabled
|
||||
p.image-attachment {
|
||||
position: relative;
|
||||
border: 1px solid @color-border;
|
||||
border-radius: .3rem;
|
||||
background-color: @color-message-background;
|
||||
float: left;
|
||||
margin: .5rem;
|
||||
min-width: 47%;
|
||||
min-height: @image-attachment-size;
|
||||
overflow: hidden;
|
||||
// use flexbox to center the image
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@media screen and (max-width: @screen-width-xs) {
|
||||
float: none;
|
||||
margin: .5rem 0 .5rem 0;
|
||||
}
|
||||
|
||||
.image-link {
|
||||
align-self: center;
|
||||
text-align: center;
|
||||
margin: 1.6rem .5rem;
|
||||
}
|
||||
|
||||
span {
|
||||
color: @color-form-hint;
|
||||
padding: 0 .5rem;
|
||||
font-size: 90%;
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.image-filename {
|
||||
.overflow-ellipsis();
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding-right: 4rem;
|
||||
}
|
||||
|
||||
.image-filesize {
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.attachment-links {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
padding: 0 .5rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
a:before {
|
||||
&:extend(.font-icon-class);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
a.open:before {
|
||||
content: @fa-var-external-link-square-alt;
|
||||
}
|
||||
|
||||
a.download:before {
|
||||
content: @fa-var-download;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// this is when image thumbnails are disabled
|
||||
fieldset.image-attachment {
|
||||
margin-top: .5rem;
|
||||
|
||||
legend {
|
||||
color: @color-form-hint;
|
||||
font-size: .9rem;
|
||||
border-top: 1px solid lighten(@color-mail-headers, 50%);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#folder-selector {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.noselect {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.iframe-loader {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 255, 255, .95);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 3;
|
||||
|
||||
.spinner-border {
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
color: @color-spinner-circle;
|
||||
border: 1rem solid;
|
||||
border-color: currentColor @color-spinner-item currentColor currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.footer.toolbar + .iframe-loader {
|
||||
top: @layout-header-height;
|
||||
bottom: @layout-header-height;
|
||||
}
|
||||
|
||||
// iOS: Fix scrolling of iframe, display scrollbars on scrollable elements
|
||||
.ios-scroll {
|
||||
padding: 0;
|
||||
-webkit-overflow-scrolling: touch !important;
|
||||
overflow: scroll !important;
|
||||
|
||||
&.iframe-wrapper {
|
||||
margin-top: 1px; // FIXME: without this scrolling hides the wrapper neighbours' border
|
||||
}
|
||||
}
|
||||
|
||||
.webkit-scroller {
|
||||
&::-webkit-scrollbar {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar:vertical {
|
||||
width: .5rem;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar:horizontal {
|
||||
height: .5rem;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
border-radius: .25rem;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.quota-widget {
|
||||
width: 100%;
|
||||
max-width: 15em;
|
||||
padding: .5rem 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: @color-quota-text;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-hdd;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.count {
|
||||
font-size: 80%;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.bar {
|
||||
flex: 1;
|
||||
height: .5rem;
|
||||
margin: 0 1rem;
|
||||
background-color: @color-quota-background;
|
||||
border: 1px solid @color-layout-border;
|
||||
border-radius: .25rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.value {
|
||||
display: block;
|
||||
background-color: @color-quota-value;
|
||||
height: 1rem;
|
||||
opacity: .75;
|
||||
|
||||
&.warning {
|
||||
background-color: @color-quota-value-warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-tools {
|
||||
position: absolute;
|
||||
top: 5rem;
|
||||
left: 0;
|
||||
height: @layout-header-height;
|
||||
overflow: hidden;
|
||||
transform: translateX(-87%);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
background-color: @color-image-tools-background;
|
||||
border-radius: 0 .3rem .3rem 0;
|
||||
|
||||
.menu {
|
||||
float: left;
|
||||
}
|
||||
|
||||
a.button.icon.tools {
|
||||
padding: 0 .25rem;
|
||||
display: inline-block;
|
||||
height: @layout-header-height;
|
||||
|
||||
span.inner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:before {
|
||||
line-height: @layout-header-height;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.open {
|
||||
transform: translateX(0);
|
||||
|
||||
a.button.icon.tools:before {
|
||||
content: @fa-var-chevron-left;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: @color-image-tools !important;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: @color-image-tools-hover !important;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quota-info {
|
||||
width: 100%;
|
||||
display: table !important;
|
||||
|
||||
td,th {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
th {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.root {
|
||||
line-height: 1;
|
||||
font-style: italic;
|
||||
color: @color-popover-separator;
|
||||
background-color: @color-popover-separator-background;
|
||||
}
|
||||
|
||||
th:first-child,
|
||||
.name {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
// Make Bootstrap tabs non-wrappable
|
||||
.nav-tabs {
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.nav-item {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
.overflow-ellipsis();
|
||||
}
|
||||
}
|
||||
|
||||
.props-table {
|
||||
td.title {
|
||||
width: 7em;
|
||||
}
|
||||
}
|
||||
|
||||
.table-widget {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: .5rem;
|
||||
border: 1px solid @color-table-border;
|
||||
|
||||
& > .content {
|
||||
overflow-x: auto;
|
||||
flex-grow: 1;
|
||||
height: 18.5em;
|
||||
|
||||
table th {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& > .footer {
|
||||
height: 3.5rem;
|
||||
border-top: 1px solid @color-table-border;
|
||||
text-align: left;
|
||||
|
||||
a {
|
||||
padding: .2rem .45rem !important;
|
||||
height: ~"calc(3.5rem - 1px)" !important;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
margin: 0;
|
||||
max-height: 18.5em;
|
||||
}
|
||||
|
||||
// Options table is a table with first column for identifier/description
|
||||
// and other columns for a state flag. E.g. ACL table
|
||||
table.options-table {
|
||||
td,th {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
&:first-child {
|
||||
.overflow-ellipsis();
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: 1px solid @color-table-border;
|
||||
}
|
||||
|
||||
tr.selected td {
|
||||
background-color: @color-table-selected-background;
|
||||
color: @color-table-selected;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
td:not(:first-child) span {
|
||||
display: inline-block;
|
||||
line-height: 1.25;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
}
|
||||
}
|
||||
|
||||
td.enabled span:before {
|
||||
content: @fa-var-check;
|
||||
}
|
||||
|
||||
td.partial span:before {
|
||||
opacity: .3;
|
||||
content: @fa-var-check;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table.compact-table {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
||||
*:not(.invalid-feedback) {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: .25rem;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
table.table {
|
||||
.checkbox-cell {
|
||||
width: 3rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
padding: .5rem;
|
||||
|
||||
html.touch & {
|
||||
padding: .5rem .3rem;
|
||||
}
|
||||
}
|
||||
|
||||
th.checkbox-cell {
|
||||
padding: .75rem 0;
|
||||
max-width: 1rem;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
cursor: pointer;
|
||||
margin: 0 1rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&.subscription:before {
|
||||
content: @fa-var-rss-square;
|
||||
}
|
||||
|
||||
&.alarm:before {
|
||||
.font-icon-regular(@fa-var-bell);
|
||||
}
|
||||
|
||||
&.read:before {
|
||||
content: @fa-var-eye;
|
||||
}
|
||||
|
||||
&.write:before {
|
||||
content: @fa-var-pencil-alt;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons-cell {
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
|
||||
a.button:before {
|
||||
line-height: 1;
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@media screen and (min-width: @screen-width-xs) {
|
||||
a.button .inner {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
margin: 0;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
fieldset.tab-pane & thead th {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
tr.deleted td {
|
||||
color: @color-list-deleted !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Bootstrap's .table style overwrites */
|
||||
.table {
|
||||
thead th {
|
||||
border-width: 1px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
263
styles/widgets/dialogs.less
Normal file
263
styles/widgets/dialogs.less
Normal file
|
|
@ -0,0 +1,263 @@
|
|||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) The Roundcube Dev Team
|
||||
*
|
||||
* The contents are subject to the Creative Commons Attribution-ShareAlike
|
||||
* License. It is allowed to copy, distribute, transmit and to adapt the work
|
||||
* by keeping credits to the original authors in the README.md file.
|
||||
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
|
||||
*/
|
||||
|
||||
/*** Dialogs and popovers ***/
|
||||
|
||||
.popupmenu {
|
||||
display: none;
|
||||
padding: 0;
|
||||
min-width: 180px;
|
||||
height: 100%;
|
||||
|
||||
li > a {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.propform {
|
||||
overflow: hidden;
|
||||
padding: .25rem; // so overflow do not truncate focus outline on inputs
|
||||
}
|
||||
|
||||
&.simplelist {
|
||||
min-width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.popup.justified {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.popover-body {
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
|
||||
& > .popupmenu {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.popover {
|
||||
box-shadow: 3px 3px 5px @color-popover-shadow;
|
||||
border-color: @color-layout-border;
|
||||
padding: 0;
|
||||
z-index: 1300;
|
||||
|
||||
.popover-header {
|
||||
// On mobile don't display popup arrows and titles
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: (@screen-width-small + 1px)) {
|
||||
.listing {
|
||||
li:first-child {
|
||||
border-radius: .25rem .25rem 0 0;
|
||||
}
|
||||
|
||||
li:last-child {
|
||||
border-bottom-right-radius: .25rem;
|
||||
border-bottom-left-radius: .25rem;
|
||||
}
|
||||
|
||||
ul.rounded-0 > li {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html.layout-small,
|
||||
html.layout-phone {
|
||||
.popover:not(.select-menu) {
|
||||
margin: 0 !important;
|
||||
padding: 0;
|
||||
right: 0;
|
||||
left: initial !important;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
width: @layout-mobile-menu-width;
|
||||
transform: none !important;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: none;
|
||||
|
||||
div.arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.listing li:last-child {
|
||||
border-bottom: 1px solid @color-list-border;
|
||||
}
|
||||
}
|
||||
|
||||
.popover-overlay {
|
||||
z-index: 1299;
|
||||
background-color: @color-dialog-overlay-background;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.popover-header {
|
||||
display: block;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
padding: 0 .5em;
|
||||
height: @layout-touch-header-height;
|
||||
min-height: @layout-touch-header-height; // for when it's a flex item
|
||||
line-height: @layout-touch-header-height;
|
||||
font-size: @layout-touch-header-font-size;
|
||||
color: @color-popover-mobile-header;
|
||||
background-color: @color-popover-mobile-header-background;
|
||||
|
||||
&:before {
|
||||
display: none; // hide the Bootstrap's popover arrow element
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
color: @color-popover-mobile-header;
|
||||
}
|
||||
}
|
||||
|
||||
.popover-body > * {
|
||||
max-height: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
html.touch .popover {
|
||||
.listing {
|
||||
li a {
|
||||
line-height: @layout-touch-menu-record-height;
|
||||
font-size: @layout-touch-menu-record-font-size;
|
||||
padding: 0 .5em;
|
||||
|
||||
&:before {
|
||||
float: left; // overwrite icon float to have unified element height
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-menu {
|
||||
max-width: initial;
|
||||
margin: 0;
|
||||
height: auto;
|
||||
z-index: 1301; // above TinyMCE dialogs
|
||||
|
||||
.popover-header {
|
||||
border-radius: .25rem .25rem 0 0 !important;
|
||||
}
|
||||
|
||||
.listing li {
|
||||
a {
|
||||
padding-left: .25rem;
|
||||
outline: 0; // for Android browser
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-right-radius: .25rem;
|
||||
border-bottom-left-radius: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Use 'inline' class for menus that have a list elements with no <a> inside
|
||||
// and no header
|
||||
&.inline {
|
||||
.listing li {
|
||||
padding-right: .5rem;
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: .25rem;
|
||||
border-top-right-radius: .25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** PGP Key search/import dialog **/
|
||||
|
||||
.pgpkeyimport {
|
||||
div.key {
|
||||
position: relative;
|
||||
padding: .5rem 0;
|
||||
|
||||
&.revoked,
|
||||
&.disabled {
|
||||
color: @color-list-secondary;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-right: 0.5em;
|
||||
margin-bottom: 0;
|
||||
|
||||
&:after {
|
||||
content: ":";
|
||||
}
|
||||
|
||||
&.keyid {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
label + a,
|
||||
label + span {
|
||||
line-height: 2.6rem;
|
||||
margin-right: 1em;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
label.keyid + a {
|
||||
font-weight: bold;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-key;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.uids {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li.uid {
|
||||
border: 0;
|
||||
padding: .25rem 0 0 1.5em;
|
||||
line-height: 1.5rem !important;
|
||||
list-style-type: none;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-user;
|
||||
opacity: 0.25;
|
||||
font-size: 1em;
|
||||
line-height: 1.25;
|
||||
}
|
||||
}
|
||||
|
||||
button.importkey {
|
||||
position: absolute;
|
||||
top: .5rem;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
537
styles/widgets/editor.less
Normal file
537
styles/widgets/editor.less
Normal file
|
|
@ -0,0 +1,537 @@
|
|||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) The Roundcube Dev Team
|
||||
*
|
||||
* The contents are subject to the Creative Commons Attribution-ShareAlike
|
||||
* License. It is allowed to copy, distribute, transmit and to adapt the work
|
||||
* by keeping credits to the original authors in the README.md file.
|
||||
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
|
||||
*/
|
||||
|
||||
|
||||
/*** Text Editor widget (and TinyMCE editor) ***/
|
||||
|
||||
// use of div.tox instead of just .tox is to have prio over TinyMCE styles
|
||||
div.tox {
|
||||
font-size: 1rem;
|
||||
|
||||
&, :not(.svg) {
|
||||
.font-family();
|
||||
}
|
||||
|
||||
&.tox-tinymce {
|
||||
border-radius: .25rem;
|
||||
border: 1px solid @color-input-border;
|
||||
}
|
||||
|
||||
&.focused {
|
||||
border-color: @color-input-border-focus !important;
|
||||
box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow !important;
|
||||
}
|
||||
|
||||
.tox-toolbar-overlord {
|
||||
z-index: 1; // for sticky header feature
|
||||
|
||||
& > div {
|
||||
// The svg is copied from TinyMCE with modified height params
|
||||
background: url("data:image/svg+xml;charset=utf8,%3Csvg height='33px' viewBox='0 0 40 33px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='32px' width='100' height='1' fill='%23cccccc'/%3E%3C/svg%3E");
|
||||
background-color: @color-input-addon-background;
|
||||
}
|
||||
}
|
||||
|
||||
.tox-toolbar__primary {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
// This one is for mobile
|
||||
.tox-toolbar {
|
||||
background-color: @color-input-addon-background;
|
||||
}
|
||||
|
||||
.tox-edit-area {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.tox-dialog {
|
||||
border-radius: 0;
|
||||
border-color: @color-layout-border;
|
||||
box-shadow: none;
|
||||
align-self: unset !important;
|
||||
|
||||
.tox-form__group {
|
||||
margin-top: 0;
|
||||
margin-bottom: .75rem;
|
||||
}
|
||||
|
||||
.tox-dialog__body-nav-item--active {
|
||||
color: @color-link;
|
||||
border-color: transparent;
|
||||
|
||||
&:hover {
|
||||
color: @color-link-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tox-dialog__body-content {
|
||||
overflow: unset;
|
||||
}
|
||||
|
||||
.tox-dialog__content-js {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.tox-dialog-wrap__backdrop {
|
||||
background-color: @color-dialog-overlay-background;
|
||||
}
|
||||
|
||||
.tox-dialog__header {
|
||||
height: (@layout-header-height - 1px);
|
||||
border-bottom: 1px solid @color-dialog-header-border;
|
||||
justify-content: flex-end; // fixes close button position when dialog has no title
|
||||
padding: 0;
|
||||
|
||||
.tox-button {
|
||||
color: @color-dialog-header;
|
||||
right: 0;
|
||||
height: (@layout-header-height - .7rem);
|
||||
width: 2.25em;
|
||||
margin-right: .4rem;
|
||||
|
||||
&:hover {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.tox-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-times;
|
||||
line-height: 1.5rem;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tox-dialog__footer {
|
||||
height: (@layout-footer-height - 1px) !important;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0 1rem;
|
||||
|
||||
@media screen and (max-width: @screen-width-xs) {
|
||||
border-top: 1px solid @color-dialog-header-border;
|
||||
}
|
||||
|
||||
& > div {
|
||||
white-space: nowrap;
|
||||
max-height: (@layout-footer-height - 1px);
|
||||
|
||||
button:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tox-button {
|
||||
.btn-primary();
|
||||
font-weight: normal;
|
||||
padding: .5rem .75rem;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
width: 1em;
|
||||
content: @fa-var-check;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// this is redundant, but required because of tinymce styles interference
|
||||
&:focus:not(:disabled) {
|
||||
background: @color-btn-primary-background;
|
||||
border-color: @color-btn-primary-background;
|
||||
}
|
||||
|
||||
&.tox-button--secondary {
|
||||
.btn-secondary();
|
||||
color: @color-btn-secondary;
|
||||
|
||||
&:before {
|
||||
content: @fa-var-times;
|
||||
}
|
||||
|
||||
// this is redundant, but required because of tinymce styles interference
|
||||
&:focus:not(:disabled) {
|
||||
background: @color-btn-secondary-background;
|
||||
border-color: @color-btn-secondary-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tox-search-dialog {
|
||||
.tox-form__group:not(:first-child) {
|
||||
flex: initial !important;
|
||||
}
|
||||
|
||||
.tox-dialog__footer-start {
|
||||
button {
|
||||
padding: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.tox-dialog__footer-end {
|
||||
button {
|
||||
&:before {
|
||||
content: @fa-var-pencil-alt !important;
|
||||
}
|
||||
|
||||
&:nth-of-type(1):before {
|
||||
content: @fa-var-search !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tox-dialog__title {
|
||||
line-height: calc(@layout-header-height - 1px);
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
padding: 0 0 0 1rem;
|
||||
width: 100%;
|
||||
color: @color-dialog-header;
|
||||
}
|
||||
|
||||
// Make toolbar buttons smaller
|
||||
.tox-tbtn {
|
||||
height: 28px;
|
||||
|
||||
&:not(.tox-tbtn--select,.tox-split-button__chevron) {
|
||||
width: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.tox-button {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.tox-label {
|
||||
color: @color-font;
|
||||
padding-bottom: .25rem;
|
||||
}
|
||||
|
||||
// Adding .form-control does not work with TinyMCE skins,
|
||||
// so we have to overwrite some props here
|
||||
.tox-color-input > input,
|
||||
.tox-listboxfield .tox-listbox--select,
|
||||
.tox-textarea,
|
||||
.tox-textfield {
|
||||
.font-family() !important;
|
||||
font-size: @page-font-size;
|
||||
line-height: 1.5;
|
||||
color: @color-font;
|
||||
border-radius: .25rem;
|
||||
min-height: 0;
|
||||
padding: .375rem .75rem;
|
||||
|
||||
&:focus {
|
||||
border-color: @color-input-border-focus;
|
||||
box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.tox-listbox__select-label {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tox-color-input span {
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.custom-switch {
|
||||
position: relative;
|
||||
font-size: 1rem;
|
||||
margin-top: .15rem;
|
||||
|
||||
.tox-checkbox__icons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tox-checkbox__label {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.image-selector {
|
||||
font-size: 1rem;
|
||||
button {
|
||||
.btn-secondary();
|
||||
padding: .5rem .75rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
// small fix for image dialog
|
||||
.tox-form__controls-h-stack div:not(:last-child) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tox-collection__item-label {
|
||||
white-space: nowrap; // fix TinyMCE bug
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-width-xs) {
|
||||
div.tox {
|
||||
.tox-dialog {
|
||||
margin: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100%;
|
||||
left: 0 !important;
|
||||
top: 0 !important;
|
||||
border-width: 0 !important;
|
||||
}
|
||||
|
||||
.tox-dialog__header {
|
||||
background-color: @color-layout-mobile-header-background;
|
||||
|
||||
.tox-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tox-dialog__title {
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.tox-dialog__footer {
|
||||
background-color: @color-layout-mobile-footer-background;
|
||||
|
||||
.tox-button {
|
||||
color: @color-font !important;
|
||||
background: transparent !important;
|
||||
padding: .45rem;
|
||||
margin: 0 !important;
|
||||
border: 0;
|
||||
font-size: 90%;
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
float: none;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
line-height: 1.75;
|
||||
height: 1.75rem;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
color: @color-font;
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
justify-content: space-evenly;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*** Media file selector for TinyMCE ***/
|
||||
|
||||
.image-selector {
|
||||
padding: 1rem .5rem 10rem .5rem !important;
|
||||
|
||||
&.droptarget {
|
||||
border: .2rem dashed @color-table-border;
|
||||
|
||||
&:after {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.attachmentslist {
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
height: 19.1em;
|
||||
padding: 0 !important;
|
||||
|
||||
li {
|
||||
padding: .25rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: @color-list-selected-background;
|
||||
}
|
||||
|
||||
span.name {
|
||||
flex: 1;
|
||||
margin: auto;
|
||||
padding-left: 1rem;
|
||||
.overflow-ellipsis();
|
||||
}
|
||||
|
||||
span.img {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
display: flex;
|
||||
border: 1px solid @color-list-border;
|
||||
background: white;
|
||||
border-radius: .75rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
html.layout-phone & {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*** HTML editor widget ***/
|
||||
|
||||
.html-editor {
|
||||
position: relative;
|
||||
margin-bottom: .2rem;
|
||||
|
||||
.editor-toolbar {
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
border-radius: .25rem .25rem 0 0;
|
||||
border-bottom: 1px solid @color-input-border;
|
||||
background-color: @color-input-addon-background;
|
||||
|
||||
.mce-i-html {
|
||||
display: block;
|
||||
margin: 2px 2px 2px 4px;
|
||||
width: 34px;
|
||||
height: 28px;
|
||||
border-radius: .25rem;
|
||||
color: #222f3e; // from TinyMCE
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
border-color: #e2e4e7;
|
||||
background-color: #dee0e2; // from TinyMCE
|
||||
}
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-image;
|
||||
margin: 0;
|
||||
width: 34px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: .7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// hide toolbar in html mode and in mailvelope mode
|
||||
&.mailvelope .editor-toolbar,
|
||||
.tox-tinymce + .editor-toolbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& > .googie_edit_layer,
|
||||
& > textarea {
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
width: 100% !important;
|
||||
padding-top: 40px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
& > iframe { // e.g. mailvelope frame
|
||||
border-radius: .3rem;
|
||||
border: 1px solid @color-input-border;
|
||||
min-height: 30em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*** GoogieSpell widget ***/
|
||||
|
||||
.googie_window {
|
||||
width: 16rem;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.googie_edit_layer {
|
||||
font-family: monospace;
|
||||
|
||||
// from Bootstrap's textarea
|
||||
padding: .5rem .75rem;
|
||||
border: 1px solid @color-input-border;
|
||||
border-radius: .3rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.googie_link {
|
||||
color: @color-spellcheck-link;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.googie_list {
|
||||
li {
|
||||
min-width: 8rem;
|
||||
width: auto;
|
||||
|
||||
&.googie_list_onhover {
|
||||
color: @color-menu-hover;
|
||||
background-color: @color-menu-hover-background;
|
||||
}
|
||||
|
||||
.googie_list_revert:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-undo;
|
||||
}
|
||||
|
||||
.googie_add_to_dict:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-plus-square;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
display: inline-block;
|
||||
margin: .25rem .5rem;
|
||||
}
|
||||
}
|
||||
1431
styles/widgets/forms.less
Normal file
1431
styles/widgets/forms.less
Normal file
File diff suppressed because it is too large
Load diff
440
styles/widgets/jqueryui.less
Normal file
440
styles/widgets/jqueryui.less
Normal file
|
|
@ -0,0 +1,440 @@
|
|||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) The Roundcube Dev Team
|
||||
*
|
||||
* The contents are subject to the Creative Commons Attribution-ShareAlike
|
||||
* License. It is allowed to copy, distribute, transmit and to adapt the work
|
||||
* by keeping credits to the original authors in the README.md file.
|
||||
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
|
||||
*/
|
||||
|
||||
/*** jQuery-UI widgets' style overrides ***/
|
||||
|
||||
.ui-widget-overlay {
|
||||
background-color: @color-dialog-overlay-background;
|
||||
opacity: 1 !important; // override jQuery-UI opacity, the color above is semi-transparent
|
||||
|
||||
&.datepicker {
|
||||
z-index: 119; // above Bootstrap's form controls, below datepicker
|
||||
}
|
||||
}
|
||||
|
||||
.ui-widget {
|
||||
border: 1px solid @color-datepicker-border;
|
||||
box-shadow: 3px 3px 5px @color-popover-shadow;
|
||||
border-radius: .3rem;
|
||||
}
|
||||
|
||||
.ui-menu {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: 400px;
|
||||
border-radius: .3rem;
|
||||
z-index: 240;
|
||||
position: absolute;
|
||||
|
||||
.ui-state-active {
|
||||
border: 0 !important;
|
||||
background-color: @color-menu-hover-background !important;
|
||||
}
|
||||
|
||||
.ui-menu-item {
|
||||
white-space: nowrap;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.ui-menu-item-wrapper {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-dialog {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
|
||||
&.no-titlebar {
|
||||
.ui-dialog-titlebar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-dialog-titlebar {
|
||||
height: @layout-header-height;
|
||||
border-bottom: 1px solid @color-dialog-header-border;
|
||||
|
||||
button {
|
||||
&:before {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ui-dialog-title {
|
||||
line-height: @layout-header-height;
|
||||
font-size: 1.25rem;
|
||||
padding: 0 3rem 0 1rem;
|
||||
color: @color-dialog-header;
|
||||
}
|
||||
|
||||
.ui-dialog-titlebar-close {
|
||||
border: 0;
|
||||
color: @color-dialog-header;
|
||||
background: transparent;
|
||||
right: 0;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
padding: .25rem .5rem;
|
||||
margin: ((@layout-header-height - 2 * @page-font-size) / 2) .5rem;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-times;
|
||||
line-height: 1.5rem;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-dialog-content {
|
||||
& > .popupmenu {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-dialog-buttonpane {
|
||||
.ui-dialog-buttonset {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
a.btn-link,
|
||||
button {
|
||||
.overflow-ellipsis();
|
||||
min-width: 5rem;
|
||||
margin: floor(.65 * @page-font-size) floor(.3 * @page-font-size);
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn-link {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
text-decoration: none;
|
||||
color: @color-font;
|
||||
|
||||
&:focus {
|
||||
background-color: fade(@color-btn-primary-background, 50%);
|
||||
}
|
||||
|
||||
&.options {
|
||||
order: -1;
|
||||
padding: .375rem .25rem;
|
||||
margin-right: .3rem;
|
||||
|
||||
&:before {
|
||||
// this icon is for mobile version
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-cog;
|
||||
width: 100%;
|
||||
height: 1.25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
iframe,
|
||||
.ui-dialog-content.iframe {
|
||||
padding: 0;
|
||||
width: 100% !important;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
// Fix scrollbar/resize issue e.g. in qr-code dialog
|
||||
.ui-dialog,
|
||||
.ui-dialog-content {
|
||||
box-sizing: initial;
|
||||
}
|
||||
|
||||
// Overwriting this icon generally prevents from loading bigger images sprite from jQuery-UI
|
||||
.ui-widget-content .ui-icon.ui-resizable-se {
|
||||
background: @icon-resize-corner;
|
||||
}
|
||||
|
||||
/* FIXME: why do I need !important here? */
|
||||
|
||||
@media screen and (max-width: @screen-width-xs) {
|
||||
.ui-dialog {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 0;
|
||||
top: 0 !important; // for Chrome
|
||||
|
||||
.ui-resizable-handle,
|
||||
.ui-dialog-titlebar-close {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ui-dialog-titlebar {
|
||||
height: @layout-touch-header-height;
|
||||
text-align: center;
|
||||
background-color: @color-layout-mobile-header-background;
|
||||
}
|
||||
|
||||
.ui-dialog-title {
|
||||
line-height: @layout-touch-header-height;
|
||||
font-size: @layout-header-font-size;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.ui-dialog-content {
|
||||
flex: 1;
|
||||
&:not(.iframe) {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-dialog-buttonpane {
|
||||
padding: 0 !important;
|
||||
text-align: center !important;
|
||||
border-top: 1px solid @color-dialog-header-border;
|
||||
height: @layout-header-height !important;
|
||||
background-color: @color-layout-mobile-footer-background;
|
||||
|
||||
.ui-dialog-buttonset {
|
||||
justify-content: space-around;
|
||||
|
||||
button {
|
||||
margin: 0 !important;
|
||||
padding: .45rem;
|
||||
border: 0 !important;
|
||||
height: @layout-header-height;
|
||||
box-shadow: none;
|
||||
font-size: 90%;
|
||||
line-height: 1.5;
|
||||
|
||||
&:before {
|
||||
display: block !important;
|
||||
float: none;
|
||||
width: auto;
|
||||
height: 1.75rem;
|
||||
line-height: 1.75;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.btn-primary,
|
||||
&.btn-secondary {
|
||||
color: @color-toolbar-button;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&.btn-danger {
|
||||
color: @color-btn-danger-background;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
&.cancel {
|
||||
order: 100; // makes Cancel/close button the last one
|
||||
}
|
||||
}
|
||||
|
||||
a.btn-link {
|
||||
color: @color-toolbar-button;
|
||||
margin: 0;
|
||||
padding: .45rem;
|
||||
font-size: 90%;
|
||||
|
||||
&.options:before {
|
||||
display: block !important;
|
||||
height: 1.75rem;
|
||||
line-height: 1.75;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Slider widget */
|
||||
|
||||
.ui-slider {
|
||||
box-shadow: none;
|
||||
|
||||
.ui-slider-range {
|
||||
border-radius: .3rem;
|
||||
background: lighten(@color-main, 30%);
|
||||
}
|
||||
|
||||
.ui-slider-handle {
|
||||
border-radius: .3rem;
|
||||
|
||||
&.ui-state-active {
|
||||
background: @color-main;
|
||||
border-color: @color-main-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Datepicker widget */
|
||||
|
||||
.ui-datepicker {
|
||||
// Always display datepicker centered, overwriting widgets position
|
||||
margin: ~"calc(50vh - 10em) calc(50vw - 10em) !important";
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
box-shadow: none;
|
||||
user-select: none;
|
||||
|
||||
&:not(.ui-datepicker-inline) {
|
||||
z-index: 120 !important; // fixes datepicker over input-group and dialogs
|
||||
}
|
||||
|
||||
.ui-datepicker-header,
|
||||
.ui-datepicker-title {
|
||||
line-height: 4rem;
|
||||
height: 4rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ui-datepicker-header {
|
||||
border-bottom: 1px solid @color-dialog-header-border;
|
||||
|
||||
a {
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
select {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-icon {
|
||||
background-image: none !important;
|
||||
background-position: none !important;
|
||||
}
|
||||
|
||||
.ui-datepicker-prev,
|
||||
.ui-datepicker-next {
|
||||
cursor: pointer;
|
||||
width: auto;
|
||||
color: @color-font;
|
||||
text-decoration: none;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: "\f053";
|
||||
margin: 0 .25em;
|
||||
height: auto;
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-datepicker-prev:before {
|
||||
content: "\f053";
|
||||
}
|
||||
|
||||
.ui-datepicker-next:before {
|
||||
content: "\f054";
|
||||
}
|
||||
|
||||
td a {
|
||||
padding: 0;
|
||||
line-height: 1.8em;
|
||||
border-radius: .3rem;
|
||||
}
|
||||
|
||||
.ui-state-default,
|
||||
&.ui-widget-content .ui-state-default {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: @color-datepicker-font;
|
||||
}
|
||||
|
||||
.ui-datepicker-days-cell-over a,
|
||||
.ui-datepicker-days-cell-over a.ui-state-default,
|
||||
.ui-state-highlight,
|
||||
&.ui-widget-content .ui-state-highlight {
|
||||
background: @color-datepicker-highlight-background;
|
||||
color: @color-datepicker-highlight;
|
||||
}
|
||||
|
||||
a.ui-state-active {
|
||||
background: @color-datepicker-active-background !important;
|
||||
color: @color-datepicker-active !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
html.touch {
|
||||
& {
|
||||
td a {
|
||||
font-size: 1.2em;
|
||||
line-height: 2.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fixes datepicker z-index issue on input-group inputs in dialogs
|
||||
// With non-relative position the input's z-index is ignored
|
||||
.input-group > .form-control.hasDatepicker {
|
||||
position: initial;
|
||||
}
|
||||
|
||||
.minicolors-panel {
|
||||
border: 1px solid @color-datepicker-border;
|
||||
box-shadow: 3px 3px 5px @color-popover-shadow;
|
||||
border-radius: .3rem;
|
||||
height: 152px;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
.minicolors-input {
|
||||
width: 100%;
|
||||
// needed so minicolors panel is not out of screen
|
||||
// when the input is on the right side, e.g. Calendar plugin settings
|
||||
// This is obviously minicolors script issue
|
||||
min-width: 130px;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-width-mini) {
|
||||
.ui-widget-content {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.ui-menu {
|
||||
border-radius: .3rem;
|
||||
left: 15px !important;
|
||||
right: 15px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.ui-dialog {
|
||||
.ui-dialog-content:not(.iframe) {
|
||||
padding: .65rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-autocomplete {
|
||||
// TODO: e.g. time input autocompletion on mobile
|
||||
}
|
||||
}
|
||||
1084
styles/widgets/lists.less
Normal file
1084
styles/widgets/lists.less
Normal file
File diff suppressed because it is too large
Load diff
952
styles/widgets/menu.less
Normal file
952
styles/widgets/menu.less
Normal file
|
|
@ -0,0 +1,952 @@
|
|||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) The Roundcube Dev Team
|
||||
*
|
||||
* The contents are subject to the Creative Commons Attribution-ShareAlike
|
||||
* License. It is allowed to copy, distribute, transmit and to adapt the work
|
||||
* by keeping credits to the original authors in the README.md file.
|
||||
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
|
||||
*/
|
||||
|
||||
/*** Toolbar widget ***/
|
||||
|
||||
.menu {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
|
||||
a {
|
||||
.overflow-ellipsis();
|
||||
text-decoration: none;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: "\00a0"; // blank placeholder
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:not(.disabled):focus,
|
||||
&:not(.disabled):hover {
|
||||
background-color: @color-toolbar-button-background-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&.toolbar {
|
||||
li {
|
||||
display: inline-block;
|
||||
height: @layout-touch-header-height;
|
||||
}
|
||||
|
||||
a {
|
||||
color: @color-toolbar-button;
|
||||
display: block;
|
||||
float: left;
|
||||
border: 0 !important;
|
||||
height: @layout-header-height;
|
||||
min-width: 3.2rem;
|
||||
max-width: 6rem;
|
||||
width: auto; // reset width defined for links in .listing
|
||||
padding: .45rem;
|
||||
line-height: 1.5;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
|
||||
&:before {
|
||||
height: 1.75rem !important;
|
||||
float: none !important;
|
||||
width: auto !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: @color-success;
|
||||
}
|
||||
}
|
||||
|
||||
& > .spacer {
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
.dropbutton {
|
||||
&:not(.disabled):hover {
|
||||
background-color: @color-toolbar-button-background-hover;
|
||||
}
|
||||
|
||||
a.dropdown {
|
||||
padding: 0 .3rem;
|
||||
|
||||
&:before {
|
||||
line-height: @layout-header-height;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: darken(@color-toolbar-button-background-hover, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span.inner {
|
||||
font-size: 90%;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.dropbutton {
|
||||
display: inline-block;
|
||||
|
||||
a.dropdown {
|
||||
font-size: 75%;
|
||||
min-width: 0;
|
||||
|
||||
html.ie11 &:before {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
span.inner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
a:first-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.pagenav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 !important;
|
||||
font-size: 100%; // in case this is .footer.small
|
||||
|
||||
a {
|
||||
flex-grow: 1;
|
||||
display: inline-block;
|
||||
min-width: 2rem !important;
|
||||
height: @layout-footer-small-height;
|
||||
color: @color-toolbar-button;
|
||||
|
||||
&:before {
|
||||
margin: 0;
|
||||
display: inline;
|
||||
float: none;
|
||||
line-height: @layout-footer-small-height;
|
||||
}
|
||||
}
|
||||
|
||||
.pagenav-text {
|
||||
.overflow-ellipsis();
|
||||
color: @color-list-pagenav;
|
||||
flex-grow: 4;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 3rem;
|
||||
max-width: 5rem;
|
||||
font-size: 90%;
|
||||
text-align: center;
|
||||
max-height: 1.6rem;
|
||||
margin: 0 .2rem;
|
||||
|
||||
html.layout-phone & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
span.inner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.pagenav-list {
|
||||
cursor: pointer;
|
||||
background-color: @color-searchbar-background;
|
||||
border-bottom: 1px solid @color-list-border;
|
||||
|
||||
a {
|
||||
flex-grow: unset;
|
||||
}
|
||||
|
||||
.pagenav-text {
|
||||
text-align: left;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
& + .navlist {
|
||||
background-color: #fbfbfb;
|
||||
}
|
||||
|
||||
&.expanded + .navlist {
|
||||
border-bottom: 1px solid @color-layout-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.content-frame-navigation.hide-nav-buttons {
|
||||
a.next,
|
||||
a.prev {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.listselectors {
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: block;
|
||||
|
||||
button {
|
||||
display: block;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
color: @color-toolbar-button;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
height: @layout-touch-header-height;
|
||||
line-height: @layout-touch-header-height;
|
||||
width: 2.5em;
|
||||
|
||||
&:before {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popover & {
|
||||
li {
|
||||
display: block;
|
||||
height: auto;
|
||||
text-align: left;
|
||||
|
||||
&.spacer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&.separator {
|
||||
line-height: 1.5rem !important;
|
||||
font-size: .75rem !important;
|
||||
padding: 0 .5rem;
|
||||
color: @color-popover-separator;
|
||||
background-color: @color-popover-separator-background;
|
||||
|
||||
label {
|
||||
margin: 0; // Unsets Bootstrap label margin, bug?
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
height: unset;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
line-height: @listing-line-height;
|
||||
display: block;
|
||||
padding: 0 .5rem;
|
||||
text-align: left;
|
||||
|
||||
&:before {
|
||||
line-height: inherit;
|
||||
height: inherit !important;
|
||||
margin-right: .5rem !important;
|
||||
float: left !important;
|
||||
width: 1.18em !important;
|
||||
min-width: 1.18em;
|
||||
}
|
||||
|
||||
&:not(.disabled):hover {
|
||||
color: @color-menu-hover;
|
||||
background-color: @color-menu-hover-background;
|
||||
}
|
||||
|
||||
&[aria-haspopup] {
|
||||
display: flex;
|
||||
|
||||
&:after {
|
||||
&:extend(.font-icon-class);
|
||||
color: @color-black-shade-text;
|
||||
font-size: .9em;
|
||||
margin: 0 0 0 .2em;
|
||||
min-width: 1.18em;
|
||||
content: @fa-var-chevron-right;
|
||||
|
||||
html.layout-small & {
|
||||
margin: 0 .2em;
|
||||
}
|
||||
}
|
||||
|
||||
&.dropdown:after {
|
||||
color: @color-list;
|
||||
margin: 0 .6em !important;
|
||||
}
|
||||
|
||||
&:hover:after {
|
||||
color: @color-menu-hover;
|
||||
}
|
||||
|
||||
& > span {
|
||||
.overflow-ellipsis();
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span.inner {
|
||||
font-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.dropbutton {
|
||||
display: flex;
|
||||
|
||||
a:first-child {
|
||||
.overflow-ellipsis();
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&:not(.disabled):hover {
|
||||
background-color: @color-popover-mobile-dropbutton-background;
|
||||
}
|
||||
|
||||
a.dropdown {
|
||||
width: 3.5rem;
|
||||
padding: 0 .5em;
|
||||
background-color: @color-popover-mobile-dropbutton-background;
|
||||
|
||||
&:hover {
|
||||
background-color: @color-menu-hover-background;
|
||||
}
|
||||
|
||||
// Note: :before icon is replaced with :after icon by a[aria-haspopup] above
|
||||
|
||||
&:before,
|
||||
span.inner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.no-icon a:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: (@screen-width-small + 1px)) {
|
||||
.content-frame-navigation {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.header a.button.icon {
|
||||
&:not(.disabled):focus,
|
||||
&:not(.disabled):hover {
|
||||
background-color: @color-toolbar-button-background-hover;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:before {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-width-small) {
|
||||
.menu.footer {
|
||||
justify-content: space-around !important;
|
||||
|
||||
& > * {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.listselectors > * {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.menu.listing a {
|
||||
color: @color-font;
|
||||
}
|
||||
}
|
||||
|
||||
a.toolbar-button {
|
||||
cursor: pointer;
|
||||
|
||||
@media screen and (min-width: (@screen-width-large + 1px)) {
|
||||
line-height: 1.5;
|
||||
padding: .45rem;
|
||||
|
||||
&:before {
|
||||
float: none !important;
|
||||
height: 1.75rem !important;
|
||||
line-height: 1.5;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
span.inner {
|
||||
display: inline !important;
|
||||
font-weight: normal;
|
||||
font-size: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*** Menu button icons ***/
|
||||
|
||||
.menu a {
|
||||
&.mail:before {
|
||||
content: @fa-var-envelope;
|
||||
}
|
||||
&.contacts:before {
|
||||
content: @fa-var-users;
|
||||
}
|
||||
&.options:before {
|
||||
content: @fa-var-sliders-h;
|
||||
}
|
||||
&.settings:before {
|
||||
content: @fa-var-cog;
|
||||
}
|
||||
&.theme.light:before {
|
||||
content: @fa-var-sun;
|
||||
}
|
||||
&.theme.dark:before {
|
||||
content: @fa-var-moon;
|
||||
}
|
||||
&.help:before {
|
||||
content: @fa-var-life-ring;
|
||||
}
|
||||
&.logout:before {
|
||||
content: @fa-var-power-off;
|
||||
}
|
||||
&.about:before {
|
||||
content: @fa-var-question;
|
||||
}
|
||||
&.refresh:before {
|
||||
content: @fa-var-sync;
|
||||
}
|
||||
&.compose:before {
|
||||
content: @fa-var-edit;
|
||||
}
|
||||
&.calendar:before {
|
||||
content: @fa-var-calendar-alt;
|
||||
}
|
||||
&.tasklist:before {
|
||||
content: @fa-var-tasks;
|
||||
}
|
||||
&.files:before {
|
||||
content: @fa-var-folder;
|
||||
}
|
||||
&.notes:before {
|
||||
content: @fa-var-sticky-note;
|
||||
}
|
||||
&.chat:before {
|
||||
content: @fa-var-comments;
|
||||
}
|
||||
&.actions:before {
|
||||
content: @fa-var-cog;
|
||||
}
|
||||
&.addressbook:before {
|
||||
content: @fa-var-user;
|
||||
}
|
||||
&.archive:before {
|
||||
content: @fa-var-archive;
|
||||
}
|
||||
&.assigngroup:before {
|
||||
content: @fa-var-user-plus;
|
||||
}
|
||||
&.attach:before,
|
||||
&.vcard:before {
|
||||
content: @fa-var-paperclip;
|
||||
}
|
||||
&.next:before {
|
||||
content: @fa-var-arrow-right;
|
||||
}
|
||||
&.prev:before,
|
||||
&.back:before {
|
||||
content: @fa-var-arrow-left;
|
||||
}
|
||||
&.check:before {
|
||||
content: "\00a0"; // just a space
|
||||
}
|
||||
&.check.selected:before {
|
||||
content: @fa-var-check;
|
||||
}
|
||||
&.closewin:before {
|
||||
content: @fa-var-window-close;
|
||||
}
|
||||
&.collapse:before {
|
||||
content: @fa-var-angle-down;
|
||||
}
|
||||
&.copy:before {
|
||||
content: @fa-var-copy;
|
||||
}
|
||||
&.create:before {
|
||||
content: @fa-var-plus-square;
|
||||
}
|
||||
&.delete:before {
|
||||
content: @fa-var-trash-alt;
|
||||
}
|
||||
&.download:before,
|
||||
&.download.eml:before,
|
||||
&.download.maildir:before,
|
||||
&.download.mbox:before {
|
||||
content: @fa-var-download;
|
||||
}
|
||||
&.dropdown:before {
|
||||
content: @fa-var-caret-down;
|
||||
}
|
||||
&.edit:before {
|
||||
content: @fa-var-pencil-alt;
|
||||
}
|
||||
&.encrypt:before,
|
||||
&.enigma:before {
|
||||
content: @fa-var-lock;
|
||||
}
|
||||
&.encrypt.sign:before {
|
||||
content: @fa-var-lock; // TODO
|
||||
}
|
||||
&.expand:before {
|
||||
content: @fa-var-angle-right;
|
||||
}
|
||||
&.expand.all:before {
|
||||
content: @fa-var-angle-double-down;
|
||||
}
|
||||
&.expand.none:before {
|
||||
content: @fa-var-angle-double-up;
|
||||
}
|
||||
&.export:before,
|
||||
&.export.all:before,
|
||||
&.export.selection:before {
|
||||
content: @fa-var-download;
|
||||
}
|
||||
&.expunge:before {
|
||||
content: @fa-var-compress-arrows-alt;
|
||||
}
|
||||
&.extwin:before {
|
||||
content: @fa-var-external-link-square-alt;
|
||||
}
|
||||
&.filterlink:before {
|
||||
content: @fa-var-filter;
|
||||
}
|
||||
&.firstpage:before {
|
||||
content: @fa-var-angle-double-left;
|
||||
}
|
||||
&.nextpage:before {
|
||||
content: @fa-var-angle-right;
|
||||
}
|
||||
&.prevpage:before {
|
||||
content: @fa-var-angle-left;
|
||||
}
|
||||
&.lastpage:before {
|
||||
content: @fa-var-angle-double-right;
|
||||
}
|
||||
&.flag:before,
|
||||
&.select.flagged:before {
|
||||
.font-icon-solid(@fa-var-flag);
|
||||
}
|
||||
&.unflag:before {
|
||||
.font-icon-regular(@fa-var-flag);
|
||||
}
|
||||
&.undo:before {
|
||||
content: @fa-var-redo;
|
||||
}
|
||||
&.folders:before {
|
||||
content: @fa-var-folder;
|
||||
}
|
||||
&.forward:before,
|
||||
&.forward.attachment:before,
|
||||
&.forward.bounce:before,
|
||||
&.forward.inline:before {
|
||||
content: @fa-var-share;
|
||||
}
|
||||
&.import:before,
|
||||
&.upload:before {
|
||||
content: @fa-var-upload;
|
||||
}
|
||||
&.insertresponse:before {
|
||||
content: @fa-var-comment;
|
||||
}
|
||||
&.junk:before {
|
||||
content: @fa-var-fire-alt;
|
||||
}
|
||||
&.notjunk:before {
|
||||
content: @fa-var-inbox;
|
||||
}
|
||||
&.markmessage:before {
|
||||
content: @fa-var-tag;
|
||||
}
|
||||
&.more:before {
|
||||
content: @fa-var-ellipsis-h;
|
||||
}
|
||||
&.move:before {
|
||||
content: @fa-var-folder-open;
|
||||
}
|
||||
&.print:before {
|
||||
content: @fa-var-print;
|
||||
}
|
||||
&.properties:before {
|
||||
content: @fa-var-file;
|
||||
}
|
||||
&.purge:before {
|
||||
content: @fa-var-eraser;
|
||||
}
|
||||
&.qrcode:before {
|
||||
content: @fa-var-qrcode;
|
||||
}
|
||||
&.read:before {
|
||||
.font-icon-regular(@fa-var-envelope-open);
|
||||
}
|
||||
&.unread:before,
|
||||
&.expand.unread:before,
|
||||
&.select.unread:before {
|
||||
.font-icon-solid(@fa-var-envelope);
|
||||
}
|
||||
&.recipient:before {
|
||||
.font-icon-regular(@fa-var-envelope);
|
||||
}
|
||||
&.refresh:before {
|
||||
content: @fa-var-sync;
|
||||
}
|
||||
&.remove:before {
|
||||
content: @fa-var-eraser;
|
||||
}
|
||||
&.removegroup:before {
|
||||
content: @fa-var-user-times;
|
||||
}
|
||||
&.rename:before {
|
||||
content: @fa-var-pencil-alt;
|
||||
}
|
||||
&.reply:before {
|
||||
content: @fa-var-reply;
|
||||
}
|
||||
&.reply-all:before,
|
||||
&.reply.all:before,
|
||||
&.reply.list:before {
|
||||
content: @fa-var-reply-all;
|
||||
}
|
||||
&.responses:before {
|
||||
content: @fa-var-comment;
|
||||
}
|
||||
&.rotate:before {
|
||||
content: @fa-var-redo-alt;
|
||||
}
|
||||
&.save:before {
|
||||
.font-icon-regular(@fa-var-save);
|
||||
}
|
||||
&.search:before {
|
||||
content: @fa-var-search;
|
||||
}
|
||||
&.search.delete:before {
|
||||
content: @fa-var-trash-alt;
|
||||
}
|
||||
&.select:before {
|
||||
content: @fa-var-mouse-pointer;
|
||||
}
|
||||
&.select.all:before {
|
||||
content: @fa-var-asterisk;
|
||||
}
|
||||
&.select.invert:before {
|
||||
content: @fa-var-check-square;
|
||||
}
|
||||
&.select.none:before {
|
||||
.font-icon-solid(@fa-var-times);
|
||||
}
|
||||
&.select.page:before {
|
||||
.font-icon-solid(@fa-var-bars);
|
||||
}
|
||||
&.selection:before {
|
||||
.font-icon-regular(@fa-var-check-square) !important;
|
||||
}
|
||||
&.send:before {
|
||||
content: @fa-var-paper-plane;
|
||||
}
|
||||
&.showurl:before {
|
||||
content: @fa-var-link;
|
||||
}
|
||||
&.signature:before {
|
||||
content: @fa-var-signature;
|
||||
}
|
||||
&.source:before {
|
||||
content: @fa-var-file-code;
|
||||
}
|
||||
&.spellcheck:before {
|
||||
content: @fa-var-spell-check;
|
||||
}
|
||||
&.status:before {
|
||||
.font-icon-regular(@fa-var-lightbulb);
|
||||
}
|
||||
&.submit:before {
|
||||
content: @fa-var-check;
|
||||
}
|
||||
&.info:before {
|
||||
content: @fa-var-info-circle;
|
||||
}
|
||||
&.threads:before {
|
||||
content: @fa-var-comments;
|
||||
}
|
||||
&.zoomin:before {
|
||||
content: @fa-var-search-plus;
|
||||
}
|
||||
&.zoomout:before {
|
||||
content: @fa-var-search-minus;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*** Searchbar and searchoptions widgets ***/
|
||||
|
||||
.searchbar {
|
||||
height: @layout-searchbar-height;
|
||||
min-height: @layout-searchbar-height; // because of Flexbox
|
||||
line-height: @layout-searchbar-height;
|
||||
background-color: @color-searchbar-background;
|
||||
border-bottom: 1px solid @color-list-border;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
form {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-search;
|
||||
height: @layout-searchbar-height;
|
||||
color: @color-list-pagenav;
|
||||
margin: 0 0 0 .75rem;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: .5rem;
|
||||
line-height: normal; // fixes placeholder misalignment in IE11
|
||||
outline: 0; // removes focus outline in Chrome
|
||||
|
||||
&::-ms-clear {
|
||||
display: none; // for IE
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: @color-toolbar-button;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
width: 2rem;
|
||||
height: @layout-searchbar-height;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.options:before {
|
||||
content: @fa-var-angle-down;
|
||||
}
|
||||
|
||||
&.reset:before {
|
||||
content: @fa-var-times;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&.unread:before {
|
||||
.font-icon-solid(@fa-var-envelope);
|
||||
}
|
||||
|
||||
&.reset,
|
||||
&.search {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: @color-success;
|
||||
}
|
||||
}
|
||||
|
||||
span.inner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
a.reset {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
&.open a.options:before {
|
||||
content: @fa-var-angle-up;
|
||||
}
|
||||
}
|
||||
|
||||
.searchoptions {
|
||||
button.search {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul.proplist {
|
||||
& + div {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.input-group-prepend {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
label {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.formbuttons {
|
||||
// this is needed because we hide .formbuttons on small devices
|
||||
// we don't want it for search options form
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*** Taskmenu ***/
|
||||
|
||||
#taskmenu {
|
||||
a {
|
||||
display: block;
|
||||
float: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-width-xs) {
|
||||
z-index: 30001; // because autocompletion popup uses z-index:30000
|
||||
overflow-x: hidden;
|
||||
|
||||
a {
|
||||
max-width: unset;
|
||||
padding: 0 .5em;
|
||||
margin-top: 1px;
|
||||
text-align: left;
|
||||
line-height: @layout-touch-menu-record-height;
|
||||
height: @layout-touch-menu-record-height;
|
||||
border-bottom: 1px solid @color-list-border !important;
|
||||
color: @color-list;
|
||||
font-size: 1.2rem;
|
||||
|
||||
&:before {
|
||||
float: left !important;
|
||||
width: 1.2em !important;
|
||||
margin-right: .5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
span.inner {
|
||||
font-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: (@screen-width-xs + 1px)) {
|
||||
a {
|
||||
color: @color-taskmenu-button;
|
||||
padding: .45rem 0;
|
||||
min-width: unset;
|
||||
|
||||
&.selected {
|
||||
color: @color-taskmenu-button-selected;
|
||||
background: @color-taskmenu-button-selected-background;
|
||||
|
||||
&:hover {
|
||||
color: @color-taskmenu-button-selected-hover;
|
||||
background: @color-taskmenu-button-background-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: @color-taskmenu-button-hover;
|
||||
background: @color-taskmenu-button-background-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.special-buttons {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: @color-taskmenu-background;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
a {
|
||||
color: @color-taskmenu-button-action;
|
||||
background: @color-taskmenu-button-action-background;
|
||||
|
||||
&:hover {
|
||||
color: @color-taskmenu-button-action-hover;
|
||||
background: @color-taskmenu-button-action-background-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.logout {
|
||||
color: @color-taskmenu-button-logout !important;
|
||||
|
||||
&:hover {
|
||||
color: @color-taskmenu-button-logout-hover !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: (@screen-width-xs + 1px)) and (max-width: @screen-width-medium) {
|
||||
a {
|
||||
width: @layout-menu-width-sm;
|
||||
height: @layout-menu-width-sm;
|
||||
font-size: 1.2rem;
|
||||
padding: 0;
|
||||
|
||||
&:before {
|
||||
line-height: @layout-menu-width-sm;
|
||||
}
|
||||
}
|
||||
|
||||
span.inner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: (@screen-width-medium + 1px)) {
|
||||
a {
|
||||
width: @layout-menu-width;
|
||||
font-size: 1rem;
|
||||
|
||||
&:before {
|
||||
float: none; // fixed overflowing text in Edge
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: @color-taskmenu-button-selected-background;
|
||||
}
|
||||
}
|
||||
|
||||
span.inner {
|
||||
padding: 0 .1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
267
styles/widgets/messages.less
Normal file
267
styles/widgets/messages.less
Normal file
|
|
@ -0,0 +1,267 @@
|
|||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) The Roundcube Dev Team
|
||||
*
|
||||
* The contents are subject to the Creative Commons Attribution-ShareAlike
|
||||
* License. It is allowed to copy, distribute, transmit and to adapt the work
|
||||
* by keeping credits to the original authors in the README.md file.
|
||||
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
|
||||
*/
|
||||
|
||||
/*** UI Messages ***/
|
||||
|
||||
// .boxwarning/.boxerror/.boxinformation classes are converted to .ui.alert in bootstrap_init()
|
||||
|
||||
.ui.alert {
|
||||
margin: 0;
|
||||
margin-bottom: .2rem;
|
||||
opacity: .95;
|
||||
width: 100%;
|
||||
padding: .75em;
|
||||
color: @color-message;
|
||||
border: 1px solid @color-message-border;
|
||||
background-color: @color-message-background;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media screen and (max-width: @screen-width-xs) {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
& > i.icon {
|
||||
line-height: 1;
|
||||
color: lighten(@color-black, 25%);
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
& > i.icon:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-info-circle;
|
||||
margin-right: .6rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
&.loading {
|
||||
color: @color-message-loading;
|
||||
|
||||
& > i.icon:before {
|
||||
content: @fa-var-circle-notch;
|
||||
.animated-icon-class();
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
&.alert-success > i.icon:before {
|
||||
content: @fa-var-check-circle;
|
||||
color: @color-message-success;
|
||||
}
|
||||
|
||||
&.alert-warning > i.icon:before {
|
||||
content: @fa-var-exclamation-triangle;
|
||||
color: @color-message-warning;
|
||||
}
|
||||
|
||||
&.alert-danger > i.icon:before {
|
||||
content: @fa-var-exclamation-circle;
|
||||
color: @color-message-error;
|
||||
}
|
||||
|
||||
&.vcardattachment > i.icon:before {
|
||||
content: @fa-var-address-card; // vcard_attachments plugin
|
||||
}
|
||||
|
||||
&.enigmaattachment > i.icon:before {
|
||||
content: @fa-var-key; // enigma plugin
|
||||
}
|
||||
|
||||
&.signed > i.icon:before,
|
||||
&.encrypted > i.icon:before {
|
||||
content: @fa-var-lock; // enigma plugin
|
||||
}
|
||||
|
||||
&.chat > i.icon:before {
|
||||
content: @fa-var-comment;
|
||||
}
|
||||
|
||||
// #6797: Fix for long buttons issue
|
||||
.boxbuttons {
|
||||
white-space: nowrap;
|
||||
|
||||
.btn {
|
||||
.overflow-ellipsis();
|
||||
max-width: 220px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-width-xs) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.btn {
|
||||
max-width: 160px;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: .25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// This works with following structure: <i> <span> [button].
|
||||
// <span> here is a one-line text, and button can be anything but <span>.
|
||||
&.aligned-buttons {
|
||||
display: flex;
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
a:not(.btn) {
|
||||
color: @color-message-link;
|
||||
font-weight: @color-message-link-font-weight;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
&.boxerror,
|
||||
&.boxconfirmation,
|
||||
&.boxinformation,
|
||||
&.boxwarning {
|
||||
padding: .5em;
|
||||
border-radius: 0;
|
||||
|
||||
i.icon {
|
||||
font-size: 1.5em !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.boxerror {
|
||||
background-color: @color-message-error-box-background;
|
||||
& when not(@color-message-error-box = @color-message) { color: @color-message-error-box; }
|
||||
}
|
||||
|
||||
&.boxinformation {
|
||||
background-color: @color-message-information-box-background;
|
||||
& when not(@color-message-information-box = @color-message) { color: @color-message-information-box; }
|
||||
}
|
||||
|
||||
&.boxconfirmation {
|
||||
background-color: @color-message-success-box-background;
|
||||
& when not(@color-message-error-box = @color-message) { color: @color-message-error-box; }
|
||||
}
|
||||
|
||||
&.boxwarning {
|
||||
background-color: @color-message-warning-box-background;
|
||||
& when not(@color-message-warning-box = @color-message) { color: @color-message-warning-box; }
|
||||
}
|
||||
|
||||
& + table {
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
#messagestack {
|
||||
position: absolute;
|
||||
bottom: .5em;
|
||||
right: .7em;
|
||||
z-index: 105; // needs to be above .ui-widget-overlay
|
||||
width: 320px;
|
||||
height: auto;
|
||||
max-height: 85%;
|
||||
|
||||
@media screen and (max-width: @screen-width-xs) {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
div {
|
||||
background-color: @color-message;
|
||||
color: @color-message-text;
|
||||
|
||||
@media screen and (max-width: @screen-width-xs) {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
min-height: 4.2rem;
|
||||
}
|
||||
|
||||
&.voice {
|
||||
position: absolute;
|
||||
top: -1000px;
|
||||
}
|
||||
|
||||
i.icon {
|
||||
font-size: 1.5em !important;
|
||||
}
|
||||
|
||||
& > i.icon:before {
|
||||
color: @color-message-text;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
background-color: @color-message-loading;
|
||||
& when not(@color-message-loading-text = @color-message-text) { color: @color-message-loading-text; }
|
||||
& > i.icon:before {
|
||||
& when not(@color-message-loading-text = @color-message-text) { color: @color-message-loading-text; }
|
||||
}
|
||||
}
|
||||
|
||||
.alert-info.information {
|
||||
background-color: @color-message-information;
|
||||
& when not(@color-message-information-text = @color-message-text) { color: @color-message-information-text; }
|
||||
& > i.icon:before {
|
||||
& when not(@color-message-information-text = @color-message-text) { color: @color-message-information-text; }
|
||||
}
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background-color: @color-message-success;
|
||||
& when not(@color-message-success-text = @color-message-text) { color: @color-message-success-text; }
|
||||
& > i.icon:before {
|
||||
& when not(@color-message-success-text = @color-message-text) { color: @color-message-success-text; }
|
||||
}
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
background-color: @color-message-warning;
|
||||
& when not(@color-message-warning-text = @color-message-text) { color: @color-message-warning-text; }
|
||||
& > i.icon:before {
|
||||
& when not(@color-message-warning-text = @color-message-text) { color: @color-message-warning-text; }
|
||||
}
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background-color: @color-message-error;
|
||||
& when not(@color-message-error-text = @color-message-text) { color: @color-message-error-text; }
|
||||
& > i.icon:before {
|
||||
& when not(@color-message-error-text = @color-message-text) { color: @color-message-error-text; }
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit !important;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
18
templates/about.html
Normal file
18
templates/about.html
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<roundcube:include file="includes/layout.html" />
|
||||
|
||||
<h1 class="voice"><roundcube:label name="about" /></h1>
|
||||
|
||||
<div class="frame-content">
|
||||
<roundcube:object name="aboutcontent" />
|
||||
<h2 class="sysname">Roundcube Webmail <roundcube:object name="version" /></h2>
|
||||
<p class="copyright"><roundcube:object name="copyright" /></p>
|
||||
<p class="license"><roundcube:object name="license" /></p>
|
||||
<div class="readtext">
|
||||
<h3><roundcube:label name="skin" /></h3>
|
||||
<roundcube:object name="skininfo" />
|
||||
<h3><roundcube:label name="installedplugins" /></h3>
|
||||
<roundcube:object name="pluginlist" id="pluginlist" class="records-table" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
157
templates/addressbook.html
Normal file
157
templates/addressbook.html
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
<roundcube:include file="includes/layout.html" />
|
||||
<roundcube:include file="includes/menu.html" />
|
||||
|
||||
<h1 class="voice"><roundcube:label name="addressbook" /></h1>
|
||||
|
||||
<!-- sources/groups list -->
|
||||
<div id="layout-sidebar" class="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>
|
||||
<roundcube:button name="groupoptions" type="link" title="arialabelabookgroupoptions" label="actions"
|
||||
class="button icon sidebar-menu" innerClass="inner" data-popup="groupoptions-menu" />
|
||||
</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>
|
||||
|
||||
<!-- contacts list -->
|
||||
<div id="layout-list" class="listbox selected" aria-labelledby="aria-label-contactslist">
|
||||
<div class="header">
|
||||
<a class="button icon task-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" />
|
||||
<div class="toolbar menu" role="toolbar">
|
||||
<a href="#select" class="button select disabled" data-popup="listselect-menu" data-toggle-button="list-toggle-button" title="<roundcube:label name="select" />"><span class="inner"><roundcube:label name="select" /></span></a>
|
||||
<roundcube:container name="listcontrols" id="listcontrols" />
|
||||
</div>
|
||||
<a class="button icon toolbar-menu-button" href="#list-menu"><span class="inner"><roundcube:label name="menu" /></span></a>
|
||||
</div>
|
||||
<roundcube:object name="searchform" id="searchform" wrapper="searchbar menu"
|
||||
label="contactsearchform" buttontitle="findcontacts" options="searchmenu" ariatag="h2" />
|
||||
<div id="searchmenu" class="hidden searchoptions scroller propform formcontainer" aria-labelledby="aria-label-search-menu">
|
||||
<h3 id="aria-label-search-menu" class="voice"><roundcube:label name="searchmod" /></h3>
|
||||
<div class="formcontent">
|
||||
<ul class="proplist">
|
||||
<li><label><input type="checkbox" name="s_mods[]" value="name" /><roundcube:label name="name" /></label></li>
|
||||
<li><label><input type="checkbox" name="s_mods[]" value="firstname" /><roundcube:label name="firstname" /></label></li>
|
||||
<li><label><input type="checkbox" name="s_mods[]" value="surname" /><roundcube:label name="surname" /></label></li>
|
||||
<li><label><input type="checkbox" name="s_mods[]" value="email" /><roundcube:label name="email" /></label></li>
|
||||
<li><label><input type="checkbox" name="s_mods[]" value="*" /><roundcube:label name="allfields" /></label></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="formbuttons">
|
||||
<button type="button" class="btn btn-primary icon search" onclick="return rcmail.command('search')"><roundcube:label name="search" /></button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<roundcube:include file="includes/pagenav.html" />
|
||||
</div>
|
||||
|
||||
<!-- contact details frame -->
|
||||
<div id="layout-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 menu">
|
||||
<roundcube:button command="add" type="link" class="create disabled" classAct="create"
|
||||
label="create" title="newcontact" innerclass="inner" data-fab="true" />
|
||||
<roundcube:button command="print" type="link" data-hidden="small"
|
||||
class="print disabled" classAct="print"
|
||||
label="print" title="printcontact" innerclass="inner" />
|
||||
<roundcube:button command="delete" type="link" class="delete disabled" classAct="delete"
|
||||
label="delete" title="deletecontact" innerClass="inner" />
|
||||
<span class="spacer"></span>
|
||||
<roundcube:button command="advanced-search" type="link" class="search disabled" classAct="search"
|
||||
label="search" title="advsearch" innerclass="inner" />
|
||||
<roundcube:container name="toolbar" id="addressbooktoolbar" />
|
||||
<roundcube:button command="import" type="link" class="import disabled" classAct="import"
|
||||
label="import" title="importcontacts" innerclass="inner" />
|
||||
<span class="dropbutton">
|
||||
<roundcube:button command="export" type="link" class="export disabled" classAct="export"
|
||||
label="export" title="exportvcards" innerclass="inner" />
|
||||
<a href="#export" class="dropdown" data-popup="export-menu">
|
||||
<span class="inner"><roundcube:label name="arialabelcontactexportoptions" /></span>
|
||||
</a>
|
||||
</span>
|
||||
<roundcube:button name="contactmenulink" id="contactmenulink" type="link"
|
||||
class="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="contentframe" id="contact-frame" src="env:blankpage" 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="menu listing" role="menu" aria-labelledby="aria-label-export-menu">
|
||||
<roundcube:button type="link-menuitem" command="export" label="exportall" prop="sub" class="export all disabled" classAct="export all active" />
|
||||
<roundcube:button type="link-menuitem" command="export-selected" label="exportsel" prop="sub" class="export select disabled" classAct="export select active" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="groupoptions-menu" class="popupmenu">
|
||||
<h3 id="aria-label-groupoptions-menu" class="voice"><roundcube:label name="arialabelabookgroupoptions" /></h3>
|
||||
<ul class="menu listing" role="menu" aria-labelledby="aria-label-groupoptions-menu">
|
||||
<roundcube:button type="link-menuitem" command="group-create" title="newgroup" label="addgroup" class="create disabled" classAct="create active" />
|
||||
<roundcube:button type="link-menuitem" command="group-rename" label="grouprename" class="group rename disabled" classAct="group rename active" />
|
||||
<roundcube:button type="link-menuitem" command="group-delete" label="groupdelete" class="group delete disabled" classAct="group delete active" />
|
||||
<roundcube:button type="link-menuitem" command="search-create" label="searchsave" class="search disabled" classAct="search active" />
|
||||
<roundcube:button type="link-menuitem" command="search-delete" label="searchdelete" class="search delete disabled" classAct="search delete active" />
|
||||
<roundcube:container name="groupoptions" id="groupoptionsmenu" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="listselect-menu" class="popupmenu">
|
||||
<h3 id="aria-label-listselect-menu" class="voice"><roundcube:label name="arialabellistselectmenu" /></h3>
|
||||
<ul class="menu listing" role="menu" aria-labelledby="aria-label-listselect-menu">
|
||||
<roundcube:button type="link-menuitem" label="selection" class="selection" classAct="selection active"
|
||||
name="list-toggle-button" id="list-toggle-button" onclick="UI.toggle_list_selection(this, 'contacts-table')" />
|
||||
<roundcube:button command="select-all" type="link-menuitem" prop="page" label="currpage" class="select page disabled" classAct="select page active" />
|
||||
<roundcube:button command="select-all" type="link-menuitem" prop="invert" label="invert" class="select invert disabled" classAct="select invert active" />
|
||||
<roundcube:button command="select-none" type="link-menuitem" label="none" class="select none disabled" classAct="select none active" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="dragcontact-menu" class="popupmenu">
|
||||
<h3 id="aria-label-dragcontact-menu" class="voice"><roundcube:label name="arialabeldropactionmenu" /></h3>
|
||||
<ul class="menu 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" class="disabled" classAct="active" />
|
||||
<roundcube:button type="link-menuitem" command="copy" onclick="return rcmail.drag_menu_action('copy')" label="copy" class="disabled" 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="menu 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 disabled" classAct="qrcode active" />
|
||||
<roundcube:endif />
|
||||
<roundcube:button type="link-menuitem" command="group-assign-selected" label="groupassign" class="assigngroup disabled" classAct="assigngroup active" innerclass="folder-selector-link" aria-haspopup="true" />
|
||||
<roundcube:button type="link-menuitem" command="group-remove-selected" label="groupremove" class="removegroup disabled" classAct="removegroup active" />
|
||||
<roundcube:if condition="env:contact_move_enabled" />
|
||||
<roundcube:button type="link-menuitem" command="move" label="moveto" class="move disabled" 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 disabled" 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" />
|
||||
74
templates/bounce.html
Normal file
74
templates/bounce.html
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
<roundcube:include file="includes/layout.html" />
|
||||
|
||||
<h1 class="voice"><roundcube:label name="bouncemsg" /></h1>
|
||||
|
||||
<div class="formcontent">
|
||||
<roundcube:object name="bounceObjects" id="bounce-objects" class="mb-3" />
|
||||
<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('switch-task', 'settings/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="UI.header_reset('_cc')" class="input-group-text icon delete" 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="UI.header_reset('_bcc')" class="input-group-text icon delete" 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="menu listing" role="menu" aria-labelledby="aria-label-headersmenu">
|
||||
<li role="menuitem"><a data-target="cc" href="#" role="button" tabindex="-1" class="recipient active"><roundcube:label name="cc" /></a></li>
|
||||
<li role="menuitem"><a data-target="bcc" href="#" role="button" tabindex="-1" class="recipient active"><roundcube:label name="bcc" /></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
286
templates/compose.html
Normal file
286
templates/compose.html
Normal file
|
|
@ -0,0 +1,286 @@
|
|||
<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="insert" />
|
||||
<roundcube:add_label name="insertcontact" />
|
||||
<roundcube:add_label name="recipientedit" />
|
||||
|
||||
<h1 class="voice"><roundcube:label name="compose" /></h1>
|
||||
|
||||
<!-- compose options and attachments list -->
|
||||
<div id="layout-sidebar" class="listbox sidebar-right">
|
||||
<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 all-sizes"><roundcube:label name="optionsandattachments" /></span>
|
||||
</div>
|
||||
<div class="scroller">
|
||||
<!-- attachments -->
|
||||
<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 type="button" class="btn btn-secondary attach" tabindex="2" 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>
|
||||
<!-- 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:container name="composeoptions" id="compose-options" />
|
||||
<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 form-check">
|
||||
<label for="compose-keep-formatting" class="col-form-label col-6"><roundcube:label name="keepformatting" /></label>
|
||||
<div class="col-6 form-check">
|
||||
<roundcube:object name="keepFormattingCheckBox" id="compose-keep-formatting" noform="true" tabindex="2" class="form-check-input" />
|
||||
</div>
|
||||
</div>
|
||||
<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="custom-select" />
|
||||
</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="custom-select" />
|
||||
</div>
|
||||
</div>
|
||||
<roundcube:endif />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="layout-content" class="listbox selected" role="main">
|
||||
<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
|
||||
<div class="header">
|
||||
<a class="button icon task-menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
|
||||
<span class="header-title"><roundcube:label name="compose" /></span>
|
||||
<div id="composestatusbar" class="position-absolute"></div>
|
||||
<!-- toolbar -->
|
||||
<div id="messagetoolbar" class="toolbar menu" role="toolbar" aria-labelledby="aria-label-toolbar">
|
||||
<a class="options" href="#options" onclick="UI.show_sidebar()" data-hidden="big">
|
||||
<span class="inner"><roundcube:label name="optionsandattachments"></span>
|
||||
</a>
|
||||
<roundcube:button command="savedraft" type="link" class="save draft disabled" classAct="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="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="signature disabled" classAct="signature"
|
||||
label="signature" title="insertsignature" tabindex="2" innerclass="inner" />
|
||||
<a href="#responses" class="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>
|
||||
<roundcube:if condition="!empty(env:spell_langs)" />
|
||||
<span class="dropbutton">
|
||||
<roundcube:button command="spellcheck" type="link" class="spellcheck disabled"
|
||||
classAct="spellcheck" classSel="button spellcheck pressed"
|
||||
label="spellcheck" title="checkspelling" tabindex="2" innerclass="inner" />
|
||||
<a href="#languages" class="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="encrypt disabled"
|
||||
classAct="encrypt" classSel="encrypt selected" innerclass="inner"
|
||||
label="encrypt" title="encryptmessagemailvelope" tabindex="2" />
|
||||
<a href="#encryption" id="encryption-menu-button" class="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">
|
||||
<roundcube:object name="composeFormHead" role="main" class="formcontent scroller" />
|
||||
<roundcube:object name="composeObjects" id="compose-objects" class="mb-3" />
|
||||
<!-- 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('switch-task', 'settings/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-contact" onclick="UI.recipient_selector('to')" class="input-group-text icon add recipient" title="<roundcube:label name="addcontact" />" tabindex="1"><span class="inner"><roundcube:label name="addcontact" /></span></a>
|
||||
</span>
|
||||
<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="#add-contact" onclick="UI.recipient_selector('cc')" class="input-group-text icon add recipient" title="<roundcube:label name="addcontact" />" tabindex="1"><span class="inner"><roundcube:label name="addcontact" /></span></a>
|
||||
</span>
|
||||
<span class="input-group-append">
|
||||
<a href="#delete" onclick="UI.header_reset('_cc')" class="input-group-text icon delete" 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="#add-contact" onclick="UI.recipient_selector('bcc')" class="input-group-text icon add recipient" title="<roundcube:label name="addcontact" />" tabindex="1"><span class="inner"><roundcube:label name="addcontact" /></span></a>
|
||||
</span>
|
||||
<span class="input-group-append">
|
||||
<a href="#delete" onclick="UI.header_reset('_bcc')" class="input-group-text icon delete" 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="#add-contact" onclick="UI.recipient_selector('replyto')" class="input-group-text icon add recipient" title="<roundcube:label name="addcontact" />" tabindex="1"><span class="inner"><roundcube:label name="addcontact" /></span></a>
|
||||
</span>
|
||||
<span class="input-group-append">
|
||||
<a href="#delete" onclick="UI.header_reset('_replyto')" class="input-group-text icon delete" 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="#add-contact" onclick="UI.recipient_selector('followupto')" class="input-group-text icon add recipient" title="<roundcube:label name="addcontact" />" tabindex="1"><span class="inner"><roundcube:label name="addcontact" /></span></a>
|
||||
</span>
|
||||
<span class="input-group-append">
|
||||
<a href="#delete" onclick="UI.header_reset('_followupto')" class="input-group-text icon delete" 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="compose-subject" class="col-2 col-form-label"><roundcube:label name="subject" /></label>
|
||||
<div class="col-10">
|
||||
<roundcube:object name="composeSubject" id="compose-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" />
|
||||
<roundcube:if condition="!in_array('htmleditor', (array)config:dont_override)" />
|
||||
<roundcube:object name="editorSelector" id="editor-selector" editorid="composebody" noform="true" class="hidden" />
|
||||
<roundcube:endif />
|
||||
</div>
|
||||
</form>
|
||||
<div class="formbuttons">
|
||||
<roundcube:button command="send" class="btn btn-primary send" label="send" tabindex="1" data-content-button="true" />
|
||||
<div class="float-right">
|
||||
<roundcube:button command="extwin" type="link" label="openinextwin" data-hidden="small" class="button icon btn btn-link extwin" data-tabindex="1" condition="!env:extwin" />
|
||||
</div>
|
||||
</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="menu listing" role="menu" aria-labelledby="aria-label-headersmenu">
|
||||
<li role="menuitem"><a data-target="cc" href="#" role="button" tabindex="-1" class="recipient active"><roundcube:label name="cc" /></a></li>
|
||||
<li role="menuitem"><a data-target="bcc" href="#" role="button" tabindex="-1" class="recipient active"><roundcube:label name="bcc" /></a></li>
|
||||
<li role="menuitem"><a data-target="replyto" href="#" role="button" tabindex="-1" class="recipient active"><roundcube:label name="replyto" /></a></li>
|
||||
<li role="menuitem"><a data-target="followupto" href="#" role="button" tabindex="-1" class="recipient active"><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="menu 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" class="rounded-0" itemclass="active" list-placeholder="noresponsesavailable" />
|
||||
<li role="separator" class="separator"><label><roundcube:label name="manageresponses" /></label></li>
|
||||
<roundcube:button name="responses" type="link-menuitem" label="editresponses" class="edit responses active" onclick="return rcmail.command('switch-task', 'settings/responses')" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="attachmentmenu" class="popupmenu">
|
||||
<h3 id="aria-label-attachmentmenu" class="voice"><roundcube:label name="arialabelattachmentmenu" /></h3>
|
||||
<ul class="menu listing" role="menu" aria-labelledby="aria-label-attachmentmenu">
|
||||
<roundcube:button command="open-attachment" id="attachmenuopen" type="link-menuitem" label="open" class="extwin disabled" classAct="extwin active" />
|
||||
<roundcube:button command="download-attachment" id="attachmenudownload" type="link-menuitem" label="download" class="download disabled" classAct="download active" />
|
||||
<roundcube:button command="rename-attachment" id="attachmenurename" type="link-menuitem" label="rename" class="rename disabled" classAct="rename active" />
|
||||
<roundcube:container name="attachmentmenu" id="attachmentoptionsmenu" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="encryption-menu" class="popupmenu">
|
||||
<ul class="menu listing" role="menu">
|
||||
<roundcube:button command="compose-encrypted" type="link-menuitem" label="encryptmessage" class="encrypt disabled" classAct="encrypt active" />
|
||||
<roundcube:button command="compose-encrypted-signed" type="link-menuitem" label="encryptandsign" class="encrypt sign disabled" classAct="encrypt sign active" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="recipient-dialog" class="popupmenu" role="region" aria-labelledby="aria-label-composecontacts">
|
||||
<div class="listbox">
|
||||
<roundcube:object name="searchform" id="searchform" wrapper="searchbar menu"
|
||||
label="contactsearchform" buttontitle="findcontacts" ariatag="h2" class="no-bs" />
|
||||
<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" data-list-select-replace="#recipient-dialog .pagenav-text" />
|
||||
</div>
|
||||
<roundcube:include file="includes/pagenav.html" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
23
templates/contact.html
Normal file
23
templates/contact.html
Normal file
|
|
@ -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.svg"
|
||||
placeholderGroup="/images/contactgroup.svg" bg-color="transparent" />
|
||||
</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 grouped 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" />
|
||||
29
templates/contactedit.html
Normal file
29
templates/contactedit.html
Normal file
|
|
@ -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.svg" />
|
||||
<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 grouped" 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" />
|
||||
9
templates/contactimport.html
Normal file
9
templates/contactimport.html
Normal file
|
|
@ -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" table-header-class="form-group row d-none d-sm-flex" table-col-source-class="col-sm-4" table-col-destination-class="col-sm-8" />
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
19
templates/contactprint.html
Normal file
19
templates/contactprint.html
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<roundcube:include file="includes/layout.html" />
|
||||
|
||||
<roundcube:object name="logo" id="logo" alt="Logo" logo-type="print" logo-match="template" class="float-sm-right" />
|
||||
|
||||
<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.svg"
|
||||
placeholderGroup="/images/contactgroup.svg" />
|
||||
</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 grouped readonly"
|
||||
short-legend-labels="true" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
9
templates/contactsearch.html
Normal file
9
templates/contactsearch.html
Normal file
|
|
@ -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" />
|
||||
7
templates/dialog.html
Normal file
7
templates/dialog.html
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<roundcube:include file="includes/layout.html" />
|
||||
|
||||
<div class="frame-content <roundcube:var name="env:dialog_class" />">
|
||||
<roundcube:object name="dialogcontent" />
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
21
templates/error.html
Normal file
21
templates/error.html
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<roundcube:include file="includes/layout.html" />
|
||||
|
||||
<roundcube:if condition="!env:framed && !env:extwin" />
|
||||
<roundcube:include file="includes/menu.html" />
|
||||
<div id="layout-content" class="selected" role="main">
|
||||
<div class="header">
|
||||
<a class="button icon task-menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
|
||||
<span class="header-title"></span>
|
||||
</div>
|
||||
<div class="frame-content scroller">
|
||||
<roundcube:else />
|
||||
<div id="layout-content" class="selected" role="main">
|
||||
<div class="frame-content scroller">
|
||||
<roundcube:endif />
|
||||
|
||||
$__page_content
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
13
templates/folderedit.html
Normal file
13
templates/folderedit.html
Normal file
|
|
@ -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" />
|
||||
61
templates/folders.html
Normal file
61
templates/folders.html
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
<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 id="layout-list" class="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>
|
||||
<a class="button icon toolbar-menu-button" href="#list-menu"><span class="inner"><roundcube:label name="menu" /></span></a>
|
||||
</div>
|
||||
<roundcube:object name="searchform" id="foldersearch" wrapper="searchbar menu" ariatag="h2"
|
||||
label="foldersearchform" buttontitle="findfolders" options="foldersearchmenu" />
|
||||
<div id="foldersearchmenu" class="hidden searchoptions scroller propform formcontainer" aria-labelledby="aria-label-search-menu" aria-controls="subscription-table">
|
||||
<h3 id="aria-label-search-menu" class="voice"><roundcube:label name="searchmod" /></h3>
|
||||
<div class="formcontent">
|
||||
<roundcube:object name="folderfilter" id="folderlist-filter" noheader="true" noevent="true" />
|
||||
</div>
|
||||
<div class="formbuttons">
|
||||
<button type="button" class="btn btn-primary icon search" onclick="rcmail.folder_filter($('#folderlist-filter').val())"><roundcube:label name="search" /></button>
|
||||
</div>
|
||||
</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 small">
|
||||
<roundcube:if condition="env:quota" />
|
||||
<div id="quotadisplay" class="quota-widget hidden">
|
||||
<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 id="layout-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 menu">
|
||||
<roundcube:button command="create-folder" type="link" class="create disabled" classAct="create"
|
||||
label="create" title="createfolder" innerClass="inner" data-fab="true" />
|
||||
<roundcube:button command="delete-folder" type="link" class="delete disabled" classAct="delete"
|
||||
label="delete" title="delete" innerclass="inner" />
|
||||
<roundcube:button command="purge" type="link" class="purge disabled" classAct="purge"
|
||||
label="empty" title="empty" innerclass="inner" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="iframe-wrapper">
|
||||
<roundcube:object name="contentframe" id="preferences-frame" src="env:blankpage" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
43
templates/identities.html
Normal file
43
templates/identities.html
Normal file
|
|
@ -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="settings" /> : <roundcube:label name="identities" /></h1>
|
||||
|
||||
<!-- responses list -->
|
||||
<div id="layout-list" class="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 id="layout-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 menu">
|
||||
<roundcube:button command="add" type="link" class="create disabled" classAct="create"
|
||||
label="create" title="newidentity" innerClass="inner"
|
||||
condition="config:identities_level:0<2" data-fab="true" />
|
||||
<roundcube:button command="delete" type="link" class="delete disabled" classAct="delete"
|
||||
label="delete" title="delete" innerClass="inner"
|
||||
condition="config:identities_level:0<2" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="iframe-wrapper">
|
||||
<roundcube:object name="contentframe" id="preferences-frame" src="env:blankpage" title="arialabelidentityeditfrom" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
13
templates/identityedit.html
Normal file
13
templates/identityedit.html
Normal file
|
|
@ -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" />
|
||||
14
templates/includes/footer.html
Normal file
14
templates/includes/footer.html
Normal file
|
|
@ -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="/deps/bootstrap.bundle.min.js"></script>
|
||||
<script src="/ui.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
46
templates/includes/layout.html
Normal file
46
templates/includes/layout.html
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<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:add_label name="select" />
|
||||
<roundcube:add_label name="close" />
|
||||
<roundcube:add_label name="browse" />
|
||||
<roundcube:add_label name="choosefile" />
|
||||
<roundcube:add_label name="choosefiles" />
|
||||
<roundcube:object name="doctype" value="html5" />
|
||||
<roundcube:if condition="!env:framed || env:extwin" />
|
||||
<html>
|
||||
<roundcube:else />
|
||||
<html class="iframe">
|
||||
<roundcube:endif />
|
||||
<head>
|
||||
<roundcube:object name="meta" />
|
||||
<roundcube:object name="links" />
|
||||
<link rel="stylesheet" href="/deps/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="/deps/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="env:action != 'print' && !config:devel_mode && config:dark_mode_support" />
|
||||
<script>
|
||||
try {
|
||||
if (document.cookie.indexOf('colorMode=dark') > -1
|
||||
|| (document.cookie.indexOf('colorMode=light') === -1 && window.matchMedia('(prefers-color-scheme: dark)').matches)
|
||||
) {
|
||||
document.documentElement.className += ' dark-mode';
|
||||
}
|
||||
} catch (e) { }
|
||||
</script>
|
||||
<roundcube:endif />
|
||||
</head>
|
||||
<body class="task-<roundcube:exp expression="env:error_task ?: env:task ?: 'error'"> action-<roundcube:exp expression="asciiwords(env:action, true, '-') ?: 'none'">">
|
||||
<roundcube:if condition="!env:framed || env:extwin" />
|
||||
<div id="<roundcube:exp expression="env:action == 'print' ? 'print-' : ''">layout">
|
||||
<roundcube:endif />
|
||||
95
templates/includes/mail-menu.html
Normal file
95
templates/includes/mail-menu.html
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
<roundcube:add_label name="viewsource" />
|
||||
<div id="mailtoolbar" class="toolbar menu" role="toolbar">
|
||||
<roundcube:button command="compose" type="link" class="compose hidden"
|
||||
label="compose" title="writenewmessage" innerclass="inner" />
|
||||
<roundcube:button command="reply" type="link" class="reply disabled" classAct="reply"
|
||||
label="reply" title="replytomessage" innerclass="inner" data-content-button="true" />
|
||||
<span class="dropbutton">
|
||||
<roundcube:button command="reply-all" type="link" class="reply-all disabled" classAct="reply-all"
|
||||
label="replyall" title="replytoallmessage" innerclass="inner" />
|
||||
<a href="#reply-all" id="replyallmenulink" class="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="forward disabled" classAct="forward"
|
||||
label="forward" title="forwardmessage" innerclass="inner" />
|
||||
<a href="#forward" id="forwardmenulink" class="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="delete disabled" classAct="delete"
|
||||
label="delete" title="deletemessage" innerclass="inner" />
|
||||
<roundcube:if condition="template:name == 'message'" />
|
||||
<roundcube:button command="print" type="link" class="print disabled" classAct="print"
|
||||
label="print" title="printmessage" innerclass="inner" data-hidden="small" />
|
||||
<roundcube:endif />
|
||||
<roundcube:container name="toolbar" id="mailtoolbar" />
|
||||
<roundcube:button name="markmenulink" id="markmessagemenulink" type="link" class="markmessage"
|
||||
label="mark" title="markmessages" data-popup="markmessage-menu" innerclass="inner" />
|
||||
<roundcube:button name="messagemenulink" id="messagemenulink" type="link" class="more"
|
||||
label="more" title="moreactions" data-popup="message-menu" innerclass="inner" />
|
||||
<roundcube:if condition="template:name == 'message'" />
|
||||
<span class="spacer"></span>
|
||||
<roundcube:button command="previousmessage" type="link" class="prev disabled" classAct="prev"
|
||||
innerclass="inner" label="previous" title="previousmessage" data-hidden="small" />
|
||||
<roundcube:button command="nextmessage" type="link" class="next disabled" classAct="next"
|
||||
innerclass="inner" label="next" title="nextmessage" data-hidden="small" />
|
||||
<roundcube:endif />
|
||||
</div>
|
||||
|
||||
<div id="forward-menu" class="popupmenu">
|
||||
<h3 id="aria-label-forward-menu" class="voice"><roundcube:label name="arialabelforwardingoptions" /></h3>
|
||||
<ul class="menu listing" role="menu" aria-labelledby="aria-label-forward-menu">
|
||||
<roundcube:button type="link-menuitem" command="forward-inline" label="forwardinline" prop="sub" class="forward inline disabled" classAct="forward inline active" />
|
||||
<roundcube:button type="link-menuitem" command="forward-attachment" label="forwardattachment" prop="sub" class="forward attachment disabled" classAct="forward attachment active" />
|
||||
<roundcube:button type="link-menuitem" command="bounce" label="bouncemsg" class="forward bounce disabled" 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="menu listing" role="menu" aria-labelledby="aria-label-replyall-menu">
|
||||
<roundcube:button type="link-menuitem" command="reply-all" label="replyall" prop="sub" class="reply all disabled" classAct="reply all active" />
|
||||
<roundcube:button type="link-menuitem" command="reply-list" label="replylist" prop="sub" class="reply list disabled" 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="menu listing" role="menu" aria-labelledby="aria-label-message-menu">
|
||||
<roundcube:button type="link-menuitem" command="print" label="printmessage" class="print disabled" classAct="print active" data-hidden="small"/>
|
||||
<roundcube:if condition="template:name != 'message'" />
|
||||
<roundcube:button type="link-menuitem" command="import-messages" label="import" class="import disabled" classAct="import active"
|
||||
name="messageimport" onclick="UI.import_dialog()" />
|
||||
<roundcube:endif />
|
||||
<roundcube:button type="link-menuitem" command="download" label="export" class="download disabled" classAct="download active" />
|
||||
<roundcube:button type="link-menuitem" command="edit" prop="new" label="editasnew" class="edit asnew disabled" classAct="edit asnew active" />
|
||||
<roundcube:button type="link-menuitem" command="viewsource" label="viewsource" class="source disabled" classAct="source active" />
|
||||
<roundcube:button type="link-menuitem" command="move" label="moveto" class="move disabled" classAct="move active" innerclass="folder-selector-link" aria-haspopup="true" />
|
||||
<roundcube:button type="link-menuitem" command="copy" label="copyto" class="copy disabled" classAct="copy active" innerclass="folder-selector-link" aria-haspopup="true" />
|
||||
<roundcube:button type="link-menuitem" command="open" label="openinextwin" target="_blank" class="extwin disabled" 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="menu 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 disabled" />
|
||||
<roundcube:button type="link-menuitem" command="mark" prop="unread" label="markunread" classAct="unread active" class="unread disabled" />
|
||||
<roundcube:button type="link-menuitem" command="mark" prop="flagged" label="markflagged" classAct="flag active" class="flag disabled" />
|
||||
<roundcube:button type="link-menuitem" command="mark" prop="unflagged" label="markunflagged" classAct="unflag active" class="unflag disabled" />
|
||||
<roundcube:if condition="config:flag_for_deletion && !config:skip_deleted" />
|
||||
<roundcube:button type="link-menuitem" command="mark" prop="undelete" label="markundeleted" classAct="undo active" class="undo disabled" />
|
||||
<roundcube:endif />
|
||||
<roundcube:container name="markmenu" id="markmessage-menu" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<roundcube:if condition="template:name != 'message'" />
|
||||
<roundcube:object name="messageimportform" id="uploadform" class="popupmenu formcontent" buttons="no" />
|
||||
<roundcube:endif />
|
||||
42
templates/includes/menu.html
Normal file
42
templates/includes/menu.html
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<div id="layout-menu">
|
||||
<h2 id="aria-label-tasknav" class="voice"><roundcube:label name="arialabeltasknav" /></h2>
|
||||
<div class="popover-header">
|
||||
<roundcube:object name="logo" src="/images/logo.svg" id="logo" alt="Logo" />
|
||||
<a class="button icon cancel"><span class="inner"><roundcube:label name="close" /></span></a>
|
||||
</div>
|
||||
<div id="taskmenu" class="menu toolbar" role="navigation" aria-labelledby="aria-label-tasknav">
|
||||
<span class="action-buttons">
|
||||
<roundcube:if condition="env:action == 'compose' and env:task == 'mail'" />
|
||||
<roundcube:button command="compose" type="link" class="compose selected"
|
||||
label="compose" title="writenewmessage" innerclass="inner" />
|
||||
<roundcube:else />
|
||||
<roundcube:button command="compose" type="link" class="compose"
|
||||
label="compose" title="writenewmessage" innerclass="inner"
|
||||
data-fab="true" data-fab-task="mail" data-fab-action="none" />
|
||||
<roundcube:endif />
|
||||
</span>
|
||||
<roundcube:if condition="env:action == 'compose' and env:task == 'mail'" />
|
||||
<roundcube:button command="mail" label="mail" type="link" innerClass="inner"
|
||||
class="mail" />
|
||||
<roundcube:else />
|
||||
<roundcube:button command="mail" label="mail" type="link" innerClass="inner"
|
||||
class="mail" classSel="mail selected" />
|
||||
<roundcube:endif />
|
||||
<roundcube:button command="addressbook" label="contacts" type="link" innerClass="inner"
|
||||
class="contacts" classSel="contacts selected" />
|
||||
<roundcube:container name="taskbar" id="taskmenu" />
|
||||
<roundcube:button command="settings" label="settings" type="link" innerClass="inner"
|
||||
class="settings" classSel="settings selected" />
|
||||
<span class="special-buttons">
|
||||
<roundcube:if condition="config:dark_mode_support" />
|
||||
<roundcube:add_label name="darkmode" />
|
||||
<roundcube:add_label name="lightmode" />
|
||||
<roundcube:button name="theme" label="darkmode" type="link" innerClass="inner" class="theme dark" />
|
||||
<roundcube:endif />
|
||||
<roundcube:button name="about" label="about" type="link"
|
||||
class="about" innerClass="inner" onclick="UI.about_dialog(this)" />
|
||||
<roundcube:button command="logout" label="logout" type="link"
|
||||
class="logout" innerClass="inner" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
20
templates/includes/pagenav.html
Normal file
20
templates/includes/pagenav.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<div class="pagenav menu footer small" role="toolbar" aria-label="<roundcube:label name="arialabellistnav" />">
|
||||
<roundcube:button command="firstpage" type="link" class="firstpage disabled" classAct="firstpage"
|
||||
title="firstpage" label="first" innerclass="inner" />
|
||||
<roundcube:button command="previouspage" type="link" class="prevpage disabled" classAct="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="nextpage disabled" classAct="nextpage"
|
||||
title="nextpage" label="next" innerclass="inner" />
|
||||
<roundcube:button command="lastpage" type="link" class="lastpage disabled" classAct="lastpage"
|
||||
title="lastpage" label="last" innerclass="inner" />
|
||||
</div>
|
||||
12
templates/includes/settings-menu.html
Normal file
12
templates/includes/settings-menu.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<div id="layout-sidebar" class="listbox<roundcube:exp expression="!request:_action ? ' selected' : ''"/>" role="navigation" aria-labelledby="aria-label-settingstabs">
|
||||
<div class="header">
|
||||
<a class="button icon task-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 settings-default-icon<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>
|
||||
24
templates/login.html
Normal file
24
templates/login.html
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<roundcube:include file="includes/layout.html" />
|
||||
|
||||
<h1 class="voice"><roundcube:object name="productname" /> <roundcube:label name="login" /></h1>
|
||||
|
||||
<div id="layout-content" class="selected no-navbar" role="main">
|
||||
<roundcube:object name="logo" src="/images/logo.svg" id="logo" alt="Logo" />
|
||||
<roundcube:form id="login-form" name="login-form" method="post" class="propform">
|
||||
<roundcube:object name="loginform" form="login-form" size="40" submit=true class="form-control" />
|
||||
<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" />
|
||||
220
templates/mail.html
Normal file
220
templates/mail.html
Normal file
|
|
@ -0,0 +1,220 @@
|
|||
<roundcube:include file="includes/layout.html" />
|
||||
<roundcube:include file="includes/menu.html" />
|
||||
|
||||
<h1 class="voice"><roundcube:label name="mail" /></h1>
|
||||
|
||||
<!-- folders list -->
|
||||
<div id="layout-sidebar" class="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>
|
||||
<roundcube:button name="folderactions" type="link" title="folderactions" label="actions"
|
||||
class="button icon sidebar-menu" innerclass="inner" data-popup="mailboxoptions-menu" />
|
||||
</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 class="footer small">
|
||||
<roundcube:if condition="env:quota" />
|
||||
<div id="quotadisplay" class="quota-widget hidden">
|
||||
<span class="voice"><roundcube:label name="quota"></span>
|
||||
<roundcube:object name="quotaDisplay" class="count" display="text" />
|
||||
</div>
|
||||
<roundcube:endif />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- messages list -->
|
||||
<div id="layout-list" class="listbox selected">
|
||||
<div id="messagelist-header" class="header">
|
||||
<a class="button icon task-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>
|
||||
<div class="toolbar menu" role="toolbar">
|
||||
<a href="#select" class="select disabled" data-popup="listselect-menu" data-toggle-button="list-toggle-button" title="<roundcube:label name="select" />"><span class="inner"><roundcube:label name="select" /></span></a>
|
||||
<roundcube:if condition="env:threads" />
|
||||
<a href="#threads" class="threads disabled" 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="options active" label="options" innerclass="inner" />
|
||||
<roundcube:container name="listcontrols" id="listcontrols" />
|
||||
</div>
|
||||
<roundcube:button command="checkmail" type="link" class="button icon toolbar-button refresh"
|
||||
label="refresh" title="checkmail" innerclass="inner" />
|
||||
<a class="button icon toolbar-menu-button" href="#list-menu"><span class="inner"><roundcube:label name="menu" /></span></a>
|
||||
</div>
|
||||
<roundcube:add_label name="showunread" />
|
||||
<roundcube:object name="searchform" id="mailsearchform" wrapper="searchbar menu"
|
||||
label="mailquicksearchbox" buttontitle="findmail" options="searchmenu" ariatag="h2" />
|
||||
<div id="searchmenu" class="hidden searchoptions scroller propform formcontainer" aria-labelledby="aria-label-search-menu" aria-controls="messagelist">
|
||||
<h3 id="aria-label-search-menu" class="voice"><roundcube:label name="searchmod" /></h3>
|
||||
<div class="formcontent">
|
||||
<ul class="proplist">
|
||||
<li><label><input type="checkbox" name="s_mods[]" value="subject" /><roundcube:label name="subject" /></label></li>
|
||||
<li class="with-sublist">
|
||||
<label><input type="checkbox" name="s_mods[]" value="sender" /><roundcube:label name="sender" /></label>
|
||||
<a class="button icon dropdown" role="button" href="#" title="<roundcube:label name="details" />"></a>
|
||||
<ul class="proplist d-none">
|
||||
<li><label><input type="checkbox" name="s_mods[]" value="from" /><roundcube:label name="from" /></label></li>
|
||||
<li><label><input type="checkbox" name="s_mods[]" value="replyto" /><roundcube:label name="replyto" /></label></li>
|
||||
<li><label><input type="checkbox" name="s_mods[]" value="followupto" /><roundcube:label name="followupto" /></label></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="with-sublist">
|
||||
<label><input type="checkbox" name="s_mods[]" value="recipient" /><roundcube:label name="recipient" /></label>
|
||||
<a class="button icon dropdown" role="button" href="#" title="<roundcube:label name="details" />"></a>
|
||||
<ul class="proplist d-none">
|
||||
<li><label><input type="checkbox" name="s_mods[]" value="to" /><roundcube:label name="to" /></label></li>
|
||||
<li><label><input type="checkbox" name="s_mods[]" value="cc" /><roundcube:label name="cc" /></label></li>
|
||||
<li><label><input type="checkbox" name="s_mods[]" value="bcc" /><roundcube:label name="bcc" /></label></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><label><input type="checkbox" name="s_mods[]" value="body" /><roundcube:label name="body" /></label></li>
|
||||
<li><label><input type="checkbox" name="s_mods[]" value="text" /><roundcube:label name="msgtext" /></label></li>
|
||||
</ul>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<label for="searchfilter" class="input-group-text"><roundcube:label name="type" /></label>
|
||||
</div>
|
||||
<roundcube:object name="searchfilter" id="searchfilter" noevent="true" class="custom-select" />
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<label for="s_interval" class="input-group-text"><roundcube:label name="date" /></label>
|
||||
</div>
|
||||
<roundcube:object name="searchinterval" id="s_interval" class="custom-select" />
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<label for="s_scope" class="input-group-text"><roundcube:label name="searchscope" /></label>
|
||||
</div>
|
||||
<select name="s_scope" id="s_scope" class="custom-select">
|
||||
<option value="base"><roundcube:label name="currentfolder" /></option>
|
||||
<option value="sub"><roundcube:label name="subfolders" /></option>
|
||||
<option value="all"><roundcube:label name="allfolders" /></option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="formbuttons">
|
||||
<button type="button" class="btn btn-primary icon search" onclick="return rcmail.command('search')"><roundcube:label name="search" /></button>
|
||||
</div>
|
||||
</div>
|
||||
<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" class="listing messagelist sortheader fixedheader"
|
||||
aria-labelledby="aria-label-messagelist" data-list="message_list" data-label-msg="listempty"
|
||||
/>
|
||||
</div>
|
||||
<roundcube:include file="includes/pagenav.html" />
|
||||
</div>
|
||||
|
||||
<!-- message preview -->
|
||||
<div id="layout-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="contentframe"
|
||||
id="messagecontframe"
|
||||
aria-labelledby="aria-label-mailpreviewframe"
|
||||
src="env:blankpage"
|
||||
title="arialabelmailpreviewframe"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- popup menus -->
|
||||
|
||||
<div id="dragmessage-menu" class="popupmenu">
|
||||
<h3 id="aria-label-dragmessage-menu" class="voice"><roundcube:label name="arialabeldropactionmenu" /></h3>
|
||||
<ul class="menu listing" role="menu" aria-labelledby="aria-label-dragmessage-menu">
|
||||
<roundcube:button command="move" type="link-menuitem" onclick="return rcmail.drag_menu_action('move')" label="move" class="disabled" classAct="active" />
|
||||
<roundcube:button command="copy" type="link-menuitem" onclick="return rcmail.drag_menu_action('copy')" label="copy" class="disabled" 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="menu listing" role="menu" aria-labelledby="aria-label-mailboxoptions-menu">
|
||||
<roundcube:button command="expunge" type="link-menuitem" label="compact" class="expunge disabled" classAct="expunge active" />
|
||||
<roundcube:button command="purge" type="link-menuitem" label="empty" class="purge disabled" classAct="purge active" />
|
||||
<roundcube:button command="mark-all-read" type="link-menuitem" label="markallread" class="read disabled" classAct="read active" />
|
||||
<roundcube:button command="folders" task="settings" type="link-menuitem" label="managefolders" class="folders disabled" classAct="folders 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="menu listing" role="menu" aria-labelledby="aria-label-listselect-menu">
|
||||
<roundcube:button type="link-menuitem" label="selection" class="selection disabled" classAct="selection active"
|
||||
name="list-toggle-button" id="list-toggle-button" onclick="UI.toggle_list_selection(this, 'messagelist')" />
|
||||
<roundcube:button command="select-all" type="link-menuitem" label="all" class="select all disabled" classAct="select all active" />
|
||||
<roundcube:button command="select-all" type="link-menuitem" prop="page" label="currpage" class="select page disabled" classAct="select page active" />
|
||||
<roundcube:button command="select-all" type="link-menuitem" prop="unread" label="unread" class="select unread disabled" classAct="select unread active" />
|
||||
<roundcube:button command="select-all" type="link-menuitem" prop="flagged" label="flagged" class="select flagged disabled" classAct="select flagged active" />
|
||||
<roundcube:button command="select-all" type="link-menuitem" prop="invert" label="invert" class="select invert disabled" classAct="select invert active" />
|
||||
<roundcube:button command="select-none" type="link-menuitem" label="none" class="select none disabled" 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="menu listing" role="menu" aria-labelledby="aria-label-threadselectmenu">
|
||||
<roundcube:button command="expand-unread" type="link-menuitem" label="expand-unread" class="expand unread disabled" classAct="expand unread active" />
|
||||
<roundcube:button command="expand-all" type="link-menuitem" label="expand-all" class="expand all disabled" classAct="expand all active" />
|
||||
<roundcube:button command="collapse-all" type="link-menuitem" label="collapse-all" class="expand none disabled" 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">
|
||||
<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">
|
||||
<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">
|
||||
<option value="list"><roundcube:label name="list" /></option>
|
||||
<option value="threads"><roundcube:label name="threads" /></option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<roundcube:endif />
|
||||
<roundcube:container name="listoptions" id="listoptionsmenu" />
|
||||
<roundcube:add_label name="listoptionstitle" />
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
83
templates/message.html
Normal file
83
templates/message.html
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
<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 id="layout-content" class="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 class="voice"><roundcube:label name="subject" />: </span>
|
||||
<roundcube:object name="messageHeaders" valueOf="subject" />
|
||||
<roundcube:if condition="!env:message_context && !env:extwin">
|
||||
<roundcube:button command="extwin" type="link" class="extwin" innerClass="inner"
|
||||
label="openinextwin" title="openinextwin" data-hidden="small" />
|
||||
<roundcube:endif />
|
||||
</h2>
|
||||
<div class="header">
|
||||
<roundcube:object name="contactphoto" class="contactphoto" placeholder="/images/contactpic.svg" bg-color="transparent" />
|
||||
<div class="header-content">
|
||||
<roundcube:object name="messageSummary" class="header-summary" addicon="virtual" />
|
||||
<roundcube:object name="messageHeaders" class="header-headers" addicon="virtual" exclude="subject" max="10" />
|
||||
<div class="header-links">
|
||||
<roundcube:add_label name="details" />
|
||||
<roundcube:add_label name="summary" />
|
||||
<a href="#headers" class="headers-summary" onclick="return UI.headers_show(true)"></a>
|
||||
<a href="#all-headers" class="headers-all" onclick="return UI.headers_dialog()"><roundcube:label name="headers" /></a>
|
||||
<roundcube:add_label name="arialabelmessageheaders" />
|
||||
<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" headertableclass="headers-table" />
|
||||
</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="menu listing" role="menu" aria-labelledby="aria-label-attachmentmenu">
|
||||
<roundcube:button command="open-attachment" type="link-menuitem" id="attachmenuopen" label="open" class="extwin disabled" classAct="extwin active" />
|
||||
<roundcube:button command="download-attachment" type="link-menuitem" id="attachmenudownload" label="download" class="download disabled" 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="menu listing" role="menu" aria-labelledby="aria-label-mailtomenu">
|
||||
<roundcube:button name="addtoaddressbook" type="link-menuitem" label="addtoaddressbook" class="addressbook" classAct="addressbook active" />
|
||||
<roundcube:button name="composeto" type="link-menuitem" label="composeto" class="compose" classAct="compose active" />
|
||||
<roundcube:container name="mailtomenu" id="mailto-menu" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
119
templates/messagepart.html
Normal file
119
templates/messagepart.html
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
<roundcube:include file="includes/layout.html" />
|
||||
|
||||
<h1 class="voice"><roundcube:var name="env:filename" /></h1>
|
||||
|
||||
<div id="layout-content" class="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 menu">
|
||||
<roundcube:button type="link" name="info" label="properties" title="properties"
|
||||
class="info" innerclass="inner" onclick="UI.props_dialog()" />
|
||||
<roundcube:button command="download" type="link" label="download" title="download"
|
||||
class="download disabled" classAct="download" innerclass="inner" />
|
||||
<roundcube:button command="print" type="link" label="print" title="print"
|
||||
class="print disabled" classAct="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="reply disabled" classAct="reply"
|
||||
label="reply" title="replytomessage" innerclass="inner" />
|
||||
<span class="dropbutton">
|
||||
<roundcube:button command="reply-all" type="link" class="reply-all disabled" classAct="reply-all"
|
||||
label="replyall" title="replytoallmessage" innerclass="inner" />
|
||||
<a href="#reply-all" id="replyallmenulink" class="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="forward disabled" classAct="forward"
|
||||
label="forward" title="forwardmessage" innerclass="inner" />
|
||||
<a href="#forward" id="forwardmenulink" class="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="more" label="more" title="moreactions" data-popup="message-menu"
|
||||
innerclass="inner" data-hidden="small" />
|
||||
<roundcube:endif />
|
||||
<roundcube:if condition="stripos(env:mimetype, 'image/') === 0" />
|
||||
<span class="spacer"></span>
|
||||
<roundcube:button command="image-scale" type="link" prop="+" data-hidden="small"
|
||||
class="zoomin disabled" classAct="zoomin"
|
||||
label="zoomin" title="increaseimage" innerclass="inner" />
|
||||
<roundcube:button command="image-scale" type="link" prop="-" data-hidden="small"
|
||||
class="zoomout disabled" classAct="zoomout"
|
||||
label="zoomout" title="decreaseimage" innerclass="inner" />
|
||||
<roundcube:button command="image-rotate" type="link" data-hidden="small"
|
||||
class="rotate disabled" classAct="rotate"
|
||||
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>
|
||||
<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 menu" role="menu" aria-labelledby="aria-label-imagetools">
|
||||
<roundcube:button command="image-scale" type="link" prop="+"
|
||||
class="zoomin disabled" classAct="zoomin"
|
||||
label="zoomin" title="increaseimage" innerclass="inner" />
|
||||
<roundcube:button command="image-scale" type="link" prop="-"
|
||||
class="zoomout disabled" classAct="zoomout"
|
||||
label="zoomout" title="decreaseimage" innerclass="inner" />
|
||||
<roundcube:button command="image-rotate" type="link"
|
||||
class="rotate disabled" classAct="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 />
|
||||
</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="menu 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 disabled" />
|
||||
<roundcube:button type="link-menuitem" command="forward-attachment" label="forwardattachment" prop="sub" classAct="forward attachment active" class="forward attachment disabled" />
|
||||
<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="menu listing" role="menu" aria-labelledby="aria-label-replyallmenu">
|
||||
<roundcube:button type="link-menuitem" command="reply-all" label="replyall" prop="sub" class="reply all disabled" classAct="reply all active" />
|
||||
<roundcube:button type="link-menuitem" command="reply-list" label="replylist" prop="sub" class="reply list disabled" 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="menu listing" role="menu" aria-labelledby="aria-label-messagemenu">
|
||||
<roundcube:button type="link-menuitem" command="edit" prop="new" label="editasnew" class="edit asnew disabled" classAct="edit asnew active" />
|
||||
<roundcube:button type="link-menuitem" command="viewsource" label="viewsource" class="source disabled" classAct="source active" />
|
||||
<roundcube:container name="messagemenu" id="message-menu" />
|
||||
</ul>
|
||||
</div>
|
||||
<roundcube:endif />
|
||||
|
||||
<roundcube:add_label name="properties" />
|
||||
<div id="properties-menu" class="popupmenu" role="dialog" aria-labelledby="aria-label-contentinfo">
|
||||
<h3 id="aria-label-contentinfo" class="voice"><roundcube:label name="properties" /></h3>
|
||||
<div class="scroller">
|
||||
<roundcube:object name="messagePartControls" class="listing props-table" role="contentinfo"
|
||||
aria-labelledby="aria-label-contentinfo" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
27
templates/messageprint.html
Normal file
27
templates/messageprint.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<roundcube:include file="includes/layout.html" />
|
||||
|
||||
<roundcube:object name="logo" id="logo" alt="Logo" logo-type="print" logo-match="template" class="float-sm-right" />
|
||||
|
||||
<div class="print-content" role="main">
|
||||
<div id="message-header">
|
||||
<h2 class="subject">
|
||||
<roundcube:object name="messageHeaders" valueOf="subject" />
|
||||
</h2>
|
||||
<div class="header">
|
||||
<roundcube:object name="contactphoto" class="contactphoto" placeholder="/images/contactpic.svg" />
|
||||
<div class="header-content details-view">
|
||||
<roundcube:object name="messageHeaders" class="header-headers" addicon="virtual" exclude="subject" max="10" />
|
||||
</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" headertableclass="headers-table" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
15
templates/plugin.html
Normal file
15
templates/plugin.html
Normal file
|
|
@ -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 id="layout-content" class="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" />
|
||||
13
templates/responseedit.html
Normal file
13
templates/responseedit.html
Normal file
|
|
@ -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" />
|
||||
41
templates/responses.html
Normal file
41
templates/responses.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<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 id="layout-list" class="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 id="layout-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 menu">
|
||||
<roundcube:button command="add" type="link" class="create disabled" classAct="create"
|
||||
label="create" title="newresponse" innerClass="inner" data-fab="true" />
|
||||
<roundcube:button command="delete" type="link" class="delete disabled" classAct="delete"
|
||||
label="delete" title="delete" innerClass="inner" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="iframe-wrapper">
|
||||
<roundcube:object name="contentframe" id="preferences-frame" src="env:blankpage" title="arialabelresponseeditfrom" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
28
templates/settings.html
Normal file
28
templates/settings.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<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 id="layout-list" class="listbox<roundcube:exp expression="!request:_action ? '' : ' selected'"/>" aria-labelledby="aria-label-prefsection">
|
||||
<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-prefsection" class="header-title"><roundcube:label name="preferences" /></span>
|
||||
</div>
|
||||
<div class="scroller">
|
||||
<roundcube:object name="sectionslist" id="sections-table" class="listing iconized settings-default-icon"
|
||||
noheader="true" role="listbox" data-list="sections_list" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="layout-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="contentframe" id="preferences-frame" src="env:blankpage" title="arialabelpreferencesform" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
13
templates/settingsedit.html
Normal file
13
templates/settingsedit.html
Normal file
|
|
@ -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 cols-sm-6-6" />
|
||||
</div>
|
||||
|
||||
<div class="formbuttons">
|
||||
<roundcube:button command="save" class="btn btn-primary submit" label="save" />
|
||||
</div>
|
||||
|
||||
<roundcube:include file="includes/footer.html" />
|
||||
38
watermark.html
Normal file
38
watermark.html
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
html, body { height: 100%; overflow: hidden; }
|
||||
body {
|
||||
background: url(images/logo.svg) center no-repeat #fff;
|
||||
background-size: 30%;
|
||||
background-blend-mode: luminosity;
|
||||
}
|
||||
html:not(.dark-mode) body:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(255, 255, 255, .85);
|
||||
}
|
||||
html.dark-mode > body {
|
||||
background-color: #21292c;
|
||||
background-blend-mode: soft-light;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
try {
|
||||
if (document.cookie.indexOf('colorMode=dark') > -1
|
||||
|| (document.cookie.indexOf('colorMode=light') === -1 && window.matchMedia('(prefers-color-scheme: dark)').matches)
|
||||
) {
|
||||
document.documentElement.className += ' dark-mode';
|
||||
}
|
||||
} catch (e) { }
|
||||
</script>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue