styles.css

/* Theming */

  /* Main */
body {
  background-color: var(--background-color);
  color: var(--text-color);
}

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

a:hover {
  color: var(--secondary-color);
}

a:visited, a:active {
  color: var(--accent-color);
}

  /* Header */
header {
  background-color: var(--tertiary-color);
}

.navbar-brand, .navbar-brand:visited {
  color: var(--secondary-color);
}

.navbar-brand:hover {
  color: var(--accent-color);
}

  /* Cards */
.card {
  border-radius: var(--card-border-radius);
  background-color: var(--card-background-color);
}

nav > div > div > div > .list-group > button {
  background-color: var(--card-background-color);
}

  /* Buttons */
.btn {
  border-radius: var(--button-border-radius);
  background-color: var(--accent-color);
  color: var(--secondary-color);
}

.btn:hover {
  background-color: var(--tertiary-color);
}

button {
  color: var(--text-color) !important;
}

#button-start {
  background-color: var(--button-start-background-color);
  color: var(--button-start-text-color) !important;
}

#button-start:hover {
  background-color: var(--button-start-hover-background-color);
  color: var(--button-start-hover-text-color);
}

#button-restart {
  background-color: var(--button-restart-background-color);
  color: var(--button-restart-text-color) !important;
}

#button-restart:hover {
  background-color: var(--button-restart-hover-background-color);
  color: var(--button-restart-hover-text-color);
}

#button-stop {
  background-color: var(--button-stop-background-color);
  color: var(--button-stop-text-color) !important;
}

#button-stop:hover {
  background-color: var(--button-stop-hover-background-color);
  color: var(--button-stop-hover-text-color);
}

  /* Indicators */
.status-online {
  background-color: var(--status-online-color);
  box-shadow: var(--status-online-box-shadow);
}

.status-offline {
  background-color: var(--status-offline-color);
  box-shadow: var(--status-offline-box-shadow);
}

  /* Terminal */
.terminal {
  background-color: var(--terminal-bg-color);
  color: var(--terminal-txt-color);
}

span.terminal-warn {
  color: var(--terminal-wrn-color);
}

span.terminal-error {
  color: var(--terminal-err-color);
}


/* Layout */

*:focus {
  outline: none;
}

.card-header h5 {
  margin: 0px;
}

.circle {
  height: 8px;
  width: 8px;
  transform: translateY(-3px);
  border-radius: 50%;
  display: inline-block;
}

.navbar-brand {
  font-size: 1.25rem;
  padding: 12px 20px;
}

.nav-header {
  cursor: pointer;
}

nav#containerNav {
  padding-bottom: 20px;
}

.list-group-item {
  border-radius: 0px !important;
  border-width: 1px 0px 0px 0px;
}

span.terminal-status {
  text-align: right;
}

.terminal {
  height: calc(100vh - 200px);
}

#collapseContainerSpoiler {
  max-height: calc(100vh - 150px);
  overflow-y: scroll;
}

.terminal-logs, .terminal-input {
  font-size: 0.8em;
  font-family: monospace;
}

.terminal-logs {
  white-space: pre-wrap;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100%;
}

.terminal-input-field {
  display: flex;
  width: 100%;
  padding: 0px 20px 0px 3px
}

.terminal-input-form {
  width: 100%;
  background-color: inherit;
  font-size: 1em;
  color: inherit;
  border-width: 0px;
}

.terminal-input-send {
  width: 13.17px;
  height: 13.17px;
  transform: scale(2.8);
  display: inline-block;
  transition: transform 150ms ease;
}

.terminal-input-send:hover {
  transform: scale(3.4);
  cursor: pointer;
}

.terminal-input-send:active {
  transform: scale(3);
}

.terminal-input-send i, .terminal-input-send i:hover {
  transform: scale(0.5);
  background: url("icons/send-white.svg") no-repeat center;
  width: 100%;
  height: 100%;
  display: inline-block;

}

.btn {
  margin: 15px;
  height: 45px;
  width: 100px;
  transition: transform 100ms ease, color 100ms ease, background-color 100ms ease;
}

.btn:hover {
  transform: scale(1.05);
}

.btn:active {
  transform: scale(1.03);
}