Just sharing some of my small css quality of life improvement over Minimal theme
/* better contrast for status-bar */
.status-bar{
color: var(--text-muted);
}
/* better contrast for status bar (sync button) */
:is(.theme-light, .theme-dark) :is(.sync-status-icon.mod-success, .sync-status-icon.mod-working) {
color: var(--text-muted);
}
/* add nice rotating animation when syncing */
:is(.theme-light, .theme-dark) .sync-status-icon.mod-working {
animation: rotation 1s infinite linear;
}
/* use red color for failed sync */
:is(.theme-light, .theme-dark) .sync-status-icon.mod-error {
color: var(--color-red);
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* dim editor that is not in focus useful for multiple tabs/panes */
:is(.theme-light, .theme-dark):has(.cm-focused) .cm-editor:not(.cm-focused) {
background-color: var(--bg2);
--active-line-bg: rgba(0,0,0,0.0);
transition: background-color 0.2s;
}
Essentially it does the following
- use better contrast for sync button (use text-muted instead of text-faint)
- add rotating animation when sync is working
- sync button will be shown in red if there is any error
- when splitting editor to multiple panel, unfocused editor will have slight dim