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.
roundcubemail/skins/elastic/styles/widgets/taskmenu.less

220 lines
5.3 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 authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
/*** Taskmenu ***/
#taskmenu {
background-color: @color-taskmenu-background;
height: 100%;
a {
.overflow-ellipsis;
text-decoration: none;
padding: .45rem 0;
display: block;
text-align: center;
color: @color-taskmenu-button;
&:before {
&:extend(.font-icon-class);
display: block;
height: 1.75rem;
line-height: 1.5;
width: @layout-menu-width;
margin: 0;
}
&: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-sliders;
}
&.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%;
padding: 0 .1em;
}
}
.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;
}
}
@media screen and (max-width: @screen-width-xs) {
&.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,
a:before {
height: 2.25rem;
display: inline-block;
width: 310px / 3;
font-size: 1.25em;
}
a {
height: auto;
margin-top: 1rem;
background: transparent;
}
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%;
}
}
.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 {
line-height: @layout-touch-header-height;
height: @layout-touch-header-height;
width: auto;
margin-right: .25rem;
}
&:hover {
background: inherit;
}
}
}
@media screen and (min-width: (@screen-width-xs + 1px)) {
.menu-header {
display: none;
}
}
}