您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
Moves main content to the top, so the header with dropdown menus lands above footer. Also compacts /play sandbox.
- /* ==UserStyle==
- @name MDN: Content first (Header to Footer)
- @description Moves main content to the top, so the header with dropdown menus lands above footer. Also compacts /play sandbox.
- @namespace myfonj
- @version 2.2.3
- @license CC0 - Public Domain
- ==/UserStyle== */
- @-moz-document domain("developer.mozilla.org") {
- /*
- https://userstyles.world/style/4280/mdn-content-first-header-to-footer
- https://gf.qytechs.cn/en/scripts/409087/versions/new
- Changelog
- 2025-05-23 (2.2.3) - fix: breadcrumbs are back at the top (right)
- 2024-03-21 (2.2.2) - compacted play even more
- 2024-03-21 (2.2.1) - fixed sidebar compacting a bit
- 2024-03-21 (2.2.0) - compacting /play sandbox and pushing up
- 2024-03-20 (2.1.1) - compact sidebar (preliminary)
- 2022-12-14 (2.1.0) - breadcrumbs back to top, compact search
- 2020-12-15 they switched to "signle column grid"
- With explicity set template-row, that matches matural source order.
- Makes no sense to me. Education? Showing off? Questions…
- You know what?
- Flexbox is fine. I think. Natural order, no need to keep track, no overlays.
- 2021-03-11 switched to shallow grid with aside and main besides each other
- 2022-03-23 new version - new structure hit production
- 2022-04-21 new structure
- */
- /*
- § move header from top to bottom above footer
- */
- .page-wrapper {
- display: flex;
- flex-direction: column;
- }
- .page-wrapper > .play.container,
- .main-wrapper {
- order: -1;
- }
- /*
- § move breadcrumbs and actions back to top
- */
- .sticky-header-container {
- position: static;
- }
- .article-actions-container {
- position: absolute;
- top: 0 !important;
- right: 0 !important;
- }
- main#content {
- margin-top: 2em;
- }
- /*
- § wider content, no right sidebar
- this basically pulls declarations originally targeting (min-width: 769px)
- */
- .main-wrapper {
- grid-template-columns: minmax(0,1fr) minmax(0,3fr);
- }
- /*
- § TOC in the right pane (hide)
- */
- .main-wrapper .toc {
- display: none !important;
- }
- /*
- § Same TOC in the left pane, above "related" (show)
- */
- .in-nav-toc {
- display: block !important;
- }
- /*
- § More compact: smaller gaps
- */
- .main-wrapper .main-content,
- .main-wrapper .sidebar,
- .main-wrapper .toc {
- top: 0;
- padding-top: 1rem;
- padding-bottom: 0rem;
- }
- .main-page-content :is(h1, h2, h3) {
- margin: .3em 0 0 0;
- }
- /*
- § fix search suggestions position
- */
- .header-search .search-results {
- top: auto;
- bottom: 2em;
- left: auto;
- right: .5em;
- }
- /*
- § wider compact single line results suggestions
- (column-reverse here would put first result closer to search input
- but keyboars arrows would feel flipped then)
- */
- .search-results {
- min-width: 60ch !important;
- width: auto !important;
- display: flex;
- flex-direction: column;
- }
- .result-item {
- display: flex;
- gap: 2ch;
- align-content: space-between;
- flex-direction: row-reverse !important;
- }
- .result-item a {
- display: contents !important;
- }
- .result-item a {
- white-space: nowrap !important;
- }
- .result-item a small {
- margin-right: auto;
- }
- .nothing-found.result-item { flex-direction: row !important}
- .nothing-found.result-item br { display: none; }
- /* no things on right*/
- .toc-container {
- display: none !important;
- }
- .main-content {
- grid-column-start: main !important;
- grid-column-end: none !important;
- }
- /*
- § super-compact sidebar nav
- */
- .sidebar-container {
- top: 0;
- max-height: 100vh;
- & > * {
- max-height: 100vh;
- & * {
- margin-block: 0 !important;
- }
- }
- }
- .document-toc-item,
- .document-toc-link.document-toc-link:not(.button) {
- madding-block: 0 !important;
- }
- .sidebar-actions {
- display: none;
- }
- .document-toc header { display: none;}
- .page-wrapper > .play.container {
- aside {
- padding: 0
- }
- &,
- &>.editors ,
- &>.preview {
- padding: 0;
- gap: 0;
- min-height: 100vh;
- }
- & summary {
- padding: 0 !important;
- height: 1.5rem !important;
- line-height: 1.5rem !important;
- }
- & .editor {
- height: calc(100% - 1.5rem) !important;
- overflow: auto !important;
- margin: 0 !important;
- }
- & .preview .place.side {
- /* for ads (?)*/
- min-height: 0 !important;
- margin: 0;
- & * {
- font-size: 12px;
- line-height: 1;
- max-height: 50px;
- width: auto;
- }
- }
- }
- }
QingJ © 2025
镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址