prosekit/dist/extensions/list/style.css

ProseKit: A toolkit for building rich text editors.

/* ../extensions/src/list/style.css */
:root {
  --prosekit-list-bullet-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='2.5' fill='currentColor'/%3E%3C/svg%3E");
  --prosekit-list-toggle-open-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpolygon points='8,10 12,14 16,10' fill='currentColor'/%3E%3C/svg%3E");
  --prosekit-list-toggle-closed-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpolygon points='10,8 14,12 10,16' fill='currentColor'/%3E%3C/svg%3E");
}
.prosemirror-flat-list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.prosemirror-flat-list > .list-marker {
  position: absolute;
  width: 1.5em;
  width: 1lh;
  height: 1.5em;
  height: 1lh;
  inset-inline-start: 0;
  text-align: center;
}
.prosemirror-flat-list > .list-content {
  margin-inline-start: 1.5em;
  margin-inline-start: 1lh;
}
.prosemirror-flat-list[data-list-kind=bullet] > .list-marker,
.prosemirror-flat-list[data-list-kind=toggle] > .list-marker {
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.prosemirror-flat-list[data-list-kind=bullet] > .list-marker {
  -webkit-mask-image: var(--prosekit-list-bullet-icon);
  mask-image: var(--prosekit-list-bullet-icon);
}
.prosemirror-flat-list[data-list-kind=toggle] > .list-marker {
  -webkit-mask-image: var(--prosekit-list-toggle-open-icon);
  mask-image: var(--prosekit-list-toggle-open-icon);
}
.prosemirror-flat-list[data-list-kind=toggle][data-list-collapsable][data-list-collapsed] > .list-marker {
  -webkit-mask-image: var(--prosekit-list-toggle-closed-icon);
  mask-image: var(--prosekit-list-toggle-closed-icon);
}
.prosemirror-flat-list[data-list-kind=ordered] {
  counter-increment: prosemirror-flat-list-counter;
}
.prosemirror-flat-list[data-list-kind=ordered] > * {
  contain: style;
}
.prosemirror-flat-list[data-list-kind=ordered]::before {
  position: absolute;
  inset-inline-end: calc(100% - 1.5em);
  inset-inline-end: calc(100% - 1lh);
  content: counter(prosemirror-flat-list-counter, decimal) ". ";
  font-variant-numeric: tabular-nums;
}
.prosemirror-flat-list[data-list-kind=ordered]:first-child,
:not(.prosemirror-flat-list[data-list-kind=ordered]) + .prosemirror-flat-list[data-list-kind=ordered] {
  counter-reset: prosemirror-flat-list-counter;
}
@supports (counter-set: prosemirror-flat-list-counter 1) {
  :is(.prosemirror-flat-list[data-list-kind=ordered]:first-child, :not(.prosemirror-flat-list[data-list-kind=ordered]) + .prosemirror-flat-list[data-list-kind=ordered])[data-list-order] {
    counter-set: prosemirror-flat-list-counter var(--prosemirror-flat-list-order);
  }
}
@supports not (counter-set: prosemirror-flat-list-counter 1) {
  :is(.prosemirror-flat-list[data-list-kind=ordered]:first-child, :not(.prosemirror-flat-list[data-list-kind=ordered]) + .prosemirror-flat-list[data-list-kind=ordered])[data-list-order] {
    counter-increment: prosemirror-flat-list-counter var(--prosemirror-flat-list-order);
  }
}
.prosemirror-flat-list[data-list-kind=task] > .list-marker,
.prosemirror-flat-list[data-list-kind=task] > .list-marker * {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.prosemirror-flat-list[data-list-kind=toggle][data-list-collapsable] > .list-marker {
  cursor: pointer;
}
.prosemirror-flat-list[data-list-kind=toggle]:not([data-list-collapsable]) > .list-marker {
  opacity: 40%;
  pointer-events: none;
}
.prosemirror-flat-list[data-list-kind=toggle][data-list-collapsable][data-list-collapsed] > .list-content > *:nth-child(n+2) {
  display: none;
}

/* src/extensions/list/style.css */