_mobile.scss 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  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 ._settings-btn { width: auto; }
  35. // Header
  36. ._header-btn { width: 2.5rem; }
  37. ._header-btn[hidden] { display: block; }
  38. ._search {
  39. padding-right: .125rem;
  40. padding-left: .125rem;
  41. &:before { left: .5rem; }
  42. }
  43. ._search-tag { left: .5rem; }
  44. // Sidebar
  45. ._sidebar {
  46. position: static;
  47. min-height: 100%;
  48. overflow: visible;
  49. }
  50. ._list-item {
  51. white-space: normal;
  52. word-wrap: break-word;
  53. overflow-wrap: break-word;
  54. box-shadow: none;
  55. }
  56. ._list-result {
  57. padding-left: 2.375rem;
  58. &:before {
  59. position: absolute;
  60. top: .25rem;
  61. left: .75rem;
  62. }
  63. }
  64. // Notice
  65. ._notice {
  66. position: fixed;
  67. left: 0;
  68. padding: 0 .5rem;
  69. }
  70. ._notice-text { font-size: .75em; }
  71. // Notification
  72. ._notif { position: fixed; }
  73. // Table of contents
  74. ._toc {
  75. float: none;
  76. max-width: none;
  77. margin-left: 0;
  78. }
  79. }
  80. //
  81. // Fix viewport on Windows Phone
  82. //
  83. @-ms-viewport { width: device-width; }
  84. @media (orientation: portrait) and (min-device-width: 720px) and (max-device-width: 768px),
  85. (orientation: landscape) and (device-width: 1280px) and (max-device-height: 768px) {
  86. @-ms-viewport { width: 50%; }
  87. }
  88. //
  89. // Header buttons
  90. //
  91. ._forward-btn {
  92. margin-right: -.5rem;
  93. > svg { margin-left: -.375rem; }
  94. }
  95. //
  96. // Intro
  97. //
  98. ._mobile-intro {
  99. > ._intro-list { padding-left: 1.5rem; }
  100. ._intro-hide {
  101. position: static;
  102. float: none;
  103. display: block;
  104. margin-top: .75rem;
  105. text-align: center;
  106. }
  107. }