mirror of
https://github.com/black7375/Firefox-UI-Fix.git
synced 2026-01-06 09:14:00 -08:00
Clean: Option - Original Indent
This commit is contained in:
alstjr7375
parent
13acf49ac8
commit
a4d980ecd7
1 changed files with 232 additions and 226 deletions
458
userChrome.css
458
userChrome.css
|
|
@ -57,23 +57,23 @@
|
|||
/*= Remove Tab Border ========================================================*/
|
||||
@supports -moz-bool-pref("userChrome.tab.connect_to_window") {
|
||||
/* TARGET: original, photon */
|
||||
/* Light Theme */
|
||||
#TabsToolbar:not([brighttext])
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background {
|
||||
border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */
|
||||
}
|
||||
/* Light Theme */
|
||||
#TabsToolbar:not([brighttext])
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background {
|
||||
border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */
|
||||
}
|
||||
|
||||
/* Dark Theme */
|
||||
#TabsToolbar[brighttext]
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background:-moz-lwtheme {
|
||||
border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)) */
|
||||
}
|
||||
/* Dark Theme */
|
||||
#TabsToolbar[brighttext]
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background:-moz-lwtheme {
|
||||
border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)) */
|
||||
}
|
||||
}
|
||||
|
||||
/*= Light Weight Theme =======================================================*/
|
||||
|
|
@ -823,7 +823,7 @@
|
|||
|
||||
/* Hard Coded */
|
||||
@supports -moz-bool-pref("userChrome.tab.connect_to_window") {
|
||||
:root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] /* Legacy */
|
||||
:root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] /* Legacy */
|
||||
#tabbrowser-tabs:not([movingtab])
|
||||
> #tabbrowser-arrowscrollbox
|
||||
> .tabbrowser-tab
|
||||
|
|
@ -835,8 +835,8 @@
|
|||
> .tabbrowser-tab
|
||||
> .tab-stack
|
||||
> .tab-background[selected="true"] {
|
||||
background: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
|
||||
}
|
||||
background: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
|
||||
}
|
||||
}
|
||||
|
||||
:root:not([customizing="true"]):not(:-moz-lwtheme) tab[visuallyselected] > stack::before,
|
||||
|
|
@ -2708,11 +2708,11 @@ menuitem.openintabs-menuitem,
|
|||
/** Reduce Padding ************************************************************/
|
||||
/*= Root - Reduce Padding ====================================================*/
|
||||
@supports -moz-bool-pref("userChrome.tab.original") {
|
||||
:root {
|
||||
/* Tab Bar */
|
||||
--proton-tab-block-margin: 2px !important; /* Original: 4px, Legacy */
|
||||
--tab-block-margin: 2px !important; /* New version of --proton-tab-block-margin */
|
||||
}
|
||||
:root {
|
||||
/* Tab Bar */
|
||||
--proton-tab-block-margin: 2px !important; /* Original: 4px, Legacy */
|
||||
--tab-block-margin: 2px !important; /* New version of --proton-tab-block-margin */
|
||||
}
|
||||
}
|
||||
:root {
|
||||
--inline-tab-padding: 6px !important; /* Original: 8px */
|
||||
|
|
@ -2835,19 +2835,19 @@ menuitem.openintabs-menuitem,
|
|||
}
|
||||
|
||||
@supports -moz-bool-pref("userChrome.tab.original") {
|
||||
.toolbar-items,
|
||||
.tabbrowser-tab {
|
||||
--tabbar-max-height: 38px;
|
||||
max-height: calc(var(--tabbar-max-height) + var(--space-above-tabbar));
|
||||
}
|
||||
:root[uidensity="compact"] .toolbar-items,
|
||||
:root[uidensity="compact"] .tabbrowser-tab {
|
||||
--tabbar-max-height: 36px;
|
||||
}
|
||||
:root[uidensity="touch"] .toolbar-items,
|
||||
:root[uidensity="touch"] .tabbrowser-tab {
|
||||
--tabbar-max-height: 45px;
|
||||
}
|
||||
.toolbar-items,
|
||||
.tabbrowser-tab {
|
||||
--tabbar-max-height: 38px;
|
||||
max-height: calc(var(--tabbar-max-height) + var(--space-above-tabbar));
|
||||
}
|
||||
:root[uidensity="compact"] .toolbar-items,
|
||||
:root[uidensity="compact"] .tabbrowser-tab {
|
||||
--tabbar-max-height: 36px;
|
||||
}
|
||||
:root[uidensity="touch"] .toolbar-items,
|
||||
:root[uidensity="touch"] .tabbrowser-tab {
|
||||
--tabbar-max-height: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Scroll Button - Size Fix */
|
||||
|
|
@ -3139,45 +3139,45 @@ menupopup > menu {
|
|||
|
||||
/** Tab Bar - Connect to window ***********************************************/
|
||||
@supports -moz-bool-pref("userChrome.tab.connect_to_window") {
|
||||
.tab-background {
|
||||
border-radius: var(--tab-border-radius) var(--tab-border-radius) 0px 0px !important;
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
.tab-background {
|
||||
border-radius: var(--tab-border-radius) var(--tab-border-radius) 0px 0px !important;
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
margin-top: var(--tab-block-margin);
|
||||
}
|
||||
.tab-content {
|
||||
margin-top: var(--tab-block-margin);
|
||||
}
|
||||
|
||||
.tab-stack {
|
||||
margin-top: 0px !important;
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
.tab-stack {
|
||||
margin-top: 0px !important;
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
|
||||
/* Remove line at Toolbar's top */
|
||||
#tabbrowser-tabs {
|
||||
z-index: 1 !important;
|
||||
}
|
||||
#tabbrowser-arrowscrollbox[overflowing] .tabbrowser-tab[pinned]:is([visuallyselected], [multiselected]) {
|
||||
overflow: hidden;
|
||||
}
|
||||
/* Remove line at Toolbar's top */
|
||||
#tabbrowser-tabs {
|
||||
z-index: 1 !important;
|
||||
}
|
||||
#tabbrowser-arrowscrollbox[overflowing] .tabbrowser-tab[pinned]:is([visuallyselected], [multiselected]) {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/** Selected Tab - Color like toolbar *****************************************/
|
||||
@supports -moz-bool-pref("userChrome.tab.connect_to_window") {
|
||||
:root:not(:-moz-lwtheme) {
|
||||
/* Fix for windows's system default theme. Using --toolbar-bgcolor fallback */
|
||||
--tab-selected-bgcolor: unset !important; /* Original: rgb(255,255,255); */
|
||||
}
|
||||
#tabbrowser-tabs:not([movingtab])
|
||||
> #tabbrowser-arrowscrollbox
|
||||
> .tabbrowser-tab
|
||||
> .tab-stack
|
||||
> .tab-background[selected="true"]:-moz-lwtheme {
|
||||
/* Original: 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)
|
||||
:root:not(:-moz-lwtheme) {
|
||||
/* Fix for windows's system default theme. Using --toolbar-bgcolor fallback */
|
||||
--tab-selected-bgcolor: unset !important; /* Original: rgb(255,255,255); */
|
||||
}
|
||||
#tabbrowser-tabs:not([movingtab])
|
||||
> #tabbrowser-arrowscrollbox
|
||||
> .tabbrowser-tab
|
||||
> .tab-stack
|
||||
> .tab-background[selected="true"]:-moz-lwtheme {
|
||||
/* Original: 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)
|
||||
*/
|
||||
background-image: linear-gradient(transparent, transparent),
|
||||
linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
|
||||
}
|
||||
background-image: linear-gradient(transparent, transparent),
|
||||
linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/** Multi Selected Color - More Contrast **************************************/
|
||||
|
|
@ -3202,130 +3202,136 @@ menupopup > menu {
|
|||
|
||||
/** Selected Tab - Box Shadow *************************************************/
|
||||
@supports -moz-bool-pref("userChrome.tab.original") {
|
||||
#TabsToolbar[brighttext]
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab[visuallyselected="true"]:not(:focus)
|
||||
> .tab-stack
|
||||
> .tab-background:-moz-lwtheme {
|
||||
/* Origina: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9))
|
||||
#TabsToolbar[brighttext]
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab[visuallyselected="true"]:not(:focus)
|
||||
> .tab-stack
|
||||
> .tab-background:-moz-lwtheme {
|
||||
/* Origina: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9))
|
||||
Bright: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */
|
||||
box-shadow: 0 0 1px var(--toolbar-color) !important;
|
||||
}
|
||||
#TabsToolbar[brighttext]
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab[multiselected]:not([visuallyselected])
|
||||
> .tab-stack
|
||||
> .tab-background:-moz-lwtheme {
|
||||
box-shadow: 0 0 1px color-mix(in srgb, var(--toolbar-color) 80%, transparent) !important;
|
||||
}
|
||||
box-shadow: 0 0 1px var(--toolbar-color) !important;
|
||||
}
|
||||
#TabsToolbar[brighttext]
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab[multiselected]:not([visuallyselected])
|
||||
> .tab-stack
|
||||
> .tab-background:-moz-lwtheme {
|
||||
box-shadow: 0 0 1px color-mix(in srgb, var(--toolbar-color) 80%, transparent) !important;
|
||||
}
|
||||
|
||||
/* Pinned Tab - tabbrowser-arrowscrollbox overflowing */
|
||||
#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
|
||||
z-index: 0 !important;
|
||||
}
|
||||
/* Pinned Tab - tabbrowser-arrowscrollbox overflowing */
|
||||
#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
|
||||
z-index: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/** Selected Tab - Bottom Rounded Corner **************************************/
|
||||
@supports -moz-bool-pref("userChrome.tab.original") {
|
||||
#tabbrowser-tabs {
|
||||
--tab-corner-rounding: 3px; /* 10px looks about like chromium - 17px looks close to Australis tabs */
|
||||
--tab-corner-padding: 0px;
|
||||
--tab-corner-position: calc(var(--tab-corner-padding) - var(--tab-corner-rounding));
|
||||
}
|
||||
#tabbrowser-tabs {
|
||||
--tab-corner-rounding: 3px; /* 10px looks about like chromium - 17px looks close to Australis tabs */
|
||||
--tab-corner-padding: 0px;
|
||||
--tab-corner-position: calc(var(--tab-corner-padding) - var(--tab-corner-rounding));
|
||||
}
|
||||
|
||||
:root:not([customizing="true"]) tab[visuallyselected] > stack::before,
|
||||
:root:not([customizing="true"]) tab[visuallyselected] > stack::after {
|
||||
content: "" !important;
|
||||
:root:not([customizing="true"]) tab[visuallyselected] > stack::before,
|
||||
:root:not([customizing="true"]) tab[visuallyselected] > stack::after {
|
||||
content: "" !important;
|
||||
|
||||
/* Box */
|
||||
display: block !important;
|
||||
position: absolute !important;
|
||||
z-index: 1 !important;
|
||||
/* Box */
|
||||
display: block !important;
|
||||
position: absolute !important;
|
||||
z-index: 1 !important;
|
||||
|
||||
/* Shape */
|
||||
width: var(--tab-corner-rounding) !important;
|
||||
height: 100% !important;
|
||||
/* Shape */
|
||||
width: var(--tab-corner-rounding) !important;
|
||||
height: 100% !important;
|
||||
|
||||
/* Color */
|
||||
fill: var(--toolbar-bgcolor) !important;
|
||||
stroke: var(--tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9))) !important;
|
||||
-moz-context-properties: fill, stroke !important;
|
||||
/* Color */
|
||||
fill: var(--toolbar-bgcolor) !important;
|
||||
stroke: var(--tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9))) !important;
|
||||
-moz-context-properties: fill, stroke !important;
|
||||
|
||||
/* Image */
|
||||
background-size: var(--tab-corner-rounding);
|
||||
background-repeat: no-repeat;
|
||||
background-position-y: bottom;
|
||||
}
|
||||
:root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::before,
|
||||
:root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::after {
|
||||
/* As Selected Tab - Box Shadow */
|
||||
stroke: var(--toolbar-color) !important;
|
||||
}
|
||||
/* Image */
|
||||
background-size: var(--tab-corner-rounding);
|
||||
background-repeat: no-repeat;
|
||||
background-position-y: bottom;
|
||||
}
|
||||
:root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::before,
|
||||
:root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::after {
|
||||
/* As Selected Tab - Box Shadow */
|
||||
stroke: var(--toolbar-color) !important;
|
||||
}
|
||||
|
||||
tab[visuallyselected] > stack::before {
|
||||
left: var(--tab-corner-position) !important;
|
||||
background-image: url("./icons/tab-bottom-corner-left.svg");
|
||||
}
|
||||
tab[visuallyselected] > stack::after {
|
||||
left: auto;
|
||||
right: var(--tab-corner-position);
|
||||
background-image: url("./icons/tab-bottom-corner-right.svg");
|
||||
}
|
||||
tab[visuallyselected] > stack::before {
|
||||
left: var(--tab-corner-position) !important;
|
||||
background-image: url("./icons/tab-bottom-corner-left.svg");
|
||||
}
|
||||
tab[visuallyselected] > stack::after {
|
||||
left: auto;
|
||||
right: var(--tab-corner-position);
|
||||
background-image: url("./icons/tab-bottom-corner-right.svg");
|
||||
}
|
||||
|
||||
@media (-moz-gtk-csd-available) {
|
||||
/* Fill color for GTK */
|
||||
:root:not([customizing="true"]):not([lwtheme="true"]) tab[visuallyselected] > stack::before,
|
||||
:root:not([customizing="true"]):not([lwtheme="true"]) tab[visuallyselected] > stack::after {
|
||||
/* As GTK Toolbar's background-color + backround-image
|
||||
@media (-moz-gtk-csd-available) {
|
||||
/* Fill color for GTK */
|
||||
:root:not([customizing="true"]):not([lwtheme="true"]) tab[visuallyselected] > stack::before,
|
||||
:root:not([customizing="true"]):not([lwtheme="true"]) tab[visuallyselected] > stack::after {
|
||||
/* As GTK Toolbar's background-color + backround-image
|
||||
* --toolbar-non-lwt-bgcolor: -moz-dialog;
|
||||
* --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15));
|
||||
*/
|
||||
fill: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
|
||||
stroke: transparent !important;
|
||||
fill: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
|
||||
stroke: transparent !important;
|
||||
}
|
||||
:root:not([customizing="true"]):not([lwtheme="true"])
|
||||
#TabsToolbar[brighttext]
|
||||
tab[visuallyselected]
|
||||
> stack::before,
|
||||
:root:not([customizing="true"]):not([lwtheme="true"])
|
||||
#TabsToolbar[brighttext]
|
||||
tab[visuallyselected]
|
||||
> stack::after {
|
||||
stroke: transparent !important;
|
||||
}
|
||||
}
|
||||
:root:not([customizing="true"]):not([lwtheme="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::before,
|
||||
:root:not([customizing="true"]):not([lwtheme="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::after {
|
||||
stroke: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Unselected Tab - Divide line **********************************************/
|
||||
@supports -moz-bool-pref("userChrome.tab.original") {
|
||||
#tabbrowser-arrowscrollbox {
|
||||
position: absolute;
|
||||
}
|
||||
#tabbrowser-arrowscrollbox {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
@supports -moz-bool-pref("userChrome.tab.original") {
|
||||
.tab-background::before,
|
||||
#tabs-newtab-button::before {
|
||||
/* Box Model */
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
.tab-background::before,
|
||||
#tabs-newtab-button::before {
|
||||
/* Box Model */
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
||||
/* Position */
|
||||
top: 50%;
|
||||
transform: translateX(-2.5px) translateY(calc(-50% + 1px));
|
||||
/* Position */
|
||||
top: 50%;
|
||||
transform: translateX(-2.5px) translateY(calc(-50% + 1px));
|
||||
|
||||
/* Bar shape */
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
/* Bar shape */
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
|
||||
/* Bar Color */
|
||||
opacity: 0;
|
||||
background-color: var(--toolbarseparator-color);
|
||||
}
|
||||
/* Bar Color */
|
||||
opacity: 0;
|
||||
background-color: var(--toolbarseparator-color);
|
||||
}
|
||||
}
|
||||
|
||||
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before {
|
||||
opacity: var(--tab-separator-opacity);
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.original") {
|
||||
#tabs-newtab-button:not(:hover, [open])::before {
|
||||
opacity: var(--tab-separator-opacity);
|
||||
}
|
||||
#tabs-newtab-button:not(:hover, [open])::before {
|
||||
opacity: var(--tab-separator-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
#navigator-toolbox:not([movingtab])
|
||||
|
|
@ -3338,19 +3344,19 @@ tab[visuallyselected] > stack::after {
|
|||
opacity: 0 !important;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.original") {
|
||||
#navigator-toolbox:not([movingtab])
|
||||
.tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
|
||||
+ .tabbrowser-tab
|
||||
.tab-background::before,
|
||||
#navigator-toolbox:not([movingtab])
|
||||
.tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
|
||||
~ .tabbrowser-tab[afterhovered]
|
||||
.tab-background::before,
|
||||
#navigator-toolbox:not([movingtab])
|
||||
.tabbrowser-tab[last-visible-tab]:is([visuallyselected], [multiselected], :hover)
|
||||
~ #tabs-newtab-button::before {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
#navigator-toolbox:not([movingtab])
|
||||
.tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
|
||||
+ .tabbrowser-tab
|
||||
.tab-background::before,
|
||||
#navigator-toolbox:not([movingtab])
|
||||
.tabbrowser-tab:is([visuallyselected], [multiselected], :hover)
|
||||
~ .tabbrowser-tab[afterhovered]
|
||||
.tab-background::before,
|
||||
#navigator-toolbox:not([movingtab])
|
||||
.tabbrowser-tab[last-visible-tab]:is([visuallyselected], [multiselected], :hover)
|
||||
~ #tabs-newtab-button::before {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animate */
|
||||
|
|
@ -3359,9 +3365,9 @@ tab[visuallyselected] > stack::after {
|
|||
transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.original") {
|
||||
#tabs-newtab-button::before {
|
||||
transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
|
||||
}
|
||||
#tabs-newtab-button::before {
|
||||
transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -3372,68 +3378,68 @@ tab[visuallyselected] > stack::after {
|
|||
|
||||
/* New tab button - Looks like tab ********************************************/
|
||||
@supports -moz-bool-pref("userChrome.tab.original") {
|
||||
#tabs-newtab-button {
|
||||
/* Original:
|
||||
#tabs-newtab-button {
|
||||
/* Original:
|
||||
margin: 0 0 var(--tabs-navbar-shadow-size) !important
|
||||
=> Can't ovrride style. Therefore, we should approach it by bypass.
|
||||
*/
|
||||
--tabs-navbar-shadow-size: -1px; /* Original: 1px */
|
||||
--tabs-navbar-original-shadow-size: 1px;
|
||||
--tab-corner-rounding: 4px; /* Hardcorded */
|
||||
--tabs-navbar-shadow-size: -1px; /* Original: 1px */
|
||||
--tabs-navbar-original-shadow-size: 1px;
|
||||
--tab-corner-rounding: 4px; /* Hardcorded */
|
||||
|
||||
/* Size */
|
||||
-moz-box-align: stretch !important;
|
||||
padding-top: var(--tab-block-margin) !important;
|
||||
/* Size */
|
||||
-moz-box-align: stretch !important;
|
||||
padding-top: var(--tab-block-margin) !important;
|
||||
|
||||
/* Corner Rounding Image */
|
||||
--newtab-position: calc((var(--tab-corner-rounding) / 2) * -1);
|
||||
background-image: url("./icons/tab-bottom-corner-left.svg"), url("./icons/tab-bottom-corner-right.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: left var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size),
|
||||
right var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size);
|
||||
background-size: var(--tab-corner-rounding);
|
||||
/* Corner Rounding Image */
|
||||
--newtab-position: calc((var(--tab-corner-rounding) / 2) * -1);
|
||||
background-image: url("./icons/tab-bottom-corner-left.svg"), url("./icons/tab-bottom-corner-right.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: left var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size),
|
||||
right var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size);
|
||||
background-size: var(--tab-corner-rounding);
|
||||
|
||||
/* Corner Rounding Color */
|
||||
fill: transparent !important;
|
||||
-moz-context-properties: fill !important;
|
||||
}
|
||||
|
||||
/* Corner Rounding Color */
|
||||
fill: transparent !important;
|
||||
-moz-context-properties: fill !important;
|
||||
}
|
||||
|
||||
/* Corner Rounding Color */
|
||||
#tabs-newtab-button:hover {
|
||||
fill: var(--toolbarbutton-hover-background) !important;
|
||||
}
|
||||
#tabs-newtab-button:hover:active {
|
||||
fill: var(--toolbarbutton-active-background) !important;
|
||||
}
|
||||
@media (-moz-windows-accent-color-in-titlebar) {
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover,
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover {
|
||||
fill: color-mix(
|
||||
in srgb,
|
||||
-moz-accent-color-foreground 10%,
|
||||
transparent
|
||||
) !important; /* Hardcorded for compatibility */
|
||||
#tabs-newtab-button:hover {
|
||||
fill: var(--toolbarbutton-hover-background) !important;
|
||||
}
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active,
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active {
|
||||
fill: color-mix(
|
||||
in srgb,
|
||||
-moz-accent-color-foreground 15%,
|
||||
transparent
|
||||
) !important; /* Hardcorded for compatibility */
|
||||
#tabs-newtab-button:hover:active {
|
||||
fill: var(--toolbarbutton-active-background) !important;
|
||||
}
|
||||
@media (-moz-windows-accent-color-in-titlebar) {
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover,
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover {
|
||||
fill: color-mix(
|
||||
in srgb,
|
||||
-moz-accent-color-foreground 10%,
|
||||
transparent
|
||||
) !important; /* Hardcorded for compatibility */
|
||||
}
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active,
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active {
|
||||
fill: color-mix(
|
||||
in srgb,
|
||||
-moz-accent-color-foreground 15%,
|
||||
transparent
|
||||
) !important; /* Hardcorded for compatibility */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* '+'Icon */
|
||||
#tabs-newtab-button .toolbarbutton-icon {
|
||||
border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */
|
||||
/* '+'Icon */
|
||||
#tabs-newtab-button .toolbarbutton-icon {
|
||||
border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */
|
||||
|
||||
padding: calc(var(--toolbarbutton-inner-padding) - (var(--tab-block-margin) / 4)) var(--toolbarbutton-inner-padding)
|
||||
calc(var(--toolbarbutton-inner-padding) + (var(--tab-block-margin) / 4) + var(--tabs-navbar-original-shadow-size)) !important;
|
||||
-moz-context-properties: fill, fill-opacity;
|
||||
fill: var(--toolbarbutton-icon-fill);
|
||||
fill-opacity: var(--toolbarbutton-icon-fill-opacity);
|
||||
}
|
||||
padding: calc(var(--toolbarbutton-inner-padding) - (var(--tab-block-margin) / 4)) var(--toolbarbutton-inner-padding)
|
||||
calc(var(--toolbarbutton-inner-padding) + (var(--tab-block-margin) / 4) + var(--tabs-navbar-original-shadow-size)) !important;
|
||||
-moz-context-properties: fill, fill-opacity;
|
||||
fill: var(--toolbarbutton-icon-fill);
|
||||
fill-opacity: var(--toolbarbutton-icon-fill-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
/* Unloaded Tab - Contents Opacity ********************************************/
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue