sanic/static/style.css

/* #################### */
/* #### structure ##### */
/* #################### */

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

main {
  height: 100%;
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 150px 1fr 1fr;
  gap: 0 0;
  grid-template-areas: "nav nav" "queue queue" "browser result";
}

#queue {
  grid-area: queue;
  overflow: auto;
}

#nav {
  grid-area: nav;
  display: flex;
}

#result {
  grid-area: result;
  overflow: auto;
}

#browser {
  grid-area: browser;
}

table {
  width: 100%;
}

#control-admin {
  display: flex;
  flex-direction: column;
}

#sanic-logo {
  max-width: 80%;
  max-height: 80%;
}

.spaced {
  display: flex;
  justify-content: space-between;
}

/* #################### */
/* ###### debug ####### */
/* #################### */

div {
  border: 1px solid blue;
}

/* #################### */
/* ### pretty stuff ### */
/* #################### */

/* Disable arrows in input */

/* Chrome, Safari, Edge, Opera */
#control-xfade::-webkit-outer-spin-button,
#control-xfade::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
#control-xfade[type=number] {
  -moz-appearance: textfield;
}

#control-xfade {
  width: 2em;
}

#control-previous,
#control-play-pause,
#control-stop,
#control-next {
  width: 2.5em;
  height: 2.5em;
  text-align: center;
}

/*
#control-track {
  transform: translateX(100%);
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  animation: scroll-left 20s linear infinite;
  -moz-animation: scroll-left 2s linear infinite;
  -webkit-animation: scroll-left 2s linear infinite;
}

@keyframes scroll-left {
  0% {
    transform: translateX(100%);
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}

@-moz-keyframes scroll-left {
  0% {
    -moz-transform: translateX(100%);
  }
  100% {
    -moz-transform: translateX(-100%);
  }
}

@-webkit-keyframes scroll-left {
  0% {
    -webkit-transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
  }
}
*/