kepano / obsidian-minimal Goto Github PK
View Code? Open in Web Editor NEWA distraction-free and highly customizable theme for Obsidian.
Home Page: https://minimal.guide
License: MIT License
A distraction-free and highly customizable theme for Obsidian.
Home Page: https://minimal.guide
License: MIT License
It'd be nice if Minimal had Minimal-aesthetic options for the new data-task
attribute so that users could visually indicate e.g., dropped, deferred, or important tasks.
I haven't figured out the best way of editing the theme to achieve this, but I did find a way to make it work with @deathau's checkbox styling:
background-image
which clashes with deathau's use of -webkit-mask-image
. This means... delete line 1936 from Minimal's obsidian.css
.!important
from the background-color
attribute of .checklist-plugin-main .group .compact > .toggle .checked, .is-flashing input[type=checkbox]:checked, input[type=checkbox]:checked
—line 1931. This allows the different checkboxes to take on different colours./* data-task attribute checkboxes from death_au, modified for minimal */
.markdown-preview-view .task-list-item-checkbox:checked {
border: none;
background-color: var(--interactive-accent);
}
.markdown-preview-view .task-list-item-checkbox:hover {
background-color: var(--background-primary-alt);
}
.markdown-preview-view .task-list-item-checkbox:checked::before {
position: absolute;
color: white;
text-align: center;
font-weight: 900;
line-height: 15px;
width:12px;
left:2px;
right:2px;
}
.markdown-preview-view ul>li.task-list-item {
font-weight: normal;
color: var(--text-normal);
}
/* SVG check mark for done ('- [x]') */
.markdown-preview-view li[data-task="x"]>.task-list-item-checkbox:checked::before,
.markdown-preview-view li[data-task="X"]>.task-list-item-checkbox:checked::before {
content: ' ';
top: 2px;
bottom: 2px;
background-color: white;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolygon points='5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039'%3E%3C/polygon%3E%3C/svg%3E");
}
/* SVG chevron right for deferred/scheduled ('- [>]') */
.markdown-preview-view li[data-task=">"]>.task-list-item-checkbox:checked::before {
content: '';
top:2px;
bottom:2px;
background-color: white;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.12 7L3.26667 11.76L4.57333 13.0667L10.7333 7L4.57333 0.933332L3.26667 2.24L8.12 7Z'/%3E%3C/svg%3E");
}
/* SVG line for cancelled/non-task ('- [-]') */
.markdown-preview-view li[data-task="-"]>.task-list-item-checkbox:checked::before {
content: '';
top:2px;
bottom:2px;
background-color: white;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='6.5' width='13' height='1'/%3E%3C/svg%3E");
}
/* greyed-out background colour for cancelled/non-task ('- [-]') */
.markdown-preview-view li[data-task="-"]>.task-list-item-checkbox:checked {
background-color: var(--text-faint);
}
/* strikethrough for dropped tasks */
[data-task="-"] {
text-decoration: line-through !important;
}
/* '?' for question/more info task ('- [?]') */
.markdown-preview-view li[data-task="?"]>.task-list-item-checkbox:checked::before {
content: '?';
margin-left: .05em;
margin-top: .05em;
}
/* text style for question/more info task ('- [?]') */
.markdown-preview-view ul>li[data-task="?"].task-list-item.is-checked {
color: var(--text-normal);
text-decoration: none;
}
/* yellow background colour for question/more info task ('- [?]') */
.markdown-preview-view li[data-task="?"]>.task-list-item-checkbox:checked{
background-color: var(--background-modifier-accent);
}
/* '!' for important task ('- [!]') */
.markdown-preview-view li[data-task="!"]>.task-list-item-checkbox:checked::before {
content: '!';
margin-left: .05em;
margin-top: .05em;
}
/* text style for important task ('- [!]') */
.markdown-preview-view ul>li[data-task="!"].task-list-item.is-checked {
color: var(--text-normal);
text-decoration: none;
font-weight: 900;
}
/* red background colour for important task ('- [!]') */
.markdown-preview-view li[data-task="!"]>.task-list-item-checkbox:checked {
background-color: var(--text-accent);
}
It would be awesome to have the ID to customize the different variables such as color's heading, bold, highlight, etc
In version 3.2.2, given both the Minimal theme and Kanban plugin are installed and enabled, when a Kanban board is opened in vertical split view the horizontal scroll is limited so that at most half of the first Kanban lane is visible.
This can be immediately resolved by changing the theme from "Minimal" to "None" in Settings > Appearance > Themes > Theme
But, of course, I want to use Minimal Theme because it makes me happy.
Liam
Hi,
I notice that max-width
for .markdown-preview-section
is overwritten by app.css
. So, here's how I fix it (it should be at line 466):
.CodeMirror,
.markdown-preview-section {
padding-left:0;
padding-right:0;
margin:0 auto 0 auto;
width:var(--line-width);
max-width:90% !important; >> change here
}
I would do a pull request, but I'm too lazy 🤣
P/s: Thank you for such a nice theme 👍
I think the vault name should be visible by default. Recently, I moved a folder at root into another folder by accident and was unable to move it back to root unless I use the file manager. This is due to the design of Obsidian as it requires to drag and drop an item into the vault name to move it to root. I believe it is more convenient to display the vault name rather than hiding it.
.status-bar, /* Status bar */
::-webkit-scrollbar, /* Scroll bars */
.tooltip /* Tooltips */
/* .nav-folder.mod-root > .nav-folder-title /* Root name */ >> comment this out as default
{
display:none !important;
}
As title says, the .tag
class is also used within code blocks for certain syntax's - such as JSX and TSX.
As far as I can tell, simply changing:
.frontmatter-container .tag, .tag { ... }
to
.frontmatter-container .tag { ... }
Fixes the problem. However, I haven't tested throughly the larger effects of removing this selector.
I am unable to turn off the "Readable line length" option in editor settings, but only while using this theme.
Hi!
Cursor not visible on empty lines when you start editing note if Live Preview is enabled.
Here is a short video with a new note:
This is not reproducible with default theme.
(macOS Monterey, Obsidian 0.13.2, Minimal 4.1.0)
I would like to switch the style of checked list items (text after a checkbox). On default the text of checked items doesn't changed. I would like to grey out the text and line-through.
Another style option is to disable small-caps on smaller headings.
I am on mobile.
Latest Minimal Theme version.
Obsidian 1.0.3.
Clicking on a search in preview mode won't take you to that part of the file. It will work in editor mode, only not in preview.
Pardon the 2 issues in one day, I promise I’ll be done after this: Is there an easy way to disable the image maximize on mouse press behavior via custom css or a future setting (if it’s of interest to others)? I tried it myself via CSS but couldn’t quite make it work. It’s really helpful but I tend to stare at zoomed images for work and found that there are plugins that do this without having to keep the mouse button pressed. Thank you again for this incredible theme.
When using this theme on Windows 10 (latest obsidian version), it is not possible to scroll the list of the themes: only the first four are shown.
I frequently use code blocks and Markdown tables, which get rendered in the "monospace" font.
For some reason (this also happens without the Minimal theme), the monospace font gets rendered at a larger size in Markdown tables when compared to a code block:
Using the same font size for a Markdown table as in a code block would be fantastic.In addition, I would prefer if the monospace font was rendered even slightly smaller overall, especially since code blocks often have longer lines. It would be great if there was an easy way to apply a "scale factor" (such as a percentage slider?) to adjust the size of text rendered in monospace.
Thanks again for a great theme!
Hello
In lines 2564 and 2568, the "rotate" transform in the url value of background-image is not valid. As a result, the folding / unfolding icons doesn't display in the gutter in Obsidian document views (edit and preview).
Line 2564
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='8' height='8' class='right-triangle'%3E%3Cpath fill='currentColor' transform="rotate(90)" stroke='currentColor' d='M94.9,20.8c-1.4-2.5-4.1-4.1-7.1-4.1H12.2c-3,0-5.7,1.6-7.1,4.1c-1.3,2.4-1.2,5.2,0.2,7.6L43.1,88c1.5,2.3,4,3.7,6.9,3.7 s5.4-1.4,6.9-3.7l37.8-59.6C96.1,26,96.2,23.2,94.9,20.8L94.9,20.8z'%3E%3C/path%3E%3C/svg%3E");
Line 2568
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='8' height='8' class='right-triangle'%3E%3Cpath fill='currentColor' transform="rotate(90)" stroke='currentColor' d='M94.9,20.8c-1.4-2.5-4.1-4.1-7.1-4.1H12.2c-3,0-5.7,1.6-7.1,4.1c-1.3,2.4-1.2,5.2,0.2,7.6L43.1,88c1.5,2.3,4,3.7,6.9,3.7 s5.4-1.4,6.9-3.7l37.8-59.6C96.1,26,96.2,23.2,94.9,20.8L94.9,20.8z'%3E%3C/path%3E%3C/svg%3E");
Changing it to the following (actually removing the transform) fixes the issue
Line 2564
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='8' height='8' class='right-triangle'%3E%3Cpath fill='currentColor' stroke='currentColor' d='M94.9,20.8c-1.4-2.5-4.1-4.1-7.1-4.1H12.2c-3,0-5.7,1.6-7.1,4.1c-1.3,2.4-1.2,5.2,0.2,7.6L43.1,88c1.5,2.3,4,3.7,6.9,3.7 s5.4-1.4,6.9-3.7l37.8-59.6C96.1,26,96.2,23.2,94.9,20.8L94.9,20.8z'%3E%3C/path%3E%3C/svg%3E");
Line 2568
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='8' height='8' class='right-triangle'%3E%3Cpath fill='currentColor' stroke='currentColor' d='M94.9,20.8c-1.4-2.5-4.1-4.1-7.1-4.1H12.2c-3,0-5.7,1.6-7.1,4.1c-1.3,2.4-1.2,5.2,0.2,7.6L43.1,88c1.5,2.3,4,3.7,6.9,3.7 s5.4-1.4,6.9-3.7l37.8-59.6C96.1,26,96.2,23.2,94.9,20.8L94.9,20.8z'%3E%3C/path%3E%3C/svg%3E");
Can you please review?
Thank you
My other snippet doesn't show up in style settings. There is just Minimal. I think there is a problem with the formatting but I can't check the error for the moment.
Anyone can help me?
Hi this may not be an issue and just not available, but wanted to clarify. I change the font size and it works great in Editor mode. But when I go to preview mode, the font size isn't changed. Is there any setting that can help change in preview mode too? Or am I doing something wrong? I have tried using it Cybertron theme.
UPDATE: sorry please ignore the above. I cannot delete the issue. This question was meant for Advanced Appearance plugin. I will post there.
Just a suggestion: This may totally be me but while I think Minimal is (by far!) the best Obsidian theme I recently noticed that I find the backlinks and search results a bit washed out and that I find those features harder to use than I previously realized.
Hey. I've tried to replace css vars
Font styles
/* Preview mode */
--text:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
/* Editor mode */
--text-editor:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
/* Code */
--font-monospace:Menlo,SFMono-Regular,Consolas,"Roboto Mono",monospace;
/* UI */
--font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
to my preferable font Ubuntu Mono
but it didn't apply.
May i ask to give me a hint how to change the fonts?
When switch from edit mode
and preview
mode. There is a possibility that the editor will scroll back to the top or the middle of the file.
In Vim mode, when transitioning from Normal mode to Insert mode, the cursors position is placed to the right of the current character that the block cursor is on. Correct behaviour is that the cursor be placed on the left.
This is a cursor visual bug only, any typed characters are placed in the correct position, upon which the cursor then updates.
Current Behaviour
Correct Behaviour (w/ Fancy Cursors Disabled)
On iPhone (iOS 14.7) and iPad (iPadOS 15 Public Beta), Obsidian Mobile 1.0.4, the editor is completely blank when using Minimal.
I can reproduce this by creating a brand new vault and installing the minimal theme new from the in-app gallery. I'm sure it's something I'm doing, but I can't fathom what that might be!
When editing a long note spanning multiple pages, I need to use mouse to drag the scroll bar to where I want to be. In preview mode it works fine but in edit mode the scroll bar is present but I can't drag it with my mouse.
I'm on Obsidian Windows version 0.12.4 but I had the same issue with versions before that as well.
Hi there,
is it possible to set/increase the font size of the UI?
(it’s quite small on a 12.9 iPad.)
Thank you!
First of all thank you for making this amazing theme! 🥇 👍
When using this theme and enabling Settings -> Appearance -> Quick font size adjustment
Using Ctrl + scroll wheel does not zoom in ( in both edit mode or preview mode ). I can use this in almost every other theme including default theme. I'm not sure if this was intended or a bug.
This is the only reason I'm not using this theme now. Would love to use it if we can change the font size with Ctrl + scroll up/down.
Edit: let me know if I can help/
Thanks for this great theme, I was wondering if it would be possible to allow headings to have a different size in editor mode (like they do in the default theme). I quite like the pseudo WYSIWG experience in Obsidian due to that as I can get a sneak peak into to what it would look like and it helps me quickly find h1, h2, h3 sections.
If this is currently possible, I could not find it sorry :(
I have folding header offset turned on; but, I don't see the folding toggles.
The top left hamburger menu is completely missing in Android.
The only way I could open the left sidebar was indirectly, via the command palette.
Device: Nokia 5.3 (Android One) running Android 11.
The Changed
and Deleted
callouts are missing from the Publish uploader window when the Minimal theme is applied. This is important information for the user when they're reviewing what notes are Published or need to be removed etc. Can these be unhidden in the theme for user experience / security purposes? Thank you!
Below is a screenshot showing the messaging using Minimal and the default theme.
It is hard to downsize panes in which PDFs are open. It only works, if you are moving your courser very slow, so that the courser isn't hovering over the PDF. The same issue appears in standard theme, but it's handled better there because there is a tiny bit of space around the PDF, so you can move your courser faster while downsizing.
Maybe you can do the same until it's fixed.
This functionality should be overriden, somehow. It is possible
Desired (default) display of images in Obsidian => about 40% width of screen, 60% vertical height
Display for Minimal theme (far too wide, and then image takes up 200% vertical height due to width stretch:
Potential Solutions:
Note, I've gotten this (#3) desired functionality by disabling the Minimal theme (minimal overrides custom CSS), and using the following CSS Snippet:
.markdown-preview-view img[alt="sm"] {
max-width:30%;
max-height:auto;
}
.markdown-preview-view img[alt="md"] {
max-width:50%;
max-height:auto;
}
.markdown-preview-view img[alt="lg"] {
max-width:70%;
max-height:auto;
}
This is activated using the following notation:
![sm](Pasted%20image%2020210727084710.png)
![md](Pasted%20image%2020210727084710.png)
![lg](Pasted%20image%2020210727084710.png)
If this is something Obsidian minimal theme would like to support, I'd be very open to opening and submitting a pull request / support any breaking changes that Obsidian pushes (I'm an insider - https://forum.obsidian.md/u/mochsner/summary)
Thanks!
Marc
I just found your theme and installed it today. So far, I like many things about it, so thank you!
One thing I've noticed is that the Readable line length option (in the Editor settings) always seems to be enabled. Regardless of how wide I make the window, it only uses a small (centered) part of the window when I have your Minimal theme selected.
It would be terrific if your theme honored the Readable line length setting.
Thanks for considering this!
Hi,
When I use Minimal theme in a published vault, the "Link to this page" pannel dissapears. How can I enable again?
I tried to find it in the CSS, but I couldn't.
I've been using Minimal for a long time now, and even with the new version, I have the following bug: in settings, I can see the last line of the window. For example, if I try to see all of my community plug-ins, I scroll to the bottom, and the last one (Workbench) doesn't entirely show. Do you have any idea what might be causing this?
Ligatures, for example arrows ( -> ), do not form like they do in the base theme.
Even when keeping all fonts as system font or None.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.