« get me outta code hell

css: display reveal interaction border as overlay - hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
diff options
context:
space:
mode:
author(quasar) nebula <qznebula@protonmail.com>2024-02-18 16:54:20 -0400
committer(quasar) nebula <qznebula@protonmail.com>2024-02-18 16:55:12 -0400
commita4ba1bd41ca0a99e31595f6975a04e6718946984 (patch)
tree5f9ae6990d141e932e7196702f639349aa0f7b97
parentd9f4340509bc4df3f1c194dbc577fc1a1a3207c2 (diff)
css: display reveal interaction border as overlay
-rw-r--r--src/static/site6.css19
1 files changed, 16 insertions, 3 deletions
diff --git a/src/static/site6.css b/src/static/site6.css
index f709c2da..2ab577ae 100644
--- a/src/static/site6.css
+++ b/src/static/site6.css
@@ -1285,17 +1285,30 @@ img.pixelate, .pixelate img {
 }
 
 .reveal:not(.revealed) .image-outer-area > * {
+  --reveal-border-radius: 6px;
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--reveal-border-radius);
+}
+
+.reveal:not(.revealed) .image-outer-area > *::after {
+  content: "";
+  position: absolute;
   box-sizing: border-box;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
   border: 1px dotted var(--primary-color);
-  border-radius: 6px;
-  overflow: hidden;
+  border-radius: var(--reveal-border-radius);
+  pointer-events: none;
 }
 
 .reveal:not(.revealed) .image-inner-area {
   background: var(--deep-color);
 }
 
-.reveal:not(.revealed) .image-outer-area > *:hover {
+.reveal:not(.revealed) .image-outer-area > *:hover::after {
   border-style: solid;
 }