Fix various items

- fix tab shadows
 - fix private browsing indicator / button colors
 - add button hover transitions
 - fix inactive window color in light mode
 - fix various light / dark settings
This commit is contained in:
bmFtZQ 2022-06-10 19:52:14 +08:00
parent b0a634aad5
commit 8e94eb8a97
6 changed files with 71 additions and 31 deletions

View file

@ -50,22 +50,47 @@
}
:root[privatebrowsingmode] #fxa-toolbar-menu-button {
background: var(--button-primary-bgcolor, var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention))) !important;
background: var(--uc-private-browsing-indicator, var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention))) !important;
margin: 4px !important;
padding-inline: 8px 0 !important;
color: var(--button-primary-color, var(--toolbar-bgcolor)) !important;
color: var(--uc-private-browding-indicator-text, var(--toolbar-bgcolor)) !important;
fill: currentColor !important;
}
:root[privatebrowsingmode] #fxa-toolbar-menu-button:hover {
background: var(--button-primary-hover-bgcolor, color-mix(in srgb, var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention)) 90%, transparent)) !important;
background: var(--uc-private-browding-indicator-hover, color-mix(in srgb, var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention)) 90%, transparent)) !important;
}
:root[privatebrowsingmode] #fxa-toolbar-menu-button:not([disabled=true]):is([open], [checked], :hover:active) {
background: var(--button-primary-active-bgcolor, color-mix(in srgb, var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention)) 70%, transparent)) !important;
background: var(--uc-private-browding-indicator-active, color-mix(in srgb, var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention)) 70%, transparent)) !important;
}
:root[privatebrowsingmode] #nav-bar #fxa-toolbar-menu-button>.toolbarbutton-badge-stack {
background: transparent !important;
margin-inline: 0 !important;
}
/* button background transition */
@media not (prefers-reduced-motion) {
.toolbarbutton-1>.toolbarbutton-icon,
.toolbarbutton-1>.toolbarbutton-text,
.toolbarbutton-1>.toolbarbutton-badge-stack,
.bookmark-item,
.urlbar-page-action,
.identity-box-button,
#tracking-protection-icon-container,
#fxa-toolbar-menu-button {
transition: background-color 0.25s ease !important;
}
.toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active)>.toolbarbutton-icon,
.toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active)>.toolbarbutton-text,
.toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active)>.toolbarbutton-badge-stack,
.bookmark-item:not([disabled=true]):is([open],[checked],:hover:active),
.urlbar-page-action:not([disabled=true]):is([open],[checked],:hover:active),
.identity-box-button:not([disabled=true]):is([open],[checked],:hover:active),
#tracking-protection-icon-container:not([disabled=true]):is([open],[checked],:hover:active),
#fxa-toolbar-menu-button:not([disabled=true]):is([open],[checked],:hover:active) {
transition-duration: 0s !important;
}
}