diff --git a/src/other/firefox/Monterey/colors/dark.css b/src/other/firefox/Monterey/colors/dark.css index a4712d4..e822c1e 100644 --- a/src/other/firefox/Monterey/colors/dark.css +++ b/src/other/firefox/Monterey/colors/dark.css @@ -11,6 +11,8 @@ --gnome-browser-before-load-background: #242424; --gnome-browser-content-box-background: #323232; --theme-primary-color: #315bef; + --theme-primary-hover-color: #5073f1; + --theme-primary-active-color: #6584f3; /* Toolbars */ --gnome-toolbar-background: #373737; @@ -84,7 +86,7 @@ /* URL bar */ --gnome-urlbar-background: #505050; --gnome-urlbar-border-color: #282828; - --gnome-urlbar-box-shadow: inset 0 0 0 1px rgba(21, 83, 158, 0); + --gnome-urlbar-box-shadow: 0 3px 6px 1px rgba(0,0,0, .2), 0 5px 16px 3px rgba(0,0,0, .15), 0 0 0 1px rgba(0, 0, 0, 0.75); --gnome-urlbar-color: #ffffff; --gnome-hover-urlbar-border-color: #585858; --gnome-inactive-urlbar-background: #424242; diff --git a/src/other/firefox/Monterey/colors/light.css b/src/other/firefox/Monterey/colors/light.css index 838cd0c..56a541d 100644 --- a/src/other/firefox/Monterey/colors/light.css +++ b/src/other/firefox/Monterey/colors/light.css @@ -10,6 +10,8 @@ --gnome-browser-before-load-background: #f5f5f5; --gnome-browser-content-box-background: #ffffff; --theme-primary-color: #315bef; + --theme-primary-hover-color: #5073f1; + --theme-primary-active-color: #6584f3; /* Toolbars */ --gnome-toolbar-background: #ffffff; @@ -83,7 +85,7 @@ /* URL bar */ --gnome-urlbar-background: #e8e8e8; --gnome-urlbar-border-color: #b6b6b6; - --gnome-urlbar-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08), 0 5px 8px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.03); + --gnome-urlbar-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08), 0 5px 8px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(0,0,0, 0.12); --gnome-urlbar-color: #020202; --gnome-hover-urlbar-border-color: #dddddd; --gnome-inactive-urlbar-background: #eeeeee; diff --git a/src/other/firefox/Monterey/theme-alt.css b/src/other/firefox/Monterey/theme-alt.css index 82d400b..f29e3d2 100644 --- a/src/other/firefox/Monterey/theme-alt.css +++ b/src/other/firefox/Monterey/theme-alt.css @@ -27,3 +27,8 @@ content: "Firefox Monterey theme"; padding: 10px 10px 10px 50px; } + +#customization-container { + background-color: var(--gnome-browser-before-load-background) !important; + color: var(--gnome-toolbar-color) !important; +} diff --git a/src/other/firefox/Monterey/theme.css b/src/other/firefox/Monterey/theme.css index 0872a60..d76ec8a 100644 --- a/src/other/firefox/Monterey/theme.css +++ b/src/other/firefox/Monterey/theme.css @@ -27,3 +27,8 @@ content: "Firefox Monterey theme"; padding: 10px 10px 10px 50px; } + +#customization-container { + background-color: var(--gnome-browser-before-load-background) !important; + color: var(--gnome-toolbar-color) !important; +} diff --git a/src/other/firefox/WhiteSur/colors/dark.css b/src/other/firefox/WhiteSur/colors/dark.css index ad92153..18d3ee0 100644 --- a/src/other/firefox/WhiteSur/colors/dark.css +++ b/src/other/firefox/WhiteSur/colors/dark.css @@ -10,6 +10,8 @@ /* Browser area before a page starts loading */ --gnome-browser-before-load-background: #242424; --theme-primary-color: #315bef; + --theme-primary-hover-color: #5073f1; + --theme-primary-active-color: #6584f3; /* Toolbars */ --gnome-toolbar-background: #373737; @@ -78,13 +80,13 @@ --gnome-button-destructive-action-active-border-color: #851015; --gnome-button-destructive-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0); - --gnome-headerbar-button-hover-background: rgba(255, 255, 255, 0.1); + --gnome-headerbar-button-hover-background: rgba(255, 255, 255, 0.1); --gnome-headerbar-button-active-background: rgba(255, 255, 255, 0.15); /* URL bar */ --gnome-urlbar-background: #464646; --gnome-urlbar-border-color: #282828; - --gnome-urlbar-box-shadow: inset 0 0 0 1px rgba(21, 83, 158, 0); + --gnome-urlbar-box-shadow: 0 3px 6px 1px rgba(0,0,0, .2), 0 5px 16px 3px rgba(0,0,0, .15), 0 0 0 1px rgba(0, 0, 0, 0.75); --gnome-urlbar-color: #ffffff; --gnome-hover-urlbar-border-color: #585858; --gnome-inactive-urlbar-background: #383838; diff --git a/src/other/firefox/WhiteSur/colors/light.css b/src/other/firefox/WhiteSur/colors/light.css index fdcc61f..c2a2c36 100644 --- a/src/other/firefox/WhiteSur/colors/light.css +++ b/src/other/firefox/WhiteSur/colors/light.css @@ -9,6 +9,8 @@ /* Browser area before a page starts loading */ --gnome-browser-before-load-background: #f5f5f5; --theme-primary-color: #315bef; + --theme-primary-hover-color: #5073f1; + --theme-primary-active-color: #6584f3; /* Toolbars */ --gnome-toolbar-background: #ffffff; @@ -82,7 +84,7 @@ /* URL bar */ --gnome-urlbar-background: #f5f5f5; --gnome-urlbar-border-color: #b6b6b3; - --gnome-urlbar-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08), 0 5px 8px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.03); + --gnome-urlbar-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08), 0 5px 8px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(0,0,0, 0.12); --gnome-urlbar-color: #020202; --gnome-hover-urlbar-border-color: #e5e5e5; --gnome-inactive-urlbar-background: #f0f0f0; diff --git a/src/other/firefox/WhiteSur/parts/headerbar-urlbar.css b/src/other/firefox/WhiteSur/parts/headerbar-urlbar.css index 85e493d..72f17da 100644 --- a/src/other/firefox/WhiteSur/parts/headerbar-urlbar.css +++ b/src/other/firefox/WhiteSur/parts/headerbar-urlbar.css @@ -16,13 +16,9 @@ toolbarspring { /* URL bar */ #urlbar { -/* margin-top: 0 !important;*/ box-shadow: none !important; - background: var(--gnome-popover-background) !important; - border-radius: 8px !important; - border: none !important; - padding: 0 !important; } + #urlbar-background { box-shadow: none !important; border: 0 !important; @@ -38,28 +34,27 @@ toolbarspring { #urlbar #urlbar-input-container { padding: 0 !important; } + #urlbar[breakout][breakout-extend] { left: 0 !important; top: 0 !important; width: 100% !important; z-index: 5 !important; padding: 0 !important; - border-radius: 10px !important; + border-radius: 8px !important; } + #urlbar[breakout][breakout-extend][open] { height: auto !important; max-height: unset !important; } + #urlbar[breakout][breakout-extend] #urlbar-input-container { height: 32px !important; max-height: 32px !important; padding: 0 !important; } -#urlbar[breakout][breakout-extend][open] #urlbar-background { - box-shadow: var(--gnome-urlbar-box-shadow) !important; -} - #urlbar-input { text-align: center !important; padding: 0 28px 0 0 !important; @@ -67,10 +62,20 @@ toolbarspring { /* URL bar results */ .urlbarView { - background: transparent !important; + background: var(--gnome-popover-background) !important; color: var(--gnome-toolbar-color) !important; - margin: 0 !important; + margin: 6px 0 0 0 !important; width: 100% !important; + position: absolute !important; + box-shadow: var(--gnome-urlbar-box-shadow) !important; + border-radius: 12px !important; + border: 0 !important; +} + +@media (prefers-color-scheme: dark) { + .urlbarView { + border: 1px solid rgba(255, 255, 255, 0.1) !important; + } } .urlbarView-body-outer { @@ -78,7 +83,7 @@ toolbarspring { --item-padding-end: 0 !important; max-height: 40vh !important; overflow-x: auto; - padding: 0 8px !important; + padding: 0 6px !important; } .urlbarView-body-inner { @@ -88,19 +93,22 @@ toolbarspring { .urlbarView-row-inner, .urlbarView-no-wrap { align-items: center !important; } + .urlbarView-row-inner { padding-block: 5px !important; border-radius: 5px !important; } + .urlbarView-action { background: transparent !important; } + /* Search engines buttons */ .search-one-offs { margin: 0 0 2px !important; padding: 8px !important; background: var(--gnome-popover-background) !important; - border-top: 1px solid var(--gnome-button-border-color) !important; + border-top: 1px solid var(--gnome-toolbar-border-color) !important; border-radius: 0 0 8px 8px !important; } @@ -119,10 +127,12 @@ toolbarspring { margin: 0 !important; border-radius: 0 !important; } + .searchbar-engine-one-off-item:hover, .searchbar-engine-one-off-item[selected] { background: var(--gnome-button-hover-background) !important; color: unset !important; } + .searchbar-engine-one-off-item:first-child { border-radius: 5px 0 0 5px !important; border-left-width: 1px !important; @@ -143,9 +153,11 @@ toolbarspring { #urlbar[focused] .urlbar-textbox-container { margin: -1px !important; } + #searchbar > .searchbar-textbox[focused] .searchbar-search-button { margin-left: -1px !important; } + #searchbar > .searchbar-textbox[focused] .search-go-button { margin-right: -1px !important; } diff --git a/src/other/firefox/WhiteSur/theme.css b/src/other/firefox/WhiteSur/theme.css index f48e4f4..a07d187 100644 --- a/src/other/firefox/WhiteSur/theme.css +++ b/src/other/firefox/WhiteSur/theme.css @@ -28,3 +28,8 @@ content: "Firefox WhiteSur theme"; padding: 10px 10px 10px 50px; } + +#customization-container { + background-color: var(--gnome-browser-before-load-background) !important; + color: var(--gnome-toolbar-color) !important; +} diff --git a/src/other/firefox/common/pages/newtab.css b/src/other/firefox/common/pages/newtab.css index a400eba..8d7af50 100644 --- a/src/other/firefox/common/pages/newtab.css +++ b/src/other/firefox/common/pages/newtab.css @@ -8,6 +8,10 @@ body { --newtab-primary-element-text-color: #ffffff !important; } +.modalOverlayOuter { + background: color-mix(in srgb, var(--gnome-browser-before-load-background) 80%, transparent) !important; +} + .context-menu { background: var(--gnome-menu-background) !important; border-radius: 12px !important; diff --git a/src/other/firefox/common/parts/controls.css b/src/other/firefox/common/parts/controls.css index a4d6bfe..bb3917f 100644 --- a/src/other/firefox/common/parts/controls.css +++ b/src/other/firefox/common/parts/controls.css @@ -28,8 +28,8 @@ } #protections-popup-tp-switch::before { position: absolute !important; - top: 0px; - left: 0px; + top: -1px; + left: -1px; background: var(--gnome-switch-slider-background) !important; border: 1px solid var(--gnome-switch-slider-border-color) !important; box-shadow: var(--gnome-switch-slider-box-shadow); diff --git a/src/other/firefox/common/parts/dialogs.css b/src/other/firefox/common/parts/dialogs.css index 4fdf87b..acc2142 100644 --- a/src/other/firefox/common/parts/dialogs.css +++ b/src/other/firefox/common/parts/dialogs.css @@ -13,6 +13,7 @@ window { justify-content: center; grid-auto-rows: min(90%, var(--doc-height-px)); } + .dialogOverlay[topmost="true"]:not(.dialogOverlay-window-modal-dialog-subdialog), #window-modal-dialog::backdrop { background-color: rgba(0, 0, 0, .5) !important; } @@ -98,15 +99,6 @@ dialog[subdialog] { display: none; } -/* Buttons borders - only suppor for cancel/ok */ -/*.dialog-button-box button[dlgtype="accept"] {*/ -/* border-right: 0 !important;*/ -/* border-left: 0 !important;*/ -/*}*/ -/*.dialog-button-box button[dlgtype="cancel"]:not(#hack) {*/ -/* border-left: 0 !important;*/ -/*}*/ - /* Hadler dialog */ #os-default-handler image { display: none !important; @@ -114,3 +106,144 @@ dialog[subdialog] { #os-default-handler .name { font-weight: normal !important; } + +/* Print dialog */ +:root[dialogroot], :host(dialog) { + --in-content-page-background: var(--gnome-toolbar-background) !important; +} + +#editBookmarkPanelContent > input, +#editBookmarkPanelContent > hbox > input { + padding: 0 12px !important; + min-height: 26px !important; + border: 1px solid var(--gnome-button-border-color) !important; + border-bottom-color: var(--gnome-button-border-accent-color) !important; + background-color: #ffffff !important; + border-radius: 8px !important; +} + +#editBookmarkPanelContent > input:focus-visible, +#editBookmarkPanelContent > hbox > input:focus-visible { + outline: 2px solid var(--gnome-focused-urlbar-border-color) !important; + outline-offset: -2px; + -moz-outline-radius: 8px; +} + +:root[dialogroot] select, +:host(dialog) select { + background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important; + background-color: #ffffff !important; + background-position: right 12px center !important; + background-repeat: no-repeat !important; + background-size: auto 12px !important; + border: 1px solid var(--gnome-button-border-color) !important; + border-bottom-color: var(--gnome-button-border-accent-color) !important; + border-radius: 8px !important; + padding: 2px 12px !important; + min-height: 28px !important; + min-width: 28px !important; + color: var(--gnome-toolbar-color) !important; + box-shadow: var(--gnome-button-box-shadow) !important; +} + +#cancel-button, +#print-button.primary { + min-width: 7em !important; + min-height: 28px !important; + border-radius: 8px !important; + border: 1px solid var(--gnome-button-border-color) !important; + border-bottom-color: var(--gnome-button-border-accent-color) !important; + color: var(--gnome-toolbar-color) !important; +} + +#print-button.primary { + background-color: var(--theme-primary-color) !important; + color: #ffffff !important; + border-color: var(--theme-primary-color) !important; +} + +:root[dialogroot] select:not([disabled]):hover, +:host(dialog) select:not([disabled]):hover { + background-color: #f5f5f5 !important; +} + +#print-button.primary:hover { + background-color: var(--theme-primary-hover-color) !important; +} + +:root[dialogroot] select:not([disabled]):active, +:host(dialog) select:not([disabled]):active { + background-color: #efefef !important; +} + +#print-button.primary:active { + background-color: var(--theme-primary-active-color) !important; +} + +.toggle-group-label { + border: 1px solid var(--gnome-button-border-color) !important; + border-bottom-color: var(--gnome-button-border-accent-color) !important; +} + +.toggle-group-label:first-of-type { + border-start-start-radius: 8px !important; + border-end-start-radius: 8px !important; +} + +.toggle-group-label:last-of-type { + border-end-end-radius: 8px !important; + border-start-end-radius: 8px !important; + border-left: none !important; +} + +.toggle-group-input:enabled:checked + .toggle-group-label { + background-color: var(--theme-primary-color) !important; + color: #ffffff !important; + border-color: var(--theme-primary-color) !important; +} + +.toggle-group-input:enabled:checked + .toggle-group-label:hover { + background-color: var(--theme-primary-hover-color) !important; + color: #ffffff !important; +} + +@media (prefers-color-scheme: dark) { +#editBookmarkPanelContent > input, +#editBookmarkPanelContent > hbox > input { + background-color: #666666 !important; +} + +#cancel-button, +#print-button.primary { + box-shadow: var(--gnome-button-box-shadow) !important; +} + +#print-button.primary { + border-color: var(--gnome-button-border-color) !important; + border-bottom-color: var(--gnome-button-border-accent-color) !important; +} + +.toggle-group-label { + box-shadow: var(--gnome-button-box-shadow) !important; +} + +.toggle-group-input:enabled:checked + .toggle-group-label { + border-color: var(--gnome-button-border-color) !important; + border-bottom-color: var(--gnome-button-border-accent-color) !important; +} + +:root[dialogroot] select, +:host(dialog) select { + background-color: #666666 !important; +} + +:root[dialogroot] select:not([disabled]):hover, +:host(dialog) select:not([disabled]):hover { + background-color: #777777 !important; +} + +:root[dialogroot] select:not([disabled]):active, +:host(dialog) select:not([disabled]):active { + background-color: #888888 !important; +} +} diff --git a/src/other/firefox/common/parts/entries.css b/src/other/firefox/common/parts/entries.css index 00adf4b..bf8ceab 100644 --- a/src/other/firefox/common/parts/entries.css +++ b/src/other/firefox/common/parts/entries.css @@ -19,7 +19,7 @@ margin: 0 !important; padding: 6px !important; box-sizing: border-box; - transition: all 100ms; + transition: outline 100ms ease-out; } /* Entries focused */ @@ -30,10 +30,12 @@ /*.findbar-textbox:focus,*/ #loginTextbox:focus, #password1Textbox:focus { + border: none !important; + border-radius: 8px !important; outline: 2px solid var(--gnome-focused-urlbar-border-color) !important; outline-offset: -2px; -moz-outline-radius: 8px; - transition: all 100ms; + transition: outline 100ms ease-out; } .findbar-textbox[focused],