docs/src/components/GraphiQLIDE/styles.scss - master - alt3rmann/graphql-engine

docs/src/components/GraphiQLIDE/styles.scss
213 строк5 KB
Rikin Kachhia
docs: improve graphiql styles
04 янв 2023, 15:19
04 янв 2023, 15:19e9d9844
/*** GraphiQL overrides ***/

.graphiql {
  margin-bottom: 20px;

  .query,
  .response,
  .variables {
    display: none;
  }

  .graphiql-container {
    min-height: 325px;
    resize: vertical;

    border: 1px solid var(--ifm-border-color);
    -webkit-box-shadow: -1px 2px 10px 2px rgba(217, 217, 217, 1);
    -moz-box-shadow: -1px 2px 10px 2px rgba(217, 217, 217, 1);
    box-shadow: -1px 2px 10px 2px rgba(217, 217, 217, 1);

    .secondary-editor-title,
    .secondary-editor-title .variable-editor-title-text {
      display: none;
    }
  }

  &.with-vars .graphiql-container {
    min-height: 375px;

    .secondary-editor-title,
    .secondary-editor-title .variable-editor-title-text.active {
      display: block;
    }
  }

  .topBarWrap {
    height: 0;
  }

  .execute-button-wrap {
    z-index: 3;
    top: -2px;
    left: calc(50% - 50px);
    margin: 0 !important;
    height: 28px !important;
  }

  .execute-button {
    height: 28px !important;
    width: 28px !important;

    svg {
      position: relative;
      top: -3px;
      left: -3px;
    }
  }

  .CodeMirror {
    font-family: var(--ifm-font-family-monospace);
    font-size: var(--ifm-code-font-size);
  }

  .CodeMirror pre {
    padding: 0 15px;
  }

  .CodeMirror-lines {
    padding: 15px 0 !important;
  }

  .CodeMirror-gutter-wrapper,
  .CodeMirror-gutters {
    display: none;
  }

  .title,
  .docExplorerShow,
  .toolbar,
  &:not(.with-vars) .variable-editor {
    display: none !important;
  }

  .variable-editor .variable-editor-title {
    line-height: 18px;
    font-size: 16px;
    padding: 2px 10px;
    div:not(:first-child) {
      display: none !important;
    }
  }

  &.view-only .execute-button {
    display: none !important;
  }
}
/*** GraphiQL overrides END ***/

html[data-theme='dark'] {
  .graphiql .graphiql-container {
    border: 1px solid var(--ifm-border-color);
    -webkit-box-shadow: -1px 2px 10px 2px rgba(24, 26, 28, 1);
    -moz-box-shadow: -1px 2px 10px 2px rgba(24, 26, 28, 1);
    box-shadow: -1px 2px 10px 2px rgba(24, 26, 28, 1);
    .secondary-editor-title {
      background-color: var(--color-gray-78);
      color: var(--color-gray-4);
      div {
        color: inherit !important;
      }
    }
    .secondary-editor-title,
    .resultWrap {
      border-color: var(--color-gray-78);
    }
  }

  /*
      Name:       dracula
      Author:     Michael Kaminsky (http://github.com/mkaminsky11)
      Original dracula color scheme by Zeno Rocha (https://github.com/zenorocha/dracula-theme)
  */

  .cm-s-dracula.CodeMirror,
  .cm-s-dracula .CodeMirror-gutters {
    background-color: var(--color-gray-86) !important;
    color: #f8f8f2 !important;
    border: none;
  }
  .cm-s-dracula .CodeMirror-gutters {
    color: #282a36;
  }
  .cm-s-dracula .CodeMirror-cursor {
    border-left: solid thin #f8f8f0;
  }
  .cm-s-dracula .CodeMirror-linenumber {
    color: #6d8a88;
  }
  .cm-s-dracula .CodeMirror-selected {
    background: rgba(255, 255, 255, 0.1);
  }
  .cm-s-dracula .CodeMirror-line::selection,
  .cm-s-dracula .CodeMirror-line > span::selection,
  .cm-s-dracula .CodeMirror-line > span > span::selection {
    background: rgba(255, 255, 255, 0.1);
  }
  .cm-s-dracula .CodeMirror-line::-moz-selection,
  .cm-s-dracula .CodeMirror-line > span::-moz-selection,
  .cm-s-dracula .CodeMirror-line > span > span::-moz-selection {
    background: rgba(255, 255, 255, 0.1);
  }
  .cm-s-dracula span.cm-comment {
    color: #6272a4;
  }
  .cm-s-dracula span.cm-string,
  .cm-s-dracula span.cm-string-2 {
    color: #f1fa8c;
  }
  .cm-s-dracula span.cm-number {
    color: #bd93f9;
  }
  .cm-s-dracula span.cm-variable {
    color: #50fa7b;
  }
  .cm-s-dracula span.cm-variable-2 {
    color: white;
  }
  .cm-s-dracula span.cm-def {
    color: #50fa7b;
  }
  .cm-s-dracula span.cm-operator {
    color: #ff79c6;
  }
  .cm-s-dracula span.cm-keyword {
    color: #ff79c6;
  }
  .cm-s-dracula span.cm-punctuation {
    color: var(--color-gray-12);
  }
  .cm-s-dracula span.cm-atom {
    color: #bd93f9;
  }
  .cm-s-dracula span.cm-meta {
    color: #f8f8f2;
  }
  .cm-s-dracula span.cm-tag {
    color: #ff79c6;
  }
  .cm-s-dracula span.cm-attribute {
    color: #50fa7b;
  }
  .cm-s-dracula span.cm-qualifier {
    color: #50fa7b;
  }
  .cm-s-dracula span.cm-property {
    color: #66d9ef;
  }
  .cm-s-dracula span.cm-builtin {
    color: #50fa7b;
  }
  .cm-s-dracula span.cm-variable-3,
  .cm-s-dracula span.cm-type {
    color: #ffb86c;
  }

  .cm-s-dracula .CodeMirror-activeline-background {
    background: rgba(255, 255, 255, 0.1);
  }
  .cm-s-dracula .CodeMirror-matchingbracket {
    text-decoration: underline;
    color: white !important;
  }
}