Questions: How to grab 'tab panel name' value and render it as a content in different text field; How to disable darker background during popup

[KiKaraage]

First question

Still on my journey to replicate Arc sidebar look as close as possible in Sidebery. I'm exploring ways to put a text label on top side of each tab panels. So far I've figured it out with the code below:

.AnimatedTabList:before {
  justify-content: left;
  position: relative;
  content: "Tab panel name";
  font: var(--tabs-font);
  font-weight: bold;
  font-size: 100%;
  color: var(--nav-btn-fg);  
  opacity: 50%;
  padding-left: calc(var(--tabs-inner-gap));
  top:-8px;
}

.AnimatedTabList {padding-top: 15px;}

I know that .NavigationBar .main-items .nav-item[data-class="panel"][data-active="true"] .name exists, but I would love to know how to grab the title value and put it as content on the layout above.

Second question

I would like to know how to disable darker background when accessing a popped up menu, like hidden panels or when creating a new tab panel. Personally box-shadow is enough for my setup

Third question

Oh I also wanna know how to reduce width of the add-tab-panel popup. Which element is it, and is width = 95wh enough?

[mbnuqw]

I would love to know how to grab the title value and put it as content on the layout above.

Considering position of the label (between pinned and normal tabs), this cannot be done using CSS alone - you need to change the Sidebery src. But if you place the label above the pinned tabs, that is, its position will not depend on the number of pinned tabs, then you can use the name of the panel from "#sidebar-header" (via userChrome.css) or statically place ".nav-item .name" there.

how to disable darker background when accessing a popped up menu

#root .popup-container {
  background-color: transparent;
}
#root .hidden-panels-popup-layer:before {
  background-color: transparent;
}

how to reduce width of the add-tab-panel popup

#root .PanelConfigPopup .popup {
  width: 90vw;
}

Which element is it

https://github.com/mbnuqw/sidebery/blob/v5/src/sidebar/components/popup.panel-config.vue
https://github.com/mbnuqw/sidebery/blob/v5/src/styles/themes/proton/sidebar/popup.styl

is width = 95wh enough?

There are no actual restrictions, so experiment with it.

---

btw. Great work! One of the most beautiful themes, if not the best.

[KiKaraage]

But if you place the label above the pinned tabs, that is, its position will not depend on the number of pinned tabs, then you can use the name of the panel from "#sidebar-header" (via userChrome.css) or statically place ".nav-item .name" there.

Would love to know how.

Here what I got so far. Still can't figuring out how to separate ".nav-item .name" from the ".NavigationBar .nav-item" itself (or we can't?)

Another trial

Any suggestions?

[mbnuqw]

In userChrome.css you can try to show "#sidebar-header", and style its content - hide icon, change font styles, hide close icon, etc... The title will be updated when switching panels if the "Use active panel's name as sidebar title" option is enabled (in sidebery settings).

[KiKaraage]

Thank you! My setup looking good so far, I think I can push the update release today.

One more thing: If I want to apply tab panel icon's color as sidebar background (--frame-bg?) to make Sidebery background changed every time I'm switching panel, which parameter should I put on the CSS style editor? I think it's a good alternative to emulate "different color vibes when changing Spaces" behavior from Arc browser.

[mbnuqw]

If I want to apply tab panel icon's color as sidebar background (--frame-bg?) to make Sidebery background changed every time I'm switching panel, which parameter should I put on the CSS style editor?

It doesn't seem to be possible to do this (outside the navbar), although I could be wrong.

But there is good news - I plan to add feature to auto update theme (for sidebery and browser) with switching the panel. Theme will be automatically calculated from panel's color and there also will be configuration (just like in "Adaptive Tab Bar Color" - a few styles, color variations, etc...). This is planned for after the v5.2.0 release, so a couple of months (maybe more 😅)