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