diff --git a/index.html b/index.html index 46a6e3b..cea9568 100644 --- a/index.html +++ b/index.html @@ -6,11 +6,10 @@ - + - + +} + +} + +} + +} + +:root { + --mdn-bg: #EEE; + --mdn-shadow: #999; + --mdn-nosupport-text: #ccc; +} +.mdn-anno { + background: var(--mdn-bg, #EEE); + border-radius: .25em; + box-shadow: 0 0 3px var(--mdn-shadow, #999); + color: var(--text, black); + font: 1em sans-serif; + hyphens: none; + max-width: min-content; + overflow: hidden; + padding: 0.2em; + position: absolute; + right: 0.3em; + top: auto; + white-space: nowrap; + word-wrap: normal; + z-index: 8; +} +.mdn-anno.unpositioned { + display: none; +} +.mdn-anno.overlapping-main { + opacity: .2; + transition: opacity .1s; +} +.mdn-anno[open] { + opacity: 1; + z-index: 9; + min-width: 9em; +} +.mdn-anno:hover { + opacity: 1; + outline: var(--text, black) 1px solid; +} +.mdn-anno > summary { + font-weight: normal; + text-align: right; + cursor: pointer; + display: block; +} +.mdn-anno > summary > .less-than-two-engines-flag { + color: red; + padding-right: 2px; +} +.mdn-anno > summary > .all-engines-flag { + color: green; + padding-right: 2px; +} +.mdn-anno > summary > span { + 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-anno > .feature { + margin-top: 20px; +} +.mdn-anno > .feature:not(:first-of-type) { + border-top: 1px solid #999; + margin-top: 6px; + padding-top: 2px; +} +.mdn-anno > .feature > .less-than-two-engines-text { + color: red; +} +.mdn-anno > .feature > .all-engines-text { + color: green; +} +.mdn-anno > .feature > p { + font-size: .75em; + margin-top: 6px; + margin-bottom: 0; +} +.mdn-anno > .feature > p + p { + margin-top: 3px; +} +.mdn-anno > .feature > .support { + display: block; + font-size: 0.6em; + margin: 0; + padding: 0; + margin-top: 2px; +} +.mdn-anno > .feature > .support + div { + padding-top: 0.5em; +} +.mdn-anno > .feature > .support > hr { + display: block; + border: none; + border-top: 1px dotted #999; + padding: 3px 0px 0px 0px; + margin: 2px 3px 0px 3px; +} +.mdn-anno > .feature > .support > hr::before { + content: ""; +} +.mdn-anno > .feature > .support > span { + padding: 0.2em 0; + display: block; + display: table; +} +.mdn-anno > .feature > .support > span.no { + color: var(--mdn-nosupport-text); + filter: grayscale(100%); +} +.mdn-anno > .feature > .support > span.no::before { + opacity: 0.5; +} +.mdn-anno > .feature > .support > span:first-of-type { + padding-top: 0.5em; +} +.mdn-anno > .feature > .support > span > span { + padding: 0 0.5em; + display: table-cell; +} +.mdn-anno > .feature > .support > span > span:first-child { + width: 100%; +} +.mdn-anno > .feature > .support > span > span:last-child { + width: 100%; + white-space: pre; + padding: 0; +} +.mdn-anno > .feature > .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; +} +.mdn-anno > .feature > .support > .chrome_android::before { + background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); +} +.mdn-anno > .feature > .support > .firefox_android::before { + background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); +} +.mdn-anno > .feature > .support > .chrome::before { + background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); +} +.mdn-anno > .feature > .support > .edge_blink::before { + background-image: url(https://resources.whatwg.org/browser-logos/edge.svg); +} +.mdn-anno > .feature > .support > .edge::before { + background-image: url(https://resources.whatwg.org/browser-logos/edge_legacy.svg); +} +.mdn-anno > .feature > .support > .firefox::before { + background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); +} +.mdn-anno > .feature > .support > .ie::before { + background-image: url(https://resources.whatwg.org/browser-logos/ie.png); +} +.mdn-anno > .feature > .support > .safari_ios::before { + background-image: url(https://resources.whatwg.org/browser-logos/safari-ios.svg); +} +.mdn-anno > .feature > .support > .nodejs::before { + background-image: url(https://nodejs.org/static/images/favicons/favicon.ico); +} +.mdn-anno > .feature > .support > .opera_android::before { + background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); +} +.mdn-anno > .feature > .support > .opera::before { + background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); +} +.mdn-anno > .feature > .support > .safari::before { + background-image: url(https://resources.whatwg.org/browser-logos/safari.png); +} +.mdn-anno > .feature > .support > .samsunginternet_android::before { + background-image: url(https://resources.whatwg.org/browser-logos/samsung.svg); +} +.mdn-anno > .feature > .support > .webview_android::before { + background-image: url(https://resources.whatwg.org/browser-logos/android-webview.png); +} +.name-slug-mismatch { + color: red; +} +.caniuse-status:hover { + z-index: 9; +} +/* dt, li, .issue, .note, and .example are "position: relative", so to put annotation at right margin, must move to right of containing block */; +.h-entry:not(.status-LS) dt > .mdn-anno, .h-entry:not(.status-LS) li > .mdn-anno, .h-entry:not(.status-LS) .issue > .mdn-anno, .h-entry:not(.status-LS) .note > .mdn-anno, .h-entry:not(.status-LS) .example > .mdn-anno { + right: -6.7em; +} +.h-entry p + .mdn-anno { + margin-top: 0; +} + h2 + .mdn-anno.after { + margin: -48px 0 0 0; +} + h3 + .mdn-anno.after { + margin: -46px 0 0 0; +} + h4 + .mdn-anno.after { + margin: -42px 0 0 0; +} + h5 + .mdn-anno.after { + margin: -40px 0 0 0; +} + h6 + .mdn-anno.after { + margin: -40px 0 0 0; +} + +var { cursor: pointer; } +var.selected0 { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } +var.selected1 { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } +var.selected2 { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } +var.selected3 { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } +var.selected4 { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } +var.selected5 { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } +var.selected6 { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +