[EME] The minimal set of styles from video-working-draft.css to preserve important formatting.
This changeset reduces the styles copied in the previous changeset to the
minimal set that produces relevant^ differences.
The spec should be visually the same as before the reference to
video-working-draft.css was removed in changeset 162 (dbc92c365a21).
^ Some margins are slightly different, but this is only noticeable when side-by-side.
--- a/encrypted-media/encrypted-media.html Thu Jan 23 17:50:13 2014 -0800
+++ b/encrypted-media/encrypted-media.html Thu Jan 23 17:55:44 2014 -0800
@@ -3,122 +3,42 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Encrypted Media Extensions</title>
- <style>/* Copied from video-working-draft.css. */
- pre { margin-left: 2em; white-space: pre-wrap; }
- h2 { margin: 3em 0 1em 0; }
- h3 { margin: 2.5em 0 1em 0; }
- h4 { margin: 2.5em 0 0.75em 0; }
- h5, h6 { margin: 2.5em 0 1em; }
- h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
- h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
- p { margin: 1em 0; }
- hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
- dl, dd { margin-top: 0; margin-bottom: 0; }
- dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
- dt + dt { margin-top: 0; }
- dd dt { margin-top: 0.25em; margin-bottom: 0; }
- dd p { margin-top: 0; }
- dd dl + p { margin-top: 1em; }
- dd table + p { margin-top: 1em; }
- p + * > li, dd li { margin: 1em 0; }
+ <style>
+
dt, dfn { font-weight: bold; font-style: normal; }
- dt dfn { font-style: italic; }
- pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
- pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
- pre em { font-weight: bolder; font-style: normal; }
+
+
@media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
- var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
+
+
table { border-collapse: collapse; border-style: hidden hidden none hidden; }
table thead, table tbody { border-bottom: solid; }
- table tbody th:first-child { border-left: solid; }
- table tbody th { text-align: left; }
table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
- blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
- .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
- .matrix, .matrix td { border: none; text-align: right; }
- .matrix { margin-left: 2em; }
- .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
- .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
- .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
+
+ .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
- .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
- td > .example:only-child { margin: 0 0 0 0.1em; }
-
- .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
- img.extra { float: right; }
+
pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
+
pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
- pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
- pre.css:first-line { color: #AAAA50; }
+
+
dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #DDFFDD; }
- hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
+
dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
- dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
- dl.domintro dd p { margin: 0.5em 0; }
- dl.switch { padding-left: 2em; }
- dl.switch > dt { text-indent: -1.5em; }
+
+
dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
- dl.triple { padding: 0 0 0 1em; }
- dl.triple dt, dl.triple dd { margin: 0; display: inline }
- dl.triple dt:after { content: ':'; }
- dl.triple dd:after { content: '\A'; white-space: pre; }
- .diff-old { text-decoration: line-through; color: silver; background: transparent; }
- .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
- a .diff-new { border-bottom: 1px blue solid; }
- h2 { page-break-before: always; }
- h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
- h1 + h2, hr + h2.no-toc { page-break-before: auto; }
-
+
p > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]),
li > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]) { border-bottom: solid #9999CC; }
- div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
- div.head p { margin: 0; }
- div.head h1 { margin: 0; }
- div.head .logo { float: right; margin: 0 1em; }
- div.head .logo img { border: none } /* remove border from top image */
- div.head dl { margin: 1em 0; }
- div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }
-
- body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
- body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
- body > .toc > li > * { margin-bottom: 0.5em; }
- body > .toc > li > * > li > * { margin-bottom: 0.25em; }
- .toc, .toc li { list-style: none; }
-
- .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
- .brief li { margin: 0; padding: 0; }
- .brief li p { margin: 0; padding: 0; }
-
- .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
- .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
- .category-list li { display: inline; }
- .category-list li:not(:last-child)::after { content: ', '; }
- .category-list li > span, .category-list li > a { text-transform: lowercase; }
- .category-list li * { text-transform: none; } /* */
-
- .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
- .XXX > :first-child { margin-top: 0; }
- p .XXX { line-height: 3em; }
- .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
- .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
- .annotation :link, .annotation :visited { color: inherit; }
- .annotation :link:hover, .annotation :visited:hover { background: transparent; }
- .annotation span { border: none ! important; }
- .note { color: green; background: transparent; font-family: sans-serif; }
- .warning { color: red; background: transparent; }
- .note, .warning { font-weight: bolder; font-style: italic; }
- p.note, div.note { padding: 0.5em 2em; }
- span.note { padding: 0 2em; }
- .note p:first-child, .warning p:first-child
-
- .glyph.control { color: red; }
-
+
.domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: black; font-style: italic; border: solid 2px; background: white; padding: 0 0.25em; }
</style>
- <style>/* --- ISSUES/NOTES --- */
+ <style>
div.issue-title, div.note-title {
padding-right: 1em;
min-width: 7.5em;
--- a/encrypted-media/encrypted-media.xml Thu Jan 23 17:50:13 2014 -0800
+++ b/encrypted-media/encrypted-media.xml Thu Jan 23 17:55:44 2014 -0800
@@ -2,122 +2,42 @@
<html>
<head>
<title>Encrypted Media Extensions</title>
- <style>/* Copied from video-working-draft.css. */
- pre { margin-left: 2em; white-space: pre-wrap; }
- h2 { margin: 3em 0 1em 0; }
- h3 { margin: 2.5em 0 1em 0; }
- h4 { margin: 2.5em 0 0.75em 0; }
- h5, h6 { margin: 2.5em 0 1em; }
- h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
- h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
- p { margin: 1em 0; }
- hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
- dl, dd { margin-top: 0; margin-bottom: 0; }
- dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
- dt + dt { margin-top: 0; }
- dd dt { margin-top: 0.25em; margin-bottom: 0; }
- dd p { margin-top: 0; }
- dd dl + p { margin-top: 1em; }
- dd table + p { margin-top: 1em; }
- p + * > li, dd li { margin: 1em 0; }
+ <style><!-- Legacy formatting from video-working-draft.css. -->
+ <!-- Makes the term being defined bold. -->
dt, dfn { font-weight: bold; font-style: normal; }
- dt dfn { font-style: italic; }
- pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
- pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
- pre em { font-weight: bolder; font-style: normal; }
+
+ <!-- Makes links inside <code> orange. -->
@media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
- var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
+
+ <!-- Adds the lines in summary tables. -->
table { border-collapse: collapse; border-style: hidden hidden none hidden; }
table thead, table tbody { border-bottom: solid; }
- table tbody th:first-child { border-left: solid; }
- table tbody th { text-align: left; }
table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
- blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
- .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
- .matrix, .matrix td { border: none; text-align: right; }
- .matrix { margin-left: 2em; }
- .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
- .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
- .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
+ <!-- Adds the vertical bars and indentation for examples. -->
+ .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
- .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
- td > .example:only-child { margin: 0 0 0 0.1em; }
-
- .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
- img.extra { float: right; }
+ <!--Adds the border and gray box around IDL text. -->
pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
+ <!--Causes links in IDL text to remain black. -->
pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
- pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
- pre.css:first-line { color: #AAAA50; }
+
+ <!-- Adds the green box around attribute descriptions. -->
dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #DDFFDD; }
- hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
+ <!--Causes links for the attribute names to remain black. -->
dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
- dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
- dl.domintro dd p { margin: 0.5em 0; }
- dl.switch { padding-left: 2em; }
- dl.switch > dt { text-indent: -1.5em; }
+
+ <!-- Adds the '-> arrow in conditional steps. -->
dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
- dl.triple { padding: 0 0 0 1em; }
- dl.triple dt, dl.triple dd { margin: 0; display: inline }
- dl.triple dt:after { content: ':'; }
- dl.triple dd:after { content: '\A'; white-space: pre; }
- .diff-old { text-decoration: line-through; color: silver; background: transparent; }
- .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
- a .diff-new { border-bottom: 1px blue solid; }
- h2 { page-break-before: always; }
- h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
- h1 + h2, hr + h2.no-toc { page-break-before: auto; }
-
+ <!-- Adds underlining of non-normative <span>. -->
p > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]),
li > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]) { border-bottom: solid #9999CC; }
- div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
- div.head p { margin: 0; }
- div.head h1 { margin: 0; }
- div.head .logo { float: right; margin: 0 1em; }
- div.head .logo img { border: none } /* remove border from top image */
- div.head dl { margin: 1em 0; }
- div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }
-
- body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
- body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
- body > .toc > li > * { margin-bottom: 0.5em; }
- body > .toc > li > * > li > * { margin-bottom: 0.25em; }
- .toc, .toc li { list-style: none; }
-
- .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
- .brief li { margin: 0; padding: 0; }
- .brief li p { margin: 0; padding: 0; }
-
- .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
- .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
- .category-list li { display: inline; }
- .category-list li:not(:last-child)::after { content: ', '; }
- .category-list li > span, .category-list li > a { text-transform: lowercase; }
- .category-list li * { text-transform: none; } /* <!-- don't affect <code> nested in <a> --> */
-
- .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
- .XXX > :first-child { margin-top: 0; }
- p .XXX { line-height: 3em; }
- .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
- .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
- .annotation :link, .annotation :visited { color: inherit; }
- .annotation :link:hover, .annotation :visited:hover { background: transparent; }
- .annotation span { border: none ! important; }
- .note { color: green; background: transparent; font-family: sans-serif; }
- .warning { color: red; background: transparent; }
- .note, .warning { font-weight: bolder; font-style: italic; }
- p.note, div.note { padding: 0.5em 2em; }
- span.note { padding: 0 2em; }
- .note p:first-child, .warning p:first-child
-
- .glyph.control { color: red; }
-
+ <!-- Adds the white box containing the non-normative note for the green box around attribute descriptions. -->
.domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: black; font-style: italic; border: solid 2px; background: white; padding: 0 0.25em; }
</style>
- <style>/* --- ISSUES/NOTES --- */
+ <style><!-- ISSUES/NOTES -->
div.issue-title, div.note-title {
padding-right: 1em;
min-width: 7.5em;