]>
git.immae.eu Git - github/shaarli/Shaarli.git/blob - inc/shaarli.css
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%;}
11 font-family: "Trebuchet MS",Verdana
,Arial
,Helvetica
,sans-serif
;
13 background-color: #ffffff;
14 word-wrap: break-word
;
18 background-color: #dedede;
19 background: -webkit-gradient
(linear
, 0 0, 0 bottom
, from
(#dedede), to
(#ffffff));
20 background: -webkit-linear-gradient
(#dedede, #ffffff);
21 background: -moz-linear-gradient
(#dedede, #ffffff);
22 background: -ms-linear-gradient
(#dedede, #ffffff);
23 background: -o-linear-gradient
(#dedede, #ffffff);
24 background: linear-gradient
(#dedede, #ffffff);
25 box-shadow: 0 1px 2px rgba
(0, 0, 0, 0.5);
27 border-radius: 5px 5px 5px 5px;
33 text-decoration: none
;
45 background-color: #c0c0c0;
46 background: -moz-linear-gradient
(#c0c0c0, #ffffff) repeat scroll
0 0 transparent
;
47 background: -webkit-gradient
(linear
, 0 0, 0 bottom
, from
(#c0c0c0), to
(#ffffff));
48 background: -webkit-linear-gradient
(#c0c0c0, #ffffff);
49 background: -ms-linear-gradient
(#c0c0c0, #ffffff);
50 background: -o-linear-gradient
(#c0c0c0, #ffffff);
51 background: linear-gradient
(#c0c0c0, #ffffff);
52 border-radius: 3px 3px 3px 3px;
53 box-shadow: 0 1px 1px rgba
(0, 0, 0, 0.5);
64 background-color: #c0c0c0;
65 background: -moz-linear-gradient
(#c0c0c0, #ffffff) repeat scroll
0 0 transparent
;
66 background: -webkit-gradient
(linear
, 0 0, 0 bottom
, from
(#c0c0c0), to
(#ffffff));
67 background: -webkit-linear-gradient
(#c0c0c0, #ffffff);
68 background: -ms-linear-gradient
(#c0c0c0, #ffffff);
69 background: -o-linear-gradient
(#c0c0c0, #ffffff);
70 background: linear-gradient
(#c0c0c0, #ffffff);
71 border-radius: 3px 3px 3px 3px;
72 box-shadow: 0 1px 1px rgba
(0, 0, 0, 0.5);
82 /* Small tab on the left of each link with edit/delete buttons. */
83 .button_edit, .button_delete {
95 padding: 4px 2px 2px 2px;
96 background-color: #f0f0f0;
98 -webkit-border-radius: 0px 6px 6px 0px;
99 -moz-border-radius: 0px 6px 6px 0px;
100 -o-border-radius: 0px 6px 6px 0px;
101 -ms-border-radius: 0px 6px 6px 0px;
102 border-radius: 0px 6px 6px 0px;
104 -webkit-box-shadow: 0px 0px 3px 0px #333333;
105 -moz-box-shadow: 0px 0px 3px 0px #333333;
106 -o-box-shadow: 0px 0px 3px 0px #333333;
107 -ms-box-shadow: 0px 0px 3px 0px #333333;
108 box-shadow: 0px 0px 3px 0px #333333;
112 background-image: url
('../images/logo.png');
113 background-repeat: no-repeat
;
115 margin: 0 10px 0 10px;
122 background-color: #333333;
123 background: -webkit-gradient
(linear
, 0 0, 0 bottom
, from
(#333333), to
(#111111));
124 background: -webkit-linear-gradient
(#333333, #111111);
125 background: -moz-linear-gradient
(#333333, #111111);
126 background: -ms-linear-gradient
(#333333, #111111);
127 background: -o-linear-gradient
(#333333, #111111);
128 background: linear-gradient
(#333333, #111111);
129 box-shadow: 0 1px 2px rgba
(0, 0, 0, 0.5);
131 padding: 0 10px 5px 10px;
136 background-color: #333333;
137 background: -webkit-gradient
(linear
, 0 0, 0 bottom
, from
(#333333), to
(#000000));
138 background: -webkit-linear-gradient
(#333333, #000000);
139 background: -moz-linear-gradient
(#333333, #000000);
140 background: -ms-linear-gradient
(#333333, #000000);
141 background: -o-linear-gradient
(#333333, #000000);
142 background: linear-gradient
(#333333, #000000);
143 box-shadow: 0 1px 2px rgba
(0, 0, 0, 0.5);
145 border-radius: 5px 5px 5px 5px;
146 margin: 10px 3px 3px 3px;
149 text-decoration: none
;
160 .linksperpage, .tagfilter, .searchform, .addform {
161 background-color: #dedede;
162 background: -webkit-gradient
(linear
, 0 0, 0 bottom
, from
(#dedede), to
(#ffffff));
163 background: -webkit-linear-gradient
(#dedede, #ffffff);
164 background: -moz-linear-gradient
(#dedede, #ffffff);
165 background: -ms-linear-gradient
(#dedede, #ffffff);
166 background: -o-linear-gradient
(#dedede, #ffffff);
167 background: linear-gradient
(#dedede, #ffffff);
169 box-shadow: 0 1px 2px rgba
(0, 0, 0, 0.5);
172 border-radius: 5px 5px 5px 5px;
173 margin: 10px 3px 3px 3px;
178 box-shadow: 0 0 0 rgba
(0, 0, 0, 0.5);
182 .linksperpage input, .tagfilter input, .searchform input, .addform input {
190 .linksperpage input {
194 .tagfilter input.bigbutton, .searchform input.bigbutton, .addform input.bigbutton {
195 background-color: #dedede;
196 background: -webkit-gradient
(linear
, 0 0, 0 bottom
, from
(#dedede), to
(#ffffff));
197 background: -webkit-linear-gradient
(#dedede, #ffffff);
198 background: -moz-linear-gradient
(#dedede, #ffffff);
199 background: -ms-linear-gradient
(#dedede, #ffffff);
200 background: -o-linear-gradient
(#dedede, #ffffff);
201 background: linear-gradient
(#dedede, #ffffff);
202 box-shadow: 0 1px 2px rgba
(0, 0, 0, 0.5);
203 padding: 0 5px 0 5px;
206 border-radius: 5px 5px 5px 5px;
217 color: #fff !important
;
220 #pageheader a:visited
{
222 text-decoration: none
;
225 #pageheader a:hover
{
227 text-decoration: none
;
230 #pageheader a:active
{
232 text-decoration: none
;
236 padding: 4px 0px 5px 5px;
242 background-color: #777;
250 text-decoration: none
;
265 #paging_privatelinks {
269 #paging_linksperpage {
290 padding: 5px 5px 5px 5px;
296 padding: 5px 5px 5px 5px;
302 padding: 5px 5px 5px 5px;
309 padding: 5px 5px 5px 15px;
315 padding: 4px 10px 15px 20px;
316 border-top: 1px solid
#bbb;
318 background-color: #F2F2F2;
319 background: -webkit-gradient
(linear
, 0 0, 0 bottom
, from
(#F2F2F2), to
(#ffffff));
320 background: -webkit-linear-gradient
(#F2F2F2, #ffffff);
321 background: -moz-linear-gradient
(#F2F2F2, #ffffff);
322 background: -ms-linear-gradient
(#F2F2F2, #ffffff);
323 background: -o-linear-gradient
(#F2F2F2, #ffffff);
324 background: linear-gradient
(#F2F2F2, #ffffff);
328 #linklist li.publicLinkHightLight:hover, #linklist li:hover {
333 .linkdate, .linkarchive {
338 .linkdate a, .linkarchive a {
342 #linklist li
.private
{
343 background: url
('../images/private.png') no-repeat
10px center
;
351 .private .linktitle a {
361 text-decoration: none
;
369 .linkdate, .linkarchive {
374 .linkdate a, .linkarchive a {
375 background-image: url
('../images/calendar.png');
376 padding: 2px 0 3px 20px;
377 background-repeat: no-repeat
;
378 text-decoration: none
;
400 text-decoration: none
;
404 .linkdescription a:hover {
415 background-color: #F2F2F2;
416 background: -webkit-gradient
(linear
, 0 0, 0 bottom
, from
(#F2F2F2), to
(#ffffff));
417 background: -webkit-linear-gradient
(#F2F2F2, #ffffff);
418 background: -moz-linear-gradient
(#F2F2F2, #ffffff);
419 background: -ms-linear-gradient
(#F2F2F2, #ffffff);
420 background: -o-linear-gradient
(#F2F2F2, #ffffff);
421 background: linear-gradient
(#F2F2F2, #ffffff);
422 box-shadow: 0 0 2px rgba
(0, 0, 0, 0.5);
423 padding: 3px 3px 3px 20px;
425 border-radius: 3px 3px 3px 3px;
427 background-image: url
('../images/tag_blue.png');
428 background-repeat: no-repeat
;
429 background-position: 3px center
;
430 background-color: #ffffff;
434 border-color: #555573;
440 text-decoration: none
;
449 text-decoration: none
;
454 text-decoration: underline
;
464 border-top: 1px solid
#ddd;
478 background-color: #FFFFA0;
494 text-decoration: none
;
500 padding: 10px 5px 10px 5px;
504 #changepasswordform {
506 padding: 10px 5px 10px 5px;
512 padding: 10px 5px 10px 5px;
519 padding: 10px 5px 10px 5px;
524 padding: 10px 5px 10px 5px;
533 /* If you want thumbnails on the left:
544 /* --- Picture wall CSS --- */
547 background-color: #000;
551 .picwall_pictureframe {
552 background-color: #000;
556 vertical-align: middle
;
564 .picwall_pictureframe img {
567 } /* Adapt the width of the image */
569 .picwall_pictureframe a {
570 text-decoration: none
;
573 /* CSS to show title when hovering an image - no javascript required. */
574 .picwall_pictureframe span.info {
578 .picwall_pictureframe:hover span.info {
588 background-color: transparent
;
589 background-color: rgba
(0, 0, 0, 0.4);
590 /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
591 filter: progid: DXImageTransform
.Microsoft
.gradient
(startColorstr
=#66000000, endColorstr
=#66000000);
593 text-shadow: 2px 2px 1px #000000;
596 /* Minimal customisation for jQuery widgets */
598 background-color: #fff;
603 background-color: #604dff;
607 #linklist li
.publicLinkHightLight
{
611 div#permalinkQrcode
{
615 background-color: #ffffff;
616 border: 1px solid black
;
623 -webkit-box-shadow: 2px 2px 20px 2px #333333;
624 -moz-box-shadow: 2px 2px 20px 2px #333333;
625 -o-box-shadow: 2px 2px 20px 2px #333333;
626 -ms-box-shadow: 2px 2px 20px 2px #333333;
627 box-shadow: 2px 2px 20px 2px #333333;
631 font-family: Georgia
, 'DejaVu Serif', Norasi
, serif
;
632 background-color: #E6D6BE;
633 /* Background paper texture by BashCorpo:
634 http://www.bashcorpo.dk/textures.php
635 http://bashcorpo.deviantart.com/art/Grungy-paper-texture-v-5-22966998 */
636 background-image: url
("../images/Paper_texture_v5_by_bashcorpo_w1000.jpg");
637 -webkit-background-size: cover
;
638 -moz-background-size: cover
;
639 -o-background-size: cover
;
640 background-size: cover
;
642 border-bottom: 2px solid black
;
666 border: 1px solid black
;
671 padding: 5px 5px 5px 5px;
683 padding: 10px 20px 0px 20px;
690 padding: 0px 20px 30px 20px;
693 /* Individual entries in "Daily": */
695 margin: 5px 10px 2px 5px;
697 border-top: 1px solid
#555;
701 text-decoration: none
;
709 div
.dailyEntryTitle
{
714 div
.dailyEntryThumbnail
{
717 background-color: rgb
(128, 128, 128);
718 background: url
(../images/50pc_transparent.png);
719 padding: 4px 0px 2px 0px;
722 div
.dailyEntryDescription
{
729 /* Common CSS screwdriver */
734 /* For lazy images loading in picture wall.
735 Using http://www.appelsiini.net/projects/lazyload
744 background: #fff !important
;
745 color: #000 !important
;
750 width: auto
!important
;
751 margin: auto
!important
;
754 /* Minimum numer of lines to display when splitting a paragraph
762 color: #000 !important
;
763 text-decoration: none
!important
;
766 #pageheader, .paging
, #linklist li form
, #footer
{
772 border-top: 2px solid
#000;
776 #linklist li
.private
{
777 background-color: none
;
794 border: 1px solid black
;
800 @media handheld
, only screen and
(max-width: 480px), only screen and
(max-device-width: 854px) {
801 /* A few fixes for mobile devices (far from perfect). */
812 border-radius: 5px 5px 5px 5px;
816 .searchform, .tagfilter {
817 display: block
!important
;
818 margin: 0px !important
;
819 padding: 0px !important
;
820 width: 100% !important
;
823 .searchform input, .tagfilter input {
824 margin: 0px !important
;
825 padding: 0px !important
;
826 display: inline
!important
;
829 .tagfilter input.bigbutton, .searchform input.bigbutton, .addform input.bigbutton {
835 width: 70% !important
;
839 width: 70% !important
;
849 #paging_privatelinks {
853 #paging_linksperpage {
859 #paging_older, #paging_newer
, #paging_linksperpage a
{
860 border: 1px solid black
;
861 padding: 3px 5px 3px 5px;
862 background-color: #666;
864 border-radius: 5px 5px 5px 5px;
888 #daily_col1, #daily_col2
, #daily_col3
{
906 div
.dailyEntryTitle
{
911 div
.dailyEntryDescription
{
916 /* Highlight search results */
918 background-color: #FFFF33;