This commit is contained in:
vinceliuice 2023-06-15 09:46:38 +08:00
parent 3f2edf9fd5
commit a7dae52f98
12 changed files with 206 additions and 32 deletions

View file

@ -11,6 +11,8 @@
--gnome-browser-before-load-background: #242424; --gnome-browser-before-load-background: #242424;
--gnome-browser-content-box-background: #323232; --gnome-browser-content-box-background: #323232;
--theme-primary-color: #315bef; --theme-primary-color: #315bef;
--theme-primary-hover-color: #5073f1;
--theme-primary-active-color: #6584f3;
/* Toolbars */ /* Toolbars */
--gnome-toolbar-background: #373737; --gnome-toolbar-background: #373737;
@ -84,7 +86,7 @@
/* URL bar */ /* URL bar */
--gnome-urlbar-background: #505050; --gnome-urlbar-background: #505050;
--gnome-urlbar-border-color: #282828; --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-urlbar-color: #ffffff;
--gnome-hover-urlbar-border-color: #585858; --gnome-hover-urlbar-border-color: #585858;
--gnome-inactive-urlbar-background: #424242; --gnome-inactive-urlbar-background: #424242;

View file

@ -10,6 +10,8 @@
--gnome-browser-before-load-background: #f5f5f5; --gnome-browser-before-load-background: #f5f5f5;
--gnome-browser-content-box-background: #ffffff; --gnome-browser-content-box-background: #ffffff;
--theme-primary-color: #315bef; --theme-primary-color: #315bef;
--theme-primary-hover-color: #5073f1;
--theme-primary-active-color: #6584f3;
/* Toolbars */ /* Toolbars */
--gnome-toolbar-background: #ffffff; --gnome-toolbar-background: #ffffff;
@ -83,7 +85,7 @@
/* URL bar */ /* URL bar */
--gnome-urlbar-background: #e8e8e8; --gnome-urlbar-background: #e8e8e8;
--gnome-urlbar-border-color: #b6b6b6; --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-urlbar-color: #020202;
--gnome-hover-urlbar-border-color: #dddddd; --gnome-hover-urlbar-border-color: #dddddd;
--gnome-inactive-urlbar-background: #eeeeee; --gnome-inactive-urlbar-background: #eeeeee;

View file

@ -27,3 +27,8 @@
content: "Firefox Monterey theme"; content: "Firefox Monterey theme";
padding: 10px 10px 10px 50px; padding: 10px 10px 10px 50px;
} }
#customization-container {
background-color: var(--gnome-browser-before-load-background) !important;
color: var(--gnome-toolbar-color) !important;
}

View file

@ -27,3 +27,8 @@
content: "Firefox Monterey theme"; content: "Firefox Monterey theme";
padding: 10px 10px 10px 50px; padding: 10px 10px 10px 50px;
} }
#customization-container {
background-color: var(--gnome-browser-before-load-background) !important;
color: var(--gnome-toolbar-color) !important;
}

View file

@ -10,6 +10,8 @@
/* Browser area before a page starts loading */ /* Browser area before a page starts loading */
--gnome-browser-before-load-background: #242424; --gnome-browser-before-load-background: #242424;
--theme-primary-color: #315bef; --theme-primary-color: #315bef;
--theme-primary-hover-color: #5073f1;
--theme-primary-active-color: #6584f3;
/* Toolbars */ /* Toolbars */
--gnome-toolbar-background: #373737; --gnome-toolbar-background: #373737;
@ -78,13 +80,13 @@
--gnome-button-destructive-action-active-border-color: #851015; --gnome-button-destructive-action-active-border-color: #851015;
--gnome-button-destructive-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0); --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); --gnome-headerbar-button-active-background: rgba(255, 255, 255, 0.15);
/* URL bar */ /* URL bar */
--gnome-urlbar-background: #464646; --gnome-urlbar-background: #464646;
--gnome-urlbar-border-color: #282828; --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-urlbar-color: #ffffff;
--gnome-hover-urlbar-border-color: #585858; --gnome-hover-urlbar-border-color: #585858;
--gnome-inactive-urlbar-background: #383838; --gnome-inactive-urlbar-background: #383838;

View file

@ -9,6 +9,8 @@
/* Browser area before a page starts loading */ /* Browser area before a page starts loading */
--gnome-browser-before-load-background: #f5f5f5; --gnome-browser-before-load-background: #f5f5f5;
--theme-primary-color: #315bef; --theme-primary-color: #315bef;
--theme-primary-hover-color: #5073f1;
--theme-primary-active-color: #6584f3;
/* Toolbars */ /* Toolbars */
--gnome-toolbar-background: #ffffff; --gnome-toolbar-background: #ffffff;
@ -82,7 +84,7 @@
/* URL bar */ /* URL bar */
--gnome-urlbar-background: #f5f5f5; --gnome-urlbar-background: #f5f5f5;
--gnome-urlbar-border-color: #b6b6b3; --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-urlbar-color: #020202;
--gnome-hover-urlbar-border-color: #e5e5e5; --gnome-hover-urlbar-border-color: #e5e5e5;
--gnome-inactive-urlbar-background: #f0f0f0; --gnome-inactive-urlbar-background: #f0f0f0;

View file

@ -16,13 +16,9 @@ toolbarspring {
/* URL bar */ /* URL bar */
#urlbar { #urlbar {
/* margin-top: 0 !important;*/
box-shadow: none !important; box-shadow: none !important;
background: var(--gnome-popover-background) !important;
border-radius: 8px !important;
border: none !important;
padding: 0 !important;
} }
#urlbar-background { #urlbar-background {
box-shadow: none !important; box-shadow: none !important;
border: 0 !important; border: 0 !important;
@ -38,28 +34,27 @@ toolbarspring {
#urlbar #urlbar-input-container { #urlbar #urlbar-input-container {
padding: 0 !important; padding: 0 !important;
} }
#urlbar[breakout][breakout-extend] { #urlbar[breakout][breakout-extend] {
left: 0 !important; left: 0 !important;
top: 0 !important; top: 0 !important;
width: 100% !important; width: 100% !important;
z-index: 5 !important; z-index: 5 !important;
padding: 0 !important; padding: 0 !important;
border-radius: 10px !important; border-radius: 8px !important;
} }
#urlbar[breakout][breakout-extend][open] { #urlbar[breakout][breakout-extend][open] {
height: auto !important; height: auto !important;
max-height: unset !important; max-height: unset !important;
} }
#urlbar[breakout][breakout-extend] #urlbar-input-container { #urlbar[breakout][breakout-extend] #urlbar-input-container {
height: 32px !important; height: 32px !important;
max-height: 32px !important; max-height: 32px !important;
padding: 0 !important; padding: 0 !important;
} }
#urlbar[breakout][breakout-extend][open] #urlbar-background {
box-shadow: var(--gnome-urlbar-box-shadow) !important;
}
#urlbar-input { #urlbar-input {
text-align: center !important; text-align: center !important;
padding: 0 28px 0 0 !important; padding: 0 28px 0 0 !important;
@ -67,10 +62,20 @@ toolbarspring {
/* URL bar results */ /* URL bar results */
.urlbarView { .urlbarView {
background: transparent !important; background: var(--gnome-popover-background) !important;
color: var(--gnome-toolbar-color) !important; color: var(--gnome-toolbar-color) !important;
margin: 0 !important; margin: 6px 0 0 0 !important;
width: 100% !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 { .urlbarView-body-outer {
@ -78,7 +83,7 @@ toolbarspring {
--item-padding-end: 0 !important; --item-padding-end: 0 !important;
max-height: 40vh !important; max-height: 40vh !important;
overflow-x: auto; overflow-x: auto;
padding: 0 8px !important; padding: 0 6px !important;
} }
.urlbarView-body-inner { .urlbarView-body-inner {
@ -88,19 +93,22 @@ toolbarspring {
.urlbarView-row-inner, .urlbarView-no-wrap { .urlbarView-row-inner, .urlbarView-no-wrap {
align-items: center !important; align-items: center !important;
} }
.urlbarView-row-inner { .urlbarView-row-inner {
padding-block: 5px !important; padding-block: 5px !important;
border-radius: 5px !important; border-radius: 5px !important;
} }
.urlbarView-action { .urlbarView-action {
background: transparent !important; background: transparent !important;
} }
/* Search engines buttons */ /* Search engines buttons */
.search-one-offs { .search-one-offs {
margin: 0 0 2px !important; margin: 0 0 2px !important;
padding: 8px !important; padding: 8px !important;
background: var(--gnome-popover-background) !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; border-radius: 0 0 8px 8px !important;
} }
@ -119,10 +127,12 @@ toolbarspring {
margin: 0 !important; margin: 0 !important;
border-radius: 0 !important; border-radius: 0 !important;
} }
.searchbar-engine-one-off-item:hover, .searchbar-engine-one-off-item[selected] { .searchbar-engine-one-off-item:hover, .searchbar-engine-one-off-item[selected] {
background: var(--gnome-button-hover-background) !important; background: var(--gnome-button-hover-background) !important;
color: unset !important; color: unset !important;
} }
.searchbar-engine-one-off-item:first-child { .searchbar-engine-one-off-item:first-child {
border-radius: 5px 0 0 5px !important; border-radius: 5px 0 0 5px !important;
border-left-width: 1px !important; border-left-width: 1px !important;
@ -143,9 +153,11 @@ toolbarspring {
#urlbar[focused] .urlbar-textbox-container { #urlbar[focused] .urlbar-textbox-container {
margin: -1px !important; margin: -1px !important;
} }
#searchbar > .searchbar-textbox[focused] .searchbar-search-button { #searchbar > .searchbar-textbox[focused] .searchbar-search-button {
margin-left: -1px !important; margin-left: -1px !important;
} }
#searchbar > .searchbar-textbox[focused] .search-go-button { #searchbar > .searchbar-textbox[focused] .search-go-button {
margin-right: -1px !important; margin-right: -1px !important;
} }

View file

@ -28,3 +28,8 @@
content: "Firefox WhiteSur theme"; content: "Firefox WhiteSur theme";
padding: 10px 10px 10px 50px; padding: 10px 10px 10px 50px;
} }
#customization-container {
background-color: var(--gnome-browser-before-load-background) !important;
color: var(--gnome-toolbar-color) !important;
}

View file

@ -8,6 +8,10 @@ body {
--newtab-primary-element-text-color: #ffffff !important; --newtab-primary-element-text-color: #ffffff !important;
} }
.modalOverlayOuter {
background: color-mix(in srgb, var(--gnome-browser-before-load-background) 80%, transparent) !important;
}
.context-menu { .context-menu {
background: var(--gnome-menu-background) !important; background: var(--gnome-menu-background) !important;
border-radius: 12px !important; border-radius: 12px !important;

View file

@ -28,8 +28,8 @@
} }
#protections-popup-tp-switch::before { #protections-popup-tp-switch::before {
position: absolute !important; position: absolute !important;
top: 0px; top: -1px;
left: 0px; left: -1px;
background: var(--gnome-switch-slider-background) !important; background: var(--gnome-switch-slider-background) !important;
border: 1px solid var(--gnome-switch-slider-border-color) !important; border: 1px solid var(--gnome-switch-slider-border-color) !important;
box-shadow: var(--gnome-switch-slider-box-shadow); box-shadow: var(--gnome-switch-slider-box-shadow);

View file

@ -13,6 +13,7 @@ window {
justify-content: center; justify-content: center;
grid-auto-rows: min(90%, var(--doc-height-px)); grid-auto-rows: min(90%, var(--doc-height-px));
} }
.dialogOverlay[topmost="true"]:not(.dialogOverlay-window-modal-dialog-subdialog), #window-modal-dialog::backdrop { .dialogOverlay[topmost="true"]:not(.dialogOverlay-window-modal-dialog-subdialog), #window-modal-dialog::backdrop {
background-color: rgba(0, 0, 0, .5) !important; background-color: rgba(0, 0, 0, .5) !important;
} }
@ -98,15 +99,6 @@ dialog[subdialog] {
display: none; 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 */ /* Hadler dialog */
#os-default-handler image { #os-default-handler image {
display: none !important; display: none !important;
@ -114,3 +106,144 @@ dialog[subdialog] {
#os-default-handler .name { #os-default-handler .name {
font-weight: normal !important; 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;
}
}

View file

@ -19,7 +19,7 @@
margin: 0 !important; margin: 0 !important;
padding: 6px !important; padding: 6px !important;
box-sizing: border-box; box-sizing: border-box;
transition: all 100ms; transition: outline 100ms ease-out;
} }
/* Entries focused */ /* Entries focused */
@ -30,10 +30,12 @@
/*.findbar-textbox:focus,*/ /*.findbar-textbox:focus,*/
#loginTextbox:focus, #loginTextbox:focus,
#password1Textbox:focus { #password1Textbox:focus {
border: none !important;
border-radius: 8px !important;
outline: 2px solid var(--gnome-focused-urlbar-border-color) !important; outline: 2px solid var(--gnome-focused-urlbar-border-color) !important;
outline-offset: -2px; outline-offset: -2px;
-moz-outline-radius: 8px; -moz-outline-radius: 8px;
transition: all 100ms; transition: outline 100ms ease-out;
} }
.findbar-textbox[focused], .findbar-textbox[focused],