Siklos/edge-frfox
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add new private browsing indicator

Browse source 
also:
 - removes tweaks "fxa-button-as-private-indicator" and
   "less-permissions-button-padding"
 - reformat README.md to become easier to read
 - add unified extensions icon (beta and nightly)
 - better integrate Firefox view button
This commit is contained in:
bmFtZQ 2022-12-14 23:28:51 +08:00
parent 49ea90b007
commit 5ed069c80a
7 changed files with 564 additions and 572 deletions
Download patch file Download diff file Expand all files Collapse all files

62
chrome/toolbar/navbar.css
View file

@ -52,48 +52,6 @@
scale: 1.5 !important;
}
:root[privatebrowsingmode] #fxa-toolbar-menu-button::before {
content: "Private" !important;
display: -moz-box !important;
font-size: 12px !important;
}
:root[privatebrowsingmode] #fxa-toolbar-menu-button {
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(--uc-private-browding-indicator-text, var(--toolbar-bgcolor)) !important;
fill: currentColor !important;
}
:root[privatebrowsingmode] #fxa-toolbar-menu-button:hover {
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(--uc-private-browding-indicator-active, color-mix(in srgb, var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention)) 70%, transparent)) !important;
}
@media (-moz-gtk-csd-available) {
:root[privatebrowsingmode] #fxa-toolbar-menu-button:not(:-moz-lwtheme) {
background: -moz-accent-color !important;
color: -moz-accent-color-foreground !important;
}
:root[privatebrowsingmode] #fxa-toolbar-menu-button:not(:-moz-lwtheme):hover {
background:color-mix(in srgb, black 8%, -moz-accent-color) !important;
}
:root[privatebrowsingmode] #fxa-toolbar-menu-button:not(:-moz-lwtheme):not([disabled=true]):is([open], [checked], :hover:active) {
background: color-mix(in srgb, black 16%, -moz-accent-color) !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,
@ -103,23 +61,21 @@
.urlbar-page-action,
.identity-box-button,
#tracking-protection-icon-container,
#fxa-toolbar-menu-button,
panel button,
panel menulist,
.titlebar-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,
:not(.panel-subview-body>toolbaritem)>.bookmark-item:not(menu, menuitem):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),
panel button:not([disabled=true]):is([open],[checked],:hover:active),
panel menulist:not([disabled=true]):is([open],[checked],:hover:active),
.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,
:not(.panel-subview-body>toolbaritem)>.bookmark-item:not(menu, menuitem):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),
panel button:not([disabled=true]):is([open], [checked], :hover:active),
panel menulist:not([disabled=true]):is([open], [checked], :hover:active),
.titlebar-button:not([disabled=true]):hover:active {
transition-duration: 0s !important;
}

121
chrome/toolbar/tabbar.css
View file

@ -197,38 +197,30 @@
inset-inline-end: -6px !important;
}
#tabbrowser-tabs[closebuttons="activetab"] :is(
.tab-icon-overlay[soundplaying]:not([crashed]),
#tabbrowser-tabs[closebuttons="activetab"] :is(.tab-icon-overlay[soundplaying]:not([crashed]),
.tab-icon-overlay[muted]:not([crashed]),
.tab-icon-overlay[activemedia-blocked]:not([crashed])
) {
.tab-icon-overlay[activemedia-blocked]:not([crashed])) {
stroke: var(--tab-icon-overlay-stroke, white) !important;
color: var(--tab-icon-overlay-fill, black) !important;
fill-opacity: 1 !important;
}
#TabsToolbar[brighttext] #tabbrowser-tabs[closebuttons="activetab"] :is(
.tab-icon-overlay[soundplaying]:not([crashed]),
#TabsToolbar[brighttext] #tabbrowser-tabs[closebuttons="activetab"] :is(.tab-icon-overlay[soundplaying]:not([crashed]),
.tab-icon-overlay[muted]:not([crashed]),
.tab-icon-overlay[activemedia-blocked]:not([crashed])
) {
.tab-icon-overlay[activemedia-blocked]:not([crashed])) {
stroke: var(--tab-icon-overlay-stroke, black) !important;
color: var(--tab-icon-overlay-fill, white) !important;
}
#tabbrowser-tabs[closebuttons="activetab"] :is(
.tab-icon-overlay:not([crashed])[soundplaying]:hover,
#tabbrowser-tabs[closebuttons="activetab"] :is(.tab-icon-overlay:not([crashed])[soundplaying]:hover,
.tab-icon-overlay:not([crashed])[muted]:hover,
.tab-icon-overlay:not([crashed])[activemedia-blocked]:hover
) {
.tab-icon-overlay:not([crashed])[activemedia-blocked]:hover) {
background-color: var(--tab-icon-overlay-stroke, white) !important;
}
#TabsToolbar[brighttext] #tabbrowser-tabs[closebuttons="activetab"] :is(
.tab-icon-overlay:not([crashed])[soundplaying]:hover,
#TabsToolbar[brighttext] #tabbrowser-tabs[closebuttons="activetab"] :is(.tab-icon-overlay:not([crashed])[soundplaying]:hover,
.tab-icon-overlay:not([crashed])[muted]:hover,
.tab-icon-overlay:not([crashed])[activemedia-blocked]:hover
) {
.tab-icon-overlay:not([crashed])[activemedia-blocked]:hover) {
background-color: var(--tab-icon-overlay-stroke, black) !important;
}
@ -248,11 +240,11 @@
#TabsToolbar .toolbarbutton-1>.toolbarbutton-icon,
#TabsToolbar .toolbarbutton-1>.toolbarbutton-badge-stack {
border-radius: var(--toolbarbutton-border-radius) !important;
padding: var(--uc-toolbarbutton-inner-padding) var(--uc-toolbarbutton-inner-inline-padding) !important;
padding: var(--uc-toolbarbutton-inner-padding) calc(var(--uc-toolbarbutton-inner-padding) + 2px) !important;
}
#TabsToolbar .toolbarbutton-1>.toolbarbutton-icon {
width: calc(2 * var(--uc-toolbarbutton-inner-inline-padding) + 16px) !important;
width: calc(2 * (var(--uc-toolbarbutton-inner-padding) + 2px) + 16px) !important;
height: calc(2 * var(--uc-toolbarbutton-inner-padding) + 16px) !important;
}
@ -361,6 +353,7 @@ toolbarbutton[part="scrollbutton-down"] {
#tabbrowser-tabs {
margin-inline-start: -6px !important;
border-inline: none !important;
}
#TabsToolbar {
@ -375,22 +368,27 @@ toolbarbutton[part="scrollbutton-down"] {
clip-path: inset(-4px -4px 0) !important;
}
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])>.tab-stack>.tab-background {
box-shadow: 0 0 0 1px var(--lwt-tab-line-color, var(--lwt-tabs-border-color, transparent)),
0 2px 4px rgba(0, 0, 0, 0.3), 0 0px 2px rgba(0, 0, 0, 0.2) !important;
:root {
--uc-titlebar-shadow: 0 -3px 2px -3px rgba(0, 0, 0, 0.2) inset;
--uc-tab-shadow:
0 0 0 1px var(--lwt-tab-line-color, var(--lwt-tabs-border-color, transparent)),
0 2px 4px rgba(0, 0, 0, 0.3), 0 0px 2px rgba(0, 0, 0, 0.2);
}
:root[lwtheme-brighttext="true"] {
--uc-titlebar-shadow: 0 -3px 2px -3px rgba(0, 0, 0, 0.75) inset inset;
--uc-tab-shadow:
0 0 0 1px var(--lwt-tab-line-color, var(--lwt-tabs-border-color, transparent)),
0 2px 4px rgba(0, 0, 0, 0.45), 0 0px 2px rgba(0, 0, 0, 0.2);
}
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])>.tab-stack>.tab-background,
#TabsToolbar #firefox-view-button[open]>.toolbarbutton-icon {
box-shadow: var(--uc-tab-shadow) !important;
}
#titlebar {
box-shadow: 0 -3px 2px -3px rgba(0, 0, 0, 0.2) inset !important;
}
:root[lwtheme-brighttext="true"] .tabbrowser-tab:is([visuallyselected="true"], [multiselected])>.tab-stack>.tab-background {
box-shadow: 0 0 0 1px var(--lwt-tab-line-color, var(--lwt-tabs-border-color, transparent)),
0 2px 4px rgba(0, 0, 0, 0.45), 0 0px 2px rgba(0, 0, 0, 0.2) !important;
}
:root[lwtheme-brighttext="true"] #titlebar {
box-shadow: 0 -3px 2px -3px rgba(0, 0, 0, 0.75) inset !important;
box-shadow: var(--uc-titlebar-shadow) !important;
}
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab .tab-label-container {
@ -404,3 +402,64 @@ toolbarbutton[part="scrollbutton-down"] {
.tab-content {
padding-inline: var(--inline-tab-padding) 0 !important;
}
/* new private browsing indicator */
:root[privatebrowsingmode="temporary"] #TabsToolbar .toolbar-items,
:root[privatebrowsingmode="temporary"] #TabsToolbar .titlebar-buttonbox-container {
position: relative;
z-index: 1;
}
:root[privatebrowsingmode="temporary"] .titlebar-spacer[type="post-tabs"] {
display: none !important;
}
#private-browsing-indicator-with-label {
position: relative !important;
isolation: isolate;
margin-inline: -16px -16px !important;
padding-inline: 32px 24px !important;
font-size: 12px;
color: var(--uc-private-browsing-indicator-text, var(--toolbar-bgcolor)) !important;
--uc-bg-color: var(--uc-private-browsing-indicator, var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention)));
--uc-gradient: linear-gradient(to right, transparent, var(--uc-bg-color) 35%);
--uc-gradient-alt: linear-gradient(to right, transparent, var(--uc-bg-color) 25%, var(--uc-bg-color) 75%, transparent);
background: var(--uc-gradient);
}
@media (-moz-gtk-csd-available) {
:root[privatebrowsingmode] #fxa-toolbar-menu-button:not(:-moz-lwtheme) {
--uc-bg-color: -moz-accent-color !important;
color: -moz-accent-color-foreground !important;
}
}
@media (-moz-platform: windows),
(-moz-gtk-csd-available) {
@media not (-moz-gtk-csd-reversed-placement) {
:root[tabsintitlebar] #toolbar-menubar:not([autohide="false"])~#TabsToolbar #private-browsing-indicator-with-label {
background: var(--uc-gradient-alt);
}
}
}
#private-browsing-indicator-with-label .private-browsing-indicator-icon {
height: 24px !important;
width: 24px !important;
}
:root,
:root[lang^="en"] {
--uc-string-private: "Private";
}
/* Change "Private Browsing" text to "Private" (English locale only) */
:root:is([lang^="en"]) #private-browsing-indicator-with-label>label {
display: none !important;
}
:root:is([lang^="en"]) #private-browsing-indicator-with-label::after {
content: var(--uc-string-private);
margin-block: 1px 2px;
margin-inline: 6px 5px;
}

9
chrome/toolbar/urlbar.css
View file

@ -1,7 +1,7 @@
/* EdgeFr-Fox by bmFtZQ - urlbar.css */
:root {
--urlbar-min-height: 28px !important;
--urlbar-min-height: 24px !important;
--urlbarView-item-inline-padding: 14px !important;
--urlbar-icon-border-radius: var(--toolbarbutton-border-radius) !important;
--urlbar-icon-padding: calc(var(--toolbarbutton-inner-padding) - 2px) !important;
@ -192,10 +192,9 @@
}
:is(:root:not(:-moz-lwtheme),
:root[style*="--lwt-accent-color: rgb(240, 240, 244)"] #urlbar[focused="true"],
:root[lwt-default-theme-in-dark-mode="true"],
:root[style*="--lwt-accent-color: rgb(28, 27, 34)"]
) #urlbar-search-mode-indicator {
:root[style*="--lwt-accent-color: rgb(240, 240, 244)"] #urlbar[focused="true"],
:root[lwt-default-theme-in-dark-mode="true"],
:root[style*="--lwt-accent-color: rgb(28, 27, 34)"]) #urlbar-search-mode-indicator {
background-color: var(--urlbar-box-hover-bgcolor) !important;
}