Loving the columns feature but the jump/flicker and long filename issues are problematic for me. It also seems to flicker the most when I’ve scrolled to the bottom of the list. Has there been any progress on this bit of code in the last month?
This is what I have:
/----file explorer column view : slightly buggy ----/
.nav-folder-children {
column-width:200px;
column-rule: 1px solid var(–background-modifier-border);
}
/* Wrap long nav text and some paddings /
.nav-file-title,
.nav-folder-title {
white-space: normal;
width: auto;
}
/ Indent wrapped nav text */
.nav-file-title-content {
margin-left: 10px;
text-indent: -10px;
}
And this is what I often get:
Unfold at the arrow for preview; hidden because it's annoying to watch
Sorry I don’t know how to fix it… I use about the same code you posted, with the same bug. Still, I find its usefulness outweighs the cons… I can see why some people would want to disable it though haha
Let’s hope someone with better skills can come up with a fix or a plugin.
This code is not from me, I found the different parts of it here scattered in the forums and adjusted it. I thought it would be a good idea to put this together in one place.
It basically enlarges the popover window, makes the tag pills smaller and adjusts the background as well as the marked text.
.popover {
font-size: 20px; /* bigger text to make up for the downscaling */
text-align: justify;
box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.25);
}
.popover mark {
background-color: #000000; /* mark background color */
color: #dddddd /* color for marked text */
}
.popover.hover-popover {
transform: scale(0.7); /* downscales the whole content - important for smaller tag pills */
max-height: 900px;
min-height: 100px;
width: 700px;
background: var(--background-primary);
}
Can anyone point out what I am doing wrong when trying to define tag color for the specific tag #important?
The following code snippets were taken from the code shared above from several posts. Really appreciate it!
The following code snippet was used to set overall tag display.
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hashtag-end:before {
content: '#'; /* This is to prevent the removal of tags in the WYSIWYM setting. */
}
.tag, div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hashtag-end {
background-color: var(--text-accent);
border: none;
color: white !important;
font-size: var(--font-size-tag);
padding: 1px 8px;
text-align: center;
text-decoration: none !important;
display: inline-block;
margin: 0px 0px;
cursor: pointer;
border-radius: 14px;
}
The following code was used to set tag display for the tag #important in preview and edit mode, respectively.
/* Tag color in preview mode */
.tag[href^="#obsidian"] {
background-color: #4d3ca6;
}
.tag[href^="#important"] {
background-color: red;
}
.tag[href^="#complete"] {
background-color: green;
}
.tag[href^="#inprogress"] {
background-color: orange;
}
/* Tag color in editor mode */
.cm-tag-important {
background-color: red;
border: none;
color: white !important;
font-size: var(--font-size-tag);
line-height: 1.6em;
padding: 0px 7px 1px 7px;
text-align: center;
text-decoration: none !important;
display: inline-block;
margin: 0px 0px;
cursor: pointer;
border-radius: 14px;
}
However, I got the following effect for the tag(s) in edit mode:
When the tags were not selected (first figure), the tag #important was not displayed as red; when selected (second figure), the hashtag was separated from the “important”.
Also curious about how to set individual tag colors in graph view, as shown in the Announcement of v0.9.0:
I was trying to achieve the same tag display in edit, preview, tag pane and graph view, both for overall tags and for some individual tags. However, from the post below, it seems that setting individual tag colors in tag pane has not been supported yet.
It would be really awesome if this can be achieved someday.
That’s as far as I’ve come. It adjusts the overall scale, text size and the width.
I also added a small box shadow.
.markdown-embed
{
transform: scale(0.95); /* makes the content smaller */
width: 620px;
font-size: 13px; /* relatively larger text to make up for the downscaling */
text-align: justify;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.25);
}
/edit: As it seems, for some strange reason, the code also changes the width and scale inside the preview popover?
After some tests, the #important tag color now displays as expected in editor mode when not selected by adding the following code. However, when selected in editor mode, the issue persists.
I know the recent code is not perfect at all. If somebody has a good skill with position absolute layout I think its possible for him to do it perfectly
@wonton: is it possible to make the bit for the file explorer in the left pane more like what you did for the outliner?
Here is what I use for the file explorer:
. But it still help to navigate with and ease.
