笔记本组件 源代码

注意

此页为于 SCP 维基内部使用的“组件”页。用于在其他页面中引用。

未经组件作者或工作人员允许，请勿修改此页的内容。

---

+ 显示里面的东西

撕页边缘图片数据
http://scp-wiki-cn.wikidot.com/fragment:note-img

主要代码

/*
==================
笔记本组件
 
制作者：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;
  }
}

第二、简略没有人版式

/*
----------------------
简略没有人版式，问号图片来自JackalRelated
---------------------
*/
 
/*
手写字体，
font-family: 'Long Cang';
因占用大而不使用。
@import url(https://fonts.googleapis.com/css?family=Long+Cang&display=swap);
*/
 
.mobile-top-bar .open-menu a{
            border-style: solid;
            border-width: 0px 0px 100px 100px;
            border-color: transparent transparent black transparent !important;
            background-color:  transparent !important;
            width: 0px;
            height: 0px;
            border-radius:0;
}
.mobile-top-bar .open-menu a::after{
  content: "👥";
font-size:80%;
}
 
#header {
background-image: url(http://smlt.wdfiles.com/local--files/plaguebearer%3Anobody/%3F);
}
 
#header h1 a {
    display: block;
    margin: 0;
    padding: 80px 0 25px;
    line-height: 0px;
    max-height: 0px;
    color: transparent;
    background: transparent;
    font-family: BauhausLTDemi. 'Nanum Gothic'. Arial. sans-serif;
    text-decoration: none;
    text-shadow: none;
    letter-spacing: 0.9px;
}
 
#header h1 a::before {
    content: "Nobody here ";
    color: #fff;
    letter-spacing: -0.02em;
    text-shadow: 3px 3px 5px #000;
}
 
#header h2 span {
    display: block;
    margin: 0;
    padding: 19px 0;
    line-height: 0px;
    max-height: 0px;
    font-weight: bold;
    color: transparent;
    text-shadow: none;
}
 
#header h2 span::before {
    content: '……';
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    text-shadow: 1px 1px 1px rgba(0,0,0,.8);
}
 
.no-float{
width:100%;
clear: both;
}

第三、响应行

/*
==================
响应行
--------------------------------
用em修正，随文本大小变化行间距，使之与其比例固定
 
对应地，需要把字体大小单位写作 rem
==================
*/
 
.note-nobody .note-page,
.note-nobody .note-quote-inner,
.note-nobody .note-paper-midner {
   padding-top: 0em;
   max-height:100%;
    background-size: 100% 1.5em;   
   background-position: top;
}
 
.note-nobody .note-page .note-bookmark p:not(:first-child),
.note-nobody .note-page .note-bookmark,
.note-nobody .note-quote-inner,
.note-nobody .note-paper-midner {
   padding-top: 1.5em;
   max-height:100%;
}
 
.note-nobody .note-quote-inner,
.note-nobody .note-paper-mid {
   height:100%;
     padding-left: 0.2rem;
     padding-right: 0.2rem;
   }
 
.note-nobody .note-quote-inner {
     padding-right: 0rem;
   }
 
.note-nobody .note-quote-inner p,
.note-nobody .note-paper-midner p{
         padding: 0em  0.2rem 1.5em 0.2rem ;
         line-height:1.5em;
         margin: 0;
}
 
.note-nobody .note-page .note-bookmark,
.note-nobody .note-page .note-bookmark p {
            line-height:1.5em;
}
 
.note-nobody .note-page .note-bookmark p:last-child,
.note-nobody .note-quote-inner p:last-child,
 .note-nobody .note-paper-midner p:last-child{
            padding-bottom:0em;
}
 
@media (max-width: 500px) {
  .note-line  .note-page:last-child  .note-bookmark  {
            padding-top:0rem;
            padding-bottom:1em;
    }   
 
 .note-line  .note-page:first-child  .note-bookmark{
            padding-bottom:1.7em;
    }  
}
 
/*
==================
响应便利贴
==================
*/
 
.note-tip-wrap{ 
    margin: 0.5em 2em 1.7em 2em;
    padding: 0;
}
 
.note-tip-content{
    padding: 1em; 
}
 
/*
==================
各种行间距问题
==================
*/
 
 /* 列表 */
.note-nobody li {
   line-height: 1.5em;
   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.5em 0rem 0rem 0rem;
}
 
.note-nobody ul + p {
    line-height: 1.5em;
    margin: 1.5em 0rem 0rem 0rem;  
}
 
.note-nobody p + ul {
    line-height: 0rem;
    margin:  0rem 0rem 1.5em 0rem;  
}
 
/* 文字标题 */
 .note-nobody h1,
 .note-nobody h2,
 .note-nobody h3,
 .note-nobody h4,
 .note-nobody h5,
 .note-nobody h6 {
    margin-top: 0em;
    margin-bottom: 0em;
}
 
/* 响应引用块 */
 
.note-nobody  .blockquote + .blockquote,
.note-nobody  blockquote + blockquote {
 margin-top: 1em;
}
 
.note-nobody .blockquote p:first-child,
.note-nobody  blockquote p:first-child{
    padding:0.5em;  
}
 
.note-nobody .blockquote,
.note-nobody  blockquote {
    padding: 0.5em 1em  1em 1em;
    margin: -0.5em  2em 0.5em 2em;
}
 
.note-nobody .blockquote + p,
.note-nobody  blockquote + p{
    margin-top:1.2em !important;
}
 
.note-nobody .blockquote  p,
.note-nobody  blockquote  p{
    margin-top:-0.5em !important;
}
 
/* 响应移动端 */
 
@media (max-width: 495px) {
 .note-nobody p + ul {
    line-height: 0rem;
    margin:  0rem 0rem 0rem 0rem;  
  }  
 
.note-nobody .blockquote,
.note-nobody  blockquote {
    padding: 0.5em 1em  1em 1em;
    margin: -0.5em  1em 0.5em 1em;
  }
}