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";

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

    --list-marker-width: 36px;
    --page-width-unitless: min(624, calc(var(--leaflet-width-unitless) - 12));
    --page-width-units: min(624px, 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 {
      --page-width-unitless: min(
        624,
        calc(var(--leaflet-width-unitless) - 128)
      );
      --page-width-units: min(624px, calc(100vw - 128px));
    }
  }

  @media (min-width: 1280px) {
    :root {
      --page-width-unitless: min(
        624,
        calc((var(--leaflet-width-unitless) / 2) - 32)
      );
      --page-width-units: min(624px, calc((100vw / 2) - 32px));
    }
  }

  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;
  }

  pre {
    font-family: var(--font-quattro);
  }

  p {
    font-size: inherit;
  }

  ::placeholder {
    @apply text-tertiary;
    @apply italic;
  }
  /*END FONT STYLING*/

  /* START GLOBAL STYLING */

  /* END GLOBAL STYLING */
}
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 p-2;
  @apply rounded-md;
  @apply overflow-auto;
}

.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;
}

.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: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;
}

.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;
}