| global-base.css |
Change the background of an individual scene or every scene within the application.
Scene HTML |
|---|
<div class="my-backdrop"></div> |
Base selector | Optional selectors | Required child |
|---|---|---|
my-backdrop | ||
body |
Notes:
my-backdropis a developer-defined selector (you can define any selector name); this technique allows each individual scene to have a unique background.Use the
bodyselector to style the body element; a simple solution to style all of the scenes in your application.
| global-lists.css |
The topmost element of the scrollable content; commonly used atop preference scenes.
Scene HTML |
|---|
<div class="palm-page-header multi-line">
<div class="palm-page-header-wrapper">
<div class="icon"></div>
<div class="title">
My title
</div>
</div>
</div> |
Base selector | Optional selectors | Required child |
|---|---|---|
.palm-page-header | .multi-line .icon | .palm-page-header-wrapper |
.palm-page-header-wrapper | ||
.palm-page-header-wrapper > .icon | ||
.palm-page-header-wrapper > .title | .left .center .right .truncating-text |
Notes:
palm-page-header-wrapperis a child element with a specified margin to compensate for the padding effect of-webkit-border-image.palm-page-header-wrapper > .iconshould be a 32 × 32px PNG centered on the div.
| global.css |
A translucent layer used to obscure background UI when modal foreground UI is layered on top of the current scene.
In the absence of view or command menus, these fades at the edge of your scene indicate more content.
Scene HTML |
|---|
<div class="my-scene-fade-top" x-mojo-scroll-fade="top"></div> <div class="my-scene-fade-bottom" x-mojo-scroll-fade="bottom"></div> |
Base selector | Optional selectors | Required child |
|---|---|---|
None |
Notes:
Use a high z-index (100,000) if you want your fades to draw above all else, and use the style
-webkit-palm-mouse-target: ignore;to allow taps to pass through these fades to underlying content.