npms.io - dark by forivall

/* ==UserStyle==
@name           npms.io - dark
@namespace      github.com/openstyles/stylus
@version        1.0.1
@description    Dark theme for npms.io
@author         Emily Klassen <forivall@users.noreply.github.com>
==/UserStyle== */

@-moz-document domain("npms.io") {

:root {
  /* --bgcolor: #f7f7f6; */
  --bgcolor: hsl(60, 6%, 11%);
}

html,
body {
    background-color: var(--bgcolor);
}

/* Typography defaults
   ========================================================================== */

body {
    color: hsl(0, 0%, 75%);
}

input,
textarea,
select {
    color: hsl(0, 0%, 83%);
}

::selection {
    background: hsl(162, 76%, 30%);
    color: #fff;
}

/* Links
   ========================================================================== */

a,
a:visited,
a:active {
    color: hsl(223, 26%, 64%);
}


/* Code & quote blocks
   ========================================================================== */

code {
    background-color: rgba(255, 255, 255, .06);
    color: hsl(0, 0%, 75%);
}

blockquote {
    border-left-color: #ddd;
    color: #777;
}

.page-home {
    background-color: var(--bgcolor);
}
.page-search {
    background-color: var(--bgcolor);
}
.page-terms {
    background-color: var(--bgcolor);
}

/* Summary
   ========================================================================== */

.page-search .results-list .summary {
    background-color: hsl(60, 5%, 13%);
    color: hsl(0, 0%, 69%);
}
/* Search box itself
   ========================================================================== */

.search-box-component .search-input input {
    background-color: #000;
}

.search-box-component .search-input button {
    background-color: #1dd09b;
    color: #fff;
}

.search-box-component .search-input button:hover {
    background-color: #1fb387;
}

/* Autosuggest component
   ========================================================================== */

.search-box-component .autosuggest-component-suggestions-list {
    border-color: hsl(0, 0%, 21%);
    background-color: hsl(60, 5%, 13%);
}

.search-box-component .autosuggest-component-suggestion {
    color: hsl(0, 0%, 75%);
}

.search-box-component .autosuggest-component-suggestion .suggestion-name {
    color: hsl(223, 26%, 78%);
}

.search-box-component .autosuggest-component-suggestion.is-focused {
    background-color: hsl(0, 0%, 21%);
}

/* Headline
   ========================================================================== */

.page-search .results-list-item .headline .version {
    color: #858585;
}

/* Flags
   ========================================================================== */

.package-flags-component .package-flag-deprecated,
.package-flags-component .package-flag-insecure {
    background: #ad3237;
}

/* Keywords
   ========================================================================== */

.page-search .results-list-item .keywords {
    color: #858585;
}

.page-search .results-list-item .keywords .keyword a {
    color: #858585;
}

/* Publish info
   ========================================================================== */

.page-search .results-list-item .publish-info {
    color: hsl(222, 28%, 76%);
}

.page-search .results-list-item .publish-info .publisher-avatar {
    border-color: #57627d;
    background-color: #ededeb;
}

.scroll-to-top-component {
    background-color: hsla(0, 0%, 26%, .9);
}
.scroll-to-top-component:hover {
    background-color: #6d6d6d;
    color: #fff;
}
.scroll-to-top-component:hover i {
    color: #fff;
}

/* Detailed score (circular progress)
   ========================================================================== */

.package-score-component .score-detailed .score-circular-progessbar .CircularProgressbar-path {
    stroke: hsl(0, 0%, 49%);
}

.package-score-component .score-detailed .score-circular-progessbar .CircularProgressbar-trail {
    stroke: hsl(0, 0%, 24%);
}

.page-search .results-list-item:hover .headline .package-score-component .score-detailed .CircularProgressbar-path {
    stroke: hsl(223, 54%, 76%);
}

.page-search .results-list-item:hover .headline .package-score-component .score-detailed .CircularProgressbar-trail {
    stroke: hsl(0, 0%, 28%);
}

/* Full score
   ========================================================================== */

.package-score-component .score-full .score-value {
    color: #fff;
}

/* */

:root {
  --npms-tooltip-bg-color: #000;
  --npms-tooltip-bd-color: #444;
}

.tooltip-component-theme-default .tooltip-component-inner {
    border-color: var(--npms-tooltip-bd-color);
    background-color: var(--npms-tooltip-bg-color);
}

/* Bottom placement
   ========================================================================== */

.tooltip-component-theme-default.tooltip-component-placement-bottom .tooltip-component-arrow::after {
    border-color: color(from var(--npms-tooltip-bg-color) srgb r g b / 0);
    border-bottom-color: var(--npms-tooltip-bg-color);
}

.tooltip-component-theme-default.tooltip-component-placement-bottom .tooltip-component-arrow::before {
    border-color: color(from var(--npms-tooltip-bd-color) srgb r g b / 0);
    border-bottom-color: var(--npms-tooltip-bd-color);
}

/* Top placement
   ========================================================================== */

.tooltip-component-theme-default.tooltip-component-placement-top .tooltip-component-arrow::after {
    border-top-color: var(--npms-tooltip-bg-color);
}

.tooltip-component-theme-default.tooltip-component-placement-top .tooltip-component-arrow::before {
    border-top-color: var(--npms-tooltip-bd-color);
}

/* Left placement
   ========================================================================== */

.tooltip-component-theme-default.tooltip-component-placement-left .tooltip-component-arrow::after {
    border-left-color: var(--npms-tooltip-bg-color);
}

.tooltip-component-theme-default.tooltip-component-placement-left .tooltip-component-arrow::before {
    border-left-color: var(--npms-tooltip-bd-color);
}

/* Right placement
   ========================================================================== */


.tooltip-component-theme-default.tooltip-component-placement-right .tooltip-component-arrow::after {
    border-right-color: var(--npms-tooltip-bg-color);
}

.tooltip-component-theme-default.tooltip-component-placement-right .tooltip-component-arrow::before {
    border-right-color: var(--npms-tooltip-bd-color);
}


}