Disroot's themes used on roundcube.
Go to file
muppeth 8f04dbe817 update to roundcube version 1.6.6 (#13)
Co-authored-by: meaz <meaz@disroot.org>
Reviewed-on: #13
Reviewed-by: meaz <meaz@no-reply@disroot.org>
Co-authored-by: muppeth <muppeth@disroot.org>
Co-committed-by: muppeth <muppeth@disroot.org>
2024-03-08 17:59:42 +00:00
fonts update to 1.6.2 (#9) 2023-07-11 18:38:02 +00:00
images Change logo to PNG (#8) 2023-06-25 05:30:07 +00:00
styles update to roundcube version 1.6.6 (#13) 2024-03-08 17:59:42 +00:00
templates Custom links like link to password reset, TOS or privacy policy for login screen (#10) 2023-09-25 20:48:03 +00:00
.gitignore update to roundcube version 1.6.6 (#13) 2024-03-08 17:59:42 +00:00
README.md update to roundcube version 1.6.6 (#13) 2024-03-08 17:59:42 +00:00
meta.json 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 2022-01-27 00:09:30 +01:00
thumbnail.png 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 2022-01-27 00:09:30 +01:00
ui.js update to roundcube version 1.6.6 (#13) 2024-03-08 17:59:42 +00:00
ui.min.js update to 1.6.2 (#9) 2023-07-11 18:38:02 +00:00
watermark.html initial color adjustments - disroot palette (#12) 2024-01-05 11:03:22 +00:00

README.md

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:

INSTALLATION

All styles are written using LESS syntax. Thus it needs to be compiled 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 --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

(--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: 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 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 nor should have 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.