style transcript div

youtube/static/js/transcript-table.js

@@ -103,7 +103,7 @@ window.addEventListener('DOMContentLoaded', function() {
   let tts = Q("video").textTracks;
   if (!tts.length) return;
 
-  details_tt = Q("details#transcript-box");
+  details_tt = Q("details#transcript-details");
   details_tt.addEventListener("toggle", () => {
     if (details_tt.open) loadCues();
   });

youtube/templates/watch.html

@@ -313,6 +313,10 @@
     table#transcript-table td, th {
         border: 1px solid #dddddd;
     }
+    div#transcript-div {
+        background-color: var(--interface-color);
+        padding: 5px;
+    }
 {% endblock style %}
 
 {% block main %}
@@ -591,9 +595,9 @@ Reload without invidious (for usage of new identity button).</a>
         {% endif %}
 
         {% if subtitle_sources %}
-            <details id="transcript-box">
+            <details id="transcript-details">
                 <summary>Transcript</summary>
-                <div>
+                <div id="transcript-div">
                     <select id="select-tt">
                         {% for source in subtitle_sources %}
                             <option>{{ source['label'] }}</option>