/* * colours */ :root { --color-blue: #2e51a1; --color-blue-l: #5c7abf; --color-blue-xl: #b2c3ec; --color-blue-d: #133176; --color-blue-xd: #031235; --color-grey: #7f7f7f; --color-grey-l: #b2b2b2; --color-grey-xl: #d8d8d8; --color-grey-xxl: #f0f0f0; --color-grey-d: #4c4c4c; --color-grey-xd: #4c4c4c; } /* * Fonts */ * { -webkit-box-sizing: border-box; box-sizing: border-box; } #copystatus { left: 50%; position: absolute; z-index: 100; } #copystatus div { border-radius: 1rem; border: 1px solid green; left: -50%; padding: 1rem; position: relative; white-space: nowrap; } #copystatus div::after { clear: both; content: " "; display: block; } #copystatus div.succeeded { background-color: white; border-color: black; color: black; } #copystatus div.failed { background-color: white; border-color: #f00; color: #f00; } color-samples { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; } @media (max-width: 992px) { color-samples { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); max-width: 100%; width: 100%; } } @media (max-width: 576px) { color-samples { -ms-grid-columns: auto; grid-template-columns: auto; width: 100%; max-width: 100%; } } color-samples color-sample { -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 0.5rem; border: 1px solid #CCC; display: -ms-grid; display: grid; font-family: inherit; gap: 0.5rem; grid-template-areas: "name name name hex hex hex" "name name name rgb rgb rgb" "acc acc acc acc acc acc" "lighter lighter lighter darker darker darker" "notes notes notes notes notes notes"; -ms-grid-columns: 1fr 0.5rem 1fr 0.5rem 1fr 0.5rem 1fr 0.5rem 1fr 0.5rem 1fr; grid-template-columns: repeat(6, 1fr); -ms-grid-rows: 1.5rem 0.5rem 1.5rem 0.5rem 10rem 0.5rem max-content 0.5rem max-content 0.5rem max-content; grid-template-rows: repeat(2, 1.5rem) 10rem repeat(3, -webkit-max-content); grid-template-rows: repeat(2, 1.5rem) 10rem repeat(3, max-content); padding: 1rem; width: 20rem; max-width: 318px; } @media (max-width: 992px) { color-samples color-sample { width: 100%; max-width: 100%; } } color-samples color-sample name { -ms-grid-row: 1; -ms-grid-row-span: 3; -ms-grid-column: 1; -ms-grid-column-span: 5; -ms-grid-row-align: start; align-self: start; font-size: 1.25rem; grid-area: name; } color-samples color-sample name span { cursor: pointer; } color-samples color-sample rgb { -ms-grid-row: 3; -ms-grid-column: 7; -ms-grid-column-span: 5; grid-area: rgb; white-space: nowrap; } color-samples color-sample hex { -ms-grid-row: 1; -ms-grid-column: 7; -ms-grid-column-span: 5; grid-area: hex; white-space: nowrap; } color-samples color-sample > accessibility { border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; } color-samples color-sample accessibility { -ms-grid-row: 5; -ms-grid-column: 1; -ms-grid-column-span: 11; grid-area: acc; -ms-grid-row: 3; grid-row: 3; padding: 0.5rem 0; display: -ms-grid; display: grid; gap: 0.5rem; -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); -ms-grid-rows: 2.5rem (-webkit-max-content)[2]; -ms-grid-rows: 2.5rem (max-content)[2]; grid-template-rows: 2.5rem repeat(2, -webkit-max-content); grid-template-rows: 2.5rem repeat(2, max-content); } color-samples color-sample accessibility .result { -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 0.5rem; display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); border: 1px solid #ccc; padding: 0 1rem; text-align: center; } color-samples color-sample accessibility .result.accwaa, color-samples color-sample accessibility .result.accwaaa { background-color: white; color: black; } color-samples color-sample accessibility .result.accbaa, color-samples color-sample accessibility .result.accbaaa { background-color: black; color: white; } color-samples color-sample accessibility .result span:nth-child(2) { font-size: 2rem; } color-samples color-sample accessibility .aa, color-samples color-sample accessibility .aaa { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; display: block; font-size: 0.75rem; } color-samples color-sample accessibility .acchb { -ms-grid-column: 2; grid-column: 2; } color-samples color-sample accessibility .acchb, color-samples color-sample accessibility .acchw { display: -ms-grid; display: grid; grid-tempate-columns: auto; -ms-grid-rows: (-webkit-max-content)[2]; -ms-grid-rows: (max-content)[2]; grid-template-rows: repeat(2, -webkit-max-content); grid-template-rows: repeat(2, max-content); -ms-grid-row-align: start; align-self: start; text-align: center; padding: 0; } color-samples color-sample accessibility .acchb span, color-samples color-sample accessibility .acchw span { -ms-grid-row: 1; grid-row: 1; grid-column: 1/-1; font-size: 0.9rem; } color-samples color-sample accessibility .acchb small, color-samples color-sample accessibility .acchw small { text-align: center; -ms-grid-row: 2; grid-row: 2; grid-column: 1/-1; font-size: 0.75rem; } color-samples color-sample sample-block { -ms-grid-row-align: start; align-self: start; -ms-grid-column-span: 3; grid-column: span 3; -ms-grid-row: 4; grid-row: 4; } color-samples color-sample sample-block color-pill { display: -ms-grid; display: grid; grid-gap: 0.5rem; -ms-grid-columns: 20px -webkit-max-content auto; -ms-grid-columns: 20px max-content auto; grid-template-columns: 20px -webkit-max-content auto; grid-template-columns: 20px max-content auto; } color-samples color-sample sample-block color-pill :nth-child(1) { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; border-radius: 5px; border: 1px solid #CCC; display: inline-block; height: 10px; width: 20px; } color-samples color-sample sample-block color-pill span { cursor: pointer; } color-samples color-sample sample-block color-pill span .tooltip-tc { padding: 0.5rem; width: 20rem; max-width: 318px; height: 10.5rem; display: -ms-grid; display: grid; gap: 0.5rem; -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); -ms-grid-rows: (-webkit-max-content)[3]; -ms-grid-rows: (max-content)[3]; grid-template-rows: repeat(3, -webkit-max-content); grid-template-rows: repeat(3, max-content); } color-samples color-sample sample-block color-pill span .tooltip-tc .result { -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 0.5rem; display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); border: 1px solid #ccc; padding: 0 1rem; text-align: center; } color-samples color-sample sample-block color-pill span .tooltip-tc .result.accwaa, color-samples color-sample sample-block color-pill span .tooltip-tc .result.accwaaa { background-color: white; color: black; } color-samples color-sample sample-block color-pill span .tooltip-tc .result.accbaa, color-samples color-sample sample-block color-pill span .tooltip-tc .result.accbaaa { background-color: black; color: white; } color-samples color-sample sample-block color-pill span .tooltip-tc .result span { border: none; } color-samples color-sample sample-block color-pill span .tooltip-tc .result span:nth-child(2) { font-size: 2rem; } color-samples color-sample sample-block color-pill span .tooltip-tc .aa, color-samples color-sample sample-block color-pill span .tooltip-tc .aaa { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; display: block; font-size: 0.75rem; } color-samples color-sample sample-block color-pill span .tooltip-tc .acchb { -ms-grid-column: 2; grid-column: 2; } color-samples color-sample sample-block color-pill span .tooltip-tc .acchb, color-samples color-sample sample-block color-pill span .tooltip-tc .acchw { border: none; display: block; width: 100%; -ms-grid-row-align: stretch; -ms-grid-column-align: stretch; place-self: stretch; } color-samples color-sample sample-block color-pill span .tooltip-tc .acchb span, color-samples color-sample sample-block color-pill span .tooltip-tc .acchw span { border: none; font-size: 0.9rem; width: 100%; } color-samples color-sample sample-block color-pill span .tooltip-tc .acchb span::after, color-samples color-sample sample-block color-pill span .tooltip-tc .acchb span::before, color-samples color-sample sample-block color-pill span .tooltip-tc .acchw span::after, color-samples color-sample sample-block color-pill span .tooltip-tc .acchw span::before { display: none; } color-samples color-sample sample-block color-pill span .tooltip-tc .acchb small, color-samples color-sample sample-block color-pill span .tooltip-tc .acchw small { font-size: 0.75rem; text-align: center; } color-samples color-sample notes { border-top: 1px solid #ccc; grid-column: 1/-1; padding-top: 0.5rem; } div.status-report p.heading, div.status-report td[colspan="2"] { font-size: 1.125rem; font-weight: bolder !important; grid-column: 1/-1; margin: 2rem 0 0.5rem 0; padding-top: 1.5rem !important; } div.status-report td:not([colspan="2"]) span { display: -ms-grid; display: grid; -ms-grid-columns: auto 1rem; grid-template-columns: auto 1rem; margin: 0 1rem 0 0; } div.status-report td:not([colspan="2"]) span span[class^=status]::after { height: 1rem !important; width: 1rem !important; margin-right: 1rem; } div.status-report .contain { max-width: 100%; width: 30rem; } div.status-report .contain ul { margin: 0 0 1rem 0; padding: 0; } div.status-report .contain ul li { list-style-type: none; margin: 0 0 0.25rem 0; } div.status-report .contain ul li ul { padding: 0.5rem 0 0 1rem; } div.status-report .contain ul li > span { float: right; margin: 0 1rem 0 0; width: 8rem; } div.status-report .contain ul li > span span[class^=status]::after { height: 1rem !important; width: 1rem !important; float: right; } html { font-size: 14pt; font-family: Helvetica, Arial, sans-serif; } @media (max-width: 768px) { html { font-size: 16pt; } } h1[class^=status]::after, h2[class^=status]::after, span[class^=status]::after { border-radius: 50%; border: 1px solid #CCC; content: " "; display: inline-block; height: 1.5rem; margin-left: 0.5rem; position: relative; top: 2px; width: 1.5rem; } .status-not-started::after { background-color: transparent; } .status-in-progress::after { background-color: var(--color-blue-l); } .status-complete::after { background-color: var(--color-blue); } .status-needs-review::after { background-color: orange; } .status-deprecated::after { background-color: red; } body { margin: 0; padding: 0; } body a.skip { position: absolute; left: -9999px; } body .container { display: -ms-grid; display: grid; -ms-grid-columns: auto (22rem)[2] auto; grid-template-columns: auto repeat(2, 22rem) auto; margin: 0 auto; width: 100vw; } body .container header { display: -ms-grid; display: grid; -ms-grid-rows: 1.75rem 3.5rem; grid-template-rows: 1.75rem 3.5rem; -ms-grid-column: 2; -ms-grid-column-span: 2; grid-column: 2/4; overflow: hidden; } body .container header svg { grid-column: 1/-1; grid-row: 1/-1; -ms-grid-row-align: stretch; -ms-grid-column-align: stretch; place-self: stretch; } body .container header svg text { -webkit-transform: translate(-1rem, 7.25rem); -ms-transform: translate(-1rem, 7.25rem); transform: translate(-1rem, 7.25rem); font-size: 10rem; font-weight: 1000; font-family: Helvetica, Arial, sans-serif; fill: var(--color-grey-xl); } body .container header > div { -ms-grid-row: 2; grid-row: 2; grid-column: 1/-1; display: -ms-grid; display: grid; grid-column-gap: 1rem; -ms-grid-columns: auto -webkit-max-content -webkit-max-content; -ms-grid-columns: auto max-content max-content; grid-template-columns: auto -webkit-max-content -webkit-max-content; grid-template-columns: auto max-content max-content; } body .container header > div .header-title h1 { margin: 0; padding: 0 1rem; } body .container header > div .header-title h1 a, body .container header > div .header-title h1 a:visited { border-bottom: none; color: var(--colour-black); font-family: Helvetica, Arial, sans-serif; font-size: 2.5rem; font-size: 32px; font-weight: 700; margin: 0; padding: 0; text-decoration: none; } body .container nav { background-color: var(--color-blue); -ms-grid-column: 2; -ms-grid-column-span: 2; grid-column: 2/4; display: none; } body .container nav ul { margin: 1rem 0; } body .container nav ul li { display: inline-block; margin-right: 1rem; } body .container nav a { color: white; text-decoration: none; } @media (min-width: 768px) { body .container nav { display: initial; } } body .container main { -ms-grid-row: 4; grid-row: 4; display: block; padding: 0 1rem; -ms-grid-column: 2; -ms-grid-column-span: 2; grid-column: 2/4; } @media (max-width: 768px) { body .container main { -ms-grid-row: 3; grid-row: 3; padding: 0; } } body .container main h1, body .container main h2, body .container main h3, body .container main h4, body .container main h5, body .container main h6 { -ms-grid-column: 2; -ms-grid-column-span: 2; grid-column: 2/4; } body .container main article { -ms-grid-column: 2; -ms-grid-column-span: 2; grid-column: 2/4; min-width: 0; margin-top: 2rem; } body .container main article.status-deprecated { display: none; } body .container main article .tab-group { margin: 2rem 0 1rem 0; } body .container main article .tab-group > ul { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0; padding: 0; } body .container main article .tab-group > ul li.separator { border-bottom: 1px solid var(--color-grey); border-left: 1px solid var(--color-grey); display: inline-block; margin: 0.45rem 0 0 0; width: 100%; } body .container main article .tab-group .tab-hidden { display: none; } body .container main article .tab-group [role=tab] { background-color: var(--color-white); border-left: 1px solid var(--color-grey); border-top: 1px solid var(--color-grey); border-radius: 0.5rem 0.5rem 0 0; margin: 0; display: inline; padding: 1rem 1.5rem 0.14rem 1.5rem; z-index: 2; } body .container main article .tab-group [role=tab]:last-of-type { border-right: 1px solid var(--color-grey); } body .container main article .tab-group [role=tab]:not(.selected) { background-color: var(--color-grey-xxl); border-bottom: 1px solid var(--color-grey); } body .container main article .tab-group [role=tab] span { display: block; margin: 0 0 0.5rem 0; } body .container main article .tab-group [role=tabpanel] { background-color: var(--color-white); border: 1px solid var(--color-grey); border-top: none; padding: 1rem; z-index: 1; } body .container main article .tab-group [role=tabpanel]:not(.open) { display: none; } body .container main article .tab-group [role=tabpanel] pre { background-color: var(--colour-black-5); font-size: 0.8rem; } body .container main article p.switch { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -ms-grid; display: grid; grid-gap: 0.5rem; -ms-grid-columns: -webkit-max-content auto; -ms-grid-columns: max-content auto; grid-template-columns: -webkit-max-content auto; grid-template-columns: max-content auto; } body .container main article p.switch [role=switch] { display: -ms-inline-grid; display: inline-grid; border: 1px solid #2e51a1; background-color: #e9e9ea; border-radius: 0.75rem; height: 1.5rem; width: 3rem; -webkit-transition: all 500ms; transition: all 500ms; } body .container main article p.switch [role=switch] > span { display: inline-block; background-color: white; border-radius: 50%; margin: 2%; width: calc(1.5rem - 2%); -webkit-transition: all 500ms; transition: all 500ms; } body .container main article p.switch [role=switch][aria-checked=true] { background-color: #2e51a1; } body .container main article p.switch [role=switch][aria-checked=true] > span { margin-left: calc(1.5rem - 5%); } .good-bad { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); grid-gap: 1rem; margin-bottom: 1rem; } @media (max-width: 768px) { .good-bad { -ms-grid-columns: auto; grid-template-columns: auto; -ms-grid-rows: (-webkit-max-content)[2]; -ms-grid-rows: (max-content)[2]; grid-template-rows: repeat(2, -webkit-max-content); grid-template-rows: repeat(2, max-content); } } .good-bad > fieldset { border-style: solid; border-width: 0.5rem; border-color: var(--colour-error); padding: 1.5rem; margin: 1rem 0; } .good-bad > fieldset legend { background-color: white; font-weight: bold; padding: 0 1rem; position: relative; left: -1.5rem; } .good-bad > fieldset:nth-child(1) { border-color: var(--colour-green); } .tooltip-tc.color-accessibility { display: none; } /** * prism.js default theme for JavaScript, CSS and HTML * Based on dabblet (http://dabblet.com) * @author Lea Verou */ code[class*=language-], pre[class*=language-] { color: black; background: none; text-shadow: 0 1px white; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 1em; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; line-height: 1.5; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -ms-hyphens: none; hyphens: none; } pre[class*=language-]::-moz-selection, pre[class*=language-] ::-moz-selection, code[class*=language-]::-moz-selection, code[class*=language-] ::-moz-selection { text-shadow: none; background: #b3d4fc; } pre[class*=language-]::-moz-selection, pre[class*=language-] ::-moz-selection, code[class*=language-]::-moz-selection, code[class*=language-] ::-moz-selection { text-shadow: none; background: #b3d4fc; } pre[class*=language-]::selection, pre[class*=language-] ::selection, code[class*=language-]::selection, code[class*=language-] ::selection { text-shadow: none; background: #b3d4fc; } @media print { code[class*=language-], pre[class*=language-] { text-shadow: none; } } /* Code blocks */ pre[class*=language-] { padding: 1em; margin: 0.5em 0; overflow: auto; } :not(pre) > code[class*=language-], pre[class*=language-] { background: #f5f2f0; } /* Inline code */ :not(pre) > code[class*=language-] { padding: 0.1em; border-radius: 0.3em; white-space: normal; } .token.comment, .token.prolog, .token.doctype, .token.cdata { color: slategray; } .token.punctuation { color: #999; } .token.namespace { opacity: 0.7; } .token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: #905; } .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: #690; } .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { color: #9a6e3a; /* This background color was intended by the author of this theme. */ background: hsla(0, 0%, 100%, 0.5); } .token.atrule, .token.attr-value, .token.keyword { color: #07a; } .token.function, .token.class-name { color: #DD4A68; } .token.regex, .token.important, .token.variable { color: #e90; } .token.important, .token.bold { font-weight: bold; } .token.italic { font-style: italic; } .token.entity { cursor: help; } div.code-toolbar { position: relative; } div.code-toolbar > .toolbar { position: absolute; z-index: 10; top: 0.3em; right: 0.2em; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; opacity: 0; } div.code-toolbar:hover > .toolbar { opacity: 1; } /* Separate line b/c rules are thrown out if selector is invalid. IE11 and old Edge versions don't support :focus-within. */ div.code-toolbar:focus-within > .toolbar { opacity: 1; } div.code-toolbar > .toolbar > .toolbar-item { display: inline-block; } div.code-toolbar > .toolbar > .toolbar-item > a { cursor: pointer; } div.code-toolbar > .toolbar > .toolbar-item > button { background: none; border: 0; color: inherit; font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-user-select: none; /* for button */ -moz-user-select: none; -ms-user-select: none; } div.code-toolbar > .toolbar > .toolbar-item > a, div.code-toolbar > .toolbar > .toolbar-item > button, div.code-toolbar > .toolbar > .toolbar-item > span { color: #bbb; font-size: 0.8em; padding: 0 0.5em; background: #f5f2f0; background: rgba(224, 224, 224, 0.2); -webkit-box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); border-radius: 0.5em; } div.code-toolbar > .toolbar > .toolbar-item > a:hover, div.code-toolbar > .toolbar > .toolbar-item > a:focus, div.code-toolbar > .toolbar > .toolbar-item > button:hover, div.code-toolbar > .toolbar > .toolbar-item > button:focus, div.code-toolbar > .toolbar > .toolbar-item > span:hover, div.code-toolbar > .toolbar > .toolbar-item > span:focus { color: inherit; text-decoration: none; } pre[class*=language-].line-numbers { position: relative; padding-left: 3.8em; counter-reset: linenumber; } pre[class*=language-].line-numbers > code { position: relative; white-space: inherit; } .line-numbers .line-numbers-rows { position: absolute; pointer-events: none; top: 0; font-size: 100%; left: -3.8em; width: 3em; /* works for line-numbers below 1000 lines */ letter-spacing: -1px; border-right: 1px solid #999; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .line-numbers-rows > span { display: block; counter-increment: linenumber; } .line-numbers-rows > span:before { content: counter(linenumber); color: #999; display: block; padding-right: 0.8em; text-align: right; }