mobilebone/test/complex/css/wechat.css

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

/* wechat.css */
body { background-color: #ebebeb; font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; background-color:#f0f0f0; }
a { text-decoration: none; -webkit-tap-highlight-color: rgba(0,0,0,0); }
h1,h2,h3,h4,h5,h6{ margin: 0; font-weight: 400; }
ul,ol{ margin: 0; list-style-type: none; }

.header, .footer, .content { position: absolute; left: 0; right: 0; overflow: hidden; }
.header, .footer { -webkit-animation: .35s ease-in-out;	animation: .35s ease-in-out; }
.header.out, .footer.out { -webkit-transform: translateX(-100%); transform: translateX(-100%); }

.header { height: 48px; padding: 0 5px; background-color: #21292B; color: #fff; top: 0; z-index: 1; }
.header > h1 { line-height: 48px; margin: 0 0 0 10px; font-size: 18px; float: left; }
.header > a { display: inline-block; width: 48px; height: 48px; background-size: 48px 144px; text-indent: -9em; overflow: hidden; }
.header > .icon-search, .header > .icon-add { float: right; }
.header > .icon-back { float: left; position: relative; margin-left: -5px; }
.header > .icon-back::after { content: ''; height: 24px; border-right: 1px solid #191212; position: absolute; top: 12px; right: 0; }
.footer { height: 52px; border-top: 1px solid #dfdfdf; background-color: #fcfcfc; bottom: 0; z-index: 1; }
.footer > a { width: 25%; text-align: center; color: #999; float: left; font-size: 14px; }
.footer > a > i { display: block; height: 35px; margin-bottom: -3px; background-size: 35px 280px; }
.footer > .active { color: #45c018; }
.content { top: 48px; bottom: 53px; }
.header + .content { bottom: 0; }

.icon-search, .icon-back, .icon-add { background: url(../img/icon-header.png) no-repeat; }
.icon-back { background-position: 0 -96px; }
.icon-add { background-position: 0 -48px; }
.icon-wechat, .icon-contacts, .icon-finds, .icon-mes { background: url(../img/icon-footer.png) no-repeat center top; }
.active .icon-wechat { background-position: center -35px; }
.icon-contacts { background-position: center -70px; }
.active .icon-contacts { background-position: center -105px; }
.icon-finds  { background-position: center -140px; }
.active .icon-finds { background-position: center -175px; }
.icon-mes  { background-position: center -210px; }
.active .icon-mes { background-position: center -245px; }
.icon-find { background: url(../img/icon-find.png) no-repeat; background-size: 28px 210px; }
.icon-find-2 { background-position: 0 -30px; }
.icon-find-3 { background-position: 0 -60px; }
.icon-find-4 { background-position: 0 -90px; }
.icon-find-5 { background-position: 0 -120px; }
.icon-find-6 { background-position: 0 -150px; }
.icon-find-7 { background-position: 0 -180px; }
.icon-me { background: url(../img/icon-me.png) no-repeat; background-size: 28px 120px; }
.icon-me-2 { background-position: 0 -30px; }
.icon-me-3 { background-position: 0 -60px; }
.icon-me-4 { background-position: 0 -90px; }


.wechat-list { display: block; height: 64px; padding: 8px 12px; box-sizing: border-box; border-bottom: 1px solid #d7d7d7; background-color: #fff; }
.wechat-list:last-child { border-bottom: 0; }
.wechat-list > img { width: 48px; height: 48px; float: left; }
.wechat-list > .cell { padding-left: 58px; line-height: 24px; color: #333; }
.wechat-h-time { overflow: hidden; }
.wechat-h-time > h5 { font-size: 100%; float: left; }
.wechat-h-time > time { font-size: 12px; color: #b9b9b9; float: right; }
.wechat-h-time .business { color: #54688D; }
.wechat-h-time + p { margin: 0 20px 0 0; font-size: 14px; color: #a8a8a8; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.wechat-detail { position: relative; z-index: 1; }

.contact-group { padding-left: 10px; padding-right: 10px; background-color: #fff; }
.contact-list { height: 36px; padding-top: 7.5px; padding-bottom: 8px; border-bottom: 1px solid #D8D8D8; }
.contact-list:last-child { border-bottom: 0; }
.contact-list > img { width: 36px; height: 36px; position: absolute; }
.contact-list > nickname { display: block; line-height: 36px; margin-left: 44px; }
.contact-h { line-height: 23px; padding-left: 10px; font-size: 12px; color: #868686; background-color: #eee; }

.find-group { padding-left: 12px; padding-right: 12px; margin-top: 20px; margin-bottom: 20px; background-color: #fff; }
.find-list { height: 30px; line-height: 30px; padding-top: 9px; padding-bottom: 9px; border-bottom: 1px solid #d7d7d7; text-indent: 52px; position: relative; }
.find-list:last-child { border-bottom: 0; }
.find-list > .icon-find { position: absolute; height: 30px; width: 28px; left: 10px; }

.me-group { padding-left: 12px; padding-right: 12px; margin-top: 20px; margin-bottom: 20px; background-color: #fff; }
.me-list { height: 30px; line-height: 30px; padding-top: 9px; padding-bottom: 9px; border-bottom: 1px solid #d7d7d7; text-indent: 52px; position: relative; }
.me-list:last-child { border-bottom: 0; }
.me-list > .icon-me { position: absolute; height: 30px; width: 28px; left: 10px; }
.me-header { padding: 8px 0; overflow: hidden; }
.me-head { width: 64px; height: 64px; float: left; }
.me-detail { margin-left: 80px; }
.me-detail > h6 { line-height: 35px; font-size: 100%; }