SCP基金会中文分部

/*
==================
笔记本组件

制作者：Etinjat
优化了便签纸格式
厚度代码取自woedenaz的黑标边框
==================
*/

/*
==================
变量
==================
*/
/* 撕页图片 */
@import url('http://scp-wiki-cn.wikidot.com/fragment:note-img/code/1');

:root{

/*
------------------
    书本厚度色 
------------------ -
*/

 --cl-a1:235,235,225,1;
  --cl-a2:222,210,220,1;
  --cl-a3:210,200,195,1;
  --cl-a4:25,25,25,1;
   --page-color:#f3f3f3;

    /* 书本厚度描框 */

--box-bk-0:0.0625rem 0.0625rem 0 rgba(var(--cl-a1)), 0.125rem 0.125rem 0 rgba(var(--cl-a2)), 0.1875rem 0.1875rem 0 rgba(var(--cl-a2)), 0.25rem 0.25rem 0 rgba(var(--cl-a3)), 0.3125rem 0.3125rem 0 rgba(var(--cl-a2)), 0.375rem 0.375rem 0 rgba(var(--cl-a2)), 0.4375rem 0.4375rem 0 rgba(var(--cl-a2)), 0.8rem 0.8rem 0 rgba(var(--cl-a4));

/* 文字大小，为避免calc出现问题故采用手动计算 */
    --txt-size: 1.5rem;
    --txt-size-opp: -1.5rem;
    --txt-size-opp-2-1: -1rem;
    --txt-size-opp-2: -3rem;
    --txt-size-2-1: 1rem;
    --txt-size-3-1: 0.5rem;
    --txt-size-4-1: 0.375rem;

/*------------------ 各线 ------------------*/
--page-divider:linear-gradient(to right, transparent 50.2%, #000 50.3%, transparent 50.4%);

--mark-color:linear-gradient(to right, transparent 46%, #333 46.1%, #333 49%, transparent 49.1%);

--line-color:linear-gradient(to top ,transparent 0%,#c0c0c0 1%, transparent 5%, #c0c0c0 11%,transparent 12%,transparent 20%);

----line-color-no:none;

----line-color-none:none;

/* 
------------------------------------
便签纸
-------------------------------------
*/

--tip-color: #cee0e2;

/* 
------------------------------------
单页样式
-------------------------------------
*/

/* ---------------预设颜色--------------*/

  /* 预设卷轴 */
--scroll-top: linear-gradient(0deg,#752b14  1%,#521f10 20%,#3c0a02 45%, #3e0d08 50%, #2b0609 90%, #51102f 98%, #2c0416 99%, #2c0321 100%) ;

--scroll-bottom: linear-gradient(180deg,#752b14 1%,#521f10 20%,#3c0a02 45%, #3e0d08 50%, #2b0609 90%, #51102f 98%, #2c0416 99%, #2c0321 100%);

--scroll-mid-horiz: linear-gradient( 0deg,#752b14 1%,#954425 3.5%,#a4582b 6%,#b1772b 10%,#e4b876 20%,#edc995 40%,#e7cfac 50%,#e4b876 70%, #b1772b 90%,#a4582b 96%,#954425 98%,#752b14 100%);

--scroll-roll: radial-gradient( #dbd2cf 0%,#dfd5ac 8%,#c69c61 40%,#82462e 80%, #4d1d11 100%);

--scroll-left: linear-gradient(-90deg,#752b14  1%,#521f10 20%,#3c0a02 45%, #3e0d08 50%, #2b0609 90%, #51102f 98%, #2c0416 99%, #2c0321 100%) ;

--scroll-right: linear-gradient(90deg,#752b14 1%,#521f10 20%,#3c0a02 45%, #3e0d08 50%, #2b0609 90%, #51102f 98%, #2c0416 99%, #2c0321 100%);

--scroll-mid-verti: linear-gradient( 90deg,#752b14 1%,#954425 3.5%,#a4582b 6%,#b1772b 10%,#e4b876 20%,#edc995 40%,#e7cfac 50%,#e4b876 70%, #b1772b 90%,#a4582b 96%,#954425 98%,#752b14 100%);

--scroll-bar: linear-gradient( 90deg,#052103 0%,#0a4231 20%,#2b5f3d 40%,#0a4231 80%, #052103 100%);

 /* 预设古本 */
--style-oldpaper-left:linear-gradient(90deg,#edc995 10%,#f7d19a 20%, #ffe4b2 100%);

--style-oldpaper-right:linear-gradient(-90deg,#edc995 10%,#f7d19a 20%, #ffe4b2 100%);

--style-oldpaper-mid:linear-gradient(89deg, #ffe4b2 2%,#fdf2c9 8%,#fff9d3 40%,#fdf2c9 90%, #ffe4b2 100%) ;

 --style-oldpaper-top:linear-gradient(180deg,#edc995 40%,#f7d19a 60%, #ffe4b2 100%);

--style-oldpaper-bottom:linear-gradient(0deg,#edc995 10%,#f7d19a 20%, #ffe4b2 100%);

--style-oldpaper-midverti:linear-gradient(0deg, #ffe4b2 2%,#fdf2c9 8%,#fff9d3 40%,#fdf2c9 90%, #ffe4b2 100%) ;

--linear-txt: linear-gradient(89deg, #ffe4b2 2%,#fdf2c9 8%,#fff9d3 40%,#fdf2c9 90%, #ffe4b2 100%);

 /* 预设便签纸 */
--style-notepaper-main: rgb(231, 233, 220);

--style-notepaper-line: linear-gradient(to top ,rgb(202, 219, 228) 0%, transparent 8%);

/* 预设拍纸簿 */
 --line-pad-color:rgb(222 124 64 / 35%);

 --line-pad-0:linear-gradient(to right ,var(--line-pad-color) 0%,var(--line-pad-color) 0.25%, transparent 0.3%,transparent 0.55%,var(--line-pad-color) 0.6%,var(--line-pad-color) 0.85%,transparent 0.9% );

 --line-pad-1:linear-gradient(to right ,var(--line-pad-color) 0%, var(--line-pad-color) 1%,transparent 1.1%);

--style-pad-line: linear-gradient(to top ,rgba(195, 182, 149,0.8) 0%, transparent 8%);

}

/*
==================
书页
==================
*/

.note-cover{
    width:100%;
    clear:both;
    background-color: #f3f3f3;
    margin: 0rem;
}

.note-wrap{
    -moz-box-shadow:  var(--box-bk-0);
    -webkit-box-shadow: var(--box-bk-0);
    -o-box-shadow: var(--box-bk-0);
    -ms-box-shadow: var(--box-bk-0);
    box-shadow: var(--box-bk-0);
    background-color: #f3f3f3;
    background-color: var(--page-color);
    border:1px solid #cccccc;  
}

.note-paper-midner,
.note-quote-inner,
.note-page {
    white-space:normal;
    float:left;
    display: block;
    font-family: '宋体',  '等线', lisu, sans-serif;
    font-size: 110%;
    font-style: normal;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-origin: padding-box;
    background-repeat: repeat;

    background-position: 0rem 1.5rem;
    background-size: 100% 1.5rem;   
    line-height: 1.5rem;
    background-position: 0rem var(--txt-size);
    background-size: 100% var(--txt-size);
    line-height: var(--txt-size);

    background-image:var(--line-color);
 /*! padding: 0em 1em 0 1em; */
}

.note-page :not(.scp-image-block) img{
  /*  float: left;  */
    clear: both;
    margin: 0rem ;
     padding: 0.375rem 0.5rem ;
    margin: 0.375rem 0;
   min-height: 1.5rem;
}

.note-paper-midner,
.note-paper-midner p,
.note-quote-inner,
.note-quote-inner p,
.note-page .note-bookmark,
 .note-page .note-bookmark p{
    line-height: 1.5rem;
    line-height: var(--txt-size);
    margin: 0;
    word-break: break-all;
}

 .note-page .note-bookmark p:not(:first-child){
    padding: 1.5rem 0rem 0rem 0rem;
}

.note-leaf .note-bookmark {
        padding:0rem 0.5rem 0rem 0.5rem;   
}

 .note-line .note-bookmark {
               padding:1.5rem 0rem 1rem 0rem;   
}

/*
-------------------------
分栏书页
--------------------------
*/

.note-leaf{
     columns:1px 2;
    -webkit-columns:1px 2;
    -moz-columns:1px 2;
     column-rule:3px  outset #ccc;
    min-height: 10px;
    -moz-column-gap:0rem;
    -webkit-column-gap:0rem;
    column-gap:0.5rem;
}

.note-leaf .note-page{
    padding:0 0rem 0rem;
    margin:0 0.5rem 0 0.5rem;
}

@media (max-width: 495px) { 
 .note-leaf .note-page{
      padding:0;
      margin:0;   
  }

 .note-leaf .note-bookmark {
      padding:0;
      margin:0 0 1rem 0;   
  }

  .note-page .note-bookmark p{
     overflow: hidden;/* 图片手机溢出 */
  }
}

/*
-------------------------
左右书页
--------------------------
*/

.note-line {
  display: flex;
  justify-content:space-around;  
}

.note-right, .note-left{
    display: flex;
    flex:1;
}

.note-cover .note-line .note-mid-separator {
  /*  flex-grow:0; */
    border-left: 1px solid #666;
    border-right: 1px solid #666;
          background-color: #666;
}

.note-right {
    margin:0 1rem 0rem 0.5rem;
}

.note-left {
    margin:0 0.5rem 0 1rem;
}

@media (max-width: 500px) {

  .note-line ,
  .note-line  div{
    display: block;     
  }

  .note-line  .note-bookmark {
            padding:0 0.4rem 0 0.8rem;
      padding:val(--pages-padding);
    }

    .note-left, .note-right{
       margin: 0rem;
   }

    .note-line  .note-bookmark{
       padding:1.5rem 0.5rem 0rem 0.5rem;
        width: auto;
   }

  .note-line  .note-page:last-child  .note-bookmark  {
            padding-top:0rem !important;
            padding-bottom:1rem;
    }   

 .note-line  .note-page:first-child  .note-bookmark{
            padding-bottom:1.7rem;
    }  

/* ------------------------------
  .note-line  .note-page:last-child  .note-bookmark  {
            padding-top:1.5rem;
            padding-bottom:1rem;
    }   

  .note-left  p:not(:first-child),
  .note-right p:not(:first-child) {
     margin: 0;
  }   
--------------------------------- */

}

/* 
----------------------------
边缘撕页
----------------------------
*/

.chew-paper-left .reserve-chewpaper,
.chew-paper-right .reserve-chewpaper,
.chew-paper-both .reserve-chewpaper{
    filter: drop-shadow(0px 0px 0.5px rgba(0,0,0,0.8));
    width: auto;
    height: 100%;
    position: absolute;
}

.chew-paper-both .reserve-chewpaper:after,
.chew-paper-both .reserve-chewpaper:before,
.chew-paper-right .reserve-chewpaper:after,
.chew-paper-left .reserve-chewpaper:before{
    content: ' ';
    width: 1rem;
    height: 100%;
    position: absolute;
    background:#f3f3f3;
     -webkit-mask-repeat: repeat-y; 
    mask-repeat: repeat-y;
    mask-image: var(--img-chew222);
    -webkit-mask-image: var(--img-chew222);
    -webkit-mask-position: right;
    mask-position: right;
    mask-size: 1rem;
     -webkit-mask-size: 1rem;
}

.chew-paper-both .reserve-chewpaper:before,
.chew-paper-left .reserve-chewpaper:before{
    mask-image: var(--img-chew111);
    -webkit-mask-image: var(--img-chew111);
    left:-1.1rem;
}

/* 
----------------------------
底部裁角以模拟书脊空隙
----------------------------
*/

.note-leaf, .note-mid-separator {
position:  sticky;/**/
}

.reserve-separator:before,
.reserve-separator:after,
.note-leaf .note-page:after,
.note-leaf .note-page:before {
 content:'▲';
 position:absolute;
 font-size:1.3rem;/* 1.2 */
 padding:0;
 margin:0;
 line-height:0;
}

.note-leaf .note-page:after,
.reserve-separator:after {
 font-size:0.6rem;
}

.reserve-separator:before {
 bottom:-0.2rem;
 left:-0.6rem; /* 往左一半大小 */
}

.reserve-separator:after {
 bottom:-0.7rem;/* 1.8？ */
 left:-0.3rem;/* 略微向右？ */
}

.note-leaf .note-page:before {
 bottom:-1%;
 left:49%;
 left:-moz-calc(50% - 0.6rem);
 left:-webkit-calc(50% - 0.6rem);
 left:calc(50% - 0.6rem);/* 减去自身的一半大小 */
}

.note-leaf .note-page:after {
 bottom:-2.2%;
 left:49.3%;
 left:-moz-calc(50% - 0.36rem);
 left:-webkit-calc(50% - 0.36rem);
 left:calc(50% - 0.4rem);/* 略微向右？ */
}

.reserve-separator:before ,
.note-leaf .note-page:before {
   color:#191919;
 color:rgba(var(--cl-a4));
}

.reserve-separator:after , 
.note-leaf .note-page:after {
   color:#fff;
    color:rgba(var(--swatch-background,255,255,255), 1); /* 应使用背景色，实际溢出，在其他背景色中会见到问题 */
}

.yui-content .reserve-separator:before ,
.yui-content .note-leaf .note-page:after {
 display:none;
}

@media (max-width: 495px) {  
.reserve-separator:before,
.reserve-separator:after,
.note-leaf .note-page:after,
.note-leaf .note-page:before  {
content:' ';
}
}

/* 
======================
单页笔记
======================
*/

/* 
-------------------------
整页 
-------------------------
*/

.note-quote-inner {
    float: none;
    width: 100%;
}

.note-quote-out {
    padding:0rem 1rem 1rem 1rem;
    border:1px solid #a5a5a5;  
}

.note-quote-inner p {
    padding:1.5rem 0.5rem 0rem 0.5rem;
    line-height: 1.5rem;
}

.note-quote-out,
.note-paper-mid,
.note-paper-left,
.note-paper-right{
    background-color: #f2f2f2;
    background-color: var(--page-color);
}

/* 
------------------------
撕页 
------------------------
*/

.note-paper-wrap{
    width: 100%;
    margin: 0 auto;
   -webkit-filter:drop-shadow(1px 2px 2px #333);
    filter: drop-shadow(1px 2px 2px #333);
}

.note-paper-main {
     display: flex;
     display: -webkit-flex; 
     justify-content: space-between;
}

.note-paper-main div{
    min-width:1rem;
}

.note-paper-mid{
    width: 100%;
}

.note-paper-midner {
    width:98%;
    margin: 0 1%;
}

.note-paper-midner p {
    padding:1.5rem 0.2rem 0rem 0.2rem;
}

/* 自定义边缘文字，默认不显示 */

.note-paper-rightner p,
.note-paper-leftner p{
   display:none;
   width:0;
   word-break: break-all; 
   padding-top:1rem;
}

/*------------ 左右齿痕 ------------*/

div:is(.chew-paper-horiz, .chew-paper-left, .chew-paper-right)   div:is(.note-paper-left, .note-paper-right) { 
         height:auto;
 -webkit-mask-repeat: repeat-y;
         mask-repeat: repeat-y;
 -webkit-mask-size: 1.05rem;
         mask-size: 1.05rem;
}

div:is(.chew-paper-horiz, .chew-paper-left)  .note-paper-left{   
    -webkit-mask-image:var(--img-chew111);
            mask-image:var(--img-chew111);
    -webkit-mask-position: left;
            mask-position: left;
}

div:is(.chew-paper-horiz,  .chew-paper-right)  .note-paper-right {   
    -webkit-mask-image:var(--img-chew222);
    -webkit-mask-position: right;
    mask-image:var(--img-chew222);
    mask-position: right;
}

@media (max-width: 459px) {  
        .note-paper-main div{
    min-width:0.5rem;
}

div[class*="chew-paper"]:not([class*="$chew"])  .note-paper-left ,
div[class*="chew-paper"]:not([class*="$chew"])   .note-paper-right {
 -webkit-mask-size: 0.5rem;
         mask-size: 0.5rem;
}

.note-paper-wrap{
    width: 100% !important;
}
}

/*------------------ 上下齿痕 ------------------ */

div:is(.chew-paper-verti, .chew-paper-top, .chew-paper-bottom) .note-paper-main{
  flex-direction:  column;
}

div:is(.chew-paper-verti, .chew-paper-top, .chew-paper-bottom) div:is(.note-paper-midner, .note-paper-under) p {
  margin:0 1rem;
}

.chew-paper-verti .note-paper-right,
.chew-paper-verti .note-paper-left,
.chew-paper-top .note-paper-right,
.chew-paper-top .note-paper-left,
.chew-paper-bottom .note-paper-right,
.chew-paper-bottom .note-paper-left{
  min-width:1rem;
  min-height: 2rem;
 }

div:is(.chew-paper-verti, .chew-paper-top, .chew-paper-bottom) div:is(.note-paper-left, .note-paper-right){
  min-width:1rem;
  /*! min-height: 2rem; */
}

div:is(.chew-paper-verti, .chew-paper-top)  .note-paper-left ,
div:is(.chew-paper-verti, .chew-paper-bottom)  .note-paper-right {
         height:auto;
 -webkit-mask-repeat: repeat-x;
         mask-repeat: repeat-x;
 -webkit-mask-size: 10.5rem;
         mask-size: 10.5rem;
}

.chew-paper-verti .note-paper-left,
.chew-paper-top .note-paper-left{
    -webkit-mask-image:var(--img-chew333);
    mask-image:var(--img-chew333);
    -webkit-mask-position: bottom;
    mask-position:bottom;
margin-bottom: -0.1rem;
}

.chew-paper-verti .note-paper-right,
.chew-paper-bottom .note-paper-right {   
      -webkit-mask-image:var(--img-chew444);
    mask-image:var(--img-chew444);
    -webkit-mask-position: top;
    mask-position: top;
    margin-top: -0.1rem;
}

.chew-paper-top .note-paper-right,
.chew-paper-bottom .note-paper-left {   
min-height:0;
}

.chew-paper-verti   .note-paper-left  ,
.chew-paper-verti   .note-paper-right,
.chew-paper-top   .note-paper-left  ,
.chew-paper-bottom   .note-paper-right {
         height:auto;
 -webkit-mask-repeat: repeat-x;
         mask-repeat: repeat-x;
 -webkit-mask-size: 10rem;
         mask-size: 10rem;
}

.chew-paper-verti .note-paper-left,
.chew-paper-top .note-paper-left{
    -webkit-mask-image:var(--img-chew333);
    mask-image:var(--img-chew333);
    -webkit-mask-position: bottom;
    mask-position:bottom;
margin-bottom: -0.1rem;
}

.chew-paper-verti .note-paper-right,
.chew-paper-bottom .note-paper-right {   
      -webkit-mask-image:var(--img-chew444);
    mask-image:var(--img-chew444);
    -webkit-mask-position: top;
    mask-position: top;
    margin-top: -0.1rem;
}

.chew-paper-top .note-paper-right,
.chew-paper-bottom .note-paper-left {   
min-height:0;
}

@media (max-width: 459px) {  
        .note-paper-main div{
    min-width:0.5rem;
}

div:is(.chew-paper-verti, .chew-paper-top) .note-paper-left ,
div:is(.chew-paper-verti, .chew-paper-bottom) .note-paper-right {
 -webkit-mask-size: 10rem !important;
         mask-size: 10rem !important;
}

.note-paper-wrap{
    width: 100% !important;
}
}

/*------------ 边缘折痕  ------------*/

  .note-paper-left,
  .note-paper-right {
   background-repeat:no-repeat;
}

.chew-paper-right .crease-right-top .note-paper-right{
     border-top-right-radius: 4rem 1rem;
     background-image: linear-gradient(65deg,transparent 0%,  transparent 93.5%,rgba(0, 0, 0, 0.1) 95%, rgba(0, 0, 0, 0.1) 95.5%, rgba(0, 0, 0, 0.2) 96%,rgba(0, 0, 0, 0.1) 96.5%,rgba(0, 0, 0, 0.2) 97%, rgba(0, 0, 0, 0.25) 100%); 

}

.chew-paper-right .crease-right-bottom .note-paper-right{
     border-bottom-right-radius: 4rem 1rem;
     background-image: linear-gradient(115deg,transparent 0%,  transparent 93.5%, rgba(0, 0, 0, 0.15) 95.5%,rgba(0, 0, 0, 0.1) 96%, rgba(0, 0, 0, 0.2) 96.5%,rgba(0, 0, 0, 0.25) 96.5%,rgba(0, 0, 0, 0.2) 97%, rgba(0, 0, 0, 0.3) 100%); 
}

.chew-paper-left .note-paper-left{
     border-top-left-radius: 0.2rem 1rem;
     background-image: linear-gradient(-75deg,transparent 0%,  transparent 93.5%, rgba(0, 0, 0, 0.15) 95.5%,rgba(0, 0, 0, 0.1) 96%, rgba(0, 0, 0, 0.2) 96.5%,rgba(0, 0, 0, 0.25) 96.5%,rgba(0, 0, 0, 0.2) 97%, rgba(0, 0, 0, 0.3) 100%); 
}

.chew-paper-left .note-paper-left{
     border-bottom-left-radius: 0.2rem 2rem;
     background-image: linear-gradient(250deg,transparent 0%,  transparent 93.5%, rgba(0, 0, 0, 0.15) 95.5%,rgba(0, 0, 0, 0.1) 96%, rgba(0, 0, 0, 0.2) 96.5%,rgba(0, 0, 0, 0.25) 96.5%,rgba(0, 0, 0, 0.2) 97%, rgba(0, 0, 0, 0.3) 100%); 
}

div:is(.crease-left-top,   .crease-left-bottom) .crease-set-corner:before,
div:is(.crease-right-top, .crease-right-bottom) .crease-set-corner:after {
   content:'  ';
   position:absolute;
   width:3rem;
   height:3rem;
}

div:is(.chew-paper-horiz, .chew-paper-left)  .crease-set-corner:before,
div:is(.chew-paper-horiz, .chew-paper-right)  .crease-set-corner:after{
    content:'';
    width:0rem;
  height:0rem;
}

 .crease-left-top .crease-set-corner:before {
      border-top-left-radius: 0.2rem 1rem;

     background-image: linear-gradient(-50deg,transparent 0%, transparent 50%, rgba(0, 0, 0, 0.15) 70%, rgba(0, 0, 0, 0.15) 70%,rgba(0, 0, 0, 0.1) 74%, rgba(0, 0, 0, 0.2) 76%,rgba(0, 0, 0, 0.25) 82%,rgba(0, 0, 0, 0.22) 84%, rgba(0, 0, 0, 0.2) 90%, rgba(0, 0, 0, 0.3) 100%); 

}

.crease-left-bottom .crease-set-corner:before {

        bottom:0;
    border-bottom-left-radius: 0.1rem 1rem;
     background-image: linear-gradient(230deg,transparent 0%, transparent 50%, rgba(0, 0, 0, 0.15) 70%, rgba(0, 0, 0, 0.15) 70%,rgba(0, 0, 0, 0.1) 74%, rgba(0, 0, 0, 0.2) 76%,rgba(0, 0, 0, 0.25) 82%,rgba(0, 0, 0, 0.22) 84%, rgba(0, 0, 0, 0.2) 90%, rgba(0, 0, 0, 0.3) 100%); 
}

.crease-right-top .crease-set-corner:after {
      top:0;
      right:0;
      border-top-right-radius: 0.2rem 0.5rem;
      background-image: linear-gradient(60deg,transparent 0%,  transparent 55%, rgba(0, 0, 0, 0.15) 75%,rgba(0, 0, 0, 0.1) 82%, rgba(0, 0, 0, 0.2) 85%,rgba(0, 0, 0, 0.25) 86%,rgba(0, 0, 0, 0.2) 87%, rgba(0, 0, 0, 0.3) 100%); 

}

.crease-right-bottom .crease-set-corner:after {
     bottom:0;
     right:0;
      background-image: linear-gradient(120deg,transparent 0%,  transparent 55%, rgba(0, 0, 0, 0.15) 75%,rgba(0, 0, 0, 0.1) 82%, rgba(0, 0, 0, 0.2) 85%,rgba(0, 0, 0, 0.25) 86%,rgba(0, 0, 0, 0.2) 87%, rgba(0, 0, 0, 0.3) 100%); 
}

@media (max-width: 900px) {  
 .note-paper-unset333  .note-paper-left,
  .note-paper-unset333 .note-paper-right{
   background-image:none;
   border-radius:0;
 }
}

/*  div[class*="crease"]:not([class*="$crease"]) 禁止两种折痕同时出现  */

/*
@media (max-width: 900px) {  
 .note-paper-unset111 div[class*="crease"]:not([class*="$crease"]) .note-paper-left,
  .note-paper-unset111 div[class*="crease"]:not([class*="$crease"])  .note-paper-right{
   background-image:none;
   border-radius:0;
 }
}
*/

/*-------------- 书页下方文字，通常作为页码 ------------------- */

.note-paper-under{
  margin:0rem;
  font-size:0.5rem;
  padding:0;  /* 三分之一 */
}

.note-paper-under p{
     padding:0;
     margin:0;
     line-height: 1.5rem;
     visibility:hidden;
}

.note-paper-under{
  min-height:1rem;
}

.note-paper-upon{
    display: none;/* 页眉部分，通常不用 */
}

.note-paper-upon p{
   margin:0.5rem 0.2rem -1rem 0.2rem;
   margin-top:var(--txt-size-3-1);
   margin-bottom: var(--txt-size-opp-2-1);
}

div:is(.upon-set-left, .upon-set-right, .upon-set-center, .under-set-left, .under-set-right, .under-set-center) p{
  visibility:visible;
  padding:0rem 0;
}

.upon-set-left, 
.under-set-left{
  text-align:left;
        display:block;
}

.upon-set-right,
.under-set-right{
  text-align:right;
        display:block;

}

.upon-set-center,
.under-set-center{
  text-align:center;
    display:block;
}

/*
----------------------------------
附加组件 - 卷轴
----------------------------------
*/

/* ----------------- 横向卷轴 ----------------- */

div:is(.accessory-scroll-left, .accessory-scroll-right, .accessory-scroll-horiz) .note-paper-setbox{
  display:flex;
}

/* 卷轴的轴 */
.accessory-scroll-horiz div:is(.note-reserve-top, .note-reserve-bottom) {
  background:var(--scroll-roll);
min-width:3rem;
height:auto;
border-radius:0.5rem;
}

.accessory-scroll-horiz div:is(.note-reserve-top, .note-reserve-bottom)::before {
  content:' ';
  background:var(--scroll-bar);

min-width:1.5rem;
height:1rem;
border-radius:0.3rem 0.3rem 0 0;

position:absolute;
margin:-1rem 0 0 0.8rem;
}

.accessory-scroll-horiz div:is(.note-reserve-top, .note-reserve-bottom)::after {
  content:' ';
  bottom:0;
  background:var(--scroll-bar);

min-width:1.5rem;
height:1rem;
border-radius:0 0 0.3rem 0.3rem ;

position:absolute;
margin:0rem 0 -1rem 0.8rem;
}

/* 垂直卷轴 */

.accessory-scroll-verti div:is(.note-reserve-top, .note-reserve-bottom)  {
  background-size:90%;
  min-height:2.5rem;
  border-radius:0.5rem;
  background-position:  center;
  background:var(--scroll-roll);

}

.accessory-scroll-verti div:is(.note-reserve-top, .note-reserve-bottom)::before {
  content:' ';
  background:var(--scroll-bar);
  min-width:1rem;
  height:1rem;
  border-radius:0.3rem 0rem 0rem  0.3rem;
  position:absolute;
  margin:0.7rem 0 0rem -1rem;
}

.accessory-scroll-verti div:is(.note-reserve-top, .note-reserve-bottom)::after {
  content:' ';
  right:0;
  background:var(--scroll-bar);
  min-width:1rem;
  height:1rem;
  border-radius:0 0.3rem 0.3rem 0rem ;
  position:absolute;
  margin:0.7rem -1rem 0rem 0rem;
}

/* 如果不懒的话，用cale计算。都是1.5rem的变数。卷轴柄的大小等于文字的一半，向外溢出自身宽/高的一半，等等。*/

@media (max-width: 495px) {
  .accessory-scroll-horiz div:is(.note-reserve-top, .note-reserve-bottom)  {
     display:none
   }
}

/* 单遍卷轴的轴角，注意卷轴与撕边的元素名是并在一起的  */

.accessory-scroll-horiz.chew-paper-top .note-reserve-top {
  border-bottom-right-radius:0;
}
.accessory-scroll-horiz.chew-paper-top .note-reserve-bottom {
  border-bottom-left-radius:0;
}

.accessory-scroll-horiz .chew-paper-bottom  .note-reserve-top {
  border-top-right-radius:0rem;
}

.accessory-scroll-horiz .chew-paper-bottom .note-reserve-bottom {
  border-top-left-radius:0;
}

.accessory-scroll-horiz .chew-paper-left .note-reserve-bottom {
  border-top-left-radius:0;
    border-bottom-left-radius:0;
}
.accessory-scroll-horiz .chew-paper-right .note-reserve-top {
  border-top-right-radius:0;
    border-bottom-right-radius:0;
}

/**/

.accessory-scroll-verti .chew-paper-left .note-reserve-top {
  border-bottom-right-radius:0;
}

.accessory-scroll-verti .chew-paper-left .note-reserve-bottom {
  border-top-right-radius:0rem;
}

.accessory-scroll-verti .chew-paper-right .note-reserve-top {
  border-bottom-left-radius:0;
}

.accessory-scroll-verti .chew-paper-right .note-reserve-bottom {
  border-top-left-radius:0;
}

.accessory-scroll-verti .chew-paper-top  .note-reserve-bottom {
    border-top-left-radius:0;
    border-top-right-radius:0;
}

.accessory-scroll-verti .chew-paper-bottom  .note-reserve-top {
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
}

/*
----------------------------------
附加组件 - 纸堆（未适应）
----------------------------------
*/

/* 未适应调节边缘大小 */
:root{
    --pile-color:var(--page-color);
    --piling-delay:1.5s;
    --piling-times:1;
}

.accessory-pile  {
    margin:  0 auto;
    position: relative;
    width: 90%;
}

.accessory-pile  :is(.note-paper-unset222, .note-paper-unset333, .chew-paper-verti .crease-set-corner, .chew-paper-horiz .crease-set-corner):before,
.accessory-pile  :is(.note-paper-unset222, .note-paper-unset333, .chew-paper-verti .crease-set-corner, .chew-paper-horiz .crease-set-corner):after{
    background-color:rgba(243,243,243,1);
}

.accessory-pile   .note-paper-unset222{
    filter: drop-shadow(0px 0px 1px rgba(0, 0, 0,0.1));
}

.accessory-pile   .note-paper-unset333{
    filter: drop-shadow(0px 0px 1px rgba(0, 0, 0,0.3));
}

.accessory-pile   .note-paper-main{
    filter: drop-shadow(0px 0.5px 1px rgba(0, 0, 0,0.6));
}

.accessory-pile div:is(.note-paper-unset222, .note-paper-unset333):before,
.accessory-pile div:is(.note-paper-unset222, .note-paper-unset333):after{
    content: " ";
    height: 100%;
    width: 96%;
    position: absolute;
    z-index: -1;
    mask-size:1rem;
    mask-origin: view-box;
    mask-repeat: repeat-y;
 }

/* -------------------左与右----------------------- */

.accessory-pile .note-paper-unset222:before,
.accessory-pile  .note-paper-unset222:after {
    transform: rotate(-2.6deg);
        top:0.1rem;
}

.accessory-pile .note-paper-unset222:before {
    left:-0.2rem;
}
.accessory-pile  .note-paper-unset222:after {
    left:0.6rem;
}

.accessory-pile  .note-paper-unset333:before,
.accessory-pile .note-paper-unset333:after {
    transform: rotate(1.8deg);
        top:-0.8rem;
}

.accessory-pile  .note-paper-unset333:before {
    left:1.2rem;
}
.accessory-pile  .note-paper-unset333:after {
    left:2.1rem;
}

.accessory-pile .chew-paper-left:before,
.accessory-pile .chew-paper-left .note-paper-unset333:before {
    -webkit-mask-image: var(--img-chew111);
mask-image: var(--img-chew111);
    -webkit-mask-position:left;
}

.accessory-pile .chew-paper-right:after,
.accessory-pile .chew-paper-right .note-paper-unset333:after {
    -webkit-mask-image: var(--img-chew222);
mask-image: var(--img-chew222);
    -webkit-mask-position:right;
    mask-position:right;
}

/* 左右 */

.accessory-pile .chew-paper-horiz:before,
.accessory-pile .chew-paper-horiz .note-paper-unset333:before {
    -webkit-mask-image: var(--img-chew111);
mask-image: var(--img-chew111);
    -webkit-mask-position:left;
}

.accessory-pile .chew-paper-horiz:after,
.accessory-pile .chew-paper-horiz .note-paper-unset333:after {
    -webkit-mask-image: var(--img-chew222);
mask-image: var(--img-chew222);
    -webkit-mask-position:top;
    mask-position:right;
}

.accessory-pile .chew-paper-horiz .crease-set-corner:before{
    z-index: -2;
    content: " ";
    height: 100%;
    width: calc(100% - 1.8rem);/**/
    position: absolute;
    transform: rotate(-2.6deg);   
    left:0.7rem;
    top:0.1rem;
}

.accessory-pile .chew-paper-horiz  .crease-set-corner:after{
background: rgba(243,243,243,1);
    z-index: -3;
       content: " ";
    height: 100%;
    width: calc(100% - 1.8rem);/**/
    position: absolute;
    transform: rotate(1.8deg);   
    left:1.5rem;
    top:-0.8rem;
}

@media (max-width: 495px) {

 .accessory-pile   .note-paper-main{
    width: 100%;
   }

    .accessory-pile  {
    width: 98%;
  }    

  .accessory-pile  .note-paper-unset333:before,
  .accessory-pile  .note-paper-unset222:before,
  .accessory-pile .note-paper-unset333:after,
  .accessory-pile .note-paper-unset222:after{
       width: 93%;
  }
}

/* -------------------上与下---------------- */

/* 上 */

.accessory-pile .note-paper-unset222.chew-paper-top:before,
.accessory-pile .chew-paper-top .note-paper-unset333:before {
    -webkit-mask-image: var(--img-chew333);
mask-image: var(--img-chew333);
    -webkit-mask-position:top;
    mask-position: top;
    height: 2.5rem;
    width: 96%;
        mask-repeat: repeat-x;
    mask-size:30%;
}

.accessory-pile .note-paper-unset222.chew-paper-top:before,
.accessory-pile  .note-paper-unset222.chew-paper-top:after {
    transform: rotate(-2.6deg);
    height:100%;
    left:-0.6rem;
}

.accessory-pile  .note-paper-unset222.chew-paper-top:before {
   top:-0.5rem
}
.accessory-pile  .note-paper-unset222.chew-paper-top:after {
   top:0.1rem
}

.accessory-pile  .chew-paper-top .note-paper-unset333:before,
.accessory-pile .chew-paper-top .note-paper-unset333:after {
    transform: rotate(1.8deg);
    height:100%;
    left:1.6rem;
}

.accessory-pile .chew-paper-top .note-paper-unset333:before {
       top:0.2rem
 }
.accessory-pile  .chew-paper-top .note-paper-unset333:after {
       top:0.8rem
 }

/* 下  */

.accessory-pile .note-paper-unset222.chew-paper-bottom:after,
.accessory-pile .chew-paper-bottom .note-paper-unset333:after{
    -webkit-mask-image: var(--img-chew444);
mask-image: var(--img-chew444);
    -webkit-mask-position:bottom;
    mask-position: bottom;
    height: 2.5rem;
    width:96%;
        mask-repeat: repeat-x;
    mask-size:30%;
    top: 90%;
    position: absolute;
    z-index: -1;
    display: block;
    height: 100%;
                    left: 0;
}

.accessory-pile .chew-paper-bottom .note-paper-unset333:before,
.accessory-pile  .note-paper-unset222.chew-paper-bottom:before {
            left: 0;
}

.accessory-pile  .chew-paper-bottom .note-paper-unset333:after {
   top:-0.1rem;
 }

.accessory-pile  .note-paper-unset222.chew-paper-bottom:after {
   top:0.8rem;
 }

.accessory-pile   .note-paper-unset222.chew-paper-bottom{
    filter: drop-shadow(0px 2px 1px rgba(0, 0, 0,0.2));
}

.accessory-pile  .chew-paper-bottom .note-paper-unset333{
    filter: drop-shadow(0px 2px 1px rgba(0, 0, 0,0.3));
}

.accessory-pile  .chew-paper-bottom .note-paper-main{
    filter: drop-shadow(0px 2px 1px rgba(0, 0, 0,0.3));
}

/* 上下 */

.accessory-pile .chew-paper-verti  .crease-set-corner:after,
.accessory-pile .chew-paper-verti .crease-set-corner:before{
        background: rgba(243,243,243,1);;
}

.accessory-pile :is(.note-paper-unset222.chew-paper-verti, .chew-paper-verti .note-paper-unset333):after,
.accessory-pile :is(.note-paper-unset222.chew-paper-verti, .chew-paper-verti .note-paper-unset333):before {
      height:3rem;
    width: 96%;
        mask-repeat: repeat-x;
    mask-size:12rem;
        left:0rem;
    top:0.5rem
}

.accessory-pile .note-paper-unset222.chew-paper-verti:before,
.accessory-pile .chew-paper-verti .note-paper-unset333:before {
    -webkit-mask-image: var(--img-chew333);
     mask-image: var(--img-chew333);
    -webkit-mask-position:top;
    mask-position: top;
}

.accessory-pile .note-paper-unset222.chew-paper-verti:after,
.accessory-pile .chew-paper-verti .note-paper-unset333:after{
    -webkit-mask-image: var(--img-chew444);
mask-image: var(--img-chew444);
    -webkit-mask-position:bottom;
    mask-position: bottom;
    mask-size:16rem;
    top: 0%;
    z-index: -1;
    height: 100%;
    left: 0px;
    top:-1rem;
}

.accessory-pile .chew-paper-verti .crease-set-corner:after,
.accessory-pile .chew-paper-verti .crease-set-corner:before{
    transform: rotate(-2.6deg);  
    z-index: -2;
    content: " ";
    height:calc(100% - 3rem);;
        width:96%;
    position: absolute;
}

.accessory-pile .chew-paper-verti .crease-set-corner:before{
    transform: rotate(-2.6deg);  
    top:0.5rem;
    left:0;
    top:2rem
}

.accessory-pile .chew-paper-verti .note-paper-unset333:before {
            left:0.7rem;
}

.accessory-pile .note-paper-unset222.chew-paper-verti:after{
    left: 0px;
    top:0rem;
}

.accessory-pile .chew-paper-verti  .crease-set-corner:after{
    transform: rotate(1.8deg);
    height:calc(100% - 3rem);;
    top:1.2rem;
}

.accessory-pile .note-paper-unset222.chew-paper-verti:before{
    left:-0.6rem;
    top:1.3rem;
}

/*------------ 纸堆动画 ------------*/

.note-nobody[class*="piling"] div:is(.note-paper-unset111, .note-paper-unset222, .note-paper-unset333, .note-paper-main) {
    opacity: 0;
}

.note-nobody[class*="piling"] div:is(.note-paper-unset111, .note-paper-unset222, .note-paper-unset333, .note-paper-main){
       opacity: 0;
       animation-name:Opac0to1;
      animation-duration:0.5s;
      animation-fill-mode: forwards;
     animation-iteration-count: var(--piling-times)); 
}

.note-nobody[class*="piling"] .note-paper-unset111{
 animation-delay: calc(0.1 * var(--piling-delay)); 

}

.note-nobody[class*="piling"] .note-paper-unset222{
 animation-delay: calc(0.1 * var(--piling-delay)); 

}

.note-nobody[class*="piling"] .note-paper-unset333{
 animation-delay: calc(1.5 * var(--piling-delay)); 
}

.note-nobody[class*="piling"] .note-paper-main{
 animation-delay: calc(2.5 * var(--piling-delay)); 
}

@keyframes Opac0to1{
    0% {
                     opacity: 0;
    }
    100% {
                      opacity: 1;
    }
}

/*------------ 预设样式的垫底颜色 ------------*/

.preset-style-notepaper .accessory-pile  :is(.note-paper-unset222, .note-paper-unset333,  .chew-paper-verti .crease-set-corner, .chew-paper-horiz .crease-set-corner):before,
.preset-style-notepaper .accessory-pile  :is(.note-paper-unset222, .note-paper-unset333,  .chew-paper-verti .crease-set-corner, .chew-paper-horiz .crease-set-corner):after{
    background-color:rgb(231, 233, 220) ;
}

.preset-style-pad .accessory-pile  :is(.note-paper-unset222, .note-paper-unset333,  .chew-paper-verti .crease-set-corner, .chew-paper-horiz .crease-set-corner):before,
.preset-style-pad .accessory-pile  :is(.note-paper-unset222, .note-paper-unset333,  .chew-paper-verti .crease-set-corner, .chew-paper-horiz .crease-set-corner):after{
    background-color:#faf4dc ;
}

.preset-style-scroll .accessory-pile  :is(.note-paper-unset222, .note-paper-unset333,  .chew-paper-verti .crease-set-corner, .chew-paper-horiz .crease-set-corner):before,
.preset-style-scroll ..accessory-pile  :is(.note-paper-unset222, .note-paper-unset333,  .chew-paper-verti .crease-set-corner, .chew-paper-horiz .crease-set-corner):after{
    background-color:#2d0609  ;
}

.preset-style-oldpaper .accessory-pile  :is(.note-paper-unset222, .note-paper-unset333,  .chew-paper-verti .crease-set-corner, .chew-paper-horiz .crease-set-corner):before,
.preset-style-oldpaper .accessory-pile  :is(.note-paper-unset222, .note-paper-unset333,  .chew-paper-verti .crease-set-corner, .chew-paper-horiz .crease-set-corner):after{
    background-color:#fbdba6 ;
}

.preset-style-oldletter .accessory-pile  :is(.note-paper-unset222, .note-paper-unset333,  .chew-paper-verti .crease-set-corner, .chew-paper-horiz .crease-set-corner):before,
.preset-style-oldletter .accessory-pile  :is(.note-paper-unset222, .note-paper-unset333,  .chew-paper-verti .crease-set-corner, .chew-paper-horiz .crease-set-corner):after {
    background-color:#ead1b3 ;
}

/*
-------------------------------------------
预设样式
-------------------------------------------
*/

/* ---------------  古卷 ---------------*/
/* 水平轴 */

.preset-style-scroll .accessory-scroll-verti div:is(.note-reserve-top, .note-reserve-bottom):after {
    background:var(--scroll-bar);
}

.preset-style-scroll  .accessory-scroll-horiz div:is(.note-reserve-top, .note-reserve-bottom):after{
    background:var(--scroll-roll);
}

.preset-style-scroll  .accessory-scroll-horiz div:is(.note-reserve-top, .note-reserve-bottom):before {
    background:var(--scroll-bar);
}

.preset-style-scroll  .accessory-scroll-horiz div:is(.note-reserve-top, .note-reserve-bottom):after {
    background:var(--scroll-bar);
}

.preset-style-scroll  .chew-paper-verti div:is(.note-paper-left,.note-paper-right){
    -webkit-mask-size: 20rem;
    mask-size: 20rem;
}

.preset-style-scroll .chew-paper-horiz div:is(.note-paper-left,.note-paper-right){
    -webkit-mask-size: 2.5rem ;
    mask-size: 2.5rem ;
}

.preset-style-scroll .chew-paper-horiz .note-paper-main div {
    min-width: 2.5rem ;
}

.preset-style-scroll div:is(.chew-paper-top, .chew-paper-bottom, .chew-paper-horiz) .note-paper-left{
  background:var(--scroll-top);
}

/* 水平展开 */

.preset-style-scroll div:is(.chew-paper-left, .chew-paper-right, .chew-paper-horiz) .note-paper-mid{
  background:var(--scroll-mid-verti);
}

.preset-style-scrolldiv:is(.chew-paper-left, .chew-paper-right, .chew-paper-horiz)  .note-paper-left{
  background:var(--scroll-left);
}

.preset-style-scroll div:is(.chew-paper-left, .chew-paper-right, .chew-paper-horiz) .note-paper-right{
  background:var(--scroll-right);
}

/* 垂直轴 */

.preset-style-scroll  .accessory-scroll-verti div:is(.note-reserve-top, .note-reserve-bottom){
  background:var(--scroll-roll);
}

.preset-style-scroll  .accessory-scroll-verti div:is(.note-reserve-top, .note-reserve-bottom):before {
  background:var(--scroll-bar);
}

.preset-style-scroll  .accessory-scroll-verti div:is(.note-reserve-top, .note-reserve-bottom):after {
  background:var(--scroll-bar);
}

.preset-style-scroll div:is(.chew-paper-top, .chew-paper-bottom, .chew-paper-verti)   .note-paper-left{
  background:var(--scroll-top);
}

.preset-style-scroll  div:is(.chew-paper-top, .chew-paper-bottom, .chew-paper-verti)   .note-paper-mid{
  background:var(--scroll-mid-horiz);
}

.preset-style-scroll  div:is(.chew-paper-top, .chew-paper-bottom, .chew-paper-verti)   .note-paper-right{
  background:var(--scroll-bottom);
}

.preset-style-scroll  .chew-paper-verti .note-paper-main div{
min-width:2rem;

}

.preset-style-scroll   .note-paper-midner {
    background-image: var(--paper-image);
}

/*---------------古页----------------*/

.preset-style-oldpaper div:is(.chew-paper-left, .chew-paper-right, .chew-paper-horiz) .note-paper-mid{
  background:var(--style-oldpaper-mid);
}

.preset-style-oldpaper  div:is(.chew-paper-left, .chew-paper-right, .chew-paper-horiz) .note-paper-right {
  background:var(--style-oldpaper-right);
}

.preset-style-oldpaper  div:is(.chew-paper-left, .chew-paper-right, .chew-paper-horiz) .note-paper-left{
  background:var(--style-oldpaper-left);
}

.preset-style-oldpaper   .note-paper-midner {
    background-image: var(--paper-image);
}

.preset-style-oldpaper div:is(.chew-paper-top, .chew-paper-bottom, .chew-paper-verti) .note-paper-mid{
  background:var(--style-oldpaper-midverti);
}

.preset-style-oldpaper div:is(.chew-paper-top, .chew-paper-bottom, .chew-paper-verti)   .note-paper-right{
  background:var(--style-oldpaper-bottom);
}

.preset-style-oldpaper div:is(.chew-paper-top, .chew-paper-bottom, .chew-paper-verti)  .note-paper-left{
  background:var(--style-oldpaper-top);
}

/* ---------------  格式资源里的便签纸样式  ---------------*/

.preset-style-notepaper .note-paper-main div {
        background-color: var(--style-notepaper-main); 
}

.preset-style-notepaper .note-paper-main  .note-paper-midner {    
        background-image: var(--style-notepaper-line); 
}

.preset-style-notepaper .chew-paper-none .note-paper-left,
.preset-style-notepaper .chew-paper-none .note-paper-right{    
display: none;
}

.preset-style-notepaper .chew-paper-none .note-paper-main div{
        background-color: none;
}

.preset-style-notepaper  .chew-paper-none .note-paper-midner {
    width: 100%;
    margin: 0;
}

.preset-style-notepaper  .chew-paper-none .note-paper-main div:not(.note-paper-midner){
    border-radius: 10px;
}

.preset-style-notepaper  .note-paper-midner{
border-top-left-radius:10px;
border-top-right-radius:10px;

}

/* ---------------  拍纸簿（未适应）  ---------------*/

.preset-style-pad  .note-paper-main div:is(.note-paper-left,  .note-paper-mid, .note-paper-right){
  background-color:#faf4dc;
}

.preset-style-pad  .note-paper-midner{
    background-image: var(--style-pad-line);
    background-color:transparent;
    width:100%;
    margin-left:0;
}

.preset-style-pad  div:is(.chew-paper-top, .chew-paper-bottom, .chew-paper-verti) div:is(.note-paper-left, .note-paper-mid, .note-paper-right){
    background-image:var(--line-pad-0);
    background-repeat: repeat;
    background-position: 8rem 0;
    background-size: 100% 0.5rem;
    line-height: 1.5rem;
}

.preset-style-pad div:is(.chew-paper-none, .chew-paper-left, .chew-paper-right, .chew-paper-horiz) div:is(.note-paper-upon, .note-paper-midner, .note-paper-under ) {
    border-left: 0.2rem double var(--line-pad-color);
}

.preset-style-pad div:is(.chew-paper-none, .chew-paper-left, .chew-paper-right, .chew-paper-horiz) div:is(.note-paper-left, .note-paper-right){
    margin:0rem 0 0 0;
    padding-top:1rem;
    background-image: var(--style-pad-line); 
    background-attachment: scroll;
    background-clip: border-box;
    background-origin: padding-box;
    background-repeat: repeat;
    background-position: 0rem 1.5rem;
    background-size: 100% 1.5rem;   
    line-height: 1.5rem;
}

.preset-style-pad  div:is(.chew-paper-none, .chew-paper-left, .chew-paper-right, .chew-paper-horiz) div:is(.chew-paper-leftner, .chew-paper-rightner) p{
   font-size:110%;
   line-height: 1.5rem;
   margin-top:-2rem; 
    display:none;
}

.mob-pad{
 padding-left:7.5rem;
}

@media (max-width: 459px) {  
.preset-style-pad  div:is(.chew-paper-top, .chew-paper-bottom, .chew-paper-verti) div:is(.note-paper-left, .note-paper-mid, .note-paper-right) {
    background-position: 2rem 0;
  }
 .mob-pad{
 padding-left:2rem;
}
}
/* ---------------  信笺  ---------------*/

.preset-style-oldletter  div:is(.note-paper-midner, .note-quote-inner,  .note-page)  {
    background-image: none;
     border:none;
}

.preset-style-oldletter .note-paper-base {
   background:#ead1b3;
}

.preset-style-oldletter div:is(.note-paper-midner,  .note-paper-upon ,  .note-paper-under) {
        font-family:lisu,kaiti;
}

 .note-nobody.preset-style-oldletter .note-paper-midner {
     width: 100%;
    height: 80vh;
    writing-mode: vertical-rl;
    writing-mode: tb-lr;
   margin:0 auto;
    padding: 0px 0em 0px 0em;
    background-attachment: scroll;
    background-clip: border-box;
    background-image: linear-gradient(to right,rgb(183,56,41) 0%, rgba(231, 233, 220,0) 5%, rgba(231, 233, 220,0) 10%, transparent 11%);
    background-origin: padding-box;
    background-position: right ;
    background-repeat: repeat;
    background-size: 1.5em 100%;
    border:solid 3px rgba(183,56,41,0.8);
}

.note-nobody.preset-style-oldletter .note-paper-mid {
        height: auto;
       padding-left: 2rem;
       padding-right: 2rem;  
}

.note-nobody.preset-style-oldletter .note-paper-midner,
.note-nobody.preset-style-oldletter .note-paper-midner p{
    line-height: 1.5em;
    padding: 0;
    margin-left: 0em;
    word-break: break-all;
}

.note-nobody.preset-style-oldletter .note-paper-midner p{
    margin-left: 1.5em;
}

.note-nobody.preset-style-oldletter .note-paper-midner p:last-child{
    margin-left:0;
}

.note-nobody.preset-style-oldletter .note-paper-midner {
     font-size:1.5rem;
    overflow-x: auto;
     padding: 1.5rem 0 ;
    max-height:40rem;
}

.note-nobody.preset-style-oldletter .note-paper-upon p {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        font-size:240%;
        direction: rtl;
        unicode-bidi:bidi-override;
}

.preset-style-oldletter .note-paper-upon p {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        font-size:240%;
        unicode-bidi:bidi-override;
}

/* 上下预留空白 */
.note-nobody.preset-style-oldletter .note-paper-midner {
    margin-top: 3rem;
}

.note-nobody.preset-style-oldletter .note-paper-under p{
     line-height: 3rem;
}

.note-nobody.preset-style-oldletter div:is(.upon-set-right, .upon-set-left, .upon-set-center) + .note-paper-midner {
    margin-top: 0rem;
}

.note-nobody.preset-style-oldletter div:is(.upon-set-right, .upon-set-left, .upon-set-center) p{
         /*! line-height: 1.5rem; */
}

/* 令 等宽字体 代码，识别为标点符号右移。 */

.preset-style-oldletter .note-paper-midner tt{
    line-height: 0;
     position:relative;
    left: 0.28em;
    top:-0.35em;
    margin-top: 0rem;
    margin-bottom:-1em;
    font-family:  initial;
    letter-spacing: 0;
    font-size: 100%;
}

.preset-style-oldletter .note-paper-midner tt span[style*="text-decoration: underline"] { 
    text-decoration: none !important;
    line-height: 1em;
    writing-mode: horizontal-tb;
    left:0.5em;
    position:relative;
    letter-spacing: 0;
}

/* 信笺抬头 */
.ol-tt-p1{
      margin-top:1em;
}

 .ol-tt-p2{
    margin-top:2em;
  }

 .ol-tt-p3{
    margin-top:3em;
  }

.ol-tt-t1{
        margin-top:-1em;
}

.ol-tt-t2{
        margin-top:-2em;
}

.ol-tt-t3{
        margin-top:-3em;
}

/* 移动端 */
@media (max-width: 500px) {
  .note-nobody.preset-style-oldletter .note-paper-midner {
   margin: 0;
    padding-top:0em;
    background-image: linear-gradient(to top,rgb(183,56,41) 0%, rgba(231, 233, 220,0) 8%);
         background-size: 100% 1em;   
   writing-mode: lr-tb;
   height:100%;
   width: 100%;
   border:none;
   background-position: top;
   max-height:100%;
  }

  .note-nobody.preset-style-oldletter .note-paper-mid {
   height:100%;
     padding-left: 0.2rem;
     padding-right: 0.2rem;
   }

  .note-nobody.preset-style-oldletter .note-paper-midner p{
            padding:1em  0.2rem 0em 0.2rem;
      line-height: 1em;
              font-size: 100%;
            margin:0;

    }

  .note-nobody.preset-style-oldletter .note-paper-midner p:last-child{
      padding-bottom:0;
    }

  .note-nobody.preset-style-oldletter  .note-paper-upon p {
        margin-top: 0.5rem;
        margin-bottom:-0.7em;
        font-size:1em;
        direction:ltr;
    }

  .note-nobody.preset-style-oldletter .note-paper-under p {
    line-height: 0rem;
    } 

  .preset-style-oldletter  .note-paper-midner tt{
    line-height: auto;
    position: inherit;
    left: 0;
    top:0;
    margin-top: 0rem;
    margin-bottom:0;
    letter-spacing: inherit;
  }

.preset-style-oldletter .note-paper-midner tt span[style*="text-decoration: underline"] { 
    text-decoration: none !important;
    line-height: inherit;
    writing-mode: horizontal-tb;
    left:inherit;
    position:inherit;
    letter-spacing: inherit;
}

/* 移动端抬头 */
  .ol-tt-t1, .ol-tt-t2, .ol-tt-p1,.ol-tt-p2, .ol-tt-p3{
  margin-top:0;
  }
}

/*
==================
书签
==================
*/

.note-bookmark{
    background-image:var(--mark-color);   
    background-size: 120% 30%;
    background-position: 8.5vw  0;
    background-repeat: no-repeat;
    width: 100%;
}

.note-left .note-bookmark{
        background-size: 0;
}

/*
==================
便利贴  
==================
*/

.pre-note{
 display:none;
}

.note-tip-wrap{ 
    margin: 0.5rem 2rem 0.5rem 2rem;
    padding: 0;
    position: relative;
}

.note-tip-content{
    padding: 1rem; 
}

.note-tip-content p:first-child{
    margin-top: 0rem; 
      padding-top: 0rem; 

}

.note-tip-wrap{ 
  width:80%;
  float:left;
    -webkit-filter: drop-shadow(1px 5px 4px rgba(33,33,33,0.2));
    filter: drop-shadow(1px 5px 4px rgba(33,33,33,0.2));
    overflow:hidden;

}

.note-tip-cover{
   position: relative;
}

.note-tip-set{

  background-image:linear-gradient(-45deg,transparent 0%, transparent 0rem , var(--tip-color)  0rem, var(--tip-color) 100%);
}  

.note-tip-set.tip-crease-right{
  background-image:linear-gradient(-45deg,transparent 0%, transparent 1.6rem , var(--tip-color) 1.7rem, var(--tip-color) 100%);
}  

.note-tip-set.tip-crease-left{
  background-image:linear-gradient(45deg,transparent 0%, transparent 1.6rem ,var(--tip-color) 1.7rem, var(--tip-color) 100%);
}  

.note-tip-cover:before {
  content: "" ;
   position: absolute;
   bottom: 0%;
   width: 0rem;
   height: 0rem;  
   -webkit-filter: grayscale(50%);
    filter: grayscale(50%);
}

.tip-crease-left .note-tip-cover:before {
   left: 0%;
  border-right:2.1rem solid #bbdcea;
  border-bottom: 2.5rem solid transparent;
    -webkit-box-shadow: -3px -3px 5px rgba(0,0,0,0.3);
   -moz-box-shadow:-3px -3px 5px rgba(0,0,0,0.3);
   box-shadow: 2px -2px 5px rgba(0,0,0,0.3);
  z-index: 1;
}

.tip-crease-right .note-tip-cover:before {
     right: 0%;

  border-left:2.1rem solid #bbdcea;
  border-bottom: 2rem solid transparent;

   -webkit-box-shadow: -3px -3px 5px rgba(0,0,0,0.3);
   -moz-box-shadow:-3px -3px 5px rgba(0,0,0,0.3);
   box-shadow: -3px -1px 6px rgba(0,0,0,0.3);

  z-index: 1;

}

.note-tip-stick {
  background-color:#fff1b8;  
  background: linear-gradient(45deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.02) 76%, transparent 100%);
  height: 0rem;
}

/* 便利贴引用块 */

.note-tip-wrap .blockquote,
.note-tip-wrap blockquote{ 
    border: 2px dashed #333;
    background: transparent;
    padding: 1em;
    margin: 1rem 1em;
     background: rgba(33,33,33,0.05)
} 

.note-tip-wrap .blockquote > p:first-child,
.note-tip-wrap blockquote > p:first-child{ 
    margin-bottom: 0;
} 

@media (max-width: 495px) {
 .note-tip-wrap .blockquote,
 .note-tip-wrap blockquote{ 
    padding: 0.5em;
    margin: 0.5rem 0.5em;
 } 
  .pre-note:not([style*="$fix-mobwith"]) + .note-tip-wrap{
           width:100% !important;
  }
} 

 /*
==================
各种行间距问题
==================
*/

 /* 列表 */ 
.note-nobody li {
   line-height: 1.5rem;
   line-height:  var(--txt-size);
   margin: 0;
   padding: 0;
/*! word-spacing: normal; */
   word-break: break-word;
}

.note-nobody ul {
   line-height: 0rem;
   margin:  0rem 0rem 0rem 0rem;
   list-style-type:circle;  
}

.note-nobody li ul{
  margin:  0rem 0rem 0rem 0rem;  
}

.note-nobody ul + ul{
  margin:  1.5rem 0rem 0rem 0rem;
}

.note-nobody ul + p {
    line-height: 1.5rem;
    line-height:  var(--txt-size);
    margin: 1.5rem 0rem 0rem 0rem;  
    margin: var(--txt-size) 0rem 0rem 0rem;  
}

.note-nobody p + ul {
    line-height: 0rem;
    margin:  0rem 0rem 1.5rem 0rem;  
}

@media (max-width: 495px) {
 .note-nobody p + ul {
    line-height: 0rem;
    margin:  0rem 0rem 0rem 0rem;  
  }  
}

/* 文字标题 */
 .note-nobody :is(h1, h2, h3, h4, h5, h6){
    margin-top: 1.5rem;
    margin-top:  var(--txt-size);
    margin-bottom: 0em;
}

/* 引用块 */
.note-nobody  .blockquote + .blockquote,
.note-nobody  blockquote + blockquote {
 margin-top: 2rem;

}

.note-nobody .blockquote p:first-child,
.note-nobody  blockquote p:first-child{
    padding-top:0rem;  
}

.note-nobody .blockquote,
.note-nobody  blockquote {
    padding: 0.5rem 1rem  0.4rem 1rem;
    margin: 1rem 2rem 1rem 2rem;
         background-color: #ebebeb;
    border: 1px solid #333;
         border-left: 4px solid #333;
}

.note-nobody .blockquote:before,
.note-nobody  blockquote:before {
content: ' ○ ';
    position: absolute;
    margin-left: -1.2rem;  
    margin-top: -0.9rem;
    padding:0  0.2rem 0 0rem;

    height: 3rem;
    width: 0.5rem;
    border: 2px solid rgba(0,0,0,0.7);
    background: rgba(33,33,33,0.5);
    -ms-transform:rotate(30deg);     
-moz-transform:rotate(30deg);
-webkit-transform:rotate(30deg);
-o-transform:rotate(30deg);
    transform:rotate(30deg);        
}

.note-nobody .blockquote div.blockquote ,
.note-nobody   blockquote   blockquote{
    padding: 0.5rem 1rem  0.4rem 1rem;
    margin: 1rem 2rem 1rem 2rem;
    background: transparent;
}

.note-nobody .blockquote + p,
.note-nobody  blockquote + p{
    padding-top:0rem;
}

/*
==================
手机
===================
*/
.pc-absolute{
position: absolute;
}

@media (max-width: 495px) {

.pc-absolute{
position: initial;
}

.note-nobody .blockquote,
.note-nobody  blockquote {
    padding: 0.5rem 1rem  0.4rem 1rem;
    margin: 1rem 0.5rem 1rem 0.5rem;
}

#main-content {
    min-width: 0rem !important;
}

.note-page {
    width: 100%;
    float:none ;
 /*background-size: 90% 1.5rem; */
}

#search-top-box-input{
display:none;
}

.note-leaf {
    columns:0rem 1 ;
    -webkit-columns:0rem 1 ;
    -moz-columns:0rem 1;
}

.note-cover {
   padding: 0.5rem  ;
   margin: 0 1rem  0 -0.5rem;
   border: 2px solid #968787;
}

.note-wrap{
    background: none ;
    padding:0rem ;
    box-shadow: none ;
    margin:0rem ;
    border: none ;
}

.note-bookmark{
    background-image: none ;
}
}

/*
==================
常规版式
==================
*/

.no-float{
    width:100%;
    clear: both;
}

.note-nobody  sup {
  top: -0.8em;
 /* vertical-align: text-top;*/
}

/* 分割线 */
.note-nobody hr {
  margin: 0.75rem 0em -0.75rem 0em;
  height: 1.5px;
  color: #DDD;
  background-color: transparent !important;
  background-image: -webkit-linear-gradient(to right,transparent 5%, #6d6b82 20%, #555 50%, #6d6b82 80%, transparent 95%);
  background-image: linear-gradient(to right,transparent 5%, #000 7%, #444 10%, #555 50%, #6d6b82 80%, transparent 95%);

    border: none;
}

.note-hr hr {
  margin: 1.35rem 0em 0rem 0em;
}

/* 脚注上标 */
.note-bookmark a.footnoteref {
    line-height: 0px;
}

.note-bookmark sup.footnoteref {
    top: 0.5em;
    font-size: 80%;
}

@media (max-width: 520px) { 
   .note-bookmark sup.footnoteref {
    top:0em;
    font-size: 100%;
   }
}

/* 首行缩进 */
.suojin-2{
 text-indent:2em;
}

/* 
----------------------
仅限宽屏，其中元素不可视不可选
---------------------
*/

/* 用于将有序列表隔行，在手机端下不被取消 */
.l-b {
  display: block;
}

 /* 用于span强制断行 */

.preset-style-oldletter .note-paper-midner sup:not(.footnoteref),
 .section-break  sup:not(.footnoteref), 
 .pc-break sup:not(.footnoteref), 
 .pc-line {
    display: block;
    width: 0;
    height: 0;
}

 /* 用于span留空 */

.preset-style-oldletter .note-paper-midner sup:not(.footnoteref),
.preset-style-oldletter .note-paper-midner sub,
.section-break sup:not(.footnoteref), .section-break sub, 
.pc-break sup:not(.footnoteref), .pc-break sub, 
.l-b, .pc-blank,  .pc-line{
    opacity: 0;
    -webkit-user-select: none; 
    -ms-user-select: none; 
     user-select: none; 
    margin: 0;
    padding: 0;
    position:    initial;
    line-height: 0;
}

@media (max-width: 520px) { 
.preset-style-oldletter .note-paper-midner sup:not(.footnoteref),
.preset-style-oldletter .note-paper-midner sub,
.pc-break sup:not(.footnoteref), .pc-break sub,
.pc-line, .pc-blank{
  display: none;
  }
}

/*------------ 不要某些样式 ------------*/

/* 检索 .note-nobody 所在div的class，{/name}里是否出现关键词 */

.note-nobody[class*="noline"] *{
  background-image: none;/* 不要行线 */
}

.note-nobody[class*="noshadow"] {
  -webkit-filter:none;
  -moz-filter:none;
  filter:none;/* 不要阴影，但保留边框 */
  border: 2px solid grey;
}

.note-nobody[class*="noborder"] {
  -webkit-filter:none;
  -moz-filter:none;
  filter:none;/* 不要阴影与边框 */
    border: none;
}

@media (max-width: 500px) {
 .mob-hid,
 .note-nobody .mob-hid{
    display: none;
  }
}