sakura.css 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. /* Sakura.css v1.5.0
  2. * ================
  3. * Minimal css theme.
  4. * Project: https://github.com/oxalorg/sakura/
  5. */
  6. /* Body */
  7. html {
  8. font-size: 62.5%;
  9. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  10. }
  11. body {
  12. font-size: 1.8rem;
  13. line-height: 1.618;
  14. max-width: 38em;
  15. margin: auto;
  16. color: #4a4a4a;
  17. background-color: #f9f9f9;
  18. padding: 13px;
  19. }
  20. @media (max-width: 684px) {
  21. body {
  22. font-size: 1.53rem;
  23. }
  24. }
  25. @media (max-width: 382px) {
  26. body {
  27. font-size: 1.35rem;
  28. }
  29. }
  30. h1, h2, h3, h4, h5, h6 {
  31. line-height: 1.1;
  32. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  33. font-weight: 700;
  34. margin-top: 3rem;
  35. margin-bottom: 1.5rem;
  36. overflow-wrap: break-word;
  37. word-wrap: break-word;
  38. -ms-word-break: break-all;
  39. word-break: break-word;
  40. }
  41. h1 {
  42. font-size: 2.35em;
  43. }
  44. h2 {
  45. font-size: 2em;
  46. }
  47. h3 {
  48. font-size: 1.75em;
  49. }
  50. h4 {
  51. font-size: 1.5em;
  52. }
  53. h5 {
  54. font-size: 1.25em;
  55. }
  56. h6 {
  57. font-size: 1em;
  58. }
  59. p {
  60. margin-top: 0px;
  61. margin-bottom: 2.5rem;
  62. }
  63. small, sub, sup {
  64. font-size: 75%;
  65. }
  66. hr {
  67. border-color: #1d7484;
  68. }
  69. a {
  70. text-decoration: none;
  71. color: #1d7484;
  72. }
  73. a:visited {
  74. color: #144f5a;
  75. }
  76. a:hover {
  77. color: #982c61;
  78. border-bottom: 2px solid #4a4a4a;
  79. }
  80. ul {
  81. padding-left: 1.4em;
  82. margin-top: 0px;
  83. margin-bottom: 2.5rem;
  84. }
  85. li {
  86. margin-bottom: 0.4em;
  87. }
  88. blockquote {
  89. margin-left: 0px;
  90. margin-right: 0px;
  91. padding-left: 1em;
  92. padding-top: 0.8em;
  93. padding-bottom: 0.8em;
  94. padding-right: 0.8em;
  95. border-left: 5px solid #1d7484;
  96. margin-bottom: 2.5rem;
  97. background-color: #f1f1f1;
  98. }
  99. blockquote p {
  100. margin-bottom: 0;
  101. }
  102. img, video {
  103. height: auto;
  104. max-width: 100%;
  105. margin-top: 0px;
  106. margin-bottom: 2.5rem;
  107. }
  108. /* Pre and Code */
  109. pre {
  110. background-color: #f1f1f1;
  111. display: block;
  112. padding: 1em;
  113. overflow-x: auto;
  114. margin-top: 0px;
  115. margin-bottom: 2.5rem;
  116. font-size: 0.9em;
  117. }
  118. code, kbd, samp {
  119. font-size: 0.9em;
  120. padding: 0 0.5em;
  121. background-color: #f1f1f1;
  122. white-space: pre-wrap;
  123. }
  124. pre > code {
  125. padding: 0;
  126. background-color: transparent;
  127. white-space: pre;
  128. font-size: 1em;
  129. }
  130. /* Tables */
  131. table {
  132. text-align: justify;
  133. width: 100%;
  134. border-collapse: collapse;
  135. margin-bottom: 2rem;
  136. }
  137. td, th {
  138. padding: 0.5em;
  139. border-bottom: 1px solid #f1f1f1;
  140. }
  141. /* Buttons, forms and input */
  142. input, textarea {
  143. border: 1px solid #4a4a4a;
  144. }
  145. input:focus, textarea:focus {
  146. border: 1px solid #1d7484;
  147. }
  148. textarea {
  149. width: 100%;
  150. }
  151. .button, button, input[type=submit], input[type=reset], input[type=button], input[type=file]::file-selector-button {
  152. display: inline-block;
  153. padding: 5px 10px;
  154. text-align: center;
  155. text-decoration: none;
  156. white-space: nowrap;
  157. background-color: #1d7484;
  158. color: #f9f9f9;
  159. border-radius: 1px;
  160. border: 1px solid #1d7484;
  161. cursor: pointer;
  162. box-sizing: border-box;
  163. }
  164. .button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled], input[type=file]::file-selector-button[disabled] {
  165. cursor: default;
  166. opacity: 0.5;
  167. }
  168. .button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, input[type=file]::file-selector-button:hover {
  169. background-color: #982c61;
  170. color: #f9f9f9;
  171. outline: 0;
  172. }
  173. .button:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible, input[type=file]::file-selector-button:focus-visible {
  174. outline-style: solid;
  175. outline-width: 2px;
  176. }
  177. textarea, select, input {
  178. color: #4a4a4a;
  179. padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  180. margin-bottom: 10px;
  181. background-color: #f1f1f1;
  182. border: 1px solid #f1f1f1;
  183. border-radius: 4px;
  184. box-shadow: none;
  185. box-sizing: border-box;
  186. }
  187. textarea:focus, select:focus, input:focus {
  188. border: 1px solid #1d7484;
  189. outline: 0;
  190. }
  191. input[type=checkbox]:focus {
  192. outline: 1px dotted #1d7484;
  193. }
  194. label, legend, fieldset {
  195. display: block;
  196. margin-bottom: 0.5rem;
  197. font-weight: 600;
  198. }