CSS 변수 레퍼런스

DM Note에서 스타일링에 사용할 수 있는 모든 CSS 변수를 정리했습니다.

키 스타일 변수

키 요소에 적용되는 CSS 변수입니다. [data-state="inactive"] 또는 [data-state="active"] 선택자와 함께 사용합니다.

이미지 레이어

속성 패널에서 지정한 이미지는 키 루트의 자식 img[data-key-image-layer]로 링 여백(padding) 안쪽에 절대 배치됩니다. 루트에는 data-key-image와 함께 배치 모드 data-key-image-mode="replace|overlay"가 붙습니다.

• replace(기본): 앱 기본 배경·테두리·그림자와 텍스트가 숨겨지고 이미지가 표면이 됩니다. 사용자 CSS의 --key-border나 padding은 그대로 살아 있어 이미지가 그 안쪽에 그려지고 --key-radius로 잘립니다. 테두리 없이 이미지만 보이게 하려면 [data-key-image-mode="replace"] { --key-border: none; --key-padding: 0 }처럼 직접 해제하세요.
• overlay: 키 표면·텍스트·카운터가 그대로 그려지고 이미지가 그 위에 얹힙니다. 이미지는 키의 border-radius를 상속하고, 루트 overflow가 visible이라 이동·회전·확대한 이미지가 키 밖으로 나갈 수 있습니다. 잘라내려면 overflow: hidden을 지정하세요.

저장된 맞춤·변환·z 순서는 --key-image-fit, --key-image-transform, --key-image-z로 덮어씁니다. 인라인 스타일 우선을 켜면 이 셋이 인라인 선언으로 승격되어 --key-image-* 변수가 적용되지 않습니다. 이 모드에서는 object-fit· transform·z-index를 !important로 직접 덮어쓰세요.

사용 예시

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

카운터 스타일 변수

카운터 요소에 적용되는 CSS 변수입니다. .counter[data-counter-state="..."] 선택자와 함께 사용합니다.

--counter-color만 지정해도 앱에 저장된 카운터 fill 그라데이션은 자동으로 해제됩니다. 앱에서 만든 그라데이션은 글자 잉크 박스에 맞춰 깔리며, 배치를 직접 잡으려면 --counter-fill-position과 --counter-fill-size를 지정합니다. CSS로 새 fill 그라데이션을 만들 때는 다음 세 변수를 함께 사용합니다.

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

사용 예시

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

그래프 스타일 변수

그래프 요소에 적용되는 CSS 변수입니다. 그래프의 인라인 스타일 우선을 끄면 아래 변수로 외형을 제어할 수 있습니다. 테두리를 지정하지 않은 그래프는 키와 같은 기본 1px 그라데이션 링을 그리며 --graph-border가 링과 링 여백을 함께 해제합니다.

사용 예시

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

노브 스타일 변수

노브의 인라인 스타일 우선을 끄면 아래 변수를 사용할 수 있습니다. 노브에 지정한 클래스는 위치 래퍼에 있으므로 일반 속성을 직접 지정할 때는 .노브클래스 [data-knob-element] 선택자를 사용하세요. 테두리를 지정하지 않은 노브는 키와 같은 기본 1px 그라데이션 링을 그리며 --knob-border가 링과 링 여백을 함께 해제합니다.

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

선택자 레퍼런스

키 선택자

카운터 선택자

그래프 선택자

노브 선택자

표준 CSS 속성

인라인 스타일 우선이 꺼진 요소에는 다음과 같은 표준 외형 속성을 직접 사용할 수 있습니다. 위치는 앱이 관리하므로 키·그래프·노브 이동에는 --key-offset-x/--key-offset-y를 사용하세요.

자주 사용되는 속성

[data-state='active'] {
  /* 그림자 효과 */
  box-shadow: 0px 0px 8px #ff2b80;
 
  /* 텍스트 그림자 */
  text-shadow: 0px 0px 4px #ff2b80;
 
  /* 트랜지션 */
  transition: all 0.1s ease-in-out;
 
  /* 폰트 스타일 */
  font-size: 24px;
  font-weight: 700;
  font-family: 'Roboto', sans-serif;
 
  /* 필터 */
  filter: brightness(1.2);
}

주의사항

!important 사용

요소의 인라인 스타일 우선을 켠 경우에만 일반 선언보다 인라인 값이 우선합니다. 이 모드까지 강제로 덮어쓸 때는 실제 렌더 CSS 속성 자체에 !important를 사용해야 합니다. 폴백 커스텀 속성에 붙여도 인라인 속성 선언보다 우선할 수 없습니다:

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

border: none !important는 루트 테두리만 지웁니다. 그라데이션 보더 링(앱 기본 링과 저장된 링)은 자식 요소라 !important가 필요 없는 테두리 변수로 해제하거나 링을 직접 숨기세요:

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

브라우저 호환성

DM Note는 Windows의 WebView2와 macOS의 WKWebView에서 동작합니다. 운영체제별 WebView가 지원하는 최신 CSS 기능을 사용할 수 있습니다:

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

상속과 우선순위

1. 전역 스타일이 먼저 적용됩니다.
2. 클래스 선택자가 있으면 전역 스타일을 덮어씁니다.
3. 더 구체적인 선택자가 우선합니다.

/* 우선순위: 1 (가장 낮음) */
[data-state='active'] {
  --key-bg: red;
}
 
/* 우선순위: 2 */
.blue[data-state='active'] {
  --key-bg: blue;
}
 
/* 우선순위: 3 (가장 높음) */
.blue.special[data-state='active'] {
  --key-bg: purple;
}