README

A frosted-glass skin for Roundcube Webmail with a dark violet default look and adjustable colours (accent, backgrounds, glass opacity and blur, presets). It is a child skin of Elastic, so it inherits all Elastic templates and features, including dark mode.

Glass is an independent community project and is not affiliated with or endorsed by the Roundcube project.

Features

Frosted-glass panels, menus, dialogs and login card (backdrop-filter)
Colour settings in Settings → Preferences → Colours (Glass): accent, three background colours, panel opacity, blur, five presets. Live preview, saved per browser (localStorage) with the Save button
Works in light and dark mode
English and German interface for the colour panel

Requirements

Roundcube Webmail 1.6.x with the Elastic skin installed
A browser with backdrop-filter, color-mix() and relative colour syntax (current Chrome/Edge, Firefox 128+, Safari 16.4+). Older browsers fall back to the default violet colours without the live colour settings.

Installation

Composer

composer require jacobtobies/glass

(roundcube/plugin-installer places the skin in skins/glass.)

Manually

Copy this folder to <roundcube>/skins/glass (the folder skins/elastic must stay).
Make the files readable by the web server user.
Optionally set it as the default in config/config.inc.php:
```
$config['skin'] = 'glass';
```
Select Glass under Settings → Preferences → User Interface → Interface skin.

Customisation

Use Settings → Preferences → Colours (Glass). Changes preview instantly and are stored in the browser when you press Save. To change the built-in defaults or the compiled Elastic palette, edit src/glass.less and rebuild, see BUILD.md.

To use your own logo, set $config['skin_logo'] in the Roundcube config as for any skin. To replace the empty-state watermark, edit watermark.html.

Upgrading Roundcube

templates/includes/layout.html is a copy of Elastic's file with one extra line that loads glass.js, and the CSS is compiled from the Elastic 1.6 sources. After a Roundcube update that changes Elastic, rebuild the skin (BUILD.md) and compare layout.html.

German / Deutsch

Glass ist ein Glas-Look für Roundcube (Kindskin von Elastic) mit einstellbaren Farben: Einstellungen → Farben (Glass), Vorschau live, mit „Speichern“ im Browser gespeichert. Installation: Ordner nach skins/glass kopieren oder composer require jacobtobies/glass, dann unter Oberflächendesign auswählen.

License

Glass is released under the Creative Commons Attribution-ShareAlike 3.0 Unported license (CC BY-SA 3.0), see LICENSE and https://creativecommons.org/licenses/by-sa/3.0/.

As a derivative of Elastic, Glass is licensed under the same terms (ShareAlike). You may copy, distribute and adapt it, provided you give credit, state your changes and keep the same license.

Credits and third-party components

Elastic skin for Roundcube Webmail, Copyright (c) The Roundcube Dev Team, main author Aleksander Machniak, licensed under CC BY-SA 3.0 (https://github.com/roundcube/roundcubemail/tree/master/skins/elastic). Glass contains CSS compiled from Elastic's LESS sources and a modified copy of templates/includes/layout.html. Changes made by Glass: custom colour palette, glass effects, runtime colour variables, colour settings panel (glass.js), neutral watermark and thumbnail.
Bootstrap 4 (MIT), loaded from the Elastic skin, not bundled here (https://github.com/twbs/bootstrap).
Font Awesome 5 Free fonts in fonts/fa-* — fonts under SIL OFL 1.1, icons under CC BY 4.0 (https://fontawesome.com/license/free).
Roboto fonts in fonts/roboto-*, Apache License 2.0 (https://fonts.google.com/specimen/Roboto).
images/google-icon.svg and images/microsoft-icon.svg are copied unmodified from Elastic and are brand icons of their respective owners, used for OAuth login buttons.

jacobtobies / glass

Package info

Security

Statistics