mobilebone/test/test.css

Bone main for mobile web APP with a sigle page mode by using HTML5 history API router.

body { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; color: #333; }
ul { padding-left: 0; list-style-type: none; }
a { text-decoration: none; color: inherit; }
li > a { display: block; line-height: 32px; padding-left: .5em; margin-top: -1px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; box-shadow: inset 0 1px #fbfbfb; background-color: #eee; position: relative; }
.follow { color: #34538b; }
.follow > .mask { display: inline; width: 32px; height: 32px; background-color: transparent; left: auto; top: 0; }
.page > a[data-rel="back"] { display: inline-block; line-height: 32px; margin: .5em; padding: 0 1em; border: 1px solid #ccc; border-left: 0; border-radius: 0 3px 3px 0; background-color: #eee; position: relative; left: 13px; -webkit-tap-highlight-color: rgba(0,0,0,0); }
.page > a[data-rel="back"]::before { content:''; width: 23px; height: 23px; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; border-bottom-left-radius: 3px; background-color: #eee; position: absolute; left: -12px; top: 4px; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.page > h2, .page > p { padding-left: .5em; }

.header, .footer, .content { position: absolute; left: 0; right: 0; }
.header { height: 36px; top: 0; background-color: #333; color: #fff; z-index: 1; }
.header > h1 { margin: 0; line-height: 36px; font-size: 20px; text-align: center; }
.header > a[data-rel="back"] { position: absolute; padding: 5px 10px; margin: 3px 10px; border: 1px solid #666; border-radius: 4px; background-color: #5e5e5e; font-size: 14px; }
.footer { height: 40px; bottom: 0; background-color: #fff; z-index: 1; }
.footer > h4 { float: left; width: 25%; margin: 0; text-align: center; }
.footer a { display: block; line-height: 40px; -webkit-transition: color .35s; transition: color .35s; }
.footer a.active { color: green; }
.content { padding: 10px; position: absolute; top: 36px; bottom: 40px; overflow: auto; -webkit-overflow-scrolling: touch; }

.btn { display: inline-block; padding: .5em 1em; border: 0 none; border: 1px solid rgba(0,0,0,.25); border-radius: 0.3em; background-image: none; box-shadow: 0 1px rgba(0,0,0,.15), inset 0 1px rgba(255,255,255,.15); color: #fff; text-align: center; text-decoration: none; text-shadow: 1px 1px rgba(0,0,0,.1); font-size: 100%; font-family: inherit; font-weight: inherit; white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; user-select: none; overflow: visible; cursor: pointer; }
.btn:hover, .btn:focus { text-decoration: none; background-image: linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.1)); }
.btn:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }
.btn:active { box-shadow: 0 1px rgba(0,0,0,.2), inset 0 1px rgba(0,0,0,.05); outline: none; }