Firefox-UI-Fix/src/tab/newtab_button/_looks_like_tab.scss
2022-12-16 03:03:59 +09:00

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;
}
}