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

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

/* Complete */
@import url('./native/button.css');
@import url('./native/input-textarea-select.css');
@import url('./native/input-checkbox-radio.css');
@import url('./native/label.css');
@import url('./native/fieldset-legend.css');
@import url('./native/p-small-u.css');
@import url('./native/lists.css');
@import url('./native/h.css');
@import url('./native/mark-s-del-ins-i.css');
/* @import url('./native/u-small-strong-b.css'); */
@import url('./native/abbr.css');
@import url('./native/a.css');
@import url('./native/figure-caption.css');
@import url('./native/table.css');
@import url('./native/pre.css');
@import url('./native/code.css');
@import url('./native/details-dialog.css');
@import url('./native/hr-kbd-samp-time-var-wbr.css');
@import url('./native/progress-meter.css');

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

:root,
:host {
    /* color-scheme is needed for some form element icons to correctly render between light and dark */
    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);
}

*:focus {
    outline: none;
}

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