pianello-api/resources/css/components/_ckeditor.css

290 lines
7.2 KiB
CSS
Raw Normal View History

.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%);
}
}
}
}