mobile.css 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. @media only screen and (max-width: 768px) {
  2. /* don’t require a minimum width for files table */
  3. #body-user #filestable {
  4. min-width: initial !important;
  5. }
  6. /* do not show Deleted Files on mobile, not optimized yet and button too long */
  7. #controls #trash {
  8. display: none;
  9. }
  10. /* hide size and date columns */
  11. table th#headerSize,
  12. table td.filesize,
  13. table th#headerDate,
  14. table td.date {
  15. display: none;
  16. }
  17. /* remove padding to let border bottom fill the whole width*/
  18. table td {
  19. padding: 0;
  20. }
  21. /* and accordingly fix left margin of file list summary on mobile */
  22. .summary .info {
  23. margin-left: 105px;
  24. }
  25. /* remove shift for multiselect bar to account for missing navigation */
  26. table.multiselect thead {
  27. padding-left: 0;
  28. }
  29. /* restrict length of displayed filename to prevent overflow */
  30. table td.filename .nametext {
  31. width: 100%;
  32. }
  33. /* always show actions on mobile, not only on hover */
  34. #fileList a.action {
  35. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)" !important;
  36. filter: alpha(opacity=20) !important;
  37. opacity: .2 !important;
  38. display: inline !important;
  39. }
  40. /* show share action of shared items darker to distinguish from non-shared */
  41. #fileList a.action.permanent {
  42. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)" !important;
  43. filter: alpha(opacity=70) !important;
  44. opacity: .7 !important;
  45. }
  46. /* do not show Rename or Versions on mobile */
  47. #fileList .action.action-rename,
  48. #fileList .action.action-versions {
  49. display: none !important;
  50. }
  51. /* some padding for better clickability */
  52. #fileList a.action img {
  53. padding: 0 6px 0 12px;
  54. }
  55. /* hide text of the actions on mobile */
  56. #fileList a.action span {
  57. display: none;
  58. }
  59. /* ellipsis on file names */
  60. table td.filename .nametext .innernametext {
  61. max-width: 50%;
  62. }
  63. /* proper notification area for multi line messages */
  64. #notification-container {
  65. display: -webkit-box;
  66. display: -moz-box;
  67. display: -ms-flexbox;
  68. display: -webkit-flex;
  69. display: flex;
  70. }
  71. /* shorten elements for mobile */
  72. #uploadprogressbar {
  73. width: 50px;
  74. }
  75. }