@thebase/ui/dist/runtime/milkdown/theme/common/diff.css

CDN-installable Owl and Bootstrap 5 UI component library.

.milkdown {
  --crepe-color-diff-added: #22c55e;
  --crepe-color-diff-removed: #ef4444;

  --crepe-color-diff-added-bg: color-mix(
    in srgb,
    var(--crepe-color-diff-added),
    transparent 88%
  );
  --crepe-color-diff-added-text: color-mix(
    in srgb,
    var(--crepe-color-diff-added),
    var(--crepe-color-on-background) 40%
  );
  --crepe-color-diff-removed-bg: color-mix(
    in srgb,
    var(--crepe-color-diff-removed),
    transparent 88%
  );
  --crepe-color-diff-removed-text: color-mix(
    in srgb,
    var(--crepe-color-diff-removed),
    var(--crepe-color-on-background) 40%
  );
}

  /* Inline deletion: strikethrough */
  .milkdown .milkdown-diff-removed {
    text-decoration: line-through;
    background-color: var(--crepe-color-diff-removed-bg);
    color: var(--crepe-color-diff-removed-text);
  }
  /* Block deletion: node-level overlay for custom node views */
  .milkdown .milkdown-diff-removed-block {
    position: relative;
    opacity: 0.45;
    outline: 2px dashed var(--crepe-color-diff-removed) !important;
    outline-offset: 2px;
    border-radius: 4px;
    background-color: var(--crepe-color-diff-removed-bg);
  }
  /* Inline insertion */
  .milkdown .milkdown-diff-added {
    background-color: var(--crepe-color-diff-added-bg);
    color: var(--crepe-color-diff-added-text);
    padding: 0 2px;
    border-radius: 2px;
  }
  /* Block insertion */
  .milkdown .milkdown-diff-added-block {
    display: block;
    background-color: var(--crepe-color-diff-added-bg);
    border-left: 3px solid var(--crepe-color-diff-added);
    border-radius: 4px;
    padding: 8px 12px;
    margin: 8px 0;
  }
  .milkdown .milkdown-diff-added-block h1,
    .milkdown .milkdown-diff-added-block h2,
    .milkdown .milkdown-diff-added-block h3,
    .milkdown .milkdown-diff-added-block h4,
    .milkdown .milkdown-diff-added-block h5,
    .milkdown .milkdown-diff-added-block h6 {
      color: var(--crepe-color-diff-added-text);
      margin: 4px 0;
    }
  .milkdown .milkdown-diff-added-block p {
      color: var(--crepe-color-diff-added-text);
      margin: 4px 0;
    }
  .milkdown .milkdown-diff-added-block ul,
    .milkdown .milkdown-diff-added-block ol {
      color: var(--crepe-color-diff-added-text);
      margin: 4px 0;
      padding-left: 20px;
    }
  .milkdown .milkdown-diff-added-block li {
      margin: 2px 0;
    }
  .milkdown .milkdown-diff-added-block table {
      border-collapse: collapse;
      width: 100%;
      margin: 4px 0;
    }
  .milkdown .milkdown-diff-added-block th,
    .milkdown .milkdown-diff-added-block td {
      border: 1px solid
        color-mix(in srgb, var(--crepe-color-diff-added), transparent 50%);
      padding: 6px 12px;
      text-align: left;
    }
  .milkdown .milkdown-diff-added-block th {
      font-weight: 600;
    }
  .milkdown .milkdown-diff-added-block img {
      max-width: 100%;
      border-radius: 4px;
    }
  .milkdown .milkdown-diff-added-block pre,
    .milkdown .milkdown-diff-added-block code {
      background: color-mix(
        in srgb,
        var(--crepe-color-diff-added),
        transparent 94%
      );
      border-radius: 4px;
      padding: 8px 12px;
      font-family: var(--crepe-font-code);
      font-size: calc(var(--crepe-base-font-size, 16px) * 0.8125);
      overflow-x: auto;
      display: block;
      white-space: pre;
    }
  /* Inline controls */
  .milkdown .milkdown-diff-controls {
    display: inline-flex;
    gap: 3px;
    margin: 0 4px;
    vertical-align: middle;
    white-space: nowrap;
  }
  .milkdown .milkdown-diff-controls button {
      font-family: var(--crepe-font-default);
      font-size: calc(var(--crepe-base-font-size, 16px) * 0.6875);
      line-height: 1;
      padding: 2px 6px;
      border-radius: 3px;
      cursor: pointer;
      border: 1px solid;
      font-weight: 500;
    }
  /* Block controls */
  .milkdown .milkdown-diff-controls-block {
    display: flex;
    gap: 4px;
    margin: 4px 0;
  }
  .milkdown .milkdown-diff-accept {
    background-color: color-mix(
      in srgb,
      var(--crepe-color-diff-added),
      var(--crepe-color-background) 85%
    );
    color: var(--crepe-color-diff-added-text);
    border-color: color-mix(
      in srgb,
      var(--crepe-color-diff-added),
      transparent 50%
    );
  }
  .milkdown .milkdown-diff-accept:hover {
      background-color: color-mix(
        in srgb,
        var(--crepe-color-diff-added),
        var(--crepe-color-background) 75%
      );
    }
  .milkdown .milkdown-diff-reject {
    background-color: color-mix(
      in srgb,
      var(--crepe-color-diff-removed),
      var(--crepe-color-background) 85%
    );
    color: var(--crepe-color-diff-removed-text);
    border-color: color-mix(
      in srgb,
      var(--crepe-color-diff-removed),
      transparent 50%
    );
  }
  .milkdown .milkdown-diff-reject:hover {
      background-color: color-mix(
        in srgb,
        var(--crepe-color-diff-removed),
        var(--crepe-color-background) 75%
      );
    }