themes/default/css/style.css

   1 @font-face {
   2   font-family: 'Roboto';
   3   font-style: normal;
   4   font-weight: 400;
   5   src: local('Roboto Regular'), local('Roboto-Regular'), url(../fonts/Roboto.woff) format('woff');
   6 }
   7
   8
   9
  10 body {
  11     margin: 10px;
  12     font-family: 'Roboto',Verdana,Geneva,sans-serif;
  13     font-size: 16px;
  14     color: #000;
  15 }
  16
  17 header {
  18     text-align: center;
  19 }
  20
  21 header h1 {
  22     font-size: 1.3em;
  23 }
  24
  25 a,
  26 a:hover,
  27 a:visited {
  28     color: #000;
  29 }
  30
  31 .bouton {
  32     border: none;
  33     border-radius: 2px;
  34     color: #fff;
  35     background-color: #000;
  36 }
  37
  38 .bouton:hover {
  39     color: #f1f1f1;
  40     background-color: #222;
  41     cursor: pointer;
  42 }
  43
  44 #main {
  45     margin: 0 auto;
  46 }
  47
  48 #main #links {
  49     padding: 0;
  50     text-align: center;
  51     font-size: 0.9em;
  52     list-style-type: none;
  53 }
  54
  55 #main #links li {
  56     display: inline;
  57 }
  58
  59 #main #links li .current {
  60     -webkit-border-radius: 2px;
  61     border-radius: 2px;
  62     color: #fff;
  63     background-color: #000;
  64 }
  65
  66 #main #sort {
  67     padding: 0;
  68     text-align: center;
  69     list-style-type: none;
  70     opacity: 0.5;
  71 }
  72
  73 #main #sort li {
  74     display: inline;
  75     font-size: 0.9em;
  76 }
  77
  78 #main #sort li + li {
  79     margin-left: 10px;
  80 }
  81
  82 #main #sort a {
  83     padding: 2px 2px 0;
  84     vertical-align: middle;
  85 }
  86
  87 #main #sort img {
  88     vertical-align: baseline;
  89 }
  90 #main #sort img:hover {
  91     cursor: pointer;
  92 }
  93
  94 #links a {
  95     padding: 5px 10px;
  96     text-decoration: none;
  97 }
  98
  99 #links a:hover {
 100     -webkit-border-radius: 2px;
 101     border-radius: 2px;
 102     color: #f1f1f1;
 103     background-color: #040707;
 104 }
 105
 106 /*** ***/
 107
 108 /*** LINKS DISPLAY ***/
 109
 110 #main .tool {
 111     text-decoration: none;
 112     cursor: pointer;
 113 }
 114
 115 #main #content {
 116     margin-top: 20px;
 117 }
 118
 119 #main #content h2 {
 120     text-decoration: none;
 121     font-size: 1.3em;
 122 }
 123
 124 #main #content .entrie {
 125     margin-top: 15px;
 126     padding-bottom: 15px;
 127     border-bottom: 1px dashed #222;
 128     overflow: hidden;
 129 }
 130
 131 /* First entry */
 132 #main #content .results + .entrie {
 133     clear: both;
 134     margin-top: 0;
 135 }
 136
 137 #main .entrie .tools {
 138     float: right;
 139     text-align: right;
 140     list-style-type: none;
 141     opacity: 0.5;
 142 }
 143
 144 #main .entrie .tools .tool span {
 145     display: inline-block;
 146     width: 16px;
 147     height: 16px;
 148     /* Hide textual content */
 149     overflow: hidden;
 150     text-align: left;
 151     text-indent: -9999px;
 152 }
 153
 154 .icon-random {
 155     display: inline-block;
 156     width: 16px;
 157     height: 16px;
 158     overflow: hidden;
 159     text-align: left;
 160     text-indent: -9999px;
 161     background-image: url('../img/default/dice.png');
 162 }
 163
 164 /*** ***/
 165
 166 /*** ARTICLE PAGE ***/
 167
 168 #article {
 169     margin: 0 auto;
 170 }
 171
 172 #article header {
 173     border-bottom: 1px solid #222;
 174 }
 175
 176 #article header {
 177     text-align: left;
 178 }
 179
 180 #article header h1 small {
 181     float: right;
 182     font-size: 0.6em;
 183 }
 184
 185 #article header a {
 186     text-decoration: none;
 187 }
 188
 189 #article .tags {
 190     font-size: 0.8em;
 191     color: #888;
 192     padding-bottom: 5px;
 193 }
 194
 195 .backhome {
 196     display: inline;
 197 }
 198
 199 .results {
 200     padding: 15px 0;
 201     overflow: hidden;
 202 }
 203
 204 .nb-results {
 205     float: left;
 206     font-size: 0.9em;
 207     line-height: 24px;
 208     vertical-align: middle;
 209 }
 210
 211 #article_toolbar {
 212     position: fixed;
 213     bottom: 0;
 214     left: 0;
 215     width: 100%;
 216     min-height: 50px;
 217     padding-top: 17px;
 218     text-align: center;
 219     color: #fff;
 220     opacity: 0.8;
 221     background: #fff;
 222 }
 223
 224 #article_toolbar li {
 225     display: inline;
 226     padding-right: 30px;
 227 }
 228
 229 #article_toolbar .tool {
 230     padding: 0 2px;
 231 }
 232
 233 #article_toolbar .tool span {
 234     display: inline-block;
 235     width: 16px;
 236     height: 16px;
 237     /* Hide textual content */
 238     overflow: hidden;
 239     text-align: left;
 240     text-indent: -9999px;
 241 }
 242
 243 /*** ***/
 244
 245 /*** PAGINATION ***/
 246
 247 .pagination {
 248     float: right;
 249     text-align: right;
 250 }
 251
 252 .pagination a {
 253     height: 25px;
 254     margin: 2px;
 255     padding: 4px 8px;
 256     border: 1px solid #d5d5d5;
 257     text-decoration: none;
 258     font-size: 11px;
 259     font-weight: bold;
 260     color: #333;
 261 }
 262
 263 .pagination a:hover,
 264 .pagination a:active {
 265     background-color: #efefef;
 266 }
 267
 268 .pagination .current {
 269     height: 25px;
 270     margin: 2px;
 271     padding: 4px 8px;
 272     border: 1px solid #d5d5d5;
 273     text-decoration: none;
 274     font-size: 11px;
 275     font-weight: bold;
 276     color: #000;
 277     background-color: #ccc;
 278 }
 279
 280 .pagination .disabled {
 281     display: none;
 282 }
 283
 284 #bookmarklet {
 285     padding: 5px;
 286     border: 1px dashed #808080;
 287     background: #fff;
 288     cursor: move;
 289 }
 290
 291 .top_link {
 292     display: none;
 293     z-index: 2000;
 294     position: fixed;
 295     right: 15px;
 296     bottom: 15px;
 297     padding: 20px;
 298     -webkit-border-radius: 40px;
 299     -moz-border-radius: 40px;
 300     border-radius: 40px;
 301     opacity: 0.9;
 302     background: #ccc;
 303 }
 304
 305 footer {
 306     clear: both;
 307 }
 308
 309 .reading-time {
 310     font-size: 0.8em;
 311 }
 312
 313 #inputform {
 314     display: none;
 315     margin-top: 5px;
 316     margin-right: auto;
 317     margin-left: auto;
 318     padding-bottom: 5px;
 319     max-width: 300px;
 320     border-radius: 3px;
 321     text-align: center;
 322     color: #fff;
 323     opacity: 0.8;
 324     background-color: rgba(0,0,0,0.9);
 325 }
 326
 327 a.back span,
 328 a.top span,
 329 a.fav span,
 330 a.fav span:hover,
 331 a.fav-off span,
 332 a.fav-off span:hover,
 333 a.archive span,
 334 a.archive span:hover,
 335 a.archive-off span,
 336 a.archive-off span:hover,
 337 a.twitter span,
 338 a.shaarli span,
 339 a.flattr span,
 340 a.email span,
 341 a.delete span,
 342 a.link span,
 343 a.bad-display span,
 344 a.reading-time span,
 345 a.print span {
 346     background-repeat: no-repeat;
 347 }
 348
 349 .arrow-down {
 350     width: 0px;
 351     height: 0px;
 352     border-style: solid;
 353     border-width: 10px 10px 0 10px;
 354     border-color: #000 transparent transparent transparent;
 355
 356     position: absolute;
 357     margin-top: 1.5em;
 358     margin-left: -30px;
 359 }
 360
 361 .two-column {
 362   display: block;
 363   width: 50%;
 364   paddig-right: 20px;
 365   float: left;
 366   vertical-align: top;
 367 }
 368
 369
 370 /* ==========================================================================
 371         "save a link" popup div related styles
 372         ========================================================================== */
 373
 374 #bagit-form {
 375   display: none;
 376   padding-left: 30px;
 377   width: 450px;
 378
 379 }
 380
 381 a#bagit-form-close {
 382   color: #FFF;
 383   display: inline-block;
 384   float: right;
 385   background: url("../img/messages/close.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
 386   height: 16px;
 387   margin: -14px -8px 0 0;
 388   width: 16px;
 389   text-decoration: none;
 390 }
 391
 392
 393 .add-to-wallabag-link-after {
 394   background-color: #000;
 395   color: #fff;
 396   padding: 0 4px 1px 3px;
 397   font-weight: bold;
 398   font-size: 0.7em;
 399   border-radius: 4px;
 400 }
 401 .add-to-wallabag-link-after:hover, .add-to-wallabag-link-after:active {
 402   color: #fff;
 403 }
 404 .add-to-wallabag-link-after:visited {
 405   color: #999;
 406 }
 407 a.add-to-wallabag-link-after {
 408     visibility: hidden;
 409     position: absolute;
 410     opacity: 0;
 411     transition-duration: 2s;
 412     transition-timing-function: ease-out;
 413 }
 414 #article article a:hover + a.add-to-wallabag-link-after, a.add-to-wallabag-link-after:hover {
 415     opacity: 1;
 416     visibility: visible;
 417     transition-duration: .3s;
 418     transition-timing-function: ease-in;
 419 }
 420 a.add-to-wallabag-link-after:after {
 421      content: "w";
 422 }
 423
 424
 425 #add-link-result {
 426   display: inline;
 427   padding-left: 10px;
 428 }
 429
 430 /* ==========================================================================
 431         "Search" popup div related styles
 432         ========================================================================== */
 433
 434 /* Search form message needs a little more width, depending on translations */
 435 #search-form {
 436     width: 420px;
 437 }
 438
 439 .opacity03 {
 440   /*opacity: 0.3;*/
 441 }
 442
 443 #readLeftPercent {
 444                 display: inline-block;
 445     /* Show textual content */
 446     overflow: visible;
 447     text-align: left;
 448     text-indent: 0;
 449                 color: black;
 450                 width: 50px;
 451 }
 452
 453 pre code {
 454                 font-family: "Courier New", Courier, monospace;
 455                 border: 1px solid #ddd;
 456                 font-size: 0.96em;
 457 }
 458
 459 /* ==========================================================================
 460    Tags-related styles
 461    ========================================================================== */
 462
 463 .suggestedtag {
 464     padding: 4px;
 465     cursor: pointer;
 466     display: inline-block;
 467 }
 468
 469 #tagcloud .smallesttag {
 470     font-size: x-small;
 471 }
 472
 473 #tagcloud .smalltag {
 474     font-size: small;
 475 }
 476
 477 #tagcloud .mediumtag {
 478     font-size:medium;
 479 }
 480
 481 #tagcloud .largetag {
 482     font-size:large;
 483 }
 484
 485 #tagcloud .largesttag {
 486     font-size:larger;
 487 }