packages/session-ui/src/components/tool-error-card.css - dev - Alex_Ural/opencode

packages/session-ui/src/components/tool-error-card.css

91 строка2 KB

usrnk1

feat(app): refine session UI styling (#33860)

26 июн 2026, 11:04

26 июн 2026, 11:0478a5a03

[data-component="card"][data-kind="tool-error-card"] {
  --card-pad-y: 8px;
  --card-line-pad: 12px;

  [data-slot="basic-tool-tool-title"] {
    color: var(--v2-text-text-base);
  }

  [data-slot="basic-tool-tool-subtitle"] {
    color: var(--v2-text-text-muted);
  }

  [data-slot="collapsible-arrow"],
  [data-slot="collapsible-arrow-icon"] {
    color: var(--v2-text-text-faint);
  }

  > [data-component="collapsible"].tool-collapsible {
    gap: 0px;
  }

  > [data-component="collapsible"].tool-collapsible[data-open="true"] {
    gap: 4px;
  }

  [data-component="tool-error-card-icon"] [data-component="icon"] {
    color: var(--card-accent);
  }

  [data-slot="tool-error-card-content"] {
    position: relative;
    padding-left: 24px;
    margin-bottom: 8px;
    -webkit-user-select: text;
    user-select: text;
  }

  > [data-component="collapsible"].tool-collapsible[data-open="true"] [data-slot="tool-error-card-content"] {
    padding-right: 40px;
  }

  [data-slot="tool-error-card-copy"] {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    will-change: opacity;
  }

  &:hover [data-slot="tool-error-card-copy"],
  &:focus-within [data-slot="tool-error-card-copy"] {
    opacity: 1;
    pointer-events: auto;
  }

  [data-slot="tool-error-card-content"] :where(*)::selection {
    background: var(--v2-state-bg-danger);
    color: var(--v2-text-text-base);
  }

  [data-slot="tool-error-card-content"] :where(*)::-moz-selection {
    background: var(--v2-state-bg-danger);
    color: var(--v2-text-text-base);
  }
}

body:not([data-new-layout]) [data-component="card"][data-kind="tool-error-card"] {
  [data-slot="basic-tool-tool-title"] {
    color: var(--text-strong);
  }

  [data-slot="basic-tool-tool-subtitle"] {
    color: var(--text-base);
  }

  [data-slot="collapsible-arrow"] {
    color: var(--text-base);
  }

  [data-slot="collapsible-arrow-icon"] {
    color: var(--icon-weaker);
  }

  [data-slot="tool-error-card-content"] :where(*)::selection,
  [data-slot="tool-error-card-content"] :where(*)::-moz-selection {
    background: var(--surface-critical-base);
    color: var(--text-on-critical-base);
  }
}