MCBBS Wiki欢迎您共同参与编辑!在参与编辑之前请先阅读Wiki方针。
如果在编辑的过程中遇到了什么问题,可以去讨论板提问。
为了您能够无阻碍地参与编辑 未验证/绑定过邮箱的用户,请尽快绑定/验证。
MCBBS Wiki GitHub群组已上线!
您可以在回声洞中发表吐槽!
服务器状态监控。点击进入
本站由MCBBS用户自行搭建,与MCBBS及东银河系漫游指南(北京)科技有限公司没有从属关系。点此了解 MCBBS Wiki 不是什么>>
用户:Salt lovely/沙盒/皮肤测试:修订间差异
< 用户:Salt lovely | 沙盒
Salt lovely(留言 | 贡献) (.) |
Salt lovely(留言 | 贡献) 小 (部分CSS变量名更改,如将--themebar改为--theme-topbar-img;选中区域的样式颜色改用css变量) |
||
第5行: | 第5行: | ||
{{CSS|1= |
{{CSS|1= |
||
@charset "UTF-8"; |
@charset "UTF-8"; |
||
/* 源代码: |
/* 初版源代码:用户:Salt_lovely/Vector.scss */ |
||
/* 今版源代码:https://github.com/mcbbs-wiki/mcbbs-wiki-widget-repo */ |
|||
:root { |
:root { |
||
-- |
--theme-color: #a8cdff; |
||
--theme-bg-img: url(//mcbbs.wiki/salt/summer/body_bg.jpg); |
|||
--theme-topbar-img: url(//mcbbs.wiki/salt/summer/top_bg.png); |
|||
--bgtop: 46px; |
--bgtop: 46px; |
||
--bgleft: 20px; |
--bgleft: 20px; |
||
第16行: | 第19行: | ||
--bgcolor3: #e9cb97; |
--bgcolor3: #e9cb97; |
||
--linecolor: #cfb78e; |
--linecolor: #cfb78e; |
||
--fontfamily: sans-serif, "Microsoft Yahei", apple color emoji, |
--fontfamily: sans-serif, "Microsoft Yahei", apple color emoji, segoe ui emoji, |
||
segoe ui symbol; |
|||
--fontfamily2: "Linux Libertine", "Georgia", "Times", serif, sans-serif, |
--fontfamily2: "Linux Libertine", "Georgia", "Times", serif, sans-serif, |
||
Tahoma; |
|||
--articlefont: Lora, "Palatino Linotype", "Book Antiqua", "New York", |
--articlefont: Lora, "Palatino Linotype", "Book Antiqua", "New York", |
||
"DejaVu serif", "Source Han Serif", "Source Han Serif SC"; |
|||
--delete-linecolor: #ffe49c; |
|||
--add-linecolor: #a3d3ff; |
|||
--selection-color: lightblue; |
|||
--selection-font-color: #000; |
|||
} |
} |
||
/* 背景 */ |
/* 背景 */ |
||
body { |
body { |
||
background: var(-- |
background: var(--theme-bg-img) 0 0 no-repeat var(--theme-color); |
||
background-position: center; |
background-position: center; |
||
background-attachment: fixed; |
background-attachment: fixed; |
||
background-size: cover; |
background-size: cover; |
||
background-color: var(--themecolor); |
|||
border-top: none; |
border-top: none; |
||
font-family: var(--fontfamily); |
font-family: var(--fontfamily); |
||
} |
} |
||
body * { |
body * { |
||
border-color: var(--linecolor); |
border-color: var(--linecolor); |
||
第46行: | 第51行: | ||
top: 3rem; |
top: 3rem; |
||
padding: 0 1rem 0.5rem 1rem; |
padding: 0 1rem 0.5rem 1rem; |
||
background-color: |
background-color: rgba(255, 255, 255, 0.6); |
||
border: 1px solid #ccc; |
border: 1px solid #ccc; |
||
border-radius: 4px; |
border-radius: 4px; |
||
} |
} |
||
#mw-panel #p-logo { |
#mw-panel #p-logo { |
||
width: 10rem; |
width: 10rem; |
||
第57行: | 第61行: | ||
margin-left: -1rem; |
margin-left: -1rem; |
||
} |
} |
||
#mw-panel #p-logo a { |
#mw-panel #p-logo a { |
||
background-size: contain; |
background-size: contain; |
||
} |
} |
||
#mw-panel #p-logo + .portal { |
#mw-panel #p-logo + .portal { |
||
margin-top: 0; |
margin-top: 0; |
||
} |
} |
||
#mw-panel #p-logo + .portal .vector-menu-content { |
#mw-panel #p-logo + .portal .vector-menu-content { |
||
margin-left: 0; |
margin-left: 0; |
||
} |
} |
||
#mw-panel .portal { |
#mw-panel .portal { |
||
padding: 0.75rem 0 0 0; |
padding: 0.75rem 0 0 0; |
||
margin: 0; |
margin: 0; |
||
} |
} |
||
#mw-panel .portal:hover { |
#mw-panel .portal:hover { |
||
background-color: transparent; |
background-color: transparent; |
||
} |
} |
||
#mw-panel .portal > h1, |
#mw-panel .portal > h1, |
||
#mw-panel .portal > h2, |
#mw-panel .portal > h2, |
||
第93行: | 第91行: | ||
cursor: pointer; |
cursor: pointer; |
||
} |
} |
||
#mw-panel .portal > h1::after, |
#mw-panel .portal > h1::after, |
||
#mw-panel .portal > h2::after, |
#mw-panel .portal > h2::after, |
||
第108行: | 第105行: | ||
transition: 0.3s ease; |
transition: 0.3s ease; |
||
} |
} |
||
#mw-panel .portal > h1:hover::after, |
#mw-panel .portal > h1:hover::after, |
||
#mw-panel .portal > h2:hover::after, |
#mw-panel .portal > h2:hover::after, |
||
第117行: | 第113行: | ||
opacity: 0.9; |
opacity: 0.9; |
||
} |
} |
||
#mw-panel .portal .vector-menu-content { |
#mw-panel .portal .vector-menu-content { |
||
padding-top: 0; |
padding-top: 0; |
||
第126行: | 第121行: | ||
overflow: hidden; |
overflow: hidden; |
||
} |
} |
||
#mw-panel .portal .vector-menu-content li { |
#mw-panel .portal .vector-menu-content li { |
||
padding: 0; |
padding: 0; |
||
第132行: | 第126行: | ||
line-height: 1.2rem; |
line-height: 1.2rem; |
||
} |
} |
||
#mw-panel .portal .vector-menu-content li a { |
#mw-panel .portal .vector-menu-content li a { |
||
width: 100%; |
width: 100%; |
||
display: inline-block; |
display: inline-block; |
||
} |
} |
||
#mw-panel .portal.salt-close > h1::after, |
#mw-panel .portal.salt-close > h1::after, |
||
#mw-panel .portal.salt-close > h2::after, |
#mw-panel .portal.salt-close > h2::after, |
||
第146行: | 第138行: | ||
content: "点击展开"; |
content: "点击展开"; |
||
} |
} |
||
#mw-panel .portal.salt-close .vector-menu-content { |
#mw-panel .portal.salt-close .vector-menu-content { |
||
max-height: 0px; |
max-height: 0px; |
||
/*overflow: hidden;*/ |
|||
} |
} |
||
#mw-panel .portal.salt-open > h1::after, |
#mw-panel .portal.salt-open > h1::after, |
||
#mw-panel .portal.salt-open > h2::after, |
#mw-panel .portal.salt-open > h2::after, |
||
第160行: | 第149行: | ||
content: "点击收起"; |
content: "点击收起"; |
||
} |
} |
||
#mw-panel .portal.salt-open .vector-menu-content { |
#mw-panel .portal.salt-open .vector-menu-content { |
||
max-height: var(--salt-open-height, 100vh); |
max-height: var(--salt-open-height, 100vh); |
||
第171行: | 第159行: | ||
top: 0; |
top: 0; |
||
right: 0; |
right: 0; |
||
height: |
height: 2.5rem; |
||
padding: 0.5rem 1rem; |
padding: 0.5rem 1rem; |
||
background: var(-- |
background-image: var(--theme-topbar-img); |
||
background-size: contain; |
background-size: contain; |
||
box-sizing: border-box; |
|||
opacity: 0.5; |
opacity: 0.5; |
||
font-size: 1rem; |
font-size: 1rem; |
||
transition |
transition: opacity 0.3s ease 0.5s; |
||
transition-timing-function: ease; |
|||
transition-delay: 0.5s; |
|||
} |
} |
||
#p-personal:hover { |
#p-personal:hover { |
||
opacity: 1; |
opacity: 1; |
||
transition-delay: 0s; |
transition-delay: 0s; |
||
} |
} |
||
#p-personal ul { |
#p-personal ul { |
||
float: right; |
float: right; |
||
} |
} |
||
#p-personal ul li { |
#p-personal ul li { |
||
height: 1rem; |
height: 1rem; |
||
第198行: | 第182行: | ||
line-height: 1rem; |
line-height: 1rem; |
||
} |
} |
||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
.skin-vector .ve-ui-toolbar-floating > .oo-ui-toolbar-bar { |
.skin-vector .ve-ui-toolbar-floating > .oo-ui-toolbar-bar { |
||
top: 2.5rem; |
top: 2.5rem; |
||
第206行: | 第195行: | ||
#mw-head { |
#mw-head { |
||
top: calc( |
top: calc( |
||
46px + 3rem |
|||
); |
|||
padding: 0 57px 0 69px; |
padding: 0 57px 0 69px; |
||
width: calc(100% - 126px); |
width: calc(100% - 126px); |
||
} |
} |
||
#mw-head #left-navigation, |
#mw-head #left-navigation, |
||
#mw-head #right-navigation { |
#mw-head #right-navigation { |
||
margin-top: 0rem; |
margin-top: 0rem; |
||
} |
} |
||
#mw-head #left-navigation nav, |
#mw-head #left-navigation nav, |
||
#mw-head #left-navigation div, |
#mw-head #left-navigation div, |
||
第234行: | 第222行: | ||
border-right: none; |
border-right: none; |
||
} |
} |
||
#mw-head #left-navigation li:first-child, |
#mw-head #left-navigation li:first-child, |
||
#mw-head #right-navigation li:first-child { |
#mw-head #right-navigation li:first-child { |
||
border-left: 1px solid var(--linecolor); |
border-left: 1px solid var(--linecolor); |
||
} |
} |
||
#mw-head #left-navigation li:last-child, |
#mw-head #left-navigation li:last-child, |
||
#mw-head #right-navigation li:last-child { |
#mw-head #right-navigation li:last-child { |
||
border-right: 1px solid var(--linecolor); |
border-right: 1px solid var(--linecolor); |
||
} |
} |
||
#mw-head #left-navigation ul li, |
#mw-head #left-navigation ul li, |
||
#mw-head #right-navigation ul li { |
#mw-head #right-navigation ul li { |
||
第250行: | 第235行: | ||
background-image: linear-gradient(0deg, var(--linecolor) 0%, var(--bgcolor) 20%); |
background-image: linear-gradient(0deg, var(--linecolor) 0%, var(--bgcolor) 20%); |
||
} |
} |
||
#mw-head #left-navigation ul li:hover, |
#mw-head #left-navigation ul li:hover, |
||
#mw-head #right-navigation ul li:hover { |
#mw-head #right-navigation ul li:hover { |
||
background-image: linear-gradient(0deg, var(--linecolor) 0%, var(--bgcolor) 12%); |
background-image: linear-gradient(0deg, var(--linecolor) 0%, var(--bgcolor) 12%); |
||
} |
} |
||
#mw-head #left-navigation ul li a, |
#mw-head #left-navigation ul li a, |
||
#mw-head #right-navigation ul li a { |
#mw-head #right-navigation ul li a { |
||
第262行: | 第245行: | ||
text-align: center; |
text-align: center; |
||
} |
} |
||
#mw-head #left-navigation ul li.icon a, |
#mw-head #left-navigation ul li.icon a, |
||
#mw-head #right-navigation ul li.icon a { |
#mw-head #right-navigation ul li.icon a { |
||
padding-top: 2.5rem; |
padding-top: 2.5rem; |
||
} |
} |
||
#mw-head #left-navigation ul.menu li, |
#mw-head #left-navigation ul.menu li, |
||
#mw-head #right-navigation ul.menu li { |
#mw-head #right-navigation ul.menu li { |
||
background-image: linear-gradient(0deg, var(--linecolor) 0%, var(--bgcolor) 12%); |
background-image: linear-gradient(0deg, var(--linecolor) 0%, var(--bgcolor) 12%); |
||
} |
} |
||
#mw-head #left-navigation ul.menu li:hover, |
#mw-head #left-navigation ul.menu li:hover, |
||
#mw-head #right-navigation ul.menu li:hover { |
#mw-head #right-navigation ul.menu li:hover { |
||
background-image: linear-gradient(0deg, var(--linecolor) 0%, var(--bgcolor) 6%); |
background-image: linear-gradient(0deg, var(--linecolor) 0%, var(--bgcolor) 6%); |
||
} |
} |
||
#mw-head #p-cactions .menu li { |
#mw-head #p-cactions .menu li { |
||
border: 1px solid var(--linecolor); |
border: 1px solid var(--linecolor); |
||
background-color: var(--lightcolor); |
background-color: var(--lightcolor); |
||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
} |
} |
||
第291行: | 第265行: | ||
#content { |
#content { |
||
top: calc( |
top: calc( |
||
46px + 3rem |
|||
); |
|||
min-height: 400px; |
min-height: 400px; |
||
padding: 1px 69px; |
padding: 1px 69px; |
||
第299行: | 第274行: | ||
overflow: visible; |
overflow: visible; |
||
position: relative; |
position: relative; |
||
background: url(/salt/book/left.png) left top repeat-y, url(/salt/book/right.png) right top repeat-y; |
background: url(//mcbbs.wiki/salt/book/left.png) left top repeat-y, url(//mcbbs.wiki/salt/book/right.png) right top repeat-y; |
||
background-color: var(--bgcolor); |
background-color: var(--bgcolor); |
||
border: none; |
border: none; |
||
border-width: 0; |
border-width: 0; |
||
} |
} |
||
#content::after, #content::before { |
#content::after, #content::before { |
||
content: ""; |
content: ""; |
||
第314行: | 第288行: | ||
position: absolute; |
position: absolute; |
||
} |
} |
||
#content::before { |
#content::before { |
||
top: -46px; |
top: -46px; |
||
background: url(/salt/book/left-top.png) left top no-repeat, url(/salt/book/right-top.png) right top no-repeat, url(/salt/book/top.png) top repeat-x content-box; |
background: url(//mcbbs.wiki/salt/book/left-top.png) left top no-repeat, url(//mcbbs.wiki/salt/book/right-top.png) right top no-repeat, url(//mcbbs.wiki/salt/book/top.png) top repeat-x content-box; |
||
} |
} |
||
#content::after { |
#content::after { |
||
bottom: -46px; |
bottom: -46px; |
||
background: url(/salt/book/left-bottom.png) left bottom no-repeat, url(/salt/book/right-bottom.png) right bottom no-repeat, url(/salt/book/bottom.png) bottom repeat-x content-box; |
background: url(//mcbbs.wiki/salt/book/left-bottom.png) left bottom no-repeat, url(//mcbbs.wiki/salt/book/right-bottom.png) right bottom no-repeat, url(//mcbbs.wiki/salt/book/bottom.png) bottom repeat-x content-box; |
||
} |
} |
||
第332行: | 第304行: | ||
transition: all 0.3s; |
transition: all 0.3s; |
||
} |
} |
||
#footer:hover { |
#footer:hover { |
||
/*鼠标滑过,背景变白*/ |
/*鼠标滑过,背景变白*/ |
||
第339行: | 第310行: | ||
/* 滚动公告 */ |
/* 滚动公告 */ |
||
.topsign{ |
.topsign { |
||
position: relative; |
position: relative; |
||
width: 100%; |
width: 100%; |
||
第345行: | 第316行: | ||
overflow: hidden; |
overflow: hidden; |
||
} |
} |
||
⚫ | |||
⚫ | |||
position: absolute; |
position: absolute; |
||
left: 0; |
left: 0; |
||
第364行: | 第334行: | ||
} |
} |
||
} |
} |
||
#mw-page-base, |
#mw-page-base, |
||
#mw-head-base { |
#mw-head-base { |
||
第416行: | 第385行: | ||
.diff-deletedline { |
.diff-deletedline { |
||
border-color: |
border-color: var(--delete-linecolor) !important; |
||
} |
} |
||
.diff-addedline { |
.diff-addedline { |
||
border-color: |
border-color: var(--add-linecolor) !important; |
||
} |
} |
||
第428行: | 第397行: | ||
::selection { |
::selection { |
||
background: |
background: var(--selection-color); |
||
color: |
color: var(--selection-font-color); |
||
} |
} |
||
::-moz-selection { |
::-moz-selection { |
||
background: |
background: var(--selection-color); |
||
color: |
color: var(--selection-font-color); |
||
} |
} |
||
第443行: | 第412行: | ||
} |
} |
||
. |
body.mw-special-Preferences #siteNotice { |
||
display: none; |
|||
} |
} |
||
.ve-active #bodyContent { |
.ve-active #bodyContent { |
||
background-color: #ffffff; |
|||
} |
} |
||
}} |
}} |
2022年8月11日 (四) 23:39的最新版本
新的皮肤风格测试,消除Vetor.css代码:
document.querySelector('link[href*="site.styles"]')?.remove()