Skip to content

Commit 63d668d

Browse files
hello-vinithahello-vinitha
committed
move voice control over footer
1 parent 3f64f0b commit 63d668d

5 files changed

Lines changed: 508 additions & 162 deletions

File tree

‎src/pages/operator/css/AccessibleRadioGroup.css‎

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
.accessible-radio-group {
2+
display: flex;
3+
flex-direction: column;
4+
gap: 8px;
5+
margin: 0;
6+
padding: 0;
7+
border: none;
8+
min-width: 0;
9+
--legend-font-size: 14px;
10+
--accessible-radio-option-padding: 12px;
11+
}
12+
13+
.accessible-radio-group__legend {
14+
/* Reset UA fieldset/legend positioning (WebKit/Blink use relative + negative top) */
15+
display: block;
16+
float: none;
17+
width: 100%;
18+
position: relative;
19+
top: calc(var(--legend-font-size) / 2);
20+
left: auto;
21+
margin: 0;
22+
font-size: var(--legend-font-size);
23+
font-weight: 600;
24+
color: hsl(184deg 60% 87%);
25+
padding: 0;
26+
}
27+
28+
.accessible-radio-group__options {
29+
display: flex;
30+
gap: 8px;
31+
margin-top: var(--legend-font-size);
32+
padding: 3px;
33+
background: hsla(204deg 100% 5% / 100%);
34+
border-radius: 13px;
35+
}
36+
37+
.accessible-radio-group__options--vertical {
38+
flex-direction: column;
39+
}
40+
41+
.accessible-radio-group__options--horizontal {
42+
flex-direction: row;
43+
flex-wrap: nowrap;
44+
gap: 3px;
45+
align-items: stretch;
46+
}
47+
48+
.accessible-radio__option {
49+
display: flex;
50+
align-items: center;
51+
gap: 10px;
52+
padding: var(--accessible-radio-option-padding);
53+
cursor: pointer;
54+
border-radius: 10px;
55+
transition: background-color 0.2s ease-in-out;
56+
color: hsl(184deg 60% 87%);
57+
font-size: var(--legend-font-size);
58+
box-sizing: border-box;
59+
}
60+
61+
.accessible-radio-group__options--horizontal .accessible-radio__option {
62+
flex: 1 1 0;
63+
min-width: 0;
64+
}
65+
66+
.accessible-radio__option:hover {
67+
background: hsl(204deg 100% 50% / 50%);
68+
}
69+
70+
.accessible-radio__option--selected {
71+
background: hsl(204deg 50% 15%);
72+
}
73+
74+
.accessible-radio-group:disabled .accessible-radio__option,
75+
.accessible-radio__option--disabled {
76+
cursor: not-allowed;
77+
opacity: 0.6;
78+
}
79+
80+
.accessible-radio__option--ripple {
81+
position: relative;
82+
overflow: hidden;
83+
}
84+
85+
.accessible-radio__indicator {
86+
flex-shrink: 0;
87+
display: flex;
88+
align-items: center;
89+
justify-content: center;
90+
width: 25px;
91+
height: 25px;
92+
}
93+
94+
.accessible-radio-group .accessible-radio__control {
95+
flex-shrink: 0;
96+
margin: 0;
97+
width: 25px;
98+
height: 25px;
99+
padding: 0;
100+
cursor: pointer;
101+
position: relative;
102+
appearance: none;
103+
-webkit-appearance: none;
104+
border: none;
105+
background: transparent;
106+
outline: none;
107+
box-shadow: none;
108+
display: block;
109+
line-height: 0;
110+
}
111+
112+
.accessible-radio-group .accessible-radio__control::before {
113+
content: "";
114+
position: absolute;
115+
left: 0;
116+
top: 0;
117+
width: 25px;
118+
height: 25px;
119+
border: 1px solid hsl(210deg 100% 50%);
120+
background-color: hsl(204deg 51% 14%);
121+
border-radius: 50%;
122+
box-sizing: border-box;
123+
}
124+
125+
.accessible-radio-group .accessible-radio__control:checked::before {
126+
background-color: hsl(204deg 51% 14%);
127+
border-color: hsl(210deg 100% 50%);
128+
}
129+
130+
.accessible-radio-group .accessible-radio__control:checked::after {
131+
content: "";
132+
position: absolute;
133+
left: 3px;
134+
top: 3px;
135+
width: 19px;
136+
height: 19px;
137+
background-color: hsl(210deg 100% 50%);
138+
border-radius: 50%;
139+
}
140+
141+
.accessible-radio-group .accessible-radio__control:focus {
142+
outline: none;
143+
}
144+
145+
.accessible-radio-group .accessible-radio__control:focus-visible::before {
146+
box-shadow: 0 0 0 2px hsl(190, 100%, 50%);
147+
}
148+
149+
.accessible-radio-group:disabled .accessible-radio__control,
150+
.accessible-radio-group .accessible-radio__control:disabled {
151+
cursor: not-allowed;
152+
}
153+
154+
.accessible-radio__content {
155+
display: flex;
156+
flex-direction: column;
157+
gap: 4px;
158+
min-width: 0;
159+
}
160+
161+
.accessible-radio__label {
162+
font-size: 16px;
163+
font-weight: 600;
164+
line-height: 1.25;
165+
}
166+
167+
.accessible-radio__description {
168+
font-size: 14px;
169+
opacity: 0.8;
170+
line-height: 1.35;
171+
margin: 0;
172+
}
173+
174+
.accessible-radio__ripple {
175+
position: absolute;
176+
border-radius: 50%;
177+
background-color: hsl(184deg 100% 50% / 10%);
178+
transform: scale(0);
179+
animation: accessible-radio-ripple 400ms ease-out forwards;
180+
pointer-events: none;
181+
}
182+
183+
@keyframes accessible-radio-ripple {
184+
to {
185+
transform: scale(2.5);
186+
opacity: 0;
187+
}
188+
}
189+
190+
/* Voice command overlay: legend de-emphasis; panel chrome lives on parent wrapper */
191+
.accessible-radio-group.voice-move-execution-mode {
192+
width: 100%;
193+
margin: 0;
194+
border: none;
195+
background: transparent;
196+
}
197+
198+
.accessible-radio-group.voice-move-execution-mode .accessible-radio-group__legend {
199+
opacity: 0.7;
200+
}

‎src/pages/operator/css/ActionMode.css‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -76,14 +76,14 @@
7676
/* Slightly reduce vertical margin for body */
7777
}
7878

79-
/* Hide the default radio input */
80-
input[type="radio"] {
79+
/* Scoped to action mode modal — avoid leaking to AccessibleRadioGroup */
80+
.action-mode-options input[type="radio"] {
8181
margin: 0px 0px 0px 10px;
8282
width: 21px;
8383
height: 21px;
8484
}
8585

86-
input[type="radio"]:focus {
86+
.action-mode-options input[type="radio"]:focus {
8787
outline: none;
8888
}
8989

@@ -94,7 +94,7 @@ input[type="radio"]:focus {
9494

9595
/* Target iOS devices */
9696
@supports (-webkit-touch-callout: none) {
97-
input[type="radio"] {
97+
.action-mode-options input[type="radio"] {
9898
position: relative;
9999
padding: 11px;
100100
width: 0px;
@@ -109,7 +109,7 @@ input[type="radio"]:focus {
109109

110110
/* Target non-iOS devices */
111111
@supports not (-webkit-touch-callout: none) {
112-
input[type="radio"] {
112+
.action-mode-options input[type="radio"] {
113113
position: relative;
114114
padding-left: 30px;
115115
/* Space for the custom radio */
@@ -127,7 +127,7 @@ input[type="radio"]:focus {
127127
**/
128128

129129
/* Create a custom radio button using ::before */
130-
input[type="radio"]::before {
130+
.action-mode-options input[type="radio"]::before {
131131
content: "";
132132
position: absolute;
133133
left: 0;
@@ -140,13 +140,13 @@ input[type="radio"]::before {
140140
}
141141

142142
/* Style for the checked state */
143-
input[type="radio"]:checked::before {
143+
.action-mode-options input[type="radio"]:checked::before {
144144
background-color: #122837;
145145
border-color: #0077ff;
146146
}
147147

148148
/* Optional: Add a dot in the center for the checked state */
149-
input[type="radio"]:checked::after {
149+
.action-mode-options input[type="radio"]:checked::after {
150150
content: "";
151151
position: absolute;
152152
left: 2px;
@@ -155,4 +155,4 @@ input[type="radio"]:checked::after {
155155
height: 18px;
156156
background-color: #0077ff;
157157
border-radius: 50%;
158-
}
158+
}

‎src/pages/operator/css/VoiceCommandAssistant.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@keyframes voice-command-assistant-spin {
2+
to {
3+
transform: rotate(360deg);
4+
}
5+
}
6+
7+
.voice-command-assistant__primary-button {
8+
display: flex;
9+
align-items: center;
10+
justify-content: center;
11+
gap: 8px;
12+
}
13+
14+
.voice-command-assistant__connecting-label {
15+
display: inline-flex;
16+
align-items: baseline;
17+
gap: 2px;
18+
line-height: 1;
19+
}
20+
21+
.voice-command-assistant__connecting-ellipsis {
22+
display: inline-flex;
23+
align-items: baseline;
24+
transform: translateY(0);
25+
}
26+
27+
.voice-command-assistant__spinner {
28+
display: inline-block;
29+
width: 16px;
30+
height: 16px;
31+
border: 2px solid hsl(0deg 0% 0% / 25%);
32+
border-top-color: hsl(0deg 0% 0% / 75%);
33+
border-radius: 50%;
34+
animation: voice-command-assistant-spin 1s linear infinite;
35+
flex-shrink: 0;
36+
}

0 commit comments

Comments
 (0)