assets/css/default: Use linear gradient background on highlighting elements

For spacing instead of line-height with background-color. Fix opening/closing
multiple spoilers with adjacent (+) instead of all (~) siblings

1 files changed, 60 insertions, 21 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index e0b5118..b7840e5 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -43,7 +43,7 @@
   --hover-background: rgba(var(--foreground-rgb), 0.06);
   --link: #0149bc;
   --shadow: #00000060;
-  --spoiler: #333;
+  --spoiler: #444;
   --success-background: #d5f3c4;
   --success: #1d3c0c;
   --table-even-background: rgba(var(--foreground-rgb), 0.04);
@@ -223,46 +223,85 @@ sub {
   display: inline-block;
 }
 
-s,
-del,
-mark,
-ins {
-  padding: 0 0.15rem;
-  line-height: 1.5;
-  border-radius: 0.5rem;
-}
-
 mark {
-  background-color: #ffe699;
-  background-color: var(--warning-background);
+  background: linear-gradient(
+    to bottom,
+    transparent 10%,
+    #ffe699 10%,
+    #ffe699 90%,
+    transparent 90%
+  );
+  background: linear-gradient(
+    to bottom,
+    transparent 10%,
+    var(--warning-background) 10%,
+    var(--warning-background) 90%,
+    transparent 90%
+  );
   color: #332600;
   color: var(--warning);
 }
 
 ins {
-  background-color: #d5f3c4;
-  background-color: var(--success-background);
+  background: linear-gradient(
+    to bottom,
+    transparent 10%,
+    #d5f3c4 10%,
+    #d5f3c4 90%,
+    transparent 90%
+  );
+  background: linear-gradient(
+    to bottom,
+    transparent 10%,
+    var(--success-background) 10%,
+    var(--success-background) 90%,
+    transparent 90%
+  );
   color: #1d3c0c;
   color: var(--success);
   text-decoration: none;
 }
 
 del {
-  background-color: #fcd2cf;
-  background-color: var(--danger-background);
+  background: linear-gradient(
+    to bottom,
+    transparent 10%,
+    #fcd2cf 10%,
+    #fcd2cf 90%,
+    transparent 90%
+  );
+  background: linear-gradient(
+    to bottom,
+    transparent 10%,
+    var(--danger-background) 10%,
+    var(--danger-background) 90%,
+    transparent 90%
+  );
   color: #8f0000;
   color: var(--danger);
 }
 
 s {
-  text-decoration: none;
-  background-color: #333;
-  background-color: var(--spoiler);
+  background: linear-gradient(
+    to bottom,
+    transparent 10%,
+    #444 10%,
+    #444 90%,
+    transparent 90%
+  );
+  background: linear-gradient(
+    to bottom,
+    transparent 10%,
+    var(--spoiler) 10%,
+    var(--spoiler) 90%,
+    transparent 90%
+  );
   color: transparent;
+  text-decoration: none;
 }
 
-input[type="checkbox"]:checked ~ s {
-  background-color: inherit;
+input[type="checkbox"]:checked + s {
+  background: inherit;
   color: inherit;
 }