chrome-devtools-frontend/front_end/panels/ai_assistance/selectWorkspaceDialog.css

Chrome DevTools UI

/*
 * Copyright 2025 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.
 */

 .widget.dialog-container {
  width: 100%;
  box-shadow: none;
 }

.dialog-header {
  margin: var(--sys-size-6) var(--sys-size-8) var(--sys-size-5);
  font: var(--sys-typescale-headline5);
}

.buttons {
  margin: var(--sys-size-6) var(--sys-size-8) var(--sys-size-8);
  display: flex;
  justify-content: flex-start;
  gap: var(--sys-size-5);
}

.main-content {
  color: var(--sys-color-on-surface-subtle);
  margin: 0 var(--sys-size-8);
  line-height: 18px;
}

.add-folder-button {
  margin-left: auto;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: var(--sys-size-6) 0 var(--sys-size-4) 0;
  max-height: var(--sys-size-20);
  overflow-y: auto;
}

li {
  display: flex;
  align-items: center;
  color: var(--sys-color-on-surface-subtle);
  border-radius: 0 var(--sys-shape-corner-full) var(--sys-shape-corner-full) 0;
  height: var(--sys-size-10);
  margin: 0 var(--sys-size-8);
  padding-left: var(--sys-size-9);
}

li:hover, li.selected {
  background-color: var(--sys-color-state-hover-on-subtle);
}

li:focus {
  background-color: var(--app-color-navigation-drawer-background-selected);
}

.folder-icon {
  color: var(--icon-file-default);
  margin-right: var(--sys-size-4);
}

li.selected .folder-icon {
  color: var(--icon-file-authored);
}

.select-project-root {
  margin-bottom: var(--sys-size-6);
}

.theme-with-dark-background, :host-context(.theme-with-dark-background) {
  /*
    * List item is focused and selected: there is no valid state where the list item is focused but not selected.
  */
  li:focus {
    color: var(--app-color-navigation-drawer-label-selected);
    background-color: var(--app-color-navigation-drawer-background-selected);

    & .folder-icon {
      color: var(--app-color-navigation-drawer-label-selected);
    }
  }
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}