| <style include="os-settings-page-styles cr-hidden-style settings-shared"> |
| :host([is-subpage-animating]) { |
| /* Prevent an unwanted horizontal scrollbar when transitioning back from |
| * a sub-page. */ |
| overflow: hidden; |
| } |
| |
| .banner { |
| align-items: center; |
| background-color: var(--cros-bg-color); |
| border: var(--cr-hairline); |
| border-radius: var(--cr-card-border-radius); |
| display: flex; |
| margin-bottom: var(--cr-section-vertical-margin); |
| margin-top: var(--cr-section-vertical-margin); |
| } |
| |
| .eol-warning-icon { |
| align-items: center; |
| background: |
| rgba(var(--cros-icon-color-warning-rgb), var(--cros-second-tone-opacity)); |
| border-radius: 50%; |
| display: flex; |
| flex: 0 0 auto; |
| height: 40px; |
| justify-content: center; |
| margin-inline-end: var(--cr-section-padding); |
| width: 40px; |
| } |
| |
| .eol-warning-icon iron-icon { |
| --iron-icon-fill-color: var(--cros-icon-color-warning); |
| margin: 0; |
| } |
| |
| #advancedToggle { |
| --ink-color: currentColor; |
| align-items: center; |
| background: transparent; |
| border: none; |
| box-shadow: none; |
| color: currentColor; |
| display: flex; |
| font-weight: 400; |
| margin-bottom: 3px; |
| margin-top: 12px; /* Part of a 48px spacer (33px + 12px + 3px). */ |
| min-height: 32px; |
| padding: 0 12px; |
| } |
| |
| :host-context(.focus-outline-visible) #advancedToggle:focus { |
| outline: 2px solid var(--cros-focus-ring-color); |
| } |
| |
| #openInNewBrowserSettingsIcon { |
| fill: var(--cros-link-color); |
| margin-inline-start: 0; |
| } |
| |
| #secondaryUserIcon { |
| align-items: center; |
| background: rgba( |
| var(--cros-icon-color-prominent-rgb), var(--cros-second-tone-opacity)); |
| border-radius: 50%; |
| display: flex; |
| flex: 0 0 auto; |
| height: 40px; |
| justify-content: center; |
| margin-inline-end: var(--cr-section-padding); |
| width: 40px; |
| } |
| |
| #secondaryUserIcon iron-icon { |
| --iron-icon-fill-color: var(--cros-icon-color-prominent); |
| margin: 0; |
| } |
| |
| #toggleContainer { |
| align-items: center; |
| color: var(--cros-text-color-primary); |
| display: flex; |
| font: inherit; |
| justify-content: center; |
| margin-bottom: 0; |
| margin-top: 0; |
| padding: 0; |
| } |
| |
| #toggleSpacer { |
| padding-top: 33px; /* Part of a 48px spacer (33px + 12px + 3px). */ |
| } |
| |
| iron-icon { |
| margin-inline-start: 16px; |
| } |
| |
| eol-offer-section { |
| margin-top: 20px; |
| } |
| </style> |
| <template is="dom-if" if="[[showBasicPage_( |
| currentRoute_, hasExpandedSection_)]]"> |
| <div id="basicPage"> |
| <template is="dom-if" if="[[computeShowUpdateRequiredEolBanner_( |
| hasExpandedSection_, showUpdateRequiredEolBanner_, |
| showEOLIncentive_)]]"> |
| <div id="updateRequiredEolBanner" |
| class="settings-box two-line banner"> |
| <div class="eol-warning-icon"> |
| <iron-icon icon="cr20:banner-warning"></iron-icon> |
| </div> |
| <localized-link id="bannerText" class="start" |
| localized-string="$i18n{updateRequiredEolBannerText}"> |
| </localized-link> |
| <cr-icon-button title="$i18n{close}" id="closeUpdateRequiredEol" |
| class="icon-clear" on-click="onCloseEolBannerClicked_" |
| aria-describedby="bannerText"> |
| </cr-icon-button> |
| </div> |
| </template> |
| <template is="dom-if" if="[[computeShowEolIncentive_(hasExpandedSection_, |
| showEolIncentive_)]]"> |
| <eol-offer-section should-show-offer-text="[[shouldShowOfferText_]]"> |
| </eol-offer-section> |
| </template> |
| <div id="secondaryUserBanner" class="settings-box two-line banner" |
| hidden="[[!showSecondaryUserBanner_]]"> |
| <div id="secondaryUserIcon"> |
| <iron-icon icon="os-settings:social-group"></iron-icon> |
| </div> |
| <div class="flex">$i18n{secondaryUserBannerText}</div> |
| </div> |
| <os-settings-section page-title="$i18n{internetPageTitle}" |
| section="internet"> |
| <settings-internet-page prefs="{{prefs}}"> |
| </settings-internet-page> |
| </os-settings-section> |
| <os-settings-section page-title="$i18n{bluetoothPageTitle}" |
| section="bluetooth"> |
| <os-settings-bluetooth-page prefs="{{prefs}}"> |
| </os-settings-bluetooth-page> |
| </os-settings-section> |
| <template is="dom-if" if="[[!isGuestMode_]]" restamp> |
| <os-settings-section page-title="$i18n{multidevicePageTitle}" |
| section="multidevice"> |
| <settings-multidevice-page prefs="{{prefs}}"> |
| </settings-multidevice-page> |
| </os-settings-section> |
| </template> |
| <template is="dom-if" if="[[!isGuestMode_]]" restamp> |
| <os-settings-section page-title="$i18n{osPeoplePageTitle}" |
| section="osPeople"> |
| <os-settings-people-page prefs="{{prefs}}" |
| page-availability="[[pageAvailability]]"> |
| </os-settings-people-page> |
| </os-settings-section> |
| </template> |
| <template is="dom-if" if="[[showKerberosSection]]" restamp> |
| <os-settings-section page-title="$i18n{kerberosPageTitle}" |
| section="kerberos"> |
| <settings-kerberos-page></settings-kerberos-page> |
| </os-settings-section> |
| </template> |
| <os-settings-section page-title="$i18n{devicePageTitle}" |
| section="device"> |
| <settings-device-page prefs="{{prefs}}" |
| show-crostini="[[showCrostini]]"> |
| </settings-device-page> |
| </os-settings-section> |
| <template is="dom-if" if="[[!isGuestMode_]]" restamp> |
| <os-settings-section page-title="$i18n{personalizationPageTitle}" |
| section="personalization"> |
| <settings-personalization-page prefs="{{prefs}}"> |
| </settings-personalization-page> |
| </os-settings-section> |
| </template> |
| <os-settings-section page-title="$i18n{osSearchPageTitle}" |
| section="osSearch"> |
| <os-settings-search-page prefs="{{prefs}}"> |
| </os-settings-search-page> |
| </os-settings-section> |
| <os-settings-section page-title="$i18n{privacyPageTitle}" |
| section="osPrivacy"> |
| <os-settings-privacy-page prefs="{{prefs}}"> |
| </os-settings-privacy-page> |
| </os-settings-section> |
| <os-settings-section page-title="$i18n{appsPageTitle}" section="apps"> |
| <os-settings-apps-page |
| prefs="{{prefs}}" |
| android-apps-info="[[androidAppsInfo]]" |
| have-play-store-app="[[havePlayStoreApp]]" |
| show-android-apps="[[showAndroidApps]]" |
| show-arcvm-manage-usb="[[showArcvmManageUsb]]" |
| show-plugin-vm="[[showPluginVm]]"> |
| </os-settings-apps-page> |
| </os-settings-section> |
| <os-settings-section page-title="$i18n{a11yPageTitle}" |
| section="osAccessibility"> |
| <os-settings-a11y-page prefs="{{prefs}}"> |
| </os-settings-a11y-page> |
| </os-settings-section> |
| </div> |
| </template> |
| |
| <template is="dom-if" if="[[!hasExpandedSection_]]"> |
| <div id="toggleSpacer"></div> |
| <h2 id="toggleContainer"> |
| <cr-button id="advancedToggle" on-click="advancedToggleClicked_" |
| aria-expanded$="[[boolToString_(advancedToggleExpanded)]]"> |
| <span>$i18n{advancedPageTitle}</span> |
| <iron-icon |
| icon="[[getArrowIcon_(advancedToggleExpanded)]]" |
| slot="suffix-icon"> |
| </iron-icon> |
| </cr-button> |
| </h2> |
| </template> |
| |
| <settings-idle-load id="advancedPageTemplate"> |
| <template> |
| <div id="advancedPage" hidden$="[[!showAdvancedPage_( |
| currentRoute_, hasExpandedSection_, |
| advancedToggleExpanded)]]"> |
| <os-settings-section page-title="$i18n{dateTimePageTitle}" |
| section="dateTime"> |
| <settings-date-time-page prefs="{{prefs}}"> |
| </settings-date-time-page> |
| </os-settings-section> |
| <os-settings-section page-title="$i18n{osLanguagesPageTitle}" |
| section="osLanguages"> |
| <os-settings-languages-section prefs="{{prefs}}"> |
| </os-settings-languages-section> |
| </os-settings-section> |
| <template is="dom-if" if="[[!isGuestMode_]]"> |
| <os-settings-section page-title="$i18n{filesPageTitle}" |
| section="files"> |
| <os-settings-files-page prefs="{{prefs}}"> |
| </os-settings-files-page> |
| </os-settings-section> |
| </template> |
| <os-settings-section page-title="$i18n{printingPageTitle}" |
| section="osPrinting"> |
| <os-settings-printing-page prefs="{{prefs}}"> |
| </os-settings-printing-page> |
| </os-settings-section> |
| <os-settings-section page-title="$i18n{crostiniPageTitle}" |
| section="crostini"> |
| <settings-crostini-page prefs="{{prefs}}" |
| allow-crostini="[[allowCrostini_]]" |
| show-crostini="[[showCrostini]]"> |
| </settings-crostini-page> |
| </os-settings-section> |
| <template is="dom-if" |
| if="[[shouldStampPage_(pageAvailability.reset)]]" restamp> |
| <os-settings-section page-title="$i18n{resetPageTitle}" |
| section="osReset"> |
| <os-settings-reset-page></os-settings-reset-page> |
| </os-settings-section> |
| </template> |
| </div> |
| </template> |
| </settings-idle-load> |
