Page MenuHomePhorge
Files F2527686

No OneTemporary
Actions

Size
20 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/.ci/install.sh b/.ci/install.sh
index c07ba5294..655fa082b 100755
--- a/.ci/install.sh
+++ b/.ci/install.sh
@@ -1,22 +1,25 @@
#!/bin/bash
# The script is intended for use on Travis with Trusty distribution
DIR=$(dirname $0)
# Enable xdebug for code coverage
if [ "$CODE_COVERAGE" != 1 ]; then phpenv config-rm xdebug.ini || true; fi
cd $DIR/..
cp composer.json-dist composer.json
# Add laravel/dusk for Browser tests
if [ "$BROWSER_TESTS" = 1 ]; then composer require "laravel/dusk:~5.9.1" --no-update; fi
# Remove qr-code as it requires php-gd which is not always available on Travis
# and we don't really need it for tests
composer remove endroid/qr-code --no-update
# Install PHP dependencies
composer install --prefer-dist
+
+# Install Less for Elastic CSS compilation
+npm install --force -g less
diff --git a/.gitignore b/.gitignore
index 2d4e54deb..00fce52e1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,23 +1,27 @@
# ignore files added to these directories
logs/*
temp/*
config/*
plugins/*/config.inc.php
# this is for the sample plugin (via composer)
plugins/rcsample
plugins/plugin_manager
# composer-related
composer.json
composer.phar
composer.lock
vendor
# javascript dependencies
plugins/enigma/openpgp.min.js
plugins/managesieve/codemirror/
program/js/jquery.min.js
program/js/jstz.min.js
program/js/publickey.js
program/js/tinymce/
+
+# skin customization files
+skins/elastic/styles/_styles.less
+skins/elastic/styles/_variables.less
diff --git a/.travis.yml b/.travis.yml
index e2c834a1b..3606a48ed 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,37 +1,34 @@
language: php
dist: xenial
sudo: false
matrix:
fast_finish: true
include:
- php: 5.5
dist: trusty
- php: 5.6
- php: 7.0
- php: 7.1
env: CODE_COVERAGE=1
- php: 7.2
- php: 7.3
dist: bionic # for proper node-less version
env: BROWSER_TESTS=1
addons:
chrome: stable
- apt:
- packages:
- - node-less
- php: 7.4
cache:
directories:
- $HOME/.composer
install:
- .ci/install.sh
script:
- .ci/run.sh
notifications:
email: false
diff --git a/skins/elastic/README.md b/skins/elastic/README.md
index 41e6b91bb..8c663cd6a 100644
--- a/skins/elastic/README.md
+++ b/skins/elastic/README.md
@@ -1,118 +1,119 @@
Roundcube Webmail Skin "Elastic"
================================
This skin package contains a theme for the Roundcube Webmail
software. It can be used, modified and redistributed according to
the terms described in the LICENSE section.
For information about building or modifying Roundcube skins please visit
https://github.com/roundcube/roundcubemail/wiki/Skins
LICENSE
-------
The contents of this folder 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.
This folder also contains code licensed separately:
- Bootstrap Framework 4 from https://github.com/twbs/bootstrap
- FontAwesome 5 fonts from https://fontawesome.com/
- Roboto font from https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=cyrillic,latin-ext,cyrillic-ext,latin,greek,greek-ext
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.
Run `bin/updatecss.sh --dir skins/elastic` before packaging the skin
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+.
- Skin color palette changes and other css modifications can be done
via _styles.less and _variables.less files. Where you can overwrite all
variables and add custom styles.
- Minimum supported screen width is 240px (note that even if the device screen
resolution is e.g.320x372 changing the text size in device settings will reduce
the resolution)
- Every page (which is not a frame) has following required structure:
```
<body>
<div id="layout">
<div id="layout-menu"></div>
<div id="layout-sidebar"></div>
<div id="layout-list"></div>
<div id="layout-content"></div>
</div>
</body>
```
where `#layout-sidebar` and `#layout-list` are optional. Which element of the `#layout` will be displayed
as a main view on mobile devices can be defined by adding `selected` class to it.
- The `<html>` element will receive special classes that will be updated on resize
or orientation change:
- `touch`: A touch device, screen width <= 1024px,
- `layout-large`: Screen width > 1200px,
- `layout-normal`: Screen width <= 1200px and >= 768px,
- `layout-small`: Screen width < 768px and > 480px,
- `layout-phone`: Screen width <= 480px.
Frames will have the same classes applied as their parent windows.
- Every button, that is not <button> nor <input> should have inner <span class="inner"> element
for the button label.
- Every iframe need to be wrapped by an element with `iframe-wrapper` class. It is
required to have proper scrolling on mobile devices.
- Special attributes:
- `data-hidden`: Makes a menu entry/button hidden on specified screen sizes.
Can be used for example for functionality not implemented or that has no sense
on phones or touch devices. Contains a comma-separated list following values:
`large` (width > 1200px), `big` (width > 768px), `small` (width =< 768px),
`phone` (width =< 480px), `lbs` (width > 480px).
- `data-content-button`: Makes the action button with this attribute to be copied
to the content frame header on small/phone screens.
- Special URLs:
In phone mode we display Prev/Next navigation buttons below the content preview
frame. We do this e.g. for mail preview or contact preview. Plugins should use
_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
------------
1. There are known issues with running less in Roundcube devel_mode:
- Dialogs executed on page load are displayed out of screen.
- CodeMirror editor (in managesieve raw script editing mode) is broken.
diff --git a/skins/elastic/styles/_styles.less b/skins/elastic/styles/_styles.less
deleted file mode 100644
index 3d5d1d78e..000000000
--- a/skins/elastic/styles/_styles.less
+++ /dev/null
@@ -1 +0,0 @@
-/* Here you can put your custom styles that will be appended to the output css file */
diff --git a/skins/elastic/styles/_variables.less b/skins/elastic/styles/_variables.less
deleted file mode 100644
index ef97192a8..000000000
--- a/skins/elastic/styles/_variables.less
+++ /dev/null
@@ -1 +0,0 @@
-/* Here you can re-define any of variables from variables.less, colors.less and fontawesome.less */
diff --git a/skins/elastic/styles/styles.less b/skins/elastic/styles/styles.less
index 3afe9b6b8..bd2dec707 100644
--- a/skins/elastic/styles/styles.less
+++ b/skins/elastic/styles/styles.less
@@ -1,443 +1,443 @@
/**
* Roundcube Webmail styles for the Elastic skin
*
* Copyright (c) The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
@import "global";
@import "layout";
@import "widgets/common";
@import "widgets/buttons";
@import "widgets/jqueryui";
@import "widgets/dialogs";
@import "widgets/menu";
@import "widgets/messages";
@import "widgets/lists";
@import "widgets/forms";
@import "widgets/editor";
/*** Login form ***/
.task-login {
#layout-content {
text-align: center;
width: 100%;
display: block;
}
#logo {
display: inline-block;
position: relative;
top: 16vh;
max-height: 100px;
}
}
#login-form {
margin: 0 auto;
top: 20vh;
width: 95%;
max-width: 320px;
position: relative;
// Fixes table width in IE11
table, tbody {
display: block;
}
// Fixes input width in IE11
.row {
margin-right: 0;
margin-left: 0;
}
.oauthlogin {
margin-top: 1em;
padding-top: 1em;
border-top: 1px solid #ccc;
}
}
#rcmloginsubmit {
&:before {
display: none !important;
}
}
#login-footer {
flex: 1;
color: @color-black-shade-text;
& > div {
margin-top: 1rem;
padding: 1rem;
background: @color-black-shade-bg;
border-radius: .3rem;
}
}
#login-addon {
position: absolute;
bottom: 0;
max-height: 30%;
margin: 1rem !important;
width: auto !important;
overflow: auto;
@media screen and (min-width: (@screen-width-small + 1px)) {
max-width: @screen-width-small;
margin: auto !important;
bottom: 1rem;
left: 0;
right: 0;
}
}
body.task-error-login #layout {
#layout-menu,
#layout-content > .header {
display: none;
}
}
/*** Addressbook UI ***/
#contactpic {
width: @layout-contact-icon-width;
height: @layout-contact-icon-height;
border-radius: .5rem;
overflow: hidden;
display:table-cell;
vertical-align:middle;
text-align: center;
background-color: @color-image-upload-background;
img {
max-width: @layout-contact-icon-width;
max-height: @layout-contact-icon-height;
}
}
#contacthead {
.names {
margin-bottom: .5rem;
span.namefield {
font-size: 1.5rem;
font-weight: bold;
line-height: 1.2;
}
}
&.readonly {
.source.row {
color: @color-form-hint;
font-size: 90%;
margin-bottom: .25rem;
}
}
}
/*** Mail UI ***/
#message-header {
margin-bottom: 1rem;
& > .subject {
font-size: 1.5rem;
font-weight: bold;
body.status-flagged &:before {
&:extend(.font-icon-class);
display: inline;
float: none;
content: @fa-var-flag;
font-size: 1em;
color: @color-error;
}
a.extwin {
text-decoration: none;
&:before {
&:extend(.font-icon-class);
float: none;
display: inline-block;
font-size: 75%;
line-height: 1.5;
margin: 0;
content: @fa-var-external-link-square-alt;
}
}
span.inner {
display: none;
}
}
& > .header {
display: flex;
img.contactphoto {
margin: 0 1rem 0 0;
border-radius: 50%;
width: @mail-header-photo-height;
height: @mail-header-photo-height;
object-fit: cover;
background: @color-image-upload-background;
}
}
.header-content {
min-height: @mail-header-photo-height;
flex: 1;
&.details-view {
.header-summary {
display: none;
}
.header-headers {
display: initial;
}
}
}
.header-summary {
margin-top: .25rem;
& > span {
display: inline-block;
}
}
.header-headers {
display: none;
.header-title {
white-space: nowrap;
color: @color-black-shade-text;
font-weight: bold;
padding-right: 1rem;
vertical-align: top;
}
}
.header-links {
margin-top: .25rem;
a {
font-size: 90%;
margin-right: .5rem;
text-decoration: none;
white-space: nowrap;
display: inline-block;
&:before {
&:extend(.font-icon-class);
height: 1.5rem;
line-height: 1.3;
}
&.headers-details:before {
content: @fa-var-envelope;
}
&.headers-summary:before {
.font-icon-regular(@fa-var-envelope);
}
&.headers-all:before {
content: @fa-var-info-circle;
}
&.html:before {
content: @fa-var-image;
}
&.plain:before {
content: @fa-var-align-justify;
}
&.zipdownload:before {
content: @fa-var-download;
}
}
}
}
.message-partheaders {
padding: .25rem .5rem;
margin: .5rem 0 -.5rem 0;
border-top: 1px solid @color-messagepart-border;
background-color: @color-messagepart-background;
table.headers-table {
font-size: 90%;
color: @color-mail-headers;
.header-title {
.overflow-ellipsis;
white-space: nowrap;
max-width: 8em;
font-weight: bold;
padding-right: 1rem;
vertical-align: top;
}
.subject {
font-weight: bold;
}
& + .message-part,
& + .message-htmlpart {
border-top: 0;
margin: 0;
}
}
}
#message-content {
.attachmentslist:not(:empty) {
margin-bottom: 1rem;
}
}
#messagebody {
&.mailvelope {
iframe {
min-height: 75vh;
}
}
}
.message-part,
.message-htmlpart {
padding-top: .5rem;
// Fixes absolute positioned mail message content
position: relative;
&:not(:first-child) {
border-top: 1px solid @color-messagepart-border;
margin-top: .5rem;
}
&:last-child {
margin-bottom: .5rem;
}
div.rcmBody {
// Remove margins that can be set by the mail message styles
margin: 0 !important;
}
blockquote {
.overflow-ellipsis;
color: @color-blockquote-0;
border-left: 2px solid @color-blockquote-0-border;
border-right: 2px solid @color-blockquote-0-border;
background-color: @color-blockquote-background;
margin: 2px 0;
padding: 0 .4em;
blockquote {
color: @color-blockquote-1;
border-left: 2px solid @color-blockquote-1-border;
border-right: 2px solid @color-blockquote-1-border;
blockquote {
color: @color-blockquote-2;
border-left: 2px solid @color-blockquote-2-border;
border-right: 2px solid @color-blockquote-2-border;
}
}
span.blockquote-link {
top: 0;
cursor: pointer;
right: .5rem;
min-width: 4rem;
padding: .2rem .25rem .2rem .5rem;
font-size: 90%;
text-align: center;
color: @color-black-shade-text;
background: @color-black-shade-bg;
border: 1px solid @color-black-shade-border;
border-radius: .3rem;
line-height: 1;
.font-family; // don't inherit monospace font
&:after {
&:extend(.font-icon-class);
content: @fa-var-angle-down;
display: inline-block;
float: none;
margin: 0;
font-size: 90%;
}
&.collapsed:after {
content: @fa-var-angle-up;
}
}
&.blockquote-header {
text-overflow: ellipsis !important;
padding-right: 5rem !important;
}
}
}
.message-part {
span.sig {
color: @color-mail-signature;
}
div.pre {
font-family: monospace;
font-size: 13px;
}
}
#compose-attachments {
margin: 1rem 1rem 0 1rem;
}
#composestatusbar {
opacity: .3;
right: 2.5rem;
@media screen and (min-width: (@screen-width-small + 1px)) {
display: none;
}
a.button {
display: inline-block;
&:before {
line-height: @layout-touch-header-height;
font-size: 1.25rem !important;
}
}
}
/*** Settings UI ***/
// A default icon for settings menu entries added by plugins
.settings-default-icon {
tr > td.section::before,
li > a:before {
content: @fa-var-cog;
}
}
& when (@dark-mode-enabled = true) {
@import "dark";
}
-@import "_styles";
+@import (optional) "_styles";
diff --git a/skins/elastic/styles/variables.less b/skins/elastic/styles/variables.less
index 232d251c5..3027aa924 100644
--- a/skins/elastic/styles/variables.less
+++ b/skins/elastic/styles/variables.less
@@ -1,60 +1,60 @@
/**
* Roundcube Webmail styles for the Elastic skin
*
* Copyright (c) The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
@import (reference) "fontawesome";
@import (reference) "colors";
@dark-mode-enabled: true; // on change also have to change dark_mode_support in meta.json
@screen-width-large: 1200px;
@screen-width-medium: 1024px;
@screen-width-small: 768px;
@screen-width-xs: 480px;
@screen-width-mini: 320px;
@screen-width-touch: @screen-width-medium;
@screen-width-bs-phone: 576px;
@page-font-size: 14px;
@page-min-width: 240px;
// Note: we'll set some values in pixels instead of rem to eliminate
// Firefox sub-pixel rendering bug(s)
@layout-menu-width: floor(5.6 * @page-font-size);
@layout-menu-width-sm: floor(3 * @page-font-size);
@layout-header-height: floor(4.2 * @page-font-size);
@layout-footer-height: @layout-header-height;
@layout-footer-small-height: floor(2.5 * @page-font-size);
@layout-header-font-size: 1rem;
@layout-searchbar-height: floor(2.6 * @page-font-size);
@layout-touch-header-height: @layout-header-height;
@layout-touch-header-font-size: floor(1.2 * @page-font-size);
@layout-touch-menu-record-height: floor(3.4 * @page-font-size);
@layout-touch-menu-record-font-size: floor(1.2 * @page-font-size);
@layout-touch-icon-width: 2.2em;
@layout-mobile-menu-width: (@screen-width-mini * .85);
@layout-contact-icon-width: 112px;
@layout-contact-icon-height: 135px;
@listing-line-height: floor(2.5 * @page-font-size);
@listing-touch-line-height: floor(3.4 * @page-font-size);
@listing-treetoggle-width: 1.5em;
@mail-header-photo-height: 4rem;
// Additional icons
@icon-resize-corner: data-uri("image/svg+xml;charset=utf-8", "../images/corner-handle.svg"); // size: 16x16
@icon-file-drop: data-uri("image/svg+xml;charset=utf-8", "../images/download.svg");
-@import (reference) "_variables";
+@import (reference, optional) "_variables";

File Metadata

Mime Type
text/x-diff
Expires
Sat, Jan 31, 9:41 AM (2 h, 28 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
426213
Default Alt Text
(20 KB)

Event Timeline