You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
211 lines
4.9 KiB
Plaintext
211 lines
4.9 KiB
Plaintext
/**
|
|
* Roundcube webmail styles for the Elastic skin
|
|
*
|
|
* Copyright (c) 2017, 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 autors in the README file.
|
|
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
|
|
*/
|
|
|
|
/*** Taskmenu ***/
|
|
|
|
#taskmenu {
|
|
background-color: @color-taskmenu-background;
|
|
|
|
a {
|
|
text-decoration: none;
|
|
padding: .4em 0;
|
|
display: block;
|
|
text-align: center;
|
|
color: @color-taskmenu-button;
|
|
|
|
&:before {
|
|
&:extend(.font-icon-class);
|
|
display: block;
|
|
height: 1.75rem;
|
|
width: @layout-menu-width;
|
|
}
|
|
|
|
&:hover {
|
|
color: @color-taskmenu-button-hover;
|
|
background: @color-taskmenu-button-background-hover;
|
|
}
|
|
|
|
&.selected {
|
|
color: @color-taskmenu-button-selected;
|
|
background: @color-taskmenu-button-selected-background;
|
|
}
|
|
|
|
&.mail:before {
|
|
content: @fa-var-envelope;
|
|
}
|
|
&.addressbook:before {
|
|
content: @fa-var-user;
|
|
}
|
|
&.settings:before {
|
|
content: @fa-var-cog;
|
|
}
|
|
&.help:before {
|
|
content: @fa-var-life-bouy;
|
|
}
|
|
&.logout:before {
|
|
content: @fa-var-power-off;
|
|
}
|
|
&.about:before {
|
|
content: @fa-var-question;
|
|
}
|
|
&.refresh:before {
|
|
content: @fa-var-refresh;
|
|
}
|
|
&.compose:before {
|
|
content: @fa-var-edit;
|
|
}
|
|
&.calendar:before {
|
|
content: @fa-var-calendar;
|
|
}
|
|
&.tasklist:before {
|
|
content: @fa-var-tasks;
|
|
}
|
|
&.files:before {
|
|
content: @fa-var-folder;
|
|
}
|
|
&.notes:before {
|
|
content: @fa-var-sticky-note;
|
|
}
|
|
|
|
span.inner {
|
|
font-size: 90%;
|
|
}
|
|
}
|
|
|
|
.special-buttons {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: @layout-menu-width;
|
|
|
|
@media screen and (max-width: @screen-width-xs) {
|
|
position: relative;
|
|
}
|
|
|
|
a {
|
|
color: @color-taskmenu-button-special;
|
|
background: @color-taskmenu-button-special-background;
|
|
|
|
&:hover {
|
|
color: @color-taskmenu-button-special-hover;
|
|
background: @color-taskmenu-button-special-background-hover;
|
|
|
|
&.logout {
|
|
color: @color-taskmenu-button-logout-hover !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.action-buttons {
|
|
a {
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: @screen-width-medium) {
|
|
a,
|
|
a:before {
|
|
width: @layout-menu-width/2;
|
|
}
|
|
|
|
a {
|
|
height: 3.25rem;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
span.inner {
|
|
display: none;
|
|
}
|
|
|
|
.action-buttons {
|
|
a {
|
|
color: @color-taskmenu-button-action-background;
|
|
background: @color-taskmenu-background;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: @screen-width-xs) {
|
|
a {
|
|
height: auto;
|
|
margin-top: 1rem;
|
|
background: transparent;
|
|
}
|
|
|
|
a,
|
|
a:before {
|
|
height: 2.25rem;
|
|
display: inline-block;
|
|
width: 310px / 3;
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
a:hover {
|
|
background: transparent !important;
|
|
}
|
|
|
|
span.inner {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: @screen-width-xs) and (min-width: 320px) and (min-height: 480px) {
|
|
text-align: left;
|
|
|
|
.special-buttons,
|
|
.action-buttons {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: (@screen-width-xs + 1px)) {
|
|
.menu-header {
|
|
display: none;
|
|
}
|
|
|
|
a:before {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.menu-header {
|
|
border-bottom: 1px solid @color-taskmenu-button;
|
|
height: @layout-touch-header-height;
|
|
line-height: @layout-touch-header-height;
|
|
text-align: left;
|
|
padding: 0 .5em;
|
|
font-size: 1.2rem;
|
|
|
|
a {
|
|
color: @color-taskmenu-button;
|
|
font-size: 100%;
|
|
display: inline;
|
|
|
|
&:before {
|
|
height: @layout-touch-header-height;
|
|
width: auto;
|
|
}
|
|
|
|
&:hover {
|
|
background: inherit;
|
|
}
|
|
}
|
|
}
|
|
}
|