_editor.scss

/*!******************************************************************************
 *     ___                  _   ____  ____
 *    / _ \ _   _  ___  ___| |_|  _ \| __ )
 *   | | | | | | |/ _ \/ __| __| | | |  _ \
 *   | |_| | |_| |  __/\__ \ |_| |_| | |_) |
 *    \__\_\\__,_|\___||___/\__|____/|____/
 *
 *  Copyright (c) 2014-2019 Appsicle
 *  Copyright (c) 2019-2020 QuestDB
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 *
 ******************************************************************************/

.border-rounded-top-half {
  border-top-left-radius: $border-radius;
  border-top-right-radius: $border-radius;
}

#console-top {
  display: flex;
  width: 100%;
  min-height: 140px;
  flex-direction: column;
  flex: 1;
}

#editor {
  position: relative;
  display: flex;
}

#sqlEditor {
  flex: 1;
  font-family: 1.4rem SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  line-height: 1.5em !important;
}

// endless progress bar
@-webkit-keyframes moving-gradient {
  0% {
    background-position: left bottom;
  }
  100% {
    background-position: right bottom;
  }
}

.query-progress-animated {
  background: -webkit-linear-gradient(
      left,
      #ffb86c 30%,
      #f8f8f2 80%,
      #ffb86c 100%
    )
    repeat;

  -webkit-background-size: 50% 100%;
  -webkit-animation-name: moving-gradient;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

.query-progress-spinner {
  width: 100%;
  height: 6px;
  background-color: #21222c;
}

.query-message {
  display: flex;
  color: #f8f8f2;
  background: #282a36;
  min-height: 30px;
  flex: 0 0 auto;
  align-items: center;
  border-left: 3px solid #8be9fd;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.query-message:not(.query-message-ok) {
  padding: 5px;
}

.query-message.query-message-error {
  border-left: 3px solid #ff5555;
}

.query-message.query-message-ok {
  border-left: 3px solid #50fa7b;
}

.query-error-at {
  position: relative;
  left: 8px;
  white-space: pre-line;
}

.query-result-value {
  display: flex;
  flex-direction: column;
  flex: 1;
  border-right: 1px solid #21222c;
  overflow: hidden;
}

.query-result-value div {
  padding: 2px 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.query-result-value div:nth-child(1) {
  background-color: #21222c;
}

.js-query-message-text {
  display: inline-block;
}

.js-syntax-error {
  border-bottom: 1px solid #ff5555;
  position: absolute;
  cursor: pointer !important;
  pointer-events: auto;
}

.button-primary .fa + span,
.button-toggle .fa + span {
  margin-left: 1rem;
}

.export-input-container {
  display: inline-block;
  padding: 0 0 0 10px;
}

.js-help-input {
  height: 3rem;
  border: none;
  width: 180px;
  padding: 0 1rem;
  line-height: 1.5;
  outline: none;
  background: #44475a;
  border-radius: 4px;
  color: #f8f8f2;

  &:focus {
    box-shadow: inset 0 0 0 1px #f8f8f2;
  }

  &::placeholder {
    color: #bbb;
  }
}

.button-primary,
.button-toggle {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, Helvetica, Roboto,
    sans-serif;
  display: flex;
  height: 3rem;
  padding: 0 1rem;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid #44475a;
  background: #44475a;
  color: #f8f8f2;
  font-weight: 400;
  outline: 0;
  line-height: 1.15;
  transition: all 70ms cubic-bezier(0, 0, 0.38, 0.9);

  &:hover {
    background: #6272a4;
    opacity: 1;
  }

  &:focus {
    box-shadow: inset 0 0 0 1px #f8f8f2;
  }

  &:active {
    background: darken(#6272a4, 10%);
  }
}

.button-success {
  color: #50fa7b;
}

.button-danger {
  color: #ff5555;
}

.button-toggle {
  height: 100%;
  background: transparent;
  border-radius: 0;
  border: none;
  border-bottom: 2px solid transparent;
  color: #f8f8f2;
  opacity: 0.5;
  min-width: 10rem;

  &.active {
    opacity: 1;
    border-bottom-color: #ff79c6;
  }
}

.console-wrapper {
  display: flex;
  flex: 0 0 400px;
  overflow: hidden;
}

#schema-content {
  display: flex;
  flex-direction: column;
  flex: 0 0 350px;
  height: 100%;
  border-right: 6px solid #21222c;
}

.js-sql-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  font-size: 1.4rem;
  background: #21222c;

  ::selection {
    background: #44475a;
  }
}

.result-wrapper {
  display: flex;
  min-height: 200px;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  background: #282a36;
}

.menu-bar {
  display: flex;
  height: 4rem;
  padding: 0 1rem;
  align-items: center;
  background: #21222c;
  box-shadow: 0 6px 6px -6px #191a21;
  border-bottom: 1px solid #191a21;
  z-index: 5;
}

.menu-bar .button-primary:not(:last-child),
.menu-bar .button-secondary:not(:last-child) {
  margin-right: 1rem;
}

.flex-separator {
  flex: 1;
}

#quick-vis {
  display: flex;
  flex: 1;
}