Dedicated CSS styling for CKEditor 5 plugins including image handling, table editing, link management, content formatting, and specialized editing features.
Complete CSS styling for image insertion, upload, editing, and content display functionality.
/**
* Image plugin CSS imports
*/
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-image/imageinsert.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-image/imageupload.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-image/imageuploadicon.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-image/imageuploadloader.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-image/imageuploadprogress.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-image/textalternativeform.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-image/imagecustomresizeform.css';
/**
* Image content styling - applied to images in editor content
*/
.ck-content .image {
display: table;
clear: both;
text-align: center;
margin: 1em auto;
}
.ck-content .image img {
display: block;
margin: 0 auto;
max-width: 100%;
min-width: 50px;
}
/**
* Image upload progress styling
*/
.ck-content .image.ck-appear {
animation: fadeIn 700ms;
}
.ck-content .image-upload-complete {
box-shadow: none;
}
/**
* Image upload UI styling
*/
.ck.ck-image-upload-progress {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: hsla(0, 0%, 0%, 0.6);
display: flex;
align-items: center;
justify-content: center;
}
.ck.ck-image-upload-progress__bar {
background: var(--ck-color-upload-bar-background);
height: 2px;
width: 100%;
border-radius: 1px;
overflow: hidden;
}CSS styling for image-related forms and configuration dialogs.
/**
* Text alternative form styling
*/
.ck.ck-text-alternative-form {
padding: var(--ck-spacing-standard);
}
.ck.ck-text-alternative-form .ck-labeled-field-view {
display: inline-block;
}
.ck.ck-text-alternative-form .ck-label {
display: none;
}
/**
* Image resize form styling
*/
.ck.ck-image-custom-resize-form {
padding: var(--ck-spacing-standard);
width: 280px;
}
.ck.ck-image-custom-resize-form__row {
display: flex;
align-items: center;
justify-content: space-between;
}
.ck.ck-image-custom-resize-form__input {
width: 60px;
}Comprehensive CSS styling for table editing interface and content display.
/**
* Table plugin CSS imports
*/
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-table/colorinput.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-table/formrow.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-table/inserttable.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-table/tablecellproperties.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-table/tableediting.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-table/tableform.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-table/tableproperties.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-table/tableselection.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-table/tablelayout.css';
/**
* Table content styling
*/
.ck-content .table {
margin: 1em auto;
display: table;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
height: 100%;
border: 1px double hsl(0, 0%, 70%);
}
.ck-content .table td,
.ck-content .table th {
min-width: 2em;
padding: 0.4em;
border: 1px solid hsl(0, 0%, 75%);
}
.ck-content .table th {
font-weight: bold;
background: hsla(0, 0%, 0%, 5%);
}
/**
* Table selection styling
*/
.ck-content .table .ck-table-column-selected {
background: hsla(208, 90%, 60%, 0.3);
}
.ck-content .table .ck-table-row-selected {
background: hsla(208, 90%, 60%, 0.3);
}
/**
* Table insert UI
*/
.ck.ck-insert-table-dropdown__grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: calc(10 * 1.5em);
}
.ck.ck-insert-table-dropdown-grid-box {
width: 1.5em;
height: 1.5em;
border: 1px solid var(--ck-color-base-border);
margin: 1px;
border-radius: var(--ck-border-radius);
}
.ck.ck-insert-table-dropdown-grid-box:hover,
.ck.ck-insert-table-dropdown-grid-box.ck-on {
border-color: var(--ck-color-focus-border);
background: var(--ck-color-focus-outer-shadow);
}CSS styling for table and cell properties configuration forms.
/**
* Table properties form styling
*/
.ck.ck-table-properties-form {
padding: var(--ck-spacing-standard);
width: 400px;
}
.ck.ck-table-properties-form__row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--ck-spacing-standard);
}
/**
* Table cell properties form styling
*/
.ck.ck-table-cell-properties-form {
padding: var(--ck-spacing-standard);
width: 320px;
}
.ck.ck-table-cell-properties-form__row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
/**
* Color input for table styling
*/
.ck.ck-color-input {
position: relative;
display: flex;
align-items: center;
}
.ck.ck-color-input__button {
border: 1px solid var(--ck-color-base-border);
border-radius: var(--ck-border-radius);
width: 2.3em;
height: 2.3em;
margin-right: var(--ck-spacing-small);
}CSS styling for link creation, editing, and content display.
/**
* Link plugin CSS imports
*/
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-link/link.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-link/linktoolbar.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-link/linkimage.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-link/linkproperties.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-link/linkprovideritems.css';
/**
* Link content styling
*/
.ck-content a {
color: var(--ck-color-link-default);
text-decoration: underline;
}
.ck-content .ck-link_selected {
background: var(--ck-color-link-selected-background);
}
.ck-content .ck-fake-link-selection {
background: var(--ck-color-link-fake-selection);
}
/**
* Link toolbar styling
*/
.ck.ck-link-actions {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
padding: var(--ck-spacing-small);
}
.ck.ck-link-actions .ck-link-actions__preview {
display: inline-block;
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--ck-color-link-default);
text-decoration: underline;
margin-right: var(--ck-spacing-standard);
}
/**
* Link form styling
*/
.ck.ck-link-form {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
padding: var(--ck-spacing-small);
}
.ck.ck-link-form .ck-labeled-field-view {
display: inline-block;
}
.ck.ck-link-form .ck-label {
display: none;
}CSS styling for code block content and editing interface.
/**
* Code block plugin CSS import
*/
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-code-block/codeblock.css';
/**
* Code block content styling
*/
.ck-content pre {
padding: 1em;
color: hsl(0, 0%, 20.9%);
background: hsla(0, 0%, 78%, 0.3);
border: 1px solid hsl(0, 0%, 77%);
border-radius: var(--ck-border-radius);
text-align: left;
direction: ltr;
tab-size: 4;
white-space: pre-wrap;
font-family: 'Courier New', Courier, monospace;
font-size: 0.9em;
overflow-x: auto;
}
.ck-content pre code {
background: unset;
padding: 0;
border-radius: 0;
}
/**
* Code block language selector
*/
.ck.ck-code-block-dropdown {
width: 8.5em;
}
.ck.ck-code-block-dropdown .ck-dropdown__button {
overflow: hidden;
}CSS styling for list properties and configuration.
/**
* List plugin CSS imports
*/
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-list/listproperties.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-list/liststyles.css';
/**
* List properties form styling
*/
.ck.ck-list-properties-form {
padding: var(--ck-spacing-standard);
}
.ck.ck-list-properties-form__row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
margin-bottom: var(--ck-spacing-standard);
}
/**
* List styles grid
*/
.ck.ck-list-styles-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: var(--ck-spacing-standard);
}
.ck.ck-list-styles-list .ck-button {
border: 1px solid transparent;
padding: var(--ck-spacing-small);
display: flex;
flex-direction: column;
align-items: center;
}CSS styling for search and replace interface.
/**
* Find and replace plugin CSS import
*/
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-find-and-replace/findandreplaceform.css';
/**
* Find and replace form styling
*/
.ck.ck-find-and-replace-form {
max-width: 400px;
padding: var(--ck-spacing-standard);
}
.ck.ck-find-and-replace-form__inputs {
display: flex;
flex-direction: column;
align-items: stretch;
flex-grow: 1;
margin-bottom: var(--ck-spacing-standard);
}
.ck.ck-find-and-replace-form__input {
width: 100%;
margin-bottom: var(--ck-spacing-small);
}
/**
* Search result highlighting
*/
.ck-content .marker-yellow {
background-color: var(--ck-color-highlight-background);
}
.ck-content .marker-green {
background-color: hsla(120, 93%, 68%, 0.4);
}
.ck-content .marker-pink {
background-color: hsla(350, 75%, 80%, 0.4);
}
.ck-content .marker-blue {
background-color: hsla(201, 97%, 72%, 0.4);
}CSS styling for special character picker and grid.
/**
* Special characters plugin CSS imports
*/
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-special-characters/charactergrid.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-special-characters/characterinfo.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-special-characters/specialcharacters.css';
/**
* Special characters grid
*/
.ck.ck-character-grid {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: var(--ck-spacing-standard);
padding: var(--ck-spacing-standard);
}
.ck.ck-character-grid .ck-button {
min-width: 2.5em;
min-height: 2.5em;
font-size: 1.2em;
border: 1px solid transparent;
border-radius: var(--ck-border-radius);
}
.ck.ck-character-grid .ck-button:hover {
border-color: var(--ck-color-base-border);
background: var(--ck-color-button-default-hover-background);
}
/**
* Character info panel
*/
.ck.ck-character-info {
padding: var(--ck-spacing-standard);
border-top: 1px solid var(--ck-color-base-border);
font-size: 0.9em;
text-align: center;
color: var(--ck-color-base-text);
}CSS styling for media embedding interface.
/**
* Media embed plugin CSS import
*/
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-media-embed/mediaembedediting.css';
/**
* Media embed placeholder
*/
.ck-content .media {
clear: both;
margin: 1em 0;
display: block;
min-width: 15em;
}
.ck-media__wrapper {
position: relative;
display: block;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.ck-media__wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/**
* Media embed editing placeholder
*/
.ck-editor__editable .ck-media__placeholder {
background: hsl(0, 0%, 97%);
border: 1px dashed hsl(0, 0%, 77%);
border-radius: var(--ck-border-radius);
padding: 3em;
text-align: center;
}Base widget styling and type-around functionality for plugin content.
/**
* Widget plugin CSS imports
*/
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-widget/widgetresize.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-widget/widgettypearound.css';
/**
* Base widget styling
*/
.ck-widget {
position: relative;
outline: none;
}
.ck-widget.ck-widget_selected {
outline: var(--ck-widget-outline-thickness) solid var(--ck-color-focus-border);
outline-offset: -var(--ck-widget-outline-thickness);
}
/**
* Widget resize handles
*/
.ck-widget__resizer {
display: none;
position: absolute;
pointer-events: none;
left: 0;
top: 0;
}
.ck-widget_selected > .ck-widget__resizer {
display: block;
}
.ck-widget__resizer__handle {
position: absolute;
pointer-events: all;
width: var(--ck-resizer-size);
height: var(--ck-resizer-size);
background: var(--ck-color-focus-border);
border: var(--ck-resizer-border-width) solid var(--ck-color-base-background);
border-radius: 50%;
}
/**
* Widget type-around styling
*/
.ck-widget__type-around {
position: absolute;
z-index: var(--ck-z-default);
pointer-events: none;
}
.ck-widget__type-around__button {
display: block;
position: absolute;
pointer-events: all;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--ck-color-base-action);
border: 2px solid var(--ck-color-base-background);
opacity: 0;
transition: opacity .2s ease-in-out;
}Various other plugin-specific styling.
/**
* Additional plugin CSS imports
*/
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-bookmark/bookmark.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-bookmark/bookmarkform.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-bookmark/bookmarktoolbar.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-clipboard/clipboard.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-engine/placeholder.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-heading/heading.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-horizontal-line/horizontalline.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-html-embed/htmlembed.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-mention/mention.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-restricted-editing/restrictedediting.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-style/style.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-style/stylegrid.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-style/stylegroup.css';
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-style/stylepanel.css';Styling for different CKEditor 5 editor types.
/**
* Editor-specific CSS import
*/
@import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-editor-classic/classiceditor.css';
/**
* Classic editor styling
*/
.ck.ck-editor__main > .ck-editor__editable {
background: var(--ck-color-base-background);
border-radius: 0;
}
.ck.ck-editor__main > .ck-editor__editable:not(.ck-focused) {
border-color: var(--ck-color-base-border);
}Custom Image Styling:
/* Custom image appearance in content */
.ck-content .image.my-custom-image {
border: 3px solid #007bff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.ck-content .image.my-custom-image img {
border-radius: 5px;
}Custom Table Styling:
/* Custom table appearance */
.ck-content .table.striped tr:nth-child(even) {
background: #f8f9fa;
}
.ck-content .table.bordered {
border: 2px solid #dee2e6;
}
.ck-content .table.bordered td,
.ck-content .table.bordered th {
border: 1px solid #dee2e6;
}Custom Link Appearance:
/* Custom link styling */
.ck-content a.external-link {
color: #28a745;
font-weight: bold;
}
.ck-content a.external-link::after {
content: " ↗";
font-size: 0.8em;
opacity: 0.7;
}