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