Styling

Styling of the scalebar component is possible through CSS variables. Because the component renders as an SVG with visible overflow, ensure that all elements remain within the component’s container or apply suitable margins.

CSS Variables

Variable	Description	Default
--scalebar-size	A unitless scaling factor for the colorbar and labels (equal to pixel)	14
--container-size	Height of the scalebar container in horizontal layout; width in vertical layout	28px [--scalebar-size * 2px]
--bar-size	Height of the colorbar in horizontal layout; width in vertical layout	14px [--container-size / 2]
--bar-offset	Offset applied to the labels	0px
* --tick-color	Color of the ticks	currentColor
* --tick-blend	Blend-mode of the ticks	normal
* --tick-width	Width of the ticks	2px
* --tick-size	Size of the ticks	14 [--container-size]
* --tick-offset	Offset applied to the ticks	0px
* --label-color	Color of the labels	currentColor
* --label-blend	Blend-mode of the labels	normal
* --label-offset	Offset applied to the labels	14px [--barsize-size]
* --label-indent	Indent applied to the labels	0px
* --label-font	Font for labels in shorthand notation	12.6px monospace [--bar-size * 0.9]

All variables marked with an * allow you to style the first and/or last element by adding 0 or 1 as a suffix to the CSS variable name. For example, --tick-color0 changes the color of the first tick, while --tick-color1 changes only the color of the last tick. By using both, you can style them independently.

Examples

between

    .cs_between {
        --container-size:14px;
        --bar-size:14px;
        --tick-width:54px;
        --tick-color:var(--bg);
        --tick-size:20;
        --tick-size0:0;
        --label-offset:-2px;
        --label-font: 800 .8em "Inter", sans-serif;
    }

gap

    .cs_gap {
        --scalebar-size: 30;
        --tick-width:20px;
        --tick-size:34;
        --tick-offset:-2px;
        --tick-color:var(--bg);
        --tick-color0:transparent;
        --label-offset:0px;
        --label-color:#333;
        --label-color0:#eee;
        --label-indent0:-14px;
        --label-font: 800 25px monospace;
    }

dot

    .cs_dot {
        --container-size:14px;
        --bar-size:14px;
        --tick-width:6px;
        --tick-size:6;
        --tick-offset:4px;
        --tick-size0:0;
        --tick-color:#5fadf9cc;
        --label-offset:0px;
        --label-color:#1e90ff;
        --label-color1:#5fadf9;
        --label-font: 800 .7em "Inter", sans-serif;
    }

comb

    .cs_comb {
        --container-size:62px;
        --bar-size:62px;
        --tick-size:32;
        --tick-width:4;
        --tick-color:var(--bg);
        --tick-size0:62;
        --label-color:#333;
        --label-color0:#3c96f8;
        --label-color1:#f87a1f;
        --label-offset:34px;
        --label-indent0:-.7em;
        --label-font:800 20px "Inter", sans-serif;
    }

topper

    .cs_topper {
        --label-font:800 2em "Inter", sans-serif;
        --container-size:40px;
        --bar-size:40px;
        --tick-size:34;
        --tick-width:40;
        --tick-color:var(--bg);
        --tick-size0:0;
        --label-offset:-.1em;
        --label-offset0:0em;
        --label-color:#888;
        --label-color0:#333;
        --label-color1:#ccc;
    }

ticky

    .cs_ticky {
        --label-font:12px monospace;
        --scalebar-size:8;
        --bar-size:5px;
        --tick-width:2;
        --tick-size:3;
        --tick-offset:4px;
        --tick-size0:8;
        --tick-offset0:0px;
        --label-offset:-14px;
    }

blend modes

.bm {
    --tick-color:DodgerBlue;
    --tick-width:3px;
    --tick-size0: 14;
    --label-blend1:normal;
    --label-offset:0px;
    --label-color:DodgerBlue;
    --label-color1:#000;
    --label-font:800 12px "Inter", sans-serif;
    --label-font1:500 12px "Inter", sans-serif
}

.bm_normal{
    --tick-blend:normal;
    --label-blend:normal;
}
.bm_multiply{
    --tick-blend:multiply;
    --label-blend:multiply;
}
.bm_screen{
    --tick-blend:screen;
    --label-blend:screen;
}
.bm_overlay{
    --tick-blend:overlay;
    --label-blend:overlay;
}
.bm_darken{
    --tick-blend:darken;
    --label-blend:darken;
}
.bm_lighten{
    --tick-blend:lighten;
    --label-blend:lighten;
}
.bm_color-dodge{
    --tick-blend:color-dodge;
    --label-blend:color-dodge;
}
.bm_color-burn{
    --tick-blend:color-burn;
    --label-blend:color-burn;
}
.bm_hard-light{
    --tick-blend:hard-light;
    --label-blend:hard-light;
}
.bm_soft-light{
    --tick-blend:soft-light;
    --label-blend:soft-light;
}
.bm_difference{
    --tick-blend:difference;
    --label-blend:difference;
}
.bm_exclusion{
    --tick-blend:exclusion;
    --label-blend:exclusion;
}
.bm_hue{
    --tick-blend:hue;
    --label-blend:hue;
}
.bm_saturation{
    --tick-blend:saturation;
    --label-blend:saturation;
}
.bm_color{
    --tick-blend:color;
    --label-blend:color;
}
.bm_luminosity{
    --tick-blend:luminosity;
    --label-blend:luminosity;
}
.bm_plus-darker{
    --tick-blend:plus-darker;
    --label-blend:plus-darker;
}
.bm_plus-lighter{
    --tick-blend:plus-lighter;
    --label-blend:plus-lighter;
}