/** * 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. */ /*** Common UI elements ***/ .hidden, .voice { display: none !important; } font.bold { font-weight: bold; } #rcmdraglayer { min-width: 260px; width: 260px; background-color: @color-drag-layer-background; color: @color-drag-layer; box-shadow: 3px 3px 5px @color-drag-layer-shadow; border-radius: .3rem; z-index: 250; opacity: .92; padding: .5rem; white-space: nowrap; div { line-height: 1.6em; .overflow-ellipsis; } } .frame-content { padding: 1rem; h2 { font-weight: bold; font-size: 1.5em; } h3 { font-weight: bold; font-size: 1.25em; } } .listbox { .scroller { width: 100%; overflow-x: hidden; overflow-y: auto; } .navlist { height: 0; flex: initial !important; .listing { border-bottom: 1px solid @color-layout-border; tr:last-child td, li:last-child { border: 0; } } } } .contact-header { display: flex; margin-bottom: 1rem; .contact-photo { min-width: @layout-contact-icon-width; } .contact-head { margin-left: 1rem; legend { display: none; } } } @image-attachment-size: 250px; // this is when image thumbnails are enabled p.image-attachment { position: relative; border: 1px solid @color-border; border-radius: .3rem; float: left; margin: .5rem; min-width: 47%; min-height: @image-attachment-size; overflow: hidden; // use flexbox to center the image display: flex; justify-content: center; @media screen and (max-width: @screen-width-xs) { float: none; } .image-link { align-self: center; text-align: center; margin: 1.6rem .5rem; } span { color: @color-form-hint; padding: 0 .5rem; font-size: 90%; white-space: nowrap; position: absolute; line-height: 1.5rem; } .image-filename { .overflow-ellipsis; left: 0; top: 0; right: 0; padding-right: 4rem; background-color: @color-message-background; } .image-filesize { right: 0; top: 0; } .attachment-links { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; a { text-decoration: none; display: inline-block; padding: 0 .5rem; line-height: 1.5rem; } a:before { &:extend(.font-icon-class); display: inline-block; } a.open:before { content: @fa-var-external-link; } a.download:before { content: @fa-var-download; } } } // this is when image thumbnails are disabled fieldset.image-attachment { margin-top: .5rem; legend { color: @color-form-hint; font-size: .9rem; border-top: 1px solid lighten(@color-mail-headers, 50%); margin: 0; } img { max-width: 100%; } } #folder-selector { overflow-y: auto; li a.virtual { opacity: .2; } } #layout > .content .watermark { background: url(../images/watermark.jpg) center no-repeat; width: 100%; height: 100%; } .noselect { user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select: none; -webkit-user-select: none; } .iframe-loader { width: 100%; position: absolute; top: 0; bottom: 0; background-color: rgba(255, 255, 255, .95); display: flex; align-items: center; justify-content: center; .spinner { position: relative; display: inline-block; width: 7rem; height: 7rem; overflow: hidden; text-indent: -999em; color: @color-spinner-circle; border: 1rem solid; border-color: currentColor @color-spinner-item currentColor currentColor; border-radius: 50%; -webkit-animation: fa-spin 1s infinite linear; animation: fa-spin 1s infinite linear; } } .footer.toolbar + .iframe-loader { top: @layout-header-height; bottom: @layout-header-height; } .quota-widget { width: 5rem; max-width: 8rem; padding: .5rem; text-align: center; position: relative; .count { display: block; color: @color-quota-text; font-size: 1.1rem; line-height: 2; } .bar { display: block; height: .5rem; position: absolute; bottom: .85rem; left: .5rem; right: .5rem; background-color: @color-quota-background; border-radius: .25rem; } .value { display: block; background-color: @color-quota-value; border-radius: .25rem; height: .5rem; opacity: .75; &.warning { background-color: @color-quota-value-warning; } } } .quota-info { width: 100%; display: table !important; td,th { text-align: center; white-space: nowrap; } th { border-top: 0; } .root { line-height: 1; font-style: italic; color: @color-popover-separator; background-color: @color-popover-separator-background; } th:first-child, .name { text-align: left; } } .table-widget { display: flex; flex-direction: column; margin-bottom: .5rem; border: 1px solid @color-table-border; & > .content { overflow-x: auto; flex-grow: 1; height: 18.5em; table th { border-top: 0; } } & > .footer { height: 3.5rem; border-top: 1px solid @color-table-border; a.button { padding: 0; } } table { margin: 0; max-height: 18.5em; } // Options table is a table with first column for identifier/description // and other columns for a state flag. E.g. ACL table table.options-table { td,th { text-align: center; vertical-align: middle; &:first-child { .overflow-ellipsis; text-align: left; } } tr:last-child td { border-bottom: 1px solid @color-table-border; } tr.selected td { background-color: @color-table-selected-background; color: @color-table-selected; } td:not(:first-child) span { display: inline-block; line-height: 1.25; &:before { &:extend(.font-icon-class); } } td.enabled span:before { content: @fa-var-check; } td.partial span:before { opacity: .3; content: @fa-var-check; } } } table.compact-table { font-size: 90%; margin: 0; * { font-size: inherit; } td { padding: .25rem; border: 0; } td:first-child { padding-left: 0; } td:last-child { padding-right: 0; } .form-control { padding-left: .25rem; padding-right: .25rem; } } table.table { .checkbox-cell { width: 3rem; white-space: nowrap; overflow: hidden; text-align: center; input.icon-checkbox + label { display: inline-block; padding: 0; &:before { line-height: 1; height: 1rem; } } } th.checkbox-cell { padding: .75rem 0; max-width: 1rem; &:before { &:extend(.font-icon-class); cursor: pointer; margin: 0 1rem; line-height: 1; } &.subscription:before { content: @fa-var-feed; } &.alarm:before { content: @fa-var-bell-o; } &.read:before { content: @fa-var-eye; } &.write:before { content: @fa-var-pencil; } } .buttons-cell { width: 1%; white-space: nowrap; text-align: center; a.button:before { line-height: 1; float: none; display: inline-block; } @media screen and (min-width: @screen-width-xs) { a.button .inner { display: inline; } } } label { margin: 0; } fieldset.tab-pane & thead th { border: 0; } } html.touch { table.table { th.checkbox-cell:before { font-size: 1.5rem; } } } /* Bootstrap's .table style overwrites */ .table { thead th { border-width: 1px; white-space: nowrap; } }