2 --border-color: #e5e5e5;
5 #narrate-toggle > svg {
10 .dropdown-popup button {
11 background-color: transparent;
14 .dropdown-popup button:hover:not(:disabled) {
15 background-color: #eaeaea;
22 box-sizing: border-box;
25 .narrate-row:not(:first-child) {
26 border-top: 1px solid var(--border-color);
31 #narrate-control > button {
32 background-size: 24px 24px;
33 background-repeat: no-repeat;
34 background-position: center center;
39 box-sizing: border-box;
42 #narrate-control > button:not(:first-child) {
43 border-left: 1px solid var(--border-color);
46 #narrate-skip-previous {
47 border-top-left-radius: 3px;
48 background-image: url("chrome://global/skin/narrate/back.svg");
49 -moz-context-properties: fill;
50 fill: rgb(128 128 128);
54 border-top-right-radius: 3px;
55 background-image: url("chrome://global/skin/narrate/forward.svg");
56 -moz-context-properties: fill;
57 fill: rgb(128 128 128);
60 #narrate-skip-previous:disabled,
61 #narrate-skip-next:disabled {
62 fill: rgb(128 128 128 / 50%);
66 background-image: url("chrome://global/skin/narrate/start.svg");
69 #narrate-dropdown.speaking #narrate-start-stop {
70 background-image: url("chrome://global/skin/narrate/stop.svg");
75 #narrate-rate::before, #narrate-rate::after {
79 background-position: center;
80 background-repeat: no-repeat;
81 background-size: 24px auto;
84 #narrate-rate::before {
85 background-image: url("chrome://global/skin/narrate/slow.svg");
88 #narrate-rate::after {
89 background-image: url("chrome://global/skin/narrate/fast.svg");
97 #narrate-rate-input::-moz-range-track {
98 background-color: #979797;
102 #narrate-rate-input::-moz-range-progress {
103 background-color: #2EA3FF;
107 #narrate-rate-input::-moz-range-thumb {
108 background-color: #808080;
115 #narrate-rate-input:active::-moz-range-thumb {
116 background-color: #2EA3FF;
119 /* Voice selection */
125 .voiceselect > button.select-toggle,
126 .voiceselect > .options > button.option {
127 -moz-appearance: none;
133 .voiceselect.open > button.select-toggle {
134 border-bottom: 1px solid var(--border-color);
137 .voiceselect > button.select-toggle::after {
139 background-image: url("chrome://global/skin/narrate/arrow.svg");
140 background-position: center;
141 background-repeat: no-repeat;
142 background-size: 12px 12px;
143 display: inline-block;
146 vertical-align: middle;
149 .voiceselect > .options > button.option:not(:first-child) {
150 border-top: 1px solid var(--border-color);
153 .voiceselect > .options > button.option {
154 box-sizing: border-box;
157 .voiceselect > .options:not(.hovering) > button.option:focus {
158 background-color: #eaeaea;
161 .voiceselect > .options:not(.hovering) > button.option:hover:not(:focus) {
162 background-color: transparent;
165 .voiceselect > .options > button.option::-moz-focus-inner {
170 .voiceselect > .options {
175 .voiceselect.open > .options {
183 .voiceselect:not(.open) > button,
185 border-radius: 0 0 3px 3px;