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