gapmiss_blur/styles.css
@gapmiss e5ec44db83 feat: add built-in reveal on hover setting
Add settings tab with toggle to reveal blurred/boned text on hover,
removing the dependency on obsidian-style-settings plugin. Also fix
CSS selectors that were looking for descendant instead of class on body.

- Add BlurPluginSettings interface and PluginSettingTab
- Fix hover CSS selectors (body .class → body.class)
- Update README with settings section and method behavior notes
- Fix inline content extraction bug (substring → slice)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-05-29 19:50:10 -05:00

74 lines
No EOL
2 KiB
CSS

:root {
--obsidian-blur-bone-border-radius: 1.33em;
--obsidian-blur-bone-line-height: 1;
--obsidian-blur-brick-border-radius: 1px;
--obsidian-blur-brick-line-height: 1;
--obsidian-blur-filter: 5px;
}
body.theme-dark {
--obsidian-blur-brick-color: hsla(220, 100%, 100%, 1);
--obsidian-blur-bone-color: hsla(220, 100%, 100%, 1);
}
body.theme-light {
--obsidian-blur-brick-color: hsla(220, 19%, 6%, 1);
--obsidian-blur-bone-color: hsla(220, 19%, 6%, 1);
}
body .markdown-rendered div.blur-block,
body .markdown-preview-view div.blur-block {
filter: blur(var(--obsidian-blur-filter));
-webkit-filter: blur(var(--obsidian-blur-filter));
}
body.obsidian-blur-hover div.blur-block:hover {
filter: blur(0px);
-webkit-filter: blur(0px);
}
body .markdown-rendered code.blur-inline,
body .markdown-preview-view code.blur-inline {
filter: blur(var(--obsidian-blur-filter));
-webkit-filter: blur(var(--obsidian-blur-filter));
display: inline-block;
}
body.obsidian-blur-hover code.blur-inline:hover {
filter: blur(0);
-webkit-filter: blur(0px);
}
body .markdown-rendered code.blur-bone,
body .markdown-preview-view code.blur-bone {
background-color: var(--obsidian-blur-bone-color);
color: var(--obsidian-blur-bone-color);
border-radius: var(--obsidian-blur-bone-border-radius);
line-height: var(--obsidian-blur-bone-line-height);
display: inline-block;
}
body.obsidian-blur-hover code.blur-bone:hover {
background-color: transparent;
}
body .markdown-rendered code.blur-brick,
body .markdown-preview-view code.blur-brick {
background-color: var(--obsidian-blur-brick-color);
color: var(--obsidian-blur-brick-color);
border-radius: var(--obsidian-blur-brick-border-radius);
line-height: var(--obsidian-blur-brick-line-height);
display: inline-block;
}
body.obsidian-blur-hover code.blur-brick:hover {
background-color: transparent;
}
.blur-bone-innerblock code.blur-bone {
margin: 0.25em;
}
.blur-brick-innerblock code.blur-brick {
margin: 0.25em;
}