aboutsummaryrefslogtreecommitdiffstats
path: root/apps/files/css/files.css
diff options
context:
space:
mode:
Diffstat (limited to 'apps/files/css/files.css')
-rw-r--r--apps/files/css/files.css1297
1 files changed, 1297 insertions, 0 deletions
diff --git a/apps/files/css/files.css b/apps/files/css/files.css
new file mode 100644
index 00000000000..eb465b71cdb
--- /dev/null
+++ b/apps/files/css/files.css
@@ -0,0 +1,1297 @@
+@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,
+#fileList .error {
+ color: var(--color-error);
+ border-color: var(--color-error);
+}
+
+/* FILE TABLE */
+#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) ~ #filestable {
+ display: none;
+}
+#filestable thead {
+ position: -webkit-sticky;
+ position: sticky;
+ top: 50px;
+ z-index: 60;
+ display: block;
+ background-color: var(--color-main-background-translucent);
+}
+#filestable tbody {
+ display: table;
+ width: 100%;
+}
+#filestable tbody tr[data-permissions="0"],
+#filestable tbody tr[data-permissions="16"] {
+ background-color: var(--color-background-dark);
+}
+#filestable tbody tr[data-permissions="0"] td.filename .nametext .innernametext,
+#filestable tbody tr[data-permissions="16"] td.filename .nametext .innernametext {
+ color: var(--color-text-maxcontrast);
+}
+
+#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 #filestable tbody tr, .file-drag #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 #filestable tbody tr, .file-drag #filestable tbody tr:hover {
+ background-color: transparent !important;
+}
+
+.app-files #app-content.dir-drop #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;
+}
+
+#filestable tbody tr {
+ height: 51px;
+}
+
+#filestable tbody tr:hover,
+#filestable tbody tr:focus,
+#filestable tbody .name:focus,
+#filestable tbody tr:hover .filename form,
+table tr.mouseOver td {
+ background-color: var(--color-background-hover);
+}
+
+#filestable tbody tr:active,
+#filestable tbody tr.highlighted,
+#filestable tbody tr.highlighted .name:focus,
+#filestable tbody tr.selected,
+#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.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#headerName {
+ position: relative;
+ width: 9999px;
+ /* not really sure why this works better than 100% … table styling */
+ padding: 0;
+}
+
+#headerName-container {
+ position: relative;
+ height: 50px;
+}
+
+table th#headerSelection {
+ padding-top: 2px;
+}
+
+table th#headerSize, table td.filesize {
+ text-align: right;
+}
+
+table th#headerDate, 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;
+ max-width: 130px;
+}
+
+#app-content-files thead,
+#app-content-trashbin thead {
+ top: 94px;
+}
+
+#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;
+}
+
+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 #headerName {
+ position: relative;
+ width: 9999px;
+ /* when we use 100%, the styling breaks on mobile … table styling */
+}
+
+table.multiselect #modified {
+ 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 #filestable #fileList tr.hidden-file,
+.hide-hidden-files #filestable #fileList tr.hidden-file.dragging {
+ display: none;
+}
+
+#fileList tr.animate-opacity {
+ -webkit-transition: opacity 250ms;
+ -moz-transition: opacity 250ms;
+ -o-transition: opacity 250ms;
+ transition: opacity 250ms;
+}
+
+#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 */
+#fileList tr td.selection > .selectCheckBox + label:before {
+ opacity: 0.3;
+ margin-right: 0;
+}
+
+/* Show checkbox with full opacity when hovering, checked, or selected */
+#fileList tr:hover td.selection > .selectCheckBox + label:before,
+#fileList tr:focus td.selection > .selectCheckBox + label:before,
+#fileList tr td.selection > .selectCheckBox:checked + label:before,
+#fileList tr.selected td.selection > .selectCheckBox + label:before {
+ opacity: 1;
+}
+
+/* Show checkbox with half opacity when selecting range */
+#fileList tr.halfselected td.selection > .selectCheckBox + label:before {
+ opacity: 0.5;
+}
+
+/* Use label to have bigger clickable size for checkbox */
+#fileList tr td.selection > .selectCheckBox + label,
+.select-all + label {
+ padding: 16px;
+}
+#fileList tr td.selection > .selectCheckBox:focus + label,
+.select-all:focus + label {
+ background-color: var(--color-background-hover);
+ border-radius: var(--border-radius-pill);
+}
+
+#fileList tr td.selection > .selectCheckBox:focus-visible + label,
+.select-all:focus-visible + label {
+ outline-offset: 0px;
+}
+
+#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;
+}
+
+#fileList tr td.filename a.name label,
+#fileList tr td.filename p.name label {
+ position: absolute;
+ width: 80%;
+ height: 50px;
+}
+
+#fileList tr td.filename .favorite {
+ display: inline-block;
+ float: left;
+}
+
+#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 */
+#fileList .icon-loading-small {
+ opacity: 1 !important;
+ display: inline !important;
+}
+
+#fileList .action.action-share-notification span, #fileList a.name {
+ cursor: default !important;
+}
+
+/*
+ * Make the disabled link look not like a link in file list rows
+ */
+#fileList a.name.disabled * {
+ cursor: default;
+}
+#fileList a.name.disabled a, #fileList a.name.disabled a * {
+ cursor: pointer;
+}
+#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;
+}
+
+#fileList td a a.action {
+ display: inline;
+ padding: 17px 8px;
+ line-height: 50px;
+ opacity: 0.3;
+}
+#fileList td a a.action.action-share {
+ padding: 17px 14px;
+}
+#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;
+}
+#fileList td a a.action.action-share .avatar {
+ display: inline-block;
+ vertical-align: middle;
+}
+#fileList td a a.action.action-menu {
+ padding-top: 17px;
+ padding-bottom: 17px;
+ padding-left: 14px;
+ padding-right: 14px;
+}
+#fileList td a a.action.no-permission:hover, #fileList td a a.action.no-permission:focus {
+ opacity: 0.3;
+}
+#fileList td a a.action.disabled:hover, #fileList td a a.action.disabled:focus,
+#fileList td a a.action.disabled img {
+ opacity: 0.3;
+}
+#fileList td a a.action.disabled.action-download {
+ opacity: 0.7;
+}
+#fileList td a a.action.disabled.action-download:hover, #fileList td a a.action.disabled.action-download:focus {
+ opacity: 0.7;
+}
+#fileList td a a.action:hover, #fileList td a a.action:focus {
+ opacity: 1;
+}
+#fileList td a a.action:focus {
+ background-color: var(--color-background-hover);
+ border-radius: var(--border-radius-pill);
+}
+#fileList td a .fileActionsMenu a.action, #fileList td a a.action.action-share.shared-style {
+ opacity: 0.7;
+}
+#fileList td a .fileActionsMenu .action.permanent {
+ opacity: 1;
+}
+
+#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;
+}
+
+#fileList .remoteAddress .userDomain {
+ margin-left: 0 !important;
+}
+
+#fileList .favorite-mark.permanent {
+ opacity: 1;
+}
+
+#fileList .fileActionsMenu a.action:hover,
+#fileList .fileActionsMenu a.action:focus,
+#fileList a.action.action-share.shared-style:hover,
+#fileList a.action.action-share.shared-style:focus {
+ opacity: 1;
+}
+
+#fileList tr a.action.disabled {
+ background: none;
+}
+
+#selectedActionsList a.download.disabled,
+#fileList tr a.action.action-download.disabled {
+ color: #000000;
+}
+
+#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;
+}
+
+#filestable .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;
+}
+
+#filestable .filename .action .icon,
+#filestable .selectedActions a .icon,
+#filestable .filename .favorite-mark .icon,
+#controls .actions .button .icon {
+ display: inline-block;
+ vertical-align: middle;
+ background-size: 16px 16px;
+}
+
+#filestable .filename .favorite-mark .icon-star {
+ background-image: none;
+}
+#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);
+}
+
+#filestable .filename .action .icon.hidden,
+#filestable .selectedActions a .icon.hidden,
+#controls .actions .button .icon.hidden {
+ display: none;
+}
+
+#filestable .filename .action .icon.loading,
+#filestable .selectedActions a .icon.loading,
+#controls .actions .button .icon.loading {
+ width: 15px;
+ height: 15px;
+}
+
+.app-files .actions .button.new {
+ position: relative;
+}
+
+.breadcrumb .canDrop > a,
+#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 {
+ margin: 0 !important;
+ border: none;
+ border-radius: 0;
+ background-color: transparent;
+ z-index: 1;
+}
+#quota > a[href="#"] {
+ box-shadow: none !important;
+}
+#quota > a[href="#"], #quota > a[href="#"] * {
+ cursor: default !important;
+}
+#quota .quota-container {
+ height: 5px;
+ border-radius: var(--border-radius);
+}
+#quota .quota-container div {
+ height: 100%;
+ background-color: var(--color-primary);
+}
+
+#quotatext {
+ padding: 0;
+ height: 30px;
+ line-height: 30px;
+}
+
+/* GRID */
+#filestable.view-grid:not(.hidden) {
+ /* HEADER and MULTISELECT */
+ /* MAIN FILE LIST */
+ /* Center align the footer file number & size summary */
+}
+#filestable.view-grid:not(.hidden) thead tr {
+ display: block;
+ border-bottom: 1px solid var(--color-border);
+ background-color: var(--color-main-background-translucent);
+}
+#filestable.view-grid:not(.hidden) thead tr th {
+ width: auto;
+ border: none;
+}
+#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;
+}
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden) {
+ display: block;
+ position: relative;
+ height: 190px;
+ border-radius: var(--border-radius);
+}
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted {
+ background-color: transparent;
+}
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover .thumbnail-wrapper,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover .nametext,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):hover .fileactions, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus .thumbnail-wrapper,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus .nametext,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):focus .fileactions, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active .thumbnail-wrapper,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active .nametext,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden):active .fileactions, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected .thumbnail-wrapper,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected .nametext,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden).selected .fileactions, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult .thumbnail-wrapper,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult .nametext,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden).searchresult .fileactions,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus .thumbnail-wrapper,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus .nametext,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden) .name:focus .fileactions, #filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted .thumbnail-wrapper,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted .nametext,
+#filestable.view-grid:not(.hidden) tbody tr:not(.hidden).highlighted .fileactions {
+ background-color: var(--color-background-hover);
+}
+#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 */
+}
+#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;
+}
+#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
+ */
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .thumbnail-wrapper .thumbnail .favorite-mark {
+ padding: 14px;
+ left: auto;
+ top: -22px;
+ right: -22px;
+}
+#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;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .name {
+ height: 100%;
+ border-radius: var(--border-radius);
+ overflow: hidden;
+ cursor: pointer !important;
+}
+#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 */
+}
+#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;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .name .nametext:before {
+ content: "";
+ flex: 1;
+ min-width: 14px;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .name .nametext:after {
+ content: "";
+ flex: 1;
+ min-width: 44px;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .name .nametext .extension {
+ display: none;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .name .fileactions {
+ height: initial;
+ margin-top: 146px;
+ display: flex;
+ align-items: center;
+ position: absolute;
+ right: 0;
+}
+#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;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .name .fileactions .action:not(.action-menu) {
+ display: none;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-share-container.hidden {
+ display: block !important;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-share-container.hidden .action-share img {
+ padding: 6px;
+ border-radius: 50%;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-restore-container.hidden {
+ display: block !important;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename .fileActionsMenu .action-comment-container.hidden {
+ display: block !important;
+}
+#filestable.view-grid:not(.hidden) tbody td.filename form {
+ padding: 3px 14px;
+ border-radius: var(--border-radius);
+}
+#filestable.view-grid:not(.hidden) tbody td.filename form input.filename {
+ width: 100%;
+ margin-left: 0;
+}
+#filestable.view-grid:not(.hidden) tbody td.filesize, #filestable.view-grid:not(.hidden) tbody td.date {
+ display: none;
+}
+#filestable.view-grid:not(.hidden) tbody td.selection, #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;
+}
+#filestable.view-grid:not(.hidden) tbody td.selection label, #filestable.view-grid:not(.hidden) tbody td.filename .favorite-mark label {
+ width: 44px;
+ height: 44px;
+ display: inline-flex;
+ padding: 14px;
+}
+#filestable.view-grid:not(.hidden) tbody td.selection label::before, #filestable.view-grid:not(.hidden) tbody td.filename .favorite-mark label::before {
+ margin: 0;
+ width: 14px;
+ height: 14px;
+}
+#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. */
+}
+#filestable.view-grid:not(.hidden) tbody td .popovermenu .menuitem span:not(.icon) {
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+#filestable.view-grid:not(.hidden) tr.hidden-file td.filename .name .nametext .extension {
+ display: block;
+}
+#filestable.view-grid:not(.hidden) tfoot {
+ display: grid;
+}
+#filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) {
+ display: inline-block;
+ margin: 0 auto;
+ height: 418px;
+}
+#filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td {
+ padding-top: 50px;
+}
+#filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td:first-child, #filestable.view-grid:not(.hidden) tfoot .summary:not(.hidden) td.date {
+ display: none;
+}
+#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: 0;
+ z-index: 100;
+}
+#view-toggle:hover, #view-toggle:focus, #showgridview:focus + #view-toggle {
+ opacity: 1;
+}
+
+/**
+ * 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 #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 #filestable.view-grid:not(.hidden) tbody td.filename .name .nametext .innernametext {
+ max-width: 124px;
+}
+#body-public #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;
+}
+
+/*# sourceMappingURL=files.css.map */
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-20 15:42:11 +0000