X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=inc%2Fshaarli.css;h=a24d4b7c1e384cfc72a03000e462263063c77fb0;hb=3d8f5cf84b8baa4a212f5089633af7c640609b62;hp=dd798d86df804210e92ff1a37a11fd00f395ffda;hpb=32c8dee39c6f458bffd45b02eab4e19fdf68f311;p=github%2Fshaarli%2FShaarli.git diff --git a/inc/shaarli.css b/inc/shaarli.css index dd798d86..a24d4b7c 100644 --- a/inc/shaarli.css +++ b/inc/shaarli.css @@ -1,11 +1,4 @@ -/* Cascading Stylesheet for Shaarli - http://sebsauvage.net/wiki/doku.php?id=php:shaarli */ - -/* CSS Reset from Yahoo to cope with browsers CSS inconsistencies. */ -/* - Copyright (c) 2010, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html - version: 2.8.2r1 - */ -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%;} +/* Cascading Stylesheet for Shaarli - https://github.com/shaarli/Shaarli */ body { font-family: "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif; @@ -24,7 +17,7 @@ input, textarea { background: linear-gradient(#dedede, #ffffff); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); padding: 5px; - border-radius: 5px 5px 5px 5px; + border-radius: 3px 3px 3px 3px; border: none; color: #000; } @@ -40,6 +33,14 @@ h1 { margin-bottom: 20px; } +em { + font-style: italic; +} + +strong { + font-weight: bold; +} + /* Buttons */ .bigbutton { background-color: #c0c0c0; @@ -88,23 +89,17 @@ h1 { padding: 0; background: none; } + .linkeditbuttons { position: absolute; - left: -1px; + left: 2px; padding: 4px 2px 2px 2px; - background-color: #f0f0f0; -webkit-border-radius: 0px 6px 6px 0px; -moz-border-radius: 0px 6px 6px 0px; -o-border-radius: 0px 6px 6px 0px; -ms-border-radius: 0px 6px 6px 0px; border-radius: 0px 6px 6px 0px; - - -webkit-box-shadow: 0px 0px 3px 0px #333333; - -moz-box-shadow: 0px 0px 3px 0px #333333; - -o-box-shadow: 0px 0px 3px 0px #333333; - -ms-box-shadow: 0px 0px 3px 0px #333333; - box-shadow: 0px 0px 3px 0px #333333; } #pageheader #logo { @@ -117,18 +112,21 @@ h1 { cursor: pointer; } -#pageheader { - background-color: #333333; - background: -webkit-gradient(linear, 0 0, 0 bottom, from(#333333), to(#111111)); - background: -webkit-linear-gradient(#333333, #111111); - background: -moz-linear-gradient(#333333, #111111); - background: -ms-linear-gradient(#333333, #111111); - background: -o-linear-gradient(#333333, #111111); - background: linear-gradient(#333333, #111111); - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); - width: auto; - padding: 0 10px 5px 10px; +#pageheader #menu { + width: 100%; +} + +#pageheader #menu ul { margin: auto; + padding: 7px 0px 0px 0px; + float: none; +} + +#pageheader #menu ul li { + list-style: none; + display: inline; + position: relative; + box-sizing: border-box; } #pageheader a { @@ -141,19 +139,54 @@ h1 { background: linear-gradient(#333333, #000000); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); padding: 5px; - border-radius: 5px 5px 5px 5px; + border-radius: 3px 3px 3px 3px; margin: 10px 3px 3px 3px; color: #A2DD42; - float: left; text-decoration: none; + line-height: 2.5; + white-space: nowrap; +} + +#pageheader #linkcount { + float: right; + font-style: italic; + color: #bbb; + text-align: right; + padding-right: 5px; + margin: 3px 3px 0px 0px; +} + +#pageheader { + background-color: #333333; + background: -webkit-gradient(linear, 0 0, 0 bottom, from(#333333), to(#111111)); + background: -webkit-linear-gradient(#333333, #111111); + background: -moz-linear-gradient(#333333, #111111); + background: -ms-linear-gradient(#333333, #111111); + background: -o-linear-gradient(#333333, #111111); + background: linear-gradient(#333333, #111111); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); + width: auto; + padding: 0 10px 5px 10px; + margin: auto; +} + +#pageheader .search { + width: 100%; + white-space: nowrap; } #toolsdiv a { clear: both; } + +#toolsdiv #bookmark { + clear: none; +} + #toolsdiv a span { color: #ffffff; } + .linksperpage, .tagfilter, .searchform, .addform { background-color: #dedede; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#dedede), to(#ffffff)); @@ -166,7 +199,7 @@ h1 { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); padding: 5px; border: none; - border-radius: 5px 5px 5px 5px; + border-radius: 3px 3px 3px 3px; margin: 10px 3px 3px 3px; color: #cecece; } @@ -188,6 +221,26 @@ h1 { padding: 0; } +.searchform #searchform_value { + width: 30%; +} + +.tagfilter { + margin-left:24px; +} + +.tagfilter div.awesomplete { + width: 15%; +} + +.tagfilter #tagfilter_value { + display: inline; +} + +.tagfilter li { + color: black; +} + .tagfilter input.bigbutton, .searchform input.bigbutton, .addform input.bigbutton { background-color: #dedede; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#dedede), to(#ffffff)); @@ -200,7 +253,7 @@ h1 { padding: 0 5px 0 5px; margin: 5px 0 5px 0; height: 20px; - border-radius: 5px 5px 5px 5px; + border-radius: 3px 3px 3px 3px; cursor: pointer; } @@ -209,6 +262,7 @@ h1 { font-style: italic; margin-top: 0; } + #shaarli_title a { color: #fff !important; } @@ -217,18 +271,22 @@ h1 { color: #98C943; text-decoration: none; } + #pageheader a:hover { color: #FFFFC9; text-decoration: none; } + #pageheader a:active { color: #bbb; text-decoration: none; } + #searchcriteria { padding: 4px 0px 5px 5px; font-weight: bold; } + .paging { padding: 5px; background-color: #777; @@ -236,35 +294,53 @@ h1 { text-align: center; clear: both; } + .paging a:link { color: #ccc; text-decoration: none; } + .paging a:visited { color: #ccc; } + .paging a:hover { color: #FFFFC9; } + .paging a:active { color: #fff; } -#paging_privatelinks { + +.paging_privatelinks { float: left; } -#paging_linksperpage { + +.paging_linksperpage { float: right; padding-right: 5px; + margin: 0px 10px 2px 0px; } -#paging_current { + +.paging_linksperpage form.linksperpage { + display: inline; +} + +.paging_linksperpage form.linksperpage input { + height: 15px; +} + +.paging_current { display: inline; color: #fff; padding: 0 20 0 20; } -#paging_older { + +.paging_older { margin-right: 15px; } -#paging_newer { + +.paging_newer { margin-left: 15px; } @@ -273,23 +349,51 @@ h1 { padding: 5px 5px 5px 5px; clear: both; } + +#headerform input.linkurl { + width: 50%; + font-size: inherit; +} + +#headerform label { + cursor: pointer; + margin-right: 10px; +} + +#headerform label[for=longlastingsession] { + display: block; + width: 100%; + margin-top: 5px; +} + #toolsdiv { color: #ffffff; padding: 5px 5px 5px 5px; clear: left; } + #uploaddiv { color: #ffffff; padding: 5px 5px 5px 5px; clear: left; } + #editlinkform { height: 100%; - color: #ffffff; padding: 5px 5px 5px 15px; width: 80%; clear: left; } + +#editlinkform label { + cursor: pointer; + color: #ffffff; +} + +#editlinkform textarea, #editlinkform .lf_input { + width: 100%; +} + #linklist li { padding: 4px 10px 15px 20px; border-top: 1px solid #bbb; @@ -308,70 +412,86 @@ h1 { background: #E9FFCE; } */ -.linkdate, .linkarchive { + +.linkdate { font-size:8pt; color:#888; } -.linkdate a, .linkarchive a { + +.linkdate a { color:#E28E3F; } + #linklist li.private { - background: url('../images/private.png') no-repeat 10px center; - padding-left: 60px; + background: url('../images/private.png') no-repeat 4px center; + padding-left: 30px; } + #linklist li { - padding-left: 26px; + padding-left: 30px; } + .private .linktitle a { color: #969696; } + .linktitle { font-size: 14pt; font-weight: bold; } + .linktitle a { text-decoration: none; color: #80AD48; } + .linktitle a:hover { color: #F57900; } -.linkdate, .linkarchive { + +.linkdate { font-size: 8pt; color: #888; } -.linkdate a, .linkarchive a { + +.linkdate a { background-image: url('../images/calendar.png'); padding: 2px 0 3px 20px; background-repeat: no-repeat; text-decoration: none; color: #E28E3F; } + .linkdate a:hover { color: #F57900 } + .linkurl { font-size: 8pt; color: #4BAA74; } + .linkdescription { color: #000; margin-top: 0; margin-bottom: 12px; font-weight: normal; - max-height: 400px; overflow: auto; } + .linkdescription a { text-decoration: none; color: #3465A4; } + .linkdescription a:hover { color: #F57900; } + .linktaglist { padding-top: 10px; line-height: 200%; } + .linktag { font-size: 9pt; background-color: #F2F2F2; @@ -382,50 +502,67 @@ h1 { background: -o-linear-gradient(#F2F2F2, #ffffff); background: linear-gradient(#F2F2F2, #ffffff); box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); - padding: 3px 3px 3px 20px; + padding: 3px 5px 3px 20px; height: 20px; - border-radius: 3px 3px 3px 3px; + border-radius: 3px; cursor: pointer; background-image: url('../images/tag_blue.png'); background-repeat: no-repeat; background-position: 3px center; background-color: #ffffff; } + .linktag:hover { border-color: #555573; color: #000; } + .linktag a { color: #777; text-decoration: none; } + +.linktag .remove { + border-left: 1px solid #aaa; + padding-left: 5px; + color:#6767A7; +} + .linkshort { font-size: 8pt; color: #888; } + .linkshort a { text-decoration: none; color: #393964; } + .linkshort a:hover { text-decoration: underline; } + .buttoneditform { display: inline; } + #footer { font-size: 8pt; text-align: center; - border-top: 1px solid #ddd; color: #888; clear: both; + max-width: 30em; + margin: 15px auto 15px auto; } -#footer a { + +#footer a { color: #486D08; } -#footer a:hover { + +#footer a:hover { color: #000000; } + #newversion { background-color: #FFFFA0; color: #000; @@ -435,44 +572,101 @@ h1 { padding: 2 7 2 7; font-size: 9pt; } + +#newversion #version_id { + text-decoration: blink; +} + #cloudtag { padding-left: 10%; padding-right: 10%; } + +#cloudtag .count { + color: #99f; + font-size: 9pt; + padding-left: 5px; + padding-right: 2px; +} + #cloudtag a { color: black; text-decoration: none; } + +#install { + margin: 0 20px; +} + +#installform { + border: 1px solid black; + padding: 10px; +} + +#installform table { + border: none; +} + #installform td { font-size: 10pt; color: black; padding: 10px 5px 10px 5px; clear: left; } + +#installform input.bigbutton { + float: right; +} + #changepasswordform { color: #ccc; padding: 10px 5px 10px 5px; clear: left; } + #changetag { color: #ccc; padding: 10px 5px 10px 5px; clear: left; } + +#changetag #totag { + margin-left: 40px; +} + +#changetag div { + float:left; +} + +#changetag label { + padding: 5px; +} + +#changetag li { + color: #000; +} #configform td { color: #ccc; font-size: 10pt; padding: 10px 5px 10px 5px; } + #configform { color: #ccc; padding: 10px 5px 10px 5px; clear: left; } + .thumbnail { float: right; - margin-left: 10px; + margin: 0px 10px 0px 10px; +} + +.thumbnail img { + border-radius: 3px; + box-shadow: 0.5px 0.5px 0.5px 1px #dde4e6; } + /* If you want thumbnails on the left: .thumbnail { float: left; @@ -490,6 +684,7 @@ h1 { background-color: #000; clear: both; } + .picwall_pictureframe { background-color: #000; z-index: 5; @@ -502,10 +697,24 @@ h1 { text-align: center; float: left; } + +.b-lazy { + -webkit-transition: opacity 500ms ease-in-out; + -moz-transition: opacity 500ms ease-in-out; + -o-transition: opacity 500ms ease-in-out; + transition: opacity 500ms ease-in-out; + opacity: 0; +} +.b-lazy.b-loaded { + opacity: 1; +} + .picwall_pictureframe img { max-width: 100%; height: auto; + color: transparent; } /* Adapt the width of the image */ + .picwall_pictureframe a { text-decoration: none; } @@ -514,6 +723,7 @@ h1 { .picwall_pictureframe span.info { display: none; } + .picwall_pictureframe:hover span.info { display: block; position: absolute; @@ -532,39 +742,10 @@ h1 { text-shadow: 2px 2px 1px #000000; } -/* Minimal customisation for jQuery widgets */ -.ui-autocomplete { - background-color: #fff; - padding-left: 5px; -} -.ui-state-hover { - background-color: #604dff; - color: #fff; -} - #linklist li.publicLinkHightLight { background: #ffffff; } -div#permalinkQrcode { - padding: 20px; - width: 220px; - height: 220px; - background-color: #ffffff; - border: 1px solid black; - position: absolute; - top: -100px; - left: -100px; - text-align: center; - font-size: 8pt; - z-index: 50; - -webkit-box-shadow: 2px 2px 20px 2px #333333; - -moz-box-shadow: 2px 2px 20px 2px #333333; - -o-box-shadow: 2px 2px 20px 2px #333333; - -ms-box-shadow: 2px 2px 20px 2px #333333; - box-shadow: 2px 2px 20px 2px #333333; -} - div.daily { font-family: Georgia, 'DejaVu Serif', Norasi, serif; background-color: #E6D6BE; @@ -586,11 +767,13 @@ div.daily { width: 33%; padding-left: 1%; } + #daily_col2 { float: left; position: relative; width: 33%; } + #daily_col3 { float: left; position: relative; @@ -607,15 +790,26 @@ div.dailyAbout { padding: 5px 5px 5px 5px; text-align: center; } + div.dailyAbout a { color: #890500; } + +div.dailyAbout img { + position: relative; + top: 3px; + margin-right: 4px; + width: 14px; + height: 14px; +} + div.dailyTitle { font-weight: bold; font-size: 44pt; text-align: center; padding: 10px 20px 0px 20px; } + div.dailyDate { font-size: 12pt; font-weight: bold; @@ -629,17 +823,25 @@ div.dailyEntry { font-size: 11pt; border-top: 1px solid #555; } + div.dailyEntry a { text-decoration: none; color: #890500; } + div.dailyEntryTags { font-size: 7.75pt; } + div.dailyEntryTitle { font-size: 18pt; font-weight: bold; } + +div.dailyEntryLinkdate { + font-size: 8pt; +} + div.dailyEntryThumbnail { width: 100%; text-align: center; @@ -647,6 +849,7 @@ div.dailyEntryThumbnail { background: url(../images/50pc_transparent.png); padding: 4px 0px 2px 0px; } + div.dailyEntryDescription { margin-top: 10px; margin-bottom: 30px; @@ -654,11 +857,30 @@ div.dailyEntryDescription { overflow: auto; } +div.dailyNoEntry { + text-align: center; + padding: 40px 0px 90px 0px; +} + +.daily #closing { + clear: both; + text-align: center; + padding-bottom: 20px; +} + /* Common CSS screwdriver */ .clear { clear: both; } +.right { + text-align: right; +} + +.white { + color: white; +} + /* For lazy images loading in picture wall. Using http://www.appelsiini.net/projects/lazyload */ @@ -666,48 +888,64 @@ div.dailyEntryDescription { display: none; } +#configuration_table td { + border: none; + padding: 10px; + vertical-align: top; +} + @media print { html { border: none; background: #fff !important; color: #000 !important; } + body { font-size: 12pt; width: auto !important; margin: auto !important; } + /* Minimum numer of lines to display when splitting a paragraph over two pages */ p { orphans: 3; widows: 3; } + a { color: #000 !important; text-decoration: none !important; } + #pageheader, .paging, #linklist li form, #footer { display: none; } + #linklist li { padding: 2 0 10 0; border-top: 2px solid #000; clear: both; } + #linklist li.private { background-color: none; border-left: 0; } + .linkdate { line-height: 2; } + .linkurl { color: #000; } + .linkdescription { font-size: 10pt; } + .linktag { border: 1px solid black; font-style: italic; @@ -717,69 +955,105 @@ div.dailyEntryDescription { @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 854px) { /* A few fixes for mobile devices (far from perfect). */ + + .tagfilter div.awesomplete { + width: 70%; + } + .nomobile { display: none; } + #logo { display: none; } - #pageheader a - { + + #pageheader #menu ul { + text-align: center; + } + + #pageheader #menu a { padding: 5px; - border-radius: 5px 5px 5px 5px; + border-radius: 3px 3px 3px 3px; margin: 3px; } + + #headerform label { + width: 100%; + display: block; + height: auto; + line-height: 25px; + padding-bottom: 10px; + } + + #headerform label input[type=text], + #headerform label input[type=password]{ + float: right; + width: 70%; + } + .searchform, .tagfilter { display: block !important; - margin: 0px !important; + margin: 0px 3px 7px 0px !important; padding: 0px !important; - width: 100% !important; + width: 97% !important; } + .searchform input, .tagfilter input { margin: 0px !important; padding: 0px !important; display: inline !important; } + .tagfilter input.bigbutton, .searchform input.bigbutton, .addform input.bigbutton { width: 30%; font-size: smaller; } + #searchform_value { width: 70% !important; } + #tagfilter_value { width: 70% !important; } + div.qrcode { position: relative; float: left; top: -10px; left: 0px; } - #paging_privatelinks { + + .paging_privatelinks { float: none; } - #paging_linksperpage { + + .paging_linksperpage { float: none; margin-bottom: 10px; font-size: smaller; } - #paging_older, #paging_newer, #paging_linksperpage a { + + #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; + border-radius: 3px 3px 3px 3px; } + .thumbnail { float: none; height: auto; margin: 0px; text-align: center; } + #cloudtag { padding: 0px; } + div.dailyAbout { float: none; position: relative; @@ -789,31 +1063,136 @@ div.dailyEntryDescription { top: 0px; left: 0px; } + #daily_col1, #daily_col2, #daily_col3 { float: none; width: 100%; padding: 0px; } + div.dailyTitle { font-size: 18pt; margin-top: 5px; padding: 0px; } + div.dailyDate { font-size: 11pt; padding: 0px; display: block; } + div.dailyEntryTitle { font-size: 16pt; font-weight: bold; } + div.dailyEntryDescription { font-size: 10pt; } } +#toolsdiv a.button-description { + clear: none; +} + /* Highlight search results */ .highlight { background-color: #FFFF33; } + +.center { + text-align: center; +} + +ul.errors { + color: red; + float: left; +} + +#pluginsadmin { + width: 80%; + padding: 20px 0 0 20px; +} + +#pluginsadmin section { + padding: 20px 0; +} + +#pluginsadmin .plugin_parameters { + margin: 10px 0; +} + +#pluginsadmin h1 { + font-style: normal; +} + +#pluginsadmin h2 { + font-size: 1.4em; + font-weight: bold; +} + +#pluginsadmin table { + width: 100%; +} + +#pluginsadmin table, #pluginsadmin th, #pluginsadmin td { + border-width: 1px 0; + border-style: solid; + border-color: #c0c0c0; +} + +#pluginsadmin table th { + font-weight: bold; + padding: 10px 0; +} + +#pluginsadmin table td { + padding: 5px 0; +} + +#pluginsadmin input[type=submit] { + margin: 10px 0; +} + +#pluginsadmin label { + cursor: pointer; +} + +#pluginsadmin .plugin_parameter { + padding: 10px 0; + border-width: 1px 0; + border-style: solid; + border-color: #c0c0c0; +} + +#pluginsadmin .float_label { + float: left; + width: 40%; +} + +#pluginsadmin a { + color: #486D08; +} + +#pluginsadmin a.arrow { + color: black; +} + +/* 404 page */ +.error-container { + + margin: 50px; + margin-top: 20px; +} + +.error-container h1 { + text-decoration: none; + font-style: normal; + color: #80AD48; +} + +.linklist-plugin-icon { + width: 13px; + height: 13px; +}