You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

mobile.scss 2.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. @media only screen and (max-width: 768px) {
  2. #body-login #header {
  3. padding-top: 10px;
  4. }
  5. #body-login .wrapper {
  6. display: flex;
  7. flex-direction: row;
  8. align-self: center;
  9. align-items: center;
  10. }
  11. /* do not show update notification on mobile */
  12. #update-notification {
  13. display: none !important;
  14. }
  15. /* position share dropdown */
  16. #dropdown {
  17. margin-right: 10% !important;
  18. width: 80% !important;
  19. }
  20. /* fix name autocomplete not showing on mobile */
  21. .ui-autocomplete {
  22. z-index: 1000 !important;
  23. }
  24. /* fix error display on smaller screens */
  25. .error-wide {
  26. width: 100%;
  27. margin-left: 0 !important;
  28. box-sizing: border-box;
  29. }
  30. /* APP SIDEBAR TOGGLE and SWIPE ----------------------------------------------*/
  31. #app-navigation,
  32. #app-content {
  33. position: absolute !important;
  34. top: 0;
  35. left: 0;
  36. right: 0;
  37. bottom: 0;
  38. }
  39. #app-navigation {
  40. width: 250px !important;
  41. }
  42. #app-content {
  43. width: 100% !important;
  44. left: 0 !important;
  45. background-color: $color-main-background;
  46. overflow-x: hidden !important;
  47. z-index: 1000;
  48. }
  49. /* allow horizontal scrollbar in settings
  50. otherwise user management is not usable on mobile */
  51. #body-settings #app-content {
  52. overflow-x: auto !important;
  53. }
  54. #app-navigation-toggle {
  55. position: fixed;
  56. display: inline-block !important;
  57. top: 45px;
  58. left: 0;
  59. width: 44px;
  60. height: 44px;
  61. z-index: 149;
  62. background-color: rgba($color-main-background, .7);
  63. cursor: pointer;
  64. opacity: .6;
  65. }
  66. #app-navigation-toggle:hover,
  67. #app-navigation-toggle:focus {
  68. opacity: 1;
  69. }
  70. /* position controls for apps with app-navigation */
  71. #app-navigation+#app-content #controls {
  72. padding-left: 44px;
  73. }
  74. /* .viewer-mode is when text editor, PDF viewer, etc is open */
  75. #body-user .app-files.viewer-mode #controls {
  76. padding-left: 0 !important;
  77. }
  78. .app-files.viewer-mode #app-navigation-toggle {
  79. display: none !important;
  80. }
  81. table.multiselect thead {
  82. left: 0 !important;
  83. }
  84. /* prevent overflow in user management controls bar */
  85. #usersearchform {
  86. display: none;
  87. }
  88. #body-settings #controls {
  89. min-width: 768px !important;
  90. }
  91. /* do not show dates in filepicker */
  92. #oc-dialog-filepicker-content .filelist .filesize,
  93. #oc-dialog-filepicker-content .filelist .date {
  94. display: none;
  95. }
  96. #oc-dialog-filepicker-content .filelist .filename {
  97. max-width: 80%;
  98. }
  99. /* fix controls bar jumping when navigation is slid out */
  100. .snapjs-left #app-navigation-toggle,
  101. .snapjs-left #controls {
  102. top: 0;
  103. }
  104. .snapjs-left table.multiselect thead {
  105. top: 44px;
  106. }
  107. /* end of media query */
  108. }