No edit summary
No edit summary
Line 1: Line 1:
.Spoiler {
.Spoiler {
   background-color: black;
   display: inline-block;
   color: black;
  cursor: pointer;
  color: white;                 /* text color when revealed */
   background-color: #111;       /* background for contrast */
   border-radius: 4px;
   border-radius: 4px;
   padding: 2px 4px;
   padding: 2px 4px;
   cursor: pointer;
   filter: blur(5px);             /* start blurred */
  display: inline-block;
   transition: filter 0.3s ease, background-color 0.3s ease;
  opacity: 0;              /* start hidden */
   transition: opacity 0.5s ease, color 0.5s ease, background-color 0.5s ease;
}
}


/* Reveal on hover */
.Spoiler:hover {
.Spoiler:hover {
   animation: reveal 0.5s forwards;
   filter: blur(0);               /* remove blur */
}
   background-color: #333;       /* optional highlight */
 
@keyframes reveal {
  from { color: black; background-color: black; opacity: 0; }
   to  { color: white; background-color: #333; opacity: 1; }
}
}

Revision as of 16:48, 15 February 2026

.Spoiler {
  display: inline-block;
  cursor: pointer;
  color: white;                  /* text color when revealed */
  background-color: #111;        /* background for contrast */
  border-radius: 4px;
  padding: 2px 4px;
  filter: blur(5px);             /* start blurred */
  transition: filter 0.3s ease, background-color 0.3s ease;
}

/* Reveal on hover */
.Spoiler:hover {
  filter: blur(0);               /* remove blur */
  background-color: #333;        /* optional highlight */
}