You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

368 lines
4.4 KiB

10 years ago
10 years ago
10 years ago
  1. @import "var";
  2. * {
  3. padding: 0;
  4. margin: 0;
  5. }
  6. html {
  7. font-size: @baseFontSize+1;
  8. font-family: Helvetica, "Microsoft Yahei", Arial, sans-serif;
  9. // make sure min font size
  10. -ms-text-size-adjust: 100%;
  11. -webkit-text-size-adjust: 100%;
  12. line-height: @baseLineHeight;
  13. color: @baseFontColor;
  14. background-color: @baseBgColor;
  15. }
  16. input,
  17. textarea,
  18. select,
  19. option,
  20. button {
  21. font-family: Helvetica, "Microsoft Yahei", Arial, sans-serif;
  22. }
  23. // html5 block elements
  24. article,
  25. aside,
  26. details,
  27. figcaption,
  28. figure,
  29. footer,
  30. header,
  31. main,
  32. nav,
  33. section,
  34. summary,
  35. .block {
  36. display: block;
  37. }
  38. .inline {
  39. display: inline;
  40. }
  41. .inline-block {
  42. display: inline-block;
  43. }
  44. .dis-table {
  45. display: table;
  46. }
  47. .dis-table-cell {
  48. display: table-cell;
  49. }
  50. .dis-flex {
  51. display: flex;
  52. }
  53. // html5 media elements
  54. audio,
  55. canvas,
  56. progress,
  57. video {
  58. display: inline-block;
  59. vertical-align: baseline;
  60. }
  61. audio:not([controls]) {
  62. display: none;
  63. height: 0;
  64. }
  65. // display hidden elements
  66. [hidden],
  67. template,
  68. .hidden {
  69. display: none;
  70. }
  71. .opacity {
  72. opacity: 0;
  73. }
  74. .opacity-half {
  75. opacity: .5;
  76. }
  77. // links element
  78. a,
  79. .text-link {
  80. color: @linkColor;
  81. text-decoration: none;
  82. cursor: pointer;
  83. &:hover {
  84. color: @linkHoverColor;
  85. text-decoration: none;
  86. }
  87. &:focus {
  88. outline: none;
  89. }
  90. }
  91. // stylus elements
  92. b,
  93. strong,
  94. .text-bold {
  95. font-weight: bold;
  96. }
  97. dfn,
  98. .text-italic {
  99. font-style: italic;
  100. }
  101. // headers elements
  102. h1,
  103. .text-h1 {
  104. font-size: 2em;
  105. margin-bottom: 0.67em;
  106. }
  107. h2,
  108. .text-h2 {
  109. font-size: 1.6em;
  110. margin-bottom: 0.625em;
  111. }
  112. h3,
  113. .text-h3 {
  114. font: 1.2em;
  115. margin-bottom: 0.5em;
  116. }
  117. h4,
  118. h5,
  119. h6,
  120. .text-h4,
  121. .text-h5,
  122. .text-h6 {
  123. font-size: 1em;
  124. margin-bottom: .3em;
  125. }
  126. // text elements
  127. small,
  128. .text-small {
  129. font-size: .8em;
  130. }
  131. sub,
  132. sup,
  133. .text-sup,
  134. .text-sub {
  135. font-size: .7em;
  136. line-height: 0;
  137. position: relative;
  138. vertical-align: baseline;
  139. }
  140. sup,
  141. .text-sup {
  142. top: -0.5em;
  143. }
  144. sub,
  145. .text-sub {
  146. bottom: -0.25em;
  147. }
  148. .figure,
  149. .blockquote {
  150. margin: 1em 1.5em;
  151. }
  152. pre {
  153. overflow: auto;
  154. margin: 0;
  155. padding: .4em 1em;
  156. }
  157. code,
  158. kbd,
  159. pre,
  160. samp {
  161. font-family: monospace;
  162. font-size: 1em;
  163. }
  164. .text-left {
  165. text-align: left;
  166. }
  167. .text-right {
  168. text-align: right;
  169. }
  170. .text-center {
  171. text-align: center;
  172. }
  173. .list-no-style {
  174. list-style: none;
  175. }
  176. // image elements
  177. img {
  178. border: none;
  179. }
  180. svg:not(:root) {
  181. overflow: hidden;
  182. }
  183. // form elements
  184. label {
  185. font-weight: bold;
  186. }
  187. textarea,
  188. input,
  189. .ipt {
  190. padding: .6em;
  191. line-height: normal;
  192. border: 1px solid @iptBorderColor;
  193. &:focus {
  194. background-color: @iptFocusColor;
  195. outline: none;
  196. }
  197. }
  198. button,.btn {
  199. overflow: visible;
  200. padding: .6em 1.2em;
  201. }
  202. button,
  203. select {
  204. text-transform: none;
  205. &:focus {
  206. outline: none;
  207. }
  208. }
  209. button,
  210. input[type="button"],
  211. input[type="reset"],
  212. input[type="submit"] {
  213. -webkit-appearance: button;
  214. -moz-appearance: button;
  215. cursor: pointer;
  216. background-color: @btnBgColor;
  217. color: @btnFontColor;
  218. border: none;
  219. &:hover {
  220. background-color: @btnHoverBgColor;
  221. color: @btnHoverFontColor;
  222. }
  223. }
  224. button[disabled],
  225. html input[disabled] {
  226. cursor: default;
  227. }
  228. button::-moz-focus-inner,
  229. input::-moz-focus-inner {
  230. border: 0;
  231. padding: 0;
  232. }
  233. input[type="checkbox"],
  234. input[type="radio"] {
  235. box-sizing: border-box;
  236. padding: 0;
  237. }
  238. input[type="search"] {
  239. -webkit-appearance: textfield;
  240. -moz-appearance: textfield;
  241. -moz-box-sizing: content-box;
  242. -webkit-box-sizing: content-box;
  243. box-sizing: content-box;
  244. }
  245. fieldset {
  246. border: 1px solid @iptBorderColor;
  247. margin: 0 2px;
  248. padding: 0.4em 0.8em 0.8em;
  249. }
  250. legend {
  251. border: 0;
  252. padding: 0;
  253. }
  254. textarea {
  255. overflow: auto;
  256. border: 1px solid @iptBorderColor;
  257. padding: .6em;
  258. &:focus {
  259. background-color: @iptFocusColor;
  260. outline: none;
  261. }
  262. }
  263. optgroup {
  264. font-weight: bold;
  265. }
  266. // table elements
  267. table {
  268. background-color: transparent;
  269. border-collapse: collapse;
  270. border-spacing: 0;
  271. }
  272. td,
  273. th {
  274. padding: 0;
  275. }
  276. // hr element
  277. hr {
  278. -moz-box-sizing: content-box;
  279. box-sizing: content-box;
  280. height: 0;
  281. border: none;
  282. border-bottom: 1px solid @hrColor;
  283. margin-bottom: .75em;
  284. }
  285. // radius element
  286. .radius {
  287. border-radius: .25em;
  288. }
  289. // truncate element
  290. .text-truncate {
  291. overflow: hidden;
  292. text-overflow: ellipsis;
  293. white-space: nowrap;
  294. display: inline-block;
  295. vertical-align: top;
  296. }
  297. // code elements
  298. pre {
  299. line-height: 1.6;
  300. overflow: auto;
  301. padding: 0;
  302. }
  303. dt {
  304. font-weight: bold;
  305. }