diff options
author | Seb Sauvage <sebsauvage@sebsauvage.net> | 2012-01-25 10:24:44 +0100 |
---|---|---|
committer | Emilien Klein <emilien@klein.st> | 2012-01-25 10:24:44 +0100 |
commit | 51788ab8bacfe5fe951531ef545913ff6983f1b8 (patch) | |
tree | 225b21a815893ed28588e6e3199f5a0020eccbe2 /inc/shaarli.css | |
parent | c2f6c2680330ad40f80a4cfe68388ece8dd313ec (diff) | |
download | Shaarli-51788ab8bacfe5fe951531ef545913ff6983f1b8.tar.gz Shaarli-51788ab8bacfe5fe951531ef545913ff6983f1b8.tar.zst Shaarli-51788ab8bacfe5fe951531ef545913ff6983f1b8.zip |
Version 0.0.34 beta:
- Corrected: In link edition, you can now click the word “Private” to check the box.
- Corrected: Clicking a tag would not work properly if the tag contained special characters (like +).
- Corrected: Added proper jQuery licence (shame on me).
- Changed: Upgraded bundled versions of jQuery (1.7.1) and jQuery UI (1.8.17).
- Changed: Upgraded bundled version of RainTPL (2.7).
- Changed: Changed HTTPS detection code.
- Added: There is now a QR-Code of each permalink to easily open a link on your smartphone.
- Added: Protocols file: and apt: are now also converted to clickable links (patch by Francis Chavanon)
- Added: Thumbnail support for http://xkcd.com/ (patch by Emilien Klein). [r31]
- Added: Thumbnail support for http://pix.toile-libre.org/
- Added: Well I had some mercy for users with antique browsers (IE) which do not have support for gradients: I added a few background-color.
- Added: First version of the “Shaarli Daily”, a page showing all links of a specific day. By default, you see the links of the previous day. There is still work to do on this page (error checking, better navigation (calendar?), RSS feed, CSS for mobile and printing…)
Diffstat (limited to 'inc/shaarli.css')
-rw-r--r-- | inc/shaarli.css | 118 |
1 files changed, 98 insertions, 20 deletions
diff --git a/inc/shaarli.css b/inc/shaarli.css index d0614e34..b4c41822 100644 --- a/inc/shaarli.css +++ b/inc/shaarli.css | |||
@@ -9,7 +9,6 @@ html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pr | |||
9 | 9 | ||
10 | body { font-family: "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif; font-size:10pt; background-color: #ffffff; } | 10 | body { font-family: "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif; font-size:10pt; background-color: #ffffff; } |
11 | input, textarea { | 11 | input, textarea { |
12 | |||
13 | background-color: #dedede; | 12 | background-color: #dedede; |
14 | background: -webkit-gradient(linear, 0 0, 0 bottom, from(#dedede), to(#ffffff)); | 13 | background: -webkit-gradient(linear, 0 0, 0 bottom, from(#dedede), to(#ffffff)); |
15 | background: -webkit-linear-gradient(#dedede, #ffffff); | 14 | background: -webkit-linear-gradient(#dedede, #ffffff); |
@@ -30,6 +29,7 @@ h1 { font-size:20pt; font-weight:bold; font-style:italic; margin-bottom:20px; } | |||
30 | 29 | ||
31 | /* Buttons */ | 30 | /* Buttons */ |
32 | .bigbutton { | 31 | .bigbutton { |
32 | background-color: #c0c0c0; | ||
33 | background: -moz-linear-gradient(#c0c0c0, #ffffff) repeat scroll 0 0 transparent; | 33 | background: -moz-linear-gradient(#c0c0c0, #ffffff) repeat scroll 0 0 transparent; |
34 | background: -webkit-gradient(linear, 0 0, 0 bottom, from(#c0c0c0), to(#ffffff)); | 34 | background: -webkit-gradient(linear, 0 0, 0 bottom, from(#c0c0c0), to(#ffffff)); |
35 | background: -webkit-linear-gradient(#c0c0c0, #ffffff); | 35 | background: -webkit-linear-gradient(#c0c0c0, #ffffff); |
@@ -48,6 +48,7 @@ h1 { font-size:20pt; font-weight:bold; font-style:italic; margin-bottom:20px; } | |||
48 | 48 | ||
49 | } | 49 | } |
50 | .smallbutton { | 50 | .smallbutton { |
51 | background-color: #c0c0c0; | ||
51 | background: -moz-linear-gradient(#c0c0c0, #ffffff) repeat scroll 0 0 transparent; | 52 | background: -moz-linear-gradient(#c0c0c0, #ffffff) repeat scroll 0 0 transparent; |
52 | background: -webkit-gradient(linear, 0 0, 0 bottom, from(#c0c0c0), to(#ffffff)); | 53 | background: -webkit-gradient(linear, 0 0, 0 bottom, from(#c0c0c0), to(#ffffff)); |
53 | background: -webkit-linear-gradient(#c0c0c0, #ffffff); | 54 | background: -webkit-linear-gradient(#c0c0c0, #ffffff); |
@@ -84,14 +85,13 @@ cursor:pointer; | |||
84 | 85 | ||
85 | #pageheader | 86 | #pageheader |
86 | { | 87 | { |
87 | 88 | background-color: #333333; | |
88 | background: -webkit-gradient(linear, 0 0, 0 bottom, from(#333333), to(#111111)); | 89 | background: -webkit-gradient(linear, 0 0, 0 bottom, from(#333333), to(#111111)); |
89 | background: -webkit-linear-gradient(#333333, #111111); | 90 | background: -webkit-linear-gradient(#333333, #111111); |
90 | background: -moz-linear-gradient(#333333, #111111); | 91 | background: -moz-linear-gradient(#333333, #111111); |
91 | background: -ms-linear-gradient(#333333, #111111); | 92 | background: -ms-linear-gradient(#333333, #111111); |
92 | background: -o-linear-gradient(#333333, #111111); | 93 | background: -o-linear-gradient(#333333, #111111); |
93 | background: linear-gradient(#333333, #111111); | 94 | background: linear-gradient(#333333, #111111); |
94 | |||
95 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); | 95 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); |
96 | width:auto; | 96 | width:auto; |
97 | padding:0 10px 5px 10px; | 97 | padding:0 10px 5px 10px; |
@@ -100,6 +100,7 @@ cursor:pointer; | |||
100 | 100 | ||
101 | #pageheader a | 101 | #pageheader a |
102 | { | 102 | { |
103 | background-color: #333333; | ||
103 | background: -webkit-gradient(linear, 0 0, 0 bottom, from(#333333), to(#000000)); | 104 | background: -webkit-gradient(linear, 0 0, 0 bottom, from(#333333), to(#000000)); |
104 | background: -webkit-linear-gradient(#333333, #000000); | 105 | background: -webkit-linear-gradient(#333333, #000000); |
105 | background: -moz-linear-gradient(#333333, #000000); | 106 | background: -moz-linear-gradient(#333333, #000000); |
@@ -130,7 +131,6 @@ cursor:pointer; | |||
130 | background: -o-linear-gradient(#dedede, #ffffff); | 131 | background: -o-linear-gradient(#dedede, #ffffff); |
131 | background: linear-gradient(#dedede, #ffffff); | 132 | background: linear-gradient(#dedede, #ffffff); |
132 | display:inline; | 133 | display:inline; |
133 | |||
134 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); | 134 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); |
135 | padding:5px; | 135 | padding:5px; |
136 | border: none; | 136 | border: none; |
@@ -157,6 +157,7 @@ cursor:pointer; | |||
157 | } | 157 | } |
158 | 158 | ||
159 | .tagfilter input.bigbutton,.searchform input.bigbutton,.addform input.bigbutton{ | 159 | .tagfilter input.bigbutton,.searchform input.bigbutton,.addform input.bigbutton{ |
160 | background-color: #dedede; | ||
160 | background: -webkit-gradient(linear, 0 0, 0 bottom, from(#dedede), to(#ffffff)); | 161 | background: -webkit-gradient(linear, 0 0, 0 bottom, from(#dedede), to(#ffffff)); |
161 | background: -webkit-linear-gradient(#dedede, #ffffff); | 162 | background: -webkit-linear-gradient(#dedede, #ffffff); |
162 | background: -moz-linear-gradient(#dedede, #ffffff); | 163 | background: -moz-linear-gradient(#dedede, #ffffff); |
@@ -177,18 +178,19 @@ cursor:pointer; | |||
177 | #pageheader a:visited { color:#98C943; text-decoration:none;} | 178 | #pageheader a:visited { color:#98C943; text-decoration:none;} |
178 | #pageheader a:hover { color:#FFFFC9; text-decoration:none;} | 179 | #pageheader a:hover { color:#FFFFC9; text-decoration:none;} |
179 | #pageheader a:active { color:#bbb; text-decoration:none;} | 180 | #pageheader a:active { color:#bbb; text-decoration:none;} |
180 | #searchcriteria { padding: 4 0 5 5; font-weight:bold;} | 181 | #searchcriteria { padding: 4px 0px 5px 5px; font-weight:bold;} |
181 | .paging { padding:5px;background-color:#777; color:#ccc; text-align:center; clear:both;} | 182 | .paging { padding:5px;background-color:#777; color:#ccc; text-align:center; clear:both;} |
182 | .paging a:link { color:#ccc; text-decoration:none;} | 183 | .paging a:link { color:#ccc; text-decoration:none;} |
183 | .paging a:visited { color:#ccc; } | 184 | .paging a:visited { color:#ccc; } |
184 | .paging a:hover { color:#FFFFC9; } | 185 | .paging a:hover { color:#FFFFC9; } |
185 | .paging a:active { color:#fff; } | 186 | .paging a:active { color:#fff; } |
186 | #headerform { color:#ffffff; padding:5 5 5 5; clear: both;} | 187 | #headerform { color:#ffffff; padding:5px 5px 5px 5px; clear: both;} |
187 | #toolsdiv { color:#ffffff; padding:5 5 5 5; clear:left; } | 188 | #toolsdiv { color:#ffffff; padding:5px 5px 5px 5px; clear:left; } |
188 | #uploaddiv { color:#ffffff; padding:5 5 5 5; clear:left; } | 189 | #uploaddiv { color:#ffffff; padding:5px 5px 5px 5px; clear:left; } |
189 | #editlinkform { height:100%;color:#ffffff; padding:5 5 5 15px; width:80%; clear:left; } | 190 | #editlinkform { height:100%;color:#ffffff; padding:5px 5px 5px 15px; width:80%; clear:left; } |
190 | #linklist li { | 191 | #linklist li { |
191 | padding:4 10 15 20; border-top: 1px solid #bbb; clear:both; | 192 | padding:4px 10px 15px 20px; border-top: 1px solid #bbb; clear:both; |
193 | background-color: #F2F2F2; | ||
192 | background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F2F2F2), to(#ffffff)); | 194 | background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F2F2F2), to(#ffffff)); |
193 | background: -webkit-linear-gradient(#F2F2F2, #ffffff); | 195 | background: -webkit-linear-gradient(#F2F2F2, #ffffff); |
194 | background: -moz-linear-gradient(#F2F2F2, #ffffff); | 196 | background: -moz-linear-gradient(#F2F2F2, #ffffff); |
@@ -217,14 +219,13 @@ cursor:pointer; | |||
217 | .linktag { | 219 | .linktag { |
218 | 220 | ||
219 | font-size:9pt; | 221 | font-size:9pt; |
222 | background-color: #F2F2F2; | ||
220 | background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F2F2F2), to(#ffffff)); | 223 | background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F2F2F2), to(#ffffff)); |
221 | background: -webkit-linear-gradient(#F2F2F2, #ffffff); | 224 | background: -webkit-linear-gradient(#F2F2F2, #ffffff); |
222 | background: -moz-linear-gradient(#F2F2F2, #ffffff); | 225 | background: -moz-linear-gradient(#F2F2F2, #ffffff); |
223 | background: -ms-linear-gradient(#F2F2F2, #ffffff); | 226 | background: -ms-linear-gradient(#F2F2F2, #ffffff); |
224 | background: -o-linear-gradient(#F2F2F2, #ffffff); | 227 | background: -o-linear-gradient(#F2F2F2, #ffffff); |
225 | background: linear-gradient(#F2F2F2, #ffffff); | 228 | background: linear-gradient(#F2F2F2, #ffffff); |
226 | |||
227 | |||
228 | box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); | 229 | box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); |
229 | padding:3px 3px 3px 20px; | 230 | padding:3px 3px 3px 20px; |
230 | height:20px; | 231 | height:20px; |
@@ -247,11 +248,11 @@ font-size:9pt; | |||
247 | #newversion { background-color: #FFFFA0; color:#000; position:absolute; top:0;right:0; padding:2 7 2 7; font-size:9pt;} | 248 | #newversion { background-color: #FFFFA0; color:#000; position:absolute; top:0;right:0; padding:2 7 2 7; font-size:9pt;} |
248 | #cloudtag { padding-left:10%; padding-right:10%; } | 249 | #cloudtag { padding-left:10%; padding-right:10%; } |
249 | #cloudtag a { color:black; text-decoration:none; } | 250 | #cloudtag a { color:black; text-decoration:none; } |
250 | #installform td { font-size: 10pt; padding:10 5 10 5; clear:left; } | 251 | #installform td { font-size: 10pt; padding:10px 5px 10px 5px; clear:left; } |
251 | #changepasswordform { color:#ccc; padding:10 5 10 5; clear:left; } | 252 | #changepasswordform { color:#ccc; padding:10px 5px 10px 5px; clear:left; } |
252 | #changetag { color:#ccc; padding:10 5 10 5; clear:left; } | 253 | #changetag { color:#ccc; padding:10px 5px 10px 5px; clear:left; } |
253 | #configform td { color:#ccc; font-size: 10pt; padding:10 5 10 5; } | 254 | #configform td { color:#ccc; font-size: 10pt; padding:10px 5px 10px 5px; } |
254 | #configform { color:#ccc; padding:10 5 10 5; clear:left; } | 255 | #configform { color:#ccc; padding:10px 5px 10px 5px; clear:left; } |
255 | .thumbnail { float:right; margin-left: 10px; } | 256 | .thumbnail { float:right; margin-left: 10px; } |
256 | /* If you want thumbnails on the left: | 257 | /* If you want thumbnails on the left: |
257 | .thumbnail { float:left; margin-right: 10px; } | 258 | .thumbnail { float:left; margin-right: 10px; } |
@@ -291,8 +292,87 @@ text-shadow:2px 2px 1px #000000; | |||
291 | background: #ffffff; | 292 | background: #ffffff; |
292 | } | 293 | } |
293 | 294 | ||
294 | /* Common css screwdriver */ | 295 | div.qrcode { |
296 | width:220px; | ||
297 | height:220px; | ||
298 | background-color: #ffffff; | ||
299 | border: 1px solid black; | ||
300 | position: absolute; | ||
301 | top:-100px; | ||
302 | left:-100px; | ||
303 | text-align:center; | ||
304 | font-size: 8pt; | ||
305 | z-index:50; | ||
306 | -webkit-box-shadow:2px 2px 20px 2px #333333; | ||
307 | -moz-box-shadow:2px 2px 20px 2px #333333; | ||
308 | -o-box-shadow:2px 2px 20px 2px #333333; | ||
309 | -ms-box-shadow:2px 2px 20px 2px #333333; | ||
310 | box-shadow:2px 2px 20px 2px #333333; | ||
311 | } | ||
312 | |||
313 | div.daily | ||
314 | { | ||
315 | font-family: Georgia, 'DejaVu Serif', Norasi, serif; | ||
316 | background-color: #E6D6BE; | ||
317 | /* Background paper texture by BashCorpo: | ||
318 | http://www.bashcorpo.dk/textures.php | ||
319 | http://bashcorpo.deviantart.com/art/Grungy-paper-texture-v-5-22966998 */ | ||
320 | background-image: url("../images/Paper_texture_v5_by_bashcorpo_w1000.jpg"); | ||
321 | -webkit-background-size: cover; | ||
322 | -moz-background-size: cover; | ||
323 | -o-background-size: cover; | ||
324 | background-size: cover; | ||
325 | position:relative; | ||
326 | border-bottom: 2px solid black; | ||
327 | } | ||
328 | div.dailyAbout | ||
329 | { | ||
330 | float:left; | ||
331 | border: 1px solid black; | ||
332 | font-size: 8pt; | ||
333 | position:absolute; | ||
334 | left:10px; | ||
335 | top: 15px; | ||
336 | padding: 5px 5px 5px 5px; | ||
337 | text-align:center; | ||
338 | } | ||
339 | div.dailyAbout a { color: #890500; } | ||
340 | div.dailyTitle | ||
341 | { | ||
342 | font-weight: bold; | ||
343 | font-size: 44pt; | ||
344 | text-align:center; | ||
345 | padding:10px 20px 0px 20px; | ||
346 | } | ||
347 | div.dailyDate | ||
348 | { | ||
349 | font-size: 12pt; | ||
350 | font-weight:bold; | ||
351 | text-align:center; | ||
352 | padding:0px 20px 30px 20px; | ||
353 | } | ||
295 | 354 | ||
355 | /* Individual entries in "Daily": */ | ||
356 | div.dailyEntry | ||
357 | { | ||
358 | margin: 5px 10px 2px 5px; | ||
359 | font-size: 11pt; | ||
360 | border-top: 1px solid #555; | ||
361 | } | ||
362 | div.dailyEntry a { text-decoration:none; color: #890500; } | ||
363 | div.dailyEntryTags { font-size:7.75pt; } | ||
364 | div.dailyEntryTitle { font-size:18pt; font-weight:bold;} | ||
365 | div.dailyEntryThumbnail | ||
366 | { | ||
367 | width:100%; | ||
368 | text-align:center; | ||
369 | background-color:rgb(128,128,128); | ||
370 | background:url(../images/50pc_transparent.png); | ||
371 | padding:4px 0px 2px 0px; | ||
372 | } | ||
373 | div.dailyEntryDescription { margin-top: 10px; text-align:justify; } | ||
374 | |||
375 | /* Common css screwdriver */ | ||
296 | .clear{ | 376 | .clear{ |
297 | clear:both; | 377 | clear:both; |
298 | } | 378 | } |
@@ -310,6 +390,4 @@ a {color:#000!important;text-decoration:none!important;} | |||
310 | .linkdescription { font-size:10pt;} | 390 | .linkdescription { font-size:10pt;} |
311 | .linktag { border: 1px solid black; font-style:italic; font-size:8pt;} | 391 | .linktag { border: 1px solid black; font-style:italic; font-size:8pt;} |
312 | 392 | ||
313 | |||
314 | |||
315 | } | 393 | } |