]>
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;
121 #pageheader #linkcount
{
130 background-color: #333333;
131 background: -webkit-gradient
(linear
, 0 0, 0 bottom
, from
(#333333), to
(#111111));
132 background: -webkit-linear-gradient
(#333333, #111111);
133 background: -moz-linear-gradient
(#333333, #111111);
134 background: -ms-linear-gradient
(#333333, #111111);
135 background: -o-linear-gradient
(#333333, #111111);
136 background: linear-gradient
(#333333, #111111);
137 box-shadow: 0 1px 2px rgba
(0, 0, 0, 0.5);
139 padding: 0 10px 5px 10px;
144 background-color: #333333;
145 background: -webkit-gradient
(linear
, 0 0, 0 bottom
, from
(#333333), to
(#000000));
146 background: -webkit-linear-gradient
(#333333, #000000);
147 background: -moz-linear-gradient
(#333333, #000000);
148 background: -ms-linear-gradient
(#333333, #000000);
149 background: -o-linear-gradient
(#333333, #000000);
150 background: linear-gradient
(#333333, #000000);
151 box-shadow: 0 1px 2px rgba
(0, 0, 0, 0.5);
153 border-radius: 5px 5px 5px 5px;
154 margin: 10px 3px 3px 3px;
157 text-decoration: none
;
160 #pageheader .search
{
169 #toolsdiv #bookmark
{
177 .linksperpage, .tagfilter, .searchform, .addform {
178 background-color: #dedede;
179 background: -webkit-gradient
(linear
, 0 0, 0 bottom
, from
(#dedede), to
(#ffffff));
180 background: -webkit-linear-gradient
(#dedede, #ffffff);
181 background: -moz-linear-gradient
(#dedede, #ffffff);
182 background: -ms-linear-gradient
(#dedede, #ffffff);
183 background: -o-linear-gradient
(#dedede, #ffffff);
184 background: linear-gradient
(#dedede, #ffffff);
186 box-shadow: 0 1px 2px rgba
(0, 0, 0, 0.5);
189 border-radius: 5px 5px 5px 5px;
190 margin: 10px 3px 3px 3px;
195 box-shadow: 0 0 0 rgba
(0, 0, 0, 0.5);
199 .linksperpage input, .tagfilter input, .searchform input, .addform input {
207 .linksperpage input {
211 .searchform #searchform_value {
219 .tagfilter #tagfilter_value {
223 .tagfilter input.bigbutton, .searchform input.bigbutton, .addform input.bigbutton {
224 background-color: #dedede;
225 background: -webkit-gradient
(linear
, 0 0, 0 bottom
, from
(#dedede), to
(#ffffff));
226 background: -webkit-linear-gradient
(#dedede, #ffffff);
227 background: -moz-linear-gradient
(#dedede, #ffffff);
228 background: -ms-linear-gradient
(#dedede, #ffffff);
229 background: -o-linear-gradient
(#dedede, #ffffff);
230 background: linear-gradient
(#dedede, #ffffff);
231 box-shadow: 0 1px 2px rgba
(0, 0, 0, 0.5);
232 padding: 0 5px 0 5px;
235 border-radius: 5px 5px 5px 5px;
246 color: #fff !important
;
249 #pageheader a:visited
{
251 text-decoration: none
;
254 #pageheader a:hover
{
256 text-decoration: none
;
259 #pageheader a:active
{
261 text-decoration: none
;
265 padding: 4px 0px 5px 5px;
271 background-color: #777;
279 text-decoration: none
;
294 #paging_privatelinks {
298 #paging_linksperpage {
303 #paging_linksperpage form
.linksperpage
{
307 #paging_linksperpage form
.linksperpage input
{
327 padding: 5px 5px 5px 5px;
331 #headerform input
.linkurl
{
337 padding: 5px 5px 5px 5px;
343 padding: 5px 5px 5px 5px;
350 padding: 5px 5px 5px 15px;
355 #editlinkform textarea
, #editlinkform
.lf_input
{
360 padding: 4px 10px 15px 20px;
361 border-top: 1px solid
#bbb;
363 background-color: #F2F2F2;
364 background: -webkit-gradient
(linear
, 0 0, 0 bottom
, from
(#F2F2F2), to
(#ffffff));
365 background: -webkit-linear-gradient
(#F2F2F2, #ffffff);
366 background: -moz-linear-gradient
(#F2F2F2, #ffffff);
367 background: -ms-linear-gradient
(#F2F2F2, #ffffff);
368 background: -o-linear-gradient
(#F2F2F2, #ffffff);
369 background: linear-gradient
(#F2F2F2, #ffffff);
373 #linklist li.publicLinkHightLight:hover, #linklist li:hover {
378 .linkdate, .linkarchive {
383 .linkdate a, .linkarchive a {
397 #linklist li
.private
{
398 background: url
('../images/private.png') no-repeat
10px center
;
406 .private .linktitle a {
416 text-decoration: none
;
424 .linkdate, .linkarchive {
429 .linkdate a, .linkarchive a {
430 background-image: url
('../images/calendar.png');
431 padding: 2px 0 3px 20px;
432 background-repeat: no-repeat
;
433 text-decoration: none
;
455 text-decoration: none
;
459 .linkdescription a:hover {
470 background-color: #F2F2F2;
471 background: -webkit-gradient
(linear
, 0 0, 0 bottom
, from
(#F2F2F2), to
(#ffffff));
472 background: -webkit-linear-gradient
(#F2F2F2, #ffffff);
473 background: -moz-linear-gradient
(#F2F2F2, #ffffff);
474 background: -ms-linear-gradient
(#F2F2F2, #ffffff);
475 background: -o-linear-gradient
(#F2F2F2, #ffffff);
476 background: linear-gradient
(#F2F2F2, #ffffff);
477 box-shadow: 0 0 2px rgba
(0, 0, 0, 0.5);
478 padding: 3px 3px 3px 20px;
480 border-radius: 3px 3px 3px 3px;
482 background-image: url
('../images/tag_blue.png');
483 background-repeat: no-repeat
;
484 background-position: 3px center
;
485 background-color: #ffffff;
489 border-color: #555573;
495 text-decoration: none
;
499 border-left: 1px solid
#aaa;
510 text-decoration: none
;
515 text-decoration: underline
;
525 border-top: 1px solid
#ddd;
539 background-color: #FFFFA0;
548 #newversion #version_id
{
549 text-decoration: blink
;
567 text-decoration: none
;
575 border: 1px solid black
;
586 padding: 10px 5px 10px 5px;
590 #installform input
.bigbutton
{
594 #changepasswordform {
596 padding: 10px 5px 10px 5px;
602 padding: 10px 5px 10px 5px;
613 padding: 10px 5px 10px 5px;
618 padding: 10px 5px 10px 5px;
627 /* If you want thumbnails on the left:
638 /* --- Picture wall CSS --- */
641 background-color: #000;
645 .picwall_pictureframe {
646 background-color: #000;
650 vertical-align: middle
;
658 .picwall_pictureframe img {
661 } /* Adapt the width of the image */
663 .picwall_pictureframe a {
664 text-decoration: none
;
667 /* CSS to show title when hovering an image - no javascript required. */
668 .picwall_pictureframe span.info {
672 .picwall_pictureframe:hover span.info {
682 background-color: transparent
;
683 background-color: rgba
(0, 0, 0, 0.4);
684 /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
685 filter: progid: DXImageTransform
.Microsoft
.gradient
(startColorstr
=#66000000, endColorstr
=#66000000);
687 text-shadow: 2px 2px 1px #000000;
690 /* Minimal customisation for jQuery widgets */
692 background-color: #fff;
697 background-color: #604dff;
701 #linklist li
.publicLinkHightLight
{
705 div#permalinkQrcode
{
709 background-color: #ffffff;
710 border: 1px solid black
;
717 -webkit-box-shadow: 2px 2px 20px 2px #333333;
718 -moz-box-shadow: 2px 2px 20px 2px #333333;
719 -o-box-shadow: 2px 2px 20px 2px #333333;
720 -ms-box-shadow: 2px 2px 20px 2px #333333;
721 box-shadow: 2px 2px 20px 2px #333333;
725 font-family: Georgia
, 'DejaVu Serif', Norasi
, serif
;
726 background-color: #E6D6BE;
727 /* Background paper texture by BashCorpo:
728 http://www.bashcorpo.dk/textures.php
729 http://bashcorpo.deviantart.com/art/Grungy-paper-texture-v-5-22966998 */
730 background-image: url
("../images/Paper_texture_v5_by_bashcorpo_w1000.jpg");
731 -webkit-background-size: cover
;
732 -moz-background-size: cover
;
733 -o-background-size: cover
;
734 background-size: cover
;
736 border-bottom: 2px solid black
;
760 border: 1px solid black
;
765 padding: 5px 5px 5px 5px;
785 padding: 10px 20px 0px 20px;
792 padding: 0px 20px 30px 20px;
795 /* Individual entries in "Daily": */
797 margin: 5px 10px 2px 5px;
799 border-top: 1px solid
#555;
803 text-decoration: none
;
811 div
.dailyEntryTitle
{
816 div
.dailyEntryThumbnail
{
819 background-color: rgb
(128, 128, 128);
820 background: url
(../images/50pc_transparent.png);
821 padding: 4px 0px 2px 0px;
824 div
.dailyEntryDescription
{
833 padding: 40px 0px 90px 0px;
839 padding-bottom: 20px;
842 /* Common CSS screwdriver */
847 /* For lazy images loading in picture wall.
848 Using http://www.appelsiini.net/projects/lazyload
857 background: #fff !important
;
858 color: #000 !important
;
863 width: auto
!important
;
864 margin: auto
!important
;
867 /* Minimum numer of lines to display when splitting a paragraph
875 color: #000 !important
;
876 text-decoration: none
!important
;
879 #pageheader, .paging
, #linklist li form
, #footer
{
885 border-top: 2px solid
#000;
889 #linklist li
.private
{
890 background-color: none
;
907 border: 1px solid black
;
913 @media handheld
, only screen and
(max-width: 480px), only screen and
(max-device-width: 854px) {
914 /* A few fixes for mobile devices (far from perfect). */
925 border-radius: 5px 5px 5px 5px;
929 .searchform, .tagfilter {
930 display: block
!important
;
931 margin: 0px !important
;
932 padding: 0px !important
;
933 width: 100% !important
;
936 .searchform input, .tagfilter input {
937 margin: 0px !important
;
938 padding: 0px !important
;
939 display: inline
!important
;
942 .tagfilter input.bigbutton, .searchform input.bigbutton, .addform input.bigbutton {
948 width: 70% !important
;
952 width: 70% !important
;
962 #paging_privatelinks {
966 #paging_linksperpage {
972 #paging_older, #paging_newer
, #paging_linksperpage a
{
973 border: 1px solid black
;
974 padding: 3px 5px 3px 5px;
975 background-color: #666;
977 border-radius: 5px 5px 5px 5px;
1001 #daily_col1, #daily_col2
, #daily_col3
{
1019 div
.dailyEntryTitle
{
1024 div
.dailyEntryDescription
{
1029 /* Highlight search results */
1031 background-color: #FFFF33;