Scale UI element font size based on editor font size
Created by lee-dohm
.theme-one-light-ui, .theme-one-dark-ui, .theme-atom-material-ui {
.git-Panel,
.modal,
.status-bar,
.tab-bar,
.tree-view {
font-size: e("calc(var(--editor-font-size) * 0.88888888889)");
}
.github-Git,
.github-RecentCommit {
font-size: e("calc(var(--editor-font-size) * 0.77777777778)");
}
}
This uses the --editor-font-size
CSS custom property that is equal to the font size in your editor to scale the font size used in various UI elements proportionally. The two scale factors are set so that if the editor font size is 18px
, the Tree View font size will be 16px
and the git panel font size will be 14px
.
The e()
function escapes the supplied text so that it is inserted literally into the CSS output. This is necessary because otherwise the Less compiler would try to evaluate the calc()
values but the CSS custom properties aren’t available at the time the Less is compiled.