From 88b3ff1d6b2dd57804fdae2079c0c3ebeeebc01e Mon Sep 17 00:00:00 2001 From: MrOtherGuy Date: Wed, 23 Sep 2020 00:28:12 +0300 Subject: [PATCH] Create curved_tabs.css --- chrome/curved_tabs.css | 62 ++++++++++++++++++++++++++++++++++++++ html_resources/tagmap.json | 3 +- tags.csv | 1 + 3 files changed, 65 insertions(+), 1 deletion(-) create mode 100644 chrome/curved_tabs.css diff --git a/chrome/curved_tabs.css b/chrome/curved_tabs.css new file mode 100644 index 0000000..9261f55 --- /dev/null +++ b/chrome/curved_tabs.css @@ -0,0 +1,62 @@ +/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/curved_tabs.css made available under Mozilla Public License v. 2.0 +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 */ + +#tabbrowser-tabs{ + --uc-tab-curve-size: 10px; /* 10px looks about like chromium - 18px looks close to Australis tabs */ +} + +.tabbrowser-tab:hover{ --uc-tab-fill: rgba(0,0,0,.1) } +#TabsToolbar[brighttext] .tabbrowser-tab:hover{ --uc-tab-fill: rgba(255,255,255,.1) } +.titlebar-spacer[type="pre-tabs"], +.tabbrowser-tab::after{ border: none !important; } + +.tabbrowser-tab:hover > stack::before, +.tabbrowser-tab:hover > stack::after, +.tabbrowser-tab[selected] > stack::before, +.tabbrowser-tab[selected] > stack::after{ + width: var(--uc-tab-curve-size); + height: 100%; + display: block; + position: absolute; + content: ""; + fill: var(--uc-tab-fill); + -moz-context-properties: fill; + left: calc(0px - var(--uc-tab-curve-size)); + background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgc3Ryb2tlPSJ3aGl0ZSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogIDxwYXRoIGQ9Ik0wIDE2IEExNiAxNiAwIDAgMCAxNiAwIEwgMTYgMTYgWiIgZmlsbD0iY29udGV4dC1maWxsIiBzdHJva2U9Im5vbmUiPjwvcGF0aD4NCjwvc3ZnPg"); + background-size: var(--uc-tab-curve-size); + background-repeat: no-repeat; + background-position-y: bottom; + transform: scaleY(var(--uc-tab-vertical-transform)) +} + +.tabbrowser-tab[selected] > stack::before, +.tabbrowser-tab[selected] > stack::after{ fill: var(--toolbar-bgcolor) !important; } + +.tabbrowser-tab:hover > stack::after, +.tabbrowser-tab[selected] > stack::after{ + left: auto; + right: calc(0px - var(--uc-tab-curve-size)); + transform: scaleX(-1); +} + +.tabbrowser-tab:hover > stack > .tab-background, +.tab-background[selected]{ + border-radius: var(--uc-tab-curve-size) var(--uc-tab-curve-size) 0 0; + overflow: -moz-hidden-unscrollable +} + +#tabbrowser-tabs:not([positionpinnedtabs]) .tabbrowser-tab:first-child, +#tabbrowser-tabs[positionpinnedtabs] .tabbrowser-tab[pinned]+.tabbrowser-tab:not([pinned]){ + margin-inline-start: var(--uc-tab-curve-size) !important; +} + +/* OPTIONAL - uncomment the following to flip the curves vertically - maybe useful for tabs on bottom ? */ +/* +.tab-background{ -moz-box-direction: reverse } +.tabbrowser-tab:hover > stack > .tab-background, +.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::after{ transform: scaleY(-1) scaleX(-1) !important; } +*/ \ No newline at end of file diff --git a/html_resources/tagmap.json b/html_resources/tagmap.json index 3123d94..f3130e1 100644 --- a/html_resources/tagmap.json +++ b/html_resources/tagmap.json @@ -106,5 +106,6 @@ "vertical_menubar.css":["menubar","hack"], "vertical_popup_menubar.css":["menubar","menu","toolbars","popup"], "window_control_placeholder_support.css":["window-control","patch"], -"round_ui_items.css":["buttons","icon","menu","tabs","toolbars","bookmarks"] +"round_ui_items.css":["buttons","icon","menu","tabs","toolbars","bookmarks"], +"curved_tabs.css":["tabs","tab"] } diff --git a/tags.csv b/tags.csv index 6a93da0..f65766d 100644 --- a/tags.csv +++ b/tags.csv @@ -106,3 +106,4 @@ vertical_menubar.css,menubar,hack vertical_popup_menubar.css,menubar,menu,toolbars,popup window_control_placeholder_support.css,window-control,patch round_ui_items.css,buttons,icon,menu,tabs,toolbars,bookmarks +curved_tabs.css,tabs,tab