server/apps/files/css/mobile.scss
Julius Härtl fb7d73708b
Use flex based layout inside the filename table cell
Signed-off-by: Julius Härtl <jus@bitgrid.net>
2018-04-19 20:13:26 +02:00

87 lines
1.9 KiB
SCSS
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;
}
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;
}
/* remove shift for multiselect bar to account for missing navigation */
table.multiselect thead {
padding-left: 0;
}
#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:not(.icon) {
display: none !important;
}
/* show the delete icon in name column in lower resolutions */
table th#headerName .selectedActions .delete-selected {
display: inline;
}
/* proper notification area for multi line messages */
#notification-container {
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;
}
/* ensure that it is visible over #app-content */
table.dragshadow {
z-index: 1000;
}
}
@media only screen and (max-width: 480px) {
/* Only show icons */
table th .selectedActions a span:not(.icon) {
display: none;
}
/* Increase touch area for the icons */
table th .selectedActions a {
padding: 17px 14px;
}
/* Remove the margin to reduce the overlap between the name and the icons */
table.multiselect th .columntitle.name {
margin-left: 0;
}
}