LCARStrek/global/narrateControls.css

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