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/appinfo/info.xml | 2 +- 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 +++++ apps/files/lib/Controller/ViewController.php | 5 +- apps/files_sharing/appinfo/app.php | 5 +- .../files_sharing/css/mergedAdditionalScripts.scss | 2 + apps/files_sharing/css/mobile.css | 62 -- apps/files_sharing/css/mobile.scss | 62 ++ apps/files_sharing/css/public.css | 217 ------ apps/files_sharing/css/public.scss | 217 ++++++ apps/files_sharing/css/publicView.scss | 2 + apps/files_sharing/css/sharebreadcrumb.css | 34 - apps/files_sharing/css/sharebreadcrumb.scss | 34 + apps/files_sharing/css/sharetabview.css | 149 ---- apps/files_sharing/css/sharetabview.scss | 149 ++++ .../lib/Controller/ShareController.php | 6 +- 23 files changed, 1712 insertions(+), 1712 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 create mode 100644 apps/files_sharing/css/mergedAdditionalScripts.scss delete mode 100644 apps/files_sharing/css/mobile.css create mode 100644 apps/files_sharing/css/mobile.scss delete mode 100644 apps/files_sharing/css/public.css create mode 100644 apps/files_sharing/css/public.scss create mode 100644 apps/files_sharing/css/publicView.scss delete mode 100644 apps/files_sharing/css/sharebreadcrumb.css create mode 100644 apps/files_sharing/css/sharebreadcrumb.scss delete mode 100644 apps/files_sharing/css/sharetabview.css create mode 100644 apps/files_sharing/css/sharetabview.scss (limited to 'apps') diff --git a/apps/files/appinfo/info.xml b/apps/files/appinfo/info.xml index 2bb4d98c158..d956a237767 100644 --- a/apps/files/appinfo/info.xml +++ b/apps/files/appinfo/info.xml @@ -6,7 +6,7 @@ AGPL Robin Appelman, Vincent Petry - 1.7.0 + 1.7.1 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); } +} diff --git a/apps/files/lib/Controller/ViewController.php b/apps/files/lib/Controller/ViewController.php index 788840ff1cc..a1f01cb8a38 100644 --- a/apps/files/lib/Controller/ViewController.php +++ b/apps/files/lib/Controller/ViewController.php @@ -152,9 +152,6 @@ class ViewController extends Controller { $nav = new \OCP\Template('files', 'appnavigation', ''); // Load the files we need - \OCP\Util::addStyle('files', 'files'); - \OCP\Util::addStyle('files', 'upload'); - \OCP\Util::addStyle('files', 'mobile'); \OCP\Util::addScript('files', 'app'); \OCP\Util::addScript('files', 'file-upload'); \OCP\Util::addScript('files', 'newfilemenu'); @@ -179,7 +176,7 @@ class ViewController extends Controller { \OCP\Util::addScript('files', 'detailtabview'); \OCP\Util::addScript('files', 'mainfileinfodetailview'); \OCP\Util::addScript('files', 'detailsview'); - \OCP\Util::addStyle('files', 'detailsView'); + \OCP\Util::addStyle('files', 'merged'); \OC_Util::addVendorScript('core', 'handlebars/handlebars'); diff --git a/apps/files_sharing/appinfo/app.php b/apps/files_sharing/appinfo/app.php index 8228e761592..d8de40e9751 100644 --- a/apps/files_sharing/appinfo/app.php +++ b/apps/files_sharing/appinfo/app.php @@ -41,13 +41,10 @@ $eventDispatcher->addListener( \OCP\Util::addScript('files_sharing', 'share'); \OCP\Util::addScript('files_sharing', 'sharetabview'); \OCP\Util::addScript('files_sharing', 'sharebreadcrumbview'); - \OCP\Util::addStyle('files_sharing', 'sharetabview'); - \OCP\Util::addStyle('files_sharing', 'sharebreadcrumb'); + \OCP\Util::addStyle('files_sharing', 'mergedAdditionalScripts'); } ); -// \OCP\Util::addStyle('files_sharing', 'sharetabview'); - $config = \OC::$server->getConfig(); if ($config->getAppValue('core', 'shareapi_enabled', 'yes') === 'yes') { \OCA\Files\App::getNavigationManager()->add(function () { diff --git a/apps/files_sharing/css/mergedAdditionalScripts.scss b/apps/files_sharing/css/mergedAdditionalScripts.scss new file mode 100644 index 00000000000..a95ad59967f --- /dev/null +++ b/apps/files_sharing/css/mergedAdditionalScripts.scss @@ -0,0 +1,2 @@ +@import 'sharetabview.scss'; +@import 'sharebreadcrumb.scss'; diff --git a/apps/files_sharing/css/mobile.css b/apps/files_sharing/css/mobile.css deleted file mode 100644 index f24ada1898a..00000000000 --- a/apps/files_sharing/css/mobile.css +++ /dev/null @@ -1,62 +0,0 @@ -@media only screen and (max-width: 768px) { - -/* make header scroll up for single shares, more view of content on small screens */ -#header.share-file { - position: absolute !important; -} - -/* hide text of download button, only show icon */ -#download-text { - display: none; -} - -/* hide size and date columns */ -table th#headerSize, -table td.filesize, -table th#headerDate, -table td.date { - display: none; -} - -/* restrict length of displayed filename to prevent overflow */ -table td.filename .nametext { - max-width: 75% !important; -} - -/* on mobile, show single shared image at full width without margin */ -#imgframe { - width: 100%; - padding: 0; - margin-bottom: 35px; -} -/* some margin for the file type icon */ -#imgframe .publicpreview { - margin-top: 32px; -} - -/* always show actions on mobile */ -#fileList a.action { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)" !important; - filter: alpha(opacity=20) !important; - opacity: .2 !important; - display: inline !important; -} -/* some padding for better clickability */ -#fileList a.action img { - padding: 0 6px 0 12px; -} -/* hide text of the actions on mobile */ -#fileList a.action:not(.menuitem) span { - display: none; -} - -/* ellipsis on file names */ -.nametext { - width: 60%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - - -} diff --git a/apps/files_sharing/css/mobile.scss b/apps/files_sharing/css/mobile.scss new file mode 100644 index 00000000000..f24ada1898a --- /dev/null +++ b/apps/files_sharing/css/mobile.scss @@ -0,0 +1,62 @@ +@media only screen and (max-width: 768px) { + +/* make header scroll up for single shares, more view of content on small screens */ +#header.share-file { + position: absolute !important; +} + +/* hide text of download button, only show icon */ +#download-text { + display: none; +} + +/* hide size and date columns */ +table th#headerSize, +table td.filesize, +table th#headerDate, +table td.date { + display: none; +} + +/* restrict length of displayed filename to prevent overflow */ +table td.filename .nametext { + max-width: 75% !important; +} + +/* on mobile, show single shared image at full width without margin */ +#imgframe { + width: 100%; + padding: 0; + margin-bottom: 35px; +} +/* some margin for the file type icon */ +#imgframe .publicpreview { + margin-top: 32px; +} + +/* always show actions on mobile */ +#fileList a.action { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)" !important; + filter: alpha(opacity=20) !important; + opacity: .2 !important; + display: inline !important; +} +/* some padding for better clickability */ +#fileList a.action img { + padding: 0 6px 0 12px; +} +/* hide text of the actions on mobile */ +#fileList a.action:not(.menuitem) span { + display: none; +} + +/* ellipsis on file names */ +.nametext { + width: 60%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + + +} diff --git a/apps/files_sharing/css/public.css b/apps/files_sharing/css/public.css deleted file mode 100644 index 9c8c4a66630..00000000000 --- a/apps/files_sharing/css/public.css +++ /dev/null @@ -1,217 +0,0 @@ -#content { - height: initial; - min-height: calc(100vh - 120px); -} - -/* force layout to make sure the content element's height matches its contents' height */ -.ie #content { - display: inline-block; -} - -#preview { - background: #fff; - text-align: center; -} - -#preview .notCreatable { - display: none; -} - -#noPreview { - display:none; - padding-top:80px; -} - -#imgframe { - height:75%; - padding-bottom:32px; - padding-top:32px; - width:80%; - margin:0 auto; -} - - -#imgframe img, -#imgframe video { - max-height: 100% !important; - max-width: 100% !important; -} -#imgframe video { - width: 854px; - height: 480px; -} - -#imgframe .text-preview { - display: inline-block; - position: relative; - text-align: left; - white-space: pre-wrap; - overflow-y: hidden; - height: auto; - min-height: 200px; - max-height: 800px; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -#imgframe .ellipsis { - font-size: 1.2em; -} - -/* fix multiselect bar offset on shared page */ -thead { - left: 0 !important; -} - -#data-upload-form { - position: relative; - right: 0; - height: 32px; - overflow: hidden; - padding: 0; - float: right; - display: inline; - margin: 0; -} - - -.directDownload, -.directLink { - margin-bottom: 20px; -} - -/* keep long file names in one line to not overflow download button on mobile */ -.directDownload #downloadFile { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 90%; - display: inline-block; - margin-left: auto; - margin-right: auto; -} - -.directLink label { - font-weight: normal; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; - filter: alpha(opacity=50); - opacity: .5; -} -.directLink input { - margin-left: 5px; - width: 300px; - max-width: 90%; -} - -/* header buttons */ -#details { - display: inline-flex; -} -#details button, -#details input, -#details .button { - margin: 0 5px; - line-height: normal; -} -#details button:hover, -#details input:hover, -#details .button:hover { - /* No */ - border-color: rgba(0,0,0,0.3) !important; -} - -/* within #save */ -#save .save-form { - position: relative; -} - -#remote_address { - width: 200px; - - margin-right: 4px; - height: 31px; -} - -#save-button-confirm { - position: absolute; - background-color: transparent; - border: none; - margin: 2px 4px !important; - right: 7px; - top: -8px; - height: 30px; -} - -#public-upload .avatardiv { - margin: 0 auto; -} - -#emptycontent.has-disclaimer { - margin-top: 10vh; -} - -#public-upload #emptycontent h2 { - margin: 10px 0 5px 0; -} - -#public-upload #emptycontent h2+p { - margin-bottom: 30px; -} - -#public-upload #emptycontent .icon-folder { - height: 16px; - width: 16px; - background-size: 16px; - display: inline-block; - vertical-align: text-top; - margin-bottom: 0; - margin-right: 5px; - opacity: 1; -} - -#public-upload #emptycontent .button { - display: inline-block; - height: auto; - width: auto; - background-size: 16px; - background-position: 16px; - opacity: .7; - font-size: 20px; - line-height: initial; - margin: 20px; - padding: 10px 20px; - padding-left: 42px; -} - -#public-upload #emptycontent ul { - width: 160px; - margin: 5px auto; - text-align: left; -} - -#public-upload #emptycontent li { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - padding: 7px 0; -} - -#public-upload #emptycontent li img { - vertical-align: text-bottom; - margin-right: 5px; -} - -#public-upload li span.icon-loading-small { - padding-left: 18px; - margin-right: 7px; -} - -.disclaimer { - margin: -20px auto 30px; - max-width: 400px; - text-align: left; -} diff --git a/apps/files_sharing/css/public.scss b/apps/files_sharing/css/public.scss new file mode 100644 index 00000000000..9c8c4a66630 --- /dev/null +++ b/apps/files_sharing/css/public.scss @@ -0,0 +1,217 @@ +#content { + height: initial; + min-height: calc(100vh - 120px); +} + +/* force layout to make sure the content element's height matches its contents' height */ +.ie #content { + display: inline-block; +} + +#preview { + background: #fff; + text-align: center; +} + +#preview .notCreatable { + display: none; +} + +#noPreview { + display:none; + padding-top:80px; +} + +#imgframe { + height:75%; + padding-bottom:32px; + padding-top:32px; + width:80%; + margin:0 auto; +} + + +#imgframe img, +#imgframe video { + max-height: 100% !important; + max-width: 100% !important; +} +#imgframe video { + width: 854px; + height: 480px; +} + +#imgframe .text-preview { + display: inline-block; + position: relative; + text-align: left; + white-space: pre-wrap; + overflow-y: hidden; + height: auto; + min-height: 200px; + max-height: 800px; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +#imgframe .ellipsis { + font-size: 1.2em; +} + +/* fix multiselect bar offset on shared page */ +thead { + left: 0 !important; +} + +#data-upload-form { + position: relative; + right: 0; + height: 32px; + overflow: hidden; + padding: 0; + float: right; + display: inline; + margin: 0; +} + + +.directDownload, +.directLink { + margin-bottom: 20px; +} + +/* keep long file names in one line to not overflow download button on mobile */ +.directDownload #downloadFile { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 90%; + display: inline-block; + margin-left: auto; + margin-right: auto; +} + +.directLink label { + font-weight: normal; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; + filter: alpha(opacity=50); + opacity: .5; +} +.directLink input { + margin-left: 5px; + width: 300px; + max-width: 90%; +} + +/* header buttons */ +#details { + display: inline-flex; +} +#details button, +#details input, +#details .button { + margin: 0 5px; + line-height: normal; +} +#details button:hover, +#details input:hover, +#details .button:hover { + /* No */ + border-color: rgba(0,0,0,0.3) !important; +} + +/* within #save */ +#save .save-form { + position: relative; +} + +#remote_address { + width: 200px; + + margin-right: 4px; + height: 31px; +} + +#save-button-confirm { + position: absolute; + background-color: transparent; + border: none; + margin: 2px 4px !important; + right: 7px; + top: -8px; + height: 30px; +} + +#public-upload .avatardiv { + margin: 0 auto; +} + +#emptycontent.has-disclaimer { + margin-top: 10vh; +} + +#public-upload #emptycontent h2 { + margin: 10px 0 5px 0; +} + +#public-upload #emptycontent h2+p { + margin-bottom: 30px; +} + +#public-upload #emptycontent .icon-folder { + height: 16px; + width: 16px; + background-size: 16px; + display: inline-block; + vertical-align: text-top; + margin-bottom: 0; + margin-right: 5px; + opacity: 1; +} + +#public-upload #emptycontent .button { + display: inline-block; + height: auto; + width: auto; + background-size: 16px; + background-position: 16px; + opacity: .7; + font-size: 20px; + line-height: initial; + margin: 20px; + padding: 10px 20px; + padding-left: 42px; +} + +#public-upload #emptycontent ul { + width: 160px; + margin: 5px auto; + text-align: left; +} + +#public-upload #emptycontent li { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + padding: 7px 0; +} + +#public-upload #emptycontent li img { + vertical-align: text-bottom; + margin-right: 5px; +} + +#public-upload li span.icon-loading-small { + padding-left: 18px; + margin-right: 7px; +} + +.disclaimer { + margin: -20px auto 30px; + max-width: 400px; + text-align: left; +} diff --git a/apps/files_sharing/css/publicView.scss b/apps/files_sharing/css/publicView.scss new file mode 100644 index 00000000000..398fd1b0a37 --- /dev/null +++ b/apps/files_sharing/css/publicView.scss @@ -0,0 +1,2 @@ +@import 'public.scss'; +@import 'mobile.scss'; diff --git a/apps/files_sharing/css/sharebreadcrumb.css b/apps/files_sharing/css/sharebreadcrumb.css deleted file mode 100644 index 792c8a31b7c..00000000000 --- a/apps/files_sharing/css/sharebreadcrumb.css +++ /dev/null @@ -1,34 +0,0 @@ -/** - * @copyright 2016 Christoph Wurst - * - * @author 2016 Christoph Wurst - * - * @license GNU AGPL version 3 or any later version - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see . - * - */ - -div.crumb span.icon-share, -div.crumb span.icon-public { - display: inline-block; - cursor: pointer; - opacity: 0.2; - margin-right: 6px; -} - -div.crumb span.icon-share.shared, -div.crumb span.icon-public.shared { - opacity: 0.7; -} diff --git a/apps/files_sharing/css/sharebreadcrumb.scss b/apps/files_sharing/css/sharebreadcrumb.scss new file mode 100644 index 00000000000..792c8a31b7c --- /dev/null +++ b/apps/files_sharing/css/sharebreadcrumb.scss @@ -0,0 +1,34 @@ +/** + * @copyright 2016 Christoph Wurst + * + * @author 2016 Christoph Wurst + * + * @license GNU AGPL version 3 or any later version + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + */ + +div.crumb span.icon-share, +div.crumb span.icon-public { + display: inline-block; + cursor: pointer; + opacity: 0.2; + margin-right: 6px; +} + +div.crumb span.icon-share.shared, +div.crumb span.icon-public.shared { + opacity: 0.7; +} diff --git a/apps/files_sharing/css/sharetabview.css b/apps/files_sharing/css/sharetabview.css deleted file mode 100644 index 6fd2b9b3165..00000000000 --- a/apps/files_sharing/css/sharetabview.css +++ /dev/null @@ -1,149 +0,0 @@ -.app-files .shareTabView { - min-height: 100px; -} - -.shareTabView .oneline { - white-space: nowrap; - position: relative; -} - -.shareTabView .shareWithLoading { - padding-left: 10px; - right: 35px; - top: 0px; -} - -.shareTabView .shareWithRemoteInfo, -.shareTabView .clipboardButton { - position: absolute; - right: -7px; - top: -4px; - padding: 14px; -} - -.shareTabView .linkMore { - position: absolute; - right: -7px; - top: -4px; - padding: 14px; -} - -/* fix the popup menu because the button is shifted and then the menu is not aligned */ -.shareTabView .popovermenu.socialSharingMenu { - right: -7px; -} - -.shareTabView .popovermenu .clipboardButton { - position: relative; - top: initial; - right: initial; - padding: 18px 0 18px 36px; -} - -.shareTabView label { - white-space: nowrap; -} - -.shareTabView input[type="checkbox"] { - margin: 0 3px 0 8px; - vertical-align: middle; -} - -.shareTabView input[type="text"].shareWithField, -.shareTabView input[type="text"].emailField, -.shareTabView input[type="text"].linkText, -.shareTabView input[type="password"] { - width: 100%; - box-sizing: border-box; - padding-right: 32px; - text-overflow: ellipsis; -} - -.shareTabView form { - font-size: 100%; - margin-left: 0; - margin-right: 0; -} - -#shareWithList { - list-style-type: none; - padding: 0 0 16px; -} - -#shareWithList > li { - padding-top: 5px; - padding-bottom: 5px; - white-space: normal; - display: inline-flex; - align-items: center; -} - -#shareWithList .unshare img, #shareWithList .showCruds img { - vertical-align: text-bottom; /* properly align icons */ -} - -#shareWithList .sharingOptionsGroup .icon-more { - padding: 7px; - vertical-align: middle; - opacity: .5; -} - -#shareWithList .shareOption.menuitem > label:before { - /* Checkboxes positionning */ - margin: 0 12px !important; -} - -#shareWithList .unshare { - padding: 1px 6px; - vertical-align: text-bottom; -} -#shareWithList .unshare .icon { - vertical-align: text-top; -} - -#shareWithList .sharingOptionsGroup .popovermenu:after { - right: 3px; -} - -#shareWithList label input[type=checkbox] { - margin-left: 0; - position: relative; -} -#shareWithList .username { - padding-right: 8px; - white-space: nowrap; - text-overflow: ellipsis; - display: inline-block; - overflow: hidden; - vertical-align: middle; -} -#shareWithList li .sharingOptionsGroup > .shareOption > label { - padding: 6px; - margin-right: 8px; - vertical-align: text-top; -} - -.shareTabView .icon-loading-small { - display: inline-block; - z-index: 1; - margin-right: 4px; - vertical-align: text-top; -} - -.shareTabView .shareWithList .icon-loading-small:not(.hidden) + span, -.shareTabView .linkShareView .icon-loading-small:not(.hidden) + input + label:before { - /* Hide if loader is visible */ - display: none !important; -} - -.linkShareView { - margin-top: 16px; -} - -.shareTabView .linkPass .icon-loading-small { - margin-top: 9px; -} - -.shareTabView .icon { - background-size: 16px 16px; -} diff --git a/apps/files_sharing/css/sharetabview.scss b/apps/files_sharing/css/sharetabview.scss new file mode 100644 index 00000000000..6fd2b9b3165 --- /dev/null +++ b/apps/files_sharing/css/sharetabview.scss @@ -0,0 +1,149 @@ +.app-files .shareTabView { + min-height: 100px; +} + +.shareTabView .oneline { + white-space: nowrap; + position: relative; +} + +.shareTabView .shareWithLoading { + padding-left: 10px; + right: 35px; + top: 0px; +} + +.shareTabView .shareWithRemoteInfo, +.shareTabView .clipboardButton { + position: absolute; + right: -7px; + top: -4px; + padding: 14px; +} + +.shareTabView .linkMore { + position: absolute; + right: -7px; + top: -4px; + padding: 14px; +} + +/* fix the popup menu because the button is shifted and then the menu is not aligned */ +.shareTabView .popovermenu.socialSharingMenu { + right: -7px; +} + +.shareTabView .popovermenu .clipboardButton { + position: relative; + top: initial; + right: initial; + padding: 18px 0 18px 36px; +} + +.shareTabView label { + white-space: nowrap; +} + +.shareTabView input[type="checkbox"] { + margin: 0 3px 0 8px; + vertical-align: middle; +} + +.shareTabView input[type="text"].shareWithField, +.shareTabView input[type="text"].emailField, +.shareTabView input[type="text"].linkText, +.shareTabView input[type="password"] { + width: 100%; + box-sizing: border-box; + padding-right: 32px; + text-overflow: ellipsis; +} + +.shareTabView form { + font-size: 100%; + margin-left: 0; + margin-right: 0; +} + +#shareWithList { + list-style-type: none; + padding: 0 0 16px; +} + +#shareWithList > li { + padding-top: 5px; + padding-bottom: 5px; + white-space: normal; + display: inline-flex; + align-items: center; +} + +#shareWithList .unshare img, #shareWithList .showCruds img { + vertical-align: text-bottom; /* properly align icons */ +} + +#shareWithList .sharingOptionsGroup .icon-more { + padding: 7px; + vertical-align: middle; + opacity: .5; +} + +#shareWithList .shareOption.menuitem > label:before { + /* Checkboxes positionning */ + margin: 0 12px !important; +} + +#shareWithList .unshare { + padding: 1px 6px; + vertical-align: text-bottom; +} +#shareWithList .unshare .icon { + vertical-align: text-top; +} + +#shareWithList .sharingOptionsGroup .popovermenu:after { + right: 3px; +} + +#shareWithList label input[type=checkbox] { + margin-left: 0; + position: relative; +} +#shareWithList .username { + padding-right: 8px; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; + overflow: hidden; + vertical-align: middle; +} +#shareWithList li .sharingOptionsGroup > .shareOption > label { + padding: 6px; + margin-right: 8px; + vertical-align: text-top; +} + +.shareTabView .icon-loading-small { + display: inline-block; + z-index: 1; + margin-right: 4px; + vertical-align: text-top; +} + +.shareTabView .shareWithList .icon-loading-small:not(.hidden) + span, +.shareTabView .linkShareView .icon-loading-small:not(.hidden) + input + label:before { + /* Hide if loader is visible */ + display: none !important; +} + +.linkShareView { + margin-top: 16px; +} + +.shareTabView .linkPass .icon-loading-small { + margin-top: 9px; +} + +.shareTabView .icon { + background-size: 16px 16px; +} diff --git a/apps/files_sharing/lib/Controller/ShareController.php b/apps/files_sharing/lib/Controller/ShareController.php index 6f9d4ca032a..bf3b6c77f94 100644 --- a/apps/files_sharing/lib/Controller/ShareController.php +++ b/apps/files_sharing/lib/Controller/ShareController.php @@ -379,8 +379,7 @@ class ShareController extends Controller { // Load files we need \OCP\Util::addScript('files', 'file-upload'); - \OCP\Util::addStyle('files_sharing', 'public'); - \OCP\Util::addStyle('files_sharing', 'mobile'); + \OCP\Util::addStyle('files_sharing', 'publicView'); \OCP\Util::addScript('files_sharing', 'public'); \OCP\Util::addScript('files', 'fileactions'); \OCP\Util::addScript('files', 'fileactionsmenu'); @@ -389,8 +388,7 @@ class ShareController extends Controller { if (isset($shareTmpl['folder'])) { // JS required for folders - \OCP\Util::addStyle('files', 'files'); - \OCP\Util::addStyle('files', 'upload'); + \OCP\Util::addStyle('files', 'merged'); \OCP\Util::addScript('files', 'filesummary'); \OCP\Util::addScript('files', 'breadcrumb'); \OCP\Util::addScript('files', 'fileinfomodel'); -- cgit v1.2.3 From 1084cdb6135e90d48f511ee7d7141900bb769273 Mon Sep 17 00:00:00 2001 From: Morris Jobke Date: Tue, 21 Mar 2017 15:33:28 -0600 Subject: fix path Signed-off-by: Morris Jobke --- apps/files_sharing/appinfo/app.php | 2 +- apps/files_sharing/css/mergedAdditionalScripts.scss | 2 -- apps/files_sharing/css/mergedAdditionalStyles.scss | 2 ++ 3 files changed, 3 insertions(+), 3 deletions(-) delete mode 100644 apps/files_sharing/css/mergedAdditionalScripts.scss create mode 100644 apps/files_sharing/css/mergedAdditionalStyles.scss (limited to 'apps') diff --git a/apps/files_sharing/appinfo/app.php b/apps/files_sharing/appinfo/app.php index d8de40e9751..fdaf3d1ec6c 100644 --- a/apps/files_sharing/appinfo/app.php +++ b/apps/files_sharing/appinfo/app.php @@ -41,7 +41,7 @@ $eventDispatcher->addListener( \OCP\Util::addScript('files_sharing', 'share'); \OCP\Util::addScript('files_sharing', 'sharetabview'); \OCP\Util::addScript('files_sharing', 'sharebreadcrumbview'); - \OCP\Util::addStyle('files_sharing', 'mergedAdditionalScripts'); + \OCP\Util::addStyle('files_sharing', 'mergedAdditionalStyles'); } ); diff --git a/apps/files_sharing/css/mergedAdditionalScripts.scss b/apps/files_sharing/css/mergedAdditionalScripts.scss deleted file mode 100644 index a95ad59967f..00000000000 --- a/apps/files_sharing/css/mergedAdditionalScripts.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import 'sharetabview.scss'; -@import 'sharebreadcrumb.scss'; diff --git a/apps/files_sharing/css/mergedAdditionalStyles.scss b/apps/files_sharing/css/mergedAdditionalStyles.scss new file mode 100644 index 00000000000..a95ad59967f --- /dev/null +++ b/apps/files_sharing/css/mergedAdditionalStyles.scss @@ -0,0 +1,2 @@ +@import 'sharetabview.scss'; +@import 'sharebreadcrumb.scss'; -- cgit v1.2.3