diff --git a/themes/chameleon/package.json b/themes/chameleon/package.json index 8688c1a..28e9b1e 100644 --- a/themes/chameleon/package.json +++ b/themes/chameleon/package.json @@ -9,7 +9,7 @@ "autoprefixer": "^10.0.0", "postcss": "^8.0.6", "postcss-normalize": "^10.0.0", - "sanitize.css": "^12.0.0" + "sanitize.css": "^13.0.0" }, "engines": { "node": ">= 12.13.0" diff --git a/themes/chameleon/source/css/chameleon.css b/themes/chameleon/source/css/chameleon.css index 79a9693..8a16396 100644 --- a/themes/chameleon/source/css/chameleon.css +++ b/themes/chameleon/source/css/chameleon.css @@ -2,12 +2,13 @@ /* Document * ========================================================================== */ /** - * Add border box sizing in all browsers (opinionated). + * 1. Add border box sizing in all browsers (opinionated). + * 2. Backgrounds do not repeat by default (opinionated). */ *, ::before, ::after { - box-sizing: border-box; + box-sizing: border-box; /* 1 */ } /** * 1. Add text decoration inheritance in all browsers (opinionated). @@ -21,107 +22,83 @@ /** * 1. Use the default cursor in all browsers (opinionated). * 2. Change the line height in all browsers (opinionated). - * 3. Use a 4-space tab width in all browsers (opinionated). - * 4. Remove the grey highlight on links in iOS (opinionated). - * 5. Prevent adjustments of font size after orientation changes in - * IE on Windows Phone and in iOS. - * 6. Breaks words to prevent overflow in all browsers (opinionated). + * 3. Breaks words to prevent overflow in all browsers (opinionated). + * 4. Use a 4-space tab width in all browsers (opinionated). + * 5. Remove the grey highlight on links in iOS (opinionated). + * 6. Prevent adjustments of font size after orientation changes in iOS. */ -html { +:where(:root) { cursor: default; /* 1 */ line-height: 1.5; /* 2 */ - -moz-tab-size: 4; /* 3 */ + overflow-wrap: break-word; /* 3 */ + -moz-tab-size: 4; /* 4 */ -o-tab-size: 4; - tab-size: 4; /* 3 */ - -webkit-tap-highlight-color: transparent /* 4 */; - -ms-text-size-adjust: 100%; /* 5 */ - -webkit-text-size-adjust: 100%; /* 5 */ - word-break: break-word; /* 6 */ + tab-size: 4; /* 4 */ + -webkit-tap-highlight-color: transparent; /* 5 */ + -webkit-text-size-adjust: 100%; /* 6 */ } /* Sections * ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ -body { +:where(body) { margin: 0; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Edge, Firefox, and Safari. */ -h1 { +:where(h1) { font-size: 2em; margin: 0.67em 0; } /* Grouping content * ========================================================================== */ /** - * Remove the margin on nested lists in Chrome, Edge, IE, and Safari. + * Remove the margin on nested lists in Chrome, Edge, and Safari. */ -dl dl, -dl ol, -dl ul, -ol dl, -ul dl { - margin: 0; -} -/** - * Remove the margin on nested lists in Edge 18- and IE. - */ -ol ol, -ol ul, -ul ol, -ul ul { +:where(dl, ol, ul) :where(dl, ol, ul) { margin: 0; } /** * 1. Correct the inheritance of border color in Firefox. * 2. Add the correct box sizing in Firefox. - * 3. Show the overflow in Edge 18- and IE. */ -hr { +:where(hr) { color: inherit; /* 1 */ height: 0; /* 2 */ - overflow: visible; /* 3 */ -} -/** - * Add the correct display in IE. - */ -main { - display: block; } /** * Remove the list style on navigation lists in all browsers (opinionated). */ -nav ol, -nav ul { - list-style: none; +:where(nav) :where(ol, ul) { + list-style-type: none; padding: 0; } /** * Prevent VoiceOver from ignoring list semantics in Safari (opinionated). */ -nav li::before { +:where(nav li)::before { content: "\200B"; + float: left; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. * 3. Prevent overflow of the container in all browsers (opinionated). */ -pre { +:where(pre) { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ overflow: auto; /* 3 */ - -ms-overflow-style: scrollbar; /* 3 */ } /* Text-level semantics * ========================================================================== */ /** - * Add the correct text decoration in Edge 18-, IE, and Safari. + * Add the correct text decoration in Safari. */ -abbr[title] { +:where(abbr[title]) { text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; @@ -129,24 +106,21 @@ abbr[title] { /** * Add the correct font weight in Chrome, Edge, and Safari. */ -b, -strong { +:where(b, strong) { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ -code, -kbd, -samp { +:where(code, kbd, samp) { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ -small { +:where(small) { font-size: 80%; } /* Embedded content @@ -154,32 +128,21 @@ small { /* * Change the alignment on media elements in all browsers (opinionated). */ -audio, -canvas, -iframe, -img, -svg, -video { +:where(audio, canvas, iframe, img, svg, video) { vertical-align: middle; } /** * Remove the border on iframes in all browsers (opinionated). */ -iframe { +:where(iframe) { border-style: none; } /** * Change the fill color to match the text color in all browsers (opinionated). */ -svg:not([fill]) { +:where(svg:not([fill])) { fill: currentColor; } -/** - * Hide the overflow in IE. - */ -svg:not(:root) { - overflow: hidden; -} /* Tabular data * ========================================================================== */ /** @@ -187,7 +150,7 @@ svg:not(:root) { * 2. Correct table border color inheritance in all Chrome, Edge, and Safari. * 3. Remove text indentation from table contents in Chrome, Edge, and Safari. */ -table { +:where(table) { border-collapse: collapse; /* 1 */ border-color: inherit; /* 2 */ text-indent: 0; /* 3 */ @@ -197,82 +160,40 @@ table { /** * Remove the margin on controls in Safari. */ -button, -input, -select { +:where(button, input, select) { margin: 0; } -/** - * 1. Show the overflow in IE. - * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE. - */ -button { - overflow: visible; /* 1 */ - text-transform: none; /* 2 */ -} /** * Correct the inability to style buttons in iOS and Safari. */ -button, -[type="button"], -[type="reset"], -[type="submit"] { +:where(button, [type="button" i], [type="reset" i], [type="submit" i]) { -webkit-appearance: button; } /** - * 1. Change the inconsistent appearance in all browsers (opinionated). - * 2. Correct the padding in Firefox. + * Change the inconsistent appearance in all browsers (opinionated). */ -fieldset { - border: 1px solid #a0a0a0; /* 1 */ - padding: 0.35em 0.75em 0.625em; /* 2 */ +:where(fieldset) { + border: 1px solid #a0a0a0; } /** - * Show the overflow in Edge 18- and IE. + * Add the correct vertical alignment in Chrome, Edge, and Firefox. */ -input { - overflow: visible; -} -/** - * 1. Correct the text wrapping in Edge 18- and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - */ -legend { - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - white-space: normal; /* 1 */ -} -/** - * 1. Add the correct display in Edge 18- and IE. - * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox. - */ -progress { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ -} -/** - * Remove the inheritance of text transform in Firefox. - */ -select { - text-transform: none; +:where(progress) { + vertical-align: baseline; } /** * 1. Remove the margin in Firefox and Safari. - * 2. Remove the default vertical scrollbar in IE. * 3. Change the resize direction in all browsers (opinionated). */ -textarea { +:where(textarea) { margin: 0; /* 1 */ - overflow: auto; /* 2 */ resize: vertical; /* 3 */ - resize: block; /* 3 */ } /** * 1. Correct the odd appearance in Chrome, Edge, and Safari. * 2. Correct the outline style in Safari. */ -[type="search"] { +:where([type="search" i]) { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } @@ -304,41 +225,15 @@ textarea { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } -/** - * Remove the inner border and padding of focus outlines in Firefox. - */ -::-moz-focus-inner { - border-style: none; - padding: 0; -} -/** - * Restore the focus outline styles unset by the previous rule in Firefox. - */ -:-moz-focusring { - outline: 1px dotted ButtonText; -} -/** - * Remove the additional :invalid styles in Firefox. - */ -:-moz-ui-invalid { - box-shadow: none; -} /* Interactive * ========================================================================== */ /* - * Add the correct display in Edge 18- and IE. + * Add the correct styles in Safari. */ -details { - display: block; -} -/* - * Add the correct styles in Edge 18-, IE, and Safari. - */ -dialog { +:where(dialog) { background-color: white; border: solid; color: black; - display: block; height: -moz-fit-content; height: -webkit-fit-content; height: fit-content; @@ -351,69 +246,44 @@ dialog { width: -webkit-fit-content; width: fit-content; } -dialog:not([open]) { +:where(dialog:not([open])) { display: none; } /* - * Add the correct display in all browsers. + * Add the correct display in Safari. */ -summary { +:where(details > summary:first-of-type) { display: list-item; } -/* Scripting - * ========================================================================== */ -/** - * Add the correct display in IE. - */ -template { - display: none; -} -/* User interaction - * ========================================================================== */ -/* - * Remove the tapping delay in IE 10. - */ -a, -area, -button, -input, -label, -select, -summary, -textarea, -[tabindex] { - -ms-touch-action: manipulation; -} /* Accessibility * ========================================================================== */ /** * Change the cursor on busy elements in all browsers (opinionated). */ -[aria-busy="true"] { +:where([aria-busy="true" i]) { cursor: progress; } /* * Change the cursor on control elements in all browsers (opinionated). */ -[aria-controls] { +:where([aria-controls]) { cursor: pointer; } /* * Change the cursor on disabled, not-editable, or otherwise * inoperable elements in all browsers (opinionated). */ -[aria-disabled="true"], -[disabled] { +:where([aria-disabled="true" i], [disabled]) { cursor: not-allowed; } /* * Change the display on visually hidden accessible elements * in all browsers (opinionated). */ -[aria-hidden="false"][hidden] { +:where([aria-hidden="false" i][hidden]) { display: initial; } -[aria-hidden="false"][hidden]:not(:focus) { +:where([aria-hidden="false" i][hidden]:not(:focus)) { clip: rect(0, 0, 0, 0); position: absolute; } @@ -421,10 +291,7 @@ textarea, * 1. Change the inconsistent appearance in all browsers (opinionated). * 2. Add typography inheritance in all browsers (opinionated). */ -button, -input, -select, -textarea { +:where(button, input, select, textarea) { background-color: transparent; /* 1 */ border: 1px solid WindowFrame; /* 1 */ color: inherit; /* 1 */ @@ -435,39 +302,21 @@ textarea { /** * Change the inconsistent appearance in all browsers (opinionated). */ -select { - -moz-appearance: none; +:where(select) { -webkit-appearance: none; - background: no-repeat right center / 1em; + -moz-appearance: none; + appearance: none; + background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E") no-repeat right center / 1em; border-radius: 0; padding-right: 1em; } -/** - * Change the inconsistent appearance in all browsers (opinionated). - */ -select:not([multiple]):not([size]) { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E"); -} /** * Remove the border and padding in all browsers (opinionated). */ -[type="color"], -[type="range"] { +:where([type="color" i], [type="range" i]) { border-width: 0; padding: 0; } -/** - * Change the inconsistent appearance in IE (opinionated). - */ -::-ms-expand { - display: none; -} -/** - * Correct the inconsistent appearance in IE (opinionated). - */ -:-ms-input-placeholder { - color: rgba(0, 0, 0, 0.54); -} :root { --main-bg-color: black;