CSS Reference
All CSS classes used by ZynText follow a flat BEM-like convention with the zy- prefix.
Editor Container
| Class | Description |
|---|
.zy-editor | Root container. All CSS variables are defined here. |
.zy-editor--style-bordered | Bordered style skin. |
.zy-editor--style-minimal | Minimal style skin. |
.zy-editor--style-dark | Dark style skin. |
.zy-editor--code-light | Light code block theme. |
.zy-editor--fullscreen | Fullscreen mode (position: fixed, z-index: 9999). |
.zy-editor--img-selected | An image is currently selected (allows overflow for toolbar). |
.zy-editor--ai-loading | AI request in progress (dimmed, spinner). |
Content Area
| Class | Description |
|---|
.zy-content | The contenteditable editing area. |
.zy-content--empty | Added when the editor has no content (shows placeholder via CSS ::before). |
Toolbar
| Class | Description |
|---|
.zy-toolbar | Toolbar container. |
.zy-toolbar-btn | Individual toolbar button. |
.zy-toolbar-btn--active | Active state (e.g., Bold is active when text is bold). |
.zy-toolbar-sep | Separator between button groups. |
.zy-toolbar-dropdown | Dropdown container. |
.zy-toolbar-dropdown-toggle | Dropdown toggle button. |
.zy-toolbar-dropdown-menu | Dropdown menu (hidden by default). |
.zy-toolbar-dropdown-menu--open | Dropdown is open. |
.zy-toolbar-dropdown-item | Individual dropdown item. |
.zy-toolbar-caret | Dropdown caret icon. |
Image Interaction
| Class | Description |
|---|
.zy-img-selected | Applied to the <img> when selected. |
.zy-img-overlay | Selection overlay positioned over the image. |
.zy-img-handle | Resize handle (8 total). |
.zy-img-handle--nw, --n, --ne, etc. | Handle position modifiers. |
.zy-img-dimension | Width x Height tooltip during resize. |
.zy-img-context-toolbar | Context toolbar above/below image. |
.zy-img-context-sep | Separator in context toolbar. |
.zy-img-btn-wrap | Button + tooltip wrapper in context toolbar. |
.zy-img-tooltip | Tooltip text below context buttons. |
.zy-img-float-left | <figure> class for float-left alignment. |
.zy-img-float-right | <figure> class for float-right alignment. |
.zy-img-center | <figure> class for center alignment. |
.zy-img-margin-popover | Margin editor popover. |
.zy-img-margin-grid | 4-field grid in margin popover. |
.zy-img-margin-field | Individual margin field (label + input). |
.zy-img-delete-modal | Delete confirmation modal. |
.zy-img-delete-msg | Message text in delete modal. |
.zy-img-delete-actions | Button container in delete modal. |
Popovers
| Class | Description |
|---|
.zy-popover | Generic popover container. |
.zy-popover-header | Popover header. |
.zy-popover-close | Close button (×) in header. |
.zy-popover-body | Popover body content. |
.zy-popover-field | Form field container. |
.zy-popover-input | Input element in popover. |
.zy-popover-actions | Action buttons container. |
.zy-popover-btn | Popover button. |
.zy-popover-btn--primary | Primary (accent) button. |
.zy-popover-btn--danger | Danger (red) button. |
.zy-link-popover | Link-specific popover. |
Table Picker
| Class | Description |
|---|
.zy-table-picker | Table size picker container. |
.zy-table-picker-grid | Grid of selectable cells. |
.zy-table-picker-cell | Individual grid cell. |
.zy-table-picker-cell--active | Highlighted (selected) cell. |
.zy-table-picker-size | Size label (e.g., "3 x 4"). |
Upload
| Class | Description |
|---|
.zy-upload-overlay | Drag-drop overlay ("Drop image here"). |
.zy-upload-progress | Progress bar container. |
.zy-upload-progress-bar | Progress bar fill element. |
Code Block
| Class | Description |
|---|
.zy-code-copy | Copy button on code blocks. |
.zy-code-copy--copied | After successful copy (green check). |
Source View
| Class | Description |
|---|
.zy-source-area | HTML source textarea. |
Body Class
| Class | Description |
|---|
body.zy-editor-fullscreen-active | Added to <body> when fullscreen is active. Prevents body scrolling. |