498 lines
16 KiB
CSS
498 lines
16 KiB
CSS
/* EdgeFr-Fox 2 - tabbar */
|
|
|
|
@supports -moz-bool-pref("uc.tweak.floating-tabs.equal-margin") and -moz-bool-pref("uc.tweak.floating-tabs") {
|
|
:root #titlebar {
|
|
--tab-block-margin: 5px !important;
|
|
}
|
|
}
|
|
|
|
@supports (not -moz-bool-pref("uc.tweak.floating-tabs.equal-margin")) or (not -moz-bool-pref("uc.tweak.floating-tabs")) {
|
|
:root #titlebar {
|
|
--tab-block-margin: 8px !important;
|
|
}
|
|
}
|
|
|
|
:root #titlebar {
|
|
--tab-min-height: 32px !important;
|
|
--inline-tab-padding: 11px !important;
|
|
--tab-border-radius: 4px !important;
|
|
|
|
--uc-toolbarbutton-inner-padding: 6px !important;
|
|
--toolbarbutton-border-radius: 4px !important;
|
|
--toolbarbutton-tabsline-border-radius: 8px !important;
|
|
--tabs-navbar-shadow-size: 0 !important;
|
|
--tab-shadow-max-size: 0 !important;
|
|
}
|
|
|
|
/* tab open/close transition */
|
|
.tabbrowser-tab:not([pinned]) {
|
|
transition-property: min-width, max-width !important;
|
|
transition-duration: 150ms !important;
|
|
transition-timing-function: cubic-bezier(0, .75, .25, 1) !important;
|
|
}
|
|
|
|
#tabbrowser-tabs[movingtab]>#tabbrowser-arrowscrollbox>.tabbrowser-tab[fadein]:not([selected]):not([multiselected]),
|
|
.tabbrowser-tab[tab-grouping],
|
|
.tabbrowser-tab[tabdrop-samewindow] {
|
|
transition: transform 200ms cubic-bezier(0, .75, .25, 1) !important;
|
|
}
|
|
|
|
:root:is([inFullscreen], :not([tabsintitlebar])) #titlebar {
|
|
--tab-block-margin: 0px !important;
|
|
}
|
|
|
|
/* hide space above tabs when maximised for non-macOS versions of Firefox */
|
|
@media not (-moz-platform: macos) {
|
|
:root:is([inFullscreen], :not([tabsintitlebar]), [sizemode="maximized"]) #titlebar,
|
|
#toolbar-menubar:not([inactive])+#TabsToolbar {
|
|
--tab-block-margin: 0px !important;
|
|
}
|
|
}
|
|
|
|
.tab-background {
|
|
border-radius: var(--tab-border-radius);
|
|
border-bottom-left-radius: 0 !important;
|
|
border-bottom-right-radius: 0 !important;
|
|
margin-block: 0 !important;
|
|
border: 0 !important;
|
|
position: relative !important;
|
|
--uc-tab-corner-bg: transparent;
|
|
}
|
|
|
|
/* rounded bottom corners */
|
|
.tab-background::before,
|
|
.tab-background::after {
|
|
content: "" !important;
|
|
display: block !important;
|
|
position: absolute !important;
|
|
width: 8px !important;
|
|
height: 8px !important;
|
|
bottom: 0 !important;
|
|
pointer-events: none !important;
|
|
clip-path: inset(0);
|
|
}
|
|
|
|
.tab-background::before {
|
|
border-bottom-right-radius: var(--tab-border-radius) !important;
|
|
left: 0 !important;
|
|
transform: translateX(-8px) !important;
|
|
box-shadow: 4px 4px 0 4px var(--uc-tab-corner-bg) !important;
|
|
}
|
|
|
|
.tab-background::after {
|
|
border-bottom-left-radius: var(--tab-border-radius) !important;
|
|
right: 0 !important;
|
|
transform: translateX(8px) !important;
|
|
box-shadow: -4px 4px 0 4px var(--uc-tab-corner-bg) !important;
|
|
}
|
|
|
|
.tabbrowser-tab[selected="true"] .tab-background {
|
|
--uc-tab-corner-bg: var(--lwt-selected-tab-background-color, var(--toolbar-bgcolor));
|
|
}
|
|
|
|
.tab-background:is([selected], [multiselected]) {
|
|
--uc-tab-corner-bg: var(--tab-selected-bgcolor, var(--toolbar-bgcolor));
|
|
}
|
|
|
|
#tabbrowser-tabs:not([movingtab])>#tabbrowser-arrowscrollbox>.tabbrowser-tab>.tab-stack>.tab-background[multiselected="true"]:-moz-lwtheme,
|
|
#tabbrowser-tabs:not([movingtab])>#tabbrowser-arrowscrollbox>.tabbrowser-tab>.tab-stack>.tab-background[selected="true"]:-moz-lwtheme {
|
|
background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none);
|
|
--uc-tab-corner-bg: var(--lwt-selected-tab-background-color, var(--toolbar-bgcolor));
|
|
}
|
|
|
|
.tabbrowser-tab .tab-background:is([selected], [multiselected]) {
|
|
--uc-tab-corner-bg: var(--tab-selected-bgcolor, var(--toolbar-bgcolor));
|
|
}
|
|
|
|
.tabbrowser-tab:hover>.tab-stack>.tab-background:not([selected="true"], [multiselected]) {
|
|
background-color: color-mix(in srgb, currentColor 8%, transparent) !important;
|
|
--uc-tab-corner-bg: color-mix(in srgb, currentColor 8%, transparent) !important;
|
|
}
|
|
|
|
@supports not -moz-bool-pref("uc.tweak.floating-tabs") {
|
|
:root:not([lwtheme-brighttext="true"]) .tabbrowser-tab:hover>.tab-stack>.tab-background:not([selected="true"], [multiselected]) {
|
|
background-color: color-mix(in srgb, white 30%, transparent) !important;
|
|
--uc-tab-corner-bg: color-mix(in srgb, white 30%, transparent) !important;
|
|
}
|
|
}
|
|
|
|
.tab-background:is([selected], [multiselected]) {
|
|
outline: none !important;
|
|
}
|
|
|
|
#tabbrowser-tabs .tab-background[multiselected]:not([selected]) {
|
|
box-shadow: none !important;
|
|
opacity: 0.7 !important;
|
|
}
|
|
|
|
#tabbrowser-tabs,
|
|
#TabsToolbar #TabsToolbar-customization-target>.toolbarbutton-1 {
|
|
margin-top: var(--tab-block-margin) !important;
|
|
}
|
|
|
|
#TabsToolbar .toolbarbutton-1 {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
/* fix colours */
|
|
@media not (-moz-gtk-csd-available) {
|
|
#navigator-toolbox:not(:-moz-lwtheme) {
|
|
background-color: var(--lwt-accent-color) !important;
|
|
color: var(--lwt-text-color) !important;
|
|
}
|
|
|
|
/* force inactive window on default theme */
|
|
@media not (-moz-platform: windows-win7) {
|
|
@media not (-moz-platform: windows-win8) {
|
|
#navigator-toolbox:-moz-window-inactive:not(:-moz-lwtheme) {
|
|
background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab-label-container:not([selected="true"], [multiselected]) {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
#TabsToolbar .toolbarbutton-animatable-box,
|
|
#TabsToolbar .toolbarbutton-1 {
|
|
fill: currentColor !important;
|
|
}
|
|
|
|
.tabbrowser-tab[multiselected]:not(:-moz-lwtheme),
|
|
.tabbrowser-tab[visuallyselected="true"]:not(:-moz-lwtheme) {
|
|
color: var(--lwt-tab-text, var(--toolbar-color)) !important;
|
|
}
|
|
|
|
.tabbrowser-tab:is([selected], [multiselected]):-moz-lwtheme {
|
|
z-index: 1;
|
|
}
|
|
|
|
.tab-close-button {
|
|
margin-inline-end: 8px !important;
|
|
width: 17px !important;
|
|
height: 17px !important;
|
|
padding: 4px !important;
|
|
border-radius: 2px !important;
|
|
}
|
|
|
|
.tab-throbber:not([pinned]),
|
|
.tab-icon-pending:not([pinned]),
|
|
.tab-icon-image:not([pinned]),
|
|
.tab-sharing-icon-overlay:not([pinned]) {
|
|
margin-inline-end: 10px !important;
|
|
}
|
|
|
|
/* tab volume icon/text */
|
|
.tab-secondary-label {
|
|
display: none !important;
|
|
}
|
|
|
|
#tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container {
|
|
height: var(--tab-min-height) !important;
|
|
}
|
|
|
|
.tab-icon-stack:is([soundplaying], [muted], [activemedia-blocked])>.tab-icon-overlay,
|
|
.tabbrowser-tab:hover .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])> :not(.tab-icon-overlay) {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
#tabbrowser-tabs:not([closebuttons="activetab"]) .tab-icon-overlay:not([pinned]) {
|
|
margin-inline: 22px 6px !important;
|
|
}
|
|
|
|
.tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned]) {
|
|
margin-inline: 0px 6px !important;
|
|
}
|
|
|
|
/* move sound playing icon on top of favicon when there isn't enough space */
|
|
.tab-icon-overlay:not([crashed]):is([pinned], [sharing]),
|
|
#tabbrowser-tabs[closebuttons="activetab"] .tab-icon-overlay:not([crashed]) {
|
|
top: -5.5px !important;
|
|
inset-inline-end: -6px !important;
|
|
}
|
|
|
|
#tabbrowser-tabs[closebuttons="activetab"] :is(.tab-icon-overlay[soundplaying]:not([crashed]),
|
|
.tab-icon-overlay[muted]: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]),
|
|
.tab-icon-overlay[muted]: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,
|
|
.tab-icon-overlay:not([crashed])[muted]: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,
|
|
.tab-icon-overlay:not([crashed])[muted]:hover,
|
|
.tab-icon-overlay:not([crashed])[activemedia-blocked]:hover) {
|
|
background-color: var(--tab-icon-overlay-stroke, black) !important;
|
|
}
|
|
|
|
.tab-icon-overlay[soundplaying]:not([crashed]),
|
|
.tab-icon-overlay[muted]:not([crashed]),
|
|
.tab-icon-overlay[activemedia-blocked]:not([crashed]) {
|
|
border-radius: 4px !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.tabbrowser-tab {
|
|
font-size: 12px !important;
|
|
padding-inline: 0 !important;
|
|
overflow-clip-margin: 8px !important;
|
|
}
|
|
|
|
#TabsToolbar .toolbarbutton-1>.toolbarbutton-icon,
|
|
#TabsToolbar .toolbarbutton-1>.toolbarbutton-badge-stack {
|
|
border-radius: var(--toolbarbutton-border-radius) !important;
|
|
padding: var(--uc-toolbarbutton-inner-padding) calc(var(--uc-toolbarbutton-inner-padding) + 2px) !important;
|
|
}
|
|
|
|
#tabbrowser-tabs .toolbarbutton-1>.toolbarbutton-icon,
|
|
#tabbrowser-tabs .toolbarbutton-1>.toolbarbutton-badge-stack {
|
|
border-radius: var(--toolbarbutton-tabsline-border-radius) !important;
|
|
}
|
|
|
|
#TabsToolbar .toolbarbutton-1>.toolbarbutton-icon {
|
|
width: calc(2 * (var(--uc-toolbarbutton-inner-padding) + 2px) + 16px) !important;
|
|
height: calc(2 * var(--uc-toolbarbutton-inner-padding) + 16px) !important;
|
|
}
|
|
|
|
#TabsToolbar #tabs-newtab-button>.toolbarbutton-icon,
|
|
#TabsToolbar #alltabs-button>.toolbarbutton-badge-stack,
|
|
#TabsToolbar #tabbrowser-tabs[hasadjacentnewtabbutton][overflow="true"]~#new-tab-button>.toolbarbutton-icon {
|
|
padding: var(--uc-toolbarbutton-inner-padding) !important;
|
|
width: calc(2 * var(--uc-toolbarbutton-inner-padding) + 16px) !important;
|
|
}
|
|
|
|
#tabbrowser-tabs #tabs-newtab-button {
|
|
margin-inline-start: 2px !important;
|
|
}
|
|
|
|
.tab-content[pinned] {
|
|
padding: 0 12px !important;
|
|
}
|
|
|
|
.tabbrowser-tab[usercontextid]>.tab-stack>.tab-background>.tab-context-line {
|
|
height: 8px !important;
|
|
clip-path: inset(0 0 6px) !important;
|
|
border-radius: var(--tab-border-radius) !important;
|
|
border-bottom-left-radius: 0 !important;
|
|
border-bottom-right-radius: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.titlebar-spacer[type="post-tabs"] {
|
|
display: flex !important;
|
|
}
|
|
|
|
.titlebar-spacer[type="pre-tabs"],
|
|
.private-browsing-indicator {
|
|
display: none !important;
|
|
}
|
|
|
|
toolbarbutton[part="scrollbutton-up"],
|
|
toolbarbutton[part="scrollbutton-down"] {
|
|
border-width: 2px !important;
|
|
border-radius: calc(var(--toolbarbutton-border-radius) + 2px) !important;
|
|
margin-inline: 2px !important;
|
|
}
|
|
|
|
.tabbrowser-tab:not([pinned], [style*="max-width"])[fadein] {
|
|
max-width: 240px !important;
|
|
}
|
|
|
|
/* tab separators */
|
|
.tabbrowser-tab:not([last-visible-tab="true"]) {
|
|
margin-inline-end: 3px !important;
|
|
}
|
|
|
|
.tabbrowser-tab:not([selected="true"], :hover, [beforeselected-visible], [beforehovered]) .tab-stack::after {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
height: 20px;
|
|
right: -1px;
|
|
top: 6px;
|
|
border-right: 1px solid color-mix(in srgb, currentColor 34%, transparent);
|
|
}
|
|
|
|
/* need layout.css.has-selector.enabled */
|
|
.tabbrowser-tab:has(+ .tabbrowser-tab:is([selected="true"], :hover, [beforeselected-visible], [beforehovered])) .tab-stack::after {
|
|
display: none;
|
|
}
|
|
|
|
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])>#tabbrowser-arrowscrollbox>.tabbrowser-tab[first-visible-unpinned-tab] {
|
|
margin-inline-start: 0 !important;
|
|
}
|
|
|
|
#scrollbutton-up[part="scrollbutton-up"]:not(.menupopup-scrollbutton),
|
|
#scrollbutton-down[part="scrollbutton-down"]:not(.menupopup-scrollbutton) {
|
|
border-block-width: 2px !important;
|
|
padding-inline: calc(var(--uc-toolbarbutton-inner-padding) - 4px) !important;
|
|
padding-block: calc(var(--uc-toolbarbutton-inner-padding) - 0px) !important;
|
|
}
|
|
|
|
/* mac titlebar buttons */
|
|
@media (-moz-platform: macos) {
|
|
.titlebar-buttonbox {
|
|
margin-inline: calc((var(--tab-min-height) + var(--tab-block-margin) - 14px) / 2) !important;
|
|
}
|
|
|
|
.titlebar-buttonbox-container {
|
|
margin-inline-start: -6px !important;
|
|
margin-inline-end: -2px !important;
|
|
}
|
|
}
|
|
|
|
/* Tab Shadows */
|
|
#TabsToolbar>.toolbar-items {
|
|
margin-top: -2px !important;
|
|
}
|
|
|
|
.tabbrowser-tab,
|
|
#TabsToolbar #tabs-newtab-button,
|
|
/* no ::part workaround - may have side effects */
|
|
#scrollbutton-up[part="scrollbutton-up"]:not(.menupopup-scrollbutton),
|
|
#scrollbutton-down[part="scrollbutton-down"]:not(.menupopup-scrollbutton) {
|
|
margin-top: 2px !important;
|
|
}
|
|
|
|
#TabsToolbar #TabsToolbar-customization-target> :not(#tabbrowser-tabs) {
|
|
margin-top: calc(2px + var(--tab-block-margin)) !important;
|
|
}
|
|
|
|
#tabbrowser-tabs:not([overflow="true"]) .tabbrowser-tab:first-of-type {
|
|
margin-inline-start: 14px !important;
|
|
}
|
|
#tabbrowser-tabs:not([overflow="true"]) .tabbrowser-tab:last-of-type {
|
|
margin-inline-end: 6px !important;
|
|
}
|
|
|
|
#tabbrowser-tabs {
|
|
margin-inline-start: -6px !important;
|
|
border-inline: none !important;
|
|
}
|
|
|
|
#TabsToolbar {
|
|
padding-inline-start: 6px !important;
|
|
}
|
|
|
|
#tabbrowser-tabs[positionpinnedtabs]>#tabbrowser-arrowscrollbox {
|
|
margin-inline-start: 8px !important;
|
|
}
|
|
|
|
#tabbrowser-tabs[positionpinnedtabs]>#tabbrowser-arrowscrollbox>.tabbrowser-tab[pinned] {
|
|
clip-path: inset(-4px -4px 0) !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)),
|
|
0px 2px 4px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
: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: var(--uc-titlebar-shadow) !important;
|
|
}
|
|
|
|
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab .tab-label-container {
|
|
--tab-label-mask-size: 1em !important;
|
|
}
|
|
|
|
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([pinned]) .tab-content {
|
|
padding-inline: calc(var(--inline-tab-padding) - 4px) 0 !important;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
#tabbrowser-tabs[secondarytext-unsupported] .tab-icon-stack[indicator-replaces-favicon] > :not(.tab-icon-overlay) {
|
|
opacity: 1 !important;
|
|
}
|