obsidian-plugin/esm7_obsidian-vimrc-support
1
0
Fork 0
mirror of https://github.com/esm7/obsidian-vimrc-support.git synced 2026-07-22 05:00:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add CSS showcase to README

Browse source
This commit is contained in:
SPiCaRia 2023-04-09 19:21:27 -07:00
parent b6d258f807
commit 0d0a562f6e
1 changed files with 91 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
README.md
View file

@ -301,6 +301,97 @@ The `data-vim-mode` values:
| visual | `visual` |
| replace | `replace` |
#### Powerline Styling Snippet
```css
div.status-bar-item.plugin-obsidian-vimrc-support {
/* Papercolor theme */
--text-color-normal: #585858;
--text-color-insert: #005f87;
--text-color-visual: white;
--text-color-replace: white;
--background-color-normal: #eeeeee;
--background-color-insert: #eeeeee;
--background-color-visual: #d75f00;
--background-color-replace: #d70087;
}
div.status-bar-item.plugin-obsidian-vimrc-support {
/*
Move to bottom left corner and discard top/left/bottom space
from container paddings.
*/
order: -9999;
margin: -4px auto -5px -5px;
/*
We have the :after pseudo-element next, so padding-right
is not needed
*/
padding-right: 0px;
padding-left: 1em;
/* Use Monospace font */
font-family: 'MesloLGM Nerd Font Mono'; /* !!! Needs to be a powerline font */
font-weight: bold;
font-size: 1.2em;
/* Clear spaces made from radius borders */
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
div.status-bar-item.plugin-obsidian-vimrc-support:after {
/* Powerline separator character */
content: '';
position: relative;
font-size: 1.5rem;
left: 0.9rem;
/* Fine adjust the position */
margin-top: 0.1rem;
}
/* Normal */
div.status-bar-item.vimrc-support-vim-mode[data-vim-mode="normal"]:after {
color: var(--background-color-normal);
}
div.status-bar-item.vimrc-support-vim-mode[data-vim-mode="normal"] {
color: var(--text-color-normal);
background-color: var(--background-color-normal);
}
/* Insert */
div.status-bar-item.vimrc-support-vim-mode[data-vim-mode="insert"]:after {
color: var(--background-color-insert);
}
div.status-bar-item.vimrc-support-vim-mode[data-vim-mode="insert"] {
color: var(--text-color-insert);
background-color: var(--background-color-insert);
}
/* Visual */
div.status-bar-item.vimrc-support-vim-mode[data-vim-mode="visual"]:after {
color: var(--background-color-visual);
}
div.status-bar-item.vimrc-support-vim-mode[data-vim-mode="visual"] {
color: var(--text-color-visual);
background-color: var(--background-color-visual);
}
/* Replace */
div.status-bar-item.vimrc-support-vim-mode[data-vim-mode="replace"]:after {
color: var(--background-color-replace);
}
div.status-bar-item.vimrc-support-vim-mode[data-vim-mode="replace"] {
color: var(--text-color-replace);
background-color: var(--background-color-replace);
}
```
Note that the above snippet uses powerline glygh for the triangular shape, so you need to install a [powerline font](https://github.com/powerline/fonts) to display correctly. And of course, feel free to change the CSS variables to whatever color palette you want!
## Changelog
### 0.9.0