chrome-devtools-frontend/front_end/entrypoints/main/globalAiButton.css

Chrome DevTools UI

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

@scope to (devtools-widget > *) {
  .global-ai-button-container {
    margin-left: var(--sys-size-3);
    margin-right: var(--sys-size-2);
  }

  .global-ai-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--sys-size-9);
    height: var(--sys-size-9);
    border-radius: var(--sys-shape-corner-full);
    background-image: var(--app-gradient-google-ai);
    font: var(--sys-typescale-body4-medium);
    color: var(--ref-palette-neutral100);
    transition: width 1s, padding 1s;
    margin-left: auto;
    overflow: hidden;
    position: relative;
    border: 0;

    &:focus-visible {
      outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
    }

    &:hover::after,
    &:active::after {
      content: "";
      height: 100%;
      width: 100%;
      border-radius: inherit;
      position: absolute;
      top: 0;
      left: 0;
    }

    &:hover::after {
      background-color: var(--sys-color-state-hover-on-prominent);
    }

    &:active::after {
      background-color: var(--sys-color-state-ripple-primary);
    }

    devtools-icon {
      width: var(--sys-size-7);
      height: var(--sys-size-7);
      color: var(--ref-palette-neutral100);
    }

    .button-text {
      opacity: 0%;
      transition: opacity 1s;
    }
  }

  .global-ai-button.expanded {
    width: auto;
    padding: 0 var(--sys-size-6) 0 var(--sys-size-5);

    .button-text {
      opacity: 100%;
    }
  }
}