]> git.immae.eu Git - github/wallabag/wallabag.git/blame - themes/default/css/style.css
tag cloud is present, #1122 is implemented
[github/wallabag/wallabag.git] / themes / default / css / style.css
CommitLineData
2f3425df
JCSD
1@font-face {
2 font-family: 'Roboto';
3 font-style: normal;
4 font-weight: 400;
5 src: local('Roboto Regular'), local('Roboto-Regular'), url(../fonts/Roboto.woff) format('woff');
6}
7
8
9
4cc3c2ac
NL
10body {
11 margin: 10px;
12 font-family: 'Roboto',Verdana,Geneva,sans-serif;
13 font-size: 16px;
14 color: #000;
15}
16
17header {
18 text-align: center;
19}
20
21header h1 {
22 font-size: 1.3em;
23}
24
25a,
26a:hover,
27a:visited {
28 color: #000;
29}
30
31.bouton {
32 border: none;
33 border-radius: 2px;
34 color: #fff;
35 background-color: #000;
36}
37
38.bouton:hover {
39 color: #f1f1f1;
40 background-color: #222;
41 cursor: pointer;
42}
43
44#main {
45 margin: 0 auto;
46}
47
48#main #links {
49 padding: 0;
50 text-align: center;
51 font-size: 0.9em;
52 list-style-type: none;
53}
54
55#main #links li {
56 display: inline;
57}
58
59#main #links li .current {
60 -webkit-border-radius: 2px;
61 border-radius: 2px;
62 color: #fff;
63 background-color: #000;
64}
65
66#main #sort {
67 padding: 0;
68 text-align: center;
69 list-style-type: none;
70 opacity: 0.5;
71}
72
73#main #sort li {
74 display: inline;
75 font-size: 0.9em;
76}
77
78#main #sort li + li {
79 margin-left: 10px;
80}
81
82#main #sort a {
83 padding: 2px 2px 0;
84 vertical-align: middle;
85}
86
87#main #sort img {
88 vertical-align: baseline;
89}
90#main #sort img:hover {
91 cursor: pointer;
92}
93
94#links a {
95 padding: 5px 10px;
96 text-decoration: none;
97}
98
99#links a:hover {
100 -webkit-border-radius: 2px;
101 border-radius: 2px;
102 color: #f1f1f1;
103 background-color: #040707;
104}
105
106/*** ***/
107
108/*** LINKS DISPLAY ***/
109
110#main .tool {
111 text-decoration: none;
112 cursor: pointer;
113}
114
115#main #content {
116 margin-top: 20px;
117}
118
119#main #content h2 {
120 text-decoration: none;
121 font-size: 1.3em;
122}
123
124#main #content .entrie {
125 margin-top: 15px;
126 padding-bottom: 15px;
127 border-bottom: 1px dashed #222;
128 overflow: hidden;
129}
130
131/* First entry */
132#main #content .results + .entrie {
133 clear: both;
134 margin-top: 0;
135}
136
137#main .entrie .tools {
138 float: right;
139 text-align: right;
140 list-style-type: none;
141 opacity: 0.5;
142}
143
144#main .entrie .tools .tool span {
145 display: inline-block;
146 width: 16px;
147 height: 16px;
148 /* Hide textual content */
149 overflow: hidden;
150 text-align: left;
151 text-indent: -9999px;
152}
153
311baf86
TC
154.random {
155 display: inline-block;
156 width: 16px;
157 height: 16px;
158 overflow: hidden;
159 text-align: left;
160 text-indent: -9999px;
161 background-image: url('../img/default/dice.png');
162}
163
4cc3c2ac
NL
164/*** ***/
165
166/*** ARTICLE PAGE ***/
167
168#article {
169 margin: 0 auto;
170}
171
172#article header {
173 border-bottom: 1px solid #222;
174}
175
176#article header {
177 text-align: left;
178}
179
180#article header h1 small {
181 float: right;
182 font-size: 0.6em;
183}
184
185#article header a {
186 text-decoration: none;
187}
188
68e20616
NL
189#article .tags {
190 font-size: 0.8em;
191 color: #888;
192 padding-bottom: 5px;
193}
194
4cc3c2ac
NL
195.backhome {
196 display: inline;
197}
198
199.results {
200 padding: 15px 0;
201 overflow: hidden;
202}
203
204.nb-results {
205 float: left;
206 font-size: 0.9em;
207 line-height: 24px;
208 vertical-align: middle;
209}
210
211#article_toolbar {
212 position: fixed;
213 bottom: 0;
214 left: 0;
215 width: 100%;
06fef431 216 min-height: 50px;
4cc3c2ac
NL
217 padding-top: 17px;
218 text-align: center;
219 color: #fff;
220 opacity: 0.8;
221 background: #fff;
222}
223
224#article_toolbar li {
225 display: inline;
226 padding-right: 30px;
227}
228
229#article_toolbar .tool {
230 padding: 0 2px;
231}
232
233#article_toolbar .tool span {
234 display: inline-block;
235 width: 16px;
236 height: 16px;
237 /* Hide textual content */
238 overflow: hidden;
239 text-align: left;
240 text-indent: -9999px;
241}
242
243/*** ***/
244
245/*** PAGINATION ***/
246
247.pagination {
248 float: right;
249 text-align: right;
250}
251
252.pagination a {
253 height: 25px;
254 margin: 2px;
255 padding: 4px 8px;
256 border: 1px solid #d5d5d5;
257 text-decoration: none;
258 font-size: 11px;
259 font-weight: bold;
260 color: #333;
261}
262
263.pagination a:hover,
264.pagination a:active {
265 background-color: #efefef;
266}
267
268.pagination .current {
269 height: 25px;
270 margin: 2px;
271 padding: 4px 8px;
272 border: 1px solid #d5d5d5;
273 text-decoration: none;
274 font-size: 11px;
275 font-weight: bold;
276 color: #000;
277 background-color: #ccc;
278}
279
280.pagination .disabled {
281 display: none;
282}
283
284#bookmarklet {
285 padding: 5px;
286 border: 1px dashed #808080;
287 background: #fff;
288 cursor: move;
289}
290
291.top_link {
292 display: none;
293 z-index: 2000;
294 position: fixed;
295 right: 15px;
296 bottom: 15px;
297 padding: 20px;
298 -webkit-border-radius: 40px;
299 -moz-border-radius: 40px;
300 border-radius: 40px;
301 opacity: 0.9;
302 background: #ccc;
303}
304
305footer {
306 clear: both;
307}
308
309.reading-time {
310 font-size: 0.8em;
311}
312
313#inputform {
314 display: none;
315 margin-top: 5px;
316 margin-right: auto;
317 margin-left: auto;
318 padding-bottom: 5px;
319 max-width: 300px;
320 border-radius: 3px;
321 text-align: center;
322 color: #fff;
323 opacity: 0.8;
324 background-color: rgba(0,0,0,0.9);
325}
326
327a.back span,
328a.top span,
329a.fav span,
330a.fav span:hover,
331a.fav-off span,
332a.fav-off span:hover,
333a.archive span,
334a.archive span:hover,
335a.archive-off span,
336a.archive-off span:hover,
337a.twitter span,
338a.shaarli span,
339a.flattr span,
340a.email span,
341a.delete span,
342a.link span,
343a.bad-display span,
c2cf7075
MR
344a.reading-time span,
345a.print span {
4cc3c2ac 346 background-repeat: no-repeat;
2f3425df 347}
01cd4434
MR
348
349.arrow-down {
350 width: 0px;
351 height: 0px;
352 border-style: solid;
353 border-width: 10px 10px 0 10px;
354 border-color: #000 transparent transparent transparent;
355
356 position: absolute;
357 margin-top: 1.5em;
358 margin-left: -30px;
359}
360
fb26cc93
MR
361.two-column {
362 display: block;
363 width: 50%;
364 paddig-right: 20px;
365 float: left;
366 vertical-align: top;
367}
368
e68348f6
MR
369
370/* ==========================================================================
371 "save a link" popup div related styles
372 ========================================================================== */
373
374#bagit-form {
375 display: none;
376 padding-left: 30px;
377 width: 450px;
378
379}
380
381a#bagit-form-close {
382 color: #FFF;
383 display: inline-block;
384 float: right;
385 background: url("../img/messages/close.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
386 height: 16px;
387 margin: -14px -8px 0 0;
388 width: 16px;
389 text-decoration: none;
390}
391
392
393.add-to-wallabag-link-after {
394 background-color: #000;
395 color: #fff;
396 padding: 0 4px 1px 3px;
00966936
MR
397 font-weight: bold;
398 font-size: 0.7em;
e68348f6
MR
399 border-radius: 4px;
400}
401.add-to-wallabag-link-after:hover, .add-to-wallabag-link-after:active {
402 color: #fff;
403}
404.add-to-wallabag-link-after:visited {
405 color: #999;
406}
00966936
MR
407a.add-to-wallabag-link-after {
408 visibility: hidden;
409 position: absolute;
410 opacity: 0;
411 transition-duration: 2s;
412 transition-timing-function: ease-out;
413}
414#article article a:hover + a.add-to-wallabag-link-after, a.add-to-wallabag-link-after:hover {
415 opacity: 1;
416 visibility: visible;
417 transition-duration: .3s;
418 transition-timing-function: ease-in;
419}
420a.add-to-wallabag-link-after:after {
421 content: "w";
422}
423
e68348f6
MR
424
425#add-link-result {
426 display: inline;
427 padding-left: 10px;
428}
429
8519cc79
JS
430/* ==========================================================================
431 "Search" popup div related styles
432 ========================================================================== */
433
434/* Search form message needs a little more width, depending on translations */
435#search-form {
436 width: 420px;
437}
438
e68348f6
MR
439.opacity03 {
440 /*opacity: 0.3;*/
441}
c2cf7075
MR
442
443#readLeftPercent {
444 display: inline-block;
445 /* Show textual content */
446 overflow: visible;
447 text-align: left;
448 text-indent: 0;
449 color: black;
450 width: 50px;
9f8541ef
MR
451}
452
453pre code {
454 font-family: "Courier New", Courier, monospace;
455 border: 1px solid #ddd;
456 font-size: 0.96em;
8519cc79 457}
ab87a7fe
TC
458
459/* ==========================================================================
460 Tags-related styles
461 ========================================================================== */
462
463.suggestedtag {
464 padding: 4px;
465 cursor: pointer;
466 display: inline-block;
467}
468
469#tagcloud .smallesttag {
470 font-size: x-small;
471}
472
473#tagcloud .smalltag {
474 font-size: small;
475}
476
477#tagcloud .mediumtag {
478 font-size:medium;
479}
480
481#tagcloud .largetag {
482 font-size:large;
483}
484
485#tagcloud .largesttag {
486 font-size:larger;
487}