diff --git a/src/webpage/markdown.ts b/src/webpage/markdown.ts index e3dfb0fe..fd5aa15c 100644 --- a/src/webpage/markdown.ts +++ b/src/webpage/markdown.ts @@ -1005,8 +1005,8 @@ class MarkDown { } } static unspoil(e: any): void { - e.target.classList.remove("spoiler"); - e.target.classList.add("unspoiled"); + e.currentTarget.classList.remove("spoiler"); + e.currentTarget.classList.add("unspoiled"); } onUpdate: (upto: string, pre: boolean) => unknown = () => {}; box = new WeakRef(document.createElement("div")); diff --git a/src/webpage/style.css b/src/webpage/style.css index 3418123f..d828b40d 100644 --- a/src/webpage/style.css +++ b/src/webpage/style.css @@ -2788,19 +2788,23 @@ input[type="search"]:read-only { background: var(--spoiler-bg); color: var(--spoiler-bg); cursor: pointer; - a { - color: var(--spoiler-bg); + samp, a { + background: transparent; + color: inherit; + } + .quote { + background: var(--spoiler-bg); } } .spoiler:hover { background: var(--spoiler-hover); color: var(--spoiler-hover); + .quote { + background: var(--spoiler-hover); + } } .unspoiled { - color: var(--spoiler-text); -} -a.unspoiled { - color: var(--link) !important; + background: var(--spoiler-unspoiled); } .quote { display: inline-block; diff --git a/src/webpage/themes.css b/src/webpage/themes.css index 8eaa2262..5f6813d6 100644 --- a/src/webpage/themes.css +++ b/src/webpage/themes.css @@ -108,14 +108,13 @@ --button-bg: #babdd2; --button-hover: #9c9fbf; - --spoiler-bg: #34333a; + --spoiler-bg: #c7c6e5; --link: #283c8b; --black: #434392; --red: #ca304d; --secondary-text-soft: #211f2e; --blank-bg: #494985; - --spoiler-text: #e4e6ed; } .Dark-Accent-theme { @@ -178,8 +177,8 @@ body { --message-jump-bg: color-mix(in srgb, var(--accent-color) 20%, transparent); --code-bg: var(--secondary-bg); --code-text: var(--secondary-text); - --spoiler-text: var(--primary-text); --spoiler-hover: color-mix(in srgb, var(--spoiler-bg), var(--primary-text-soft) 10%); + --spoiler-unspoiled: color-mix(in srgb, var(--primary-text-soft) 15%, transparent); --quote-line: color-mix(in srgb, var(--primary-text-soft), transparent); --reply-line: color-mix(in srgb, var(--primary-text-soft) 20%, transparent); --reply-text: var(--primary-text-soft);