chrome/browser/resources/new_tab_page/logo.css

/* Copyright 2024 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* #css_wrapper_metadata_start
 * #type=style-lit
 * #import=chrome://resources/cr_elements/cr_hidden_style_lit.css.js
 * #scheme=relative
 * #include=cr-hidden-style-lit
 * #css_wrapper_metadata_end */

:host {
  --ntp-logo-height: 168px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  justify-content: flex-end;
  min-height: var(--ntp-logo-height);
}

:host([doodle-boxed_]) {
  justify-content: flex-end;
}

#logo {
  forced-color-adjust: none;
  height: 92px;
  width: 272px;
}

:host([single-colored]) #logo {
  -webkit-mask-image: url(./icons/google_logo.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  background-color: var(--ntp-logo-color);
}

:host(:not([single-colored])) #logo {
  background-image: url(./icons/google_logo.svg);
}

#imageDoodle {
  cursor: pointer;
  outline: none;
}

#imageDoodle[tabindex='-1'] {
  cursor: auto;
}

:host([doodle-boxed_]) #imageDoodle {
  background-color: var(--ntp-logo-box-color);
  border-radius: 20px;
  padding: 16px 24px;
}

:host-context(.focus-outline-visible) #imageDoodle:focus {
  box-shadow: 0 0 0 2px rgba(var(--google-blue-600-rgb), .4);
}

#imageContainer {
  display: flex;
  height: fit-content;
  position: relative;
  width: fit-content;
}

#image {
  max-height: var(--ntp-logo-height);
  max-width: 100%;
}

:host([doodle-boxed_]) #image {
  max-height: 128px;
}

#animation {
  height: 100%;
  pointer-events: none;
  position: absolute;
  width: 100%;
}

#doodle {
  position: relative;
}

#shareButton {
  background-color: var(--color-new-tab-page-doodle-share-button-background, none);
  border: none;
  height: 32px;
  min-width: 32px;
  padding: 0;
  position: absolute;
  width: 32px;
  bottom: 0;
}

:host-context([dir='ltr']) #shareButton {
  right: -40px;
}

:host-context([dir='rtl']) #shareButton {
  left: -40px;
}

#shareButtonIcon {
  width: 18px;
  height: 18px;
  margin: 7px;
  vertical-align: bottom;
  mask-image: url(chrome://new-tab-page/icons/share_unfilled.svg);
  background-color: var(--color-new-tab-page-doodle-share-button-icon, none)
}

#iframe {
  border: none;
  height: var(--height, var(--ntp-logo-height));
  transition-duration: var(--duration, 100ms);
  transition-property: height, width;
  width: var(--width, 100%);
}

#iframe:not([expanded]) {
  max-height: var(--ntp-logo-height);
}