remirror/styles/extension-list.css

One editing package to rule them all, one editing package to bind them.

/**
 * Styles extracted from: packages/remirror__theme/src/extension-list-theme.ts
 */
/* don't show the custom markers in a ordered list */
.remirror-editor ol > li > .remirror-list-item-marker-container {
  display: none;
}
/* don't show the origin markers when using custom markers (checkbox / collapsible) */
.remirror-editor ul > li.remirror-list-item-with-custom-mark {
  list-style: none;
}
.remirror-editor .remirror-ul-list-content > li.remirror-list-item-with-custom-mark {
  list-style: none;
}
/* override the browser's default styles */
.remirror-editor ul ul + ul {
  -webkit-margin-before: 1em;
  margin-block-start: 1em;
}

.remirror-list-item-marker-container {
  position: absolute;
  left: -32px;
  width: 24px;
  display: inline-block;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.remirror-list-item-checkbox {
  /* change the checkbox color from blue (default on Chrome) to purple. */
  -webkit-filter: hue-rotate(60deg);
  filter: hue-rotate(60deg);
}

.remirror-collapsible-list-item-closed li {
  display: none;
}

.remirror-collapsible-list-item-closed .remirror-collapsible-list-item-button {
  background-color: var(--rmr-hue-gray-6);
}

.remirror-collapsible-list-item-button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  transition: background-color 0.25s ease;
  background-color: var(--rmr-color-border);
}

.remirror-collapsible-list-item-button:hover {
  background-color: var(--rmr-color-primary);
}

.remirror-collapsible-list-item-button.disabled,
.remirror-collapsible-list-item-button.disabled:hover {
  background-color: var(--rmr-color-border);
  cursor: default;
}

.remirror-list-spine {
  position: absolute;
  top: 4px;
  bottom: 0px;
  left: -20px;
  width: 16px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  transition: border-left-color 0.25s ease;
  border-left-color: var(--rmr-color-border);
  border-left-style: solid;
  border-left-width: 1px;
}

.remirror-list-spine:hover {
  border-left-color: var(--rmr-color-primary);
}