radicle-desktop/public/index.css

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  width: 100%;
  /* Prevent rubber-band effect when scrolling via touchpad on macOS. */
  overscroll-behavior: none;
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--color-foreground-contrast);
  background-color: var(--color-background-default);
}

.global-oid {
  color: var(--color-foreground-emphasized);
  font-size: var(--font-size-small);
  font-family: var(--font-family-monospace);
  font-weight: var(--font-weight-regular);
}

.global-commit {
  color: var(--color-foreground-dim);
  font-size: var(--font-size-small);
  font-family: var(--font-family-monospace);
  font-weight: var(--font-weight-semibold);
}

.global-flex {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.global-tab {
  padding-left: 0.5rem;
  border-left: 1px solid var(--color-fill-ghost-hover);
  margin-left: 1rem;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  column-gap: 0.5rem;
}

.global-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-fill-ghost-hover);
  clip-path: var(--1px-corner-fill);
  height: 1.5rem;
  padding: 0 0.5rem;
  min-width: 1.5rem;
  font-weight: var(--font-weight-regular);
}

:root {
  --elevation-low: 0 0 48px 0 #000000ee;
}

[data-theme="light"] {
  --elevation-low: 0 0 16px 0 #00000022;
}

:root {
  --1px-corner-fill: polygon(
    0 2px,
    2px 2px,
    2px 0,
    calc(100% - 2px) 0,
    calc(100% - 2px) 2px,
    100% 2px,
    100% calc(100% - 2px),
    calc(100% - 2px) calc(100% - 2px),
    calc(100% - 2px) calc(100% - 2px),
    calc(100% - 2px) 100%,
    2px 100%,
    2px calc(100% - 2px),
    0 calc(100% - 2px)
  );

  --2px-corner-fill: polygon(
    0 4px,
    2px 4px,
    2px 2px,
    4px 2px,
    4px 0,
    calc(100% - 4px) 0,
    calc(100% - 4px) 2px,
    calc(100% - 2px) 2px,
    calc(100% - 2px) 4px,
    100% 4px,
    100% calc(100% - 4px),
    calc(100% - 2px) calc(100% - 4px),
    calc(100% - 2px) calc(100% - 2px),
    calc(100% - 4px) calc(100% - 2px),
    calc(100% - 4px) 100%,
    4px 100%,
    4px calc(100% - 2px),
    2px calc(100% - 2px),
    2px calc(100% - 4px),
    0 calc(100% - 4px)
  );

  --2px-top-corner-fill: polygon(
    0 4px,
    2px 4px,
    2px 2px,
    4px 2px,
    4px 0,
    calc(100% - 4px) 0,
    calc(100% - 4px) 2px,
    calc(100% - 2px) 2px,
    calc(100% - 2px) 4px,
    100% 4px,
    100% 100%,
    0 100%
  );

  --3px-corner-fill: polygon(
    0 6px,
    2px 6px,
    2px 4px,
    4px 4px,
    4px 2px,
    6px 2px,
    6px 0,
    calc(100% - 6px) 0,
    calc(100% - 6px) 2px,
    calc(100% - 4px) 2px,
    calc(100% - 4px) 4px,
    calc(100% - 2px) 4px,
    calc(100% - 2px) 6px,
    100% 6px,
    100% calc(100% - 6px),
    calc(100% - 2px) calc(100% - 6px),
    calc(100% - 2px) calc(100% - 4px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 4px) calc(100% - 2px),
    calc(100% - 6px) calc(100% - 2px),
    calc(100% - 6px) 100%,
    6px 100%,
    6px calc(100% - 2px),
    4px calc(100% - 2px),
    4px calc(100% - 4px),
    2px calc(100% - 4px),
    2px calc(100% - 6px),
    0 calc(100% - 6px)
  );

  --3px-top-corner-fill: polygon(
    0 6px,
    2px 6px,
    2px 4px,
    4px 4px,
    4px 2px,
    6px 2px,
    6px 0,
    calc(100% - 6px) 0,
    calc(100% - 6px) 2px,
    calc(100% - 4px) 2px,
    calc(100% - 4px) 4px,
    calc(100% - 2px) 4px,
    calc(100% - 2px) 6px,
    100% 6px,
    100% 100%,
    0 100%
  );

  --3px-bottom-corner-fill: polygon(
    0 0,
    100% 0,
    100% calc(100% - 6px),
    calc(100% - 2px) calc(100% - 6px),
    calc(100% - 2px) calc(100% - 4px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 4px) calc(100% - 2px),
    calc(100% - 6px) calc(100% - 2px),
    calc(100% - 6px) 100%,
    6px 100%,
    6px calc(100% - 2px),
    4px calc(100% - 2px),
    4px calc(100% - 4px),
    2px calc(100% - 4px),
    2px calc(100% - 6px),
    0 calc(100% - 6px)
  );
}