From 4ead8a1396e4f87e5057d57208925a8e0b5085fe Mon Sep 17 00:00:00 2001
From: daudix <ddaudix@gmail.com>
Date: Sat, 14 Sep 2024 04:25:53 +0300
Subject: [PATCH] More pointless variables

---
 CHANGELOG.md              | 3 ++-
 sass/_external.scss       | 2 +-
 sass/_footnotes-list.scss | 2 +-
 sass/_input.scss          | 2 +-
 sass/_spoiler.scss        | 4 ++--
 sass/_variables.scss      | 3 ++-
 6 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 34da41a..4cf29c6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,7 +10,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Add `--color-opacity` CSS variable for setting global color opacity.
-- Add `--disabled` CSS variable for setting opacity of disabled elements.
+- Add `--dim-opacity` CSS variable for setting opacity of dimmed elements.
+- Add `--disabled-opacity` CSS variable for setting opacity of disabled elements.
 - Add `--hover` CSS variable for setting zoom on hover.
 - Add `external` class to comment timestamp.
 - Add `h1` with page/section title by default.
diff --git a/sass/_external.scss b/sass/_external.scss
index 7907698..f6b0f87 100644
--- a/sass/_external.scss
+++ b/sass/_external.scss
@@ -3,7 +3,7 @@ a.external::after {
 	-webkit-mask-image: var(--icon);
 	-webkit-mask-size: cover;
 	display: inline-block;
-	opacity: var(--disabled);
+	opacity: var(--dim-opacity);
 	mask-image: var(--icon);
 	mask-size: cover;
 	margin-inline-start: 0.25rem;
diff --git a/sass/_footnotes-list.scss b/sass/_footnotes-list.scss
index d362879..6aeb5f3 100644
--- a/sass/_footnotes-list.scss
+++ b/sass/_footnotes-list.scss
@@ -27,7 +27,7 @@
 
 	a + a[href*="#fr-"],
 	li:target a[href*="#fr-"] {
-		opacity: var(--disabled);
+		opacity: var(--dim-opacity);
 		background-color: var(--accent-color);
 
 		&:hover {
diff --git a/sass/_input.scss b/sass/_input.scss
index 6fd200c..ba01a40 100644
--- a/sass/_input.scss
+++ b/sass/_input.scss
@@ -16,7 +16,7 @@ input[type="color"] {
 	}
 
 	&:disabled {
-		opacity: var(--disabled);
+		opacity: var(--disabled-opacity);
 
 		&:hover {
 			cursor: not-allowed;
diff --git a/sass/_spoiler.scss b/sass/_spoiler.scss
index 6c09383..1991995 100644
--- a/sass/_spoiler.scss
+++ b/sass/_spoiler.scss
@@ -23,7 +23,7 @@ span.spoiler {
 
 img.spoiler,
 img[src*="#spoiler"] {
-	opacity: var(--disabled);
+	opacity: var(--dim-opacity);
 	clip-path: inset(0% 0% 0% 0% round var(--rounded-corner));
 	filter: blur(1rem);
 
@@ -37,7 +37,7 @@ img[src*="#spoiler"] {
 	&.solid,
 	&[src*="#solid"] {
 		clip-path: none;
-		filter: brightness(0%);
+		filter: brightness(0%) contrast(50%);
 		box-shadow: none;
 
 		&:hover,
diff --git a/sass/_variables.scss b/sass/_variables.scss
index e7b7203..f8fb3a9 100644
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@@ -65,7 +65,8 @@
 		--blur: saturate(180%) blur(0.75rem);
 		--color-opacity: 0.1;
 		--container-width: 720px;
-		--disabled: 0.6;
+		--dim-opacity: 0.8;
+		--disabled-opacity: 0.6;
 		--edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);
 		--hover: scale(1.1);
 		--rounded-corner-small: 0.5rem;