/* * Dark mode styles. * * The .braillewright-dark class is added to by an inline head script * (see inc/dark-mode.php) when the visitor's system preference is dark or * they have chosen dark mode with the toggle button. * * Generic element overrides use :where() to keep zero added specificity so * the more specific header/menu rules in style.css (which are already dark * chrome in both schemes) continue to win. */ /***** Toggle button (both color schemes) *****/ /* Mirrors the scroll-to-top button, anchored to the opposite corner */ .dark-mode-toggle { position: fixed; bottom: 0; left: 0; z-index: 9; width: 60px; height: 45px; background: #242424; border: none; color: #fff; -webkit-transition: background 0.2s; transition: background 0.2s; } .dark-mode-toggle:hover { cursor: pointer; background: #666666; } .dark-mode-toggle:focus { outline: 2px solid #fff; outline-offset: -5px; } .dark-mode-toggle i { font-size: 21px; } /* scroll-to-top moves to the left corner in RTL, so swap corners */ [dir=rtl] .dark-mode-toggle { left: auto; right: 0; } /***** Dark scheme *****/ html.braillewright-dark { color-scheme: dark; } html.braillewright-dark body { background: #1A1A1A; color: #E0E0E0; } /* Links */ html.braillewright-dark :where(a, a:link, a:visited) { color: #E0E0E0; } html.braillewright-dark :where(a:hover, a:active, a:focus) { color: #ABABAB; } /* Content cards */ html.braillewright-dark .entry > article, html.braillewright-dark .sidebar-primary .widget, html.braillewright-dark .main .sidebar-before-main-content, html.braillewright-dark .sidebar-before-main-content, html.braillewright-dark .search-bottom, html.braillewright-dark .pagination, html.braillewright-dark .comment-pagination, html.braillewright-dark .comments-closed, html.braillewright-dark .comments-number, html.braillewright-dark li.comment > article, html.braillewright-dark li.pingback > article, html.braillewright-dark .comment-respond, html.braillewright-dark #disqus_thread { background: #242424; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6); } /* Markup styles */ html.braillewright-dark pre { background: #1E1E1E; border-color: #333333; } html.braillewright-dark code { background: #333333; } html.braillewright-dark blockquote { border-left-color: #E0E0E0; } /* Tables */ html.braillewright-dark td, html.braillewright-dark th { border-color: #666666; } html.braillewright-dark .wp-block-table thead { background: #333333; } html.braillewright-dark .wp-block-table td, html.braillewright-dark .wp-block-table th { border-color: #3A3A3A; } html.braillewright-dark .wp-block-table.is-style-stripes thead { background: none; } /* Forms */ html.braillewright-dark input[type=text], html.braillewright-dark input[type=email], html.braillewright-dark input[type=password], html.braillewright-dark input[type=number], html.braillewright-dark input[type=search], html.braillewright-dark input[type=tel], html.braillewright-dark input[type=url], html.braillewright-dark textarea { background: #333333; color: #E0E0E0; border-color: #555555; } html.braillewright-dark input[type=text]:focus, html.braillewright-dark input[type=email]:focus, html.braillewright-dark input[type=password]:focus, html.braillewright-dark input[type=number]:focus, html.braillewright-dark input[type=search]:focus, html.braillewright-dark input[type=tel]:focus, html.braillewright-dark input[type=url]:focus, html.braillewright-dark textarea:focus { background: #1A1A1A; border-color: #E0E0E0; outline-color: #E0E0E0; } html.braillewright-dark ::-webkit-input-placeholder { color: #9E9E9E; } html.braillewright-dark :-moz-placeholder { color: #9E9E9E; } html.braillewright-dark ::-moz-placeholder { color: #9E9E9E; } html.braillewright-dark :-ms-input-placeholder { color: #9E9E9E; } html.braillewright-dark input[type=submit] { color: #E0E0E0; border-color: #E0E0E0; } html.braillewright-dark input[type=submit]:hover, html.braillewright-dark input[type=submit]:active, html.braillewright-dark input[type=submit]:focus { background: #E0E0E0; color: #1A1A1A; } /* Sticky post marker */ html.braillewright-dark .sticky-status, html.braillewright-dark .entry.sticky.has-post-thumbnail .sticky-status { background: #4D4D4D; } /* Read more button */ html.braillewright-dark .more-link { border-color: #E0E0E0; } html.braillewright-dark .more-link:hover, html.braillewright-dark .more-link:active, html.braillewright-dark .more-link:focus { color: #1A1A1A; background: #E0E0E0; } /* Post tags */ html.braillewright-dark .post-tags a { border-color: #E0E0E0; } html.braillewright-dark .post-tags a:hover, html.braillewright-dark .post-tags a:active, html.braillewright-dark .post-tags a:focus { background: #E0E0E0; color: #1A1A1A; } /* Comments */ html.braillewright-dark .comment-list .children { border-left-color: #4D4D4D; } html.braillewright-dark li.comment.bypostauthor > article, html.braillewright-dark li.pingback.bypostauthor > article { border-color: #4D4D4D; } /* Pagination */ html.braillewright-dark .pagination a.current, html.braillewright-dark .pagination span.current { background: #3A3A3A; } /* Calendar widget */ html.braillewright-dark .widget_calendar thead { background: #3A3A3A; } html.braillewright-dark .widget_calendar th, html.braillewright-dark .widget_calendar tr, html.braillewright-dark .widget_calendar td { border-color: #4D4D4D; } html.braillewright-dark .widget_calendar #today { background: #E0E0E0; color: #1A1A1A; } html.braillewright-dark .widget_calendar #prev a:hover, html.braillewright-dark .widget_calendar #prev a:active, html.braillewright-dark .widget_calendar #prev a:focus, html.braillewright-dark .widget_calendar #next a:hover, html.braillewright-dark .widget_calendar #next a:active, html.braillewright-dark .widget_calendar #next a:focus, html.braillewright-dark .widget_calendar .pad a:hover, html.braillewright-dark .widget_calendar .pad a:active, html.braillewright-dark .widget_calendar .pad a:focus { background: #3A3A3A; } /* RSS widget */ html.braillewright-dark .widget_rss .rssSummary { color: #9E9E9E; } /* bbPress */ html.braillewright-dark span.bbp-admin-links, html.braillewright-dark span.bbp-admin-links a, html.braillewright-dark .bbp-reply-header a.bbp-reply-permalink { color: #9E9E9E; } /* WooCommerce */ html.braillewright-dark .woocommerce-account .woocommerce { border-color: #333333; }