mofeiyu-editorjs-summary/src/index.css

Editor.js tool for adding colorful summarys

.cdx-summary {
  position: relative;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
}

.cdx-summary__message {
  outline: none;
}

.cdx-summary [contentEditable='true'][data-placeholder]::before {
  position: absolute;
  content: attr(data-placeholder);
  color: #707684;
  font-weight: normal;
  opacity: 0;
}

.cdx-summary [contentEditable='true'][data-placeholder]:empty::before {
  opacity: 1;
}

.cdx-summary [contentEditable='true'][data-placeholder]:empty:focus::before {
  opacity: 0;
}

.cdx-summary-primary {
  background-color: #ebf8ff;
  border: 1px solid #4299e1;
  color: #2b6cb0;
}

.cdx-summary-secondary {
  background-color: #f7fafc;
  border: 1px solid #cbd5e0;
  color: #616161;
}

.cdx-summary-info {
  background-color: #e6fdff;
  border: 1px solid #4cd4ce;
  color: #00727c;
}

.cdx-summary-success {
  background-color: #f0fff4;
  border: 1px solid #68d391;
  color: #2f855a;
}

.cdx-summary-warning {
  background-color: #fffaf0;
  border: 1px solid #ed8936;
  color: #c05621;
}

.cdx-summary-danger {
  background-color: #fff5f5;
  border: 1px solid #fc8181;
  color: #c53030;
}

.cdx-summary-light {
  background-color: #fff;
  border: 1px solid #edf2f7;
  color: #1a202c;
}

.cdx-summary-dark {
  background-color: #2d3748;
  border: 1px solid #1a202c;
  color: #d3d3d3;
}

.cdx-summary.cdx-settings-button {
  margin: 3px;
  width: 28px;
  height: 28px;
  opacity: 0.5;
}

.cdx-summary.cdx-settings-button:hover {
  opacity: 1;
}

.cdx-summary.cdx-settings-button--active,
.cdx-summary.ce-settings__button--focused {
  font-weight: bold;
  opacity: 0.9;
}