Grafana LCARS theme

*, h2 {
  font-family: opendyslexic3, opendyslexic, casual, Arial, sans-serif;
}

body {
    opacity: 0;
        animation: linear pageloader 1s forwards;
}

div[role=row], tr.css-1kfl0cu-logs-row {
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  width: 95% !important;
  color: #9cf;
}

.css-1kfl0cu-logs-row > td {
   word-break: normal;
   line-height: 1.25em;
  font-size: larger;
}

div[role=row]:nth-child(even), tr.css-1kfl0cu-logs-row:nth-child(even) {
  background-color: rgba(85, 136, 238, 0.174);
}
div[role=row]:nth-child(1), tr.css-1kfl0cu-logs-row:nth-child(1) {
   color: white;
   background: rgba(85, 136, 238, 0.24);
}
div[role=row]:nth-child(2),tr.css-1kfl0cu-logs-row:nth-child(2) {
    animation: colorchange 5s infinite;
    animation-delay: .1s;
}

div[role=row]:nth-child(3),tr.css-1kfl0cu-logs-row:nth-child(3) {
    animation: colorchange 5s infinite;
    animation-delay: .2s;
}

div[role=row]:nth-child(4), tr.css-1kfl0cu-logs-row:nth-child(4) {
    animation: colorchange 5s infinite;
    animation-delay: .3s;
}

div[role=row]:nth-child(5), tr.css-1kfl0cu-logs-row:nth-child(5) {
    animation: colorchange 5s infinite;
    animation-delay: .4s;
}

div[role=row]:nth-child(6), tr.css-1kfl0cu-logs-row:nth-child(6) {
    animation: colorchange 5s infinite;
    animation-delay: .5s;
}

div[role=row]:nth-child(7), tr.css-1kfl0cu-logs-row:nth-child(7) {
    animation: colorchange 5s infinite;
    animation-delay: .6s;
}
div[role=row]:nth-child(8), tr.css-1kfl0cu-logs-row:nth-child(8) {
  animation: colorchange 5s infinite;
  animation-delay: .7s;
}
div[role=row]:nth-child(9), tr.css-1kfl0cu-logs-row:nth-child(9) {
  animation: colorchange 5s infinite;
  animation-delay: .8s;
}
div[role=row]:nth-child(10), tr.css-1kfl0cu-logs-row:nth-child(10) {
  animation: colorchange 5s infinite;
  animation-delay: .9s;
}
div[role=row]:nth-child(11), tr.css-1kfl0cu-logs-row:nth-child(11) {
  animation: colorchange 5s infinite;
  animation-delay: .10s;
}
div[role=row]:nth-child(12), tr.css-1kfl0cu-logs-row:nth-child(12) {
  animation: colorchange 5s infinite;
  animation-delay: .11s;
}
div[role=row]:nth-child(13), tr.css-1kfl0cu-logs-row:nth-child(13) {
  animation: colorchange 5s infinite;
  animation-delay: .12s;
}
div[role=row]:nth-child(14), tr.css-1kfl0cu-logs-row:nth-child(14) {
  animation: colorchange 5s infinite;
  animation-delay: .13s;
}
div[role=row]:nth-child(15), tr.css-1kfl0cu-logs-row:nth-child(15) {
  animation: colorchange 5s infinite;
  animation-delay: .14s;
}

body {
  background: black;
}

div[aria-label="table header"] {
  background: black !important;
}

section[aria-label="World News - NYT panel"] article {
    background: transparent !important;
}


section[aria-label="World News - NYT panel"] .scrollbar-view {
   animation: 60s autoscroll 5s alternate infinite;
}


.css-1dyh0k, .css-1dgupto {
  color: #6cf;
}

.panel-container {
    border-top-left-radius: 30px;
   border-left: 30px solid #58e;
}

.panel-header {
  border-radius: 30px;
  background: #58e;
}

.panel-title-container {
   border-right: 30px solid #58e;
   border-radius: 30px;
   background: #58e;
}

div.panel-title {
  background: #58e;

}

div.panel-title h2 {
   text-align: right;
    position: relative;
    padding: 8px;
    background: black;
    margin-right: 0;
    margin-left: auto !important;
   font-weight: bold; font-size: larger;
   color: #8ff;
   text-transform: uppercase;
}

.u-cursor-pt {
    margin-left: -1% !important;
}

.uplot canvas {
max-width: 98%;
}

.panel-time-info {
  right: auto;
}

.panel-content {
    box-shadow: -10px 13px 0 13px black;
    background: black;
    border-radius: 10px;
    z-index: 0;
    opacity: 0;
    transform-origin: top;
    animation: 3s linear vloader 0.5s forwards;
   padding-right: 1em;
}

.panel-header {
    transform-origin: left;
    opacity: 0;
    animation: linear loader 2s forwards;
    }

img {
    animation: imageLoader 5s;
}

@keyframes autoscroll {
   from { margin-top: 0}
   to { margin-top: -200% }
}

@keyframes imageLoader {
    0% {
        filter: blur(40px);

    }
    40% {
        filter: blur(0);
    }
    45% {
        filter: blur(30px);
    }
    60% {
        filter: blur(0);
        }
    65% {
        filter: blur(10px);
        }
    100% {
        filter: blur(0);
    }
}

@keyframes pageloader {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

@keyframes vloader {
    0% {
        transform: translateX(0) scaleY(0.0);
        opacity: 0;
    }

    50% {
        transform: translateX(0) scaleY(0.0);
        opacity: 0.9;
    }



    100% {
        transform: translateX(0) scaleY(1);
        opacity: 1.0;
    }
}

@keyframes loader {
    0% {
        transform: translateX(0) scaleX(0.0);
        opacity: 0;
    }

    50% {
        transform: translateX(0) scaleX(0.0);
        opacity: 0.5;
    }



    100% {
        transform: translateX(0) scaleX(1);
        opacity: 1.0;
    }
}

@keyframes colorchange {
    0% {
        color: #455580
    }

    25% {
        color: #455580
    }

    50% {
        color: #455580
    }

    75% {
        color: #455580
    }

    80% {
        color: #000;
    }

    90% {
        color: #000;
    }

    100% {
        color: #9cf
    }
}

@keyframes dynamicimage {
  0% {
    filter: hue-rotate(0deg);
  }
  25% {
    filter: hue-rotate(90deg);
  }
  50% {
    filter: hue-rotate(180deg);
  }
  75% {
    filter: hue-rotate(270deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

iframe {
border-radius: 10px;
}

div#map-container {
border-radius: 15px;
}

iframe {
border-radius: 10px;
}