summaryrefslogtreecommitdiffstats
path: root/apps/files/css
diff options
context:
space:
mode:
Diffstat (limited to 'apps/files/css')
-rw-r--r--apps/files/css/detailsView.css122
-rw-r--r--apps/files/css/files.css609
-rw-r--r--apps/files/css/mobile.css44
-rw-r--r--apps/files/css/upload.css65
4 files changed, 644 insertions, 196 deletions
diff --git a/apps/files/css/detailsView.css b/apps/files/css/detailsView.css
new file mode 100644
index 00000000000..669a15c4e38
--- /dev/null
+++ b/apps/files/css/detailsView.css
@@ -0,0 +1,122 @@
+#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;
+}
+
+#app-sidebar .mainFileInfoView .permalink {
+ margin-left: 10px;
+ opacity: .5;
+}
+#app-sidebar .mainFileInfoView .permalink-field>input {
+ clear: both;
+ width: 90%;
+}
+
+#app-sidebar .file-details-container {
+ display: inline-block;
+ float: left;
+}
+
+#app-sidebar .thumbnailContainer.image {
+ margin-left: -15px;
+ margin-right: -35px; /* 15 + 20 for the close button */
+ margin-top: -15px;
+}
+
+#app-sidebar .thumbnailContainer.image.portrait {
+ margin: 0; /* if we don't fit the image anyway we give it back the margin */
+}
+
+#app-sidebar .image .thumbnail {
+ width:100%;
+ display:block;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 100%;
+ float: none;
+ margin: 0;
+ height: auto;
+}
+
+#app-sidebar .image .thumbnail .stretcher {
+ content: '';
+ display: block;
+ padding-bottom: 56.25%; /* sets height of .thumbnail to 9/16 of the width */
+}
+
+#app-sidebar .image.portrait .thumbnail {
+ background-position: 50% top;
+}
+
+#app-sidebar .image.portrait .thumbnail {
+ background-size: contain;
+}
+
+#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 {
+ max-width: 300px;
+ display: inline-block;
+ padding: 5px 0;
+ margin: -5px 0;
+}
+
+#app-sidebar .file-details {
+ color: #999;
+}
+#app-sidebar .file-details img {
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+ opacity: .5;
+}
+#app-sidebar .action-favorite {
+ vertical-align: text-bottom;
+ padding: 10px;
+ margin: -10px;
+}
+
+#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
index 4a8bd5bb30f..373739071e9 100644
--- a/apps/files/css/files.css
+++ b/apps/files/css/files.css
@@ -2,18 +2,27 @@
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:active { color: #333; }
+.actions .button a:hover,
+.actions .button a:focus,
+.actions .button a:active {
+ color: #333;
+}
.actions.hidden { display: none; }
-#new {
- z-index: 1010;
- float: left;
- padding: 0 !important; /* override default control bar button padding */
+.actions.creatable {
+ position: relative;
+ z-index: -30;
}
+
#trash {
margin-right: 8px;
float: right;
@@ -21,47 +30,8 @@
padding: 10px;
font-weight: normal;
}
-#new > a {
- padding: 14px 10px;
- position: relative;
- top: 7px;
-}
-#new.active {
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- border-bottom: none;
-}
-#new > ul {
- display: none;
- position: fixed;
- min-width: 112px;
- z-index: 10;
- padding: 8px;
- padding-bottom: 0;
- margin-top: 14px;
- margin-left: -1px;
- text-align: left;
- background: #f8f8f8;
- border: 1px solid #ddd;
- border-radius: 5px;
- border-top-left-radius: 0;
- box-shadow: 0 2px 7px rgba(170,170,170,.4);
-}
-#new > ul > li {
- height: 36px;
- margin: 5px;
- padding-left: 42px;
- padding-bottom: 2px;
- background-position: left center;
- cursor: pointer;
-}
-#new > ul > li > p {
- cursor: pointer;
- padding-top: 7px;
- padding-bottom: 7px;
-}
-#new .error, #fileList .error {
+.newFileMenu .error, #fileList .error {
color: #e9322d;
border-color: #e9322d;
-webkit-box-shadow: 0 0 6px #f8b9b7;
@@ -70,13 +40,15 @@
}
/* FILE TABLE */
-
#filestable {
position: relative;
- top: 44px;
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) */
@@ -85,28 +57,75 @@
min-width: 688px; /* 768 (mobile break) - 80 (nav width) */
}
-#filestable tbody tr { background-color:#fff; height:51px; }
+#filestable tbody tr {
+ background-color: #fff;
+ height: 51px;
+}
/* fit app list view heights */
.app-files #app-content>.viewcontainer {
- min-height: 100%;
+ min-height: 0%;
}
-/* move Deleted Files to bottom of sidebar */
-.nav-trashbin {
- position: absolute !important;
- bottom: 0;
+.app-files #app-content {
+ overflow-x: hidden;
+}
+
+/* icons for sidebar */
+.nav-icon-files {
+ background-image: url('../img/folder.svg');
+}
+.nav-icon-favorites {
+ background-image: url('../img/star.svg');
+}
+.nav-icon-sharingin,
+.nav-icon-sharingout {
+ background-image: url('../img/share.svg');
+}
+.nav-icon-sharinglinks {
+ background-image: url('../img/public.svg');
+}
+.nav-icon-extstoragemounts {
+ background-image: url('../img/external.svg');
+}
+.nav-icon-trashbin {
+ background-image: url('../img/delete.svg');
}
-#filestable tbody tr { background-color:#fff; height:40px; }
-#filestable tbody tr:hover, tbody tr:active {
- background-color: rgb(240,240,240);
+#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;
}
-#filestable tbody tr.selected {
- background-color: rgb(230,230,230);
+
+#app-navigation .nav-files a.new.hidden {
+ display: none;
+}
+
+#app-navigation .nav-files a.new.disabled {
+ opacity: 0.3;
}
-#filestable tbody tr.searchresult {
- background-color: rgb(240,240,240);
+
+#filestable tbody tr {
+ 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 {
+ background-color: #f8f8f8;
}
tbody a { color:#000; }
@@ -123,16 +142,14 @@ span.extension {
transition: opacity 300ms;
vertical-align: top;
}
-tr:hover span.extension {
+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 tr.mouseOver td {
- background-color: #eee;
-}
table th, table th a {
color: #999;
}
@@ -153,23 +170,38 @@ table th .columntitle.name {
margin-left: 50px;
}
-.sort-indicator.hidden { visibility: hidden; }
table th .sort-indicator {
width: 10px;
height: 8px;
- margin-left: 10px;
+ margin-left: 5px;
display: inline-block;
+ vertical-align: text-bottom;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
+ filter: alpha(opacity=30);
+ opacity: .3;
}
-table th:hover .sort-indicator.hidden {
- width: 10px;
- height: 8px;
- margin-left: 10px;
+.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 #ddd; text-align:left; font-weight:normal; }
+
+table th,
table td {
- padding: 0 15px;
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;
@@ -179,10 +211,15 @@ table th#headerName {
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;
}
@@ -192,8 +229,8 @@ table th.column-last, table td.column-last {
box-sizing: border-box;
position: relative;
/* this can not be just width, both need to be set … table styling */
- min-width: 176px;
- max-width: 176px;
+ min-width: 130px;
+ max-width: 130px;
}
/* Multiselect bar */
@@ -213,16 +250,30 @@ table thead th {
background-color: #fff;
}
table.multiselect thead th {
- background-color: rgba(220,220,220,.8);
+ 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 td.selection, table th.selection, table td.fileaction { width:32px; text-align:center; }
+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;
@@ -232,13 +283,27 @@ table td.filename a.name {
line-height: 50px;
padding: 0;
}
-table tr[data-type="dir"] td.filename a.name span.nametext {font-weight:bold; }
+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: 1px;
+ 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; }
@@ -246,12 +311,7 @@ table td.filename .nametext, .uploadtext, .modified, .column-last>span:first-chi
position: relative;
overflow: hidden;
text-overflow: ellipsis;
- width: 90%;
-}
-/* ellipsize long modified dates to make room for showing delete button */
-#fileList tr:hover .modified, #fileList tr:hover .column-last>span:first-child,
-#fileList tr:focus .modified, #fileList tr:focus .column-last>span:first-child {
- width: 75%;
+ width: 110px;
}
/* TODO fix usability bug (accidental file/folder selection) */
@@ -264,51 +324,65 @@ table td.filename .nametext {
max-width: 800px;
height: 100%;
}
+.has-favorites #fileList td.filename a.name {
+ left: 50px;
+ margin-right: 50px;
+}
table td.filename .nametext .innernametext {
text-overflow: ellipsis;
overflow: hidden;
position: relative;
display: inline-block;
+ vertical-align: top;
}
-@media only screen and (min-width: 1366px) {
+@media only screen and (min-width: 1500px) {
table td.filename .nametext .innernametext {
- max-width: 760px;
+ max-width: 790px;
}
-
- table tr:hover td.filename .nametext .innernametext {
- max-width: 480px;
+ .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: 600px;
+ max-width: 500px;
}
-
- table tr:hover td.filename .nametext .innernametext {
- max-width: 320px;
+ .with-app-sidebar table td.filename .nametext .innernametext {
+ max-width: 230px;
}
}
-
-@media only screen and (min-width: 1000px) and (max-width: 1200px) {
+@media only screen and (min-width: 1100px) and (max-width: 1200px) {
table td.filename .nametext .innernametext {
max-width: 400px;
}
-
- table tr:hover td.filename .nametext .innernametext {
- max-width: 120px;
+ .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: 320px;
+ max-width: 240px;
}
-
- table tr:hover td.filename .nametext .innernametext {
- max-width: 40px;
+ .with-app-sidebar table td.filename .nametext .innernametext {
+ max-width: 230px;
}
}
@@ -316,7 +390,14 @@ table td.filename .nametext .innernametext {
table td.filename .uploadtext {
font-weight: normal;
- margin-left: 8px;
+ 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"]{
@@ -324,7 +405,14 @@ table td.filename .uploadtext {
}
/* File checkboxes */
-#fileList tr td.filename>input[type="checkbox"]:first-child {
+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;
@@ -332,49 +420,60 @@ table td.filename .uploadtext {
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 */
-#fileList tr:hover td.filename>input[type="checkbox"]:first-child,
-#fileList tr td.filename>input[type="checkbox"]:checked:first-child,
-#fileList tr.selected td.filename>input[type="checkbox"]:first-child {
+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;
}
-.lte9 #fileList tr:hover td.filename>input[type="checkbox"]:first-child,
-.lte9 #fileList tr td.filename>input[type="checkbox"][checked=checked]:first-child,
-.lte9 #fileList tr.selected td.filename>input[type="checkbox"]:first-child {
+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>input[type="checkbox"] + label,
+#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>input[type="checkbox"]{
+#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;
-}
-#fileList tr td.filename>input[type="checkbox"] + label {
- left: 0;
- top: 0;
+ z-index: 10;
}
.select-all + label {
top: 0;
}
-.select-all {
+.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;
}
@@ -384,31 +483,62 @@ table td.filename .uploadtext {
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;
- font-size: 11px;
}
-#fileList img.move2trash { display:inline; margin:-8px 0; padding:16px 8px 16px 8px !important; float:right; }
-#fileList a.action.delete {
- position: absolute;
- right: 0;
- padding: 17px 14px;
+.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;
+}
+.bubble:after,
+#app-navigation .app-navigation-entry-menu:after {
+ right: 6px;
+}
+.bubble:before,
+#app-navigation .app-navigation-entry-menu:before {
+ right: 6px;
+}
+
+/* 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 .action.action-share-notification span, #fileList a {
+#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 {
- max-height:16px;
- max-width:16px;
- vertical-align:text-bottom;
- margin-bottom: -1px;
+a.action > img {
+ height: 16px;
+ width: 16px;
+ vertical-align: text-bottom;
}
/* Actions for selected files */
@@ -435,55 +565,141 @@ a.action>img {
margin-bottom: -1px;
}
+html.ie8 .column-mtime .selectedActions {
+ top: -95px;
+}
+
#fileList a.action {
display: inline;
- padding: 18px 8px;
+ 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[data-action="Rename"] {
- padding: 16px 14px 17px !important;
- position: relative;
- top: -21px;
+#fileList a.action.action-menu {
+ padding-top: 17px;
+ padding-bottom: 17px;
+ padding-left:14px;
+ padding-right:0px;
}
-#fileList tr:hover a.action, #fileList a.action.permanent {
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
- filter: alpha(opacity=50);
- opacity: .5;
+
+#fileList .filesize {
+ padding-top:0px;
+ padding-bottom:0px;
+ padding-left:60px;
+ padding-right:15px;
+}
+
+#fileList .popovermenu {
+ margin-right: -5px;
+}
+.ie8 #fileList .popovermenu {
+ margin-top: -10px;
+}
+
+.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;
display:inline;
}
-#fileList tr:hover a.action:hover {
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
- filter: alpha(opacity=100);
- opacity: 1;
+.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.permanent.shared-style,
+#fileList a.action.action-favorite.permanent {
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)" !important;
+ filter: alpha(opacity=70) !important;
+ opacity: .7 !important;
+}
+/* always show actions on mobile, not only on hover */
+#fileList a.action.action-menu.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;
- height: 70px;
+ /* add whitespace to bottom of files list to correctly show dropdowns */
+ height: 300px;
}
-
-.summary:hover, .summary, table tr.summary td {
+.summary:hover,
+.summary:focus,
+.summary,
+table tr.summary td {
background-color: transparent;
}
-
.summary td {
- padding-top: 20px;
- padding-bottom: 250px;
border-bottom: none;
+ vertical-align: top;
+ padding-top: 20px;
}
.summary .info {
margin-left: 40px;
}
-
-#scanning-message{ top:40%; left:40%; position:absolute; display:none; }
+.has-favorites .summary .info {
+ margin-left: 90px;
+}
table.dragshadow {
width:auto;
@@ -511,7 +727,7 @@ table.dragshadow td.size {
left: 0;
right: 0;
bottom: 0;
- background-color: white;
+ background-color: #fff;
background-repeat: no-repeat no-repeat;
background-position: 50%;
opacity: 0.7;
@@ -525,3 +741,90 @@ table.dragshadow td.size {
.mask.transparent{
opacity: 0;
}
+
+#fileList .popovermenu a.action img {
+ padding: initial;
+}
+
+#fileList .popovermenu a.action {
+ padding: 10px;
+ margin: -10px;
+}
+
+html.ie8 #controls .button.new {
+ padding-right: 0;
+}
+
+.newFileMenu {
+ width: 140px;
+ margin-left: -56px;
+ margin-top: 25px;
+ z-index: 1001;
+}
+
+.newFileMenu .menuitem {
+ white-space: nowrap;
+ overflow: hidden;
+}
+.newFileMenu.popovermenu a.menuitem,
+.newFileMenu.popovermenu label.menuitem,
+.newFileMenu.popovermenu .menuitem {
+ padding: 0;
+ margin: 0;
+}
+
+.newFileMenu.popovermenu a.menuitem.active {
+ opacity: 1;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+ filter: alpha(opacity=100);
+}
+
+.newFileMenu.bubble:after {
+ left: 75px;
+ right: auto;
+}
+.newFileMenu.bubble:before {
+ left: 75px;
+ right: auto;
+}
+
+.newFileMenu .filenameform {
+ display: inline-block;
+}
+
+.newFileMenu .filenameform input {
+ width: 100px;
+}
+
+#fileList .popovermenu .action {
+ display: block;
+ line-height: 30px;
+ padding-left: 5px;
+ color: #000;
+ padding: 0;
+}
+
+#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 .icon {
+ margin-bottom: 2px;
+}
diff --git a/apps/files/css/mobile.css b/apps/files/css/mobile.css
index 3c77bba3a88..bb20c8c3f77 100644
--- a/apps/files/css/mobile.css
+++ b/apps/files/css/mobile.css
@@ -5,11 +5,6 @@
min-width: initial !important;
}
-/* do not show Deleted Files on mobile, not optimized yet and button too long */
-#controls #trash {
- display: none;
-}
-
/* hide size and date columns */
table th#headerSize,
table td.filesize,
@@ -24,7 +19,7 @@ table td {
}
/* and accordingly fix left margin of file list summary on mobile */
.summary .info {
- margin-left: 55px;
+ margin-left: 105px;
}
/* remove shift for multiselect bar to account for missing navigation */
@@ -37,32 +32,25 @@ table td.filename .nametext {
width: 100%;
}
-/* always show actions on mobile, not only on hover */
-#fileList a.action {
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)" !important;
- filter: alpha(opacity=20) !important;
- opacity: .2 !important;
- display: inline !important;
-}
-/* show share action of shared items darker to distinguish from non-shared */
-#fileList a.action.permanent {
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)" !important;
- filter: alpha(opacity=70) !important;
- opacity: .7 !important;
-}
-/* do not show Rename or Versions on mobile */
-#fileList .action.action-rename,
-#fileList .action.action-versions {
- display: none !important;
+#fileList a.action.action-menu img {
+ padding-left: 0;
}
-/* some padding for better clickability */
-#fileList a.action img {
- padding: 0 6px 0 12px;
+
+#fileList .fileActionsMenu {
+ margin-right: 6px;
}
-/* hide text of the actions on mobile */
-#fileList a.action span {
+/* 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 {
diff --git a/apps/files/css/upload.css b/apps/files/css/upload.css
index e6b4b4f8703..f0ffb9ac99e 100644
--- a/apps/files/css/upload.css
+++ b/apps/files/css/upload.css
@@ -8,8 +8,10 @@
margin-left: 3px;
overflow: hidden;
vertical-align: top;
+ position: relative;
+ z-index: -20;
}
-#upload a {
+#upload .icon-upload {
position: relative;
display: block;
width: 100%;
@@ -22,20 +24,6 @@
}
.file_upload_target { display:none; }
.file_upload_form { display:inline; float:left; margin:0; padding:0; cursor:pointer; overflow:visible; }
-#file_upload_start {
- position: relative;
- left: 0;
- top: 0;
- width: 44px;
- height: 44px;
- margin: -5px -3px;
- padding: 0;
- font-size: 16px;
- -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0;
- z-index: 20;
- cursor: pointer;
- overflow: hidden;
-}
#uploadprogresswrapper, #uploadprogresswrapper * {
-moz-box-sizing: border-box;
@@ -95,6 +83,29 @@
#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;
+}
+
+.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%;
}
@@ -168,3 +179,27 @@
.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); }
+}
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-01 07:38:57 +0000