EarlyBlue/global/narrateControls.css

   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");
  49   -moz-context-properties: fill;
  50   fill: rgb(128 128 128);
  51 }
  52
  53 #narrate-skip-next {
  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);
  58 }
  59
  60 #narrate-skip-previous:disabled,
  61 #narrate-skip-next:disabled {
  62   fill: rgb(128 128 128 / 50%);
  63 }
  64
  65 #narrate-start-stop {
  66   background-image: url("chrome://global/skin/narrate/start.svg");
  67 }
  68
  69 #narrate-dropdown.speaking #narrate-start-stop {
  70   background-image: url("chrome://global/skin/narrate/stop.svg");
  71 }
  72
  73 /* Rate control */
  74
  75 #narrate-rate::before, #narrate-rate::after {
  76   content: '';
  77   width: 48px;
  78   height: 40px;
  79   background-position: center;
  80   background-repeat: no-repeat;
  81   background-size: 24px auto;
  82 }
  83
  84 #narrate-rate::before {
  85   background-image: url("chrome://global/skin/narrate/slow.svg");
  86 }
  87
  88 #narrate-rate::after {
  89   background-image: url("chrome://global/skin/narrate/fast.svg");
  90 }
  91
  92 #narrate-rate-input {
  93   margin: 0 1px;
  94   flex-grow: 1;
  95 }
  96
  97 #narrate-rate-input::-moz-range-track {
  98   background-color: #979797;
  99   height: 2px;
 100 }
 101
 102 #narrate-rate-input::-moz-range-progress {
 103   background-color: #2EA3FF;
 104   height: 2px;
 105 }
 106
 107 #narrate-rate-input::-moz-range-thumb {
 108   background-color: #808080;
 109   height: 16px;
 110   width: 16px;
 111   border-radius: 8px;
 112   border-width: 0;
 113 }
 114
 115 #narrate-rate-input:active::-moz-range-thumb {
 116   background-color: #2EA3FF;
 117 }
 118
 119 /* Voice selection */
 120
 121 .voiceselect {
 122   width: 100%;
 123 }
 124
 125 .voiceselect > button.select-toggle,
 126 .voiceselect > .options > button.option {
 127   -moz-appearance: none;
 128   border: none;
 129   width: 100%;
 130   min-height: 40px;
 131 }
 132
 133 .voiceselect.open > button.select-toggle {
 134   border-bottom: 1px solid var(--border-color);
 135 }
 136
 137 .voiceselect > button.select-toggle::after {
 138   content: '';
 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;
 144   width: 1.5em;
 145   height: 1em;
 146   vertical-align: middle;
 147 }
 148
 149 .voiceselect > .options > button.option:not(:first-child) {
 150   border-top: 1px solid var(--border-color);
 151 }
 152
 153 .voiceselect > .options > button.option  {
 154   box-sizing: border-box;
 155 }
 156
 157 .voiceselect > .options:not(.hovering) > button.option:focus {
 158   background-color: #eaeaea;
 159 }
 160
 161 .voiceselect > .options:not(.hovering) > button.option:hover:not(:focus) {
 162   background-color: transparent;
 163 }
 164
 165 .voiceselect > .options > button.option::-moz-focus-inner {
 166   outline: none;
 167   border: 0;
 168 }
 169
 170 .voiceselect > .options {
 171   display: none;
 172   overflow-y: auto;
 173 }
 174
 175 .voiceselect.open > .options {
 176   display: block;
 177 }
 178
 179 .current-voice {
 180   color: #7f7f7f;
 181 }
 182
 183 .voiceselect:not(.open) > button,
 184 .option:last-child {
 185   border-radius: 0 0 3px 3px;
 186 }