350 lines
8.1 KiB
Plaintext
350 lines
8.1 KiB
Plaintext
/**
|
|
* Roundcube Webmail styles for the Elastic skin
|
|
*
|
|
* Copyright (c) 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.
|
|
*/
|
|
|
|
/*** Buttons ***/
|
|
|
|
|
|
.button.disabled {
|
|
opacity: .5;
|
|
}
|
|
|
|
a.button {
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
|
|
/* font-icons */
|
|
|
|
a.button.icon,
|
|
button.btn {
|
|
&:before {
|
|
&:extend(.font-icon-class);
|
|
}
|
|
&.sidebar-menu:before,
|
|
&.toolbar-menu-button:before,
|
|
&.toolbar-list-button:before {
|
|
content: @fa-var-ellipsis-v;
|
|
width: 1em;
|
|
}
|
|
&.task-menu-button:before {
|
|
content: @fa-var-bars;
|
|
}
|
|
&.back-sidebar-button:before,
|
|
&.back-content-button:before,
|
|
&.back-list-button:before {
|
|
content: @fa-var-chevron-left;
|
|
}
|
|
&.refresh:before {
|
|
content: @fa-var-sync;
|
|
}
|
|
&.generate:before,
|
|
&.yes:before,
|
|
&.submit:before,
|
|
&.continue:before,
|
|
&.save:before {
|
|
content: @fa-var-check;
|
|
}
|
|
&.create:before {
|
|
content: @fa-var-plus-square;
|
|
}
|
|
&.edit:before {
|
|
content: @fa-var-pencil-alt;
|
|
}
|
|
&.qrcode:before {
|
|
content: @fa-var-qrcode;
|
|
}
|
|
&.search:before {
|
|
content: @fa-var-search;
|
|
}
|
|
&.filter:before {
|
|
content: @fa-var-filter;
|
|
font-size: 1.2em; // this icon is too-big in FA5
|
|
}
|
|
&.import:before {
|
|
content: @fa-var-upload;
|
|
}
|
|
&.export:before {
|
|
content: @fa-var-download;
|
|
}
|
|
&.discard:before,
|
|
&.delete:before {
|
|
.font-icon-regular(@fa-var-trash-alt);
|
|
}
|
|
&.next:before {
|
|
content: @fa-var-arrow-right;
|
|
}
|
|
&.restore:before {
|
|
content: @fa-var-undo;
|
|
}
|
|
&.send:before,
|
|
&.bounce:before {
|
|
content: @fa-var-paper-plane;
|
|
}
|
|
&.attach:before {
|
|
content: @fa-var-paperclip;
|
|
}
|
|
&.attach.vcard:before {
|
|
content: @fa-var-user;
|
|
}
|
|
&.no:before,
|
|
&.close:before,
|
|
&.cancel:before {
|
|
content: @fa-var-times;
|
|
}
|
|
&.back:before {
|
|
content: @fa-var-chevron-left;
|
|
}
|
|
&.remove:before {
|
|
content: @fa-var-times;
|
|
}
|
|
&.unlock:before {
|
|
content: @fa-var-unlock;
|
|
}
|
|
&.help:before {
|
|
.font-icon-regular(@fa-var-life-ring);
|
|
}
|
|
&.folders:before {
|
|
content: @fa-var-folder-open;
|
|
}
|
|
&.options:before {
|
|
content: @fa-var-sliders-h;
|
|
}
|
|
&.tools:before,
|
|
&.settings:before {
|
|
content: @fa-var-cog;
|
|
}
|
|
&.properties:before {
|
|
content: @fa-var-info-circle;
|
|
}
|
|
&.selection:before {
|
|
.font-icon-regular(@fa-var-check-square);
|
|
}
|
|
&.insert.recipient:before {
|
|
content: @fa-var-user-plus;
|
|
}
|
|
&.encrypt:before {
|
|
content: @fa-var-lock;
|
|
}
|
|
&.sign:before {
|
|
content: @fa-var-signature;
|
|
}
|
|
&.sso:before {
|
|
content: @fa-var-sign-in-alt;
|
|
}
|
|
&.extwin:before {
|
|
content: @fa-var-external-link-square-alt;
|
|
}
|
|
}
|
|
|
|
a.btn,
|
|
button.btn {
|
|
&:before {
|
|
display: inline !important;
|
|
float: none !important;
|
|
vertical-align: middle;
|
|
margin-right: .4rem !important; // !important needed for a.btn
|
|
}
|
|
|
|
&.oauth.google:before,
|
|
&.oauth.outlook:before {
|
|
content: " ";
|
|
display: inline-block !important;
|
|
height: 1.5rem;
|
|
width: 1.5rem;
|
|
margin-right: .8rem !important;
|
|
background-size: 100% auto;
|
|
}
|
|
|
|
&.oauth.google:before {
|
|
background: url('../images/google-icon.svg') top left no-repeat;
|
|
}
|
|
|
|
&.oauth.outlook:before {
|
|
background: url('../images/microsoft-icon.svg') top left no-repeat;
|
|
}
|
|
}
|
|
|
|
a.button.icon {
|
|
&.dropdown:before {
|
|
content: @fa-var-caret-down;
|
|
font-size: 1em;
|
|
}
|
|
& > span.inner {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
html.touch {
|
|
.btn:focus {
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
|
|
@floating-action-button-size: 4rem;
|
|
|
|
.floating-action-buttons {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
|
|
.footer:not(:empty) + & {
|
|
bottom: @layout-footer-small-height;
|
|
}
|
|
|
|
a.button {
|
|
display: block;
|
|
float: left;
|
|
width: @floating-action-button-size;
|
|
height: @floating-action-button-size;
|
|
border-radius: 50%;
|
|
background: @color-main;
|
|
color: white;
|
|
opacity: .95;
|
|
box-shadow: 0 0 5px 5px lighten(@color-main, 35%);
|
|
margin: 0 1rem 1rem 0;
|
|
|
|
&:before {
|
|
&:extend(.font-icon-class);
|
|
content: @fa-var-plus;
|
|
width: @floating-action-button-size;
|
|
height: @floating-action-button-size;
|
|
line-height: @floating-action-button-size;
|
|
}
|
|
|
|
&.compose {
|
|
&:before {
|
|
content: @fa-var-pen;
|
|
}
|
|
}
|
|
|
|
.inner {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*** Bootstrap button style overrides ***/
|
|
|
|
.btn {
|
|
&:focus {
|
|
box-shadow: 0 0 0 .2rem fade(@color-btn-primary-background, 30%);
|
|
}
|
|
}
|
|
|
|
.btn-link {
|
|
color: @color-link;
|
|
}
|
|
|
|
.btn-secondary {
|
|
color: @color-btn-secondary;
|
|
background: @color-btn-secondary-background;
|
|
border-color: @color-btn-secondary-background;
|
|
|
|
&:focus {
|
|
background: darken(@color-btn-secondary-background, 5%);
|
|
border-color: darken(@color-btn-secondary-background, 7%);
|
|
box-shadow: 0 0 0 .2rem fade(@color-btn-secondary-background, 50%);
|
|
}
|
|
|
|
&:hover {
|
|
background: darken(@color-btn-secondary-background, 5%);
|
|
border-color: darken(@color-btn-secondary-background, 7%);
|
|
}
|
|
|
|
&.disabled,
|
|
&:disabled {
|
|
background: @color-btn-secondary-background;
|
|
border-color: @color-btn-secondary-background;
|
|
}
|
|
|
|
&:not(:disabled):not(.disabled) {
|
|
&:active,
|
|
&.active {
|
|
background: darken(@color-btn-secondary-background, 10%);
|
|
border-color: darken(@color-btn-secondary-background, 12%);
|
|
|
|
&:focus {
|
|
box-shadow: 0 0 0 .2rem fade(@color-btn-secondary-background, 53%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-primary {
|
|
color: @color-btn-primary;
|
|
background: @color-btn-primary-background;
|
|
border-color: @color-btn-primary-background;
|
|
|
|
&:focus {
|
|
background: darken(@color-btn-primary-background, 5%);
|
|
border-color: darken(@color-btn-primary-background, 7%);
|
|
box-shadow: 0 0 0 .2rem fade(@color-btn-primary-background, 50%);
|
|
}
|
|
|
|
&:hover {
|
|
background: darken(@color-btn-primary-background, 5%);
|
|
border-color: darken(@color-btn-primary-background, 7%);
|
|
}
|
|
|
|
&.disabled,
|
|
&:disabled {
|
|
background: @color-btn-primary-background;
|
|
border-color: @color-btn-primary-background;
|
|
}
|
|
|
|
&:not(:disabled):not(.disabled) {
|
|
&:active,
|
|
&.active {
|
|
background: darken(@color-btn-primary-background, 10%);
|
|
border-color: darken(@color-btn-primary-background, 12%);
|
|
|
|
&:focus {
|
|
box-shadow: 0 0 0 .2rem fade(@color-btn-primary-background, 53%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-danger {
|
|
color: @color-btn-danger;
|
|
background: @color-btn-danger-background;
|
|
border-color: @color-btn-danger-background;
|
|
|
|
&:focus {
|
|
background: darken(@color-btn-danger-background, 5%);
|
|
border-color: darken(@color-btn-danger-background, 7%);
|
|
box-shadow: 0 0 0 .2rem fade(@color-btn-danger-background, 50%);
|
|
}
|
|
|
|
&:hover {
|
|
background: darken(@color-btn-danger-background, 5%);
|
|
border-color: darken(@color-btn-danger-background, 7%);
|
|
}
|
|
|
|
&.disabled,
|
|
&:disabled {
|
|
background: @color-btn-danger-background;
|
|
border-color: @color-btn-danger-background;
|
|
}
|
|
|
|
&:not(:disabled):not(.disabled) {
|
|
&:active,
|
|
&.active {
|
|
background: darken(@color-btn-danger-background, 10%);
|
|
border-color: darken(@color-btn-danger-background, 12%);
|
|
|
|
&:focus {
|
|
box-shadow: 0 0 0 .2rem fade(@color-btn-danger-background, 53%);
|
|
}
|
|
}
|
|
}
|
|
}
|