_mobile.scss 2.2 KB

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