微件:Movetoc：修订间差异
（创建页面，内容为“<script> var toc = document.getElementById("toc"); var wrapper = document.getElementById("mw-wrapper"); var tocout = document.createElement("div"); tocout.id = "tocout"; wrapper.appendChild(tocout); var toctitle = document.createElement("div"); toctitle.innerHTML = "<i class='md-lg' style='margin-left:-2px;font-size:20px;'>list</i>目录"; toctitle.id = "toctitle"; tocout.appendChild(toctitle); tocout.appendChild(toc); </script> <style> #toctitle{ d…”） |
无编辑摘要 标签：已被回退 |
||
| 第1行： | 第1行： | ||
<style> | |||
.container { | |||
display: flex; | |||
justify-content: center; | |||
flex-direction: column; /* Stack children vertically */ | |||
align-items: center; /* Center children horizontally */ | |||
width: 100%; | |||
max-width: 600px; /* Adjust width as needed */ | |||
margin: 0 auto; /* Center container horizontally */ | |||
padding: 20px; | |||
border: 1px solid #ccc; | |||
border-radius: 15px; | |||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); | |||
} | |||
</style> | |||
<script> | <script> | ||
var toc = document.getElementById("toc"); | var toc = document.getElementById("toc"); | ||
2025年3月1日 (六) 05:01的版本
<style> .container {
display: flex; justify-content: center; flex-direction: column; /* Stack children vertically */ align-items: center; /* Center children horizontally */ width: 100%; max-width: 600px; /* Adjust width as needed */ margin: 0 auto; /* Center container horizontally */ padding: 20px; border: 1px solid #ccc; border-radius: 15px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
} </style> <script> var toc = document.getElementById("toc"); var wrapper = document.getElementById("mw-wrapper"); var tocout = document.createElement("div"); tocout.id = "tocout"; wrapper.appendChild(tocout); var toctitle = document.createElement("div"); toctitle.innerHTML = "list目录"; toctitle.id = "toctitle"; tocout.appendChild(toctitle); tocout.appendChild(toc); </script> <style> #toctitle{ display: block;
width: 15px;
margin-top: 1em; border-radius: 4px; height: fit-content; padding: 5px;
background: rgba(255,255,255,0.78); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: -2px 2px 5px rgb(0 0 0 / 10%); z-index: 1;
} #tocout{ position: fixed;
top: 60px; right: -255px;
display: flex; transition: all 0.5s cubic-bezier(0.2, 0.7, 0.5, 1);
height: fit-content;
max-height: 65%;
z-index: 1145;
} #tocout:hover{
right: 0;
} .toc{ display:block; width: 200px;
min-width: unset;
max-height: 100%; overflow-y: overlay;
overflow-x: hidden; background: rgba(255,255,255,0.78); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transition: box-shadow 0.5s cubic-bezier(0.2, 0.7, 0.5, 1); box-shadow: none;
}
#tocout:hover .toc{
box-shadow: 0 15px 20px rgb(0 0 0 / 20%);
}
.toc ul ul {
margin: 0 0 0 0.75em;}
@media screen and (max-width: 850px){
#tocout{
position: fixed;
top: 60px; right: -200px;
display: flex; transition: 1s; height: 50%;
z-index: 1145;
} } .toctitle{ display: none; } .tocnumber, .toctext{ display: inline; } </style>
