Skip to content

Commit

Permalink
Extract out styles that are shared with the HTML dev edition
Browse files Browse the repository at this point in the history 
In particular this adds the MDN margin annotation styles there. But it also deduplicates a lot of existing copy-and-pasted styles.
  • Loading branch information
@domenic
domenic committed Oct 25, 2018
1 parent a7b37be commit 5650962
Show file tree
Hide file tree
Showing 3 changed files with 337 additions and 216 deletions.
3 changes: 2 additions & 1 deletion resources.whatwg.org/standard-service-worker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,12 @@

const standardShortname = location.host.split(".")[0];

const cacheKey = "v6";
const cacheKey = "v7";
const toCache = [
location.origin + "/",
"https://resources.whatwg.org/spec.css",
"https://resources.whatwg.org/standard.css",
"https://resources.whatwg.org/standard-shared-with-dev.css",
"https://resources.whatwg.org/file-issue.js",
"https://resources.whatwg.org/commit-snapshot-shortcut-key.js",
standardShortname === "html" ? "https://resources.whatwg.org/logo.svg"
Expand Down
330 changes: 330 additions & 0 deletions resources.whatwg.org/standard-shared-with-dev.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,330 @@
/* Self-links
(More non-shared styles in standard.css) */

a.self-link {
position: absolute;
top: 0;
left: -2.5em;
width: 2em;
height: 2em;
text-align: center;
transition: opacity 0.2s;
opacity: 0.5;
text-decoration: none;
}
a.self-link:hover {
opacity: 1;
text-decoration: none;
}

h2 > a.self-link, h3 > a.self-link, h4 > a.self-link, h5 > a.self-link, h6 > a.self-link {
font-size: 83%;
color: inherit;
border-bottom: none;
}

h2 > a.self-link {
left: -4em;
}

a.self-link::before {
content: "¶";
}

h2 > a.self-link::before, h3 > a.self-link::before, h4 > a.self-link::before,
h5 > a.self-link::before, h6 > a.self-link::before {
content: "§";
}

@media (max-width: 767px) {
dd { margin-left: 0; }
/* Don't position self-link in headings off-screen */
h2 > a.self-link, h3 > a.self-link, h4 > a.self-link, h5 > a.self-link, h6 > a.self-link { left: auto; top: auto; margin-left: 0.5em; }
}

/* For output from https://github.com/tabatkins/highlighter */

c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */

/* MDN margin annotations */

.mdn {
display: block;
font: 12px sans-serif;
position: absolute;
z-index: 9;
right: 0.3em;
background-color: #eee;
margin: -26px 0 0 0;
padding: 7px 5px 5px 6px;
min-width: 140px;
box-shadow: 0 0 3px #999;
}
.mdn input {
cursor: pointer;
position: absolute;
left: 0;
top: -2px;
height: 1em;
border: none;
color: #000;
background: transparent;
margin-left: -8px;
font-size: 10px;
line-height: 1em;
}
.mdn b {
color: #fff;
background-color: #000;
font-weight: normal;
font-family: zillaslab,Palatino,"Palatino Linotype",serif;
padding: 2px 3px 0px 3px;
line-height: 1.3em;
vertical-align: top;
}
.mdn details {
display: inline;
margin-top: 1px;
}
.mdn summary a {
margin-left: -4px;
}
.nosupportdata {
font-style: italic;
margin-top: 4px;
margin-left: 8px;
padding-bottom: 8px;
}
.mdnsupport {
display: table;
margin-top: 4px;
}
.mdnsupport > span {
display: table-row;
padding: 0.2em 0;
padding-top: 0.2em;
font-size: 9.6px;
}
.mdnsupport > span > span {
display: table-cell;
padding: 0 0.5em;
vertical-align: top;
line-height: 1.5em;
}
.mdnsupport > span > span:last-child {
text-align: right;
padding: 0;
}
.mdnsupport > span.no {
color: #CCCCCC;
filter: grayscale(100%);
}
.mdnsupport > span.unknown {
color: #CCCCCC;
filter: grayscale(100%);
}
.mdnsupport > span.no::before {
opacity: 0.5;
}
.mdnsupport > span.unknown::before {
opacity: 0.5;
}
.mdnsupport > span::before {
content: "";
display: table-cell;
min-width: 1.5em;
height: 1.5em;
background: no-repeat center center;
background-image: none;
background-size: auto auto;
background-size: contain;
text-align: right;
font-size: 0.75em;
font-weight: bold;
}
.mdnsupport > .chrome::before, .mdnsupport > .chrome_android::before {
background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg);
}
.mdnsupport > .edge::before, .mdnsupport > .edge_mobile::before {
background-image: url(https://resources.whatwg.org/browser-logos/edge.svg);
}
.mdnsupport > .firefox::before, .mdnsupport > .firefox_android::before {
background-image: url(https://resources.whatwg.org/browser-logos/firefox.png);
}
.mdnsupport > .ie::before {
background-image: url(https://resources.whatwg.org/browser-logos/ie.png);
}
.mdnsupport > .opera::before, .mdnsupport > .opera_android::before {
background-image: url(https://resources.whatwg.org/browser-logos/opera.png);
}
.mdnsupport > .safari::before {
background-image: url(https://resources.whatwg.org/browser-logos/safari.png);
}
.mdnsupport > .safari_ios::before {
background-image: url(https://resources.whatwg.org/browser-logos/safari-ios.svg);
}
.mdnsupport > .samsunginternet_android::before {
background-image: url(https://resources.whatwg.org/browser-logos/samsung.png);
}
.mdnsupport > .webview_android::before {
background-image: url(https://resources.whatwg.org/browser-logos/android-webview.png);
}
.mdn div:nth-child(n+3) > b {
color: #eee;
background-color: #eee;
}

p + .mdn { margin-top: -45px; }
.mdn.before { margin-top: 2px; }
h2 + .mdn { margin: -48px 0 0 0; }
h3 + .mdn { margin: -46px 0 0 0; }
h4 + .mdn { margin: -42px 0 0 0; }
h5 + .mdn { margin: -40px 0 0 0; }
h6 + .mdn { margin: -40px 0 0 0; }

.mdn div { margin: 0; }
.mdn :link { color: #0000EE; }
.mdn :visited { color: #551A8B; }
.mdn :link:active, :visited:active { color: #FF0000; }
.mdn :link, :visited {
text-decoration: underline;
cursor: pointer;
}
.mdn.wrapped { min-width: 0px; }
.mdn.wrapped details { display: none; }
.mdn:hover { z-index: 11; }
.mdn:focus-within { z-index: 11; }

/* Caniuse support boxes */
.status { min-height: 0.6em; font: 1em sans-serif; width: 9em; padding: 0.3em; position: absolute; z-index: 8; right: 0.3em; background: #EEE; color: black; box-shadow: 0 0 3px #999; overflow: hidden; margin: -2em 0 0 0; border-collapse: initial; border-spacing: initial; }
.status:hover { z-index: 9; }
.status:focus-within { z-index: 9; }
.status.wrapped > :not(input) { display: none; }
.status > input { position: absolute; left: 0; top: 0; width: 1em; height: 1em; border: none; background: transparent; padding: 0; margin: 0; }
.status > p { font-size: 0.6em; margin: 0; padding: 0; }
.status > p + p { padding-top: 0.5em; }
.status > p > strong { margin-left: 1.5em; }
.status > .support { display: block; }
.status > .support > span { padding: 0.2em 0; display: block; display: table; }
.status > .support > span.partial { color: #666666; filter: grayscale(50%); }
.status > .support > span.no { color: #CCCCCC; filter: grayscale(100%); }
.status > .support > span.no::before { opacity: 0.5; }
.status > .support > span:first-of-type { padding-top: 0.5em; }
.status > .support > span > span { padding: 0 0.5em; display: table-cell; vertical-align: top; }
.status > .support > span > span:first-child { width: 100%; }
.status > .support > span > span:last-child { width: 100%; white-space: pre; padding: 0; }
.status > .support > span::before { content: ' '; display: table-cell; min-width: 1.5em; height: 1.5em; background: no-repeat center center; background-size: contain; text-align: right; font-size: 0.75em; font-weight: bold; }
.status > .support > .and_chr::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); }
.status > .support > .and_ff::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); }
.status > .support > .and_uc::before { background-image: url(https://resources.whatwg.org/browser-logos/uc.png); } /* UC Browser for Android */
.status > .support > .android::before { background-image: url(https://resources.whatwg.org/browser-logos/android.svg); }
.status > .support > .bb::before { background-image: url(https://resources.whatwg.org/browser-logos/bb.jpg); } /* Blackberry Browser */
.status > .support > .chrome::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); }
.status > .support > .edge::before { background-image: url(https://resources.whatwg.org/browser-logos/edge.svg); }
.status > .support > .firefox::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); }
.status > .support > .ie::before { background-image: url(https://resources.whatwg.org/browser-logos/ie.png); }
.status > .support > .ie_mob::before { background-image: url(https://resources.whatwg.org/browser-logos/ie-mobile.svg); }
.status > .support > .ios_saf::before { background-image: url(https://resources.whatwg.org/browser-logos/safari-ios.svg); }
.status > .support > .op_mini::before { background-image: url(https://resources.whatwg.org/browser-logos/opera-mini.png); }
.status > .support > .op_mob::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.png); }
.status > .support > .opera::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.png); }
.status > .support > .safari::before { background-image: url(https://resources.whatwg.org/browser-logos/safari.png); }
.status > .support > .samsung::before { background-image: url(https://resources.whatwg.org/browser-logos/samsung.png); }
.status > .caniuse { text-align: right; font-style: italic; width: 100%; }
.status > .caniuse + p { margin-top: 0.5em; border-top: 1px solid silver; }

@media (max-width: 767px) {
.status { right: -9em; }
}

/* DOM tree borders
(standard.css has more styles for DOM trees that are not shared) */

ul.domTree, ul.domTree ul {
padding: 0 0 0 1em;
margin: 0;
}

ul.domTree li {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}

ul.domTree li li {
list-style: none;
}

ul.domTree li:first-child::before {
position: absolute;
top: 0;
height: 0.6em;
left: -0.75em;
width: 0.5em;
border-style: none none solid solid;
content: '';
border-width: 0.1em;
}

ul.domTree li:not(:last-child)::after {
position: absolute;
top: 0;
bottom: -0.6em;
left: -0.75em;
width: 0.5em;
border-style: none none solid solid;
content: '';
border-width: 0.1em;
}
Loading

0 comments on commit 5650962

Please sign in to comment.