3 files changed, 83 insertions, 77 deletions

diff --git a/apps/files_sharing/css/authenticate.css b/apps/files_sharing/css/authenticate.css
index cebe906dd59..ef963ba7c65 100644
--- a/apps/files_sharing/css/authenticate.css
+++ b/apps/files_sharing/css/authenticate.css
@@ -11,16 +11,13 @@
 	margin:	6px;
 }
 
-input[type="submit"]{
+input[type='submit'] {
 	width: 45px;
 	height: 45px;
 	margin:	6px;
-	background-image: url('%webroot%/core/img/actions/confirm.svg');
-	background-repeat: no-repeat;
-	background-position: center;
 }
 
-#body-login input[type="submit"] {
+#body-login input[type='submit'] {
 	position: absolute;
 	top: 0px;
 }
diff --git a/apps/files_sharing/css/mobile.css b/apps/files_sharing/css/mobile.css
new file mode 100644
index 00000000000..7d2116d190d
--- /dev/null
+++ b/apps/files_sharing/css/mobile.css
@@ -0,0 +1,49 @@
+@media only screen and (max-width: 600px) {
+
+/* make header scroll up for single shares, more view of content on small screens */
+#header.share-file {
+	position: absolute !important;
+}
+
+/* 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 span {
+	display: none;
+}
+
+
+}
diff --git a/apps/files_sharing/css/public.css b/apps/files_sharing/css/public.css
index 3ccb35e327a..21f0c82b829 100644
--- a/apps/files_sharing/css/public.css
+++ b/apps/files_sharing/css/public.css
@@ -3,7 +3,7 @@ body {
 }
 
 #header {
-	background: #1d2d44 url('%webroot%/core/img/noise.png') repeat;
+	background-color: #1d2d44;
 	height:32px;
 	left:0;
 	line-height:32px;
@@ -14,39 +14,17 @@ body {
 	padding:7px;
 }
 
-#details {
-	color:#fff;
-	float: left;
-}
-
-#public_upload,
-#download {
-	font-weight:700;
-	margin: 0 0 0 .4em;
-	padding: 0 5px;
-	height: 32px;
-	float: left;
-
-}
-
-.header-right #details {
-	margin-right: 28px;
-}
-
 .header-right {
 	padding: 0;
 	height: 32px;
 }
 
-#public_upload {
-	margin-left: 0.3em;
-}
-
-#public_upload img,
-#download img {
-	padding-left:.1em;
-	padding-right:.3em;
-	vertical-align:text-bottom;
+#details {
+	color:#fff;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+	filter: alpha(opacity=50);
+	opacity: .5;
+	padding-right: 5px;
 }
 
 #controls {
@@ -61,19 +39,18 @@ body {
 
 #noPreview {
 	display:none;
-	padding-top:5em;
+	padding-top:80px;
 }
 
 footer {
-	margin-top: 45px;
+	margin-top: 65px;
 }
 
 p.info {
 	color: #777;
 	text-align: center;
-	width: 22em;
 	margin: 0 auto;
-	padding: 20px;
+	padding: 20px 0;
 }
 
 p.info a {
@@ -83,8 +60,8 @@ p.info a {
 
 #imgframe {
 	height:75%;
-	padding-bottom:2em;
-	padding-top:2em;
+	padding-bottom:32px;
+	padding-top:32px;
 	width:80%;
 	margin:0 auto;
 }
@@ -94,9 +71,13 @@ p.info a {
 	max-width:100%;
 }
 
-thead{
-	background-color: white;
-	padding-left:0 !important; /* fixes multiselect bar offset on shared page */
+/* some margin for the file type icon */
+#imgframe .publicpreview {
+	margin-top: 10%;
+}
+
+thead {
+	padding-left: 0 !important; /* fixes multiselect bar offset on shared page */
 }
 
 #data-upload-form {
@@ -110,41 +91,20 @@ thead{
 	margin: 0;
 }
 
-#file_upload_start {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-	filter: alpha(opacity=0);
-	opacity: 0;
-	z-index: 20;
-	position: absolute !important;
-	top: 0;
-	left: 0;
-	width: 100% !important;
+.directDownload,
+.directLink {
+	margin-bottom: 20px;
 }
-
-#publicUploadButtonMock {
-	position:relative;
-	display:block;
-	width:100%;
-	height:32px;
-	cursor:pointer;
-	z-index:10;
-	background-image:url('%webroot%/core/img/actions/upload.svg');
-	background-repeat:no-repeat;
-	background-position:7px 8px;
+.directDownload .button img {
+	vertical-align: text-bottom;
 }
-
-#publicUploadButtonMock span {
-	margin: 0 5px 0 28px;
-	color: #555;
+.directLink label {
+	font-weight: normal;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+	filter: alpha(opacity=50);
+	opacity: .5;
 }
-
-.directLink {
-	margin-bottom: 20px;
+.directLink input {
+	margin-left: 5px;
+	width: 300px;
 }
-	.directLink label {
-		font-weight: normal;
-	}
-	.directLink input {
-		margin-left: 10px;
-		width: 300px;
-	}