diff --git a/src/routes/Player/AudioMenu/AudioMenu.less b/src/routes/Player/AudioMenu/AudioMenu.less index 1887a1e7c..344ec13e7 100644 --- a/src/routes/Player/AudioMenu/AudioMenu.less +++ b/src/routes/Player/AudioMenu/AudioMenu.less @@ -20,30 +20,49 @@ .list { flex: 1; align-self: stretch; + display: flex; + flex-direction: column; + gap: 0.5rem; overflow-y: auto; padding: 0 1rem; - padding-bottom: 0.5rem; + padding-bottom: 1rem; .option { + flex: none; display: flex; flex-direction: row; align-items: center; - height: 3.5rem; + gap: 1rem; + height: 4rem; padding: 0 1.5rem; - margin-bottom: 0.5rem; border-radius: var(--border-radius); &:global(.selected), &:hover { background-color: var(--overlay-color); } - .label { + .info { flex: 1; - max-height: 2.4em; - font-size: 1.1rem; - color: var(--primary-foreground-color); - text-wrap: nowrap; - text-overflow: ellipsis; + display: flex; + flex-direction: column; + gap: 0.25rem; + + .lang, .label { + flex: auto; + text-wrap: nowrap; + text-overflow: ellipsis; + } + + .lang { + font-size: 1.1rem; + line-height: 1.5rem; + color: var(--primary-foreground-color); + } + + .label { + font-size: 0.9rem; + color: var(--color-placeholder-text); + } } .icon { @@ -51,7 +70,6 @@ width: 0.5rem; height: 0.5rem; border-radius: 100%; - margin-left: 1rem; background-color: var(--secondary-accent-color); } } diff --git a/src/routes/Player/AudioMenu/AudioMenu.tsx b/src/routes/Player/AudioMenu/AudioMenu.tsx index 93ffa57b1..92f9c3c01 100644 --- a/src/routes/Player/AudioMenu/AudioMenu.tsx +++ b/src/routes/Player/AudioMenu/AudioMenu.tsx @@ -40,8 +40,13 @@ const AudioMenu = ({ className, selectedAudioTrackId, audioTracks, onAudioTrackS data-id={id} onClick={onAudioTrackClick} > -