aboutsummaryrefslogtreecommitdiffhomepage
path: root/inc/shaarli.css
diff options
context:
space:
mode:
authorSeb Sauvage <sebsauvage@sebsauvage.net>2012-01-25 10:24:44 +0100
committerEmilien Klein <emilien@klein.st>2012-01-25 10:24:44 +0100
commit51788ab8bacfe5fe951531ef545913ff6983f1b8 (patch)
tree225b21a815893ed28588e6e3199f5a0020eccbe2 /inc/shaarli.css
parentc2f6c2680330ad40f80a4cfe68388ece8dd313ec (diff)
downloadShaarli-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.css118
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
10body { font-family: "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif; font-size:10pt; background-color: #ffffff; } 10body { font-family: "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif; font-size:10pt; background-color: #ffffff; }
11input, textarea { 11input, 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
219font-size:9pt; 221font-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 */ 295div.qrcode {
296width:220px;
297height:220px;
298background-color: #ffffff;
299border: 1px solid black;
300position: absolute;
301top:-100px;
302left:-100px;
303text-align:center;
304font-size: 8pt;
305z-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;
310box-shadow:2px 2px 20px 2px #333333;
311}
312
313div.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}
328div.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}
339div.dailyAbout a { color: #890500; }
340div.dailyTitle
341 {
342 font-weight: bold;
343 font-size: 44pt;
344 text-align:center;
345 padding:10px 20px 0px 20px;
346}
347div.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": */
356div.dailyEntry
357{
358 margin: 5px 10px 2px 5px;
359 font-size: 11pt;
360 border-top: 1px solid #555;
361}
362div.dailyEntry a { text-decoration:none; color: #890500; }
363div.dailyEntryTags { font-size:7.75pt; }
364div.dailyEntryTitle { font-size:18pt; font-weight:bold;}
365div.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}
373div.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}