Replaced :is() with :where() to mitigate specificity issues

material/base.html

@@ -34,7 +34,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.82f3c0b9.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.4a1f2921.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.9204c3b2.min.css' | url }}">

src/assets/stylesheets/main/_typeset.scss

@@ -84,7 +84,7 @@ kbd {
   }
 
   // Default spacing
-  :is(ul, ol, dl, figure, blockquote, pre) {
+  :where(ul, ol, dl, figure, blockquote, pre) {
     margin: 1em 0;
   }
 
@@ -129,7 +129,7 @@ kbd {
   }
 
   // Headline on level 5-6
-  :is(h5, h6) {
+  :where(h5, h6) {
     margin: px2em(16px, 12.8px) 0;
     color: var(--md-default-fg-color--light);
     font-weight: 700;
@@ -161,7 +161,7 @@ kbd {
     }
 
     // Text link on focus/hover
-    &:is(:focus, :hover) {
+    &:where(:focus, :hover) {
       color: var(--md-accent-fg-color);
     }
 
@@ -173,7 +173,7 @@ kbd {
   }
 
   // Code block
-  :is(code, pre, kbd) {
+  :where(code, pre, kbd) {
     color: var(--md-code-fg-color);
     direction: ltr;
 
@@ -200,7 +200,7 @@ kbd {
   }
 
   // Code block in headline
-  :is(h1, h2, h3, h4, h5, h6) code {
+  :where(h1, h2, h3, h4, h5, h6) code {
     margin: initial;
     padding: initial;
     background-color: transparent;
@@ -290,7 +290,7 @@ kbd {
       position: relative;
 
       // Tooltip
-      &[title]:is(:focus, :hover)::after {
+      &[title]:where(:focus, :hover)::after {
         position: absolute;
         left: 0;
         display: inline-block;
@@ -315,7 +315,7 @@ kbd {
   }
 
   // Superscript and subscript
-  :is(sup, sub) {
+  :where(sup, sub) {
     margin-left: px2em(1px, 12.8px);
 
     // Adjust for right-to-left languages
@@ -346,7 +346,7 @@ kbd {
   }
 
   // Unordered and ordered list
-  :is(ul, ol) {
+  :where(ul, ol) {
     margin-left: px2em(10px);
     padding: 0;
 
@@ -383,7 +383,7 @@ kbd {
       }
 
       // Adjust spacing
-      :is(p, blockquote) {
+      :where(p, blockquote) {
         margin: 0.5em 0;
       }
 
@@ -393,7 +393,7 @@ kbd {
       }
 
       // Nested list
-      :is(ul, ol) {
+      :where(ul, ol) {
         margin: 0.5em 0 0.5em px2em(10px);
 
         // Adjust for right-to-left languages
@@ -417,7 +417,7 @@ kbd {
   }
 
   // Image or icon
-  :is(img, svg) {
+  :where(img, svg) {
     max-width: 100%;
     height: auto;
 
@@ -489,7 +489,7 @@ kbd {
     }
 
     // Elements in table heading and cell
-    :is(th, td) > * {
+    :where(th, td) > * {
 
       // Adjust spacing on first child
       &:first-child {
@@ -503,7 +503,7 @@ kbd {
     }
 
     // Table heading and cell
-    :is(th, td):not([align]) {
+    :where(th, td):not([align]) {
       text-align: left;
 
       // Adjust for right-to-left languages

src/assets/stylesheets/main/extensions/markdown/_admonition.scss

@@ -62,7 +62,7 @@ $admonitions: (
 
   // Admonition - note that all styles also apply to details tags, which are
   // rendered as collapsible admonitions with summary elements as titles.
-  :is(.admonition, details) {
+  :where(.admonition, details) {
     display: flow-root;
     margin: px2em(20px, 12.8px) 0;
     padding: 0 px2rem(12px);
@@ -92,7 +92,7 @@ $admonitions: (
     }
 
     // Adjust vertical spacing for nested admonitions
-    :is(.admonition, details) {
+    :where(.admonition, details) {
       margin-top: 1em;
       margin-bottom: 1em;
     }
@@ -119,7 +119,7 @@ $admonitions: (
   }
 
   // Admonition title
-  :is(.admonition-title, summary) {
+  :where(.admonition-title, summary) {
     position: relative;
     margin: 0 px2rem(-12px) 0 px2rem(-16px);
     padding: px2rem(8px) px2rem(12px) px2rem(8px) px2rem(40px);
@@ -178,12 +178,12 @@ $admonitions: (
   }
 
   // Admonition flavour
-  .md-typeset :is(.admonition, details):is(#{$flavours}) {
+  .md-typeset :where(.admonition, details):where(#{$flavours}) {
     border-color: $tint;
   }
 
   // Admonition flavour title
-  .md-typeset :is(#{$flavours}) > :is(.admonition-title, summary) {
+  .md-typeset :where(#{$flavours}) > :where(.admonition-title, summary) {
     background-color: color.adjust($tint, $alpha: -0.9);
     border-color: $tint;
 

src/assets/stylesheets/main/extensions/markdown/_footnotes.scss

@@ -61,7 +61,7 @@
         }
 
         // Show backreferences on footnote hover/target
-        &:is(:hover, :target) .footnote-backref {
+        &:where(:hover, :target) .footnote-backref {
           transform: translateX(0);
           opacity: 1;
         }

src/assets/stylesheets/main/extensions/markdown/_toc.scss

@@ -50,7 +50,7 @@
   }
 
   // Show headerlinks on parent hover
-  :is(:hover, :target) > .headerlink,
+  :where(:hover, :target) > .headerlink,
   .headerlink:focus {
     opacity: 1;
     transition:
@@ -60,7 +60,7 @@
 
   // Adjust color on parent target or focus/hover
   :target > .headerlink,
-  .headerlink:is(:focus, :hover) {
+  .headerlink:where(:focus, :hover) {
     color: var(--md-accent-fg-color);
   }
 
@@ -87,7 +87,7 @@
   }
 
   // Adjust scroll offset for headlines of level 1-3
-  :is(h1, h2, h3):target {
+  :where(h1, h2, h3):target {
     --md-scroll-offset: #{px2rem(4px)};
   }
 

src/assets/stylesheets/main/extensions/pymdownx/_critic.scss

@@ -28,7 +28,7 @@
 .md-typeset {
 
   // Deletion, addition or comment
-  :is(del, ins, .comment).critic {
+  :where(del, ins, .comment).critic {
     box-decoration-break: clone;
   }
 

src/assets/stylesheets/main/extensions/pymdownx/_details.scss

@@ -64,7 +64,7 @@
   summary {
     display: block;
     min-height: px2rem(20px);
-    padding: px2rem(8px) px2rem(36px) px2rem(8px) px2rem(40px);
+    padding-right: px2rem(36px);
     border-top-left-radius: px2rem(2px);
     border-top-right-radius: px2rem(2px);
     cursor: pointer;
@@ -110,7 +110,7 @@
     }
 
     // Hide native details marker - Safari (iOS and macOS)  does not seem to
-    // like :is() on details elements, so just go with a selector list.
+    // like :where() on details elements, so just go with a selector list.
     &::marker,
     &::-webkit-details-marker {
       display: none;

src/assets/stylesheets/main/extensions/pymdownx/_emoji.scss

@@ -28,7 +28,7 @@
 .md-typeset {
 
   // Emoji and icon container
-  :is(.emojione, .twemoji, .gemoji) {
+  :where(.emojione, .twemoji, .gemoji) {
     display: inline-flex;
     height: px2em(18px);
     vertical-align: text-top;

src/assets/stylesheets/main/extensions/pymdownx/_highlight.scss

@@ -29,7 +29,7 @@
 
   // .o  = Operator
   // .ow = Operator, word
-  :is(.o, .ow) {
+  :where(.o, .ow) {
     color: var(--md-code-hl-operator-color);
   }
 
@@ -46,7 +46,7 @@
   // .si  = Literal, string interpol
   // .s1  = Literal, string single
   // .ss  = Literal, string symbol
-  :is(.cpf, .l, .s, .sb, .sc, .s2, .si, .s1, .ss) {
+  :where(.cpf, .l, .s, .sb, .sc, .s2, .si, .s1, .ss) {
     color: var(--md-code-hl-string-color);
   }
 
@@ -55,7 +55,7 @@
   // .sh = Literal, string heredoc
   // .sr = Literal, string regex
   // .sx = Literal, string other
-  :is(.cp, .se, .sh, .sr, .sx) {
+  :where(.cp, .se, .sh, .sr, .sx) {
     color: var(--md-code-hl-special-color);
   }
 
@@ -66,7 +66,7 @@
   // .mi = Number, integer
   // .il = Number, integer long
   // .mo = Number, octal
-  :is(.m, .mb, .mf, .mh, .mi, .il, .mo) {
+  :where(.m, .mb, .mf, .mh, .mi, .il, .mo) {
     color: var(--md-code-hl-number-color);
   }
 
@@ -76,20 +76,20 @@
   // .kp = Keyword, pseudo
   // .kr = Keyword, reserved
   // .kt = Keyword, type
-  :is(.k, .kd, .kn, .kp, .kr, .kt) {
+  :where(.k, .kd, .kn, .kp, .kr, .kt) {
     color: var(--md-code-hl-keyword-color);
   }
 
   // .kc = Keyword, constant
   // .n  = Name
-  :is(.kc, .n) {
+  :where(.kc, .n) {
     color: var(--md-code-hl-name-color);
   }
 
   // .no = Name, constant
   // .nb = Name, builtin
   // .bp = Name, builtin pseudo
-  :is(.no, .nb, .bp) {
+  :where(.no, .nb, .bp) {
     color: var(--md-code-hl-constant-color);
   }
 
@@ -97,7 +97,7 @@
   // .ne = Name, exception
   // .nf = Name, function
   // .nn = Name, namespace
-  :is(.nc, .ne, .nf, .nn) {
+  :where(.nc, .ne, .nf, .nn) {
     color: var(--md-code-hl-function-color);
   }
 
@@ -105,7 +105,7 @@
   // .ni = Name, entity
   // .nl = Name, label
   // .nt = Name, tag
-  :is(.nd, .ni, .nl, .nt) {
+  :where(.nd, .ni, .nl, .nt) {
     color: var(--md-code-hl-keyword-color);
   }
 
@@ -115,7 +115,7 @@
   // .ch = Comment, shebang
   // .cs = Comment, special
   // .sd = Literal, string doc
-  :is(.c, .cm, .c1, .ch, .cs, .sd) {
+  :where(.c, .cm, .c1, .ch, .cs, .sd) {
     color: var(--md-code-hl-comment-color);
   }
 
@@ -124,7 +124,7 @@
   // .vc = Variable, class
   // .vg = Variable, global
   // .vi = Variable, instance
-  :is(.na, .nv, .vc, .vg, .vi) {
+  :where(.na, .nv, .vc, .vg, .vi) {
     color: var(--md-code-hl-variable-color);
   }
 
@@ -136,13 +136,13 @@
   // .gs = Generic, strong
   // .gu = Generic, subheading
   // .gt = Generic, traceback
-  :is(.ge, .gr, .gh, .go, .gp, .gs, .gu, .gt) {
+  :where(.ge, .gr, .gh, .go, .gp, .gs, .gu, .gt) {
     color: var(--md-code-hl-generic-color);
   }
 
   // .gd = Diff, delete
   // .gi = Diff, insert
-  :is(.gd, .gi) {
+  :where(.gd, .gi) {
     margin: 0 px2em(-2px);
     padding: 0 px2em(2px);
     border-radius: px2rem(2px);
@@ -220,7 +220,7 @@
 
   // Set table elements to block layout, because otherwise the whole flexbox
   // hacking won't work correctly
-  :is(tbody, td) {
+  :where(tbody, td) {
     display: block;
     padding: 0;
   }

src/assets/stylesheets/main/extensions/pymdownx/_keys.scss

@@ -31,7 +31,7 @@
   .keys {
 
     // Keyboard key icon
-    kbd:is(::before, ::after) {
+    kbd:where(::before, ::after) {
       position: relative;
       margin: 0;
       color: inherit;

src/assets/stylesheets/main/layout/_clipboard.scss

@@ -63,7 +63,7 @@
   }
 
   // Button on focus/hover
-  &:is(:focus, :hover) {
+  &:where(:focus, :hover) {
     color: var(--md-accent-fg-color);
   }
 
@@ -93,7 +93,7 @@
     }
 
     // Code block on focus/hover
-    &:is(:focus, :hover) code {
+    &:where(:focus, :hover) code {
       color: var(--md-accent-fg-color);
       background-color: var(--md-accent-fg-color--transparent);
     }

src/assets/stylesheets/main/layout/_footer.scss

@@ -56,7 +56,7 @@
     transition: opacity 250ms;
 
     // Footer link on focus/hover
-    &:is(:focus, :hover) {
+    &:where(:focus, :hover) {
       opacity: 0.7;
     }
 
@@ -143,7 +143,7 @@
     color: var(--md-footer-fg-color--light);
 
     // Text link on focus/hover
-    &:is(:focus, :hover) {
+    &:where(:focus, :hover) {
       color: var(--md-footer-fg-color);
     }
   }

src/assets/stylesheets/main/layout/_form.scss

@@ -49,7 +49,7 @@
     }
 
     // Button on focus/hover
-    &:is(:focus, :hover) {
+    &:where(:focus, :hover) {
       color: var(--md-accent-bg-color);
       background-color: var(--md-accent-fg-color);
       border-color: var(--md-accent-fg-color);
@@ -69,7 +69,7 @@
       box-shadow 250ms;
 
     // Input on focus/hover
-    &:is(:focus, :hover) {
+    &:where(:focus, :hover) {
       border-bottom-color: var(--md-accent-fg-color);
       box-shadow: var(--md-shadow-z2);
     }

src/assets/stylesheets/main/layout/_header.scss

@@ -109,7 +109,7 @@
       }
 
       // Image or icon
-      :is(img, svg) {
+      :where(img, svg) {
         display: block;
         width: px2rem(24px);
         height: px2rem(24px);

src/assets/stylesheets/main/layout/_nav.scss

@@ -60,7 +60,7 @@
       &.md-logo {
 
         // Image or icon
-        :is(img, svg) {
+        :where(img, svg) {
           display: block;
           width: px2rem(48px);
           height: px2rem(48px);
@@ -121,7 +121,7 @@
     }
 
     // Navigation link on focus/hover
-    &:is(:focus, :hover) {
+    &:where(:focus, :hover) {
       color: var(--md-accent-fg-color);
     }
 
@@ -183,7 +183,7 @@
     &--primary {
 
       // Navigation title and item
-      :is(.md-nav__title, .md-nav__item) {
+      :where(.md-nav__title, .md-nav__item) {
         font-size: px2rem(16px);
         line-height: 1.5;
       }
@@ -283,7 +283,7 @@
           color: var(--md-typeset-a-color);
 
           // Navigation link on focus/hover
-          &:is(:focus, :hover) {
+          &:where(:focus, :hover) {
             color: var(--md-accent-fg-color);
           }
         }
@@ -520,7 +520,7 @@
     }
 
     // Show nested navigation when toggle is active or indeterminate
-    &__toggle:is(:checked, :indeterminate) ~ & {
+    &__toggle:where(:checked, :indeterminate) ~ & {
       display: block;
     }
 

src/assets/stylesheets/main/layout/_search.scss

@@ -612,7 +612,7 @@
     scroll-snap-align: start;
 
     // Search result link on focus/hover
-    &:is(:focus, :hover) {
+    &:where(:focus, :hover) {
       background-color: var(--md-accent-fg-color--transparent);
     }
 
@@ -647,7 +647,7 @@
     }
 
     // Search result more link on focus/hover
-    &:is(:focus, :hover) {
+    &:where(:focus, :hover) {
       color: var(--md-accent-fg-color);
       background-color: var(--md-accent-fg-color--transparent);
     }

src/assets/stylesheets/main/layout/_select.scss

@@ -48,7 +48,7 @@
       max-height   0ms 500ms;
 
     // Selection bubble on parent focus/hover
-    .md-select:is(:focus-within, :hover) & {
+    .md-select:where(:focus-within, :hover) & {
       max-height: px2rem(200px);
       transform: translate3d(-50%, 0, 0);
       opacity: 1;
@@ -110,7 +110,7 @@
     }
 
     // Link on focus/hover
-    &:is(:focus, :hover) {
+    &:where(:focus, :hover) {
       color: var(--md-accent-fg-color);
     }
 

src/assets/stylesheets/main/layout/_tabs.scss

@@ -87,7 +87,7 @@
 
     // Active link and link on focus/hover
     &--active,
-    &:is(:focus, :hover) {
+    &:where(:focus, :hover) {
       color: inherit;
       opacity: 1;
     }

src/assets/stylesheets/main/layout/_tooltip.scss

@@ -196,7 +196,7 @@
       }
 
       // Annotation marker on focus/hover
-      :is(:focus-within, :hover) > & {
+      :where(:focus-within, :hover) > & {
         background-color: var(--md-accent-fg-color);
       }
 
@@ -238,7 +238,7 @@
     }
 
     // Annotation index on focus/hover
-    :is(:focus-within, :hover) > & {
+    :where(:focus-within, :hover) > & {
       color: var(--md-accent-bg-color);
     }
 

src/assets/stylesheets/main/layout/_top.scss

@@ -70,7 +70,7 @@
   }
 
   // Back-to-top button on focus/hover
-  &:is(:focus, :hover) {
+  &:where(:focus, :hover) {
     color: var(--md-accent-bg-color);
     background-color: var(--md-accent-fg-color);
   }

src/assets/stylesheets/main/layout/_version.scss

@@ -108,7 +108,7 @@
     scroll-snap-type: y mandatory;
 
     // Version selection list on parent focus/hover
-    .md-version:is(:focus-within, :hover) & {
+    .md-version:where(:focus-within, :hover) & {
       max-height: px2rem(200px);
       opacity: 1;
       transition:
@@ -157,7 +157,7 @@
     }
 
     // Link on focus/hover
-    &:is(:focus, :hover) {
+    &:where(:focus, :hover) {
       color: var(--md-accent-fg-color);
     }