| /** |
| * Copyright (c) HashiCorp, Inc. |
| * SPDX-License-Identifier: MPL-2.0 |
| */ |
| |
| $console-close-height: 35px; |
| |
| .console-ui-panel { |
| background: var(--token-color-palette-neutral-700); |
| width: -moz-available; |
| width: -webkit-fill-available; |
| height: 0; |
| min-height: 0; |
| overflow: auto; |
| position: fixed; |
| bottom: 0; |
| transition: min-height $speed $easing, transform $speed ease-in; |
| will-change: transform, min-height; |
| -webkit-overflow-scrolling: touch; |
| z-index: 199; |
| |
| .button { |
| background: transparent; |
| border: none; |
| color: $white; |
| min-width: 0; |
| padding: 0 $size-8; |
| |
| &.active, |
| &:hover { |
| background: $blue; |
| color: $white; |
| } |
| } |
| } |
| |
| .console-ui-panel-content { |
| color: $white; |
| display: flex; |
| flex-direction: column; |
| font-size: 14px; |
| font-weight: $font-weight-semibold; |
| justify-content: flex-end; |
| min-height: calc(100% - $console-close-height); // account for close button that is sticky positioned |
| padding: $size-8 $size-8 $size-5; |
| transition: justify-content $speed ease-in; |
| |
| pre, |
| p { |
| background: none; |
| color: inherit; |
| font-size: 14px; |
| min-height: 2rem; |
| padding: 0; |
| |
| &:not(.console-ui-command):not(.CodeMirror-line) { |
| padding-left: $size-4; |
| } |
| } |
| |
| .cm-s-hashi.CodeMirror { |
| background-color: rgba($black, 0.5) !important; |
| font-weight: $font-weight-normal; |
| margin-left: $size-4; |
| padding: $size-8 $size-4; |
| } |
| } |
| |
| .console-ui-panel-content.hover-copy-button, |
| .console-ui-panel-content.hover-copy-button-static { |
| top: auto; |
| bottom: 0; |
| right: 0; |
| } |
| |
| .console-ui-input { |
| align-items: center; |
| display: flex; |
| |
| input { |
| background-color: rgba($black, 0.5); |
| border: 1px solid var(--token-color-palette-neutral-500); |
| border-radius: 2px; |
| caret-color: $white; |
| color: $white; |
| flex: 1 1 auto; |
| font-family: $family-monospace; |
| font-size: 16px; |
| font-weight: $font-weight-bold; |
| outline: none; |
| padding: $size-10; |
| margin-right: $spacing-xs; |
| transition: background-color $speed; |
| } |
| } |
| |
| .console-ui-command { |
| line-height: 2; |
| } |
| |
| .console-ui-output { |
| transition: background-color $speed ease-in-out; |
| will-change: background-color; |
| padding-right: $size-2; |
| position: relative; |
| background-color: rgba(#000, 0); |
| &:hover { |
| background-color: rgba(#000, 0.5); |
| } |
| } |
| |
| .console-ui-alert { |
| margin-left: calc(#{$size-4} - 0.33rem); |
| position: relative; |
| |
| svg { |
| position: absolute; |
| left: 0; |
| top: 0; |
| } |
| } |
| |
| .panel-open .console-ui-panel { |
| box-shadow: $box-shadow-highest; |
| min-height: 400px; |
| } |
| |
| .main--console-open { |
| padding-bottom: 400px; |
| } |
| |
| .panel-open .console-ui-panel.fullscreen { |
| bottom: 0; |
| right: 0; |
| min-height: 100vh; |
| width: 100%; |
| } |
| |
| .console-spinner.control { |
| height: 21px; |
| width: 21px; |
| transform: scale(0.75); |
| transform-origin: center; |
| &::after { |
| height: auto; |
| width: auto; |
| right: 0.25rem; |
| left: 0.25rem; |
| top: 0.25rem; |
| bottom: 0.25rem; |
| } |
| } |
| |
| .console-close-button { |
| position: sticky; |
| top: $spacing-xs; |
| height: $console-close-height; |
| display: flex; |
| justify-content: flex-end; |
| z-index: 210; |
| |
| button { |
| margin-right: $spacing-xs; |
| } |
| } |