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 bottom_rounded_corner.scss

Browse source
This commit is contained in:
alstjr7375 2021-12-17 22:12:11 +09:00
parent 3cc18ea16a
commit cdd74fc578
2 changed files with 62 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

61
src/tabbar/_bottom_rounded_corner.scss Normal file
View file

@ -0,0 +1,61 @@
#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;
/* Box */
display: block !important;
position: absolute !important;
z-index: 1 !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;
/* 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");
}
@include OS($linux) {
/* 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;
}
: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;
}
}

62
src/userChrome.scss
View file

@ -47,67 +47,7 @@
@import "tabbar/box_shadow";
/** Selected Tab - Bottom Rounded Corner **************************************/
#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;
/* Box */
display: block !important;
position: absolute !important;
z-index: 1 !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;
/* 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");
}
@include OS($linux) {
/* 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;
}
: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;
}
}
@import "tabbar/bottom_rounded_corner";
/** Unselected Tab - Divide line **********************************************/
#tabbrowser-arrowscrollbox {