leaflet / app / globals.css

@import "tailwindcss";

@theme inline {
  --breakpoint-*: initial;
  --breakpoint-sm: 640px;
  --breakpoint-md: 960px;
  --breakpoint-lg: 1280px;

  --radius-*: initial;
  --radius-none: 0;
  --radius-md: 0.25rem;
  --radius-lg: 0.5rem;
  --radius-full: 9999px;

  --color-*: initial;
  --color-inherit: inherit;
  --color-transparent: transparent;
  --color-current: currentColor;
  --color-primary: rgb(var(--primary));
  --color-secondary: color-mix(
    in oklab,
    rgb(var(--primary)),
    rgb(var(--bg-page)) 25%
  );
  --color-tertiary: color-mix(
    in oklab,
    rgb(var(--primary)),
    rgb(var(--bg-page)) 55%
  );
  --color-border: color-mix(
    in oklab,
    rgb(var(--primary)),
    rgb(var(--bg-page)) 75%
  );
  --color-border-light: color-mix(
    in oklab,
    rgb(var(--primary)),
    rgb(var(--bg-page)) 85%
  );
  --color-white: #ffffff;
  --color-accent-1: rgb(var(--accent-1));
  --color-accent-2: rgb(var(--accent-2));
  --color-accent-contrast: rgb(var(--accent-contrast));
  --color-bg-leaflet: rgb(var(--bg-leaflet));
  --color-bg-page: rgb(var(--bg-page));
  --color-highlight-1: var(--highlight-1);
  --color-highlight-2: rgb(var(--highlight-2));
  --color-highlight-3: rgb(var(--highlight-3));
  --color-test: #e18181;
  --color-test-blue: #48d1ef;

  --text-*: initial;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.625rem;
  --text-2xl: 2rem;

  --shadow-sm: 0.9px 1.5px 1.7px -1.8px rgba(var(--primary), 0.2),
    4.2px 6.9px 7.8px -3.5px rgba(var(--primary), 0.15);
  --shadow-md: 1.2px 2.5px 2.7px -1.8px rgba(var(--primary), 0.1),
    5.6px 11.6px 12.5px -3.5px rgba(var(--primary), 0.15);

  --font-sans: var(--font-quattro);
  --font-serif: Garamond;
}

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}

@layer base {
  :root {
    --bg-leaflet: 240, 247, 250;
    --bg-page: 255, 255, 255;
    --bg-page-alpha: 1;

    --primary: 39, 39, 39;

    --accent-1: 0, 0, 225;
    --accent-2: 255, 255, 255;
    --accent-contrast: 0, 0, 225;
    --accent-1-is-contrast: "true";
    --accent-light: color-mix(
      in oklab,
      rgb(var(--accent-contrast)),
      rgb(var(--bg-page)) 85%
    );

    --highlight-1: 255, 177, 177;
    --highlight-2: 253, 245, 203;
    --highlight-3: 255, 205, 195;

    --list-marker-width: 36px;
    --page-width-unitless: min(
      var(--page-width-setting),
      calc(var(--leaflet-width-unitless) - 12)
    );
    --page-width-units: min(
      calc(var(--page-width-unitless) * 1px),
      calc(100vw - 12px)
    );

    --gripperSVG: url("/gripperPattern.svg");
    --gripperSVG2: url("/gripperPattern2.svg");
    --hatchSVG: url("/hatchPattern.svg");
    --wavySVG: (url("/RSVPBackground/wavy.svg"));

    --safe-padding-bottom: max(calc(env(safe-area-inset-bottom) - 8px), 16px);
  }
  @media (max-width: 640px) {
    :root {
      --list-marker-width: 20px;
    }
  }

  @media (min-width: 640px) {
    :root {
      /*picks between max width and screen width with 64px of padding*/
      --page-width-unitless: min(
        var(--page-width-setting),
        calc(var(--leaflet-width-unitless) - 128)
      );
      --page-width-units: min(
        calc(var(--page-width-unitless) * 1px),
        calc(100vw - 128px)
      );
    }
  }

  html,
  body {
    @apply h-full;
    @apply p-0;
    @apply overscroll-y-none;
    min-height: -webkit-fill-available;
    @apply font-sans;
    font-synthesis: none;
  }

  #__next {
    height: 100%;
  }

  /* START FONT STYLING */
  h1 {
    @apply text-2xl;
    @apply font-bold;
  }

  h2 {
    @apply text-xl;
    @apply font-bold;
  }

  h3 {
    @apply text-lg;
    @apply font-bold;
  }

  h4 {
    @apply text-base;
    @apply font-bold;
  }

  p {
    @apply text-base;
  }

  small {
    @apply text-sm;
  }

  a {
    @apply text-accent-contrast;
    @apply hover:cursor-pointer;
    @apply no-underline;
    @apply hover:underline;
  }

  p {
    font-size: inherit;
  }

  ::placeholder {
    @apply text-tertiary;
    @apply italic;
  }

  /* Scope custom fonts to document content only (not sidebar/UI chrome) */
  .pageScrollWrapper {
    font-family: var(--theme-font, var(--font-quattro));
    font-size: var(--theme-font-base-size, 16px);
  }

  .pageScrollWrapper h1,
  .pageScrollWrapper h2,
  .pageScrollWrapper h3,
  .pageScrollWrapper h4 {
    font-family: var(--theme-heading-font, var(--theme-font, var(--font-quattro)));
  }

  /* Scale heading sizes relative to the custom base font size */
  .pageScrollWrapper h1 { font-size: 2em; }
  .pageScrollWrapper h2 { font-size: 1.625em; }
  .pageScrollWrapper h3 { font-size: 1.125em; }
  .pageScrollWrapper h4 { font-size: 1em; }

  /* Scale text size classes relative to the custom base font size.
     Tailwind's text-sm/text-base/text-lg compile to fixed rem values
     which ignore the custom base size set on .pageScrollWrapper. */
  .pageScrollWrapper .textSizeSmall { font-size: 0.875em; }
  .pageScrollWrapper .textSizeLarge { font-size: 1.125em; }

  .pageScrollWrapper pre {
    font-family: var(--theme-font, var(--font-quattro));
  }
  /*END FONT STYLING*/

  /* START GLOBAL STYLING */

  /* END GLOBAL STYLING */
}

img {
  font-size: 0;
}

button:hover {
  cursor: pointer;
}

blockquote {
  margin: 0;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  scrollbar-width: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

::-webkit-calendar-picker-indicator {
  mask-image: url(/timeInputIcon.svg);
  mask-size: 100% 100%;
  background-image: url(/gripperPattern1.svg);
  background-color: color-mix(
    in oklab,
    rgb(var(--primary)),
    rgb(var(--bg-page)) 55%
  );
}

.inline-code {
  display: inline;
  font-size: 1em;
  @apply bg-border-light;
  @apply font-mono;
  @apply px-px;
  @apply py-px;
  @apply -mx-px;
  @apply -my-px;
  @apply rounded-[4px];
  @apply box-decoration-clone;
}

pre.shiki code {
  display: block;
}

pre.shiki {
  @apply sm:p-3;
  @apply p-2;
  @apply rounded-md;
  @apply overflow-auto;
  @apply sm:min-h-12;
  @apply min-h-10;

  @media (min-width: 640px) {
    @apply p-3;
  }
}

.highlight:has(+ .highlight) {
  @apply rounded-r-none;
}
.highlight + .highlight {
  @apply rounded-l-none;
}

.highlight {
  @apply px-px;
  @apply py-px;
  @apply -mx-px;
  @apply -my-px;
  @apply rounded-[4px];
  @apply box-decoration-clone;
}

.selected .selection-highlight {
  background-color: Highlight;
  @apply py-[1.5px];
}

.ProseMirror:focus-within .selection-highlight {
  background-color: transparent;
}

.ProseMirror .atMention.ProseMirror-selectednode,
.ProseMirror .didMention.ProseMirror-selectednode {
  @apply text-accent-contrast;
  @apply px-0.5;
  @apply rounded-[4px];
  @apply box-decoration-clone;
  background-color: rgba(var(--accent-contrast), 0.2);
  border: 1px solid rgba(var(--accent-contrast), 1);
}

.mention {
  @apply cursor-pointer;
  @apply text-accent-contrast;
  @apply px-0.5;
  @apply rounded-[4px];
  @apply box-decoration-clone;
  background-color: rgba(var(--accent-contrast), 0.2);
  border: 1px solid transparent;
  display: inline;
  white-space: normal;
}

.multiselected:focus-within .selection-highlight {
  background-color: transparent;
}

.transparent-outline {
  @apply outline-solid;
  @apply outline-transparent;
}

.selected-outline {
  @apply border;
  @apply focus:outline-solid;
  @apply focus:outline-2;
  @apply focus:outline-offset-1;
  @apply focus-within:outline-solid;
  @apply focus-within:outline-2;
  @apply focus-within:outline-offset-1;
  @apply hover:outline-solid;
  @apply hover:outline-2;
  @apply hover:outline-offset-1;
}

.input-with-border {
  @apply border;
  @apply border-border;
  @apply bg-bg-page;
  @apply rounded-md;
  @apply px-1;
  @apply py-0.5;
  @apply hover:border-tertiary;

  @apply focus:border-tertiary;
  @apply focus:outline-solid;
  @apply focus:outline-tertiary;
  @apply focus:outline-2;
  @apply focus:outline-offset-1;

  @apply focus-within:border-tertiary;
  @apply focus-within:outline-solid;
  @apply focus-within:outline-tertiary;
  @apply focus-within:outline-2;
  @apply focus-within:outline-offset-1;

  @apply disabled:border-border-light;
  @apply disabled:hover:border-border-light;
  @apply disabled:bg-border-light;
  @apply disabled:text-tertiary;
}

.block-border {
  @apply border;
  @apply border-border-light;
  @apply rounded-lg;
  @apply outline-solid;
  @apply outline-offset-1;
  @apply outline-2;
  @apply outline-transparent;
  @apply hover:border-border;
}

.block-border-selected {
  @apply border;
  @apply border-border;
  @apply rounded-lg;
  @apply outline-solid;
  @apply outline-offset-1;
  @apply outline-2;
  @apply outline-border;
}

.blockquote {
  @apply border-l-2;
  @apply border-border;
  @apply pl-3;
  @apply ml-2;
}

.transparent-container {
  @apply border;
  @apply border-border-light;
  @apply rounded-md;
}

.container {
  background: rgba(var(--bg-page), 0.75);
  @apply border;
  @apply border-bg-page;
  @apply rounded-md;
}

.opaque-container {
  @apply bg-bg-page;
  @apply border;
  @apply border-border-light;
  @apply rounded-md;
}

.accent-container {
  background: color-mix(
    in oklab,
    rgb(var(--accent-contrast)),
    rgb(var(--bg-page)) 85%
  );
  @apply rounded-md;
}

.menuItem {
  @apply text-secondary;
  @apply hover:text-secondary;
  @apply data-highlighted:bg-[var(--accent-light)];
  @apply data-highlighted:outline-none;
  @apply hover:bg-[var(--accent-light)];
  text-align: left;
  font-weight: 800;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  outline: none !important;
  cursor: pointer;
  background-color: transparent;
  display: flex;
  gap: 0.5rem;

  :hover {
    text-decoration: none !important;
    background-color: rgb(var(--accent-light));
  }
}

.pwa-padding {
  padding-top: max(calc(env(safe-area-inset-top) - 8px)) !important;
}
.pwa-padding-bottom {
  padding-bottom: var(--safe-padding-bottom);
}

/* animation for new star in publish success illustration */
@keyframes new-star-animation {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(0.1);
    opacity: 0;
  }
  80% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

.new-star {
  animation-name: new-star-animation;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
}

.footnote-scope {
  counter-reset: footnote;
}
.footnote-ref {
  counter-increment: footnote;
  cursor: pointer;
  color: rgb(var(--color-tertiary));
  opacity: 0.7;
}
.footnote-ref::after {
  content: counter(footnote);
  vertical-align: super;
  padding-left: 2px;
  font-size: 75%;
  line-height: 0rem;
}
.footnote-ref ~ br.ProseMirror-trailingBreak {
  display: inline;
  width: 4px;
}
.footnote-ref ~ img.ProseMirror-separator {
  display: none;
}

.footnote-side-enter {
  animation: footnote-fade-in 200ms ease-out;
}
@keyframes footnote-fade-in {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.footnote-side-item {
  max-height: 4.5em;
  overflow: hidden;
  transition: max-height 200ms ease, mask-image 200ms ease;
}
.footnote-side-item.has-overflow {
  mask-image: linear-gradient(to bottom, white 50%, transparent 100%);
}
.footnote-side-item:hover,
.footnote-side-item:focus-within,
.footnote-side-item.footnote-side-focused {
  max-height: 40em;
  mask-image: none;
}