diff options
author | Roeland Jago Douma <rullzer@users.noreply.github.com> | 2017-03-22 08:46:10 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-03-22 08:46:10 +0100 |
commit | 16a0bccefa9d1252de61f816f96a0993857bb61b (patch) | |
tree | 7832855ea1eb25bc6f4d04fc3e6efe7ee7ad908f /apps/files/css/files.scss | |
parent | c6c589647466b1e723af3a7cb0865b7186f06c45 (diff) | |
parent | 1084cdb6135e90d48f511ee7d7141900bb769273 (diff) | |
download | nextcloud-server-16a0bccefa9d1252de61f816f96a0993857bb61b.tar.gz nextcloud-server-16a0bccefa9d1252de61f816f96a0993857bb61b.zip |
Merge pull request #3972 from nextcloud/merge-some-more-css
Merge some CSS files using our SCSS compiler
Diffstat (limited to 'apps/files/css/files.scss')
-rw-r--r-- | apps/files/css/files.scss | 818 |
1 files changed, 818 insertions, 0 deletions
diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss new file mode 100644 index 00000000000..54ed05385fa --- /dev/null +++ b/apps/files/css/files.scss @@ -0,0 +1,818 @@ +/* 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:32px; 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.hidden { display: none; } + +.actions.creatable { + position: relative; + z-index: -30; +} + +#trash { + margin-right: 8px; + float: right; + z-index: 1010; + padding: 10px; + font-weight: normal; +} + +.newFileMenu .error, #fileList .error { + color: #e9322d; + border-color: #e9322d; + -webkit-box-shadow: 0 0 6px #f8b9b7; + -moz-box-shadow: 0 0 6px #f8b9b7; + box-shadow: 0 0 6px #f8b9b7; +} + +/* FILE TABLE */ +#filestable { + position: relative; + width: 100%; +} + +#filestable.has-controls { + top: 44px; +} + +/* make sure there's enough room for the file actions */ +#body-user #filestable { + min-width: 688px; /* 768 (mobile break) - 80 (nav width) */ +} +#body-user #controls { + min-width: 688px; /* 768 (mobile break) - 80 (nav width) */ +} + +#filestable tbody tr { + background-color: #fff; + height: 51px; +} + +/* fit app list view heights */ +.app-files #app-content>.viewcontainer { + min-height: 0%; +} + +.app-files #app-content { + transition: background-color 0.3s ease; + overflow-x: hidden; +} + +.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, .file-drag #filestable tbody tr, .file-drag #filestable tbody tr:hover{ + background-color: rgba(0, 0, 0, 0)!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 { + background-image: url('../img/folder.svg?v=1'); +} +.nav-icon-recent { + background-image: url('../img/recent.svg?v=1'); +} +.nav-icon-favorites { + background-image: url('../img/star.svg?v=1'); +} +.nav-icon-sharingin, +.nav-icon-sharingout { + background-image: url('../img/share.svg?v=1'); +} +.nav-icon-sharinglinks { + background-image: url('../img/public.svg?v=1'); +} +.nav-icon-extstoragemounts { + background-image: url('../img/external.svg?v=1'); +} +.nav-icon-trashbin { + background-image: url('../img/delete.svg?v=1'); +} + +#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; + background-color: #fff; + height: 40px; +} +#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, +table tr.mouseOver td { + transition: background-color 0.3s ease; + background-color: #f8f8f8; +} +tbody a { color:#000; } + +span.conflict-path, span.extension, span.uploading, td.date { + color: #999; +} +span.conflict-path, span.extension { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; + filter: alpha(opacity=70); + opacity: .7; + -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 { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + filter: alpha(opacity=100); + opacity: 1; + color: #777; +} + +table th, table th a { + color: #999; +} +table.multiselect th a { + color: #000; +} +table th .columntitle { + display: block; + padding: 15px; + height: 50px; + box-sizing: border-box; + -moz-box-sizing: border-box; + vertical-align: middle; +} +table th .columntitle.name { + padding-left: 5px; + padding-right: 80px; + margin-left: 50px; +} + +table th .sort-indicator { + width: 10px; + height: 8px; + margin-left: 5px; + display: inline-block; + vertical-align: text-bottom; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; + filter: alpha(opacity=30); + 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 #eee; + 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; +} +.has-favorites #headerName-container { + padding-left: 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 */ +#filestable.multiselect { + top: 95px; +} +table.multiselect thead { + position: fixed; + top: 89px; + z-index: 10; + -moz-box-sizing: border-box; + box-sizing: border-box; + left: 250px; /* sidebar */ +} + +table thead th { + background-color: #fff; +} +table.multiselect thead th { + background-color: rgba(255, 255, 255, 0.95); /* like controls bar */ + color: #000; + font-weight: bold; + border-bottom: 0; +} + +#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 { + position:relative; /* Firefox needs to explicitly have this default set … */ + -moz-box-sizing: border-box; + box-sizing: border-box; + display: block; + height: 50px; + line-height: 50px; + padding: 0; +} +table td.filename .thumbnail { + display: inline-block; + width: 32px; + height: 32px; + margin-left: 8px; + margin-top: 9px; + cursor: pointer; + float: left; + position: absolute; + z-index: 4; +} +table td.filename input.filename { + width: 70%; + margin-top: 9px; + margin-left: 48px; + cursor: text; +} +.has-favorites table td.filename input.filename { + margin-left: 52px; +} + +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, .uploadtext, .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 .nametext { + position: absolute; + left: 55px; + padding: 0; + overflow: hidden; + text-overflow: ellipsis; + max-width: 800px; + height: 100%; +} +.has-favorites #fileList td.filename a.name { + left: 50px; + margin-right: 50px; +} + +.hide-hidden-files #fileList tr.hidden-file, +.hide-hidden-files #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; + display: inline-block; + vertical-align: top; +} + +@media only screen and (min-width: 1500px) { + table td.filename .nametext .innernametext { + max-width: 790px; + } + .with-app-sidebar table td.filename .nametext .innernametext { + max-width: 390px; + } +} +@media only screen and (min-width: 1366px) and (max-width: 1500px) { + table td.filename .nametext .innernametext { + max-width: 660px; + } + .with-app-sidebar table td.filename .nametext .innernametext { + max-width: 290px; + } +} +@media only screen and (min-width: 1200px) and (max-width: 1366px) { + table td.filename .nametext .innernametext { + max-width: 500px; + } + .with-app-sidebar table td.filename .nametext .innernametext { + max-width: 230px; + } +} +@media only screen and (min-width: 1100px) and (max-width: 1200px) { + table td.filename .nametext .innernametext { + max-width: 400px; + } + .with-app-sidebar table td.filename .nametext .innernametext { + max-width: 230px; + } +} +@media only screen and (min-width: 1000px) and (max-width: 1100px) { + table td.filename .nametext .innernametext { + max-width: 310px; + } + .with-app-sidebar table td.filename .nametext .innernametext { + max-width: 230px; + } +} +@media only screen and (min-width: 768px) and (max-width: 1000px) { + table td.filename .nametext .innernametext { + max-width: 240px; + } + .with-app-sidebar table td.filename .nametext .innernametext { + max-width: 230px; + } +} + +/* 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; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; + filter: alpha(opacity=50); + opacity: .5; +} + +.ie8 input[type="checkbox"]{ + padding: 0; +} + +/* File checkboxes */ +html:not(.ie8) #fileList tr td.filename>.selectCheckBox + label:before { + opacity: 0; + position: absolute; + bottom: 4px; + right: 0; + z-index: 10; +} +html.ie8 #fileList tr td.filename>.selectCheckBox { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + opacity: 0; + float: left; + top: 0; + margin: 32px 0 4px 32px; /* bigger clickable area doesn’t work in FF width:2.8em; height:2.4em;*/ +} + +/* Show checkbox when hovering, checked, or selected */ +html.ie8 #fileList tr:hover td.filename>.selectCheckBox, +html.ie8 #fileList tr:focus td.filename>.selectCheckBox, +html.ie8 #fileList tr td.filename>.selectCheckBox:checked, +html.ie8 #fileList tr.selected td.filename>.selectCheckBox, +html:not(.ie8) #fileList tr:hover td.filename>.selectCheckBox + label:before, +html:not(.ie8) #fileList tr:focus td.filename>.selectCheckBox + label:before, +html:not(.ie8) #fileList tr td.filename>.selectCheckBox:checked + label:before, +html:not(.ie8) #fileList tr.selected td.filename>.selectCheckBox + label:before { + opacity: 1; +} +html.ie8 #fileList tr:hover td.filename>.selectCheckBox, +html.ie8 #fileList tr:focus td.filename>.selectCheckBox, +html.ie8 #fileList tr td.filename>.selectCheckBox[checked=checked], +html.ie8 #fileList tr.selected td.filename>.selectCheckBox { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + filter: alpha(opacity=100); +} + +/* Use label to have bigger clickable size for checkbox */ +#fileList tr td.filename>.selectCheckBox + label, +.select-all + label { + background-position: 30px 30px; + height: 50px; + position: absolute; + width: 50px; + z-index: 5; +} +#fileList tr td.filename>.selectCheckBox { + /* sometimes checkbox height is bigger (KDE/Qt), so setting to absolute + * to prevent it to increase the height */ + position: absolute; + z-index: 10; +} +.select-all + label { + top: 0; +} +.ie8 .select-all, +.select-all + label:before { + position: absolute; + top: 18px; + left: 18px; + z-index: 10; +} +.has-favorites .select-all { + left: 68px; +} + +#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 .action-favorite { + display: block; + float: left; + width: 30px; + line-height: 100%; + text-align: center; +} + +#uploadsize-message,#delete-confirm { display:none; } + +/* File actions */ +.fileactions { + position: absolute; + right: 0; +} + +.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 { + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + filter:alpha(opacity=100); + opacity: 1 !important; + display: inline !important; +} + +#fileList img.move2trash { display:inline; margin:-8px 0; padding:16px 8px 16px 8px !important; float:right; } + +#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: absolute; + top: 0; + right: 0; +} +.selectedActions a { + display: inline; + font-size: 11px; + line-height: 50px; + padding: 18px 5px; +} +.selectedActions a.delete-selected { + padding-right: 15px; +} +.selectedActions a.hidden { + display: none; +} +.selectedActions a img { + position:relative; + vertical-align: text-bottom; + margin-bottom: -1px; +} + +html.ie8 .column-mtime .selectedActions { + top: -95px; +} + +#fileList a.action { + display: inline; + padding: 17px 8px; + line-height: 50px; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + opacity: 0; + display:none; +} +#fileList a.action.action-share { + padding: 17px 14px; +} + +#fileList a.action.action-menu { + padding-top: 17px; + padding-bottom: 17px; + padding-left: 14px; + padding-right: 14px; +} + +.ie8 #fileList a.action img, +#fileList tr:hover a.action, +#fileList a.action.permanent, +#fileList tr:focus a.action, +#fileList a.action.permanent, +#fileList tr:hover a.action.no-permission:hover, +#fileList tr:focus a.action.no-permission:focus, +/*#fileList .name:focus .action,*/ +/* also enforce the low opacity for disabled links that are hovered/focused */ +.ie8 #fileList a.action.disabled:hover img, +#fileList tr:hover a.action.disabled:hover, +#fileList tr:focus a.action.disabled:focus, +#fileList .name:focus a.action.disabled:focus, +#fileList a.action.disabled img { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; + filter: alpha(opacity=30); + opacity: .3; +} +.ie8 #fileList a.action:hover img, +#fileList tr a.action.disabled.action-download, +#fileList tr:hover a.action.disabled.action-download:hover, +#fileList tr:focus a.action.disabled.action-download:focus, +#fileList tr:hover a.action:hover, +#fileList tr:focus a.action:focus, +#fileList .name:focus a.action:focus { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; + filter: alpha(opacity=70); + opacity: .7; + display:inline; +} +#fileList tr a.action.disabled { + background: none; +} + +/* show share action of shared items darker to distinguish from non-shared */ +#fileList a.action.action-share.permanent.shared-style, +/* show hovered permanent entries darker */ +#fileList tr a.action.action.permanent:hover, +#fileList tr a.action.action.permanent:focus { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)" !important; + filter: alpha(opacity=70) !important; + opacity: .7 !important; + display:inline; +} +/* always show actions on mobile, not only on hover */ +#fileList a.action.permanent { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)" !important; + filter: alpha(opacity=30) !important; + opacity: .3 !important; + display: inline !important; +} + +/* properly display actions in the popover menu */ +#fileList .popovermenu .action { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important; + filter: alpha(opacity=50) !important; + opacity: .5 !important; +} +#fileList .popovermenu .action:hover, +#fileList .popovermenu .action:focus { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important; + filter: alpha(opacity=100) !important; + opacity: 1 !important; +} + + +#selectedActionsList a.download.disabled, +#fileList tr a.action.action-download.disabled { + color: #000000; +} + +#fileList tr:hover a.action.disabled:hover * { + cursor: default; +} + +.summary { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; + filter: alpha(opacity=30); + opacity: .3; + /* add whitespace to bottom of files list to correctly show dropdowns */ + height: 300px; +} +.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: 40px; +} +.has-favorites .summary .info { + margin-left: 90px; +} + +table.dragshadow { + width:auto; +} +table.dragshadow td.filename { + padding-left:60px; + padding-right:16px; + height: 36px; +} +table.dragshadow td.size { + padding-right:8px; +} +#upgrade { + width: 400px; + position: absolute; + top: 200px; + left: 50%; + text-align: center; + margin-left: -200px; +} +.mask { + z-index: 50; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #fff; + background-repeat: no-repeat no-repeat; + background-position: 50%; + opacity: 0.7; + filter: alpha(opacity=70); + transition: opacity 100ms; + -moz-transition: opacity 100ms; + -o-transition: opacity 100ms; + -ms-transition: opacity 100ms; + -webkit-transition: opacity 100ms; +} +.mask.transparent{ + opacity: 0; +} + +html.ie8 #controls .button.new { + padding-right: 0; +} + +.newFileMenu { + font-weight: 300; + top: 100%; + margin-top: 4px; + min-width: 100px; + margin-left: 7px; + z-index: 1001; +} + +.newFileMenu .filenameform { + display: inline-block; +} + +.newFileMenu .filenameform input { + margin: 2px 0; +} + +#fileList .popovermenu .action { + color: #000; +} + +#filestable .filename .action .icon, +#filestable .selectedActions a .icon, +#controls .actions .button .icon { + display: inline-block; + vertical-align: middle; + background-size: 16px 16px; +} + +#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; +} +.app-files .actions .button.new .icon { + margin-bottom: 2px; +} + +.canDrop, +#filestable tbody tr.canDrop { + background-color: rgba(255, 255, 140, 1); +} |