Popkon - Trending Short Dramas

Colors

• #202124sheet-bg · modal bottom sheet background
• #292a2dcontainer-bg · playback options grouped card container
• #e7c94baccent-active · selected speed and quality labels
• #fffffftext-primary · sheet title · row header labels · close button
• #8a8c90text-unselected · inactive option labels
• #38393eclose-button-fill · circular close button background
• #34363adivider-line · horizontal divider between options rows

Type

• sheet-titleSF Pro Text · 36px · 600 · #ffffff
• setting-row-labelSF Pro Text · 32px · 500 · #ffffff
• setting-optionSF Pro Text · 28px · 400 · #8a8c90
• setting-option-activeSF Pro Text · 28px · 600 · #e7c94b

Elements

• Playback Settings Sheet · sheet

  Bottom modal sheet occupying roughly lower 35% of the screen. · Dark rounded container with centered title 'Playback settings' and circular 'X' close button at top right.

• Settings Group Container · card

  Full-width rounded card inside the sheet with 24px internal padding and thin row dividers. · Slightly lighter dark grey container with three horizontal setting rows: Speed, Quality, and Download.

• Close Button · button

  Top-right aligned circular button inside the sheet header. · Circular dark grey fill with white 'x' vector icon.

• VIP Tag · badge

  Inline badge next to 1080P and Download options. · Rounded rectangular outline badge containing the uppercase string 'VIP'.

Layout

Modal bottom-sheet layout overlaying vertical video. Features a modal header followed by an enclosed card grouping playback speed, resolution quality, and download triggers.

Notes

Active selections (1.0x and 720P) are highlighted in gold/yellow while other options are subdued grey.