Low contrast in readthedown for tabset tab hover

[sciatro]

Thanks for this fantastic R package and the themes therein.

When using rmdformats::readthedown with a{.tabset} hovering over one of the inactive tabs (i.e. to select a different tab) makes the tab link text go to such low contrast that it seems to vanish.

My CSS knowledge is very limited but to me it looks like it is set to pure white by this selector

rmdformats/inst/templates/readthedown/readthedown.css

Line 701 in 68bf3fd

#main :not(.leaflet-control) > a:hover {

Granting it is subjective and the current low contrast on :hover could be a design choice I find the apparent disappearance of my click target surprising and wonder if it might be a bug / oversight?

As a work around for anyone else who stumbles across this and has a similar reaction adding this chunk to the top of your Rmd seems to work

#main .nav-tabs li > a:hover {
    color: #9F2042;
}

That said I don't have any idea what unintended consequences doing so might have hopefully someone with more knowledge of CSS will comment on the right way to slip a late overriding change.

Whether a choice or an oversight thanks again for all the hard work on this package.

[juba]

First, thanks for taking the time to report the issue in such a detailed way, I really appreciate it.

You're right, when you hover over a tab the text color is set to white, but in the meantime the background should be set to the same color as the one of the active tab. If this is not the case it is indeed a bug. I can't reproduce it on my machine, so could you please give me the following informations ?

• what browser do you use ?
• what version of rmdformats do you use ?
• would you have a sample Rmd file with which you encounter the problem ?

Thanks in advance !

[sciatro]

Thank you for taking the time to respond.

I am using v 1.0.3 of this library in R version 4.1.1.

I just tested it in current versions of Safari, Firefox, MS Edge, Chrome, and the RStudio built in browser (all on macOS) and the behavior is the same.

Here is an Rmd which produces the bug for me:

---
title: "ReadTheDown Test"
output:
  rmdformats::readthedown
---

```{r, echo=F}

data("iris")

```


# Top Level 1 {.tabset}

Before the tabs I am using v `r packageVersion('rmdformats')` of this package on `r R.version.string`

## First

```{r}

hist(iris[, 1])

```


## Second

```{r}

hist(iris[, 2])

```


## Third

```{r}

hist(iris[, 3])

```

[sciatro]

I figured out how to take a screenshot while also hovering. This is what it looks like when I hover over 'Second' after knitting the above Rmd.

[juba]

Oh, my bad, I was mistaken tabs with pills... Of course, you are right, hovered tabs text color was unreadable.

This should now be fixed in the development version. Many thanks for the detailed report, the screenshot, and your patience !

I'm closing the issue, don't hesitate to reopen it if the problem is still here.

[sciatro]

Thanks for working on this. Amazing that you got to it in a few hours. That's impressive.

Also, TIL # Top Level 1 {.tabset .tabset-pills} which would have clearly been the better work around than shimming in the CSS I included in my initial post.