mobile.css 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. @charset "UTF-8";
  2. /**
  3. * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
  4. *
  5. * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
  6. *
  7. * @license GNU AGPL version 3 or any later version
  8. *
  9. * This program is free software: you can redistribute it and/or modify
  10. * it under the terms of the GNU Affero General Public License as
  11. * published by the Free Software Foundation, either version 3 of the
  12. * License, or (at your option) any later version.
  13. *
  14. * This program is distributed in the hope that it will be useful,
  15. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  16. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  17. * GNU Affero General Public License for more details.
  18. *
  19. * You should have received a copy of the GNU Affero General Public License
  20. * along with this program. If not, see <http://www.gnu.org/licenses/>.
  21. *
  22. */
  23. /* 938 = table min-width(688) + app-navigation width: 250\
  24. $breakpoint-mobile +1 = size where app-navigation is hidden +1
  25. 688 = table min-width */
  26. @media only screen and (max-width: 988px) and (min-width: 1025px), only screen and (max-width: 688px) {
  27. .app-files #app-content.dir-drop {
  28. background-color: rgb(255, 255, 255) !important;
  29. }
  30. table th.column-size,
  31. table td.filesize,
  32. table th.column-mtime,
  33. table td.date {
  34. display: none;
  35. }
  36. /* remove padding to let border bottom fill the whole width*/
  37. table td {
  38. padding: 0;
  39. }
  40. /* remove shift for multiselect bar to account for missing navigation */
  41. table.multiselect thead {
  42. padding-left: 0;
  43. }
  44. .fileList a.action.action-menu img {
  45. padding-left: 0;
  46. }
  47. .fileList .fileActionsMenu {
  48. margin-right: 6px;
  49. }
  50. /* hide text of the share action on mobile */
  51. /* .hidden-visually for accessbility */
  52. .fileList a.action-share span:not(.icon):not(.avatar) {
  53. position: absolute;
  54. left: -10000px;
  55. top: auto;
  56. width: 1px;
  57. height: 1px;
  58. overflow: hidden;
  59. }
  60. /* shorten elements for mobile */
  61. #uploadprogressbar, #uploadprogressbar .label.inner {
  62. width: 50px;
  63. }
  64. /* hide desktop-only parts */
  65. #uploadprogressbar .desktop {
  66. display: none !important;
  67. }
  68. #uploadprogressbar .mobile {
  69. display: block !important;
  70. }
  71. /* ensure that it is visible over #app-content */
  72. table.dragshadow {
  73. z-index: 1000;
  74. }
  75. }
  76. @media only screen and (max-width: 480px) {
  77. /* Only show icons */
  78. table th .selectedActions {
  79. float: right;
  80. }
  81. table th .selectedActions > a span:not(.icon) {
  82. display: none;
  83. }
  84. /* Increase touch area for the icons */
  85. table th .selectedActions a {
  86. padding: 17px 14px;
  87. }
  88. /* Remove the margin to reduce the overlap between the name and the icons */
  89. table.multiselect th .columntitle.name {
  90. margin-left: 0;
  91. }
  92. }
  93. /*# sourceMappingURL=mobile.css.map */