[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: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C */
 323  }
 324  .feature-slider a {
 325      background: #c3c3c3;
 326      background: rgba(60,60,60,0.9);
 327      -webkit-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.5);
 328      -moz-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.5);
 329      box-shadow: inset 1px 1px 5px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.5);
 330  }
 331  .feature-slider a.active {
 332      background: #000;
 333      background: rgba(255,255,255,0.8);
 334      -webkit-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.4), inset 0 0 2px rgba(255,255,255,0.8);
 335      -moz-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.4), inset 0 0 2px rgba(255,255,255,0.8);
 336      box-shadow: inset 1px 1px 5px rgba(0,0,0,0.4), inset 0 0 2px rgba(255,255,255,0.8);
 337  }
 338  
 339  /* Recent Posts */
 340  section.recent-posts .other-recent-posts {
 341      border-color: #222;
 342  }
 343  section.recent-posts .other-recent-posts .entry-title {
 344      border-color: #222;
 345  }
 346  section.recent-posts .other-recent-posts a[rel="bookmark"] {
 347      color: #ccc;
 348  }
 349  section.recent-posts .other-recent-posts .comments-link a,
 350  section.recent-posts .other-recent-posts .comments-link > span {
 351      border-color: #959595;
 352      color: #bbb;
 353  }
 354  section.recent-posts .other-recent-posts .comments-link > span {
 355      border-color: #444;
 356      color: #777;
 357  }
 358  
 359  
 360  /* =Attachments
 361  ----------------------------------------------- */
 362  
 363  .image-attachment div.attachment {
 364      background: #060606;
 365      border-color: #222;
 366  }
 367  .image-attachment div.attachment a img {
 368      border-color: #060606;
 369  }
 370  .image-attachment div.attachment a:focus img,
 371  .image-attachment div.attachment a:hover img,
 372  .image-attachment div.attachment a:active img {
 373      border-color: #2c2c2c;
 374      background: #0f0f0f;
 375  }
 376  
 377  
 378  /* =Widgets
 379  ----------------------------------------------- */
 380  
 381  .widget-title {
 382      color: #ccc;
 383  }
 384  .widget ul li {
 385      color: #888;
 386  }
 387  
 388  /* Search Widget */
 389  .widget_search #searchsubmit {
 390      background: #222;
 391      border-color: #333;
 392      -webkit-box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.09);
 393      -moz-box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.09);
 394      box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.09);
 395      color: #777;
 396  }
 397  .widget_search #searchsubmit:active {
 398      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
 399      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
 400      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
 401      color: #40220c;
 402  }
 403  
 404  /* Calendar Widget */
 405  .widget_calendar #wp-calendar {
 406      color: #aaa;
 407  }
 408  .widget_calendar #wp-calendar th {
 409      background: #0b0b0b;
 410      border-color: #333;
 411  }
 412  .widget_calendar #wp-calendar tfoot td {
 413      background: #0b0b0b;
 414      border-color: #333;
 415  }
 416  
 417  
 418  /* =Comments
 419  ----------------------------------------------- */
 420  
 421  #comments-title {
 422      color: #bbb;
 423  }
 424  .nocomments {
 425      color: #555;
 426  }
 427  .commentlist > li.comment {
 428      background: #090909;
 429      border-color: #222;
 430  }
 431  .commentlist .children li.comment {
 432      background: #000;
 433      border-color: #222;
 434  }
 435  .rtl .commentlist .children li.comment {
 436      border-color: #222;
 437  }
 438  .comment-meta {
 439      color: #999;
 440  }
 441  .commentlist .avatar {
 442      -webkit-box-shadow: 0 1px 2px #222;
 443      -moz-box-shadow: 0 1px 2px #222;
 444      box-shadow: 0 1px 2px #222;
 445  }
 446  a.comment-reply-link {
 447      background: #242424;
 448      color: #bbb;
 449  }
 450  li.bypostauthor a.comment-reply-link {
 451      background: #111;
 452  }
 453  a.comment-reply-link:hover,
 454  a.comment-reply-link:focus,
 455  a.comment-reply-link:active,
 456  li.bypostauthor a.comment-reply-link:hover,
 457  li.bypostauthor a.comment-reply-link:focus,
 458  li.bypostauthor a.comment-reply-link:active {
 459      background: #999;
 460      color: #000;
 461  }
 462  .commentlist > li:before {
 463      content: url(../images/comment-arrow-dark.png);
 464  }
 465  .rtl .commentlist > li:before {
 466      content: url(../images/comment-arrow-dark-rtl.png);
 467  }
 468  
 469  /* Post author highlighting */
 470  .commentlist > li.bypostauthor {
 471      background: #222;
 472      border-color: #2c2c2c;
 473  }
 474  .commentlist > li.bypostauthor:before {
 475      content: url(../images/comment-arrow-bypostauthor-dark.png);
 476  }
 477  .rtl .commentlist > li.bypostauthor:before {
 478      content: url(../images/comment-arrow-bypostauthor-dark-rtl.png);
 479  }
 480  
 481  /* Post Author threaded comments */
 482  .commentlist .children > li.bypostauthor {
 483      background: #222;
 484      border-color: #2c2c2c;
 485  }
 486  .commentlist > li.bypostauthor .comment-meta {
 487      color: #a8a8a8;
 488  }
 489  
 490  /* Comment Form */
 491  #respond {
 492      background: #222;
 493      border-color: #2c2c2c;
 494  }
 495  #respond input[type="text"],
 496  #respond textarea {
 497      background: #000;
 498      border: 4px solid #111;
 499      -webkit-box-shadow: inset 0 1px 3px rgba(51,51,51,0.95);
 500      -moz-box-shadow: inset 0 1px 3px rgba(51,51,51,0.95);
 501      box-shadow: inset 0 1px 3px rgba(51,51,51,0.95);
 502      color: #bbb;
 503  }
 504  #respond .comment-form-author label,
 505  #respond .comment-form-email label,
 506  #respond .comment-form-url label,
 507  #respond .comment-form-comment label {
 508      background: #111;
 509      -webkit-box-shadow: 1px 2px 2px rgba(51,51,51,0.8);
 510      -moz-box-shadow: 1px 2px 2px rgba(51,51,51,0.8);
 511      box-shadow: 1px 1px 2px rgba(51,51,51,0.8);
 512      color: #aaa;
 513  }
 514  .rtl #respond .comment-form-author label,
 515  .rtl #respond .comment-form-email label,
 516  .rtl #respond .comment-form-url label,
 517  .rtl #respond .comment-form-comment label {
 518      -webkit-box-shadow: -1px 2px 2px rgba(51,51,51,0.8);
 519      -moz-box-shadow: -1px 2px 2px rgba(51,51,51,0.8);
 520      box-shadow: -1px 1px 2px rgba(51,51,51,0.8);
 521  }
 522  #respond .comment-form-author .required,
 523  #respond .comment-form-email .required {
 524      color: #42caff;
 525  }
 526  #respond input#submit {
 527      background: #ddd;
 528      -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3);
 529      -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.3);
 530      box-shadow: 0 1px 2px rgba(0,0,0,0.3);
 531      color: #111;
 532      text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
 533  }
 534  #respond input#submit:active {
 535      color: #40220c;
 536  }
 537  #respond #cancel-comment-reply-link {
 538      color: #999;
 539  }
 540  #reply-title {
 541      color: #ccc;
 542  }
 543  #cancel-comment-reply-link {
 544      color: #777;
 545  }
 546  #cancel-comment-reply-link:focus,
 547  #cancel-comment-reply-link:active,
 548  #cancel-comment-reply-link:hover {
 549      color: #00b4cc;
 550  }
 551  
 552  
 553  /* =Footer
 554  ----------------------------------------------- */
 555  
 556  #supplementary {
 557      border-color: #222;
 558  }
 559  
 560  /* Site Generator Line */
 561  #site-generator {
 562      background: #060606;
 563      border-color: #000;
 564  }
 565  
 566  
 567  /* =Print
 568  ----------------------------------------------- */
 569  
 570  @media print {
 571      body {
 572          color: #333;
 573          background: none !important;
 574      }
 575      #page {
 576          background: none !important;
 577      }
 578  
 579      /* Post author highlighting */
 580      .commentlist > li.bypostauthor {
 581          color: #333;
 582      }
 583      .commentlist > li.bypostauthor .comment-meta {
 584          color: #959595;
 585      }
 586      .commentlist > li:before {
 587          content: none !important;
 588      }
 589  
 590      /* Post Author threaded comments */
 591      .commentlist .children > li.bypostauthor {
 592          background: #fff;
 593          border-color: #ddd;
 594      }
 595      .commentlist .children > li.bypostauthor > article,
 596      .commentlist .children > li.bypostauthor > article .comment-meta {
 597          color: #959595;
 598      }
 599  }