110 lines
2.0 KiB
CSS
110 lines
2.0 KiB
CSS
|
/* Стили для React Quill редактора */
|
||
|
|
.ql-container {
|
||
|
|
font-size: 14px;
|
||
|
|
font-family: inherit;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ql-editor {
|
||
|
|
min-height: 300px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ql-editor.ql-blank::before {
|
||
|
|
font-style: normal;
|
||
|
|
color: #94a3b8;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ql-toolbar {
|
||
|
|
border-top-left-radius: 0.5rem;
|
||
|
|
border-top-right-radius: 0.5rem;
|
||
|
|
border-bottom: 1px solid #e2e8f0;
|
||
|
|
background: #f8fafc;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ql-container {
|
||
|
|
border-bottom-left-radius: 0.5rem;
|
||
|
|
border-bottom-right-radius: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ql-snow .ql-stroke {
|
||
|
|
stroke: #475569;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ql-snow .ql-fill {
|
||
|
|
fill: #475569;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ql-snow .ql-picker-label {
|
||
|
|
color: #475569;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Стили для отображения контента статей */
|
||
|
|
.prose .ql-editor {
|
||
|
|
padding: 0;
|
||
|
|
word-break: break-word;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Фото в статье — ограниченный размер, по клику открывается в полном размере */
|
||
|
|
.prose .ql-editor .kb-article-img-link {
|
||
|
|
display: block;
|
||
|
|
text-decoration: none;
|
||
|
|
margin: 1rem 0;
|
||
|
|
}
|
||
|
|
.prose .ql-editor img,
|
||
|
|
.prose .ql-editor .kb-article-img {
|
||
|
|
max-width: 100%;
|
||
|
|
max-height: 360px;
|
||
|
|
width: auto;
|
||
|
|
height: auto;
|
||
|
|
object-fit: contain;
|
||
|
|
border-radius: 0.5rem;
|
||
|
|
cursor: pointer;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.prose .ql-editor img:hover,
|
||
|
|
.prose .ql-editor .kb-article-img:hover {
|
||
|
|
opacity: 0.9;
|
||
|
|
}
|
||
|
|
|
||
|
|
.prose .ql-editor h1,
|
||
|
|
.prose .ql-editor h2,
|
||
|
|
.prose .ql-editor h3,
|
||
|
|
.prose .ql-editor h4,
|
||
|
|
.prose .ql-editor h5,
|
||
|
|
.prose .ql-editor h6 {
|
||
|
|
font-weight: bold;
|
||
|
|
margin-top: 1.5rem;
|
||
|
|
margin-bottom: 0.75rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.prose .ql-editor h1 {
|
||
|
|
font-size: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.prose .ql-editor h2 {
|
||
|
|
font-size: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.prose .ql-editor h3 {
|
||
|
|
font-size: 1.25rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.prose .ql-editor p {
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.prose .ql-editor ul,
|
||
|
|
.prose .ql-editor ol {
|
||
|
|
margin-left: 1.5rem;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.prose .ql-editor a {
|
||
|
|
color: #3b82f6;
|
||
|
|
text-decoration: underline;
|
||
|
|
word-break: break-word;
|
||
|
|
}
|
||
|
|
|
||
|
|
.prose .ql-editor a:hover {
|
||
|
|
color: #2563eb;
|
||
|
|
}
|