You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1125 lines
23 KiB
1125 lines
23 KiB
/* Copyright (c) 2011, Jan-Christoph Borchardt, http://jancborchardt.net |
|
This file is licensed under the Affero General Public License version 3 or later. |
|
See the COPYING-README file. */ |
|
|
|
/* SETTINGS */ |
|
#files-setting-showhidden { |
|
padding-bottom: 8px; |
|
} |
|
|
|
/* 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, |
|
.actions .button a:active { |
|
color: #333; |
|
} |
|
|
|
.actions.creatable { |
|
position: relative; |
|
display: flex; |
|
flex: 1 1; |
|
.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: flex; |
|
flex-direction: column; |
|
// hide table if emptycontent is not hidden |
|
#emptycontent:not(.hidden) ~ & { |
|
display: none; |
|
} |
|
} |
|
|
|
#filestable.hidden { |
|
display: none; |
|
} |
|
|
|
@media only screen and (min-width: $breakpoint-mobile + 1) { |
|
#filestable { |
|
// floating header |
|
thead { |
|
position: -webkit-sticky; |
|
position: sticky; |
|
// header + breadcrumbs |
|
top: $header-height; |
|
padding-top: 40px; |
|
// under breadcrumbs, over file list |
|
z-index: 55; |
|
display: block; |
|
background-color: var(--color-main-background-translucent); |
|
} |
|
} |
|
} |
|
|
|
/* fit app list view heights */ |
|
.app-files #app-content>.viewcontainer { |
|
min-height: 0%; |
|
} |
|
|
|
.app-files #app-content { |
|
transition: background-color 0.3s ease; |
|
// force the width to be the full width to not go bigger than the screen |
|
// flex will grow for the mobile view if necessary |
|
width: calc(100% - 300px); |
|
} |
|
|
|
.file-drag, .file-drag #filestable tbody tr, .file-drag #filestable tbody tr:hover { |
|
transition: background-color 0.3s ease!important; |
|
background-color: rgb(179, 230, 255) !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: rgb(179, 230, 255) !important; |
|
} |
|
|
|
/* icons for sidebar */ |
|
.nav-icon-files { |
|
@include icon-color('folder', 'files', $color-black); |
|
} |
|
.nav-icon-recent { |
|
@include icon-color('recent', 'files', $color-black); |
|
} |
|
.nav-icon-favorites { |
|
@include icon-color('star-dark', 'actions', $color-black, 2, true); |
|
} |
|
.nav-icon-sharingin, |
|
.nav-icon-sharingout, |
|
.nav-icon-shareoverview { |
|
@include icon-color('share', 'files', $color-black); |
|
} |
|
.nav-icon-sharinglinks { |
|
@include icon-color('public', 'files', $color-black); |
|
} |
|
.nav-icon-extstoragemounts { |
|
@include icon-color('external', 'files', $color-black); |
|
} |
|
.nav-icon-trashbin { |
|
@include icon-color('delete', 'files', $color-black); |
|
} |
|
.nav-icon-trashbin-starred { |
|
@include icon-color('delete', 'files', #ff0000); |
|
} |
|
.nav-icon-deletedshares { |
|
@include icon-color('unshare', 'files', $color-black); |
|
} |
|
.nav-icon-favorites-starred { |
|
@include icon-color('star-dark', 'actions', $color-yellow, 2, true); |
|
} |
|
|
|
#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 { |
|
transition: background-color 0.3s ease; |
|
height: 51px; |
|
} |
|
#filestable tbody tr:hover, |
|
#filestable tbody tr:focus, |
|
#filestable tbody .name:focus, |
|
#filestable tbody tr:active, |
|
#filestable tbody tr.highlighted, |
|
#filestable tbody tr.highlighted .name:focus, |
|
#filestable tbody tr.selected, |
|
#filestable tbody tr.searchresult, |
|
#filestable tbody tr:hover .filename form, |
|
table tr.mouseOver td { |
|
transition: background-color 0.3s ease; |
|
background-color: var(--color-background-dark); |
|
} |
|
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; |
|
} |
|
table th .columntitle.name { |
|
padding-left: 0; |
|
margin-left: 50px; |
|
} |
|
|
|
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#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#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; |
|
} |
|
|
|
/* Multiselect bar */ |
|
table.multiselect thead { |
|
@include position('sticky'); |
|
top: 94px; |
|
z-index: 55; |
|
-moz-box-sizing: border-box; |
|
box-sizing: border-box; |
|
left: $navigation-width; |
|
} |
|
|
|
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 { |
|
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; |
|
} |
|
.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; |
|
} |
|
|
|
// Show slight border around previews for images, txt, etc. |
|
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; |
|
.nametext { |
|
width: 0; |
|
flex-grow: 1; |
|
display: flex; |
|
padding: 0; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
height: 100%; |
|
z-index: 10; |
|
padding-right: 20px; |
|
} |
|
} |
|
|
|
.uploadtext { |
|
position: absolute; |
|
left: 55px; |
|
} |
|
} |
|
|
|
.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 { |
|
font-weight: normal; |
|
margin-left: 55px; |
|
margin-top: 5px; |
|
height: 20px; |
|
padding: 10px 0; |
|
font-size: 11px; |
|
opacity: .5; |
|
} |
|
|
|
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.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 { |
|
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; |
|
} |
|
|
|
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: .3; |
|
&.action-share { |
|
padding: 17px 14px; |
|
&.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; |
|
} |
|
.avatar { |
|
display: inline-block; |
|
vertical-align: middle; |
|
} |
|
} |
|
&.action-menu { |
|
padding-top: 17px; |
|
padding-bottom: 17px; |
|
padding-left: 14px; |
|
padding-right: 14px; |
|
} |
|
&.no-permission { |
|
&:hover, &:focus { |
|
opacity: .3; |
|
} |
|
} |
|
&.disabled { |
|
&:hover, &:focus, |
|
img { |
|
opacity: .3; |
|
} |
|
&.action-download { |
|
opacity: .7; |
|
&:hover, &:focus { |
|
opacity: .7; |
|
} |
|
} |
|
} |
|
&:hover, &:focus { |
|
opacity: .7; |
|
} |
|
} |
|
.fileActionsMenu a.action, a.action.action-share.shared-style { |
|
opacity: .7; |
|
} |
|
} |
|
|
|
// Ellipsize long sharer names |
|
#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, |
|
/* show share action of shared items darker to distinguish from non-shared */ |
|
#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 { |
|
opacity: .3; |
|
/* add whitespace to bottom of files list to correctly show dropdowns */ |
|
height: 250px; |
|
} |
|
/* 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 .info { |
|
margin-left: 2px; |
|
} |
|
.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%; |
|
margin-top: 4px; |
|
min-width: 100px; |
|
margin-left: 22px; /* Align left edge below center of + button … */ |
|
transform: translateX(-50%); /* … then center it below button */ |
|
z-index: 1001; |
|
|
|
/* Center triangle */ |
|
&::after { |
|
left: calc(50% - 8px) !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 { |
|
// Override default icons to always hide the star icon and always show the |
|
// starred icon even when hovered or focused. |
|
& .icon-star { |
|
background-image: none; |
|
} |
|
& .icon-starred { |
|
@include icon-color('star-dark', 'actions', $color-yellow, 1, true); |
|
} |
|
} |
|
|
|
#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( $color-primary, .3 ); |
|
} |
|
.dropzone-background { |
|
background-color: rgba( $color-primary, .3 ); |
|
:hover{ |
|
box-shadow: none !important; |
|
} |
|
} |
|
|
|
|
|
#quota { |
|
margin: 0 !important; |
|
border: none; |
|
border-radius: 0; |
|
background-color: transparent; |
|
z-index:1; |
|
|
|
> a[href='#'] { |
|
// if no link is set, no mouse feedback |
|
box-shadow: none !important; |
|
&, * { |
|
cursor: default !important; |
|
} |
|
} |
|
|
|
.quota-container { |
|
height: 5px; |
|
border-radius: var(--border-radius); |
|
|
|
div { |
|
height: 100%; |
|
background-color: var(--color-primary); |
|
} |
|
} |
|
} |
|
|
|
#quotatext { |
|
padding: 0; |
|
height: 30px; |
|
line-height: 30px; |
|
} |
|
|
|
/* GRID */ |
|
#filestable.view-grid:not(.hidden) { |
|
$grid-size: 160px; |
|
$grid-pad: 14px; |
|
|
|
/* HEADER and MULTISELECT */ |
|
thead { |
|
tr { |
|
display: block; |
|
border-bottom: 1px solid var(--color-border); |
|
background-color: var(--color-main-background-translucent); |
|
th { |
|
width: auto; |
|
border: none; |
|
} |
|
} |
|
} |
|
|
|
/* MAIN FILE LIST */ |
|
tbody { |
|
display: grid; |
|
grid-template-columns: repeat(auto-fill, $grid-size); |
|
justify-content: space-around; |
|
row-gap: 15px; |
|
margin: 15px 0; |
|
|
|
// ensure search still filters tr with .hidden |
|
tr:not(.hidden) { |
|
display: block; |
|
position: relative; |
|
height: $grid-size + 44px - $grid-pad; |
|
border-radius: var(--border-radius); |
|
|
|
&:hover, &:focus, &:active, |
|
&.selected, |
|
&.searchresult, |
|
.name:focus, |
|
&.highlighted { |
|
background-color: transparent; |
|
|
|
.thumbnail-wrapper, |
|
.nametext, |
|
.fileactions { |
|
transition: background-color 0.3s ease; |
|
background-color: var(--color-background-dark); |
|
} |
|
} |
|
} |
|
|
|
td { |
|
display: inline; |
|
border-bottom: none; |
|
|
|
&.filename { |
|
.thumbnail-wrapper { |
|
min-width: 0; |
|
max-width: none; |
|
position: absolute; |
|
width: $grid-size; |
|
height: $grid-size; |
|
padding: $grid-pad; // same as action icon bottom and right padding |
|
top: 0; |
|
left: 0; |
|
z-index: -1; // make sure the default click is the link |
|
|
|
.thumbnail { |
|
width: calc(100% - 2 * #{$grid-pad}); |
|
height: calc(100% - 2 * #{$grid-pad}); //action icon padding |
|
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 |
|
*/ |
|
.favorite-mark { |
|
padding: $grid-pad; |
|
left: auto; |
|
top: -22px; // center in corner of thumbnail |
|
right: -22px; // center in corner of thumbnail |
|
} |
|
} |
|
} |
|
|
|
.name { |
|
height: 100%; |
|
border-radius: var(--border-radius); |
|
// since we're using thumbnail, name and actions bg |
|
// we need to hide the overflow for the radius to show |
|
// luckily the popovermenu is outside .name |
|
overflow: hidden; |
|
// we but the thumbnail in background to ensure |
|
// the name is the default click handler |
|
// force back the cursor which have been overrided |
|
// and disabled for some reason... |
|
cursor: pointer !important; |
|
|
|
.nametext { |
|
display: flex; |
|
height: 44px; |
|
margin-top: $grid-size - $grid-pad; |
|
text-align: center; |
|
line-height: 44px; |
|
padding: 0; |
|
|
|
.innernametext { |
|
display: inline-block; |
|
text-align: center; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
white-space: nowrap; |
|
} |
|
&:before { |
|
content: ''; |
|
flex: 1; |
|
min-width: 14px; |
|
} |
|
&:after { |
|
content: ''; |
|
flex: 1; |
|
min-width: 44px; |
|
} |
|
|
|
/* No space for extension in grid view */ |
|
.extension { |
|
display: none; |
|
} |
|
} |
|
|
|
.fileactions { |
|
height: initial; |
|
margin-top: $grid-size - $grid-pad; |
|
display: flex; |
|
align-items: center; |
|
position: absolute; |
|
right: 0; |
|
|
|
.action { |
|
padding: $grid-pad; |
|
width: 44px; |
|
height: 44px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
|
|
// hide all actions in grid view that are not the menu |
|
&:not(.action-menu) { |
|
display: none; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.fileActionsMenu { |
|
// force show the sharing entry in the dropdown menu |
|
.action-share-container.hidden { |
|
display: block !important; |
|
// avatar in shared by user dropdown menu |
|
.action-share img { |
|
padding: 6px; |
|
border-radius: 50%; |
|
} |
|
} |
|
// force show the sharing entry in the dropdown menu |
|
.action-restore-container.hidden { |
|
display: block !important; |
|
} |
|
// force show the sharing entry in the dropdown menu |
|
.action-comment-container.hidden { |
|
display: block !important; |
|
} |
|
} |
|
|
|
form { |
|
padding: 3px 14px; |
|
border-radius: var(--border-radius); |
|
|
|
input.filename { |
|
width: 100%; |
|
margin-left: 0; |
|
} |
|
} |
|
} |
|
|
|
/* No space for filesize and date in grid view */ |
|
&.filesize, |
|
&.date { |
|
display: none; |
|
} |
|
|
|
&.selection, |
|
&.filename .favorite-mark { |
|
position: absolute; |
|
top: -8px; // half the checkbox width, center on corner of thumbnail |
|
left: -8px; // half the checkbox width, center on corner of thumbnail |
|
display: flex; |
|
width: 44px; |
|
height: 44px; |
|
z-index: 10; |
|
background: transparent; |
|
|
|
label { |
|
width: 44px; |
|
height: 44px; |
|
display: inline-flex; |
|
padding: $grid-pad; // like any action icon |
|
&::before { |
|
margin: 0; |
|
width: $grid-pad; // 16px - border |
|
height: $grid-pad; // 16px - border |
|
} |
|
} |
|
} |
|
|
|
/* Position actions menu below file */ |
|
.popovermenu { |
|
left: 0; |
|
width: $grid-size - 10px; // 2 * margin |
|
margin: 0 5px; |
|
|
|
/* Ellipsize long entries, normally menu width is adjusted but for grid we use fixed width. */ |
|
.menuitem span:not(.icon) { |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
} |
|
} |
|
} |
|
} |
|
|
|
tr.hidden-file td.filename .name .nametext .extension { |
|
display: block; |
|
} |
|
|
|
/* Center align the footer file number & size summary */ |
|
tfoot { |
|
display: grid; |
|
|
|
.summary:not(.hidden) { |
|
display: inline-block; |
|
margin: 0 auto; |
|
|
|
td { |
|
padding-top: 50px; |
|
|
|
&:first-child, |
|
&.date { |
|
display: none; |
|
} |
|
|
|
.info { |
|
margin-left: 0; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
/* Grid view toggle */ |
|
#view-toggle { |
|
background-color: transparent; |
|
border: none; |
|
margin: 0; |
|
padding: 22px; |
|
opacity: .5; |
|
position: fixed; |
|
right: 0; |
|
z-index: 100; |
|
|
|
&:hover, |
|
&:focus, |
|
#showgridview:focus + & { |
|
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 { |
|
#filestable.view-grid:not(.hidden) tbody td { |
|
/* More space for filename since there is no share icon */ |
|
&.filename .name .nametext .innernametext { |
|
max-width: 124px; |
|
} |
|
|
|
/* Position actions menu correctly below 3-dot-menu */ |
|
.popovermenu { |
|
left: -80px; |
|
} |
|
} |
|
|
|
/* Right-align view toggle on link share page */ |
|
#view-toggle { |
|
position: absolute; |
|
right: 0; |
|
} |
|
} |
|
|
|
/* Hide legacy Gallery toggle */ |
|
#gallery-button { |
|
display: none; |
|
}
|
|
|