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