wp-content/themes/twentyeleven/colors/dark.css

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