Commit | Line | Data |
---|---|---|
1988bb88 RK |
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 | window { | |
6 | border: 1px solid #9C9CFF; | |
7 | } | |
8 | ||
9 | #audioVideoButton, | |
10 | #screenShareButton, | |
11 | #firefoxButton { | |
12 | height: 29px; | |
13 | margin: 0; | |
14 | -moz-appearance: none; | |
15 | border-style: none; | |
16 | } | |
17 | ||
18 | #firefoxButton { | |
19 | background-image: url("chrome://branding/content/icon48.png"); | |
20 | background-repeat: no-repeat; | |
21 | background-size: 22px; | |
22 | background-position: center center; | |
23 | min-width: 29px; | |
24 | background-color: #000000; | |
25 | } | |
26 | ||
27 | #firefoxButton:hover { | |
28 | background-color: #FFCF00; | |
29 | } | |
30 | ||
31 | #screenShareButton { | |
32 | background-image: url("webRTC-screen-white-16.png"); | |
33 | background-position: center center; | |
34 | background-repeat: no-repeat; | |
35 | background-size: 16px; | |
36 | min-width: 27px; | |
37 | display: none; | |
38 | } | |
39 | ||
40 | window[sharingscreen] > #screenShareButton { | |
41 | display: -moz-box; | |
42 | } | |
43 | ||
44 | #audioVideoButton { | |
45 | display: none; | |
46 | background-repeat: no-repeat; | |
47 | } | |
48 | ||
49 | /* When screen sharing, need to pull in the separator: */ | |
50 | window[sharingscreen] > #audioVideoButton { | |
51 | margin-right: -1px; | |
52 | } | |
53 | ||
54 | /* Single icon button: */ | |
55 | window[sharingvideo] > #audioVideoButton, | |
56 | window[sharingaudio] > #audioVideoButton { | |
57 | display: -moz-box; | |
58 | background-position: center center; | |
59 | background-size: 16px; | |
60 | min-width: 26px; | |
61 | } | |
62 | ||
63 | window[sharingvideo] > #audioVideoButton { | |
64 | background-image: url("webRTC-camera-16.png"); | |
65 | } | |
66 | ||
67 | window[sharingaudio] > #audioVideoButton { | |
68 | background-image: url("webRTC-microphone-16.png"); | |
69 | } | |
70 | ||
71 | /* Multi-icon button: */ | |
72 | window[sharingaudio][sharingvideo] > #audioVideoButton { | |
73 | background-image: url("webRTC-camera-16.png"), | |
74 | url("webRTC-microphone-16.png"); | |
75 | background-position: 6px center, 26px center; | |
76 | background-size: 16px, 16px; | |
77 | min-width: 46px; | |
78 | } | |
79 | ||
80 | /* Hover styles */ | |
81 | #audioVideoButton, | |
82 | #screenShareButton { | |
83 | /* background-color: #C09070;*/ | |
84 | } | |
85 | ||
86 | #audioVideoButton:hover, | |
87 | #screenShareButton:hover { | |
88 | /* background-color: #FFCF00;*/ | |
89 | } | |
90 | ||
91 | /* Don't show the dropmarker for the type="menu" case */ | |
92 | #audioVideoButton > .box-inherit > .button-menu-dropmarker, | |
93 | #screenShareButton > .box-inherit > .button-menu-dropmarker { | |
94 | display: none; | |
95 | } | |
96 | ||
97 | /* Separator in case of screen sharing + video/audio sharing */ | |
98 | #shareSeparator { | |
99 | width: 1px; | |
100 | margin: 4px -1px 4px 0; | |
101 | background-color: #A09090; | |
102 | /* Separator needs to show above either button when they're hovered: */ | |
103 | position: relative; | |
104 | z-index: 1; | |
105 | display: none; | |
106 | } | |
107 | ||
108 | window[sharingscreen][sharingvideo] > #shareSeparator, | |
109 | window[sharingscreen][sharingaudio] > #shareSeparator { | |
110 | display: -moz-box; | |
111 | } | |
112 | ||
113 | :-moz-any(#audioVideoButton, #screenShareButton, | |
114 | #firefoxButton):-moz-focusring > .button-box { | |
115 | border: none; | |
116 | } |