tab-stash/styles/metrics/compact.less

48 lines
1.4 KiB
Plaintext

// A "compact" style especially for sidebar/panel views.
& {
--page-pw: 12px;
--page-ph: 8px;
--group-ph: 4px;
--group-border-radius: 6px;
--icon-p: 3px;
// Ugh, need to duplicate this here or Firefox won't recalculate it... maybe
// there's a nicer way to do this in less. TODO figure this out.
--icon-btn-size: calc(var(--icon-size) + 2 * var(--icon-p));
--item-h: var(--icon-btn-size); /* must match because items have favicons */
}
// TODO: Variable-ize as much of this as possible so that metrics/ ONLY sets CSS
// variables (and then those variables just get applied in a consistent way
// elsewhere).
&,
& > body {
font: small-caption;
font-weight: normal;
}
&[data-browser="chrome"],
&[data-browser="chrome"] > body {
font-size: 8.5pt;
}
& .forest > li > .forest-item > .forest-title {
// NOTE: The font and other sizes here are designed to make the heading
// height the same as the icon toolbar height, which is the minimum height
// we can support without things looking weird when toolbar buttons appear
// and disappear on hover.
font-size: var(--icon-size);
height: calc(var(--icon-btn-size));
// The line-height is needed to correct for oddities when this folder name
// is an ephemeral text box--without it, switching between the <input> and
// the <span> produces some vertical displacement.
line-height: calc(var(--icon-btn-size));
}