From 5c7ad6d3ec91ee81012b2888017b95fccafea422 Mon Sep 17 00:00:00 2001 From: Lukas Reschke Date: Tue, 21 Mar 2017 16:35:31 +0100 Subject: Merge some CSS files using our SCSS compiler This saves around 4 requests on the average page load. Signed-off-by: Lukas Reschke --- apps/files/css/detailsView.css | 127 ------- apps/files/css/detailsView.scss | 127 +++++++ apps/files/css/files.css | 818 ---------------------------------------- apps/files/css/files.scss | 818 ++++++++++++++++++++++++++++++++++++++++ apps/files/css/merged.scss | 4 + apps/files/css/mobile.css | 88 ----- apps/files/css/mobile.scss | 88 +++++ apps/files/css/upload.css | 204 ---------- apps/files/css/upload.scss | 204 ++++++++++ 9 files changed, 1241 insertions(+), 1237 deletions(-) delete mode 100644 apps/files/css/detailsView.css create mode 100644 apps/files/css/detailsView.scss delete mode 100644 apps/files/css/files.css create mode 100644 apps/files/css/files.scss create mode 100644 apps/files/css/merged.scss delete mode 100644 apps/files/css/mobile.css create mode 100644 apps/files/css/mobile.scss delete mode 100644 apps/files/css/upload.css create mode 100644 apps/files/css/upload.scss (limited to 'apps/files/css') diff --git a/apps/files/css/detailsView.css b/apps/files/css/detailsView.css deleted file mode 100644 index cab6a684042..00000000000 --- a/apps/files/css/detailsView.css +++ /dev/null @@ -1,127 +0,0 @@ -#app-sidebar .detailFileInfoContainer { - min-height: 50px; - padding: 15px; -} - -#app-sidebar .detailFileInfoContainer > div { - clear: both; -} - -#app-sidebar .mainFileInfoView { - margin-right: 20px; /* accommodate for close icon */ - float:left; - display:block; - width: 100%; -} - -#app-sidebar .mainFileInfoView .icon { - display: inline-block; - background-size: 16px 16px; -} - -#app-sidebar .mainFileInfoView .permalink { - padding: 6px 10px; - vertical-align: text-top; -} -#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: 15px; - font-size: 80%; - margin-left: 0; -} - -#app-sidebar .thumbnail { - width: 75px; - height: 75px; - display: inline-block; - float: left; - margin-right: 10px; - background-size: 75px; -} - -#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% - 36px); /* 36px is the with of the copy link icon */ - display: inline-block; - padding: 5px 0; - margin: -5px 0; -} - -#app-sidebar .file-details { - color: #999; -} - -#app-sidebar .action-favorite { - vertical-align: sub; - padding: 10px; - margin: -10px; -} - -#app-sidebar .action-favorite > span{ - opacity: .7 !important; -} - -#app-sidebar .detailList { - float: left; -} - -#app-sidebar .close { - position: absolute; - top: 0; - right: 0; - padding: 15px; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; - opacity: .5; -} diff --git a/apps/files/css/detailsView.scss b/apps/files/css/detailsView.scss new file mode 100644 index 00000000000..cab6a684042 --- /dev/null +++ b/apps/files/css/detailsView.scss @@ -0,0 +1,127 @@ +#app-sidebar .detailFileInfoContainer { + min-height: 50px; + padding: 15px; +} + +#app-sidebar .detailFileInfoContainer > div { + clear: both; +} + +#app-sidebar .mainFileInfoView { + margin-right: 20px; /* accommodate for close icon */ + float:left; + display:block; + width: 100%; +} + +#app-sidebar .mainFileInfoView .icon { + display: inline-block; + background-size: 16px 16px; +} + +#app-sidebar .mainFileInfoView .permalink { + padding: 6px 10px; + vertical-align: text-top; +} +#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: 15px; + font-size: 80%; + margin-left: 0; +} + +#app-sidebar .thumbnail { + width: 75px; + height: 75px; + display: inline-block; + float: left; + margin-right: 10px; + background-size: 75px; +} + +#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% - 36px); /* 36px is the with of the copy link icon */ + display: inline-block; + padding: 5px 0; + margin: -5px 0; +} + +#app-sidebar .file-details { + color: #999; +} + +#app-sidebar .action-favorite { + vertical-align: sub; + padding: 10px; + margin: -10px; +} + +#app-sidebar .action-favorite > span{ + opacity: .7 !important; +} + +#app-sidebar .detailList { + float: left; +} + +#app-sidebar .close { + position: absolute; + top: 0; + right: 0; + padding: 15px; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; + opacity: .5; +} diff --git a/apps/files/css/files.css b/apps/files/css/files.css deleted file mode 100644 index 54ed05385fa..00000000000 --- a/apps/files/css/files.css +++ /dev/null @@ -1,818 +0,0 @@ -/* 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); -} 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); +} diff --git a/apps/files/css/merged.scss b/apps/files/css/merged.scss new file mode 100644 index 00000000000..d65bac512f1 --- /dev/null +++ b/apps/files/css/merged.scss @@ -0,0 +1,4 @@ +@import 'files.scss'; +@import 'upload.scss'; +@import 'mobile.scss'; +@import 'detailsView.scss'; diff --git a/apps/files/css/mobile.css b/apps/files/css/mobile.css deleted file mode 100644 index 4a5abd2b73c..00000000000 --- a/apps/files/css/mobile.css +++ /dev/null @@ -1,88 +0,0 @@ -/* 938 = table min-width(688) + app-navigation width: 250 - 769 = size where app-navigation (768) is hidden +1 - 688 = table min-width */ -@media only screen and (max-width: 938px) and (min-width: 769px), only screen and (max-width: 688px) { - -.app-files #app-content.dir-drop{ - background-color: rgba(255, 255, 255, 1)!important; -} - -/* don’t require a minimum width for files table */ -#body-user #filestable { - min-width: initial !important; -} - -/* hide size and date columns */ -table th#headerSize, -table td.filesize, -table th#headerDate, -table td.date { - display: none; -} - -/* remove padding to let border bottom fill the whole width*/ -table td { - padding: 0; -} -/* and accordingly fix left margin of file list summary on mobile */ -.summary .info { - margin-left: 105px; -} - -/* remove shift for multiselect bar to account for missing navigation */ -table.multiselect thead { - padding-left: 0; -} - -/* restrict length of displayed filename to prevent overflow */ -table td.filename .nametext { - width: 100%; -} - -#fileList a.action.action-menu img { - padding-left: 0; -} - -#fileList .fileActionsMenu { - margin-right: 6px; -} -/* hide text of the share action on mobile */ -#fileList a.action-share span { - display: none; -} -#fileList a.action.action-favorite { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)" !important; - opacity: .7 !important; -} -#fileList a.action.action-favorite { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)" !important; - opacity: .3 !important; -} - -/* ellipsis on file names */ -table td.filename .nametext .innernametext { - max-width: calc(100% - 175px); -} - -/* proper notification area for multi line messages */ -#notification-container { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; -} - -/* shorten elements for mobile */ -#uploadprogressbar, #uploadprogressbar .label.inner { - width: 50px; -} -/* hide desktop-only parts */ -#uploadprogressbar .desktop { - display: none !important; -} -#uploadprogressbar .mobile { - display: block !important; -} - -} diff --git a/apps/files/css/mobile.scss b/apps/files/css/mobile.scss new file mode 100644 index 00000000000..4a5abd2b73c --- /dev/null +++ b/apps/files/css/mobile.scss @@ -0,0 +1,88 @@ +/* 938 = table min-width(688) + app-navigation width: 250 + 769 = size where app-navigation (768) is hidden +1 + 688 = table min-width */ +@media only screen and (max-width: 938px) and (min-width: 769px), only screen and (max-width: 688px) { + +.app-files #app-content.dir-drop{ + background-color: rgba(255, 255, 255, 1)!important; +} + +/* don’t require a minimum width for files table */ +#body-user #filestable { + min-width: initial !important; +} + +/* hide size and date columns */ +table th#headerSize, +table td.filesize, +table th#headerDate, +table td.date { + display: none; +} + +/* remove padding to let border bottom fill the whole width*/ +table td { + padding: 0; +} +/* and accordingly fix left margin of file list summary on mobile */ +.summary .info { + margin-left: 105px; +} + +/* remove shift for multiselect bar to account for missing navigation */ +table.multiselect thead { + padding-left: 0; +} + +/* restrict length of displayed filename to prevent overflow */ +table td.filename .nametext { + width: 100%; +} + +#fileList a.action.action-menu img { + padding-left: 0; +} + +#fileList .fileActionsMenu { + margin-right: 6px; +} +/* hide text of the share action on mobile */ +#fileList a.action-share span { + display: none; +} +#fileList a.action.action-favorite { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)" !important; + opacity: .7 !important; +} +#fileList a.action.action-favorite { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)" !important; + opacity: .3 !important; +} + +/* ellipsis on file names */ +table td.filename .nametext .innernametext { + max-width: calc(100% - 175px); +} + +/* proper notification area for multi line messages */ +#notification-container { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; +} + +/* shorten elements for mobile */ +#uploadprogressbar, #uploadprogressbar .label.inner { + width: 50px; +} +/* hide desktop-only parts */ +#uploadprogressbar .desktop { + display: none !important; +} +#uploadprogressbar .mobile { + display: block !important; +} + +} diff --git a/apps/files/css/upload.css b/apps/files/css/upload.css deleted file mode 100644 index 6f337a27578..00000000000 --- a/apps/files/css/upload.css +++ /dev/null @@ -1,204 +0,0 @@ -#upload { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - 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: .65; -} -.file_upload_target { display:none; } -.file_upload_form { display:inline; float:left; margin:0; padding:0; cursor:pointer; overflow:visible; } - -#uploadprogresswrapper, #uploadprogresswrapper * { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - 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 { - position:relative; - float: left; - width: 200px; - height: 36px; - display:inline-block; - text-align: center; -} -#uploadprogressbar .ui-progressbar-value.ui-widget-header.ui-corner-left { - height: 100%; - top: 0px; - left: 0px; - position: absolute; - overflow: hidden; -} -#uploadprogressbar .label { - top: 6px; - opacity: 1; - overflow: hidden; - white-space: nowrap; - font-weight: normal; -} -#uploadprogressbar .label.inner { - color:white; - position: absolute; - display: block; - width: 200px; -} -#uploadprogressbar .label.outer { - position: relative; - color: black; -} -#uploadprogressbar .desktop { - display: block; -} -#uploadprogressbar .mobile { - display: none; -} - -#uploadprogressbar + stop { - font-size: 13px; -} - -.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:black; -} -.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: rgba(255, 255, 140, 1); } - 100% { background-color: rgba(0, 0, 0, 0); } -} -@-moz-keyframes highlightAnimation { - 0% { background-color: rgba(255, 255, 140, 1); } - 100% { background-color: rgba(0, 0, 0, 0); } -} -@-o-keyframes highlightAnimation { - 0% { background-color: rgba(255, 255, 140, 1); } - 100% { background-color: rgba(0, 0, 0, 0); } -} -@keyframes highlightAnimation { - 0% { background-color: rgba(255, 255, 140, 1); } - 100% { background-color: rgba(0, 0, 0, 0); } -} diff --git a/apps/files/css/upload.scss b/apps/files/css/upload.scss new file mode 100644 index 00000000000..6f337a27578 --- /dev/null +++ b/apps/files/css/upload.scss @@ -0,0 +1,204 @@ +#upload { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + 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: .65; +} +.file_upload_target { display:none; } +.file_upload_form { display:inline; float:left; margin:0; padding:0; cursor:pointer; overflow:visible; } + +#uploadprogresswrapper, #uploadprogresswrapper * { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + 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 { + position:relative; + float: left; + width: 200px; + height: 36px; + display:inline-block; + text-align: center; +} +#uploadprogressbar .ui-progressbar-value.ui-widget-header.ui-corner-left { + height: 100%; + top: 0px; + left: 0px; + position: absolute; + overflow: hidden; +} +#uploadprogressbar .label { + top: 6px; + opacity: 1; + overflow: hidden; + white-space: nowrap; + font-weight: normal; +} +#uploadprogressbar .label.inner { + color:white; + position: absolute; + display: block; + width: 200px; +} +#uploadprogressbar .label.outer { + position: relative; + color: black; +} +#uploadprogressbar .desktop { + display: block; +} +#uploadprogressbar .mobile { + display: none; +} + +#uploadprogressbar + stop { + font-size: 13px; +} + +.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:black; +} +.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: rgba(255, 255, 140, 1); } + 100% { background-color: rgba(0, 0, 0, 0); } +} +@-moz-keyframes highlightAnimation { + 0% { background-color: rgba(255, 255, 140, 1); } + 100% { background-color: rgba(0, 0, 0, 0); } +} +@-o-keyframes highlightAnimation { + 0% { background-color: rgba(255, 255, 140, 1); } + 100% { background-color: rgba(0, 0, 0, 0); } +} +@keyframes highlightAnimation { + 0% { background-color: rgba(255, 255, 140, 1); } + 100% { background-color: rgba(0, 0, 0, 0); } +} -- cgit v1.2.3