_mobile.scss 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. //
  2. // Mobile overrides
  3. //
  4. ._mobile {
  5. font-size: 100%;
  6. background: var(--contentBackground);
  7. ._hide-on-mobile { display: none; }
  8. // Layout
  9. body { -ms-overflow-style: -ms-autohiding-scrollbar; }
  10. &:not(._booting) {
  11. ._app, ._content { overflow: visible; }
  12. }
  13. ._container {
  14. margin: 0;
  15. padding-top: var(--headerHeight);
  16. }
  17. ._content {
  18. position: static;
  19. height: auto;
  20. margin: 0;
  21. padding: .75rem 1rem 1px;
  22. &:before { content: none; }
  23. }
  24. ._content-loading:before, ._splash-title { font-size: 3rem; }
  25. ._header { position: fixed; }
  26. ._header, ._list {
  27. width: 100%;
  28. border-right: 0;
  29. box-shadow: none;
  30. }
  31. // Settings
  32. ._settings { position: relative; }
  33. ._settings-tabs { display: block; }
  34. ._header > ._settings-btn-back { width: auto; }
  35. // Header
  36. ._header-btn[hidden] { display: block; }
  37. ._search {
  38. padding-right: .125rem;
  39. padding-left: .125rem;
  40. > svg { left: .5rem; }
  41. }
  42. ._search-tag { left: .5rem; }
  43. ._search-clear > svg { left: .25rem; }
  44. // Sidebar
  45. ._sidebar {
  46. position: relative;
  47. min-height: 100%;
  48. overflow: visible;
  49. }
  50. ._resizer { display: none; }
  51. ._list-item {
  52. white-space: normal;
  53. word-wrap: break-word;
  54. overflow-wrap: break-word;
  55. box-shadow: none;
  56. }
  57. ._list-result {
  58. padding-left: 2.375rem;
  59. &:before {
  60. position: absolute;
  61. top: .25rem;
  62. left: .75rem;
  63. }
  64. }
  65. // Notice
  66. ._notice {
  67. position: fixed;
  68. left: 0;
  69. padding: 0 .5rem;
  70. }
  71. ._notice-text { font-size: .75em; }
  72. // Notification
  73. ._notif { position: fixed; }
  74. // Table of contents
  75. ._toc {
  76. float: none;
  77. max-width: none;
  78. margin-left: 0;
  79. }
  80. // Search Aliases
  81. ._aliases {
  82. display: block;
  83. > table { width: 100%; }
  84. }
  85. }
  86. //
  87. // Fix viewport on Windows Phone
  88. //
  89. @-ms-viewport { width: device-width; }
  90. @media (orientation: portrait) and (min-device-width: 720px) and (max-device-width: 768px),
  91. (orientation: landscape) and (device-width: 1280px) and (max-device-height: 768px) {
  92. @-ms-viewport { width: 50%; }
  93. }
  94. //
  95. // Header buttons
  96. //
  97. ._forward-btn {
  98. margin-right: -.5rem;
  99. > svg { margin-left: -.375rem; }
  100. }
  101. //
  102. // Intro
  103. //
  104. ._mobile-intro {
  105. > ._intro-list { padding-left: 1.5rem; }
  106. ._intro-hide {
  107. position: static;
  108. float: none;
  109. display: block;
  110. margin-top: .75rem;
  111. text-align: center;
  112. }
  113. }