timeline.css

/* Theme variables */
:root {
  --footer-height: 200px;

  --link-color: #534b5e;

  --theme-gray-darkest: #161616;
  --theme-gray-dark: #1c1c1c;
  --theme-gray-normal: ;
  --theme-gray-light: #9f9f9f;
  --theme-gray-lightest: #eeeeee;

  --theme-main-blue: rgb(29, 87, 251);
  --theme-dark-blue: rgb(6, 54, 189);

  --theme-main-red: #ff0e0e;
  --theme-dark-red: #ff3535;

  --theme-main-orange: #ff8300;
  --theme-dark-orange: #e66100;
}

* {
  color: var(--theme-gray-lightest);
  font: 1em "Rubik";
}

body {
  position: absolute;
  top: 0px;
  left: 0px;
  
  height: 100%;
  width: 100%;

  margin: 0px;

  background-color: var(--theme-gray-dark);
}

a {
   color: var(--link-color);
}

i {
  font-style: italic;
}

main {
  position: relative;
  height: calc(100% - var(--footer-height));
}
main > #timeline {
  height: 100%;
}
main.loading > #timeline {
  cursor: wait !important;
  filter: blur(2px);
}
main.loading > #timeline > * {
  pointer-events: none;
}
#timeline-loading {
  display: none;
  justify-content: center;
  width: 100%;

  position: absolute;
  top: 50%;

  font-size: 2em;
}
main.loading > #timeline-loading {
  display: flex;
}

footer {
  position: relative;
  width: 100%;
  height: var(--footer-height);

  user-select: none;

  background-color: var(--theme-gray-darkest);
}

#project-name {
  font-size: xxx-large;
  padding: 10px;
}

#project-about {
  position: absolute;
  bottom: 0;

  padding: 10px 5px 10px 5px;
}
#project-about > * {
  padding-left: 5px;
  padding-right: 5px;
}
#project-about > :not(:last-child) {
  border: solid var(--theme-gray-lightest);
  border-width: 0px 1.5px 0px 0px;
}

#controls {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap-reverse;

  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;

  padding: 5px 10px 5px 0px;
}
#controls > * {
  margin: 5px;
}
@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
#permalink-copied {
  position: absolute;
  top: -50px;
  right: 0px;
  padding: 20px 65px 20px 50px;
  color: var(--theme-main-red);
  font-weight: bold;
  opacity: 0%;
}
#permalink-copied.fade-out {
  animation: fade-out 5s cubic-bezier(.9,.03,.69,.22) forwards;
}

.dataset-header {
  position: relative;
}
.dataset-name {}
.dataset-description {
  color: var(--theme-gray-light);
  font-size: x-small;
}
.dataset-delete:hover {
  opacity: 1;
}
.dataset-delete {
  position: absolute;
  top: 0;
  right: 0;

  width: 14px;
  height: 14px;

  opacity: 0.2;
  transition: opacity 0.2s ease-in;

  background-color: var(--theme-main-red);
  border: solid var(--theme-main-red);
  border-radius: 4px;
}
.dataset-delete:before {
  position: absolute;
  left: 6px;
  top: -1.5px;

  background-color: var(--theme-gray-lightest);
  width: 1.5px;
  height: 16px;

  content: " ";

  transform: rotate(45deg);
}
.dataset-delete:after {
  position: absolute;
  left: 6px;
  top: -1.5px;

  background-color: var(--theme-gray-lightest);
  width: 1.5px;
  height: 16px;

  content: " ";

  transform: rotate(-45deg);
}


.vis-selected[data-options="approximate"] .event {
  background-color: rgba(28, 28, 28, 0.6);

  padding-bottom: 3px;
  margin-bottom: -3px;
}
.event-dropup {
  position: relative;
}
.event-dropup-container {
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  position: absolute;
  bottom: 5px;
  width: 100%;

  pointer-events: none;
}
.event-dropup-shown > .event-dropup-container {
  display: flex;
}
.event-dropup-content {
  padding: 20px 30px 20px 30px;

  background-color: var(--theme-gray-darkest);
  border: solid var(--theme-gray-lightest) 1.5px;

  pointer-events: auto;

  width: max-content;
  max-width: 400px;
  white-space: break-spaces;
}
.event-dropup-connector {
  width: 0px;
  height: 35px;

  border-left: solid var(--theme-dark-orange) 1px;
}

.vis-selected .vis-item-overflow {
  overflow: visible;
}

#searchbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;

  z-index: 3;

  background-image: linear-gradient(rgba(0, 0, 0, 0.8) 0 0);
  cursor: pointer;
}
#searchbar-box {
  display: flex;
  flex-direction: column;

  width: 50%;
  height: 60%;

  background-color: var(--theme-gray-dark);
  padding: 20px;
  border: solid var(--theme-gray-light) 1px;
  cursor: auto;
}
#searchbar-input {
  width: calc(100% - 20px);

  margin-bottom: 20px;
  padding: 10px 0px 10px 10px;

  border: solid var(--theme-gray-light);
  background: var(--theme-gray-lightest);
  color: var(--theme-gray-darkest);
}
#searchbar-results {
  overflow-x: hidden;
  overflow-y: scroll;

  user-select: none;
}
.searchbar-result {
  padding: 5px;

  cursor: pointer;
}
.searchbar-result:hover {
  background-color: var(--theme-gray-darkest);
}
.searchbar-result-name {
  font-size: 1.15em;
}
.searchbar-result-description {
  color: var(--theme-gray-light);
  font-size: 0.85em;
  float: right;
}
#searchbar-no-results {
  color: var(--theme-gray-light);
  font-style: italic;
  padding: 5px;
}

button {
  border: solid var(--theme-gray-light);

  background-color: var(--theme-gray-lightest);
  color: var(--theme-gray-dark);

  padding: 5px 10px 5px 10px;

  cursor: pointer;
}
button:hover {
  background-image: linear-gradient(rgba(0, 0, 0, 0.15) 0 0);
}
button:active {
  background-image: linear-gradient(rgba(0, 0, 0, 0.25) 0 0);
}

.vis-item {
  /* Display items over lines */
  z-index: 1;

  border-color: var(--theme-dark-blue);
  background-color: var(--theme-main-blue);
}
.vis-item.vis-selected {
  border-color: var(--theme-dark-orange) !important;
  background-color: var(--theme-main-orange);
}
.vis-item[data-options="approximate"] {
  background-color: transparent !important;

/*  border-image: linear-gradient(to left, rgb(0, 0, 0, 0) 0%, var(--theme-dark-blue) 10%, var(--theme-dark-blue) 90%, rgb(0, 0, 0, 0) 100%) 0 0 100% 0/0 0 3px 0 stretch; */
  border-image-source: linear-gradient(to left, transparent 0%, var(--theme-main-blue) 10%, var(--theme-main-blue) 90%, transparent 100%);
  border-image-slice: 0 0 100% 0;
  border-image-width: 0 0 3px 0;
  border-image-outset: 0 15 0 10;

  z-index: 0;
}
.vis-item.vis-selected[data-options="approximate"] {
/*  border-image: linear-gradient(to left, rgb(0, 0, 0, 0) 0%, var(--theme-dark-orange) 10%, var(--theme-dark-orange) 90%, rgb(0, 0, 0, 0) 100%) 0 0 100% 0/0 0 3px 0 stretch;*/
  border-image-source: linear-gradient(to left, rgb(0, 0, 0, 0) 0%, var(--theme-main-orange) 10%, var(--theme-main-orange) 90%, rgb(0, 0, 0, 0) 100%);

  z-index: 2;
}
.vis-item.vis-dot, .vis-item.vis-line {
  /* Display lines behind items & selected lines */
  z-index: -2;

  border-color: var(--theme-main-blue);

/* Gray theme:
  border-color: rgb(145, 145, 145); */
}
.vis-item.vis-dot.vis-selected, .vis-item.vis-line.vis-selected {
  /* Display lines behind items but over unselected lines */
  z-index: -1;
}

.vis-time-axis.vis-text {
  color: var(--theme-gray-light);
}

/* Group re-ordering */
.vis-group-is-dragging {
  background-color: rgba(255, 255, 255, 0.1);
}
.vis-label.draggable {
  cursor: inherit !important;
}

.vis-current-time {
  background-color: var(--theme-dark-red);
}

.vis-inner {
  max-width: 250px;
}