mirror of https://github.com/nextcloud/server
1867 lines
44 KiB
CSS
1867 lines
44 KiB
CSS
@charset "UTF-8";
|
|
/**
|
|
* @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
|
|
*
|
|
* @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
|
|
*
|
|
* @license GNU AGPL version 3 or any later version
|
|
*
|
|
* 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/>.
|
|
*
|
|
*/
|
|
/**
|
|
* Copyright (c) 2011, Jan-Christoph Borchardt, http://jancborchardt.net
|
|
* @copyright Copyright (c) 2019, Fabian Dreßler <nudelsalat@clouz.de>
|
|
*
|
|
* This file is licensed under the Affero General Public License version 3 or later.
|
|
* See the COPYING-README file.
|
|
*/
|
|
/**
|
|
* @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
|
|
*
|
|
* @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
|
|
*
|
|
* @license GNU AGPL version 3 or any later version
|
|
*
|
|
* 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/>.
|
|
*
|
|
*/
|
|
/**
|
|
* @see core/src/icons.js
|
|
*/
|
|
/**
|
|
* SVG COLOR API
|
|
*
|
|
* @param string $icon the icon filename
|
|
* @param string $dir the icon folder within /core/img if $core or app name
|
|
* @param string $color the desired color in hexadecimal
|
|
* @param int $version the version of the file
|
|
* @param bool [$core] search icon in core
|
|
*
|
|
* @returns A background image with the url to the set to the requested icon.
|
|
*/
|
|
/* FILE MENU */
|
|
.actions {
|
|
padding: 5px;
|
|
height: 100%;
|
|
display: inline-block;
|
|
float: left;
|
|
}
|
|
|
|
.actions input, .actions button, .actions .button {
|
|
margin: 0;
|
|
float: left;
|
|
}
|
|
|
|
.actions .button a {
|
|
color: #555;
|
|
}
|
|
|
|
.actions .button a:hover,
|
|
.actions .button a:focus {
|
|
background-color: var(--color-background-hover);
|
|
}
|
|
|
|
.actions .button a:active {
|
|
background-color: var(--color-primary-light);
|
|
}
|
|
|
|
.actions.creatable {
|
|
position: relative;
|
|
display: flex;
|
|
flex: 1 1;
|
|
}
|
|
.actions.creatable .button:not(:last-child) {
|
|
margin-right: 3px;
|
|
}
|
|
|
|
.actions.hidden {
|
|
display: none;
|
|
}
|
|
|
|
#trash {
|
|
margin-right: 8px;
|
|
float: right;
|
|
z-index: 1010;
|
|
padding: 10px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.newFileMenu .error,
|
|
.newFileMenu .error + .icon-confirm,
|
|
.files-fileList .error {
|
|
color: var(--color-error);
|
|
border-color: var(--color-error);
|
|
}
|
|
|
|
/* FILE TABLE */
|
|
.files-filestable {
|
|
position: relative;
|
|
width: 100%;
|
|
min-width: 250px;
|
|
display: block;
|
|
flex-direction: column;
|
|
/**
|
|
* This is a dirty hack as the sticky header requires us to use a different display type on the table element
|
|
*/
|
|
}
|
|
.emptycontent:not(.hidden) ~ .files-filestable {
|
|
display: none;
|
|
}
|
|
.files-filestable thead {
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top: 44px;
|
|
z-index: 60;
|
|
display: block;
|
|
background-color: var(--color-main-background-translucent);
|
|
}
|
|
.files-filestable tbody {
|
|
display: table;
|
|
width: 100%;
|
|
}
|
|
.files-filestable tbody tr[data-permissions="0"],
|
|
.files-filestable tbody tr[data-permissions="16"] {
|
|
background-color: var(--color-background-dark);
|
|
}
|
|
.files-filestable tbody tr[data-permissions="0"] td.filename .nametext .innernametext,
|
|
.files-filestable tbody tr[data-permissions="16"] td.filename .nametext .innernametext {
|
|
color: var(--color-text-maxcontrast);
|
|
}
|
|
|
|
.files-filestable.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* fit app list view heights */
|
|
.app-files #app-content > .viewcontainer {
|
|
min-height: 0%;
|
|
width: 100%;
|
|
}
|
|
|
|
.app-files #app-content {
|
|
width: calc(100% - 300px);
|
|
}
|
|
|
|
.file-drag, .file-drag .files-filestable tbody tr, .file-drag .files-filestable tbody tr:hover {
|
|
background-color: var(--color-primary-light) !important;
|
|
}
|
|
|
|
.app-files #app-content.dir-drop {
|
|
background-color: var(--color-main-background) !important;
|
|
}
|
|
|
|
.file-drag .files-filestable tbody tr, .file-drag .files-filestable tbody tr:hover {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.app-files #app-content.dir-drop .files-filestable tbody tr.dropping-to-dir {
|
|
background-color: var(--color-primary-light) !important;
|
|
}
|
|
|
|
/* icons for sidebar */
|
|
.nav-icon-files {
|
|
/* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
|
|
background-image: var(--icon-folder-dark);
|
|
}
|
|
|
|
.nav-icon-recent {
|
|
/* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
|
|
background-image: var(--icon-recent-dark);
|
|
}
|
|
|
|
.nav-icon-favorites {
|
|
/* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
|
|
background-image: var(--icon-starred-dark);
|
|
}
|
|
|
|
.nav-icon-sharingin,
|
|
.nav-icon-sharingout,
|
|
.nav-icon-pendingshares,
|
|
.nav-icon-shareoverview {
|
|
/* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
|
|
background-image: var(--icon-share-dark);
|
|
}
|
|
|
|
.nav-icon-sharinglinks {
|
|
/* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
|
|
background-image: var(--icon-public-dark);
|
|
}
|
|
|
|
.nav-icon-extstoragemounts {
|
|
/* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
|
|
background-image: var(--icon-external-dark);
|
|
}
|
|
|
|
.nav-icon-trashbin {
|
|
/* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
|
|
background-image: var(--icon-delete-dark);
|
|
}
|
|
|
|
.nav-icon-trashbin-starred {
|
|
/* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
|
|
background-image: var(--icon-delete-#ff0000);
|
|
}
|
|
|
|
.nav-icon-deletedshares {
|
|
/* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
|
|
background-image: var(--icon-unshare-dark);
|
|
}
|
|
|
|
.nav-icon-favorites-starred {
|
|
/* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
|
|
background-image: var(--icon-starred-yellow);
|
|
}
|
|
|
|
#app-navigation .nav-files a.nav-icon-files {
|
|
width: auto;
|
|
}
|
|
|
|
/* button needs overrides due to navigation styles */
|
|
#app-navigation .nav-files a.new {
|
|
width: 40px;
|
|
height: 32px;
|
|
padding: 0 10px;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#app-navigation .nav-files a.new.hidden {
|
|
display: none;
|
|
}
|
|
|
|
#app-navigation .nav-files a.new.disabled {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.files-filestable tbody tr {
|
|
height: 51px;
|
|
}
|
|
|
|
.files-filestable tbody tr:hover,
|
|
.files-filestable tbody tr:focus,
|
|
.files-filestable tbody .name:focus,
|
|
.files-filestable tbody tr:hover .filename form,
|
|
table tr.mouseOver td {
|
|
background-color: var(--color-background-hover);
|
|
}
|
|
|
|
.files-filestable tbody tr:active,
|
|
.files-filestable tbody tr.highlighted,
|
|
.files-filestable tbody tr.highlighted .name:focus,
|
|
.files-filestable tbody tr.selected,
|
|
.files-filestable tbody tr.searchresult {
|
|
background-color: var(--color-primary-light);
|
|
}
|
|
|
|
tbody a {
|
|
color: var(--color-main-text);
|
|
}
|
|
|
|
span.conflict-path, span.extension, span.uploading, td.date {
|
|
color: var(--color-text-maxcontrast);
|
|
}
|
|
|
|
span.conflict-path, span.extension {
|
|
-webkit-transition: opacity 300ms;
|
|
-moz-transition: opacity 300ms;
|
|
-o-transition: opacity 300ms;
|
|
transition: opacity 300ms;
|
|
vertical-align: top;
|
|
}
|
|
|
|
tr:hover span.conflict-path,
|
|
tr:focus span.conflict-path,
|
|
tr:hover span.extension,
|
|
tr:focus span.extension {
|
|
opacity: 1;
|
|
color: var(--color-text-maxcontrast);
|
|
}
|
|
|
|
table th, table th a {
|
|
color: var(--color-text-maxcontrast);
|
|
}
|
|
|
|
table.multiselect th a {
|
|
color: var(--color-main-text);
|
|
}
|
|
|
|
table th .columntitle {
|
|
display: block;
|
|
padding: 15px;
|
|
height: 50px;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
vertical-align: middle;
|
|
}
|
|
table th .columntitle:focus-visible {
|
|
border-radius: 2px;
|
|
}
|
|
|
|
table.multiselect th .columntitle {
|
|
display: inline-block;
|
|
margin-right: -20px;
|
|
}
|
|
|
|
table th .columntitle.name {
|
|
padding-left: 0;
|
|
margin-left: 44px;
|
|
}
|
|
|
|
table.multiselect th .columntitle.name {
|
|
margin-left: 0;
|
|
}
|
|
|
|
table th .sort-indicator {
|
|
width: 10px;
|
|
height: 8px;
|
|
margin-left: 5px;
|
|
display: inline-block;
|
|
vertical-align: text-bottom;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.sort-indicator.hidden,
|
|
.multiselect .sort-indicator,
|
|
table.multiselect th:hover .sort-indicator.hidden,
|
|
table.multiselect th:focus .sort-indicator.hidden {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.multiselect .sort, .multiselect .sort span {
|
|
cursor: default;
|
|
}
|
|
|
|
table th:hover .sort-indicator.hidden,
|
|
table th:focus .sort-indicator.hidden {
|
|
visibility: visible;
|
|
}
|
|
|
|
table th,
|
|
table td {
|
|
border-bottom: 1px solid var(--color-border);
|
|
text-align: left;
|
|
font-weight: normal;
|
|
}
|
|
|
|
table td {
|
|
padding: 0 15px;
|
|
font-style: normal;
|
|
background-position: 8px center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
table th.column-name {
|
|
position: relative;
|
|
width: 9999px;
|
|
/* not really sure why this works better than 100% … table styling */
|
|
padding: 0;
|
|
}
|
|
|
|
.column-name-container {
|
|
position: relative;
|
|
height: 50px;
|
|
}
|
|
|
|
table th.column-selection {
|
|
padding-top: 2px;
|
|
}
|
|
|
|
table th.column-size, table td.filesize {
|
|
text-align: right;
|
|
}
|
|
|
|
table th.column-mtime, table td.date,
|
|
table th.column-last, table td.column-last {
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
/* this can not be just width, both need to be set … table styling */
|
|
min-width: 130px;
|
|
}
|
|
|
|
#app-content-recent thead,
|
|
#app-content-favorites thead,
|
|
#app-content-shareoverview thead,
|
|
#app-content-sharingout thead,
|
|
#app-content-sharingin thead,
|
|
#app-content-sharinglinks thead,
|
|
#app-content-deletedshares thead,
|
|
#app-content-pendingshares thead {
|
|
top: 0;
|
|
}
|
|
|
|
table.multiselect thead th {
|
|
background-color: var(--color-main-background-translucent);
|
|
font-weight: bold;
|
|
}
|
|
|
|
#app-content.with-app-sidebar table.multiselect thead {
|
|
margin-right: 27%;
|
|
}
|
|
|
|
table.multiselect .column-name {
|
|
position: relative;
|
|
width: 9999px;
|
|
/* when we use 100%, the styling breaks on mobile … table styling */
|
|
}
|
|
|
|
table.multiselect .column-mtime > a {
|
|
display: none;
|
|
}
|
|
|
|
table td.selection,
|
|
table th.selection,
|
|
table td.fileaction {
|
|
width: 32px;
|
|
text-align: center;
|
|
}
|
|
|
|
table td.filename a.name,
|
|
table td.filename p.name {
|
|
display: flex;
|
|
position: relative;
|
|
/* Firefox needs to explicitly have this default set … */
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
padding: 0;
|
|
}
|
|
|
|
table td.filename .thumbnail-wrapper {
|
|
/* we need this to make sure flex is working inside a table cell */
|
|
width: 0;
|
|
min-width: 50px;
|
|
max-width: 50px;
|
|
height: 50px;
|
|
}
|
|
|
|
table td.filename .thumbnail-wrapper.icon-loading-small:after {
|
|
z-index: 10;
|
|
}
|
|
table td.filename .thumbnail-wrapper.icon-loading-small .thumbnail {
|
|
opacity: 0.2;
|
|
}
|
|
|
|
table td.filename .thumbnail {
|
|
display: inline-block;
|
|
width: 32px;
|
|
height: 32px;
|
|
background-size: 32px;
|
|
margin-left: 9px;
|
|
margin-top: 9px;
|
|
border-radius: var(--border-radius);
|
|
cursor: pointer;
|
|
position: absolute;
|
|
z-index: 4;
|
|
}
|
|
|
|
table td.filename p.name .thumbnail {
|
|
cursor: default;
|
|
}
|
|
|
|
table tr[data-has-preview=true] .thumbnail {
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
table td.filename input.filename {
|
|
width: 70%;
|
|
margin-left: 48px;
|
|
cursor: text;
|
|
}
|
|
|
|
table td.filename form {
|
|
margin-top: -40px;
|
|
position: relative;
|
|
top: -6px;
|
|
}
|
|
|
|
table td.filename a, table td.login, table td.logout, table td.download, table td.upload, table td.create, table td.delete {
|
|
padding: 3px 8px 8px 3px;
|
|
}
|
|
|
|
table td.filename .nametext, .modified, .column-last > span:first-child {
|
|
float: left;
|
|
padding: 15px 0;
|
|
}
|
|
|
|
.modified, .column-last > span:first-child {
|
|
position: relative;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
width: 110px;
|
|
}
|
|
|
|
/* TODO fix usability bug (accidental file/folder selection) */
|
|
table td.filename {
|
|
max-width: 0;
|
|
}
|
|
table td.filename .nametext {
|
|
width: 0;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
height: 100%;
|
|
z-index: 10;
|
|
padding: 0 20px 0 0;
|
|
}
|
|
|
|
.hide-hidden-files .files-filestable .files-fileList tr.hidden-file,
|
|
.hide-hidden-files .files-filestable .files-fileList tr.hidden-file.dragging {
|
|
display: none;
|
|
}
|
|
|
|
.files-fileList tr.animate-opacity {
|
|
-webkit-transition: opacity 250ms;
|
|
-moz-transition: opacity 250ms;
|
|
-o-transition: opacity 250ms;
|
|
transition: opacity 250ms;
|
|
}
|
|
|
|
.files-fileList tr.dragging {
|
|
opacity: 0.2;
|
|
}
|
|
|
|
table td.filename .nametext .innernametext {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
position: relative;
|
|
vertical-align: top;
|
|
}
|
|
|
|
/* for smaller resolutions - see mobile.css */
|
|
table td.filename .uploadtext {
|
|
position: absolute;
|
|
font-weight: normal;
|
|
margin-left: 50px;
|
|
left: 0;
|
|
bottom: 0;
|
|
height: 20px;
|
|
padding: 0 4px;
|
|
padding-left: 1px;
|
|
font-size: 11px;
|
|
line-height: 22px;
|
|
color: var(--color-text-maxcontrast);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
table td.selection {
|
|
padding: 0;
|
|
}
|
|
|
|
/* File checkboxes */
|
|
.files-fileList tr td.selection > .selectCheckBox + label:before {
|
|
opacity: 0.3;
|
|
margin-right: 0;
|
|
}
|
|
|
|
/* Show checkbox with full opacity when hovering, checked, or selected */
|
|
.files-fileList tr:hover td.selection > .selectCheckBox + label:before,
|
|
.files-fileList tr:focus td.selection > .selectCheckBox + label:before,
|
|
.files-fileList tr td.selection > .selectCheckBox:checked + label:before,
|
|
.files-fileList tr.selected td.selection > .selectCheckBox + label:before {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Show checkbox with half opacity when selecting range */
|
|
.files-fileList tr.halfselected td.selection > .selectCheckBox + label:before {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Use label to have bigger clickable size for checkbox */
|
|
.files-fileList tr td.selection > .selectCheckBox + label,
|
|
.select-all + label {
|
|
padding: 16px;
|
|
}
|
|
.files-fileList tr td.selection > .selectCheckBox:focus + label,
|
|
.select-all:focus + label {
|
|
background-color: var(--color-background-hover);
|
|
border-radius: var(--border-radius-pill);
|
|
outline: none !important;
|
|
border: 2px solid var(--color-primary) !important;
|
|
padding: 14px;
|
|
}
|
|
|
|
.files-fileList tr td.selection > .selectCheckBox:focus-visible + label,
|
|
.select-all:focus-visible + label {
|
|
outline-offset: 0px;
|
|
}
|
|
|
|
.files-fileList tr td.filename {
|
|
position: relative;
|
|
width: 100%;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
-webkit-transition: background-image 500ms;
|
|
-moz-transition: background-image 500ms;
|
|
-o-transition: background-image 500ms;
|
|
transition: background-image 500ms;
|
|
}
|
|
|
|
.files-fileList tr td.filename a.name label,
|
|
.files-fileList tr td.filename p.name label {
|
|
position: absolute;
|
|
width: 80%;
|
|
height: 50px;
|
|
}
|
|
|
|
.files-fileList tr td.filename .favorite {
|
|
display: inline-block;
|
|
float: left;
|
|
}
|
|
|
|
.files-fileList tr td.filename .favorite-mark {
|
|
position: absolute;
|
|
display: block;
|
|
top: -6px;
|
|
right: -6px;
|
|
line-height: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
#uploadsize-message, #delete-confirm {
|
|
display: none;
|
|
}
|
|
|
|
/* File actions */
|
|
.fileactions {
|
|
z-index: 50;
|
|
}
|
|
|
|
.busy .fileactions, .busy .action {
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* fix position of bubble pointer for Files app */
|
|
.bubble,
|
|
#app-navigation .app-navigation-entry-menu {
|
|
border-top-right-radius: 3px;
|
|
min-width: 100px;
|
|
}
|
|
|
|
/* force show the loading icon, not only on hover */
|
|
.files-fileList .icon-loading-small {
|
|
opacity: 1 !important;
|
|
display: inline !important;
|
|
}
|
|
|
|
.files-fileList .action.action-share-notification span, .files-fileList a.name {
|
|
cursor: default !important;
|
|
}
|
|
|
|
/*
|
|
* Make the disabled link look not like a link in file list rows
|
|
*/
|
|
.files-fileList a.name.disabled * {
|
|
cursor: default;
|
|
}
|
|
.files-fileList a.name.disabled a, .files-fileList a.name.disabled a * {
|
|
cursor: pointer;
|
|
}
|
|
.files-fileList a.name.disabled:focus {
|
|
background: none;
|
|
}
|
|
|
|
a.action > img {
|
|
height: 16px;
|
|
width: 16px;
|
|
vertical-align: text-bottom;
|
|
}
|
|
|
|
/* Actions for selected files */
|
|
.selectedActions {
|
|
position: relative;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.selectedActions.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.selectedActions a {
|
|
display: inline;
|
|
line-height: 50px;
|
|
padding: 16px 5px;
|
|
}
|
|
|
|
.selectedActions a.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.selectedActions a img {
|
|
position: relative;
|
|
vertical-align: text-bottom;
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
.selectedActions .actions-selected .icon-more {
|
|
margin-top: -3px;
|
|
}
|
|
|
|
.files-fileList td a a.action {
|
|
display: inline;
|
|
padding: 17px 8px;
|
|
line-height: 50px;
|
|
opacity: 0.3;
|
|
}
|
|
.files-fileList td a a.action.action-share {
|
|
padding: 17px 14px;
|
|
}
|
|
.files-fileList td a a.action.action-share.permanent:not(.shared-style) .icon-shared + span {
|
|
/* hide text of the share action */
|
|
/* .hidden-visually for accessbility */
|
|
position: absolute;
|
|
left: -10000px;
|
|
top: auto;
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
}
|
|
.files-fileList td a a.action.action-share .avatar {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
.files-fileList td a a.action.action-menu {
|
|
padding-top: 17px;
|
|
padding-bottom: 17px;
|
|
padding-left: 14px;
|
|
padding-right: 14px;
|
|
}
|
|
.files-fileList td a a.action.no-permission:hover, .files-fileList td a a.action.no-permission:focus {
|
|
opacity: 0.3;
|
|
}
|
|
.files-fileList td a a.action.disabled:hover, .files-fileList td a a.action.disabled:focus,
|
|
.files-fileList td a a.action.disabled img {
|
|
opacity: 0.3;
|
|
}
|
|
.files-fileList td a a.action.disabled.action-download {
|
|
opacity: 0.7;
|
|
}
|
|
.files-fileList td a a.action.disabled.action-download:hover, .files-fileList td a a.action.disabled.action-download:focus {
|
|
opacity: 0.7;
|
|
}
|
|
.files-fileList td a a.action:hover, .files-fileList td a a.action:focus {
|
|
opacity: 1;
|
|
}
|
|
.files-fileList td a a.action:focus {
|
|
background-color: var(--color-background-hover);
|
|
border-radius: var(--border-radius-pill);
|
|
}
|
|
.files-fileList td a .fileActionsMenu a.action, .files-fileList td a a.action.action-share.shared-style {
|
|
opacity: 0.7;
|
|
}
|
|
.files-fileList td a .fileActionsMenu .action.permanent {
|
|
opacity: 1;
|
|
}
|
|
|
|
.files-fileList .action.action-share.permanent.shared-style span:not(.icon) {
|
|
display: inline-block;
|
|
max-width: 70px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
vertical-align: middle;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.files-fileList .remoteAddress .userDomain {
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
.files-fileList .favorite-mark.permanent {
|
|
opacity: 1;
|
|
}
|
|
|
|
.files-fileList .fileActionsMenu a.action:hover,
|
|
.files-fileList .fileActionsMenu a.action:focus,
|
|
.files-fileList a.action.action-share.shared-style:hover,
|
|
.files-fileList a.action.action-share.shared-style:focus {
|
|
opacity: 1;
|
|
}
|
|
|
|
.files-fileList tr a.action.disabled {
|
|
background: none;
|
|
}
|
|
|
|
.selectedActions a.download.disabled,
|
|
.files-fileList tr a.action.action-download.disabled {
|
|
color: #000000;
|
|
}
|
|
|
|
.files-fileList tr:hover a.action.disabled:hover * {
|
|
cursor: default;
|
|
}
|
|
|
|
.summary {
|
|
color: var(--color-text-maxcontrast);
|
|
/* add whitespace to bottom of files list to correctly show dropdowns */
|
|
height: 330px;
|
|
}
|
|
|
|
.files-filestable .summary .filesummary {
|
|
width: 100%;
|
|
/* Width of checkbox and file preview */
|
|
padding-left: 101px;
|
|
}
|
|
|
|
/* Less whitespace needed on link share page
|
|
* as there is a footer and action menus have fewer entries.
|
|
*/
|
|
#body-public .summary {
|
|
height: 180px;
|
|
}
|
|
|
|
.summary:hover,
|
|
.summary:focus,
|
|
.summary,
|
|
table tr.summary td {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.summary td {
|
|
border-bottom: none;
|
|
vertical-align: top;
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.summary td:first-child {
|
|
padding: 0;
|
|
}
|
|
|
|
.hiddeninfo {
|
|
white-space: pre-line;
|
|
}
|
|
|
|
table.dragshadow {
|
|
width: auto;
|
|
z-index: 2000;
|
|
}
|
|
|
|
table.dragshadow td.filename {
|
|
padding-left: 60px;
|
|
padding-right: 16px;
|
|
height: 36px;
|
|
/* Override "max-width: 0" to prevent file name and size from overlapping */
|
|
max-width: unset;
|
|
}
|
|
|
|
table.dragshadow td.size {
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.mask {
|
|
z-index: 50;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: var(--color-main-background);
|
|
background-repeat: no-repeat no-repeat;
|
|
background-position: 50%;
|
|
opacity: 0.7;
|
|
transition: opacity 100ms;
|
|
-moz-transition: opacity 100ms;
|
|
-o-transition: opacity 100ms;
|
|
-ms-transition: opacity 100ms;
|
|
-webkit-transition: opacity 100ms;
|
|
}
|
|
|
|
.mask.transparent {
|
|
opacity: 0;
|
|
}
|
|
|
|
.newFileMenu {
|
|
font-weight: 300;
|
|
top: 100%;
|
|
left: -48px !important;
|
|
margin-top: 4px;
|
|
min-width: 100px;
|
|
z-index: 1001;
|
|
/* Center triangle */
|
|
}
|
|
.newFileMenu::after {
|
|
left: 57px !important;
|
|
}
|
|
|
|
.files-controls {
|
|
box-sizing: border-box;
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
height: 54px;
|
|
padding: 0;
|
|
margin: 0;
|
|
background-color: var(--color-main-background-translucent);
|
|
z-index: 62;
|
|
/* must be above the filelist sticky header and texteditor menubar */
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
display: flex;
|
|
top: 3px;
|
|
}
|
|
.files-controls .actions > div > .button, .files-controls .actions > div button, .files-controls .actions > .button, .files-controls .actions button {
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
display: flex;
|
|
height: 44px;
|
|
width: 44px;
|
|
padding: 9px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.files-controls .actions > div .button.hidden, .files-controls .actions .button.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* position controls for apps with app-navigation */
|
|
.viewer-mode #app-navigation + #app-content .files-controls {
|
|
left: 0;
|
|
}
|
|
|
|
.files-filestable .filename .action .icon,
|
|
.files-filestable .selectedActions a .icon,
|
|
.files-filestable .filename .favorite-mark .icon,
|
|
.files-controls .actions .button .icon {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
background-size: 16px 16px;
|
|
}
|
|
|
|
.files-filestable .filename .favorite-mark .icon-star {
|
|
background-image: none;
|
|
}
|
|
.files-filestable .filename .favorite-mark .icon-starred {
|
|
/* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
|
|
background-image: var(--icon-star-dark-yellow);
|
|
}
|
|
|
|
.files-filestable .filename .action .icon.hidden,
|
|
.files-filestable .selectedActions a .icon.hidden,
|
|
.files-controls .actions .button .icon.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.files-filestable .filename .action .icon.loading,
|
|
.files-filestable .selectedActions a .icon.loading,
|
|
.files-controls .actions .button .icon.loading {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
|
|
.app-files .actions .button.new {
|
|
position: relative;
|
|
}
|
|
|
|
.breadcrumb {
|
|
align-items: center;
|
|
}
|
|
.breadcrumb .icon-home {
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.breadcrumb .canDrop > a,
|
|
.files-filestable tbody tr.canDrop {
|
|
background-color: rgba(0, 130, 201, 0.3);
|
|
}
|
|
|
|
.dropzone-background {
|
|
background-color: rgba(0, 130, 201, 0.3);
|
|
}
|
|
.dropzone-background :hover {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.notCreatable {
|
|
margin-left: 12px;
|
|
margin-right: 44px;
|
|
margin-top: 12px;
|
|
color: var(--color-main-text);
|
|
overflow: auto;
|
|
min-width: 160px;
|
|
height: 54px;
|
|
}
|
|
.notCreatable:not(.hidden) {
|
|
display: flex;
|
|
}
|
|
.notCreatable .icon-alert-outline {
|
|
top: -15px;
|
|
position: relative;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.quota-navigation-item {
|
|
margin: 0 !important;
|
|
border: none;
|
|
border-radius: 0;
|
|
background-color: transparent;
|
|
z-index: 1;
|
|
height: 44px;
|
|
display: flex !important;
|
|
flex-direction: column;
|
|
}
|
|
.quota-navigation-item__text {
|
|
height: 30px;
|
|
}
|
|
.quota-navigation-item[href="#"], .quota-navigation-item[href="#"] * {
|
|
cursor: default !important;
|
|
}
|
|
.quota-navigation-item__container {
|
|
height: 5px;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
/* GRID */
|
|
.files-filestable.view-grid:not(.hidden) {
|
|
/* HEADER and MULTISELECT */
|
|
/* MAIN FILE LIST */
|
|
/* Center align the footer file number & size summary */
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) thead tr {
|
|
display: block;
|
|
border-bottom: 1px solid var(--color-border);
|
|
background-color: var(--color-main-background-translucent);
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) thead tr th {
|
|
width: auto;
|
|
border: none;
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tbody {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, 160px);
|
|
justify-content: space-around;
|
|
row-gap: 15px;
|
|
margin: 15px 0;
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden) {
|
|
display: block;
|
|
position: relative;
|
|
height: 190px;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover, .files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus, .files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active, .files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected, .files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult,
|
|
.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus, .files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted {
|
|
background-color: transparent;
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover .thumbnail-wrapper,
|
|
.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover .nametext,
|
|
.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover .fileactions, .files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus .thumbnail-wrapper,
|
|
.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus .nametext,
|
|
.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus .fileactions, .files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active .thumbnail-wrapper,
|
|
.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active .nametext,
|
|
.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active .fileactions, .files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected .thumbnail-wrapper,
|
|
.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected .nametext,
|
|
.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected .fileactions, .files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult .thumbnail-wrapper,
|
|
.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult .nametext,
|
|
.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult .fileactions,
|
|
.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus .thumbnail-wrapper,
|
|
.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus .nametext,
|
|
.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus .fileactions, .files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted .thumbnail-wrapper,
|
|
.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted .nametext,
|
|
.files-filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted .fileactions {
|
|
background-color: var(--color-background-hover);
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tbody td {
|
|
display: inline;
|
|
border-bottom: none;
|
|
/* No space for filesize and date in grid view */
|
|
/* Position actions menu below file */
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tbody td.filename .thumbnail-wrapper {
|
|
min-width: 0;
|
|
max-width: none;
|
|
position: absolute;
|
|
width: 160px;
|
|
height: 160px;
|
|
padding: 14px;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tbody td.filename .thumbnail-wrapper .thumbnail {
|
|
width: calc(100% - 2 * 14px);
|
|
height: calc(100% - 2 * 14px);
|
|
background-size: contain;
|
|
margin: 0;
|
|
border-radius: var(--border-radius);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
/* Position favorite star related to checkbox to left and 3-dot menu below
|
|
* Position is inherited from the selection while in grid view
|
|
*/
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tbody td.filename .thumbnail-wrapper .thumbnail .favorite-mark {
|
|
padding: 14px;
|
|
left: auto;
|
|
top: -22px;
|
|
right: -22px;
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tbody td.filename .uploadtext {
|
|
width: 100%;
|
|
margin: 0;
|
|
top: 0;
|
|
bottom: auto;
|
|
height: 28px;
|
|
padding-top: 4px;
|
|
padding-left: 28px;
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tbody td.filename .name {
|
|
height: 100%;
|
|
border-radius: var(--border-radius);
|
|
overflow: hidden;
|
|
cursor: pointer !important;
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tbody td.filename .name .nametext {
|
|
display: flex;
|
|
height: 44px;
|
|
margin-top: 146px;
|
|
text-align: center;
|
|
line-height: 44px;
|
|
padding: 0;
|
|
/* No space for extension in grid view */
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tbody td.filename .name .nametext .innernametext {
|
|
display: inline-block;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tbody td.filename .name .nametext:before {
|
|
content: "";
|
|
flex: 1;
|
|
min-width: 14px;
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tbody td.filename .name .nametext:after {
|
|
content: "";
|
|
flex: 1;
|
|
min-width: 44px;
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tbody td.filename .name .nametext .extension {
|
|
display: none;
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tbody td.filename .name .fileactions {
|
|
height: initial;
|
|
margin-top: 146px;
|
|
display: flex;
|
|
align-items: center;
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tbody td.filename .name .fileactions .action {
|
|
padding: 14px;
|
|
width: 44px;
|
|
height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tbody td.filename .name .fileactions .action:not(.action-menu) {
|
|
display: none;
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-share-container.hidden {
|
|
display: block !important;
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-share-container.hidden .action-share img {
|
|
padding: 6px;
|
|
border-radius: 50%;
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-restore-container.hidden {
|
|
display: block !important;
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-comment-container.hidden {
|
|
display: block !important;
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tbody td.filename form {
|
|
padding: 3px 14px;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tbody td.filename form input.filename {
|
|
width: 100%;
|
|
margin-left: 0;
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tbody td.filesize, .files-filestable.view-grid:not(.hidden) tbody td.date {
|
|
display: none;
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tbody td.selection, .files-filestable.view-grid:not(.hidden) tbody td.filename .favorite-mark {
|
|
position: absolute;
|
|
top: -8px;
|
|
left: -8px;
|
|
display: flex;
|
|
width: 44px;
|
|
height: 44px;
|
|
z-index: 10;
|
|
background: transparent;
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tbody td.selection label, .files-filestable.view-grid:not(.hidden) tbody td.filename .favorite-mark label {
|
|
width: 44px;
|
|
height: 44px;
|
|
display: inline-flex;
|
|
padding: 14px;
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tbody td.selection label::before, .files-filestable.view-grid:not(.hidden) tbody td.filename .favorite-mark label::before {
|
|
margin: 0;
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tbody td .popovermenu {
|
|
left: 0;
|
|
width: 150px;
|
|
margin: 0 5px;
|
|
/* Ellipsize long entries, normally menu width is adjusted but for grid we use fixed width. */
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tbody td .popovermenu .menuitem span:not(.icon) {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tr.hidden-file td.filename .name .nametext .extension {
|
|
display: block;
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tfoot {
|
|
display: grid;
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) {
|
|
display: inline-block;
|
|
margin: 0 auto;
|
|
height: 418px;
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td {
|
|
padding-top: 50px;
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td:first-child, .files-filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td.date {
|
|
display: none;
|
|
}
|
|
.files-filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td .info {
|
|
margin-left: 0;
|
|
}
|
|
|
|
/* Grid view toggle */
|
|
#view-toggle {
|
|
background-color: transparent;
|
|
border: none;
|
|
margin: 0;
|
|
padding: 22px;
|
|
opacity: 0.5;
|
|
position: fixed;
|
|
right: calc(var(--default-grid-baseline) * 4);
|
|
top: calc(var(--header-height) + var(--default-grid-baseline));
|
|
z-index: 100;
|
|
}
|
|
#view-toggle:hover, #view-toggle:focus, #showgridview:focus + #view-toggle {
|
|
opacity: 1;
|
|
}
|
|
#view-toggle:focus-visible, #showgridview:focus-visible + #view-toggle {
|
|
box-shadow: inset 0 0 0 2px var(--color-primary) !important;
|
|
}
|
|
|
|
/**
|
|
* Make sure the hidden input is always
|
|
* on the visible scrolled area of the
|
|
* page to avoid scrolling to top when focusing
|
|
*/
|
|
#showgridview {
|
|
position: fixed;
|
|
top: 0;
|
|
}
|
|
|
|
/* Adjustments for link share page */
|
|
#body-public {
|
|
/* Right-align view toggle on link share page */
|
|
}
|
|
#body-public .files-filestable.view-grid:not(.hidden) tbody td {
|
|
/* More space for filename since there is no share icon */
|
|
/* Position actions menu correctly below 3-dot-menu */
|
|
}
|
|
#body-public .files-filestable.view-grid:not(.hidden) tbody td.filename .name .nametext .innernametext {
|
|
max-width: 124px;
|
|
}
|
|
#body-public .files-filestable.view-grid:not(.hidden) tbody td .popovermenu {
|
|
left: -80px;
|
|
}
|
|
#body-public #view-toggle {
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
|
|
/* Hide legacy Gallery toggle */
|
|
#gallery-button {
|
|
display: none;
|
|
}
|
|
|
|
#tag_multiple_files_container {
|
|
overflow: hidden;
|
|
background-color: #fff;
|
|
border-radius: 3px;
|
|
position: relative;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 10px;
|
|
}
|
|
#tag_multiple_files_container h3 {
|
|
width: 100%;
|
|
padding: 0 18px;
|
|
}
|
|
#tag_multiple_files_container .systemTagsInputFieldContainer {
|
|
flex: 1 1 80%;
|
|
min-width: 0;
|
|
margin: 0 12px;
|
|
}
|
|
|
|
#upload {
|
|
box-sizing: border-box;
|
|
height: 36px;
|
|
width: 39px;
|
|
padding: 0 !important;
|
|
/* override default control bar button padding */
|
|
margin-left: 3px;
|
|
overflow: hidden;
|
|
vertical-align: top;
|
|
position: relative;
|
|
z-index: -20;
|
|
}
|
|
|
|
#upload .icon-upload {
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
height: 44px;
|
|
width: 44px;
|
|
margin: -5px -3px;
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
opacity: 0.65;
|
|
}
|
|
|
|
.file_upload_target {
|
|
display: none;
|
|
}
|
|
|
|
.file_upload_form {
|
|
display: inline;
|
|
float: left;
|
|
margin: 0;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
overflow: visible;
|
|
}
|
|
|
|
.uploadprogresswrapper, .uploadprogresswrapper * {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.uploadprogresswrapper {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
height: 36px;
|
|
margin-left: 3px;
|
|
}
|
|
|
|
.uploadprogresswrapper > input[type=button] {
|
|
height: 36px;
|
|
margin-left: 3px;
|
|
}
|
|
|
|
#uploadprogressbar {
|
|
border-color: var(--color-border-dark);
|
|
border-radius: var(--border-radius-pill) 0 0 var(--border-radius-pill);
|
|
border-right: 0;
|
|
position: relative;
|
|
float: left;
|
|
width: 200px;
|
|
height: 44px;
|
|
display: inline-block;
|
|
text-align: center;
|
|
}
|
|
#uploadprogressbar .ui-progressbar-value {
|
|
margin-top: 0.1em;
|
|
}
|
|
|
|
#uploadprogressbar .ui-progressbar-value.ui-widget-header.ui-corner-left {
|
|
height: calc(100% + 2px);
|
|
top: -1px;
|
|
left: -1px;
|
|
position: absolute;
|
|
overflow: hidden;
|
|
background-color: var(--color-primary);
|
|
}
|
|
|
|
#uploadprogressbar .label {
|
|
top: 8px;
|
|
opacity: 1;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
font-weight: normal;
|
|
}
|
|
|
|
#uploadprogressbar .label.inner {
|
|
color: var(--color-primary-text);
|
|
position: absolute;
|
|
display: block;
|
|
width: 200px;
|
|
}
|
|
|
|
#uploadprogressbar .label.outer {
|
|
position: relative;
|
|
color: var(--color-main-text);
|
|
}
|
|
|
|
#uploadprogressbar .desktop {
|
|
display: block;
|
|
}
|
|
|
|
#uploadprogressbar .mobile {
|
|
display: none;
|
|
}
|
|
|
|
#uploadprogressbar + .stop {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
.oc-dialog .fileexists {
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.oc-dialog .fileexists .conflict .filename,
|
|
.oc-dialog .fileexists .conflict .mtime,
|
|
.oc-dialog .fileexists .conflict .size {
|
|
-webkit-touch-callout: initial;
|
|
-webkit-user-select: initial;
|
|
-khtml-user-select: initial;
|
|
-moz-user-select: initial;
|
|
-ms-user-select: initial;
|
|
user-select: initial;
|
|
}
|
|
|
|
.oc-dialog .fileexists .conflict .message {
|
|
color: #e9322d;
|
|
}
|
|
|
|
.oc-dialog .fileexists table {
|
|
width: 100%;
|
|
}
|
|
|
|
.oc-dialog .fileexists th {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.oc-dialog .fileexists th input[type=checkbox] {
|
|
margin-right: 3px;
|
|
}
|
|
|
|
.oc-dialog .fileexists th:first-child {
|
|
width: 225px;
|
|
}
|
|
|
|
.oc-dialog .fileexists th label {
|
|
font-weight: normal;
|
|
color: var(--color-main-text);
|
|
}
|
|
|
|
.oc-dialog .fileexists th .count {
|
|
margin-left: 3px;
|
|
}
|
|
|
|
.oc-dialog .fileexists .conflicts .template {
|
|
display: none;
|
|
}
|
|
|
|
.oc-dialog .fileexists .conflict {
|
|
width: 100%;
|
|
height: 85px;
|
|
}
|
|
|
|
.oc-dialog .fileexists .conflict .filename {
|
|
color: #777;
|
|
word-break: break-all;
|
|
clear: left;
|
|
}
|
|
|
|
.oc-dialog .fileexists .icon {
|
|
width: 64px;
|
|
height: 64px;
|
|
margin: 0px 5px 5px 5px;
|
|
background-repeat: no-repeat;
|
|
background-size: 64px 64px;
|
|
float: left;
|
|
}
|
|
|
|
.oc-dialog .fileexists .original,
|
|
.oc-dialog .fileexists .replacement {
|
|
float: left;
|
|
width: 225px;
|
|
}
|
|
|
|
.oc-dialog .fileexists .conflicts {
|
|
overflow-y: auto;
|
|
max-height: 225px;
|
|
}
|
|
|
|
.oc-dialog .fileexists .conflict input[type=checkbox] {
|
|
float: left;
|
|
}
|
|
|
|
.oc-dialog .fileexists #allfileslabel {
|
|
float: right;
|
|
}
|
|
|
|
.oc-dialog .fileexists #allfiles {
|
|
vertical-align: bottom;
|
|
position: relative;
|
|
top: -3px;
|
|
}
|
|
|
|
.oc-dialog .fileexists #allfiles + span {
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.oc-dialog .oc-dialog-buttonrow {
|
|
width: 100%;
|
|
text-align: right;
|
|
}
|
|
.oc-dialog .oc-dialog-buttonrow .cancel {
|
|
float: left;
|
|
}
|
|
|
|
.highlightUploaded {
|
|
-webkit-animation: highlightAnimation 2s 1;
|
|
-moz-animation: highlightAnimation 2s 1;
|
|
-o-animation: highlightAnimation 2s 1;
|
|
animation: highlightAnimation 2s 1;
|
|
}
|
|
|
|
@-webkit-keyframes highlightAnimation {
|
|
0% {
|
|
background-color: rgb(255, 255, 140);
|
|
}
|
|
100% {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
}
|
|
@-moz-keyframes highlightAnimation {
|
|
0% {
|
|
background-color: rgb(255, 255, 140);
|
|
}
|
|
100% {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
}
|
|
@-o-keyframes highlightAnimation {
|
|
0% {
|
|
background-color: rgb(255, 255, 140);
|
|
}
|
|
100% {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
}
|
|
@keyframes highlightAnimation {
|
|
0% {
|
|
background-color: rgb(255, 255, 140);
|
|
}
|
|
100% {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
}
|
|
/**
|
|
* @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
|
|
*
|
|
* @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
|
|
*
|
|
* @license GNU AGPL version 3 or any later version
|
|
*
|
|
* 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/>.
|
|
*
|
|
*/
|
|
/* 938 = table min-width(688) + app-navigation width: 250\
|
|
$breakpoint-mobile +1 = size where app-navigation is hidden +1
|
|
688 = table min-width */
|
|
@media only screen and (max-width: 988px) and (min-width: 1025px), only screen and (max-width: 688px) {
|
|
.app-files #app-content.dir-drop {
|
|
background-color: rgb(255, 255, 255) !important;
|
|
}
|
|
|
|
table th.column-size,
|
|
table td.filesize,
|
|
table th.column-mtime,
|
|
table td.date {
|
|
display: none;
|
|
}
|
|
|
|
/* remove padding to let border bottom fill the whole width*/
|
|
table td {
|
|
padding: 0;
|
|
}
|
|
|
|
/* remove shift for multiselect bar to account for missing navigation */
|
|
table.multiselect thead {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.fileList a.action.action-menu img {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.fileList .fileActionsMenu {
|
|
margin-right: 6px;
|
|
}
|
|
|
|
/* hide text of the share action on mobile */
|
|
/* .hidden-visually for accessbility */
|
|
.fileList a.action-share span:not(.icon):not(.avatar) {
|
|
position: absolute;
|
|
left: -10000px;
|
|
top: auto;
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* shorten elements for mobile */
|
|
#uploadprogressbar, #uploadprogressbar .label.inner {
|
|
width: 50px;
|
|
}
|
|
|
|
/* hide desktop-only parts */
|
|
#uploadprogressbar .desktop {
|
|
display: none !important;
|
|
}
|
|
|
|
#uploadprogressbar .mobile {
|
|
display: block !important;
|
|
}
|
|
|
|
/* ensure that it is visible over #app-content */
|
|
table.dragshadow {
|
|
z-index: 1000;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 480px) {
|
|
/* Only show icons */
|
|
table th .selectedActions {
|
|
float: right;
|
|
}
|
|
|
|
table th .selectedActions > a span:not(.icon) {
|
|
display: none;
|
|
}
|
|
|
|
/* Increase touch area for the icons */
|
|
table th .selectedActions a {
|
|
padding: 17px 14px;
|
|
}
|
|
|
|
/* Remove the margin to reduce the overlap between the name and the icons */
|
|
table.multiselect th .columntitle.name {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
.app-sidebar .detailFileInfoContainer {
|
|
min-height: 50px;
|
|
padding: 15px;
|
|
}
|
|
|
|
.app-sidebar .detailFileInfoContainer > div {
|
|
clear: both;
|
|
}
|
|
|
|
.app-sidebar .mainFileInfoView .icon {
|
|
display: inline-block;
|
|
background-size: 16px 16px;
|
|
}
|
|
|
|
.app-sidebar .mainFileInfoView .permalink {
|
|
padding: 6px 10px;
|
|
vertical-align: top;
|
|
opacity: 0.6;
|
|
}
|
|
.app-sidebar .mainFileInfoView .permalink:hover, .app-sidebar .mainFileInfoView .permalink:focus {
|
|
opacity: 1;
|
|
}
|
|
|
|
.app-sidebar .mainFileInfoView .permalink-field > input {
|
|
clear: both;
|
|
width: 90%;
|
|
}
|
|
|
|
.app-sidebar .thumbnailContainer.large {
|
|
margin-left: -15px;
|
|
margin-right: -35px;
|
|
/* 15 + 20 for the close button */
|
|
margin-top: -15px;
|
|
}
|
|
|
|
.app-sidebar .thumbnailContainer.large.portrait {
|
|
margin: 0;
|
|
/* if we don't fit the image anyway we give it back the margin */
|
|
}
|
|
|
|
.app-sidebar .large .thumbnail {
|
|
width: 100%;
|
|
display: block;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 100%;
|
|
float: none;
|
|
margin: 0;
|
|
height: auto;
|
|
}
|
|
|
|
.app-sidebar .large .thumbnail .stretcher {
|
|
content: "";
|
|
display: block;
|
|
padding-bottom: 56.25%;
|
|
/* sets height of .thumbnail to 9/16 of the width */
|
|
}
|
|
|
|
.app-sidebar .large.portrait .thumbnail {
|
|
background-position: 50% top;
|
|
}
|
|
|
|
.app-sidebar .large.portrait .thumbnail {
|
|
background-size: contain;
|
|
}
|
|
|
|
.app-sidebar .large.text {
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
padding-top: 14px;
|
|
font-size: 80%;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.app-sidebar .thumbnail {
|
|
width: 100%;
|
|
min-height: 75px;
|
|
display: inline-block;
|
|
float: left;
|
|
margin-right: 10px;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.app-sidebar .ellipsis {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.app-sidebar .fileName {
|
|
font-size: 16px;
|
|
padding-top: 13px;
|
|
padding-bottom: 3px;
|
|
}
|
|
|
|
.app-sidebar .fileName h3 {
|
|
width: calc(100% - 42px);
|
|
/* 36px is the with of the copy link icon, but this breaks so we add some more to be sure */
|
|
display: inline-block;
|
|
padding: 5px 0;
|
|
margin: -5px 0;
|
|
}
|
|
|
|
.app-sidebar .file-details {
|
|
color: var(--color-text-maxcontrast);
|
|
}
|
|
|
|
.app-sidebar .action-favorite {
|
|
vertical-align: sub;
|
|
padding: 10px;
|
|
margin: -10px;
|
|
}
|
|
|
|
.app-sidebar .action-favorite > span {
|
|
opacity: 0.7 !important;
|
|
}
|
|
|
|
.app-sidebar .detailList {
|
|
float: left;
|
|
}
|
|
|
|
.app-sidebar .close {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
opacity: 0.5;
|
|
z-index: 1;
|
|
width: 44px;
|
|
height: 44px;
|
|
}
|
|
|
|
/**
|
|
* @copyright Copyright (c) 2018, Arthur Schiwon <blizzz@arthur-schiwon.de>
|
|
*
|
|
* @license GNU AGPL version 3 or any later version
|
|
*
|
|
*/
|
|
.whatsNewPopover {
|
|
bottom: 35px !important;
|
|
left: 15px !important;
|
|
width: 270px;
|
|
z-index: 700;
|
|
}
|
|
|
|
.whatsNewPopover p {
|
|
width: auto !important;
|
|
}
|
|
|
|
.whatsNewPopover .caption {
|
|
font-weight: bold;
|
|
cursor: auto !important;
|
|
}
|
|
|
|
.whatsNewPopover .icon-close {
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
|
|
.whatsNewPopover::after {
|
|
content: none;
|
|
}
|
|
|
|
/*# sourceMappingURL=merged.css.map */
|