Header

• input.doctitle
• div.logo

Toolbar (div.toolbar)

Toolbar controls are grouped by meaning in elements to keep related elements together. All toolbar is contained in div.toolset element for layout reasons.

Groups

div.integrationPanel:
Contains custom buttons created via JS API.

div.fileOptions:
Contains buttons for opening and save. Can be disabled by GET parameter.

div.fontStyleOptions:

Contains basic text formatting buttons (bold, italic, color, etc.).

div.fontFaceOptions:
Contains comboboxes for choosing font family and font face.

div.paragraphOptions:
Contains buttons for changing left indent of the paragraph, alignment buttons and line spacing combobox, paragraph properties, tab stops and paragraph color.

div.breakingSymbolOptions:
Contains buttons for inserting line and page breaks.

div.undoRedoOptions:
Contains undo and redo buttons.

div.sectionOptions:
Contains buttons for page background colors and page properties.

div.miscOptions:
Contains buttons for showing formatting characters, toggling spellchecking and hyphenation and changing interface language and metric system used.

Controls

• All buttons have class .button. Buttons that appear pressed have .pressed class as well.
• Comboboxes are made of two parts each: div.controls, which is what is shown at the toolbar, and ul.items, which is hidden list that appears when arrow is clicked.
• .controls contains input within div.input-wrapper and arrow that shows the rest of the elements as div.items-toggle.
• .items contains li elements with available options.

 

For example, you could make all input control in toolbar not editable by applying “readonly” CSS parameter in your custom CSS file:

.toolbar-input-fontName { readonly: true; }
.toolbar-input-fontSize { readonly: true; }
.toolbar-input-lineSpacing { readonly: true; }

 

Editor area (div.canvasHolder)

There is not much to control in the editor area, because its content is simply <canvas> element display. The background color can be changed by using area class. The position of the canvases is controlled by the code and NOT intended to be changed.

 

Status panel (div.status-panel)

• Paragraph language: select.paragraph-language
• Zoom out button: div.button.zoom-out
• Zoom level text: span.zoom-level-indicator
• Zoom in button: div.button.zoom-in
• Cursor position info: span.pos-info

 

NOTE: CIB webRec uses cascading to distinguish between toolbar .buttons and ones in the status panel (i.e. .toolbar .button and .status-panel .button)

 

Scrollbar (div.scroll-drag-area)

Same styling is applied for both vertical and horizontal scrollbars. When the scrollbar is inactive, class .scroll-fading is added to scrollbar area. Scrollbar area transitions are background .3s linear, opacity .3s linear;. This is used for effects when disappearing and on mouse hover.

• Draggable notch: div.scroll-drag

 

Dialogs (div.dialog)

Dialogs are put into div.dialog-container which covers whole area to provide modality. Dialog contents consist of three parts:

• div.dialog-header with title in h3 and cross in a.button-close
• div.dialog-body with dialog contents
• div.dialog-footer containing button.button-ok and button.button-cancel

Body of a dialog typically consists of a fieldset with legend in it and a set of labels inside div.form-style, containing input and select controls. All text is kept in span elements.