Decapod Styling

General Styles



.ds-shared-decapod h1
.ds-shared-decapod h2
.ds-shared-decapod h3
.ds-shared-decapod em
.ds-shared-decapod a

Custom text styles.


Text when disabled. Used on buttons, links, and text content throughout application.

Header, Footer, and Main Content Area




Class shared by all Decapod components.


Top title bar

.ds-shared-titleBar-flatList li:first-child p

The first item in the title bar appears differently than the rest. Useful if using it as a navigation link to "Home".

.ds-shared-titleBar-flatList p

The style for content in the title bar.

.ds-shared-titleBar-flatList li:after

Contains the chevron seen in the title bar.

.ds-shared-decapod footer

The bottom footer / border of the Decapod interface.


Shared styles for the content that appears between the title bar at top, and the footer at the bottom.

.ds-shared-mainPane header

The area that contains the page title, menu links.


The menu bar that contains Restart and Help links.

Content Area




Styles for a container that appears inset to the page.

.ds-shared-insetContentArea .ds-shared-linkButton:hover

Link styles for the inset content area.

.ds-shared-insetContentArea .ds-shared-linkButton:active
.ds-shared-menuBar .ds-shared-linkButton:active

Link style when link is active.

Reposition UI Based on Resolution



@media screen and (max-width: 1100px)

Resize the UI when the screen is between 841px and 1100px.

@media screen and (max-width: 840px)

Resize the UI when the screen is 840px or less.




.ds-shared-menuBar .ds-shared-linkButton

Links that look like buttons which are used throughout the application. Sometimes overridden to match the style of a different container.


Disabled styling for link buttons.


A link button that is grey. Used predominantly inside Inset Content containers.


The "Browse" button used throughout the application.