Fixed firefox theme issues

This commit is contained in:
vinceliuice 2023-06-12 11:28:13 +08:00
parent 91207adc90
commit a43cc54412
13 changed files with 69 additions and 9 deletions

View file

@ -108,8 +108,9 @@
--gnome-inactive-tabbar-tab-color: rgb(141, 144, 145); --gnome-inactive-tabbar-tab-color: rgb(141, 144, 145);
--gnome-inactive-tabbar-tab-background: #383838; --gnome-inactive-tabbar-tab-background: #383838;
--gnome-inactive-tabbar-tab-active-background: #424242; --gnome-inactive-tabbar-tab-active-background: #424242;
--gnome-inactive-tabbar-tab-active-border-bottom-color: #15539e; --gnome-inactive-tabbar-tab-active-border-bottom-color: var(--gnome-tabbar-tab-active-border-bottom-color);
--gnome-inactive-tabbar-tab-active-color: rgb(141, 144, 145); --gnome-inactive-tabbar-tab-active-color: var(--gnome-inactive-tabbar-tab-color);
--gnome-tab-attention-icon-color: #718be8;
/* Switch */ /* Switch */
--gnome-switch-background: #282828; --gnome-switch-background: #282828;

View file

@ -109,6 +109,7 @@
--gnome-inactive-tabbar-tab-active-background: #eeeeee; --gnome-inactive-tabbar-tab-active-background: #eeeeee;
--gnome-inactive-tabbar-tab-active-border-bottom-color: var(--gnome-tabbar-tab-active-border-bottom-color); --gnome-inactive-tabbar-tab-active-border-bottom-color: var(--gnome-tabbar-tab-active-border-bottom-color);
--gnome-inactive-tabbar-tab-active-color: var(--gnome-inactive-tabbar-tab-color); --gnome-inactive-tabbar-tab-active-color: var(--gnome-inactive-tabbar-tab-color);
--gnome-tab-attention-icon-color: #718be8;
/* Switch */ /* Switch */
--gnome-switch-background: #e1dedb; --gnome-switch-background: #e1dedb;

View file

@ -273,6 +273,14 @@ tab[selected]:-moz-window-inactive .tab-label {
border-image: none !important; border-image: none !important;
} }
/* Tab attention dot */
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]), #firefox-view-button[attention] {
background-image: radial-gradient(circle, var(--gnome-tab-attention-icon-color), var(--gnome-tab-attention-icon-color) 2px, transparent 2px) !important;
background-position: center bottom 3px !important;
background-size: 4px 4px;
background-repeat: no-repeat;
}
/* Full width tabs */ /* Full width tabs */
.tabbrowser-tab:not([style^="max-width"]):not([pinned]), .tabbrowser-tab:not([style^="max-width"]):not([pinned]),
.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]) { .tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]) {

View file

@ -164,6 +164,14 @@ tab[selected]:-moz-window-inactive .tab-label {
display: none; display: none;
} }
/* Tab attention dot */
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]), #firefox-view-button[attention] {
background-image: radial-gradient(circle, var(--gnome-tab-attention-icon-color), var(--gnome-tab-attention-icon-color) 2px, transparent 2px) !important;
background-position: center bottom 3px !important;
background-size: 4px 4px;
background-repeat: no-repeat;
}
.tabbrowser-tab[class*="identity-color-"][pinned] { .tabbrowser-tab[class*="identity-color-"][pinned] {
display: flex; display: flex;
} }

View file

@ -107,8 +107,9 @@
--gnome-tabbar-tab-active-hover-background: #313131; --gnome-tabbar-tab-active-hover-background: #313131;
--gnome-inactive-tabbar-tab-color: rgb(141, 144, 145); --gnome-inactive-tabbar-tab-color: rgb(141, 144, 145);
--gnome-inactive-tabbar-tab-active-background: #313131; --gnome-inactive-tabbar-tab-active-background: #313131;
--gnome-inactive-tabbar-tab-active-border-bottom-color: #15539e; --gnome-inactive-tabbar-tab-active-border-bottom-color: var(--gnome-tabbar-tab-active-border-bottom-color);
--gnome-inactive-tabbar-tab-active-color: rgb(141, 144, 145); --gnome-inactive-tabbar-tab-active-color: var(--gnome-inactive-tabbar-tab-color);
--gnome-tab-attention-icon-color: #718be8;
/* Switch */ /* Switch */
--gnome-switch-background: #282828; --gnome-switch-background: #282828;

View file

@ -107,6 +107,7 @@
--gnome-inactive-tabbar-tab-active-background: #f5f5f5; --gnome-inactive-tabbar-tab-active-background: #f5f5f5;
--gnome-inactive-tabbar-tab-active-border-bottom-color: var(--gnome-tabbar-tab-active-border-bottom-color); --gnome-inactive-tabbar-tab-active-border-bottom-color: var(--gnome-tabbar-tab-active-border-bottom-color);
--gnome-inactive-tabbar-tab-active-color: var(--gnome-inactive-tabbar-tab-color); --gnome-inactive-tabbar-tab-active-color: var(--gnome-inactive-tabbar-tab-color);
--gnome-tab-attention-icon-color: #718be8;
/* Switch */ /* Switch */
--gnome-switch-background: #e1dedb; --gnome-switch-background: #e1dedb;

View file

@ -177,10 +177,14 @@ toolbarspring {
width: 28px !important; width: 28px !important;
height: 26px !important; height: 26px !important;
margin: 3px 0 !important; margin: 3px 0 !important;
padding: 4px 6px !important; padding: 6px !important;
border-radius: 5px !important; border-radius: 5px !important;
} }
#star-button-box.urlbar-page-action {
padding: 5px 6px !important;
}
#identity-box:hover { #identity-box:hover {
background: var(--gnome-headerbar-button-hover-background) !important; background: var(--gnome-headerbar-button-hover-background) !important;
} }

View file

@ -318,6 +318,14 @@ tab[selected]:-moz-window-inactive {
display: none; display: none;
} }
/* Tab attention dot */
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]), #firefox-view-button[attention] {
background-image: radial-gradient(circle, var(--gnome-tab-attention-icon-color), var(--gnome-tab-attention-icon-color) 2px, transparent 2px) !important;
background-position: center bottom 3px !important;
background-size: 4px 4px;
background-repeat: no-repeat;
}
/* Remove alt colours references for multi tabs*/ /* Remove alt colours references for multi tabs*/
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line { .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
display: none; display: none;

View file

@ -0,0 +1,3 @@
<svg width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="m3 0c-1.662 0-3 1.338-3 3v8c0 1.662 1.338 3 3 3h6v-1h-6c-1.108 0-2-0.892-2-2v-8c0-1.108 0.892-2 2-2h8c1.108 0 2 0.892 2 2v6h1v-6c0-1.662-1.338-3-3-3h-8zm0.75781 3.0508-0.70703 0.70703 4.2422 4.2422h-1.293v1h2 1v-1-2h-1v1.293l-4.2422-4.2422zm8.2422 6.9492c-1.108 0-2 0.892-2 2v2c0 1.108 0.892 2 2 2h2c1.108 0 2-0.892 2-2v-2c0-1.108-0.892-2-2-2h-2zm0 1h2c0.554 0 1 0.446 1 1v2c0 0.554-0.446 1-1 1h-2c-0.554 0-1-0.446-1-1v-2c0-0.554 0.446-1 1-1z" fill="#363636"/>
</svg>

After

Width:  |  Height:  |  Size: 632 B

View file

@ -326,18 +326,19 @@ button.popup-notification-primary-button,
} }
#appMenu-popup .panel-banner-item[notificationid="update-restart"]:hover, #appMenu-popup .panel-banner-item[notificationid="update-restart"]:hover,
button.popup-notification-primary-button.popup-notification-button:hover, button.popup-notification-primary-button:hover,
#editBookmarkPanelDoneButton:hover { #editBookmarkPanelDoneButton:hover {
background: var(--gnome-button-suggested-action-hover-background) !important; background: var(--gnome-button-suggested-action-hover-background) !important;
} }
#appMenu-popup .panel-banner-item[notificationid="update-restart"]:active, #appMenu-popup .panel-banner-item[notificationid="update-restart"]:active,
button.popup-notification-primary-button.popup-notification-button:active, button.popup-notification-primary-button:active,
#editBookmarkPanelDoneButton:active { #editBookmarkPanelDoneButton:active {
background: var(--gnome-button-suggested-action-active-background) !important; background: var(--gnome-button-suggested-action-active-background) !important;
border-color: var(--gnome-button-suggested-action-active-border-color) !important; border-color: var(--gnome-button-suggested-action-active-border-color) !important;
box-shadow: var(--gnome-button-suggested-action-active-box-shadow) !important; box-shadow: var(--gnome-button-suggested-action-active-box-shadow) !important;
text-shadow: none !important; text-shadow: none !important;
transition: none !important;
} }
/* Buttons with destructive action */ /* Buttons with destructive action */

View file

@ -34,7 +34,7 @@
/* Fullscreen headerbar padding for 1 button */ /* Fullscreen headerbar padding for 1 button */
:root[tabsintitlebar][inFullscreen] #nav-bar { :root[tabsintitlebar][inFullscreen] #nav-bar {
padding-right: 40px !important; padding-right: 50px !important;
} }
/* Window buttons box */ /* Window buttons box */
@ -63,6 +63,13 @@
padding: 2px 0 !important; padding: 2px 0 !important;
width: 16px; width: 16px;
} }
:root[tabsintitlebar][inFullscreen] #titlebar .titlebar-button,
:root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton {
height: 24px !important;
width: 24px !important;
margin: 12px 4px !important;
padding: 0 !important;
}
:root[tabsintitlebar] #titlebar .titlebar-button .toolbarbutton-icon, :root[tabsintitlebar] #titlebar .titlebar-button .toolbarbutton-icon,
:root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton .toolbarbutton-icon { :root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton .toolbarbutton-icon {
opacity: 0 !important; opacity: 0 !important;
@ -75,7 +82,6 @@
/* Remove close and minimize buttons from fullscreen buttons */ /* Remove close and minimize buttons from fullscreen buttons */
:root[tabsintitlebar][inFullscreen] #window-controls #close-button, :root[tabsintitlebar][inFullscreen] #window-controls #close-button,
:root[tabsintitlebar][inFullscreen] #window-controls #minimize-button, :root[tabsintitlebar][inFullscreen] #window-controls #minimize-button,
:root[tabsintitlebar][inFullscreen] #titlebar .titlebar-buttonbox-container,
:root[tabsintitlebar][inFullscreen] #titlebar .titlebar-buttonbox .titlebar-close, :root[tabsintitlebar][inFullscreen] #titlebar .titlebar-buttonbox .titlebar-close,
:root[tabsintitlebar][inFullscreen] #titlebar .titlebar-buttonbox .titlebar-min { :root[tabsintitlebar][inFullscreen] #titlebar .titlebar-buttonbox .titlebar-min {
display: none !important; display: none !important;
@ -94,6 +100,11 @@
right: auto; right: auto;
} }
/* Fullscreen headerbar padding for 1 button */
:root[tabsintitlebar][inFullscreen] #nav-bar {
padding-left: 50px !important;
}
/* Window controls: at least 1 button */ /* Window controls: at least 1 button */
@media (-moz-gtk-csd-minimize-button), (-moz-gtk-csd-maximize-button), (-moz-gtk-csd-close-button) { @media (-moz-gtk-csd-minimize-button), (-moz-gtk-csd-maximize-button), (-moz-gtk-csd-close-button) {
:root[tabsintitlebar]:not([inFullscreen]) #nav-bar { :root[tabsintitlebar]:not([inFullscreen]) #nav-bar {

View file

@ -432,6 +432,10 @@ menu[disabled] > .menu-right {
list-style-image: url("../icons/reader-mode.svg") !important; list-style-image: url("../icons/reader-mode.svg") !important;
} }
#picture-in-picture-button > .urlbar-icon {
list-style-image: url("../icons/picture-in-picture-open.svg") !important;
}
#permissions-granted-icon { #permissions-granted-icon {
list-style-image: url("../icons/permissions-granted.svg") !important; list-style-image: url("../icons/permissions-granted.svg") !important;
} }
@ -704,6 +708,7 @@ treechildren::-moz-tree-image {
#permissions-granted-icon, #permissions-granted-icon,
#tracking-protection-icon-animatable-image, #tracking-protection-icon-animatable-image,
#reader-mode-button > .urlbar-icon, #reader-mode-button > .urlbar-icon,
#picture-in-picture-button > .urlbar-icon,
#star-button:not([starred]), #star-button:not([starred]),
#context-bookmarkpage:not([starred]) .menu-iconic-icon, #context-bookmarkpage:not([starred]) .menu-iconic-icon,
#geo-sharing-icon[sharing], .geo-icon, #geo-sharing-icon[sharing], .geo-icon,

View file

@ -154,6 +154,14 @@
background: var(--gnome-button-suggested-action-background) !important; background: var(--gnome-button-suggested-action-background) !important;
border-color: var(--gnome-button-suggested-action-border-color) !important; border-color: var(--gnome-button-suggested-action-border-color) !important;
} }
#confirmation-hint .panel-arrowcontent:hover {
background: var(--gnome-button-suggested-action-hover-background) !important;
border-color: var(--gnome-button-suggested-action-border-color) !important;
}
#confirmation-hint .panel-arrowcontent:active {
background: var(--gnome-button-suggested-action-active-background) !important;
border-color: var(--gnome-button-suggested-action-active-border-color) !important;
}
#confirmation-hint .panel-arrow { #confirmation-hint .panel-arrow {
fill: var(--gnome-button-suggested-action-border-color) !important; fill: var(--gnome-button-suggested-action-border-color) !important;
stroke: var(--gnome-button-suggested-action-border-color) !important; stroke: var(--gnome-button-suggested-action-border-color) !important;