]>
git.immae.eu Git - github/shaarli/Shaarli.git/blob - inc/shaarli.css
2b55fa1571bb7463cd978bb0b386b7fe060e3f83
1 /* Cascading Stylesheet for Shaarli - http://sebsauvage.net/wiki/doku.php?id=php:shaarli */
3 /* CSS Reset from Yahoo to cope with browsers CSS inconsistencies. */
5 Copyright (c) 2010, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html
8 html
{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%;}
10 body
{ font-family: "Trebuchet MS",Verdana
,Arial
,Helvetica
,sans-serif
; font-size: 10pt; background-color: #ffffff; word-wrap: break-word
; }
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);
22 border-radius: 5px 5px 5px 5px;
28 text-decoration: none
;
31 h1
{ font-size: 20pt; font-weight: bold
; font-style: italic
; margin-bottom: 20px; }
32 /* I don't give a shit about IE. He can't understand selectors such as input[type='submit']. */
36 background-color: #c0c0c0;
37 background: -moz-linear-gradient
(#c0c0c0, #ffffff) repeat scroll
0 0 transparent
;
38 background: -webkit-gradient
(linear
, 0 0, 0 bottom
, from
(#c0c0c0), to
(#ffffff));
39 background: -webkit-linear-gradient
(#c0c0c0, #ffffff);
40 background: -ms-linear-gradient
(#c0c0c0, #ffffff);
41 background: -o-linear-gradient
(#c0c0c0, #ffffff);
42 background: linear-gradient
(#c0c0c0, #ffffff);
43 border-radius: 3px 3px 3px 3px;
44 box-shadow: 0 1px 1px rgba
(0, 0, 0, 0.5);
55 background-color: #c0c0c0;
56 background: -moz-linear-gradient
(#c0c0c0, #ffffff) repeat scroll
0 0 transparent
;
57 background: -webkit-gradient
(linear
, 0 0, 0 bottom
, from
(#c0c0c0), to
(#ffffff));
58 background: -webkit-linear-gradient
(#c0c0c0, #ffffff);
59 background: -ms-linear-gradient
(#c0c0c0, #ffffff);
60 background: -o-linear-gradient
(#c0c0c0, #ffffff);
61 background: linear-gradient
(#c0c0c0, #ffffff);
62 border-radius: 3px 3px 3px 3px;
63 box-shadow: 0 1px 1px rgba
(0, 0, 0, 0.5);
73 /* Small tab on the left of each link with edit/delete buttons. */
74 .button_edit, .button_delete { border-radius: 0; box-shadow: none
; border-style: none
; border-width: 0; padding: 0; background: none
; }
78 padding: 4px 2px 2px 2px;
79 background-color: #f0f0f0;
81 -webkit-border-radius: 0px 6px 6px 0px;
82 -moz-border-radius: 0px 6px 6px 0px;
83 -o-border-radius: 0px 6px 6px 0px;
84 -ms-border-radius: 0px 6px 6px 0px;
85 border-radius: 0px 6px 6px 0px;
87 -webkit-box-shadow: 0px 0px 3px 0px #333333;
88 -moz-box-shadow: 0px 0px 3px 0px #333333;
89 -o-box-shadow: 0px 0px 3px 0px #333333;
90 -ms-box-shadow: 0px 0px 3px 0px #333333;
91 box-shadow: 0px 0px 3px 0px #333333;
95 background-image: url
('../images/logo.png');
96 background-repeat: no-repeat
;
98 margin: 0 10px 0 10px;
105 background-color: #333333;
106 background: -webkit-gradient
(linear
, 0 0, 0 bottom
, from
(#333333), to
(#111111));
107 background: -webkit-linear-gradient
(#333333, #111111);
108 background: -moz-linear-gradient
(#333333, #111111);
109 background: -ms-linear-gradient
(#333333, #111111);
110 background: -o-linear-gradient
(#333333, #111111);
111 background: linear-gradient
(#333333, #111111);
112 box-shadow: 0 1px 2px rgba
(0, 0, 0, 0.5);
114 padding: 0 10px 5px 10px;
119 background-color: #333333;
120 background: -webkit-gradient
(linear
, 0 0, 0 bottom
, from
(#333333), to
(#000000));
121 background: -webkit-linear-gradient
(#333333, #000000);
122 background: -moz-linear-gradient
(#333333, #000000);
123 background: -ms-linear-gradient
(#333333, #000000);
124 background: -o-linear-gradient
(#333333, #000000);
125 background: linear-gradient
(#333333, #000000);
126 box-shadow: 0 1px 2px rgba
(0, 0, 0, 0.5);
128 border-radius: 5px 5px 5px 5px;
129 margin: 10px 3px 3px 3px;
132 text-decoration: none
;
141 .linksperpage, .tagfilter, .searchform, .addform {
142 background-color: #dedede;
143 background: -webkit-gradient
(linear
, 0 0, 0 bottom
, from
(#dedede), to
(#ffffff));
144 background: -webkit-linear-gradient
(#dedede, #ffffff);
145 background: -moz-linear-gradient
(#dedede, #ffffff);
146 background: -ms-linear-gradient
(#dedede, #ffffff);
147 background: -o-linear-gradient
(#dedede, #ffffff);
148 background: linear-gradient
(#dedede, #ffffff);
150 box-shadow: 0 1px 2px rgba
(0, 0, 0, 0.5);
153 border-radius: 5px 5px 5px 5px;
154 margin: 10px 3px 3px 3px;
159 box-shadow: 0 0 0 rgba
(0, 0, 0, 0.5);
163 .linksperpage input, .tagfilter input, .searchform input, .addform input {
171 .linksperpage input {
175 .tagfilter input.bigbutton, .searchform input.bigbutton, .addform input.bigbutton {
176 background-color: #dedede;
177 background: -webkit-gradient
(linear
, 0 0, 0 bottom
, from
(#dedede), to
(#ffffff));
178 background: -webkit-linear-gradient
(#dedede, #ffffff);
179 background: -moz-linear-gradient
(#dedede, #ffffff);
180 background: -ms-linear-gradient
(#dedede, #ffffff);
181 background: -o-linear-gradient
(#dedede, #ffffff);
182 background: linear-gradient
(#dedede, #ffffff);
183 box-shadow: 0 1px 2px rgba
(0, 0, 0, 0.5);
184 padding: 0 5px 0 5px;
187 border-radius: 5px 5px 5px 5px;
191 #shaarli_title { font-weight: bold
; font-style: italic
; margin-top: 0; }
192 #shaarli_title a
{ color: #fff !important
; }
194 #pageheader a:visited
{ color: #98C943; text-decoration: none
; }
195 #pageheader a:hover
{ color: #FFFFC9; text-decoration: none
; }
196 #pageheader a:active
{ color: #bbb; text-decoration: none
; }
197 #searchcriteria { padding: 4px 0px 5px 5px; font-weight: bold
; }
198 .paging { padding: 5px; background-color: #777; color: #ccc; text-align: center
; clear: both
; }
199 .paging a:link { color: #ccc; text-decoration: none
; }
200 .paging a:visited { color: #ccc; }
201 .paging a:hover { color: #FFFFC9; }
202 .paging a:active { color: #fff; }
203 #paging_privatelinks { float: left
; }
204 #paging_linksperpage { float: right
; padding-right: 5px; }
205 #paging_current { display: inline
; color: #fff; padding: 0 20 0 20; }
206 #paging_older { margin-right: 15px; }
207 #paging_newer { margin-left: 15px; }
209 #headerform { color: #ffffff; padding: 5px 5px 5px 5px; clear: both
; }
210 #toolsdiv { color: #ffffff; padding: 5px 5px 5px 5px; clear: left
; }
211 #uploaddiv { color: #ffffff; padding: 5px 5px 5px 5px; clear: left
; }
212 #editlinkform { height: 100%; color: #ffffff; padding: 5px 5px 5px 15px; width: 80%; clear: left
; }
214 padding: 4px 10px 15px 20px; border-top: 1px solid
#bbb; clear: both
;
215 background-color: #F2F2F2;
216 background: -webkit-gradient
(linear
, 0 0, 0 bottom
, from
(#F2F2F2), to
(#ffffff));
217 background: -webkit-linear-gradient
(#F2F2F2, #ffffff);
218 background: -moz-linear-gradient
(#F2F2F2, #ffffff);
219 background: -ms-linear-gradient
(#F2F2F2, #ffffff);
220 background: -o-linear-gradient
(#F2F2F2, #ffffff);
221 background: linear-gradient
(#F2F2F2, #ffffff);
225 #linklist li.publicLinkHightLight:hover, #linklist li:hover {
229 .linkdate, .linkarchive { font-size:8pt; color:#888; }
230 .linkdate a, .linkarchive a { color:#E28E3F; }
231 #linklist li
.private
{ background: url
('../images/private.png') no-repeat
10px center
; padding-left: 60px; }
232 #linklist li
{ padding-left: 26px; }
233 .private .linktitle a { color: #969696; }
234 .linktitle { font-size: 14pt; font-weight: bold
; }
235 .linktitle a { text-decoration: none
; color: #80AD48; }
236 .linktitle a:hover { color: #F57900; }
237 .linkdate, .linkarchive { font-size: 8pt; color: #888; }
238 .linkdate a, .linkarchive a { background-image: url
('../images/calendar.png'); padding: 2px 0 3px 20px; background-repeat: no-repeat
; text-decoration: none
; color: #E28E3F; }
239 .linkdate a:hover { color: #F57900 }
240 .linkurl { font-size: 8pt; color: #4BAA74; }
241 .linkdescription { color: #000; margin-top: 0; margin-bottom: 12px; font-weight: normal
; max-height: 400px; overflow: auto
; }
242 .linkdescription a { text-decoration: none
; color: #3465A4; }
243 .linkdescription a:hover { color: #F57900; }
244 .linktaglist { padding-top: 10px; line-height: 200%; }
247 background-color: #F2F2F2;
248 background: -webkit-gradient
(linear
, 0 0, 0 bottom
, from
(#F2F2F2), to
(#ffffff));
249 background: -webkit-linear-gradient
(#F2F2F2, #ffffff);
250 background: -moz-linear-gradient
(#F2F2F2, #ffffff);
251 background: -ms-linear-gradient
(#F2F2F2, #ffffff);
252 background: -o-linear-gradient
(#F2F2F2, #ffffff);
253 background: linear-gradient
(#F2F2F2, #ffffff);
254 box-shadow: 0 0 2px rgba
(0, 0, 0, 0.5);
255 padding: 3px 3px 3px 20px;
257 border-radius: 3px 3px 3px 3px;
259 background-image: url
('../images/tag_blue.png');
260 background-repeat: no-repeat
;
261 background-position: 3px center
;
262 background-color: #ffffff;
264 .linktag:hover { border-color: #555573; color: #000; }
265 .linktag a { color: #777; text-decoration: none
; }
266 .linkshort { font-size: 8pt; color: #888; }
267 .linkshort a { text-decoration: none
; color: #393964; }
268 .linkshort a:hover { text-decoration: underline
; }
269 .buttoneditform { display: inline
; }
270 #footer { font-size: 8pt; text-align: center
; border-top: 1px solid
#ddd; color: #888; clear: both
; }
271 #footer a
{ color: #486D08; }
272 #footer a:hover
{ color: #000000; }
273 #newversion { background-color: #FFFFA0; color: #000; position: absolute
; top: 0; right: 0; padding: 2 7 2 7; font-size: 9pt; }
274 #cloudtag { padding-left: 10%; padding-right: 10%; }
275 #cloudtag a
{ color: black
; text-decoration: none
; }
276 #installform td
{ font-size: 10pt; color: black
; padding: 10px 5px 10px 5px; clear: left
; }
277 #changepasswordform { color: #ccc; padding: 10px 5px 10px 5px; clear: left
; }
278 #changetag { color: #ccc; padding: 10px 5px 10px 5px; clear: left
; }
279 #configform td
{ color: #ccc; font-size: 10pt; padding: 10px 5px 10px 5px; }
280 #configform { color: #ccc; padding: 10px 5px 10px 5px; clear: left
; }
281 .thumbnail { float: right
; margin-left: 10px; }
282 /* If you want thumbnails on the left:
283 .thumbnail { float: left; margin-right: 10px; }
284 .linkcontainer { position: static; margin-left: 130px; }
287 /* --- Picture wall CSS --- */
288 #picwall_container { color: #fff; background-color: #000; clear: both
; }
289 .picwall_pictureframe { background-color: #000; z-index: 5; position: relative
; display: table-cell
; vertical-align: middle
; width: 90px; height: 90px; overflow: hidden
; text-align: center
; float: left
; }
290 .picwall_pictureframe img { max-width: 100%; height: auto
; } /* Adapt the width of the image */
291 .picwall_pictureframe a { text-decoration: none
; }
293 /* CSS to show title when hovering an image - no javascript required. */
294 .picwall_pictureframe span.info { display: none
; }
295 .picwall_pictureframe:hover span.info {
298 top: 0; left: 0; width: 90px;
303 background-color: transparent
;
304 background-color: rgba
(0, 0, 0, 0.4); /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
305 filter: progid: DXImageTransform
.Microsoft
.gradient
(startColorstr
=#66000000, endColorstr
=#66000000); /* IE6\96IE9 */
306 text-shadow: 2px 2px 1px #000000;
309 /* Minimal customisation for jQuery widgets */
310 .ui-autocomplete { background-color: #fff; padding-left: 5px; }
311 .ui-state-hover { background-color: #604dff; color: #fff; }
313 #linklist li
.publicLinkHightLight
{
317 div#permalinkQrcode
{
321 background-color: #ffffff;
322 border: 1px solid black
;
329 -webkit-box-shadow: 2px 2px 20px 2px #333333;
330 -moz-box-shadow: 2px 2px 20px 2px #333333;
331 -o-box-shadow: 2px 2px 20px 2px #333333;
332 -ms-box-shadow: 2px 2px 20px 2px #333333;
333 box-shadow: 2px 2px 20px 2px #333333;
338 font-family: Georgia
, 'DejaVu Serif', Norasi
, serif
;
339 background-color: #E6D6BE;
340 /* Background paper texture by BashCorpo:
341 http://www.bashcorpo.dk/textures.php
342 http://bashcorpo.deviantart.com/art/Grungy-paper-texture-v-5-22966998 */
343 background-image: url
("../images/Paper_texture_v5_by_bashcorpo_w1000.jpg");
344 -webkit-background-size: cover
;
345 -moz-background-size: cover
;
346 -o-background-size: cover
;
347 background-size: cover
;
349 border-bottom: 2px solid black
;
352 #daily_col1 { float: left
; position: relative
; width: 33%; padding-left: 1%; }
353 #daily_col2 { float: left
; position: relative
; width: 33%; }
354 #daily_col3 { float: left
; position: relative
; width: 33%; }
358 border: 1px solid black
;
363 padding: 5px 5px 5px 5px;
366 div
.dailyAbout a
{ color: #890500; }
371 padding: 10px 20px 0px 20px;
377 padding: 0px 20px 30px 20px;
380 /* Individual entries in "Daily": */
382 margin: 5px 10px 2px 5px;
384 border-top: 1px solid
#555;
386 div
.dailyEntry a
{ text-decoration: none
; color: #890500; }
387 div
.dailyEntryTags
{ font-size: 7.75pt; }
388 div
.dailyEntryTitle
{ font-size: 18pt; font-weight: bold
; }
389 div
.dailyEntryThumbnail
{
392 background-color: rgb
(128, 128, 128);
393 background: url
(../images/50pc_transparent.png);
394 padding: 4px 0px 2px 0px;
396 div
.dailyEntryDescription
{
403 /* Common CSS screwdriver */
408 /* For lazy images loading in picture wall.
409 Using http://www.appelsiini.net/projects/lazyload
411 .lazyimage { display: none
; }
414 html
{ border: none
; background: #fff!important
; color: #000!important
; }
415 body
{ font-size: 12pt; width: auto
!important
; margin: auto
!important
; }
416 p
{ orphans: 3; /*pas de ligne seule en bas */widows: 3; /*pas de ligne seule en haut*/ }
417 a
{ color: #000!important
; text-decoration: none
!important
; }
418 #pageheader, .paging
, #linklist li form
, #footer
{ display: none
; }
419 #linklist li
{ padding: 2 0 10 0; border-top: 2px solid
#000; clear: both
; }
420 #linklist li
.private
{ background-color: none
; border-left: 0; }
421 .linkdate { line-height: 2; }
422 .linkurl { color: #000; }
423 .linkdescription { font-size: 10pt; }
424 .linktag { border: 1px solid black
; font-style: italic
; font-size: 8pt; }
427 @media handheld
, only screen and
(max-width: 480px), only screen and
(max-device-width: 854px)
429 /* A few fixes for mobile devices (far from perfect). */
430 .nomobile { display: none
; }
431 #logo { display: none
; }
435 border-radius: 5px 5px 5px 5px;
438 .searchform, .tagfilter { display: block
!important
; margin: 0px !important
; padding: 0px !important
; width: 100% !important
; }
439 .searchform input, .tagfilter input { margin: 0px !important
; padding: 0px !important
; display: inline
!important
; }
440 .tagfilter input.bigbutton, .searchform input.bigbutton, .addform input.bigbutton { width: 30%; font-size: smaller
; }
441 #searchform_value { width: 70% !important
; }
442 #tagfilter_value { width: 70% !important
; }
443 div
.qrcode
{ position: relative
; float: left
; top: -10px; left: 0px; }
444 #paging_privatelinks { float: none
; }
445 #paging_linksperpage { float: none
; margin-bottom: 10px; font-size: smaller
; }
446 #paging_older, #paging_newer
, #paging_linksperpage a
{ border: 1px solid black
; padding: 3px 5px 3px 5px; background-color: #666; color: #fff; border-radius: 5px 5px 5px 5px; }
447 .thumbnail { float: none
; height: auto
; margin: 0px; text-align: center
; }
448 #cloudtag { padding: 0px; }
449 div
.dailyAbout
{ float: none
; position: relative
; width: 100%; clear: both
; padding: 0px; top: 0px; left: 0px; }
450 #daily_col1, #daily_col2
, #daily_col3
{ float: none
; width: 100%; padding: 0px; }
451 div
.dailyTitle
{ font-size: 18pt; margin-top: 5px; padding: 0px; }
452 div
.dailyDate
{ font-size: 11pt; padding: 0px; display: block
; }
453 div
.dailyEntryTitle
{ font-size: 16pt; font-weight: bold
; }
454 div
.dailyEntryDescription
{ font-size: 10pt; }
457 /* Highlight search results */
458 .highlight { background-color: #FFFF33; }