diff options
Diffstat (limited to 'apps/files/css/files.css')
| -rw-r--r-- | apps/files/css/files.css | 1354 |
1 files changed, 1 insertions, 1353 deletions
diff --git a/apps/files/css/files.css b/apps/files/css/files.css index 8381cb44d69..c9fc2332f64 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -1,1353 +1 @@ -@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 tbody tr[data-e2eencrypted=true] { - pointer-events: none; -} - -.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, -#app-content-favorites, -#app-content-shareoverview, -#app-content-sharingout, -#app-content-sharingin, -#app-content-sharinglinks, -#app-content-deletedshares, -#app-content-pendingshares { - margin-top: 22px; -} -#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: contain; - background-position: center; - background-repeat: no-repeat; - 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:not(.view-grid) td.filename input.filename { - width: 70% !important; - margin-left: 48px !important; - 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-visible + label, -.select-all:focus-visible + 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 { - 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; -} - -a.action.action-editlocally img.icon { - filter: var(--background-invert-if-dark); -} - -/* 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: 61px !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: 0; - padding-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 { - background-image: var(--icon-starred-yellow) !important; -} - -.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; - cursor: text; -} -.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; - float: right; - 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; - top: 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; -} - -/*# sourceMappingURL=files.css.map */ +.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)}.files-filestable{position:relative;width:100%;min-width:250px;display:block;flex-direction:column}.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 tbody tr[data-e2eencrypted=true]{pointer-events:none}.files-filestable.hidden{display:none}.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:rgba(0,0,0,0) !important}.app-files #app-content.dir-drop .files-filestable tbody tr.dropping-to-dir{background-color:var(--color-primary-light) !important}.nav-icon-files{background-image:var(--icon-folder-dark)}.nav-icon-recent{background-image:var(--icon-recent-dark)}.nav-icon-favorites{background-image:var(--icon-starred-dark)}.nav-icon-sharingin,.nav-icon-sharingout,.nav-icon-pendingshares,.nav-icon-shareoverview{background-image:var(--icon-share-dark)}.nav-icon-sharinglinks{background-image:var(--icon-public-dark)}.nav-icon-extstoragemounts{background-image:var(--icon-external-dark)}.nav-icon-trashbin{background-image:var(--icon-delete-dark)}.nav-icon-trashbin-starred{background-image:var(--icon-delete-#ff0000)}.nav-icon-deletedshares{background-image:var(--icon-unshare-dark)}.nav-icon-favorites-starred{background-image:var(--icon-starred-yellow)}#app-navigation .nav-files a.nav-icon-files{width:auto}#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:.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:.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;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;min-width:130px}#app-content-recent,#app-content-favorites,#app-content-shareoverview,#app-content-sharingout,#app-content-sharingin,#app-content-sharinglinks,#app-content-deletedshares,#app-content-pendingshares{margin-top:22px}#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}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;-moz-box-sizing:border-box;box-sizing:border-box;height:50px;line-height:50px;padding:0}table td.filename .thumbnail-wrapper{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:.2}table td.filename .thumbnail{display:inline-block;width:32px;height:32px;background-size:contain;background-position:center;background-repeat:no-repeat;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:not(.view-grid) td.filename input.filename{width:70% !important;margin-left:48px !important;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}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:.2}table td.filename .nametext .innernametext{text-overflow:ellipsis;overflow:hidden;position:relative;vertical-align:top}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}.files-fileList tr td.selection>.selectCheckBox+label:before{opacity:.3;margin-right:0}.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}.files-fileList tr.halfselected td.selection>.selectCheckBox+label:before{opacity:.5}.files-fileList tr td.selection>.selectCheckBox+label,.select-all+label{padding:16px}.files-fileList tr td.selection>.selectCheckBox:focus-visible+label,.select-all:focus-visible+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}.fileactions{z-index:50}.busy .fileactions,.busy .action{visibility:hidden}.bubble,#app-navigation .app-navigation-entry-menu{min-width:100px}.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}.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}a.action.action-editlocally img.icon{filter:var(--background-invert-if-dark)}.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:.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{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:.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:.3}.files-fileList td a a.action.disabled.action-download{opacity:.7}.files-fileList td a a.action.disabled.action-download:hover,.files-fileList td a a.action.disabled.action-download:focus{opacity:.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:.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:#000}.files-fileList tr:hover a.action.disabled:hover *{cursor:default}.summary{color:var(--color-text-maxcontrast);height:330px}.files-filestable .summary .filesummary{width:100%;padding-left:101px}#body-public .summary{height:180px}.summary:hover,.summary:focus,.summary,table tr.summary td{background-color:rgba(0,0,0,0)}.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;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:.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}.newFileMenu::after{left:61px !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;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;top:0;padding-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}.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{background-image:var(--icon-starred-yellow) !important}.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,.3)}.dropzone-background{background-color:rgba(0,130,201,.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:rgba(0,0,0,0);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)}.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:rgba(0,0,0,0)}.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}.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}.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}.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;cursor:text}.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:rgba(0,0,0,0)}.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}.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}#view-toggle{background-color:rgba(0,0,0,0);border:none;margin:0;padding:22px;opacity:.5;float:right;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}#showgridview{position:fixed;top:0}#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;top:0}#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}/*# sourceMappingURL=files.css.map */ |