Customization
DPiCSS comes with some CSS variables that make it easy to fine tune
Olivier 3lanc
| CSS variable | Default value | Description |
|---|---|---|
--primary-color |
white |
Primary color from which every other color is set |
--primary-size |
clamp(12px, 3cqi, 16px) |
The primary size defines text size. By default in DPiCSS, primary size is used to set font size and paddings |
--font-family |
inherit |
Defines the font family |
--text-align |
left |
Defines the default text alignment for the summary text |
--padding |
calc(0.5 * var(--primary-size)) |
Defines the padding of the box and the images. By default, calculated from primary size |
--border-radius |
calc(var(--primary-size) * 0.7) |
Defines the border radius of the box and the images. By default, calculated from primary size |
--button-border-radius |
1000px |
Defines the border radius of the play and pause buttons |
--shadow-radius |
3em |
Defines the box shadow radius |
--shadow-opacity |
0.5 |
Defines the box shadow opacity |
--shadow-color |
oklch(from var(--primary-color) round(1.21 - L) 0 0) |
Defines the box shadow opacity |
--play-text |
Play |
Text to display on thumbnail |
--pause-text |
Pause |
Text to display on large sized image |
--transition-duration |
500ms |
Defines transition duration on properties changes |
Global
To customize every instance of DPiCSS, just replace one or more CSS variables replacing the defaults.
@layer dpicss {
details[data-dpicss] {
/* Primary color from which every other color is set */
--primary-color: white;
/* The primary size defines text size. By default in DPiCSS, primary size is used to set font size and paddings. */
--primary-size: clamp(12px, 3cqi, 16px);
/* Defines the font family */
--font-family: inherit;
/* Defines the default text alignment for the summary text */
--text-align: left;
/* Defines the padding of the box and the images. By default, calculated from primary size */
--padding: calc(0.5 * var(--primary-size));
/* Defines the border radius of the box and the images. By default, calculated from primary size */
--border-radius: calc(var(--primary-size) * 0.7);
/* Defines the border radius of the play and pause buttons */
--button-border-radius: 1000px;
/* Defines the box shadow radius */
--shadow-radius: 3em;
/* Defines the box shadow opacity */
--shadow-opacity: 0.5;
/* Defines the box shadow color. By default, calculated from the primary color */
--shadow-color: oklch(from var(--primary-color) round(1.21 - L) 0 0);
/* Text to display on thumbnail */
--play-text: 'Play';
/* Text to display when large sized image is running */
--pause-text: 'Pause';
/* Defines transition duration on properties changes */
--transition-duration: 500ms;
}
}
For example, to replace primary color:
details[data-dpicss] {
--primary-color: #242d11;
}