Greasy Fork is available in English.
Moves compatibility and specs tables to the top and makes them compact in articles at developer.mozilla.org.
Pada tanggal
/* ==UserStyle==
@name MDN: Compat table: first and compact
@description Moves compatibility and specs tables to the top and makes them compact in articles at developer.mozilla.org.
@namespace myfonj
@version 0.1.0
@license CC0 - Public Domain
==/UserStyle== */
@-moz-document domain("developer.mozilla.org") {
/*
https://userstyles.org/styles/177139/edit
https://greasyfork.org/en/scripts/408039/versions/new
MDN: Compat table: first and compact
general structure of the article is:
article#wikiArticle
div
p
(...h2,p,h3,pre...)
h2#Specifications
table.standard-table
h2#Browser_compatibility // ← "Browser compatibility"
div.hidden // invisible "send PR" message
div // sadly, .bc-data is now wrapped in this :(
div.bc-data // ← ← ← ← ← this is it!
// there seems to be no div after this point, only H2 and UL
// so #Browser_compatibility ~ div seems to be viable selector
h2.See_also // leave on the bootm.
ul
*/
/*
pull BC table to the top
*/
article#wikiArticle {
display: flex;
flex-direction: column;
}
#Browser_compatibility,
#Browser_compatibility ~ * {
order: -2;
}
/*
return "see also" block back to the end
*/
#Browser_compatibility ~ #See_also,
#Browser_compatibility ~ #See_also ~ * {
order: 1
}
/*
but pull Specs below compat
*/
#Specifications,
#Specifications + table.standard-table {
order: -1;
}
/*
remake Specs table into condensed and reversed "list"
3 columns (Specification | Status | Comment)
e.g. https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
-> Status (badge) Specification (link) Comment
2 columns (Specification | Title)
e.g. https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Expires
-> Title Specification (link)
*/
#Specifications + .standard-table tbody {
display: flex;
flex-direction: column-reverse;
}
#Specifications + .standard-table th,
#Specifications + .standard-table td br {
display: none !important;
}
#Specifications + .standard-table td {
background-color: transparent !important;
}
#Specifications + .standard-table td,
#Specifications + .standard-table td * {
display: inline !important;
padding: 0;
border: none !important;
box-shadow: none !important;
}
#Specifications + .standard-table td:nth-child(1) small {
padding-left: 1ch;
}
/* Status "badge" or Title, move to left */
#Specifications + .standard-table td:nth-child(2) {
float: left;
clear: left;
padding-right: 0.5ch;
background-color: #fff;
white-space: nowrap;
}
/*
Status badge is in three columns table [class^="spec-"]
for hover-expand effect it's parent cell should have fixed width
this is unfortunate and will break things if there is three columns spec table
with anything other than status in the middle.
Delete if necessary.
*/
#Specifications + .standard-table td:nth-child(2):nth-last-child(2) {
width: 3em;
}
/*
Shrink status "badges" to abbreviations that are already made by ::before
expand text on hover. In order to not push adjacent text see previous ruleset.
*/
#Specifications + .standard-table td:nth-child(2) [class^="spec-"] {
width: 2em;
background-color: #eeeeee !important;
font-size: 0;
position: relative;
z-index: 1;
}
#Specifications + .standard-table td:nth-child(2) [class^="spec-"]:hover {
font-size: 1rem;
box-shadow: 0 0 1ch #fff;
padding-right: 1ch;
}
#Specifications + .standard-table td:nth-child(2) [class^="spec-"]::before {
margin: 0;
padding: 0;
padding-right: 1ch;
font-size: 1rem;
}
/*
"Browser compatibility" heading: compact, in table
*/
#Browser_compatibility {
margin-top: 0;
border-top: none;
padding-top: 0;
/* margin-bottom: -1rem; */
opacity: 0.6;
font-size: 1rem;
position: relative;
z-index: 1;
padding-left: 0.3rem;
}
/*
<NUKAGE>
*/
.bc-legend,
#Specifications,
#Browser_compatibility {
display: none;
}
/*
</NUKAGE>
*/
/* compact table headers - icons only */
.bc-table .bc-browsers th {
height: 2rem;
overflow: hidden;
}
/* overflowing headers on hover*/
.bc-table .bc-browsers th:hover {
overflow: visible;
}
.bc-browsers th .bc-head-txt-label {
background-color: #e9eef1;
width: auto;
height: auto;
bottom: 1em;
position: absolute;
margin: 0;
transform-origin: center left;
}
.bc-browsers th:not(:hover) .bc-head-txt-label {
color: transparent;
}
/* compact cells */
.text-content .bc-table td,
.text-content .bc-table th {
padding-top: 0;
padding-bottom: 0;
}
/* history dropdown toggle smaller */
.bc-history-link.only-icon {
border-top: none;
text-align: right
}
.ic-history {
border-right: 0.35rem solid transparent
}
.bc-has-history.active .bc-history-link {
max-width: 2em
}
/* compact table legend */
.bc-legend {
margin-top: 0;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px dotted;
}
.bc-legend dl {
display: flex;
max-width: none;
margin-bottom: 0;
}
.bc-legend dd {
margin: 0;
padding: 0 5px;
}
.bc-legend .bc-supports {
margin: 0;
min-width: 1em;
min-height: 1em;
}
.bc-legend .bc-level {
display: none
}
/* some more compacting things*/
.text-content article[id="wikiArticle"] > h2 {
position: relative;
margin-top: 1rem;
padding-top: 1rem;
border-top: 3px solid #3d7e9a;
}
.text-content dd:last-child {
margin-bottom: 0;
}
/*
Compact "Update compatibility data on GitHub"
-> "🖉" resembling "Edit in wiki" button
*/
.bc-data > .bc-github-link {
position: absolute;
right: 0;
top: 0;
padding-right: 1.2em;
text-align: right;
border: 2px solid transparent;
z-index: 10;
color: transparent;
}
.bc-data > .bc-github-link:focus,
.bc-data > .bc-github-link:hover {
text-indent: 0;
width: auto;
overflow: visible;
background-color: #333333;
color: #fff;
border-color: #3d7e9a;
padding-left: 1em;
}
.bc-data > .bc-github-link:hover::after {
content: url('data:image/svg+xml,<svg width="16" fill="%23fff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 26"><path d="M5.672 24l1.422-1.422-3.672-3.672L2 20.328V22h2v2h1.672zm8.172-14.5a.329.329 0 00-.344-.344.368.368 0 00-.266.109l-8.469 8.469a.366.366 0 00-.109.266c0 .203.141.344.344.344a.368.368 0 00.266-.109l8.469-8.469a.366.366 0 00.109-.266zM13 6.5l6.5 6.5-13 13H0v-6.5zM23.672 8c0 .531-.219 1.047-.578 1.406L20.5 12 14 5.5l2.594-2.578c.359-.375.875-.594 1.406-.594s1.047.219 1.422.594l3.672 3.656c.359.375.578.891.578 1.422z"></path></svg>');
}
.bc-data > .bc-github-link::after {
content: url('data:image/svg+xml,<svg width="16" fill="%23000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 26"><path d="M5.672 24l1.422-1.422-3.672-3.672L2 20.328V22h2v2h1.672zm8.172-14.5a.329.329 0 00-.344-.344.368.368 0 00-.266.109l-8.469 8.469a.366.366 0 00-.109.266c0 .203.141.344.344.344a.368.368 0 00.266-.109l8.469-8.469a.366.366 0 00.109-.266zM13 6.5l6.5 6.5-13 13H0v-6.5zM23.672 8c0 .531-.219 1.047-.578 1.406L20.5 12 14 5.5l2.594-2.578c.359-.375.875-.594 1.406-.594s1.047.219 1.422.594l3.672 3.656c.359.375.578.891.578 1.422z"></path></svg>');
position: absolute;
right: 0;
top: 0;
}
/*
Compact "What are we missing?" button
into '…▼' / '…▲'
*/
.scroll-to-signal {
position: absolute;
top: 1.2em;
right: 0em;
background-color: transparent !important;
padding: 0 !important;
width: 0 !important;
height: auto !important;
z-index: 11;
color: transparent !important;
font-weight: normal !important;
border: 2px solid transparent !important;
}
.scroll-to-signal::after {
content: '…▼';
position: absolute;
top: 0; right: 0;
color: black;
}
.scroll-to-signal:focus,
.scroll-to-signal:hover {
color: #fff !important;
background-color: #333333 !important;
border-color: #3d7e9a !important;
}
.scroll-to-signal:focus::after ,
.scroll-to-signal:hover::after {
color: #fff !important;
}
.bc-signal-block.open + * .scroll-to-signal::after {
content: '…▲';
}
/*
END of MDN: Compat table: first and compact
*/
}