search

quarto-dev / quarto-cli

Open-source scientific and technical publishing system built on Pandoc.
https://quarto.org
Other
3.88k stars 318 forks source link

Dark theme doesn't respect the layering order of the stylesheets #10817

Closed nsarang closed 1 month ago

nsarang commented 1 month ago

Bug description

boostrap-dark.min.css doesn't follow the layering order specified in the documentation. At the end of the css file, you can find quarto related styles such as quarto-title-banner, quarto-title, #title-block-header, etc which should come before the user-specified styles, not after. Note that this is only an issue with the Dark theme.

Steps to reproduce

_quarto.yml

project:  
    type: website

website:
  title: "test2"
  navbar:
    left:
      - href: index.qmd
        text: Home
      - about.qmd

format:
  html:
    theme:
      light:
        - cosmo
        - custom.css
      dark: 
        - darkly
        - custom.css
    toc: true

custom.css

/*-- scss:rules --*/

.custom-style {
    color: red;
}

Expected behavior

boostrap-dark.min.css

[ bootstrap styles ]

...

.custom-style {
    color: red;
}

Actual behavior

boostrap-dark.min.css

[ bootstrap styles  - part 1 ]

...

.custom-style {
    color: red;
}

[ bootstrap styles  - part 2 ]

.quarto-title-banner {
    margin-bottom: 1em;
    color: #dee2e6;
    background: #375a7f
}

.quarto-title-banner a {
    color: #dee2e6
}

...

.quarto-title-tools-only {
    display: flex;
    justify-content: right
}

Your environment

Quarto check output

Quarto 1.5.55
[✓] 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.55
      Path: /Applications/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: (not installed)
      Chromium: (not installed)
mcanouil commented 1 month ago

Could you clarify the steps to reproduce and ensure your files are valid? Also, why are you using CSS files when SCSS files are expected?

nsarang commented 1 month ago

@mcanouil

Could you clarify the steps to reproduce and ensure your files are valid?

  1. Create an empty website project
  2. Use the given _quarto.yml configuration
  3. Create a custom.css file in the root directory with the given content
  4. Inspect _site/site_libs/bootstrap/bootstrap-dark.min.css Also, why are you using CSS files when SCSS files are expected?

The choice of extension doesn't make a difference in the reproducibility. As you can see the content is in SCSS.

mcanouil commented 1 month ago

Your files are still not valid: the square brackets and ellipses are no (S)CSS. Please, make sure we can use your code as is. Also, is a website project really needed? I believe a simple document should exhibit the issue if there is one.

You can share a self-contained "working" (reproducible) Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````). See https://quarto.org/bug-reports.html#small-is-beautiful-aim-for-a-single-document-with-10-lines.

If you have multiple files (and if it is absolutely required to have multiple files), please share as a Git repository.

RPython
`````md ````qmd --- title: "Reproducible Quarto Document" format: html engine: knitr --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{r} x <- c(1, 2, 3, 4, 5) y <- c(1, 4, 9, 16, 25) plot(x, y) ``` ![An image]({{< placeholder 600 400 >}}){#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ```` ````` `````md ````qmd --- title: "Reproducible Quarto Document" format: html engine: jupyter --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{python} import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] plt.plot(x, y) plt.show() ``` ![An image]({{< placeholder 600 400 >}}){#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ```` `````

Additionally and if not already given, please share the output of quarto check within a code blocks (i.e., using three backticks ```txt), see https://quarto.org/bug-reports.html#check.

nsarang commented 1 month ago

I'm not sure why you're looking for a document to reproduce, when the bug exists in the generated bootstrap.css. Given the simple instructions I provided, it'd take you at most two minutes to reproduce this.

Your files are still not valid: the square brackets and ellipses are no (S)CSS.

Feel free to rename custom.css to custom.scss and it'll still reproduce the same problem.

mcanouil commented 1 month ago

Sorry, it was not very clear especially since the code provided does not really exhibit a visual issue.

See an example below of the issue for dark theme.

https://github.com/user-attachments/assets/9316d426-2c18-4a6e-a110-a113acdc5250

---
title: "Quarto Playground"
title-block-banner: true
format:
  html:
    theme:
      light:
        - cosmo
        - style.scss
      dark: 
        - darkly
        - style.scss
---

This is a playground for Quarto.

{{< lipsum 1 >}}

![An image]({{< placeholder 600 400 >}}){#fig-placeholder}
/*-- scss:defaults --*/

/*-- scss:rules --*/
.quarto-title-banner {
  margin-bottom: 1em;
  color: #dee2e6;
  background: red;
}
nsarang commented 1 month ago

My apologies on the confusion. I jumped straight into the fact that the order of "/-- scss:rules --/" in bootstrap-dark.min.css is incorrect.

mcanouil commented 1 month ago

My apologies on the confusion. I jumped straight into the fact that the order of "/-- scss:rules --/" in bootstrap-dark.min.css is incorrect.

Which is true, so no need to apologise.

Thanks for the report!

cderv commented 1 month ago

Thanks for the report. It seems this is indeed wrong

and we should do same fix that was done some time ago by @dragonstyle at https://github.com/quarto-dev/quarto-cli/commit/b7a5449b210302a96952cadb5469dbf30e6db375 by using .unshift()