Skip to content

Commit

Permalink
Add Bikeshed's style-dfn-panels styles to standard.css
Browse files Browse the repository at this point in the history
This change additionally modifies a few rules from Bikeshed's styles for
integration with the dfn panels in the HTML spec.

See speced/bikeshed#1772, which turns off Bikeshed's style-dfn-panels
styles, and whatwg/html#5947, which modifies HTML's html-dfn.js script
to work with these styles.
  • Loading branch information
Andreu Botella committed Oct 1, 2020
1 parent 3a0a571 commit 46bf931
Showing 1 changed file with 49 additions and 0 deletions.
49 changes: 49 additions & 0 deletions resources.whatwg.org/standard.css
Original file line number Diff line number Diff line change
Expand Up @@ -571,3 +571,52 @@ pre > code.css, pre.highlight.lang-css {
.wpt-tests-margin.wrapped > :not(input) {
display: none;
}

/* Dfn panels */
.dfn-panel {
display: inline-block;
position: absolute;
z-index: 35;
height: auto;
width: -webkit-fit-content;
width: fit-content;
max-width: 300px;
max-height: 500px;
overflow: auto;
padding: 0.5em 0.75em;
font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
background: #ddd;
color: black;
border: outset 0.2em;
cursor: initial;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel p:not(.spec-link) { font-weight: bolder; }
.dfn-panel > b + b, .dfn-panel > * + p { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
position: fixed;
left: .5em;
bottom: 2em;
margin: 0 auto;
max-width: calc(100vw - 1.5em - .4em - .5em);
max-height: 30vh;
}

/* Elements that trigger a dfn panel when clicked.
The dfn-paneled class is specific to Bikeshed, while dfnEnabled
identifies builds of the HTML spec that support dfn panels. */
.dfn-paneled,
body.dfnEnabled dfn,
body.dfnEnabled h2[data-dfn-type],
body.dfnEnabled h3[data-dfn-type],
body.dfnEnabled h4[data-dfn-type],
body.dfnEnabled h5[data-dfn-type],
body.dfnEnabled h6[data-dfn-type] {
cursor: pointer;
}

0 comments on commit 46bf931

Please sign in to comment.