inc/shaarli.css

   1 /* Cascading Stylesheet for Shaarli - http://sebsauvage.net/wiki/doku.php?id=php:shaarli */
   2
   3 /* CSS Reset from Yahoo to cope with browsers CSS inconsistencies. */
   4 /*
   5   Copyright (c) 2010, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html
   6   version: 2.8.2r1
   7   */
   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%;}
   9
  10 body { font-family: "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif; font-size: 10pt; background-color: #ffffff; word-wrap: break-word; }
  11
  12 input, textarea {
  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 a {
  28     text-decoration: none;
  29 }
  30
  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']. */
  33
  34 /* Buttons */
  35 .bigbutton {
  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);
  45     cursor: pointer;
  46     height: 24px;
  47     margin-left: 5px;
  48     padding: 0 5px;
  49     color: #606060;
  50     border-style: outset;
  51     border-width: 1px;
  52 }
  53
  54 .smallbutton {
  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);
  64     cursor: pointer;
  65     height: 20px;
  66     margin-left: 5px;
  67     padding: 0 5px;
  68     color: #606060;
  69     border-style: outset;
  70     border-width: 1px;
  71 }
  72
  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; }
  75 .linkeditbuttons {
  76     position: absolute;
  77     left: -1px;
  78     padding: 4px 2px 2px 2px;
  79     background-color: #f0f0f0;
  80
  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;
  86
  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;
  92 }
  93
  94 #pageheader #logo {
  95     background-image: url('../images/logo.png');
  96     background-repeat: no-repeat;
  97     float: left;
  98     margin: 0 10px 0 10px;
  99     width: 105px;
 100     height: 55px;
 101     cursor: pointer;
 102 }
 103
 104 #pageheader {
 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);
 113     width: auto;
 114     padding: 0 10px 5px 10px;
 115     margin: auto;
 116 }
 117
 118 #pageheader a {
 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);
 127     padding: 5px;
 128     border-radius: 5px 5px 5px 5px;
 129     margin: 10px 3px 3px 3px;
 130     color: #A2DD42;
 131     float: left;
 132     text-decoration: none;
 133 }
 134
 135 #toolsdiv a {
 136     clear: both;
 137 }
 138 #toolsdiv a span {
 139     color: #ffffff;
 140 }
 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);
 149     display: inline;
 150     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
 151     padding: 5px;
 152     border: none;
 153     border-radius: 5px 5px 5px 5px;
 154     margin: 10px 3px 3px 3px;
 155     color: #cecece;
 156 }
 157
 158 .linksperpage {
 159     box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
 160     padding: 3px;
 161 }
 162
 163 .linksperpage input, .tagfilter input, .searchform input, .addform input {
 164     border: none;
 165     color: #606060;
 166     background: none;
 167     box-shadow: none;
 168     padding: 5px;
 169 }
 170
 171 .linksperpage input {
 172     padding: 0;
 173 }
 174
 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;
 185     margin: 5px 0 5px 0;
 186     height: 20px;
 187     border-radius: 5px 5px 5px 5px;
 188     cursor: pointer;
 189 }
 190
 191 #shaarli_title { font-weight: bold; font-style: italic; margin-top: 0; }
 192 #shaarli_title a { color: #fff !important; }
 193
 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; }
 208
 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; }
 213 #linklist li {
 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);
 222 }
 223
 224 /*
 225 #linklist li.publicLinkHightLight:hover, #linklist li:hover {
 226     background: #E9FFCE;
 227 }
 228 */
 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%; }
 245 .linktag {
 246     font-size: 9pt;
 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;
 256     height: 20px;
 257     border-radius: 3px 3px 3px 3px;
 258     cursor: pointer;
 259     background-image: url('../images/tag_blue.png');
 260     background-repeat: no-repeat;
 261     background-position: 3px center;
 262     background-color: #ffffff;
 263 }
 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; }
 285 */
 286
 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; }
 292
 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 {
 296     display: block;
 297     position: absolute;
 298     top: 0; left: 0; width: 90px;
 299     font-weight: bold;
 300     font-size: 8pt;
 301     color: #fff;
 302     text-align: left;
 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;
 307 }
 308
 309 /* Minimal customisation for jQuery widgets */
 310 .ui-autocomplete { background-color: #fff; padding-left: 5px; }
 311 .ui-state-hover { background-color: #604dff; color: #fff; }
 312
 313 #linklist li.publicLinkHightLight {
 314     background: #ffffff;
 315 }
 316
 317 div#permalinkQrcode {
 318     padding: 20px;
 319     width: 220px;
 320     height: 220px;
 321     background-color: #ffffff;
 322     border: 1px solid black;
 323     position: absolute;
 324     top: -100px;
 325     left: -100px;
 326     text-align: center;
 327     font-size: 8pt;
 328     z-index: 50;
 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;
 334 }
 335
 336 div.daily
 337 {
 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;
 348     position: relative;
 349     border-bottom: 2px solid black;
 350 }
 351
 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%; }
 355
 356 div.dailyAbout {
 357     float: left;
 358     border: 1px solid black;
 359     font-size: 8pt;
 360     position: absolute;
 361     left: 10px;
 362     top: 15px;
 363     padding: 5px 5px 5px 5px;
 364     text-align: center;
 365 }
 366 div.dailyAbout a { color: #890500; }
 367 div.dailyTitle {
 368     font-weight: bold;
 369     font-size: 44pt;
 370     text-align: center;
 371     padding: 10px 20px 0px 20px;
 372 }
 373 div.dailyDate {
 374     font-size: 12pt;
 375     font-weight: bold;
 376     text-align: center;
 377     padding: 0px 20px 30px 20px;
 378 }
 379
 380 /* Individual entries in "Daily": */
 381 div.dailyEntry {
 382     margin: 5px 10px 2px 5px;
 383     font-size: 11pt;
 384     border-top: 1px solid #555;
 385 }
 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 {
 390     width: 100%;
 391     text-align: center;
 392     background-color: rgb(128, 128, 128);
 393     background: url(../images/50pc_transparent.png);
 394     padding: 4px 0px 2px 0px;
 395 }
 396 div.dailyEntryDescription {
 397     margin-top: 10px;
 398     margin-bottom: 30px;
 399     text-align: justify;
 400     overflow: auto;
 401 }
 402
 403 /* Common CSS screwdriver */
 404 .clear {
 405     clear: both;
 406 }
 407
 408 /* For lazy images loading in picture wall.
 409    Using http://www.appelsiini.net/projects/lazyload
 410    */
 411 .lazyimage { display: none; }
 412
 413 @media print {
 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; }
 425 }
 426
 427 @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 854px)
 428 {
 429     /* A few fixes for mobile devices (far from perfect). */
 430     .nomobile { display: none; }
 431     #logo { display: none; }
 432     #pageheader a
 433     {
 434         padding: 5px;
 435         border-radius: 5px 5px 5px 5px;
 436         margin: 3px;
 437     }
 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; }
 455 }
 456
 457 /* Highlight search results */
 458 .highlight { background-color: #FFFF33; }