github-blog-dark.user.css

/* ==UserStyle==
@name        GitHub Blog Dark
@version     1.0.6
@namespace   StylishThemes
@author      StylishThemes
@description Dark theme for Github blog
@homepageURL https://github.com/StylishThemes/GitHub-Blog-Dark
@supportURL  https://github.com/StylishThemes/GitHub-Blog-Dark/issues
@updateURL   https://raw.githubusercontent.com/StylishThemes/GitHub-Blog-Dark/master/github-blog-dark.user.css
@license     CC-BY-SA-4.0
@preprocessor uso
@advanced color main-color "Main color" #4f8cc9
@advanced dropdown bg-choice "Background" {
  crosshafgh "Cross-Hatch" <<<EOT
  url(https://camo.githubusercontent.com/5b8e4cd1a5ce69b6affa17ebd8e4aee00c147618/68747470733a2f2f7374796c6973687468656d65732e6769746875622e696f2f4769744875622d4461726b2f696d616765732f6261636b67726f756e64732f62672d63726f737368617463682e706e67) EOT;
  uniform "Uniform Tile" <<<EOT
  url(https://camo.githubusercontent.com/f83a9a60a2c64be0c88833ccb436e32a458cd2ce/68747470733a2f2f7374796c6973687468656d65732e6769746875622e696f2f4769744875622d4461726b2f696d616765732f6261636b67726f756e64732f62672d74696c652d756e69666f726d2e706e67) EOT;
  random "Random Tile" <<<EOT
  url(https://camo.githubusercontent.com/3beb850d8069e424480199a09899030c9e58e85f/68747470733a2f2f7374796c6973687468656d65732e6769746875622e696f2f4769744875622d4461726b2f696d616765732f6261636b67726f756e64732f62672d74696c65312e706e67) EOT;
  custom "Custom" <<<EOT
  var(--bg-custom) EOT;
  none "None" <<<EOT
  none EOT;
}
@advanced text bg-custom "Custom Background" "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAAAAABURb1YAAAFnklEQVR4AWWXCY4cwXbE6h4JMhCvMPc/ov+3Ox9QsLCGpKlFHILd+UQ559AGDkBSFXWmomonqkL/XuUcIPUcONjHCJyE36KaqNiaRnVCG9TGpgIU9hIfohCBVGj24ammo04lU3Fy0NZDAyZi5AElHjgEGlRbG1WjraIt7TmADQkAaoEHsOXAAaeqat9RVTqjosyEH5W+DQCQt8BzIJMfXJI3e5tGRefSlRn3NrO3scnvNl26FN5RITGNfjm3GM/+FhQgnlQeImC+dEm8rzHVTNGL9EADVsTAIfGJBziRy7RlmcZU1IYpHIj+4JrWym8/XSwzompmFNVOFdTOAAfs61KZ6eXcp57fykQUOxNBmTesz2HpCnCg3UV/bA7VRpWGNqKtrYLTs0ilCjgxiZxjeLC5dDPBFn4Pn2ja6BRUL10DTgET4Focq8rn8casxV4E5tIlZvytqtfivCOKZrqc38G7egnkXecyPZdzubc57VtUnbfL+a0u3b1N3d9Mci7cKocHoh3xihLQ6fXUlgTOOfVkXSUFINoWHhqxE23RTmCqtoEJaITkIrUCkU9fnqpqm+40VSXS3CLaSzfGBb4rPuOSfN0ylLve6/jpcrbL2dTlnOdv5AamKjLvLN1XruMNS/cul/hx8twKpKYRaE2DOp8+c+lW7uVXVQ7Vx0x1G3HXjNocsHCac7NbWc6egwJVHu2kRTVNC2pqv2U4XNsv5/yWJlV9+NJ1C7xluInlcr7rK+Kg+qy7onQqgnbi7UHcS3qXjdw3bO5tumycYlVssMI5EXXpRnatPK362KodtVU60cm+eQT10sVLFwJYlVaf7UGSoi5dQF3DvnTX3UvXTPO8quKH7jsXhm/PxfKWZXqBM5sS33kmKtC31Q05fI095i5IPpyzRXqSy1Sr17p1F7NE8vMtnNbLpVVtk8c0OrfF0sKxHnIpYgHW4puMomTz8mgmrSjpvrxhX97l7LqLpl7bW9BH9/MNzF8XwRqL8/m7c30eFYV5VX3QTquK06XbLt16F4ks+8Z9m6gPtpcuk3OvibCekng4lzMHi9MoqZmKj9tdbQCbc7bcEA+oEJduRNNL1waf1tuI9MDBUK8t3k9uFz3rrqadO9Ln9TL/ezlwDvky3TW7ZmXfpc77TN0yhOXnP939LvVDV9s+tgLTm0TqYd1lea3PRFuVjLa562HdPbCfascGrvO3DMeIATVqVRO8vfHrbupdfo1dzlXUdkVLZsS1mLPG3rWcl+4B1l1537h0VXzU1tyLG7cCu+LSrSqo06hocy3WCcil65qHDbuEYzQN2HpT3jFt9LEFvHTP1nxbXOEkbhkKmd+6BTfVZ/I143z/Fyz6Za92o0I7I6gzfeYAHPwy/Rb43L9TLtMt8CtwW1xvQvbR1g9n7qJRNN1kdxcdH7cM58Szxq679MdLOhE72t6VNEpHHkzwRyjBcGth+dE99pIkVbWaEWmvnQ8Yl7Mp59zpRWXdNo6odrO754Zzvxf/010nP7onb1TR+bgbVPB9PcADJvH/043Kvk0UzLRxQ6UiaeTAcyxYl2lyrrvZv8v2wE7U1uVcST0821jJeIDKWuyxiqnuko7q3+zJYXJ46nV3D67EyL+lQ9F2qkr+3kUafQpwYE8T329p6y7OX1TF97fQv/c+l87zj7Hsgpig4qRLd9fMPs74rLGyCzRbhmVqpy7nqvPmTD1gvKe7b2U8u1QzmtuDuEtbgT3c8QBJveo6cueFkUwv59nVmfFw1jl4/unuOT9qERV76ers8n23z/c8/Xy7a4lwwLplmGusbRp33Up13+ZDN3KPxNVMhY62vUQyRTse6+cKHtZYjIfDh260Cjbb3Vy6R8H8SMBzqSwrsB1UTacoknlnOb8V4JD9Njfpwz/fHjpBUeevcAtcl65sqXPX9D87RUTLc/dfOgAAAABJRU5ErkJggg==)"
@advanced dropdown bg-options "Background image type" {
  Tiled "Tiled" <<<EOT
  background-repeat: repeat !important;
  background-size: auto !important;
  background-position: left top !important; EOT;
  Fit window size "Fit window size" <<<EOT
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center top !important; EOT;
}
@advanced dropdown bg-attachment "Background image attachment" {
  Scroll "Scroll" <<<EOT
  scroll EOT;
  Fixed "Fixed" <<<EOT
  fixed EOT;
}
==/UserStyle== */
@-moz-document regexp("https://github\.blog\/.*$") {
  :root {
    --main-color: /*[[main-color]]*/;
    --bg-custom: /*[[bg-custom]]*/;
    --bg-img: /*[[bg-choice]]*/;
    --bg-color-0: #111;
    --bg-color-1: #181818;
    --bg-color-2: #222;
    --bg-color-3: rgba(34, 34, 34, .533);
    --bg-color-4: #444;
    --bc-color-2: #282828;
    --bc-color-3: #333;
    --bc-color-5: #555;
    --bl-color-1: #182030;
    --bl-color-2: #246;
    --rd-color-1: #380000;
    --gr-color-1: #002800;
    --fg-color-9: #999;
    --fg-color-b: #bbb;
    --fg-color-c: #ccc;
    --fg-color-d: #ddd;
    --fg-color-e: #eee;
  }
  body {
    background-color: var(--bg-color-1) !important;
    background-image: var(--bg-img) !important;
    background-clip: border-box !important;
    background-origin: padding-box !important;
    background-attachment: /*[[bg-attachment]]*/ !important;
    /*[[bg-options]]*/
    color: var(--fg-color-e) !important;
  }
  ::placeholder {
    color: var(--bc-color-5);
    opacity: 1;
  }
  .universe-compact-list li {
    border: 1px solid var(---bc-color-5);
    background-color: var(--bc-color-2);
  }
  a, .post-list__item-title:hover, .post-list__item-title a:hover,
  .post-item__title a:hover, .post__categories a:hover, .heading-link:focus,
  .heading-link:hover, .primary-nav .menu-item a:focus,
  .primary-nav .menu-item a:hover, .category-block:hover .category-block__title,
  .category-block__sub-cat a:hover, .post-item__date a:focus,
  .post-item__date a:hover, .featured-post__title a:hover {
    color: var(--main-color);
    background-color: transparent;
    opacity: .9;
  }
  .category-block:hover,
  .post__social-share .social-links__item a:hover .social-links__text {
    color: var(--main-color);
  }
  .link-gray:hover, .hero-post__title a:hover, .post-list__item-title:hover,
  .post-list__item-title a:hover, .post-item__title a:hover,
  .featured-post__title a:hover, .category-block:hover h4,
  .post-item__date a:hover {
    color: var(--main-color) !important;
  }
  .category-block:hover .category-block__title .icon {
    fill: var(--main-color) !important;
  }
  a:hover, a:visited, a:active, a.link-gray:hover, a.link-gray:active,
  .btn:not(.btn-outline):hover, .hover-grow img {
    opacity: 1;
  }
  svg {
    fill: currentColor;
  }
  .icon-mark-github.icon, .btn-outline:hover .icon-arrow-skinny-right.icon,
  .icon-arrow-skinny-right.icon {
    fill: var(--fg-color-c);
  }
  .category-panel__next[disabled] .icon, .category-panel__prev[disabled] .icon {
    fill: var(--bc-color-5);
  }
  .category-panel__next .icon, .category-panel__prev .icon {
    fill: var(--fg-color-b);
  }
  .all-posts__view-more .icon, .header-search .search-submit .icon,
  .search-form__button .icon {
    fill: var(--main-color);
  }
  select:focus, button:focus {
    border-color: var(--main-color) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 2px var(--main-color) !important;
    outline-color: var(--main-color) !important;
  }
  .form-control.focus, .form-control:focus, .form-select.focus,
  .form-select:focus {
    border-color: var(--main-color);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 2px var(--main-color);
  }
  /* background colors */
  .category__list::after, .search-form .search-field,
  a[style*="background-color: #ffffff;"] {
    background: transparent !important;
  }
  .all-posts, .all-posts__container, .Box {
    background-color: var(--bg-color-1) !important;
  }
  .bg-gray, .header-search, .author-biography {
    background-color: var(--bg-color-2) !important;
  }
  .primary-nav .sub-menu {
    background: var(--bc-color-2);
  }
  .bg-gray-light {
    background-color: var(--bg-color-3) !important;
  }
  .category__list a::before {
    background-color: var(--bg-color-3) !important;
  }
  .author__hero::after {
    background: var(--bc-color-3);
  }
  .form-control, .form-select {
    background-color: var(--bg-color-1);
    border: 1px solid var(--bg-color-4);
    color: var(--fg-color-c);
    box-shadow: inset 0 1px 2px var(--bg-color-3);
  }
  .custom-select select {
    background: var(--bg-color-2);
    color: var(--fg-color-e);
    border: 1px solid var(--bg-color-4);
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
  }
  /* blue */
  .cta-global__primary-bg, div[style="background-color: #032f62;"] {
    background-color: var(--bl-color-1) !important;
  }
  .post__content .chat .message.self {
    background-color: var(--bl-color-1);
    outline: 1px solid var(--bl-color-2);
  }
  .post__content .chat .message.robot {
    outline: 1px solid var(--bg-color-4);
  }
  .underline-dash {
    background-image: linear-gradient(90deg, var(--bc-color-5) 50%, hsla(0, 0%, 100%, 0) 0);
  }
  /* border colors */
  .primary-nav .sub-menu::after, .primary-nav .sub-menu::before,
  .header-search::before {
    border-bottom-color: var(--bc-color-2) !important;
  }
  .markdown-body h1, .markdown-body h2, .search-form .search-field {
    border-bottom: 1px solid var(--bg-color-4);
  }
  .category__list, .cl-post-feed .all-posts .post-item {
    border-left-color: var(--bg-color-4) !important;
  }
  /* this is a border color despite being bg */
  .cl-post-feed .all-posts .post-item::before, .markdown-body hr {
    background: var(--bc-color-5);
  }
  .cl-post-feed .all-posts .post-item:last-child::after {
    background: var(--bc-color-4);
  }
  /* border end */
  .text-gray-light, .category-panel__prev:not([disabled]) .icon,
  .category-panel__next:not([disabled]) .icon {
    color: var(--fg-color-d) !important;
  }
  h1, h2, h3, h4, h5, h6, .post-item__excerpt, .search-form .search-field {
    color: var(--fg-color-c) !important;
  }
  .text-gray, .link-gray, .markdown-body p, .markdown-body li, .author-block,
  .heading-link, .post-item__date, .post__meta, .search-form__fitlers-label,
  .author-biography__username {
    color: var(--fg-color-b) !important;
  }
  .category-block__sub-cat a, .post__categories a, .post-item__categories a,
  .post__social-share .social-links__text {
    color: var(--fg-color-b);
  }
  .text-white, .post-list__item-title, .post-list__item-title a,
  .hero-post__title a, .post-item__title a, .featured-post__title a {
    color: var(--fg-color-e) !important;
  }
  .site-header a {
    color: var(--fg-color-e);
  }
  .category-panel__prev[disabled] .icon, .category-panel__next[disabled] .icon {
    color: var(--bc-color-5) !important;
  }
  .post-item__date a, .category__list a {
    color: inherit !important;
  }
  .btn-outline {
    background: transparent !important;
    border-color: var(--main-color) !important;
    color: var(--main-color) !important;
  }
  .btn-outline.selected, .btn-outline:active, .btn-outline:hover,
  [open] > .btn-outline {
    background: var(--main-color) !important;
    border-color: var(--bc-color-3) !important;
    color: var(--fg-color-e) !important;
  }
  input:not(.search-field) {
    background-color: var(--bg-color-0) !important;
    color: var(--fg-color-d) !important;
    border-color: var(--bc-color-3) !important;
  }
  .icon-logo-github, .site-footer__social-list .icon {
    filter: invert(80%) !important;
  }
  .category-hero__bg img, img.category-panel__img,
  .category-featured-posts .featured-post__image, .post-featured__image {
    filter: brightness(80%);
    mix-blend-mode: exclusion;
  }
  .category-featured-posts .featured-post__image:hover,
  .post-featured__image:hover {
    filter: none;
  }
  .all-posts__container::before, .post__header::before,
  .search-block__container::before, .author-hero__title::before {
    filter: brightness(60%);
  }
  .header-search__toggle.btn-outline {
    background-color: transparent !important;
    color: var(--main-color) !important;
  }
  .markdown-body .highlight pre, .markdown-body pre {
    background-color: var(--bg-color-0);
  }
  .hljs {
    color: var(--fg-color-c);
    background: var(--bg-color-0);
  }
  .hljs-deletion {
    background: var(--rd-color-1);
  }
  .hljs-addition {
    background: var(--gr-color-1);
  }
  .pagination a, .pagination em, .pagination span {
    color: var(--main-color);
    background: var(--bg-color-1);
    border: 1px solid var(--bc-color-5);
  }
  .pagination a:focus, .pagination a:hover, .pagination em:focus,
  .pagination em:hover, .pagination span:focus, .pagination span:hover {
    background-color: var(--bg-color-2);
    border-color: var(--bc-color-5);
  }
  .pagination .current, .pagination .current:hover {
    color: var(--fg-color-e);
    background-color: var(--main-color);
    border-color: var(--main-color);
  }
  .pagination .disabled, .pagination .disabled:hover, .pagination .gap,
  .pagination .gap:hover {
    color: var(--fg-color-9);
    background-color: var(--bg-color-1);
    opacity: .7;
  }
  /* category img fixes protect retinas, enabled */
  img[src*="BlogHeaders_Aligned_ENGINEERING_1008x602_x2.png"],
  img[src*="BlogHeaders_Aligned_CHANGELOG_1008x602_x2.png"],
  img[src*="BlogHeaders_Aligned_EDUCATION_1008x602_x2.png"],
  img[src*="BlogHeaders_Aligned_COMMUNITY_1008x602_x2.png"],
  img[src*="BlogHeaders_Aligned_INSIGHTS_1008x602_x2.png"],
  img[src*="BlogHeaders_Aligned_COMPANY_1008x602_x2.png"],
  img[src*="BlogHeaders_Aligned_POLICY_1008x602_x2.png"],
  img[src*="BlogHeaders_Aligned_EDITOR-TOOLS_1008x602_x2.png"],
  img[src*="BlogHeaders_Aligned_PRODUCT_1008x602_x2.png"],
  img[src*="security-2016-1204.png"], img[src*="Community@2x.png"],
  img[src*="Company@2x-2.png"], img[src*="Engineering@2x"],
  img[src*="Enterprise@2x-2.png"], img[src*="Product@2x.png"],
  img[src*="company-twitter"], img[src*="see-what-new-github-enterprise"] {
    filter: invert(1) hue-rotate(180deg) contrast(80%);
    mix-blend-mode: exclusion;
  }
}