ConceptPortal-public/rsconcept/frontend/src/styling/setup.css

/**
 * Module: Basic styling setup.
 */

@import './constants.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

*,
*::after,
*::before {
  box-sizing: border-box;

  /* Uncomment to debug layering and overflow */
  /* background: hsla(135, 50%, 50%, 0.05); */
  /* outline: 2px solid hotpink; */
}

html {
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;

  hanging-punctuation: first last;
  color-scheme: dark light;

  interpolate-size: allow-keywords;
}

body {
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}

[data-color-scheme='dark'] {
  color-scheme: dark;
}

[data-color-scheme='light'] {
  color-scheme: light;
}

/* Default scroll behavior */
@media (prefers-reduced-motion: no-preference) {
  :has(:target) {
    scroll-behavior: smooth;
    scroll-padding-top: var(--scroll-padding);
  }
}

:root {
  interpolate-size: allow-keywords;

  font-size: var(--font-size-base);
  line-height: var(--line-height);
  font-family: var(--font-main);

  color: var(--clr-app-999);
  border-color: var(--clr-app-400);
  background-color: var(--clr-app-100);
}

@media only screen and (max-width: 639px) {
  :root {
    font-size: var(--font-size-sm);
  }
}

:focus,
:focus-visible,
:focus-within {
  outline-width: 2px;
  outline-style: solid;
  outline-color: transparent;
}

::selection {
  background: var(--clr-prim-800);
  tr :hover& {
    background: var(--clr-warn-100);
  }
}

::placeholder {
  color: var(--clr-app-600);
}

/* Wrapping headers */
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

/* Limit text lines and setup wrapping */
p,
li {
  max-width: var(--text-max-width);
  text-wrap: pretty;
}

div:not(.dense) > p:not(:last-child) {
  margin-bottom: 0.5rem;
}

@layer components {
  h1 {
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.75rem;
    text-align: center;
  }

  h2 {
    font-weight: 600;
    text-align: center;

    &:not(:first-child) {
      :not([role='manuals']) & {
        margin-top: 0.5rem;
      }
      [role='manuals'] & {
        margin-top: 0.75rem;
        margin-bottom: 0.5rem;
      }
    }
  }

  b {
    font-weight: 600;
  }

  code {
    font-family: var(--font-math);
  }

  li {
    list-style-position: inside;
  }

  li::marker {
    content: '–\2009';
  }

  .border {
    border-radius: 0.25rem;
  }

  .border,
  .border-x,
  .border-y,
  .border-b,
  .border-t,
  .border-l,
  .border-r,
  .border-2,
  .border-x-2,
  .border-y-2,
  .border-b-2,
  .border-t-2,
  .border-l-2,
  .border-r-2,
  .divide-x,
  .divide-y,
  .divide-x-2,
  .divide-y-2 {
    border-color: var(--clr-app-400);
    & > :not([hidden]) ~ :not([hidden]) {
      border-color: inherit;
    }
  }

  .sticky {
    z-index: 20;
  }
}