Commit | Line | Data |
---|---|---|
7729765c RK |
1 | :scope { |
2 | --border-color: #e5e5e5; | |
3 | } | |
4 | ||
5 | #narrate-toggle { | |
6 | background-image: url("chrome://global/skin/narrate/narrate.svg"); | |
7 | } | |
8 | ||
9 | .dropdown-popup button { | |
10 | background-color: transparent; | |
11 | } | |
12 | ||
13 | .dropdown-popup button:hover:not(:disabled) { | |
14 | background-color: #eaeaea; | |
15 | } | |
16 | ||
17 | .narrate-row { | |
18 | display: flex; | |
19 | align-items: center; | |
20 | min-height: 40px; | |
21 | box-sizing: border-box; | |
22 | } | |
23 | ||
24 | .narrate-row:not(:first-child) { | |
25 | border-top: 1px solid var(--border-color); | |
26 | } | |
27 | ||
28 | /* Control buttons */ | |
29 | ||
30 | #narrate-control > button { | |
31 | background-size: 24px 24px; | |
32 | background-repeat: no-repeat; | |
33 | background-position: center center; | |
34 | height: 64px; | |
35 | width: 100px; | |
36 | border: none; | |
37 | color: #666; | |
38 | box-sizing: border-box; | |
39 | } | |
40 | ||
41 | #narrate-control > button:not(:first-child) { | |
42 | border-left: 1px solid var(--border-color); | |
43 | } | |
44 | ||
45 | #narrate-skip-previous { | |
46 | border-top-left-radius: 3px; | |
47 | background-image: url("chrome://global/skin/narrate/back.svg#enabled"); | |
48 | } | |
49 | ||
50 | #narrate-skip-next { | |
51 | border-top-right-radius: 3px; | |
52 | background-image: url("chrome://global/skin/narrate/forward.svg#enabled"); | |
53 | } | |
54 | ||
55 | #narrate-skip-previous:disabled { | |
56 | background-image: url("chrome://global/skin/narrate/back.svg#disabled"); | |
57 | } | |
58 | ||
59 | #narrate-skip-next:disabled { | |
60 | background-image: url("chrome://global/skin/narrate/forward.svg#disabled"); | |
61 | } | |
62 | ||
63 | #narrate-start-stop { | |
64 | background-image: url("chrome://global/skin/narrate/start.svg"); | |
65 | } | |
66 | ||
67 | #narrate-start-stop.speaking { | |
68 | background-image: url("chrome://global/skin/narrate/stop.svg"); | |
69 | } | |
70 | ||
71 | /* Rate control */ | |
72 | ||
73 | #narrate-rate::before, #narrate-rate::after { | |
74 | content: ''; | |
75 | width: 48px; | |
76 | height: 40px; | |
77 | background-position: center; | |
78 | background-repeat: no-repeat; | |
79 | background-size: 24px auto; | |
80 | } | |
81 | ||
82 | #narrate-rate::before { | |
83 | background-image: url("chrome://global/skin/narrate/slow.svg"); | |
84 | } | |
85 | ||
86 | #narrate-rate::after { | |
87 | background-image: url("chrome://global/skin/narrate/fast.svg"); | |
88 | } | |
89 | ||
90 | #narrate-rate-input { | |
91 | margin: 0 1px; | |
92 | flex-grow: 1; | |
93 | } | |
94 | ||
95 | #narrate-rate-input::-moz-range-track { | |
96 | background-color: #979797; | |
97 | height: 2px; | |
98 | } | |
99 | ||
100 | #narrate-rate-input::-moz-range-progress { | |
101 | background-color: #2EA3FF; | |
102 | height: 2px; | |
103 | } | |
104 | ||
105 | #narrate-rate-input::-moz-range-thumb { | |
106 | background-color: #808080; | |
107 | height: 16px; | |
108 | width: 16px; | |
109 | border-radius: 8px; | |
110 | border-width: 0; | |
111 | } | |
112 | ||
113 | #narrate-rate-input:active::-moz-range-thumb { | |
114 | background-color: #2EA3FF; | |
115 | } | |
116 | ||
117 | /* Voice selection */ | |
118 | ||
119 | .voiceselect { | |
120 | width: 100%; | |
121 | } | |
122 | ||
123 | .voiceselect > button.select-toggle, | |
124 | .voiceselect > .options > button.option { | |
125 | -moz-appearance: none; | |
126 | border: none; | |
127 | width: 100%; | |
128 | min-height: 40px; | |
129 | } | |
130 | ||
131 | .voiceselect.open > button.select-toggle { | |
132 | border-bottom: 1px solid var(--border-color); | |
133 | } | |
134 | ||
135 | .voiceselect > button.select-toggle::after { | |
136 | content: ''; | |
137 | background-image: url("chrome://global/skin/narrate/arrow.svg"); | |
138 | background-position: center; | |
139 | background-repeat: no-repeat; | |
140 | background-size: 12px 12px; | |
141 | display: inline-block; | |
142 | width: 1.5em; | |
143 | height: 1em; | |
144 | vertical-align: middle; | |
145 | } | |
146 | ||
147 | .voiceselect > .options > button.option:not(:first-child) { | |
148 | border-top: 1px solid var(--border-color); | |
149 | } | |
150 | ||
151 | .voiceselect > .options > button.option { | |
152 | box-sizing: border-box; | |
153 | } | |
154 | ||
155 | .voiceselect > .options:not(.hovering) > button.option:focus { | |
156 | background-color: #eaeaea; | |
157 | } | |
158 | ||
159 | .voiceselect > .options:not(.hovering) > button.option:hover:not(:focus) { | |
160 | background-color: transparent; | |
161 | } | |
162 | ||
163 | .voiceselect > .options > button.option::-moz-focus-inner { | |
164 | outline: none; | |
165 | border: 0; | |
166 | } | |
167 | ||
168 | .voiceselect > .options { | |
169 | display: none; | |
170 | overflow-y: auto; | |
171 | } | |
172 | ||
173 | .voiceselect.open > .options { | |
174 | display: block; | |
175 | } | |
176 | ||
177 | .current-voice { | |
178 | color: #7f7f7f; | |
179 | } | |
180 | ||
181 | .voiceselect:not(.open) > button, | |
182 | .option:last-child { | |
183 | border-radius: 0 0 3px 3px; | |
184 | } |