用户: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) { }