Fix: Selected Tab - Bottom Rounded Corner's Adjsut Values

This commit is contained in:
alstjr7375 2021-05-20 14:20:12 +09:00
parent f101f85aff
commit 5523c3731d

View file

@ -51,8 +51,7 @@
/* Selected Tab - Bottom Rounded Corner */
tab {
--tab-corner-rounding: 8px;
--animation-speed: 0.15s;
--tab-corner-rounding: 9px;
}
tab[visuallyselected] .tab-background::before,
@ -60,29 +59,29 @@
content: "" !important;
display: inline !important;
position: absolute !important;
width: var(--tab-corner-rounding) !important;
height: var(--tab-corner-rounding) !important;
bottom: -1px !important;
pointer-events: none !important;
background-color: transparent !important;
transition: var(--animation-speed) !important;
transition: 0.15s !important;
z-index: -1 !important;;
}
tab[visuallyselected] .tab-background::before {
border-bottom-right-radius: var(--tab-corner-rounding) !important;
transform: translateX(calc(-1 * var(--tab-corner-rounding))) !important;
box-shadow: 0 1px 1px -1px var(--toolbar-color), /* <- Selected Box Shadow */
4px 4px 0px 4px var(--toolbar-bgcolor) !important;
transition: var(--animation-speed) !important;
width: 11px !important;
height: 5px;
left: 0px;
transform: translateX(calc(-1 * var(--tab-corner-rounding) - 3px)) !important;
box-shadow: 4px 4px 0px 3.5px var(--toolbar-bgcolor) !important;
}
tab[visuallyselected] .tab-background::after {
border-bottom-left-radius: var(--tab-corner-rounding) !important;
width: 9px !important;
height: 7px !important;
right: 0px !important;
transform: translateX(calc(var(--tab-corner-rounding) + 1px)) !important;
box-shadow: -1px 0 0 -1px var(--toolbar-color), /* <- Selected Box Shadow */
-4px 4px 0px 4px var(--toolbar-bgcolor) !important;
transition: var(--animation-speed) !important;
transform: translateX(var(--tab-corner-rounding)) !important;
box-shadow: -4px 4px 0px 4px var(--toolbar-bgcolor) !important;
}
/* Unselected Tab - Divide line */