/* 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%; width: 100%; } .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: 35px; /* td has padding of 15, col width is 50 */ } 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; }