<style include="cr-icons cr-hidden-style">
:host {
align-items: center;
background-color: var(--cr-toolbar-background-color);
color: var(--google-grey-900);
display: flex;
height: var(--cr-toolbar-height);
}
@media (prefers-color-scheme: dark) {
:host {
border-bottom: var(--cr-separator-line);
box-sizing: border-box;
color: var(--cr-secondary-text-color);
}
:host-context([chrome-refresh-2023]):host {
background-color: transparent;
border-bottom: none;
}
}
h1 {
flex: 1;
font-size: 170%;
font-weight: var(--cr-toolbar-header-font-weight, 500);
letter-spacing: .25px;
line-height: normal;
margin-inline-start: 6px;
padding-inline-end: 12px;
white-space: var(--cr-toolbar-header-white-space, normal);
}
@media (prefers-color-scheme: dark) {
h1 {
color: var(--cr-primary-text-color);
}
}
#leftContent {
position: relative;
transition: opacity 100ms;
}
#leftSpacer {
align-items: center;
box-sizing: border-box;
display: flex;
/* 12px to match #rightSpacer + 6px to align with icons in menus. */
padding-inline-start: calc(12px + 6px);
width: var(--cr-toolbar-left-spacer-width, auto);
}
cr-icon-button {
--cr-icon-button-size: 32px;
min-width: 32px;
}
@media (prefers-color-scheme: light) {
cr-icon-button {
--cr-icon-button-fill-color: currentColor;
--cr-icon-button-focus-outline-color: var(--cr-focus-outline-color);
}
}
#centeredContent {
display: flex;
flex: 1 1 0;
justify-content: center;
}
#rightSpacer {
padding-inline-end: 12px;
}
:host([narrow]) #centeredContent {
justify-content: flex-end;
}
:host([has-overlay]) {
transition: visibility var(--cr-toolbar-overlay-animation-duration);
visibility: hidden;
}
:host([narrow][showing-search_]) #leftContent {
opacity: 0;
position: absolute;
}
:host(:not([narrow])) #leftContent {
flex: 1 1 var(--cr-toolbar-field-margin, 0);
}
:host(:not([narrow])) #centeredContent {
flex-basis: var(--cr-toolbar-center-basis, 0);
}
:host(:not([narrow])[disable-right-content-grow]) #centeredContent {
justify-content: start;
padding-inline-start: 12px;
}
:host(:not([narrow])) #rightContent {
flex: 1 1 0;
text-align: end;
}
:host(:not([narrow])[disable-right-content-grow]) #rightContent {
flex: 0 1 0;
}
picture {
display: none;
}
#menuButton {
margin-inline-end: 9px;
}
#menuButton ~ h1 {
margin-inline-start: 0;
}
:host([always-show-logo]) picture,
:host(:not([narrow])) picture {
display: initial;
margin-inline-end: 16px;
}
:host([always-show-logo]) #leftSpacer,
:host(:not([narrow])) #leftSpacer {
/* 12px to match #rightSpacer + 9px to align with icons in menus. */
padding-inline-start: calc(12px + 9px);
}
:host([always-show-logo]) :is(picture, #product-logo),
:host(:not([narrow])) :is(picture, #product-logo) {
height: 24px;
width: 24px;
}
</style>
<div id="leftContent">
<div id="leftSpacer">
<template is="dom-if" if="[[showMenu]]" restamp>
<cr-icon-button id="menuButton" class="no-overlap"
iron-icon="cr20:menu" on-click="onMenuClick_"
aria-label$="[[menuLabel]]"
title="[[menuLabel]]">
</cr-icon-button>
</template>
<slot name="product-logo">
<picture>
<source media="(prefers-color-scheme: dark)"
srcset="//resources/images/chrome_logo_dark.svg">
<img id="product-logo"
srcset="chrome://theme/current-channel-logo@1x 1x,
chrome://theme/current-channel-logo@2x 2x"
role="presentation">
</picture>
</slot>
<h1>[[pageName]]</h1>
</div>
</div>
<div id="centeredContent" hidden$="[[!showSearch]]">
<cr-toolbar-search-field id="search" narrow="[[narrow]]"
label="[[searchPrompt]]" clear-label="[[clearLabel]]"
spinner-active="[[spinnerActive]]"
showing-search="{{showingSearch_}}"
autofocus$="[[autofocus]]">
</cr-toolbar-search-field>
<iron-media-query query="(max-width: [[narrowThreshold]]px)"
query-matches="{{narrow}}">
</iron-media-query>
</div>
<div id="rightContent">
<div id="rightSpacer">
<slot></slot>
</div>
</div>