Looseleaf makes heavy use of CSS custom properties. This allows the framework to be customized in various ways. The properties and their default values are documented here.
All of Looseleaf’s custom properties are namespaced using the --ll- prefix.
:root {
--ll-font-family: "Comic Neue", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Helvetica", "Arial", sans-serif;
}Looseleaf's default font stack uses Comic Neue for a casual, handwritten appearance and falls back to a system font stack.
:root {
--ll-font-family-mono: ui-monospace, "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
}Looseleaf's default monospace font stack uses the same cross-platform monospace system font stack that is used by GitHub.
:root {
--ll-border-radius: 16rem 1rem 14rem 1rem / 1rem 14rem 1rem 16rem;
}Looseleaf's default border radius is based on handdrawn.css and is shorthand for the following:
* {
border-bottom-left-radius: 1rem 16rem;
border-bottom-right-radius: 14rem 1rem;
border-top-left-radius: 16rem 1rem;
border-top-right-radius: 1rem 14rem;
}:root {
--ll-border-color: var(--ll-theme-border-color, #000);
}The default border colour is black (#000). If a theme border colour is provided, it will be used instead.
:root {
--ll-text-color: var(--ll-theme-text-color, #000);
}The default text colour is black (#000). If a theme text colour is provided, it will be used instead.
:root {
--ll-text-color-translucent: var(--ll-theme-text-color-translucent, rgba(0, 0, 0, 0.2));
}The default text colour is black (#000); this variable is a translucent version for use in gradients. If a theme translucent text colour is provided, it will be used instead.
:root {
--ll-text-color-transparent: var(--ll-theme-text-color-transparent, rgba(0, 0, 0, 0));
}The default text colour is black (#000); this variable is a transparent version for use in gradients. If a theme transparent text colour is provided, it will be used instead.
:root {
--ll-text-color-error: var(--ll-theme-text-color-error, #b60000);
}The default text colour for errors is #b60000; this variable is used to display content that is in an error state, alongside other indicators. If a theme error text colour is provided, it will be used instead.
:root {
--ll-link-color: var(--ll-theme-link-color, var(--ll-text-color));
}Links use the default text colour. If a theme link colour is provided, it will be used instead.
:root {
--ll-link-visited-color: var(--ll-theme-link-visited-color, var(--ll-link-color));
}Visited links use the default link colour. If a theme link visited colour is provided, it will be used instead.
:root {
--ll-accent-color: var(--ll-theme-accent-color, hsl(225, 73%, 57%));
}The accent colour is used for focus and active states on interactive elements such as buttons, links, and form controls. The default value is hsl(225, 73%, 57%) which is the equivalent of the #4169e1 hex code. If a theme accent colour is provided, it will be used instead.
:root {
--ll-background-color: var(--ll-theme-background-color, #fff);
}The default background colour is white (#fff). If a theme background colour is provided, it will be used instead.
:root {
--ll-background-color-transparent: var(--ll-theme-background-color-transparent, rgba(255, 255, 255, 0));
}The default background colour is white (#fff); this variable is a transparent version for use in gradients. If a theme transparent background colour is provided, it will be used instead.
:root {
--ll-accent-background-color: var(--ll-theme-accent-background-color, #ddd);
}The default accent background colour is #ddd. If a theme accent background colour is provided, it will be used instead.
:root {
--ll-input-focus-box-shadow:
var(
--ll-theme-input-focus-box-shadow,
0 0 0 0.125rem var(--ll-background-color),
0 0 0 0.25rem var(--ll-accent-color)
);
}Focused inputs have their outline removed and instead use a focus ring created with a box shadow. If a theme input focus box shadow is provided, it will be used instead.
:root {
--ll-input-focus-box-shadow-error:
var(
--ll-theme-input-focus-box-shadow-error,
0 0 0 0.125rem var(--ll-background-color),
0 0 0 0.25rem var(--ll-text-color-error)
);
}Focused inputs in an error state have their outline removed and instead use a focus ring created with a box shadow in the error text colour. If a theme input focus box shadow (error) is provided, it will be used instead.
:root {
--ll-link-focus-box-shadow: var(--ll-theme-link-focus-box-shadow, 0 0 0 0.25rem var(--ll-accent-color));
}Focused links have their outline removed and instead use a focus ring created with a box shadow. If a theme link focus box shadow is provided, it will be used instead.
:root {
--ll-border-thin: 0.0625rem solid var(--ll-border-color);
}Looseleaf's thin border has a border-width equivalent to 1px.
:root {
--ll-border-medium: 0.125rem solid var(--ll-border-color);
}Looseleaf's medium border has a border-width equivalent to 2px.
:root {
--ll-border-thick: 0.1875rem solid var(--ll-border-color);
}Looseleaf's thick border has a border-width equivalent to 3px.
:root {
--ll-border-dashed-thin: 0.0625rem dashed var(--ll-border-color);
}Looseleaf's thin dashed border has a border-width equivalent to 1px.
:root {
--ll-border-dashed-medium: 0.125rem dashed var(--ll-border-color);
}Looseleaf's medium dashed border has a border-width equivalent to 2px.
:root {
--ll-border-dashed-thick: 0.1875rem dashed var(--ll-border-color);
}Looseleaf's thick dashed border has a border-width equivalent to 3px.
Looseleaf is designed for colour customization. For example, it’s very
straightforward to add support for dark mode using the @prefers-color-scheme
media query with the following CSS:
@media (prefers-color-scheme: dark) {
:root {
--ll-theme-border-color: #fff;
--ll-theme-text-color: #fff;
--ll-theme-accent-color: hsl(405, 73%, 57%);
--ll-theme-background-color: #000;
--ll-theme-select-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="black" viewBox="0 0 16 16"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>');
}
}
Themes can also be applied via a class or data attribute on the <html> or
<body> element, for example:
.black-on-yellow {
--ll-theme-border-color: #000;
--ll-theme-text-color: #000;
--ll-theme-accent-color: #000;
--ll-theme-background-color: #ff0;
--ll-theme-select-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="yellow" viewBox="0 0 16 16"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>');
}
[data-theme="black-on-yellow"] {
--ll-theme-border-color: #000;
--ll-theme-text-color: #000;
--ll-theme-accent-color: #000;
--ll-theme-background-color: #ff0;
--ll-theme-select-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="yellow" viewBox="0 0 16 16"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>');
}Overrides the default border color.
Overrides the default text color.
Overrides the default translucent text color.
Overrides the default transparent text color.
Overrides the default error text color.
Overrides the default link color.
Overrides the default visited link color.
Overrides the default accent color.
Overrides the default background color.
Overrides the default transparent background color.
Overrides the default accent background color.
Overrides the default input focus box shadow.
Overrides the default input focus box shadow (error).
Overrides the default link focus box shadow.
:root {
--ll-theme-select-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="black" viewBox="0 0 16 16"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>');
}The --ll-theme-select-icon variable replaces the select element’s custom icon
with one in an appropriate colour for the current theme. This is achieved via
an SVG embedded in a CSS data URI.
It’s worth noting that the embedded SVG’s fill attribute must be set to a
named color
or HSL value, as Firefox and Chrome/Edge do not support hex values for SVGs embedded
via a CSS data URI (here is a reduced test case).