graphiql/dist/graphiql.css

An graphical interactive in-browser GraphQL IDE.

/* Everything */
.graphiql-container {
  background: oklch(var(--bg-canvas));
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  overflow: hidden;
  width: 100%;
}

/* Activity rail + main content row (below the top bar and above the status bar) */
.graphiql-container .graphiql-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* The main content, i.e. everything except the activity rail */
.graphiql-container .graphiql-main {
  display: flex;
  flex: 1;
  min-width: 0;
}

/* The current session and tabs */
.graphiql-container .graphiql-sessions {
  background: oklch(var(--bg-canvas));
  display: flex;
  flex-direction: column;
  flex: 1;
  max-height: 100%;
  min-width: 0;
}

/* The editor and response panes, split by the horizontal drag bar */
.graphiql-container .graphiql-session-row {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* The editor side of the split: session header stacked above the editors.
   The divider between the two panes is drawn by the drag bar's sash. */
.graphiql-container .graphiql-editor-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* The response side of the split */
.graphiql-container .graphiql-response-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Match the response header's height to the editor's session header so the
   view picker lines up with the tabs and action buttons across the split. The
   default horizontal padding keeps the status off the divider. */
.graphiql-container .graphiql-response-header {
  height: var(--session-header-height);
}

/* The session header (tabs + action buttons) reads as a toolbar strip, matching
   the elevated surface and divider of the response header across the split. */
.graphiql-container .graphiql-session-header {
  height: var(--session-header-height);
  align-items: center;
  display: flex;
  gap: var(--px-8);
  background: oklch(var(--bg-elevated));
  border-bottom: 1px solid oklch(var(--border-default));
}

/* The tab strip carries its own shorter height + bottom divider by default,
   which double-lines against the header divider. Stretch it to the full header
   height and drop its border so the header shows a single divider. */
.graphiql-container .graphiql-session-header .graphiql-tabs {
  height: auto;
  align-self: stretch;
  border-bottom: none;
}

/* The button to add a new tab */
button.graphiql-tab-add {
  padding: var(--px-4);

  & > svg {
    color: oklch(var(--fg-muted));
    display: block;
    height: var(--icon-size-lg);
    width: var(--icon-size-lg);
  }
}

/* Right-side tab strip action buttons (prettify, merge, copy, save) */
.graphiql-tab-strip-actions {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 0;
}

button.graphiql-tab-strip-action {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--px-6);
  color: oklch(var(--fg-subtle));

  & > svg {
    display: block;
    height: var(--icon-size-lg);
    width: var(--icon-size-lg);
  }

  &:hover {
    color: oklch(var(--fg-default));
  }
}

.graphiql-tab-save-spinner {
  height: var(--icon-size-lg);
  width: var(--icon-size-lg);
  margin: 0;

  &::after {
    height: var(--icon-size-lg);
    width: var(--icon-size-lg);
    border-width: 2px;
    border-top-width: 2px;
  }
}

.graphiql-save-error {
  color: oklch(var(--accent-red));
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The editor of the session */
.graphiql-container #graphiql-session {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* All editors (operation, variable, request headers) */
.graphiql-container .graphiql-editors {
  background: oklch(var(--bg-canvas));
  display: flex;
  flex: 1;
  flex-direction: column;
}

/* The operation editor and the toolbar */
.graphiql-container .graphiql-query-editor {
  border-bottom: 1px solid oklch(var(--border-default));
  padding: var(--px-16);
  column-gap: var(--px-16);
  display: flex;
  width: 100%;
}

/* The tab bar for editor tools */
.graphiql-container .graphiql-editor-tools {
  cursor: row-resize;
  display: flex;
  width: 100%;
  column-gap: var(--px-8);
  padding: var(--px-8);
}

.graphiql-container .graphiql-editor-tools button {
  color: oklch(var(--fg-muted));
}

.graphiql-container .graphiql-editor-tools button.active {
  color: oklch(var(--fg-default));
}

/* The tab buttons to switch between editor tools */
.graphiql-container
  .graphiql-editor-tools
  > button:not(.graphiql-toggle-editor-tools) {
  padding: var(--px-8) var(--px-12);
}

.graphiql-container .graphiql-editor-tools .graphiql-toggle-editor-tools {
  margin-left: auto;
}

/* An editor tool, e.g. variables or request headers editor */
.graphiql-container .graphiql-editor-tool {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/**
   * The way CodeMirror editors are styled they overflow their containing
   * element. For some OS-browser-combinations this might cause overlap issues,
   * setting the position of this to `relative` makes sure this element will
   * always be on top of any editors.
   */
.graphiql-container .graphiql-editor-tools,
.graphiql-container .graphiql-editor-tool {
  position: relative;
}

/* The response view */
.graphiql-container .graphiql-response {
  display: flex;
  flex: 1;
  min-height: 0;
  width: 100%;
  flex-direction: column;
}

/* The results editor wrapping container */
.graphiql-container .graphiql-response .result-window {
  position: relative;
  flex: 1;
}

/* The footer below the response view */
.graphiql-container .graphiql-footer {
  border-top: 1px solid oklch(var(--border-default));
}

/* The plugin container — sizing controlled by useDragResize; chrome handled by <SidePanel> */
.graphiql-container .graphiql-plugin {
  display: flex;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Horizontal resizer, styled as a "sash": zero layout width so the panes sit
   flush, an invisible expanded hit area straddling the seam, and a 1px divider
   line. Width 0 also keeps the resize math (which subtracts the bar's
   clientWidth) pixel-exact. */
.graphiql-horizontal-drag-bar {
  width: 0;
  position: relative;
  z-index: 1;
  cursor: col-resize;
}

/* The grab zone: 8px straddling the seam, with no layout footprint. */
.graphiql-horizontal-drag-bar::before {
  content: '';
  position: absolute;
  inset-block: 0;
  left: calc(var(--px-8) / -2);
  width: var(--px-8);
  cursor: col-resize;
}

/* The visible divider line, centered on the seam. */
.graphiql-horizontal-drag-bar::after {
  content: '';
  position: absolute;
  inset-block: 0;
  left: -0.5px;
  width: 1px;
  background: oklch(var(--border-default));
}

/* Thicken the divider on hover/drag as the resize affordance. */
.graphiql-horizontal-drag-bar:hover::after,
.graphiql-horizontal-drag-bar:active::after {
  left: -1px;
  width: 2px;
}

.graphiql-container .graphiql-chevron-icon {
  color: oklch(var(--fg-subtle));
  display: block;
  height: var(--px-12);
  margin: var(--px-12);
  width: var(--px-12);
}

/* Generic spin animation */
.graphiql-spin {
  animation: spin 0.8s linear 0s infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* The header of the settings dialog */
.graphiql-dialog .graphiql-dialog-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: var(--px-24);
}

/* The title of the settings dialog */
.graphiql-dialog .graphiql-dialog-title {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  margin: 0;
}

/* A section inside the settings dialog */
.graphiql-dialog .graphiql-dialog-section {
  align-items: center;
  border-top: 1px solid oklch(var(--border-default));
  display: flex;
  justify-content: space-between;
  padding: var(--px-24);
}

.graphiql-dialog .graphiql-dialog-section > :not(:first-child) {
  margin-left: var(--px-24);
}

/* The section title in the settings dialog */
.graphiql-dialog .graphiql-dialog-section-title {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-medium);
}

/* The section caption in the settings dialog */
.graphiql-dialog .graphiql-dialog-section-caption {
  color: oklch(var(--fg-muted));
}

.graphiql-dialog .graphiql-warning-text {
  color: oklch(var(--accent-orange));
  font-weight: var(--font-weight-medium);
}

.graphiql-dialog .graphiql-table {
  border-collapse: collapse;
  width: 100%;
}

.graphiql-dialog .graphiql-table :is(th, td) {
  border: 1px solid oklch(var(--border-default));
  padding: var(--px-8) var(--px-12);
}

/* A single key the short-key dialog */
.graphiql-dialog .graphiql-key {
  background-color: oklch(var(--bg-overlay));
  border-radius: var(--border-radius-4);
  padding: var(--px-4);
}

/* Avoid showing native tooltips for icons with titles */
.graphiql-container svg {
  pointer-events: none;
}