Reference examples of Css in Flex

CSS file Favorites

/* CSS file */

/* Global
{
Color: # FFFFFF;
ThemeColor: #000000;
}*/

Application
{
Color: # FFFFFF;
Back groundcolor: #000000;
BackgroundImage: Embed (source = "images/theme3.jpg ");
BackgroundSize: auto;
PaddingTop: 0;
}

Accordion
{
DownSkin: Embed (source = "blendSkin.swf", symbol = "DropDownMS_ClosedDOWN ");
OverSkin: Embed (source = "blendSkin.swf", symbol = "DropDownMS_ClosedOVER ");
UpSkin: Embed (source = "blendSkin.swf", symbol = "DropDownMS_ClosedUP ");
Color: #00 CCCC;
Textrolovercolor: # ffffff;
TextSelectedColor: # ffffff;
FontFamily: Arial;
FontSize: 11;
FontWeight: normal;
BorderSkin: Embed (skinClass = 'textarea _ borderskin ');
HeaderStyleName: accordionHeader;
}

Alert
{
PaddingTop: 10;
PaddingBottom: 10;
BorderAlpha: 0.0;
BackgroundAlpha: 0.0;
BackgroundColor: # FFFFFF;
TitleStyleName: Embed (source = "blendSkin.swf", symbol = "alertTitle ");
Fill-colors: # 8F0F0F, #470808, #000000;
Border-skin: ClassReference ("tabNavborderBG ");
HeaderHeight: 10;
ControlBarStyleName: alertControlBar;

}

Button
{
Color: # ffffff;
Textrolovercolor: #000000;
Skin: Embed (skinClass = 'popupbutton _ skin ');
PaddingLeft: 10;

}

ButtonBar
{
FirstButtonStyleName: buttonBarFirstButton;
ButtonStyleName: buttonBarButton;
LastButtonStyleName: buttonBarLastButton;
Color: # E0E0E0;

}

CheckBox
{
Skin: Embed (skinClass = 'checkbox _ icon ');
Icon: Embed (skinClass = 'checkbox _ icon ');
}

ComboBox
{
Skin: Embed (skinClass = 'button _ skin ');
Color: # FFFFFF;
UseRollOver: true;
DropdownStyleName: comboBoxDropdown;
ThemeColor: # FFFFFF;
Textrolovercolor: # DCDCDC;
TextSelectedColor: # 9A9A9A;

}

CursorManager
{
BusyCursorSkin: Embed (source = "blendSkin.swf", symbol = "CursorManager_busyCursor ");
}

ColorPicker
{
Skin: Embed (skinClass = 'colorpicker _ skin ');
FocusAlpha: 0;

}

ControlBar
{
PaddingLeft: 25;
PaddingRight: 25;
Fill-colors: # 8F0F0F, #470808, #000000;
Border-skin: ClassReference ("titleWindowborderBG ");
}

DataGrid
{
Color: #000000;
BorderSkin: Embed (skinClass = 'dropdownms _ BG ');
SelectionColor: #606060;
AlternatingItemColors: # cccccc, # B10101;
Rolovercolor: #590000;
TextSelectedColor: # DCDCDC;
FontWeight: normal;
Textrolovercolor: # CECECE;
HeaderStyleName: dataGridHeader;
HeaderBackgroundSkin: Embed (skinClass = 'boxbtn ');
TextAlign: center;
}

DateChooser
{
NextMonthSkin: Embed (skinClass = 'datechooser _ nextmonthskin ');
PrevMonthSkin: Embed (skinClass = 'datechooser _ prevmonthskin ');
Color: #981010;
TodayStyleName: dateChooserToday;
DisabledColor: #414141;
SelectionColor: # 7C7C7C;
Rolovercolor: # E7E7E7;
TodayColor: # BB9090;
HeaderStyleName: dateChooserHeader;
FontFamily: Arial;
WeekDayStyleName: dateChooserWeekDay;
BackgroundColor: # adadadad;
CornerRadius: 11;
BorderColor: # BD0000;

}

HRule
{
ShadowColor: #222222;
}

VRule
{
ShadowColor: #222222;
}

HScrollBar
{
UpArrowSkin: Embed (skinClass = 'hscrollbar _ uparrowskin ');
DownArrowSkin: Embed (skinClass = 'hscrollbar _ downarrowskin ');
ThumbSkin: Embed (skinClass = 'vscrollbar _ thumbskin ');
TrackSkin: Embed (skinClass = 'vscrollbar _ trackskin ');

}

VScrollBar
{
UpArrowSkin: Embed (skinClass = 'vscrollbar _ uparrowskin ');
DownArrowSkin: Embed (skinClass = 'vscrollbar _ downarrowskin ');
ThumbSkin: Embed (skinClass = 'vscrollbar _ thumbskin ');
TrackSkin: Embed (skinClass = 'vscrollbar _ trackskin ');

}

Label
{
Color: # FFFFFF;
}

LinkButton
{
UpSkin: Embed (skinClass = 'hyperbtn _ up ');
OverSkin: Embed (skinClass = 'hyperbtn _ over ');
DownSkin: Embed (skinClass = 'hyperbtn _ low ');
Textrolovercolor: # CBCBCB;
TextSelectedColor: # B4B4B4;

}

List
{
Color: #000000;
BackgroundColor: # cccccc;
}

TileList
{
BackgroundColor: # cccccc;
}

MenuBar
{
ItemUpSkin: Embed (skinClass = 'boxbtn ');
ItemOverSkin: Embed (skinClass = 'boxbtn ');
ItemDownSkin: Embed (skinClass = 'boxbtn ');
Color: # F1F1F1;

}

HorizontalList
{
BackgroundColor: # cccccc;
}

Panel
{
CornerRadius: 18;
PaddingLeft: 5;
PaddingRight: 5;
PaddingTop: 5;
PaddingBottom: 5;
ControlBarStyleName: panelControlBar;
TitleBackgroundSkin: Embed (skinClass = 'title _ bgskin ');
RoundedBottomCorners: true;
BackgroundAlpha: 0.0;
BorderAlpha: 0.0;
}

ProgressBar
{
TrackSkin: Embed (skinClass = 'ssssbar _ trackskin ');
BarSkin: Embed (skinClass = 'ssssbar _ barskin ');
IndeterminateSkin: Embed (skinClass = 'ssssbar _ indeterminateSkin ');

}

RadioButton
{
Skin: Embed (skinClass = 'radiobutton _ icon ');
Icon: Embed (skinClass = 'radiobutton _ icon ');
}

NumericStepper
{
DownArrowSkin: Embed (skinClass = 'numericstepper _ downarrowskin ');
UpArrowSkin: Embed (skinClass = 'numericstepper _ uparrowskin ');

}

PopUpButton
{
UpSkin: Embed (skinClass = 'tabs _ unselected ');
OverSkin: Embed (skinClass = 'tabs _ selected ');
DownSkin: Embed (skinClass = 'tabs _ unselected ');
Textrolovercolor: # FFFFFF;
TextSelectedColor: # DFDFDF;
Icon: Embed (skinClass = 'popupbutton _ popUpIcon ');
HorizontalGap: 7;
PopUpOverSkin: Embed (skinClass = 'popupbtn ');
PopUpDownSkin: Embed (skinClass = 'popupbtn2 ');

}

HSlider
{
ThumbSkin: Embed (source = "blendSkin.swf", symbol = "Slider_thumbSkin ");
}

VSlider
{
ThumbSkin: Embed (source = "blendSkin.swf", symbol = "Slider_thumbSkin ");
}

TabNavigator
{
BorderStyle: none;
BackgroundAlpha: 0;
Back groundcolor: #283346;
Fill-colors: # 8F0F0F, #470808, #000000;
TabStyleName: "myTabs ";
SelectedTabTextStyleName: "myTabs ";
Border-skin: ClassReference ("tabNavborderBG ");
}

TabBar
{
FirstTabStyleName: tabBarFirstTab;
TabStyleName: tabBarTab;
LastTabStyleName: tabBarLastTab;

}

TextInput
{
BorderSkin: Embed (skinClass = 'searchbg ');
PaddingLeft: 7;
PaddingTop: 2;
Color: #991010;

}

TextArea
{
BorderSkin: Embed (skinClass = 'textarea _ borderskin ');
PaddingLeft: 7;
PaddingRight: 7;
PaddingTop: 2;
Color: #991010;
}

TitleWindow
{
CornerRadius: 18;
PaddingLeft: 5;
PaddingRight: 5;
PaddingTop: 5;
PaddingBottom: 5;
Fill-colors: #000000, #470808, #350606;
ControlBarStyleName: panelControlBar;
TitleBackgroundSkin: Embed (skinClass = 'title _ bgskin ');
Border-skin: ClassReference ("titleWindowborderBG ");
RoundedBottomCorners: true;
BackgroundAlpha: 0.0;
BorderAlpha: 0.0;
}

Tree
{
BorderSkin: Embed (skinClass = 'textarea _ borderskin ');
Rolovercolor: #878787;
SelectionColor: # DF0000;
DefaultLeafIcon: Embed (skinClass = 'tree _ folderOpenIcon ');
FolderClosedIcon: Embed (skinClass = 'tree _ folderClosedIcon ');
FolderOpenIcon: Embed (skinClass = 'tree _ defaultLeafIcon ');
PaddingLeft: 5;
PaddingTop: 5;
PaddingBottom: 2;

}

. MyTabs {
Color: # ffffff;
BorderColor: #666666;
Textrolovercolor: # CCCCCC;
UpSkin: Embed (source = "blendSkin.swf", symbol = "tabs_selected ");
OverSkin: Embed (source = "blendSkin.swf", symbol = "tabs_selected ");
DownSkin: Embed (source = "blendSkin.swf", symbol = "tabs_selected ");
DisabledSkin: Embed (source = "blendSkin.swf", symbol = "tabs_selected ");
SelectedUpSkin: Embed (source = "blendSkin.swf", symbol = "tabs_unselected ");
SelectedOverSkin: Embed (source = "blendSkin.swf", symbol = "tabs_unselected ");
SelectedDownSkin: Embed (source = "blendSkin.swf", symbol = "tabs_unselected ");
SelectedDisabledSkin: Embed (source = "blendSkin.swf", symbol = "tabs_unselected ");
}

. AlertControlBar
{
BackgroundImage: Embed (skinClass = 'alerttitle ');
BackgroundAlpha: 0.0;
BorderSkin: Embed (skinClass = 'alerttitle ');
Color: # FFFFFF;
PaddingTop: 25;
FontWeight: bold;
}
. DateChooserToday
{
FontFamily: Arial;
FontWeight: bold;
}
@ Font-face
{
FontFamily: "Arial Black ";
FontWeight: normal;
FontStyle: normal;
Src: local ("Arial Black ");
}
. DateChooserHeader
{
FontFamily: Arial;
FontWeight: bold;
}
/* @ Font-face
{
FontFamily: Cambria;
FontWeight: normal;
FontStyle: normal;
Src: local ("Cambria ");
}
@ Font-face
{
FontFamily: "Angsana New ";
FontWeight: normal;
FontStyle: normal;
Src: local ("Angsana New ");
}*/
. DateChooserWeekDay
{
FontFamily: Arial;
}
. ComboBoxDropdown
{
CornerRadius: 5;
Back groundcolor: #616161;
BorderStyle: solid;
BorderColor: # B7BABC;
Rolovercolor: #363636;
SelectionColor: #980000;
}
. AccordionHeader
{
Skin: Embed (skinClass = 'accordionheader _ skin ');
}
. ButtonBarFirstButton
{
UpSkin: Embed (skinClass = 'hyperbtn _ up ');
OverSkin: Embed (skinClass = 'hyperbtn _ over ');
DownSkin: Embed (skinClass = 'hyperbtn _ low ');
SelectedUpSkin: Embed (skinClass = 'hyperbtn _ over ');
SelectedOverSkin: Embed (skinClass = 'hyperbtn _ up ');
SelectedDownSkin: Embed (skinClass = 'hyperbtn _ low ');
Textrolovercolor: # C4C4C4;
TextSelectedColor: #868686;
}
. ButtonBarButton
{
UpSkin: Embed (skinClass = 'hyperbtn _ up ');
OverSkin: Embed (skinClass = 'hyperbtn _ over ');
DownSkin: Embed (skinClass = 'hyperbtn _ low ');
SelectedUpSkin: Embed (skinClass = 'hyperbtn _ over ');
SelectedOverSkin: Embed (skinClass = 'hyperbtn _ up ');
SelectedDownSkin: Embed (skinClass = 'hyperbtn _ low ');
Textrolovercolor: # CCCCCC;
TextSelectedColor: # 9A9A9A;
}
. ButtonBarLastButton
{
UpSkin: Embed (skinClass = 'hyperbtn _ up ');
OverSkin: Embed (skinClass = 'hyperbtn _ over ');
DownSkin: Embed (skinClass = 'hyperbtn _ low ');
SelectedUpSkin: Embed (skinClass = 'hyperbtn _ over ');
SelectedOverSkin: Embed (skinClass = 'hyperbtn _ up ');
SelectedDownSkin: Embed (skinClass = 'hyperbtn _ low ');
Textrolovercolor: # CFCFCF;
TextSelectedColor: # 8E8E8E;
}
. TabBarFirstTab
{
UpSkin: Embed (skinClass = 'pupbtn ');
OverSkin: Embed (skinClass = 'popupbtn2 ');
DownSkin: Embed (skinClass = 'pupbtn ');
SelectedUpSkin: Embed (skinClass = 'popupbtn2 ');
SelectedOverSkin: Embed (skinClass = 'popupbtn ');
SelectedDownSkin: Embed (skinClass = 'popupbtn2 ');
Textrolovercolor: # E9E9E9;
TextSelectedColor: # BCBCBC;
}
. TabBarTab
{
UpSkin: Embed (skinClass = 'pupbtn ');
OverSkin: Embed (skinClass = 'popupbtn2 ');
DownSkin: Embed (skinClass = 'pupbtn ');
SelectedUpSkin: Embed (skinClass = 'popupbtn2 ');
SelectedOverSkin: Embed (skinClass = 'popupbtn ');
SelectedDownSkin: Embed (skinClass = 'popupbtn2 ');
Textrolovercolor: # E1E1E1;
TextSelectedColor: # B3B2B2;
}
. TabBarLastTab
{
UpSkin: Embed (skinClass = 'pupbtn ');
OverSkin: Embed (skinClass = 'popupbtn2 ');
DownSkin: Embed (skinClass = 'pupbtn ');
SelectedUpSkin: Embed (skinClass = 'popupbtn2 ');
SelectedOverSkin: Embed (skinClass = 'popupbtn ');
SelectedDownSkin: Embed (skinClass = 'popupbtn2 ');
Textrolovercolor: # DDDDDD;
TextSelectedColor: # A9A9A9;
}
. DataGridHeader
{
Color: # FFFFFF;
FontWeight: bold;
TextAlign: center;
}