ReadViewSDK/Doc/WXRead/resources/css/Style/style.css

/**
 * Copyright (C) 2015 Wasabeef
 *
 * Licensed 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.
 */

@charset "UTF-8";

/****** global ******/

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
}

html {
    height:100%;
}

body {
    height:100%;
    overflow:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
}

.re {
    min-height:100%;
    overflow:hidden;
    outline:0px solid transparent;
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    -webkit-user-select:auto !important;
    -webkit-user-modify:read-write !important;
    font-size: 18px;
    line-height: 30px;
    font-family: -apple-system;
    color: #0D141E;
    padding: 0 20px;
}

.re_Display {
    min-height: 0; /* 展示的时候不需要设置 min-height，否则cell里面通过 js 获取高度无法拿到正确的值 */
    padding: 8px 20px 0;
    line-height: 32px;
    -webkit-user-modify: read-only !important;
}

.re_placeholder:before {
    position: absolute;
    top: 0;
    content:attr(placeholder);
    color: #ADB4BE;
}

/****** widget ******/

.re div, .re p {
    margin: 18px 0px 0px 0px;
    word-break: break-word;
    word-wrap: break-word;
}

/** re下第一个element **/
.re_Write *:first-child,
.re_Display *:first-child {
  margin-top: 0 !important;
}

.re_Write > :first-child
.re_Display > :first-child {
    margin-top: 0 !important;
}

.re_Write > :empty + * {
    margin-top: 0 !important;
}

.re div p, .re p div {
    margin: 0px;
}

blockquote {
    margin: 18px 0px 0px 0px;
    padding: 14px;
    color: #353C46;
    border-left: 2px solid #D4D6D8;
    background-color: #F4F5F7;
    font-weight: 300;
}

blockquote p:empty {
    display: none;
}

blockquote p:first-child {
    margin-top: 0px;
}

/*复制的内容有可能经过js之后会包一个空的p，所以要找到下一个p去掉margin*/
blockquote p:empty:first-child + p {
    margin-top: 0px;
}

a, .re_link {
    text-decoration:none;
    color: rgba(84, 127, 176, 1);
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.5);
}

ul, ol {
    list-style-type: none;
    padding: 0px;
    margin: 18px 0px 0px 0px;
    overflow: hidden;
}

.re div ul, .re div ol {
    margin: 0px;
}

.re p ul, .re p ol {
    margin: 0px;
}

ul li, ol li {
    margin-top: 2px;
    padding: 0px 0px 0px 24px;
}

ul li:first-of-type, ol li:first-of-type {
    margin-top: 0px;
}

ul li:before, ol li:before {
    content: "";
    width: 6px;
    height: 6px;
    background-color: #353C46;
    border-radius: 3px;
    float: left;
    margin-top: 11px;
    margin-left: -18px;
}

.re span{
  background: none !important;
}

h1, h2 {
    margin: 19px 0px 0px 0px;
    overflow: hidden;
    font-weight: 500;
    font-size: 24px;
    color: #0D141E;
    line-height: 36px;
    /* FZFSJW--GB1-0字体在iOS平台下，在h1纯英文的场景下会导致文字重叠，所以改用HYXinRenWenSongW */
    /* HYXinRenWenSongW是自动下载的，为了防止还没有下载的时候读取不到字体，就在后面用FZFSJW--GB1-0作为候补 */
/*    font-family: 'HYXinRenWenSongW', 'FZFSJW--GB1-0';*/
}

img {
    vertical-align: middle;
    /* 防止拖拽表情后变成 blob */
    -webkit-user-drag: none;
    user-drag: none;
}

/** hack掉系统产生的奇怪span **/
.re p span,
.re h1 span,
.re h2 span,
.re blockquote span,
.re ul span{
    font-family: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
}

/****** widgets ******/

/* bookItem */

.re .re_bookItem{
    padding: 0px 16px 0px 0px;
    margin-top: 18px;
    -webkit-user-select: none !important;
    border: 1px solid #dee0e2;
    box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.03);
    overflow: hidden;
}
.re_Write .re_bookItem{
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
}
.re .re_bookItem_Touched{
  background: #f8fafc;
}
@media (-webkit-min-device-pixel-ratio: 2){
    .re .re_bookItem{
        position: relative;
        border: none;
    }
    .re .re_bookItem:after{
        content:"";
        position: absolute;
        top: 0;
        left: 0;
        width: 200%;
        height: 200%;
        box-sizing: border-box;
        border: 1px solid #dee0e2;
        pointer-events: none;
        -webkit-transform: scale(0.5);
        -webkit-transform-origin: 0 0;
        transform: scale(0.5);
        transform-origin: 0 0;
    }
}
@media (-webkit-min-device-pixel-ratio: 3){
    .re .re_bookItem:after{
        width: 300%;
        height: 300%;
        transform: scale(0.3333);
        transform-origin: 0 0;
        -webkit-transform: scale(0.3333);
        -webkit-transform-origin: 0 0;
    }
}
.re .re_bookItem_cover{
    float: left;
    width: 60px;
    height: 86px;
    margin-right: 16px;
    margin-top: 0;
    background: #fff;
    border-right: 1px solid rgba(0,0,0,0.10);
}
@media (-webkit-min-device-pixel-ratio: 2){
    .re .re_bookItem_cover{
        position: relative;
        border: none;
    }
    .re .re_bookItem_cover:after{
        content:"";
        position: absolute;
        top: 0;
        left: 0;
        width: 200%;
        height: 200%;
        box-sizing: border-box;
        border-right: 1px solid rgba(0,0,0,0.10);
        pointer-events: none;
        transform: scale(0.5);
        transform-origin: 0 0;
        -webkit-transform: scale(0.5);
        -webkit-transform-origin: 0 0;
    }
}
@media (-webkit-min-device-pixel-ratio: 3){
    .re .re_bookItem_cover:after{
        width: 300%;
        height: 300%;
        transform: scale(0.3333);
        transform-origin: 0 0;
        -webkit-transform: scale(0.3333);
        -webkit-transform-origin: 0 0;
    }
}
.re .re_bookItem_cover_img{
    display: block;
    width: 100%;
    height: 100%;
}
.re .re_bookItem_title{
    line-height: 20px;
    margin: 0;
    margin-top: 21px;
    font-size: 17px;
    color: #49505A;
    font-family: 'HYXinRenWenSongW', 'FZFSJW--GB1-0';
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.re .re_bookItem_author{
    margin-top: 8px;
    font-size: 15px;
    line-height: 18px;
    color: #717882;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'HYXinRenWenSongW', 'FZFSJW--GB1-0';
}
.re_img {
    display: block;
    max-width: 100%;
    margin: 18px auto 0px;
    background-color: #f4f5f7;
}

.re_Write .re_img{
    display: inline-block;
    width: 100%;
    vertical-align: bottom; /** 为了修复图片后面连着文字时文字的光标长度 **/
}

.re_Write .re_img_MarginTop{
  margin-top: 18px !important;
}
.re_Write .re_img_MarginBottom{
  margin-bottom: 18px !important;
}
.re_Write .re_img_MarginBottom + .re_img_MarginTop{
    margin-top: 0 !important;
}

/** display 特供样式 ：为了让图片宽度撑满全屏。**/

.re_Display .bodyPic{
    margin-left: -16px !important;
    margin-right: -16px !important;
}

/* QQEmoticon */

.re_QQEmoticon{
    padding-right: 2px;
}

.re_Display .emoji,
.re_Display .re_QQEmoticon{
    /* 展示的webview字体比较大，为了视觉居中，加上一个margin */
    margin-top: -1px;
}

/****** night theme ******/

.re_Night {
    color: rgba(196, 200, 204, 1);
}

.re_Night blockquote {
    color : rgb(218, 220, 224);
    background-color : rgb(10, 14, 18);
    border-left: 1px solid rgba(116, 120, 124, 1);
}

.re_Night a, .re_Night .re_Night {
    color: rgba(84, 127, 176, 1);
}

.re_Night ul li:before, .re_Night ol li:before {
    background-color: rgba(196, 200, 204, 1);
}

.re_Night h1,
.re_Night h2,
.re_Night h3,
.re_Night h4,
.re_Night h5,
.re_Night h6,
.re_Night p,
.re_Night textarea,
.re_Night form,
.re_Night select,
.re_Night input,
.re_Night span,
.re_Night button,
.re_Night em,
.re_Night menu,
.re_Night aside,
.re_Night table,
.re_Night tr,
.re_Night td,
.re_Night nav,
.re_Night dl,
.re_Night dt,
.re_Night dd,
.re_Night amp-iframe,
.re_Night main,
.re_Night section {
    color: rgba(180, 180, 182, 1) !important;
    border-color: #555555 !important;
    text-shadow: 0 0 0 #000;
}

p img {
    max-width: 100% !important;
    height: auto !important;
}

.re_Night.re_placeholder:before {
    color: #646466;
}