mirror of
https://github.com/expressjs/expressjs.com.git
synced 2026-02-23 20:32:45 +00:00
278 lines
6.8 KiB
CSS
278 lines
6.8 KiB
CSS
.dark-mode:root{
|
|
--box-fg: rgb(255, 255, 255);
|
|
--info-bg: rgb(23, 29, 79);
|
|
--info-accent: rgb(189, 195, 255);
|
|
--notice-bg: rgb(78, 64, 34);
|
|
--notice-accent: rgb(249, 232, 195);
|
|
--warn-bg: rgb(78, 34, 50);
|
|
--warn-accent: rgb(249, 195, 214);
|
|
--code-bg: #0d1117;
|
|
}
|
|
|
|
:root {
|
|
--main_dark_bg: #010409;
|
|
--second_dark_bg: #0d1117;
|
|
--darker_hover: #171b20;
|
|
--dark_hover: #383838;
|
|
--second_dark_hover: #484848;
|
|
--dark_inner_text: #888888;
|
|
--dark_header_text: silver;
|
|
--dark_main_text: #e6edf3;
|
|
--dark_bright_text: wheat;
|
|
--dark_border: #ddd;
|
|
--link: #259dff;
|
|
}
|
|
#theme-icon-container {
|
|
position: relative;
|
|
float: right;
|
|
color: white;
|
|
min-width: 50px;
|
|
color: black;
|
|
}
|
|
#theme-icon-container i {
|
|
cursor: pointer;
|
|
line-height: 30px;
|
|
}
|
|
#theme-icon-container .hidden-light {
|
|
display: none;
|
|
}
|
|
.sun-icon {
|
|
background-image: url(/images/sun-icon.png);
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
width: 27px;
|
|
height: 27px;
|
|
cursor: pointer;
|
|
}
|
|
#theme-icon-container .hidden-dark {
|
|
display: block;
|
|
}
|
|
html.dark-mode #theme-icon-container .hidden-light {
|
|
display: block;
|
|
}
|
|
html.dark-mode #theme-icon-container .hidden-dark {
|
|
display: none;
|
|
}
|
|
html.dark-mode #theme-icon-container {
|
|
color: var(--dark_main_text);
|
|
background-color: var(--second_dark_bg);
|
|
}
|
|
html.dark-mode > body {
|
|
background: var(--main_dark_bg);
|
|
color: var(--dark_main_text);
|
|
}
|
|
html.dark-mode header {
|
|
background-color: var(--second_dark_bg);
|
|
color: var(--dark_main_text);
|
|
}
|
|
html.dark-mode #logo > a {
|
|
color: var(--dark_main_text);
|
|
}
|
|
/* navbar links/drop down menu links */
|
|
html.dark-mode #navbar ul#navmenu li a,
|
|
html.dark-mode #navbar ul#navmenu li.dropit-trigger a {
|
|
color: var(--dark_main_text);
|
|
}
|
|
/* first drop down link - some js is adding current class */
|
|
html.dark-mode #navbar ul#navmenu li a.current {
|
|
background: transparent;
|
|
}
|
|
html.dark-mode #navbar ul#navmenu li a.current:hover {
|
|
background: var(--dark_hover);
|
|
}
|
|
html.dark-mode .menu ul.dropit-submenu {
|
|
background: var(--dark_bg);
|
|
}
|
|
/* drop down menu links */
|
|
html.dark-mode #navbar .menu ul.dropit-submenu a:hover {
|
|
background: var(--dark_hover);
|
|
}
|
|
html.dark-mode #navbar #navmenu li {
|
|
background: var(--second_dark_bg);
|
|
}
|
|
/* search bar */
|
|
html.dark-mode #navbar > span.algolia-autocomplete > input {
|
|
background-color: var(--second_dark_bg);
|
|
}
|
|
html.dark-mode #navbar > span.algolia-autocomplete > input,
|
|
html.dark-mode #navbar > span.algolia-autocomplete > input::placeholder {
|
|
color: var(--dark_main_text);
|
|
}
|
|
/* search bar french */
|
|
:lang(fr) html.dark-mode #navbar ul#navmenu > span.algolia-autocomplete > input {
|
|
background-color: var(--second_dark_bg);
|
|
color: var(--dark_main_text);
|
|
}
|
|
/* search bar fixes uz, ru, de, fr */
|
|
:lang(uz) span.algolia-autocomplete {
|
|
max-width: 8em;
|
|
min-width: auto;
|
|
}
|
|
:lang(ru) span.algolia-autocomplete,
|
|
:lang(de) span.algolia-autocomplete,
|
|
:lang(fr) span.algolia-autocomplete
|
|
{
|
|
max-width: 9em;
|
|
min-width: auto;
|
|
}
|
|
:lang(uz) span.algolia-autocomplete > input,
|
|
:lang(ru) span.algolia-autocomplete > input,
|
|
:lang(de) span.algolia-autocomplete > input,
|
|
:lang(fr) span.algolia-autocomplete > input {
|
|
max-width: 100%;
|
|
}
|
|
html.dark-mode #navbar ul#navmenu > span.algolia-autocomplete > input::placeholder {
|
|
color: var(--dark_main_text);
|
|
}
|
|
html.dark-mode div#overlay {
|
|
opacity: 0.5;
|
|
}
|
|
@media (max-width: 899px) {
|
|
#theme-icon-container {
|
|
bottom: 35px;
|
|
}
|
|
/* mobile menu main links hover */
|
|
html.dark-mode div#navbar ul#navmenu .dropit-trigger:hover {
|
|
background: var(--dark_hover);
|
|
}
|
|
/* mobile menu inner links hover */
|
|
html.dark-mode div#navbar .menu ul.dropit-submenu a:hover {
|
|
background: var(--second_dark_hover);
|
|
color: var(--dark_main_text) !important;
|
|
}
|
|
}
|
|
|
|
html.dark-mode .doc-box.doc-info pre.language-javascript {
|
|
background: var(--main_dark_bg);
|
|
}
|
|
|
|
html.dark-mode h1,
|
|
html.dark-mode h2,
|
|
html.dark-mode h3,
|
|
html.dark-mode code,
|
|
html.dark-mode em,
|
|
html.dark-mode strong {
|
|
color: var(--dark_main_text);
|
|
}
|
|
html.dark-mode pre {
|
|
background: var(--second_dark_bg);
|
|
}
|
|
/* index.html */
|
|
html.dark-mode #description .express > a {
|
|
color: var(--dark_main_text);
|
|
}
|
|
html.dark-mode #install-command {
|
|
background: var(--main_dark_bg);
|
|
}
|
|
html.dark-mode #announcements {
|
|
background: var(--main_dark_bg);
|
|
}
|
|
html.dark-mode #boxes div > h3 {
|
|
color: var(--dark_main_text);
|
|
}
|
|
/* basic-routing.htlm */
|
|
html.dark-mode [class*='language-'] {
|
|
text-shadow: 0 1px var(--second_dark_bg);
|
|
}
|
|
/* js fat arrow operator */
|
|
html.dark-mode .token.operator {
|
|
background: inherit;
|
|
}
|
|
/* debugging.htlm */
|
|
html.dark-mode table tr:first-child th {
|
|
background-color: var(--second_dark_bg);
|
|
color: var(--dark_main_text);
|
|
}
|
|
/* api pages */
|
|
html.dark-mode #menu li > * {
|
|
color: var(--dark_main_text);
|
|
}
|
|
html.dark-mode #menu li ul li > em {
|
|
color: var(--dark_header_text);
|
|
}
|
|
html.dark-mode #menu li ul li > a {
|
|
color: var(--dark_inner_text);
|
|
}
|
|
html.dark-mode #api-doc > h3 {
|
|
color: var(--dark_header_text);
|
|
}
|
|
html.dark-mode #api-doc section h5 {
|
|
color: var(--dark_header_text);
|
|
}
|
|
/*
|
|
overriding search-bar results drop down
|
|
*/
|
|
html.dark-mode .ds-dropdown-menu .ds-dataset-1 {
|
|
background-color: var(--dark_bg);
|
|
}
|
|
html.dark-mode .ds-dropdown-menu .ds-dataset-1 .ds-suggestion a {
|
|
background-color: var(--second_dark_bg);
|
|
color: var(--dark_main_text);
|
|
}
|
|
html.dark-mode
|
|
.ds-dropdown-menu
|
|
.ds-dataset-1
|
|
.ds-suggestions
|
|
.algolia-docsearch-suggestion--category-header {
|
|
color: var(--dark_main_text);
|
|
}
|
|
html.dark-mode
|
|
.ds-dropdown-menu
|
|
.ds-dataset-1
|
|
.ds-suggestions
|
|
.algolia-docsearch-suggestion--wrapper
|
|
.algolia-docsearch-suggestion--subcategory-column {
|
|
color: var(--dark_header_text);
|
|
}
|
|
html.dark-mode
|
|
.ds-dropdown-menu
|
|
.ds-dataset-1
|
|
.ds-suggestions
|
|
.algolia-docsearch-suggestion--wrapper
|
|
.algolia-docsearch-suggestion--title {
|
|
color: var(--dark_main_text);
|
|
}
|
|
html.dark-mode
|
|
.ds-dropdown-menu
|
|
.ds-dataset-1
|
|
.ds-suggestions
|
|
.algolia-docsearch-suggestion--wrapper
|
|
.algolia-docsearch-suggestion--text {
|
|
color: var(--dark_main_text);
|
|
}
|
|
html.dark-mode
|
|
.ds-dropdown-menu
|
|
.ds-dataset-1
|
|
.ds-suggestions
|
|
.algolia-docsearch-suggestion--wrapper
|
|
.algolia-docsearch-suggestion--highlight {
|
|
color: var(--link);
|
|
}
|
|
html.dark-mode .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--title,
|
|
html.dark-mode .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content{
|
|
background-color: var(--dark_hover);
|
|
}
|
|
html.dark-mode .blog-post{
|
|
background-color: initial;
|
|
border: 1px solid var(--dark_border);
|
|
transition: 0.3s;
|
|
}
|
|
html.dark-mode .blog-post:hover{
|
|
background-color: var(--darker_hover);
|
|
}
|
|
html.dark-mode .blog-title > a{
|
|
color: var(--dark_main_text);
|
|
}
|
|
html.dark-mode .blog-excerpt{
|
|
color: var(--dark_bright_text);
|
|
}
|
|
html.dark-mode #blog-side-menu-container h3 a{
|
|
color: var(--dark_header_text);
|
|
}
|
|
html.dark-mode #blog-side-menu > li > a{
|
|
color: var(--dark_inner_text);
|
|
}
|
|
|
|
html.dark-mode pre code {
|
|
background-color: inherit;
|
|
} |