diff --git a/skins/elastic/README.md b/skins/elastic/README.md index 99fa938bb..33fcf50d2 100644 --- a/skins/elastic/README.md +++ b/skins/elastic/README.md @@ -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) diff --git a/skins/elastic/images/logo.png b/skins/elastic/images/logo.png new file mode 100644 index 000000000..627c2f614 Binary files /dev/null and b/skins/elastic/images/logo.png differ diff --git a/skins/elastic/styles/colors.less b/skins/elastic/styles/colors.less index d42060492..4bac88c35 100644 --- a/skins/elastic/styles/colors.less +++ b/skins/elastic/styles/colors.less @@ -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; diff --git a/skins/elastic/styles/layout.less b/skins/elastic/styles/layout.less index 2a89b90d1..1424e8697 100644 --- a/skins/elastic/styles/layout.less +++ b/skins/elastic/styles/layout.less @@ -144,6 +144,7 @@ body > #layout { & > .footer { border-top: 1px solid @color-layout-border; + background-color: @color-layout-footer-background; &:empty { display: none; diff --git a/skins/elastic/styles/styles.less b/skins/elastic/styles/styles.less index 89f9ece18..778401c0d 100644 --- a/skins/elastic/styles/styles.less +++ b/skins/elastic/styles/styles.less @@ -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"; diff --git a/skins/elastic/styles/variables.less b/skins/elastic/styles/variables.less index 2cd9d2698..800c13e4e 100644 --- a/skins/elastic/styles/variables.less +++ b/skins/elastic/styles/variables.less @@ -11,6 +11,7 @@ @import (reference) "fontawesome"; @import (reference) "colors"; +@import (reference) "_variables"; @screen-width-large: 1200px; @screen-width-medium: 1024px; diff --git a/skins/elastic/styles/widgets/buttons.less b/skins/elastic/styles/widgets/buttons.less index f24eb7c1b..0406b0e22 100644 --- a/skins/elastic/styles/widgets/buttons.less +++ b/skins/elastic/styles/widgets/buttons.less @@ -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 { diff --git a/skins/elastic/styles/widgets/lists.less b/skins/elastic/styles/widgets/lists.less index 21107214c..36e14680a 100644 --- a/skins/elastic/styles/widgets/lists.less +++ b/skins/elastic/styles/widgets/lists.less @@ -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); diff --git a/skins/elastic/styles/widgets/taskmenu.less b/skins/elastic/styles/widgets/taskmenu.less index 525276b15..1abfade0f 100644 --- a/skins/elastic/styles/widgets/taskmenu.less +++ b/skins/elastic/styles/widgets/taskmenu.less @@ -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; + } + } } } } diff --git a/skins/elastic/styles/widgets/toolbar.less b/skins/elastic/styles/widgets/toolbar.less index 1f49433c4..e070f60b6 100644 --- a/skins/elastic/styles/widgets/toolbar.less +++ b/skins/elastic/styles/widgets/toolbar.less @@ -318,7 +318,7 @@ .header { a.button { - color: @color-font; + color: @color-toolbar-button; } .buttons { diff --git a/skins/elastic/templates/includes/menu.html b/skins/elastic/templates/includes/menu.html index 87bd4de7b..2579488a0 100644 --- a/skins/elastic/templates/includes/menu.html +++ b/skins/elastic/templates/includes/menu.html @@ -1,21 +1,32 @@

- +