From 0d0a562f6ecc2749c97f2cb7b4e5414633baa3e8 Mon Sep 17 00:00:00 2001
From: SPiCaRia <wlin4@scu.edu>
Date: Sun, 9 Apr 2023 19:21:27 -0700
Subject: [PATCH] Add CSS showcase to README

---
 README.md | 91 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 91 insertions(+)

diff --git a/README.md b/README.md
index f793598..14dba39 100644
--- a/README.md
+++ b/README.md
@@ -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