blob: e905f24b0ee91ab34c371dffa2120f3ae5c2e055 [file] [log] [blame]
<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%;
}
/* Add bottom padding to the radio group to separate it from the next
section. */
.live-caption-language-radio-group {
padding-bottom: var(--cr-section-padding);
}
/* Override the min-height to make the radio buttons appear closer
together since they are all part of the same section. */
.live-caption-language-radio-button {
min-height: var(--cr-button-height);
}
</style>
<template is="dom-if" if="[[!enableLiveCaptionMultiLanguage_]]">
<div class="cr-row cr-row-with-template first">
<settings-toggle-button id="liveCaptionToggleButton"
pref="{{prefs.accessibility.captions.live_caption_enabled}}"
on-change="onLiveCaptionEnabledChanged_"
label="$i18n{captionsEnableLiveCaptionTitle}"
sub-label="[[enableLiveCaptionSubtitle_]]">
</settings-toggle-button>
</div>
</template>
<template is="dom-if" if="[[enableLiveCaptionMultiLanguage_]]">
<div class="cr-row cr-row-with-template first">
<settings-toggle-button id="liveCaptionToggleButton"
pref="{{prefs.accessibility.captions.live_caption_enabled}}"
on-change="onLiveCaptionEnabledChanged_"
label="$i18n{captionsEnableLiveCaptionTitle}"
sub-label="$i18n{captionsEnableLiveCaptionSubtitle}">
</settings-toggle-button>
</div>
<template is="dom-if"
if="[[prefs.accessibility.captions.live_caption_enabled.value]]"
mutable-data>
<div class="live-caption-language-radio-group">
<settings-radio-group
pref="{{prefs.accessibility.captions.live_caption_language}}">
<template is="dom-repeat" items="[[liveCaptionLanguages_]]"
as="language">
<controlled-radio-button
class="cr-row continuation live-caption-language-radio-button"
label="[[language.displayName]]"
name="[[language.code]]"
pref="[[prefs.accessibility.captions.live_caption_language]]">
<span class="cr-secondary-text cr-row-gap">
[[language.downloadProgress]]
</span>
</controlled-radio-button>
</template>
</settings-radio-group>
</div>
</template>
</template>