Skip to content

Instantly share code, notes, and snippets.

@ronaldsuwandi
Last active June 27, 2023 06:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ronaldsuwandi/7c8cf31040c8ef476c0040ac4a0e7304 to your computer and use it in GitHub Desktop.
Save ronaldsuwandi/7c8cf31040c8ef476c0040ac4a0e7304 to your computer and use it in GitHub Desktop.
Minor css snippet tweaks for Obsidian Minimal theme (dim non-focused pane, highlight sync icon). Works for Obsidian 1.2.8 (requires Electron v21 - Chrome 105+)
/* better contrast for status-bar */
.status-bar{
color: var(--tx2);
}
/* 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(--tx2);
}
/* add a blinking highlight animation when syncing */
:is(.theme-light, .theme-dark) .sync-status-icon.mod-working {
animation: color 0.25s infinite linear alternate;
}
/* use red color for failed sync */
:is(.theme-light, .theme-dark) .sync-status-icon.mod-error {
color: var(--color-red);
}
@keyframes color {
from {
color: var(--tx2);
}
to {
color: var(--ui3);
filter:
drop-shadow(0 0 0.2px var(--ui3));
}
}
/* 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;
}
/* specific for my use case - make image to be block display and always centered */
.internal-embed img:not([width]), .internal-embed audio, .internal-embed video {
display: block;
margin: auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment