themes/default/layouts/shortcodes: Generalize content warnings with disclose short code

1 files changed, 21 insertions, 98 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index 2ab840e..a080d31 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -480,10 +480,6 @@ micro-metadata-menu context-control label {
   cursor: pointer;
 }
 
-details:hover summary span {
-  text-decoration: underline;
-}
-
 a {
   color: #0149bc;
   color: var(--link);
@@ -823,60 +819,6 @@ micro-tags {
   display: block;
 }
 
-micro-card[limit] context-menu {
-  left: 0;
-}
-
-micro-card[limit] micro-metadata-name,
-micro-card[limit] micro-metadata-menu {
-  float: left;
-}
-
-micro-card[limit] micro-content > :not(micro-overlay):not(micro-metadata) {
-  opacity: 0.05;
-  pointer-events: none;
-}
-
-micro-card[limit] micro-content {
-  border-radius: 0.5rem;
-  max-height: 25rem;
-  overflow: hidden;
-  position: relative;
-}
-
-micro-card[limit] micro-overlay {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-}
-
-micro-card[limit] micro-expand label {
-  pointer-events: all;
-}
-
-[data-kind="page"] micro-card[limit] micro-thumbnail,
-[data-kind="page"] micro-card[limit] micro-content,
-[data-kind="page"] micro-card[limit] micro-content > *,
-input[type="checkbox"]:checked + micro-card[limit] micro-thumbnail,
-input[type="checkbox"]:checked + micro-card[limit] micro-content,
-input[type="checkbox"]:checked + micro-card[limit] micro-content > * {
-  max-height: 100%;
-  opacity: 1;
-  overflow: initial;
-  pointer-events: auto;
-  position: unset;
-}
-
-[data-kind="page"] micro-card[limit] micro-overlay,
-input[type="checkbox"]:checked + micro-card[limit] micro-overlay {
-  display: none;
-}
-
 history-archive h1,
 records-archive h1 {
   text-align: center;
@@ -1197,60 +1139,41 @@ micro-header footer p {
   display: inline;
 }
 
-micro-unsafe-content {
-  background: radial-gradient(#e66465, #9198e5);
-  border-radius: 0.5rem;
-  box-shadow: 0 0 3px var(--shadow);
+micro-content details[data-disclosure] summary {
   display: block;
-  opacity: 0.5;
-}
-
-micro-unsafe-content * {
-  visibility: hidden;
-  opacity: 0;
-  pointer-events: none;
-}
-
-micro-unsafe details {
-  margin-bottom: 0.5rem;
+  margin: 0 -0.25rem 0.5rem -0.25rem;
+  padding: 0.25rem;
 }
 
-micro-unsafe details svg {
-  stroke-width: 0.1rem;
-  margin-right: 0.5rem;
+micro-content details[data-disclosure] summary:after,
+micro-content details[data-disclosure][open] summary:after {
+  padding: 0 0.5rem;
+  margin: 0 0.5rem;
+  border: 2px solid;
+  border-color: #ddd;
+  border-color: var(--border-darker);
+  border-radius: 0.5rem;
+  font-variant: small-caps;
 }
 
-micro-unsafe details summary {
-  font-variant: all-small-caps;
-  letter-spacing: 0.025rem;
-  line-height: 1.25;
-  color: #8f0000;
-  color: var(--danger);
-  list-style: none;
+micro-content details[data-disclosure] summary:after {
+  content: "show";
 }
 
-micro-unsafe details summary h1 {
-  display: flex;
-  font-weight: 400;
+micro-content details[data-disclosure][open] summary:after {
+  content: "hide";
 }
 
-micro-unsafe details > summary::-webkit-details-marker {
+micro-content details[data-disclosure] summary::-webkit-details-marker {
   display: none;
 }
 
-micro-unsafe details[open] + micro-unsafe-content {
-  background: none;
-  box-shadow: none;
-  opacity: 1;
+micro-content details[data-disclosure] ~ * {
+  display: none;
 }
 
-micro-unsafe details[open] + micro-unsafe-content * {
-  transition: 1s;
-  visibility: visible;
-  opacity: 1;
-  background: none;
-  outline: none;
-  pointer-events: auto;
+micro-content details[data-disclosure][open] ~ * {
+  display: revert;
 }
 
 tab-bar {