14
个编辑
无编辑摘要 |
无编辑摘要 |
||
第1行: | 第1行: | ||
/* =·=·=·=·=·=·=·=·=· RESET ·=·=·=·=·=·=·=·=·= */ | /* =·=·=·=·=·=·=·=·=· RESET ·=·=·=·=·=·=·=·=·= */ | ||
* { | * { | ||
position: static; | |||
box-sizing: border-box; | |||
padding: 0; | |||
margin: 0; | |||
} | } | ||
/* =·=·=·=·=·=·=·=·=· WHOLE ·=·=·=·=·=·=·=·=·= */ | |||
html body { | html body { | ||
font-size: 16px; | |||
} | } | ||
/* =·=·=·=·=·=·=·=·=· CLEAR USELESS ELEMENTS ·=·=·=·=·=·=·=·=·= */ | /* =·=·=·=·=·=·=·=·=· CLEAR USELESS ELEMENTS ·=·=·=·=·=·=·=·=·= */ | ||
.noprint { | .noprint { | ||
display: none; | |||
} | } | ||
/* 大于900像素的样式 */ | |||
@media screen and (min-width: 900px) { | @media screen and (min-width: 900px) { | ||
/* =========================== LAYOUTS =========================== */ | |||
/* ---- (1) mediawiki LAYOUT ---- */ | |||
.mediawiki { | |||
display: grid; | |||
grid-template-columns: 1fr 8fr 1fr; | |||
grid-template-rows: 300px auto 100px; | |||
} | |||
.mw-body { | |||
grid-column: 2 / 3; | |||
grid-row: 2 / 3; | |||
} | |||
#mw-navigation { | |||
grid-column: 2 / 3; | |||
grid-row: 1 / 2; | |||
} | |||
.mw-footer { | |||
grid-column: 2 / 3; | |||
grid-row: 3 / 4; | |||
} | |||
/* ---- (1.1) mw-navigation LAYOUT ---- */ | |||
#mw-navigation { | |||
display: grid; | |||
grid-template-columns: 1fr 8fr 1fr; | |||
grid-template-rows: 40px 200px 20px 40px; | |||
} | |||
#left-navigation, | |||
#right-navigation { | |||
box-sizing: border-box; | |||
margin: 0; | |||
} | |||
#mw-head { | |||
grid-column: 1 / 4; | |||
grid-row: 4 / 5; | |||
position: static; | |||
} | |||
#mw-head .vector-menu-tabs #ca-nstab-user { | |||
margin-left: 15px; | |||
} | |||
#mw-panel { | |||
grid-column: 2 / 3; | |||
grid-row: 2 / 3; | |||
position: static; | |||
} | |||
/* ---- (1.1.1) mw-head LAYOUT ---- */ | |||
#p-personal { | |||
position: fixed; | |||
top: 0; | |||
right: 22%; | |||
height: 37px; | |||
} | |||
#p-personal .vector-menu-content { | |||
height: 100%; | |||
} | |||
#p-personal .vector-menu-content ul { | |||
height: 100%; | |||
align-items: center; | |||
} | |||
#p-search { | |||
margin: 0; | |||
position: fixed; | |||
top: 0; | |||
right: 1.5%; | |||
} | |||
/* ---- (1.1.2) mw-panel LAYOUT ---- */ | |||
#mw-panel { | |||
margin: 0; | |||
padding: 0; | |||
width: 100%; | |||
display: grid; | |||
grid-template-columns: 200px repeat(5, minmax(100px, 1fr)); | |||
grid-template-rows: 160px 40px; | |||
} | |||
#p-logo { | |||
grid-column: 1 / 2; | |||
grid-row: 1 / 3; | |||
margin: 0; | |||
width: auto; | |||
height: auto; | |||
} | |||
#p-logo a { | |||
width: 100%; | |||
height: 100%; | |||
} | |||
#p-navigation { | |||
grid-column: 2 / 3; | |||
grid-row: 2 / 3; | |||
} | |||
#p-学习园地 { | |||
grid-column: 3 / 4; | |||
grid-row: 2 / 3; | |||
} | |||
#p-论坛百科 { | |||
grid-column: 4 / 5; | |||
grid-row: 2 / 3; | |||
} | |||
#p-维基事务 { | |||
grid-column: 5 / 6; | |||
grid-row: 2 / 3; | |||
} | |||
#p-tb { | |||
grid-column: 6 / 7; | |||
grid-row: 2 / 3; | |||
} | |||
#p-logo + .mw-portlet .vector-menu-heading { | |||
display: block; | |||
} | |||
/* .potal 能应用于所有项目,即logo、导航、学习园地、论坛百科、维基事务 和 工具 */ | |||
.portal { | |||
position: relative; | |||
margin: 0; | |||
padding: 0; | |||
} | |||
/* 每个项目里的标题 */ | |||
.portal .vector-menu-heading { | |||
margin: 0; | |||
height: 100%; | |||
} | |||
/* 标题里面的文字 */ | |||
.portal .vector-menu-heading-label { | |||
display: inline-block; | |||
padding: 5.4% 0; | |||
} | |||
/* 项目的列表 */ | |||
.portal .vector-menu-content { | |||
display: none; | |||
position: absolute; | |||
top: 100%; | |||
left: 0; | |||
width: max-content; | |||
min-width: 100px; | |||
} | |||
/* 鼠标停留在项目上时显示他的子项目 */ | |||
.portal:hover .vector-menu-content { | |||
display: block; | |||
} | |||
/* ---- (1.2) mw-body LAYOUT ---- */ | |||
#content { | |||
z-index: 0; | |||
} | |||
.mw-body { | |||
box-sizing: border-box; | |||
margin: 0; | |||
} | |||
/* =========================== STYLES =========================== */ | |||
/* --- (1) WHOLE ---- */ | |||
.mediawiki { | |||
background: none !important; | |||
} | |||
/* ---- (2) mw-body ---- */ | |||
#content { | |||
font-size: 1rem; | |||
} | |||
/* ---- (3) p-personal ---- */ | |||
#p-personal li { | |||
font-size: 0.875rem; | |||
} | |||
/* ---- (4) left-nav & right-nav --- */ | |||
/* 清除所有的背景和边框 */ | |||
.vector-menu-tabs, | |||
.vector-menu-tabs a, | |||
.vector-menu-tabs-legacy .selected, | |||
.vector-menu-tabs-legacy li a, | |||
.vector-menu-tabs-legacy li, | |||
#mw-head .vector-menu-dropdown .vector-menu-heading { | |||
background: none; | |||
border: none; | |||
} | |||
/* 全部按钮的基础样式 */ | |||
#mw-head .vector-menu-tabs .mw-list-item { | |||
box-sizing: border-box; | |||
border: 1px solid black; | |||
border-radius: 3px; | |||
border-bottom: none; | |||
border-bottom-left-radius: 0; | |||
border-bottom-right-radius: 0; | |||
/* 每隔按钮之间的间隔 */ | |||
margin-left: 7px; | |||
} | |||
.vector-menu-tabs-legacy .mw-list-item a { | |||
font-size: 0.9rem; | |||
text-align: center; | |||
} | |||
/* 未选中按钮的样式 */ | |||
.vector-menu-tabs-legacy .mw-list-item { | |||
height: 30px; | |||
margin-top: 10px; | |||
} | |||
.vector-menu-tabs-legacy .mw-list-item a { | |||
padding: 7px 11px 2px 11px; | |||
} | |||
/* (鼠标时停留的样式) */ | |||
.vector-menu-tabs-legacy .mw-list-item:hover { | |||
height: 40px; | |||
margin-top: 0; | |||
} | |||
/* 已选中按钮的样式 */ | |||
.vector-menu-tabs-legacy .selected { | |||
height: 40px; | |||
margin-top: 0; | |||
} | |||
.vector-menu-tabs-legacy .selected a { | |||
padding-top: 9px; | |||
} | |||
/* 星星按钮 */ | |||
/* (基本样式) */ | |||
.vector-menu-tabs .mw-watchlink.icon a::before { | |||
top: 16.8%; | |||
left: 23%; | |||
} | |||
.vector-menu-tabs .mw-watchlink.icon a span { | |||
visibility: hidden; /* 隐藏文字但保留渲染 */ | |||
} | |||
/* (移除监视、表示已监视时) */ | |||
#ca-unwatch { | |||
height: 40px; | |||
margin-top: 0; | |||
} | |||
/* ---- mw-panel ---- */ | |||
.portal .vector-menu-heading { | |||
font-size: 1rem; | |||
text-align: center; | |||
background: none; | |||
} | |||
.portal .vector-menu-content li { | |||
font-size: 1rem; | |||
padding: 5px 8px; | |||
} | |||
.portal:hover .vector-menu-content { | |||
background-color: red; | |||
} | |||
} | |||
/* 右边的三角形图标 | |||
.portal::after { | .portal::after { | ||
content:""; | content:""; | ||
第297行: | 第316行: | ||
mask: var(--mask); | mask: var(--mask); | ||
} */ | } */ | ||
@media screen and (max-width: 900px) { | @media screen and (max-width: 900px) { | ||
} | } |
个编辑