mobile.scss 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. @use 'variables';
  2. @media only screen and (max-width: variables.$breakpoint-mobile) {
  3. /* make header scroll up for single shares, more view of content on small screens */
  4. #header.share-file {
  5. position: absolute !important;
  6. }
  7. /* hide size and date columns */
  8. table th.column-size,
  9. table td.filesize,
  10. table th.column-mtime,
  11. table td.date {
  12. display: none;
  13. }
  14. /* restrict length of displayed filename to prevent overflow */
  15. table td.filename .nametext {
  16. max-width: 75% !important;
  17. }
  18. /* on mobile, show single shared image at full width without margin */
  19. #imgframe {
  20. width: 100%;
  21. padding: 0;
  22. }
  23. /* some margin for the file type icon */
  24. #imgframe .publicpreview {
  25. margin-top: 32px;
  26. }
  27. /* some padding for better clickability */
  28. .files-fileList a.action img {
  29. padding: 0 6px 0 12px;
  30. }
  31. /* hide text of the actions on mobile */
  32. .files-fileList a.action:not(.menuitem) span {
  33. display: none;
  34. }
  35. /* ellipsis on file names */
  36. .nametext {
  37. width: 60%;
  38. white-space: nowrap;
  39. overflow: hidden;
  40. text-overflow: ellipsis;
  41. }
  42. #header .menutoggle {
  43. padding-right: 14px;
  44. background-position: center;
  45. }
  46. .note {
  47. padding: 0 20px;
  48. }
  49. .emptycontent {
  50. margin-top: 10vh;
  51. }
  52. }