@ou-imdt/css/src/base.css

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

/*********/
/* RESET */
/*********/

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
fieldset,
legend {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
/* ul[class],
ol[class], */
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core body defaults */
body {
  min-height: initial;
  scroll-behavior: smooth;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img:not([width]):not([height]) {
  max-width: 100%;
  display: block;
}

img[width],
img[height] {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Natural flow and rhythm in articles by default */
article>*+* {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}


/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*******************/
/* BASE PROPERTIES */
/*******************/

:root,
:host {
  --core1: #24285C;
  /* Core brand blue */
  --core2: #3A3381;
  /* Core brand blue alternative */

  /* Must be set to ensure chromium calendar icons in inputs display as expected*/
  --base-theme: light;

  /* fg-bg pairs -> ensure contrast for each pair */
  --fg1: #000000;
  --bg1: #ffffff;

  /* accent or brand color */
  --accent: var(--core2);
  --accent-light: #A7A9BE;
  /* --accent-fg: var(--bg1);  */
  --border: 2px solid var(--accent);
  --radius: 5px;
  --spacing: 0.5rem;
  --transition: all 0.25s;
  --interactive-cursor: pointer;
  --outline: 1px solid var(--accent);
  --disabled-bg: #666666;
  /* ^ Not sure this is used anymore */

  /* TODO general disabled bg and fg */

  /* Typography */
  --font: Arial, sans-serif;
  --font-alt: courier, monospace;
  --line-height: 1.5;
  --letter-spacing: initial;
  --font-size: 1rem;

  --wcag-min-target: 24px;

  color-scheme: var(--base-theme, light);
  accent-color: var(--accent);
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size, 1rem);
  line-height: var(--line-height);
  background-color: var(--bg1);
  color: var(--fg1);
}

/* INFO: for some insane reason 🤪 the ::backdrop pseudo element that allows for styling the dialog backdrop doesn't inherit custom properties, so any custom props or styles must be set directly, so add the below to custom themes with theme prefixes and adjust as needed */
dialog::backdrop {
  background: #000000;
  opacity: 0.5;
}

*:focus {
  outline: none;
}

*:focus-visible {
  outline: var(--outline);
}

/* Apparently iOS thinks it smart and tries to auto resize text if it thinks it's going to be too small on small screens. Often this leads to unpredictably varying font sizes on the same screen - which is A-okay in apples book! 😭. Use this snippet to tell it it's very, very wrong and to just stop. */
@media screen and (max-device-width: 545px) {
  body {
    -webkit-text-size-adjust: 100%;
  }
}