312 lines
15 KiB
CSS
312 lines
15 KiB
CSS
/* Edge-Frfox - colors.css */
|
|
|
|
/* default colours (light & dark) */
|
|
:root:not(:-moz-lwtheme),
|
|
:root[privatebrowsingmode="temporary"][style*="--lwt-accent-color: rgb(28, 27, 34)"] {
|
|
--lwt-accent-color: light-dark(#cecece, #1C1C1C) !important;
|
|
--lwt-accent-color-inactive: light-dark(#e8e8e8, #2e2e2e) !important;
|
|
--lwt-text-color: light-dark(#000, #E5E5E5) !important;
|
|
--toolbar-bgcolor: light-dark(#f7f7f7, #3B3B3B) !important;
|
|
--toolbar-non-lwt-bgcolor: var(--toolbar-bgcolor) !important;
|
|
--toolbar-color: light-dark(#000, #fff) !important;
|
|
--toolbarbutton-icon-fill: light-dark(#000, #fff) !important;
|
|
--chrome-content-separator-color: light-dark(#bfbfbf, #686868) !important;
|
|
--lwt-toolbarbutton-icon-fill-attention: light-dark(#0078D4, #4C98D1) !important;
|
|
--toolbarbutton-icon-fill-attention: light-dark(#0078D4, #4C98D1) !important;
|
|
--lwt-tab-text: var(--toolbar-color) !important;
|
|
--lwt-selected-tab-background-color: unset !important;
|
|
--tab-selected-bgcolor: var(--toolbar-bgcolor) !important;
|
|
--toolbar-field-background-color: light-dark(#fff, #2B2B2B) !important;
|
|
--toolbar-field-color: light-dark(#000, #fff) !important;
|
|
--toolbar-field-border-color: light-dark(#0000, #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: light-dark(#0055D7, #63ADE5) !important;
|
|
--link-color: light-dark(#0078D4, #75B6E8) !important;
|
|
--urlbar-hover-highlight-color: light-dark(rgb(192 192 192 / .5), rgb(128 128 128 / .5)) !important;
|
|
--urlbar-box-bgcolor: light-dark(rgb(0 0 0 / .09), rgb(255 255 255 / .11)) !important;
|
|
--urlbar-box-hover-bgcolor: light-dark(rgb(0 0 0 / .09), rgb(255 255 255 / .11)) !important;
|
|
--urlbar-box-focus-bgcolor: light-dark(rgb(0 0 0 / .22), rgb(255 255 255 / .28)) !important;
|
|
--urlbar-icon-fill-opacity: 1 !important;
|
|
--urlbar-popup-url-color: light-dark(#0072C9, #75B6E8) !important;
|
|
--lwt-brighttext-url-color: var(--urlbar-popup-url-color) !important;
|
|
--autocomplete-popup-background: light-dark(#fff, #4A4A4A) !important;
|
|
--autocomplete-popup-color: light-dark(#fff, #fff) !important;
|
|
--autocomplete-popup-highlight-background: light-dark(#f2f2f2, #383838) !important;
|
|
--autocomplete-popup-hover-background: light-dark(#e5e5e5, #444444) !important;
|
|
--autocomplete-popup-separator-color: light-dark(#dadada00, #63636300) !important;
|
|
--button-bgcolor: light-dark(#EDEDED, #5C5C5C) !important;
|
|
--button-hover-bgcolor: light-dark(#e5e5e5, #646464) !important;
|
|
--button-active-bgcolor: light-dark(#d5d5d5, #575757) !important;
|
|
--button-primary-bgcolor: light-dark(#0078D4, #006CBE) !important;
|
|
--button-primary-hover-bgcolor: light-dark(#006CBE, #0078D4) !important;
|
|
--button-primary-active-bgcolor: light-dark(#1683D8, #005CA3) !important;
|
|
--button-primary-color: light-dark(#fff, #fff) !important;
|
|
--error-text-color: light-dark(#FF9AA2, #FF9AA2) !important;
|
|
--input-bgcolor: light-dark(#fff, #4A4A4A) !important;
|
|
--input-color: light-dark(#2b2b2b, #fff) !important;
|
|
--input-border-color: light-dark(#bebebe, #8A8A8A) !important;
|
|
--input-error-border-color: light-dark(#FF848A, #FF848A) !important;
|
|
--zoom-controls-bgcolor: light-dark(#4A4A4A, #4A4A4A) !important;
|
|
--arrowpanel-background: light-dark(#fff, #4A4A4A) !important;
|
|
--arrowpanel-color: light-dark(#1c1c1c, #fff) !important;
|
|
--panel-description-color: light-dark(#000a, #fffb) !important;
|
|
--panel-disabled-color: light-dark(#9E9E9E, #ABABAA) !important;
|
|
--arrowpanel-dimmed: light-dark(#565656, #565656) !important;
|
|
--arrowpanel-dimmed-further: light-dark(#707070, #707070) !important;
|
|
--panel-item-hover-bgcolor: light-dark(#eee, #646464) !important;
|
|
--panel-item-active-bgcolor: light-dark(#ddd, #747474) !important;
|
|
--arrowpanel-border-color: light-dark(#dadada, #636363) !important;
|
|
--panel-separator-color: light-dark(#dadada, #636363) !important;
|
|
--panel-banner-item-update-supported-bgcolor: light-dark(#188038, #81C995) !important;
|
|
--focus-outline-color: light-dark(#0055D7, #63ADE5) !important;
|
|
--panel-shortcut-color: inherit !important;
|
|
--uc-urlbar-shadow: 0 0 4px rgb(0 0 0 / .1);
|
|
--toolbarbutton-hover-background: light-dark(rgb(0 0 0 / .08), rgb(255 255 255 / .1)) !important;
|
|
--toolbarbutton-active-background: light-dark(rgb(0 0 0 / .12), rgb(255 255 255 / .16)) !important;
|
|
--uc-private-browsing-indicator: var(--button-primary-bgcolor);
|
|
--uc-private-browsing-indicator-text: var(--button-primary-color);
|
|
--tab-icon-overlay-stroke: light-dark(#fff, #4b4b4b) !important;
|
|
--tab-icon-overlay-fill: light-dark(#252525, #fff) !important;
|
|
--toolbarseparator-color: color-mix(in srgb, currentColor 40%, transparent) !important;
|
|
}
|
|
|
|
/* ensure that dark mode is enabled completely in private browsing mode. */
|
|
@media (-moz-bool-pref: "browser.theme.dark-private-windows") {
|
|
:root[privatebrowsingmode="temporary"],
|
|
:root[privatebrowsingmode="temporary"] #nav-bar,
|
|
:root[privatebrowsingmode="temporary"] #PersonalToolbar {
|
|
color-scheme: dark !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 {
|
|
background-color: light-dark(#f7f7f7, #252525) !important;
|
|
}
|
|
|
|
/* make the titlebar buttons black/white on default themes */
|
|
:root:not(:-moz-lwtheme)[tabsintitlebar] .titlebar-buttonbox {
|
|
color: var(--toolbar-color) !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 #0002, 0 0 0 1px light-dark(#0001, #0002) !important;
|
|
border-radius: 0 4px 0 0 !important;
|
|
|
|
#statuspanel[mirror] & {
|
|
border-radius: 4px 0 0 0 !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: light-dark(#000, #fff) !important;
|
|
--organizer-deemphasized-color: light-dark(#666, #bbb) !important;
|
|
--organizer-toolbar-background: light-dark(#f7f7f7, #3B3B3B) !important;
|
|
--organizer-pane-background: light-dark(#f7f7f7, #2B2B2B) !important;
|
|
--organizer-content-background: light-dark(#f7f7f7, #1C1C1C) !important;
|
|
--organizer-hover-background: light-dark(#00000025, #ffffff25) !important;
|
|
--organizer-selected-background: light-dark(#006CBE80, #006CBE80) !important;
|
|
--organizer-outline-color: light-dark(#0055D7a0, #63ADE5) !important;
|
|
--organizer-toolbar-field-background: light-dark(#fff, #2B2B2B) !important;
|
|
--organizer-toolbar-field-background-focused: light-dark(#fff, #2B2B2B) !important;
|
|
--organizer-border-color: light-dark(#bfbfbf, #686868) !important;
|
|
scrollbar-color:
|
|
light-dark(#0006, #fff6)
|
|
light-dark(#f7f7f740, #2B2B2B40) !important;
|
|
}
|
|
|
|
#placesViewsBox #downloadsListBox richlistitem[selected="true"] {
|
|
background-color: light-dark(#006CBE, #006CBE) !important;
|
|
color: light-dark(#fff, #fff) !important;
|
|
}
|
|
|
|
#placeContentColumns :is(treecol, treecolpicker) {
|
|
background-color: light-dark(#f7f7f7, #3B3B3B) !important;
|
|
color: light-dark(#000, #fff) !important;
|
|
border-inline-start: 1px solid light-dark(#bfbfbf, #686868) !important;
|
|
box-shadow: inset 0 -1px light-dark(#bfbfbf, #686868) !important;
|
|
appearance: none !important;
|
|
}
|
|
|
|
#placeContentColumns :is(treecol, treecolpicker):where(:hover) {
|
|
background-color: light-dark(#cecece, #4A4A4A ) !important;
|
|
color: light-dark(#000, #fff) !important;
|
|
}
|
|
}
|
|
|
|
/* side bar theme */
|
|
#sidebar-box:not([lwt-sidebar]) {
|
|
--sidebar-background-color: light-dark(#f7f7f7, #3b3b3b) !important;
|
|
--sidebar-text-color: light-dark(#000, #fff) !important;
|
|
appearance: none !important;
|
|
}
|
|
|
|
#browser:not([style*="--sidebar-border-color"]) {
|
|
--sidebar-border-color: light-dark(#bfbfbf, #686868) !important;
|
|
}
|
|
|
|
.sidebar-panel:not([lwt-sidebar]) {
|
|
color: light-dark(#000, #fff) !important;
|
|
scrollbar-color: light-dark(#0006, #fff6) light-dark(#f7f7f740, #3b3b3b40) !important;
|
|
|
|
/* Sidebar search box (Windows) */
|
|
@media(-moz-platform: windows) {
|
|
& #sidebar-search-container>#search-box,
|
|
& #viewButton {
|
|
appearance: none !important;
|
|
background-color: light-dark(#fff, #2b2b2b) !important;
|
|
color: inherit !important;
|
|
border: 1px solid light-dark(#bfbfbf, #686868) !important;
|
|
border-radius: 4px !important;
|
|
padding: 6px 8px !important;
|
|
|
|
&:focus {
|
|
border-width: 2px !important;
|
|
padding: 5px 7px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@-moz-document url(chrome://browser/content/syncedtabs/sidebar.xhtml){
|
|
body {
|
|
background: transparent !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;
|
|
}
|
|
}
|
|
}
|