| <style include="cr-shared-style settings-shared"> |
| /* Override the default padding of a cr-row to 0. The template inside has |
| left and right padding. */ |
| .cr-row-with-template { |
| padding: 0; |
| } |
| |
| /* Ensure the toggle button stretches the width of its container despite |
| removing its parent's padding. */ |
| #liveCaptionToggleButton { |
| width: 100%; |
| } |
| |
| .language-dropdown { |
| margin-inline-start: auto; |
| } |
| |
| .subsection-group { |
| padding-bottom: 10px; |
| } |
| |
| /* Ensure the toggle button stretches the width of its container despite |
| removing its parent's padding. */ |
| #liveTranslateToggleButton { |
| width: 100%; |
| } |
| </style> |
| <div class="cr-row cr-row-with-template"> |
| <settings-toggle-button id="liveTranslateToggleButton" |
| pref="{{prefs.accessibility.captions.live_translate_enabled}}" |
| on-change="onLiveTranslateEnabledChange_" |
| label="$i18n{captionsEnableLiveTranslateTitle}" |
| sub-label="$i18n{captionsEnableLiveTranslateSubtitle}"> |
| </settings-toggle-button> |
| </div> |
| <cr-collapse |
| opened="[[prefs.accessibility.captions.live_translate_enabled.value]]"> |
| <div class="cr-row continuation subsection-group"> |
| <div class="start cr-padded-text" aria-hidden="true"> |
| $i18n{captionsLiveTranslateTargetLanguage} |
| <div class="secondary"> |
| $i18n{captionsLiveTranslateTargetLanguageSubtitle} |
| </div> |
| </div> |
| <settings-dropdown-menu id="targetLanguageDropdown" |
| class="language-dropdown" |
| pref="{{prefs.accessibility.captions.live_translate_target_language}}" |
| menu-options="[[translatableLanguages_]]" |
| label="$i18n{captionsLiveTranslateTargetLanguage}"> |
| </settings-dropdown-menu> |
| </div> |
| </cr-collapse> |