wp-content/themes/twentyseventeen/assets/css/colors-dark.css

   1 /**
   2  * Twenty Seventeen: Dark Color Scheme
   3  *
   4  * See inc/color-patterns.php for dynamic color overrides for the theme.
   5  *
   6  * Colors are ordered from light to dark.
   7  */
   8
   9 .colors-dark button,
  10 .colors-dark input[type="button"],
  11 .colors-dark input[type="submit"],
  12 .colors-dark .entry-footer .edit-link a.post-edit-link {
  13         background-color: #fff;
  14 }
  15
  16 .colors-dark a:hover,
  17 .colors-dark a:active,
  18 .colors-dark .entry-content a:focus,
  19 .colors-dark .entry-content a:hover,
  20 .colors-dark .entry-summary a:focus,
  21 .colors-dark .entry-summary a:hover,
  22 .colors-dark .widget a:focus,
  23 .colors-dark .widget a:hover,
  24 .colors-dark .site-footer .widget-area a:focus,
  25 .colors-dark .site-footer .widget-area a:hover,
  26 .colors-dark .posts-navigation a:focus,
  27 .colors-dark .posts-navigation a:hover,
  28 .colors-dark .comment-metadata a:focus,
  29 .colors-dark .comment-metadata a:hover,
  30 .colors-dark .comment-metadata a.comment-edit-link:focus,
  31 .colors-dark .comment-metadata a.comment-edit-link:hover,
  32 .colors-dark .comment-reply-link:focus,
  33 .colors-dark .comment-reply-link:hover,
  34 .colors-dark .widget_authors a:focus strong,
  35 .colors-dark .widget_authors a:hover strong,
  36 .colors-dark .entry-title a:focus,
  37 .colors-dark .entry-title a:hover,
  38 .colors-dark .entry-meta a:focus,
  39 .colors-dark .entry-meta a:hover,
  40 .colors-dark.blog .entry-meta a.post-edit-link:focus,
  41 .colors-dark.blog .entry-meta a.post-edit-link:hover,
  42 .colors-dark.archive .entry-meta a.post-edit-link:focus,
  43 .colors-dark.archive .entry-meta a.post-edit-link:hover,
  44 .colors-dark.search .entry-meta a.post-edit-link:focus,
  45 .colors-dark.search .entry-meta a.post-edit-link:hover,
  46 .colors-dark .page-links a:focus .page-number,
  47 .colors-dark .page-links a:hover .page-number,
  48 .colors-dark .entry-footer .cat-links a:focus,
  49 .colors-dark .entry-footer .cat-links a:hover,
  50 .colors-dark .entry-footer .tags-links a:focus,
  51 .colors-dark .entry-footer .tags-links a:hover,
  52 .colors-dark .post-navigation a:focus,
  53 .colors-dark .post-navigation a:hover,
  54 .colors-dark .pagination a:not(.prev):not(.next):focus,
  55 .colors-dark .pagination a:not(.prev):not(.next):hover,
  56 .colors-dark .comments-pagination a:not(.prev):not(.next):focus,
  57 .colors-dark .comments-pagination a:not(.prev):not(.next):hover,
  58 .colors-dark .logged-in-as a:focus,
  59 .colors-dark .logged-in-as a:hover,
  60 .colors-dark a:focus .nav-title,
  61 .colors-dark a:hover .nav-title,
  62 .colors-dark .edit-link a:focus,
  63 .colors-dark .edit-link a:hover,
  64 .colors-dark .site-info a:focus,
  65 .colors-dark .site-info a:hover,
  66 .colors-dark .widget .widget-title a:focus,
  67 .colors-dark .widget .widget-title a:hover,
  68 .colors-dark .widget ul li a:focus,
  69 .colors-dark .widget ul li a:hover {
  70         color: #fff;
  71 }
  72
  73 .colors-dark .entry-content a:focus,
  74 .colors-dark .entry-content a:hover,
  75 .colors-dark .entry-summary a:focus,
  76 .colors-dark .entry-summary a:hover,
  77 .colors-dark .widget a:focus,
  78 .colors-dark .widget a:hover,
  79 .colors-dark .site-footer .widget-area a:focus,
  80 .colors-dark .site-footer .widget-area a:hover,
  81 .colors-dark .posts-navigation a:focus,
  82 .colors-dark .posts-navigation a:hover,
  83 .colors-dark .comment-metadata a:focus,
  84 .colors-dark .comment-metadata a:hover,
  85 .colors-dark .comment-metadata a.comment-edit-link:focus,
  86 .colors-dark .comment-metadata a.comment-edit-link:hover,
  87 .colors-dark .comment-reply-link:focus,
  88 .colors-dark .comment-reply-link:hover,
  89 .colors-dark .widget_authors a:focus strong,
  90 .colors-dark .widget_authors a:hover strong,
  91 .colors-dark .entry-title a:focus,
  92 .colors-dark .entry-title a:hover,
  93 .colors-dark .entry-meta a:focus,
  94 .colors-dark .entry-meta a:hover,
  95 .colors-dark.blog .entry-meta a.post-edit-link:focus,
  96 .colors-dark.blog .entry-meta a.post-edit-link:hover,
  97 .colors-dark.archive .entry-meta a.post-edit-link:focus,
  98 .colors-dark.archive .entry-meta a.post-edit-link:hover,
  99 .colors-dark.search .entry-meta a.post-edit-link:focus,
 100 .colors-dark.search .entry-meta a.post-edit-link:hover,
 101 .colors-dark .page-links a:focus .page-number,
 102 .colors-dark .page-links a:hover .page-number,
 103 .colors-dark .entry-footer .cat-links a:focus,
 104 .colors-dark .entry-footer .cat-links a:hover,
 105 .colors-dark .entry-footer .tags-links a:focus,
 106 .colors-dark .entry-footer .tags-links a:hover,
 107 .colors-dark .post-navigation a:focus,
 108 .colors-dark .post-navigation a:hover,
 109 .colors-dark .pagination a:not(.prev):not(.next):focus,
 110 .colors-dark .pagination a:not(.prev):not(.next):hover,
 111 .colors-dark .comments-pagination a:not(.prev):not(.next):focus,
 112 .colors-dark .comments-pagination a:not(.prev):not(.next):hover,
 113 .colors-dark .logged-in-as a:focus,
 114 .colors-dark .logged-in-as a:hover,
 115 .colors-dark a:focus .nav-title,
 116 .colors-dark a:hover .nav-title,
 117 .colors-dark .edit-link a:focus,
 118 .colors-dark .edit-link a:hover,
 119 .colors-dark .site-info a:focus,
 120 .colors-dark .site-info a:hover,
 121 .colors-dark .widget .widget-title a:focus,
 122 .colors-dark .widget .widget-title a:hover,
 123 .colors-dark .widget ul li a:focus,
 124 .colors-dark .widget ul li a:hover {
 125         -webkit-box-shadow: inset 0 0 0 rgba(255, 255, 255, 0), 0 3px 0 rgba(255, 255, 255, 1); /* Equivalant to #fff */
 126         box-shadow: inset 0 0 0 rgba(255, 255, 255, 0), 0 3px 0 rgba(255, 255, 255, 1); /* Equivalant to #fff */
 127 }
 128
 129 .colors-dark .entry-content a,
 130 .colors-dark .entry-summary a,
 131 .colors-dark .widget a,
 132 .colors-dark .site-footer .widget-area a,
 133 .colors-dark .posts-navigation a,
 134 .colors-dark .widget_authors a strong {
 135         -webkit-box-shadow: inset 0 -1px 0 rgba(240, 240, 240, 1); /* Equivalant to #f0f0f0 */
 136         box-shadow: inset 0 -1px 0 rgba(240, 240, 240, 1); /* Equivalant to #f0f0f0 */
 137 }
 138
 139 body.colors-dark,
 140 .colors-dark button,
 141 .colors-dark input,
 142 .colors-dark select,
 143 .colors-dark textarea,
 144 .colors-dark h3,
 145 .colors-dark h4,
 146 .colors-dark h6,
 147 .colors-dark label,
 148 .colors-dark .entry-title a,
 149 .colors-dark.twentyseventeen-front-page .panel-content .recent-posts article,
 150 .colors-dark .entry-footer .cat-links a,
 151 .colors-dark .entry-footer .tags-links a,
 152 .colors-dark .format-quote blockquote,
 153 .colors-dark .nav-title,
 154 .colors-dark .comment-body {
 155         color: #eee;
 156 }
 157
 158 /* Placeholder text color -- selectors need to be separate to work. */
 159 .colors-dark ::-webkit-input-placeholder {
 160         color: #ddd;
 161 }
 162
 163 .colors-dark :-moz-placeholder {
 164         color: #ddd;
 165 }
 166
 167 .colors-dark ::-moz-placeholder {
 168         color: #ddd;
 169 }
 170
 171 .colors-dark :-ms-input-placeholder {
 172         color: #ddd;
 173 }
 174
 175 .colors-dark input[type="text"]:focus,
 176 .colors-dark input[type="email"]:focus,
 177 .colors-dark input[type="url"]:focus,
 178 .colors-dark input[type="password"]:focus,
 179 .colors-dark input[type="search"]:focus,
 180 .colors-dark input[type="number"]:focus,
 181 .colors-dark input[type="tel"]:focus,
 182 .colors-dark input[type="range"]:focus,
 183 .colors-dark input[type="date"]:focus,
 184 .colors-dark input[type="month"]:focus,
 185 .colors-dark input[type="week"]:focus,
 186 .colors-dark input[type="time"]:focus,
 187 .colors-dark input[type="datetime"]:focus,
 188 .colors-dark input[type="datetime-local"]:focus,
 189 .colors-dark input[type="color"]:focus,
 190 .colors-dark textarea:focus,
 191 .bypostauthor > .comment-body > .comment-meta > .comment-author .avatar {
 192         border-color: #eee;
 193 }
 194
 195 .colors-dark input[type="text"]:focus,
 196 .colors-dark input[type="email"]:focus,
 197 .colors-dark input[type="url"]:focus,
 198 .colors-dark input[type="password"]:focus,
 199 .colors-dark input[type="search"]:focus,
 200 .colors-dark input[type="number"]:focus,
 201 .colors-dark input[type="tel"]:focus,
 202 .colors-dark input[type="range"]:focus,
 203 .colors-dark input[type="date"]:focus,
 204 .colors-dark input[type="month"]:focus,
 205 .colors-dark input[type="week"]:focus,
 206 .colors-dark input[type="time"]:focus,
 207 .colors-dark input[type="datetime"]:focus,
 208 .colors-dark input[type="datetime-local"]:focus,
 209 .colors-dark input[type="color"]:focus,
 210 .colors-dark textarea:focus,
 211 .colors-dark button.secondary,
 212 .colors-dark input[type="reset"],
 213 .colors-dark input[type="button"].secondary,
 214 .colors-dark input[type="reset"].secondary,
 215 .colors-dark input[type="submit"].secondary,
 216 .colors-dark a,
 217 .colors-dark .site-title,
 218 .colors-dark .site-title a,
 219 .colors-dark .navigation-top a,
 220 .colors-dark .dropdown-toggle,
 221 .colors-dark .menu-toggle,
 222 .colors-dark .page .panel-content .entry-title,
 223 .colors-dark .page-title,
 224 .colors-dark.page:not(.twentyseventeen-front-page) .entry-title,
 225 .colors-dark .page-links a .page-number,
 226 .colors-dark .comment-metadata a.comment-edit-link,
 227 .colors-dark .comment-reply-link .icon,
 228 .colors-dark h2.widget-title,
 229 .colors-dark mark,
 230 .colors-dark .post-navigation a:focus .icon,
 231 .colors-dark .post-navigation a:hover .icon,
 232 .colors-dark.blog .entry-meta a.post-edit-link,
 233 .colors-dark.archive .entry-meta a.post-edit-link,
 234 .colors-dark.search .entry-meta a.post-edit-link,
 235 .colors-custom .twentyseventeen-panel .recent-posts .entry-header .edit-link {
 236         color: #ddd;
 237 }
 238
 239 .colors-dark h2,
 240 .colors-dark blockquote,
 241 .colors-dark input[type="text"],
 242 .colors-dark input[type="email"],
 243 .colors-dark input[type="url"],
 244 .colors-dark input[type="password"],
 245 .colors-dark input[type="search"],
 246 .colors-dark input[type="number"],
 247 .colors-dark input[type="tel"],
 248 .colors-dark input[type="range"],
 249 .colors-dark input[type="date"],
 250 .colors-dark input[type="month"],
 251 .colors-dark input[type="week"],
 252 .colors-dark input[type="time"],
 253 .colors-dark input[type="datetime"],
 254 .colors-dark input[type="datetime-local"],
 255 .colors-dark input[type="color"],
 256 .colors-dark textarea,
 257 .colors-dark .navigation-top .current-menu-item > a,
 258 .colors-dark .navigation-top .current_page_item > a,
 259 .colors-dark .entry-content blockquote.alignleft,
 260 .colors-dark .entry-content blockquote.alignright,
 261 .colors-dark .taxonomy-description,
 262 .colors-dark .site-info a,
 263 .colors-dark .wp-caption {
 264         color: #ccc;
 265 }
 266
 267 .colors-dark abbr,
 268 .colors-dark acronym {
 269         border-bottom-color: #ccc;
 270 }
 271
 272 .colors-dark h5,
 273 .main-navigation a:hover,
 274 .colors-dark .entry-meta,
 275 .colors-dark .entry-meta a,
 276 .colors-dark .nav-subtitle,
 277 .colors-dark .comment-metadata,
 278 .colors-dark .comment-metadata a,
 279 .colors-dark .no-comments,
 280 .colors-dark .comment-awaiting-moderation,
 281 .colors-dark .page-numbers.current,
 282 .colors-dark .page-links .page-number,
 283 .colors-dark .site-description {
 284         color: #bbb;
 285 }
 286
 287 .colors-dark button:hover,
 288 .colors-dark button:focus,
 289 .colors-dark input[type="button"]:hover,
 290 .colors-dark input[type="button"]:focus,
 291 .colors-dark input[type="submit"]:hover,
 292 .colors-dark input[type="submit"]:focus,
 293 .colors-dark .prev.page-numbers:focus,
 294 .colors-dark .prev.page-numbers:hover,
 295 .colors-dark .next.page-numbers:focus,
 296 .colors-dark .next.page-numbers:hover,
 297 .colors-dark .entry-footer .edit-link a.post-edit-link:focus,
 298 .colors-dark .entry-footer .edit-link a.post-edit-link:hover {
 299         background: #bbb;
 300 }
 301
 302 .colors-dark .social-navigation a:hover,
 303 .colors-dark .social-navigation a:focus {
 304         background: #999;
 305         color: #222;
 306 }
 307
 308 .colors-dark .entry-footer .cat-links .icon,
 309 .colors-dark .entry-footer .tags-links .icon {
 310         color: #666;
 311 }
 312
 313 .colors-dark button.secondary:hover,
 314 .colors-dark button.secondary:focus,
 315 .colors-dark input[type="reset"]:hover,
 316 .colors-dark input[type="reset"]:focus,
 317 .colors-dark input[type="button"].secondary:hover,
 318 .colors-dark input[type="button"].secondary:focus,
 319 .colors-dark input[type="reset"].secondary:hover,
 320 .colors-dark input[type="reset"].secondary:focus,
 321 .colors-dark input[type="submit"].secondary:hover,
 322 .colors-dark input[type="submit"].secondary:focus,
 323 .colors-dark .social-navigation a,
 324 .colors-dark hr {
 325         background: #555;
 326 }
 327
 328 .colors-dark input[type="text"],
 329 .colors-dark input[type="email"],
 330 .colors-dark input[type="url"],
 331 .colors-dark input[type="password"],
 332 .colors-dark input[type="search"],
 333 .colors-dark input[type="number"],
 334 .colors-dark input[type="tel"],
 335 .colors-dark input[type="range"],
 336 .colors-dark input[type="date"],
 337 .colors-dark input[type="month"],
 338 .colors-dark input[type="week"],
 339 .colors-dark input[type="time"],
 340 .colors-dark input[type="datetime"],
 341 .colors-dark input[type="datetime-local"],
 342 .colors-dark input[type="color"],
 343 .colors-dark textarea,
 344 .colors-dark select,
 345 .colors-dark fieldset,
 346 .colors-dark .widget .tagcloud a:hover,
 347 .colors-dark .widget .tagcloud a:focus,
 348 .colors-dark .widget.widget_tag_cloud a:hover,
 349 .colors-dark .widget.widget_tag_cloud a:focus,
 350 .colors-dark .wp_widget_tag_cloud a:hover,
 351 .colors-dark .wp_widget_tag_cloud a:focus {
 352         border-color: #555;
 353 }
 354
 355 .colors-dark button.secondary,
 356 .colors-dark input[type="reset"],
 357 .colors-dark input[type="button"].secondary,
 358 .colors-dark input[type="reset"].secondary,
 359 .colors-dark input[type="submit"].secondary,
 360 .colors-dark .prev.page-numbers,
 361 .colors-dark .next.page-numbers {
 362         background-color: #444;
 363 }
 364
 365 .colors-dark .widget .tagcloud a,
 366 .colors-dark .widget.widget_tag_cloud a,
 367 .colors-dark .wp_widget_tag_cloud a {
 368         border-color: #444;
 369 }
 370
 371 .colors-dark.twentyseventeen-front-page article:not(.has-post-thumbnail):not(:first-child),
 372 .colors-dark .widget ul li {
 373         border-top-color: #444;
 374 }
 375
 376 .colors-dark .widget ul li {
 377         border-bottom-color: #444;
 378 }
 379
 380 .colors-dark pre,
 381 .colors-dark mark,
 382 .colors-dark ins,
 383 .colors-dark input[type="text"],
 384 .colors-dark input[type="email"],
 385 .colors-dark input[type="url"],
 386 .colors-dark input[type="password"],
 387 .colors-dark input[type="search"],
 388 .colors-dark input[type="number"],
 389 .colors-dark input[type="tel"],
 390 .colors-dark input[type="range"],
 391 .colors-dark input[type="date"],
 392 .colors-dark input[type="month"],
 393 .colors-dark input[type="week"],
 394 .colors-dark input[type="time"],
 395 .colors-dark input[type="datetime"],
 396 .colors-dark input[type="datetime-local"],
 397 .colors-dark input[type="color"],
 398 .colors-dark textarea,
 399 .colors-dark select,
 400 .colors-dark fieldset {
 401         background: #333;
 402 }
 403
 404 .colors-dark tr,
 405 .colors-dark thead th {
 406         border-color: #333;
 407 }
 408
 409 .colors-dark .navigation-top,
 410 .colors-dark .main-navigation > div > ul,
 411 .colors-dark .pagination,
 412 .colors-dark .comment-navigation,
 413 .colors-dark .entry-footer,
 414 .colors-dark .site-footer {
 415         border-top-color: #333;
 416 }
 417
 418 .colors-dark .single-featured-image-header,
 419 .colors-dark .navigation-top,
 420 .colors-dark .main-navigation li,
 421 .colors-dark .entry-footer,
 422 .colors-dark #comments {
 423         border-bottom-color: #333;
 424 }
 425
 426 .colors-dark .site-header,
 427 .colors-dark .single-featured-image-header {
 428         background-color: #262626;
 429 }
 430
 431 .colors-dark button,
 432 .colors-dark input[type="button"],
 433 .colors-dark input[type="submit"],
 434 .colors-dark .prev.page-numbers:focus,
 435 .colors-dark .prev.page-numbers:hover,
 436 .colors-dark .next.page-numbers:focus,
 437 .colors-dark .next.page-numbers:hover {
 438         color: #222;
 439 }
 440
 441 body.colors-dark,
 442 .colors-dark .site-content-contain,
 443 .colors-dark .navigation-top,
 444 .colors-dark .main-navigation ul {
 445         background: #222;
 446 }
 447
 448 .colors-dark .entry-title a,
 449 .colors-dark .entry-meta a,
 450 .colors-dark.blog .entry-meta a.post-edit-link,
 451 .colors-dark.archive .entry-meta a.post-edit-link,
 452 .colors-dark.search .entry-meta a.post-edit-link,
 453 .colors-dark .page-links a,
 454 .colors-dark .page-links a .page-number,
 455 .colors-dark .entry-footer a,
 456 .colors-dark .entry-footer .cat-links a,
 457 .colors-dark .entry-footer .tags-links a,
 458 .colors-dark .edit-link a,
 459 .colors-dark .post-navigation a,
 460 .colors-dark .logged-in-as a,
 461 .colors-dark .comment-navigation a,
 462 .colors-dark .comment-metadata a,
 463 .colors-dark .comment-metadata a.comment-edit-link,
 464 .colors-dark .comment-reply-link,
 465 .colors-dark a .nav-title,
 466 .colors-dark .pagination a,
 467 .colors-dark .comments-pagination a,
 468 .colors-dark .widget .widget-title a,
 469 .colors-dark .widget ul li a,
 470 .colors-dark .site-footer .widget-area ul li a,
 471 .colors-dark .site-info a {
 472         -webkit-box-shadow: inset 0 -1px 0 rgba(34, 34, 34, 1); /* Equivalant to #222 */
 473         box-shadow: inset 0 -1px 0 rgba(34, 34, 34, 1); /* Equivalant to #222 */
 474 }
 475
 476 /* Fixes linked images */
 477 .colors-dark .entry-content a img,
 478 .colors-dark .widget a img {
 479         -webkit-box-shadow: 0 0 0 8px #222;
 480         box-shadow: 0 0 0 8px #222;
 481 }
 482
 483 .colors-dark .entry-footer .edit-link a.post-edit-link {
 484         color: #000;
 485 }
 486
 487 .colors-dark .menu-toggle,
 488 .colors-dark .menu-toggle:hover,
 489 .colors-dark .menu-toggle:focus,
 490 .colors-dark .dropdown-toggle,
 491 .colors-dark .dropdown-toggle:hover,
 492 .colors-dark .dropdown-toggle:focus,
 493 .colors-dark .menu-scroll-down,
 494 .colors-dark .menu-scroll-down:hover,
 495 .colors-dark .menu-scroll-down:focus {
 496         background-color: transparent;
 497 }
 498
 499 .colors-dark .gallery-item a,
 500 .colors-dark .gallery-item a:hover,
 501 .colors-dark .gallery-item a:focus,
 502 .colors-dark .widget .tagcloud a,
 503 .colors-dark .widget .tagcloud a:focus,
 504 .colors-dark .widget .tagcloud a:hover,
 505 .colors-dark .widget.widget_tag_cloud a,
 506 .colors-dark .widget.widget_tag_cloud a:focus,
 507 .colors-dark .widget.widget_tag_cloud a:hover,
 508 .colors-dark .wp_widget_tag_cloud a,
 509 .colors-dark .wp_widget_tag_cloud a:focus,
 510 .colors-dark .wp_widget_tag_cloud a:hover,
 511 .colors-dark .entry-footer .edit-link a.post-edit-link:focus,
 512 .colors-dark .entry-footer .edit-link a.post-edit-link:hover {
 513         -webkit-box-shadow: none;
 514         box-shadow: none;
 515 }
 516
 517 @media screen and (min-width: 48em) {
 518
 519         .colors-dark .nav-links .nav-previous .nav-title .icon,
 520         .colors-dark .nav-links .nav-next .nav-title .icon {
 521                 color: #eee;
 522         }
 523
 524         .colors-dark .main-navigation li li:hover,
 525         .colors-dark .main-navigation li li.focus {
 526                 background: #999;
 527         }
 528
 529         .colors-dark .menu-scroll-down {
 530                 color: #999;
 531         }
 532
 533         .colors-dark .main-navigation ul ul {
 534                 border-color: #333;
 535                 background: #222;
 536         }
 537
 538         .colors-dark .main-navigation ul li.menu-item-has-children:before,
 539         .colors-dark .main-navigation ul li.page_item_has_children:before {
 540                 border-bottom-color: #333;
 541         }
 542
 543         .main-navigation ul li.menu-item-has-children:after,
 544         .main-navigation ul li.page_item_has_children:after {
 545                 border-bottom-color: #222;
 546         }
 547
 548         .colors-dark .main-navigation li li.focus > a,
 549         .colors-dark .main-navigation li li:focus > a,
 550         .colors-dark .main-navigation li li:hover > a,
 551         .colors-dark .main-navigation li li a:hover,
 552         .colors-dark .main-navigation li li a:focus,
 553         .colors-dark .main-navigation li li.current_page_item a:hover,
 554         .colors-dark .main-navigation li li.current-menu-item a:hover,
 555         .colors-dark .main-navigation li li.current_page_item a:focus,
 556         .colors-dark .main-navigation li li.current-menu-item a:focus {
 557                 color: #222;
 558         }
 559
 560 }