-
Notifications
You must be signed in to change notification settings - Fork 34
/
Copy pathmonk.ui.css
211 lines (196 loc) · 14.6 KB
/
monk.ui.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
/*!
* monk.ui.css
* version: 0.3.5
* author: 百小僧（QQ：8020292）
* site：http://www.baisoft.org
* QQ群：123049073
* https://github.com/MonkSoul/Monk.UI/
*/
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ html { font-family: sans-serif; line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
article, aside, footer, header, nav, section { display: block; }
h1 { font-size: 2em; margin: .67em 0; }
figcaption, figure, main { display: block; }
figure { margin: 1em 40px; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { font-family: monospace,monospace; font-size: 1em; /*自定义*/ overflow: auto; }
a { background-color: transparent; -webkit-text-decoration-skip: objects; }
a:active, a:hover { outline-width: 0; }
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
b, strong { font-weight: inherit; }
b, strong { font-weight: bolder; }
code, kbd, samp { font-family: monospace,monospace; font-size: 1em; }
dfn { font-style: italic; }
mark { background-color: #ff0; color: #000; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -.25em; }
sup { top: -.5em; }
audio, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }
img { border-style: none; }
svg:not(:root) { overflow: hidden; }
button, input, optgroup, select, textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; }
button, input { overflow: visible; }
button, select { text-transform: none; }
[type=reset], [type=submit], button, html [type=button] { -webkit-appearance: button; }
[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner { border-style: none; padding: 0; }
[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset { border: 1px solid silver; margin: 0 2px; padding: .35em .625em .75em; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
progress { display: inline-block; vertical-align: baseline; }
textarea { overflow: auto; }
[type=checkbox], [type=radio] { box-sizing: border-box; padding: 0; }
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; }
[type=search] { -webkit-appearance: textfield; outline-offset: -2px; }
[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
details, menu { display: block; }
summary { display: list-item; }
canvas { display: inline-block; }
template { display: none; }
[hidden] { display: none; }
input::-ms-clear { display: none; }
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
@font-face { font-family: 'iconfont'; src: url('./fonts/iconfont.eot'); /* IE9*/ src: url('./fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('./fonts/iconfont.woff') format('woff'), /* chrome、firefox */ url('./fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('./fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ }
.monk-iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; }
.icon-monk-number:before { content: "\f60a"; }
.icon-monk-file:before { content: "\f60f"; }
.icon-monk-time:before { content: "\f60c"; }
.icon-monk-arrowup:before { content: "\f602"; }
.icon-monk-required:before { content: "\f600"; }
.icon-monk-dagou:before { content: "\f604"; }
.icon-monk-input:before { content: "\f601"; }
.icon-monk-date:before { content: "\f60e"; }
.icon-monk-radio:before { content: "\f608"; }
.icon-monk-radio-checked:before { content: "\f609"; }
.icon-monk-dacha:before { content: "\f607"; }
.icon-monk-arrowdown:before { content: "\f606"; }
/*基础*/
* { box-sizing: border-box; -moz-box-sizing: border-box; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { margin-top: 1px; }
::-webkit-scrollbar-thumb { background: #9f9f9f; }
::-webkit-scrollbar-thumb:window-inactive { background: #9f9f9f; }
/*表单*/
.monk-content-10 { padding: 10px; }
.monk-form-item.inline { display: inline-block; }
.monk-form-item { margin-bottom: 20px; clear: both; position: relative; }
.monk-form-label { display: block; padding: 0 0 8px 0; color: #3498db; font-size: 16px; }
.monk-form-wrap { display: inline-block; border: 1px solid #e9e9e9; border-radius: 3px; position: relative; overflow: hidden; }
.monk-form-wrap.monk-full { width: 100%; }
.monk-form-wrap.focus { border-color: #1abc9c; box-shadow: 0 0 10px #1abc9c; }
.monk-form-wrap .monk-iconfont { background: #f9f9f9; display: block; height: 40px; width: 40px; line-height: 40px; text-align: center; font-size: 18px; color: #bbb; pointer-events: none; float: left; }
.monk-form-wrap .monk-iconfont.border-left { border-left: 1px solid #e9e9e9; }
.monk-form-wrap .monk-iconfont.border-right { border-right: 1px solid #e9e9e9; }
.monk-form-wrap .monk-iconfont.icon-monk-required { background: transparent; font-size: 12px; width: 30px; color: #e74c3c; position: relative; }
.monk-form-wrap .monk-iconfont.textarea-icon { height: 100px; line-height: 100px; }
/*输入框*/
.monk-form-input { height: 40px; border: none; outline: 0; background: transparent; display: block; font-size: 16px; margin: 0; padding: 0 10px; float: left; color: #444; }
.monk-form-input.min { width: 100px; }
.monk-form-input.middle { width: 200px; }
.monk-form-input.normal { width: 300px; }
.monk-form-input.large { width: 400px; }
.monk-form-input.xlarge { width: 500px; }
.monk-form-tip { color: #999; font-size: 13px; padding: 3px 0 0 0; clear: both; }
.monk-form-input[disabled] { background: #f2f2f2; cursor: not-allowed; }
.monk-form-wrap span.monk-iconfont.monk-clear-input { pointer-events: auto; cursor: pointer; color: #d9d9d9; visibility: hidden; }
.monk-form-wrap span.monk-iconfont.monk-clear-input:hover { background: #f2f2f2; }
/*多行输入*/
.monk-form-textarea { height: 100px; border: none; outline: 0; background: transparent; display: block; font-size: 16px; margin: 0; padding: 5px 10px; float: left; resize: none; line-height: 24px; }
.monk-form-textarea.min { width: 300px; }
.monk-form-textarea.middle { width: 400px; }
.monk-form-textarea.normal { width: 500px; }
.monk-form-textarea.large { width: 600px; }
.monk-form-textarea.xlarge { width: 700px; }
.monk-form-textarea[disabled] { background: #f2f2f2; cursor: not-allowed; }
/*选择框*/
.monk-form-checkbox-wrap { cursor: pointer; }
.monk-checkbox-text { display: block; float: left; height: 40px; line-height: 40px; font-size: 16px; padding: 0 10px; }
.monk-form-checkbox-wrap[checked] { border: 1px solid #1abc9c; transition: border 0.2s; -moz-transition: border 0.2s; }
.monk-form-checkbox-wrap[checked] .monk-checkbox-text { background: #1abc9c; color: #fff; transition: background 0.2s; -moz-transition: background 0.2s; }
.monk-form-checkbox-wrap[checked] .monk-iconfont { color: #1abc9c; border-left: 1px solid #1abc9c; transition: border 0.2s; -moz-transition: border 0.2s; }
.monk-form-checkbox-wrap.focus { border-color: #1abc9c; box-shadow: 0 0 10px #1abc9c; }
.monk-form-checkbox-wrap[disabled] { cursor: not-allowed; }
.monk-form-checkbox-wrap[disabled] .monk-checkbox-text { background: #f2f2f2 !important; color: #000; }
.monk-checkbox { display: none; }
/*滑块*/
.monk-form-switch-wrap { cursor: pointer; padding-left: 40px; border: 1px solid #e9e9e9; }
.monk-form-switch-wrap .monk-iconfont { position: absolute; top: 0; left: 0; z-index: 10; border-right: 1px solid #e9e9e9; }
.monk-form-switch-wrap .monk-iconfont:before { content: "\f607"; }
.monk-switch-text { display: block; float: left; height: 40px; line-height: 40px; padding: 0 10px; }
.monk-form-switch-wrap[checked] { border: 1px solid #1abc9c; padding-left: 0; padding-right: 40px; }
.monk-form-switch-wrap[checked] .monk-iconfont { border-left: 1px solid #1abc9c; border-right: 0; background: #1abc9c; color: #fff; left: auto; right: 0; }
.monk-form-switch-wrap[checked] .monk-iconfont:before { content: "\f604"; }
.monk-form-switch-wrap[disabled] { background: #f2f2f2; cursor: not-allowed; }
.monk-form-switch-wrap.focus { border-color: #1abc9c; box-shadow: 0 0 10px #1abc9c; }
.monk-switch { display: none; }
/*单选按钮*/
.monk-form-radio-wrap { cursor: pointer; background: transparent; border: 1px solid #e9e9e9; transition: background,border 0.2s; -moz-transition: background,border 0.2s; }
.monk-radio-text { display: block; float: left; height: 40px; line-height: 40px; font-size: 16px; padding: 0 10px 0 0; }
.monk-form-radio-wrap .monk-iconfont { background: transparent; font-size: 20px; content: "\f608"; }
.monk-form-radio-wrap[checked] { background: #1abc9c; border: 1px solid #1abc9c; }
.monk-form-radio-wrap[checked] .monk-radio-text { color: #fff; }
.monk-form-radio-wrap[checked] .monk-iconfont { color: #fff; }
.monk-form-radio-wrap[checked] .monk-iconfont:before { content: "\f609"; }
.monk-form-radio-wrap[disabled] { background: #f2f2f2; cursor: not-allowed; }
.monk-form-radio-wrap[disabled][checked] .monk-iconfont { color: #1abc9c; }
.monk-form-radio-wrap[disabled][checked] .monk-radio-text { color: #1abc9c; }
.monk-form-radio-wrap.focus { border-color: #1abc9c; box-shadow: 0 0 10px #1abc9c; }
.monk-radio { display: none; }
/*下拉列表*/
.monk-form-select { height: 200px; border: 1px solid #e9e9e9; position: absolute; left: 0; top: 64px; background: #fff; right: 0; z-index: 100; border-color: #1abc9c; box-shadow: 0 0 10px #1abc9c; overflow: auto; }
.monk-form-select.monk-none { display: none; }
.monk-form-wrap.monk-form-select-wrap .monk-iconfont.monk-select-arrow { cursor: pointer; pointer-events: auto; }
.monk-form-wrap.monk-form-select-wrap .monk-iconfont.monk-select-arrow:before { content: "\f606"; }
.monk-form-wrap.monk-form-select-wrap.focus .monk-iconfont.monk-select-arrow:before { content: "\f602"; }
.monk-form-option, .monk-form-optgroup { height: 40px; padding: 0 10px; line-height: 40px; font-size: 14px; }
.monk-form-option:hover, .monk-form-option[selected] { background: #f2f2f2; cursor: pointer; }
.monk-form-optgroup { font-weight: bold; background: #f1f1f1; }
.monk-select { display: none; }
/*时间选择器*/
.monk-form-time { height: 210px; border: 1px solid #e9e9e9; position: absolute; left: 0; top: 64px; background: #fff; right: 0; z-index: 100; border-color: #1abc9c; box-shadow: 0 0 10px #1abc9c; overflow: hidden; }
.monk-form-time.monk-none { display: none; }
.monk-form-time-title { border-bottom: 1px solid #e9e9e9; height: 40px; line-height: 40px; }
.monk-form-time-title span { display: block; float: left; width: 33.3333%; border-right: 1px solid #e9e9e9; text-align: center; font-size: 14px; color: #3498db; }
.monk-form-time-title span:last-child { border-right: none; }
.monk-form-time-list { overflow: auto; height: 130px; position: absolute; width: 100%; bottom: 40px; left: 0; right: 0; }
.monk-form-time-item { float: left; width: 33.3333%; height: 100%; position: relative; overflow: auto; border-right: 1px solid #e9e9e9; }
.monk-form-time-item:last-child { border-right: none; }
.monk-form-time-hour, .monk-form-time-minute, .monk-form-time-second { display: block; text-align: center; font-size: 16px; height: 32px; line-height: 32px; cursor: pointer; }
.monk-form-time-hour:hover, .monk-form-time-minute:hover, .monk-form-time-second:hover,
.monk-form-time-hour.selected, .monk-form-time-minute.selected, .monk-form-time-second.selected { background: #f2f2f2; cursor: pointer; }
.monk-form-time-btn { height: 40px; border-top: 1px solid #e9e9e9; font-size: 14px; color: #3498db; cursor: pointer; position: absolute; width: 100%; bottom: 0; left: 0; right: 0; }
.monk-form-time-btn span { display: block; float: left; width: 50%; text-align: center; height: 40px; line-height: 40px; }
.monk-form-time-btn span:first-child { border-right: 1px solid #e9e9e9; }
.monk-form-wrap.monk-form-time-wrap .monk-iconfont.icon-monk-time { cursor: pointer; pointer-events: auto; }
/*文件选择*/
.monk-form-image-wrap { border: none; position: relative; }
.monk-form-image-wrap .monk-input-button { margin-right: 0; cursor: pointer; margin-top: 0 !important; }
.monk-file { position: absolute; top: 0; left: 0; z-index: 10; right: 0; bottom: 0; height: 100%; width: 100%; border: none; outline: none; background: transparent; opacity: 0.01; cursor: pointer; color: transparent; }
/*按钮*/
.monk-input-button { text-decoration: none; font-size: 14px; display: inline-block; color: #444; background: #fff; border-radius: 3px; white-space: nowrap; padding: 12px 20px; margin-right: 15px; vertical-align: middle; text-align: center; border: none; outline: none; cursor: pointer; margin-top: 10px; }
.monk-input-button.turquoise { background: #1ABC9C; color: #fff; }
.monk-input-button.turquoise:hover { background: #1dd2af; }
.monk-input-button.emerland { background: #2ECC71; color: #fff; }
.monk-input-button.emerland:hover { background: #40d47e; }
.monk-input-button.peterRiver { background: #3498DB; color: #fff; }
.monk-input-button.peterRiver:hover { background: #4aa3df; }
.monk-input-button.amethyst { background: #9b59b6; color: #fff; }
.monk-input-button.amethyst:hover { background: #a66bbe; }
.monk-input-button.clouds { background: #ECF0F1; color: #bdc3c7; }
.monk-input-button.clouds:hover { background: #f3f3f3; }
.monk-input-button .monk-iconfont { padding-right: 4px; font-size: 16px; float: left; display: block; }
.monk-input-button[disabled] { background: #f0f0f0 !important; cursor: not-allowed; color: #b2b2b2; }
/*显示文本*/
.monk-form-detail-wrap { padding: 10px; background: #f5f5f5; font-size: 16px; line-height: 24px; color: #444; }
/*显示代码*/
.monk-form-code-wrap { border: none; }
.monk-code { border: 1px solid #e9e9e9; background: #f5f5f5; width: 100%; padding: 20px 10px 20px 0; position: relative; margin: 0; word-break: break-all; white-space: pre-wrap; }
.monk-code-language { position: absolute; right: 0; bottom: 0; z-index: 10; font-family: Arial; padding: 3px; color: #999; font-size: 12px; }
.monk-code ol.monk-code-area { list-style-type: decimal; margin: 0; }
.monk-code ol.monk-code-area li { font-size: 12px; color: #999; padding: 0; }
.monk-code ol.monk-code-area li:nth-child(2n+1) { background: #f0f0f0; }
.monk-code ol.monk-code-area li code { color: #000; line-height: 1.8; font-size: 14px; padding: 0 10px; font-family: Arial; display: block; }