1 files changed, 277 insertions, 0 deletions
diff --git a/toolkit/themes/shared/narrate.css b/toolkit/themes/shared/narrate.css
new file mode 100644
index 0000000000..fbda43841e
--- /dev/null
+++ b/toolkit/themes/shared/narrate.css
@@ -0,0 +1,277 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* Avoid adding ID selector rules in this style sheet, since they could
+ * inadvertently match elements in the article content. */
+
+body {
+  --current-voice: #7f7f7f;
+  --narrate-word-highlight-color: #ffe087;
+  --narrating-paragraph-background-color: #ffc;
+}
+
+body.sepia {
+  --narrate-word-highlight-color: #bdb5a5;
+  --narrating-paragraph-background-color: #e0d7c5;
+}
+
+body.dark {
+  --current-voice: #a09eac;
+  --narrate-word-highlight-color: #6f6f6f;
+  --narrating-paragraph-background-color: #242424;
+}
+
+body.hcm {
+  --current-voice: inherit;
+  --narrate-word-highlight-color: SelectedItem;
+  --narrating-paragraph-background-color: Canvas;
+}
+
+.narrating {
+  position: relative;
+  z-index: 1;
+  background-color: var(--narrating-paragraph-background-color);
+}
+
+.narrate-word-highlight {
+  position: absolute;
+  display: none;
+  transform: translate(-50%, calc(-50% - 2px));
+  z-index: -1;
+  border-bottom: 7px solid var(--narrate-word-highlight-color);
+  transition: left 0.1s ease, width 0.1s ease;
+}
+
+body.hcm .narrate-word-highlight {
+  /* Shift the word highlight a bit downwards to not cover the bottom part of characters.
+   * The z-index above is meant to have the highlight appear below the text,
+   * but that's not best practice in HCM so we do this instead. */
+  transform: translate(-50%, calc(-50% + 2px));
+  border-bottom-width: 3px;
+}
+
+.narrating > .narrate-word-highlight {
+  display: inline-block;
+}
+
+.narrate-word-highlight.newline {
+  transition: none;
+}
+
+.narrate-toggle {
+  background-image: url("chrome://global/skin/narrate/headphone.svg");
+}
+
+.speaking .narrate-toggle {
+  /* This shows with an animation. */
+  background-image: url("chrome://global/skin/narrate/headphone-active.svg");
+  fill: var(--toolbar-button-foreground-active);
+}
+
+body.hcm .speaking .narrate-toggle {
+  background-color: var(--toolbar-button-background-active);
+  border-color: var(--toolbar-button-border-active);
+}
+
+body.hcm .speaking:not(.open) .narrate-toggle:hover {
+  background-color: var(--toolbar-button-background-hover);
+  border-color: var(--toolbar-button-border-hover);
+  fill: var(--toolbar-button-foreground-hover);
+}
+
+.narrate-dropdown > .dropdown-popup button {
+  background-color: transparent;
+  fill: var(--popup-button-foreground);
+}
+
+.narrate-dropdown > .dropdown-popup button:enabled:hover {
+  background-color: var(--popup-button-background-hover);
+  color: var(--popup-button-foreground-hover);
+  fill: var(--popup-button-foreground-hover);
+}
+
+.narrate-dropdown > .dropdown-popup button:enabled:hover:active {
+  background-color: var(--popup-button-background-active);
+}
+
+.narrate-dropdown > .dropdown-popup button:enabled:focus-visible {
+  outline: 2px solid var(--outline-focus-color);
+  outline-offset: -2px;
+}
+
+.narrate-dropdown > .dropdown-popup {
+  top: -34px;
+}
+
+.narrate-dropdown .dropdown-arrow {
+  top: 40px;
+}
+
+.narrate-row {
+  display: flex;
+  align-items: center;
+  min-height: 40px;
+  box-sizing: border-box;
+}
+
+.narrate-row:not(.narrate-voices) {
+  direction: ltr;
+}
+
+.narrate-row:not(:first-child) {
+  border-top: 1px solid var(--popup-line);
+}
+
+/* Control buttons */
+
+.narrate-control > button {
+  background-size: 24px 24px;
+  background-repeat: no-repeat;
+  background-position: center center;
+  height: 64px;
+  width: 82px;
+  border: none;
+  box-sizing: border-box;
+}
+
+.narrate-control > button:not(:first-child) {
+  border-inline-start: 1px solid var(--popup-line);
+}
+
+.narrate-skip-previous {
+  border-top-left-radius: 3px;
+  background-image: url("chrome://global/skin/narrate/back.svg");
+}
+
+.narrate-skip-next {
+  border-top-right-radius: 3px;
+  background-image: url("chrome://global/skin/narrate/forward.svg");
+}
+
+.narrate-start-stop {
+  background-image: url("chrome://global/skin/narrate/start.svg");
+}
+
+.narrate-dropdown.speaking .narrate-start-stop {
+  background-image: url("chrome://global/skin/narrate/stop.svg");
+}
+
+/* Rate control */
+
+.narrate-rate::before,
+.narrate-rate::after {
+  content: '';
+  width: 48px;
+  height: 40px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 24px auto;
+  -moz-context-properties: fill;
+  fill: var(--icon-fill);
+}
+
+.narrate-rate::before {
+  background-image: url("chrome://global/skin/narrate/slow.svg");
+}
+
+.narrate-rate::after {
+  background-image: url("chrome://global/skin/narrate/fast.svg");
+}
+
+.narrate-rate-input {
+  margin: 0 1px;
+  flex-grow: 1;
+  background-color: var(--popup-background);
+  border-radius: 2px;
+  width: 148px;
+}
+
+.narrate-rate-input:focus-visible {
+  outline: 2px solid var(--outline-focus-color);
+  outline-offset: 2px;
+}
+
+.narrate-rate-input::-moz-range-track {
+  background-color: var(--icon-fill);
+  height: 2px;
+}
+
+.narrate-rate-input::-moz-range-progress {
+  background-color: var(--primary-color);
+  height: 2px;
+}
+
+.narrate-rate-input::-moz-range-thumb {
+  background-color: var(--icon-fill);
+  height: 16px;
+  width: 16px;
+  border-radius: 8px;
+  border-width: 0;
+}
+
+.narrate-rate-input:active::-moz-range-thumb {
+  background-color: var(--primary-color);
+}
+
+/* Voice selection */
+
+.voiceselect {
+  width: 246px;
+}
+
+.voiceselect > button.select-toggle,
+.voiceselect > .options > button.option {
+  appearance: none;
+  border: none;
+  width: 100%;
+  min-height: 40px;
+}
+
+.voiceselect > button.select-toggle::after {
+  content: '';
+  background-image: url("chrome://global/skin/narrate/arrow.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 12px 12px;
+  display: inline-block;
+  width: 1.5em;
+  height: 1em;
+  vertical-align: middle;
+}
+
+.current-voice {
+  color: var(--current-voice);
+}
+
+.voiceselect > .options {
+  display: none;
+  overflow-y: auto;
+}
+
+.voiceselect.open > .options {
+  display: block;
+  border-top: 1px solid var(--popup-line);
+}
+
+.voiceselect > .options > button.option {
+  box-sizing: border-box;
+}
+
+.voiceselect > .options > button.option:not(:first-child) {
+  border-top: 1px solid var(--popup-line);
+}
+
+.voiceselect > .options > button.option::-moz-focus-inner {
+  outline: none;
+  border: 0;
+}
+
+.voiceselect > .options:not(.hovering) > button.option:hover:not(:focus) {
+  background-color: transparent;
+}
+
+.voiceselect:not(.open) > button,
+.voiceselect .option:last-child {
+  border-radius: 0 0 3px 3px;
+}