微件:Spoilerhide

来自PRTS
跳转到导航 跳转到搜索

<style>

 .template-spoilerhide {
   position: relative;
   overflow: hidden;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
 }
 .template-spoilerhide-content {
   filter: blur(8px);
   -webkit-filter: blur(8px);
   -ms-filter: blur(8px);
   pointer-events: none;
 }
 .template-spoilerhide-dialog {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   height: 120px;
   width: 100%;
   padding-top: 8px;
   background: linear-gradient(#E7615C 80%, transparent);
   color: white;
   text-align: center;
   font-size: 20px;
 }
 .template-spoilerhide-button {
   display: block;
   width: 160px;
   margin: auto;
   margin-top: 8px;
   border-radius: 4px;
   background-color: white;
   box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, .12);
   transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);
   color: #E7615C;
   text-align: center;
   padding: 4px;
   font-size: 20px;
   cursor: pointer;
 }
 .template-spoilerhide-button:hover,
 .template-spoilerhide-button:focus {
   background-color: #eee;
   box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, .12);
 }
 .template-spoilerhide-button:active {
   background-color: #ddd;
   box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, .12);
 }

</style> <script type="text/javascript">

   (window.RLQ = window.RLQ || []).push(["jquery", function () {
       $("#spoilerhide-button-").on("click", function() {
           $("#spoilerhide-").removeClass("template-spoilerhide");
           $("#spoilerhide-content-").removeClass("template-spoilerhide-content");
           $("#spoilerhide-dialog-").css("display", "none");
         });
   }]);

</script>