azure-devops-ui/Components/TeachingPanel/TeachingPanel.css

React components for building web UI in Azure DevOps

.bolt-teaching-panel-layer {
  background: rgba(0, 0, 0, 0.30);
  background: var(--palette-black-alpha-30,rgba(0, 0, 0, 0.30));
}

.bolt-teaching-panel {
  border-radius: 6px;
  height: 544px;
  overflow: hidden;
  width: 640px;
}
@media (forced-colors: active) {
  .bolt-teaching-panel {
    border: solid 1px;
  }
}

.bolt-teaching-panel a {
  color: rgba(0, 90, 158, 1);
  color: var(--communication-foreground,rgba(0, 90, 158, 1));
}

.bolt-teaching-panel-visual {
  background: #0078d4;
  height: 304px;
  justify-content: center;
  position: relative;
  width: 640px;
}
.bolt-teaching-panel-visual .bolt-teaching-pane-close-button {
  background-color: transparent;
  color: white;
  padding: 0;
  position: absolute;
  right: 16px;
  top: 16px;
}
.bolt-teaching-panel-visual .bolt-teaching-pane-close-button:focus {
  border-color: white;
}
@media (forced-colors: active) {
  .bolt-teaching-panel-visual .bolt-teaching-pane-close-button:focus {
    border: solid 1px Highlight;
  }
}

.bolt-teaching-panel-image {
  align-self: flex-end;
  display: flex;
  max-height: 100%;
  max-width: 100%;
}

.bolt-teaching-panel-description {
  background: rgba(255, 255, 255, 1);
  background: var(--callout-background-color,rgba(255, 255, 255, 1));
}

.bolt-teaching-panel-buttons {
  justify-content: space-between;
}

.bolt-teaching-panel-back.first-slide {
  visibility: hidden;
}

.bolt-teaching-panel-progress {
  pointer-events: none;
}

.bolt-teaching-panel-progress-circle {
  background-color: rgba( 200, 200, 200 ,  1 );
  background-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
  border-radius: 50%;
  height: 8px;
  width: 8px;
}
@media (forced-colors: active) {
  .bolt-teaching-panel-progress-circle {
    border:  solid 1px;
    border-color: rgba( 0, 0, 0 ,  1 );
    border-color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 );
  }
}
.bolt-teaching-panel-progress-circle.current {
  background-color: rgba(0, 120, 212, 1);
  background-color: var(--communication-background,rgba(0, 120, 212, 1));
}
@media (forced-colors: active) {
  .bolt-teaching-panel-progress-circle.current {
    background-color: Highlight;
  }
}

/*# sourceMappingURL=TeachingPanel.css.map */