Add duplicate audio comparison controls

serato_doctor/webui/layout-fixes.css

@@ -7,3 +7,112 @@
     margin-top: 28px;
   }
 }
+
+.file-compare-row {
+  display: grid;
+  gap: 8px;
+  padding: 9px 0;
+  border-top: 1px solid rgba(255, 255, 255, .05);
+}
+
+.file-compare-row:first-child {
+  border-top: 0;
+}
+
+.file-compare-row div,
+.file-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+}
+
+.file-compare-row button,
+.file-actions button {
+  border: 1px solid rgba(155, 135, 245, .25);
+  border-radius: 8px;
+  padding: 7px 9px;
+  background: rgba(155, 135, 245, .08);
+  color: #d8d2f6;
+  font: 700 10px/1 inherit;
+  cursor: pointer;
+}
+
+.keeper-option {
+  justify-content: space-between;
+}
+
+.keeper-option > label {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+  cursor: pointer;
+}
+
+.audio-preview {
+  position: fixed;
+  right: 24px;
+  bottom: 20px;
+  display: grid;
+  grid-template-columns: minmax(150px, .7fr) minmax(240px, 1.3fr) auto;
+  align-items: center;
+  gap: 16px;
+  width: min(720px, calc(100vw - 48px));
+  padding: 13px 14px;
+  border: 1px solid rgba(102, 217, 232, .3);
+  border-radius: 14px;
+  background: rgba(16, 21, 29, .96);
+  box-shadow: 0 16px 48px rgba(0, 0, 0, .45);
+  z-index: 5;
+}
+
+.audio-preview[hidden] {
+  display: none;
+}
+
+.audio-preview span,
+.audio-preview strong {
+  display: block;
+}
+
+.audio-preview span {
+  color: var(--cyan);
+  font-size: 9px;
+  text-transform: uppercase;
+  letter-spacing: .1em;
+}
+
+.audio-preview strong {
+  max-width: 360px;
+  margin-top: 4px;
+  overflow: hidden;
+  color: var(--text);
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.audio-preview audio {
+  width: 100%;
+  height: 34px;
+}
+
+.audio-preview > button {
+  border: 0;
+  background: transparent;
+  color: var(--muted);
+  font-size: 22px;
+  cursor: pointer;
+}
+
+@media (max-width: 680px) {
+  .keeper-option,
+  .audio-preview {
+    align-items: stretch;
+    grid-template-columns: 1fr;
+  }
+
+  .keeper-option {
+    flex-direction: column;
+  }
+}