| Parts background color with gradient [message #1776762] |
Tue, 21 November 2017 10:40  |
 Josselin Kerdraon
Messages: 29
Registered: February 2016 |
Junior Member |
|
|
Hello,
I'm doing a very simple style sheet for my E4 application. The goal is to change the background color of the parts that are selected. Selected parts of stacks we are not focused on, should be white. And the selected part of the focused stack should be blue.
So I did this:
.MPartStack > CTabItem:selected {
background-color: #FFFFFF;
}
.MPartStack.active > CTabItem:selected {
background-color: #B4CDE6;
}
.MPartStack.active.noFocus > CTabItem:selected {
background-color: #FFFFFF;
}
And it works perfectly.
But, instead of the blue, I would like to have a gradient color. So I did this:
.MPartStack > CTabItem:selected {
background-color: #FFFFFF;
}
.MPartStack.active > CTabItem:selected {
background-color: gradient linear #FFFFFF #B4CDE6;
}
.MPartStack.active.noFocus > CTabItem:selected {
background-color: #FFFFFF;
}
And, it doesn't work anymore.
Some elements of the part stays blue when an other part (in an other partstack) is selected and some of them can't become blue again if the part has already been selected one time.
How a color type change (simple color to gradient color) could change the part behavior ?
[Updated on: Tue, 21 November 2017 10:45] Report message to a moderator |
|
|
| Re: Parts background color with gradient [message #1776777 is a reply to message #1776762] |
Tue, 21 November 2017 14:31  |
Eclipse User |
|
|
|
E4 CSS uses a non-standard gradient representation. If I recall correctly it looks like:
colour1 colour2 ... colourN percent1_2 percent2_3 ... percentN_1_N
where the percentsX_Y express the transition point between colourX and colourY as a percentage of the total. The percents are optional, in which case the transition points are spaced evenly based on the number of colours.
|
|
|
|
| Re: Parts background color with gradient [message #1776895 is a reply to message #1776831] |
Wed, 22 November 2017 15:11 |
| Eclipse User |
|
|
|
Diagnosing CSS is not something I'm fond of, so I built two utilities to help that are part of the E4 Runtime Spies: the CSS Spy and the CSS Scratchpad. They're available from the E4 Tools update site at:
http://download.eclipse.org/e4/snapshots/org.eclipse.e4.tools/latest
The CSS Spy lets you try different selectors and apply CSS properties directly to widgets. The Scratchpad lets you try composing snippets.
IIRC, with the tabs don't actually apply CSS to the individual CTabItems, but instead set the following on the .MPartStack or CTabFolder:
swt-selected-tab-fill: #f0a090;
swt-selected-tabs-background: #f0a090 #be5a37 50% 100%;
swt-unselected-tabs-color: #c7c9c9;
|
|
|
Powered by
FUDForum. Page generated in 0.03488 seconds
] 
Search
Help
Register
Login
Home
