Styling ButtonBar font in Flex mobile app - with screenshot attached

apache-flex, buttonbar, flex-mobile, flex4, flex4.7

Solution

Alright, I've found that setting `textShadowAlpha` helps:

s|ActionBar, s|ButtonBar {
    chromeColor: #0066CC;
    color: #FFFFFF;
    titleAlign: center;
    textShadowAlpha: 0;
}

And there is also `textShadowColor` available and used by mobile/ActionBarSkin.as, mobile/ButtonSkin.as and mobile/supportClasses/ButtonSkinBase.as

Problem

I'm trying to add a ButtonBar at the bottom of a mobile Flex app by using this code: CSS: ``` @namespace s "library://ns.adobe.com/flex/spark"; s|ActionBar, s|ButtonBar { chromeColor: #0066CC; color: #FFFFFF; titleAlign: center; } ``` ActionScript: ``` <s:ButtonBar requireSelection="true" width="100%" bottom="0" skinClass="spark.skins.mobile.TabbedViewNavigatorTabBarSkin"> <s:ArrayCollection> <fx:Object label="Распасы" /> <fx:Object label="Пуля" icon="{MONEY}" /> <fx:Object label="10" icon="{CALL}" /> </s:ArrayCollection> </s:ButtonBar> ``` Unfortunately the font looks emboiled or blurred at the button labels (at the bottom of the following screenshot): Does anybody please know, how to make the ButtonBar label fonts regular again? I can not find the CSS setting for that. UPDATE: I've searched the source code of AIR SDK (files like ButtonBase.as, Label.as, ButtonBarSkin.as, etc.) and still can not find the answer. So I'm adding a simlified test case + one more screenshot below and a bounty for this question. TestApp.mxml: ``` <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160"> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; s|ActionBar, s|ButtonBar { chromeColor: #0066CC; color: #FFFFFF; titleAlign: center; } </fx:Style> <fx:Script> <![CDATA[ import spark.events.IndexChangeEvent; import spark.skins.mobile.TabbedViewNavigatorTabBarSkin; private function handleTabs(event:IndexChangeEvent):void { _tabs[2].label = String(1 + _tabBar.selectedIndex); _tabs.refresh(); } ]]> </fx:Script> <fx:Declarations> <s:MultiDPIBitmapSource id="CHAT" source160dpi="@Embed('chat.png')" source240dpi="@Embed('chat.png')" source320dpi="@Embed('chat.png')" /> <s:ArrayCollection id="_tabs"> <fx:Object label="One" /> <fx:Object label="Two" /> <fx:Object label="Three" icon="{CHAT}" /> </s:ArrayCollection> </fx:Declarations> <s:ButtonBar id="_tabBar" requireSelection="true" width="100%" bottom="0" skinClass="spark.skins.mobile.TabbedViewNavigatorTabBarSkin" dataProvider="{_tabs}" change="handleTabs(event)"> </s:ButtonBar> </s:Application> ``` chat.png:

Original source