CSS Styles
Everything you see in the Rule Editor and the Rule Repository (RR) is drawn by the stylesheets that come with them. The scripts set no colours at all, so you change how either one looks with CSS alone: use a theme as it is, add your own rules on top of it, or write a theme of your own.
This page covers both packages: which files to reference, the light and dark themes, how fonts and sizes work, and what you can safely change in a stand-alone editor and in RR.
The Stylesheets
Each package ships one common stylesheet and two themes.
| File |
Package |
Holds |
codeeffects.editor.common.css |
@codeeffects/editor |
The editor's layout, spacing, font sizes and weights |
codeeffects.editor.light.css |
@codeeffects/editor |
The editor's Light theme: colours, borders and shadows |
codeeffects.editor.dark.css |
@codeeffects/editor |
The editor's Dark theme: colours, borders and shadows, and slightly heavier rule elements |
codeeffects.repository.common.css |
@codeeffects/repository |
RR's layout, spacing, type scale and responsive rules; no colours |
codeeffects.repository.light.css |
@codeeffects/repository |
RR's Light theme: colours only |
codeeffects.repository.dark.css |
@codeeffects/repository |
RR's Dark theme: colours only |
All class names in these files start with ce. The editor's and RR's stylesheets use different class names, so neither one styles the other's elements.
Referencing the Stylesheets
Reference the common stylesheet and exactly one theme of each package you use. Put the common file first, then the theme, then your own stylesheet if you have one, so your rules win where they match the same elements.
A page that hosts a stand-alone Rule Editor needs the editor's files only:
<link rel="stylesheet" href="codeeffects.editor.common.css">
<link rel="stylesheet" href="codeeffects.editor.light.css">
<link rel="stylesheet" href="your-styles.css">
A page that shows RR needs both packages, because every rule RR shows is a Rule Editor. Use the same theme for both:
<link rel="stylesheet" href="codeeffects.editor.common.css">
<link rel="stylesheet" href="codeeffects.editor.light.css">
<link rel="stylesheet" href="codeeffects.repository.common.css">
<link rel="stylesheet" href="codeeffects.repository.light.css">
<link rel="stylesheet" href="your-styles.css">
Light and Dark Themes
The two themes of a package use the same class names and differ only in colour (the editor's Dark theme also draws rule elements slightly heavier, so they read well on a dark background). To switch, reference the other theme file. Because the scripts set no colours, you can switch on a page that is already running: change the href of the theme links, and the editor and RR redraw in the new colours without being initialized again.
// Switches every Code Effects theme on the page to "light" or "dark"
function setCodeEffectsTheme(theme)
{
var from = theme === "dark" ? ".light.css" : ".dark.css";
var links = document.querySelectorAll('link[rel="stylesheet"][href*="codeeffects."]');
for (var i = 0; i < links.length; i++)
{
var href = links[i].getAttribute("href");
if (href.indexOf(from) > -1) links[i].setAttribute("href", href.replace(from, "." + theme + ".css"));
}
}
On a page with RR, switch both packages together. An editor in the Dark theme inside RR's Light theme, or the reverse, is not a combination the themes were drawn for.
Since v7, the editor's themes use RR's palettes: the same surfaces, accents, menus, date picker and buttons. A stand-alone editor and an editor inside RR look the same.
Fonts and Sizes
Neither package names a font family. The editor and RR are drawn in whatever font your page sets on the element that hosts them, so they read as part of your application. To change their font, set it on that element or on your page.
The Rule Editor sizes its text in percentages of the element that hosts it. The rule's elements are drawn at 96% of it on narrow screens, 98% from 1001 pixels wide and 106% from 1601 pixels. Its menus, date and time pickers and other pop-up elements are added to the page's body rather than to the editor's element, so their text is a percentage of the body's font size.
RR takes its size from the element you mount it into. Every font size, button height and input height in RR is a multiple of that element's font size, so setting it scales all of RR at once, its dialogs included:
/* RR follows its host element: make it a little smaller than the rest of the page */
#rulesRepository { font-size: 14px; }
RR adapts its layout to the space it has: below 1400, 1100 and 760 pixels of width it moves tabs and filters into menus and hides less important grid columns, and below 1100 x 840 pixels it draws rules at 95%. These breakpoints are part of RR and are not settings. RR also turns its animations off for users whose system asks for reduced motion.
Pop-up Elements and Stacking
The Rule Editor adds its menus, date and time pickers and value prompt to the page's body, positioned next to the rule element they belong to. If your editor sits inside a dialog or any element with its own z-index, set the useHighestZindex setting to true so these pop-ups are drawn above it. RR does this for every editor it shows.
RR adds its own dialogs, confirmations and drop-down lists inside the element you mount it into, not to the body, and draws them over the whole window. An ancestor of that element with a transform, a filter or a z-index of its own can confine them to its box or draw them under other parts of your page, so keep such styles off the elements that contain RR.
Customizing the Rule Editor
The editor's class names are a supported contract. The classes in the tables below are what your CSS can rely on from one release to the next; they are used by the stand-alone editor and by every editor inside RR. Target them by class name rather than by element: in v7 the date and time pickers are built from div elements instead of tables, so selectors such as table.ceCal, td.ceDay, td.ceRollover and td.ceCalTime written for v6 no longer match anything.
There are three ways to customize the editor's look.
Add your own rules on top of a theme. Reference your stylesheet after the theme and override only what you want to change. To change one editor and leave the others on the page alone, scope your rules to the ID of that editor's host element:
/* Fields and values in different colours, in one editor only */
#ruleEditor span.ceField { color: #6a1b9a; }
#ruleEditor span.ceValue { color: #00796b; }
/* A larger Help String, in every editor on the page */
div.ceHelp { font-size: 105%; }
A scope on your host element reaches the Rule Area, the Toolbar and the Help String, but not the menus and pickers, which sit in the page's body. Style those without a scope.
Write your own theme. Copy codeeffects.editor.light.css or codeeffects.editor.dark.css, give the copy a name of your own, change its colours and reference it instead of the original. Keep the common stylesheet. When you upgrade to a newer version of the editor, compare its theme with the one you copied for classes that were added.
Replace the stylesheets entirely. You can reference neither the themes nor the common file and declare every ce class in your own CSS. The editor's themes are deliberately simple and provide only what normal use of the editor needs, so this is a reasonable choice for applications with a strict design system.
Leave the common stylesheet unchanged if you keep it, and override it from your own file instead: a newer release of the editor may change it.
One style is set by the script rather than the stylesheet: an inline rule in an action is drawn in italics. To change that, your rule needs !important.
Editors inside RR use the same classes. Your rules for the editor's classes change the editors inside RR as well. If you want them to apply to your stand-alone editors only, scope them to those editors' host elements as shown above.
Rule Area
The Rule Area is the div.ceRule inside your editor's host element. Each part of a rule is a span with one of these classes.
| Class |
Styles |
ceRule |
The Rule Area itself |
ceFlow |
The flow words, such as If, Then and Else |
ceClause |
Clauses and connecting words: and, or, set, where, exists |
ceOperator |
Operators, such as is, is greater than, and the commas between values in a list |
ceField |
Fields and the context of a collection |
ceContextRoot |
Added to the field that opens a collection's context |
ceAction |
Actions, and calls to inline rules |
ceMethod |
In-rule methods |
ceValue |
Values, and the input box (input.ceValue) while a value is typed |
ceFieldInput |
A field given as a method's or an action's parameter |
ceParenthesis |
Parentheses |
ceBrace |
The brackets around a method's or an action's parameters |
ceTab, ceNewLine |
Indentation and line breaks the user added (a line break carries ceField as well) |
ceEmpty |
The placeholder of an empty rule |
ceUndo |
The Undo element |
These classes are added to a rule element to show its state:
| Class |
When |
ceCurrent |
The element the user is on |
ceSelected |
An element selected with Ctrl+click (Cmd+click on a Mac) |
ceHighlight |
A bracket and its matching bracket while one of them is hovered or current |
ceWarn |
An element that is invalid or unfinished, after the rule was checked |
ceAdpError |
The placeholder shown when an Adaptive Source fails to give its elements |
| Class |
Styles |
ceHelp |
The Help String above the Rule Area, and its messages |
ceToolBar |
The Toolbar |
ceRulesMenu, ceRulesButton |
The Toolbar's list of rules and its button |
ceInputName, ceInputDesc |
The containers of the rule's Name and Description boxes |
ceNameBox, ceDescriptionBox |
The Name and Description boxes |
ceNameBoxDefault, ceDescriptionBoxDefault |
The same boxes while they show their placeholder text |
ceSave, ceDelete |
The Save and Delete buttons |
ceError |
Added to a box whose value is missing or invalid |
| Class |
Styles |
ceMenu |
A menu; each item is a div inside it |
ceItemOver |
The item under the pointer or chosen with the keyboard |
Value Prompt
The prompt opens for long text values.
| Class |
Styles |
cePromptContainer |
The prompt |
cePromptInput |
Its text box |
cePromptButtons |
The row of buttons |
cePromptSave, cePromptCancel |
Its buttons |
Date and Time Pickers
| Class |
Styles |
ceDatePicker, ceTimePicker |
The date picker and the time picker |
ceCalendar |
The month grid |
ceCalendarHeader, ceCalendarLabel |
The header with the month and year |
ceCalendarNavGroup, ceCalendarNav |
The arrows that move by a month or a year |
ceCalendarWeekdays, ceCalendarDays |
The row of weekday names and the grid of days |
ceCalendarDay |
A day |
ceCalendarDayToday, ceCalendarDaySelected, ceCalendarDayEmpty |
Today, the selected day, and the blank cells before the first day |
cePickerBody, cePickerTime |
The picker's body and its time part |
cePickerUnit, cePickerNum, cePickerStep, cePickerColon, cePickerUnitLetter, cePickerAmPm |
The time steppers: a unit, its number, its arrows, the separators, a duration's unit letter, AM / PM |
cePickerActions, cePickerButton, cePickerPrimary |
The row of buttons, a button, and the confirming button |
ceOffsetPicker |
Added to the date picker of a DateTimeOffset value |
ceOffsetMain, ceOffsetPanel, ceOffsetPanelInner, ceOffsetHeading |
The offset panel |
ceOffsetQuickRow, ceOffsetQuick, ceOffsetQuickOn |
The Local and UTC buttons, and the one in use |
ceOffsetList, ceOffsetItem, ceOffsetItemOn, ceOffsetNote, ceOffsetResult |
The list of offsets, an offset, the chosen one, its note, and the line with the result |
RR's Test dialog lets users enter a test's values with the editor's own inputs, so a value is entered and checked as it would be in a rule. These inputs are drawn by the editor's stylesheets and are used only inside RR.
| Class |
Styles |
ceValueInput |
The input's container |
ceValueList, ceValueOption, ceValueOptionOn, ceValueOptionHot, ceValueNone |
A list of values: an option, the current value, the option under the pointer or keyboard, and the null option |
ceValueBox, ceValueText, ceValueNote |
A box for a typed value, its text field and its note |
ceValueWarn |
Added to the message shown for a value that is not valid |
Customizing the Rule Repository
The best way to customize RR is to override its theme with a stylesheet of your own, referenced on the page after RR's stylesheets. Keep RR's common file and one of its themes as they are, and put in your file only the rules you want to change. Because your file comes last, its rules win wherever they match the same elements with the same selectors:
<link rel="stylesheet" href="codeeffects.editor.common.css">
<link rel="stylesheet" href="codeeffects.editor.light.css">
<link rel="stylesheet" href="codeeffects.repository.common.css">
<link rel="stylesheet" href="codeeffects.repository.light.css">
<!-- Your overrides: always after RR's stylesheets -->
<link rel="stylesheet" href="your-repository-theme.css">
To change something, find its rule in the theme you use (codeeffects.repository.light.css or codeeffects.repository.dark.css), copy the selector into your file and give it your own values:
/* your-repository-theme.css: RR's buttons and tabs in your brand colours */
.ceButton {
border-color: #c9ccd8;
color: #202a44;
}
.ceTabActive {
color: #7a1fa2;
border-bottom-color: #7a1fa2;
}
RR's theme classes are kept stable. Every effort is made not to rename or remove the classes in RR's theme files, or to change the structure they describe; RR's new features get new classes instead. So an override file written against one release keeps working in the next. After an upgrade, look at the new theme for classes that were added, and give them your colours if your theme needs them.
The other ways to change how RR looks:
- Choose a theme, Light or Dark, as described above.
- Set the font family and size on the element you mount RR into. RR uses both everywhere, its dialogs included.
- Style its editors with the Rule Editor's classes listed above. Every rule RR shows, and the value inputs of its Test dialog, are drawn by the editor's stylesheets.
- Replace a theme entirely by copying
codeeffects.repository.light.css or codeeffects.repository.dark.css, editing the copy and referencing it instead of the original. Prefer an override file when you change only part of the colours: a copy has to be compared with every new release's theme, while an override file only adds to it.
Do not change codeeffects.repository.common.css. It holds RR's layout and its responsive behaviour, and every release replaces it.
RR's themes add a few touches to the editors inside it that a stand-alone editor does not have, such as the margin kept round the pinned Help String when a rule scrolls under it. These live in RR's stylesheets, so your stand-alone editors never get them.
Content Security Policy
Both packages work under a Content Security Policy that does not allow inline styles (style-src without 'unsafe-inline'). Neither script writes style attributes into markup or adds <style> elements; the few styles they set at run time, such as the position of a menu, are set through the DOM, which such a policy allows. Your policy only needs to allow the location you serve the stylesheets from.
Upgrading from Version 6
- The stylesheets were renamed.
codeeffects.common.css, codeeffects.light.css and codeeffects.dark.css are now codeeffects.editor.common.css, codeeffects.editor.light.css and codeeffects.editor.dark.css. Update the references on your pages.
- The date and time pickers are built from
div elements. Rules written for v6's table-based pickers (ceCal, ceDay, ceRollover, ceCalTime and similar) no longer match; use the picker classes listed above.
- The themes were redrawn to match RR's palettes. If you copied a v6 theme, start your copy again from v7's.