Override DOM style for Tabs, header level

Question

I have been trying to custom my Tab widget with css_class overriding with it with a style.css as I used to do without previous bokeh versions, although since the 3.0. the same approach does not work. I tried to use css_classes, styles, stylesheet and the only one that worked well was styles which I can pass a dictionary and it overrides the root values. My problem is that I trying to reach the headers level to change the border-bottom-color, or even border-bottom to 0px.

:host(.bk-above) .bk-header {
1. border-bottom: 1px solid #0e0922;
   1. border-bottom-width:1px;
   2. border-bottom-style: solid;
   3. border-bottom-color: rgb(14, 9, 34); }

I inspected the element in the console, I checked the bokeh documentation css_widgets. I have tried a lot of different approaches and I can’t get it to work.

Minimal sample:

from bokeh.models import TabPanel, Tabs
from bokeh.plotting import figure, show


#dir(Tabs)
#Tabs.parameters()

p1, p2 = figure(), figure()

p1.background_fill_color = '#010727'
p1.border_fill_color =  '#010727'
p1.outline_line_color = '#010727'

p2.background_fill_color = '#010727'
p2.border_fill_color =  '#010727'
p2.outline_line_color = '#010727'

tab1 = TabPanel(child=p1, title="Fastest Lap")
tab2 = TabPanel(child=p2, title="Median Lap")

tabs_ = Tabs(tabs=[tab1, tab2], styles={ 'font-size':'15px', 'border-bottom': '0px', 'align':'right', 'header border-bottom-color':'green',  'border-bottom-color':'green', 'background-color':'#010727', 'color':'green'})


show(tabs_)
#dir(Tabs.styles)
#Tabs.styles.get_value(tabs_)

Answer 1

Since Bokeh 3.0 you can now inject entire stylesheets directly on a component. In your case you could do something like this:

stylesheet = """
:host(.bk-Tabs) {
  background-color: #010727;
}

:host(.bk-Tabs) .bk-header {
  color: green;
  font-size: 15px;
  border-bottom: 1px solid red;
}
"""

tabs_ = Tabs(tabs=[tab1, tab2], stylesheets=[stylesheet])