/* Container Layout */
.editor-container {
width: 92%;
margin: 1.5rem auto;
padding: 1.25rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
border: 1px solid #e5e7eb;
border-radius: 0.75rem;
background-color: #ffffff;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
box-sizing: border-box;
}
/* Skeleton Loading */
.editor-skeleton {
height: 16rem;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
background-color: #f9fafb;
display: flex;
align-items: center;
justify-content: center;
color: #9ca3af;
font-size: 0.875rem;
}
/* Header Controls */
.editor-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid #f3f4f6;
}
.draft-badge {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #9ca3af;
}
.publish-btn {
padding: 0.5rem 1.25rem;
font-size: 0.875rem;
font-weight: 500;
color: #ffffff;
background-color: #000000;
border: none;
border-radius: 9999px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.publish-btn:hover {
background-color: #1f2937;
}
.publish-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Title Input */
.title-input {
width: 100%;
font-size: 2rem;
font-weight: 700;
border: none;
border-bottom: 1px solid #e5e7eb;
outline: none;
padding-bottom: 0.75rem;
margin-bottom: 1.5rem;
background: transparent;
color: #111827;
box-sizing: border-box;
}
.title-input:focus {
border-bottom-color: #9ca3af;
}
.title-input::placeholder {
color: #d1d5db;
}
/* Quill Editor Wrapper */
.quill-minimal-wrapper {
border: 1px solid #d1d5db;
border-radius: 0.5rem;
overflow: hidden;
}
.quill-minimal-wrapper .ql-toolbar.ql-snow {
border: none;
border-bottom: 1px solid #e5e7eb;
background-color: #f9fafb;
padding: 8px 12px;
}
.quill-minimal-wrapper .ql-container.ql-snow {
border: none;
font-size: 1rem;
line-height: 1.75;
color: #1f2937;
}
.quill-minimal-wrapper .ql-editor {
padding: 1rem;
min-height: 350px;
}
.quill-minimal-wrapper .ql-editor.ql-blank::before {
left: 1rem;
color: #9ca3af;
font-style: normal;
}
/* Styling Gambar & Alignment Dalam Editor */
.quill-minimal-wrapper .ql-editor img {
max-width: 100%;
height: auto;
border-radius: 8px;
display: inline-block;
}
.quill-minimal-wrapper .ql-editor img.alignleft {
float: left;
margin: 0 1.5rem 1rem 0;
max-width: 50%;
}
.quill-minimal-wrapper .ql-editor img.alignright {
float: right;
margin: 0 0 1rem 1.5rem;
max-width: 50%;
}
.quill-minimal-wrapper .ql-editor img.aligncenter {
display: block;
margin: 1.5rem auto;
}
.quill-minimal-wrapper .ql-editor p::after {
content: "";
display: table;
clear: both;
}
@media (min-width: 640px) {
.editor-container {
width: 75vw;
max-width: none;
margin: 2rem auto;
padding: 2rem;
}
}