206 lines
4.6 KiB
CSS
206 lines
4.6 KiB
CSS
.editor-view-mode h1 {
|
|
font-size: 2em;
|
|
font-weight: bold;
|
|
}
|
|
.editor-view-mode h2 {
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
}
|
|
.editor-view-mode h3 {
|
|
font-size: 1.17em;
|
|
}
|
|
.editor-view-mode h4 {
|
|
font-size: 1em;
|
|
}
|
|
.editor-view-mode h5 {
|
|
font-size: 0.83em;
|
|
}
|
|
.editor-view-mode h6 {
|
|
font-size: 0.67em;
|
|
}
|
|
.editor-view-mode p {
|
|
font-size: 1em;
|
|
}
|
|
.editor-view-mode ul {
|
|
list-style-type: disc;
|
|
padding-left: 20px;
|
|
}
|
|
.editor-view-mode ol {
|
|
list-style-type: decimal;
|
|
padding-left: 20px;
|
|
}
|
|
.editor-view-mode li {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
.editor-view-mode blockquote {
|
|
border-left: 4px solid #ccc;
|
|
padding-left: 20px;
|
|
margin: 1em 0;
|
|
}
|
|
.editor-view-mode pre {
|
|
background-color: #f5f5f5;
|
|
padding: 10px;
|
|
overflow-x: auto;
|
|
}
|
|
.editor-view-mode code {
|
|
background-color: #f5f5f5;
|
|
padding: 2px 4px;
|
|
border-radius: 3px;
|
|
}
|
|
.editor-view-mode img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
/* Material-UI style customizations for Quill toolbar */
|
|
.quill-root {
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
background-color: var(--joy-palette-neutral-softBg, #f0f4f8);
|
|
transition: box-shadow 0.15s ease, background-color 0.15s ease;
|
|
}
|
|
|
|
.quill-root:focus-within {
|
|
box-shadow: 0 0 0 1px var(--joy-palette-primary-outlinedBorder, rgba(11, 107, 203, 0.15));
|
|
}
|
|
|
|
.quill-root:hover:not(:focus-within) {
|
|
background-color: var(--joy-palette-neutral-softHoverBg, #dde7ee);
|
|
}
|
|
|
|
.quill-root .ql-toolbar.ql-snow {
|
|
border: none;
|
|
border-bottom: 1px solid var(--joy-palette-neutral-softActiveBg, rgba(99, 107, 116, 0.16));
|
|
border-radius: 0;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.quill-root .ql-container.ql-snow {
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
|
|
/* Style toolbar buttons with Material-UI look */
|
|
.quill-root .ql-toolbar .ql-formats {
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.quill-root .ql-toolbar button {
|
|
border-radius: 6px;
|
|
padding: 6px;
|
|
margin: 0 2px;
|
|
transition: all 0.2s ease;
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
|
|
.quill-root .ql-toolbar button:hover {
|
|
background: var(--joy-palette-neutral-softHoverBg, rgba(99, 107, 116, 0.08));
|
|
}
|
|
|
|
.quill-root .ql-toolbar button.ql-active {
|
|
background: var(--joy-palette-primary-softActiveBg, rgba(25, 118, 210, 0.12));
|
|
color: var(--joy-palette-primary-solidBg, #1976d2);
|
|
}
|
|
|
|
/* Style dropdown selectors */
|
|
.quill-root .ql-toolbar .ql-picker {
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.quill-root .ql-toolbar .ql-picker-label {
|
|
border-radius: 6px;
|
|
transition: all 0.2s ease;
|
|
color: var(--joy-palette-neutral-solidBg, #333);
|
|
}
|
|
|
|
.quill-root .ql-toolbar .ql-picker-label:hover {
|
|
background: var(--joy-palette-neutral-softHoverBg, rgba(99, 107, 116, 0.08));
|
|
}
|
|
|
|
.quill-root .ql-toolbar .ql-picker.ql-expanded .ql-picker-label {
|
|
background: var(--joy-palette-neutral-softActiveBg, rgba(99, 107, 116, 0.12));
|
|
}
|
|
|
|
/* Style the dropdown options */
|
|
.quill-root .ql-toolbar .ql-picker-options {
|
|
border-radius: 8px;
|
|
background: var(--joy-palette-background-popup, #fff);
|
|
box-shadow: var(
|
|
--joy-shadow-md,
|
|
0px 4px 8px -2px rgba(16, 24, 40, 0.1),
|
|
0px 2px 4px -2px rgba(16, 24, 40, 0.06)
|
|
);
|
|
/* padding: 4px;
|
|
}
|
|
|
|
.quill-root .ql-toolbar .ql-picker-item {
|
|
/* border-radius: 4px;
|
|
padding: 8px 12px;
|
|
margin: 2px 0;
|
|
transition: all 0.2s ease; */
|
|
}
|
|
|
|
.quill-root .ql-toolbar .ql-picker-item:hover {
|
|
background: var(--joy-palette-neutral-softHoverBg, rgba(99, 107, 116, 0.08));
|
|
}
|
|
|
|
.quill-root .ql-toolbar .ql-picker-item.ql-selected {
|
|
background: var(--joy-palette-primary-softActiveBg, rgba(25, 118, 210, 0.12));
|
|
color: var(--joy-palette-primary-solidBg, #1976d2);
|
|
}
|
|
|
|
/* Add separator styling */
|
|
.quill-root .ql-toolbar .ql-formats:not(:last-child)::after {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 1px;
|
|
height: 20px;
|
|
background: var(--joy-palette-divider, #e7ebf0);
|
|
margin-left: 8px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* Remove default Quill borders and spacing */
|
|
.quill-root .ql-editor {
|
|
padding: 16px;
|
|
min-height: 120px;
|
|
font-family: var(
|
|
--joy-fontFamily-body,
|
|
Inter,
|
|
system-ui,
|
|
Avenir,
|
|
Helvetica,
|
|
Arial,
|
|
sans-serif
|
|
);
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Prevent iOS Safari from auto-zooming on focus (triggered when font-size < 16px) */
|
|
@supports (-webkit-touch-callout: none) {
|
|
.quill-root .ql-editor {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
/* Custom focus styles */
|
|
.quill-root:focus-within .ql-toolbar.ql-snow {
|
|
border-color: var(--joy-palette-primary-outlinedBorder, #1976d2);
|
|
}
|
|
|
|
.quill-root:focus-within .ql-container.ql-snow {
|
|
border-color: var(--joy-palette-primary-outlinedBorder, #1976d2);
|
|
}
|
|
|
|
/* Variant-specific styling */
|
|
.quill-variant-bubble .ql-toolbar {
|
|
background: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
padding: 8px;
|
|
}
|