rewrite of theme to make it easier to maintain and follow guidelines for custom changes; switched icons to LineAwesome; Additional tweaks to dark theme; Ready for rc version 1.5.2

This commit is contained in:
muppeth 2022-01-27 00:09:30 +01:00
parent a6316690bf
commit da7e792465
Signed by: muppeth
GPG Key ID: 0EBC7B9848D04031
53 changed files with 417 additions and 6647 deletions

4
.gitignore vendored Normal file
View File

@ -0,0 +1,4 @@
styles/styles.css
styles/print.css
styles/embed.css
deps/*

View File

@ -1,5 +1,5 @@
Roundcube Webmail Skin "Elastic Disroot Flavor"
===============================================
Roundcube Webmail Skin "Elastic"
================================
This skin package contains a theme for the Roundcube Webmail
software. It can be used, modified and redistributed according to
@ -41,7 +41,7 @@ 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.
Run `bin/updatecss.sh --dir skins/disroot` before packaging the skin
Run `bin/updatecss.sh --dir skins/elastic` before packaging the skin
or after installing it on the destination system.

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

17
deps/less.min.js vendored

File diff suppressed because one or more lines are too long

BIN
fonts/la-regular-400.woff Normal file

Binary file not shown.

BIN
fonts/la-regular-400.woff2 Normal file

Binary file not shown.

BIN
fonts/la-solid-900.woff Normal file

Binary file not shown.

BIN
fonts/la-solid-900.woff2 Normal file

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

BIN
images/disroot-root.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 153 KiB

View File

@ -1,7 +1,7 @@
{
"name": "Beetroot (elastic)",
"extends": "elastic",
"author": "meaz of Disroot (and Aleksander Machniak - elastic)",
"author": "muppeth & meaz of Disroot.org (based on Aleksander Machniak's - elastic)",
"license": "Creative Commons Attribution-ShareAlike",
"license-url": "http://creativecommons.org/licenses/by-sa/3.0/",
"config": {

46
styles/_colors.less Normal file
View File

@ -0,0 +1,46 @@
// Beetroot and Darkbeet colors
@color-main: #50162d;
@color-link: #bd139a;
@color-success: #50162d;
@color-warning: #F6609D;
@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-special: @color-taskmenu-button;
@color-taskmenu-button-special-background: @color-taskmenu-background;
@color-taskmenu-button-action-hover: #fff;
@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;
// Popovers (menus)
@color-popover-header: @color-black-shade-text;
@color-popover-header-background: transparent;
//Forms
@color-btn-secondary-background: lighten(@color-main, 10%);
// Dark mode colors
@color-dark-main: darken(@color-main, 10%);
@color-dark-background: #252121;
@color-dark-font: #DDDDDD;
@color-dark-border: #292525;
@color-dark-taskmenu-button-action: #4F8F93;
@color-dark-taskmenu-button-action-hover: @color-dark-font;
@color-dark-list-selected: #FFFFFF;
@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-popover-border: #50162d;

34
styles/_dark.less Normal file
View File

@ -0,0 +1,34 @@
// Darkbeet modifications based on elastic skin
@import "_darkc";
html.dark-mode {
.tox {
.tox-edit-area__iframe {
background-color: @color-dark-popover-background;
color: white;
}
.mce-content-body {
color: white;
}
}
#taskmenu {
a {
&.selected {
color: white;
background-color: @color-dark-list-selected-background;
}
}
.action-buttons a {
color: white;
}
}
.menu
a.compose::before {
color: white;
}
#layout > div > .header,
#layout-menu {
background-color: @color-dark-popover-background;
border: unset;
}
}

2
styles/_darkc.less Normal file
View File

@ -0,0 +1,2 @@
@color-font: blue;

View File

@ -1,24 +1,27 @@
/* Here you can put your custom styles that will be appended to the output css file */
/* top bar text in white */
//Modification for Beetroot based on Elastic skin
//
@import "_colors";
#layout > div > .header {
color: #fff;
color: #fff;
}
.menu.toolbar a {
color: #fff;
color: #fff;
}
#layout > div > .header a.button {
color: #fff;
color: #fff;
}
/* login page */
.task-login #logo {
filter: invert(91%) sepia(52%) saturate(2742%) hue-rotate(312deg) brightness(95%) contrast(93%);
filter: invert(91%) sepia(52%) saturate(2742%) hue-rotate(312deg) brightness(95%) contrast(93%);
}
& when (@dark-mode-enabled = true) {
@import "_dark";
}

49
styles/_variables.less Normal file
View File

@ -0,0 +1,49 @@
// Variables for custom Darkbeet/Beetroot theme based on Elastic skin
@import "_colors";
@dark-mode-enabled: true; // on change also have to change dark_mode_support in meta.json
@screen-width-large: 1200px;
@screen-width-medium: 1024px;
@screen-width-small: 768px;
@screen-width-xs: 480px;
@screen-width-mini: 320px;
@screen-width-touch: @screen-width-medium;
@screen-width-bs-phone: 576px;
@page-font-size: 14px;
@page-min-width: 240px;
// Note: we'll set some values in pixels instead of rem to eliminate
// Firefox sub-pixel rendering bug(s)
@layout-menu-width: floor(5.6 * @page-font-size);
@layout-menu-width-sm: floor(3 * @page-font-size);
@layout-header-height: floor(4.2 * @page-font-size);
@layout-footer-height: @layout-header-height;
@layout-footer-small-height: floor(2.5 * @page-font-size);
@layout-header-font-size: 1rem;
@layout-searchbar-height: floor(2.6 * @page-font-size);
@layout-touch-header-height: @layout-header-height;
@layout-touch-header-font-size: floor(1.2 * @page-font-size);
@layout-touch-menu-record-height: floor(3.4 * @page-font-size);
@layout-touch-menu-record-font-size: floor(1.2 * @page-font-size);
@layout-touch-icon-width: 2.2em;
@layout-mobile-menu-width: (@screen-width-mini * .85);
@layout-contact-icon-width: 112px;
@layout-contact-icon-height: 135px;
@listing-line-height: floor(2.5 * @page-font-size);
@listing-touch-line-height: floor(3.4 * @page-font-size);
@listing-treetoggle-width: 1.5em;
@mail-header-photo-height: 4rem;
// Additional icons
@icon-resize-corner: data-uri("image/svg+xml;charset=utf-8", "../images/corner-handle.svg"); // size: 16x16
@icon-file-drop: data-uri("image/svg+xml;charset=utf-8", "../images/download.svg");

View File

@ -9,18 +9,17 @@
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
@color-main: #50162d; //#37beff;
@color-main: #37beff;
@color-main-dark: darken(@color-main, 35%);
@color-black: #161b1d;
@color-font: lighten(@color-black, 10%);
@color-link: #bd139a; //#00acff;
@color-link: #00acff;
@color-link-hover: darken(@color-link, 10%);
@color-border: #ddd;
@color-error: #ff5552;
@color-success: #50162d; //#41b849;
@color-warning: #F6609D; //#ffd452;
@color-success: #41b849;
@color-warning: #ffd452;
@color-link-secondary: lighten(@color-font, 60%);
@color-black-shade-text: tint(@color-black, 40%);
@color-black-shade-border: lighten(@color-black, 75%);
@color-black-shade-bg: lighten(@color-black, 85%);
@ -32,40 +31,35 @@
@color-layout-sidebar-background: #fff;
@color-layout-list-background: #fff;
@color-layout-content-background: #fff;
@color-layout-header-background: #50162d; //#f4f4f4;
@color-layout-header-background: #f4f4f4;
@color-layout-footer-background: #fff;
@color-layout-mobile-header-background: @color-layout-header-background;
@color-layout-mobile-footer-background: @color-layout-header-background;
// Task menu
@color-taskmenu-background: #50162d; //#2f3a3f;
@color-taskmenu-background: #2f3a3f;
@color-taskmenu-button: #fff;
@color-taskmenu-button-selected: @color-taskmenu-button;
@color-taskmenu-button-action: #E0548D; //@color-main;
@color-taskmenu-button-special: @color-taskmenu-button;
@color-taskmenu-button-action: @color-main;
@color-taskmenu-button-selected-background: lighten(@color-taskmenu-background, 10%);
@color-taskmenu-button-action-background: transparent;
@color-taskmenu-button-special-background: @color-taskmenu-background;
@color-taskmenu-button-hover: #fff;
@color-taskmenu-button-selected-hover: #fff;
@color-taskmenu-button-action-hover: #fff; //@color-main;
@color-taskmenu-button-special-hover: lighten(@color-taskmenu-button-special, 10%);
@color-taskmenu-button-action-hover: @color-main;
@color-taskmenu-button-background-hover: lighten(@color-taskmenu-background, 10%);
@color-taskmenu-button-action-background-hover: @color-taskmenu-button-background-hover;
// @color-taskmenu-button-special-background-hover:lighten(@color-taskmenu-button-special-background, 10%);
@color-taskmenu-button-logout: @color-error;
@color-taskmenu-button-logout-hover: @color-error;
// Toolbar
@color-toolbar-button: @color-font;
@color-toolbar-button-background-hover: lighten(@color-layout-header-background, 10%); //darken(@color-layout-header-background, 3%);
@color-toolbar-button-background-hover: darken(@color-layout-header-background, 3%);
@color-searchbar-icon-active: green;
@color-searchbar-background: #fbfbfb;
// Toolbar menu
@ -131,8 +125,6 @@
// Popovers (menus)
@color-popover-header: @color-black-shade-text;
@color-popover-header-background: transparent;
@color-popover-shadow: @color-black-shade-bg;
@color-popover-separator: @color-black-shade-text;
@color-popover-separator-background: @color-black-shade-bg;
@ -173,7 +165,7 @@
@color-image-upload-background: #f4f4f4;
@color-btn-secondary: #fff;
@color-btn-secondary-background: lighten(@color-main, 10%); //lighten(@color-black, 50%);
@color-btn-secondary-background: lighten(@color-black, 50%);
@color-btn-primary: #fff;
@color-btn-primary-background: @color-main;
@color-btn-danger: #fff;
@ -224,6 +216,11 @@
@color-image-tools-hover: fadeout(@color-main, 50%);
// Scrollbars
@color-scrollbar-thumb: #c1c1c1;
@color-scrollbar-track: #f1f1f1;
// Dark mode colors
@color-dark-main: darken(@color-main, 30%);
@color-dark-background: #21292c;
@ -235,10 +232,7 @@
@color-dark-warning: shade(@color-warning, 40%);
@color-dark-error: shade(@color-error, 40%);
@color-dark-taskmenu-button-action: #E0548D;
@color-dark-taskmenu-button-action-hover: @color-dark-font;
@color-dark-list-selected: #8EB726; //"@color-main;
@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;

View File

@ -12,34 +12,41 @@
@import (reference) "variables";
html.dark-mode {
scrollbar-color: @color-dark-scrollbar-thumb @color-dark-scrollbar-track;
scrollbar-width: thin;
& when not (@scrollbar-dark-width = unset) {
scrollbar-color: @color-dark-scrollbar-thumb @color-dark-scrollbar-track;
scrollbar-width: @scrollbar-dark-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
scrollbar-width: thin;
}
&:not(.touch) {
::-webkit-scrollbar {
width: 6px;
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;
}
::-webkit-scrollbar-track {
background-color: @color-dark-border;
}
&: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-thumb {
background-color: @color-dark-main;
::-webkit-scrollbar-track {
background-color: @color-dark-scrollbar-track;
}
::-webkit-scrollbar-thumb {
background-color: @color-dark-scrollbar-thumb;
}
}
}
@ -197,10 +204,7 @@ html.dark-mode {
#taskmenu {
.action-buttons a {
color: @color-dark-taskmenu-button-action;
}
.action-buttons a:hover {
color: @color-dark-taskmenu-button-action-hover;
color: @color-main;
}
a {
@ -270,6 +274,7 @@ html.dark-mode {
// Lists
// ---------------------------------
.proplist li.with-sublist > a.dropdown,
.listing tbody td,
.listing tbody td a,
.listing li a {
@ -776,7 +781,7 @@ html.dark-mode {
}
.tox-menu {
scrollbar-width: thin;
scrollbar-width: @scrollbar-dark-width;
background-color: @color-dark-popover-background;
border-color: @color-dark-popover-border;
box-shadow: none;
@ -784,7 +789,7 @@ html.dark-mode {
.tox-dialog__body-nav,
.tox-collection__group {
scrollbar-width: thin;
scrollbar-width: @scrollbar-dark-width;
}
.tox-collection__item-caret svg {
@ -980,7 +985,7 @@ html.dark-mode {
}
.ui-menu {
scrollbar-width: thin;
scrollbar-width: @scrollbar-dark-width;
background-color: @color-dark-popover-background;
border-color: @color-dark-popover-border;
box-shadow: none;

View File

@ -1 +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}
.popover,.rcmail-inline-message,body,button,input,optgroup,select,textarea{font-family:Roboto,sans-serif}html,html .formcontent,html .frame-content,html .popover-body,html .popupmenu,html .scroller,html .table-responsive,html .table-responsive-sm,html .ui-dialog-content,html select,html textarea{scrollbar-width:thin}@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')}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}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-size:14px;padding:.5em;margin:0 0 .5em;opacity:.95;color:#2c363a;background-color:rgba(246,96,157,.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:#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,.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,.53)}.rcmail-inline-buttons{margin:0}

View File

@ -18,16 +18,16 @@
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');
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/fa-regular-400.woff2") format('woff2'),
url("../fonts/fa-regular-400.woff") format('woff');
src: url("../fonts/la-regular-400.woff2") format('woff2'),
url("../fonts/la-regular-400.woff") format('woff');
}
@font-face {
@ -35,8 +35,8 @@
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'),
url('../fonts/roboto-v19-regular.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
url('../fonts/roboto-v19-regular.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
url('../fonts/roboto-v29-regular.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
url('../fonts/roboto-v29-regular.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
}
@font-face {
@ -44,8 +44,8 @@
font-style: italic;
font-weight: 400;
src: local('Roboto Italic'), local('Roboto-Italic'),
url('../fonts/roboto-v19-italic.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
url('../fonts/roboto-v19-italic.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
url('../fonts/roboto-v29-italic.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
url('../fonts/roboto-v29-italic.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
}
@font-face {
@ -53,8 +53,8 @@
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'),
url('../fonts/roboto-v19-regular-700.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
url('../fonts/roboto-v19-regular-700.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
url('../fonts/roboto-v29-regular-700.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
url('../fonts/roboto-v29-regular-700.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
}
@font-face {
@ -62,8 +62,8 @@
font-style: italic;
font-weight: 700;
src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
url('../fonts/roboto-v19-italic-700.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
url('../fonts/roboto-v19-italic-700.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
url('../fonts/roboto-v29-italic-700.woff2') format('woff2'), // Chrome 26+, Opera 23+, Firefox 39+
url('../fonts/roboto-v29-italic-700.woff') format('woff'); // Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
}
/* Reset some Bootstrap style */
@ -95,3 +95,43 @@ a {
opacity: .5;
}
}
/* 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
scrollbar-width: @scrollbar-width;
}
&:not(.touch) {
::-webkit-scrollbar when (@scrollbar-width = auto) {
// Note: If we do not set the width a default scrollbar is used in Chrome.
// And the custom colors set below do not work
width: 12px;
}
::-webkit-scrollbar when (@scrollbar-width = thin) {
width: 6px;
}
::-webkit-scrollbar-track {
background-color: @color-scrollbar-track;
}
::-webkit-scrollbar-thumb {
background-color: @color-scrollbar-thumb;
}
}
}

View File

@ -59,4 +59,4 @@
.style-input-focus {
border-color: @color-input-border-focus;
box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow;
}
}

6500
styles/styles.min.css vendored

File diff suppressed because one or more lines are too long

View File

@ -53,6 +53,10 @@
@mail-header-photo-height: 4rem;
// 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
@icon-file-drop: data-uri("image/svg+xml;charset=utf-8", "../images/download.svg");

View File

@ -78,10 +78,20 @@ div.tox {
overflow: unset;
}
.tox-dialog__content-js {
overflow: auto;
}
.tox-dialog-wrap__backdrop {
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;
@ -451,6 +461,11 @@ div.tox {
width: 34px;
line-height: 28px;
}
&[disabled] {
opacity: .7;
cursor: not-allowed;
}
}
}

View File

@ -697,6 +697,28 @@ html.ms .propform {
width: auto;
display: inline;
}
&.with-sublist {
flex-wrap: wrap;
position: relative;
& > :first-child {
width: 100%;
margin-right: 2em;
}
& > .proplist {
margin-left: 2.5rem;
}
& > a.dropdown {
position: absolute;
right: 0;
top: 0;
height: 2em;
color: @color-font;
}
}
}
}

View File

@ -33,6 +33,7 @@
border-radius: .3rem;
z-index: 240;
position: absolute;
scrollbar-width: @scrollbar-width;
.ui-state-active {
border: 0 !important;

View File

@ -563,6 +563,9 @@ a.toolbar-button {
&.unflag:before {
.font-icon-regular(@fa-var-flag);
}
&.undo:before {
content: @fa-var-redo;
}
&.folders:before {
content: @fa-var-folder;
}

View File

@ -46,6 +46,12 @@
</div>
</div>
<roundcube:endif />
<div class="form-group row form-check">
<label for="compose-keep-formatting" class="col-form-label col-6"><roundcube:label name="keepformatting" /></label>
<div class="col-6 form-check">
<roundcube:object name="keepFormattingCheckBox" id="compose-keep-formatting" noform="true" tabindex="2" class="form-check-input" />
</div>
</div>
<div class="form-group row">
<label for="compose-priority" class="col-form-label col-6"><roundcube:label name="priority" /></label>
<div class="col-6">
@ -242,7 +248,6 @@
<li role="separator" class="separator"><label><roundcube:label name="insertresponse" /></label></li>
<roundcube:object name="responseslist" id="responseslist" tagname="ul" class="rounded-0" itemclass="active" list-placeholder="noresponsesavailable" />
<li role="separator" class="separator"><label><roundcube:label name="manageresponses" /></label></li>
<roundcube:button 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')" />
</ul>
</div>

View File

@ -6,7 +6,7 @@
<div class="contact-header">
<div id="contactphoto" class="contact-photo">
<roundcube:object name="contactphoto" id="contactpic" placeholder="/images/contactpic.svg"
placeholderGroup="/images/contactgroup.svg" />
placeholderGroup="/images/contactgroup.svg" bg-color="transparent" />
</div>
<roundcube:object name="contacthead" id="contacthead" class="contact-head readonly" with-source="true" />
</div>

View File

@ -28,7 +28,7 @@
<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" />
<roundcube:if condition="env:action != 'print' && !config:devel_mode && config:dark_mode_support" />
<script>
try {
if (document.cookie.indexOf('colorMode=dark') > -1

View File

@ -83,6 +83,9 @@
<roundcube:button type="link-menuitem" command="mark" prop="unread" label="markunread" classAct="unread active" class="unread disabled" />
<roundcube:button type="link-menuitem" command="mark" prop="flagged" label="markflagged" classAct="flag active" class="flag disabled" />
<roundcube:button type="link-menuitem" command="mark" prop="unflagged" label="markunflagged" classAct="unflag active" class="unflag disabled" />
<roundcube:if condition="config:flag_for_deletion && !config:skip_deleted" />
<roundcube:button type="link-menuitem" command="mark" prop="undelete" label="markundeleted" classAct="undo active" class="undo disabled" />
<roundcube:endif />
<roundcube:container name="markmenu" id="markmessage-menu" />
</ul>
</div>

View File

@ -51,10 +51,24 @@
<div class="formcontent">
<ul class="proplist">
<li><label><input type="checkbox" name="s_mods[]" value="subject" /><roundcube:label name="subject" /></label></li>
<li><label><input type="checkbox" name="s_mods[]" value="from" /><roundcube:label name="from" /></label></li>
<li><label><input type="checkbox" name="s_mods[]" value="to" /><roundcube:label name="to" /></label></li>
<li><label><input type="checkbox" name="s_mods[]" value="cc" /><roundcube:label name="cc" /></label></li>
<li><label><input type="checkbox" name="s_mods[]" value="bcc" /><roundcube:label name="bcc" /></label></li>
<li class="with-sublist">
<label><input type="checkbox" name="s_mods[]" value="sender" /><roundcube:label name="sender" /></label>
<a class="button icon dropdown" role="button" href="#" title="<roundcube:label name="details" />"></a>
<ul class="proplist d-none">
<li><label><input type="checkbox" name="s_mods[]" value="from" /><roundcube:label name="from" /></label></li>
<li><label><input type="checkbox" name="s_mods[]" value="replyto" /><roundcube:label name="replyto" /></label></li>
<li><label><input type="checkbox" name="s_mods[]" value="followupto" /><roundcube:label name="followupto" /></label></li>
</ul>
</li>
<li class="with-sublist">
<label><input type="checkbox" name="s_mods[]" value="recipient" /><roundcube:label name="recipient" /></label>
<a class="button icon dropdown" role="button" href="#" title="<roundcube:label name="details" />"></a>
<ul class="proplist d-none">
<li><label><input type="checkbox" name="s_mods[]" value="to" /><roundcube:label name="to" /></label></li>
<li><label><input type="checkbox" name="s_mods[]" value="cc" /><roundcube:label name="cc" /></label></li>
<li><label><input type="checkbox" name="s_mods[]" value="bcc" /><roundcube:label name="bcc" /></label></li>
</ul>
</li>
<li><label><input type="checkbox" name="s_mods[]" value="body" /><roundcube:label name="body" /></label></li>
<li><label><input type="checkbox" name="s_mods[]" value="text" /><roundcube:label name="msgtext" /></label></li>
</ul>

View File

@ -25,7 +25,7 @@
<roundcube:endif />
</h2>
<div class="header">
<roundcube:object name="contactphoto" class="contactphoto" placeholder="/images/contactpic.svg" />
<roundcube:object name="contactphoto" class="contactphoto" placeholder="/images/contactpic.svg" bg-color="transparent" />
<div class="header-content">
<roundcube:object name="messageSummary" class="header-summary" addicon="virtual" />
<roundcube:object name="messageHeaders" class="header-headers" addicon="virtual" exclude="subject" max="10" />

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

98
ui.js
View File

@ -809,7 +809,7 @@ function rcube_elastic_ui()
$('#taskmenu a.theme').on('click', function() {
color_mode = $(this).is('.dark') ? 'dark' : 'light';
switch_color_mode();
rcmail.set_cookie('colorMode', color_mode);
rcmail.set_cookie('colorMode', color_mode, false);
});
// Note: this does not work in IE and Safari
@ -1730,12 +1730,12 @@ function rcube_elastic_ui()
$('#logo').data('src-default', $('#logo').attr('src'));
}
if (mode == 'phone' && logos['small']) {
$('#logo').attr('src', logos['small']);
}
else if (mode == 'phone' && color_mode == 'dark' && logos['small-dark']) {
if (mode == 'phone' && color_mode == 'dark' && logos['small-dark']) {
$('#logo').attr('src', logos['small-dark']);
}
else if (mode == 'phone' && logos['small']) {
$('#logo').attr('src', logos['small']);
}
else if (color_mode == 'dark' && logos['dark']) {
$('#logo').attr('src', logos['dark']);
}
@ -2827,6 +2827,11 @@ function rcube_elastic_ui()
rcmail.env.search_interval = interval_select.val();
});
}
$(obj).find('.proplist > li > a.dropdown').on('click', function() {
var list = $(this).next()
list[list.is('.d-none') ? 'removeClass' : 'addClass']('d-none');
});
}
scope_select.val(scope);
@ -2850,11 +2855,18 @@ function rcube_elastic_ui()
}
}
}
set_searchmod_masters(obj);
};
/**
* Handler for a search option state update
*/
function set_searchmod(menu, elem)
{
var all, m, task = rcmail.env.task,
var all, m, masters = {},
list = $('input[name="s_mods[]"]', menu),
task = rcmail.env.task,
mods = rcmail.env.search_mods || {},
mbox = rcmail.env.mailbox;
@ -2864,6 +2876,10 @@ function rcube_elastic_ui()
}
m = mods[mbox];
all = 'text';
masters = {
sender: ['from', 'replyto', 'followupto'],
recipient: ['to', 'cc', 'bcc']
};
}
else {
// addressbook
@ -2880,7 +2896,7 @@ function rcube_elastic_ui()
// mark all fields
if (elem.value == all) {
$('input[name="s_mods[]"]', menu).not(elem).map(function() {
list.not(elem).each(function() {
this.checked = true;
if (elem.checked) {
@ -2889,14 +2905,44 @@ function rcube_elastic_ui()
}
else {
this.disabled = false;
m[this.value] = 1;
if (!(this.value in masters)) {
m[this.value] = 1;
}
}
});
}
// Handle clicks on Sender/Recipient elements
else if (elem.value in masters) {
delete m[elem.value];
list.filter(function() { return $.inArray(this.value, masters[elem.value]) != -1; }).each(function() {
if (elem.checked) {
this.checked = true;
m[this.value] = 1;
}
else {
this.checked = false;
delete m[this.value];
}
});
}
else if (masters.sender) {
set_searchmod_masters(menu);
}
rcmail.set_searchmods(m);
};
/*
* Set state of the Sender/Recipient checkbox depending on whether any of the sub-items are checked
*/
function set_searchmod_masters(obj)
{
$(obj).find('.proplist > li.with-sublist').each(function() {
$(this).find(':not(.proplist) input')[0].checked = $(this).children('.proplist').find('input:checked').length > 0;
});
}
/**
* Spellcheck languages list
*/
@ -3784,11 +3830,11 @@ function rcube_elastic_ui()
};
/**
* HTML editor textarea wrapper with nice looking tabs-like switch
* HTML editor textarea wrapper with plain-to-html switch button
*/
function html_editor_init(obj)
{
// Here we support two structures
// Here we support two kinds of structure:
// 1. <div><textarea></textarea><select class="hidden"></div>
// 2. <tr><td><td><td><textarea></textarea></td></tr>
// <tr><td><td><td><input type="checkbox"></td></tr>
@ -3796,10 +3842,11 @@ function rcube_elastic_ui()
var sw, is_table = false,
editor = $(obj),
parent = editor.parent(),
readonly = editor.is('[readonly],[disabled]'),
plain_btn = $('<a class="mce-i-html" href="#" tabindex="-1"></a>')
.attr('title', rcmail.gettext('htmltoggle'))
.attr({title: rcmail.gettext('htmltoggle'), disabled: readonly})
.on('click', function(e) {
if (rcmail.command('toggle-editor', {id: editor.attr('id'), html: true}, '', e.originalEvent)) {
if (!readonly && rcmail.command('toggle-editor', {id: editor.attr('id'), html: true}, '', e.originalEvent)) {
parent.addClass('ishtml');
}
})
@ -4139,6 +4186,15 @@ function rcube_elastic_ui()
*/
function window_open(url, small, toolbar, force_window)
{
var colorFunc = function (body) {
$(body).css({
color: $(document.body).css('color'),
backgroundColor: $(document.body).css('background-color')
})
};
var setColor = color_mode == 'dark' && /_task=mail/.test(url) && /_action=viewsource/.test(url);
// Use 4th argument to bypass the dialog-mode e.g. for external windows
if (!is_mobile() || force_window === true) {
// On attachment preview page we do not display the properties sidebar
@ -4147,7 +4203,14 @@ function rcube_elastic_ui()
small = true;
}
return env.open_window.call(rcmail, url, small, toolbar);
var win = env.open_window.call(rcmail, url, small, toolbar);
// Switch the plain/text window to dark-mode
if (setColor) {
$(win).on('load', function() { colorFunc(win.document.body); });
}
return win;
}
// _extwin=1, _framed=1 are required to display attachment preview
@ -4167,6 +4230,11 @@ function rcube_elastic_ui()
props.dialogClass = 'no-titlebar';
}
// Switch the plain/text iframe to dark-mode
if (setColor) {
frame.on('load', function() { colorFunc(frame[0].contentWindow.document.body); });
}
rcmail.simple_dialog(frame, title, null, props);
return true;
@ -4244,9 +4312,7 @@ function rcube_elastic_ui()
// write prefs to local storage (if supported)
if (!rcmail.local_storage_set_item('prefs.elastic', prefs)) {
// store value in cookie
var exp = new Date();
exp.setYear(exp.getFullYear() + 1);
rcmail.set_cookie(key, val, exp);
rcmail.set_cookie(key, val, false);
}
};
}

13
ui.min.js vendored

File diff suppressed because one or more lines are too long

View File

@ -6,10 +6,10 @@
<style type="text/css">
html, body { height: 100%; overflow: hidden; }
body {
background: url(https://disroot.org/user/themes/disroot/images/disroot-root.png) center no-repeat;
background-size: 20%;
background-blend-mode: luminosity;
opacity: 0.8;
background: url(https://disroot.org/user/themes/disroot/images/disroot-root.png) center no-repeat;
background-size: 30%;
background-blend-mode: luminosity;
opacity: 0.8;
}
html:not(.dark-mode) body:before {
content: "";