make curved_tabs.css proton compatible

This commit is contained in:
MrOtherGuy 2021-04-09 00:33:37 +03:00
parent 1fd6af0071
commit 802c4a4c53

View file

@ -4,8 +4,12 @@ See the above repository for updates as well as full license text. */
/* Makes tabs more curvy. Also disables tab separators since there's no easy way to make the look good */ /* Makes tabs more curvy. Also disables tab separators since there's no easy way to make the look good */
#tabbrowser-tabs{ #tabbrowser-tabs{
--uc-tab-curve-size: 17px; /* 10px looks about like chromium - 17px looks close to Australis tabs */ --uc-tab-curve-size:17px; /* 10px looks about like chromium - 17px looks close to Australis tabs */
--uc-tabs-scrollbutton-border: 0px;
--proton-tab-block-margin:0px;
--tab-min-height: 34px;
} }
#TabsToolbar{ --toolbarbutton-inner-padding: 6px !important; }
.tabbrowser-tab:hover{ --uc-tab-fill: rgba(0,0,0,.1) } .tabbrowser-tab:hover{ --uc-tab-fill: rgba(0,0,0,.1) }
.tabbrowser-tab[selected]{ --uc-tab-curve-padding: 1px } .tabbrowser-tab[selected]{ --uc-tab-curve-padding: 1px }
@ -48,7 +52,7 @@ See the above repository for updates as well as full license text. */
.tabbrowser-tab:hover > stack > .tab-background, .tabbrowser-tab:hover > stack > .tab-background,
.tab-background[selected]{ .tab-background[selected]{
border-radius: var(--uc-tab-curve-size) var(--uc-tab-curve-size) 0 0; border-radius: var(--uc-tab-curve-size) var(--uc-tab-curve-size) 0 0 !important;
overflow: -moz-hidden-unscrollable overflow: -moz-hidden-unscrollable
} }
@ -57,8 +61,13 @@ See the above repository for updates as well as full license text. */
margin-inline-start: var(--uc-tab-curve-size) !important; margin-inline-start: var(--uc-tab-curve-size) !important;
} }
#scrollbutton-up,
#scrollbutton-down{ border-block-width: var(--uc-tabs-scrollbutton-border,0px) !important; }
.tab-background[selected]{ border: 1px solid var(--tabs-border-color) !important; border-bottom: none !important } .tab-background[selected]{ border: 1px solid var(--tabs-border-color) !important; border-bottom: none !important }
/* Annoying fix to prevent hovering of last tab to trigger tab overflow, better solution wanted */
.tabbrowser-tab[last-visible-tab]{ margin-inline-end: var(--uc-tab-curve-size) !important; }
/* OPTIONAL - uncomment the following to flip the curves vertically - maybe useful for tabs on bottom ? */ /* OPTIONAL - uncomment the following to flip the curves vertically - maybe useful for tabs on bottom ? */
/* /*
.tab-background{ -moz-box-direction: reverse } .tab-background{ -moz-box-direction: reverse }
@ -66,5 +75,4 @@ See the above repository for updates as well as full license text. */
.tab-background[selected]{ border-radius: 0 0 var(--uc-tab-curve-size) var(--uc-tab-curve-size) } .tab-background[selected]{ border-radius: 0 0 var(--uc-tab-curve-size) var(--uc-tab-curve-size) }
.tabbrowser-tab > stack::before{ transform: scaleY(-1) !important; } .tabbrowser-tab > stack::before{ transform: scaleY(-1) !important; }
.tabbrowser-tab > stack::after{ transform: scaleY(-1) scaleX(-1) !important; } .tabbrowser-tab > stack::after{ transform: scaleY(-1) scaleX(-1) !important; }
*/ */