Commit 17927a6b authored by Mike Conley's avatar Mike Conley
Browse files

Bug 1546983 - Make the Picture-in-Picture player window control buttons less... 

Bug 1546983 - Make the Picture-in-Picture player window control buttons less sensitive to being in a thin window. r=dthayer

Differential Revision: https://phabricator.services.mozilla.com/D30280

--HG--
extra : moz-landing-system : lando
parent 0b9cef82

toolkit/components/pictureinpicture/content/player.xhtml

+7 −3
Original line number Original line Diff line number Diff line
@@ -23,9 +23,13 @@ 
    </div>

    </div>

    <div id="controls">

    <div id="controls">

      <div id="close" class="control-item"></div>

      <div id="close" class="control-item"></div>



      <div id="controls-bottom">

        <div id="unpip" class="control-item"></div>

        <div id="unpip" class="control-item"></div>

        <div id="gap"></div>

        <div id="pause" class="control-item"></div>

        <div id="pause" class="control-item"></div>

        <div id="play" class="control-item"></div>

        <div id="play" class="control-item"></div>

      </div>

      </div>

    </div>

  </body>

  </body>

</html>
 
</html>

toolkit/themes/shared/pictureinpicture/player.css

+17 −5
Original line number Original line Diff line number Diff line
@@ -33,11 +33,23 @@ browser { 
  -moz-window-dragging: drag;

  -moz-window-dragging: drag;

}

}





#controls-bottom {

  display: flex;

  position: absolute;

  bottom: 15px;

  justify-content: center;

  width: 100%;

}



#gap {

  flex: 0.1;

  max-width: 50px;

}



.control-item {

.control-item {

  -moz-window-dragging: no-drag;

  -moz-window-dragging: no-drag;

  background: var(--btn-bg-color);

  background: var(--btn-bg-color);

  border-radius: 4px;

  border-radius: 4px;

  bottom: 15px;

  cursor: pointer;

  cursor: pointer;

  /**

  /**

   * Make the button dimensions a square proportional to one

   * Make the button dimensions a square proportional to one
@@ -50,24 +62,24 @@ browser { 
  max-width: 32px;

  max-width: 32px;

  min-height: 16px;

  min-height: 16px;

  min-width: 16px;

  min-width: 16px;

  position: absolute;

  transition: opacity 160ms linear;

  transition: opacity 160ms linear;

  opacity: 0;

  opacity: 0;

  background-repeat: no-repeat;

  background-repeat: no-repeat;

}

}





#controls:hover > .control-item {

#controls:hover .control-item {

  opacity: 0.8;

  opacity: 0.8;

}

}





#controls[showing] > .control-item,

#controls[showing] .control-item,

#controls:hover > .control-item:hover {

#controls:hover .control-item:hover {

  opacity: 1;

  opacity: 1;

}

}





#close {

#close {

  background-color: var(--close-btn-bg-color);

  background-color: var(--close-btn-bg-color);

  background-image: url("chrome://global/skin/pictureinpicture/close-pip.svg");

  background-image: url("chrome://global/skin/pictureinpicture/close-pip.svg");

  position: absolute;

  right: 10px;

  right: 10px;

  top: 10px;

  top: 10px;

}

}