Find the CSS to modify the highlight of a tabPanel with cicerone

Question

I'm using the package {cicerone} to create a tour on my shiny app. The problem is that the highlight is completely opaque when the navbar is fixed-top. I searched during hours how to modify the CSS so that the result is the same as when the navbar is static but without success. I asked to the package maintainer but no solution so far.

Navbar with good display:

library(shiny)
library(cicerone)

home_guide <- Cicerone$
  new(id = "homeGuide")$
  step(
    "[data-value='home']",
    "Hello",
    "Hello from tab 1",
    is_id = FALSE
  )$
  step(
    "[data-value='tab']",
    "Text",
    "This is an input",
    is_id = FALSE
  )

ui <- navbarPage(
  "cicerone",
  header = list(use_cicerone()),
  id = "nav",
  # position = "fixed-top",
  tabPanel(
    "home",
    h1("First tab", id = "home_primary"),
    textInput("home_secondary", "Text")
  ),
  tabPanel(
    "tab",
    h1("Second tab", id = "tab_primary"),
    textInput("tab_secondary", "Text")
  )
)

server <- function(input, output, session){
  
  home_guide$init()$start()
  
}

shinyApp(ui, server)

Navbar with bad display (add position = "fixed-top" in the ui):

library(shiny)
library(cicerone)

home_guide <- Cicerone$
  new(id = "homeGuide")$
  step(
    "[data-value='home']",
    "Hello",
    "Hello from tab 1",
    is_id = FALSE
  )$
  step(
    "[data-value='tab']",
    "Text",
    "This is an input",
    is_id = FALSE
  )

ui <- navbarPage(
  "cicerone",
  header = list(use_cicerone()),
  id = "nav",
  position = "fixed-top",
  tabPanel(
    "home",
    h1("First tab", id = "home_primary"),
    textInput("home_secondary", "Text")
  ),
  tabPanel(
    "tab",
    h1("Second tab", id = "tab_primary"),
    textInput("tab_secondary", "Text")
  )
)

server <- function(input, output, session){
  
  home_guide$init()$start()
  
}

shinyApp(ui, server)

Is there an expert in CSS willing to show me how to modify the CSS in the second case so that the result is the same as in the first one? This person can also make a pull request to implement his/her solution in the package.

Note: for now (12 October 2020), you probably need to install the development version of {cicerone} (devtools::install_github("JohnCoene/cicerone")).

Answer 1

This CSS solves the problem (it comes from this comment on the driver.js repo):

div#driver-highlighted-element-stage, div#driver-page-overlay {
  background: transparent !important;
  outline: 5000px solid rgba(0, 0, 0, .75)
}

It is now incorporated in the development version of {cicerone} (to be installed with: devtools::install_github("JohnCoene/cicerone")).