/** * 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; } }