mirrors/Firefox-UI-Fix
1
Fork 0
mirror of https://github.com/black7375/Firefox-UI-Fix.git synced 2026-01-01 06:50:33 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Clean: Separated to newtab_looks_like_tab.scss

Browse source
This commit is contained in:
alstjr7375 2021-12-17 22:25:30 +09:00
parent b1f6613518
commit aef333e782
2 changed files with 63 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

62
src/tabbar/newtab_looks_like_tab.scss Normal file
View file

@ -0,0 +1,62 @@
#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 */
/* 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 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 */
}
: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) */
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);
}

63
src/userChrome.scss
View file

@ -53,68 +53,7 @@
@import "tabbar/divide_line";
/* New tab button - Looks like tab ********************************************/
#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 */
/* 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 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 */
}
: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) */
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);
}
@import "tabbr/newtab_looks_like_tab";
/* Unloaded Tab - Contents Opacity ********************************************/
#tabbrowser-tabs .tabbrowser-tab[pending] .tab-content {