mobile.css 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. @media only screen and (max-width: 768px) {
  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 text of download button, only show icon */
  7. #download-text {
  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. /* restrict length of displayed filename to prevent overflow */
  18. table td.filename .nametext {
  19. max-width: 75% !important;
  20. }
  21. /* on mobile, show single shared image at full width without margin */
  22. #imgframe {
  23. width: 100%;
  24. padding: 0;
  25. margin-bottom: 35px;
  26. }
  27. /* some margin for the file type icon */
  28. #imgframe .publicpreview {
  29. margin-top: 32px;
  30. }
  31. /* always show actions on mobile */
  32. #fileList a.action {
  33. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)" !important;
  34. filter: alpha(opacity=20) !important;
  35. opacity: .2 !important;
  36. display: inline !important;
  37. }
  38. /* some padding for better clickability */
  39. #fileList a.action img {
  40. padding: 0 6px 0 12px;
  41. }
  42. /* hide text of the actions on mobile */
  43. #fileList a.action span {
  44. display: none;
  45. }
  46. /* ellipsis on file names */
  47. .nametext {
  48. width: 60%;
  49. white-space: nowrap;
  50. overflow: hidden;
  51. text-overflow: ellipsis;
  52. }
  53. }