mirror of
https://github.com/NginxProxyManager/nginx-proxy-manager.git
synced 2026-02-01 16:32:54 +00:00
Dark UI for react-select
This commit is contained in:
@@ -1,3 +1,14 @@
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
}
|
||||
|
||||
.light {
|
||||
color-scheme: light;
|
||||
}
|
||||
.dark {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
--tblr-backdrop-opacity: 0.8 !important;
|
||||
}
|
||||
@@ -12,3 +23,45 @@
|
||||
.ml-1 {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.react-select-container {
|
||||
.react-select__control {
|
||||
color: var(--tblr-body-color);
|
||||
background-color: var(--tblr-bg-forms);
|
||||
border: var(--tblr-border-width) solid var(--tblr-border-color);
|
||||
|
||||
.react-select__input {
|
||||
color: var(--tblr-body-color) !important;
|
||||
}
|
||||
|
||||
.react-select__single-value {
|
||||
color: var(--tblr-body-color);
|
||||
}
|
||||
|
||||
.react-select__multi-value {
|
||||
border: 1px solid var(--tblr-border-color);
|
||||
background-color: var(--tblr-bg-surface-tertiary);
|
||||
color: var(--tblr-secondary) !important;
|
||||
|
||||
.react-select__multi-value__label {
|
||||
color: var(--tblr-secondary) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.react-select__menu {
|
||||
background-color: var(--tblr-bg-forms);
|
||||
|
||||
.react-select__option {
|
||||
background: rgba(var(--tblr-primary-rgb), .04);
|
||||
color: inherit !important;
|
||||
&.react-select__option--is-focused {
|
||||
background: rgba(var(--tblr-primary-rgb), .1);
|
||||
}
|
||||
|
||||
&.react-select__option--is-focused.react-select__option--is-selected {
|
||||
background: rgba(var(--tblr-primary-rgb), .2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user