<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - [Modern Media Controls] Implement reduced and tight padding modes"
href="https://bugs.webkit.org/show_bug.cgi?id=167933">167933</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>[Modern Media Controls] Implement reduced and tight padding modes
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari Technology Preview
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Unspecified
</td>
</tr>
<tr>
<th>OS</th>
<td>Unspecified
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>Media Elements
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>graouts@apple.com
</td>
</tr></table>
<p>
<div>
<pre>The modern media controls, on top of allowing for a compact/legacy mode, also have "reduced" and "tight" padding modes:
- in the scrubber's absence, inline video controls at or below 300pt width use a 12pt left margin for the left buttons container, and a 12pt right margin for the right buttons container, and 16pth button margin inside both containers
- when dropping at or below 120pt width, inline video controls use an 8pt left margin for the left buttons container, and an 8pt right margin for the right buttons container, and 12pt button margin inside both containers
- in the case of audio controls, at 400pt or less, inline controls switch to 12pt margins and button margins for both buttons containers</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>