App.css

/** Tailwind CSS */
@import "tailwindcss";

/** GitHub Primer Design System */
/* Size & Typography */
@import "@primer/primitives/dist/css/base/size/size.css";
@import "@primer/primitives/dist/css/base/typography/typography.css";
@import "@primer/primitives/dist/css/functional/size/border.css";
@import "@primer/primitives/dist/css/functional/size/breakpoints.css";
@import "@primer/primitives/dist/css/functional/size/size.css";
@import "@primer/primitives/dist/css/functional/size/viewport.css";
@import "@primer/primitives/dist/css/functional/typography/typography.css";

/* Themes and Colors */
@import "@primer/primitives/dist/css/functional/themes/light.css";
@import "@primer/primitives/dist/css/functional/themes/light-tritanopia.css";
@import "@primer/primitives/dist/css/functional/themes/light-high-contrast.css";
@import "@primer/primitives/dist/css/functional/themes/light-colorblind.css";
@import "@primer/primitives/dist/css/functional/themes/dark.css";
@import "@primer/primitives/dist/css/functional/themes/dark-colorblind.css";
@import "@primer/primitives/dist/css/functional/themes/dark-dimmed.css";
@import "@primer/primitives/dist/css/functional/themes/dark-high-contrast.css";
@import "@primer/primitives/dist/css/functional/themes/dark-tritanopia.css";

/** Tailwind CSS Configuration */
@custom-variant dark (&:is(.dark *));

@theme {
  --text-xxs: 0.625rem;

  --color-gitify-font: var(--fgColor-default);
  --color-gitify-background: var(--bgColor-muted);
  --color-gitify-sidebar: #24292e;
  --color-gitify-footer: var(--bgColor-neutral-muted);
  --color-gitify-caution: var(--color-orange-600);
  --color-gitify-error: var(--fgColor-danger);
  --color-gitify-link: var(--fgColor-link);

  --color-gitify-input-rest: var(--control-bgColor-rest);
  --color-gitify-input-focus: var(--control-bgColor-active);

  --color-gitify-icon-attention: var(--fgColor-attention);
  --color-gitify-icon-closed: var(--fgColor-closed);
  --color-gitify-icon-done: var(--fgColor-done);
  --color-gitify-icon-muted: var(--fgColor-muted);
  --color-gitify-icon-open: var(--fgColor-open);

  --color-gitify-accounts: var(--bgColor-neutral-muted);

  --color-gitify-account-rest: var(--control-bgColor-active);
  --color-gitify-account-error: var(--bgColor-danger-emphasis);

  --color-gitify-repository: var(--control-bgColor-disabled);

  --color-gitify-notification-border: var(--borderColor-disabled);
  --color-gitify-notification-hover: var(--control-bgColor-hover);

  --color-gitify-notification-pill-hover: var(--control-bgColor-active);

  --color-gitify-tooltip-icon: var(--fgColor-accent);
  --color-gitify-tooltip-popout: var(--bgColor-disabled);

  --gitify-scrollbar-track: var(--color-gray-100);
  --gitify-scrollbar-thumb: var(--color-gray-300);
  --gitify-scrollbar-thumb-hover: var(--color-gray-400);
}

@layer dark {
  @theme {
    --gitify-scrollbar-track: var(--color-gray-900);
    --gitify-scrollbar-thumb: var(--color-gray-700);
    --gitify-scrollbar-thumb-hover: var(--color-gray-600);
  }
}

html,
body,
#root {
  height: 100%;
  -webkit-user-select: none;
}

*::-webkit-scrollbar {
  width: 10px;
}

*::-webkit-scrollbar-track {
  background-color: var(--gitify-scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--gitify-scrollbar-thumb);
  border-radius: 10px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--gitify-scrollbar-thumb-hover);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  margin: 0;
  cursor: default;
}

#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  position: fixed;
  top: 0;
  left: 50px;
  z-index: 1031;
  background: #203354;

  width: 100%;
  height: 2px;
}

/**
 * Set emoji size according to surrounding text.
 * Ref: https://github.com/jdecked/twemoji?tab=readme-ov-file#inline-styles
 */
img.emoji {
  height: 1em;
  width: 1em;
  margin: 0 0.05em 0 0.1em;
  vertical-align: -0.1em;
}