style: add visual styling to time display components

Adds consistent styling to duration and current time display components
across both HTML and React platforms:
- Semi-transparent dark background matching other UI components
- Monospace font for better time alignment
- Proper padding, borders, and text alignment
- Consistent color scheme with existing control bar elements

Both HTML and React skins now display time values with proper visual
styling that integrates seamlessly with the control bar design.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

packages/html/html/src/skins/media-skin-default.ts

@@ -42,6 +42,20 @@ export function getTemplateHTML() {
         background: none;
       }
 
+      /* Time Display Styling */
+      media-current-time-display,
+      media-duration-display {
+        background: rgb(20 20 30 / .7);
+        padding: 4px 8px;
+        color: rgb(238 238 238);
+        font-family: monospace;
+        font-size: 14px;
+        border-radius: 2px;
+        min-width: 3em;
+        text-align: center;
+        display: inline-block;
+      }
+
       /* Generic Media Button Styling */
       .button {
         border: none;

packages/react/react/src/skins/MediaSkinDefault.tsx

@@ -31,9 +31,9 @@ export const MediaSkinDefault: React.FC<{ children: React.ReactNode }> = ({
             <PlayIcon className={styles.PlayIcon}></PlayIcon>
             <PauseIcon className={styles.PauseIcon}></PauseIcon>
           </PlayButton>
-          <CurrentTimeDisplay />
+          <CurrentTimeDisplay className={styles.TimeDisplay} />
           <TimeRange className={styles.TimeRange} />
-          <DurationDisplay />
+          <DurationDisplay className={styles.TimeDisplay} />
           {/* @ts-ignore */}
           <MuteButton className={`${styles.Button} ${styles.MediaMuteButton}`}>
             <VolumeHighIcon

packages/react/react/src/skins/styles.module.css

@@ -73,6 +73,18 @@
   flex-grow: 1;
 }
 
+/* Time Display Styling */
+.TimeDisplay {
+  background: rgb(20 20 30 / 0.7);
+  padding: 4px 8px;
+  color: rgb(238 238 238);
+  font-family: monospace;
+  font-size: 14px;
+  border-radius: 2px;
+  min-width: 3em;
+  text-align: center;
+}
+
 /* Base Button Styling */
 .MediaPlayButton {
   border: none;