3,389
个编辑
小
.
Salt lovely（留言 | 贡献） 小 （.） |
Salt lovely（留言 | 贡献） 小 （.） |
||
| 第1行： | 第1行： | ||
<pre>// 无边框 | <pre>$topbar-height: 1.5rem; // 顶栏高度 | ||
$topbar-padding: 0.5rem; // 顶栏高度 | |||
$top-gap: 0.5rem; // 主体与顶栏的间隙 | |||
$top-height: $topbar-height + $topbar-padding * 2; // 顶部高度 | |||
$content-bookborder: 46px; // 四周书页图片宽度 | |||
$content-top: calc( | |||
#{$content-bookborder} + #{$top-height + $top-gap} | |||
); // 主体部分高度（顶部+书页背景顶部边框） | |||
/* 源代码： 用户:Salt_lovely/Vector.scss */ | |||
// 无边框 | |||
@mixin noboder { | @mixin noboder { | ||
border: none; | border: none; | ||
| 第62行： | 第71行： | ||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
position: relative; | |||
font-size: 1rem; | font-size: 1rem; | ||
line-height: 1.3rem; | line-height: 1.3rem; | ||
cursor: pointer; | cursor: pointer; | ||
&::after { | |||
position: absolute; | |||
bottom: 0; | |||
right: 0; | |||
opacity: 0; | |||
font-size: 0.75rem; | |||
line-height: 1.3rem; | |||
transition: 0.3s ease; | |||
} | |||
&:hover::after { | |||
opacity: 0.9; | |||
} | |||
} | } | ||
.body { | .body { | ||
| 第83行： | 第105行： | ||
} | } | ||
} | } | ||
&.salt-close .body { | &.salt-close { | ||
> h1, | |||
> h2, | |||
> h3, | |||
> h4, | |||
> h5, | |||
> h6 { | |||
&::after { | |||
content: "点击展开"; | |||
} | |||
} | |||
.body { | |||
max-height: 0px; | |||
} | |||
} | } | ||
&.salt-open .body { | &.salt-open { | ||
> h1, | |||
> h2, | |||
> h3, | |||
> h4, | |||
> h5, | |||
> h6 { | |||
&::after { | |||
content: "点击收起"; | |||
} | |||
} | |||
.body { | |||
max-height: var(--salt-open-height, 100vh); | |||
} | |||
} | } | ||
} | } | ||
| 第104行： | 第150行： | ||
} | } | ||
// 主体 | // 主体 | ||
$bookborder-lefttop: url(https://s2.ax1x.com/2019/11/28/QFB2X4.png); | $bookborder-lefttop: url(https://s2.ax1x.com/2019/11/28/QFB2X4.png); | ||
| 第118行： | 第163行： | ||
#content { | #content { | ||
top: | top: $content-top; | ||
padding: 1px $content-bookborder * 1.5; | padding: 1px $content-bookborder * 1.5; | ||
margin-right: 0.5rem; | margin-right: 0.5rem; | ||
| 第157行： | 第202行： | ||
$head-right-offet: 12px; // 右侧导航栏偏移量 | $head-right-offet: 12px; // 右侧导航栏偏移量 | ||
#mw-head { | #mw-head { | ||
top: | top: $content-top; | ||
padding: 0 $content-bookborder * 1.5 - $head-right-offet 0 | padding: 0 $content-bookborder * 1.5 - $head-right-offet 0 | ||
$content-bookborder * 1.5; | $content-bookborder * 1.5; | ||
| 第184行： | 第229行： | ||
0deg, | 0deg, | ||
var(--linecolor) 0%, | var(--linecolor) 0%, | ||
var(--bgcolor) | var(--bgcolor) 20% | ||
); | ); | ||
&:hover { | &:hover { | ||
| 第190行： | 第235行： | ||
0deg, | 0deg, | ||
var(--linecolor) 0%, | var(--linecolor) 0%, | ||
var(--bgcolor) | var(--bgcolor) 12% | ||
); | ); | ||
} | } | ||
| 第211行： | 第256行： | ||
margin-right: 0; | margin-right: 0; | ||
} | } | ||
// 最顶部的信息栏 | |||
#p-personal { | #p-personal { | ||
width: 100%; | width: 100%; | ||
| 第216行： | 第262行： | ||
top: 0; | top: 0; | ||
right: 0; | right: 0; | ||
padding: | height: $topbar-height; | ||
padding: $topbar-padding $topbar-padding * 2; | |||
background: url(https://www.mcbbs.net/template/mcbbs/image/top_bg.png); | background: url(https://www.mcbbs.net/template/mcbbs/image/top_bg.png); | ||
background-size: contain; | background-size: contain; | ||