kepano / obsidian-minimal Goto Github PK

Tasks in an embedded note are cut off on the left-hand side when the note is previewed.

Tested on iOS/iPadOS with the latest version of the Minimal theme and with all CSS snippets disabled.

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.

Ligatures, for example arrows ( -> ), do not form like they do in the base theme.
Even when keeping all fonts as system font or None.

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)

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)

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?

I'm using the Excalidraw plugin, and it appears that the "save" icon is missing from the set of customized ones:

Moreover, it would be really cool if the Excalidraw canvas colors could match the theme, too! (should I move this to a new issue?)

I am unable to turn off the "Readable line length" option in editor settings, but only while using this theme.

First off - great theme, thank you!

The minimize/maximize/close buttons on Windows don't seem to change colour when the Light theme is active. Screenshot below:

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.

H4 - H6 Incorrect color display

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:

1. Remove the current checkbox checkmark, as it uses background-image which clashes with deathau's use of -webkit-mask-image. This means... delete line 1936 from Minimal's obsidian.css.
2. Remove !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.
3. Add the below CSS as a snippet and enable it. I removed the checkbox shaping in deathau's original CSS and added in a strikethrough effect on the text of dropped tasks.

/* 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);
}

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 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!

When creating subtasks in the Kanban plugin, the subtasks checkmarks don't show up using Minimal Theme.

Results:

Expected:

Relevant markdown:

## Doing

- [ ] testcard<br><br>- [ ]  testsubtask<br>- [ ]  testsubtask2

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.

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:

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!

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!

I cant see any cursor on mobile device

It would be awesome to have the ID to customize the different variables such as color's heading, bold, highlight, etc

I’ve encountered a minor inconvenience when using the theme on my iPad/iPhone. When I pin open command palette to the toolbar, I’m just getting a grey square instead of the expected icon ()

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.

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

Is it possible to somehow increase the font in the title?

Cosmetic FR for otherwise OUTSTANDING Theme! Thanks much for your efforts.

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.

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 the Minimal theme, the custom plugin search box appears to be missing its top margin:

Tested on iOS/iPadOS with the latest version of the Minimal theme and with all CSS snippets disabled.

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:

1. Not stretching
2. Stretching only to 50% max (if stretched):
   https://forum.obsidian.md/t/resize-embedded-content/877/13
3. Alt tag overloading for custom sizes (taken as the only working option for Obsidian from this markdown article).

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

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

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?

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.

Is there a way to make the relationship lines in Edit Mode contiguous like the ones in the Preview Mode?

Mine looks like this:

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.

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/

The spacing between paragraphs (and lists?) in an embedded note is reduced when the note is previewed. This makes the embedded note text much harder to read.

Tested on iOS/iPadOS with the latest version of the Minimal theme and with all CSS snippets disabled.

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;
}

Hi,
I found this error on dev console:

Any idea?

Thanks

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.

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.

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 there,

is it possible to set/increase the font size of the UI?
(it’s quite small on a 12.9 iPad.)

Thank you!

Improve the selection in the search so that the note that is currently active is highlighted. In my opinion, this is a very convenient function that allows you to work with arrays of information that are selected through a search.

I have folding header offset turned on; but, I don't see the folding toggles.

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 👍

How to achieve the same look and feel for tags from your preview photos? Here’s what I got on 4.0:

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 :(

This is something that recently popped up after I added the Advanced Appearance plugin. I have since removed this plugin, but this behaviour persists.

Whenever I use emoji in Obsidian with the Minimal theme, my emoji are distorted.

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.

1. Go to Settings
2. then "Appearance"
3. In "Community themes" click on "Browse"
4. only four themes are shown. Scrolling via touchpad does not work. No scrollbars are shown.