]> git.immae.eu Git - github/shaarli/Shaarli.git/blame - shaarli.css
Version 0.0.30 beta:
[github/shaarli/Shaarli.git] / shaarli.css
CommitLineData
eae4f48b
SS
1/* CSS Stylsheet for Shaarli - http://sebsauvage.net/wiki/doku.php?id=php:shaarli */
2
3/* CSS Reset from Yahoo to cope with browsers CSS inconsistencies. */
4/*
5Copyright (c) 2010, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html
6version: 2.8.2r1
7*/
8html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}
9
10body { font-family: "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif; font-size:10pt; background-color: #ffffff; }
6d946e78
SS
11input, textarea {
12
13 background-color: #dedede;
14 background: -webkit-gradient(linear, 0 0, 0 bottom, from(#dedede), to(#ffffff));
15 background: -webkit-linear-gradient(#dedede, #ffffff);
16 background: -moz-linear-gradient(#dedede, #ffffff);
17 background: -ms-linear-gradient(#dedede, #ffffff);
18 background: -o-linear-gradient(#dedede, #ffffff);
19 background: linear-gradient(#dedede, #ffffff);
20 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
21 padding:5px;
22 border-radius: 5px 5px 5px 5px;
23 border: none;
24 color:#000;
25
26 }
27
eae4f48b
SS
28h1 { font-size:20pt; font-weight:bold; font-style:italic; margin-bottom:20px; }
29/* I don't give a shit about IE. He can't understand selectors such as input[type='submit']. */
30
31/* Buttons */
6d946e78
SS
32.bigbutton {
33 background-color: #a0a0a0;
34 background: -webkit-gradient(linear, 0 0, 0 bottom, from(#a0a0a0), to(#d4d4d4));
35 background: -webkit-linear-gradient(#a0a0a0, #d4d4d4);
36 background: -moz-linear-gradient(#a0a0a0, #d4d4d4);
37 background: -ms-linear-gradient(#a0a0a0, #d4d4d4);
38 background: -o-linear-gradient(#a0a0a0, #d4d4d4);
39 background: linear-gradient(#a0a0a0, #d4d4d4);
40 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
41 padding:0 5px 0 5px;
42 margin:5px 0 5px 0;
43 height:25px;
eae4f48b 44
6d946e78
SS
45 border-radius: 5px 5px 5px 5px;
46 -moz-border-radius:5px 5px 5px 5px;
47 cursor:pointer;
48 border:none;
49 border-style:outset;
50 border-width:2px;
51 }
52.smallbutton {
53 background-color: #a0a0a0;
54 background: -webkit-gradient(linear, 0 0, 0 bottom, from(#a0a0a0), to(#d4d4d4));
55 background: -webkit-linear-gradient(#a0a0a0, #d4d4d4);
56 background: -moz-linear-gradient(#a0a0a0, #d4d4d4);
57 background: -ms-linear-gradient(#a0a0a0, #d4d4d4);
58 background: -o-linear-gradient(#a0a0a0, #d4d4d4);
59 background: linear-gradient(#a0a0a0, #d4d4d4);
60 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
61 padding:0;
62 margin:5px 0 5px 0;
63 border-radius: 5px 5px 5px 5px;
64 -moz-border-radius:5px 5px 5px 5px;
65 cursor:pointer;
66 padding:0 3px 0 3px;
67 border-style:outset;
68 border-width:2px;
69 font-size:8pt;
70 }
eae4f48b 71
6d946e78
SS
72#pageheader #logo{
73background-image: url('./images/logo.png');
74background-repeat: no-repeat;
75float:left;
76margin:0 10px 0 10px;
77width:105px;
78height:55px;
79}
eae4f48b
SS
80#pageheader
81{
6d946e78
SS
82
83 background: -webkit-gradient(linear, 0 0, 0 bottom, from(#333333), to(#111111));
84 background: -webkit-linear-gradient(#333333, #111111);
85 background: -moz-linear-gradient(#333333, #111111);
86 background: -ms-linear-gradient(#333333, #111111);
87 background: -o-linear-gradient(#333333, #111111);
88 background: linear-gradient(#333333, #111111);
89
90 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
91 padding:5px 0 5px 0;
92 width: 100%;
93 margin: auto;
94}
95
96#pageheader a
97{
98 background: -webkit-gradient(linear, 0 0, 0 bottom, from(#333333), to(#000000));
99 background: -webkit-linear-gradient(#333333, #000000);
100 background: -moz-linear-gradient(#333333, #000000);
101 background: -ms-linear-gradient(#333333, #000000);
102 background: -o-linear-gradient(#333333, #000000);
103 background: linear-gradient(#333333, #000000);
104
105 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
106 padding:5px;
107 border-radius: 5px 5px 5px 5px;
108 margin:10px 3px 3px 3px;
109 color:#A2DD42;
110 text-decoration:none;
111}
112
113.linksperpage,.tagfilter,.searchform,.addform {
114 background-color: #dedede;
115 background: -webkit-gradient(linear, 0 0, 0 bottom, from(#dedede), to(#ffffff));
116 background: -webkit-linear-gradient(#dedede, #ffffff);
117 background: -moz-linear-gradient(#dedede, #ffffff);
118 background: -ms-linear-gradient(#dedede, #ffffff);
119 background: -o-linear-gradient(#dedede, #ffffff);
120 background: linear-gradient(#dedede, #ffffff);
121 display:inline;
122
123 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
124 padding:5px;
125 border: none;
126 border-radius: 5px 5px 5px 5px;
127 margin:10px 3px 3px 3px;
128 color:#cecece;
129}
130
131.linksperpage{
132 box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
133 padding:3px;
134}
135
136.linksperpage input,.tagfilter input, .searchform input, .addform input{
137 border:none;
138 color:#606060;
139 background:none;
140 box-shadow:none;
141 padding:5px;
142}
143
144.linksperpage input{
145 padding:0;
146}
147
148.tagfilter input.bigbutton,.searchform input.bigbutton,.addform input.bigbutton{
149 background: -webkit-gradient(linear, 0 0, 0 bottom, from(#dedede), to(#ffffff));
150 background: -webkit-linear-gradient(#dedede, #ffffff);
151 background: -moz-linear-gradient(#dedede, #ffffff);
152 background: -ms-linear-gradient(#dedede, #ffffff);
153 background: -o-linear-gradient(#dedede, #ffffff);
154 background: linear-gradient(#dedede, #ffffff);
155 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
156 padding:0 5px 0 5px;
157 margin:5px 0 5px 0;
158 height:20px;
159 border-radius: 5px 5px 5px 5px;
160 cursor:pointer;
eae4f48b 161}
6d946e78 162
008d8b95
SS
163#shaarli_title { font-weight:bold; font-style:italic; }
164#shaarli_title a { color: #fff !important; }
6d946e78 165
eae4f48b
SS
166#pageheader a:visited { color:#bbb; text-decoration:none;}
167#pageheader a:hover { color:#FFFFC9; text-decoration:none;}
168#pageheader a:active { color:#bbb; text-decoration:none;}
008d8b95 169#searchcriteria { padding: 4 0 5 5; font-weight:bold;}
6d946e78 170.paging { padding:5px;background-color:#777; color:#ccc; text-align:center; clear:both;}
eae4f48b
SS
171.paging a:link { color:#ccc; text-decoration:none;}
172.paging a:visited { color:#ccc; }
173.paging a:hover { color:#FFFFC9; }
174.paging a:active { color:#fff; }
6d946e78
SS
175#headerform { color:#ffffff; padding:5 5 5 5; }
176#toolsdiv { color:#ffffff; padding:5 5 5 5; clear:left; }
177#uploaddiv { color:#ffffff; padding:5 5 5 5; clear:left; }
178#editlinkform { color:#ffffff; padding:5 5 5 15px; width:80%; clear:left; }
179#linklist li {
180 padding:4 10 15 20; border-top: 1px solid #bbb; clear:both;
181 background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F2F2F2), to(#ffffff));
182 background: -webkit-linear-gradient(#F2F2F2, #ffffff);
183 background: -moz-linear-gradient(#F2F2F2, #ffffff);
184 background: -ms-linear-gradient(#F2F2F2, #ffffff);
185 background: -o-linear-gradient(#F2F2F2, #ffffff);
186 background: linear-gradient(#F2F2F2, #ffffff);
187}
188
189
190#linklist li.publicLinkHightLight:hover,#linklist li:hover{
191 background: #E9FFCE;
192}
eae4f48b
SS
193#linklist li.private { background-color: #ccc; border-left:8px solid #888; }
194.linktitle { font-size:14pt; font-weight:bold; }
6d946e78 195.linktitle a { text-decoration: none; color:#80AD48; }
008d8b95 196.linktitle a:hover { color:#F57900; }
eae4f48b 197.linkdate { font-size:8pt; color:#888; }
6d946e78 198.linkdate a { background-image:url('./images/calendar.png');padding:2px 0 3px 20px;background-repeat:no-repeat;text-decoration: none; color:#E28E3F; }
008d8b95 199.linkdate a:hover { color: #F57900 }
eae4f48b 200.linkurl { font-size:8pt; color:#4BAA74; }
6d946e78 201.linkdescription { color:#000; margin-top:0; margin-bottom:0; font-weight:normal; }
008d8b95
SS
202.linkdescription a { text-decoration: none; color:#3465A4; }
203.linkdescription a:hover { color:#F57900; }
6d946e78
SS
204.linktaglist { padding-top:10px;}
205.linktag {
206
207font-size:9pt;
208 background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F2F2F2), to(#ffffff));
209 background: -webkit-linear-gradient(#F2F2F2, #ffffff);
210 background: -moz-linear-gradient(#F2F2F2, #ffffff);
211 background: -ms-linear-gradient(#F2F2F2, #ffffff);
212 background: -o-linear-gradient(#F2F2F2, #ffffff);
213 background: linear-gradient(#F2F2F2, #ffffff);
214
215
216 box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
217 padding:3px 3px 3px 20px;
218 height:20px;
219 border-radius: 3px 3px 3px 3px;
220 cursor:pointer;
221 background-image:url('./images/tag_blue.png');
222 background-repeat:no-repeat;
223 background-position:3px center;
224 background-color:#ffffff;
225}
008d8b95
SS
226.linktag:hover { border-color: #555573; color:#000; }
227.linktag a { color:#777; text-decoration:none; }
99c9c954
SS
228.linkshort { font-size:8pt; color:#888; }
229.linkshort a { text-decoration: none; color:#393964; }
230.linkshort a:hover { text-decoration: underline; }
eae4f48b 231.buttoneditform { display:inline; }
2732de7c 232#footer { font-size:8pt; text-align:center; border-top:1px solid #ddd; color: #888; clear:both; }
e6a0ab54
SS
233#newversion { background-color: #FFFFA0; color:#000; position:absolute; top:0;right:0; padding:2 7 2 7; font-size:9pt;}
234#cloudtag { padding-left:10%; padding-right:10%; }
235#cloudtag a { color:black; text-decoration:none; }
6d946e78
SS
236#installform td { font-size: 10pt; padding:10 5 10 5; clear:left; }
237#changepasswordform { color:#ccc; padding:10 5 10 5; clear:left; }
238#changetag { color:#ccc; padding:10 5 10 5; clear:left; }
239#configform td { color:#ccc; font-size: 10pt; padding:10 5 10 5; }
240#configform { color:#ccc; padding:10 5 10 5; clear:left; }
008d8b95
SS
241.thumbnail { float:right; margin-left: 10px; }
242/* If you want thumbnails on the left:
0adcceee
SS
243.thumbnail { float:left; margin-right: 10px; }
244.linkcontainer { position: static; margin-left:130px; }
245*/
246
6d946e78
SS
247
248
249
2732de7c
SS
250/* --- Picture wall CSS --- */
251#picwall_container { color:#fff; background-color:#000; }
252.picwall_pictureframe { z-index:5; position:relative; display:table-cell; vertical-align:middle;width:90px; height:90px; overflow:hidden; text-align:center; float:left; }
253.picwall_pictureframe img { max-width: 100%;height: auto; } /* Adapt the width of the image */
254.picwall_pictureframe a {text-decoration:none;}
255
256/* CSS to show title when hovering an image - no javascript required. */
257.picwall_pictureframe span.info {display: none;}
258.picwall_pictureframe:hover span.info {
259 display:block;
260 position:absolute;
261 top:0; left:0; width:90px;
262 font-weight:bold;
263 font-size:8pt;
264 color:#fff;
265 text-align: left;
266 background-color: transparent;
267 background-color: rgba(0, 0, 0, 0.4); /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
6d946e78 268 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); /* IE6\96IE9 */
2732de7c
SS
269text-shadow:2px 2px 1px #000000;
270}
271
eae4f48b
SS
272/* Minimal customisation for jQuery widgets */
273.ui-autocomplete { background-color:#fff; padding-left:5px;}
274.ui-state-hover { background-color: #604dff; color:#fff; }
f4aba1ac 275
6d946e78
SS
276#linklist li.publicLinkHightLight{
277 background: #ffffff;
278}
279
008d8b95
SS
280@media print {
281html {border:none;background:#fff!important;color:#000!important;}
282body {font-size:12pt;width:auto!important;margin:auto!important;}
283p {orphans:3; /*pas de ligne seule en bas */widows:3;/*pas de ligne seule en haut*/}
284a {color:#000!important;text-decoration:none!important;}
285#pageheader, .paging, #linklist li form, #footer {display:none;}
286#linklist li { padding:2 0 10 0; border-top: 2px solid #000; clear:both; }
287#linklist li.private { background-color: none; border-left:0; }
288.linkdate { line-height:2; }
289.linkurl { color:#000; }
290.linkdescription { font-size:10pt;}
291.linktag { border: 1px solid black; font-style:italic; font-size:8pt;}
292
6d946e78
SS
293
294
f4aba1ac 295}