mobile.css 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. @media only screen and (max-width: 768px) {
  2. .app-files #app-content.dir-drop{
  3. background-color: rgba(255, 255, 255, 1)!important;
  4. }
  5. /* don’t require a minimum width for files table */
  6. #body-user #filestable {
  7. min-width: initial !important;
  8. }
  9. /* hide size and date columns */
  10. table th#headerSize,
  11. table td.filesize,
  12. table th#headerDate,
  13. table td.date {
  14. display: none;
  15. }
  16. /* remove padding to let border bottom fill the whole width*/
  17. table td {
  18. padding: 0;
  19. }
  20. /* and accordingly fix left margin of file list summary on mobile */
  21. .summary .info {
  22. margin-left: 105px;
  23. }
  24. /* remove shift for multiselect bar to account for missing navigation */
  25. table.multiselect thead {
  26. padding-left: 0;
  27. }
  28. /* restrict length of displayed filename to prevent overflow */
  29. table td.filename .nametext {
  30. width: 100%;
  31. }
  32. #fileList a.action.action-menu img {
  33. padding-left: 0;
  34. }
  35. #fileList .fileActionsMenu {
  36. margin-right: 6px;
  37. }
  38. /* hide text of the share action on mobile */
  39. #fileList a.action-share span {
  40. display: none;
  41. }
  42. #fileList a.action.action-favorite {
  43. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)" !important;
  44. opacity: .7 !important;
  45. }
  46. #fileList a.action.action-favorite {
  47. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)" !important;
  48. opacity: .3 !important;
  49. }
  50. /* ellipsis on file names */
  51. table td.filename .nametext .innernametext {
  52. max-width: 50%;
  53. }
  54. /* ellipsis on user names in share sidebar */
  55. #shareWithList .username {
  56. max-width: 80px !important;
  57. }
  58. /* proper notification area for multi line messages */
  59. #notification-container {
  60. display: -webkit-box;
  61. display: -moz-box;
  62. display: -ms-flexbox;
  63. display: -webkit-flex;
  64. display: flex;
  65. }
  66. /* shorten elements for mobile */
  67. #uploadprogressbar, #uploadprogressbar .label.inner {
  68. width: 50px;
  69. }
  70. /* hide desktop-only parts */
  71. #uploadprogressbar .desktop {
  72. display: none !important;
  73. }
  74. #uploadprogressbar .mobile {
  75. display: block !important;
  76. }
  77. }