Skip to content

Instantly share code, notes, and snippets.

raisabelatrix / rainbow-tags.css
Last active November 4, 2023 04:55
Obsidian 1.0+ snippet for rainbow-colored tags. Comes with style settings option
View rainbow-tags.css
/* ——————————————————————————————————————————— ╗
                 STYLE SETTINGS
╚ ——————————————————————————————————————————— */
/* @settings
name: Rainbow Tags by raisabelatrix
id: rb-tags-rsbltrx
id: rainbow-tags
raisabelatrix / replace-hashtag-with-emoji.css
Last active December 9, 2022 21:19
Replace Obsidian hashtag in tags to a custom emoji. [Not tested on Obsidian 1.0+]
View replace-hashtag-with-emoji.css
.kanban-plugin .kanban-plugin__item-tags .kanban-plugin__item-tag {
position: relative;
display: inline-block;
margin: .125em;
.cm-formatting-hashtag::before {
font-size: .85em;
content: "🌺";
raisabelatrix / obsidian-show-ribbon-on-hover.css
Last active November 4, 2023 07:33
Keeps the sidebar ribbon out of sight and only shows it upon hover. [Not tested on Obsidian 1.0+]
View obsidian-show-ribbon-on-hover.css
/*HIDE RIBBON WHEN SIDEBAR IS COLLAPSED*/ .side-dock-ribbon-action {
opacity: 0;
transition: opacity .3s;
} .side-dock-actions:hover .side-dock-ribbon-action, .side-dock-settings:hover .side-dock-ribbon-action {
opacity: 1;
raisabelatrix / obsidian-card-view.css
Last active March 7, 2023 13:10
View Obsidian notes as cards. Add the cssclass card-view to the note's frontmatter to enable card view on reading mode. [Not tested on Obsidian 1.0+]
View obsidian-card-view.css
.card-view {
--card-width:35em; /*adjust this size if you want narrower or wider cards*/
/*unit has to be in em so that card background will scale along with your font
when you zoom in and out*/
/*The Card*/
.card-view .markdown-preview-section {
background-color: var(--background-primary);
margin: 3% auto;
raisabelatrix / obsidian-highlight-main-folders.css
Last active December 9, 2022 21:20
Emphasize top-level folders in the file explorer ( snippet). [Not tested on Obsidian 1.0+]
View obsidian-highlight-main-folders.css
.nav-folder.mod-root > .nav-folder-children > .nav-folder > .nav-folder-title {
font-size: .9em;
padding: .5em .75em;
background-color: var(--background-secondary);
color: var(--text-muted);
margin: 1em 0;
.nav-folder.mod-root > .nav-folder-children > .nav-folder > .nav-folder-title:hover {
background-color: var(--secondary-accent);
raisabelatrix / obsidian-document-view.css
Last active December 9, 2022 21:20
Visualize your notes like a Word document. The "page" scales along with your font-size. If using the cMenu plugin, set the plugin to append to body and not workspace so that the layout doesn't break. [Not tested on Obsidian 1.0+]
View obsidian-document-view.css
.workspace-split.mod-vertical .workspace-leaf.mod-active:only-of-type .cm-scroller,
.workspace-split.mod-vertical .workspace-leaf.mod-active:only-of-type .markdown-reading-view {
background-color: var(--background-secondary); /*dark bg in 1 pane*/
.workspace-split.mod-vertical .workspace-leaf.mod-active:only-of-type .cm-contentContainer {
margin: auto;
padding-left: 0!important;