[Summary view] [Print] [Text view]

   1  /*
   2      A dark color scheme for Twenty Eleven
   3  */
   4  
   5  /* =Global
   6  ----------------------------------------------- */
   7  
   8  body {
   9      background: #1d1d1d;
  10      color: #bbb;
  11  }
  12  #page {
  13      background: #0f0f0f;
  14  }
  15  
  16  /* Headings */
  17  hr {
  18      background-color: #333;
  19  }
  20  
  21  /* Text elements */
  22  blockquote cite {
  23      color: #999;
  24  }
  25  pre {
  26      background: #0b0b0b;
  27  }
  28  code, kbd {
  29      font: 13px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
  30  }
  31  abbr, acronym, dfn {
  32      border-bottom: 1px dotted #999;
  33  }
  34  ins {
  35      background: #00063f;
  36  }
  37  input[type=text],
  38  input[type=password],
  39  input[type=email],
  40  input[type=url],
  41  input[type=number],
  42  textarea {
  43      border: 1px solid #222;
  44  }
  45  input#s {
  46      background-color: #ddd;
  47  }
  48  
  49  
  50  /* =Header
  51  ----------------------------------------------- */
  52  
  53  #branding {
  54      border-top: 2px solid #0a0a0a;
  55  }
  56  #site-title a {
  57      color: #eee;
  58  }
  59  #site-description {
  60      color: #858585;
  61  }
  62  #branding #s {
  63      background-color: #ddd;
  64  }
  65  
  66  
  67  /* =Menu
  68  ----------------------------------------------- */
  69  
  70  #access {
  71      background: #333; /* Show a solid color for older browsers */
  72      background: -moz-linear-gradient(#383838, #272727);
  73      background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#383838), to(#272727)); /* older webkit syntax */
  74      background: -webkit-linear-gradient(#383838, #272727);
  75      border-bottom: 1px solid #222;
  76  }
  77  
  78  /* =Content
  79  ----------------------------------------------- */
  80  
  81  .page-title {
  82      color: #ccc;
  83  }
  84  .hentry {
  85      border-color: #222;
  86  }
  87  .entry-title {
  88      color: #ddd;
  89  }
  90  .entry-title,
  91  .entry-title a {
  92      color: #ddd;
  93  }
  94  .entry-meta {
  95      color: #999;
  96  }
  97  .entry-content h1,
  98  .entry-content h2,
  99  .comment-content h1,
 100  .comment-content h2 {
 101      color: #fff;
 102  }
 103  .entry-content table,
 104  .comment-content table {
 105      border-color: #222;
 106  }
 107  .entry-content th,
 108  .comment-content th {
 109      color: #999;
 110  }
 111  .entry-content td,
 112  .comment-content td {
 113      border-color: #222;
 114  }
 115  .page-link a {
 116      background: #242424;
 117      color: #bbb;
 118  }
 119  .page-link a:hover {
 120      background: #999;
 121      color: #000;
 122  }
 123  .entry-meta .edit-link a {
 124      background: #242424;
 125      color: #bbb;
 126  }
 127  .entry-meta .edit-link a:hover,
 128  .entry-meta .edit-link a:focus,
 129  .entry-meta .edit-link a:active {
 130      background: #999;
 131      color: #000;
 132  }
 133  
 134  /* Images */
 135  .wp-caption {
 136      background: #2c2c2c;
 137  }
 138  .wp-caption .wp-caption-text {
 139      color: #999;
 140  }
 141  .wp-caption .wp-caption-text:before {
 142      color: #999;
 143  }
 144  
 145  /* Image borders */
 146  img[class*="wp-image-"],
 147  #content .gallery .gallery-icon img {
 148      border-color: #2c2c2c;
 149  }
 150  .wp-caption img {
 151      border-color: #2c2c2c;
 152  }
 153  a:focus img[class*="wp-image-"],
 154  a:hover img[class*="wp-image-"],
 155  a:active img[class*="wp-image-"] {
 156      background: #2c2c2c;
 157      border-color: #444;
 158  }
 159  .wp-caption a:focus img,
 160  .wp-caption a:active img,
 161  .wp-caption a:hover img {
 162      background: #0f0f0f;
 163      border-color: #2c2c2c;
 164  }
 165  
 166  /* Password Protected Posts */
 167  .post-password-required input[type=password] {
 168      background: #ddd;
 169  }
 170  .post-password-required input[type=password]:focus {
 171      background: #fff;
 172  }
 173  
 174  /* Author Info */
 175  .singular #author-info {
 176      background: #060606;
 177      border-color: #222;
 178  }
 179  .archive #author-info {
 180      border-color: #222;
 181  }
 182  #author-avatar img {
 183      background: #000;
 184      -webkit-box-shadow: 0 1px 2px #444;
 185      -moz-box-shadow: 0 1px 2px #444;
 186      box-shadow: 0 1px 2px #444;
 187  }
 188  #author-description h2 {
 189      color: #fff;
 190  }
 191  
 192  /* Comments link */
 193  .entry-header .comments-link a {
 194      background: #282828 url(../images/comment-bubble-dark.png) no-repeat;
 195      border-color: #222;
 196      color: #888;
 197  }
 198  
 199  .rtl .entry-header .comments-link a {
 200      background-image: url(../images/comment-bubble-dark-rtl.png);
 201  }
 202  /* Singular content styles for Posts and Pages */
 203  .singular .entry-title {
 204      color: #fff;
 205  }
 206  
 207  
 208  /* =Status
 209  ----------------------------------------------- */
 210  
 211  .format-status img.avatar {
 212      -webkit-box-shadow: 0 1px 2px #333;
 213      -moz-box-shadow: 0 1px 2px #333;
 214      box-shadow: 0 1px 2px #333;
 215  }
 216  
 217  
 218  /* =Quote
 219  ----------------------------------------------- */
 220  
 221  .format-quote blockquote {
 222      color: #aaa;
 223  }
 224  
 225  
 226  /* =Image
 227  ----------------------------------------------- */
 228  
 229  .indexed.format-image .wp-caption {
 230      background: #242424;
 231  }
 232  .indexed.format-image .entry-meta .edit-link a {
 233      color: #ddd;
 234  }
 235  .indexed.format-image .entry-meta .edit-link a:hover {
 236      color: #fff;
 237  }
 238  
 239  
 240  /* =error404
 241  ----------------------------------------------- */
 242  .error404 #main #searchform {
 243      background: #060606;
 244      border-color: #222;
 245  }
 246  
 247  
 248  /* =Showcase
 249  ----------------------------------------------- */
 250  
 251  h1.showcase-heading {
 252      color: #ccc;
 253  }
 254  
 255  /* Intro */
 256  article.intro {
 257      background: #060606;
 258  }
 259  article.intro .entry-content {
 260      color: #eee;
 261  }
 262  article.intro .edit-link a {
 263      background: #555;
 264      color: #000;
 265  }
 266  article.intro .edit-link a:hover {
 267      background: #888;
 268  }
 269  
 270  /* Featured post */
 271  section.featured-post .hentry {
 272      color: #999;
 273  }
 274  
 275  /* Small featured post */
 276  section.featured-post .attachment-small-feature {
 277      border-color: #444;
 278  }
 279  section.featured-post .attachment-small-feature:hover {
 280      border-color: #777;
 281  }
 282  article.feature-image.small .entry-summary {
 283      color: #aaa;
 284  }
 285  article.feature-image.small .entry-summary p a {
 286      background: #ddd;
 287      color: #111;
 288  }
 289  article.feature-image.small .entry-summary p a:hover {
 290      color: #40220c;
 291  }
 292  
 293  /* Large featured post */
 294  article.feature-image.large .entry-title a {
 295      background: #ddd;
 296      background: rgba(0,0,0,0.8);
 297      color: #fff;
 298  }
 299  section.feature-image.large:hover .entry-title a,
 300  section.feature-image.large .entry-title:hover a {
 301      background: #111;
 302      background: rgba(255,255,255,0.8);
 303      color: #000;
 304  }
 305  section.feature-image.large img {
 306      border-bottom: 1px solid #222;
 307  }
 308  
 309  /* Featured Slider */
 310  .featured-posts {
 311      border-color: #222;
 312  }
 313  .featured-posts section.featured-post {
 314      background: #000;
 315  }
 316  .featured-post .feature-text:after,
 317  .featured-post .feature-image.small:after {
 318      background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
 319      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
 320      background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
 321      background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Opera11.10+ */
 322      background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
 323      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
 324      background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C */
 325  }
 326  .feature-slider a {
 327      background: #c3c3c3;
 328      background: rgba(60,60,60,0.9);
 329      -webkit-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.5);
 330      -moz-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.5);
 331      box-shadow: inset 1px 1px 5px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.5);
 332  }
 333  .feature-slider a.active {
 334      background: #000;
 335      background: rgba(255,255,255,0.8);
 336      -webkit-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.4), inset 0 0 2px rgba(255,255,255,0.8);
 337      -moz-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.4), inset 0 0 2px rgba(255,255,255,0.8);
 338      box-shadow: inset 1px 1px 5px rgba(0,0,0,0.4), inset 0 0 2px rgba(255,255,255,0.8);
 339  }
 340  
 341  /* Recent Posts */
 342  section.recent-posts .other-recent-posts {
 343      border-color: #222;
 344  }
 345  section.recent-posts .other-recent-posts .entry-title {
 346      border-color: #222;
 347  }
 348  section.recent-posts .other-recent-posts a[rel="bookmark"] {
 349      color: #ccc;
 350  }
 351  section.recent-posts .other-recent-posts .comments-link a,
 352  section.recent-posts .other-recent-posts .comments-link > span {
 353      border-color: #959595;
 354      color: #bbb;
 355  }
 356  section.recent-posts .other-recent-posts .comments-link > span {
 357      border-color: #444;
 358      color: #777;
 359  }
 360  
 361  
 362  /* =Attachments
 363  ----------------------------------------------- */
 364  
 365  .image-attachment div.attachment {
 366      background: #060606;
 367      border-color: #222;
 368  }
 369  .image-attachment div.attachment a img {
 370      border-color: #060606;
 371  }
 372  .image-attachment div.attachment a:focus img,
 373  .image-attachment div.attachment a:hover img,
 374  .image-attachment div.attachment a:active img {
 375      border-color: #2c2c2c;
 376      background: #0f0f0f;
 377  }
 378  
 379  
 380  /* =Widgets
 381  ----------------------------------------------- */
 382  
 383  .widget-title {
 384      color: #ccc;
 385  }
 386  .widget ul li {
 387      color: #888;
 388  }
 389  
 390  /* Search Widget */
 391  .widget_search #searchsubmit {
 392      background: #222;
 393      border-color: #333;
 394      -webkit-box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.09);
 395      -moz-box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.09);
 396      box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.09);
 397      color: #777;
 398  }
 399  .widget_search #searchsubmit:active {
 400      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
 401      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
 402      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
 403      color: #40220c;
 404  }
 405  
 406  /* Calendar Widget */
 407  .widget_calendar #wp-calendar {
 408      color: #aaa;
 409  }
 410  .widget_calendar #wp-calendar th {
 411      background: #0b0b0b;
 412      border-color: #333;
 413  }
 414  .widget_calendar #wp-calendar tfoot td {
 415      background: #0b0b0b;
 416      border-color: #333;
 417  }
 418  
 419  
 420  /* =Comments
 421  ----------------------------------------------- */
 422  
 423  #comments-title {
 424      color: #bbb;
 425  }
 426  .nocomments {
 427      color: #555;
 428  }
 429  .commentlist > li.comment {
 430      background: #090909;
 431      border-color: #222;
 432  }
 433  .commentlist .children li.comment {
 434      background: #000;
 435      border-color: #222;
 436  }
 437  .rtl .commentlist .children li.comment {
 438      border-color: #222;
 439  }
 440  .comment-meta {
 441      color: #999;
 442  }
 443  .commentlist .avatar {
 444      -webkit-box-shadow: 0 1px 2px #222;
 445      -moz-box-shadow: 0 1px 2px #222;
 446      box-shadow: 0 1px 2px #222;
 447  }
 448  a.comment-reply-link {
 449      background: #242424;
 450      color: #bbb;
 451  }
 452  li.bypostauthor a.comment-reply-link {
 453      background: #111;
 454  }
 455  a.comment-reply-link:hover,
 456  a.comment-reply-link:focus,
 457  a.comment-reply-link:active,
 458  li.bypostauthor a.comment-reply-link:hover,
 459  li.bypostauthor a.comment-reply-link:focus,
 460  li.bypostauthor a.comment-reply-link:active {
 461      background: #999;
 462      color: #000;
 463  }
 464  .commentlist > li:before {
 465      content: url(../images/comment-arrow-dark.png);
 466  }
 467  .rtl .commentlist > li:before {
 468      content: url(../images/comment-arrow-dark-rtl.png);
 469  }
 470  
 471  /* Post author highlighting */
 472  .commentlist > li.bypostauthor {
 473      background: #222;
 474      border-color: #2c2c2c;
 475  }
 476  .commentlist > li.bypostauthor:before {
 477      content: url(../images/comment-arrow-bypostauthor-dark.png);
 478  }
 479  .rtl .commentlist > li.bypostauthor:before {
 480      content: url(../images/comment-arrow-bypostauthor-dark-rtl.png);
 481  }
 482  
 483  /* Post Author threaded comments */
 484  .commentlist .children > li.bypostauthor {
 485      background: #222;
 486      border-color: #2c2c2c;
 487  }
 488  .commentlist > li.bypostauthor .comment-meta {
 489      color: #a8a8a8;
 490  }
 491  
 492  /* Comment Form */
 493  #respond {
 494      background: #222;
 495      border-color: #2c2c2c;
 496  }
 497  #respond input[type="text"],
 498  #respond textarea {
 499      background: #000;
 500      border: 4px solid #111;
 501      -webkit-box-shadow: inset 0 1px 3px rgba(51,51,51,0.95);
 502      -moz-box-shadow: inset 0 1px 3px rgba(51,51,51,0.95);
 503      box-shadow: inset 0 1px 3px rgba(51,51,51,0.95);
 504      color: #bbb;
 505  }
 506  #respond .comment-form-author label,
 507  #respond .comment-form-email label,
 508  #respond .comment-form-url label,
 509  #respond .comment-form-comment label {
 510      background: #111;
 511      -webkit-box-shadow: 1px 2px 2px rgba(51,51,51,0.8);
 512      -moz-box-shadow: 1px 2px 2px rgba(51,51,51,0.8);
 513      box-shadow: 1px 1px 2px rgba(51,51,51,0.8);
 514      color: #aaa;
 515  }
 516  .rtl #respond .comment-form-author label,
 517  .rtl #respond .comment-form-email label,
 518  .rtl #respond .comment-form-url label,
 519  .rtl #respond .comment-form-comment label {
 520      -webkit-box-shadow: -1px 2px 2px rgba(51,51,51,0.8);
 521      -moz-box-shadow: -1px 2px 2px rgba(51,51,51,0.8);
 522      box-shadow: -1px 1px 2px rgba(51,51,51,0.8);
 523  }
 524  #respond .comment-form-author .required,
 525  #respond .comment-form-email .required {
 526      color: #42caff;
 527  }
 528  #respond input#submit {
 529      background: #ddd;
 530      -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3);
 531      -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.3);
 532      box-shadow: 0 1px 2px rgba(0,0,0,0.3);
 533      color: #111;
 534      text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
 535  }
 536  #respond input#submit:active {
 537      color: #40220c;
 538  }
 539  #respond #cancel-comment-reply-link {
 540      color: #999;
 541  }
 542  #reply-title {
 543      color: #ccc;
 544  }
 545  #cancel-comment-reply-link {
 546      color: #777;
 547  }
 548  #cancel-comment-reply-link:focus,
 549  #cancel-comment-reply-link:active,
 550  #cancel-comment-reply-link:hover {
 551      color: #00b4cc;
 552  }
 553  
 554  
 555  /* =Footer
 556  ----------------------------------------------- */
 557  
 558  #supplementary {
 559      border-color: #222;
 560  }
 561  
 562  /* Site Generator Line */
 563  #site-generator {
 564      background: #060606;
 565      border-color: #000;
 566  }
 567  
 568  
 569  /* =Print
 570  ----------------------------------------------- */
 571  
 572  @media print {
 573      body {
 574          color: #333;
 575          background: none !important;
 576      }
 577      #page {
 578          background: none !important;
 579      }
 580  
 581      /* Post author highlighting */
 582      .commentlist > li.bypostauthor {
 583          color: #333;
 584      }
 585      .commentlist > li.bypostauthor .comment-meta {
 586          color: #959595;
 587      }
 588      .commentlist > li:before {
 589          content: none !important;
 590      }
 591  
 592      /* Post Author threaded comments */
 593      .commentlist .children > li.bypostauthor {
 594          background: #fff;
 595          border-color: #ddd;
 596      }
 597      .commentlist .children > li.bypostauthor > article,
 598      .commentlist .children > li.bypostauthor > article .comment-meta {
 599          color: #959595;
 600      }
 601  }