CSS - jeeeyul/eclipse-themes GitHub Wiki

This documents provides description of css properties that are provided by Jeeeyul's eclipse themes. You may need to read CSS/SWT Mapping document first.

All API Contracts in this document are valid at version 2.x.x.

CTabFolder Layout

At first of all, to use JeeeyulTabRenderer, you have to specify swt-tab-renderer:

.MPartStack {
  swt-tab-renderer:
    url('bundleclass://net.jeeeyul.eclipse.themes/net.jeeeyul.eclipse.themes.rendering.JeeeyulsTabRenderer');
}

Property	Type	Description	Example
swt-tab-height	Pixel	Height of tab header	22px
jtab-border-radius	Pixel	Radius for border of Tab and Tab Items	4px
jtab-spacing	Pixel	Gap between each tab items	2px
jtab-item-padding	Bounds	Padding for inside area of Tab Item	0px 5px 0px 5px
jtab-padding	Bounds	Padding for tab body content	2px 2px 2px 2px
jtab-margin	Bounds	Margin for the tab body	0px 4px 4px 4px
jtab-shadow-color	Color	Color for the shadow of tab body	gray
jtab-shadow-position	Point	Shadow offset for shadow of the tab body	2px 2px
jtab-shadow-radius	Pixel	Radius for the shadow of tab body	4px

Tab Header & Tab Body

Property	Type	Description	Example
jtab-header-background	Gradient	Gradient for the background of tab header	red yellow #fff 50% 100%
jtab-border-color	Gradient	Gradient for the border of tab body	blue red 100%
background	Color	Color for the content wrapping area of tab body	white
jtab-truncate-tab-items	Boolean	Truncates Tab Items to show more Tab Items.	true
jtab-use-ellipses	Boolean	Whether shows ellipses for truncated tab item text	true
jtab-minimum-characters	Int (1 ~ 4)	Minimum character count to truncate.	true

Limitations:

jtab-margin ignores top margin due to CTabFolder implementation.
jtab-item-padding ignores top and bottom margin due to swt-tab-height.

Selected Tab Item

Property	Type	Description	Example
jtab-selected-tab-background	Gradient	Gradient for selected tab item	blue orange white 20% 100%
jtab-selected-border-color	Gradient	Gradient for the border of selected tab item	#000 #999 100%
jtab-selected-text-shadow-color	Color	Color for the shadow of selected tab item text	white
jtab-selected-text-shadow-position	Point	Offset for the shadow of selected tab item text	1px 1px

sets text color of selected tab item

.MPartStack > CTabItem:selected {
	color : black;
}

Limitations:

jtab-selected-tab-background could not be "none".

Unselected Tab Item

Property	Type	Description	Example
jtab-unselected-tabs-background	Gradient	Gradient for unselected tab item	blue orange white 20% 100%
jtab-unselected-border-color	Gradient	Gradient for the border of unselected tab item	#000 #999 100%
jtab-unselected-text-shadow-color	Color	Color for the shadow of unselected tab item text	white
jtab-unselected-text-shadow-position	Point	Offset for the shadow of unselected tab item text	1px 1px

sets text color of unselected tab item

.MPartStack > CTabItem {
	color : black;
}

Hovered Tab Item

Property	Type	Description	Example
jtab-hover-color	Color	Color for the text of hovered tab item	red
jtab-hover-tabs-background	Gradient	Gradient for hover tab item	blue orange white 20% 100%
jtab-hover-border-color	Gradient	Gradient for the border of hover tab item	#000 #999 100%
jtab-hover-text-shadow-color	Color	Color for the shadow of hover tab item text	white
jtab-hover-text-shadow-position	Point	Offset for the shadow of hover tab item text	1px 1px

Other CTabFolder Properties

Property	Type	Description	Example
jtab-close-button-color	Color	Color for close button	red
jtab-close-button-hot-color	Color	Hover color for close button	red
jtab-close-button-active-color	Color	Active color for close button	red
jtab-close-button-line-width	Pixel	Line width of the close button	2px
jtab-chevron-color	Color	Chevron color	red

Empty CTabFolder

What if you are set a renderer as net.jeeeyul.eclipse.themes.rendering.JeeeyulsTabRenderer, Then "empty" class will be available when CTabFolder has no CTabItem

.MPartStack.empty{
    swt-unselected-tabs-color: black black 100%;
    jtab-border-color: none;
}

Text Editor Lining

Property	Type	Description	Example
jeditor-line-style	String	One of "none", "solid", "dashed", "dotted"	"solid"
jeditor-line-color	Color	Color for the underlines in text editors.	red

example: ```css .MPart.Editor StyledText{ jeditor-line-style: dashed; jeditor-line-color: red; } ```

Window

Property	Type	Description	Example
jsash-width	Pixel	Gap between each parts	4px

example:

.MPartSashContainer{
	jsash-width: 5px;
}

Types

Bounds

Bounds Type composed with top right bottom left. You can skip some values:

jtab-margin : 4px;
/* is equals to */
jtab-margin : 4px 4px 4px 4px;

jtab-margin : 4px 10px;
/* is equals to */
jtab-margin : 4px 10px 4px 10px;

Color

HTML valid color expression. You can specify "none" to draw nothing.

jtab-selected-text-shadow-color: olive;
jtab-selected-text-shadow-color: #000;
jtab-selected-text-shadow-color: none;

Gradient

Gradient type has 3 types of expression:

jtab-selected-border-color: red;			/* solid color */
jtab-selected-border-color: red white 100%; /* gradient */
jtab-selected-border-color: none;			/* Don't draw */

Point

Point type composed with 2 pixel values:

jtab-shadow-position: 4px 4px;