_mobile.scss 2.2 KB

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