mobile.scss 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. /* 938 = table min-width(688) + app-navigation width: 250
  2. 769 = size where app-navigation (768) is hidden +1
  3. 688 = table min-width */
  4. @media only screen and (max-width: 938px) and (min-width: 769px), only screen and (max-width: 688px) {
  5. .app-files #app-content.dir-drop{
  6. background-color: rgba(255, 255, 255, 1)!important;
  7. }
  8. /* don’t require a minimum width for files table */
  9. #body-user #filestable {
  10. min-width: initial !important;
  11. }
  12. table th#headerSize,
  13. table td.filesize,
  14. table th#headerDate,
  15. table td.date {
  16. display: none;
  17. }
  18. /* remove padding to let border bottom fill the whole width*/
  19. table td {
  20. padding: 0;
  21. }
  22. /* remove shift for multiselect bar to account for missing navigation */
  23. table.multiselect thead {
  24. padding-left: 0;
  25. }
  26. #fileList a.action.action-menu img {
  27. padding-left: 0;
  28. }
  29. #fileList .fileActionsMenu {
  30. margin-right: 6px;
  31. }
  32. /* hide text of the share action on mobile */
  33. #fileList a.action-share span:not(.icon) {
  34. display: none !important;
  35. }
  36. /* show the delete icon in name column in lower resolutions */
  37. table th#headerName .selectedActions .delete-selected {
  38. display: inline;
  39. }
  40. /* proper notification area for multi line messages */
  41. #notification-container {
  42. display: flex;
  43. }
  44. /* shorten elements for mobile */
  45. #uploadprogressbar, #uploadprogressbar .label.inner {
  46. width: 50px;
  47. }
  48. /* hide desktop-only parts */
  49. #uploadprogressbar .desktop {
  50. display: none !important;
  51. }
  52. #uploadprogressbar .mobile {
  53. display: block !important;
  54. }
  55. /* ensure that it is visible over #app-content */
  56. table.dragshadow {
  57. z-index: 1000;
  58. }
  59. }
  60. @media only screen and (max-width: 480px) {
  61. /* Only show icons */
  62. table th .selectedActions a span:not(.icon) {
  63. display: none;
  64. }
  65. /* Increase touch area for the icons */
  66. table th .selectedActions a {
  67. padding: 17px 14px;
  68. }
  69. /* Remove the margin to reduce the overlap between the name and the icons */
  70. table.multiselect th .columntitle.name {
  71. margin-left: 0;
  72. }
  73. }