Add dark theme (#730)
This commit is contained in:
Zebreus
GitHub
parent
744ec58e08
commit
ff62e2b296
|
|
@ -1,14 +1,372 @@
|
|||
:root {
|
||||
--text-color: #333;
|
||||
--background-color: #fff;
|
||||
--terminal-background: #333;
|
||||
--terminal-color: #fff;
|
||||
--result-item-show-more-background: #fff;
|
||||
--result-item-show-more-color: #666;
|
||||
--search-sidebar-container-border-color: #ccc;
|
||||
--search-sidebar-link-color: var(--text-color);
|
||||
--search-sidebar-hovered-link-background: #eee;
|
||||
--search-sidebar-selected-link-background: #0081c2;
|
||||
--search-sidebar-selected-link-color: #fff;
|
||||
/* Divider between search results */
|
||||
--search-result-divider-line-color: #ccc;
|
||||
/* Gets overwritten by bootstrap; has no effect */
|
||||
--search-result-title-color: #08c;
|
||||
/* Text color for the details in a search result (like name, version, outputs...) */
|
||||
--search-result-short-details-color: #666;
|
||||
/* When search results are expanded, they show tabbed help for installing the result. This is the border color for that tabbed thing.
|
||||
It is only half of the border, the other half is styled by bootstrap. */
|
||||
--search-result-expanded-tab-border: #ccc;
|
||||
/* Color of the animation above the `Loading` text that is shown when searching */
|
||||
--loader-color: #000;
|
||||
/* Background color of the experimental badge next to the flakes search */
|
||||
--info-label-background: #007dbb;
|
||||
/* Text color for links. Probably overwritten by bootstrap */
|
||||
--link-color: #007dbb;
|
||||
/* Background color for the small badges with number in the sidebar */
|
||||
--badge-background: #757575;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------------- */
|
||||
/* -- Darkmode specific styles --------------------------------------------- */
|
||||
/* ------------------------------------------------------------------------- */
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
// Define darkmode colors
|
||||
:root {
|
||||
--text-color: #ffffff;
|
||||
--text-color-light: rgba(255, 255, 255, 0.5);
|
||||
--text-color-warning: #f8e45c;
|
||||
--background-color: #242424;
|
||||
--hover-background: #ffffff13;
|
||||
--button-background: #393939;
|
||||
--button-hover-background: #454545;
|
||||
--button-active-background: #656565;
|
||||
--button-active-hover-background: #707070;
|
||||
--terminal-background: #353535;
|
||||
--terminal-color: var(--text-color);
|
||||
--line-color: #ffffff26; // Color for separating lines
|
||||
--dark-blue: #5277C3; // Blue background
|
||||
--light-blue: #7EBAE4; // Blue text
|
||||
|
||||
--result-item-show-more-background: var(--background-color);
|
||||
--result-item-show-more-color: var(--text-color);
|
||||
--search-sidebar-container-border-color: var(--line-color);
|
||||
--search-sidebar-link-color: var(--text-color);
|
||||
--search-sidebar-hovered-link-background: var(--hover-background);
|
||||
--search-sidebar-selected-link-background: var(--dark-blue); // #0081c2;
|
||||
--search-sidebar-selected-link-color: var(--text-color);
|
||||
/* Divider between search results */
|
||||
--search-result-divider-line-color: var(--line-color);
|
||||
/* Gets overwritten by bootstrap; has no effect */
|
||||
--search-result-title-color: var(--text-color); // #08c;
|
||||
/* Text color for the details in a search result (like name, version, outputs...) */
|
||||
--search-result-short-details-color: var(--text-color-light); // #666;
|
||||
/* When search results are expanded, they show tabbed help for installing the result. This is the border color for that tabbed thing.
|
||||
It is only half of the border, the other half is styled by bootstrap. */
|
||||
--search-result-expanded-tab-border: var(--line-color);
|
||||
/* Color of the animation above the `Loading` text that is shown when searching */
|
||||
--loader-color: var(--text-color);
|
||||
/* Background color of the experimental badge next to the flakes search */
|
||||
--info-label-background: var(--dark-blue); // #007dbb;
|
||||
/* Text color for links. Probably overwritten by bootstrap */
|
||||
--link-color: var(--light-blue); // #007dbb;
|
||||
/* Background color for the small badges with number in the sidebar */
|
||||
--badge-background: var(--button-active-hover-background);
|
||||
|
||||
--color-hover-tab: var(--hover-background);
|
||||
--color-active-tab: #393939;
|
||||
--color-active-hover-tab: #404040;
|
||||
|
||||
/* Headerbar background color */
|
||||
--headerbar-background-color: var(--background-color);
|
||||
// --headerbar-background-color: #303030;
|
||||
}
|
||||
|
||||
// Override bootstrap styles for some common things.
|
||||
code {
|
||||
background-color: var(--terminal-background);
|
||||
color: var(--terminal-color);
|
||||
border: none;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
pre {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
* {
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
@mixin outline-visible() {
|
||||
border-radius: 4px !important;
|
||||
outline-color: var(--light-blue) !important;
|
||||
outline-style: solid !important;
|
||||
outline-width: 2px !important;
|
||||
outline-offset: -2px !important;
|
||||
}
|
||||
|
||||
*:focus {
|
||||
outline-width: 0 !important;
|
||||
}
|
||||
|
||||
*:focus-visible {
|
||||
@include outline-visible;
|
||||
}
|
||||
|
||||
a:focus-visible {
|
||||
outline-offset: 0 !important;
|
||||
}
|
||||
|
||||
.label-warning {
|
||||
background: transparent;
|
||||
color: var(--text-color-warning);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
button.btn.btn {
|
||||
margin: 0;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
background: var(--button-background);
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
border-bottom: none;
|
||||
color: var(--text-color);
|
||||
transition: background 0.2s;
|
||||
font-weight: bold;
|
||||
|
||||
&.active {
|
||||
background: var(--button-active-background);
|
||||
|
||||
&:hover {
|
||||
background: var(--button-active-hover-background);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--button-hover-background)
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: var(--button-background);
|
||||
color: var(--text-color-light);
|
||||
}
|
||||
}
|
||||
|
||||
// Override bootstrap colors for the sort dropdown
|
||||
.search-results {
|
||||
.dropdown {
|
||||
&.open {
|
||||
background: var(--button-background);
|
||||
}
|
||||
|
||||
button.btn:hover {
|
||||
background: var(--hover-background);
|
||||
}
|
||||
|
||||
.caret {
|
||||
border-top-color: var(--text-color) !important;
|
||||
}
|
||||
|
||||
background: var(--background-color);
|
||||
transition: background 0.2s;
|
||||
border-radius: 4px;
|
||||
|
||||
button.btn {
|
||||
&:focus:not(:focus-visible) {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
border-radius: 4px;
|
||||
background: inherit;
|
||||
color: var(--text-color);
|
||||
border: none;
|
||||
text-shadow: none;
|
||||
box-shadow: none;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
ul.dropdown-menu {
|
||||
background: var(--button-background);
|
||||
padding: 0;
|
||||
margin-top: 4px;
|
||||
|
||||
li {
|
||||
border-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
margin: 4px;
|
||||
|
||||
a {
|
||||
color: var(--text-color);
|
||||
background: inherit;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
a::before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header,
|
||||
.divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
a {
|
||||
background: var(--hover-background);
|
||||
}
|
||||
}
|
||||
|
||||
li.selected {
|
||||
background: var(--button-active-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Override bootstrap styles for the search box
|
||||
.search-input {
|
||||
>div:first-child:first-child:first-child {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
|
||||
div {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
input {
|
||||
background: var(--button-background);
|
||||
box-shadow: none;
|
||||
border: 1px solid transparent;
|
||||
color: var(--text-color);
|
||||
|
||||
&::placeholder {
|
||||
font-weight: bold;
|
||||
opacity: 1;
|
||||
color: var(--text-color-light);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background: inherit;
|
||||
|
||||
button+button {
|
||||
border-left: 1px solid var(--line-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Override bootstrap styles for the header bar
|
||||
// Very navbar to boost specificity
|
||||
.navbar.navbar.navbar.navbar.navbar.navbar {
|
||||
&>.navbar-inner {
|
||||
.brand img {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
background: var(--headerbar-background-color);
|
||||
border-bottom: none;
|
||||
|
||||
li>a {
|
||||
color: var(--text-color);
|
||||
background: var(--headerbar-background-color);
|
||||
transition: background 0.2s;
|
||||
text-shadow: none;
|
||||
box-shadow: none;
|
||||
border-radius: 4px;
|
||||
margin: 4px;
|
||||
padding: 6px 12px;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:focus-visible,
|
||||
&:active,
|
||||
&.active {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--color-hover-tab);
|
||||
}
|
||||
}
|
||||
|
||||
li.active>a {
|
||||
background: var(--color-active-tab);
|
||||
|
||||
&:hover {
|
||||
background: var(--color-active-hover-tab);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Style the tabs in expanded package search results
|
||||
.nav-tabs {
|
||||
border-bottom: 1px solid var(--line-color);
|
||||
border-radius: 4px;
|
||||
|
||||
li {
|
||||
background: transparent !important;
|
||||
border-color: none !important;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: transparent !important;
|
||||
border-color: none !important;
|
||||
}
|
||||
|
||||
a {
|
||||
// border: none;
|
||||
background: transparent;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
border-color: transparent;
|
||||
background: transparent !important;
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
|
||||
&.active {
|
||||
|
||||
a,
|
||||
a:hover,
|
||||
a:focus {
|
||||
border: 1px solid var(--line-color);
|
||||
border-bottom-color: transparent;
|
||||
background: var(--background-color) !important;
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------------- */
|
||||
/* -- Utils ---------------------------------------------------------------- */
|
||||
/* ------------------------------------------------------------------------- */
|
||||
|
||||
@mixin terminal() {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
background: var(--terminal-background);
|
||||
color: var(--terminal-color);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
@mixin search-result-item() {
|
||||
.result-item-show-more-wrapper {
|
||||
text-align: center;
|
||||
|
|
@ -21,8 +379,8 @@
|
|||
text-align: center;
|
||||
text-decoration: none;
|
||||
line-height: 1.5em;
|
||||
color: #666;
|
||||
background: #FFF;
|
||||
color: var(--result-item-show-more-color);
|
||||
background: var(--result-item-show-more-background);
|
||||
padding: 0 1em;
|
||||
position: relative;
|
||||
top: 0.75em;
|
||||
|
|
@ -48,6 +406,8 @@
|
|||
/* ------------------------------------------------------------------------- */
|
||||
|
||||
body {
|
||||
background: var(--background-color);
|
||||
color: var(--text-color);
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overflow-y: auto;
|
||||
|
|
@ -208,7 +568,7 @@ header .navbar.navbar-static-top {
|
|||
|
||||
& > li {
|
||||
margin-bottom: 1em;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid var(--search-sidebar-container-border-color);
|
||||
padding: 1em;
|
||||
border-radius: 4px;
|
||||
|
||||
|
|
@ -228,14 +588,14 @@ header .navbar.navbar-static-top {
|
|||
& > a {
|
||||
display: grid;
|
||||
grid-template-columns: auto max-content;
|
||||
color: #333;
|
||||
color: var(--search-sidebar-link-color);
|
||||
padding: 0.5em 0.5em 0.5em 1em;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background: #eee;
|
||||
border-radius: 4px;
|
||||
background: var(--search-sidebar-hovered-link-background);
|
||||
}
|
||||
|
||||
& > span:first-child {
|
||||
|
|
@ -247,9 +607,8 @@ header .navbar.navbar-static-top {
|
|||
}
|
||||
|
||||
&.selected {
|
||||
background: #0081c2;
|
||||
color: #FFF;
|
||||
border-radius: 4px;
|
||||
background: var(--search-sidebar-selected-link-background);
|
||||
color: var(--search-sidebar-selected-link-color);
|
||||
position: relative;
|
||||
& > span:last-child {
|
||||
display: none;
|
||||
|
|
@ -339,7 +698,7 @@ header .navbar.navbar-static-top {
|
|||
|
||||
// Result item
|
||||
& > li {
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-bottom: 1px solid var(--search-result-divider-line-color);
|
||||
padding-bottom: 2em;
|
||||
margin-bottom: 2em;
|
||||
|
||||
|
|
@ -352,11 +711,14 @@ header .navbar.navbar-static-top {
|
|||
background: inherit;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
color: #08c;
|
||||
color: var(--search-result-title-color) !important;
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 0.5em;
|
||||
text-align: left;
|
||||
display: block;
|
||||
a {
|
||||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.package {
|
||||
|
|
@ -371,7 +733,7 @@ header .navbar.navbar-static-top {
|
|||
|
||||
// short details of a pacakge
|
||||
& > :nth-child(3) {
|
||||
color: #666;
|
||||
color: var(--search-result-short-details-color);
|
||||
list-style: none;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
|
|
@ -414,8 +776,9 @@ header .navbar.navbar-static-top {
|
|||
|
||||
div.tab-content {
|
||||
padding: 1em;
|
||||
border: 1px solid #ddd;
|
||||
border: 1px solid var(--search-result-expanded-tab-border);
|
||||
border-top: 0;
|
||||
border-radius: 4px 0 4px 4px;
|
||||
}
|
||||
|
||||
pre {
|
||||
|
|
@ -424,9 +787,9 @@ header .navbar.navbar-static-top {
|
|||
|
||||
}
|
||||
|
||||
// programs
|
||||
& > :nth-child(3) {
|
||||
}
|
||||
// // programs
|
||||
// & > :nth-child(3) {
|
||||
// }
|
||||
|
||||
// maintainers and platforms
|
||||
& > :nth-child(4) {
|
||||
|
|
@ -461,6 +824,7 @@ header .navbar.navbar-static-top {
|
|||
& > div:nth-child(2n) {
|
||||
pre {
|
||||
background: transparent;
|
||||
color: var(--text-color);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
|
|
@ -469,8 +833,7 @@ header .navbar.navbar-static-top {
|
|||
}
|
||||
|
||||
pre code {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
@include terminal;
|
||||
padding: 0.5em
|
||||
}
|
||||
}
|
||||
|
|
@ -513,7 +876,7 @@ header .navbar.navbar-static-top {
|
|||
height: 4em;
|
||||
}
|
||||
.loader {
|
||||
color: #000000;
|
||||
color: var(--loader-color);
|
||||
text-indent: -9999em;
|
||||
margin: 88px auto;
|
||||
position: relative;
|
||||
|
|
@ -555,11 +918,11 @@ header .navbar.navbar-static-top {
|
|||
/* -- Accessibility overrides ---------------------------------------------- */
|
||||
/* ------------------------------------------------------------------------- */
|
||||
.label-info {
|
||||
background: #007dbb;
|
||||
background: var(--info-label-background);
|
||||
}
|
||||
|
||||
a {
|
||||
color: #007dbb;
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
.pager {
|
||||
|
|
@ -572,5 +935,5 @@ a {
|
|||
}
|
||||
|
||||
.badge {
|
||||
background-color: #757575
|
||||
background-color: var(--badge-background)
|
||||
}
|
||||
Loading…
Reference in a new issue