/* 938 = table min-width(688) + app-navigation width: 250 $breakpoint-mobile +1 = size where app-navigation is hidden +1 688 = table min-width */ $min-table-width: 688px; @media only screen and (max-width: $min-table-width + $navigation-width) and (min-width: $breakpoint-mobile + 1), only screen and (max-width: $min-table-width) { .app-files #app-content.dir-drop{ background-color: rgba(255, 255, 255, 1)!important; } #body-user #filestable { min-width: 250px; } 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; } /* 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 { float: right; } 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; } }