Source code
Revision control
Copy as Markdown
Other Tools
/* 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
/* 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,
body.contrast {
--current-voice: #a09eac;
--narrate-word-highlight-color: #6f6f6f;
--narrating-paragraph-background-color: #242424;
}
body.custom {
--narrating-paragraph-background-color: var(--custom-theme-selection-highlight);
}
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-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(--popup-button-foreground);
}
.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(--popup-button-foreground);
height: 2px;
}
.narrate-rate-input::-moz-range-progress {
background-color: var(--primary-color);
height: 2px;
}
.narrate-rate-input::-moz-range-thumb {
background-color: var(--popup-button-foreground);
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 .label {
color: var(--popup-button-foreground);
}
.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;
color: var(--popup-button-foreground);
}
.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;
}