:root {
  --blue: #3099bb;
  --dark-blue: #0f4659;
  --white: #ddd;
  --lightgray: #5b5b5b;
  --medium-gray: #202020;
  --gray: #171717;
  --black: #0d0d0d;
  --yellow: #ff0;
  --dark-yellow: #330;
  --green: #0f0;
  --dark-green: #030;
  --red: #f00;
  --dark-red: #300;
  --border-radius: 4px;
}

.blue { color: var(--blue); }
.dark-blue { color: var(--dark-blue); }
.white { color: var(--white); }
.lightgray { color: var(--lightgray); }
.medium-gray { color: var(--medium-gray); }
.gray { color: var(--gray); }
.black { color: var(--black); }
.yellow { color: var(--yellow); }
.dark-yellow { color: var(--dark-yellow); }
.green { color: var(--green); }
.dark-green { color: var(--dark-green); }
.red { color: var(--red); }
.dark-red { color: var(--dark-red); }

.m-auto { margin: auto; }
.m1 { margin: 1em; }

.none { display: none; }

.italic { font-style: italic; }

@font-face {
  font-family: "jetbrains";
  src: url("/static/fonts/JetBrainsMono.ttf");
}

* {
  font-family: "jetbrains", monospace;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

main {
  display: flex;
  flex-direction: column;
  row-gap: 1em;
  padding: 1em;
  min-height: 100%;
  box-sizing: border-box;
  background: var(--black);
}

a {
  color: var(--blue);
}

a[disabled] {
  color: var(--dark-blue);
  cursor: default;
}

#error-msg {
  color: var(--red);
  background: var(--dark-red);
  padding: 0.5em;
  border-radius: var(--border-radius);
}

#success-msg {
  color: var(--green);
  background: var(--dark-green);
  padding: 0.5em;
  border-radius: var(--border-radius);
}

.ci-status[data-status="success"] {
  color: var(--green);
  background: var(--dark-green) !important;
}

.ci-status[data-status="success"]::after {
  content: ' ✓';
}

.ci-status[data-status="failure"], .ci-status[data-status="stopped"] {
  color: var(--red);
  background: var(--dark-red) !important;
}

.ci-status[data-status="failure"]::after, .ci-status[data-status="stopped"]::after {
  content: ' ✘';
}

.ci-status[data-status="pending"], .ci-status[data-status="booting"] {
  color: var(--yellow);
  background: var(--dark-yellow) !important;
}

.ci-status[data-status="pending"]::after, .ci-status[data-status="booting"]::after {
  animation: ci-pending-spinner 0.75s infinite;
  content: ' /';
}

@keyframes ci-pending-spinner {
  25% { content: ' -'; }
  50% { content: ' \\'; }
  75% { content: ' |'; }
}

input[type=text], input[type=password], textarea {
  border: none;
  padding: 1em;
  border-radius: var(--border-radius);
}

button {
  padding: 1em;
  border: none;
  cursor: pointer;
  transition: background 150ms;
}

button:disabled {
  cursor: default;
}

:focus-visible {
  outline: 2px solid;
  outline-color: #939393;
  outline-offset: 2px;
}
