quarto-dev / quarto-dev/quarto-cli

code-tools menu text not visible with title-block-banner and code-fold

Open
#11,923 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug html themes
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

Bug description

With code-tools: true, code-fold: true, and

title-block-banner: true set, the text in the code-tools menu is not visible when not hovering over it. It seems like both the text color when not hovering and the code-tools menu background are white.

Image

Steps to reproduce
---
title: "Untitled"
format: 
  html:
    title-block-banner: true
    code-fold: true
    code-tools: true
---

## Quarto

Quarto enables you to weave together content and executable code into a finished document. To learn more about Quarto see <https://quarto.org>.

## Running Code

When you click the **Render** button a document will be generated that includes both content and the output of embedded code. You can embed code like this:

```{r}
1 + 1
```
Expected behavior

Menu text should be readable, ie. different color than background.

Actual behavior

Menu text is not visible when not hovering.

Your environment
  • IDE: RStudio 2024.12.0-467
  • OS: Windows 11
Quarto check output
Quarto 1.5.57
[>] Checking versions of quarto binary dependencies...
      Pandoc version 3.2.0: OK
      Dart Sass version 1.70.0: OK
      Deno version 1.41.0: OK
      Typst version 0.11.0: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
      Version: 1.5.57
      Path: C:\Program Files\RStudio\resources\app\bin\quarto\bin
      CodePage: 1252

[>] Checking tools....................OK
      TinyTeX: (not installed)
      Chromium: (not installed)

[>] Checking LaTeX....................OK
      Tex:  (not detected)

[>] Checking basic markdown render....OK

[>] Checking Python 3 installation....(None)

      Unable to locate an installed version of Python 3.
      Install Python 3 from https://www.python.org/downloads/

[>] Checking R installation...........OK
      Version: 4.4.2
      Path: C:/PROGRA~1/R/R-44~1.2
      LibPaths:
        - C:/Users/.../AppData/Local/R/win-library/4.4
        - C:/Program Files/R/R-4.4.2/library
      knitr: 1.49
      rmarkdown: 2.29

[>] Checking Knitr engine render......OK

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue with the supplied .qmd configuration using title-block-banner, code-fold, and code-tools enabled. Inspect the rendered HTML and styles for the code-tools menu, then verify that its text has sufficient contrast against the background when it is not hovered.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html, javascript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.