找到css用cicerone修改tabPanel的高亮

Question

我正在使用该包{cicerone}在我闪亮的应用程序上创建一个导览。问题是当导航栏为fixed-top. 我在几个小时内搜索了如何修改 CSS，以便结果与导航栏相同static但没有成功。我问过包维护者，但到目前为止没有解决方案。

具有良好显示效果的导航栏：

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)

显示不良的导航栏（position = "fixed-top"在 中添加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)

是否有 CSS 专家愿意向我展示如何在第二种情况下修改 CSS 以使结果与第一种情况相同？此人还可以发出拉取请求以在包中实施他/她的解决方案。

注意：目前（2020 年 10 月 12 日），您可能需要安装{cicerone}( devtools::install_github("JohnCoene/cicerone"))的开发版本。

Answer 1

这个 CSS 解决了这个问题（它来自repo上的评论driver.js）：

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

{cicerone}它现在已合并到（将通过： ）的开发版本中devtools::install_github("JohnCoene/cicerone")。