| <style include="sp-shared-style"> |
| :host-context([chrome-refresh-2023]):host { |
| display: block; |
| padding: var(--sp-body-padding) 0; |
| } |
| |
| sp-heading { |
| margin: 8px 16px; |
| } |
| |
| .sp-cards-separator { |
| background-color: var(--google-grey-300); |
| border: none; |
| height: 2px; |
| margin: 0; |
| width: 100%; |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| .sp-cards-separator { |
| background-color: var(--google-grey-700); |
| } |
| } |
| |
| :host-context([chrome-refresh-2023]) .sp-cards-separator { |
| background: transparent; |
| } |
| |
| :host-context([chrome-refresh-2023]) .sp-card { |
| max-width: calc(320px - 2 * var(--sp-body-padding)); |
| } |
| |
| customize-chrome-appearance { |
| margin-bottom: 16px; |
| } |
| |
| customize-chrome-appearance, |
| customize-chrome-shortcuts, |
| customize-chrome-cards, |
| customize-chrome-categories, |
| customize-chrome-themes, |
| customize-chrome-chrome-colors { |
| display: block; |
| max-width: 320px; |
| width: 100%; |
| } |
| </style> |
| <iron-pages selected="[[page_]]" attr-for-selected="page-name"> |
| <div page-name="overview" id="overviewPage"> |
| <div id="appearance" class="section sp-card"> |
| <sp-heading hide-back-button> |
| <h2 slot="heading">$i18n{appearanceHeader}</h2> |
| </sp-heading> |
| <customize-chrome-appearance on-edit-theme-click="onEditThemeClick_" |
| id="appearanceElement"> |
| </customize-chrome-appearance> |
| </div> |
| <hr class="sp-cards-separator"> |
| <div id="shortcuts" class="section sp-card"> |
| <sp-heading hide-back-button> |
| <h2 slot="heading">$i18n{shortcutsHeader}</h2> |
| </sp-heading> |
| <customize-chrome-shortcuts></customize-chrome-shortcuts> |
| </div> |
| <template is="dom-if" if="[[modulesEnabled_]]"> |
| <hr class="sp-cards-separator"> |
| <div id="modules" class="section sp-card"> |
| <sp-heading hide-back-button> |
| <h2 slot="heading">$i18n{cardsHeader}</h2> |
| </sp-heading> |
| <customize-chrome-cards></customize-chrome-cards> |
| </div> |
| </template> |
| </div> |
| <customize-chrome-categories on-back-click="onBackClick_" |
| on-collection-select="onCollectionSelect_" page-name="categories" |
| id="categoriesPage" on-local-image-upload="onLocalImageUpload_" |
| on-chrome-colors-select="onChromeColorsSelect_"> |
| </customize-chrome-categories> |
| <customize-chrome-themes on-back-click="onBackClick_" |
| page-name="themes" id="themesPage" |
| selected-collection="[[selectedCollection_]]"> |
| </customize-chrome-themes> |
| <customize-chrome-chrome-colors on-back-click="onBackClick_" |
| page-name="chrome-colors" id="chromeColorsPage"> |
| </customize-chrome-chrome-colors> |
| </iron-pages> |