webRTC-indicator.css (10441B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 @import url("chrome://browser/skin/webRTC-menubar-indicator.css"); 6 @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 7 @namespace html url("http://www.w3.org/1999/xhtml"); 8 9 :root { 10 appearance: none; 11 background: transparent; 12 border: 0; 13 border-radius: var(--border-radius-small); 14 --indicator-height: 32px; 15 --indicator-background-color: rgb(249, 249, 250); 16 --indicator-color: rgb(12, 12, 13); 17 --indicator-border-color: hsla(0, 0%, 0%, 0.32); 18 --indicator-icon-fill-opacity: 0.8; 19 --indicator-item-separator: 1px solid hsla(210, 4%, 10%, 0.14); 20 --indicator-stop-button-background-color: rgb(0, 96, 223); 21 --indicator-stop-button-hover-background-color: rgb(0, 62, 170); 22 --indicator-stop-button-color: rgb(255, 255, 255); 23 --minimize-button-background-color: hsla(240, 5%, 5%, 0.1); 24 --minimize-button-hover-background-color: hsla(240, 5%, 5%, 0.15); 25 --minimize-button-active-background-color: hsla(240, 5%, 5%, 0.2); 26 --control-icon-unchecked-hover-background-color: hsla(0, 0%, 70%, 0.4); 27 --control-icon-unchecked-active-background-color: hsla(0, 0%, 70%, 0.6); 28 --control-icon-checked-background-color: hsla(10, 100%, 50%, 0.16); 29 --control-icon-checked-icon-fill: rgb(215, 0, 34); 30 --control-icon-checked-hover-background-color: hsla(10, 100%, 50%, 0.24); 31 --control-icon-checked-active-background-color: hsla(10, 100%, 50%, 0.32); 32 max-height: var(--indicator-height); 33 } 34 35 @media (prefers-color-scheme: dark) { 36 :root { 37 --indicator-background-color: hsl(240, 1%, 20%); 38 --indicator-color: rgb(249, 249, 250); 39 --indicator-border-color: hsl(240, 1%, 40%); 40 --indicator-item-separator: 1px solid rgb(249, 249, 250); 41 --minimize-button-background-color: rgba(249, 249, 250, 0.1); 42 --minimize-button-hover-background-color: rgba(249, 249, 250, 0.15); 43 --minimize-button-active-background-color: rgba(249, 249, 250, 0.2); 44 --control-icon-unchecked-hover-background-color: rgba(249, 249, 250, 0.15); 45 --control-icon-unchecked-active-background-color: rgba(249, 249, 250, 0.2); 46 --control-icon-checked-background-color: hsla(343, 100%, 58%, 0.16); 47 --control-icon-checked-icon-fill: rgb(255, 40, 102); 48 --control-icon-checked-hover-background-color: hsla(343, 100%, 58%, 0.24); 49 --control-icon-checked-active-background-color: hsla(343, 100%, 58%, 0.32); 50 } 51 } 52 53 body { 54 display: inline-flex; 55 background-color: var(--indicator-background-color); 56 color: var(--indicator-color); 57 margin: 0; 58 user-select: none; 59 -moz-window-dragging: drag; 60 /** 61 * On macOS, for windows with small enough dimensions, we seem to get 62 * vertical scrollbars on the body, even when the contents initially 63 * fit the window. We sidestep this by making sure we never display 64 * scrollbars. 65 */ 66 overflow: hidden; 67 cursor: move; 68 border: 1px solid; 69 border-color: var(--indicator-border-color); 70 /* max-height = indicator height minus top and bottom border */ 71 max-height: calc(var(--indicator-height) - 2px); 72 } 73 74 button, 75 input[type="checkbox"] { 76 appearance: none; 77 border-style: none; 78 margin: 0; 79 -moz-context-properties: fill, fill-opacity; 80 fill: currentColor; 81 fill-opacity: var(--indicator-icon-fill-opacity); 82 background-repeat: no-repeat; 83 -moz-window-dragging: no-drag; 84 color: inherit; 85 } 86 87 .row-item { 88 display: flex; 89 align-items: center; 90 min-width: 30px; 91 margin-block: 5px; 92 margin-inline: 0 5px; 93 box-sizing: border-box; 94 padding: 0 5px; 95 } 96 97 .separator { 98 border-inline-end: var(--indicator-item-separator); 99 min-width: 1px; 100 padding: 0; 101 } 102 103 /** 104 * For display sharing, if we happen to be sharing a window, a **tab**, 105 * and a screen, we want to show the UI for sharing the screen, since 106 * that's the more privacy-sensitive one. 107 * A shared browser tab (`sharingtab`) can be set with or *without* 108 * `sharingwindow`; treat it the same as the old “browser-window” case. 109 */ 110 :root:is([sharingwindow],[sharingtab]):not([sharingscreen]) > body > #display-share > #screen-share-info, 111 :root[sharingwindow]:not([sharingtab]) > body > #display-share > #browser-window-share-info, 112 :root[sharingtab] > body > #display-share > #window-share-info, 113 :root[sharingscreen] > body > #display-share > #window-share-info, 114 :root[sharingscreen] > body > #display-share > #browser-window-share-info, 115 116 /** 117 * If we're not sharing the screen, a window, or a tab, we can 118 * hide the entire display sharing section. 119 */ 120 :root:not([sharingscreen],[sharingwindow],[sharingtab]) > body > #display-share, 121 :root:not([sharingscreen],[sharingwindow],[sharingtab]) > body > #display-share + .separator, 122 :root:not([sharingvideo]) > body > #device-share > #camera-mute-toggle, 123 :root:not([sharingaudio]) > body > #device-share > #microphone-mute-toggle, 124 :root:not([sharingvideo],[sharingaudio]) > body > #device-share, 125 :root:not([sharingvideo],[sharingaudio]) > body > #device-share + .separator { 126 display: none; 127 } 128 129 xul|menu { 130 overflow: hidden; 131 min-height: 0 !important; 132 height: 0 !important; 133 width: 0 !important; 134 appearance: none !important; 135 padding: 0 !important; 136 } 137 138 .control-icon { 139 background-position: center; 140 background-size: 16px; 141 background-color: transparent; 142 padding: 10px 16px; 143 border-radius: var(--border-radius-small); 144 } 145 146 .control-icon + .control-icon { 147 margin-inline-start: 6px; 148 } 149 150 .control-icon:hover { 151 background-color: var(--control-icon-unchecked-hover-background-color); 152 } 153 154 .control-icon:active { 155 background-color: var(--control-icon-unchecked-active-background-color); 156 } 157 158 .control-icon:checked { 159 background-color: var(--control-icon-checked-background-color); 160 -moz-context-properties: fill; 161 fill: var(--control-icon-checked-icon-fill); 162 } 163 164 .control-icon:checked:hover { 165 background-color: var(--control-icon-checked-hover-background-color); 166 } 167 168 .control-icon:checked:active { 169 background-color: var(--control-icon-checked-active-background-color); 170 } 171 172 #display-share-icon { 173 background-image: url("chrome://browser/skin/notification-icons/screen.svg"); 174 width: 16px; 175 height: 16px; 176 margin-inline: 5px 10px; 177 -moz-context-properties: fill, fill-opacity; 178 fill: currentColor; 179 fill-opacity: var(--indicator-icon-fill-opacity); 180 } 181 182 #camera-mute-toggle { 183 background-image: url("chrome://browser/skin/notification-icons/camera.svg"); 184 } 185 186 #camera-mute-toggle:checked { 187 background-image: url("chrome://browser/skin/notification-icons/camera-blocked.svg"); 188 } 189 190 #microphone-mute-toggle { 191 background-image: url("chrome://browser/skin/notification-icons/microphone.svg"); 192 } 193 194 #microphone-mute-toggle:checked { 195 background-image: url("chrome://browser/skin/notification-icons/microphone-blocked.svg"); 196 } 197 198 .stop-button { 199 background-color: var(--indicator-stop-button-background-color); 200 color: var(--indicator-stop-button-color); 201 border-radius: var(--border-radius-small); 202 padding: 3px 5px; 203 margin-inline-start: 15px; 204 } 205 206 .stop-button:hover { 207 background-color: var(--indicator-stop-button-hover-background-color); 208 } 209 210 #window-controls { 211 display: flex; 212 flex-direction: column; 213 align-items: center; 214 } 215 216 #minimize { 217 padding: 10px; 218 min-width: unset; 219 background-image: url("chrome://browser/skin/notification-icons/minimize.svg"); 220 background-color: var(--minimize-button-background-color); 221 } 222 223 #minimize:hover { 224 background-color: var(--minimize-button-hover-background-color); 225 } 226 227 #minimize:active { 228 background-color: var(--minimize-button-active-background-color); 229 } 230 231 #drag-indicator { 232 background-image: url("chrome://browser/skin/notification-icons/drag-indicator.svg"); 233 background-repeat: no-repeat; 234 background-position: center; 235 width: 5px; 236 -moz-context-properties: fill, fill-opacity; 237 fill: currentColor; 238 fill-opacity: 0.4; 239 margin: 5px; 240 } 241 242 @media (-moz-platform: macos) { 243 /** 244 * On macOS, the ordering of the drag indicator and window controls is reversed 245 * to be more native. We re-order all items including their separators so that 246 * the markup and separator hiding and showing logic in the shared CSS file 247 * doesn't need to be macOS-specific. 248 */ 249 #window-controls { 250 order: 1; 251 } 252 253 #display-share + .separator { 254 order: 2; 255 } 256 257 #display-share { 258 order: 3; 259 } 260 261 #device-share + .separator { 262 order: 4; 263 } 264 265 #device-share { 266 order: 5; 267 } 268 269 #drag-indicator { 270 order: 6; 271 } 272 273 /** 274 * The minimize button on macOS should be circular, and the icon should be 275 * centered. The asset we have for the minimize icon puts it along the bottom, 276 * so we manually offset it here. 277 */ 278 #minimize { 279 background-position: center -5px; 280 padding: 8px; 281 border: 1px solid transparent; 282 border-radius: var(--border-radius-circle); 283 } 284 } 285 286 @media (-moz-platform: windows) { 287 @media (prefers-contrast) { 288 :root { 289 --indicator-background-color: -moz-Dialog; 290 --indicator-color: -moz-DialogText; 291 --indicator-border-color: InactiveBorder; 292 --indicator-item-separator: 1px solid ThreeDShadow; 293 --indicator-stop-button-background-color: hsla(0, 0%, 70%, 0.2); 294 --indicator-stop-button-hover-background-color: hsla(0, 0%, 70%, 0.4); 295 --indicator-stop-button-color: inherit; 296 --minimize-button-background-color: hsla(0, 0%, 70%, 0.2); 297 --minimize-button-hover-background-color: hsla(0, 0%, 70%, 0.4); 298 --minimize-button-active-background-color: hsla(0, 0%, 70%, 0.6); 299 --control-icon-unchecked-hover-background-color: hsla(0, 0%, 70%, 0.2); 300 --control-icon-unchecked-active-background-color: hsla(0, 0%, 70%, 0.6); 301 --control-icon-checked-background-color: SelectedItem; 302 --control-icon-checked-icon-fill: SelectedItemText; 303 --control-icon-checked-hover-background-color: hsla(0, 0%, 70%, 0.2); 304 --control-icon-checked-active-background-color: hsla(0, 0%, 70%, 0.6); 305 } 306 307 #minimize, 308 .stop-button { 309 border: 1px outset ThreeDLightShadow; 310 } 311 } 312 313 #webRTC-sharingCamera-menu { 314 --menuitem-icon: url("chrome://browser/skin/notification-icons/camera.png"); 315 } 316 317 #webRTC-sharingMicrophone-menu { 318 --menuitem-icon: url("chrome://browser/skin/notification-icons/microphone.png"); 319 } 320 321 #webRTC-sharingScreen-menu { 322 --menuitem-icon: url("chrome://browser/skin/notification-icons/screen.png"); 323 } 324 }