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

  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 */
}

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