_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;
  flex-direction: column;
}

#editor {
  display: flex;
  flex-direction: column;
}

#sqlEditor {
  min-height: 140px;
  flex: 1;
  font: 1.1em "source-code-pro", 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,
      #0193cd 30%,
      #badae5 80%,
      #0193cd 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: #1c1c1c;

  border-bottom-left-radius: $border-radius;
  border-bottom-right-radius: $border-radius;
}

.query-message {
  display: flex;
  min-height: 30px;
  margin-top: 10px;
  flex: 0 0 auto;
  align-items: center;
  border: 1px solid #e7eaec;
  border-radius: 2px;
  border-left: 3px solid #ccc;
  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 #ed5565;
}

.query-message.query-message-ok {
  border-left: 3px solid #1ab394;
}

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

.query-result-value {
  display: flex;
  flex-direction: column;
  width: 115px;
  border-right: 1px solid #ccc;
  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: #fafafb;
}

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

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

.js-query-run > .fa {
  margin-right: 5px;
  color: #3dc7ab;
}

.js-chart-draw > .fa {
  margin-right: 5px;
  color: #3dc7ab;
}

.js-query-cancel > .fa {
  margin-right: 5px;
  color: #ed5565;
}

.js-chart-cancel > .fa {
  margin-right: 5px;
  color: #ed5565;
}

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

.js-export-url,
.js-help-input {
  font-size: 10px;
  padding: 6px 10px;
  border: 1px solid #e7eaec;
  border-radius: 3px 0 0 3px;
  line-height: 1.5;
}

.js-export-copy-url:focus,
.js-export-copy-url:hover {
  border-left: none;
}

.js-export-copy-url {
  border-radius: 0 3px 3px 0;
  border-left: none;
  padding: 5px 10px 4px 10px;
}