2 --border-color: #e5e5e5;
6 background-image: url("chrome://global/skin/narrate/narrate.svg");
9 .dropdown-popup button {
10 background-color: transparent;
13 .dropdown-popup button:hover:not(:disabled) {
14 background-color: #eaeaea;
21 box-sizing: border-box;
24 .narrate-row:not(:first-child) {
25 border-top: 1px solid var(--border-color);
30 #narrate-control > button {
31 background-size: 24px 24px;
32 background-repeat: no-repeat;
33 background-position: center center;
38 box-sizing: border-box;
41 #narrate-control > button:not(:first-child) {
42 border-left: 1px solid var(--border-color);
45 #narrate-skip-previous {
46 border-top-left-radius: 3px;
47 background-image: url("chrome://global/skin/narrate/back.svg#enabled");
51 border-top-right-radius: 3px;
52 background-image: url("chrome://global/skin/narrate/forward.svg#enabled");
55 #narrate-skip-previous:disabled {
56 background-image: url("chrome://global/skin/narrate/back.svg#disabled");
59 #narrate-skip-next:disabled {
60 background-image: url("chrome://global/skin/narrate/forward.svg#disabled");
64 background-image: url("chrome://global/skin/narrate/start.svg");
67 #narrate-start-stop.speaking {
68 background-image: url("chrome://global/skin/narrate/stop.svg");
73 #narrate-rate::before, #narrate-rate::after {
77 background-position: center;
78 background-repeat: no-repeat;
79 background-size: 24px auto;
82 #narrate-rate::before {
83 background-image: url("chrome://global/skin/narrate/slow.svg");
86 #narrate-rate::after {
87 background-image: url("chrome://global/skin/narrate/fast.svg");
95 #narrate-rate-input::-moz-range-track {
96 background-color: #979797;
100 #narrate-rate-input::-moz-range-progress {
101 background-color: #2EA3FF;
105 #narrate-rate-input::-moz-range-thumb {
106 background-color: #808080;
113 #narrate-rate-input:active::-moz-range-thumb {
114 background-color: #2EA3FF;
117 /* Voice selection */
123 .voiceselect > button.select-toggle,
124 .voiceselect > .options > button.option {
125 -moz-appearance: none;
131 .voiceselect.open > button.select-toggle {
132 border-bottom: 1px solid var(--border-color);
135 .voiceselect > button.select-toggle::after {
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;
144 vertical-align: middle;
147 .voiceselect > .options > button.option:not(:first-child) {
148 border-top: 1px solid var(--border-color);
151 .voiceselect > .options > button.option {
152 box-sizing: border-box;
155 .voiceselect > .options:not(.hovering) > button.option:focus {
156 background-color: #eaeaea;
159 .voiceselect > .options:not(.hovering) > button.option:hover:not(:focus) {
160 background-color: transparent;
163 .voiceselect > .options > button.option::-moz-focus-inner {
168 .voiceselect > .options {
173 .voiceselect.open > .options {
181 .voiceselect:not(.open) > button,
183 border-radius: 0 0 3px 3px;