mobile.scss 1.3 KB

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