static/circular/circular-view.css

/* PHLAM circular genome viewer — scoped variables + tooltip.
   Prefixed --phlam-* custom properties avoid clashing with the host
   Gradio page's own theme variables (this file is loaded inside the
   viewer's own iframe document, but kept prefixed regardless). */
:root {
  --phlam-bg:      #FCFBF9;
  --phlam-surface: #F2F0EC;
  --phlam-muted:   #5C584F;
  --phlam-accent:  oklch(0.48 0.11 195);
  --phlam-fwd:     oklch(0.48 0.11 195);
  --phlam-rev:     oklch(0.5 0.13 25);
  --phlam-warn:    oklch(0.55 0.13 75);
  --phlam-pass:    oklch(0.48 0.11 195);
  --phlam-text:    #191A19;
  --phlam-border:  #D6D0C4;
}

[data-phlam-theme="dark"] {
  --phlam-bg:      #12151a;
  --phlam-surface: #1c2129;
  --phlam-muted:   #7d8794;
  --phlam-accent:  #5ec8f8;
  --phlam-fwd:     #55c58a;
  --phlam-rev:     #e0736b;
  --phlam-warn:    #e0b04b;
  --phlam-pass:    #55c58a;
  --phlam-text:    #e7ebf0;
  --phlam-border:  #2c333d;
}

.phlam-gv-outer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.phlam-gv-wrap {
  display: flex;
  justify-content: center;
  background: var(--phlam-bg);
  border: 1px solid var(--phlam-border);
  border-radius: 8px;
  padding: 8px;
  flex: 1 1 auto;
  min-width: 0; /* allow the flex item to shrink below the SVG's intrinsic width */
}

.phlam-gv-wrap svg {
  max-width: 100%;
  height: auto;
}

/* Tooltip -- a permanent in-flow side panel next to the chart, at a fixed
   spot (not position:fixed, not following the mouse). Its content swaps on
   hover/pin; it never disappears or resizes the layout. */
.gv-tooltip {
  flex: 0 0 320px;
  width: 320px;
  align-self: flex-start;
  padding: 12px 14px;
  background: var(--phlam-surface);
  border: 1px solid var(--phlam-border);
  border-radius: 8px;
  color: var(--phlam-text);
  font-family: "Azeret Mono", ui-monospace, monospace;
  font-size: 13.5px;
  line-height: 1.55;
  box-sizing: border-box;
}

.gv-tooltip--pinned {
  border-color: var(--phlam-accent);
  border-width: 1.5px;
}

.gv-tt-placeholder {
  color: var(--phlam-muted);
  font-size: 13px;
}

.gv-tt-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 5px;
  word-break: break-all;
}

.gv-tt-loc {
  color: var(--phlam-muted);
  margin-bottom: 6px;
}

.gv-tt-annot-axis {
  padding: 6px 6px 2px;
  margin-bottom: 8px;
  border: 1px solid var(--phlam-accent);
  border-radius: 6px;
  /* One tier lighter than .gv-tt-annot-item's own --phlam-bg, so the
     category/annotation item boxes still stand out inside this axis box
     instead of blending into it. */
  background: var(--phlam-surface);
}

.gv-tt-annot-axis:last-child {
  margin-bottom: 0;
}

.gv-tt-annot-axis-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 4px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--phlam-accent);
}

.gv-tt-annot-axis-meta {
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--phlam-muted);
  font-size: 11px;
}

.gv-tt-annot-conf {
  font-weight: 600;
}

.gv-tt-annot-conf-high {
  color: var(--phlam-pass);
}

.gv-tt-annot-conf-mid {
  color: var(--phlam-warn);
}

.gv-tt-annot-conf-low {
  color: var(--phlam-rev);
}

.gv-tt-annot-group {
  margin-bottom: 8px;
}

.gv-tt-annot-item {
  padding: 4px 7px;
  margin-bottom: 4px;
  background: var(--phlam-bg);
  border: 1px solid var(--phlam-border);
  border-radius: 5px;
}

.gv-tt-annot-item:last-child {
  margin-bottom: 0;
}

.gv-tt-annot-item.gv-tt-annot-unresolved {
  opacity: 0.55;
}

.gv-tt-annot-item.gv-tt-annot-unresolved .gv-tt-annot-text {
  font-style: italic;
}

.gv-tt-annot-level {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--phlam-muted);
  margin-bottom: 2px;
}

.gv-tt-annot-level a {
  color: var(--phlam-accent);
}

.gv-tt-annot-text {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 13.5px;
}

.gv-tt-annot-sim {
  flex: 0 0 auto;
  color: var(--phlam-muted);
  font-size: 11.5px;
}

.gv-tt-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--phlam-text);
}

.gv-tt-row span:first-child {
  color: var(--phlam-muted);
}

.gv-tt-pin {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--phlam-border);
  color: var(--phlam-muted);
  font-size: 11.5px;
}