mobile.scss 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. @media only screen and (max-width: $breakpoint-mobile) {
  2. /* make header scroll up for single shares, more view of content on small screens */
  3. #header.share-file {
  4. position: absolute !important;
  5. }
  6. /* hide size and date columns */
  7. table th#headerSize,
  8. table td.filesize,
  9. table th#headerDate,
  10. table td.date {
  11. display: none;
  12. }
  13. /* restrict length of displayed filename to prevent overflow */
  14. table td.filename .nametext {
  15. max-width: 75% !important;
  16. }
  17. /* on mobile, show single shared image at full width without margin */
  18. #imgframe {
  19. width: 100%;
  20. padding: 0;
  21. margin-bottom: 35px;
  22. }
  23. /* some margin for the file type icon */
  24. #imgframe .publicpreview {
  25. margin-top: 32px;
  26. }
  27. /* some padding for better clickability */
  28. #fileList a.action img {
  29. padding: 0 6px 0 12px;
  30. }
  31. /* hide text of the actions on mobile */
  32. #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. }