DmNote/test.css at master · dustingusius/DmNote · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
/* 키 스타일 변수

--key-radius: 키의 테두리 반경

--key-bg: 키의 배경색

--key-border: 키의 테두리 스타일

--key-text-color: 키의 텍스트 색상

--key-offset-x: 키의 x축 오프셋

--key-offset-y: 키의 y축 오프셋

*/

/* 전역 키 스타일 */

[data-state="inactive"],
[data-state="active"] {
  --key-radius: 20px;

  font-size: 16px;

  font-weight: 700;

  touch-action: manipulation;

  transition: 0.13s ease-in-out;

  cursor: pointer;
}

/* 전역 키 비활성 스타일 */

[data-state="inactive"] {
  --key-bg: #ffd4e5;

  --key-border: 2px solid #e8b4c8;

  --key-text-color: #8b5a6b;

  box-shadow: 0px 4px 0px #d9a0b8, 0px 6px 12px rgba(217, 160, 184, 0.3);

  text-shadow: none;
}

/* 전역 키 활성 스타일 */

[data-state="active"] {
  --key-bg: #ffc4dd;

  --key-border: 2px solid #e8b4c8;

  --key-text-color: #8b5a6b;

  box-shadow: 0px 0px 0px #d9a0b8, 0px 2px 8px rgba(217, 160, 184, 0.2);

  text-shadow: none;

  /* 활성 상태 오프셋 (Key.jsx에서 transform에 적용) */
  --key-offset-x: 0px;
  --key-offset-y: 4px;
}

/* 특정 키 활성 스타일 */

.blue[data-state="active"] {
  --key-bg: transparent;

  --key-border: 3px solid #2ebef3;

  --key-text-color: #2ebef3;

  text-shadow: 0px 0px 3px #2ebef3;

  box-shadow: 0px 0px 4px #2b8eff, 0px 0px 4px #2b8eff;
}

/* 카운터 스타일 예제 */

/* 카운터 스타일 변수

--counter-color: 텍스트 색상

--counter-stroke-color: 텍스트 외곽선 색상

--counter-stroke-width: 텍스트 외곽선 두께

*/

/* 전역 카운터 스타일 */

.counter {
  font-size: 24px;

  font-weight: 700;
}

/* 전역 카운터 비활성 스타일 */

.counter[data-counter-state="inactive"] {
  --counter-color: #474244;

  --counter-stroke-color: transparent;
}

/* 전역 카운터 활성 스타일  */

.counter[data-counter-state="active"] {
  --counter-color: #ff2b80;

  --counter-stroke-color: transparent;

  text-shadow: 0px 0px 3px #ff2b80;
}

/* 특정 키의 카운터 스타일 예제 */

/* 클래스 선택자를 조합하여 특정 키의 카운터를 스타일링할 수 있습니다 */

/* 클래스 조합 예제: .blue 클래스를 가진 키의 카운터 */

.blue .counter[data-counter-state="active"] {
  --counter-color: #2ebef3;

  --counter-stroke-color: transparent;

  text-shadow: 0px 0px 3px #2ebef3;
}