@anyblock/any-block-core 3.4.6

package/style/styles.scss

@@ -0,0 +1,1244 @@
+/**
+ * ABC 样式文件
+ *
+ * 修改/使用说明：
+ *
+ * vuepress-mdit环境直接用scss，ob这边需要使用css
+ * 编辑ABC模块的该文件时，需要手动编译/使用vscode `easy sass` 插件
+ *
+ * 换行问题：AnyBlock的块宽度很多都是不满100%的，在窄区域中显示多文本时经常需要使用换行
+ * - 不换行时
+ *   - white-space: pre;          // 有换行符要换
+ * - 换行时
+ *   - white-space: break-spaces; // 自动换行 ~normal~~
+ *   - overflow-wrap: break-word; // 单词中换行
+ *   - code {white-space: pre;}   // 一个用于手动控制不换行的方式
+ */
+
+/**
+ * 颜色相关
+ */
+ :root {
+  --ab-tab-root-bg-color: #0d1117;  // #ffffff;
+  --ab-tab-root-bd-color: #34343f;  // #e0e0e0;
+  --ab-tab-root-hv-color: #363639;  // #D7D7D7 hover
+  --ab-tab-root-tx-color: #9e9e9e;  // blackc
+
+  --ab-bright-color: orange;        // lightgoldenrodyellow、yellowgreen
+  --pre-background-color: #1b1b1b;  // rgb(36,36,36)
+
+  --ab-table-border-width: 1px;
+  --ab-table-border-color: #363636;
+
+  --ab-width-inner: 100%;
+  --ab-width-outer: 100%;
+}
+// 获取一些Obsidian的默认颜色并覆盖默认颜色 (mdit不可用)
+.theme-dark,
+.theme-light{
+  --ab-tab-root-bg-color: var(--color-base-00);
+  --ab-tab-root-bd-color: var(--color-base-30);
+  --ab-tab-root-tx-color: var(--color-base-70);
+
+  --ab-bright-color: var(--blockquote-border-color); // 不一定是主题色
+  --pre-background-color: var(--secondary-background);
+
+  --ab-table-border-width: var(--table-border-width);
+  --ab-table-border-color: var(--table-border-color);
+}
+.theme-light{
+  --ab-tab-root-hv-color: #d7d7d7;
+}
+// 获取VuePress的默认颜色并覆盖默认颜色
+html[data-theme="light"] #app,
+html[data-theme="dark"] #app{
+  --ab-tab-root-bg-color: var(--vp-c-bg);     // --code-bg-color, old version vp: --bg-color
+  --ab-tab-root-bd-color: var(--vp-c-border); // --code-border-color, old version vp: --border-color
+  --ab-tab-root-tx-color: var(--vp-c-text);   // --code-color, old version vp: --text-color
+
+  --ab-bright-color: var(--vp-c-accent);      // old version vp:--theme-color
+  --pre-background-color: var(--code-bg-color);
+}
+html[data-theme="light"] #app {
+  --color-red: #e93147;
+  --color-orange: #ec7500;
+  --color-yellow: #e0ac00;
+  --color-green: #08b94e;
+  --color-cyan: #00bfbc;
+  --color-blue: #086ddd;
+  --color-purple: #7852ee;
+  --color-pink: #d53984;
+  --ab-tab-root-hv-color: #d7d7d7;
+}
+html[data-theme="dark"] #app {
+  --color-red: #fb464c;
+  --color-orange: #e9973f;
+  --color-yellow: #e0de71;
+  --color-green: #44cf6e;
+  --color-cyan: #53dfdd;
+  --color-blue: #027aff;
+  --color-purple: #a882ff;
+  --color-pink: #fa99cd;
+}
+
+.ab-hide {
+  display: none;
+}
+
+/**
+ * obsidian各模式下的微调
+ * 
+ * 替换内容
+ * .ab-replace         // 整体 (外框、圆角)
+ *   &>.ab-note        // 内容
+ *     &>.ab-replaceEl // 内容 (感觉冗余了)
+ *   &>.ab-button      // 操作控件 (刷新/编辑/下拉框)
+ */
+.app-container {
+  // 阅读模式
+  .markdown-reading-view {
+    .ab-replace{
+      margin-top: 0;
+      margin-bottom: 22px;
+    }
+  }
+  // 源码/实时模式
+  .markdown-source-view {
+    .ab-replace{
+      // 消除cm-widgetBuffer自带的间隙。注意：不能完全消除，否则光标上下移动时会跳过块区域到达另一端
+      margin-top: -0.5em; // -12px;
+      margin-bottom: -0.5em; // -12px;
+    }
+    .block-language-anyblock>.ab-replace {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+  // 实时模式下的阅读模式（片段引用显示就是这种情况，覆盖掉前面的margin)
+  .markdown-source-view .markdown-preview-view {
+    .ab-replace{
+      margin-top: 0;
+      margin-bottom: 22px;
+    }
+  }
+  // 源码模式
+  .markdown-source-view.is-live-preview {}
+}
+// 打印/pdf模式
+.print{
+  .ab-replace>.ab-button { // 刷新按钮
+    display: none;
+  }
+  .ab-replaceEl>button { // dir的折叠按钮
+    display: none;
+  }
+}
+// 手机/触屏端 mobile
+// 弃用，使用另一个修复方法：移动端不给edit-block-button类
+// @media (hover: none) and (pointer: coarse) {
+//   .edit-block-button.ab-button-1 { // 编辑按钮恒显示，要覆盖edit-block-button默认行为
+//     display: block !important;
+//     z-index: 20;
+//   }
+// }
+
+/**
+ * 替换内容
+ * .ab-replace         // 整体 (外框、圆角)
+ *   &>.ab-note        // id (仅调试模式用)
+ *   &>.ab-note        // 内容
+ *     &>.ab-replaceEl // 内容 (感觉冗余了)
+ *   &>.ab-button      // 操作控件 (刷新/编辑/下拉框)
+ */
+.ab-replace{
+  /*background-color: #272e3a;*/
+  position: relative;
+  border-radius: 4px;
+
+  &>.ab-id {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: inline-block;
+    height: 18px;
+    width: auto;
+    background: var(--ab-tab-root-bg-color);
+    color: var(--ab-tab-root-tx-color);
+    border-radius: 8px;
+    padding: 0 8px;
+    z-index: 10;
+    opacity: 0.8;
+  }
+
+  &>.ab-note{
+    position: relative;
+    /*padding: 24px 12px 12px 12px;*/
+  }
+
+  &>.ab-button{
+    box-sizing: border-box;
+    position: absolute;
+    top: 4px;
+    &.ab-button-1 {
+      right: 4px;
+    }
+    &.ab-button-2 {
+      right: 40px; // +36
+    }
+    &.ab-button-3 {
+      right: 76px;
+    }
+    &.ab-button-4 {
+      right: 112px;
+    }
+    &.ab-button-5 {
+      right: 148px;
+    }
+    &.ab-button-6 {
+      right: 184px;
+    }
+    &.ab-button-select {
+      >* {
+        padding: 0 10px;
+        width: 24px;
+        height: 24px;
+        box-sizing: border-box;
+      }
+      >button {
+        padding: 0;
+        position: absolute;
+        pointer-events: none; // 点击穿透
+        z-index: 2;
+        text-align: center;
+        border: none;
+        box-shadow: none;
+        background: none;
+      }
+      >select {
+        z-index: 1;
+        opacity: 0; // select透明不影响option
+      }
+      option {
+        padding: 0 10px;
+      }
+    }
+  }
+
+  img.cm-widgetBuffer{
+    height: 2px;
+  }
+}
+
+.ab-note {
+  // 修复重渲染问题
+  .markdown-rendered table { // 重渲染的表格宽度过宽的问题 (这里好像是Sp主题引起的)
+    min-width: 0;
+  }
+  .markdown-rendered ul li,
+  .markdown-rendered ol li { // 重渲染的列表间隔会变得特别高
+    margin-bottom: 0;
+  }
+
+  // 修复ob新版本导致表格宽度减少
+  table {
+    display: table;
+    width: 100%;
+  }
+  table[modeT="true"] {  // 表格转置
+    tr { display: block; float: left; }
+    th, td { display: block; }
+  }
+
+  // 未渲染前的mermaid
+  pre.ab-mermaid-raw {
+    border: solid 1px;
+    border-radius: 6px;
+    margin-top: 0;
+  }
+  // 未渲染前的markmap
+  .ab-markmap-svg {
+    border: solid 1px;
+    border-radius: 6px;
+    width: 100%;
+  }
+
+  // 标签栏
+  .ab-tab-root {
+    .ab-tab-nav {
+      // height: 40px;
+      box-sizing: border-box;
+      border: 2px solid var(--ab-tab-root-bd-color);
+      background-color: var(--ab-tab-root-bd-color);
+      color: var(--ab-tab-root-tx-color);
+      border-bottom: none;
+      border-radius: 10px 10px 0 0;
+      padding-right: 60px; // 这个是为了避免与编辑按钮重叠
+      .ab-tab-nav-item {
+        height: 38px; // 40-2
+        box-shadow: none;
+        border: none;
+        border-radius: 10px 10px 0 0;
+        padding-left: 20px;
+        padding-right: 20px;
+        font-size: 0.9em;
+        font-weight: bold;
+        cursor: pointer;
+        &[is_activate="false"] {
+          background-color: var(--ab-tab-root-bd-color);
+          color: var(--ab-tab-root-tx-color);
+        }
+        &[is_activate="true"] {
+          background-color: var(--ab-tab-root-bg-color);
+          color: var(--ab-tab-root-tx-color);
+        }
+      }
+    }
+    .ab-tab-content {
+      border: 2px solid var(--ab-tab-root-bd-color);
+      background-color: var(--ab-tab-root-bg-color);
+      color: var(--ab-tab-root-tx-color);
+      border-top: none;
+      padding: 10px 20px;
+      .ab-tab-content-item {
+
+      }
+    }
+  }
+
+  // 使单元格内容更紧凑 - 去除单元格内部的间隔 (首尾)
+  td>p:first-child, th>p:first-child, // ob x 8
+  td>ul:first-child, th>ul:first-child,
+  .ab-list-table-witharrow>p:first-child,
+  .ab-nodes-content>p:first-child,
+  .ab-items-item>div>p:first-child, .ab-items-item>div>ul:first-child,
+  td>div>p:first-child, th>div>p:first-child, // mdit x 8
+  td>div>ul:first-child, th>div>ul:first-child, 
+  .ab-list-table-witharrow>div>p:first-child,
+  .ab-nodes-content>div>p:first-child,
+  .ab-items-item>div>div>p:first-child, .ab-items-item>div>div>ul:first-child
+  {
+    margin-top: 2px;
+  }
+  td>p:last-child, th>p:last-child, // ob x 8
+  td>ul:last-child, th>ul:last-child, 
+  .ab-list-table-witharrow>p:last-child,
+  .ab-nodes-content>p:last-child,
+  .ab-items-item>div>p:last-child, .ab-items-item>div>ul:last-child,
+  td>div>p:last-child, th>div>p:last-child, // mdit x 8
+  td>div>ul:last-child, th>div>ul:last-child,
+  .ab-list-table-witharrow>div>p:last-child,
+  .ab-nodes-content>div>p:last-child,
+  .ab-items-item>div>div>p:last-child, .ab-items-item>div>div>ul:last-child
+  {
+    margin-bottom: 2px;
+  }
+
+  // 通用表格
+  table.ab-table {
+    // 使空格内容更紧凑 -  去除单元格之间的间距
+    border-collapse: collapse;
+    td,th{
+      white-space: normal;
+      overflow-wrap: break-word;
+      code {white-space: pre;}
+      padding: 2px 5px;
+      border: solid var(--ab-table-border-width) var(--ab-table-border-color);
+    }
+
+    // 取消自带的隔行表格着色
+    // tr:nth-child(2n+1)
+    tr {
+      background: none;
+    }
+  }
+
+  // 多叉表格
+  .ab-branch-table {
+    // 仿列表样式的普通表格 // TODO 第一列是选不好的，得js那边给 “真-第一列” 进行标记
+    &.ab-table-likelist {
+      td {
+        border: none;
+        padding-bottom: 10px;
+        vertical-align: top;
+        box-sizing: border-box;
+      }
+      // td { // :nth-child(2) {
+      //   padding-left: 20px;
+      //   position: relative;
+      //   &::before {
+      //     position: absolute;
+      //     top: 14px;
+      //     transform: translateY(-50%);
+      //     width: 4px;
+      //     height: 4px;
+      //     border: solid 1px;
+      //     left: 6px;
+      //     content: '';
+      //     border-radius: 50%;
+      //   }
+      // }
+      // td:last-child {
+      //   border: none;
+      //   &::after {
+      //     content: none;
+      //   }
+      // }
+      td[col_index="0"] { // :first-child {
+        padding-right: 8px;
+        padding-left: 20px;
+        position: relative;
+        &::before {
+          position: absolute;
+          top: 14px;
+          transform: translateY(-50%);
+          width: 5px;
+          height: 5px;
+          border: none;
+          left: 6px;
+
+          content: '';
+          border-radius: 50%;
+          background-color: currentColor;
+        }
+        &::after {
+          content: "";
+          position: absolute;
+          top: 3px;
+          bottom: 5px;
+          right: 0;
+          //width: 1px;
+          //height: calc(100% - 6px);
+          border-right: 1px solid currentColor;
+          pointer-events: none;
+        }
+      }
+    }
+  }
+
+  // 列表格
+  table.ab-list-table{
+    // 通用
+    .ab-foldable-tr {
+      &>td:first-child{
+        >div{
+          padding-left: 15px;
+          position: relative;
+        }
+      }
+      &[able_fold="true"]>td:first-child{
+        >div::before{
+          content: "";
+          position: absolute;
+          width: 0;
+          height: 0;
+        }
+      }
+      &[able_fold="true"][is_fold="true"]>td:first-child{ // 箭头图标
+        >div:first-child::before{
+          top: 5px;
+          left: 2px;
+          border: 6px solid transparent;
+          border-left-color: currentColor;
+          cursor: pointer;
+        }
+      }
+      &[able_fold="true"][is_fold="false"]>td:first-child{ // 箭头图标
+        >div:first-child::before{
+          top: 9px;
+          left: -1px;
+          border: 6px solid transparent;
+          border-top-color: currentColor;
+          cursor: pointer;
+        }
+      }
+      // 缩进
+      &[tr_level="0"]>td:first-child{padding-left: calc(0*24px);}
+      &[tr_level="1"]>td:first-child{padding-left: calc(1*24px);}
+      &[tr_level="2"]>td:first-child{padding-left: calc(2*24px);}
+      &[tr_level="3"]>td:first-child{padding-left: calc(3*24px);}
+      &[tr_level="4"]>td:first-child{padding-left: calc(4*24px);}
+      &[tr_level="5"]>td:first-child{padding-left: calc(5*24px);}
+      &[tr_level="6"]>td:first-child{padding-left: calc(6*24px);}
+      &[tr_level="7"]>td:first-child{padding-left: calc(7*24px);}
+      &[tr_level="8"]>td:first-child{padding-left: calc(8*24px);}
+      &[tr_level="9"]>td:first-child{padding-left: calc(9*24px);}
+      &[tr_level="10"]>td:first-child{padding-left: calc(10*24px);}
+      &[tr_level="11"]>td:first-child{padding-left: calc(11*24px);}
+      &[tr_level="12"]>td:first-child{padding-left: calc(12*24px);}
+      &[tr_level="13"]>td:first-child{padding-left: calc(13*24px);}
+      &[tr_level="14"]>td:first-child{padding-left: calc(14*24px);}
+      &[tr_level="15"]>td:first-child{padding-left: calc(15*24px);}
+      &[tr_level="16"]>td:first-child{padding-left: calc(16*24px);}
+    }
+
+    // 仿列表样式的列表格
+    &.ab-listtable-likelist {
+      margin-left: 24px;
+      td {
+        border: none;
+        vertical-align: top;
+      }
+      // 覆盖列表格的部分样式
+      .ab-foldable-tr>td:first-child>div.ab-list-table-witharrow {
+        padding: 0 !important;
+        padding-right: 8px;
+        padding-left: 20px;
+        position: relative;
+        display: inline-block;
+        &::before {
+          border: solid 1px !important;
+          background: none !important;
+          width: 6px !important;
+          height: 6px !important;
+  
+          box-sizing: border-box;
+          position: absolute;
+          top: 12px !important;
+          transform: translateY(-50%) !important;
+          left: -14px !important;
+          content: '';
+          border-radius: 50%;
+        }
+      }
+      .ab-foldable-tr[tr_level="0"]>td:first-child>div.ab-list-table-witharrow {
+        &::before {
+          border: 0 !important;
+          background-color: currentColor !important;
+          width: 6px !important;
+          height: 6px !important;
+        }
+      }
+    }
+
+    // 仿目录结构的列表格
+    &.ab-table-folder .ab-foldable-tr{
+      td:first-child {
+        white-space: pre;
+        vertical-align: top;
+      }
+      &>td>div {
+        // float: left; (这个没办法让div下的div2和div3在同一行，用inline-block代替之)
+        display: inline-block;
+        vertical-align: top;
+        &.ab-list-table-witharrow {
+          padding-left: 6px; // old 15
+        }
+      }
+      .ab-list-table-svg {
+        padding-top: 4px;
+        svg{  
+          width: 13px;
+          height: 16px;
+          fill: var(--ab-bright-color);
+        }
+      }
+      // 边框处理
+      td:first-child {
+        border: none;
+      }
+      td {
+        border-left: none;
+        border-right: none;
+        border-bottom: none;
+      }
+    }
+  }
+  // 列表格 - 总折叠按钮
+  .ab-list-table-parent {
+    position: relative;
+    .ab-table-fold {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+
+      background: none;
+      border: none;
+      color: currentColor;
+      cursor: pointer;
+      padding: 2px 6px;
+    }
+  }
+
+  // 时间线表格
+  table.ab-table-timeline {
+    td {
+      border-right: none;
+      padding-left: 20px;
+    }
+    td[col_index="0"] {
+      border: none;
+      border-left: none;
+      border-right: solid 2px;
+      padding-left: 5px;
+      padding-right: 20px;
+      color: var(--ab-bright-color);
+
+      position: relative;
+      overflow: visible;
+      &::after {
+        position: absolute;
+        top: 1em;
+        transform: translateY(-50%);
+        width: 10px;
+        height: 10px;
+        right: -8px;
+
+        content: '';
+        background-color: var(--ab-bright-color);
+        border-radius: 50%;
+        border: solid 2px;
+      }
+    }
+    // td:nth-child(2) {
+    //   padding-left: 20px;
+    // }
+    // td:last-child {
+    //   border-right: none;
+    // }
+    tr:first-child td {
+      border-top: none;
+    }
+    tr:last-child td {
+      border-bottom: none;
+    }
+  }
+
+  // FAQ
+  .markdown-rendered.ab-faq-content{
+    p:first-child {margin-top: 0;}
+    p:last-child {margin-bottom: 0;}
+  }
+  .ab-faq{
+    .ab-faq-line{
+      line-height: 30px;
+      width: 100%;
+      padding: 0 15px 0 15px;
+      clear: both;
+      overflow-y: auto;
+      
+      .ab-faq-bubble {
+        float: left;
+        width: calc(100% - 75px);
+      }
+    }
+    .ab-faq-line.ab-faq-q,
+    .ab-faq-line.ab-faq-Q{
+      background-color: #1e53ee;
+      border-radius: 12px 12px 0 0;
+    }
+    .ab-faq-line.ab-faq-a,
+    .ab-faq-line.ab-faq-A{
+      background-color: #f5f8fe;
+      border-radius: 0 0 12px 12px;
+      color: #a994a6;
+      margin-bottom: 20px;
+    }
+    .ab-faq-line::before{
+      float: left;
+      width: 24px;
+    }
+    .ab-faq-line.ab-faq-q::before,
+    .ab-faq-line.ab-faq-Q::before{
+      content: "Q";
+    }
+    .ab-faq-line.ab-faq-a::before,
+    .ab-faq-line.ab-faq-A::before{
+      content: "A";
+    }
+  }
+
+  // 折叠
+  .ab-deco-fold{
+    .ab-deco-fold-button{
+      color: var(--ab-bright-color);
+      border-bottom: 1px solid var(--ab-bright-color);
+      height: 30px;
+      line-height: 30px;
+      padding-left: 6px;
+      // border-radius: 5px;
+      width: 100%;
+    }
+  }
+
+  // 滚动
+  .ab-deco-scroll.ab-deco-scroll-y {
+    overflow-y:auto;
+  }
+  .ab-deco-scroll.ab-deco-scroll-x {
+    overflow-x:auto;
+    white-space: pre !important;
+    th, td {
+      white-space: pre !important;
+    }
+  }
+
+  // 超出折叠
+  .ab-deco-overfold{
+    overflow-y: hidden;
+    position: relative;
+    .ab-deco-overfold-button{
+      position: absolute;
+      bottom: 0;
+      height: 40px;
+      line-height: 40px;
+      width: 100%;
+      text-align: center;
+      box-sizing: content-box;
+    }
+    .ab-deco-overfold-content{
+      margin-bottom: 40px;
+    }
+  }
+  .ab-deco-overfold[is-fold="true"]{
+    .ab-deco-overfold-button{
+      padding-top: 60px;
+      background-image: linear-gradient(-180deg, rgba(24, 26, 27, 0) 0%, rgb(24, 26, 27) 100%)
+    }
+  }
+
+  // 黑幕
+  .ab-deco-heimu, .ab-deco-heimu a{
+    background-color: #252525;
+    color:#252525;
+    text-shadow: none;
+    &::selection{
+      background:#9ab0c0;
+      color:#fff;
+    }
+  }
+  .ab-deco-heimu:hover, .ab-deco-heimu:hover a{
+    transition:color .13s linear;
+    color:#fff;
+  }
+
+  // 标题 // TODO 在ob阅读模式下间距不正常
+  .ab-deco-title{
+    width: 100%;
+    p{
+      font-size: 17px;
+      line-height: 17px;
+      margin: 0;
+      margin-bottom: 10px;
+    }
+    pre {
+      margin: 0;
+    }
+    .ab-deco-title-title{
+      height: auto;
+    }
+    .ab-deco-title-title[title-type="table"]>p{
+      font-weight: bold;
+      text-align: center;
+      margin-top: 10px;
+      margin-bottom: 16px;
+    }
+    .ab-deco-title-title[title-type="pre"]>p{
+      display: inline;
+      font-size: 16px;
+      font-weight: 400;
+      background-color: var(--pre-background-color);
+      padding: 8px 16px 11px 16px;
+      border-radius: 8px 8px 0 0;
+      margin: 0;
+    }
+    .ab-deco-title-title[title-type="quote"]>p{
+      font-weight: bold;
+      margin-bottom: 20px;
+    }
+    .ab-deco-title-title[title-type="ul"]>p{
+      font-weight: bold;
+    }
+  }
+
+  // 快捷的二层容器 container
+  .ab-items {
+    white-space: normal;
+    overflow-wrap: break-word;
+    code {white-space: pre;}
+
+    // 分栏
+    &.ab-col{
+      display: flex; // Flexbox 布局
+      flex-wrap: wrap; // 元素换行显示
+      gap: 0rem; // 间隙
+      .ab-items-item {        
+        flex: 1 0 calc(33.33% - 1rem); // 每个项目的宽度大约为容器的 33.33%，减去间隙的一半
+        box-sizing: border-box; // 确保 padding 和 border 不影响元素的实际大小
+        padding: 10px;
+      }
+    }
+
+    // 卡片
+    &.ab-card {
+      // 布局无关部分
+      .ab-items-item {
+        box-sizing: border-box; // 确保 padding 和 border 不影响元素的实际大小
+        color: var(--ab-tab-root-tx-color);
+        background-color: var(--ab-tab-root-bg-color);
+        border: solid 2px var(--ab-tab-root-bd-color);
+        border-radius: 6px;
+        box-shadow: #34343f;
+        margin-bottom: 10px;
+        padding: 5px 10px;
+
+        &>div {
+          padding-top: 2px;
+          padding-bottom: 2px;
+        }
+
+        .ab-items-title {
+          // color: var(--ab-bright-color);
+          border-bottom: 1px solid var(--ab-bright-color);
+        }
+        .ab-items-content {
+          
+        }
+      }
+
+      // 布局1，纵向瀑布流 (有js)
+      &.ab-lay-vfall:not(.ab-hfall) {
+        // 方式一，对齐, flex布局
+        /*display: flex; // Flexbox 布局
+        flex-wrap: wrap; // 元素换行显示
+        gap: 1rem; // 间隙
+        .ab-items-item {
+          flex: 1 0 calc(25% - 1rem); // 每个项目的宽度大约为容器的 33.33%，减去间隙的一半
+        }*/
+
+        // 方式二，瀑布流, column-count方式
+        // 列数。其中ob默认700px宽，我定义的小宽度是800，大宽度是1100。假设一列加边框200px较好
+        column-count: 4; // css不支持查询ab.card的宽度，只能查屏幕，这个得让js来
+        // @media (max-width: 1400px) { column-count: 6; }
+        // @media (max-width: 1200px) { column-count: 5; }
+        // @media (max-width: 1000px) { column-count: 4; }
+        // @media (max-width: 800px) { column-count: 3; }
+        // @media (max-width: 600px) { column-count: 2; }
+        // @media (max-width: 400px) { column-count: 1; }
+        column-gap: 10px; // 列间距
+        .ab-items-item {
+          break-inside: avoid-column; // 防止单个元素被拆分到多列
+        }
+
+        // 方式三，瀑布流, grid网格顺序，但兼容性有问题
+        /*display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        grid-gap: 1rem; // 间隙
+        grid-template-rows: masonry; // 兼容有问题，只有火狐支持，还tm的要开选项
+        .ab-items-item {
+          width: 100%;
+          display: block;
+        }*/
+
+        // 方式四，瀑布流, flex布局，一定程度的排序 (非绝对)，但需要给一个合适的高度
+        /*display: flex;          // Flexbox 布局
+        flex-wrap: wrap; // 元素换行显示
+        // gap: 1rem;           // 间隙
+        flex-direction: column; // 按列填充
+        .ab-items-item {
+          position: relative;
+          width: calc(100% / 4);
+          padding: 5px;
+          box-sizing: border-box;
+          &:nth-child(4n+1){ order: 1; }
+          &:nth-child(4n+2){ order: 2; }
+          &:nth-child(4n+3){ order: 3; }
+          &:nth-child(4n+0){ order: 4; }
+        }*/
+      }
+
+      // 布局2，横向瀑布流
+      &.ab-lay-hfall {
+        // 布局无关
+        .ab-items-item .ab-items-title {
+          color: currentColor;
+          border-bottom: none;
+        }
+
+        // flex方案 (但是文字会把卡片撑到100%，仅图片并且最好是做成background的形式，那就不错)
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: row;
+        &::after { // 如果最后一行不够填满整行，则使用这个
+          content: "";
+          flex-grow: 99999;
+        }
+        >.ab-items-item {
+          flex-grow: 1;
+          margin: 5px;
+          padding: 0 10px;
+          position: relative;
+          overflow: hidden;
+          // 限制图片高度
+          img {
+            max-width: 100%;
+            min-width: 100%;
+            height: 200px;
+            margin: 0; // 这种布局下，默认认为最多只有一张图片，且该图片在title的位置
+            object-fit: cover; // 被裁减
+            vertical-align: bottom;
+          }
+          // 限制文字宽度 (否则文字稍长会导致一个卡片占一行)
+          p {
+            max-width: 300px;
+            margin: 0; // 这种布局下，默认认为最多只有一行文字
+          }
+          &>.ab-items-content {
+            height: 100%;
+            min-width: 100%;
+          }
+        }
+      }
+
+      // 布局3，网格整齐排列 (内容特别整齐时可用) (此处代码有点乱)
+      &.ab-lay-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        // grid-auto-flow: column;
+        gap: 0px !important;
+        margin: 0 auto;
+        &::after {
+          content: "";
+          flex-grow: 99999;
+        }
+        >.ab-items-item {
+          position: relative;
+          margin: 5px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          text-align: center; /* 确保文字居中 */
+
+          img {
+            max-width: 200px;
+            max-height: 200px;
+            width: 100%; /* 确保图片宽度为100%，适应网格布局 */
+            height: auto;
+            margin: 0;
+          }
+          &>.ab-items-content {
+            width: 100%;
+            padding: 0;
+          }
+        }
+      }
+
+      // 布局4，横向滚动 (非循环)
+      &.ab-deco-scroll-x {
+        margin: 0 auto;
+        display: flex;
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        .ab-items-item {
+          flex: 0 0 auto;
+          width: 170px;
+        }
+      }
+    }
+
+    > .ab-items-item { overflow-x: auto; }
+
+    // 补充结合样式
+    // 默认 & { column-count: 4 !important; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) !important; }
+    &.ab-col1 { column-count: 1 !important; grid-template-columns: repeat(1, 1fr) !important; }
+    &.ab-col2 { column-count: 2 !important; grid-template-columns: repeat(2, 1fr) !important; }
+    &.ab-col3 { column-count: 3 !important; grid-template-columns: repeat(3, 1fr) !important; }
+    &.ab-col4 { column-count: 4 !important; grid-template-columns: repeat(4, 1fr) !important; }
+    &.ab-col5 { column-count: 5 !important; grid-template-columns: repeat(5, 1fr) !important; }
+    &.ab-col6 { column-count: 6 !important; grid-template-columns: repeat(6, 1fr) !important; }
+    &.ab-col7 { column-count: 7 !important; grid-template-columns: repeat(7, 1fr) !important; }
+    &.ab-col8 { column-count: 8 !important; grid-template-columns: repeat(8, 1fr) !important; }
+  }
+
+  // 节点图、括弧图、ab思维导图
+  .ab-nodes {
+    white-space: normal;
+    overflow-wrap: break-word;
+    code {white-space: pre;}
+    // display: flex;
+    // flex-direction: column;
+    // align-items: flex-start;
+    // gap: 1em; // 根的上下间距
+
+    // 圆弧节点，最左侧必是
+    .ab-nodes-content {
+      display: inline-block;
+      background-color: rgba(100,100,100,0.25);
+      padding: 2px 10px;
+      margin-left: 5px;
+    }
+    // 圆弧节点组，最右测必是
+    .ab-nodes-children {
+      display: flex;
+      flex-direction: column;
+      // align-items
+      gap: 16px; // 上下间距，旧1.2em/20px
+
+      // border-left: 2px solid currentColor; // black;
+      padding-left: 0.8em;
+      position: relative; // 作为定位容器
+      // 圆弧样式 - 中间箭头
+      .ab-nodes-bracket {
+        content: "";
+        box-sizing: border-box;
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        top: calc(50% - 4px);
+        left: calc(-8px + 2px); // 重合一个px避免出现黑线
+        clip-path: polygon(100% 0, 100% 100%, 13.40% 50%); // 裁剪成等边三角形
+        background-color: currentColor;
+      }
+      // 圆弧样式 - 两头弯曲
+      .ab-nodes-bracket2 {
+        content: "";
+        box-sizing: border-box;
+        position: absolute;
+        width: 10px;
+        height: calc(100% - 8px);  // JS: 缩短第一个和最后一个节点的一半
+        top: 4px;                  // JS: 第一个节点的一半
+        left: 0;
+        border-radius: 10px 0 0 10px;
+        border-left: 2px solid currentColor;
+        border-top: 2px solid currentColor;
+        border-bottom: 2px solid currentColor;
+      }
+
+      // 节点内容
+      .ab-nodes-node {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 1.2em;   // 左右间隙
+      }
+    }
+    // 最左侧节点处理，不显示
+    &>.ab-nodes-node>.ab-nodes-bracket { display: none; }
+    &>.ab-nodes-node>.ab-nodes-bracket2 { display: none; }
+    // 最右侧节点处理
+    .ab-nodes-node[has_children="false"] {
+      &>.ab-nodes-children {
+        display: none;
+      }
+    }
+  }
+
+  // min版的node图
+  .ab-nodes.min {
+    .ab-nodes-content {
+      padding: 0;
+      background: none;
+      border-bottom: solid 1px currentColor;
+    }
+
+    .ab-nodes-children {
+      gap: 2px;
+
+      .ab-nodes-bracket2 {
+        border-width: 1px;
+      }
+
+      .ab-nodes-bracket {
+        display: none;
+        width: 6px;
+        height: 6px;
+        top: calc(50% - 4px);
+        left: calc(-8px + 2px)
+      }
+    }
+
+    // 间隔换padding，方便 “接线”
+    .ab-nodes-content {
+      padding-right: 1.2em;
+    }
+    .ab-nodes-children {
+      .ab-nodes-node {
+        gap: 0;
+      }
+    }
+  }
+  // 最右侧节点处理
+  .ab-nodes-node[has_children="false"] {
+    &>.ab-nodes-content {
+      padding-right: 4px;
+    }
+  }
+  // 颜色
+  .ab-nodes.min>.ab-nodes-children {
+    &>.ab-nodes-node:nth-child(8n+1) { --node-color: var(--color-red); }
+    &>.ab-nodes-node:nth-child(8n+2) { --node-color: var(--color-orange); }
+    &>.ab-nodes-node:nth-child(8n+3) { --node-color: var(--color-yellow); }
+    &>.ab-nodes-node:nth-child(8n+4) { --node-color: var(--color-green); }
+    &>.ab-nodes-node:nth-child(8n+5) { --node-color: var(--color-cyan); }
+    &>.ab-nodes-node:nth-child(8n+6) { --node-color: var(--color-blue); }
+    &>.ab-nodes-node:nth-child(8n+7) { --node-color: var(--color-purple); }
+    &>.ab-nodes-node:nth-child(8n+0) { --node-color: var(--color-pink); }
+
+    &>.ab-nodes-node .ab-nodes-content,
+    &>.ab-nodes-node .ab-nodes-bracket,
+    &>.ab-nodes-node .ab-nodes-bracket2 {
+      border-color: var(--node-color);
+    }
+    &>.ab-nodes-node .ab-nodes-bracket {
+      background-color: var(--node-color);
+    }
+  }
+
+  // scroll版的node图
+  .ab-nodes.scroll {
+    // 使整个块的宽度能够溢出，而不是文字被挤压换行
+    overflow-x: auto;
+    // 使单个项宽度不多于300px
+    .ab-nodes-content {
+      white-space: nowrap;
+      max-width: 300px;
+      overflow-x: auto;
+    }
+  }
+
+  // scroll版的table
+  table.scroll {
+    // 使整个块的宽度能够溢出，而不是文字被挤压换行
+    overflow-x: auto;
+    // 使单个项宽度不多于300px
+    td {
+      white-space: nowrap;
+      max-width: 300px;
+      overflow-x: auto;
+    }
+  }
+}
+
+// 设置面板中表格的滚动条翻转
+div.md-table-fig1{
+  overflow-x:scroll;
+  transform:scaleY(-1);
+  table.ab-setting.md-table-fig2{
+    overflow-x:scroll;
+    text-overflow: clip !important;
+    transform:scaleY(-1);
+    // white-space: nowrap;
+    white-space: pre-wrap;
+  }
+}
+
+// 自定义样式
+.ab-custom-text-red {color: red !important;}
+.ab-custom-text-orange {color: orange !important;}
+.ab-custom-text-yellow {color: yellow !important;}
+.ab-custom-text-green {color: green !important;}
+.ab-custom-text-cyan {color: cyan !important;}
+.ab-custom-text-blue {color: blue !important;}
+.ab-custom-text-purple {color: purple !important;}
+.ab-custom-text-white {color: white !important;}
+.ab-custom-text-black {color: black !important;}
+.ab-custom-bg-red {background-color: red !important;}
+.ab-custom-bg-orange {background-color: orange !important;}
+.ab-custom-bg-yellow {background-color: yellow !important;}
+.ab-custom-bg-green {background-color: green !important;}
+.ab-custom-bg-cyan {background-color: cyan !important;}
+.ab-custom-bg-blue {background-color: blue !important;}
+.ab-custom-bg-purple {background-color: purple !important;}
+.ab-custom-bg-white {background-color: white !important;}
+.ab-custom-bg-black {background-color: black !important;}
+.ab-custom-dire-top * {vertical-align: top !important;}
+.ab-custom-dire-down * {vertical-align: bottom !important;}
+.ab-custom-dire-left * {text-align: left !important;}
+.ab-custom-dire-right * {text-align: right !important;}
+.ab-custom-dire-center * {vertical-align: middle !important; text-align: center !important;}
+.ab-custom-dire-hcenter * {text-align: center !important;}
+.ab-custom-dire-vcenter * {vertical-align: middle !important;}
+.ab-custom-dire-justify * {text-align: justify !important;}
+.ab-custom-font-large {font-size: large !important;}
+.ab-custom-font-largex {font-size: x-large !important;}
+.ab-custom-font-largexx {font-size: xx-large !important;}
+.ab-custom-font-small {font-size: small !important;}
+.ab-custom-font-smallx {font-size: x-small !important;}
+.ab-custom-font-smallxx {font-size: xx-small !important;}
+.ab-custom-font-bold {font-weight: bold !important;}
+// 首列重点表格
+table.ab-table-fc {
+  th[col_index="0"], td[col_index="0"] {
+    white-space: pre;
+    font-weight: 500;
+    vertical-align: top;
+    width: 0px;
+  }
+}
+.ab-table-fc>table {
+  th:first-child, td:first-child {
+    white-space: pre;
+    font-weight: 500;
+    vertical-align: top;
+    width: 0px;
+  }
+}
+.ab-custom-td-nowrap td, .ab-custom-td1-nowrap tr>td:first-child {white-space: pre !important;}
+.ab-custom-td-wrap td, .ab-custom-td1-wrap tr>td:first-child {white-space: normal !important; overflow-wrap: break-word;}
+.ab-custom-td-0 td, .ab-custom-td1-0 tr>td:first-child {width: 0px !important;}
+.ab-custom-td-100 td, .ab-custom-td1-100 tr>td:first-child {width: 100px !important;}
+.ab-custom-td-150 td, .ab-custom-td1-150 tr>td:first-child {width: 150px !important;}
+.ab-custom-td-200 td, .ab-custom-td1-200 tr>td:first-child {width: 200px !important;}
+.ab-custom-td-250 td, .ab-custom-td1-250 tr>td:first-child {width: 250px !important;}
+.ab-custom-td-300 td, .ab-custom-td1-300 tr>td:first-child {width: 300px !important;}
+.ab-custom-td-half td, .ab-custom-td1-half tr>td:first-child {width: 50% !important;}
+
+// js特殊class
+// .el-table { // 在阅读模式下异常
+//   overflow-x: visible;
+// }
+// .ab-super-width {
+//   width: var(--ab-width-outer);
+//   margin-left: calc((100% - var(--ab-width-outer)) / 2);
+// }
+.ab-super-width-p { // 指定ab-super-width后的延伸物，不可直接指定
+  width: var(--ab-width-outer);
+  margin-left: calc((100% - var(--ab-width-outer)) / 2);
+}
+
+/**************** CM Style *******************/
+
+.ab-line-brace {
+  text-decoration: underline 1px red;
+}
+.ab-line-list {
+  text-decoration: underline 1px cyan;
+}
+.ab-line-yellow {
+  text-decoration: solid underline 1px rgba(0, 255, 0, 0.2);
+  // border-left: solid 1px rgba(0, 255, 0, 0.4); // 这种方式对于 `:::` 是对的，但对其他来说，段落不一定是行开头。可能导致一行有多个左边框
+}
+.ab-line-blue {
+  text-decoration: underline 1px blue;
+}
+
+.bright-color {
+  color: var(--ab-bright-color); // border-color:#9999ff
+  border-color: var(--ab-bright-color);
+}
+
+/**************** 兼容性补充 ******************/
+
+// markmap 需要这个样式，否则公式渲染会存在问题 (原内容没隐藏，且宽度过大)
+.markmap-foreign [aria-hidden="true"] { // .katex-html
+  display: none;
+}
+
+// BT主题在阅读模式下会干扰表格高度 (不确定有无其他误影响)
+:is(.markdown-preview-view,.markdown-rendered).is-readable-line-width:not(.matrix) .ab-note :is(.markdown-rendered) {
+  width: auto !important;
+}
+
+/**************** PRO *************************/
+
+table td, table th {
+  div>p:first-child, div>ul:first-child { margin-top: 2px; }
+  div>p:last-child, div>ul:last-child { margin-bottom: 2px; }
+}
+// .markdown-rendered>p { // 后来发现是 div > h1+\n+p+\n+p 这种情况引起的
+//   line-height: 1; // 有时无margin也会有个很奇怪间隔，很奇怪
+// }
+.markdown-rendered tbody > tr {
+  > td .markdown-rendered, > th .markdown-rendered {
+    white-space: normal;
+  }
+}