edge-frfox/chrome/global/colors.css

429 lines
18 KiB
CSS

/* EdgeFr-Fox by bmFtZQ - colors.css */
/* light */
:root:not(:-moz-lwtheme),
:root[style*="--lwt-accent-color: rgb(240, 240, 244)"] {
--lwt-accent-color: #cecece !important;
--lwt-accent-color-inactive: #e8e8e8 !important;
--lwt-text-color: #000 !important;
--toolbar-bgcolor: #f7f7f7 !important;
--toolbar-color: #000 !important;
--toolbarbutton-icon-fill: #000 !important;
--chrome-content-separator-color: #bfbfbf !important;
--lwt-toolbarbutton-icon-fill-attention: #0078D4 !important;
--toolbarbutton-icon-fill-attention: #0078D4 !important;
--lwt-tab-text: var(--toolbar-color) !important;
--lwt-selected-tab-background-color: var(--toolbar-bgcolor) !important;
--tab-selected-bgcolor: var(--toolbar-bgcolor) !important;
--toolbar-field-background-color: #fff !important;
--toolbar-field-color: #000 !important;
--toolbar-field-border-color: #0000 !important;
--toolbar-field-focus-background-color: var(--toolbar-field-background-color) !important;
--toolbar-field-focus-color: var(--toolbar-field-color) !important;
--toolbar-field-focus-border-color: #0055D7 !important;
--urlbar-hover-highlight-color: rgba(192, 192, 192, 0.5) !important;
--urlbar-box-bgcolor: rgba(0, 0, 0, 0.09) !important;
--urlbar-box-hover-bgcolor: rgba(0, 0, 0, 0.09) !important;
--urlbar-box-focus-bgcolor: rgba(0, 0, 0, 0.22) !important;
--urlbar-icon-fill-opacity: 0.6 !important;
--urlbar-popup-url-color: #0072C9 !important;
--lwt-brighttext-url-color: var(--urlbar-popup-url-color) !important;
--autocomplete-popup-background: #fff !important;
--autocomplete-popup-color: #fff !important;
--autocomplete-popup-highlight-background: #f2f2f2 !important;
--autocomplete-popup-hover-background: #e5e5e5 !important;
--autocomplete-popup-separator-color: #dadada00 !important;
--button-bgcolor: #EDEDED !important;
--button-hover-bgcolor: #e5e5e5 !important;
--button-active-bgcolor: #d5d5d5 !important;
--button-primary-bgcolor: #0078D4 !important;
--button-primary-hover-bgcolor: #006CBE !important;
--button-primary-active-bgcolor: #1683D8 !important;
--button-primary-color: #fff !important;
--error-text-color: #FF9AA2 !important;
--input-bgcolor: #fff !important;
--input-color: #2b2b2b !important;
--input-border-color: #bebebe !important;
--input-error-border-color: #FF848A !important;
--zoom-controls-bgcolor: #4A4A4A !important;
--arrowpanel-background: #fff !important;
--arrowpanel-color: #1c1c1c !important;
--panel-description-color: #000a !important;
--panel-disabled-color: #9E9E9E !important;
--arrowpanel-dimmed: #565656 !important;
--arrowpanel-dimmed-further: #707070 !important;
--panel-item-hover-bgcolor: #eee !important;
--panel-item-active-bgcolor: #ddd !important;
--arrowpanel-border-color: #dadada !important;
--panel-separator-color: #dadada !important;
--panel-banner-item-update-supported-bgcolor: #188038 !important;
--focus-outline-color: #0055D7 !important;
--panel-shortcut-color: inherit !important;
--uc-urlbar-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
--toolbarbutton-hover-background: rgba(0, 0, 0, 0.08) !important;
--toolbarbutton-active-background: rgba(0, 0, 0, 0.12) !important;
--uc-private-browsing-indicator: var(--button-primary-bgcolor);
--uc-private-browsing-indicator-text: var(--button-primary-color);
--tab-icon-overlay-stroke: #fff !important;
--tab-icon-overlay-fill: #252525 !important;
}
/* dark */
:root[lwt-default-theme-in-dark-mode="true"],
:root[style*="--lwt-accent-color: rgb(28, 27, 34)"] {
--lwt-accent-color: #1C1C1C !important;
--lwt-accent-color-inactive: #2e2e2e !important;
--lwt-text-color: #E5E5E5 !important;
--toolbar-bgcolor: #3B3B3B !important;
--toolbar-color: #fff !important;
--toolbarbutton-icon-fill: #fff !important;
--chrome-content-separator-color: #686868 !important;
--lwt-toolbarbutton-icon-fill-attention: #4C98D1 !important;
--toolbarbutton-icon-fill-attention: #4C98D1 !important;
--lwt-tab-text: var(--toolbar-color) !important;
--lwt-selected-tab-background-color: var(--toolbar-bgcolor) !important;
--tab-selected-bgcolor: var(--toolbar-bgcolor) !important;
--toolbar-field-background-color: #2B2B2B !important;
--toolbar-field-color: #fff !important;
--toolbar-field-border-color: #0000 !important;
--toolbar-field-focus-background-color: var(--toolbar-field-background-color) !important;
--toolbar-field-focus-color: var(--toolbar-field-color) !important;
--toolbar-field-focus-border-color: #63ADE5 !important;
--urlbar-hover-highlight-color: rgba(128, 128, 128, 0.5) !important;
--urlbar-box-bgcolor: rgba(255, 255, 255, 0.11) !important;
--urlbar-box-hover-bgcolor: rgba(255, 255, 255, 0.11) !important;
--urlbar-box-focus-bgcolor: rgba(255, 255, 255, 0.28) !important;
--urlbar-icon-fill-opacity: 1 !important;
--urlbar-popup-url-color: #75B6E8 !important;
--lwt-brighttext-url-color: var(--urlbar-popup-url-color) !important;
--autocomplete-popup-background: #4A4A4A !important;
--autocomplete-popup-color: #fff !important;
--autocomplete-popup-highlight-background: #383838 !important;
--autocomplete-popup-hover-background: #444444 !important;
--autocomplete-popup-separator-color: #63636300 !important;
--button-bgcolor: #5C5C5C !important;
--button-hover-bgcolor: #646464 !important;
--button-active-bgcolor: #575757 !important;
--button-primary-bgcolor: #006CBE !important;
--button-primary-hover-bgcolor: #0078D4 !important;
--button-primary-active-bgcolor: #005CA3 !important;
--button-primary-color: #fff !important;
--error-text-color: #FF9AA2 !important;
--input-bgcolor: #4A4A4A !important;
--input-color: #fff !important;
--input-border-color: #8A8A8A !important;
--input-error-border-color: #FF848A !important;
--zoom-controls-bgcolor: #4A4A4A !important;
--arrowpanel-background: #4A4A4A !important;
--arrowpanel-color: #fff !important;
--panel-description-color: #fffb !important;
--panel-disabled-color: #ABABAA !important;
--arrowpanel-dimmed: #565656 !important;
--arrowpanel-dimmed-further: #707070 !important;
--panel-item-hover-bgcolor: #646464 !important;
--panel-item-active-bgcolor: #747474 !important;
--arrowpanel-border-color: #636363 !important;
--panel-separator-color: #636363 !important;
--panel-banner-item-update-supported-bgcolor: #81C995 !important;
--focus-outline-color: #63ADE5 !important;
--panel-shortcut-color: inherit !important;
--toolbarbutton-hover-background: rgba(255, 255, 255, 0.1) !important;
--toolbarbutton-active-background: rgba(255, 255, 255, 0.16) !important;
--uc-private-browsing-indicator: var(--button-primary-bgcolor);
--uc-private-browsing-indicator-text: var(--button-primary-color);
--tab-icon-overlay-stroke: #4b4b4b !important;
--tab-icon-overlay-fill: #fff !important;
}
#urlbar {
--urlbar-box-bgcolor: inherit !important;
--urlbar-box-hover-bgcolor: inherit !important;
--urlbar-box-focus-bgcolor: inherit !important;
}
/* Change Colour of page when loading */
:root:not(:-moz-lwtheme) #tabbrowser-tabpanels,
:root[style*="--lwt-accent-color: rgb(240, 240, 244)"] #tabbrowser-tabpanels {
background-color: #f7f7f7 !important;
}
:root[lwt-default-theme-in-dark-mode="true"] #tabbrowser-tabpanels,
:root[style*="--lwt-accent-color: rgb(28, 27, 34)"] #tabbrowser-tabpanels {
background-color: #252525 !important;
}
/* make the titlebar buttons black/white on default themes */
:root:not(:-moz-lwtheme)[tabsintitlebar] .titlebar-buttonbox,
:root[style*="--lwt-accent-color: rgb(240, 240, 244)"][tabsintitlebar] .titlebar-buttonbox {
color: #000 !important;
}
:root[lwt-default-theme-in-dark-mode="true"][tabsintitlebar] .titlebar-buttonbox,
:root[style*="--lwt-accent-color: rgb(28, 27, 34)"][tabsintitlebar] .titlebar-buttonbox {
color: #fff !important;
}
#statuspanel-label {
background-color: var(--toolbar-field-focus-background-color) !important;
color: var(--toolbar-field-focus-color) !important;
border-color: transparent !important;
box-shadow: 0 2px 5px #0004, 0 0 0 1px #0002 !important;
}
@media (prefers-color-scheme: dark) {
#statuspanel-label {
box-shadow: 0 2px 5px #0004, 0 0 0 1px #0004 !important;
}
}
@media (-moz-platform: windows) {
tooltip {
background-color: var(--arrowpanel-background) !important;
color: var(--arrowpanel-color) !important;
border-color: var(--arrowpanel-border-color) !important;
}
.titlebar-button:not(.titlebar-close):hover {
background-color: color-mix(in srgb, currentColor 11%, transparent) !important;
}
.titlebar-button:hover:active {
background-color: color-mix(in srgb, currentColor 20%, transparent) !important;
}
.titlebar-close:hover {
stroke: white !important;
background-color: #e81123 !important;
}
.titlebar-close:hover:active {
background-color: #EF6B76 !important;
}
toolbar[brighttext] .titlebar-close:hover:active {
background-color: #9C1420 !important;
}
/* library window theme */
window#places {
--organizer-color: #000 !important;
--organizer-deemphasized-color: #666 !important;
--organizer-toolbar-background: #f7f7f7 !important;
--organizer-pane-background: #f7f7f7 !important;
--organizer-content-background: #f7f7f7 !important;
--organizer-hover-background: #00000025 !important;
--organizer-selected-background: #006CBE80 !important;
--organizer-outline-color: #0055D7a0 !important;
--organizer-toolbar-field-background: #fff !important;
--organizer-toolbar-field-background-focused: #fff !important;
--organizer-border-color: #bfbfbf !important;
scrollbar-color: #0006 #f7f7f740 !important;
}
#placesViewsBox #downloadsListBox richlistitem[selected="true"] {
background-color: #006CBE !important;
color: #fff !important;
}
#placeContentColumns :is(treecol, treecolpicker) {
background-color: #f7f7f7 !important;
color: #000 !important;
border-inline-start: 1px solid #bfbfbf !important;
box-shadow: inset 0 -1px #bfbfbf !important;
appearance: none !important;
}
#placeContentColumns :is(treecol, treecolpicker):where(:hover) {
background-color: #cecece !important;
color: #000 !important;
}
@media (prefers-color-scheme: dark) {
window#places {
--organizer-color: #fff !important;
--organizer-deemphasized-color: #bbb !important;
--organizer-toolbar-background: #3B3B3B !important;
--organizer-pane-background: #2B2B2B !important;
--organizer-content-background: #1C1C1C !important;
--organizer-hover-background: #ffffff25 !important;
--organizer-selected-background: #006CBE80 !important;
--organizer-outline-color: #63ADE5 !important;
--organizer-toolbar-field-background: #2B2B2B !important;
--organizer-toolbar-field-background-focused: #2B2B2B !important;
--organizer-border-color: #686868 !important;
scrollbar-color: #fff6 #2B2B2B40 !important;
}
#placesViewsBox #downloadsListBox richlistitem[selected="true"] {
background-color: #006CBE !important;
color: #fff !important;
}
#placeContentColumns :is(treecol, treecolpicker) {
background-color: #3B3B3B !important;
color: #fff !important;
border-inline-start: 1px solid #686868 !important;
box-shadow: inset 0 -1px #686868 !important;
}
#placeContentColumns :is(treecol, treecolpicker):where(:hover) {
background-color: #4A4A4A !important;
color: #fff !important;
}
}
}
/* side bar theme */
#sidebar-box:not([lwt-sidebar]) {
--sidebar-background-color: #f7f7f7 !important;
--sidebar-text-color: #000 !important;
appearance: none !important;
}
#sidebar-box[style*="--sidebar-background-color: rgb(56, 56, 61"] {
--sidebar-background-color: #3B3B3B !important;
--sidebar-text-color: #fff !important;
}
#browser:not([style*="--sidebar-border-color"]) {
--sidebar-border-color: #bfbfbf !important;
}
#browser[style*="--sidebar-border-color: rgba(255, 255, 255"] {
--sidebar-border-color: #686868 !important;
}
.sidebar-panel:not([lwt-sidebar]) {
color: #000 !important;
}
@-moz-document url(chrome://browser/content/syncedtabs/sidebar.xhtml){
body {
background: transparent !important;
}
}
.sidebar-panel[lwt-sidebar-brighttext][style*="--lwt-sidebar-background-color: rgb(56, 56, 61)"],
body[lwt-sidebar-brighttext][style*="--lwt-sidebar-background-color: rgb(56, 56, 61)"] {
--lwt-sidebar-background-color: #3B3B3B !important;
--lwt-sidebar-text-color: #fff !important;
scrollbar-color: #fff6 #3B3B3B40 !important;
}
@media(-moz-platform: windows) {
.sidebar-panel:not([lwt-sidebar]) #sidebar-search-container>#search-box,
.sidebar-panel:not([lwt-sidebar]) #viewButton {
appearance: none !important;
background-color: #fff !important;
color: inherit !important;
border: 1px solid #bfbfbf !important;
border-radius: 2px !important;
}
.sidebar-panel[lwt-sidebar-brighttext][style*="--lwt-sidebar-background-color: rgb(56, 56, 61)"] #sidebar-search-container>#search-box,
.sidebar-panel[lwt-sidebar-brighttext][style*="--lwt-sidebar-background-color: rgb(56, 56, 61)"] #viewButton {
appearance: none !important;
background-color: #2B2B2B !important;
color: inherit !important;
border: 1px solid #686868 !important;
border-radius: 2px !important;
}
}
/* Linux / GTK csd support */
@media (-moz-gtk-csd-available) {
:root:not(:-moz-lwtheme) {
--toolbar-bgcolor: color-mix(in srgb, -moz-dialog 80%, #fff) !important;
--toolbar-bgimage: none !important;
--toolbar-color: -moz-dialogtext !important;
--tab-selected-bgimage: none !important;
--chrome-content-separator-color: ThreeDShadow !important;
--panel-separator-color: ThreeDShadow !important;
--button-bgcolor: color-mix(in srgb, currentColor 10%, transparent) !important;
--button-hover-bgcolor: color-mix(in srgb, currentColor 14%, transparent) !important;
--button-active-bgcolor: color-mix(in srgb, currentColor 20%, transparent) !important;
--button-color: currentColor !important;
--button-primary-bgcolor: -moz-accent-color !important;
--button-primary-hover-bgcolor: color-mix(in srgb, black 10%, -moz-accent-color) !important;
--button-primary-active-bgcolor: color-mix(in srgb, black 20%, -moz-accent-color) !important;
--button-primary-color: -moz-accent-color-foreground !important;
--autocomplete-popup-hover-background: var(--arrowpanel-dimmed) !important;
--autocomplete-popup-separator-color: color-mix(in srgb, currentColor 14%, transparent) !important;
--urlbar-box-bgcolor: var(--button-bgcolor) !important;
--urlbar-box-focus-bgcolor: var(--button-bgcolor) !important;
--urlbar-box-hover-bgcolor: var(--button-hover-bgcolor) !important;
--urlbar-box-active-bgcolor: var(--button-active-bgcolor) !important;
--urlbar-box-text-color: inherit !important;
--urlbar-box-hover-text-color: var(--urlbar-box-text-color) !important;
--urlbar-icon-fill-opacity: 0.9 !important;
--urlbar-popup-url-color: -moz-nativehyperlinktext !important;
--lwt-brighttext-url-color: #00ddff !important;
--toolbarbutton-icon-fill-attention: -moz-nativehyperlinktext !important;
--focus-outline-color: -moz-accent-color !important;
--arrowpanel-background: Field !important;
--arrowpanel-color: FieldText !important;
--arrowpanel-border-color: ThreeDShadow !important;
--arrowpanel-dimmed: color-mix(in srgb, currentColor 17%, transparent) !important;
--arrowpanel-dimmed-further: color-mix(in srgb, currentColor 30%, transparent) !important;
--panel-description-color: GrayText !important;
--panel-disabled-color: GrayText !important;
--toolbarbutton-icon-fill: currentColor !important;
--toolbar-field-background-color: Field !important;
--toolbar-field-color: FieldText !important;
--toolbar-field-border-color: ThreeDShadow !important;
--toolbar-field-focus-background-color: Field !important;
--toolbar-field-focus-color: FieldText !important;
--toolbar-field-focus-border-color: -moz-accent-color !important;
--toolbarbutton-hover-background: color-mix(in srgb, -moz-dialogtext 14%, transparent) !important;
--toolbarbutton-active-background: color-mix(in srgb, -moz-dialogtext 20%, transparent) !important;
--uc-urlbar-shadow: none;
--autocomplete-popup-highlight-color: FieldText !important;
--autocomplete-popup-highlight-background: color-mix(in srgb, currentColor 8%, transparent) !important;
--autocomplete-popup-hover-background: color-mix(in srgb, currentColor 12%, transparent) !important;
--autocomplete-popup-separator-color: #0000 !important;
--panel-item-hover-bgcolor: color-mix(in srgb, currentColor 17%, transparent) !important;
--panel-item-active-bgcolor: color-mix(in srgb, currentColor 30%, transparent) !important;
--panel-separator-color: ThreeDShadow !important;
--panel-banner-item-update-supported-bgcolor: #1bba6b !important;
--focus-outline-color: -moz-accent-color !important;
--uc-private-browsing-indicator: -moz-accent-color !important;
--uc-private-browsing-indicator-text: var(--button-primary-color);
}
#sidebar-box:not([lwt-sidebar]) {
--sidebar-background-color: -moz-dialog !important;
--sidebar-text-color: -moz-dialog-text !important;
}
#browser:not([style*="--sidebar-border-color"]) {
--sidebar-border-color: ThreeDShadow !important;
}
.sidebar-panel:not([lwt-sidebar]) {
color: -moz-dialogtext !important;
}
@media (prefers-color-scheme: light) {
:root:not(:-moz-lwtheme) {
--toolbar-bgcolor: color-mix(in srgb, -moz-dialog 65%, #fff) !important;
--urlbar-icon-fill-opacity: 0.7 !important;
--toolbar-field-border-color: transparent !important;
--toolbar-field-background-color: color-mix(in srgb, Field 90%, -moz-dialogtext) !important;
--toolbar-field-color: FieldText !important;
--toolbar-field-focus-background-color: Field !important;
--toolbar-field-focus-color: FieldText !important;
}
}
@media (prefers-color-scheme: dark) {
:root:not(:-moz-lwtheme) {
--toolbar-bgcolor: color-mix(in srgb, -moz-dialog 90%, #fff) !important;
--urlbar-icon-fill-opacity: 1.0 !important;
--toolbar-field-border-color: transparent !important;
--toolbar-field-background-color: color-mix(in srgb, Field 90%, -moz-dialogtext) !important;
--toolbar-field-color: FieldText !important;
--toolbar-field-focus-background-color: color-mix(in srgb, Field 90%, -moz-dialogtext) !important;
--toolbar-field-focus-color: FieldText !important;
}
}
}