nitropage/src/features/richtext/css/quill/overrides.css

A free and open source, extensible visual page builder based on SolidStart.

.ql-bubble .ql-editor {
  overflow: visible !important;
  padding: 0 !important;
  line-height: inherit !important;
}
.ql-bubble .ql-tooltip {
  z-index: 2010;
  line-height: 1;
  -webkit-text-fill-color: currentcolor !important;
  font-size: 13px !important;
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.ql-bubble .ql-toolbar {
  padding: 4px 0px;
}
.ql-bubble .ql-toolbar .ql-formats {
  margin: 2px 6px 2px 6px;
}
.ql-bubble .ql-tooltip:not(.ql-flip) .ql-tooltip-arrow {
  top: -5px;
}
.ql-container.ql-bubble:not(.ql-disabled) a::before {
  white-space: nowrap;
}

.ql-snow {
  background-color: white;
}
.ql-snow .ql-tooltip {
  z-index: 2;
}
.ql-snow.ql-toolbar {
  background-color: var(--np-gray-100) !important;
  border-color: var(--np-gray-300) !important;
  border-bottom-color: var(--np-gray-200) !important;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  box-shadow: none;
  padding: 0.125rem 0.5rem !important;
}
.ql-snow.ql-toolbar button,
.ql-snow .ql-color-picker {
  width: auto;
}
.ql-snow.ql-toolbar button,
div.ql-snow.ql-toolbar .ql-picker-label {
  width: auto;
  padding: 3px 2px;
}
.ql-snow.ql-toolbar svg {
  width: 1.125rem;
  height: 1.125rem;
}
.ql-snow.ql-container {
  background-color: white !important;
  border-color: var(--np-gray-300) !important;
  border-radius: 0.25rem;
  box-shadow: none;
}
.ql-snow.ql-toolbar + .ql-snow.ql-container {
  border-top-left-radius: 0rem;
  border-top-right-radius: 0rem;
}
.ql-snow .ql-editor {
  word-wrap: break-word;
  padding: 0.5rem 1rem;
}
.ql-container.ql-snow .ql-editor a {
  color: #2563eb !important;
}

.ql-selected {
  position: relative;
  z-index: 2000;
}

.ql-editable:hover {
  position: relative;
}
.ql-editable:hover::before {
  content: " ";
  z-index: 11;
  inset: calc(-5px / var(--zoom));
  pointer-events: none;
  position: absolute;
  border-radius: calc(2px / var(--zoom));
  box-shadow:
    0 0 0 calc(1px / var(--zoom)) var(--np-accent-600),
    0 0 0 calc(2px / var(--zoom)) var(--np-accent-300),
    0 0 0 calc(3px / var(--zoom)) var(--np-accent-600);
}

.ql-override {
  position: relative;
  user-select: none;
  cursor: cell;
}
.ql-override:hover {
  opacity: 0.5;
  filter: blur(1px);
}

.ql-preview {
  display: block;
}
.ql-selected .ql-container.ql-bubble {
  position: relative !important;
}
.ql-container.ql-snow .rte * {
  color: black !important;
}
.ql-selected .ql-container.ql-bubble .rte * {
  -webkit-text-fill-color: initial !important;
}
.ql-empty-type {
  display: flex;
  align-items: center;
  position: relative;
  font-style: italic !important;
  top: 0px;
  z-index: 0;
  color: #4447;
  cursor: text;
  text-shadow: 1px 1px 1px #fff2;
  mix-blend-mode: difference;
  word-break: keep-all;
}

.ql-container.ql-bubble {
  display: block;
  position: unset !important;
  font-size: inherit !important;
  font-family: inherit !important;
}
.ql-container.ql-bubble a::before {
  -webkit-text-fill-color: currentcolor !important;
}