update to 1.5.0
This commit is contained in:
parent
7d37918fb1
commit
37019da23b
18
README.md
18
README.md
|
@ -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
|
||||
------------
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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 |
|
@ -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 |
|
@ -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 |
|
@ -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 |
|
@ -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",
|
||||
|
|
|
@ -1 +0,0 @@
|
|||
/* Here you can re-define any of variables from variables.less, colors.less and fontawesome.less */
|
|
@ -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;
|
||||
|
|
File diff suppressed because it is too large
Load Diff
171
styles/embed.css
171
styles/embed.css
|
@ -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;
|
||||
}
|
|
@ -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}
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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}
|
|
@ -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;
|
||||
|
|
|
@ -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}
|
|
@ -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
|
@ -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";
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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
|
@ -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 {
|
||||
|
|
|
@ -333,6 +333,8 @@
|
|||
.ui-datepicker-next {
|
||||
cursor: pointer;
|
||||
width: auto;
|
||||
color: @color-font;
|
||||
text-decoration: none;
|
||||
|
||||
&:before {
|
||||
&:extend(.font-icon-class);
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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')" />
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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 > 0" />
|
||||
<roundcube:object name="version" condition="config:display_product_info == 2" />
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue