mobile.scss 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. /* 938 = table min-width(688) + app-navigation width: 250
  2. $breakpoint-mobile +1 = size where app-navigation is hidden +1
  3. 688 = table min-width */
  4. $min-table-width: 688px;
  5. @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) {
  6. .app-files #app-content.dir-drop{
  7. background-color: rgba(255, 255, 255, 1)!important;
  8. }
  9. #body-user #filestable {
  10. min-width: 250px;
  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. /* .hidden-visually for accessbility */
  34. #fileList a.action-share span:not(.icon):not(.avatar) {
  35. position: absolute;
  36. left:-10000px;
  37. top: auto;
  38. width: 1px;
  39. height: 1px;
  40. overflow: hidden;
  41. }
  42. /* proper notification area for multi line messages */
  43. #notification-container {
  44. display: flex;
  45. }
  46. /* shorten elements for mobile */
  47. #uploadprogressbar, #uploadprogressbar .label.inner {
  48. width: 50px;
  49. }
  50. /* hide desktop-only parts */
  51. #uploadprogressbar .desktop {
  52. display: none !important;
  53. }
  54. #uploadprogressbar .mobile {
  55. display: block !important;
  56. }
  57. /* ensure that it is visible over #app-content */
  58. table.dragshadow {
  59. z-index: 1000;
  60. }
  61. }
  62. @media only screen and (max-width: 480px) {
  63. /* Only show icons */
  64. table th .selectedActions {
  65. float: right;
  66. }
  67. table th .selectedActions > a span:not(.icon) {
  68. display: none;
  69. }
  70. /* Increase touch area for the icons */
  71. table th .selectedActions a {
  72. padding: 17px 14px;
  73. }
  74. /* Remove the margin to reduce the overlap between the name and the icons */
  75. table.multiselect th .columntitle.name {
  76. margin-left: 0;
  77. }
  78. }