| /* |
| * |
| * Licensed to the Apache Software Foundation (ASF) under one or more |
| * contributor license agreements. See the NOTICE file distributed with |
| * this work for additional information regarding copyright ownership. |
| * The ASF licenses this file to You under the Apache License, Version 2.0 |
| * (the "License"); you may not use this file except in compliance with |
| * the License. You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| * |
| */ |
| |
| @namespace "library://ns.adobe.com/flex/spark"; |
| |
| /* |
| Default Mobile Flex skins and styles. Defaults sizes are based on |
| application-dpi=240. |
| */ |
| |
| ActionBar |
| { |
| chromeColor: #484848; |
| defaultButtonAppearance: normal; |
| skinClass: ClassReference("spark.skins.mobile.ActionBarSkin"); |
| textShadowAlpha: .65; |
| textShadowColor: #000000; |
| paddingBottom: 1; |
| paddingLeft: 0; |
| paddingRight: 0; |
| paddingTop: 1; |
| } |
| |
| ActionBar.beveled |
| { |
| paddingLeft: 7; |
| paddingRight: 7; |
| titleAlign: center; |
| } |
| |
| ActionBar #titleDisplay |
| { |
| color: #FFFFFF; |
| fontSize: 28; |
| fontWeight: bold; |
| } |
| |
| ActionBar ButtonBase |
| { |
| color: #FFFFFF; |
| } |
| |
| ActionBar Group#navigationGroup Button |
| { |
| skinClass: ClassReference("spark.skins.mobile.TransparentNavigationButtonSkin"); |
| } |
| |
| ActionBar Group#navigationGroup Button.emphasized |
| { |
| skinClass: ClassReference("spark.skins.mobile.DefaultTransparentNavigationButtonSkin"); |
| } |
| |
| ActionBar.beveled Group#navigationGroup Button |
| { |
| fontSize: 18; |
| skinClass: ClassReference("spark.skins.mobile.BeveledBackButtonSkin"); |
| } |
| |
| ActionBar.beveled Group#navigationGroup Button.emphasized |
| { |
| skinClass: ClassReference("spark.skins.mobile.DefaultBeveledBackButtonSkin"); |
| } |
| |
| ActionBar Group#actionGroup Button |
| { |
| skinClass: ClassReference("spark.skins.mobile.TransparentActionButtonSkin"); |
| } |
| |
| ActionBar Group#actionGroup Button.emphasized |
| { |
| skinClass: ClassReference("spark.skins.mobile.DefaultTransparentActionButtonSkin"); |
| } |
| |
| ActionBar.beveled Group#actionGroup Button |
| { |
| fontSize: 18; |
| skinClass: ClassReference("spark.skins.mobile.BeveledActionButtonSkin"); |
| } |
| |
| ActionBar.beveled Group#actionGroup Button.emphasized |
| { |
| skinClass: ClassReference("spark.skins.mobile.DefaultBeveledActionButtonSkin"); |
| } |
| |
| BusyIndicator |
| { |
| rotationInterval: 50; |
| } |
| |
| Button |
| { |
| fontWeight: "bold"; |
| skinClass: ClassReference("spark.skins.mobile.ButtonSkin"); |
| } |
| |
| Button.emphasized |
| { |
| skinClass: ClassReference("spark.skins.mobile.DefaultButtonSkin"); |
| } |
| |
| ButtonBar |
| { |
| fontWeight: "bold"; |
| skinClass: ClassReference("spark.skins.mobile.ButtonBarSkin"); |
| } |
| |
| ButtonBase |
| { |
| iconPlacement: "left"; |
| } |
| |
| Callout |
| { |
| backgroundColor: #484848; |
| contentBackgroundAppearance: inset; |
| contentBackgroundColor: #FFFFFF; |
| gap: 12; |
| skinClass: ClassReference("spark.skins.mobile.CalloutSkin"); |
| } |
| |
| Callout ViewNavigator |
| { |
| skinClass: ClassReference("spark.skins.mobile.CalloutViewNavigatorSkin"); |
| } |
| |
| Callout ViewNavigator ActionBar |
| { |
| skinClass: ClassReference("spark.skins.mobile.CalloutActionBarSkin"); |
| defaultButtonAppearance: beveled; |
| paddingLeft: 0; |
| paddingRight: 0; |
| } |
| |
| Callout ViewNavigator ActionBar.beveled |
| { |
| paddingLeft: 0; |
| paddingRight: 0; |
| } |
| |
| Callout ViewNavigator ActionBar.beveled Group#navigationGroup Button |
| { |
| skinClass: ClassReference("spark.skins.mobile.BeveledActionButtonSkin"); |
| } |
| |
| Callout ViewNavigator ActionBar.beveled Group#navigationGroup Button.emphasized |
| { |
| skinClass: ClassReference("spark.skins.mobile.DefaultBeveledActionButtonSkin"); |
| } |
| |
| Callout#viewNavigatorPopUp |
| { |
| contentBackgroundAppearance: none; |
| } |
| |
| CheckBox |
| { |
| skinClass: ClassReference("spark.skins.mobile.CheckBoxSkin"); |
| } |
| |
| DateSpinner |
| { |
| skinClass: ClassReference("spark.skins.mobile.DateSpinnerSkin"); |
| } |
| |
| HScrollBar |
| { |
| skinClass: ClassReference("spark.skins.mobile.HScrollBarSkin"); |
| } |
| |
| HSlider |
| { |
| skinClass: ClassReference("spark.skins.mobile.HSliderSkin"); |
| } |
| |
| IconItemRenderer |
| { |
| paddingBottom: 12; |
| paddingTop: 12; |
| horizontalGap: 10; |
| verticalGap: 9; |
| iconDelay: 500; |
| messageStyleName: "iconItemRendererMessageStyle"; |
| } |
| |
| .iconItemRendererMessageStyle |
| { |
| fontSize: 20; |
| color: #333333; |
| } |
| |
| Image |
| { |
| skinClass: ClassReference("spark.skins.mobile.ImageSkin"); |
| enableLoadingState: false; |
| showErrorSkin : false; |
| smoothingQuality: "default"; |
| } |
| |
| LabelItemRenderer |
| { |
| paddingBottom: 24; |
| paddingLeft: 15; |
| paddingRight: 15; |
| paddingTop: 24; |
| verticalAlign: "middle"; |
| } |
| |
| List |
| { |
| skinClass: ClassReference("spark.skins.mobile.ListSkin"); |
| borderColor: #000000; |
| borderAlpha: 1; |
| verticalScrollPolicy: on; |
| borderVisible: false; |
| } |
| |
| RadioButton |
| { |
| skinClass: ClassReference("spark.skins.mobile.RadioButtonSkin"); |
| } |
| |
| Scroller |
| { |
| touchDelay: 100; |
| } |
| |
| SkinnableContainer |
| { |
| backgroundColor: #FFFFFF; |
| skinClass: ClassReference("spark.skins.mobile.SkinnableContainerSkin"); |
| } |
| |
| SkinnableTextBase:normalWithPrompt |
| { |
| fontStyle: normal; |
| } |
| |
| SkinnableTextBase:disabledWithPrompt |
| { |
| fontStyle: normal; |
| } |
| |
| SpinnerList |
| { |
| skinClass: ClassReference("spark.skins.mobile.SpinnerListSkin"); |
| } |
| |
| SpinnerListContainer |
| { |
| skinClass: ClassReference("spark.skins.mobile.SpinnerListContainerSkin"); |
| } |
| |
| SpinnerListItemRenderer |
| { |
| paddingTop : 18; |
| paddingBottom : 18; |
| paddingLeft : 16; |
| paddingRight : 16; |
| } |
| |
| SplitViewNavigator |
| { |
| skinClass: ClassReference("spark.skins.mobile.SplitViewNavigatorSkin"); |
| backgroundColor: #000000; |
| } |
| |
| TabbedViewNavigatorApplication |
| { |
| backgroundColor: #FFFFFF; |
| skinClass: ClassReference("spark.skins.mobile.TabbedViewNavigatorApplicationSkin"); |
| } |
| |
| TabbedViewNavigator |
| { |
| skinClass: ClassReference("spark.skins.mobile.TabbedViewNavigatorSkin"); |
| } |
| |
| TabbedViewNavigator #tabBar |
| { |
| chromeColor: #484848; |
| color: #FFFFFF; |
| fontSize: 20; |
| fontWeight: normal; |
| iconPlacement: top; |
| interactionMode: mouse; |
| skinClass: ClassReference("spark.skins.mobile.TabbedViewNavigatorTabBarSkin"); |
| textShadowAlpha: .65; |
| textShadowColor: #000000; |
| } |
| |
| TextArea |
| { |
| paddingBottom: 9; |
| paddingLeft: 9; |
| paddingRight: 9; |
| paddingTop: 9; |
| showPromptWhenFocused: true; |
| skinClass: ClassReference("spark.skins.mobile.StageTextAreaSkin"); |
| } |
| |
| TextArea VScrollBar |
| { |
| skinClass: ClassReference("spark.skins.mobile.TextAreaVScrollBarSkin"); |
| } |
| |
| TextArea HScrollBar |
| { |
| skinClass: ClassReference("spark.skins.mobile.TextAreaHScrollBarSkin"); |
| } |
| |
| TextInput |
| { |
| paddingBottom: 9; |
| paddingLeft: 9; |
| paddingRight: 9; |
| paddingTop: 9; |
| showPromptWhenFocused: true; |
| skinClass: ClassReference("spark.skins.mobile.StageTextInputSkin"); |
| } |
| |
| ToggleSwitch |
| { |
| accentColor: #3F7FBA; |
| color: #FFFFFF; |
| fontSize: 27; |
| skinClass: ClassReference("spark.skins.mobile.ToggleSwitchSkin"); |
| slideDuration: 125; |
| textShadowAlpha: .65; |
| textShadowColor: #000000; |
| } |
| |
| View |
| { |
| backgroundColor: #FFFFFF; |
| skinClass: ClassReference("spark.skins.mobile.SkinnableContainerSkin"); |
| } |
| |
| ViewMenu |
| { |
| skinClass: ClassReference("spark.skins.mobile.ViewMenuSkin"); |
| } |
| |
| ViewMenuItem |
| { |
| iconPlacement : "top"; |
| chromeColor : #FFFFFF; |
| paddingBottom: 8; |
| paddingLeft: 8; |
| paddingRight: 8; |
| paddingTop: 8; |
| skinClass : ClassReference("spark.skins.mobile.ViewMenuItemSkin"); |
| } |
| |
| ViewNavigator |
| { |
| skinClass: ClassReference("spark.skins.mobile.ViewNavigatorSkin"); |
| } |
| |
| ViewNavigatorApplication |
| { |
| backgroundColor: #FFFFFF; |
| skinClass: ClassReference("spark.skins.mobile.ViewNavigatorApplicationSkin"); |
| } |
| |
| VScrollBar |
| { |
| skinClass: ClassReference("spark.skins.mobile.VScrollBarSkin"); |
| } |
| |
| global |
| { |
| /* framework styles */ |
| modalTransparency: 0; |
| modalTransparencyBlur: 0; |
| |
| /* Looks */ |
| backgroundAlpha : 1; |
| backgroundImageFillMode : "scale"; |
| borderVisible : true; |
| borderWeight : 1; |
| contentBackgroundColor: #F0F0F0; |
| downColor: #E0E0E0; /* set in here and not in framework's default.css because it only is really applicable for touch interactions*/ |
| selectionColor: #E0E0E0; |
| alternatingItemColors: #FFFFFF; |
| focusThickness: 3; |
| symbolColor: #000000; |
| fontLookup: "embeddedCFF"; |
| fontFamily: "_sans"; |
| fontSize: 24; |
| color: #000000; |
| textShadowColor: #FFFFFF; |
| textShadowAlpha: .55; |
| |
| /* Behaviors */ |
| autoThumbVisibility: true; |
| fixedThumbSize: false; |
| fullScreenHideControlsDelay: 3000; |
| interactionMode: "touch"; |
| liveDragging: true; |
| rollOverOpenDelay: 200; |
| slideDuration: 300; |
| smoothScrolling: true; |
| touchDelay: 0; /* default to 0 here, but Scroller sets it to 100 */ |
| } |
| |
| @media (application-dpi: 120) |
| { |
| ActionBar |
| { |
| paddingBottom: 1; |
| paddingLeft: 0; |
| paddingRight: 0; |
| paddingTop: 1; |
| } |
| |
| ActionBar.beveled |
| { |
| paddingLeft: 4; |
| paddingRight: 4; |
| } |
| |
| ActionBar #titleDisplay |
| { |
| fontSize: 14; |
| } |
| |
| ActionBar.beveled Group#navigationGroup Button |
| { |
| fontSize: 9; |
| } |
| |
| ActionBar.beveled Group#actionGroup Button |
| { |
| fontSize: 9; |
| } |
| |
| Callout |
| { |
| gap: 6; |
| } |
| |
| IconItemRenderer |
| { |
| paddingBottom: 6; |
| paddingTop: 6; |
| horizontalGap: 6; |
| verticalGap: 4; |
| } |
| |
| .iconItemRendererMessageStyle |
| { |
| fontSize: 8; |
| } |
| |
| LabelItemRenderer |
| { |
| paddingBottom: 12; |
| paddingLeft: 8; |
| paddingRight: 8; |
| paddingTop: 12; |
| } |
| |
| SpinnerListItemRenderer |
| { |
| paddingTop : 9; |
| paddingBottom : 9; |
| paddingLeft : 6; |
| paddingRight : 6; |
| } |
| |
| TextArea |
| { |
| paddingBottom: 4; |
| paddingLeft: 4; |
| paddingRight: 4; |
| paddingTop: 4; |
| } |
| |
| TextInput |
| { |
| paddingBottom: 4; |
| paddingLeft: 4; |
| paddingRight: 4; |
| paddingTop: 4; |
| } |
| |
| TabbedViewNavigator #tabBar |
| { |
| fontSize: 10; |
| } |
| |
| ToggleSwitch |
| { |
| fontSize: 13; |
| } |
| |
| global |
| { |
| fontSize: 6; |
| focusThickness: 2; |
| } |
| } |
| |
| |
| @media (application-dpi: 160) |
| { |
| ActionBar |
| { |
| paddingBottom: 1; |
| paddingLeft: 0; |
| paddingRight: 0; |
| paddingTop: 1; |
| } |
| |
| ActionBar.beveled |
| { |
| paddingLeft: 5; |
| paddingRight: 5; |
| } |
| |
| ActionBar #titleDisplay |
| { |
| fontSize: 18; |
| } |
| |
| ActionBar.beveled Group#navigationGroup Button |
| { |
| fontSize: 12; |
| } |
| |
| ActionBar.beveled Group#actionGroup Button |
| { |
| fontSize: 12; |
| } |
| |
| Callout |
| { |
| gap: 8; |
| } |
| |
| IconItemRenderer |
| { |
| paddingBottom: 8; |
| paddingTop: 8; |
| horizontalGap: 8; |
| verticalGap: 6; |
| } |
| |
| .iconItemRendererMessageStyle |
| { |
| fontSize: 14; |
| } |
| |
| LabelItemRenderer |
| { |
| paddingBottom: 16; |
| paddingLeft: 10; |
| paddingRight: 10; |
| paddingTop: 16; |
| } |
| |
| SpinnerListItemRenderer |
| { |
| paddingTop : 12; |
| paddingBottom : 12; |
| paddingLeft : 8; |
| paddingRight : 8; |
| } |
| |
| TextArea |
| { |
| paddingBottom: 6; |
| paddingLeft: 6; |
| paddingRight: 6; |
| paddingTop: 6; |
| } |
| |
| TextInput |
| { |
| paddingBottom: 6; |
| paddingLeft: 6; |
| paddingRight: 6; |
| paddingTop: 6; |
| } |
| |
| TabbedViewNavigator #tabBar |
| { |
| fontSize: 14; |
| } |
| |
| ToggleSwitch |
| { |
| fontSize: 18; |
| } |
| |
| global |
| { |
| fontSize: 16; |
| focusThickness: 2; |
| } |
| } |
| |
| @media (application-dpi: 320) |
| { |
| ActionBar |
| { |
| paddingBottom: 2; |
| paddingLeft: 0; |
| paddingRight: 0; |
| paddingTop: 2; |
| } |
| |
| ActionBar.beveled |
| { |
| paddingLeft: 10; |
| paddingRight: 10; |
| } |
| |
| ActionBar #titleDisplay |
| { |
| fontSize: 36; |
| } |
| |
| ActionBar.beveled Group#navigationGroup Button |
| { |
| fontSize: 24; |
| } |
| |
| ActionBar.beveled Group#actionGroup Button |
| { |
| fontSize: 24; |
| } |
| |
| Callout |
| { |
| gap: 16; |
| } |
| |
| IconItemRenderer |
| { |
| paddingBottom: 16; |
| paddingTop: 16; |
| horizontalGap: 16; |
| verticalGap: 12; |
| } |
| |
| .iconItemRendererMessageStyle |
| { |
| fontSize: 26; |
| } |
| |
| LabelItemRenderer |
| { |
| paddingBottom: 32; |
| paddingLeft: 20; |
| paddingRight: 20; |
| paddingTop: 32; |
| } |
| |
| SpinnerListItemRenderer |
| { |
| paddingTop : 24; |
| paddingBottom : 24; |
| paddingLeft : 24; |
| paddingRight : 24; |
| } |
| |
| TextArea |
| { |
| paddingBottom: 12; |
| paddingLeft: 12; |
| paddingRight: 12; |
| paddingTop: 12; |
| } |
| |
| TextInput |
| { |
| paddingBottom: 12; |
| paddingLeft: 12; |
| paddingRight: 12; |
| paddingTop: 12; |
| } |
| |
| TabbedViewNavigator #tabBar |
| { |
| fontSize: 28; |
| } |
| |
| ToggleSwitch |
| { |
| fontSize: 36; |
| } |
| |
| global |
| { |
| fontSize: 32; |
| } |
| } |
| |
| @media (application-dpi: 480) |
| { |
| ActionBar |
| { |
| paddingBottom: 4; |
| paddingLeft: 0; |
| paddingRight: 0; |
| paddingTop: 4; |
| } |
| |
| ActionBar.beveled |
| { |
| paddingLeft: 15; |
| paddingRight: 15; |
| } |
| |
| ActionBar #titleDisplay |
| { |
| fontSize: 54; |
| } |
| |
| ActionBar.beveled Group#navigationGroup Button |
| { |
| fontSize: 36; |
| } |
| |
| ActionBar.beveled Group#actionGroup Button |
| { |
| fontSize: 36; |
| } |
| |
| Callout |
| { |
| gap: 24; |
| } |
| |
| IconItemRenderer |
| { |
| paddingBottom: 24; |
| paddingTop: 24; |
| horizontalGap: 24; |
| verticalGap: 18; |
| } |
| |
| .iconItemRendererMessageStyle |
| { |
| fontSize: 42; |
| } |
| |
| LabelItemRenderer |
| { |
| paddingBottom: 48; |
| paddingLeft: 30; |
| paddingRight: 30; |
| paddingTop: 48; |
| } |
| |
| SpinnerListItemRenderer |
| { |
| paddingTop : 36; |
| paddingBottom : 36; |
| paddingLeft : 24; |
| paddingRight : 24; |
| } |
| |
| TextArea |
| { |
| paddingBottom: 18; |
| paddingLeft: 18; |
| paddingRight: 18; |
| paddingTop: 18; |
| } |
| |
| TextInput |
| { |
| paddingBottom: 18; |
| paddingLeft: 18; |
| paddingRight: 18; |
| paddingTop: 18; |
| } |
| |
| TabbedViewNavigator #tabBar |
| { |
| fontSize: 42; |
| } |
| |
| ToggleSwitch |
| { |
| fontSize: 54; |
| } |
| |
| global |
| { |
| fontSize: 48; |
| focusThickness: 6; |
| } |
| } |
| |
| |
| @media (application-dpi: 640) |
| { |
| ActionBar |
| { |
| paddingBottom: 4; |
| paddingLeft: 0; |
| paddingRight: 0; |
| paddingTop: 4; |
| } |
| |
| ActionBar.beveled |
| { |
| paddingLeft: 20; |
| paddingRight: 20; |
| } |
| |
| ActionBar #titleDisplay |
| { |
| fontSize: 72; |
| } |
| |
| ActionBar.beveled Group#navigationGroup Button |
| { |
| fontSize: 48; |
| } |
| |
| ActionBar.beveled Group#actionGroup Button |
| { |
| fontSize: 48; |
| } |
| |
| Callout |
| { |
| gap: 32; |
| } |
| |
| IconItemRenderer |
| { |
| paddingBottom: 32; |
| paddingTop: 32; |
| horizontalGap: 32; |
| verticalGap: 36; |
| } |
| |
| .iconItemRendererMessageStyle |
| { |
| fontSize: 26; |
| } |
| |
| LabelItemRenderer |
| { |
| paddingBottom: 64; |
| paddingLeft: 40; |
| paddingRight: 40; |
| paddingTop: 64; |
| } |
| |
| SpinnerListItemRenderer |
| { |
| paddingTop : 48; |
| paddingBottom : 48; |
| paddingLeft : 48; |
| paddingRight : 48; |
| } |
| |
| TextArea |
| { |
| paddingBottom: 24; |
| paddingLeft: 24; |
| paddingRight: 24; |
| paddingTop: 24; |
| } |
| |
| TextInput |
| { |
| paddingBottom: 24; |
| paddingLeft: 24; |
| paddingRight: 24; |
| paddingTop: 24; |
| } |
| |
| TabbedViewNavigator #tabBar |
| { |
| fontSize: 56; |
| } |
| |
| ToggleSwitch |
| { |
| fontSize: 72; |
| } |
| |
| global |
| { |
| fontSize: 64; |
| } |
| } |
| |
| |
| @media (application-dpi: 160) AND (os-platform:"IOS") |
| { |
| TextArea |
| { |
| leading: 1.5; |
| paddingRight: 1.5; |
| } |
| } |
| |
| @media (application-dpi: 320) AND (os-platform:"IOS") |
| { |
| TextArea |
| { |
| leading: 4.5; |
| paddingRight: 3; |
| } |
| } |