Clicky Cascading Style Sheets

Control the appearance of a Clicky diagram with style sheets written in a CSS-like language.

A CCSS file consists of a series of rule sets, which are blocks of declarations that apply to one or more selectors. For example, this rule set contains one declaration, for the background property. It says that all elements should have a red background:

* {
    background: rgb(100%,0,0);
}

Tell Clicky to use a CCSS file with its -s option:

clicky -s CCSSFILE ...

CCSS selectors determine which elements are affected by a rule block. The following basic selectors are available:

Additional modifiers can follow these selectors. For elements, the modifiers are:

For ports, the modifiers are:

For handlers, the modifiers are:

A complete selector consists of one or more basic selectors separated by spaces. An element selector followed by a port selector matches the ports on elements that match the element selector. Multiple element selectors match compound element container relationships. For instance:

A rule set is preceded by one or more complete selectors separated by commas, and applies to any of those selectors.

When searching for a declaration, Clicky combines all applicable rulesets, ordering them so that the best matches take precedence.

The following declarations determine how elements are displayed.

The % escapes for text declarations are:

The text parser also accepts HTML-style font changes, such as <small> and <b>.

These declarations determine how ports are displayed:

These declarations determine how handlers are used:

Clicky CSS also support CSS-style media and import at-rules. A media at-rule says that the enclosed declarations apply only to the specified media types. For example, this says that drop shadows should only occur on the screen (not in PDF output):

@media screen {
* {
    shadow: drop rgba(50%, 50%, 45%, 50%) 3px;
}
}

Clicky understands two media types, print (PDF output) and screen (the UI).

An import at-rule includes rules from another CCSS file:

@import "filename.ccss";

Here is a simple Click configuration:

rr :: RoundRobinSched;

TimedSource(0.2) -> c1::Counter
	-> r :: { input -> Queue(20) -> output }
	-> Print(q1) -> [0]rr;
TimedSource(0.5) -> c2::Counter -> Queue(20) -> Print(q2) -> [1]rr;

rr -> TimedSink(0.1);

Here's how Clicky displays it with the default styles.

The following examples demonstrate how the display attribute affects elements.

expanded and closed are meaningful on compound elements only, and determine how compounds' contents are displayed. closed hides the contents, where expanded hides the compound, shifting the contents one level up to mingle with other elements.

#r { display: closed; }

#r { display: expanded; }

display: none causes the Print elements and all connections to and from those elements to vanish, leaving the diagram disconnected. display: passthrough hides the Print elements, but preserves their connections.

Print { display: none; }

Print { display: passthrough; }

Splitting elements is occasionally useful when backwards connection (such as through ICMPError), or high connectivity (common to IPRewriters), complicates a diagram. Display the problematic element multiple times with different port subsets and the diagram may simplify itself, for instance into subsets.

#rr { port-split: both; }

#rr { flow-split: ab/a; }

Use port classes to highlight or annotate particular ports.

#c1 port.output#0 {
	port-text: "interesting";
}
#rr port#1 {
	port-text: "boring";
}
#c2 port.input#0 {
	port-color: red;
	port-width: 10;
	port-length: 18;
}

* { orientation: horizontal }

Turn elements upstream of [0]rr blue:

[upstream=[0]rr] {
    background: rgb(200,200,255);
}

Turn elements in between a TimedSource and a Print green:

[downstream=TimedSource][upstream=Print] {
     background: rgb(200,255,200);
}

Here are the default rules Clicky applies to diagrams as of 3/7/2009. Your CCSS files augment these rules.

port.input {
    port-shape: triangle;
    port-length: 11px;
    port-width: 7px;
    port-margin: 1px;
    port-edge-padding: 2px;
}
port.output {
    port-shape: rectangle;
    port-length: 9px;
    port-width: 5.5px;
    port-margin: 1px;
    port-edge-padding: 2px;
}
port.push, port.push.agnostic {
    port-color: black;
}
port.pull, port.pull.agnostic {
    port-color: white;
}
port.agnostic {
    port-color: gray;
}
port.push, port.pull {
    port-border: black 1px solid;
}
port.agnostic, port.push.agnostic, port.pull.agnostic {
    port-border: black 1px inset;
}
port.push.error, port.push.agnostic.error {
    port-color: red;
}
port.pull.error, port.pull.agnostic.error {
    port-color: rgb(100%, 75%, 75%);
}
port.push.error, port.pull.error {
    port-border: red 1px solid;
}
port.agnostic.error, port.push.agnostic.error, port.pull.agnostic.error {
    port-border: red 1px inset;
}
* {
    background: rgb(100%, 100%, 87%);
    color: black;
    border: 1px solid black;
    padding: 8px 12px;
    margin: 20px 14px;
    shadow: drop rgba(50%, 50%, 45%, 50%) 3px;
    orientation: vertical;
    scale: 100%;
    queue-stripe: 1px solid rgb(87%, 87%, 50%);
    queue-stripe-spacing: 12px;
    text: "%n\n<small>%c</small>";
    display: open;
    port-display: both;
    port-font: 6;
    @media print {
	font: Times;
	port-font: Times 6;
    }
}
*.anonymous {
    text: "%n";
}
* * {
    background: rgb(98%, 98%, 81%);
}
* * * {
    background: rgb(96%, 96%, 75%);
}
* * * * {
    background: rgb(94%, 94%, 69%);
}
@media screen {
*:hover {
    background: #fffff2;
}
*:active, *:active:hover {
    background: #ffff94;
    shadow: unscaled-outline rgba(90%, 20%, 95%, 50%) 3px;
}
*:pressed, *:active:pressed {
    shadow: drop rgba(50%, 50%, 45%, 50%) 3px;
}
}
*Queue {
    min-length: 49.6px;
    style: queue;
}
fullness {
    style: fullness;
    length: length;
    capacity: capacity;
    color: rgba(0%, 0%, 100%, 20%);
    autorefresh: length 0.1s;
}
activity {
    style: activity;
    handler: count;
    decay: 5s;
    max-value: 3;
    type: rate;
    autorefresh: 1s;
}