List with all-but-one greyed out

[collinmccarthy]

In a revealjs presentation, I have an outline slide like:

## Outline

- Part 1: Intro
- Part 2: Design
- Part 3: Performance
- Part 4: Next Steps
---

I would like to grey-out all but one item in the list to indicate what part of the presentation we're on. The closest I could get was:

## Outline

- Part 1: Intro

::: {.fragment .semi-fade-out}
- Part 2: Design
- Part 3: Performance
- Part 4: Next Steps
:::
---

But (a) it requires a mouse click/advance, and (b) it has an unnecessary newline (otherwise the fragment call just shows up as plain text).

How should I be doing this? Apologies if the answer is the docs/discussions somewhere, I searched but couldn't find anything. Thank you!

[cscheid]

.fragment is meant to indicate a click for transitioning from one state to the next, and .semi-fade-out is meant to indicate "semi fade this out when clicked". We document this in our Advanced Reveal page. So this is all working correctly, even if it's not what you expected.

I think you're probably looking decorate the items themselves, so you can use spans and a custom class:

---
title: issue-4572
format: revealjs
---

## Outline

```{=html}
<style>
.semi-transparent {
  opacity: 0.5;
}
</style>
```

- Part 1: Intro
- [Part 2: Design]{.semi-transparent}
- [Part 3: Performance]{.semi-transparent}
- [Part 4: Next Steps]{.semi-transparent}

That won't fade out the bullet items, unfortunately. AFAICT there's no simple way to wrap a single li element in markdown around a span so that the style matches the bullet pseudo-element. I suspect you could do fancier CSS things based on nth-element selectors, but you'll have to investigate and learn how to do that yourself.

[cscheid]

You can do that in the front matter. I'm linking from the html page, but this works on revealjs as well.

https://quarto.org/docs/output-formats/html-basics.html

[collinmccarthy]

Sorry I'm not seeing any examples of what the syntax would be in the front matter. I'm expecting something like

format:
  revealjs:
    style:
      .semi-transparent:
         opacity: 0.5

But that's not working.

[collinmccarthy]

Obviously from the reference page those tags don't exist. Do I need to use both the default and my own CSS style sheet?

[cscheid]

title: "My document"
format:
  revealjs:
    css: choose-your-filename.css

[collinmccarthy]

Okay thanks. For anyone else, I created a .css file with

.half-transparent {
  opacity: 0.5;
}
.three-quarter-transparent {
  opacity: 0.25;
}

This worked, and the 3/4 transparency looked the best to me for this type of thing.

[mcanouil]

May I suggest the following Quarto extension which sole purpose is to do what you want to do.

https://github.com/andrie/reveal-auto-agenda

[collinmccarthy]

This looks great, thanks! If my workflow gets more complicated I'll definitely use this.