/**
 * 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;
}

/**
 * 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-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: 14px;
          height: 14px;
          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;
  }
}
