fba24494dd
Reviewers: #roundcube_kolab_plugins_developers Subscribers: #roundcube_kolab_plugins_developers Differential Revision: https://git.kolab.org/D2179
525 lines
11 KiB
Text
525 lines
11 KiB
Text
/**
|
|
* Kolab core library
|
|
*
|
|
* This file contains Elastic skin styles for kolab_files plugin.
|
|
*
|
|
* @author Aleksander Machniak <machniak@kolabsys.com>
|
|
*
|
|
* Copyright (C) 2012-2018, Kolab Systems AG <contact@kolabsys.com>
|
|
*
|
|
* This program is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU Affero General Public License as
|
|
* published by the Free Software Foundation, either version 3 of the
|
|
* License, or (at your option) any later version.
|
|
*
|
|
* This program is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU Affero General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU Affero General Public License
|
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
a.btn.fromcloud:before,
|
|
li > a.icon.saveas:before,
|
|
a.button.filesaveall:before,
|
|
a.button.saveas:before {
|
|
&:extend(.font-icon-class);
|
|
content: @fa-var-folder;
|
|
}
|
|
|
|
.menu {
|
|
a.mount.storage:before {
|
|
content: @fa-var-database;
|
|
}
|
|
|
|
a.open:before {
|
|
content: @fa-var-eye;
|
|
}
|
|
|
|
a.cancel:before {
|
|
content: @fa-var-times;
|
|
}
|
|
|
|
a.share:before {
|
|
content: @fa-var-share-alt;
|
|
}
|
|
}
|
|
|
|
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link.options.add-folder {
|
|
order: -1;
|
|
|
|
&:before {
|
|
content: @fa-var-plus;
|
|
}
|
|
}
|
|
|
|
.folderlist {
|
|
li.collection {
|
|
a.name {
|
|
padding-left: .5em;
|
|
}
|
|
|
|
&.audio a.name:before {
|
|
.font-icon-solid(@fa-var-volume-up);
|
|
}
|
|
|
|
&.video a.name:before {
|
|
.font-icon-solid(@fa-var-video);
|
|
}
|
|
|
|
&.image a.name:before {
|
|
content: @fa-var-image;
|
|
}
|
|
|
|
&.document a.name:before {
|
|
.font-icon-solid(@fa-var-book);
|
|
}
|
|
|
|
&.sessions a.name:before {
|
|
.font-icon-solid(@fa-var-users);
|
|
}
|
|
}
|
|
|
|
li.mailbox {
|
|
a.subscription {
|
|
cursor: pointer;
|
|
// reset listing's link style
|
|
padding: 0 !important;
|
|
border-left: 0;
|
|
width: auto;
|
|
|
|
&:before {
|
|
.font-icon-regular(@fa-var-bookmark); // TODO: better icon
|
|
height: auto;
|
|
color: @color-link;
|
|
margin-right: .25rem;
|
|
}
|
|
|
|
&.subscribed:before {
|
|
&:extend(.font-icon-class);
|
|
.font-icon-solid(@fa-var-bookmark); // TODO: better icon
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#filelistcontainer {
|
|
position: relative;
|
|
}
|
|
|
|
#filesuploadform {
|
|
// force upload form position, otherwise it breaks layout
|
|
position: absolute !important;
|
|
}
|
|
|
|
#filelistbox {
|
|
height: 100%;
|
|
|
|
&.droptarget {
|
|
&.active {
|
|
box-shadow: 0 0 2px 1px darken(@color-toolbar-button-background-hover, 20%) inset;
|
|
}
|
|
|
|
&.hover {
|
|
box-shadow: 0 0 2px 1px darken(@color-toolbar-button-background-hover, 20%) inset;
|
|
background-color: @color-toolbar-button-background-hover;
|
|
}
|
|
}
|
|
}
|
|
|
|
.filelist {
|
|
thead {
|
|
display: none;
|
|
}
|
|
|
|
td.options {
|
|
display: none;
|
|
}
|
|
|
|
td.name {
|
|
position: relative;
|
|
}
|
|
|
|
td.mtime {
|
|
width: 11em;
|
|
}
|
|
|
|
td.size {
|
|
text-align: right;
|
|
width: 6em;
|
|
}
|
|
|
|
tr.session > td.name {
|
|
padding-right: 2em;
|
|
|
|
&:after {
|
|
&:extend(.font-icon-class);
|
|
content: @fa-var-users;
|
|
color: @color-black-shade-border;
|
|
position: absolute;
|
|
right: .25em;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
tr.session.invited > td.name:after {
|
|
color: @color-success;
|
|
}
|
|
|
|
tr.session.owner > td.name:after {
|
|
color: @color-black;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: @screen-width-xs) {
|
|
.filelist {
|
|
td.mtime {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.filelist tbody td.filename {
|
|
& span {
|
|
background: transparent !important;
|
|
}
|
|
|
|
& span:before {
|
|
&:extend(.font-icon-class);
|
|
.font-icon-regular(@fa-var-file);
|
|
}
|
|
|
|
&.pdf span:before,
|
|
&.application_pdf span:before {
|
|
content: @fa-var-file-pdf;
|
|
}
|
|
|
|
&.application_vnd_openxmlformats_officedocument_wordprocessingml_document span:before,
|
|
&.application_vnd_openxmlformats_officedocument_wordprocessingml_template span:before,
|
|
&.application_vnd_ms_word span:before,
|
|
&.application_msword span:before {
|
|
content: @fa-var-file-word;
|
|
}
|
|
|
|
&.application_vnd_ms_excel span:before,
|
|
&.application_vnd_openxmlformats_officedocument_spreadsheetml_sheet span:before,
|
|
&.application_vnd_openxmlformats_officedocument_spreadsheetml_template span:before,
|
|
&.application_vnd_oasis_opendocument_spreadsheet span:before,
|
|
&.application_vnd_oasis_opendocument_spreadsheet_template span:before {
|
|
content: @fa-var-file-excel;
|
|
}
|
|
|
|
&.application_vnd_openxmlformats_officedocument_presentationml_presentation span:before,
|
|
&.application_vnd_openxmlformats_officedocument_presentationml_template span:before,
|
|
&.application_vnd_openxmlformats_officedocument_presentationml_slideshow span:before,
|
|
&.application_vnd_ms_powerpoint span:before {
|
|
content: @fa-var-file-powerpoint;
|
|
}
|
|
|
|
&.application_vnd_oasis_opendocument_text span:before {
|
|
content: @fa-var-file-alt; // TODO
|
|
}
|
|
|
|
&.application_vnd_oasis_opendocument_presentation span:before,
|
|
&.application_vnd_oasis_opendocument_presentation_template span:before {
|
|
content: @fa-var-file-powerpoint; // TODO
|
|
}
|
|
|
|
&.tar span:before,
|
|
&.application_zip span:before,
|
|
&.application_x_7z_compressed span:before,
|
|
&.application_x_ace span:before,
|
|
&.application_x_arc span:before,
|
|
&.application_x_arj span:before,
|
|
&.application_x_bzip_compressed_tar span:before,
|
|
&.application_x_lha span:before,
|
|
&.application_x_rar span:before,
|
|
&.application_x_tarz span:before,
|
|
&.application_x_tzo span:before,
|
|
&.application_x_zip span:before,
|
|
&.application_x_zoo span:before {
|
|
content: @fa-var-file-archive;
|
|
}
|
|
|
|
&.image span:before,
|
|
&.image_png span:before,
|
|
&.image_svg_xml span:before,
|
|
&.image_jpeg span:before,
|
|
&.image_jpeg2000 span:before,
|
|
&.image_x_eps span:before,
|
|
&.application_vnd_stardivision_draw span:before,
|
|
&.application_vnd_sun_xml_draw span:before,
|
|
&.application_vnd_sun_xml_draw_template span:before {
|
|
content: @fa-var-file-image;
|
|
}
|
|
|
|
&.application_pgp_keys span:before,
|
|
&.application_pkcs7_mime span:before {
|
|
// TODO
|
|
}
|
|
|
|
&.audio span:before {
|
|
content: @fa-var-file-audio;
|
|
}
|
|
|
|
&.video span:before {
|
|
content: @fa-var-file-video;
|
|
}
|
|
|
|
&.ascii span:before,
|
|
&.text_plain span:before {
|
|
content: @fa-var-file-alt;
|
|
}
|
|
|
|
&.vcalendar span:before {
|
|
// TODO
|
|
}
|
|
|
|
&.vcard span:before,
|
|
&.text_x_vcard span:before {
|
|
// TODO
|
|
}
|
|
|
|
&.text_html span:before {
|
|
content: @fa-var-file-code;
|
|
}
|
|
|
|
&.style_css span:before {
|
|
// TODO
|
|
}
|
|
|
|
&.text_csv span:before {
|
|
// TODO
|
|
}
|
|
|
|
&.message_rfc822 span:before {
|
|
// TODO
|
|
}
|
|
}
|
|
|
|
#folder-mount-form {
|
|
td.source {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding: .5rem;
|
|
|
|
&.selected {
|
|
background-color: @color-list-selected-background;
|
|
}
|
|
|
|
& > input {
|
|
height: 32px;
|
|
margin-right: .5rem;
|
|
}
|
|
|
|
& > div {
|
|
flex: 1;
|
|
}
|
|
|
|
img {
|
|
height: 32px;
|
|
margin-right: .5rem;
|
|
}
|
|
|
|
.name {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.description {
|
|
font-size: 90%;
|
|
}
|
|
|
|
table {
|
|
margin-top: .5rem;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.auth-options {
|
|
margin-top: .5rem;
|
|
|
|
& > label:before {
|
|
line-height: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.files-dialog {
|
|
.selection-list {
|
|
flex: 1;
|
|
min-width: 220px;
|
|
}
|
|
|
|
.selection-content {
|
|
flex: 2;
|
|
|
|
@media screen and (min-width: (@screen-width-small + 1px)) {
|
|
border: 1px solid @color-layout-border;
|
|
border-left: 0;
|
|
}
|
|
}
|
|
|
|
a.subscription {
|
|
display: none;
|
|
}
|
|
|
|
@media screen and (max-width: @screen-width-small) {
|
|
.selection-list {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.document-editor-header {
|
|
.toolbar {
|
|
text-align: left !important;
|
|
flex: 1;
|
|
|
|
a {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
a.button.icon.members:before {
|
|
content: @fa-var-users;
|
|
}
|
|
|
|
#collaborators {
|
|
order: 9;
|
|
display: flex;
|
|
margin-right: .5rem;
|
|
margin-left: 2rem;
|
|
|
|
a.button.add:before {
|
|
&:extend(.font-icon-class);
|
|
content: @fa-var-plus;
|
|
}
|
|
|
|
.inner {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#doc-title {
|
|
flex: 1;
|
|
order: 8;
|
|
|
|
input {
|
|
display: inline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.session-members {
|
|
img.photo {
|
|
width: 48px;
|
|
height: 48px;
|
|
min-width: 48px;
|
|
overflow: hidden;
|
|
background: url("@{skin-path}/images/contactpic.png") center center no-repeat #fff;
|
|
background-size: cover;
|
|
border-radius: 50%;
|
|
border: solid 3px #eee;
|
|
margin-left: .5rem;
|
|
}
|
|
|
|
ul {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style-type: none;
|
|
|
|
li {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
img.photo {
|
|
margin-left: 0;
|
|
margin-right: 1em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.editors-dialog {
|
|
table {
|
|
th {
|
|
border: 0;
|
|
}
|
|
|
|
tr:last-child td {
|
|
border-bottom: 1px solid @color-layout-border;
|
|
}
|
|
|
|
td.options {
|
|
width: 1%;
|
|
|
|
a.delete:before {
|
|
&:extend(.font-icon-class);
|
|
content: @fa-var-trash-alt;
|
|
display: inline;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
button.participant.add:before {
|
|
content: @fa-var-user-plus;
|
|
}
|
|
|
|
.iframe-wrapper.file-type-audio,
|
|
.iframe-wrapper.file-type-video {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
@media screen and (min-width: (@screen-width-small + 1px)) {
|
|
padding: 1em;
|
|
}
|
|
}
|
|
|
|
#shareform {
|
|
table {
|
|
td,th {
|
|
padding-left: .15rem;
|
|
max-width: 10vw; // needed for overflow
|
|
.overflow-ellipsis();
|
|
|
|
&:last-child {
|
|
padding-right: .15rem;
|
|
width: 1%;
|
|
max-width: unset;
|
|
}
|
|
}
|
|
|
|
td {
|
|
vertical-align: middle;
|
|
|
|
&.form {
|
|
input {
|
|
margin-bottom: .25rem;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
tr + tr > td {
|
|
border-top: 0;
|
|
padding-bottom: .25rem;
|
|
}
|
|
|
|
button {
|
|
padding: .185rem .75rem;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|