289 lines
7.2 KiB
CSS
289 lines
7.2 KiB
CSS
.ck-editor,
|
|
.document-editor,
|
|
.ck-editor__editable {
|
|
box-shadow: theme("boxShadow.sm");
|
|
}
|
|
|
|
.document-editor {
|
|
display: flex;
|
|
max-height: 700px;
|
|
flex-flow: column nowrap;
|
|
border-radius: var(--ck-border-radius);
|
|
border: 1px solid theme("colors.slate.200");
|
|
.document-editor__toolbar {
|
|
z-index: 1;
|
|
border-bottom: 1px solid theme("colors.slate.200");
|
|
}
|
|
.document-editor__toolbar .ck-toolbar {
|
|
border: 0;
|
|
border-radius: 0;
|
|
background-color: theme("colors.slate.100");
|
|
.ck-icon {
|
|
width: 16px;
|
|
}
|
|
}
|
|
.document-editor__editable-container {
|
|
overflow-y: scroll;
|
|
padding: calc(2 * var(--ck-spacing-large));
|
|
background-color: theme("colors.slate.100");
|
|
}
|
|
.document-editor__editable-container .ck-editor__editable {
|
|
width: 15.8cm;
|
|
margin: 0 auto;
|
|
min-height: 21cm;
|
|
background: white;
|
|
padding: 1cm 2cm 2cm;
|
|
border-radius: var(--ck-border-radius);
|
|
border: 1px solid theme("colors.slate.200");
|
|
box-shadow: theme("boxShadow.sm");
|
|
}
|
|
.ck-heading-dropdown .ck-list .ck-button__label {
|
|
line-height: calc(
|
|
1.7 * var(--ck-line-height-base) * var(--ck-font-size-base)
|
|
);
|
|
min-width: 6em;
|
|
}
|
|
.ck-heading-dropdown
|
|
.ck-list
|
|
.ck-button:not(.ck-heading_paragraph)
|
|
.ck-button__label {
|
|
transform: scale(0.8);
|
|
transform-origin: left;
|
|
}
|
|
.ck-content h2,
|
|
.ck-heading-dropdown .ck-heading_heading1 .ck-button__label {
|
|
font-size: 2.18em;
|
|
font-weight: normal;
|
|
}
|
|
.ck-content h2 {
|
|
line-height: 1.37em;
|
|
padding-top: 0.342em;
|
|
margin-bottom: 0.142em;
|
|
}
|
|
.ck-content h3,
|
|
.ck-heading-dropdown .ck-heading_heading2 .ck-button__label {
|
|
font-size: 1.75em;
|
|
font-weight: normal;
|
|
color: hsl(203, 100%, 50%);
|
|
}
|
|
.ck-heading-dropdown .ck-heading_heading2.ck-on .ck-button__label {
|
|
color: var(--ck-color-list-button-on-text);
|
|
}
|
|
.ck-content h3 {
|
|
line-height: 1.86em;
|
|
padding-top: 0.171em;
|
|
margin-bottom: 0.357em;
|
|
}
|
|
.ck-content h4,
|
|
.ck-heading-dropdown .ck-heading_heading3 .ck-button__label {
|
|
font-size: 1.31em;
|
|
font-weight: bold;
|
|
}
|
|
.ck-content h4 {
|
|
line-height: 1.24em;
|
|
padding-top: 0.286em;
|
|
margin-bottom: 0.952em;
|
|
}
|
|
.ck-content p {
|
|
font-size: 1em;
|
|
line-height: 1.63em;
|
|
padding-top: 0.5em;
|
|
margin-bottom: 1.13em;
|
|
}
|
|
.ck-content blockquote {
|
|
font-family: Georgia, serif;
|
|
margin-left: calc(2 * var(--ck-spacing-large));
|
|
margin-right: calc(2 * var(--ck-spacing-large));
|
|
}
|
|
}
|
|
|
|
.ck.ck-content {
|
|
min-height: 250px;
|
|
&.ck-editor__editable_inline {
|
|
border: 1px solid theme("colors.slate.200");
|
|
}
|
|
}
|
|
|
|
.ck .ck {
|
|
.ck-content {
|
|
min-height: 250px;
|
|
&.ck-editor__editable_inline {
|
|
border: 1px solid theme("colors.slate.200");
|
|
}
|
|
blockquote,
|
|
dl,
|
|
dd,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
hr,
|
|
figure,
|
|
p,
|
|
pre {
|
|
margin: revert;
|
|
}
|
|
ol,
|
|
ul {
|
|
list-style: revert;
|
|
margin: revert;
|
|
padding: revert;
|
|
}
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-size: revert;
|
|
font-weight: revert;
|
|
}
|
|
img,
|
|
svg,
|
|
video,
|
|
canvas,
|
|
audio,
|
|
iframe,
|
|
embed,
|
|
object {
|
|
display: revert;
|
|
vertical-align: revert;
|
|
}
|
|
}
|
|
&.ck-reset_all,
|
|
&.ck-reset_all * {
|
|
color: theme("colors.slate.800");
|
|
}
|
|
&.ck-toolbar,
|
|
&.ck-balloon-panel {
|
|
background-color: theme("colors.slate.100");
|
|
border-color: theme("colors.slate.200");
|
|
.ck-icon {
|
|
width: 16px;
|
|
}
|
|
}
|
|
&.ck-editor__main > .ck-editor__editable:not(.ck-focused) {
|
|
border-color: theme("colors.slate.200");
|
|
}
|
|
&.ck-button:not(.ck-disabled):hover,
|
|
&a.ck-button:not(.ck-disabled):hover {
|
|
background-color: theme("colors.slate.200");
|
|
}
|
|
}
|
|
|
|
.dark {
|
|
.document-editor {
|
|
border-color: theme("colors.darkmode.900" / 30%);
|
|
.document-editor__toolbar {
|
|
border-color: theme("colors.darkmode.900" / 20%);
|
|
}
|
|
.document-editor__toolbar .ck-toolbar {
|
|
background-color: theme("colors.darkmode.900" / 20%);
|
|
.ck-toolbar__separator {
|
|
background-color: theme("colors.darkmode.800");
|
|
}
|
|
.ck-tooltip .ck-tooltip__text {
|
|
color: theme("colors.slate.200");
|
|
background-color: theme("colors.darkmode.800");
|
|
&:after {
|
|
border-bottom: theme("colors.darkmode.800");
|
|
}
|
|
}
|
|
.ck.ck-icon :not([fill]) {
|
|
fill: theme("colors.slate.300");
|
|
}
|
|
.ck.ck-dropdown__panel {
|
|
border-color: theme("colors.darkmode.800");
|
|
}
|
|
.ck.ck-button.ck-on,
|
|
a.ck.ck-button.ck-on {
|
|
background-color: theme("colors.darkmode.800");
|
|
}
|
|
}
|
|
.document-editor__editable-container {
|
|
background-color: theme("colors.darkmode.600");
|
|
}
|
|
.document-editor__editable-container .ck-editor__editable {
|
|
border-color: theme("colors.darkmode.900" / 20%);
|
|
background-color: theme("colors.darkmode.800");
|
|
}
|
|
}
|
|
|
|
.ck.ck-content.ck-editor__editable_inline {
|
|
border-color: theme("colors.darkmode.900" / 20%);
|
|
background-color: theme("colors.darkmode.800");
|
|
}
|
|
|
|
.ck {
|
|
&.ck-list {
|
|
background-color: theme("colors.darkmode.800");
|
|
}
|
|
&.ck-dropdown__panel {
|
|
background-color: theme("colors.darkmode.800");
|
|
border-color: theme("colors.darkmode.800");
|
|
}
|
|
&.ck.ck-input-text {
|
|
background-color: theme("colors.darkmode.400");
|
|
border-color: theme("colors.darkmode.400");
|
|
&:focus {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
.ck-insert-table-dropdown-grid-box {
|
|
border-color: theme("colors.darkmode.400");
|
|
}
|
|
&.ck-reset_all,
|
|
&.ck-reset_all * {
|
|
color: theme("colors.slate.300") !important;
|
|
}
|
|
.ck {
|
|
.ck-content.ck-editor__editable_inline {
|
|
border-color: theme("colors.darkmode.900" / 20%);
|
|
background-color: theme("colors.darkmode.800");
|
|
}
|
|
&.ck-toolbar,
|
|
&.ck-balloon-panel {
|
|
background-color: theme("colors.darkmode.700");
|
|
border-color: theme("colors.darkmode.900" / 20%);
|
|
&:before {
|
|
border-bottom-color: theme("colors.darkmode.900" / 20%) !important;
|
|
}
|
|
&:after {
|
|
border-bottom-color: theme("colors.darkmode.900" / 20%) !important;
|
|
}
|
|
.ck-toolbar__separator {
|
|
background-color: theme("colors.darkmode.800");
|
|
}
|
|
.ck-tooltip .ck-tooltip__text {
|
|
color: theme("colors.slate.200");
|
|
background-color: theme("colors.darkmode.800");
|
|
&:after {
|
|
border-bottom-color: theme("colors.darkmode.900" / 20%);
|
|
}
|
|
}
|
|
.ck.ck-icon :not([fill]) {
|
|
fill: theme("colors.slate.300");
|
|
}
|
|
.ck.ck-dropdown__panel {
|
|
border-color: theme("colors.darkmode.800");
|
|
}
|
|
.ck.ck-button.ck-on,
|
|
a.ck.ck-button.ck-on {
|
|
background-color: theme("colors.darkmode.800");
|
|
}
|
|
}
|
|
&.ck-editor__main > .ck-editor__editable {
|
|
background-color: theme("colors.darkmode.800");
|
|
&:not(.ck-focused) {
|
|
border-color: theme("colors.darkmode.900" / 20%);
|
|
}
|
|
}
|
|
&.ck-button:not(.ck-disabled):hover,
|
|
&a.ck-button:not(.ck-disabled):hover {
|
|
background-color: theme("colors.darkmode.900" / 20%);
|
|
}
|
|
}
|
|
}
|
|
}
|