banananetwork
/
roundcubemail
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Elastic: Added logo image support, taskmenu improvements

Browse Source 
TODO: Roundcube logo re-design
pull/6274/head
Aleksander Machniak 7 years ago
parent 8eebbbfba4
commit e857ba9b42
11 changed files with 112 additions and 45 deletions
Show Stats Download Patch File Download Diff File

13
skins/elastic/README.md
Unescape Escape View File

@ -11,6 +11,7 @@ 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
@ -23,8 +24,9 @@ This folder also contains code licensed separately:
- Roboto font from https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=cyrillic,latin-ext,cyrillic-ext,latin,greek,greek-ext
INSTALLATION:
INSTALLATION
------------
All styles are written using LESS syntax. Thus it needs to be compiled
using the `lessc` command line tool. This comes with the `nodejs-less`
RPM package which depends on nodejs.
@ -42,11 +44,16 @@ Run `bin/updatecss.sh --dir skins/elastic` before packaging the skin
or after installing it on the destination system.
RULES:
------
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)

BIN
skins/elastic/images/logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

14
skins/elastic/styles/colors.less
Unescape Escape View File

@ -12,7 +12,7 @@
@color-main: #37beff;
@color-main-dark: darken(@color-main, 35%);
@color-black: #161b1d;
@color-font: @color-black;
@color-font: lighten(@color-black, 10%);
@color-link: #00acff;
@color-link-hover: darken(@color-link, 10%);
@color-border: #ddd;
@ -32,25 +32,27 @@
@color-layout-list-background: #fff;
@color-layout-content-background: #fff;
@color-layout-header-background: #fff;
@color-layout-footer-background: #fff;
// Task menu
@color-taskmenu-background: #414e54;
@color-taskmenu-button: #fff;
@color-taskmenu-button-selected: @color-taskmenu-button;
@color-taskmenu-button-action: @color-taskmenu-button;
@color-taskmenu-button-action: @color-main;
@color-taskmenu-button-special: @color-taskmenu-button;
@color-taskmenu-button-selected-background: lighten(@color-taskmenu-background, 10%);
@color-taskmenu-button-action-background: @color-main;
@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-taskmenu-button-action-hover: @color-main;
@color-taskmenu-button-special-hover: lighten(@color-taskmenu-button-special, 10%);
@color-taskmenu-button-background-hover: lighten(@color-taskmenu-background, 10%);
@color-taskmenu-button-action-background-hover: lighten(@color-taskmenu-button-action-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-hover: @color-error;
@ -70,7 +72,7 @@
// Listings
@color-list: @color-font;
@color-list-selected: inherit;
@color-list-selected-background: tint(@color-main, 94%);
@color-list-selected-background: tint(@color-main, 90%);
@color-list-flagged: @color-error;
@color-list-deleted: lighten(@color-black, 50%);
@color-list-secondary: @color-black-shade-text;

1
skins/elastic/styles/layout.less
Unescape Escape View File

@ -144,6 +144,7 @@ body > #layout {
& > .footer {
border-top: 1px solid @color-layout-border;
background-color: @color-layout-footer-background;
&:empty {
display: none;

6
skins/elastic/styles/styles.less
Unescape Escape View File

@ -117,9 +117,6 @@ a {
}
@import "layout";
/*** Widgets ***/
@import "widgets/common";
@import "widgets/buttons";
@import "widgets/jqueryui";
@ -133,7 +130,6 @@ a {
@import "widgets/mail";
/*** Login form ***/
.task-login #layout > .content {
@ -217,3 +213,5 @@ a {
}
}
}
@import "_styles";

1
skins/elastic/styles/variables.less
Unescape Escape View File

@ -11,6 +11,7 @@
@import (reference) "fontawesome";
@import (reference) "colors";
@import (reference) "_variables";
@screen-width-large: 1200px;
@screen-width-medium: 1024px;

4
skins/elastic/styles/widgets/buttons.less
Unescape Escape View File

@ -173,10 +173,10 @@ html.touch {
width: @floating-action-button-size;
height: @floating-action-button-size;
border-radius: 50%;
background: @color-taskmenu-background;
background: @color-main;
color: white;
opacity: .95;
box-shadow: 0 0 5px 5px @color-popover-shadow;
box-shadow: 0 0 5px 5px lighten(@color-main, 35%);
margin: 0 1rem 1rem 0;
&:before {

2
skins/elastic/styles/widgets/lists.less
Unescape Escape View File

@ -319,7 +319,7 @@ html.ie11 .listing.iconized li a:before {
content: @fa-var-paper-plane;
}
&.addressbook > td.section:before {
content: @fa-var-user;
content: @fa-var-users;
}
&.folders > td.section:before {
.font-icon-regular(@fa-var-folder);

87
skins/elastic/styles/widgets/taskmenu.less
Unescape Escape View File

@ -27,7 +27,7 @@
content: @fa-var-envelope;
}
&.addressbook:before {
content: @fa-var-user;
content: @fa-var-users;
}
&.settings:before {
content: @fa-var-sliders-h;
@ -61,10 +61,6 @@
}
}
a.logout {
color: @color-taskmenu-button-logout-hover !important;
}
@media screen and (max-width: @screen-width-xs) {
z-index: 30001; // because autocompletion popup uses z-index:30000
overflow-x: hidden;
@ -92,6 +88,7 @@
padding: .45rem 0;
width: @layout-menu-width/2;
font-size: 1.2rem;
margin-bottom: 1px;
&:before {
display: block;
@ -101,15 +98,15 @@
margin: 0;
}
&:hover {
color: @color-taskmenu-button;
background: @color-taskmenu-button-background-hover;
}
&.selected {
color: @color-taskmenu-button-selected;
background: @color-taskmenu-button-selected-background;
}
&:hover {
color: @color-taskmenu-button-hover;
background: @color-taskmenu-button-background-hover;
}
}
.special-buttons {
@ -121,19 +118,27 @@
.action-buttons {
a {
color: @color-taskmenu-button-action-background;
background: @color-taskmenu-background;
color: @color-taskmenu-button-action;
background: @color-taskmenu-button-action-background;
&:hover {
color: @color-taskmenu-button-action-hover;
background: @color-taskmenu-button-action-background-hover;
}
&.selected {
background: @color-taskmenu-button-selected-background;
}
}
}
span.inner {
display: none;
}
a.logout {
color: @color-taskmenu-button-logout-hover !important;
}
}
@media screen and (min-width: (@screen-width-medium + 1px)) {
@ -149,13 +154,6 @@
}
}
.action-buttons {
a {
color: @color-taskmenu-button-action;
background: @color-taskmenu-button-action-background;
}
}
span.inner {
display: inline;
font-size: 85%;
@ -166,8 +164,57 @@
.menu {
.popover-header {
height: @layout-header-height;
display: flex !important;
align-items: center;
justify-content: center;
border: 0;
border-radius: 0;
img {
max-height: @layout-header-height;
}
@media screen and (min-width: (@screen-width-xs + 1px)) {
display: none !important;
padding: 0 !important;
background-color: @color-taskmenu-background !important;
a {
display: none !important;
}
img {
max-width: @layout-menu-width/2;
}
}
@media screen and (min-width: (@screen-width-medium + 1px)) {
img {
max-width: @layout-menu-width;
}
}
html.layout-phone & {
padding: 0 .5rem;
img {
max-height: @layout-touch-header-height;
max-width: @layout-menu-width;
}
a {
width: auto;
flex: 1;
&:before {
height: @layout-touch-header-height;
float: right;
}
.inner {
display: none;
}
}
}
}
}

2
skins/elastic/styles/widgets/toolbar.less
Unescape Escape View File

@ -318,7 +318,7 @@
.header {
a.button {
color: @color-font;
color: @color-toolbar-button;
}
.buttons {

27
skins/elastic/templates/includes/menu.html
Unescape Escape View File

@ -1,21 +1,32 @@
<div class="menu">
<h2 id="aria-label-tasknav" class="voice"><roundcube:label name="arialabeltasknav" /></h2>
<div class="popover-header">
<a class="button icon cancel"><roundcube:label name="close" /></a>
<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" role="navigation" aria-labelledby="aria-label-tasknav">
<span class="action-buttons">
<roundcube:button command="compose" type="link" class="button compose"
label="compose" title="writenewmessage" innerclass="inner"
data-fab="true" data-fab-task="mail" data-fab-action="none" />
<roundcube:if condition="env:action == 'compose' and env:task == 'mail'" />
<roundcube:button command="compose" type="link" class="button compose selected"
label="compose" title="writenewmessage" innerclass="inner" />
<roundcube:else />
<roundcube:button command="compose" type="link" class="button compose"
label="compose" title="writenewmessage" innerclass="inner"
data-fab="true" data-fab-task="mail" data-fab-action="none" />
<roundcube:endif />
</span>
<roundcube:button command="mail" label="mail" type="link" innerClass="inner"
class="button mail" classAct="button mail" classSel="button mail selected" />
<roundcube:if condition="env:action == 'compose' and env:task == 'mail'" />
<roundcube:button command="mail" label="mail" type="link" innerClass="inner"
class="button mail" />
<roundcube:else />
<roundcube:button command="mail" label="mail" type="link" innerClass="inner"
class="button mail" classSel="button mail selected" />
<roundcube:endif />
<roundcube:button command="addressbook" label="contacts" type="link" innerClass="inner"
class="button addressbook" classAct="button addressbook" classSel="button addressbook selected" />
class="button addressbook" classSel="button addressbook selected" />
<roundcube:container name="taskbar" id="taskmenu" />
<roundcube:button command="settings" label="settings" type="link" innerClass="inner"
class="button settings" classAct="button settings" classSel="button settings selected" />
class="button settings" classSel="button settings selected" />
<span class="special-buttons">
<roundcube:button name="about" label="about" type="link"
class="button about" innerClass="inner" onclick="UI.about_dialog(this)" />

Write Preview
Loading…
Cancel
Save