[CSS] Share a simple and elegant toolbar Style (cMenu-like)

[Moyf]

Disclaimer: the author of this style is @PandaNocturne
Glory to the pandas 🐼

Style Demo

It sits the toolbar below the note and takes up less space for display.

Description

1. The toolbar name should include keyword cmenu
   
2. The Sticky style option cannot be checked
3. Position settings should be Top (Fixed)

Code file

Gist：https://gist.github.com/Moyf/796a1aeeb7aa3dd34a13d138e747a841

/* Note Toolbar 像 Cmenu那样显示 */
div[data-name *="cmenu"] {
  z-index: var(--layer-status-bar);
  position: absolute;
  bottom: 60px;
  width: 100% !important;
  pointer-events: none !important;
  display: flex;
  justify-content: center !important;
  background-color: transparent !important;

  div.callout, .callout-content {
    background-color: transparent !important;
    border: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
    /* width: fit-content;
    height: fit-content; */
  }

  ul[role="menu"] {
    pointer-events: auto !important;

    width: fit-content;
    max-width: 460px;
    /* display: grid !important;
    grid-template-columns: repeat(10, minmax(0, 1fr)); */
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    gap: 8px 5px !important;

    padding: 10px !important;
    transition: 200ms ease;
    height: auto;
    min-width: fit-content;
    border-radius: 6px;

    z-index: var(--layer-status-bar);
    box-shadow: 0px 3px 30px rgb(31 38 135 / 15%);
    margin: 33px !important;
    border: 1px solid var(--background-modifier-border);

    /* 添加毛玻璃效果 */
    backdrop-filter: blur(10px);
    /* background-color: rgba(255, 255, 255, 0.1) !important; */
    background-color: rgba(var(--primary-background), 0.1);

    li {
      border-radius: 6px;
      background-color: var(--background-secondary);

      &>span {
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px !important;

        svg {
          transform: scale(1.2);
        }

      }

      .cg-note-toolbar-item-label {
        display: none;
      }
    }

  }

}

Notes

Developers @chrisgurney can incorporate it into NTB as one of the default styles if you want :D

[chrisgurney]

Very cool, thanks for sharing!

[laktiv]

Additional warning - this method has bug. If press the NTB's button which will forward you to other note (e.g. by link) and then you will press "Back" (?command=app:go-back) the panel will disappear. I've found in the code, but visually it will appear only after reloading the note.

Btw, in latest beta 1.16-13 there is custom css classes support. You don't need to add -text to name, you could select by class

.cg-note-toolbar-callout.cmenu {}

Now it's possible to combine classes for various cases without complex coding. Below example: if add second class to toolbar (labels) it will show the button labels.

.cg-note-toolbar-callout.cmenu:not(.labels) ul[role=menu] {
  .cg-note-toolbar-item-label { display: none; }
}
.cg-note-toolbar-callout.cmenu.labels ul[role=menu] {
  .cg-note-toolbar-item-label { white-space: wrap; }
}

[chrisgurney]

@Moyf @laktiv Bottom position toolbars are now an option in the beta.

Give it a try and let me know how well it works for you!

And thank you for the pointers back to cMenu, which helped me get this working!