Modèle:Spoiler Box/styles.css

.template-spoilerbox {

   position: relative;

}

.template-spoilerbox-content {

   filter: blur( 8px );
   pointer-events: none;
   user-select: none;
   transition-property: filter;
   transition-duration: var( --transition-duration-medium );
   transition-timing-function: var( --transition-timing-function-ease );

}

.template-spoilerbox-details {

   position: absolute;
   inset: 0;
   display: grid;
   place-content: center;

}

.template-spoilerbox-summary {

   cursor: pointer;
   display: flex;
   align-items: center;
   gap: var( --space-xs );
   padding: var( --space-xs ) var( --space-md );
   border: 1px solid var( --border-color-interactive );
   border-radius: var( --border-radius-medium );
   color: var( --color-emphasized );
   font-size: var( --font-size-small );
   font-weight: var( --font-weight-medium );
   z-index: 1;

}

.template-spoilerbox-summary:hover {

   background-color: var( --background-color-button-quiet--hover );

}

.template-spoilerbox-summary:active {

   background-color: var( --background-color-button-quiet--active );

}

.template-spoilerbox-details[ open ] {

   display: none;

}

.template-spoilerbox-details[ open ] + .template-spoilerbox-content {

   filter: none;
   pointer-events: initial;
   user-select: initial;

}