| <style include="cr-hidden-style cr-icons"> |
| cr-button { |
| --border-color: var(--color-new-tab-page-action-button-border); |
| --hover-border-color: |
| var(--color-new-tab-page-action-button-border-hovered); |
| --text-color-action: var(--color-new-tab-page-dialog-background); |
| } |
| |
| cr-dialog { |
| --cr-dialog-background-color: var(--color-new-tab-page-dialog-background); |
| } |
| |
| cr-dialog::part(dialog) { |
| height: 100%; |
| max-height: 520px; |
| min-width: 800px; |
| } |
| |
| cr-dialog::part(wrapper) { |
| height: 100%; |
| } |
| |
| cr-dialog::part(body-container) { |
| flex-grow: 1; |
| } |
| |
| div[slot=title] { |
| align-items: center; |
| color: var(--color-new-tab-page-dialog-foreground); |
| display: flex; |
| flex-direction: row; |
| height: 64px; |
| margin-top: 16px; |
| padding: 0; |
| } |
| |
| div[slot=body] { |
| color: var(--color-new-tab-page-dialog-foreground); |
| display: flex; |
| flex-direction: column; |
| overflow: hidden; |
| padding: 0; |
| } |
| |
| #bodyContainer { |
| display: flex; |
| flex-direction: row; |
| overflow: hidden; |
| } |
| |
| div[slot=button-container] { |
| padding-top: 16px; |
| } |
| |
| #leftTitleSpacer, |
| #menu { |
| width: 218px; |
| } |
| |
| #title { |
| line-height: 1.5; |
| margin-bottom: -2px; |
| padding-inline-end: 24px; |
| user-select: none; |
| } |
| |
| /* We pad the pages to allow content to overflow horizontally. We can't use |
| * overflow-x: visible since that will be ignored if overflow-y: auto. */ |
| #title, |
| #pages { |
| flex-grow: 1; |
| padding-inline-start: 14px; |
| } |
| |
| #menu, |
| #pages { |
| height: 100%; |
| overflow: auto; |
| } |
| |
| #pages > iron-pages { |
| /* Margin is for focus outline. */ |
| margin: 2px; |
| } |
| |
| div[scroll-border] { |
| border-bottom: 1px solid transparent; |
| } |
| |
| div[scroll-border][show-1], |
| div[scroll-border][show-2] { |
| border-bottom-color: var(--color-new-tab-page-dialog-border); |
| } |
| |
| #menu { |
| display: flex; |
| flex-direction: column; |
| } |
| |
| #menuSelector { |
| margin-bottom: 2px; |
| margin-top: 2px; |
| } |
| |
| .menu-item { |
| align-items: center; |
| border-radius: 0 16px 16px 0; |
| color: var(--color-new-tab-page-dialog-foreground); |
| cursor: pointer; |
| display: flex; |
| flex-direction: row; |
| flex-shrink: 0; |
| font-size: 14px; |
| height: 32px; |
| outline: none; |
| width: 192px; |
| } |
| |
| .menu-item + .menu-item { |
| margin-top: 16px; |
| } |
| |
| :host-context([dir=rtl]) .menu-item { |
| border-radius: 16px 0 0 16px; |
| } |
| |
| .menu-item:hover { |
| background-color: |
| var(--color-new-tab-page-dialog-control-background-hovered); |
| } |
| |
| :host-context(.focus-outline-visible) .menu-item:focus { |
| box-shadow: var(--ntp-focus-shadow); |
| } |
| |
| .menu-item:active { |
| background-color: var(--color-new-tab-page-dialog-background-active); |
| } |
| |
| .menu-item[selected] { |
| background-color: var(--color-new-tab-page-selected-background); |
| color: var(--color-new-tab-page-selected-foreground); |
| } |
| |
| .menu-item-icon { |
| -webkit-mask-repeat: no-repeat; |
| -webkit-mask-size: 100%; |
| background-color: var(--color-new-tab-page-dialog-foreground); |
| height: 20px; |
| margin-inline-end: 16px; |
| margin-inline-start: 24px; |
| width: 20px; |
| } |
| |
| .menu-item[selected] .menu-item-icon { |
| background-color: var(--color-new-tab-page-selected-foreground); |
| } |
| |
| @media (forced-colors: active) { |
| :host-context(.focus-outline-visible) .menu-item:focus { |
| /* Use outline instead of box-shadow (which does not work) in Windows |
| HCM. */ |
| outline: var(--cr-focus-outline-hcm); |
| } |
| |
| .menu-item-icon, |
| .menu-item-icon[selected] { |
| background-color: ButtonText; |
| } |
| |
| .menu-item[selected] { |
| background-color: SelectedItem; |
| } |
| } |
| |
| #backgroundsIcon { |
| -webkit-mask-image: url(icons/backgrounds.svg); |
| } |
| |
| #shortcutsIcon { |
| -webkit-mask-image: url(icons/link.svg); |
| } |
| |
| #modulesIcon { |
| -webkit-mask-image: url(icons/cards.svg); |
| } |
| |
| #themesIcon { |
| -webkit-mask-image: url(icons/colors.svg); |
| } |
| |
| #backButton { |
| --cr-icon-button-fill-color: var(--color-new-tab-page-dialog-foreground); |
| margin-inline-end: 4px; |
| /* So that the arrow aligns with the grid. */ |
| margin-inline-start: -12px; |
| } |
| |
| #titleNavigation { |
| align-items: center; |
| display: flex; |
| flex-direction: row; |
| } |
| |
| cr-toggle { |
| margin-inline-end: 12px; |
| } |
| |
| #collectionTitle { |
| flex-grow: 1; |
| } |
| </style> |
| <cr-dialog id="dialog" on-cancel="onCancel_" show-on-attach> |
| <div slot="title"> |
| <div id="leftTitleSpacer"></div> |
| <div id="title"> |
| <div id="titleText" hidden="[[showTitleNavigation_]]"> |
| $i18n{customizeThisPage} |
| </div> |
| <div id="titleNavigation" hidden="[[!showTitleNavigation_]]"> |
| <cr-icon-button id="backButton" class="icon-arrow-back" |
| on-click="onBackClick_" title="$i18n{backButton}"> |
| </cr-icon-button> |
| <div id="collectionTitle">[[selectedCollection_.label]]</div> |
| <cr-toggle id="refreshToggle" checked="[[isRefreshToggleChecked_]]" |
| on-change="onBackgroundDailyRefreshToggleChange_"> |
| </cr-toggle> |
| $i18n{refreshDaily} |
| </div> |
| </div> |
| </div> |
| <div slot="body"> |
| <div id="topPageScrollBorder" scroll-border></div> |
| <div id="bodyContainer"> |
| <div id="menu"> |
| <iron-selector id="menuSelector" selected-attribute="selected" |
| attr-for-selected="page-name" selected="{{selectedPage}}" |
| on-keydown="onMenuItemKeyDown_" fallback-selection="backgrounds"> |
| <div class="menu-item" page-name="backgrounds" role="menuitem" |
| tabindex="0"> |
| <div id="backgroundsIcon" class="menu-item-icon"></div> |
| $i18n{backgroundsMenuItem} |
| </div> |
| <div class="menu-item" page-name="shortcuts" role="menuitem" |
| tabindex="0" hidden$="[[!shortcutsEnabled_]]"> |
| <div id="shortcutsIcon" class="menu-item-icon"></div> |
| $i18n{shortcutsMenuItem} |
| </div> |
| <div class="menu-item" page-name="modules" role="menuitem" |
| tabindex="0" hidden$="[[!modulesEnabled_]]"> |
| <div id="modulesIcon" class="menu-item-icon"></div> |
| $i18n{modulesMenuItem} |
| </div> |
| <div class="menu-item" page-name="themes" role="menuitem" |
| tabindex="0"> |
| <div id="themesIcon" class="menu-item-icon"></div> |
| $i18n{themesMenuItem} |
| </div> |
| </iron-selector> |
| </div> |
| <div id="pages"> |
| <iron-pages selected="[[selectedPage]]" attr-for-selected="page-name"> |
| <ntp-customize-backgrounds id="backgrounds" page-name="backgrounds" |
| selected-collection="{{selectedCollection_}}" theme="[[theme]]" |
| background-selection="{{backgroundSelection}}"> |
| </ntp-customize-backgrounds> |
| <ntp-customize-shortcuts page-name="shortcuts"> |
| </ntp-customize-shortcuts> |
| <ntp-customize-modules page-name="modules" |
| hidden$="[[!modulesEnabled_]]"> |
| </ntp-customize-modules> |
| <cr-customize-themes id="customizeThemes" page-name="themes"> |
| </cr-customize-themes> |
| </iron-pages> |
| </div> |
| </div> |
| <div id="bottomPageScrollBorder" scroll-border></div> |
| </div> |
| <div slot="button-container"> |
| <cr-button class="cancel-button" on-click="onCancelClick_"> |
| $i18n{cancelButton} |
| </cr-button> |
| <cr-button class="action-button" on-click="onDoneClick_"> |
| $i18n{doneButton} |
| </cr-button> |
| </div> |
| </cr-dialog> |
