Change appearance of shiny components in Quarto presentation with revealjs

shiny
, , , , , ,
1

Hi community,

I would like to align the appearance of some shiny components with the general appearance of my quarto presentation with revealjs.

On stackoverflow, I found this:

ui <- fluidPage(
    tags$style(type = "text/css", "
      .irs-bar {width: 100%; height: 25px; background: black; border-top: 1px solid black; border-bottom: 1px solid black;}
      .irs-bar-edge {background: black; border: 1px solid black; height: 25px; border-radius: 0px; width: 20px;}
      .irs-line {border: 1px solid black; height: 25px; border-radius: 0px;}
      .irs-grid-text {font-family: 'arial'; color: white; bottom: 17px; z-index: 1;}
      .irs-grid-pol {display: none;}
      .irs-max {font-family: 'arial'; color: black;}
      .irs-min {font-family: 'arial'; color: black;}
      .irs-single {color:black; background:#6666ff;}
      .irs-slider {width: 30px; height: 30px; top: 22px;}
    "),
    uiOutput("testSlider")
  )

So I assume, there is a way to customize the appearance. But how do I access these css elements in my quarto presentation? I do already have .css as well as a .scss file included for styling but I think I'm missing an understanding of how to access the variables the right way. What works in my .scss file, for instance, is this:

/*-- scss:rules --*/
.reveal .slide-number {
    color: #344A9A;
}

But how do I adjust this to change the style of a shiny component?

Appreciate you help very much! Let me know if something is unclear or more information is required.

Cheers