revealjs ul style preferred to task-list style

aronatkins commented 1 year ago

Bug description

Using Quarto 1.2.209 rendered on macOS from the CLI; this is the Quarto version included in one of the most recent RStudio dailies.

Quarto with revealjs sees the revealjs style used rather than the default task-list style injected into the document. This is because the .reveal ul scoped CSS is preferred over the top-level CSS injected by Quarto+Pandoc.

---
title: task list with reveal
format: revealjs
---

## tasks

- [x] wake up
- [ ] brush teeth
- [ ] drink coffee

As rendered, you can see both the original list icons and the check-boxes as rendered on Safari. Only the check-boxes should be displayed and they should be more prominent.

I am locally using these override styles; they're imperfect, but an improvement.

.reveal ul.task-list{list-style: none;}
.reveal ul.task-list li input[type="checkbox"] {
    width: 2em;
    height: 2em;
    margin: 0 1em 0.5em -1.6em;
    vertical-align: middle;
}
.reveal ul.task-list li input[type="checkbox"][disabled] {
    outline:1px solid lightgrey;
}
.reveal ul.task-list li input[type="checkbox"][disabled][checked] {
    outline:2px solid green;
}

Checklist

[X] Please include a minimal, fully reproducible example in a single .qmd file? Please provide the whole file rather than the snippet you believe is causing the issue.
[X] Please format your issue so it is easier for us to read the bug report.
[X] Please document the RStudio IDE version you're running (if applicable), by providing the value displayed in the "About RStudio" main menu dialog?
[x] Please document the operating system you're running. If on Linux, please provide the specific distribution.

cscheid commented 1 year ago

Thanks for the report. This looks so ugly with our existing CSS that I think your override styles would be a valid addition. Any chance you want to send a PR our way?

aronatkins commented 1 year ago

I'm not sure how that style would be threaded in. By "local override", I mean that I have style for my document:

---
format:
  revealjs:
    css: styles.css
---

.reveal ul.task-list{list-style: none;}
.reveal ul.task-list li input[type="checkbox"] {
    width: 2em;
    height: 2em;
    margin: 0 1em 0.5em -1.6em;
    vertical-align: middle;
}
.reveal ul.task-list li input[type="checkbox"][disabled] {
    outline:1px solid lightgrey;
}
.reveal ul.task-list li input[type="checkbox"][disabled][checked] {
    outline:2px solid green;
}

It almost feels as if we want to avoid checkbox input elements entirely and use some nicer presentation for task-lists, but I'm not sure what's Quarto and what's Pandoc in this situation.

cscheid commented 1 year ago

I was thinking we could add that to ./src/resources/formats/revealjs/quarto.scss, and instead of lightgrey and green, we'd use some of the variables we have by default.

It seems that Pandoc is converting these to inputs, so we can't really avoid it:

$ quarto render tasklist.qmd --to markdown --output=tasklist-pandoc.md
pandoc --output tasklist-pandoc.md
  to: markdown
  standalone: true
  default-image-extension: png

metadata
  title: task list with reveal

Output created: tasklist-pandoc.md

$ quarto pandoc -f markdown tas
klist-pandoc.md --to html
<h2 id="tasks">tasks</h2>
<ul class="task-list">
<li><input type="checkbox" disabled="" checked="" />wake up</li>
<li><input type="checkbox" disabled="" />brush teeth</li>
<li><input type="checkbox" disabled="" />drink coffee</li>
</ul>

cscheid commented 1 year ago

I see why you'd use those outline colors: there's not much else left if we stick to native controls. I almost want to do something like https://moderncss.dev/pure-css-custom-checkbox-style/

cscheid commented 1 year ago

I'm going to add a temporary workaround to main so we don't have a completely horrible style, but I'm not going to add those outline colors. Instead, I'm going to leave this issue open so that we handle it properly in 1.3.