transparent menu fix

[indigofairyx]

i modified a piece of your theme.css i dont know how to do a pull request on github. so ill post here.

im kind of surprised i got this work. ive not had much luck working with css, i either break it or nothing changes. lol ive been trying for a day or to get this work inside a snippet with no luck

that being said i think this is beneficial change.

this makes the transparent menus easier to read. by adding a blur to the background of the transparency

take a look... use it if you like it ill attach screen shots and the before and after css for you to compare.

theme.zip

i added a few lines to the

UI Advanced Settings > Transparent menus, modals and prompts

before

clear transparent menu, can be hard to read at a low opacity.

after

added blur element to the transparency. after i made this change its easier to read, but your opacity slider in the style setting doesn't seem to work now. ssoooo, i fixed it and broke it at the some time. still learning. lol

---

my inspiration, and where i copied the code from was a snippet i found on the obsidian forums. this is the snippet im currently using.

.status-bar,
.is-translucent .status-bar {
background: transparent;
  font-size: 12px;
  position: default; /*fixed;*/
  /*right: 45%;*/
  bottom: 0%;
  backdrop-filter: blur(7px);
  border-top: 1px solid var(--shade-plus-darker);
  border-left: 1px solid var(--shade-plus-darker);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  line-height: 1;
  padding: 8px 12px 8px 0;
  color: var(--text-muted);
  max-height: unset;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
  margin: 1;
  border: 1px solid var(--background-modifier-border);
    opacity: 0.1;
    transition: .2s;
}

.status-bar:hover {
    opacity: 1;
    transition: .2s;
}

.status-bar-item {
  padding: 0 0 0 10px;
}

.status-bar-item-segment {
  margin-right: 10; /* Give this a 10px space if you don't want to hide the last indicator (section below in this code */
}

/** Hides the last indicator, whatever it is. Mind this section if you use any plugin that adds indicators to the status bar. This section will probably hide it. 
.status-bar-item-segment:last-child {
    display: none;
}
**/
.status-bar-item-icon {
    display: block;
}

.status-bar-item-icon svg {
    display: block;
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* source: https://forum.obsidian.md/t/experiment-with-transparent-status-bar/22141 */

---

cheers! xavier

[drbap]

Please check theme version 20.2.0.

I added transparency blur effect slider to control blur of transparent menus, prompts and other transparent ui elements. So you can use the blur level you want (set to zero -> no blur).

The tricky part was to make the settings modal transparent. But it is working well now. If you find any bug, let me know.

If it is working well, you can close this issue. Thanks

All the best

[drbap]

Thanks for taking the time to point out the readability issue with the text in transparent menus. You're absolutely right, it definitely needed improvement. In this update (20.2.0), I've adjusted the background color and added the blur effect you suggested, making the text easier to read. You can now control the transparency and blur effect with dedicated sliders. Please let me know if the changes address the readability issue for you.

Your feedback is truly valuable and helps me make MagicUser better for everyone. I appreciate the motivation to keep improving it!

On a separate note, I really like the green accent (icons and text) colors you've chosen. They look great! 👍

All the best

[indigofairyx]

and these new look AWESOME! better than i could have wrote in a hurry!

thanks for being interactive and proactive! with your involvement here!

a bit off topic on this idea... one thing ive noticed with obsidians forums im that kinda meah about is they're so fast to just completely close a thread, killing it. doesnt seem helpful if we cant keep exchanging over odd things the software is still doing from 4 years ago. eg, took me over a week to find\fix an indexing issues causing high cpu usage, that lead to twenty-some, dead, unanswered post. but i digress back to the menus...

im happy with the blur\transparency options!

one small continuity difference between the context menus and the setting panel is the dividers lines don't match, they're darker, in the settings panel...

context menu

core plugins pane

and some are being picked up in the Styles Setting pane

as i click thru the community plugins options panels the dividers are randomly green or faint, with or without headings.

overall its all readable so i call this a win! thanks again!

[drbap]

Thanks for pointing out the issue with the dividers! That's a great catch. I will create a separate issue specifically for the dividers so I can focus on improving them.

BTW, no rush to close any issue. Feel free to close the issue only when you think it was really fixed. This theme is made with 100% good will.

But about the dividers, I really think the topic belongs to a different issue.

[drbap]

a bit off topic on this idea... one thing ive noticed with obsidians forums im that kinda meah about is they're so fast to just completely close a thread, killing it. doesnt seem helpful if we cant keep exchanging over odd things the software is still doing from 4 years ago. eg, took me over a week to find\fix an indexing issues causing high cpu usage, that lead to twenty-some, dead, unanswered post. but i digress back to the menus...

I forgot to reply to this...

About the forum, it's definitely disappointing when helpful threads get closed. While the exact reasons can be unclear, keeping discussions focused is often a goal for moderators. I try to understand their reasons too. However, sometimes it can be frustrating when a thread is relevant and gets closed quickly. I don't really know why it was closed.