Compare commits
7 Commits
| Author | SHA1 | Date |
|---|---|---|
 muppeth
|
8f04dbe817 | |
 antilopa
|
aab2da9c83 | |
|
muppeth
|
60200b3640 | |
 meaz
|
01e474b0f3 | |
|
muppeth
|
756ac5f477 | |
|
meaz
|
63edaacd5c | |
|
meaz
|
e555a90ab7 |
|
|
@ -2,3 +2,6 @@ styles/styles.css
|
|||
styles/print.css
|
||||
styles/embed.css
|
||||
deps/*
|
||||
node_modules/
|
||||
package-lock.json
|
||||
package.json
|
||||
|
|
@ -48,8 +48,7 @@ or after installing it on the destination system.
|
|||
FOR DEVELOPERS
|
||||
--------------
|
||||
|
||||
- Supported browsers: IE11+, Edge, Last 2 versions for Chrome/Firefox/Safari,
|
||||
Android Browser 5+, iOS Safari 9+.
|
||||
- Supported browsers: Last 2 versions of Edge/Chrome/Firefox/Safari.
|
||||
|
||||
- Skin color palette changes and other css modifications can be done
|
||||
via _styles.less and _variables.less files. Where you can overwrite all
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 572 B After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 209 KiB |
|
|
@ -1,23 +1,28 @@
|
|||
// Beetroot and Darkbeet colors
|
||||
@color-main: #50162d;
|
||||
@color-link: #bd139a;
|
||||
@color-success: #50162d;
|
||||
@color-warning: #F6609D;
|
||||
@color-light-main: #61273E;
|
||||
@color-lighter-main: #72384F;
|
||||
@color-link: #BD899E;
|
||||
@color-highlight: #1F5C60;
|
||||
@color-success: #4F8F93;
|
||||
@color-warning: #8eb726;
|
||||
@color-error: #8eb726;
|
||||
@color-white: #DDDDDD;
|
||||
@color-link-secondary: lighten(@color-font, 60%);
|
||||
@color-layout-header-background: #50162d;
|
||||
|
||||
// Task menu
|
||||
@color-taskmenu-background: #50162d;
|
||||
@color-taskmenu-button-action: #E0548D;
|
||||
@color-taskmenu-button-action: #72384f;
|
||||
@color-taskmenu-button-special: @color-taskmenu-button;
|
||||
@color-taskmenu-button-special-background: @color-taskmenu-background;
|
||||
@color-taskmenu-button-action-hover: #fff;
|
||||
@color-taskmenu-button-action-hover: #DDDDDD;
|
||||
@color-taskmenu-button-special-hover: lighten(@color-taskmenu-button-special, 10%);
|
||||
// @color-taskmenu-button-special-background-hover:lighten(@color-taskmenu-button-special-background, 10%);
|
||||
|
||||
// Toolbar
|
||||
@color-toolbar-button-background-hover: lighten(@color-layout-header-background, 10%);
|
||||
@color-searchbar-icon-active: green;
|
||||
@color-searchbar-icon-active: #8eb726;
|
||||
|
||||
// Popovers (menus)
|
||||
@color-popover-header: @color-black-shade-text;
|
||||
|
|
@ -27,20 +32,26 @@
|
|||
@color-btn-secondary-background: lighten(@color-main, 10%);
|
||||
|
||||
// Dark mode colors
|
||||
@color-dark-main: darken(@color-main, 10%);
|
||||
@color-dark-background: #252121;
|
||||
@color-dark-main: @color-main;
|
||||
@color-dark-background: #2b2f3b;
|
||||
@color-darker-background: #1f222b;
|
||||
@color-dark-font: #DDDDDD;
|
||||
@color-dark-border: #292525;
|
||||
@color-dark-border: #1f222b;
|
||||
@color-dark-taskmenu-button-action: #4F8F93;
|
||||
@color-dark-taskmenu-button-action-hover: @color-dark-font;
|
||||
@color-dark-input-background: @color-darker-background;
|
||||
|
||||
@color-dark-list-selected: #FFFFFF;
|
||||
@color-dark-list-selected: #DDDDDD;
|
||||
@color-dark-list-selected-background: #50162D;
|
||||
@color-dark-list-droptarget-background: #353131;
|
||||
@color-dark-list-border: #353131;
|
||||
@color-dark-input-border: #292525;
|
||||
@color-dark-input-addon-background: #292525;
|
||||
@color-dark-popover-background: #201c1c;
|
||||
@color-dark-list-droptarget-background: #383c4a;
|
||||
@color-dark-list-border: #383c4a;
|
||||
@color-dark-input-border: #471328;
|
||||
@color-dark-input-addon-background: #1f222b;
|
||||
@color-dark-popover-background: #1f222b;
|
||||
@color-dark-popover-border: #50162d;
|
||||
|
||||
// @color-taskmenu-background: @color-darker-background;
|
||||
@color-taskmenu-button-action: @color-white;
|
||||
@color-taskmenu-button-logout: @color-error;
|
||||
@color-taskmenu-button-logout-hover: @color-error;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// Darkbeet modifications based on elastic skin
|
||||
@import "_darkc";
|
||||
@import "_colors";
|
||||
|
||||
html.dark-mode {
|
||||
|
||||
|
|
@ -7,28 +8,51 @@ html.dark-mode {
|
|||
// .tox {
|
||||
// .tox-edit-area__iframe {
|
||||
// background-color: @color-dark-popover-background;
|
||||
// color: white;
|
||||
// color: @color-white;
|
||||
// }
|
||||
// }
|
||||
|
||||
#taskmenu {
|
||||
a {
|
||||
&.selected {
|
||||
color: white;
|
||||
color: @color-white;
|
||||
background-color: @color-dark-list-selected-background;
|
||||
}
|
||||
}
|
||||
.action-buttons a {
|
||||
color: white;
|
||||
color: @color-white;
|
||||
}
|
||||
}
|
||||
.menu
|
||||
a.compose::before {
|
||||
color: white;
|
||||
color: @color-white;
|
||||
}
|
||||
#layout > div > .header,
|
||||
#layout-menu {
|
||||
background-color: @color-dark-popover-background;
|
||||
border: unset;
|
||||
}
|
||||
|
||||
#layout-menu .special-buttons a:not(:focus) {
|
||||
background: @color-dark-border;
|
||||
}
|
||||
|
||||
// The two following are to get lighter borders when composing message (to: and subject:), when focus
|
||||
.custom-file-label:focus:not(.is-invalid), .form-control:focus:not(.is-invalid) {
|
||||
border-color: 3f;
|
||||
}
|
||||
|
||||
.recipient-input.focus {
|
||||
border-color: @color-light-main !important;
|
||||
}
|
||||
|
||||
// Get dotted line around attachment brighter
|
||||
.file-upload {
|
||||
border: .2rem dashed @color-main;
|
||||
}
|
||||
|
||||
#messagelist {
|
||||
border: @color-dark-border 1px solid;
|
||||
background-color: @color-darker-background;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,10 +22,23 @@
|
|||
|
||||
/* login page */
|
||||
|
||||
.task-login #logo {
|
||||
filter: invert(91%) sepia(52%) saturate(2742%) hue-rotate(312deg) brightness(95%) contrast(93%);
|
||||
}
|
||||
|
||||
& when (@dark-mode-enabled = true) {
|
||||
@import "_dark";
|
||||
}
|
||||
/*** 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');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -267,7 +267,7 @@
|
|||
@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-thumb: darken(@color-main, 25%);
|
||||
@color-dark-scrollbar-track: @color-dark-border;
|
||||
|
||||
@color-dark-blockquote-0: lighten(@color-main, 10%);
|
||||
|
|
|
|||
|
|
@ -12,41 +12,15 @@
|
|||
@import (reference) "variables";
|
||||
|
||||
html.dark-mode {
|
||||
& when not (@scrollbar-dark-width = unset) {
|
||||
scrollbar-color: @color-dark-scrollbar-thumb @color-dark-scrollbar-track;
|
||||
scrollbar-width: @scrollbar-dark-width;
|
||||
scrollbar-color: @color-dark-scrollbar-thumb @color-dark-scrollbar-track;
|
||||
|
||||
textarea,
|
||||
select,
|
||||
.popover-body,
|
||||
.popupmenu,
|
||||
.ui-dialog-content,
|
||||
.frame-content,
|
||||
.formcontent,
|
||||
.table-responsive,
|
||||
.table-responsive-sm,
|
||||
.scroller {
|
||||
// Firefox does not inherit scrollbar size from the html element
|
||||
scrollbar-width: @scrollbar-dark-width;
|
||||
&:not(.touch) {
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: @color-dark-scrollbar-track;
|
||||
}
|
||||
|
||||
&:not(.touch) {
|
||||
::-webkit-scrollbar when (@scrollbar-dark-width = auto) {
|
||||
// Note: If we do not set the width a default scrollbar is used in Chrome.
|
||||
// And the custom colors set below do not work
|
||||
width: 12px;
|
||||
}
|
||||
::-webkit-scrollbar when (@scrollbar-dark-width = thin) {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: @color-dark-scrollbar-track;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: @color-dark-scrollbar-thumb;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: @color-dark-scrollbar-thumb;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -781,17 +755,11 @@ html.dark-mode {
|
|||
}
|
||||
|
||||
.tox-menu {
|
||||
scrollbar-width: @scrollbar-dark-width;
|
||||
background-color: @color-dark-popover-background;
|
||||
border-color: @color-dark-popover-border;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.tox-dialog__body-nav,
|
||||
.tox-collection__group {
|
||||
scrollbar-width: @scrollbar-dark-width;
|
||||
}
|
||||
|
||||
.tox-collection__item-caret svg {
|
||||
fill: @color-dark-font;
|
||||
}
|
||||
|
|
@ -985,7 +953,6 @@ html.dark-mode {
|
|||
}
|
||||
|
||||
.ui-menu {
|
||||
scrollbar-width: @scrollbar-dark-width;
|
||||
background-color: @color-dark-popover-background;
|
||||
border-color: @color-dark-popover-border;
|
||||
box-shadow: none;
|
||||
|
|
|
|||
|
|
@ -93,8 +93,3 @@
|
|||
.rcmail-inline-buttons {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Have a black background when writing an email
|
||||
// & when (@dark-mode-enabled = true) {
|
||||
// @import "dark";
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -1 +1,184 @@
|
|||
@font-face{font-family:'Icons';font-style:normal;font-weight:900;src:url("../fonts/la-solid-900.woff2") format('woff2'),url("../fonts/la-solid-900.woff") format('woff')}@font-face{font-family:'Icons';font-style:normal;font-weight:400;src:url("../fonts/la-regular-400.woff2") format('woff2'),url("../fonts/la-regular-400.woff") format('woff')}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'),local('Roboto-Regular'),url('../fonts/roboto-v29-regular.woff2') format('woff2'),url('../fonts/roboto-v29-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-v29-italic.woff2') format('woff2'),url('../fonts/roboto-v29-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-v29-regular-700.woff2') format('woff2'),url('../fonts/roboto-v29-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-v29-italic-700.woff2') format('woff2'),url('../fonts/roboto-v29-italic-700.woff') format('woff')}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:.5}html{scrollbar-color:#c1c1c1 #f1f1f1;scrollbar-width:thin}html textarea,html select,html .popover-body,html .popupmenu,html .ui-dialog-content,html .frame-content,html .formcontent,html .table-responsive,html .table-responsive-sm,html .scroller{scrollbar-width:thin}html:not(.touch) ::-webkit-scrollbar{width:6px}html:not(.touch) ::-webkit-scrollbar-track{background-color:#f1f1f1}html:not(.touch) ::-webkit-scrollbar-thumb{background-color:#c1c1c1}.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-family:Roboto,sans-serif;font-size:14px;padding:.5em;margin:0 0 .5em 0;opacity:.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 .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:.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:.375em .75em;margin-left:.5em;font-size:1em;line-height:1.5;border-radius:.25em;border:1px solid transparent;color:#fff;background:#50162d}.rcmail-inline-message button:focus{box-shadow: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 .2rem rgba(80,22,45,0.53)}.rcmail-inline-buttons{margin: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-v29-regular.woff2') format('woff2'), url('../fonts/roboto-v29-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-v29-italic.woff2') format('woff2'), url('../fonts/roboto-v29-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-v29-regular-700.woff2') format('woff2'), url('../fonts/roboto-v29-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-v29-italic-700.woff2') format('woff2'), url('../fonts/roboto-v29-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: #BD899E;
|
||||
}
|
||||
a:hover {
|
||||
color: #ab6883;
|
||||
}
|
||||
a.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
a.disabled:not(.btn) {
|
||||
opacity: 0.5;
|
||||
}
|
||||
/* Scrollbar styles */
|
||||
html:not(.touch) ::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
html {
|
||||
scrollbar-color: #c1c1c1 #f1f1f1;
|
||||
}
|
||||
html:not(.touch) ::-webkit-scrollbar-track {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
html:not(.touch) ::-webkit-scrollbar-thumb {
|
||||
background-color: #c1c1c1;
|
||||
}
|
||||
.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(142, 183, 38, 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: #8eb726;
|
||||
}
|
||||
.rcmail-inline-message span {
|
||||
line-height: 1.5;
|
||||
}
|
||||
.rcmail-inline-message a {
|
||||
color: #BD899E;
|
||||
}
|
||||
.rcmail-inline-message a:hover {
|
||||
color: #ab6883;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,16 +18,16 @@
|
|||
font-family: 'Icons';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src: url("../fonts/la-solid-900.woff2") format('woff2'),
|
||||
url("../fonts/la-solid-900.woff") format('woff');
|
||||
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/la-regular-400.woff2") format('woff2'),
|
||||
url("../fonts/la-regular-400.woff") format('woff');
|
||||
src: url("../fonts/fa-regular-400.woff2") format('woff2'),
|
||||
url("../fonts/fa-regular-400.woff") format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
|
@ -99,21 +99,27 @@ a {
|
|||
/* Scrollbar styles */
|
||||
|
||||
html when not (@scrollbar-width = unset) {
|
||||
scrollbar-color: @color-scrollbar-thumb @color-scrollbar-track;
|
||||
scrollbar-width: @scrollbar-width;
|
||||
|
||||
textarea,
|
||||
select,
|
||||
.popover-body,
|
||||
.popupmenu,
|
||||
.ui-dialog-content,
|
||||
.frame-content,
|
||||
.formcontent,
|
||||
.table-responsive,
|
||||
.table-responsive-sm,
|
||||
.scroller {
|
||||
// Firefox does not inherit scrollbar size from the html element
|
||||
// Ignore thin width setting for Firefox, it makes the scrollbar very very thin in Firefox >= 100
|
||||
& when not (@scrollbar-width = thin) {
|
||||
scrollbar-width: @scrollbar-width;
|
||||
|
||||
textarea,
|
||||
select,
|
||||
.popover-body,
|
||||
.popupmenu,
|
||||
.ui-menu,
|
||||
.ui-dialog-content,
|
||||
.frame-content,
|
||||
.formcontent,
|
||||
.table-responsive,
|
||||
.table-responsive-sm,
|
||||
.tox-menu,
|
||||
.tox-dialog__body-nav,
|
||||
.tox-collection__group,
|
||||
.scroller {
|
||||
// Firefox does not inherit scrollbar size from the html element
|
||||
scrollbar-width: @scrollbar-width;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.touch) {
|
||||
|
|
@ -125,7 +131,13 @@ html when not (@scrollbar-width = unset) {
|
|||
::-webkit-scrollbar when (@scrollbar-width = thin) {
|
||||
width: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
scrollbar-color: @color-scrollbar-thumb @color-scrollbar-track;
|
||||
|
||||
&:not(.touch) {
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: @color-scrollbar-track;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -155,6 +155,7 @@ body {
|
|||
flex: 6;
|
||||
flex-direction: column;
|
||||
background-color: @color-layout-content-background;
|
||||
width: 100%;
|
||||
|
||||
html.iframe & {
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -1 +1,57 @@
|
|||
#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}
|
||||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) The Roundcube Dev Team
|
||||
*
|
||||
* The contents are subject to the Creative Commons Attribution-ShareAlike
|
||||
* License. It is allowed to copy, distribute, transmit and to adapt the work
|
||||
* by keeping credits to the original authors in the README.md file.
|
||||
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
|
||||
*/
|
||||
/*** Additional styles for printouts ***/
|
||||
body {
|
||||
overflow: auto;
|
||||
height: auto;
|
||||
}
|
||||
#print-layout {
|
||||
margin: 1rem;
|
||||
}
|
||||
#print-layout #logo {
|
||||
max-height: 80px;
|
||||
}
|
||||
#print-layout .image-attachment .image-link {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
#print-layout .image-attachment .attachment-links {
|
||||
display: none;
|
||||
}
|
||||
#print-layout #message-header {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
#print-layout .attachment-size {
|
||||
padding-left: 0.1rem;
|
||||
}
|
||||
#print-layout blockquote {
|
||||
page-break-inside: auto;
|
||||
}
|
||||
#print-layout .formcontent {
|
||||
padding: 0;
|
||||
}
|
||||
#print-layout .formcontent legend {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
#print-layout .formcontent .row .form-control-plaintext {
|
||||
padding: 0.1rem;
|
||||
}
|
||||
#print-layout .formcontent .contactfield {
|
||||
padding: 0.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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -405,6 +405,18 @@ body.task-error-login #layout {
|
|||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
// This is needed for proper display of quoted plain text
|
||||
blockquote {
|
||||
display: inline-block;
|
||||
min-width: 100%;
|
||||
|
||||
& + br {
|
||||
// compensate the spacing "removed" by the inline-block style above
|
||||
display: block;
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#compose-attachments {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -55,7 +55,6 @@
|
|||
|
||||
// Scrollbars
|
||||
@scrollbar-width: thin; // 'auto' or 'thin' or 'unset'
|
||||
@scrollbar-dark-width: thin; // 'auto' or 'thin' or 'unset'
|
||||
|
||||
// Additional icons
|
||||
@icon-resize-corner: data-uri("image/svg+xml;charset=utf-8", "../images/corner-handle.svg"); // size: 16x16
|
||||
|
|
|
|||
|
|
@ -128,6 +128,7 @@ html.layout-phone {
|
|||
a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
color: @color-popover-mobile-header;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -86,12 +86,6 @@ div.tox {
|
|||
background-color: @color-dialog-overlay-background;
|
||||
}
|
||||
|
||||
.tox-menu,
|
||||
.tox-dialog__body-nav,
|
||||
.tox-collection__group {
|
||||
scrollbar-width: @scrollbar-width;
|
||||
}
|
||||
|
||||
.tox-dialog__header {
|
||||
height: (@layout-header-height - 1px);
|
||||
border-bottom: 1px solid @color-dialog-header-border;
|
||||
|
|
|
|||
|
|
@ -959,23 +959,50 @@ html.ms .propform {
|
|||
.style-input-focus();
|
||||
}
|
||||
|
||||
.recipient {
|
||||
display: flex;
|
||||
position: relative;
|
||||
max-width: ~"calc(50% - 3px)";
|
||||
border: 1px solid @color-recipient-input-border;
|
||||
background-color: @color-recipient-input-background;
|
||||
border-radius: .25em;
|
||||
padding: 0 .25em;
|
||||
margin-top: @recipient-input-margin-fix;
|
||||
margin-right: .2em;
|
||||
white-space: nowrap;
|
||||
cursor: default;
|
||||
li {
|
||||
max-width: 100%;
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
&:not(.recipient) {
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
&.input {
|
||||
flex: 1;
|
||||
min-width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
background: transparent !important;
|
||||
border: 0 !important;
|
||||
margin-top: @recipient-input-margin-fix;
|
||||
outline: 0;
|
||||
line-height: 1.5;
|
||||
|
||||
&::-ms-clear {
|
||||
display: none; // removes clear icon in IE11
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.recipient-input li.recipient,
|
||||
body > li.recipient.ui-sortable-helper {
|
||||
display: flex;
|
||||
position: relative;
|
||||
max-width: ~"calc(50% - 3px)";
|
||||
border: 1px solid @color-recipient-input-border;
|
||||
background-color: @color-recipient-input-background;
|
||||
border-radius: .25rem;
|
||||
padding: 0 .25rem;
|
||||
margin-top: @recipient-input-margin-fix;
|
||||
margin-right: .2em;
|
||||
white-space: nowrap;
|
||||
cursor: default;
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.name {
|
||||
|
|
@ -1011,30 +1038,9 @@ html.ms .propform {
|
|||
}
|
||||
}
|
||||
|
||||
li {
|
||||
max-width: 100%;
|
||||
|
||||
&:not(.recipient) {
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
&.input {
|
||||
flex: 1;
|
||||
min-width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
background: transparent !important;
|
||||
border: 0 !important;
|
||||
margin-top: @recipient-input-margin-fix;
|
||||
outline: 0;
|
||||
line-height: 1.5;
|
||||
|
||||
&::-ms-clear {
|
||||
display: none; // removes clear icon in IE11
|
||||
}
|
||||
&.ui-sortable-helper {
|
||||
// fix element width while dragging
|
||||
padding: 0 0 0 .25rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,6 @@
|
|||
border-radius: .3rem;
|
||||
z-index: 240;
|
||||
position: absolute;
|
||||
scrollbar-width: @scrollbar-width;
|
||||
|
||||
.ui-state-active {
|
||||
border: 0 !important;
|
||||
|
|
|
|||
|
|
@ -794,7 +794,14 @@ html.touch {
|
|||
.messagelist {
|
||||
tr {
|
||||
position: relative;
|
||||
display: flex; // Safari fix (#8433)
|
||||
}
|
||||
|
||||
td.selection,
|
||||
td.threads {
|
||||
line-height: 3.8em; // because of display:flex above
|
||||
}
|
||||
|
||||
td.flags {
|
||||
position: absolute;
|
||||
top: .25rem;
|
||||
|
|
@ -806,6 +813,7 @@ html.touch {
|
|||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
td.subject {
|
||||
padding-right: .5em;
|
||||
|
||||
|
|
|
|||
|
|
@ -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" id="logo" alt="Logo" />
|
||||
<roundcube:object name="logo" src="/images/logo.png" 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">
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<h1 class="voice"><roundcube:object name="productname" /> <roundcube:label name="login" /></h1>
|
||||
|
||||
<div id="layout-content" class="selected no-navbar" role="main">
|
||||
<roundcube:object name="logo" src="/images/logo.svg" id="logo" alt="Logo" />
|
||||
<roundcube:object name="logo" src="/images/logo.png" id="logo" alt="Logo" />
|
||||
<roundcube:form id="login-form" name="login-form" method="post" class="propform">
|
||||
<roundcube:object name="loginform" form="login-form" size="40" submit=true class="form-control" />
|
||||
<div id="login-footer" role="contentinfo">
|
||||
|
|
@ -12,6 +12,15 @@
|
|||
<roundcube:if condition="config:support_url" />
|
||||
• <a href="<roundcube:var name='config:support_url' />" target="_blank" class="support-link"><roundcube:label name="support" /></a>
|
||||
<roundcube:endif />
|
||||
<roundcube:if condition="config:legal_url" />
|
||||
● <a href="<roundcube:var name='config:legal_url' />" target="_blank" class="legal-link"><roundcube:label name="legal" /></a>
|
||||
<roundcube:endif />
|
||||
<roundcube:if condition="config:privacy_policy_url" />
|
||||
● <a href="<roundcube:var name='config:privacy_policy_url' />" target="_blank" class="privacy-link"><roundcube:label name="privacypolicy" /></a>
|
||||
<roundcube:endif />
|
||||
<roundcube:if condition="config:password_reset_url" />
|
||||
● <a href="<roundcube:var name='config:password_reset_url' />" target="_blank" class="passwordreset-link"><roundcube:label name="passwordreset" /></a>
|
||||
<roundcube:endif />
|
||||
<roundcube:container name="loginfooter" id="login-footer" />
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
64
ui.js
64
ui.js
|
|
@ -870,8 +870,8 @@ function rcube_elastic_ui()
|
|||
|
||||
$('.popup', context).addClass('formcontent').append(
|
||||
$('<div class="form-group row">')
|
||||
.append(label.attr('for', id).addClass('col-sm-2 col-form-label'))
|
||||
.append($('<div class="col-sm-10">').append(input))
|
||||
.append(label.attr('for', id).addClass('col-sm-4 col-form-label text-break'))
|
||||
.append($('<div class="col-sm-8">').append(input))
|
||||
);
|
||||
|
||||
input.focus();
|
||||
|
|
@ -2428,28 +2428,30 @@ function rcube_elastic_ui()
|
|||
if (popup_id && menus[popup_id] && popup.is(':visible')) {
|
||||
menus[popup_id].transitioning = true;
|
||||
}
|
||||
})
|
||||
.on('hidden.bs.popover', function() {
|
||||
if (/-clone$/.test(popup.attr('id'))) {
|
||||
popup.remove();
|
||||
}
|
||||
else {
|
||||
popup.attr('aria-hidden', true)
|
||||
// Some menus aren't being hidden, force that
|
||||
.addClass('hidden')
|
||||
// Bootstrap will detach the popup element from
|
||||
// the DOM (https://github.com/twbs/bootstrap/issues/20219)
|
||||
// making our menus to not update buttons state.
|
||||
// Work around this by attaching it back to the DOM tree.
|
||||
.appendTo(popup.data('popup-parent') || document.body);
|
||||
}
|
||||
|
||||
// close orphaned popovers, for some reason there are sometimes such dummy elements left
|
||||
$('.popover-body:empty').each(function() { $(this).parent().remove(); });
|
||||
// Note: We do not use hidden.bs.popover event because it is not always executed (#8602)
|
||||
setTimeout(function () {
|
||||
if (/-clone$/.test(popup.attr('id'))) {
|
||||
popup.remove();
|
||||
}
|
||||
else {
|
||||
popup.attr('aria-hidden', true)
|
||||
// Some menus aren't being hidden, force that
|
||||
.addClass('hidden')
|
||||
// Bootstrap will detach the popup element from
|
||||
// the DOM (https://github.com/twbs/bootstrap/issues/20219)
|
||||
// making our menus to not update buttons state.
|
||||
// Work around this by attaching it back to the DOM tree.
|
||||
.appendTo(popup.data('popup-parent') || document.body);
|
||||
}
|
||||
|
||||
if (popup_id && menus[popup_id]) {
|
||||
delete menus[popup_id];
|
||||
}
|
||||
// close orphaned popovers, for some reason there are sometimes such dummy elements left
|
||||
$('.popover-body:empty').each(function() { $(this).parent().remove(); });
|
||||
|
||||
if (popup_id && menus[popup_id]) {
|
||||
delete menus[popup_id];
|
||||
}
|
||||
}, 200);
|
||||
})
|
||||
// Because Bootstrap does not provide originalEvent in show/shown events
|
||||
// we have to handle that by our own using click and keydown handlers
|
||||
|
|
@ -2478,7 +2480,11 @@ function rcube_elastic_ui()
|
|||
$(item).attr('title', title);
|
||||
}
|
||||
|
||||
popup.attr('aria-hidden', 'true').data('button', item);
|
||||
if (is_mobile() || !popup.is('.toolbar')) {
|
||||
popup.attr('aria-hidden', 'true');
|
||||
}
|
||||
|
||||
popup.data('button', item);
|
||||
|
||||
// stop propagation to e.g. do not hide the popup when
|
||||
// clicking inside on form elements
|
||||
|
|
@ -2704,7 +2710,7 @@ function rcube_elastic_ui()
|
|||
return true;
|
||||
};
|
||||
|
||||
dialog = rcmail.simple_dialog(dialog, rcmail.gettext('listoptionstitle'), save_func, {
|
||||
dialog = rcmail.simple_dialog(dialog, 'listoptionstitle', save_func, {
|
||||
closeOnEscape: true,
|
||||
minWidth: 400
|
||||
});
|
||||
|
|
@ -2762,7 +2768,7 @@ function rcube_elastic_ui()
|
|||
var props = {_uid: rcmail.env.uid, _mbox: rcmail.env.mailbox, _framed: 1},
|
||||
dialog = $('<iframe>').attr({id: 'headersframe', src: rcmail.url('headers', props)});
|
||||
|
||||
rcmail.simple_dialog(dialog, rcmail.gettext('arialabelmessageheaders'), null, {
|
||||
rcmail.simple_dialog(dialog, 'arialabelmessageheaders', null, {
|
||||
cancel_button: 'close',
|
||||
height: 400
|
||||
});
|
||||
|
|
@ -2775,7 +2781,7 @@ function rcube_elastic_ui()
|
|||
{
|
||||
var dialog = $('#properties-menu').clone();
|
||||
|
||||
rcmail.simple_dialog(dialog, rcmail.gettext('properties'), null, {
|
||||
rcmail.simple_dialog(dialog, 'properties', null, {
|
||||
cancel_button: 'close',
|
||||
height: 400
|
||||
});
|
||||
|
|
@ -2797,7 +2803,7 @@ function rcube_elastic_ui()
|
|||
return rcmail.command('import-messages', $(dialog.find('form')[0]));
|
||||
};
|
||||
|
||||
rcmail.simple_dialog(dialog, rcmail.gettext('importmessages'), save_func, {
|
||||
rcmail.simple_dialog(dialog, 'importmessages', save_func, {
|
||||
button: 'import',
|
||||
closeOnEscape: true,
|
||||
minWidth: 400
|
||||
|
|
@ -3152,7 +3158,7 @@ function rcube_elastic_ui()
|
|||
{
|
||||
if (!opts) opts = {};
|
||||
|
||||
var title = rcmail.gettext(opts.title || 'insertcontact'),
|
||||
var title = opts.title || 'insertcontact',
|
||||
dialog = $('#recipient-dialog'),
|
||||
parent = dialog.parent(),
|
||||
close_func = function() {
|
||||
|
|
@ -3407,7 +3413,7 @@ function rcube_elastic_ui()
|
|||
recipients.push({
|
||||
name: '',
|
||||
email: email.replace(/(^<|>$)/g, '') // trim < and > characters
|
||||
.replace(/[^a-z]$/gi, '') // remove trailing comma or any non-letter character at the end (#7899)
|
||||
.replace(/[^\p{L}]$/giu, '') // remove trailing comma or any non-letter character at the end (#7899, #9257)
|
||||
});
|
||||
|
||||
str = str.replace(email, '').trim();
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -21,8 +21,8 @@ html:not(.dark-mode) body:before {
|
|||
background: rgba(255, 255, 255, .85);
|
||||
}
|
||||
html.dark-mode > body {
|
||||
background-color: #21292c;
|
||||
background-blend-mode: soft-light;
|
||||
background-color: #2b2f3b;
|
||||
background-blend-mode: overlay;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue