_base.scss 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302
  1. html {
  2. height: 100%;
  3. font-size: 100%;
  4. background: #fff; // fallback to show the error message to browsers that don't support CSS variables.
  5. background: var(--documentBackground);
  6. @include mobile { font-size: 93.75%; }
  7. @include print { background: none; }
  8. @import 'global/print';
  9. }
  10. html._theme-default {
  11. color-scheme: light only;
  12. }
  13. html._theme-dark {
  14. color-scheme: dark only;
  15. }
  16. body {
  17. height: 100%;
  18. margin: 0;
  19. overflow: auto;
  20. font-size: 1em;
  21. font-weight: normal;
  22. font-family: $baseFont;
  23. line-height: 1.7;
  24. color: $textColor; // fallback to show the error message to browsers that don't support CSS variables.
  25. color: var(--textColor);
  26. word-wrap: break-word;
  27. overflow-wrap: break-word;
  28. background: var(--contentBackground);
  29. touch-action: manipulation;
  30. -webkit-tap-highlight-color: rgba(black, 0);
  31. -webkit-touch-callout: none;
  32. -webkit-text-size-adjust: 100%;
  33. -ms-text-size-adjust: 100%;
  34. }
  35. a {
  36. color: var(--linkColor);
  37. text-decoration: var(--linkTextDecoration);
  38. &:hover {
  39. color: var(--linkColorHover);
  40. text-decoration: underline;
  41. }
  42. }
  43. img {
  44. max-width: 100%;
  45. height: auto;
  46. border: 0;
  47. }
  48. h1, h2, h3, h4, h5, h6 {
  49. margin: 1.5em 0 1em;
  50. line-height: 1.3;
  51. font-weight: var(--bolderFontWeight);
  52. }
  53. h1 { font-size: 1.5em; }
  54. h2 { font-size: 1.375em; }
  55. h3 { font-size: 1.25em; }
  56. h4 { font-size: 1.125em; }
  57. h5, h6 { font-size: 1em; }
  58. p { margin: 0 0 1em; }
  59. p:last-child { margin-bottom: 0; }
  60. b, strong { font-weight: var(--boldFontWeight); }
  61. small { font-size: .9em; }
  62. ul, ol {
  63. margin: 1.5em 0;
  64. padding: 0 0 0 2em;
  65. list-style: disc outside;
  66. }
  67. ul ul { list-style-type: circle; }
  68. ol { list-style-type: decimal; }
  69. ol ol { list-style-type: lower-alpha; }
  70. ol ol ol { list-style-type: lower-roman; }
  71. li + li { margin-top: .25em; }
  72. li > ul, li > ol, dd > ul, dd > ol { margin: .5em 0; }
  73. li > p { margin-bottom: .25em; }
  74. dl { margin: 1.5em 0; }
  75. dt { font-weight: var(--boldFontWeight); }
  76. dd {
  77. margin: .375em;
  78. padding-left: 1em;
  79. + dt { margin-top: 1em; }
  80. }
  81. abbr, acronym, dfn {
  82. cursor: help;
  83. border-bottom: 1px dotted var(--textColor);
  84. }
  85. pre, code, samp, %pre, %code {
  86. font-family: var(--monoFont);
  87. font-weight: normal;
  88. font-style: normal;
  89. font-size: .9em;
  90. color: var(--textColor);
  91. white-space: pre-wrap;
  92. direction: ltr;
  93. -moz-tab-size: 2;
  94. -o-tab-size: 2;
  95. tab-size: 2;
  96. }
  97. pre, %pre {
  98. position: relative;
  99. margin: 1.5em 0;
  100. padding: .375rem .625rem;
  101. line-height: 1.5;
  102. overflow: auto;
  103. @extend %box;
  104. }
  105. details:has(> pre) {
  106. margin: 1.5em 0;
  107. > pre {
  108. margin: 0;
  109. }
  110. }
  111. a > code { color: inherit; }
  112. table {
  113. margin: 1.5em 0;
  114. background: none;
  115. border: 1px solid var(--boxBorder);
  116. border-collapse: separate;
  117. border-spacing: 0;
  118. border-radius: 3px;
  119. display: inline-block;
  120. overflow-x: auto;
  121. max-width: 100%;
  122. }
  123. caption {
  124. font-weight: var(--boldFontWeight);
  125. padding: 0 .7em .3em;
  126. }
  127. th, td {
  128. vertical-align: top;
  129. padding: .3em .7em;
  130. padding-bottom: -webkit-calc(.3em + 1px);
  131. padding-bottom: calc(.3em + 1px);
  132. text-align: left;
  133. white-space: normal !important;
  134. }
  135. th {
  136. font-weight: var(--boldFontWeight);
  137. border: 0;
  138. border-bottom: 1px solid var(--boxBorder);
  139. border-radius: 0;
  140. @extend %heading-box;
  141. &:empty { background: none; }
  142. + th, + td { border-left: 1px solid var(--boxBorder); }
  143. tr:first-child > &:first-child { border-top-left-radius: 3px; }
  144. tr:first-child > &:last-child { border-top-right-radius: 3px; }
  145. tr:last-child > &:first-child { border-bottom-left-radius: 3px; }
  146. thead > tr:last-child > &:first-child { border-bottom-left-radius: 0; }
  147. tr:last-child > & { border-bottom-width: 0; }
  148. thead > tr:last-child > & { border-bottom-width: 1px; }
  149. }
  150. td {
  151. background: var(--contentBackground);
  152. border-bottom: 1px solid var(--boxBorderLight);
  153. + td { border-left: 1px solid var(--boxBorderLight); }
  154. tr:last-child > & { border-bottom: 0; }
  155. > pre:only-child, > p:only-child, > ul:only-child, > ol:only-child {
  156. margin-top: 0;
  157. margin-bottom: 0;
  158. }
  159. > pre:first-child, > p:first-child, > ul:first-child, > ol:first-child { margin-top: 0; }
  160. > pre:last-child, > p:last-child, > ul:last-child, > ol:last-child { margin-bottom: 0; }
  161. }
  162. section, main {
  163. display: block;
  164. outline: 0;
  165. }
  166. label {
  167. display: block;
  168. @extend %user-select-none;
  169. }
  170. input, button {
  171. display: inline-block;
  172. margin: 0;
  173. font-family: inherit;
  174. font-size: 100%;
  175. color: var(--textColor);
  176. line-height: normal;
  177. @extend %border-box;
  178. }
  179. input[type=checkbox] {
  180. width: 1rem;
  181. height: 1rem;
  182. cursor: pointer;
  183. }
  184. button {
  185. padding: 0;
  186. background: none;
  187. border: 0;
  188. cursor: pointer;
  189. }
  190. button, input[type="search"] {
  191. -webkit-appearance: none;
  192. appearance: none;
  193. }
  194. button:focus {
  195. outline: 1px dotted;
  196. outline: -webkit-focus-ring-color auto 5px;
  197. }
  198. img, iframe {
  199. background: var(--externalsBackground);
  200. }
  201. input[type="search"]::-webkit-search-cancel-button,
  202. input[type="search"]::-webkit-search-decoration {
  203. -webkit-appearance: none;
  204. }
  205. ::-ms-clear { display: none; }
  206. ::-moz-focus-inner {
  207. padding: 0 !important;
  208. border: 0 !important;
  209. }
  210. ::-webkit-input-placeholder { color: var(--textColorLighter); }
  211. ::-moz-placeholder { color: var(--textColorLighter); opacity: 1; }
  212. :-ms-input-placeholder { color: var(--textColorLighter); }
  213. body:not(._native-scrollbars) {
  214. *::-webkit-scrollbar { -webkit-appearance: none; }
  215. *::-webkit-scrollbar:vertical { width: 16px; }
  216. *::-webkit-scrollbar:horizontal { height: 16px; }
  217. *::-webkit-scrollbar-button,
  218. *::-webkit-scrollbar-corner { display: none; }
  219. *::-webkit-scrollbar-track {
  220. background: var(--contentBackground);
  221. border: 1px solid var(--contentBackground);
  222. &:hover {
  223. background: var(--sidebarBackground);
  224. border-color: var(--sidebarBorder);
  225. }
  226. &:vertical { border-width: 0 0 0 1px; }
  227. &:vertical:corner-present {
  228. border-width: 0 0 1px 1px;
  229. border-radius: 0 0 0 2px;
  230. }
  231. &:horizontal {
  232. border-width: 1px 1px 0 1px;
  233. border-radius: 2px 2px 0 0;
  234. }
  235. }
  236. *::-webkit-scrollbar-thumb {
  237. min-height: 2rem;
  238. background: var(--scrollbarColor);
  239. background-clip: padding-box;
  240. border: 5px solid rgba(black, 0);
  241. border-radius: 10px;
  242. &:hover,
  243. &:active {
  244. background-color: var(--scrollbarColorHover);
  245. border-width: 4px;
  246. }
  247. }
  248. }