R-The Backrooms同人创作站

[[div class="pi all"]]
[[div class="pi container"]]
[[a href="#container" class="pi-wrap rise"]]
[[div class="pi rise"]]
[[/div]]
[[/a]]
[[a href="###" class="pi-wrap set"]]
[[div class="pi set"]]
[[/div]]
[[/a]]
[[/div]]
[[div class="pi rating" style="background:{$ratground}"]]
[[module rate]]
[[/div]]
[[/div]]
[[module css]]
.page-rate-widget-box,
#page-title,
#footer,
#license-area,
#page-options-bottom a.btn,
#page-options-bottom-2 a.btn {
transition:all 2s;
}
.pi.rating .page-rate-widget-box {
transform:scaleY(2.5) scaleX(1.8);
background:white;
font-family:monospace,emoji;
transition:all .3s;
opacity:0.3;
font-weight:100!important;
}
.pi.rating .page-rate-widget-box:hover {
opacity:1;
}
.pi.rating {
background:#aaa;
display:flex;
justify-content:center;
align-items:center;
width:100%;
margin-left:2%;
}
.pi.container {
width:100%!important;
}
.pi.all {
padding:1em;
display:flex;
background:#fff;
}
#container:target #page-title {
color:white;
font-weight:100;
}
#container:target #license-area {
background:black;
color:white!important;
}
#container:target #footer {
background:darkgray;
color:white!important;
}
#container:target #page-options-bottom a.btn,
#container:target #page-options-bottom-2 a.btn {
background:#222;
border:1px solid white;
color:white;
font-weight:900;
}
#container:target .menu-item {
background:white;
color:black!important;
}
#container:target #side-bar {
background:#555;
color:white;
}
#container:target #side-bar:hover {
background:#000;
}
#container:target #header {
background:black;
min-width:100%;
margin:0!important;
}
#container:target #content-wrap {
background:#222;
color:white!important;
min-width:116%;
}
.pi.rise:before,
.pi.set:before {
position:absolute;
right:-250%;
top:3%;
height:70%;
width:110%;
border-radius:1%;
background:#fffa;
box-shadow:1px 1px 5px #fff3,2px 2px 5px #fff3,3px 3px 5px #fff3,5px 5px 5px #fff3,7px 7px 10px #fff3,1px 1.5px 5px #fff3,2px 1.5px 5px #fff3,3px 1.3px 5px #fff3,5px 1.5px 5px #fff3,7px 17px 10px #fff3,-1px -1px 5px #fff3,-2px -2px 5px #fff3,-3px -3px 5px #fff3,-5px -5px 5px #fff3,-7px -7px 10px #fff3;
content:'亮色';
display:flex;
justify-content:center;
align-items:center;
font-weight:900;
color:white;
}
.pi.set:before {
content:'暗色';
background:#000a;
right:250%;
box-shadow:1px 1px 5px #0003,2px 2px 5px #0003,3px 3px 5px #0003,5px 5px 5px #0003,7px 7px 10px #0003,1px 1.5px 5px #0003,2px 1.5px 5px #0003,3px 1.3px 5px #0003,5px 1.5px 5px #0003,7px 17px 10px #0003,-1px -1px 5px #0003,-2px -2px 5px #0003,-3px -3px 5px #0003,-5px -5px 5px #0003,-7px -7px 10px #0003;
}
#container:target .pi.container {
background:#333;
}
#container:target .pi-wrap.rise {
display:none;
}
.pi-wrap.set {
display:none!important;
}
#container:target .pi-wrap.set {
display:block!important;
}
// 太阳和月亮的初始值
.pi.rise {
opacity:1;
transition:all 0.5s;
}
.pi.set {
opacity:0;
transition:all 0.5s;
}
#container:target .pi.rise {
opacity:0;
}
#container:target .pi.set {
opacity:1;
}
a.pi-wrap.rise,
a.pi-wrap.set {
height:5em;
width:100%;
border-radius:1em;
display:block;
position:absolute;
top:0;
left:0;
}
.pi.container {
height:5em;
width:50%;
border-radius:1em;
display:block;
position:relative;
background:blue;
}
.pi.rise {
background:linear-gradient(to top,#ff08,#ff08),linear-gradient(to right,#ff08,#ff58);
border-radius:50%;
height:100%;
width:5em;
position:absolute;
top:0;
left:0;
}
.pi.set {
background:linear-gradient(to bottom,darkgrey,lightgrey);
border-radius:50%;
height:100%;
width:5em;
position:absolute;
right:0;
top:0;
}
#container:target blockquote {
background:black!important;
}
[[/module]]