Bug 1812936 - Keep playpause button centered in PiP. r=pip-reviewers,mhowell (202e78e1) · Commits · The Tor Project / Applications / Tor Browser

toolkit/components/pictureinpicture/content/player.xhtml

+40 −34

Original line number	Diff line number	Diff line
		@@ -66,11 +66,16 @@
		</div>
		</div>
		<div class="controls-bottom-lower">
		<div class="start-controls">
		<div id="timestamp" class="control-item" hidden="true"></div>
		</div>
		<div class="center-controls">
		<button id="seekBackward" class="control-item control-button tooltip-over-controls center-tooltip" hidden="true" data-l10n-id="pictureinpicture-seekbackward-btn" data-l10n-attrs="tooltip" tabindex="11"></button>
		<button id="playpause" class="control-item control-button tooltip-over-controls center-tooltip" tabindex="1"
		data-l10n-id="pictureinpicture-pause-btn" data-l10n-attrs="tooltip"/>
		<button id="seekForward" class="control-item control-button tooltip-over-controls center-tooltip" hidden="true" data-l10n-id="pictureinpicture-seekforward-btn" data-l10n-attrs="tooltip" tabindex="2"></button>
		</div>
		<div class="end-controls">
		<button id="audio" class="control-item control-button tooltip-over-controls center-tooltip" hidden="true" data-l10n-attrs="tooltip" tabindex="3"/>
		<button id="closed-caption" class="control-item control-button tooltip-over-controls center-tooltip closed-caption" hidden="true" disabled="true" data-l10n-id="pictureinpicture-subtitles-btn" data-l10n-attrs="tooltip" tabindex="4"></button>
		<div id="settings" class="hide">
		@@ -107,5 +112,6 @@
		</div>
		</div>
		</div>
		</div>
		</body>
		</html>

toolkit/themes/shared/pictureinpicture/player.css

+42 −24

Original line number	Diff line number	Diff line
		@@ -84,10 +84,28 @@ browser {

		.controls-bottom-lower {
		display: grid;
		grid-template-columns: 16ch auto repeat(3, minmax(16px, 32px)) auto repeat(3, minmax(16px, 32px));
		grid-template-areas:
		"timestamp . seekbackward playpause seekforward . audio closedcaption fullscreen";
		grid-template-columns: repeat(3, 1fr);
		margin: 0 24px;
		}

		.start-controls {
		display: grid;
		justify-self: start;
		}

		.center-controls {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-areas: "seekbackward playpause seekforward";
		justify-self: center;
		gap: 8px;
		}

		.end-controls {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-areas: "audio closedcaption fullscreen";
		justify-self: end;
		gap: 8px;
		}

		@@ -542,34 +560,26 @@ input:checked + .slider::before {
		display: none;
		}

		.controls-bottom-lower {
		grid-template-columns: 16ch auto repeat(3, minmax(16px, 32px)) auto repeat(2, minmax(16px, 32px));
		grid-template-areas:
		"timestamp . seekbackward playpause seekforward . audio fullscreen";
		.end-controls {
		grid-template-columns: repeat(2, 1fr);
		grid-template-areas: "audio fullscreen";
		}
		}

		@media (width <= 400px) {
		#fullscreen {
		@media (width <= 440px) {
		#timestamp {
		display: none;
		}

		.controls-bottom-lower {
		grid-template-columns: 16ch repeat(3, minmax(16px, 32px)) auto minmax(16px, 32px);
		grid-template-areas:
		"timestamp seekbackward playpause seekforward . audio";
		}
		}

		@media (width <= 350px) {
		#timestamp {
		#fullscreen {
		display: none;
		}

		.controls-bottom-lower {
		grid-template-columns: auto repeat(3, minmax(16px, 32px)) auto minmax(16px, 32px);
		grid-template-areas:
		". seekbackward playpause seekforward . audio";
		.end-controls {
		grid-template-columns: repeat(1, 1fr);
		grid-template-areas: "audio";
		}
		}

		@@ -582,13 +592,21 @@ input:checked + .slider::before {
		@media (width <= 300px) {
		.scrubber-no-drag,
		#seekForward,
		#seekBackward {
		#seekBackward,
		.start-controls {
		display: none;
		}

		.controls-bottom-lower {
		grid-template-columns: auto minmax(16px, 32px) auto minmax(16px, 32px) auto;
		grid-template-areas:
		". playpause . audio .";
		grid-template-columns: repeat(2, 1fr);
		}

		.center-controls {
		grid-template-columns: repeat(1, 1fr);
		grid-template-areas: "playpause";
		}

		.end-controls {
		justify-self: center;
		}
		}