The ui components and styles for the color organizer

color-organizer.css

html, body, div#react-container {
  height: 100%;
  min-height: 100%; }

h1 {
  margin: 0;
  padding: 0; }

body {
  margin: 0;
  padding: 0;
  background: white;
  background: linear-gradient(to bottom, white 0%, #e5e5e5 100%); }

input {
  outline: none; }

nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  background-color: black;
  color: white; }
  nav h1 {
    display: none; }
  nav a {
    color: white;
    font-family: Arial, sans-serif;
    font-size: 2em;
    text-decoration: none;
    padding: .5em; }
    nav a.selected {
      color: #900; }
html, body, div#react-container {
  height: 100%;
  min-height: 100%; }

h1 {
  margin: 0;
  padding: 0; }

body {
  margin: 0;
  padding: 0;
  background: white;
  background: linear-gradient(to bottom, white 0%, #e5e5e5 100%); }

input {
  outline: none; }

div.star {
  cursor: pointer;
  height: 25px;
  width: 25px;
  margin: 2px;
  float: left;
  background-color: #7f7f7f;
  -webkit-clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0% 38%, 37% 38%);
          clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0% 38%, 37% 38%); }
  div.star.selected {
    background-color: red; }
html, body, div#react-container {
  height: 100%;
  min-height: 100%; }

h1 {
  margin: 0;
  padding: 0; }

body {
  margin: 0;
  padding: 0;
  background: white;
  background: linear-gradient(to bottom, white 0%, #e5e5e5 100%); }

input {
  outline: none; }

section.color {
  box-shadow: 3px 3px 8px 1px #b2b2b2;
  height: 235px;
  border: 2px solid #e5e5e5;
  border-bottom-color: #7f7f7f;
  border-right-color: #7f7f7f;
  margin: 1em;
  padding: 0;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative; }
  @media screen and (min-width: 700px) {
    section.color {
      -ms-flex-preferred-size: calc(50% - 2em - 4px);
          flex-basis: calc(50% - 2em - 4px); } }
  @media screen and (min-width: 1100px) {
    section.color {
      -ms-flex-preferred-size: calc(33.33333% - 2em - 4px);
          flex-basis: calc(33.33333% - 2em - 4px); } }
  @media screen and (min-width: 1600px) {
    section.color {
      -ms-flex-preferred-size: calc(25% - 2em - 4px);
          flex-basis: calc(25% - 2em - 4px); } }
  @media screen and (min-width: 2000px) {
    section.color {
      -ms-flex-preferred-size: calc(16.66666% - 2em - 4px);
          flex-basis: calc(16.66666% - 2em - 4px); } }
  section.color h1 {
    font-family: Verdana, sans-serif;
    text-align: center;
    padding: .5em;
    -ms-flex-preferred-size: calc(100% - 1em);
        flex-basis: calc(100% - 1em); }
  section.color button {
    position: absolute;
    top: .5em;
    right: .5em;
    -ms-flex-preferred-size: calc(12% - 1em);
        flex-basis: calc(12% - 1em);
    text-align: right;
    background: white;
    background: linear-gradient(to bottom, white 0%, #e5e5e5 100%);
    padding: .75em;
    border-radius: .5px; }
  section.color > div:last-child {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    margin-top: .5em; }
  section.color div.color {
    height: 100px;
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%; }
  section.color div.time-ago {
    position: absolute;
    bottom: .5em;
    right: .5em;
    font-family: monospace;
    color: #7f7f7f; }
html, body, div#react-container {
  height: 100%;
  min-height: 100%; }

h1 {
  margin: 0;
  padding: 0; }

body {
  margin: 0;
  padding: 0;
  background: white;
  background: linear-gradient(to bottom, white 0%, #e5e5e5 100%); }

input {
  outline: none; }

div.color-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  text-align: center;
  overflow: scroll; }
html, body, div#react-container {
  height: 100%;
  min-height: 100%; }

h1 {
  margin: 0;
  padding: 0; }

body {
  margin: 0;
  padding: 0;
  background: white;
  background: linear-gradient(to bottom, white 0%, #e5e5e5 100%); }

input {
  outline: none; }

div.color-details {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end; }
  div.color-details h1 {
    color: white;
    text-shadow: 2px 2px 7px black;
    font-size: 2em;
    margin: .5em; }
html, body, div#react-container {
  height: 100%;
  min-height: 100%; }

h1 {
  margin: 0;
  padding: 0; }

body {
  margin: 0;
  padding: 0;
  background: white;
  background: linear-gradient(to bottom, white 0%, #e5e5e5 100%); }

input {
  outline: none; }

form.add-color {
  width: 98%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  form.add-color > :first-child {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1; }
  form.add-color input, form.add-color button {
    margin: .5em;
    padding: .25em;
    font-size: 1.2em;
    border-radius: 5px; }
  form.add-color input[type="color"] {
    padding: 0;
    height: +2em; }
  form.add-color button {
    background-color: green;
    color: white;
    border: none; }
html, body, div#react-container {
  height: 100%;
  min-height: 100%; }

h1 {
  margin: 0;
  padding: 0; }

body {
  margin: 0;
  padding: 0;
  background: white;
  background: linear-gradient(to bottom, white 0%, #e5e5e5 100%); }

input {
  outline: none; }

div.app {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%; }

div.whoops-404 {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  background-color: red;
  color: white; }

/*# sourceMappingURL=bundle.map*/