Curves with colour gradient

[MagratG]

Excellent bit of code that replicates the now defunct Tab Mix Pro look. Thanks! There are two modifications I've been trying to achieve, though. One is to use variables for the colours, the other is to get colour gradients in the curved bits of the tabs. I can get both to work in the central area of the tabs but not in the curved bits ! I add these definitions to the :root part --colour_active_1: rgba(255,204,153, 1);

Oh!, sorry, how about text colour? TIA Magrat.

[wilfredwee]

Hi, take a look at this commit here: https://github.com/wilfredwee/photon-australis/commit/389c751f6f6a6d93a9398b5886cf3372fff17a72

The trick is to add the color variable in the SVG as well.

[MagratG]

Thanks for the reply but I can’t see where the colour variable is added to the SVG part. It still seems to contain the rgb(255,255,255) type reference. That was really my problem, I couldn’t see how you added a variable reference to the SVG part.

TTFN

Dennis

From: Wilfred Wee [mailto:notifications@github.com] Sent: 09 January 2018 04:50 To: wilfredwee/photon-australis Cc: MagratG; Author Subject: Re: [wilfredwee/photon-australis] Curves with colour gradient (#35)

Hi, take a look at this PR here, it changes the color variable to suit a certain theme: #32 https://github.com/wilfredwee/photon-australis/pull/32

The trick is to add the color variable in the SVG as well.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/wilfredwee/photon-australis/issues/35#issuecomment-356179371 , or mute the thread https://github.com/notifications/unsubscribe-auth/ALBUf9vOFnI79Eo92fxfE4BfB3u8CMCdks5tIvAAgaJpZM4RVREK .Image removed by sender.

[wilfredwee]

Hi, sorry for the late reply.

If you take a look at the latest piece of code (https://github.com/wilfredwee/photon-australis/blob/master/userChrome-dark.css) , the color variable is embedded in the SVG variables in line 142 onwards.

For example:

--svg-hover-before: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgba(255, 255, 255, .1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>");

It's embedded here: style='background-color:rgba(255, 255, 255, .1);

You can change it to whatever color you want.

[MagratG]

Ah, wilfredwee, I think you misunderstand my problem. In your example the colour is given as an rgba() value, what I want to do is use a pre-declared colour variable: e.g. var(--colour_active_1), where I have already declared "--colour_active_1" as an rgba() value. Ideally, I'd like to put a colour-gradient into the SVG part. I've managed to do all this for the central oblong part of the tab but I can't figure out how to add this to the SVG curves.

[wilfredwee]

Hi,

Unfortunately this is not possible with just CSS. This is also the reason why I had to duplicate a lot of code between different colors' CSS.

It's possible with certain preprocessors or templating system but I haven't had time to look into it.

[MagratG]

Ah! That accounts for why I've not seen this done elsewhere.
Thanks for all your comments, I'll give up on that little idea now and stick to simple colours.