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 /*** ***/
 155
 156 /*** ARTICLE PAGE ***/
 157
 158 #article {
 159     margin: 0 auto;
 160 }
 161
 162 #article header {
 163     border-bottom: 1px solid #222;
 164 }
 165
 166 #article header {
 167     text-align: left;
 168 }
 169
 170 #article header h1 small {
 171     float: right;
 172     font-size: 0.6em;
 173 }
 174
 175 #article header a {
 176     text-decoration: none;
 177 }
 178
 179 #article .tags {
 180     font-size: 0.8em;
 181     color: #888;
 182     padding-bottom: 5px;
 183 }
 184
 185 .backhome {
 186     display: inline;
 187 }
 188
 189 .results {
 190     padding: 15px 0;
 191     overflow: hidden;
 192 }
 193
 194 .nb-results {
 195     float: left;
 196     font-size: 0.9em;
 197     line-height: 24px;
 198     vertical-align: middle;
 199 }
 200
 201 #article_toolbar {
 202     position: fixed;
 203     bottom: 0;
 204     left: 0;
 205     width: 100%;
 206     min-height: 50px;
 207     padding-top: 17px;
 208     text-align: center;
 209     color: #fff;
 210     opacity: 0.8;
 211     background: #fff;
 212 }
 213
 214 #article_toolbar li {
 215     display: inline;
 216     padding-right: 30px;
 217 }
 218
 219 #article_toolbar .tool {
 220     padding: 0 2px;
 221 }
 222
 223 #article_toolbar .tool span {
 224     display: inline-block;
 225     width: 16px;
 226     height: 16px;
 227     /* Hide textual content */
 228     overflow: hidden;
 229     text-align: left;
 230     text-indent: -9999px;
 231 }
 232
 233 /*** ***/
 234
 235 /*** PAGINATION ***/
 236
 237 .pagination {
 238     float: right;
 239     text-align: right;
 240 }
 241
 242 .pagination a {
 243     height: 25px;
 244     margin: 2px;
 245     padding: 4px 8px;
 246     border: 1px solid #d5d5d5;
 247     text-decoration: none;
 248     font-size: 11px;
 249     font-weight: bold;
 250     color: #333;
 251 }
 252
 253 .pagination a:hover,
 254 .pagination a:active {
 255     background-color: #efefef;
 256 }
 257
 258 .pagination .current {
 259     height: 25px;
 260     margin: 2px;
 261     padding: 4px 8px;
 262     border: 1px solid #d5d5d5;
 263     text-decoration: none;
 264     font-size: 11px;
 265     font-weight: bold;
 266     color: #000;
 267     background-color: #ccc;
 268 }
 269
 270 .pagination .disabled {
 271     display: none;
 272 }
 273
 274 #bookmarklet {
 275     padding: 5px;
 276     border: 1px dashed #808080;
 277     background: #fff;
 278     cursor: move;
 279 }
 280
 281 .top_link {
 282     display: none;
 283     z-index: 2000;
 284     position: fixed;
 285     right: 15px;
 286     bottom: 15px;
 287     padding: 20px;
 288     -webkit-border-radius: 40px;
 289     -moz-border-radius: 40px;
 290     border-radius: 40px;
 291     opacity: 0.9;
 292     background: #ccc;
 293 }
 294
 295 footer {
 296     clear: both;
 297 }
 298
 299 .reading-time {
 300     font-size: 0.8em;
 301 }
 302
 303 #inputform {
 304     display: none;
 305     margin-top: 5px;
 306     margin-right: auto;
 307     margin-left: auto;
 308     padding-bottom: 5px;
 309     max-width: 300px;
 310     border-radius: 3px;
 311     text-align: center;
 312     color: #fff;
 313     opacity: 0.8;
 314     background-color: rgba(0,0,0,0.9);
 315 }
 316
 317 a.back span,
 318 a.top span,
 319 a.fav span,
 320 a.fav span:hover,
 321 a.fav-off span,
 322 a.fav-off span:hover,
 323 a.archive span,
 324 a.archive span:hover,
 325 a.archive-off span,
 326 a.archive-off span:hover,
 327 a.twitter span,
 328 a.shaarli span,
 329 a.flattr span,
 330 a.email span,
 331 a.delete span,
 332 a.link span,
 333 a.bad-display span,
 334 a.reading-time span,
 335 a.print span {
 336     background-repeat: no-repeat;
 337 }
 338
 339 .arrow-down {
 340     width: 0px;
 341     height: 0px;
 342     border-style: solid;
 343     border-width: 10px 10px 0 10px;
 344     border-color: #000 transparent transparent transparent;
 345
 346     position: absolute;
 347     margin-top: 1.5em;
 348     margin-left: -30px;
 349 }
 350
 351 .two-column {
 352   display: block;
 353   width: 50%;
 354   paddig-right: 20px;
 355   float: left;
 356   vertical-align: top;
 357 }
 358
 359
 360 /* ==========================================================================
 361         "save a link" popup div related styles
 362         ========================================================================== */
 363
 364 #bagit-form {
 365   display: none;
 366   padding-left: 30px;
 367   width: 450px;
 368
 369 }
 370
 371 a#bagit-form-close {
 372   color: #FFF;
 373   display: inline-block;
 374   float: right;
 375   background: url("../img/messages/close.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
 376   height: 16px;
 377   margin: -14px -8px 0 0;
 378   width: 16px;
 379   text-decoration: none;
 380 }
 381
 382
 383 .add-to-wallabag-link-after {
 384   background-color: #000;
 385   color: #fff;
 386   padding: 0 4px 1px 3px;
 387   font-weight: bold;
 388   font-size: 0.7em;
 389   border-radius: 4px;
 390 }
 391 .add-to-wallabag-link-after:hover, .add-to-wallabag-link-after:active {
 392   color: #fff;
 393 }
 394 .add-to-wallabag-link-after:visited {
 395   color: #999;
 396 }
 397 a.add-to-wallabag-link-after {
 398     visibility: hidden;
 399     position: absolute;
 400     opacity: 0;
 401     transition-duration: 2s;
 402     transition-timing-function: ease-out;
 403 }
 404 #article article a:hover + a.add-to-wallabag-link-after, a.add-to-wallabag-link-after:hover {
 405     opacity: 1;
 406     visibility: visible;
 407     transition-duration: .3s;
 408     transition-timing-function: ease-in;
 409 }
 410 a.add-to-wallabag-link-after:after {
 411      content: "w";
 412 }
 413
 414
 415 #add-link-result {
 416   display: inline;
 417   padding-left: 10px;
 418 }
 419
 420 /* ==========================================================================
 421         "Search" popup div related styles
 422         ========================================================================== */
 423
 424 /* Search form message needs a little more width, depending on translations */
 425 #search-form {
 426     width: 420px;
 427 }
 428
 429 .opacity03 {
 430   /*opacity: 0.3;*/
 431 }
 432
 433 #readLeftPercent {
 434                 display: inline-block;
 435     /* Show textual content */
 436     overflow: visible;
 437     text-align: left;
 438     text-indent: 0;
 439                 color: black;
 440                 width: 50px;
 441 }
 442
 443 pre code {
 444                 font-family: "Courier New", Courier, monospace;
 445                 border: 1px solid #ddd;
 446                 font-size: 0.96em;
 447 }