source: documentation/trunk/tutorial_sample_files/libraries/althor/less/comments.less@ 28599

Last change on this file since 28599 was 28599, checked in by jlwhisler, 10 years ago

Draft interface for use in Defining Libraries tutorial.

File size: 5.5 KB
Line 
1@import "palette.less";
2
3/* COMMENTS ------------------------------------------------------------*/
4
5#comments-wrap{
6 padding-top: 40px;
7 margin-bottom: 60px;
8
9 .heading{
10 margin-bottom: 10px;
11 padding-top: 0px;
12 padding-bottom: 10px;
13 border-top: 0px solid @fontColor;
14 border-bottom: 5px solid @fontColor;
15 }
16
17 a{ text-decoration: none; }
18
19
20 .commentlist{
21
22 margin: 0 0 30px 0;
23 list-style-type: none;
24 font-size: 14px;
25
26
27 .comment-body {
28 border-bottom: 1px solid @fontColor;
29 margin: 0 0 18px;
30 padding: 25px 0px 20px 0px;
31 }
32
33 > li:last-child{
34 border: none;
35 padding-top: 0px;
36 }
37
38
39
40 .v-card{ color: #ccc;}
41
42 .comment .avatar {
43 float: right;
44 margin: 2px 15px 0 0;
45 height: 35px;
46 width: 35px;
47 }
48
49 .respond-title-wrap,
50 .comment-title-wrap {
51 border-bottom: 1px solid #484848;
52 padding: 0 0 15px 0;
53 margin: 0 0 30px 0;
54 }
55
56 #respond-title,
57 #comments,
58 .add-comment-link {
59 font-size: 15px;
60 color: #2c2d31;
61 font-weight: bold;
62 }
63
64 .respond-caption { font-size: 11px; }
65
66 .add-comment-link a {
67 font-size: 12px;
68 padding: 0 15px 0 0;
69 }
70
71
72 .comment-body{
73 position: relative;
74 margin-bottom: 20px;
75 }
76
77 ul li { padding: 0 0 0px 0; }
78
79 ul li:first-child .comment-border {
80 border-bottom: 1px #ccc solid;
81 margin: 18px 0 0 0;
82 height: 18px;
83 width: 430px;
84 }
85
86 /* CHILDREN ------------------------------------------------------------*/
87
88 .comment {
89
90 p:last-child { margin: 0; }
91
92 .children {
93 list-style-type: none;
94 margin-left: 13%;
95
96 .comment-body {
97 border-bottom: 1px solid @fontColor;
98 padding-bottom: 20px;
99 }
100
101 .comment-meta {
102 margin-left: 0px;
103 margin-bottom: 18px;
104 }
105
106 .comment .avatar {
107 height: 35px;
108 width: 35px;
109 }
110
111 li{ background: url(../img/reply.png) no-repeat 10px 40px; }
112
113 .comment-body {
114 margin: 20px 0 0 0px;
115 }
116 }
117
118 }
119
120
121 .nocomments {
122 text-align: center;
123 padding: 20px;
124 }
125
126 .comment-body ul { list-style-type: disc; }
127
128 .comment-body ol { list-style-type: decimal; }
129
130 /* REPLY ------------------------------------------------------------*/
131
132 .reply {
133 position: absolute;
134 right: 1px;
135 top: 1px;
136 }
137
138 .comment-reply-link-wrap {
139
140 .comment-reply-link {
141 color: @linkColor;
142 font-size: 11px;
143
144 &:hover{ color: @accentColor; }
145 }
146 }
147
148
149 /* META ------------------------------------------------------------*/
150
151 .comment-meta {
152 margin: 0 0 20px 0px;
153 color: @fontColor -2221;
154 font-size: 11px;
155 position: relative;
156 }
157
158 .comment-author{
159 color: #444;
160 font-weight: bold;
161 }
162
163 .comment-author cite {
164 font-weight: bold;
165 font-style: normal;
166 color: #2C2D31;
167 margin: 0;
168 padding: 0;
169
170 a {
171 padding: 0 15px 0 0;
172 color: #2C2D31;
173 }
174 }
175
176
177 /* COMMENTS PAGINATION ------------------------------------------------------------*/
178
179 .comments-pagination {
180 clear:both;
181 overflow: hidden;
182 padding:20px 0;
183 position:relative;
184 font-size:11px;
185 line-height:14px;
186 margin-bottom: 10px;
187
188 span,
189 a {
190 display:block;
191 float:left;
192 margin: 2px 2px 2px 0;
193 padding:6px 9px 5px 9px;
194 text-decoration:none;
195 width:auto;
196 color:#fff;
197 background: #555;
198
199 &:hover{
200 color:#fff;
201 background: #000000;
202 }
203 }
204
205 .current{
206 padding:6px 9px 5px 9px;
207 background: #000000;
208 color:#fff;
209 }
210 }
211 }
212
213}
214
215
216
217/* FORMS ------------------------------------------------------------*/
218
219
220
221#respond{
222 margin: 25px 0 0px 0px;
223
224 .heading{
225 margin-bottom: 41px;
226 padding-top: 0px;
227 padding-bottom: 10px;
228 border-top: 0px solid @fontColor;
229 border-bottom: 5px solid @fontColor;
230 }
231
232 #cancel-comment-reply-link{
233 display: block;
234 float: right;
235 color: @linkColor;
236 text-decoration: none;
237 background: none;
238 padding: 3px 10px;
239 font-family: Helvetica, Arial, "sans-serif";
240 font-size: 12px;
241
242
243 &:hover{
244 text-decoration: underline;
245 }
246 }
247
248}
249
250
251#commentform,
252#contactForm{
253 margin-bottom: 70px;
254
255
256
257 .comment-notes{ margin-bottom: 30px;}
258 .form-allowed-tags{
259 margin-bottom: 20px;
260 font-size: 14px;
261 color: @fontColor;
262 }
263
264 input,
265 textarea{
266 padding: 10px 15px;
267 background: #f1f1f1;
268 color: #484848;
269 border: 1px solid #ccc;
270 font-size: 14px;
271 font-family: Helvetica, Arial;
272 line-height: 1.5em;
273 overflow: auto;
274
275 &:focus{
276 background: #fff;
277 -webkit-box-shadow: 0px 0px 3px rgba(251,228,113,.4);
278 -moz-box-shadow: 0px 0px 3px rgba(251,228,113,.4);
279 -o-box-shadow: 0px 0px 3px rgba(251,228,113,.4);
280 box-shadow: 0px 0px 3px rgba(251,228,113,.4);
281 }
282 }
283
284
285 input[type="text"],
286 input[type="password"]{
287 overflow: auto;
288 width: 50%;
289 margin-top: 10px;
290 margin-bottom: 10px;
291 overflow: hidden;
292 }
293
294 textarea{
295 width: 93.1818%;
296 height: 230px;
297 margin-top: 10px;
298 margin-bottom: 10px;
299 }
300
301 input[type="submit"],
302 input[type="button"]{
303
304 width: auto;
305 color: #444;
306 font-size: 14px;
307 background: @fgColor;
308 color: @accentColor;
309 padding: 10px 15px;
310 .shadow();
311 .transition();
312
313 cursor: pointer;
314
315 &:hover{
316
317 -webkit-transform: translate(0px , -5px);
318 -moz-transform: translate(0px , -5px);
319 -o-transform: translate(0px , -5px);
320 transform: translate(0px , -5px);
321 }
322 }
323
324
325
326 input#submit{ margin-top: 7px; }
327
328 label{
329 display: block;
330 margin-bottom: -10px;
331 }
332
333
334
335 p{
336 margin-bottom: 10px;
337 }
338
339 #error{
340 margin-left: 10px;
341 }
342
343
344 #sent-form-msg{
345 padding: 5px 10px;
346 margin-bottom: 40px;
347 background: rgba(0, 0, 0, 0.1);
348 color: #444;
349 }
350
351}
Note: See TracBrowser for help on using the repository browser.