(Created page with "→‎CSS placed here will be applied to all skins: .Spoiler { background-color: black; color: black; border-radius: 4px; padding: 2px 4px; cursor: pointer; display: inline-block; transition: color 0.3s ease, background-color 0.3s ease; animation: fadeOut 0.5s forwards; } .Spoiler:hover { animation: fadeIn 0.5s forwards; } @keyframes fadeIn { from { color: black; background-color: black; } to { color: white; background-color: #333; } } @keyframe...")
 
No edit summary
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
.Spoiler {
.Spoiler {
   background-color: black;
   background-color: black;
Line 7: Line 6:
   cursor: pointer;
   cursor: pointer;
   display: inline-block;
   display: inline-block;
   transition: color 0.3s ease, background-color 0.3s ease;
  opacity: 0;              /* start hidden */
  animation: fadeOut 0.5s forwards;
   transition: opacity 0.5s ease, color 0.5s ease, background-color 0.5s ease;
}
}


.Spoiler:hover {
.Spoiler:hover {
   animation: fadeIn 0.5s forwards;
   animation: reveal 0.5s forwards;
}
}


@keyframes fadeIn {
@keyframes reveal {
   from { color: black; background-color: black; }
   from { color: black; background-color: black; opacity: 0; }
   to  { color: white; background-color: #333; }
   to  { color: white; background-color: #333; opacity: 1; }
}
 
@keyframes fadeOut {
  from { color: white; background-color: #333; }
  to  { color: black; background-color: black; }
}
}

Revision as of 16:47, 15 February 2026

.Spoiler {
  background-color: black;
  color: black;
  border-radius: 4px;
  padding: 2px 4px;
  cursor: pointer;
  display: inline-block;
  opacity: 0;               /* start hidden */
  transition: opacity 0.5s ease, color 0.5s ease, background-color 0.5s ease;
}

.Spoiler:hover {
  animation: reveal 0.5s forwards;
}

@keyframes reveal {
  from { color: black; background-color: black; opacity: 0; }
  to   { color: white; background-color: #333; opacity: 1; }
}