opencode/packages/app/src/index.css

@import "@opencode-ai/ui/styles/tailwind";
@import "@opencode-ai/ui/v2/styles/tailwind.css";

@font-face {
  font-family: "JetBrainsMono Nerd Font Mono";
  src: url("/assets/JetBrainsMonoNerdFontMono-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/Inter.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
}

@layer components {
  @keyframes session-progress-whip {
    0% {
      clip-path: inset(0 100% 0 0 round 999px);
      animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    48% {
      clip-path: inset(0 0 0 0 round 999px);
      animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
    }

    100% {
      clip-path: inset(0 0 0 100% round 999px);
    }
  }

  [data-component="session-progress"] {
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    overflow: hidden;
    pointer-events: none;
    opacity: 1;
    transition: opacity 220ms ease-out;
  }

  [data-component="session-progress"][data-state="hiding"] {
    opacity: 0;
  }

  [data-component="session-progress-bar"] {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    clip-path: inset(0 100% 0 0 round 999px);
    will-change: clip-path;
  }

  [data-component="getting-started"] {
    container-type: inline-size;
    container-name: getting-started;
  }

  [data-component="dropdown-menu-content"].desktop-app-menu,
  [data-component="dropdown-menu-sub-content"].desktop-app-menu {
    min-width: 160px;
    padding: 2px;
  }

  [data-component="dropdown-menu-content"].desktop-app-menu {
    width: 160px;
  }

  [data-component="dropdown-menu-sub-content"].desktop-app-menu {
    width: max-content;
    min-width: 240px;
    max-width: min(320px, calc(100vw - 24px));
  }

  [data-component="dropdown-menu-content"].desktop-app-menu [data-slot="dropdown-menu-group-label"] {
    display: flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    font-size: var(--font-size-x-small);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    color: var(--text-weak);
  }

  [data-component="dropdown-menu-content"].desktop-app-menu [data-slot="dropdown-menu-item"],
  [data-component="dropdown-menu-content"].desktop-app-menu [data-slot="dropdown-menu-sub-trigger"],
  [data-component="dropdown-menu-sub-content"].desktop-app-menu [data-slot="dropdown-menu-item"],
  [data-component="dropdown-menu-sub-content"].desktop-app-menu [data-slot="dropdown-menu-sub-trigger"] {
    min-height: 28px;
    padding: 0 12px;
    gap: 8px;
    font-weight: var(--font-weight-regular);
    line-height: 1;
  }

  [data-component="dropdown-menu-content"].desktop-app-menu [data-slot="dropdown-menu-item-label"],
  [data-component="dropdown-menu-sub-content"].desktop-app-menu [data-slot="dropdown-menu-item-label"] {
    white-space: nowrap;
  }

  [data-slot="desktop-app-menu-keybind"] {
    margin-left: auto;
    color: var(--text-weak);
    font-size: var(--font-size-x-small);
    font-weight: var(--font-weight-regular);
    white-space: nowrap;
  }

  [data-slot="desktop-app-menu-chevron"] {
    display: flex;
    margin-left: auto;
    color: var(--icon-base);
  }

  [data-component="getting-started-actions"] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* gap-3 */
  }

  [data-component="getting-started-actions"] > [data-component="button"] {
    width: 100%;
  }

  @container getting-started (min-width: 17rem) {
    [data-component="getting-started-actions"] {
      flex-direction: row;
      align-items: center;
    }

    [data-component="getting-started-actions"] > [data-component="button"] {
      width: auto;
    }
  }

  [data-slot="titlebar-update-loader"] {
    display: block;
    flex-shrink: 0;
    margin: 1px;
    width: 12px;
    height: 12px;
    border-radius: 9999px;
    border: 2px solid color-mix(in srgb, var(--v2-icon-icon-accent) 30%, transparent);
    border-top-color: var(--v2-icon-icon-accent);
    animation: titlebar-update-loader-spin 0.67s linear infinite;
    transform-origin: 50% 50%;
  }

  @media (prefers-reduced-motion: reduce) {
    [data-slot="titlebar-update-loader"] {
      animation: none;
    }
  }

  @keyframes titlebar-update-loader-spin {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}