Quotes should look different from spoilers [duplicate]

Question

Spoilers are usually not quotes. But currently spoilers (after clicking) look exactly like blockquotes. So the reader has to memorize which paragraphs he clicked (spoilers), and which were already visible (quotes). Such memorization is distracting and the need for it can be avoided.

Compare (after clicking on the spoiler):

This is a spoiler.

vs

This is a quote.

A different hue with same lightness would be not so colorblind-friendly, but would be a great start. Maybe additionally a big symbolic quotation mark like on other websites would be appropriate.

Edit: This improvement should be implemented directly on the SE website. It shouldn't be reserved to users who have the time, tech skills, and access rights to install userstyles.

In the wake of this improvement, it could also be made clearer that spoilers are clickable and not only hoverable.

Answer 1

The spoiler feels very 1998. It reminds me of the <marquee> tag, but I like it.

I think the current spoiler-guard

If you saw this text before you knew this was supposed to be hidden I haven't done my job.

isn't clear what it is. At first it just looks like the poster made a mistake and left a blank box.

 

The spoiler shouldn't reveal what is under it on flyover. It should require a click.

It should be clearer that it hides some information from the UI at a first glance. Gray can would work well against black text. Stripes help indicate it is a type of "scratchable screen" -

Don't look now, but CSS 3 supports candy stripes

<style>
.spoiler {
  background:repeating-linear-gradient(
  135deg,
  #fff,
  #fff 15px,
  #eee 15px,
  #eee 20px
  );
}
</style>
<p class="spoiler">
    some spoiler text
</p>

Answer 2

As @muru notes in the comments, this can be done by user styles; small snippets of CSS which can be added to a webpage with an extension like Stylus. The first block below adds a quotation mark to blockquotes; the second one changes the background of a spoiler block to the 'scratchable screen surface' from @bobobobo's answer.

blockquote:not([class=""]):not(.spoiler) > p::before {
    content: "“";
    font-weight: bold;
    padding-right: 10px;
}

blockquote[class=""], blockquote.spoiler {
    background:repeating-linear-gradient(
        135deg,
        #fff,
        #fff 15px,
        #eee 15px,
        #eee 20px
    );
    border-left: 2px solid #bbb;
}

Results (after I clicked on the spoiler in your question):

Probably somebody with more CSS skills / better ideas than me can make something nicer. In particular, I'd like the quotation marks to become larger without increasing the height of single-line blockquotes (which is what happens if you add e.g. font-size: 2em).

The main trick here is that a blockquote element for a quote has no class attribute at all, while a spoiler has class="spoiler" before clicking and class="" after; that's the only CSS-accessible way to distinguish them.

There are other browser extensions which can do CSS enhancements; I'd avoid Stylish for reasons mentioned here.

---

If you need a CSS-based solution to disable spoilers altogether, as mentioned by @Nat in the comments, you'd need something like this:

.spoiler:not(:hover) > * {
    opacity: 1;
}
.spoiler:not(:hover) {
    color: inherit;
}

Answer 3

It looks like a new CSS update just implemented this feature request:

Blockquotes don't have the yellow background anymore, and the background for spoilers has been changed to a light gray.