update to 1.5.0

This commit is contained in:
meaz 2021-10-26 20:11:30 +02:00
parent 7d37918fb1
commit 37019da23b
Signed by: meaz
GPG Key ID: CD7A47B2F1ED43B4
48 changed files with 3649 additions and 2187 deletions

View File

@ -28,14 +28,15 @@ INSTALLATION
------------
All styles are written using LESS syntax. Thus it needs to be compiled
using the `lessc` (>= 1.5.0) command line tool. This comes with the `nodejs-less`
RPM package which depends on nodejs.
using the `lessc` (>= 2.5.2) command line tool. This comes with the `nodejs-less`
RPM package or using `npm install less` which depend on nodejs.
```
$ lessc -x styles/styles.less > styles/styles.css
$ lessc -x styles/print.less > styles/print.css
$ lessc -x styles/embed.less > styles/embed.css
$ lessc --clean-css="--s1 --advanced" styles/styles.less > styles/styles.min.css
$ lessc --clean-css="--s1 --advanced" styles/print.less > styles/print.min.css
$ lessc --clean-css="--s1 --advanced" styles/embed.less > styles/embed.min.css
```
(the -x option minifies the CSS code)
(`--clean-css="--s1 --advanced"` minifies the css, requires the clean-css Less plugin.
The plugin can be installed using `npm install less-plugin-clean-css`)
References to image files from the included CSS files can be appended
with cache-buster marks to avoid browser caching issues after updating.
@ -104,6 +105,11 @@ FOR DEVELOPERS
_action=add* or _action=create* or _nav=hide in the frame URL if the navigation
should be hidden, which is the case when you create a content object.
- Dark mode:
In dark mode html element will have `dark-mode` class assigned.
It is possible to disable dark mode using less variable `@dark-mode-enabled`.
Option `dark_mode_support` in meta.json controls addition of the mode switch in the menu.
KNOWN ISSUES
------------

6
deps/bootstrap.bundle.min.js vendored Normal file

File diff suppressed because one or more lines are too long

6
deps/bootstrap.min.css vendored Normal file

File diff suppressed because one or more lines are too long

17
deps/less.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" style="background-color:#f4f4f4">
<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>

Before

Width:  |  Height:  |  Size: 802 B

After

Width:  |  Height:  |  Size: 769 B

View File

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="background-color:#f4f4f4">
<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>

Before

Width:  |  Height:  |  Size: 400 B

After

Width:  |  Height:  |  Size: 367 B

1
images/google-icon.svg Normal file
View 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

View 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

View File

@ -5,11 +5,13 @@
"license": "Creative Commons Attribution-ShareAlike",
"license-url": "http://creativecommons.org/licenses/by-sa/3.0/",
"config": {
"layout": "widescreen",
"supported_layouts": ["widescreen"],
"jquery_ui_colors_theme": "bootstrap",
"embed_css_location": "/styles/embed.css",
"editor_css_location": "/styles/embed.css",
"media_browser_css_location": "none"
"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",

View File

@ -1 +0,0 @@
/* Here you can re-define any of variables from variables.less, colors.less and fontawesome.less */

View File

@ -56,7 +56,8 @@
@color-taskmenu-button-background-hover: lighten(@color-taskmenu-background, 10%);
@color-taskmenu-button-action-background-hover: @color-taskmenu-button-background-hover;
@color-taskmenu-button-special-background-hover:lighten(@color-taskmenu-button-special-background, 10%);
// @color-taskmenu-button-special-background-hover:lighten(@color-taskmenu-button-special-background, 10%);
@color-taskmenu-button-logout: @color-error;
@color-taskmenu-button-logout-hover: @color-error;
@ -194,6 +195,9 @@
@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;
@ -210,8 +214,68 @@
@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%);
// 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: @color-dark-main;
@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;

1148
styles/dark.less Normal file

File diff suppressed because it is too large Load Diff

View File

@ -1,171 +0,0 @@
/**
* Roundcube Webmail styles for the Elastic skin
*
* Copyright (c) The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
/* Style for embedded pages and TinyMCE editor content page */
/**
* 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.
*/
/*** 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-v19-regular.woff2') format('woff2'), url('../fonts/roboto-v19-regular.woff') format('woff');
}
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 400;
src: local('Roboto Italic'), local('Roboto-Italic'), url('../fonts/roboto-v19-italic.woff2') format('woff2'), url('../fonts/roboto-v19-italic.woff') format('woff');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url('../fonts/roboto-v19-regular-700.woff2') format('woff2'), url('../fonts/roboto-v19-regular-700.woff') format('woff');
}
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 700;
src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url('../fonts/roboto-v19-italic-700.woff2') format('woff2'), url('../fonts/roboto-v19-italic-700.woff') format('woff');
}
/* Reset some Bootstrap style */
body,
button,
input,
optgroup,
select,
textarea,
.popover {
font-family: Roboto, sans-serif;
}
button,
input,
select,
textarea {
line-height: initial;
}
input {
vertical-align: middle;
}
a {
color: #bd139a;
}
a:hover {
color: #8f0e74;
}
a.disabled {
pointer-events: none;
}
a.disabled:not(.btn) {
opacity: 0.5;
}
.mce-content-body {
margin: 4px;
color: #2c363a;
}
.mce-content-body div.pre {
font-family: monospace;
}
.mce-content-body blockquote {
border-left: #1010ff 2px solid;
margin: 0;
padding: 0 0.4em;
}
.rcmail-inline-message {
font-family: Roboto, sans-serif;
font-size: 14px;
padding: 0.5em;
margin: 0 0 0.5em 0;
opacity: 0.95;
color: #2c363a;
background-color: rgba(246, 96, 157, 0.2);
display: flex;
align-items: center;
}
.rcmail-inline-message:before {
font-size: 1.25em;
display: block;
float: left;
margin: 0 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;
font-size: 1.5em;
line-height: 1;
width: 1em;
margin-right: 0.3em;
content: "\f071";
color: #F6609D;
}
.rcmail-inline-message span {
line-height: 1.5;
}
.rcmail-inline-message a {
color: #bd139a;
}
.rcmail-inline-message a:hover {
color: #8f0e74;
}
.rcmail-inline-message button {
vertical-align: middle;
white-space: nowrap;
padding: 0.375em 0.75em;
margin-left: 0.5em;
font-size: 1em;
line-height: 1.5;
border-radius: 0.25em;
border: 1px solid transparent;
color: #fff;
background: #50162d;
}
.rcmail-inline-message button:focus {
box-shadow: 0 0 0 0.2rem rgba(80, 22, 45, 0.5);
}
.rcmail-inline-message button:hover {
background: #300d1b;
border-color: #280b17;
}
.rcmail-inline-message button:not([disabled]):not(.disabled):active {
background: #240a14;
border-color: #1c0810;
box-shadow: 0 0 0 0.2rem rgba(80, 22, 45, 0.53);
}
.rcmail-inline-buttons {
margin: 0;
}

1
styles/embed.min.css vendored Normal file
View File

@ -0,0 +1 @@
.popover,.rcmail-inline-message,body,button,input,optgroup,select,textarea{font-family:Roboto,sans-serif}@font-face{font-family:Icons;font-style:normal;font-weight:900;src:url(../fonts/fa-solid-900.woff2) format('woff2'),url(../fonts/fa-solid-900.woff) format('woff')}@font-face{font-family:Icons;font-style:normal;font-weight:400;src:url(../fonts/fa-regular-400.woff2) format('woff2'),url(../fonts/fa-regular-400.woff) format('woff')}@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:local('Roboto'),local('Roboto-Regular'),url(../fonts/roboto-v19-regular.woff2) format('woff2'),url(../fonts/roboto-v19-regular.woff) format('woff')}@font-face{font-family:Roboto;font-style:italic;font-weight:400;src:local('Roboto Italic'),local('Roboto-Italic'),url(../fonts/roboto-v19-italic.woff2) format('woff2'),url(../fonts/roboto-v19-italic.woff) format('woff')}@font-face{font-family:Roboto;font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(../fonts/roboto-v19-regular-700.woff2) format('woff2'),url(../fonts/roboto-v19-regular-700.woff) format('woff')}@font-face{font-family:Roboto;font-style:italic;font-weight:700;src:local('Roboto Bold Italic'),local('Roboto-BoldItalic'),url(../fonts/roboto-v19-italic-700.woff2) format('woff2'),url(../fonts/roboto-v19-italic-700.woff) format('woff')}button,input,select,textarea{line-height:initial}input{vertical-align:middle}a{color:#00acff}a:hover{color:#008acc}a.disabled{pointer-events:none}a.disabled:not(.btn){opacity:.5}.mce-content-body{margin:4px;color:#2c363a}.mce-content-body div.pre{font-family:monospace}.mce-content-body blockquote{border-left:#1010ff 2px solid;margin:0;padding:0 .4em}.rcmail-inline-message{font-size:14px;padding:.5em;margin:0 0 .5em;opacity:.95;color:#2c363a;background-color:rgba(255,212,82,.2);display:flex;align-items:center}.rcmail-inline-message:before{display:block;float:left;margin:0 .3em 0 0;height:1em;font-family:Icons;font-style:normal;font-weight:900;text-decoration:inherit;text-align:center;speak:none;font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:1.5em;line-height:1;width:1em;content:"\f071";color:#ffd452}.rcmail-inline-message span{line-height:1.5}.rcmail-inline-message a{color:#00acff}.rcmail-inline-message a:hover{color:#008acc}.rcmail-inline-message button{vertical-align:middle;white-space:nowrap;padding:.375em .75em;margin-left:.5em;font-size:1em;line-height:1.5;border-radius:.25em;border:1px solid transparent;color:#fff;background:#37beff}.rcmail-inline-message button:focus{box-shadow:0 0 0 .2rem rgba(55,190,255,.5)}.rcmail-inline-message button:hover{background:#0eb1ff;border-color:#04adff}.rcmail-inline-message button:not([disabled]):not(.disabled):active{background:#00abfe;border-color:#00a4f4;box-shadow:0 0 0 .2rem rgba(55,190,255,.53)}.rcmail-inline-buttons{margin:0}

View File

@ -251,11 +251,21 @@ body {
width: 6px;
height: 100%;
.sidebar-right & {
&.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,
@ -271,7 +281,7 @@ body {
}
@media screen and (max-width: @screen-width-medium) {
// Disable column resizing by hiding splitters and reseting columns width
// Disable column resizing by hiding splitters and resetting columns width
.column-resizer {
display: none;
}

View File

@ -1 +0,0 @@
body{overflow:auto;height:auto}#print-layout{margin:1rem}#print-layout #logo{max-height:80px}#print-layout .image-attachment .image-link{margin-bottom:.5rem}#print-layout .image-attachment .attachment-links{display:none}#print-layout .header-content .message-partheaders{padding:0 !important;border:0;font-size:1rem;color:inherit}#print-layout #message-header{margin-bottom:.5rem}#print-layout .attachment-size{padding-left:.1rem}#print-layout .formcontent{padding:0}#print-layout .formcontent legend{margin-top:.5rem}#print-layout .formcontent .row .form-control-plaintext{padding:.1rem}#print-layout .formcontent .contactfield{padding:.2rem 0}#print-layout .propform.groupped .row.input-group .input-group-text{padding:0;min-width:12rem;background:#fff;border:0}#print-layout .contact-header{margin-bottom:0}

View File

@ -35,15 +35,6 @@ body {
}
}
.header-content {
.message-partheaders {
padding: 0 !important;
border: 0;
font-size: 1rem;
color: inherit;
}
}
#message-header {
margin-bottom: .5rem;
}
@ -52,6 +43,10 @@ body {
padding-left: .1rem;
}
blockquote {
page-break-inside: auto;
}
// Overwrites for contact printouts
.formcontent {
@ -70,7 +65,7 @@ body {
}
}
.propform.groupped .row.input-group .input-group-text {
.propform.grouped .row.input-group .input-group-text {
padding: 0;
min-width: 12rem;
background: #fff;

1
styles/print.min.css vendored Normal file
View File

@ -0,0 +1 @@
#print-layout #message-header,#print-layout .image-attachment .image-link{margin-bottom:.5rem}body{overflow:auto;height:auto}#print-layout{margin:1rem}#print-layout #logo{max-height:80px}#print-layout .image-attachment .attachment-links{display:none}#print-layout .attachment-size{padding-left:.1rem}#print-layout blockquote{page-break-inside:auto}#print-layout .formcontent{padding:0}#print-layout .formcontent legend{margin-top:.5rem}#print-layout .formcontent .row .form-control-plaintext{padding:.1rem}#print-layout .formcontent .contactfield{padding:.2rem 0}#print-layout .propform.grouped .row.input-group .input-group-text{padding:0;min-width:12rem;background:#fff;border:0}#print-layout .contact-header{margin-bottom:0}

View File

@ -56,6 +56,15 @@
margin-right: 0;
margin-left: 0;
}
.oauthlogin {
margin-top: 1em;
padding-top: 1em;
}
.formbuttons + .oauthlogin {
border-top: 1px solid #ccc;
}
}
#rcmloginsubmit {
@ -143,7 +152,7 @@ body.task-error-login #layout {
#message-header {
margin-bottom: 1rem;
.subject {
& > .subject {
font-size: 1.5rem;
font-weight: bold;
@ -157,6 +166,8 @@ body.task-error-login #layout {
}
a.extwin {
text-decoration: none;
&:before {
&:extend(.font-icon-class);
float: none;
@ -173,7 +184,7 @@ body.task-error-login #layout {
}
}
.short-header {
& > .header {
display: flex;
img.contactphoto {
@ -182,64 +193,115 @@ body.task-error-login #layout {
width: @mail-header-photo-height;
height: @mail-header-photo-height;
object-fit: cover;
}
div.header-content {
min-height: @mail-header-photo-height;
flex: 1;
}
div.header-subject {
line-height: @mail-header-photo-height/2;
& > span {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
}
div.header-links {
a {
font-size: 90%;
margin-right: .5rem;
text-decoration: none;
white-space: nowrap;
display: inline-block;
&:before {
&:extend(.font-icon-class);
height: 1.5rem;
line-height: 1.3;
}
&.envelope:before {
content: @fa-var-envelope;
}
&.html:before {
content: @fa-var-image;
}
&.plain:before {
content: @fa-var-align-justify;
}
&.zipdownload:before {
content: @fa-var-download;
}
}
}
.message-partheaders {
margin: 0 !important;
padding: .25rem 0 !important;
background: @color-image-upload-background;
}
}
a.extwin,
a.headers {
text-decoration: none;
.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;
}
}
}
@ -251,8 +313,6 @@ body.task-error-login #layout {
#messagebody {
&.mailvelope {
margin: 0;
iframe {
min-height: 75vh;
}
@ -266,13 +326,17 @@ body.task-error-login #layout {
position: relative;
&:not(:first-child) {
border-top: 1px solid lighten(@color-mail-headers, 50%);
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 !important;
margin: 0 auto !important;
}
blockquote {
@ -339,34 +403,7 @@ body.task-error-login #layout {
div.pre {
font-family: monospace;
}
}
.message-partheaders {
padding: .5rem 0;
margin: .5rem 0 0 0;
font-size: 90%;
border-top: 1px solid @color-list-border;
border-bottom: 1px solid @color-list-border;
color: @color-mail-headers;
.header-title {
.overflow-ellipsis();
white-space: nowrap;
max-width: 8em;
font-weight: bold;
padding-right: 1rem;
vertical-align: top;
}
.subject {
font-weight: bold;
}
& + .message-part,
& + .message-htmlpart {
border-top: 0;
margin: 0;
font-size: 13px;
}
}
@ -402,4 +439,8 @@ body.task-error-login #layout {
}
}
@import "_styles";
& when (@dark-mode-enabled = true) {
@import "dark";
}
@import (optional) "_styles";

File diff suppressed because it is too large Load Diff

View File

@ -12,6 +12,8 @@
@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;
@ -55,4 +57,4 @@
@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) "_variables";
@import (reference, optional) "_variables";

View File

@ -17,7 +17,7 @@
}
a.button {
text-decoration: none;
text-decoration: none !important;
}
@ -139,6 +139,9 @@ button.btn {
&.sso:before {
content: @fa-var-sign-in-alt;
}
&.extwin:before {
content: @fa-var-external-link-square-alt;
}
}
a.btn,
@ -149,6 +152,24 @@ button.btn {
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 {
@ -218,12 +239,18 @@ html.touch {
}
}
.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%);
}
@ -234,9 +261,8 @@ html.touch {
&.disabled,
&:disabled {
background: lighten(@color-btn-secondary-background, 20%);
border-color: lighten(@color-btn-secondary-background, 20%);
opacity: 1;
background: @color-btn-secondary-background;
border-color: @color-btn-secondary-background;
}
&:not(:disabled):not(.disabled) {
@ -258,6 +284,8 @@ html.touch {
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%);
}
@ -268,9 +296,8 @@ html.touch {
&.disabled,
&:disabled {
background: lighten(@color-btn-primary-background, 20%);
border-color: lighten(@color-btn-primary-background, 20%);
opacity: 1;
background: @color-btn-primary-background;
border-color: @color-btn-primary-background;
}
&:not(:disabled):not(.disabled) {
@ -292,6 +319,8 @@ html.touch {
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%);
}
@ -302,9 +331,8 @@ html.touch {
&.disabled,
&:disabled {
background: lighten(@color-btn-danger-background, 20%);
border-color: lighten(@color-btn-danger-background, 20%);
opacity: 1;
background: @color-btn-danger-background;
border-color: @color-btn-danger-background;
}
&:not(:disabled):not(.disabled) {

View File

@ -285,7 +285,6 @@ fieldset.image-attachment {
}
.count {
color: @color-quota-text;
font-size: 80%;
order: 2;
}
@ -430,7 +429,7 @@ fieldset.image-attachment {
a {
padding: .2rem .45rem !important;
height: 3.5rem !important;
height: ~"calc(3.5rem - 1px)" !important;
}
}

View File

@ -49,6 +49,7 @@
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
@ -62,7 +63,12 @@
}
li:last-child {
border-radius: 0 0 .25rem .25rem;
border-bottom-right-radius: .25rem;
border-bottom-left-radius: .25rem;
}
ul.rounded-0 > li {
border-radius: 0;
}
}
}
@ -95,7 +101,7 @@ html.layout-phone {
}
.popover-overlay {
z-index: 1000;
z-index: 1299;
background-color: @color-dialog-overlay-background;
position: absolute;
top: 0;
@ -148,6 +154,7 @@ html.touch .popover {
max-width: initial;
margin: 0;
height: auto;
z-index: 1301; // above TinyMCE dialogs
.popover-header {
border-radius: .25rem .25rem 0 0 !important;

File diff suppressed because it is too large Load Diff

View File

@ -151,7 +151,7 @@ input.smart-upload {
}
}
&.groupped {
&.grouped {
&.readonly {
legend {
margin: 0;
@ -214,6 +214,7 @@ input.smart-upload {
display: flex;
flex-wrap: wrap;
border-radius: 0;
border-left-color: transparent;
input {
border-radius: 0;
@ -471,7 +472,7 @@ html.ms .propform {
}
.row {
margin-right: 0; // without these the form is too wide causing horizontal scrollbar appearence
margin-right: 0; // without these the form is too wide causing horizontal scrollbar appearance
margin-left: 0;
// Note: We never use odd numbers here
@ -505,7 +506,7 @@ html.ms .propform {
display: flex; // https://github.com/twbs/bootstrap/issues/22348
flex-wrap: nowrap;
// alignment fixes needed because we do not stick precissely to Bootstrap's form structure
// alignment fixes needed because we do not stick precisely to Bootstrap's form structure
@media screen and (max-width: @screen-width-bs-phone) {
.col-6 {
max-width: 100%;
@ -976,15 +977,15 @@ html.ms .propform {
}
a.button.icon {
font-size: .8em;
font-size: .75em;
cursor: pointer;
padding: 0;
color: @color-font;
&:before {
float: none;
display: inline-block;
width: 1em;
line-height: 1.5;
line-height: 1.6;
}
}
@ -1271,6 +1272,13 @@ html.ms .propform {
margin-bottom: .5rem;
}
// This one is to fix height of an input-group child that usually we put
// in between inputs, e.g. in managesieve forms it is '@' in email input
// with a separate local part and domain selector.
.input-group-append.input-group-prepend {
display: inline;
}
.input-group-text {
color: @color-input;
background-color: @color-input-addon-background;
@ -1287,6 +1295,7 @@ html.ms .propform {
.custom-control-input {
left: 0;
opacity: 0 !important; // fixes input in dark mode
&:focus ~ .custom-control-label:before {
box-shadow: 0 0 0 .2rem @color-checkbox-focus-shadow;
@ -1379,7 +1388,6 @@ html.ms .propform {
white-space: nowrap;
.overflow-ellipsis();
padding-right: 100px;
line-height: 1.5 !important;
}
& + .hint {

View File

@ -333,6 +333,8 @@
.ui-datepicker-next {
cursor: pointer;
width: auto;
color: @color-font;
text-decoration: none;
&:before {
&:extend(.font-icon-class);

View File

@ -279,6 +279,7 @@ html.touch {
&.enigma.keys > a:before {
content: @fa-var-key;
}
&.info > a:before,
&.userinfo > a:before {
content: @fa-var-info-circle;
}
@ -343,7 +344,7 @@ html.ie11 .listing.iconized li a:before {
&.server > td.section:before {
content: @fa-var-server;
}
&.enigma > td.section:before {
&.encryption > td.section:before {
content: @fa-var-lock;
}
&.calendar > td.section:before {
@ -354,7 +355,7 @@ html.ie11 .listing.iconized li a:before {
}
}
/* selecatable list: e.g. spellcheck language selection */
/* selectable list: e.g. spellcheck language selection */
.listing.iconized.selectable li {
a:before {
&:extend(.font-icon-class);
@ -542,6 +543,12 @@ ul.treelist {
&.archive > a:before {
.font-icon-solid(@fa-var-archive);
}
&.ns-shared > a:before {
.font-icon-solid(@fa-var-share-alt);
}
&.ns-other > a:before {
.font-icon-solid(@fa-var-user-friends);
}
}
// folder-selector fix for left padding
@ -581,6 +588,7 @@ table.fixedcopy {
span {
line-height: 2em;
&.size,
&.date {
font-size: 90%;
color: @color-list-secondary;
@ -598,6 +606,7 @@ table.fixedcopy {
&.subject {
.overflow-ellipsis();
width: 100%;
user-select: none
}
}
}
@ -745,6 +754,37 @@ table.fixedcopy {
&:extend(.font-icon-class);
.font-icon-regular(@fa-var-flag);
}
span.size {
display: none;
}
tr:hover {
span.date {
display: none;
}
span.size {
display: inline;
}
}
&.sort-size {
span.date {
display: none;
}
span.size {
display: inline;
}
tr:hover {
span.date {
display: inline;
}
span.size {
display: none;
}
}
}
}
// On touch devices hide flag icon, but do it in a way
@ -756,9 +796,11 @@ html.touch {
position: relative;
}
td.flags {
position: absolute;
top: .25rem;
right: 0;
bottom: 0;
background-color: transparent;
.flag {
visibility: hidden;

View File

@ -422,6 +422,12 @@ a.toolbar-button {
&.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;
}
@ -476,7 +482,7 @@ a.toolbar-button {
content: @fa-var-arrow-left;
}
&.check:before {
content: "";
content: "\00a0"; // just a space
}
&.check.selected:before {
content: @fa-var-check;
@ -685,6 +691,9 @@ a.toolbar-button {
&.submit:before {
content: @fa-var-check;
}
&.info:before {
content: @fa-var-info-circle;
}
&.threads:before {
content: @fa-var-comments;
}
@ -894,7 +903,11 @@ a.toolbar-button {
}
a.logout {
color: @color-taskmenu-button-logout-hover !important;
color: @color-taskmenu-button-logout !important;
&:hover {
color: @color-taskmenu-button-logout-hover !important;
}
}
}

View File

@ -121,8 +121,7 @@
<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="if ($(this).is('.active')) $('#contacts-table').toggleClass('withselection');" />
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" />

View File

@ -3,6 +3,7 @@
<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>

View File

@ -49,14 +49,14 @@
<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" />
<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" />
<roundcube:object name="storetarget" id="compose-store-target" noform="true" tabindex="2" class="custom-select" />
</div>
</div>
<roundcube:endif />
@ -108,8 +108,9 @@
<roundcube:container name="toolbar" id="compose-toolbar" />
</div>
</div>
<div id="compose-content" class="formcontainer content scroller">
<roundcube:object name="composeFormHead" role="main" class="formcontent" />
<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>
@ -214,6 +215,9 @@
</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>
@ -236,7 +240,7 @@
<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" itemclass="active" />
<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 command="save-response" type="link-menuitem" label="newresponse" class="create responses disabled" classAct="create responses active" unselectable="on" />
<roundcube:button name="responses" type="link-menuitem" label="editresponses" class="edit responses active" onclick="return rcmail.command('switch-task', 'settings/responses')" />

View File

@ -11,7 +11,7 @@
<roundcube:object name="contacthead" id="contacthead" class="contact-head readonly" with-source="true" />
</div>
<div id="contacttabs" class="tabbed">
<roundcube:object name="contactdetails" fieldset-class="propform groupped readonly"
<roundcube:object name="contactdetails" fieldset-class="propform grouped readonly"
short-legend-labels="true" />
</div>
</div>

View File

@ -16,7 +16,7 @@
</div>
<div id="contacttabs" class="tabbed">
<roundcube:object name="contacteditform" textareacols="60" form="editform"
fieldset-class="propform groupped" compact-form="true" short-legend-labels="true" />
fieldset-class="propform grouped" compact-form="true" short-legend-labels="true" />
</div>
</form>

View File

@ -3,7 +3,7 @@
<h1 class="voice"><roundcube:label name="addressbook" /> : <roundcube:label name="importcontacts" /></h1>
<div class="formcontent">
<roundcube:object name="importstep" class="propform" />
<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" />

View File

@ -1,6 +1,6 @@
<roundcube:include file="includes/layout.html" />
<roundcube:object name="logo" id="logo" alt="Logo" type="print" class="float-sm-right" />
<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">
@ -11,7 +11,7 @@
<roundcube:object name="contacthead" id="contacthead" class="contact-head readonly" with-source="true" />
</div>
<div id="contacttabs">
<roundcube:object name="contactdetails" fieldset-class="propform groupped readonly"
<roundcube:object name="contactdetails" fieldset-class="propform grouped readonly"
short-legend-labels="true" />
</div>
</div>

View File

@ -28,6 +28,17 @@
<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" />
<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" />

View File

@ -1,7 +1,7 @@
<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" data-src-small="0" id="logo" alt="Logo" />
<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">
@ -28,6 +28,11 @@
<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"

View File

@ -1,4 +1,4 @@
<div class="pagenav menu footer small" role="toolbar">
<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"

View File

@ -3,9 +3,9 @@
<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" data-src-small="0" id="logo" alt="Logo" />
<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 />
<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 &gt; 0" />
<roundcube:object name="version" condition="config:display_product_info == 2" />

View File

@ -62,19 +62,19 @@
<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" />
<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" />
<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">
<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>
@ -138,8 +138,7 @@
<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="if ($(this).is('.active')) $('#messagelist').toggleClass('withselection');" />
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" />

View File

@ -24,16 +24,16 @@
label="openinextwin" title="openinextwin" data-hidden="small" />
<roundcube:endif />
</h2>
<div class="short-header">
<div class="header">
<roundcube:object name="contactphoto" class="contactphoto" placeholder="/images/contactpic.svg" />
<div class="header-content">
<roundcube:object name="messageSummary" addicon="virtual" class="header-subject" />
<div class="message-partheaders hidden">
<roundcube:object name="messageHeaders" class="headers-table" addicon="virtual" exclude="subject" max="10" />
<a href="#all-headers" class="headers" onclick="return UI.headers_dialog()"><roundcube:label name="allheaders" /></a>
</div>
<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">
<a href="#headers" class="envelope" onclick="return UI.headers_show(this)"><roundcube:label name="details" /></a>
<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"
@ -55,7 +55,7 @@
<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" />
<roundcube:object name="messageBody" id="messagebody" headertableclass="headers-table" />
</div>
</div>
</div>

View File

@ -2,25 +2,13 @@
<h1 class="voice"><roundcube:var name="env:filename" /></h1>
<div id="layout-sidebar" class="listbox">
<div class="header">
<a class="button icon back-content-button" href="#content" data-hidden="big"><span class="inner"><roundcube:label name="back" /></span></a>
<span class="header-title" id="aria-label-contentinfo"><roundcube:label name="properties" /></span>
</div>
<div class="scroller">
<roundcube:object name="messagePartControls" class="listing props-table" role="contentinfo"
aria-labelledby="aria-label-contentinfo" />
</div>
</div>
<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">
<a class="button icon properties" id="properties-button" href="#properties" onclick="UI.show_sidebar()" data-hidden="big">
<span class="inner"><roundcube:label name="properties"></span>
</a>
<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"
@ -50,6 +38,7 @@
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" />
@ -118,4 +107,13 @@
</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" />

View File

@ -1,18 +1,16 @@
<roundcube:include file="includes/layout.html" />
<roundcube:object name="logo" id="logo" alt="Logo" type="print" class="float-sm-right" />
<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="short-header">
<div class="header">
<roundcube:object name="contactphoto" class="contactphoto" placeholder="/images/contactpic.svg" />
<div class="header-content">
<div class="message-partheaders">
<roundcube:object name="messageHeaders" class="headers-table" addicon="virtual" exclude="subject" max="10" />
</div>
<div class="header-content details-view">
<roundcube:object name="messageHeaders" class="header-headers" addicon="virtual" exclude="subject" max="10" />
</div>
</div>
</div>
@ -21,7 +19,7 @@
<roundcube:object name="messageAttachments" id="attachment-list" class="attachmentslist" />
</div>
<div role="region">
<roundcube:object name="messageBody" id="messagebody" />
<roundcube:object name="messageBody" id="messagebody" headertableclass="headers-table" />
</div>
</div>
</div>

View File

@ -34,7 +34,7 @@
</div>
</div>
<div class="iframe-wrapper">
<roundcube:object name="contentframe" id="preferences-frame" src="env:blankpage" title="arialabelresonseeditfrom" />
<roundcube:object name="contentframe" id="preferences-frame" src="env:blankpage" title="arialabelresponseeditfrom" />
</div>
</div>

639
ui.js

File diff suppressed because it is too large Load Diff

119
ui.min.js vendored

File diff suppressed because one or more lines are too long

View File

@ -11,8 +11,29 @@ body {
background-blend-mode: luminosity;
opacity: 0.8;
}
body:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 255, .85); }
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>