CSS Variable Reference

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.

Image Layer

An image set in the properties panel renders as a child img[data-key-image-layer] of the key root, absolutely positioned inside the ring spacing (padding). The root carries data-key-image and the placement mode data-key-image-mode="replace|overlay".

• replace (default): the app’s default background, border, shadow, and label are hidden and the image becomes the surface. A --key-border or padding from your CSS stays in effect, so the image draws inside it and is clipped by --key-radius. To show only the image, reset them yourself: [data-key-image-mode="replace"] { --key-border: none; --key-padding: 0 }.
• overlay: the key surface, label, and counter render as usual and the image sits on top. The image inherits the key’s border-radius, and the root overflow is visible, so an offset, rotated, or scaled image may extend past the key. Set overflow: hidden to clip it.

Override the saved fit, transform, and stacking with --key-image-fit, --key-image-transform, and --key-image-z. With inline style priority enabled these three are promoted to inline declarations, so the --key-image-* variables do not apply; override object-fit, transform, and z-index directly with !important instead.

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.

Setting only --counter-color also disables a counter fill gradient saved in the app. Gradients created in the app are laid over the glyph ink box; use --counter-fill-position and --counter-fill-size to take over the placement. To create a CSS fill gradient, set all three fill variables:

.counter {
  --counter-fill-image: linear-gradient(90deg, #f0f, #0ff);
  --counter-fill-clip: text;
  --counter-text-fill-color: transparent;
}

Usage Example

.counter[data-counter-state='inactive'] {
  --counter-color: #666;
}
 
.counter[data-counter-state='active'] {
  --counter-color: #ff2b80;
}

Graph Style Variables

CSS variables available for graph elements. Disable Inline Styles Priority on the graph to control these via CSS. A graph with no border set draws the same default 1px gradient ring as keys; --graph-border resets it together with its spacing.

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;
}

Knob Style Variables

Disable Inline Styles Priority on a knob to use these variables. The custom class is on the position wrapper, so target .knob-class [data-knob-element] when applying standard properties directly to the visible surface. A knob with no border set draws the same default 1px gradient ring as keys; --knob-border resets it together with its spacing.

.volume-knob {
  --knob-bg: #17171b;
  --knob-border: none;
  --knob-indicator: #ff2b80;
}

Sprite Style Variables

Reactive sprites render a single image layer that switches poses while its trigger keys are held. Placement and the rotation origin stay inline because the window bounds are computed from them; the appearance channels below are the ones you can replace. Disable Inline Styles Priority on the sprite to use them.

--sprite-transform replaces only the image’s local pose transform. The element-level placement rotation remains app-managed around the box center and is applied outside that pose transform.

.left-hand [data-sprite-element] > img {
  --sprite-transition: transform 90ms cubic-bezier(0.2, 0, 0, 1);
}

The image element already has the source aspect ratio and fills its box, so object-fit has nothing to change. Overriding the element size itself voids the pivot alignment of pose images.

Selector Reference

Key Selectors

Counter Selectors

Graph Selectors

Knob Selectors

Sprite Selectors

Standard CSS Properties

With Inline Styles Priority disabled, you can directly use standard visual properties such as the following. Element positioning remains app-managed; use --key-offset-x/--key-offset-y to move keys, graphs, and knobs.

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;
 
  /* Filter */
  filter: brightness(1.2);
}

Notes

Using !important

Normal declarations lose to inline values only when Inline Styles Priority is enabled. In that mode, override the rendered CSS property itself with !important; adding it to a fallback custom property cannot beat an inline property declaration:

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

border: none !important clears only the root border. The gradient border ring (the app default and any saved ring) is a child element, so reset it with the border variable, which needs no !important, or hide the ring directly:

.my-key {
  --key-border: none;
}
 
/* or */
.my-key [data-gradient-border-ring] {
  display: none;
}

Browser Compatibility

DM Note uses WebView2 on Windows and WKWebView on macOS. You can use modern CSS features supported by the WebView on the current operating system:

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

Inheritance and Specificity

1. Global styles are applied first.
2. Class selectors override global styles.
3. 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;
}