<template>
  <h1>HsMouse <span id='logo'>ᘛ⁐̤ᕐᐷ</span></h1>
  <INA226 />
  <CamStream />
  <MotorCtl />
</template>

<script>
import INA226    from './INA226.vue'
import CamStream from './CamStream.vue'
import MotorCtl  from './MotorCtl.vue'

export default {
  components: {
    INA226,
    CamStream,
    MotorCtl
  }
}
</script>

<style>
html {
  background-color: #002b36;
  color:            #586e75;
  font-family:      sans-serif;
}
h1 {
  font-size:   24px;
  font-weight: 600;
}
h2 {
  font-size:   22px;
  font-weight: 500;
}
table {
  border-collapse: collapse;
  border-spacing:  0;
  height:          100%;
  width:           100%;
}
td {
  margin:  0;
  padding: 0;
}
button {
  background-color: #073642;
  border:           1.5px solid #2aa198;
  color:            #2aa198;
  display:          block;
  min-height:       30px;
  height:           100%;
  width:            100%;
  padding:          0;
}
button:active {
  background-color: #0a414b;
}
input {
  background-color: transparent;
  color:            #002b36;
  font-family:      monospace;
  font-size:        16px;
  font-weight:      bold;
  border:           none;
  margin:           0 4px;
  padding:          4px;
  resize:           none;
  width:            calc(100% - 16px);
}
#logo {
  font-family: monospace;
}
</style>
