LCARStrek/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#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 }