Skip to Content
DocumentationCustom CSSCSS Variable Reference

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.

VariableDescriptionTypeExample
--key-radiusCorner roundness<length>8px, 50%
--key-bgBackground color<color>#ff2b80
--key-borderBorder style<border>2px solid #fff, none
--key-text-colorText color<color>#ffffff
--key-offset-xX offset in active state<length>0px, 2px
--key-offset-yY 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.

VariableDescriptionTypeExample
--counter-colorCounter text color<color>#ffffff
--counter-stroke-colorText outline color<color>#000000, transparent
--counter-stroke-widthText 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;
}

Selector Reference

Key Selectors

SelectorDescription
[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

SelectorDescription
.counterAll 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

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

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