1 | $namespaced: huazhi;
|
2 |
|
3 | $platform: 'web', 'webview', 'editor', 'mobile';
|
4 |
|
5 | @mixin lazyload {
|
6 | & > div {
|
7 | overflow: hidden;
|
8 | box-sizing: border-box;
|
9 | margin: 10px 0;
|
10 | line-height: 0;
|
11 | & > div {
|
12 | overflow: hidden;
|
13 | margin: 0 auto;
|
14 | max-width: 90%;
|
15 | position: relative;
|
16 |
|
17 | div {
|
18 | border-radius: 20px;
|
19 | transition: opacity 0.3s ease-in;
|
20 | width: 100%;
|
21 | position: relative;
|
22 | background-color: rgba(100, 100, 100, 0.1);
|
23 | &::after {
|
24 | content: '加载中...';
|
25 | color: #ccc;
|
26 | position: absolute;
|
27 | top: 50%;
|
28 | left: 50%;
|
29 | transform: translate(-50%, -50%);
|
30 | }
|
31 | }
|
32 |
|
33 | img {
|
34 | position: absolute;
|
35 | top: 50%;
|
36 | left: 50%;
|
37 | transform: translate(-50%, -50%);
|
38 | display: block;
|
39 |
|
40 | max-width: 100%;
|
41 | z-index: 1;
|
42 | }
|
43 | }
|
44 |
|
45 | span {
|
46 | line-height: 22px;
|
47 | margin-top: 6px;
|
48 | color: #333;
|
49 | font-size: 14px;
|
50 | display: block;
|
51 | text-align: center;
|
52 | }
|
53 |
|
54 | video {
|
55 | margin: 15px auto;
|
56 | display: block;
|
57 | width: 600px;
|
58 | height: 400px;
|
59 | background-color: black;
|
60 | }
|
61 | }
|
62 | }
|
63 |
|
64 | @mixin emoji {
|
65 | i {
|
66 | vertical-align: middle;
|
67 | display: inline-block;
|
68 | width: 24px;
|
69 | height: 24px;
|
70 | background-size: cover;
|
71 | }
|
72 | }
|
73 |
|
74 | .#{$namespaced} {
|
75 | white-space: pre-wrap;
|
76 | word-wrap: break-word;
|
77 |
|
78 | &.#{$namespaced}-web {
|
79 | p {
|
80 | overflow: hidden;
|
81 | line-height: 32px;
|
82 | font-size: 16px;
|
83 | span {
|
84 | color: #333;
|
85 | font-size: 14px;
|
86 | display: block;
|
87 | text-align: center;
|
88 | margin-bottom: 10px;
|
89 | }
|
90 | }
|
91 |
|
92 | a {
|
93 |
|
94 | font-weight: 400;
|
95 | color: rgba(127, 159, 205, 1);
|
96 | line-height: 36px;
|
97 | text-decoration: none;
|
98 | }
|
99 |
|
100 | blockquote {
|
101 |
|
102 | }
|
103 |
|
104 | h2 {
|
105 | font-size: 22px;
|
106 | margin: 20px 0;
|
107 | line-height: 34px;
|
108 | }
|
109 |
|
110 | img {
|
111 | margin: 15px auto 0;
|
112 | max-width: 90%;
|
113 | border-radius: 6px;
|
114 | display: block;
|
115 | }
|
116 |
|
117 | video {
|
118 | margin: 15px auto 15px;
|
119 | display: block;
|
120 | border-radius: 6px;
|
121 | background-color: black;
|
122 | outline: none;
|
123 | }
|
124 |
|
125 | ol, ul {
|
126 | padding: 10px 20px 10px 40px;
|
127 | list-style: decimal;
|
128 | li {
|
129 | margin-bottom: 20px;
|
130 | }
|
131 | }
|
132 |
|
133 | .ql-align-center {
|
134 | text-align: center;
|
135 | }
|
136 |
|
137 | @include emoji;
|
138 | }
|
139 |
|
140 | &.#{$namespaced}-web-comment {
|
141 | @include emoji;
|
142 | }
|
143 |
|
144 | &.#{$namespaced}-mobile {
|
145 | line-height: 48px;
|
146 | h2 {
|
147 | font-size: 40px;
|
148 | margin: 20px 0;
|
149 | }
|
150 |
|
151 | blockquote {
|
152 |
|
153 | background-color: whitesmoke;
|
154 | padding: 10px;
|
155 | border-radius: 4px;
|
156 | font-size: 30px;
|
157 | }
|
158 |
|
159 | a {
|
160 |
|
161 | font-size: 28px;
|
162 | font-weight: 400;
|
163 | color: rgba(127, 159, 205, 1);
|
164 | line-height: 36px;
|
165 | }
|
166 |
|
167 | b {
|
168 | font-weight: bold;
|
169 | }
|
170 |
|
171 | p {
|
172 | font-size: 30px;
|
173 | }
|
174 |
|
175 | a {
|
176 | color: #7f9fcd;
|
177 | text-decoration: none;
|
178 | }
|
179 |
|
180 | .image-div {
|
181 | text-align: center;
|
182 | padding: 10px 5px;
|
183 | div {
|
184 | font-size: 26px;
|
185 | }
|
186 | }
|
187 |
|
188 | img {
|
189 | max-width: 90%;
|
190 | border-radius: 5px;
|
191 | }
|
192 |
|
193 | .video-div {
|
194 | padding: 10px 5px;
|
195 | text-align: center;
|
196 | }
|
197 |
|
198 | video {
|
199 | width: 90%;
|
200 | height: 360px;
|
201 | border-radius: 5px;
|
202 | background-color: black;
|
203 | }
|
204 |
|
205 | ol, ul {
|
206 | list-style: decimal;
|
207 | font-size: 30px;
|
208 | padding: 20px 60px;
|
209 | }
|
210 |
|
211 | .ql-align-center {
|
212 | text-align: center;
|
213 | }
|
214 |
|
215 | @include emoji;
|
216 |
|
217 |
|
218 | }
|
219 |
|
220 | &.#{$namespaced}-webview {
|
221 |
|
222 | line-height: 48px;
|
223 | h2 {
|
224 | font-size: 40px;
|
225 | margin: 20px 0;
|
226 | }
|
227 |
|
228 | blockquote {
|
229 | margin: 20px 0px;
|
230 | background-color: whitesmoke;
|
231 | padding: 20px;
|
232 | border-radius: 4px;
|
233 | font-size: 30px;
|
234 | }
|
235 |
|
236 | a {
|
237 |
|
238 | font-size: 28px;
|
239 | font-weight: 400;
|
240 | color: rgba(127, 159, 205, 1);
|
241 | line-height: 36px;
|
242 | }
|
243 |
|
244 | b {
|
245 | font-weight: bold;
|
246 | }
|
247 |
|
248 | p {
|
249 | font-size: 30px;
|
250 | }
|
251 |
|
252 | a {
|
253 | color: #7f9fcd;
|
254 | text-decoration: none;
|
255 | }
|
256 |
|
257 | img {
|
258 | max-width: 90%;
|
259 | margin: 0 auto;
|
260 | border-radius: 5px;
|
261 | }
|
262 |
|
263 | video {
|
264 | max-width: 90%;
|
265 | background-color: black;
|
266 | }
|
267 |
|
268 | ol, ul {
|
269 | list-style: decimal;
|
270 | font-size: 30px;
|
271 | padding: 20px 60px;
|
272 | }
|
273 |
|
274 | .ql-align-center {
|
275 | text-align: center;
|
276 | }
|
277 |
|
278 | .image-div {
|
279 | text-align: center;
|
280 | div {
|
281 | font-size: 24px;
|
282 | }
|
283 | }
|
284 |
|
285 |
|
286 | }
|
287 |
|
288 | hr {
|
289 | margin: 10px 0;
|
290 | }
|
291 | }
|