@robotical/sensors-dashboard/dist/index.css

A dashboard tool for depicting Marty data by Robotical

:root {
  --colour-primary: rgb(55, 171, 200);
  --colour-primary-strong: #0b6f87;
  --colour-primary-deep: #064b5d;
  --colour-secondary: rgb(244, 218, 97);
  --colour-tertiary: rgb(0, 213, 146);
  --colour-success-strong: #087a57;
  --focus-ring: #7a3ff2;
  --colour-BLACK: rgb(38, 38, 38);
  --colour-BLACK_075: rgba(38, 38, 38, 0.75);
  --colour-BLACK_05: rgba(38, 38, 38, 0.5);
  --colour-BLACK_025: rgba(0, 0, 0, 0.25);
  --colour-GREY: rgba(81, 81, 81, 0.5);
  --colour-GREY_2: #f5f5f5;
  --colour-GREY_3: rgb(143, 142, 148);
  --colour-GREY_4: rgb(223, 223, 223);
  --colour-HINT_GREY: rgba(125, 125, 125, 0.5);
  --colour-MAIN_BLUE: rgb(55, 171, 200);
  --colour-LIGHT_BLUE: rgb(48, 197, 235);
  --colour-AQUA_BLUE_025: rgba(55, 171, 200, 0.25);
  --colour-AQUA_BLUE_05: rgba(55, 171, 200, 0.5);
  --colour-BLUE_LIGHT_1: rgb(214, 243, 246);
  --colour-BLUE_LIGHT_2: rgb(164, 218, 229);
  --colour-BLUE_LIGHT_3: rgb(161, 213, 227);
  --colour-PALE_BLUE: #94cddc;
  --colour-WHITE: rgb(245, 245, 245);
  --colour-TRUE_WHITE: rgb(255, 255, 255);
  --colour-PALE_WHITE: rgba(245, 245, 245, 0.5);
  --colour-GREEN: rgb(0, 213, 146);
  --colour-RED: rgb(237, 82, 82);
  --colour-SAND_YELLOW: rgb(244, 218, 97);
  --colour-SAND_YELLOW_25: rgba(244, 218, 97, 0.25);
  --colour-SAND_YELLOW_50: rgba(244, 218, 97, 0.5);
  --colour-BLUE_LED: rgba(0, 0, 128, 0.5);
  --colour-GREEN_LED: rgba(0, 128, 0, 0.5);
  --colour-PINK_LED: rgba(128, 0, 128, 0.5);
  --colour-SCREENFREE_PURPLE: rgb(118, 53, 151);
  --colour-SCREENFREE_GREEN: rgb(3, 125, 60);
  --colour-SCREENFREE_YELLOW: rgb(250, 217, 5);
  --colour-SCREENFREE_RED: rgb(91, 20, 19);
  --colour-SCREENFREE_BLUE: rgb(0, 170, 255);
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  /* This defines what 1rem is: 1rem = 10px; 10/16 = 62.5 */
  font-size: 62.5%;
  overflow: hidden;
}

body {
  box-sizing: border-box;
  font-size: 1.6rem;
  line-height: 1.5;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--colour-BLUE_LIGHT_1) 0%, var(--colour-TRUE_WHITE) 60%);
  color: var(--colour-BLACK);
  text-rendering: optimizeLegibility;
}

#root {
  min-height: 100vh;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
input,
select,
textarea,
[tabindex]:not([tabindex="-1"]) {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 0.3rem solid var(--focus-ring);
  outline-offset: 0.3rem;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
div {
  font-family: "Lato Regular";
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}