368 lines
		
	
	
		
			4.3 KiB
		
	
	
	
		
			Plaintext
		
	
	
	
			
		
		
	
	
			368 lines
		
	
	
		
			4.3 KiB
		
	
	
	
		
			Plaintext
		
	
	
	
| @import "var";
 | |
| 
 | |
| * {
 | |
|   padding: 0;
 | |
|   margin: 0;
 | |
| }
 | |
| 
 | |
| html {
 | |
|   font-size: @baseFontSize+1;
 | |
|   font-family: Helvetica, "Microsoft Yahei", Arial, sans-serif;
 | |
|   // make sure min font size
 | |
|   -ms-text-size-adjust: 100%;
 | |
|   -webkit-text-size-adjust: 100%;
 | |
|   line-height: @baseLineHeight;
 | |
| 
 | |
|   color: @baseFontColor;
 | |
|   background-color: @baseBgColor;
 | |
| 
 | |
| }
 | |
| 
 | |
| input,
 | |
| textarea,
 | |
| select,
 | |
| option,
 | |
| button {
 | |
|   font-family: Helvetica, "Microsoft Yahei", Arial, sans-serif;
 | |
| }
 | |
| 
 | |
| // html5 block elements
 | |
| 
 | |
| article,
 | |
| aside,
 | |
| details,
 | |
| figcaption,
 | |
| figure,
 | |
| footer,
 | |
| header,
 | |
| main,
 | |
| nav,
 | |
| section,
 | |
| summary,
 | |
| .block {
 | |
|   display: block;
 | |
| }
 | |
| 
 | |
| .inline {
 | |
|   display: inline;
 | |
| }
 | |
| 
 | |
| .inline-block {
 | |
|   display: inline-block;
 | |
| }
 | |
| 
 | |
| .dis-table {
 | |
|   display: table;
 | |
| }
 | |
| 
 | |
| .dis-table-cell {
 | |
|   display: table-cell;
 | |
| }
 | |
| 
 | |
| .dis-flex {
 | |
|   display: flex;
 | |
| }
 | |
| 
 | |
| // html5 media elements
 | |
| 
 | |
| audio,
 | |
| canvas,
 | |
| progress,
 | |
| video {
 | |
|   display: inline-block;
 | |
|   vertical-align: baseline;
 | |
| }
 | |
| 
 | |
| audio:not([controls]) {
 | |
|   display: none;
 | |
|   height: 0;
 | |
| }
 | |
| 
 | |
| // display hidden elements
 | |
| 
 | |
| [hidden],
 | |
| template,
 | |
| .hidden {
 | |
|     display: none;
 | |
| }
 | |
| .opacity {
 | |
|     opacity: 0;
 | |
| }
 | |
| .opacity-half {
 | |
|     opacity: .5;
 | |
| }
 | |
| 
 | |
| // links element
 | |
| 
 | |
| a,
 | |
| .text-link {
 | |
|   color: @linkColor;
 | |
|   text-decoration: none;
 | |
|   cursor: pointer;
 | |
|   &:hover {
 | |
|     color: @linkHoverColor;
 | |
|     text-decoration: none;
 | |
|   }
 | |
|   &:focus {
 | |
|     outline: none;
 | |
|   }
 | |
| }
 | |
| 
 | |
| // stylus elements
 | |
| 
 | |
| b,
 | |
| strong,
 | |
| .text-bold {
 | |
|   font-weight: bold;
 | |
| }
 | |
| 
 | |
| dfn,
 | |
| .text-italic {
 | |
|   font-style: italic;
 | |
| }
 | |
| 
 | |
| // headers elements
 | |
| 
 | |
| h1,
 | |
| .text-h1 {
 | |
|   font-size: 2em;
 | |
|   margin-bottom: 0.67em;
 | |
| }
 | |
| 
 | |
| h2,
 | |
| .text-h2 {
 | |
|   font-size: 1.6em;
 | |
|   margin-bottom: 0.625em;
 | |
| }
 | |
| 
 | |
| h3,
 | |
| .text-h3 {
 | |
|   font: 1.2em;
 | |
|   margin-bottom: 0.5em;
 | |
| }
 | |
| 
 | |
| h4,
 | |
| h5,
 | |
| h6,
 | |
| .text-h4,
 | |
| .text-h5,
 | |
| .text-h6 {
 | |
|   font-size: 1em;
 | |
|   margin-bottom: .3em;
 | |
| }
 | |
| 
 | |
| // text elements
 | |
| 
 | |
| small,
 | |
| .text-small {
 | |
|   font-size: .8em;
 | |
| }
 | |
| 
 | |
| sub,
 | |
| sup,
 | |
| .text-sup,
 | |
| .text-sub {
 | |
|   font-size: .7em;
 | |
|   line-height: 0;
 | |
|   position: relative;
 | |
|   vertical-align: baseline;
 | |
| }
 | |
| 
 | |
| sup,
 | |
| .text-sup {
 | |
|   top: -0.5em;
 | |
| }
 | |
| 
 | |
| sub,
 | |
| .text-sub {
 | |
|   bottom: -0.25em;
 | |
| }
 | |
| 
 | |
| .figure,
 | |
| .blockquote {
 | |
|   margin: 1em 1.5em;
 | |
| }
 | |
| 
 | |
| pre {
 | |
|   overflow: auto;
 | |
|   margin: 0;
 | |
|   padding: .4em 1em;
 | |
| }
 | |
| 
 | |
| code,
 | |
| kbd,
 | |
| pre,
 | |
| samp {
 | |
|     font-family: monospace;
 | |
|     font-size: 1em;
 | |
| }
 | |
| 
 | |
| .text-left {
 | |
|   text-align: left;
 | |
| }
 | |
| .text-right {
 | |
|   text-align: right;
 | |
| }
 | |
| .text-center {
 | |
|   text-align: center;
 | |
| }
 | |
| .list-no-style {
 | |
|   list-style: none;
 | |
| }
 | |
| 
 | |
| // image elements
 | |
| 
 | |
| img {
 | |
|   border: none;
 | |
| }
 | |
| 
 | |
| svg:not(:root) {
 | |
|   overflow: hidden;
 | |
| }
 | |
| 
 | |
| // form elements
 | |
| 
 | |
| label {
 | |
|   font-weight: bold;
 | |
| }
 | |
| 
 | |
| textarea,
 | |
| input,
 | |
| .ipt {
 | |
|   padding: .6em;
 | |
|   line-height: normal;
 | |
|   border: 1px solid @iptBorderColor;
 | |
|   &:focus {
 | |
|     background-color: @iptFocusColor;
 | |
|     outline: none;
 | |
|   }
 | |
| }
 | |
| 
 | |
| button {
 | |
|   overflow: visible;
 | |
|   padding: .6em 1.2em;
 | |
| }
 | |
| 
 | |
| button,
 | |
| select {
 | |
|   text-transform: none;
 | |
|   &:focus {
 | |
|     outline: none;
 | |
|   }
 | |
| }
 | |
| 
 | |
| button,
 | |
| input[type="button"],
 | |
| input[type="reset"],
 | |
| input[type="submit"] {
 | |
|   -webkit-appearance: button;
 | |
|   -moz-appearance: button;
 | |
|   cursor: pointer;
 | |
|   background-color: @btnBgColor;
 | |
|   color: @btnFontColor;
 | |
|   border: none;
 | |
|   &:hover {
 | |
|     background-color: @btnHoverBgColor;
 | |
|     color: @btnHoverFontColor;
 | |
|   }
 | |
| }
 | |
| 
 | |
| button[disabled],
 | |
| html input[disabled] {
 | |
|   cursor: default;
 | |
| }
 | |
| 
 | |
| button::-moz-focus-inner,
 | |
| input::-moz-focus-inner {
 | |
|   border: 0;
 | |
|   padding: 0;
 | |
| }
 | |
| 
 | |
| input[type="checkbox"],
 | |
| input[type="radio"] {
 | |
|   box-sizing: border-box;
 | |
|   padding: 0;
 | |
| }
 | |
| 
 | |
| input[type="search"] {
 | |
|   -webkit-appearance: textfield;
 | |
|   -moz-appearance: textfield;
 | |
|   -moz-box-sizing: content-box;
 | |
|   -webkit-box-sizing: content-box;
 | |
|   box-sizing: content-box;
 | |
| }
 | |
| 
 | |
| fieldset {
 | |
|   border: 1px solid @iptBorderColor;
 | |
|   margin: 0 2px;
 | |
|   padding: 0.4em 0.8em 0.8em;
 | |
| }
 | |
| 
 | |
| legend {
 | |
|   border: 0;
 | |
|   padding: 0;
 | |
| }
 | |
| 
 | |
| textarea {
 | |
|   overflow: auto;
 | |
|   border: 1px solid @iptBorderColor;
 | |
|   padding: .6em;
 | |
|   &:focus {
 | |
|     background-color: @iptFocusColor;
 | |
|     outline: none;
 | |
|   }
 | |
| }
 | |
| 
 | |
| optgroup {
 | |
|   font-weight: bold;
 | |
| }
 | |
| 
 | |
| // table elements
 | |
| table {
 | |
|     background-color: transparent;
 | |
|     border-collapse: collapse;
 | |
|     border-spacing: 0;
 | |
| }
 | |
| 
 | |
| td,
 | |
| th {
 | |
|   padding: 0;
 | |
| }
 | |
| 
 | |
| // hr element
 | |
| 
 | |
| hr {
 | |
|   -moz-box-sizing: content-box;
 | |
|   box-sizing: content-box;
 | |
|   height: 0;
 | |
|   border: none;
 | |
|   border-bottom: 1px solid @hrColor;
 | |
|   margin-bottom: .75em;
 | |
| }
 | |
| // radius element
 | |
| 
 | |
| .radius {
 | |
|   border-radius: .25em;
 | |
| }
 | |
| 
 | |
| // truncate element
 | |
| 
 | |
| .text-truncate {
 | |
|     overflow: hidden;
 | |
|     text-overflow: ellipsis;
 | |
|     white-space: nowrap;
 | |
|     display: inline-block;
 | |
|     vertical-align: top;
 | |
| }
 | |
| 
 | |
| // code elements
 | |
| 
 | |
| pre {
 | |
|   line-height: 1.6;
 | |
|   overflow: auto;
 | |
|   padding: 0;
 | |
| }
 | |
| 
 | |
| dt {
 | |
|     font-weight: bold;
 | |
| } |