mirror of
https://github.com/black7375/Firefox-UI-Fix.git
synced 2026-01-14 05:12:06 -08:00
145 lines
6.6 KiB
SCSS
145 lines
6.6 KiB
SCSS
#tabs-newtab-button {
|
|
@include Option("userChrome.tab.connect_to_window") {
|
|
/* Size */
|
|
-moz-box-align: stretch !important;
|
|
padding-top: var(--tab-block-margin) !important;
|
|
}
|
|
|
|
@include Option("userChrome.tab.bottom_rounded_corner") {
|
|
/* Original:
|
|
margin: 0 0 var(--tabs-navbar-shadow-size) !important
|
|
=> Can't override style. Therefore, we should approach it by bypass.
|
|
*/
|
|
--tabs-navbar-shadow-size: -1px; /* Original: 1px */
|
|
--uc-tabs-navbar-shadow-size: 0.5px;
|
|
--uc-tab-corner-rounding: 4px; /* Hardcoded */
|
|
--uc-newtab-bgcolor: transparent;
|
|
|
|
/* Corner Rounding Image */
|
|
--uc-newtab-position: calc((var(--uc-tab-corner-rounding) / 2) * -1);
|
|
background-image: var(--uc-tab-corner-left-side-svg), var(--uc-tab-corner-right-side-svg);
|
|
background-repeat: no-repeat;
|
|
background-position: left var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size),
|
|
right var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size);
|
|
background-size: var(--uc-tab-corner-rounding);
|
|
|
|
/* Corner Rounding Color */
|
|
fill: var(--uc-newtab-bgcolor) !important;
|
|
-moz-context-properties: fill !important;
|
|
|
|
@include Option(
|
|
"userChrome.tab.bottom_rounded_corner.wave",
|
|
"userChrome.tab.bottom_rounded_corner.australis",
|
|
"userChrome.tab.bottom_rounded_corner.chrome_legacy",
|
|
"userChrome.tab.bottom_rounded_corner.chrome",
|
|
"userChrome.tab.bottom_rounded_corner.edge"
|
|
) {
|
|
--uc-newtab-position: 0px;
|
|
--uc-newtab-non-corner-bgwidth: 0px;
|
|
--uc-tab-corner-half-height: calc(var(--uc-tab-corner-height) / 2);
|
|
--uc-tab-corner-half-height-reverse: calc(var(--uc-tab-corner-half-height) * -1);
|
|
|
|
transform: translateX(var(--uc-tab-corner-half-height-reverse));
|
|
padding-inline: var(--uc-tab-corner-half-height) !important;
|
|
overflow-clip-margin: var(--uc-tab-corner-half-height) !important;
|
|
|
|
background-image: var(--uc-tab-corner-left-side-svg),
|
|
linear-gradient(to left, var(--uc-newtab-bgcolor), var(--uc-newtab-bgcolor)),
|
|
var(--uc-tab-corner-right-side-svg);
|
|
background-position: left var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size),
|
|
center bottom var(--uc-tabs-navbar-shadow-size),
|
|
right var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size);
|
|
background-size: var(--uc-tab-corner-height) var(--uc-tab-corner-height),
|
|
var(--uc-newtab-non-corner-bgwidth) var(--uc-tab-corner-height),
|
|
var(--uc-tab-corner-height) var(--uc-tab-corner-height);
|
|
background-origin: padding-box;
|
|
|
|
@include Option(
|
|
"userChrome.tab.bottom_rounded_corner.chrome",
|
|
"userChrome.tab.bottom_rounded_corner.edge"
|
|
) {
|
|
--uc-newtab-non-corner-bgwidth: calc(2 * var(--toolbarbutton-inner-padding));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Corner Rounding Color */
|
|
#tabs-newtab-button:hover {
|
|
--uc-newtab-bgcolor: var(--toolbarbutton-hover-background);
|
|
}
|
|
#tabs-newtab-button:hover:active {
|
|
--uc-newtab-bgcolor: var(--toolbarbutton-active-background);
|
|
}
|
|
@media (-moz-windows-accent-color-in-titlebar) {
|
|
@include AccentColor {
|
|
: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,
|
|
$accentTextColor 10%,
|
|
transparent
|
|
) !important; /* Hardcoded 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,
|
|
$accentTextColor 15%,
|
|
transparent
|
|
) !important; /* Hardcoded for compatibility */
|
|
}
|
|
|
|
@include Option("userChrome.tab.bottom_rounded_corner") {
|
|
@include Option(
|
|
"userChrome.tab.bottom_rounded_corner.wave",
|
|
"userChrome.tab.bottom_rounded_corner.australis",
|
|
"userChrome.tab.bottom_rounded_corner.chrome_legacy",
|
|
"userChrome.tab.bottom_rounded_corner.chrome",
|
|
"userChrome.tab.bottom_rounded_corner.edge"
|
|
) {
|
|
: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 {
|
|
background-image: var(--uc-tab-corner-left-side-svg),
|
|
linear-gradient(to left, color-mix(in srgb, $accentTextColor 10%, transparent), color-mix(in srgb, $accentTextColor 10%, transparent)),
|
|
var(--uc-tab-corner-right-side-svg);
|
|
}
|
|
: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 {
|
|
background-image: var(--uc-tab-corner-left-side-svg),
|
|
linear-gradient(to left, color-mix(in srgb, $accentTextColor 15%, transparent), color-mix(in srgb, $accentTextColor 15%, transparent)),
|
|
var(--uc-tab-corner-right-side-svg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* '+'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(--uc-tabs-navbar-shadow-size)) !important;
|
|
-moz-context-properties: fill, fill-opacity;
|
|
fill: var(--toolbarbutton-icon-fill);
|
|
fill-opacity: var(--toolbarbutton-icon-fill-opacity);
|
|
|
|
@include Option(
|
|
"userChrome.tab.bottom_rounded_corner.wave",
|
|
"userChrome.tab.bottom_rounded_corner.australis",
|
|
"userChrome.tab.bottom_rounded_corner.chrome_legacy",
|
|
"userChrome.tab.bottom_rounded_corner.chrome",
|
|
"userChrome.tab.bottom_rounded_corner.edge"
|
|
) {
|
|
--tab-border-radius: 0px;
|
|
width: unset !important;
|
|
padding-inline: 0px !important;
|
|
margin-inline: calc(var(--uc-tab-corner-half-height) - #{math.div(15.5px, 2)}) !important;
|
|
|
|
background-color: transparent !important;
|
|
// background-size: calc((var(--toolbarbutton-inner-padding) * 2 + 16px) - var(--uc-tab-corner-size)) 100%;
|
|
// background-repeat: no-repeat;
|
|
// background-position: center;
|
|
}
|
|
}
|