app.css

.accordion {
  --block-border-width: 0px;
  background-color: transparent;
  padding: 0px;
}
.accordion > button {
  margin-bottom: 16px;
  justify-content: flex-start;
  color: var(--body-text-color-subdued);
}
.accordion > button:hover {
  color: var(--body-text-color);
}
.accordion > button > span:first-child {
  width: auto;
  margin-right: 4px;
}

#embeddings .token {
  border-radius: 4px;
}

.gallery {
  background-color: var(--bg);
}
.gallery:is(.dark *) {
  background-color: var(--bg-dark);
}
.gallery .grid-wrap {
  overflow-y: auto;
}
.gallery, .gallery .grid-wrap {
  height: calc(100vh - 430px);
  max-height: none;
}

.gap-0, .gap-0 * {
  gap: 0px;
}

.icon-button {
  max-width: 42px;
}

#intro {
  margin-bottom: 8px !important;
}
#intro > div {
  display: flex;
}
#intro > div > h1 > span {
  font-style: italic;
  color: #047857 !important;
}
#intro > div > h1 > span:is(.dark *) {
  color: #10b981 !important;
}
#intro > div > svg {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.25rem;
  margin-left: 0.5rem;
  align-self: center;
  fill: #047857 !important;
  animation: spin 3s linear infinite reverse;
}
#intro > div > svg:is(.dark *) {
  fill: #10b981 !important;
}
#intro nav {
  display: flex;
  column-gap: 0.5rem;
}
#intro nav a, #intro nav span {
  white-space: nowrap;
  font-family: monospace;
}
#intro nav span {
  font-weight: 500;
  color: var(--body-text-color);
}
#intro nav a {
  color: var(--body-text-color-subdued);
}
#intro nav a:hover {
  color: var(--body-text-color);
}

.popover {
  position: relative;
}
.popover:hover::after {
  white-space: nowrap;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 4px;
  border-width: 1px;
  border-color: var(--button-secondary-border-color-hover);
  background: var(--button-secondary-background-fill-hover);
  color: var(--button-secondary-text-color-hover);
  font-weight: var(--section-header-text-weight);
  font-size: var(--section-header-text-size);
}
.popover#random:hover::after {
  content: 'Random prompt';
}
.popover#clear:hover::after {
  content: 'Clear';
}
.popover#clear-control:hover::after {
  content: 'Clear';
}
.popover#refresh:hover::after {
  content: var(--seed, "-1");
}

.tabs, .tabitem, .tab-nav, .tab-nav > .selected {
  border-width: 0px;
}
.tabitem {
  max-height: calc(100vh - 260px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 0 8px;
}
.tab-nav {
  margin-bottom: 16px;
  flex-wrap: nowrap;
}
.tab-nav > button {
  padding-bottom: 8px;
  text-wrap: wrap;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}