rich-text-editor-lib/src/styles.css

A reusable and responsive rich text editor React component.

/* List styles for contenteditable */
[contenteditable] ul {
  list-style-type: disc !important;
  margin-left: 1.5em;
  padding-left: 1.5em;
}
[contenteditable] ol {
  list-style-type: decimal !important;
  margin-left: 1.5em;
  padding-left: 1.5em;
}

/* Link styles for contenteditable */
[contenteditable] a {
  color: #00f0ff !important;
  text-decoration: underline !important;
  cursor: pointer;
  word-break: break-all;
}
[contenteditable] a:hover {
  color: #00bfff !important;
  text-decoration: underline;
}

/* Autofill fix */
input:-webkit-autofill {
  transition: background-color 9999s ease-in-out 0s;
  -webkit-text-fill-color: white !important;
}

/* For rendering output (optional, if you use .rich-text-content) */
.rich-text-content ul {
  list-style-type: disc !important;
  margin-left: 1.5em;
  padding-left: 1em;
}
.rich-text-content ol {
  list-style-type: decimal !important;
  margin-left: 1.5em;
  padding-left: 1em;
}
.rich-text-content ul ul,
.rich-text-content ol ul {
  list-style-type: circle !important;
}
.rich-text-content li {
  margin-bottom: 0.25em;
}
.rich-text-content a {
  color: #00F0FF !important;
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.2s;
}
.rich-text-content a:hover {
  color: #00c0cc !important;
  text-decoration: underline;
}