| <style> |
| #icon { |
| height: 32px; |
| margin-inline-end: 10px; |
| width: 32px; |
| } |
| |
| #icon-and-name-wrapper { |
| align-items: center; |
| display: flex; |
| } |
| |
| ExtensionOptions { |
| display: block; |
| height: 100%; |
| overflow: hidden; |
| } |
| |
| cr-dialog::part(dialog) { |
| /* CSS variables are set by the JS. */ |
| height: var(--dialog-height); |
| opacity: var(--dialog-opacity, 0); |
| /* When loading, it's possible for an size update to follow after the |
| initial size update. The debounce time on size updates is 50ms. |
| A 100ms delay for the opacity transition will allow two updates to |
| occur without showing the dialog resizing to the user. */ |
| transition: opacity 100ms ease 100ms; |
| width: var(--dialog-width); |
| } |
| |
| cr-dialog::part(wrapper) { |
| height: 100%; |
| max-height: initial; |
| overflow: hidden; |
| } |
| |
| cr-dialog #body { |
| height: 100%; |
| padding: 0; |
| } |
| |
| cr-dialog { |
| --cr-dialog-body-border-bottom: none; |
| --cr-dialog-body-border-top: none; |
| --scroll-border: none; |
| } |
| |
| cr-dialog::part(body-container) { |
| height: 100%; |
| min-height: initial; |
| } |
| </style> |
| |
| <cr-dialog id="dialog" close-text="$i18n{close}" |
| on-close="onClose_" show-close-button> |
| <div slot="title"> |
| <div id="icon-and-name-wrapper"> |
| <img id="icon" src="[[data_.iconUrl]]" alt=""> |
| <span>[[data_.name]]</span> |
| </div> |
| </div> |
| <div slot="body" id="body"> |
| </div> |
| </cr-dialog> |