109 lines
4.5 KiB
CSS
109 lines
4.5 KiB
CSS
/* Dark theme */
|
|
@media (prefers-color-scheme: dark) {
|
|
#nav-bar,
|
|
#PersonalToolbar {
|
|
background-color: rgb(24, 24, 37) !important;
|
|
}
|
|
:root {
|
|
.tabbrowser-tab[selected="true"] .tab-background {
|
|
border: 1px solid #313244 !important;
|
|
}
|
|
--toolbar-bgcolor: rgb(24, 24, 37) !important;
|
|
--toolbox-non-lwt-bgcolor: rgb(17, 17, 27) !important;
|
|
--toolbox-non-lwt-textcolor: rgb(205, 214, 244) !important;
|
|
--input-bgcolor: rgb(17, 17, 27) !important;
|
|
--toolbar-field-background-color: var(--input-bgcolor) !important;
|
|
--input-color: rgb(205, 214, 244) !important;
|
|
--toolbar-field-color: var(--input-color) !important;
|
|
.tab-background[selected]:not([multiselected]) {
|
|
outline: 1px solid rgb(49, 50, 68);
|
|
outline-offset: -1px;
|
|
}
|
|
.tab-background[multiselected] {
|
|
--focus-outline-color: rgb(49, 50, 68);
|
|
}
|
|
--arrowpanel-background: rgb(49, 50, 68) !important;
|
|
--arrowpanel-color: rgb(205, 214, 244) !important;
|
|
--toolbarbutton-active-background: rgb(108, 112, 134) !important;
|
|
&:where([tabsintitlebar]) {
|
|
--toolbox-non-lwt-bgcolor-inactive: rgb(17, 17, 27) !important;
|
|
}
|
|
--toolbarbutton-icon-fill-attention: rgb(205, 214, 244) !important;
|
|
--toolbarbutton-icon-fill: rgb(205, 214, 244) !important;
|
|
--arrowpanel-border-color: rgb(49, 50, 68) !important;
|
|
--urlbarView-highlight-color: rgb(205, 214, 244) !important;
|
|
--urlbarView-highlight-background: rgb(108, 112, 134) !important;
|
|
#tabbrowser-tabs {
|
|
--tab-loading-fill: rgb(205, 214, 244) !important;
|
|
}
|
|
--tab-selected-bgcolor: rgb(30, 30, 46) !important;
|
|
--tab-selected-textcolor: rgb(205, 214, 244) !important;
|
|
--chrome-content-separator-color: rgb(49, 50, 68) !important;
|
|
--toolbar-field-focus-border-color: rgb(49, 50, 68) !important;
|
|
--input-border-color: rgb(24, 24, 37) !important;
|
|
--toolbar-field-border-color: var(--input-border-color) !important;
|
|
--toolbar-field-focus-background-color: rgb(30, 30, 46) !important;
|
|
#urlbar-input:focus::selection,
|
|
.searchbar-textbox:focus::selection {
|
|
color: rgb(49, 50, 68);
|
|
}
|
|
#urlbar-input:focus::selection,
|
|
.searchbar-textbox:focus::selection {
|
|
background-color: rgb(205, 214, 244);
|
|
}
|
|
--toolbarseparator-color: rgb(205, 214, 244) !important;
|
|
}
|
|
}
|
|
|
|
/* Light theme */
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
.tabbrowser-tab[selected="true"] .tab-background {
|
|
border: 1px solid #ccd0da !important;
|
|
}
|
|
--toolbar-bgcolor: rgb(230, 233, 239) !important;
|
|
--toolbox-non-lwt-bgcolor: rgb(220, 224, 232) !important;
|
|
--toolbox-non-lwt-textcolor: rgb(76, 79, 105) !important;
|
|
--input-bgcolor: rgb(220, 224, 232) !important;
|
|
--toolbar-field-background-color: var(--input-bgcolor) !important;
|
|
--input-color: rgb(76, 79, 105) !important;
|
|
--toolbar-field-color: var(--input-color) !important;
|
|
.tab-background[selected]:not([multiselected]) {
|
|
outline: 1px solid rgb(76, 79, 105);
|
|
outline-offset: -1px;
|
|
}
|
|
.tab-background[multiselected] {
|
|
--focus-outline-color: rgb(76, 79, 105);
|
|
}
|
|
--arrowpanel-background: rgb(239, 241, 245) !important;
|
|
--arrowpanel-color: rgb(76, 79, 105) !important;
|
|
--toolbarbutton-active-background: rgb(156, 160, 176) !important;
|
|
&:where([tabsintitlebar]) {
|
|
--toolbox-non-lwt-bgcolor-inactive: rgb(220, 224, 232) !important;
|
|
}
|
|
--toolbarbutton-icon-fill-attention: rgb(76, 79, 105) !important;
|
|
--toolbarbutton-icon-fill: rgb(76, 79, 105) !important;
|
|
--arrowpanel-border-color: rgb(76, 79, 105) !important;
|
|
--urlbarView-highlight-color: rgb(76, 79, 105) !important;
|
|
--urlbarView-highlight-background: rgb(156, 160, 176) !important;
|
|
#tabbrowser-tabs {
|
|
--tab-loading-fill: rgb(76, 79, 105) !important;
|
|
}
|
|
--tab-selected-bgcolor: rgb(239, 241, 245) !important;
|
|
--tab-selected-textcolor: rgb(76, 79, 105) !important;
|
|
--chrome-content-separator-color: rgb(239, 241, 245) !important;
|
|
--toolbar-field-focus-border-color: rgb(76, 79, 105) !important;
|
|
--input-border-color: rgb(230, 233, 239) !important;
|
|
--toolbar-field-border-color: var(--input-border-color) !important;
|
|
--toolbar-field-focus-background-color: rgb(239, 241, 245) !important;
|
|
#urlbar-input:focus::selection,
|
|
.searchbar-textbox:focus::selection {
|
|
color: rgb(204, 208, 218);
|
|
}
|
|
#urlbar-input:focus::selection,
|
|
.searchbar-textbox:focus::selection {
|
|
background-color: rgb(76, 79, 105);
|
|
}
|
|
--toolbarseparator-color: rgb(76, 79, 105) !important;
|
|
}
|
|
}
|