make share icon look a bit more centered
[themes.git] / LCARStrek / browser / webRTC-indicator.css
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 }