/ markup, those rules apply here and
truncate the cell content with an ellipsis. Override them so the text wraps
to the next line and is shown in full (no clip, no ellipsis). The extra
class selectors raise specificity above the legacy rule. */
}
.consul-auth-method-list .hds-table__th {
white-space: nowrap;
}
.consul-auth-method-list .hds-table__th:nth-child(1),
.consul-auth-method-list .hds-table__td:nth-child(1) {
width: 100%;
}
.consul-auth-method-list .hds-table__td {
overflow-wrap: anywhere;
}
.consul-auth-method-list .hds-table__tbody .hds-table__td > * {
white-space: normal;
overflow: visible;
text-overflow: clip;
}
.consul-auth-method-list__name {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
font-weight: var(--token-typography-font-weight-semibold);
/* allow the flex container (and its link) to shrink below the name's
intrinsic width so a long, unbreakable name wraps instead of stretching
the column. */
min-width: 0;
}
.consul-auth-method-list__name a {
font-weight: var(--token-typography-font-weight-semibold);
overflow-wrap: anywhere;
min-width: 0;
}
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
.consul-auth-method-toolbar {
/* the sorter sits at the right end of the toolbar row */
}
.consul-auth-method-toolbar .consul-auth-method-toolbar__sort {
flex: 0 0 auto;
margin-left: auto;
}
.consul-auth-method-toolbar .consul-auth-method-toolbar__sort .hds-dropdown-toggle-button {
min-height: 2.25rem;
}
/* The auth-methods index uses the HDS Filter Bar for its toolbar, so drop the
default header underline above it to avoid a doubled-up separator. */
html[data-route="dc.acls.auth-methods.index"] .app-view > header .title {
border-bottom: none;
}
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
.consul-acl-ruleset-badge {
display: inline-flex;
margin-right: 6px;
margin-bottom: 6px;
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
.consul-token-list {
margin-top: 16px;
/* Keep multi-word column headers on a single line. */
/* Actions is the last column: shrink it to just fit the menu button so the
remaining width goes to the content columns. */
}
.consul-token-list .hds-table__th {
white-space: nowrap;
}
.consul-token-list .hds-table__th:last-child,
.consul-token-list .hds-table__td:last-child {
width: 1%;
white-space: nowrap;
}
.consul-token-list__name {
display: inline-flex;
align-items: center;
font-weight: var(--token-typography-font-weight-semibold);
}
.consul-token-list__name a {
font-weight: var(--token-typography-font-weight-semibold);
}
/* "Your token" indicator: a small check-circle before the name, matching the
legacy [rel='me'] marker. */
.consul-token-list__me::before {
color: var(--token-color-foreground-action);
margin-right: 4px;
}
.consul-token-list__description {
display: block;
color: var(--token-color-foreground-faint);
font-style: normal;
}
/* The copy button extends %button, which adds ~2.2em of horizontal padding and
a 100px min-width. Strip it so the SecretID link aligns with the other cells. */
.consul-token-list .copy-button button {
min-width: 0;
padding-left: 0;
padding-right: 0;
}
.consul-token-list__actions {
display: inline-flex;
}
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
.consul-token-toolbar {
/* the sorter sits at the right end of the toolbar row */
}
.consul-token-toolbar .consul-token-toolbar-row__sort {
flex: 0 0 auto;
margin-left: auto;
}
.consul-token-toolbar .consul-token-toolbar-row__sort .hds-dropdown-toggle-button {
min-height: 2.25rem;
}
/* The tokens index uses the HDS Filter Bar for its toolbar, so drop the
default header underline above it to avoid a doubled-up separator. */
html[data-route="dc.acls.tokens.index"] .app-view > header .title {
border-bottom: none;
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
.consul-policy-list {
margin-top: 16px;
/* Keep multi-word column headers on a single line. */
/* Let the Description column (3rd) absorb all the surplus width so the
trailing Actions column collapses to just the menu button. Unlike the
tokens table (whose wide SecretID column naturally soaks up the slack),
this table has no naturally wide column, so without an explicit stretch
column the spare width would be spread across every column — including
Actions, leaving a large empty gap before the menu button. */
/* Wrap long values (including unbreakable ones with no spaces, e.g. a policy
name or description with no whitespace) onto multiple lines instead of
forcing the column endlessly wider. The trailing Actions column is excluded
so its menu button stays on one line. */
/* The legacy `%table` rules (app/components/table/index.scss, reached because
`.app-shell__main` @extends `%main-content`, whose `table` descendants
extend `%table`) force every body cell's child to
`white-space: nowrap; overflow: hidden; text-overflow: ellipsis`. Because
the HDS table reuses native / markup, those rules apply here and
truncate the cell content with an ellipsis. Override them on the content
columns so the text wraps to the next line and is shown in full (no clip,
no ellipsis). The extra class selectors raise specificity above the legacy
rule. The trailing Actions column is left untouched so its menu button
stays on one line. */
/* Actions is the last column: shrink it to just fit the menu button so the
remaining width goes to the content columns. */
}
.consul-policy-list .hds-table__th {
white-space: nowrap;
}
.consul-policy-list .hds-table__th:nth-child(3),
.consul-policy-list .hds-table__td:nth-child(3) {
width: 100%;
}
.consul-policy-list .hds-table__td:not(:last-child) {
overflow-wrap: anywhere;
}
.consul-policy-list .hds-table__tbody .hds-table__td:not(:last-child) > * {
white-space: normal;
overflow: visible;
text-overflow: clip;
}
.consul-policy-list .hds-table__th:last-child,
.consul-policy-list .hds-table__td:last-child {
width: 1%;
white-space: nowrap;
}
.consul-policy-list__name {
display: inline-flex;
align-items: center;
font-weight: var(--token-typography-font-weight-semibold);
/* allow the flex container (and its link) to shrink below the name's
intrinsic width so a long, unbreakable name wraps instead of stretching
the column. */
min-width: 0;
}
.consul-policy-list__name a {
font-weight: var(--token-typography-font-weight-semibold);
overflow-wrap: anywhere;
min-width: 0;
}
/* Built-in policy indicator: a small brand star before the name, matching the
legacy management/read-only marker. */
.consul-policy-list__type::before {
--icon-color: var(--token-color-consul-brand);
margin-right: 4px;
}
.consul-policy-list__description {
display: block;
color: var(--token-color-foreground-faint);
font-style: normal;
}
.consul-policy-list__actions {
display: inline-flex;
}
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
.consul-policy-toolbar {
/* the sorter sits at the right end of the toolbar row */
}
.consul-policy-toolbar .consul-policy-toolbar__sort {
flex: 0 0 auto;
margin-left: auto;
}
.consul-policy-toolbar .consul-policy-toolbar__sort .hds-dropdown-toggle-button {
min-height: 2.25rem;
}
/* The policies index uses the HDS Filter Bar for its toolbar, so drop the
default header underline above it to avoid a doubled-up separator. */
html[data-route="dc.acls.policies.index"] .app-view > header .title {
border-bottom: none;
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
.consul-role-list {
margin-top: 16px;
/* Keep multi-word column headers on a single line. */
/* Let the Description column (2nd) absorb all the surplus width so the
trailing Actions column collapses to just the menu button. This table has
no naturally wide column, so without an explicit stretch column the spare
width would be spread across every column — including Actions, leaving a
large empty gap before the menu button. */
/* Wrap long values (including unbreakable ones with no spaces, e.g. a role
name or description with no whitespace) onto multiple lines instead of
forcing the column endlessly wider. The trailing Actions column is excluded
so its menu button stays on one line. */
/* The legacy `%table` rules (app/components/table/index.scss, reached because
`.app-shell__main` @extends `%main-content`, whose `table` descendants
extend `%table`) force every body cell's child to
`white-space: nowrap; overflow: hidden; text-overflow: ellipsis`. Because
the HDS table reuses native /| markup, those rules apply here and
truncate the cell content with an ellipsis. Override them on the content
columns so the text wraps to the next line and is shown in full (no clip,
no ellipsis). The extra class selectors raise specificity above the legacy
rule. The trailing Actions column is left untouched so its menu button
stays on one line. */
/* Actions is the last column: shrink it to just fit the menu button so the
remaining width goes to the content columns. */
}
.consul-role-list .hds-table__th {
white-space: nowrap;
}
.consul-role-list .hds-table__th:nth-child(2),
.consul-role-list .hds-table__td:nth-child(2) {
width: 100%;
}
.consul-role-list .hds-table__td:not(:last-child) {
overflow-wrap: anywhere;
}
.consul-role-list .hds-table__tbody .hds-table__td:not(:last-child) > * {
white-space: normal;
overflow: visible;
text-overflow: clip;
}
.consul-role-list .hds-table__th:last-child,
.consul-role-list .hds-table__td:last-child {
width: 1%;
white-space: nowrap;
}
.consul-role-list__name {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
font-weight: var(--token-typography-font-weight-semibold);
/* allow the flex container (and its link) to shrink below the name's
intrinsic width so a long, unbreakable name wraps instead of stretching
the column. */
min-width: 0;
}
.consul-role-list__name a {
font-weight: var(--token-typography-font-weight-semibold);
overflow-wrap: anywhere;
min-width: 0;
}
.consul-role-list__description {
display: block;
color: var(--token-color-foreground-faint);
font-style: normal;
}
.consul-role-list__actions {
display: inline-flex;
}
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
.consul-role-toolbar {
/* the sorter sits at the right end of the toolbar row */
}
.consul-role-toolbar .consul-role-toolbar__sort {
flex: 0 0 auto;
margin-left: auto;
}
.consul-role-toolbar .consul-role-toolbar__sort .hds-dropdown-toggle-button {
min-height: 2.25rem;
}
/* The roles index uses the HDS Filter Bar for its toolbar, so drop the
default header underline above it to avoid a doubled-up separator. */
html[data-route="dc.acls.roles.index"] .app-view > header .title {
border-bottom: none;
}
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
.consul-acl-ruleset-badge[data-type=policy-management] .hds-badge__icon {
color: var(--token-color-consul-brand) !important;
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
.role-selector [name="role[state]"],
.role-selector [name="role[state]"] + * {
display: none;
}
.role-selector [name="role[state]"]:checked + * {
display: block;
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
.topology-notices button {
color: var(--token-color-foreground-action);
}
.topology-container {
color: var(--token-color-foreground-faint);
}
#downstream-container,
#metrics-container,
#upstream-container {
border-radius: var(--decor-radius-100);
border: 1px solid;
/* TODO: If this color is combined with the above */
/* border property then the compressor removes the color */
border-color: var(--token-color-surface-interactive-active);
}
#downstream-container,
#upstream-container {
background-color: var(--token-color-surface-strong);
}
#downstream-container > div:first-child {
display: inline-flex;
}
#downstream-container > div:first-child span::before {
background-color: var(--token-color-foreground-faint);
}
#metrics-container div:first-child {
background-color: var(--token-color-surface-primary);
}
#metrics-container .link {
background-color: var(--token-color-surface-strong);
}
#metrics-container .link a {
color: var(--token-color-foreground-faint);
}
#metrics-container .link a::before {
background-color: var(--token-color-foreground-faint);
}
#metrics-container .link a:hover {
color: var(--token-color-foreground-action);
}
#downstream-lines svg path,
#upstream-lines svg path {
fill: transparent;
}
#downstream-lines svg circle,
#upstream-lines svg circle {
fill: var(--token-color-surface-primary);
}
#downstream-lines svg .allow-arrow,
#upstream-lines svg .allow-arrow {
fill: var(--token-color-palette-neutral-300);
stroke-linejoin: round;
}
#downstream-lines svg path,
#downstream-lines svg .allow-dot,
#downstream-lines svg .allow-arrow,
#upstream-lines svg path,
#upstream-lines svg .allow-dot,
#upstream-lines svg .allow-arrow {
stroke: var(--token-color-palette-neutral-300);
stroke-width: 2;
}
#downstream-lines svg path[data-permission=not-defined],
#downstream-lines svg path[data-permission=empty],
#upstream-lines svg path[data-permission=not-defined],
#upstream-lines svg path[data-permission=empty] {
stroke-dasharray: 4;
}
#downstream-lines svg path[data-permission=deny],
#upstream-lines svg path[data-permission=deny] {
stroke: var(--token-color-foreground-critical);
}
#downstream-lines svg .deny-dot,
#upstream-lines svg .deny-dot {
stroke: var(--token-color-foreground-critical);
stroke-width: 2;
}
#downstream-lines svg .deny-arrow,
#upstream-lines svg .deny-arrow {
fill: var(--token-color-foreground-critical);
stroke: var(--token-color-foreground-critical);
stroke-linejoin: round;
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
.topology-notices {
display: flow-root;
}
.topology-notices button {
float: right;
margin-top: 16px;
margin-bottom: 32px;
}
.topology-container {
display: grid;
height: 100%;
align-items: start;
grid-template-columns: 2fr 1fr 2fr 1fr 2fr;
grid-template-rows: 50px 1fr 50px;
grid-template-areas: "down-cards down-lines . up-lines up-cards" "down-cards down-lines metrics up-lines up-cards" "down-cards down-lines . up-lines up-cards";
}
#downstream-container {
grid-area: down-cards;
}
#downstream-lines {
grid-area: down-lines;
}
#upstream-lines {
grid-area: up-lines;
}
#upstream-column {
grid-area: up-cards;
}
#downstream-lines,
#upstream-lines {
position: relative;
}
#downstream-lines {
margin-left: -20px;
}
#upstream-lines {
margin-right: -20px;
}
#downstream-container,
#upstream-container {
padding: 12px;
}
#upstream-column #upstream-container:not(:last-child) {
margin-bottom: 8px;
}
#metrics-container {
grid-area: metrics;
}
#metrics-container div:first-child {
padding: 12px;
border: none;
}
#metrics-container .link {
padding: 18px;
}
#metrics-container .link a::before {
margin-right: 4px;
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
#upstream-container .topology-metrics-card:not(:last-child),
#downstream-container .topology-metrics-card:not(:last-child) {
margin-bottom: 8px;
}
#upstream-container .topology-metrics-card,
#downstream-container .topology-metrics-card {
display: block;
color: var(--token-color-foreground-faint);
overflow: hidden;
background-color: var(--token-color-surface-primary);
border-radius: var(--decor-radius-100);
border: 1px solid;
/* TODO: If this color is combined with the above */
/* border property then the compressor removes the color */
border-color: var(--token-color-surface-interactive-active);
}
#upstream-container .topology-metrics-card p,
#downstream-container .topology-metrics-card p {
padding: 12px 12px 0 12px;
margin-bottom: 0 !important;
}
#upstream-container .topology-metrics-card p.empty,
#downstream-container .topology-metrics-card p.empty {
padding: 12px !important;
}
#upstream-container .topology-metrics-card div dl,
#downstream-container .topology-metrics-card div dl {
display: inline-flex;
margin-right: 8px;
}
#upstream-container .topology-metrics-card div dd,
#downstream-container .topology-metrics-card div dd {
color: var(--token-color-foreground-faint);
}
#upstream-container .topology-metrics-card div span,
#downstream-container .topology-metrics-card div span {
margin-right: 8px;
}
#upstream-container .topology-metrics-card div span::before,
#upstream-container .topology-metrics-card div dt::before,
#downstream-container .topology-metrics-card div span::before,
#downstream-container .topology-metrics-card div dt::before {
margin-right: 4px;
}
#upstream-container .topology-metrics-card div .nspace dt::before,
#upstream-container .topology-metrics-card div .health dt::before,
#downstream-container .topology-metrics-card div .nspace dt::before,
#downstream-container .topology-metrics-card div .health dt::before {
margin-top: 2px;
}
#upstream-container .topology-metrics-card div .partition dt::before,
#upstream-container .topology-metrics-card div .nspace dt::before,
#upstream-container .topology-metrics-card div .health dt::before,
#downstream-container .topology-metrics-card div .partition dt::before,
#downstream-container .topology-metrics-card div .nspace dt::before,
#downstream-container .topology-metrics-card div .health dt::before {
--icon-color: var(--token-color-foreground-faint);
}
#upstream-container .topology-metrics-card div .passing::before,
#downstream-container .topology-metrics-card div .passing::before {
--icon-color: var(--token-color-foreground-success);
}
#upstream-container .topology-metrics-card div .warning::before,
#downstream-container .topology-metrics-card div .warning::before {
--icon-color: var(--token-color-foreground-warning);
}
#upstream-container .topology-metrics-card div .critical::before,
#downstream-container .topology-metrics-card div .critical::before {
--icon-color: var(--token-color-foreground-critical);
}
#upstream-container .topology-metrics-card div .empty::before,
#downstream-container .topology-metrics-card div .empty::before {
--icon-color: var(--token-color-foreground-faint);
}
#upstream-container .topology-metrics-card .details,
#downstream-container .topology-metrics-card .details {
padding: 0 12px 12px 12px;
}
#upstream-container .topology-metrics-card .details > *:not(:last-child),
#downstream-container .topology-metrics-card .details > *:not(:last-child) {
padding-bottom: 6px;
}
#upstream-container .topology-metrics-card .details .group,
#downstream-container .topology-metrics-card .details .group {
display: grid;
grid-template-columns: 20px 1fr;
grid-template-rows: repeat(2, 1fr);
grid-template-areas: "partition partition" "union namespace";
}
#upstream-container .topology-metrics-card .details .group span,
#downstream-container .topology-metrics-card .details .group span {
display: inline-block;
grid-area: union;
padding-left: 7px;
margin-right: 0px;
}
#upstream-container .topology-metrics-card .details .group span::before,
#downstream-container .topology-metrics-card .details .group span::before {
margin-right: 0px;
--icon-color: var(--token-color-foreground-faint);
}
#upstream-container .topology-metrics-card .details .group dl:first-child,
#downstream-container .topology-metrics-card .details .group dl:first-child {
grid-area: partition;
padding-bottom: 6px;
}
#upstream-container .topology-metrics-card .details .group dl:nth-child(2),
#downstream-container .topology-metrics-card .details .group dl:nth-child(2) {
grid-area: namespace;
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
.topology-metrics-source-type {
margin: 6px 0 6px 12px;
display: table;
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
.topology-metrics-popover > button {
position: absolute;
transform: translate(-50%, -50%);
background-color: var(--token-color-surface-primary);
padding: 1px 1px;
}
.topology-metrics-popover > button:hover {
cursor: pointer;
}
.topology-metrics-popover > button:active, .topology-metrics-popover > button:focus {
outline: none;
}
.topology-metrics-popover > button:disabled {
cursor: default;
}
.topology-metrics-popover.deny .informed-action header::before {
display: none;
}
.topology-metrics-popover.deny > button::before, .topology-metrics-popover.deny .tippy-arrow::after {
--icon-color: var(--token-color-foreground-critical);
}
.topology-metrics-popover.l7 > button::before, .topology-metrics-popover.l7 .tippy-arrow::after {
--icon-color: var(--token-color-palette-neutral-300);
}
.topology-metrics-popover.not-defined > button::before, .topology-metrics-popover.not-defined .tippy-arrow::after {
--icon-color: var(--token-color-vault-brand);
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
#metrics-container .sparkline-wrapper svg path {
stroke-width: 0;
}
#metrics-container .sparkline-wrapper .tooltip {
padding: 0 0 10px;
border: 1px solid var(--token-color-palette-neutral-300);
background: #fff;
border-radius: 2px;
box-sizing: border-box;
box-shadow: var(--token-elevation-higher-box-shadow);
}
#metrics-container .sparkline-wrapper .tooltip .sparkline-time {
padding: 8px 10px;
color: #000;
border-bottom: 1px solid var(--token-color-surface-interactive-active);
margin-bottom: 4px;
text-align: center;
}
#metrics-container .sparkline-wrapper .tooltip .sparkline-tt-legend,
#metrics-container .sparkline-wrapper .tooltip .sparkline-tt-sum {
border: 0;
padding: 3px 10px 0 10px;
}
#metrics-container .sparkline-wrapper .tooltip .sparkline-tt-sum {
border-top: 1px solid var(--token-color-surface-interactive-active);
margin-top: 4px;
padding: 8px 10px 0 10px;
}
#metrics-container .sparkline-wrapper .tooltip .sparkline-tt-legend-color {
width: 12px;
height: 12px;
border-radius: 2px;
margin: 0 5px 0 0;
padding: 0;
}
#metrics-container .sparkline-wrapper .tooltip .sparkline-tt-legend-value,
#metrics-container .sparkline-wrapper .tooltip .sparkline-tt-sum-value {
float: right;
}
#metrics-container .sparkline-wrapper div.tooltip:before {
content: "";
display: block;
position: absolute;
width: 12px;
height: 12px;
left: 15px;
bottom: -7px;
border: 1px solid var(--token-color-palette-neutral-300);
border-top: 0;
border-left: 0;
background: #fff;
transform: rotate(45deg);
}
.sparkline-key h3::before {
margin: 2px 3px 0 0;
font-size: var(--token-typography-body-200-font-size);
}
.sparkline-key h3 {
color: var(--token-color-foreground-strong);
}
.sparkline-key .sparkline-key-content dt {
font-weight: var(--token-typography-font-weight-semibold);
}
.sparkline-key .sparkline-key-content dd {
color: var(--token-color-foreground-faint);
}
.sparkline-key-link {
color: var(--token-color-foreground-faint);
}
.sparkline-key-link:hover {
color: var(--token-color-foreground-action);
}
#metrics-container:hover .sparkline-key-link::before {
margin: 1px 3px 0 0;
font-size: 12px;
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
#metrics-container div .sparkline-wrapper {
position: relative;
width: 100%;
padding: 0;
margin: 0;
height: 70px;
}
#metrics-container div .sparkline-wrapper svg.sparkline {
width: 100%;
height: 70px;
padding: 0;
margin: 0;
}
#metrics-container div .sparkline-wrapper .tooltip {
visibility: hidden;
position: absolute;
z-index: 10;
bottom: 78px;
width: 217px;
}
#metrics-container div .sparkline-wrapper .sparkline-tt-legend-color {
display: inline-block;
}
#metrics-container div .sparkline-wrapper .topology-metrics-error,
#metrics-container div .sparkline-wrapper .topology-metrics-loader {
padding-top: 15px;
}
.sparkline-key .sparkline-key-content {
width: 500px;
min-height: 100px;
}
.sparkline-key .sparkline-key-content dl {
padding: 10px 0 0 0;
}
.sparkline-key .sparkline-key-content dt {
width: 125px;
float: left;
}
.sparkline-key .sparkline-key-content dd {
margin: 0 0 12px 135px;
}
.sparkline-key-link {
visibility: hidden;
float: right;
margin-top: -35px;
margin-right: 12px;
}
#metrics-container:hover .sparkline-key-link {
visibility: visible;
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
.topology-metrics-stats {
padding: 12px 12px 0 12px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: stretch;
width: 100%;
border-top: 1px solid var(--token-color-surface-interactive-active);
}
.topology-metrics-stats dl {
display: flex;
padding-bottom: 12px;
}
.topology-metrics-stats dt {
margin-right: 5px;
line-height: 1.5em !important;
}
.topology-metrics-stats dd {
color: var(--token-color-foreground-faint) !important;
}
.topology-metrics-stats span {
padding-bottom: 12px;
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
.topology-metrics-status-error,
.topology-metrics-status-loader {
color: var(--token-color-foreground-faint);
text-align: center;
margin: 0 auto !important;
display: block;
}
.topology-metrics-status-error span::before,
.topology-metrics-status-loader span::before {
background-color: var(--token-color-foreground-faint);
}
span.topology-metrics-status-loader::after {
--icon-name: var(--icon-loading);
content: "";
margin-left: 0.5rem; /* 8px */
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
.consul-intention-list-table {
/* Give the table room to breathe below the CRD notice / toolbar above it. */
margin-top: 16px;
/* Keep multi-word column headers (e.g. "Intention type") on a single line so
the header row doesn't grow taller than the rest. */
}
.consul-intention-list-table .hds-table__th {
white-space: nowrap;
}
.consul-intention-list-table__meta-info {
display: flex;
/* Match the services list: the Bucket::List icon needs a small gap from its
label, otherwise the glyph sits flush against the bucket name. */
}
.consul-intention-list-table__meta-info .consul-bucket-list {
display: flex;
gap: 4px;
}
.consul-intention-list-table__meta-info .consul-intention-list-table__meta-info__peer {
display: flex;
align-items: center;
}
.consul-intention-list-table__name {
font-weight: var(--token-typography-font-weight-semibold);
}
.consul-intention-list-table__name a {
font-weight: var(--token-typography-font-weight-semibold);
}
.consul-intention-list-table__actions {
display: inline-flex;
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
.consul-peer-search-bar .value-pending span::before,
.consul-peer-search-bar .value-establishing span::before,
.consul-peer-search-bar .value-active span::before,
.consul-peer-search-bar .value-failing span::before,
.consul-peer-search-bar .value-terminated span::before,
.consul-peer-search-bar .value-deleting span::before {
--icon-size: icon-000;
content: "";
}
.consul-peer-search-bar .value-pending span,
.consul-peer-search-bar .value-establishing span,
.consul-peer-search-bar .value-active span,
.consul-peer-search-bar .value-failing span,
.consul-peer-search-bar .value-terminated span,
.consul-peer-search-bar .value-deleting span {
font-size: var(--token-typography-body-200-font-size);
}
.consul-peer-search-bar .value-pending span::before {
--icon-name: icon-running;
--icon-color: var(--token-color-palette-neutral-600);
}
.consul-peer-search-bar .value-pending span {
background-color: var(--token-color-consul-surface);
color: var(--token-color-consul-foreground);
}
.consul-peer-search-bar .value-establishing span::before {
--icon-name: icon-running;
--icon-color: var(--token-color-palette-neutral-600);
}
.consul-peer-search-bar .value-establishing span {
background-color: var(--token-color-palette-blue-50);
color: var(--token-color-palette-blue-200);
}
.consul-peer-search-bar .value-active span::before {
--icon-name: icon-check;
--icon-color: var(--token-color-palette-green-400);
}
.consul-peer-search-bar .value-active span {
background-color: var(--token-color-palette-green-50);
color: var(--token-color-palette-green-200);
}
.consul-peer-search-bar .value-failing span::before {
--icon-name: icon-x;
--icon-color: var(--token-color-palette-red-200);
}
.consul-peer-search-bar .value-failing span {
background-color: var(--token-color-palette-red-50);
color: var(--token-color-palette-red-200);
}
.consul-peer-search-bar .value-terminated span::before {
--icon-name: icon-x-square;
--icon-color: var(--token-color-palette-neutral-600);
}
.consul-peer-search-bar .value-terminated span {
background-color: var(--token-color-palette-neutral-200);
color: var(--token-color-palette-neutral-600);
}
.consul-peer-search-bar .value-deleting span::before {
--icon-name: icon-loading;
--icon-color: var(--token-color-foreground-warning-on-surface);
}
.consul-peer-search-bar .value-deleting span {
background-color: var(--token-color-surface-warning);
color: var(--token-color-foreground-warning-on-surface);
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
.peers__list__peer-detail {
display: flex;
align-content: center;
gap: 18px;
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
.consul-peer-form {
width: 416px;
}
.consul-peer-form nav {
margin-bottom: 20px;
}
.consul-peer-form-generate {
width: 416px;
min-height: 200px;
}
.consul-peer-form-generate ol {
list-style-position: outside;
list-style-type: none;
counter-reset: hexagonal-counter;
position: relative;
}
.consul-peer-form-generate ol::before {
content: "";
border-left: var(--decor-border-100);
border-color: var(--token-color-palette-neutral-300);
height: 100%;
position: absolute;
left: 2rem;
}
.consul-peer-form-generate li {
counter-increment: hexagonal-counter;
position: relative;
margin-left: 60px;
margin-bottom: 1rem;
}
.consul-peer-form-generate li .copyable-code {
margin-top: 1rem;
}
.consul-peer-form-generate li::before {
--icon-name: icon-hexagon;
--icon-size: icon-600;
content: "";
position: absolute;
z-index: 2;
}
.consul-peer-form-generate li::after {
content: counter(hexagonal-counter);
position: absolute;
top: 0px;
background-color: var(--token-color-palette-neutral-0);
z-index: 1;
text-align: center;
}
.consul-peer-form-generate li::before,
.consul-peer-form-generate li::after {
left: -2.4rem;
width: 20px;
height: 20px;
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
.border-bottom-primary {
border-bottom: 1px solid var(--token-color-border-primary);
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
.peerings-badge {
display: flex;
align-items: center;
justify-content: center;
padding: 2px 8px;
border-radius: 5px;
gap: 4px;
}
.peerings-badge.active {
background: var(--token-color-surface-success);
color: var(--token-color-foreground-success-on-surface);
}
.peerings-badge.pending {
background: var(--token-color-consul-surface);
color: var(--token-color-consul-foreground);
}
.peerings-badge.establishing {
background: var(--token-color-surface-action);
color: var(--token-color-foreground-action);
}
.peerings-badge.failing {
background: var(--token-color-surface-critical);
color: var(--token-color-foreground-critical-on-surface);
}
.peerings-badge.deleting {
background: var(--token-color-surface-warning);
color: var(--token-color-foreground-warning-on-surface);
}
.peerings-badge.terminated {
background: var(--token-color-surface-interactive-active);
color: var(--token-color-foreground-primary);
}
.peerings-badge.undefined {
background: var(--token-color-surface-interactive-active);
color: var(--token-color-foreground-primary);
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
.consul-node-peer-info {
display: flex;
align-items: center;
}
.consul-node-peer-info .consul-node-peer-info__name {
margin-left: 4px;
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
.consul-peer-info {
background: var(--token-color-surface-faint);
color: var(--token-color-foreground-faint);
padding: 0px 8px;
border-radius: 2px;
display: flex;
align-items: center;
}
.consul-peer-info .consul-peer-info__description {
margin-left: 4px;
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
.consul-peer-form {
width: 416px;
}
.consul-peer-form nav {
margin-bottom: 20px;
}
.consul-peer-form-generate {
width: 416px;
min-height: 200px;
}
.consul-peer-form-generate ol {
list-style-position: outside;
list-style-type: none;
counter-reset: hexagonal-counter;
position: relative;
}
.consul-peer-form-generate ol::before {
content: "";
border-left: var(--decor-border-100);
border-color: var(--token-color-palette-neutral-300);
height: 100%;
position: absolute;
left: 2rem;
}
.consul-peer-form-generate li {
counter-increment: hexagonal-counter;
position: relative;
margin-left: 60px;
margin-bottom: 1rem;
}
.consul-peer-form-generate li .copyable-code {
margin-top: 1rem;
}
.consul-peer-form-generate li::before {
--icon-name: icon-hexagon;
--icon-size: icon-600;
content: "";
position: absolute;
z-index: 2;
}
.consul-peer-form-generate li::after {
content: counter(hexagonal-counter);
position: absolute;
top: 0px;
background-color: var(--token-color-palette-neutral-0);
z-index: 1;
text-align: center;
}
.consul-peer-form-generate li::before,
.consul-peer-form-generate li::after {
left: -2.4rem;
width: 20px;
height: 20px;
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
.agentless-node-notice .hds-alert__title {
display: flex;
justify-content: space-between;
}
/* cascading typography */
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
[id^=docfy-demo-preview-definition-table] .definition-table dt, .definition-table dt {
line-height: var(--token-typography-body-300-line-height);
}
.app-view > div form:not(.filter-bar) [role=radiogroup] label,
.modal-dialog [role=document] [role=radiogroup] label {
line-height: var(--token-typography-body-100-line-height);
}
/**/
/* resets */
.type-toggle > em, .app-shell__main form button + em,
.modal-dialog [role=document] form button + em,
.app-shell__main .type-select > em,
.modal-dialog [role=document] .type-select > em,
.app-shell__main .type-password > em,
.modal-dialog [role=document] .type-password > em,
.app-shell__main .type-text > em,
.modal-dialog [role=document] .type-text > em,
.oidc-select label > em,
.app-view > div form:not(.filter-bar) [role=radiogroup] label > em,
.modal-dialog [role=document] [role=radiogroup] label > em,
.app-shell__main table th em,
.modal-dialog [role=document] table th em,
.consul-intention-list td.source em,
.consul-intention-list td.destination em,
.app-view h1 em {
font-style: normal;
}
/**/
/* composite row */
.list-collection > ul > li:not(:first-child) > .header *:not(button), .consul-upstream-instance-list li > .header *:not(button), .consul-exposed-path-list > ul > li > .header *:not(button), .consul-lock-session-list ul > li:not(:first-child) > .header *:not(button) {
font-size: inherit;
font-weight: inherit;
}
/**/
/*TODO: This should go in reset, and probably needs select etc adding */
@media (max-width: 420px) and (-webkit-min-device-pixel-ratio: 0) {
input {
font-size: var(--token-typography-body-300-font-size) !important;
}
}
/* layouts */
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
#wrapper {
box-sizing: border-box;
}
.modal-dialog > *,
.app-shell__main > *,
#wrapper > footer > * {
box-sizing: border-box;
}
html[data-route$=create] .app-shell__main,
html[data-route$=edit] .app-shell__main {
max-width: 1260px;
}
fieldset [role=group] {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
[role=group] fieldset {
width: 50%;
}
[role=group] fieldset:not(:first-of-type) {
padding-left: 20px;
border-left: 1px solid;
border-left: var(--token-color-foreground-faint);
}
[role=group] fieldset:not(:last-of-type) {
padding-right: 20px;
}
/* position main app-view when there are/aren't breadcrumbs */
.app-view {
margin-top: 50px;
}
@media (max-width: 849px) {
html:not(.with-breadcrumbs) .app-view {
margin-top: 10px;
}
}
/**/
/* transition the initial brand-loader out */
html body > .brand-loader {
transition-property: transform, opacity;
transform: translate(0, 0);
opacity: 1;
}
html[data-state]:not(.ember-loading) body > .brand-loader {
opacity: 0;
}
@media (min-width: 900px) {
html[data-state] body > .brand-loader {
transform: translate(calc(var(--chrome-width) / 2), 0);
}
}
/**/
/* hide the Consul::Loader/spinning loader when idle/hide content when loading */
html.ember-loading .view-loader,
html[data-state=idle] .view-loader {
display: none;
}
.outlet[data-state=loading] {
display: none;
}
/**/
/* all forms have a margin below the header */
html[data-route$=create] .app-view > header + div > *:first-child,
html[data-route$=edit] .app-view > header + div > *:first-child {
margin-top: 1.8em;
}
/* most tabs have margin after the tab bar, unless the tab has a filter bar */
/* if it is a filter bar and the thing after the filter bar is a p then it also */
/* needs a top margun :S */
.app-view > div .tab-section > *:first-child:not(.filter-bar):not(table),
.app-view > div .tab-section > .search-bar + p,
.app-view > div .tab-section .consul-health-check-list,
.app-view > div .container {
margin-top: 1.25em;
}
html[data-route^="dc.nodes.show.sessions"] .consul-lock-session-list {
margin-top: 0 !important;
}
html[data-route^="dc.nodes.show.sessions"] .consul-lock-session-list ul {
border-top-width: 0 !important;
}
html[data-route="dc.services.index"] .consul-service-list ul,
.consul-nspace-list ul,
.consul-service-instance-list ul,
.consul-role-list ul,
.consul-policy-list ul,
.consul-token-list ul,
.consul-peer-list ul,
.consul-auth-method-list ul {
border-top-width: 0 !important;
}
.consul-upstream-instance-list {
margin-top: 0 !important;
}
/* turn off top borders for things flush up to a filter bar */
html:not(.has-nspaces) [class*=nspace-] {
display: none;
}
html:not(.has-partitions) [class*=partition-] {
display: none;
}
#wrapper {
display: flex;
min-height: 100vh;
}
.app-shell__main {
padding: 0 48px;
position: relative;
flex: 1;
min-width: 0;
}
html:not([data-route$=index]):not([data-route$=instances]) .app-shell__main {
margin-bottom: 2em;
}
@media (max-width: 849px) {
.actions button.copy-btn {
margin-top: -56px;
padding: 0;
}
}
.app-shell__main p:not(:last-child),
.modal-dialog [role=document] p:not(:last-child) {
margin-bottom: 1em;
}
/* TODO: keep margin below forms, move elsewhere? */
.app-shell__main form:not(.filter-bar),
.modal-dialog [role=document] form:not(.filter-bar),
.app-shell__main form + div .with-confirmation,
.modal-dialog [role=document] form + div .with-confirmation {
margin-bottom: 2em;
}
@media (max-width: 420px) {
.app-shell__main form [type=reset] {
float: right;
margin-right: 0 !important;
}
}
/* pinpoint individual overwrites for those 'just on this page' problems */
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
/* drop the external dashboard button down if it exists */
/* so it doesn't sit next to the Intentions create button */
/* awkwardly */
html[data-route^="dc.services.show"] .app-view .actions .external-dashboard {
position: absolute;
top: 50px;
right: 0;
}
/* instance detail dl text*/
html[data-route^="dc.services.instance"] .app-view > header dl {
float: left;
margin-top: 19px;
margin-bottom: 23px;
margin-right: 50px;
}
html[data-route^="dc.services.instance"] .app-view > header dt {
font-weight: var(--token-typography-font-weight-bold);
}
html[data-route^="dc.services.instance"] .tab-nav {
border-top: var(--decor-border-100);
}
html[data-route^="dc.services.instance"] .tab-section section:not(:last-child) {
border-bottom: var(--decor-border-100);
}
html[data-route^="dc.services.instance"] .tab-nav,
html[data-route^="dc.services.instance"] .tab-section section:not(:last-child) {
border-color: var(--token-color-surface-interactive-active);
}
html[data-route^="dc.services.instance"] .tab-section section:not(:last-child) {
padding-bottom: 24px;
}
html[data-route^="dc.services.instance.metadata"] .tab-section section h2 {
margin: 24px 0 12px 0;
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
html[data-route^="dc.nodes.show.metadata"] table tr {
cursor: default;
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
html[data-route^="dc.acls.index"] main td strong {
margin-right: 3px;
}
@media (max-width: 420px) {
html[data-route^="dc.acls.create"] main header .actions,
html[data-route^="dc.acls.edit"] main header .actions {
float: none;
display: flex;
justify-content: space-between;
margin-bottom: 1em;
}
html[data-route^="dc.acls.create"] main header .actions .with-feedback,
html[data-route^="dc.acls.edit"] main header .actions .with-feedback {
position: absolute;
right: 0;
}
html[data-route^="dc.acls.create"] main header .actions .with-confirmation,
html[data-route^="dc.acls.edit"] main header .actions .with-confirmation {
margin-top: 0;
}
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
html[data-route^="dc.intentions.edit"] .definition-table {
margin-bottom: 1em;
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
/**/
section[data-route="dc.show.serverstatus"] .server-failure-tolerance {
box-shadow: none;
padding: var(--padding-y) var(--padding-x);
max-width: 770px;
display: flex;
flex-wrap: wrap;
}
section[data-route="dc.show.serverstatus"] .server-failure-tolerance > header {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-bottom: 0.5rem; /* 8px */
margin-bottom: 1rem; /* 16px */
border-bottom: var(--decor-border-100);
border-color: var(--tone-border);
}
section[data-route="dc.show.serverstatus"] .server-failure-tolerance header em {
background-color: var(--token-color-surface-interactive-active);
text-transform: uppercase;
font-style: normal;
}
section[data-route="dc.show.serverstatus"] .server-failure-tolerance > section {
width: 50%;
}
section[data-route="dc.show.serverstatus"] .server-failure-tolerance > section,
section[data-route="dc.show.serverstatus"] .server-failure-tolerance dl {
display: flex;
flex-direction: column;
}
section[data-route="dc.show.serverstatus"] .server-failure-tolerance dl {
flex-grow: 1;
justify-content: space-between;
}
section[data-route="dc.show.serverstatus"] .server-failure-tolerance dd {
display: flex;
align-items: center;
}
section[data-route="dc.show.serverstatus"] .server-failure-tolerance section:first-of-type dl {
padding-right: 1.5rem; /* 24px */
}
section[data-route="dc.show.serverstatus"] .server-failure-tolerance dt {
color: var(--token-color-foreground-faint);
}
section[data-route="dc.show.serverstatus"] .server-failure-tolerance dd {
color: var(--token-color-hashicorp-brand);
}
section[data-route="dc.show.serverstatus"] .server-failure-tolerance .optimistic-tolerance header span::before {
--icon-name: icon-info;
--icon-size: icon-300;
--icon-color: var(--token-color-foreground-faint);
vertical-align: unset;
content: "";
}
section[data-route="dc.show.serverstatus"] .server-failure-tolerance .server-failure-tolerance__badge-count,
section[data-route="dc.show.serverstatus"] .server-failure-tolerance .server-failure-tolerance__status-badge {
display: inline-flex;
}
section[data-route="dc.show.serverstatus"] .server-failure-tolerance .optimistic-tolerance p {
color: var(--token-color-foreground-faint);
}
section[data-route="dc.show.serverstatus"] section:not([class*=-tolerance]) h2 {
margin-top: 1.5rem; /* 24px */
margin-bottom: 1.5rem; /* 24px */
}
section[data-route="dc.show.serverstatus"] section:not([class*=-tolerance]) header {
margin-top: 18px;
margin-bottom: 18px;
}
section[data-route="dc.show.serverstatus"] .redundancy-zones section header {
display: flow-root;
}
section[data-route="dc.show.serverstatus"] .redundancy-zones section header h3 {
float: left;
margin-right: 0.5rem; /* 8px */
}
section[data-route="dc.show.serverstatus"] .redundancy-zones section header dl:not(.warning) {
background-color: var(--token-color-surface-strong);
}
section[data-route="dc.show.serverstatus"] .redundancy-zones section header dl.warning {
background-color: var(--token-color-border-warning);
color: var(--token-color-palette-amber-400);
}
section[data-route="dc.show.serverstatus"] .redundancy-zones section header dl.warning::before {
--icon-name: icon-alert-circle;
--icon-size: icon-000;
margin-right: 0.312rem; /* 5px */
content: "";
}
section[data-route="dc.show.serverstatus"] .redundancy-zones section header dt::after {
content: ":";
display: inline-block;
vertical-align: revert;
background-color: transparent;
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
section[data-route="dc.show.license"] .validity p {
color: var(--token-color-foreground-faint);
}
section[data-route="dc.show.license"] .validity dl dt::before {
content: "";
margin-right: 0.25rem; /* 4px */
}
section[data-route="dc.show.license"] .validity dl .expired::before {
--icon-name: icon-x-circle;
--icon-color: var(--token-color-foreground-critical);
}
section[data-route="dc.show.license"] .validity dl .warning::before {
--icon-name: icon-alert-circle;
--icon-color: var(--token-color-foreground-warning);
}
section[data-route="dc.show.license"] .validity dl .valid:not(.warning)::before {
--icon-name: icon-check-circle;
--icon-color: var(--token-color-foreground-success);
}
section[data-route="dc.show.license"] aside {
box-shadow: none;
padding: var(--padding-y) var(--padding-x);
width: 40%;
min-width: 413px;
margin-top: 1rem; /* 16px */
}
section[data-route="dc.show.license"] aside header {
margin-bottom: 1rem; /* 16px */
}
/* more semantically (for our project) named icons */
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
:root {
--icon-loading: icon-loading-motion;
}
.prefers-reduced-motion {
--icon-loading: icon-loading;
}
@media (prefers-reduced-motion) {
:root {
--icon-loading: icon-loading;
}
}
.consul-intention-fieldsets .value-allow > :last-child::before,
.consul-intention-fieldsets .value-deny > :last-child::before,
.consul-intention-fieldsets .value- > :last-child::before {
--icon-size: icon-500; /* 20px */
}
.consul-intention-search-bar .value-allow span::before,
.consul-intention-fieldsets .value-allow > :last-child::before {
--icon-name: icon-arrow-right;
--icon-color: var(--token-color-foreground-success-on-surface);
}
.consul-intention-search-bar .value-deny span::before,
.consul-intention-fieldsets .value-deny > :last-child::before {
--icon-name: icon-skip;
--icon-color: var(--token-color-foreground-critical-on-surface);
}
.consul-intention-search-bar .value- span::before,
.consul-intention-fieldsets .value- > :last-child::before {
--icon-name: icon-layers;
}
.consul-intention-fieldsets .value-allow > :last-child::before,
.consul-intention-fieldsets .value-deny > :last-child::before,
.consul-intention-fieldsets .value- > :last-child::before {
--icon-resolution: 0.5;
}
/* global control of themeable components */
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
:root {
--color-info: var(--token-color-foreground-action);
--color-alert: var(--token-color-palette-amber-200);
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
/*TODO: Move this to the reset */
* {
border-width: 0;
}
.disclosure-menu [aria-expanded] ~ * > ul > li.dangerous > *:first-child, .menu-panel > ul > li.dangerous > *:first-child, .disclosure-menu [aria-expanded] ~ * > ul > li.dangerous > :focus:first-child, .menu-panel > ul > li.dangerous > :focus:first-child,
.disclosure-menu [aria-expanded] ~ * > ul > li.dangerous > :hover:first-child,
.menu-panel > ul > li.dangerous > :hover:first-child, .leader,
.topology-metrics-source-type,
.consul-transparent-proxy, .more-popover-menu > [type=checkbox] + label + div > ul > li.dangerous > *:first-child, .popover-menu > [type=checkbox] + label + div > ul > li.dangerous > *:first-child, .more-popover-menu > [type=checkbox] + label + div > ul > li.dangerous > :focus:first-child, .popover-menu > [type=checkbox] + label + div > ul > li.dangerous > :focus:first-child,
.more-popover-menu > [type=checkbox] + label + div > ul > li.dangerous > :hover:first-child,
.popover-menu > [type=checkbox] + label + div > ul > li.dangerous > :hover:first-child, table.has-actions tr > .actions > [type=checkbox] + label + div > ul > li.dangerous > *:first-child, table.has-actions tr > .actions > [type=checkbox] + label + div > ul > li.dangerous > :focus:first-child,
table.has-actions tr > .actions > [type=checkbox] + label + div > ul > li.dangerous > :hover:first-child, table.with-details tr > .actions > [type=checkbox] + label + div > ul > li.dangerous > *:first-child, table.with-details tr > .actions > [type=checkbox] + label + div > ul > li.dangerous > :focus:first-child,
table.with-details tr > .actions > [type=checkbox] + label + div > ul > li.dangerous > :hover:first-child, .modal-dialog [role=document] > .modal-dialog-footer,
.modal-dialog [role=document] > header, .informed-action > ul > .dangerous > *, .informed-action > ul > .dangerous > *:hover,
.informed-action > ul > .dangerous > *:focus, .animatable.tab-nav ul::after,
.tab-nav .selected > *, .consul-external-source, .consul-kind, .consul-intention-search-bar .value- span, .consul-intention-action-warn-modal button.dangerous, .consul-intention-action-warn-modal button.dangerous:hover:not(:disabled):not(:active),
.consul-intention-action-warn-modal button.dangerous:focus, .consul-intention-action-warn-modal button.dangerous:disabled, .consul-intention-action-warn-modal button.dangerous:hover:active, .consul-intention-permission-form button.type-submit, .consul-intention-permission-form button.type-submit:hover:not(:disabled),
.consul-intention-permission-form button.type-submit:focus:not(:disabled), .consul-intention-permission-form button.type-submit:disabled, html[data-route^="dc.acls.index"] main td strong {
/* same as decor-border-000 - but need to think about being able to import color on its own*/
border-style: solid;
}
/* possibly filter bar */
/* modal close button */
/* button focus */
/* button secondary*/
/* tabs */
.leader,
.topology-metrics-source-type,
.consul-transparent-proxy, .consul-external-source, .consul-kind {
background-color: var(--token-color-surface-strong);
border-color: var(--token-color-foreground-faint);
color: var(--token-color-foreground-primary);
}
/* button active */
/* modal bars */
.modal-dialog [role=document] > .modal-dialog-footer,
.modal-dialog [role=document] > header {
background-color: var(--token-color-surface-strong);
border-color: var(--token-color-palette-neutral-300);
color: var(--token-color-foreground-strong);
}
.consul-intention-search-bar .value- span, html[data-route^="dc.acls.index"] main td strong {
background-color: var(--token-color-surface-strong);
border-color: var(--token-color-palette-neutral-300);
color: var(--token-color-foreground-strong);
}
.consul-intention-permission-form button.type-submit:disabled {
background-color: var(--token-color-surface-primary);
border-color: var(--token-color-foreground-action);
color: var(--token-color-foreground-action);
}
.animatable.tab-nav ul::after,
.tab-nav .selected > *, .consul-intention-permission-form button.type-submit {
background-color: var(--token-color-surface-primary);
border-color: var(--token-color-foreground-action);
color: var(--token-color-foreground-action);
}
.consul-intention-permission-form button.type-submit:hover:not(:disabled),
.consul-intention-permission-form button.type-submit:focus:not(:disabled) {
background-color: var(--token-color-surface-action);
border-color: var(--token-color-foreground-action);
color: var(--token-color-palette-blue-500);
}
.disclosure-menu [aria-expanded] ~ * > ul > li.dangerous > *:first-child, .menu-panel > ul > li.dangerous > *:first-child, .more-popover-menu > [type=checkbox] + label + div > ul > li.dangerous > *:first-child, .popover-menu > [type=checkbox] + label + div > ul > li.dangerous > *:first-child, table.has-actions tr > .actions > [type=checkbox] + label + div > ul > li.dangerous > *:first-child, table.with-details tr > .actions > [type=checkbox] + label + div > ul > li.dangerous > *:first-child, .informed-action > ul > .dangerous > *, .consul-intention-action-warn-modal button.dangerous {
background-color: transparent;
border-color: var(--token-color-foreground-critical);
color: var(--token-color-foreground-critical);
}
.consul-intention-action-warn-modal button.dangerous:disabled {
background-color: var(--token-color-border-critical);
border-color: var(--token-color-foreground-disabled);
color: var(--token-color-surface-primary);
}
.disclosure-menu [aria-expanded] ~ * > ul > li.dangerous > :focus:first-child, .menu-panel > ul > li.dangerous > :focus:first-child,
.disclosure-menu [aria-expanded] ~ * > ul > li.dangerous > :hover:first-child,
.menu-panel > ul > li.dangerous > :hover:first-child, .more-popover-menu > [type=checkbox] + label + div > ul > li.dangerous > :focus:first-child, .popover-menu > [type=checkbox] + label + div > ul > li.dangerous > :focus:first-child,
.more-popover-menu > [type=checkbox] + label + div > ul > li.dangerous > :hover:first-child,
.popover-menu > [type=checkbox] + label + div > ul > li.dangerous > :hover:first-child, table.has-actions tr > .actions > [type=checkbox] + label + div > ul > li.dangerous > :focus:first-child,
table.has-actions tr > .actions > [type=checkbox] + label + div > ul > li.dangerous > :hover:first-child, table.with-details tr > .actions > [type=checkbox] + label + div > ul > li.dangerous > :focus:first-child,
table.with-details tr > .actions > [type=checkbox] + label + div > ul > li.dangerous > :hover:first-child, .informed-action > ul > .dangerous > *:hover,
.informed-action > ul > .dangerous > *:focus, .consul-intention-action-warn-modal button.dangerous:hover:not(:disabled):not(:active),
.consul-intention-action-warn-modal button.dangerous:focus {
background-color: var(--token-color-foreground-critical);
border-color: var(--token-color-foreground-critical-high-contrast);
color: var(--token-color-surface-primary);
}
.consul-intention-action-warn-modal button.dangerous:hover:active {
background-color: var(--token-color-palette-red-400);
border-color: var(--token-color-foreground-critical-high-contrast);
color: var(--token-color-surface-primary);
}
/* debug only, this is empty during a production build */
/* but uses the contents of ./debug.scss during dev */
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
/**
* Coldark Theme for Prism.js
* Theme variation: Dark
* Tested with HTML, CSS, JS, JSON, PHP, YAML, Bash script
* @author Armand Philippot
* @homepage https://github.com/ArmandPhilippot/coldark-prism
* @license MIT
*/
code[class*=language-],
pre[class*=language-] {
color: #e3eaf2;
background: none;
font-family: var(--token-typography-font-stack-code);
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*=language-]::-moz-selection,
pre[class*=language-] ::-moz-selection,
code[class*=language-]::-moz-selection,
code[class*=language-] ::-moz-selection {
background: #3c526d;
}
pre[class*=language-]::selection,
pre[class*=language-] ::selection,
code[class*=language-]::selection,
code[class*=language-] ::selection {
background: #3c526d;
}
/* Code blocks */
pre[class*=language-] {
padding: 1em;
margin: 0.5em 0;
overflow: auto;
}
:not(pre) > code[class*=language-],
pre[class*=language-] {
background: #111b27;
}
/* Inline code */
:not(pre) > code[class*=language-] {
padding: 0.1em 0.3em;
border-radius: 0.3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #8da1b9;
}
.token.punctuation {
color: #e3eaf2;
}
.token.delimiter.important,
.token.selector .parent,
.token.tag,
.token.tag .token.punctuation {
color: #66cccc;
}
.token.attr-name,
.token.boolean,
.token.boolean.important,
.token.number,
.token.constant,
.token.selector .token.attribute {
color: #e6d37a;
}
.token.class-name,
.token.key,
.token.parameter,
.token.property,
.token.property-access,
.token.variable {
color: #6cb8e6;
}
.token.attr-value,
.token.inserted,
.token.color,
.token.selector .token.value,
.token.string,
.token.string .token.url-link {
color: #91d076;
}
.token.builtin,
.token.keyword-array,
.token.package,
.token.regex {
color: #f4adf4;
}
.token.function,
.token.selector .token.class,
.token.selector .token.id {
color: #c699e3;
}
.token.atrule .token.rule,
.token.combinator,
.token.keyword,
.token.operator,
.token.pseudo-class,
.token.pseudo-element,
.token.selector,
.token.unit {
color: #e9ae7e;
}
.token.deleted,
.token.important {
color: #cd6660;
}
.token.keyword-this,
.token.this {
color: #6cb8e6;
}
.token.important,
.token.keyword-this,
.token.this,
.token.bold {
font-weight: var(--token-typography-font-weight-bold);
}
.token.delimiter.important {
font-weight: inherit;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
.language-markdown .token.title,
.language-markdown .token.title .token.punctuation {
color: #6cb8e6;
font-weight: var(--token-typography-font-weight-bold);
}
.language-markdown .token.blockquote.punctuation {
color: #f4adf4;
}
.language-markdown .token.code {
color: #66cccc;
}
.language-markdown .token.hr.punctuation {
color: #6cb8e6;
}
.language-markdown .token.url .token.content {
color: #91d076;
}
.language-markdown .token.url-link {
color: #e6d37a;
}
.language-markdown .token.list.punctuation {
color: #f4adf4;
}
.language-markdown .token.table-header {
color: #e3eaf2;
}
.language-json .token.operator {
color: #e3eaf2;
}
.language-scss .token.variable {
color: #66cccc;
}
/* overrides color-values for the Show Invisibles plugin
* https://prismjs.com/plugins/show-invisibles/
*/
.token.tab:not(:empty):before,
.token.cr:before,
.token.lf:before,
.token.space:before {
color: #8da1b9;
}
/* overrides color-values for the Toolbar plugin
* https://prismjs.com/plugins/toolbar/
*/
div.code-toolbar > .toolbar a,
div.code-toolbar > .toolbar button {
color: #111b27;
background: #6cb8e6;
}
div.code-toolbar > .toolbar a:hover,
div.code-toolbar > .toolbar a:focus,
div.code-toolbar > .toolbar button:hover,
div.code-toolbar > .toolbar button:focus {
color: #111b27;
background: rgba(108, 184, 230, 0.8549019608);
text-decoration: none;
}
div.code-toolbar > .toolbar span,
div.code-toolbar > .toolbar span:hover,
div.code-toolbar > .toolbar span:focus {
color: #111b27;
background: #8da1b9;
}
/* overrides color-values for the Line Highlight plugin
* http://prismjs.com/plugins/line-highlight/
*/
.line-highlight {
background: rgba(60, 82, 109, 0.3725490196);
background: linear-gradient(to right, rgba(60, 82, 109, 0.3725490196) 70%, rgba(60, 82, 109, 0.3333333333));
}
.line-highlight:before,
.line-highlight[data-end]:after {
background-color: #8da1b9;
color: #111b27;
box-shadow: 0 1px #3c526d;
}
pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before {
background-color: rgba(141, 161, 185, 0.0941176471);
}
/* overrides color-values for the Line Numbers plugin
* http://prismjs.com/plugins/line-numbers/
*/
.line-numbers .line-numbers-rows {
border-right: 1px solid #0b121b;
background: rgba(11, 18, 27, 0.4784313725);
}
.line-numbers-rows > span:before {
color: rgba(141, 161, 185, 0.8549019608);
}
/* overrides color-values for the Match Braces plugin
* https://prismjs.com/plugins/match-braces/
*/
.rainbow-braces .token.punctuation.brace-level-1,
.rainbow-braces .token.punctuation.brace-level-5,
.rainbow-braces .token.punctuation.brace-level-9 {
color: #e6d37a;
}
.rainbow-braces .token.punctuation.brace-level-2,
.rainbow-braces .token.punctuation.brace-level-6,
.rainbow-braces .token.punctuation.brace-level-10 {
color: #f4adf4;
}
.rainbow-braces .token.punctuation.brace-level-3,
.rainbow-braces .token.punctuation.brace-level-7,
.rainbow-braces .token.punctuation.brace-level-11 {
color: #6cb8e6;
}
.rainbow-braces .token.punctuation.brace-level-4,
.rainbow-braces .token.punctuation.brace-level-8,
.rainbow-braces .token.punctuation.brace-level-12 {
color: #c699e3;
}
/* overrides color-values for the Diff Highlight plugin
* https://prismjs.com/plugins/diff-highlight/
*/
pre.diff-highlight > code .token.deleted:not(.prefix),
pre > code.diff-highlight .token.deleted:not(.prefix) {
background-color: rgba(205, 102, 96, 0.1215686275);
}
pre.diff-highlight > code .token.inserted:not(.prefix),
pre > code.diff-highlight .token.inserted:not(.prefix) {
background-color: rgba(145, 208, 118, 0.1215686275);
}
/* overrides color-values for the Command Line plugin
* https://prismjs.com/plugins/command-line/
*/
.command-line-prompt {
border-right: 1px solid #0b121b;
}
.command-line-prompt > span:before {
color: rgba(141, 161, 185, 0.8549019608);
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
#docfy-demo-preview-badge {
/* part of a kv list */
/* element on its own */
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
[id^=docfy-demo-preview-csv-list] ol {
list-style-type: none;
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
[id^=docfy-demo-preview-horizontal-kv-list] .lock-delay::before {
color: var(--token-color-foreground-faint);
}
[id^=docfy-demo-preview-horizontal-kv-list] .ttl::before {
color: var(--token-color-foreground-action);
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
[id^=docfy-demo-preview-color] ul,
[id^=docfy-demo-preview-typography] ul,
[id^=docfy-demo-preview-icons] ul {
display: flex;
flex-wrap: wrap;
}
[id^=docfy-demo-preview-color] ul li,
[id^=docfy-demo-preview-typography] ul li,
[id^=docfy-demo-preview-icons] ul li {
margin-right: 20px;
margin-bottom: 20px;
}
[id^=docfy-demo-preview-color] ul figure,
[id^=docfy-demo-preview-typography] ul figure,
[id^=docfy-demo-preview-icons] ul figure {
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 140px;
}
[id^=docfy-demo-preview-color] ul figcaption,
[id^=docfy-demo-preview-typography] ul figcaption,
[id^=docfy-demo-preview-icons] ul figcaption {
text-align: center;
}
[id^=docfy-demo-preview-typography] figure,
[id^=docfy-demo-preview-icons] figure {
border: var(--decor-border-100);
border-color: var(--token-color-palette-neutral-300);
height: 80px;
}
[id^=docfy-demo-preview-icons] figure::before {
position: relative;
top: 20px;
}
[id^=docfy-demo-preview-color] figure {
height: 40px;
}
#docfy-demo-preview-color0 {
background-color: var(--token-color-surface-primary);
}
#docfy-demo-preview-color1 {
background-color: var(--token-color-hashicorp-brand);
}
html.is-debug body > .brand-loader {
display: none !important;
}
html.is-debug [class*=partition-] {
display: block !important;
}
html:not(.with-data-source) .data-source-debug {
display: none;
}
html:not(.with-data-source) .data-source-debug {
display: none;
}
.data-source-debug, html.with-href-to [href^="console://"]::before {
color: red;
background-color: rgba(255, 255, 255, 0.7);
position: absolute;
/* hi */
z-index: 100000;
}
html.with-href-to [href^="console://"]::before {
content: attr(href);
display: inline;
}
.data-source-debug input:checked + pre code::after {
content: attr(data-json);
display: block;
}
.data-source-debug input {
display: none;
}
.docs {
background-color: var(--token-color-surface-primary);
}
.docs .tabular-collection,
.docs .list-collection {
height: 300px !important;
}
.docs [role=banner] nav:first-of-type {
padding-top: 0 !important;
height: calc(100vh - var(--chrome-height, 47px));
}
.docs [role=banner] nav:first-of-type ul {
margin-bottom: 100px;
padding-top: 0 !important;
}
.docs [role=banner] nav:first-of-type li.provider-components a::before,
.docs [role=banner] nav:first-of-type li.consul-components a::before,
.docs [role=banner] nav:first-of-type li.components a::before {
margin-right: 5px;
}
.docs main {
margin-bottom: 2rem;
}
.docs main > ol,
.docs main > ul {
list-style-position: outside;
margin-bottom: 1rem;
margin-left: 2rem;
}
.docs main > ul {
list-style-type: disc;
}
.docs main > h1,
.docs main > h2,
.docs main > h3,
.docs main > h4 {
margin-bottom: 1em;
}
.docs main > h1 {
padding-top: 20px;
}
.docs main > table {
margin-bottom: 3em;
}
.docs main > table td {
font-weight: var(--token-typography-font-weight-regular) !important;
cursor: default !important;
}
.docs main > table td code {
vertical-align: bottom;
}
.docs main > table tr:hover {
box-shadow: none;
}
.docs .docfy-demo {
margin-bottom: 1rem;
position: relative;
}
.docs .docfy-demo__example {
border-top: 1px solid;
border-left: 1px solid;
border-right: 1px solid;
border-color: var(--token-color-surface-interactive-active);
padding: 1rem;
margin-bottom: 0;
}
.docs .docfy-demo__example ol,
.docs .docfy-demo__example ul {
margin-bottom: 0;
}
.docs .docfy-demo__example figure {
margin-bottom: 0.5rem;
}
.docs .docfy-demo__example figcaption {
margin-bottom: 0.5rem;
color: var(--token-color-foreground-faint);
font-style: italic;
}
.docs .docfy-demo__example figure > [type=text] {
border: 1px solid var(--token-color-hashicorp-brand);
width: 100%;
padding: 0.5rem;
}
.docs .docfy-demo__example figure > select {
border: 1px solid var(--token-color-hashicorp-brand);
padding: 0.5rem;
}
.docs .docfy-demo__snippet pre {
margin: 0 !important;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
/**
* Copyright IBM Corp. 2024, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
.w-4 {
width: 1rem;
}
.h-4 {
height: 1rem;
}
.h-24 {
height: 6rem;
}
svg {
vertical-align: middle;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mb-3 {
margin-bottom: 0.75rem;
}
.p-6 {
padding: 1.5rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.h-12 {
height: 3rem;
}
.flex {
display: flex;
}
.items-center {
align-items: center;
}
.justify-between {
justify-content: space-between;
}
.shrink-0 {
flex-shrink: 0;
}
.space-x-12 > * + * {
margin-left: 3rem;
}
.overflow-x-auto {
overflow-x: auto;
} | | |