chrome-devtools-frontend/front_end/panels/timeline/overlays/components/entryLabelOverlay.css

Chrome DevTools UI

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

.label-parts-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.label-button-input-wrapper {
  display: flex;
  position: relative;
  overflow: visible;
}

.ai-label-button-wrapper,
.ai-label-disabled-button-wrapper,
.ai-label-loading,
.ai-label-error {
  /* position the button wrapper on the very right of the label */
  position: absolute;
  left: 100%;
  display: flex;
  /* Since the ai-button is a bit bigger than the label, lift it up for it to appear more centered */
  transform: translateY(-3px);
  flex-flow: row nowrap;
  border: none;
  border-radius: var(--sys-shape-corner-large);
  background: var(--sys-color-surface3);
  box-shadow: var(--drop-shadow);
  align-items: center;
  gap: var(--sys-size-4);
  pointer-events: auto;
  transition:
    all var(--sys-motion-duration-medium2) var(--sys-motion-easing-emphasized);

  &.only-pen-wrapper {
    /* when the button wrapper is not hovered, set the max width to only fit the pen icon */
    overflow: hidden;
    width: var(--sys-size-12);
    height: var(--sys-size-12);
  }

  * {
    /* When unhovered, shift the contents left you don't see the border of the .ai-label-button  */
    transform: translateX(-2px);
  }
}

.ai-label-loading,
.ai-label-error {
  gap: var(--sys-size-6);
  padding: var(--sys-size-5) var(--sys-size-8);
}

.ai-label-button-wrapper:focus,
.ai-label-button-wrapper:focus-within,
.ai-label-button-wrapper:hover {
  width: auto;
  height: var(--sys-size-13);
  padding: var(--sys-size-3) var(--sys-size-5);
  transform: translateY(-9px); /* -9px is the original -3px minus 6px (coming from the padding adjustment) */

  * {
    transform: translateX(0);
  }
}

.ai-label-button {
  display: flex;
  align-items: center;
  gap: var(--sys-size-4);
  padding: var(--sys-size-3) var(--sys-size-5);
  border: 1px solid var(--color-primary);
  border-radius: var(--sys-shape-corner-large);

  &.enabled {
    background: var(--sys-color-surface3);
  }

  &.disabled {
    background: var(--sys-color-surface5);
  }

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

.generate-label-text {
  white-space: nowrap;
  color: var(--color-primary);
}

.input-field {
  background-color: var(--color-background-inverted);
  color: var(--color-background);
  pointer-events: auto;
  border-radius: var(--sys-shape-corner-extra-small);
  white-space: nowrap;
  padding: var(--sys-size-3) var(--sys-size-4);
  font-family: var(--default-font-family);
  font-size: var(--sys-typescale-body2-size);
  font-weight: var(--ref-typeface-weight-medium);
}


/* When the input field is focused we want to style it as a light background so
 * it's clear that the user is in it and can edit the text.
* However we also do this styling when the user's focus is on the GenerateAI
* button (using the :focus-within on the parent). This is so if you open an
* empty annotation, and then tab to the GenerateAI button, the text field
* styling doesn't change. */
.input-field:focus,
.label-parts-wrapper:focus-within .input-field,
.input-field.fake-focus-state {
  background-color: var(--color-background);
  color: var(--color-background-inverted);
  outline: 2px solid var(--color-background-inverted);
}

.connectorContainer {
  overflow: visible;
}

.entry-highlight-wrapper {
  box-sizing: border-box;
  border: 2px solid var(--sys-color-on-surface);

  &.cut-off-top {
    border-top: none;
  }

  &.cut-off-bottom {
    border-bottom: none;
  }

  &.cut-off-right {
    border-right: none;
  }

  &.cut-off-left {
    border-left: none;
  }
}

/* The tooltip for the AI label generation info */
.info-tooltip-container {
  max-width: var(--sys-size-28);

  button.link {
    cursor: pointer;
    text-decoration: underline;
    border: none;
    padding: 0;
    background: none;
    font: inherit;
    font-weight: var(--ref-typeface-weight-medium);
    display: block;
    margin-top: var(--sys-size-4);
    color: var(--sys-color-primary);
  }
}