CSS Variable Reference

Name: DM Note
Author: DM Note

This page lists all CSS variables available for styling in DM Note.

Key Style Variables

CSS variables applied to key elements. Use with [data-state="inactive"] or [data-state="active"] selectors.

Variable	Description	Type	Example
`--key-radius`	Corner roundness	`<length>`	`8px`, `50%`
`--key-bg`	Background color	`<color>`	`#ff2b80`
`--key-border`	Border style	`<border>`	`2px solid #fff`, `none`
`--key-text-color`	Text color	`<color>`	`#ffffff`
`--key-offset-x`	X offset in active state	`<length>`	`0px`, `2px`
`--key-offset-y`	Y offset in active state	`<length>`	`4px`

--key-bg is applied as background-color. To use gradients, specify background or background-image directly and set --key-bg: transparent; if needed.

Usage Example


[data-state="inactive"] {
  --key-radius: 8px;
  --key-bg: #2a2a2a;
  --key-border: 2px solid #444;
  --key-text-color: #888;
}
 
[data-state="active"] {
  --key-radius: 8px;
  --key-bg: #ff2b80;
  --key-border: 2px solid #ff2b80;
  --key-text-color: #fff;
  --key-offset-x: 0px;
  --key-offset-y: 4px;
}

Counter Style Variables

CSS variables applied to counter elements. Use with .counter[data-counter-state="..."] selectors.

Variable	Description	Type	Example
`--counter-color`	Counter text color	`<color>`	`#ffffff`
`--counter-stroke-color`	Text outline color	`<color>`	`#000000`, `transparent`
`--counter-stroke-width`	Text outline thickness	`<length>`	`1px`, `2px`

Usage Example


.counter[data-counter-state="inactive"] {
  --counter-color: #666;
  --counter-stroke-color: transparent;
  --counter-stroke-width: 0px;
}
 
.counter[data-counter-state="active"] {
  --counter-color: #ff2b80;
  --counter-stroke-color: #fff;
  --counter-stroke-width: 1px;
}

Graph Style Variables

CSS variables available for graph elements. Disable Inline Styles Priority on the graph to control these via CSS.

Variable	Description	Type	Example
`--graph-bg`	Graph background	`<color>`	`rgba(17, 17, 20, 0.85)`
`--graph-border`	Graph border	`<border>`	`1px solid #7dd3fc`
`--graph-radius`	Graph corner radius	`<length>`	`10px`
`--graph-color`	Line/bar drawing color	`<color>`	`#86efac`

Usage Example


.kps-graph {
  --graph-bg: rgba(7, 10, 18, 0.72);
  --graph-border: 1px solid rgba(125, 211, 252, 0.55);
  --graph-radius: 12px;
  --graph-color: #7dd3fc;
}

Selector Reference

Key Selectors

Selector	Description
`[data-state="inactive"]`	All inactive keys
`[data-state="active"]`	All active keys
`[data-state="inactive"], [data-state="active"]`	All keys in all states
`.classname[data-state="active"]`	Active state of keys with specific class

Counter Selectors

Selector	Description
`.counter`	All counters
`.counter[data-counter-state="inactive"]`	Inactive counters
`.counter[data-counter-state="active"]`	Active counters
`.classname .counter[data-counter-state="active"]`	Counter of keys with specific class

Graph Selectors

Selector	Description
`.graphClassName`	Style a specific graph container
`.graphClassName svg`	Style line graph SVG (stroke/fill)
`.graphClassName > div`	Style the inner plot area (line/bar shared)
`.graphClassName > div > div`	Style individual bars in bar mode

Standard CSS Properties

In addition to CSS variables, you can freely use the following standard CSS properties:

Commonly Used Properties


[data-state="active"] {
  /* Shadow effect */
  box-shadow: 0px 0px 8px #ff2b80;
 
  /* Text shadow */
  text-shadow: 0px 0px 4px #ff2b80;
 
  /* Transition */
  transition: all 0.1s ease-in-out;
 
  /* Font style */
  font-size: 24px;
  font-weight: 700;
  font-family: "Roboto", sans-serif;
 
  /* Transform */
  transform: scale(1.05);
 
  /* Filter */
  filter: brightness(1.2);
}

Notes

Using !important

Use !important if some styles are not being applied:


[data-state="active"] {
  --key-bg: #ff2b80 !important;
  box-shadow: 0px 0px 8px #ff2b80 !important;
}

Browser Compatibility

DM Note runs on Chromium-based WebView2, supporting most modern CSS features:

CSS Variables (Custom Properties) ✅
CSS Grid / Flexbox ✅
CSS Animations / Transitions ✅
CSS Filters ✅
backdrop-filter ✅
mix-blend-mode ✅

backdrop-filter does not work when the overlay background is transparent.

Inheritance and Specificity

Global styles are applied first.
Class selectors override global styles.
More specific selectors take precedence.


/* Priority: 1 (lowest) */
[data-state="active"] {
  --key-bg: red;
}
 
/* Priority: 2 */
.blue[data-state="active"] {
  --key-bg: blue;
}
 
/* Priority: 3 (highest) */
.blue.special[data-state="active"] {
  --key-bg: purple;
}