/*
Custom CSS file for restyling the Quixe interpreter to fit the Redux template.
*/

/*
Here are the variables for the new colour scheme (based on Quixe's defaults, with dark mode mostly selected via complementary colours).
*/

:root {
  --quixe-errorpane-bg-colour: #ffa0a0;
  --quixe-errorpane-border-colour: #ff4040;
  --quixe-errorpane-warningpane-bg-colour: #b0b0ff;
  --quixe-errorpane-warningpane-border-colour: #6060ff;
  --quixe-errorpane-hover-bg-colour: rgba(255, 160, 160, 0.5);
  --quixe-errorpane-hover-border-colour: rgba(255, 64, 64, 0.3);
  --quixe-errorpane-warningpane-hover-bg-colour: rgba(176, 176, 255, 0.5);
  --quixe-errorpane-warningpane-hover-border-colour: rgba(96, 96, 255, 0.3);
  --quixe-windowframe-bg-colour: #fafafa;
  --quixe-gridwindow-bg-colour: #d0d0c0;
  --quixe-graphicswindow-canvas-bg-colour: #fafafa;
  --quixe-previousmark-bg-colour: #b09888;
  --quixe-moreprompt-fg-colour: #ffc;
  --quixe-moreprompt-bg-colour: #603010;
  --quixe-style-blockquote-bg-colour: #fff0c0;
  --quixe-style-input-fg-colour: #300000;
  --quixe-dialog-bg-colour: #fafafa;
}

@media (prefers-color-scheme: dark) {
  :root {
    --quixe-errorpane-bg-colour: #a1ffff;
    --quixe-errorpane-border-colour: #40ffff;
    --quixe-errorpane-warningpane-bg-colour: #ffffb0;
    --quixe-errorpane-warningpane-border-colour: #ffff61;
    --quixe-errorpane-hover-bg-colour: rgba(161, 255, 255, 0.5);
    --quixe-errorpane-hover-border-colour: rgba(64, 255, 255, 0.3);
    --quixe-errorpane-warningpane-hover-bg-colour: rgba(255, 255, 176, 0.5);
    --quixe-errorpane-warningpane-hover-border-colour: rgba(255, 255, 97, 0.3);
    --quixe-windowframe-bg-colour: #111;
    --quixe-gridwindow-bg-colour: #c0c0d1;
    --quixe-graphicswindow-canvas-bg-colour: #111;
    --quixe-previousmark-bg-colour: #87a0b0;
    --quixe-moreprompt-fg-colour: #ccf;
    --quixe-moreprompt-bg-colour: #104161;
    --quixe-style-blockquote-bg-colour: #bfceff;
    --quixe-style-input-fg-colour: #00d0d0;
    --quixe-dialog-bg-colour: #111;
  }
}

/*
Here are the styles adapted to make use of the new colour scheme variables.
*/

#errorpane {
  background-color: var(--quixe-errorpane-bg-colour) !important;
  border-bottom: var(--quixe-errorpane-border-colour) !important;
}

#errorpane.WarningPane {
  background-color: var(--quixe-errorpane-warningpane-bg-colour) !important;
  border-bottom: var(--quixe-errorpane-warningpane-border-colour) !important;
}

#errorpane:hover {
  background-color: var(--quixe-errorpane-hover-bg-colour) !important;
  border-bottom: var(--quixe-errorpane-hover-border-colour) !important;
}

#errorpane.WarningPane:hover {
  background-color: var(
    --quixe-errorpane-warningpane-hover-bg-colour
  ) !important;
  border-bottom: var(
    --quixe-errorpane-warningpane-hover-border-colour
  ) !important;
}

.WindowFrame {
  background-color: var(--quixe-windowframe-bg-colour) !important;
}

.GridWindow {
  background-color: var(--quixe-gridwindow-bg-colour) !important;
}

.GraphicsWindow canvas {
  background-color: var(--quixe-graphicswindow-canvas-bg-colour) !important;
}

.Style_blockquote {
  background-color: var(--quixe-style-blockquote-bg-colour) !important;
}

.Style_input {
  color: var(--quixe-style-input-fg-colour) !important;
}

#dialog {
  background-color: var(--quixe-dialog-bg-colour) !important;
}

.BufferWindow,
.BufferWindow .Input {
  font-family: var(--redux-system-font-stack) !important;
}

.GridWindow,
.GridWindow .Input,
.Style_preformatted {
  font-family: monospace !important;
}

/*
Here are the general styles.
*/

#errorpane,
#errorpane.WarningPane,
#errorpane:hover,
#errorpane.WarningPane:hover {
  border-bottom-width: 1em;
}

#windowport {
  margin: 1em;
}

.WindowFrame {
  margin: 1em 1% !important;
}

.GridWindow {
  inset: 1ch 0 !important;
  font-size: 105% !important;
}

.BufferWindow {
  inset: 4ch 0 !important;
  overflow: auto !important;
}

.GridWindow,
.BufferWindow {
  padding: 1ch !important;
}

.BufferWindow,
.BufferWindow .Input {
  font-size: 100% !important;
}

.BufferWindow .Style_header {
  font-size: 125% !important;
}

.MorePrompt {
  inset: auto 3em 3.5em auto !important;
  padding: 0.25ch 0.5ch !important;
  border-radius: 1em !important;
}