Add a hotfix for :has() selector
This hotfix requires not using that selector at all, which worsens the experience in Chrome.
This commit is contained in:
+20
-15
@@ -16,51 +16,56 @@ details.block > summary {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.block > summary:has(h1),
|
/* details.block > summary:has(h1),
|
||||||
details.block > summary:has(h2),
|
details.block > summary:has(h2),
|
||||||
details.block > summary:has(h3),
|
details.block > summary:has(h3),
|
||||||
details.block > summary:has(h4),
|
details.block > summary:has(h4),
|
||||||
details.block > summary:has(h5),
|
details.block > summary:has(h5),
|
||||||
details.block > summary:has(h6),
|
details.block > summary:has(h6), */
|
||||||
details.block > summary[data-heading] {
|
details.block > summary[data-has~=h1],
|
||||||
|
details.block > summary[data-has~=h2],
|
||||||
|
details.block > summary[data-has~=h3],
|
||||||
|
details.block > summary[data-has~=h4],
|
||||||
|
details.block > summary[data-has~=h5],
|
||||||
|
details.block > summary[data-has~=h6] {
|
||||||
font-variant: small-caps;
|
font-variant: small-caps;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
line-height: 1.333em;
|
line-height: 1.333em;
|
||||||
padding: 0.5rem 0.75rem;
|
padding: 0.5rem 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.block > summary:has(h1),
|
/* details.block > summary:has(h1), */
|
||||||
details.block > summary[data-heading="1"] {
|
details.block > summary[data-has~=h1]{
|
||||||
font-size: 2.0rem;
|
font-size: 2.0rem;
|
||||||
background: $theme-article-heading-h1-background;
|
background: $theme-article-heading-h1-background;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.block > summary:has(h2),
|
/* details.block > summary:has(h2), */
|
||||||
details.block > summary[data-heading="2"] {
|
details.block > summary[data-has~=h2] {
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
background: $theme-article-heading-h2-background;
|
background: $theme-article-heading-h2-background;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.block > summary:has(h3),
|
/* details.block > summary:has(h3), */
|
||||||
details.block > summary[data-heading="3"] {
|
details.block > summary[data-has~=h3] {
|
||||||
font-size: 1.6667rem;
|
font-size: 1.6667rem;
|
||||||
background: $theme-article-heading-h3-background;
|
background: $theme-article-heading-h3-background;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.block > summary:has(h4),
|
/* details.block > summary:has(h4), */
|
||||||
details.block > summary[data-heading="4"] {
|
details.block > summary[data-has~=h4] {
|
||||||
font-size: 1.45rem;
|
font-size: 1.45rem;
|
||||||
background: $theme-article-heading-h4-background;
|
background: $theme-article-heading-h4-background;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.block > summary:has(h5),
|
/* details.block > summary:has(h5), */
|
||||||
details.block > summary[data-heading="5"] {
|
details.block > summary[data-has~=h5] {
|
||||||
font-size: 1.3333rem;
|
font-size: 1.3333rem;
|
||||||
background: $theme-article-heading-h5-background;
|
background: $theme-article-heading-h5-background;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.block > summary:has(h6),
|
/* details.block > summary:has(h6), */
|
||||||
details.block > summary[data-heading="6"] {
|
details.block > summary[data-has~=h6] {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
background: $theme-article-heading-h6-background;
|
background: $theme-article-heading-h6-background;
|
||||||
}
|
}
|
||||||
|
|||||||
+11
-50
@@ -546,56 +546,6 @@ class XMediaPlayer {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
async function xmr_initialize_player(el) {
|
|
||||||
|
|
||||||
let variant = el.querySelector(".variant");
|
|
||||||
{ // Variants
|
|
||||||
variant.update = function () {
|
|
||||||
// Store current state and pause.
|
|
||||||
let paused = this._media.paused;
|
|
||||||
let muted = this._media.muted;
|
|
||||||
let volume = this._media.volume;
|
|
||||||
let time = this._media.currentTime;
|
|
||||||
this._media.pause();
|
|
||||||
play_pause.update();
|
|
||||||
|
|
||||||
// Tell the this._media source to begin loading.
|
|
||||||
this._media.src = variant.value;
|
|
||||||
this._media.load();
|
|
||||||
this._media.currentTime = time;
|
|
||||||
|
|
||||||
this._media.addEventListener("canplay", () => {
|
|
||||||
this._media.currentTime = time;
|
|
||||||
this._media.volume = volume;
|
|
||||||
this._media.muted = muted;
|
|
||||||
if (paused) {
|
|
||||||
this._media.pause();
|
|
||||||
} else {
|
|
||||||
this._media.play();
|
|
||||||
}
|
|
||||||
|
|
||||||
play_pause.update();
|
|
||||||
}, {
|
|
||||||
"once": true
|
|
||||||
})
|
|
||||||
}
|
|
||||||
variant.addEventListener("input", () => { variant.update(); });
|
|
||||||
variant.addEventListener("value", () => { variant.update(); });
|
|
||||||
|
|
||||||
// Variants - Add options from available sources.
|
|
||||||
let sources = el.querySelectorAll("source");
|
|
||||||
for (let k of sources) {
|
|
||||||
let option = document.createElement("option");
|
|
||||||
option.value = k.src;
|
|
||||||
option.textContent = k.title;
|
|
||||||
variant.appendChild(option);
|
|
||||||
}
|
|
||||||
variant.value = this._media.currentSrc;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
(function () {
|
(function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
@@ -604,6 +554,17 @@ async function xmr_initialize_player(el) {
|
|||||||
document.querySelector("#header #navigation").classList.toggle("open");
|
document.querySelector("#header #navigation").classList.toggle("open");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Shims
|
||||||
|
// - :has() is missing in many browsers.
|
||||||
|
document.querySelectorAll("*").forEach((v, k) => {
|
||||||
|
let s = new Set();
|
||||||
|
for (let c of v.children) {
|
||||||
|
s.add(c.tagName.toLocaleLowerCase());
|
||||||
|
}
|
||||||
|
if (s.size > 0)
|
||||||
|
v.dataset["has"] = Array.from(s.values()).join(" ");
|
||||||
|
});
|
||||||
|
|
||||||
// Lazily load this._media
|
// Lazily load this._media
|
||||||
xmr_media_lazyload_initialize();
|
xmr_media_lazyload_initialize();
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user