用户:Tokur233/common.css
外观
注意:在发布之后,您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5或Ctrl-R(Mac为⌘-R)
- Google Chrome:按Ctrl-Shift-R(Mac为⌘-Shift-R)
- Edge:按住Ctrl的同时单击刷新,或按Ctrl-F5。
/* =·=·=·=·=·=·=·=·=· RESET ·=·=·=·=·=·=·=·=·= */
* {
position: static;
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* =·=·=·=·=·=·=·=·=· WHOLE ·=·=·=·=·=·=·=·=·= */
html body {
font-size: 16px;
}
/* =·=·=·=·=·=·=·=·=· CLEAR USELESS ELEMENTS ·=·=·=·=·=·=·=·=·= */
#mw-page-base {
display: none;
}
/* 大于900像素的样式 */
@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;
}
#mw-head-base {
margin:0;
position:fixed;
top:0;
right:0;
width: 615px;
height: 34px;
z-index: 100;
}
/* ---- (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: -4px;
right: 22.8%;
height: 37px;
z-index: 110;
}
#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: -4px;
right: 1%;
z-index: 110 ;
}
/* ---- (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;
}
/* 目录 */
.toc {
}
/* 目录标题 */
.toc .toctitle{
}
/* 目录列表 */
#toctogglecheckbox:checked + .toctitle + ul {
}
/* =========================== STYLES =========================== */
/* --- (1) WHOLE ---- */
.mediawiki {
background: none !important;
}
/* (2) page header */
#mw-head-base {
background: #7c7c6d;
border-bottom-left-radius: 13px;
}
#p-personal .vector-menu-content .vector-menu-content-list {
}
/* 一般按钮 */
#p-personal .mw-list-item a {
color: #444;
}
/* 退出按钮 */
#p-personal #pt-logout a{
/* color: rgb(249,229,248); */
}
/* 不存在页面的按钮 */
#p-personal .vector-menu-content .vector-menu-content-list .new {
/* color: #f6f0ad; */
}
#p-search #searchform,
#p-search #searchform #simpleSearch,
#p-search #searchform #simpleSearch #searchInput {
width: 275px;
height: 26px;
}
/* ---- (3) mw-body ---- */
#content {
font-size: 1rem;
}
/* ---- (4) p-personal ---- */
#p-personal li {
font-size: 0.875rem;
}
/* ---- (5) 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:hover .vector-menu-content {
background-color: red;
}
/* 目列表里的项目 */
.portal .vector-menu-content li {
font-size: 1rem;
padding: 5px 8px;
}
}
/* 右边的三角形图标
.portal::after {
content:"";
--mask: var() no-repeat;
webkit-mask: var(--mask);
mask: var(--mask);
} */
@media screen and (max-width: 900px) {
}