☰

Habrahabr Darkness

Habr dark theme.

  1. /* ==UserStyle==
  2. @name         Habrahabr Darkness
  3. @author       Val Saven (https://valsaven.com)
  4. @namespace    github.com/valsaven/userstyles
  5. @supportURL   https://github.com/valsaven/userstyles/issues
  6. @description  Habr dark theme.
  7. @version      2.0.31
  8. @license      MIT
  9. ==/UserStyle== */
  10.  
  11. @namespace url(http://www.w3.org/1999/xhtml);
  12. @namespace svg url(http://www.w3.org/2000/svg);
  13. @-moz-document url-prefix("http://habr.com"),
  14.   url-prefix("https://habr.com") {
  15.   /* Background */
  16.   .tm-block,
  17.   .tm-company-card,
  18.   .tm-company-profile-card,
  19.   .tm-button-follow__button,
  20.   .tm-page-article__body,
  21.   .tm-articles-list__item,
  22.   .tm-article-presenter__origin,
  23.   .tm-data-icons.tm-page-article__counters-panel,
  24.   .tm-user-card,
  25.   .tm-comment-form,
  26.   .tm-comments-wrapper__wrapper,
  27.   .tm-comment-form__editor,
  28.   .tm-article-presenter__body,
  29.   .tm-article-sticky-panel,
  30.   .tm-article-sticky-panel__icons,
  31.   .tm-placeholder-promo,
  32.   .tm-placeholder-inset,
  33.   .publication-type-label {
  34.     background-color: #2e3436 !important;
  35.   }
  36.   .tm-article-snippet__hubs-container::after,
  37.   .tm-publication-hubs__container::after {
  38.     background: none;
  39.   }
  40.   /* Text */
  41.   .tm-company-card__description,
  42.   .tm-article-snippet__title.tm-article-snippet__title_h1,
  43.   .article-formatted-body.article-formatted-body_version-1,
  44.   .article-formatted-body.article-formatted-body_version-2,
  45.   .tm-comment-form__editor,
  46.   .tm-article-poll__header,
  47.   .tm-article-poll__answer-label,
  48.   .tm-separated-list__title,
  49.   .tm-navigation-dropdown__option-button,
  50.   .article-formatted-body code,
  51.   .article-formatted-body pre code,
  52.   .tm-comment__body-content code {
  53.     color: #b3b3b3 !important;
  54.   }
  55.   .article-formatted-body pre,
  56.   .tm-comment__body-content pre {
  57.     border-color: #2e3436 !important;
  58.   }
  59.   /* Images */
  60.   .article-formatted-body img {
  61.     background-color: #b3b3b3 !important;
  62.   }
  63.   /* Links */
  64.   .tm-company-card__name,
  65.   .tm-news-block__title-link.tm-news-block__title,
  66.   .tm-article-snippet__title-link {
  67.     color: #2f93d0 !important;
  68.   }
  69.   /* Links: visited */
  70.   .tm-company-card__name:visited,
  71.   .tm-news-block__title-link.tm-news-block__title:visited,
  72.   .tm-article-snippet__title-link:visited {
  73.     color: #548eaa !important;
  74.   }
  75.   /* Links: hover */
  76.   .tm-company-card__name:hover,
  77.   .tm-news-block__title-link.tm-news-block__title:hover,
  78.   .tm-article-snippet__title-link:hover {
  79.     color: #548eaa !important;
  80.   }
  81.   .tm-article-comments__article-snippet,
  82.   .tm-comment__body-content code,
  83.   .tm-comment__body-content pre {
  84.     background-color: #272c2d !important;
  85.   }
  86.   .tm-notice {
  87.     background-color: #2e3436 !important;
  88.   }
  89.   .tm-comment__body-content,
  90.   .tm-notice__content {
  91.     color: #b3b3b3 !important;
  92.   }
  93.   .tm-comment__body-content_v2 .embed__caption-link {
  94.     color: #2f93d0 !important;
  95.   }
  96.   .tm-comment__body-content_v2 .embed__caption-link:visited {
  97.     color: #548eaa !important;
  98.   }
  99.   .tm-comment__body-content_v2 .embed__caption-link:hover {
  100.     color: #548eaa !important;
  101.   }
  102.   /* Background */
  103.   .tm-page.tm-my-feed-page,
  104.   .tm-page__wrapper,
  105.   .tm-page-width,
  106.   .tm-user-page__placeholder,
  107.   .tm-placeholder_categories,
  108.   .tm-companies__placeholder,
  109.   .tm-placeholder_article,
  110.   .tm-placeholder__company-avatar,
  111.   .tm-placeholder__line,
  112.   .tm-placeholder-promo__image,
  113.   .loads,
  114.   .tm-project-block,
  115.   .tm-fieldset__header,
  116.   .tm-comment__body-content details,
  117.   .tm-comment__body-content_v2 details,
  118.   .tm-comment__body-content_v2 .mention,
  119.   .tm-comment-navigation__block,
  120.   .tm-layout__container,
  121.   .tm-stories-card-empty__image,
  122.   .tm-stories-card-empty__title-block,
  123.   .article-formatted-body code,
  124.   .article-formatted-body pre,
  125.   .article-formatted-body_version-2 details,
  126.   .article-formatted-body_version-2 .mention,
  127.   .tm-article-card-list__item,
  128.   .news-block-item-placeholder__header,
  129.   .news-block-item-placeholder__meta,
  130.   .tm-user-votes-comments__empty,
  131.   .tm-navigation-dropdown__option-button:hover {
  132.     background-color: #272c2d !important;
  133.   }
  134.   .tm-header,
  135.   .tm-base-layout__header.tm-base-layout__header_is-sticky,
  136.   .tm-layout,
  137.   .tm-section-name,
  138.   .tm-page__top,
  139.   .tm-navigation-search__input,
  140.   .tm-pagination,
  141.   .tm-navigation-filters__button,
  142.   .tm-navigation-filters__options,
  143.   .tm-navigation-sorting,
  144.   .tm-hubs-list__sorting-panel,
  145.   .tm-hubs-list,
  146.   .tm-users-list__sorting-panel,
  147.   .tm-users-list,
  148.   .tm-companies__sorting-panel,
  149.   .tm-companies,
  150.   .tm-company-card__branding-placeholder,
  151.   .tm-company-article__profile-card,
  152.   .tm-article-card-list,
  153.   .tm-article-comments-counter-button,
  154.   .tm-article-comments-counter-link__link_button-style,
  155.   .tm-my-feed-page__settings-button,
  156.   .tm-rss-button,
  157.   .tm-navigation-panel,
  158.   .tm-dropdown__body,
  159.   .tm-user-charge,
  160.   .tm-footer,
  161.   .tm-footer-menu,
  162.   .tm-page__info,
  163.   .tm-popup-page-settings__form,
  164.   .tm-user-notification-base,
  165.   .user-notifications-dropdown__footer,
  166.   .tm-suggest-button,
  167.   .tm-hub-card,
  168.   .tm-editor__wrapper,
  169.   .tm-editor__bottom,
  170.   .tm-base-layout__header,
  171.   .similar-and-daily__tab-view {
  172.     background-color: #2e3436 !important;
  173.   }
  174.   .tm-comment__header_is-by-op {
  175.     background-color: #254203 !important;
  176.   }
  177.   .tm-comment__header_is-new {
  178.     background-color: #222436 !important;
  179.   }
  180.   .tm-pagination__navigation-link:first-child::after,
  181.   .tm-pagination__navigation-link:last-child::before {
  182.     background: none;
  183.   }
  184.   /* Text */
  185.   .tm-section-name__text,
  186.   .tm-navigation-filters__button,
  187.   .tm-navigation-filters__options,
  188.   .tm-navigation-sorting__row-option,
  189.   .tm-navigation-panel,
  190.   .tm-dropdown__body,
  191.   .tm-user-item__name,
  192.   .tm-project-block-items__property-item,
  193.   .tm-page__info,
  194.   .tm-page-settings-form__title,
  195.   .tm-input-radio-labeled__label,
  196.   .tm-labeled-checkbox__label,
  197.   .user-notifications-dropdown__title,
  198.   .tm-hub-card__name.tm-hub-card__name_variant-base,
  199.   .tm-hub-card__description.tm-hub-card__description_variant-base,
  200.   .tm-hub__title,
  201.   .hljs,
  202.   .tm-comments-wrapper__title,
  203.   .tm-article-body__tags-title,
  204.   .ProseMirror > h1,
  205.   .ProseMirror .node__inner p,
  206.   .tm-block__body,
  207.   .tm-publication__bottom-time,
  208.   .tm-user-karma-reset__title {
  209.     color: #b3b3b3 !important;
  210.   }
  211.   /* Links */
  212.   .tm-pagination__page,
  213.   .tm-main-menu__item_active,
  214.   .tm-user-menu__menu-link,
  215.   .tm-user-info__username,
  216.   .tm-news-block-item__title-link,
  217.   .tm-project-block__title-link,
  218.   .tm-project-block-items__detail.tm-project-block-items__title,
  219.   .tm-docs__link_sidebar,
  220.   .user-notifications-dropdown__show-all,
  221.   .tm-companies-contribution-block__company-name,
  222.   .tm-user-snippet__title,
  223.   .tm-most-reading-block__promo-post,
  224.   .tm-company-snippet__title {
  225.     color: #2f93d0 !important;
  226.   }
  227.   /* Links: visited */
  228.   .tm-pagination__page:visited,
  229.   .tm-user-menu__menu-link:visited,
  230.   .tm-user-info__username:visited,
  231.   .tm-news-block-item__title-link:visited,
  232.   .tm-project-block__title-link:visited,
  233.   .tm-project-block-items__detail.tm-project-block-items__title:visited,
  234.   .tm-docs__link_sidebar:visited,
  235.   .user-notifications-dropdown__show-all:visited,
  236.   .tm-companies-contribution-block__company-name:visited,
  237.   .tm-user-snippet__title:visited,
  238.   .tm-most-reading-block__promo-post:visited,
  239.   .tm-company-snippet__title:visited {
  240.     color: #548eaa;
  241.   }
  242.   /* Links: hover */
  243.   .tm-pagination__page:hover,
  244.   .tm-user-menu__menu-link:hover,
  245.   .tm-user-info__username:hover,
  246.   .tm-news-block-item__title-link:hover,
  247.   .tm-project-block__title-link:hover,
  248.   .tm-project-block-items__detail.tm-project-block-items__title:hover,
  249.   .tm-docs__link_sidebar:hover,
  250.   .user-notifications-dropdown__show-all:hover,
  251.   .tm-companies-contribution-block__company-name:hover,
  252.   .tm-user-snippet__title:hover,
  253.   .tm-most-reading-block__promo-post:hover,
  254.   .tm-company-snippet__title:hover {
  255.     color: #548eaa;
  256.   }
  257.   /* Article header */
  258.   .tm-title {
  259.     color: #b3b3b3 !important;
  260.   }
  261.   /* Other news */
  262.   .tm-title__link {
  263.     color: #b3b3b3 !important;
  264.   }
  265.   /* Style fixes */
  266.   .tm-suggest-button:hover {
  267.     background-color: #7aa600 !important;
  268.   }
  269.   /* Scrollbar */
  270.   ::-webkit-scrollbar {
  271.     width: 14px;
  272.   }
  273.   ::-webkit-scrollbar-track {
  274.     background: #b3b3b3; /* color of the tracking area */
  275.   }
  276.   ::-webkit-scrollbar-thumb {
  277.     background-color: #2e3436; /* color of the scroll thumb */
  278.     border: 3px solid #b3b3b3; /* creates padding around scroll thumb */
  279.   }
  280.   /* Backgroud */
  281.   .tm-block.tm-block_spacing-bottom,
  282.   .tm-block.tm-block_spacing-around {
  283.     background-color: #2e3436 !important;
  284.   }
  285.   /* Links */
  286.   .tm-companies-rating__name,
  287.   .tm-article-title__link,
  288.   .tm-hubs-block__hub-title,
  289.   .tm-widget-news__link,
  290.   .tm-widget-twitter__name {
  291.     color: #2f93d0 !important;
  292.   }
  293.   /* Links: visited */
  294.   .tm-companies-rating__name:visited,
  295.   .tm-article-title__link:visited,
  296.   .tm-hubs-block__hub-title:visited,
  297.   .tm-widget-news__link:visited,
  298.   .tm-widget-twitter__name:visited {
  299.     color: #548eaa !important;
  300.   }
  301.   /* Links: hover */
  302.   .tm-companies-rating__name:hover,
  303.   .tm-article-title__link:hover,
  304.   .tm-hubs-block__hub-title:hover,
  305.   .tm-widget-news__link:hover,
  306.   .tm-widget-twitter__name:hover {
  307.     color: #548eaa !important;
  308.   }
  309.   .tm-description-list__body_variant-columns,
  310.   .tm-description-list__body_variant-columns-nowrap,
  311.   .tm-description-list__body_variant-columns-numbers,
  312.   .tm-description-list__title_variant-columns,
  313.   .tm-description-list__title_variant-columns-nowrap,
  314.   .tm-description-list__title_variant-columns-numbers,
  315.   .tm-widget-twitter__message,
  316.   .tm-block__title {
  317.     color: #b3b3b3 !important;
  318.   }
  319.   /* Backgroud */
  320.   .tm-tabs {
  321.     background-color: #2e3436;
  322.   }
  323.   .tm-tabs::before,
  324.   .tm-tabs::after {
  325.     background: none;
  326.   }
  327.   .tm-user-card__name,
  328.   .tm-user-card__short-info,
  329.   .tm-navigation-dropdown__option,
  330.   .tm-description-list__title,
  331.   .tm-user-profile__content,
  332.   .base-section__title,
  333.   .base-section__description,
  334.   .base-select__container,
  335.   .base-input__label,
  336.   .base-radio__label,
  337.   .base-checkbox__container,
  338.   .tm-user-apps__title,
  339.   .base-textarea__container {
  340.     color: #b3b3b3 !important;
  341.   }
  342.   .tm-user-comments__comment {
  343.     background-color: #272c2d;
  344.   }
  345.   .tm-profile__body,
  346.   .tm-navigation-dropdown,
  347.   .tm-navigation-dropdown__options,
  348.   .tm-users-list__placeholder,
  349.   .tm-placeholder__category-avatar,
  350.   .tm-placeholder__category-name,
  351.   .tm-placeholder__category-desctiption,
  352.   .tm-user-comment-card,
  353.   .user-settings__form,
  354.   .tm-user-apps__list {
  355.     background-color: #2e3436;
  356.   }
  357.   /* Links */
  358.   .tm-user-comments__header-link,
  359.   .tm-user-comments__title-link {
  360.     color: #2f93d0 !important;
  361.   }
  362.   /* Links: visited */
  363.   .tm-user-comments__header-link:visited,
  364.   .tm-user-comments__title-link:visited {
  365.     color: #548eaa;
  366.   }
  367.   /* Links: hover */
  368.   .tm-user-comments__header-link:hover,
  369.   .tm-user-comments__title-link:hover {
  370.     color: #548eaa;
  371.   }
  372. }