fix:ckeditor
This commit is contained in:
Rama Priyanto
parent
d79cbc026a
commit
cb7c9b7256
|
|
@ -0,0 +1,215 @@
|
|||
/* CKEditor Custom Styling */
|
||||
|
||||
/* Main editor container */
|
||||
.ck.ck-editor {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
/* Toolbar styling */
|
||||
.ck.ck-toolbar {
|
||||
background: #f8fafc;
|
||||
border: 1px solid #d1d5db;
|
||||
border-bottom: none;
|
||||
border-radius: 6px 6px 0 0;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.ck.ck-toolbar .ck-toolbar__items {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* Main editable area */
|
||||
.ck.ck-editor__editable {
|
||||
background: #ffffff;
|
||||
border: 1px solid #d1d5db;
|
||||
border-top: none;
|
||||
border-radius: 0 0 6px 6px;
|
||||
padding: 1.5em 2em !important;
|
||||
min-height: 400px;
|
||||
line-height: 1.6;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Focus state */
|
||||
.ck.ck-editor__editable.ck-focused {
|
||||
border-color: #1a9aef;
|
||||
box-shadow: 0 0 0 2px rgba(26, 154, 239, 0.2);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Content styling */
|
||||
.ck.ck-editor__editable .ck-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Typography improvements */
|
||||
.ck.ck-editor__editable p {
|
||||
margin: 0.5em 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.ck.ck-editor__editable h1,
|
||||
.ck.ck-editor__editable h2,
|
||||
.ck.ck-editor__editable h3,
|
||||
.ck.ck-editor__editable h4,
|
||||
.ck.ck-editor__editable h5,
|
||||
.ck.ck-editor__editable h6 {
|
||||
margin: 1em 0 0.5em 0;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.ck.ck-editor__editable h1 { font-size: 1.75em; }
|
||||
.ck.ck-editor__editable h2 { font-size: 1.5em; }
|
||||
.ck.ck-editor__editable h3 { font-size: 1.25em; }
|
||||
.ck.ck-editor__editable h4 { font-size: 1.1em; }
|
||||
.ck.ck-editor__editable h5 { font-size: 1em; }
|
||||
.ck.ck-editor__editable h6 { font-size: 0.9em; }
|
||||
|
||||
/* Lists */
|
||||
.ck.ck-editor__editable ul,
|
||||
.ck.ck-editor__editable ol {
|
||||
margin: 0.5em 0;
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
.ck.ck-editor__editable li {
|
||||
margin: 0.25em 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Blockquotes */
|
||||
.ck.ck-editor__editable blockquote {
|
||||
margin: 1em 0;
|
||||
padding: 0.75em 1em;
|
||||
border-left: 4px solid #1a9aef;
|
||||
background-color: #f8fafc;
|
||||
border-radius: 0 4px 4px 0;
|
||||
font-style: italic;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
.ck.ck-editor__editable table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.ck.ck-editor__editable table td,
|
||||
.ck.ck-editor__editable table th {
|
||||
border: 1px solid #d1d5db;
|
||||
padding: 0.5em 0.75em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ck.ck-editor__editable table th {
|
||||
background-color: #f8fafc;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
.ck.ck-editor__editable a {
|
||||
color: #1a9aef;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.ck.ck-editor__editable a:hover {
|
||||
color: #0d7cd6;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
.ck.ck-editor__editable pre {
|
||||
background-color: #f8fafc;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 4px;
|
||||
padding: 1em;
|
||||
margin: 1em 0;
|
||||
overflow-x: auto;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.ck.ck-editor__editable code {
|
||||
background-color: #f1f5f9;
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 3px;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.ck.ck-editor__editable img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 4px;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
/* Horizontal rule */
|
||||
.ck.ck-editor__editable hr {
|
||||
border: none;
|
||||
border-top: 1px solid #d1d5db;
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
||||
/* Placeholder text */
|
||||
.ck.ck-editor__editable.ck-blurred:empty::before {
|
||||
content: attr(data-placeholder);
|
||||
color: #9ca3af;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.ck.ck-editor__editable {
|
||||
padding: 1em 1.5em !important;
|
||||
font-size: 16px; /* Better for mobile */
|
||||
}
|
||||
|
||||
.ck.ck-toolbar {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.ck.ck-toolbar .ck-toolbar__items {
|
||||
gap: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode support */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.ck.ck-editor__editable {
|
||||
background: #1f2937;
|
||||
color: #f9fafb;
|
||||
border-color: #4b5563;
|
||||
}
|
||||
|
||||
.ck.ck-editor__editable h1,
|
||||
.ck.ck-editor__editable h2,
|
||||
.ck.ck-editor__editable h3,
|
||||
.ck.ck-editor__editable h4,
|
||||
.ck.ck-editor__editable h5,
|
||||
.ck.ck-editor__editable h6 {
|
||||
color: #f9fafb;
|
||||
}
|
||||
|
||||
.ck.ck-editor__editable blockquote {
|
||||
background-color: #374151;
|
||||
border-left-color: #1a9aef;
|
||||
color: #d1d5db;
|
||||
}
|
||||
|
||||
.ck.ck-editor__editable pre {
|
||||
background-color: #374151;
|
||||
border-color: #4b5563;
|
||||
}
|
||||
|
||||
.ck.ck-editor__editable code {
|
||||
background-color: #4b5563;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue