Applying Custom CSS

CSS styles can be used to customise various user interface components in TokenScript viewer, such as the token list and buttons.

An example of this can be seen by viewing the Morchi TokenScript here:
https://launchpad.smartlayer.network/app/137/0xb48f53010acbc0e24d3d12d892e2215879e6fd13/0/22360?isDemo=false
Or here (if you own a Morchi):
https://viewer.tokenscript.org/?chain=137&contract=0xB48f53010Acbc0E24D3D12D892E2215879e6fD13#

ts:styles

The ts:styles element is used to achieve this, and supports the ts:include element for inlining the CSS:

tokenscript.xml:

<!-- After ts:origins -->
<ts:style>
    <ts:include type="css" src="./src/ui.css" />
</ts:style>
<!-- Before ts:cards -->

src/ui.css:

.ts-token-background {
    background-color: #444444;
}

.ts-token-container {
    background-color: #212121;
    color: #fff;
    border-radius: 25px;
}

.ts-token-container.popover-container {
    background-color: #444444 !important;
}

.ts-token-container * {
    color: #fff;
}

.ts-token-container .owner-count {
    color: #fff;
}

.ts-card-button.btn-primary {
    background: linear-gradient(106.84deg, rgba(255, 140, 74, 0.9) 6.22%, rgba(255, 96, 95, 0.9) 90.19%) !important;
    border: none;
}

.ts-card-button.btn-primary:hover, .ts-card-button.btn-primary:disabled {
    background: linear-gradient(106.84deg, #FF8C4A 6.22%, #FF605F 90.19%) !important;
    border: none;
}

.ts-card-button.btn-primary:disabled {
    background: #4A4747 !important;
    border: none !important;
    pointer-events: none;
    cursor: not-allowed;
}

.ts-card-button.btn-primary span {
    color: white;
}

.ts-card-button.btn-secondary {
    border: 1px solid rgb(255, 88, 36);
    border-color: rgb(255, 88, 36) !important;
    background: transparent;
}

.ts-card-button.btn-secondary:disabled {
    border: 1px solid #5C5857 !important;
    background: #212121 !important;
    pointer-events: none;
    cursor: not-allowed;
}

.ts-card-button.btn-secondary span {
    background-image: linear-gradient(106.84deg, rgb(255, 140, 74) 6.22%, rgb(255, 96, 95) 90.19%);
    background-clip: text;
    color: transparent;
}

.ts-card-button.btn-secondary:disabled span {
    color: #83807F !important;
    background-image: unset !important;
}

.ts-card-button.btn-secondary:hover {
    border: 1px solid rgb(255, 88, 36);
    background: rgba(194, 140, 109, 0.06);
}

.ts-token-container .attribute-item {
    border: none;
    background-color: #292929;
}

Whitelisted selectors & properties

Styles are allowed on a whitelisted bases so they can not affect other UI components. Your CSS styles must follow these regex rules, otherwise they will not be included:

DEFAULT_ALLOWED_PROPERTIES = [
    "border-radius",
    "border",
    "border-color",
    "background",
    "background-color",
    "background-position",
    "background-size",
    "color",
    "padding",
    "font-family",
    "font-size",
    "font-weight",
    "text-transform",
    "height",
    "padding",
    "opacity"
];

ALLOWED_SELECTORS_AND_PROPERTIES = {
    // TODO: Add font-face
    "@font-face": [], // All properties allowed when empty
    "\.ts-token-background": DEFAULT_ALLOWED_PROPERTIES,
    "\.bg-blur": DEFAULT_ALLOWED_PROPERTIES,
    "\.ts-tokens-grid.*": [],
    "\.ts-token-container.*": DEFAULT_ALLOWED_PROPERTIES,
    "\.ts-card-button.*": DEFAULT_ALLOWED_PROPERTIES,
    "\.ts-action-button.*": DEFAULT_ALLOWED_PROPERTIES,
    "\.ts-overflow-button.*": DEFAULT_ALLOWED_PROPERTIES
}