mobile.scss 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  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. table th#headerSize,
  10. table td.filesize,
  11. table th#headerDate,
  12. table td.date {
  13. display: none;
  14. }
  15. /* remove padding to let border bottom fill the whole width*/
  16. table td {
  17. padding: 0;
  18. }
  19. /* remove shift for multiselect bar to account for missing navigation */
  20. table.multiselect thead {
  21. padding-left: 0;
  22. }
  23. #fileList a.action.action-menu img {
  24. padding-left: 0;
  25. }
  26. #fileList .fileActionsMenu {
  27. margin-right: 6px;
  28. }
  29. /* hide text of the share action on mobile */
  30. /* .hidden-visually for accessbility */
  31. #fileList a.action-share span:not(.icon):not(.avatar) {
  32. position: absolute;
  33. left:-10000px;
  34. top: auto;
  35. width: 1px;
  36. height: 1px;
  37. overflow: hidden;
  38. }
  39. /* proper notification area for multi line messages */
  40. #notification-container {
  41. display: flex;
  42. }
  43. /* shorten elements for mobile */
  44. #uploadprogressbar, #uploadprogressbar .label.inner {
  45. width: 50px;
  46. }
  47. /* hide desktop-only parts */
  48. #uploadprogressbar .desktop {
  49. display: none !important;
  50. }
  51. #uploadprogressbar .mobile {
  52. display: block !important;
  53. }
  54. /* ensure that it is visible over #app-content */
  55. table.dragshadow {
  56. z-index: 1000;
  57. }
  58. }
  59. @media only screen and (max-width: 480px) {
  60. /* Only show icons */
  61. table th .selectedActions {
  62. float: right;
  63. }
  64. table th .selectedActions > a span:not(.icon) {
  65. display: none;
  66. }
  67. /* Increase touch area for the icons */
  68. table th .selectedActions a {
  69. padding: 17px 14px;
  70. }
  71. /* Remove the margin to reduce the overlap between the name and the icons */
  72. table.multiselect th .columntitle.name {
  73. margin-left: 0;
  74. }
  75. }