server/apps/files/css/mobile.css
John Molakvoæ (skjnldsv) e0e5b32f94
Fix files mobile view
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
2017-02-01 18:39:27 +01:00

88 lines
2 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* 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;
}
/* dont 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;
}
}