Update document theme

Author: facelessuser

docs/src/markdown/_snippets/selector_styles.txt

@@ -1,48 +1,23 @@
 <style>
-html {
-  --svg-beaker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' id='beaker'%3E%3Cpath d='M3,3V5A2,2 0 0,1 5,7V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V7A2,2 0 0,1 21,5V3H3M7,9H10V10H7V9M7,11H10V12H7V11M10,16H7V15H10V16M12,14H7V13H12V14M12,8H7V7H12V8Z' /%3E%3C/svg%3E");
-  --svg-html5: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M0 32l34.9 395.8L191.5 480l157.6-52.2L384 32H0zm308.2 127.9H124.4l4.1 49.4h175.6l-13.6 148.4-97.9 27v.3h-1.1l-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1l-4.4 47.7z'/%3E%3C/svg%3E");
-  --svg-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' id='star'%3E%3Cpath d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z' /%3E%3C/svg%3E");
-}
-span.lab::after,
-span.html5::after,
-span.star::after {
-  position: relative;
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  padding-right: 1em;
-  background-size: 1em;
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  content: "\a0";
-}
-
-span.big-icon::after {
-  width: 3em;
-  height: 3em;
-  background-size: 3em;
+.twemoji.big-icon svg {
+  max-height: initial !important;
+  width: 3rem !important;
 }
 
-.badge {
-  float: right;
+.twemoji[data-md-color-primary] {
+  color: var(--md-primary-fg-color);
 }
 
-span.lab::after {
-  background-color: hsl(265, 89%, 78%);
-  -webkit-mask-image: var(--svg-beaker);
-  mask-image: var(--svg-beaker);
+.twemoji.icon:hover {
+  cursor: pointer;
 }
 
-span.html5::after {
-  background-color: hsl(31, 100%, 71%);
-  -webkit-mask-image: var(--svg-html5);
-  mask-image: var(--svg-html5);
+.twemoji.icon svg{
+  transition: all 0.5s ease;
 }
 
-span.star::after {
-  background-color: hsl(135, 94%, 65%);
-  -webkit-mask-image: var(--svg-star);
-  mask-image: var(--svg-star);
+.twemoji.icon:hover svg {
+  transform: scale(1.2);
+  translateY(10%);
 }
 </style>

docs/src/markdown/selectors/basic.md

@@ -377,7 +377,7 @@ contains whitespace or special characters, you should quote them with either sin
         [<a href="http://example.com">Example link</a>, <a href="http://example.org">Example org link</a>]
         ```
 
-`[attribute!=value]`<span class="star badge"></span>
+`[attribute!=value]`:material-star:{: title="Custom" data-md-color-primary="green" .icon}
 : 
     Equivalent to `#!css :not([attribute=value])`.
 
@@ -408,7 +408,7 @@ contains whitespace or special characters, you should quote them with either sin
         [<a href="http://example.com">Example link</a>, <a href="#InSensitive">Insensitive internal link</a>, <a href="http://example.org">Example org link</a>]
         ```
 
-`[attribute operator value i]`<span class="lab badge"></span>
+`[attribute operator value i]`:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon}
 : 
     Represents elements with an attribute named **attribute** and whose value, when the **operator** is applied, matches
     **value** *without* case sensitivity. In general, attribute comparison is insensitive in normal HTML, but not XML.
@@ -441,7 +441,7 @@ contains whitespace or special characters, you should quote them with either sin
         [<a href="#internal">Internal link</a>]
         ```
 
-`[attribute operator value s]` <span class="lab badge"></span>
+`[attribute operator value s]` :material-flask:{: title="Experimental" data-md-color-primary="purple" .icon}
 : 
     Represents elements with an attribute named **attribute** and whose value, when the **operator** is applied, matches
     **value** *with* case sensitivity.

docs/src/markdown/selectors/index.md

@@ -1,6 +1,5 @@
 # General Details
 
-
 ## Implementation Specifics
 
 The CSS selectors are based off of the CSS specification and includes not only stable selectors, but may also include
@@ -29,30 +28,34 @@ any are found.
 <table markdown="1">
 <tr>
     <th>Symbol</th>
+    <th>Name</th>
     <th>Description</th>
 </tr>
 <tr markdown="1">
-<td><span class="html5 big-icon"></span></td>
+<td>:material-language-html5:{: data-md-color-primary="orange" .big-icon}</td>
+<td>HTML</td>
 <td markdown="1">
 Some selectors are very specific to HTML and either have no meaningful representation in XML, or such functionality has
-not been implemented. Selectors that are HTML only will be noted with <span class="html5"></span>,
+not been implemented. Selectors that are HTML only will be noted with :material-language-html5:{: data-md-color-primary="orange"},
 and will match nothing if used in XML.
 </td>
 </tr>
 <tr markdown="1">
-<td><span class="star big-icon"></span></td>
+<td>:material-star:{: data-md-color-primary="green" .big-icon}</td>
+<td>Custom</td>
 <td markdown="1">
 Soup Sieve has implemented a couple non-standard selectors. These can contain useful selectors that were rejected
 from the official CSS specifications, selectors implemented by other systems such as JQuery, or even selectors
 specifically created for Soup Sieve. If a selector is considered non standard, it will be marked with
-<span class="star"></span>.
+:material-star:{: title="Custom" data-md-color-primary="green"}.
 </td>
 </tr>
 <tr markdown="1">
-<td><span class="lab big-icon"></span></td>
+<td>:material-flask:{: title="Experimental" data-md-color-primary="purple" .big-icon}</td>
+<td>Experimental</td>
 <td markdown="1">
 All selectors that are from the current working draft of CSS4 are considered experimental and are marked with
-<span class="lab"></span>. Additionally, if there are other immature selectors, they may be marked as experimental as
+:material-flask:{: title="Experimental" data-md-color-primary="purple"}. Additionally, if there are other immature selectors, they may be marked as experimental as
 well. Experimental may mean we are not entirely sure if our implementation is correct, that things may still be in flux
 as they are part of a working draft, or even both.
 

docs/src/markdown/selectors/pseudo-classes.md

@@ -8,7 +8,7 @@ not being in a live, browser environment. Pseudo classes that cannot be implemen
 non-applicable either are under consideration, have not yet been evaluated, or are too new and viewed as a risk to
 implement as they might not stick around.
 
-## `:any-link`<span class="html5 badge"></span><span class="lab badge"></span> {:#:any-link}
+## `:any-link`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:any-link}
 
 Selects every `#!html <a>`, `#!html <area>`, or `#!html <link>` element that has an `href` attribute, independent of
 whether it has been visited.
@@ -37,7 +37,7 @@ whether it has been visited.
 !!! tip "Additional Reading"
     https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link
 
-## `:checked`<span class="html5 badge"></span> {:#:checked}
+## `:checked`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon} {:#:checked}
 
 Selects any `#!html <input type="radio"/>`, `#!html <input type="checkbox"/>`, or `#!html <option>` element (in a
 `#!html <select>` element) that is checked or toggled to an on state.
@@ -80,7 +80,7 @@ Selects any `#!html <input type="radio"/>`, `#!html <input type="checkbox"/>`, o
 !!! tip "Additional Reading"
     https://developer.mozilla.org/en-US/docs/Web/CSS/:checked
 
-## `:contains()`<span class="star badge"></span> {:#:contains}
+## `:contains()`:material-star:{: title="Custom" data-md-color-primary="green" .icon} {:#:contains}
 
 Selects elements that contain the provided text. Text can be found in either itself, or its descendants.
 
@@ -116,7 +116,7 @@ in the comma separated list to be considered matching.
     [<div>Here is <span>some text</span>.</div>]
     ```
 
-## `:default`<span class="html5 badge"></span><span class="lab badge"></span> {:#:default}
+## `:default`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:default}
 
 Selects any form element that is the default among a group of related elements, including: `#!html <button>`,
 `#!html <input type="checkbox">`, `#!html <input type="radio">`, `#!html <option>` elements.
@@ -168,7 +168,7 @@ Selects any form element that is the default among a group of related elements,
 !!! tip "Additional Reading"
     https://developer.mozilla.org/en-US/docs/Web/CSS/:default
 
-## `:defined`<span class="html5 badge"></span></span><span class="lab badge"></span> {:#:defined}
+## `:defined`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}</span>:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:defined}
 
 In a browser environment, this represents *defined* elements (names without hyphens) and custom elements (names with
 hyphens) that have been properly added to the custom element registry. Since elements cannot be added to a custom
@@ -200,7 +200,7 @@ specific selector, so it doesn't apply to XML.
 !!! tip "Additional Reading"
     https://developer.mozilla.org/en-US/docs/Web/CSS/:defined
 
-## `:dir()`<span class="html5 badge"></span><span class="lab badge"></span> {:#:dir}
+## `:dir()`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:dir}
 
 Selects elements based on text directionality. Accepts either `ltr` or `rtl` for "left to right" and "right to left"
 respectively.
@@ -232,7 +232,7 @@ respectively.
 !!! tip "Additional Reading"
     https://developer.mozilla.org/en-US/docs/Web/CSS/:dir
 
-## `:disabled`<span class="html5 badge"></span> {:#:disabled}
+## `:disabled`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon} {:#:disabled}
 
 Selects any element that is disabled.
 
@@ -277,7 +277,7 @@ Selects any element that is disabled.
 !!! tip "Additional Reading"
     https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled
 
-## `:empty`<span class="lab badge"></span> {:#:empty}
+## `:empty`:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:empty}
 
 Selects elements that have no children and no text (whitespace is ignored).
 
@@ -307,7 +307,7 @@ Selects elements that have no children and no text (whitespace is ignored).
 !!! tip "Additional Reading"
     https://developer.mozilla.org/en-US/docs/Web/CSS/:empty
 
-## `:enabled`<span class="html5 badge"></span> {:#:enabled}
+## `:enabled`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon} {:#:enabled}
 
 Selects any element that is enabled.
 
@@ -424,7 +424,7 @@ Selects the first child of a given type in a group of sibling elements.
 !!! tip "Additional Reading"
     https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type
 
-## `:has()`<span class="lab badge"></span> {:#has}
+## `:has()`:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#has}
 
 Selects an element if any of the relative selectors passed as parameters (which are relative to the `:scope` of the
 given element), match at least one element.
@@ -461,7 +461,7 @@ are planned for level 5 CSS selectors. Soup Sieve supports [complex](#complex-se
 !!! tip "Additional Reading"
     https://developer.mozilla.org/en-US/docs/Web/CSS/:has
 
-## `:in-range`<span class="html5 badge"></span><span class="lab badge"></span> {:#:in-range}
+## `:in-range`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:in-range}
 
 Selects all `#!html <input>` elements whose values are in range according to their `type`, `min`, and `max` attributes.
 
@@ -490,7 +490,7 @@ Selects all `#!html <input>` elements whose values are in range according to the
 !!! tip "Additional Reading"
     https://developer.mozilla.org/en-US/docs/Web/CSS/:in-range
 
-## `:indeterminate`<span class="html5 badge"></span><span class="lab badge"></span> {:#:indeterminate}
+## `:indeterminate`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:indeterminate}
 
 Selects all form elements whose are in an indeterminate state.
 
@@ -550,7 +550,7 @@ selected.
 !!! tip "Additional Reading"
     https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate
 
-## `:is()`<span class="lab badge"></span> {:#:is}
+## `:is()`:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:is}
 
 Selects an element, but only if it matches at least one selector in the selector list.
 
@@ -629,7 +629,7 @@ Level 3 CSS
         [<p id="1"></p>, <p id="2"></p>, <p id="3"></p>, <p id="4"></p>, <p id="5"></p>, <p id="6" lang="de-DE"></p>]
         ```
 
-Level 4 CSS<span class="lab badge"></span>
+Level 4 CSS:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon}
 : 
     The level 4 CSS specifications adds the ability to define multiple language tags using a comma separated list. The
     specifications also allow for BCP 47 language ranges as described in [RFC4647](https://tools.ietf.org/html/rfc4647)
@@ -750,7 +750,7 @@ Selects the last child of a given type in a group of sibling elements.
 !!! tip "Additional Reading"
     https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type
 
-## `:link`<span class="html5 badge"></span> {:#:link}
+## `:link`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon} {:#:link}
 
 Selects a link (every `#!html <a>`, `#!html <link>`, and `#!html <area>` element with an `href` attribute) that has not
 yet been visited.
@@ -811,7 +811,7 @@ Level 3 CSS
         [<div>Here is some text.</div>]
         ```
 
-Level 4+ CSS<span class="lab badge"></span>
+Level 4+ CSS:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon}
 : 
     Selects all elements that do not match any of the selectors in the selector list. While the level 4 specifications
     state that [compound](#compound-selector) selectors are supported, some browsers (Safari) support complex selectors
@@ -890,7 +890,7 @@ Level 3 CSS
         [<p id="0"></p>, <p id="1"></p>, <p id="2"></p>]
         ```
 
-Level 4+ CSS<span class="lab badge"></span>
+Level 4+ CSS:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon}
 : 
     Level 4 CSS adds the additional pattern in the form `an+b of S` where `S` represents a selector list. `an+b` can
     also be substituted with `even` or `odd`.
@@ -984,7 +984,7 @@ Level 3 CSS
         [<p id="3"></p>, <p id="4"></p>, <p id="5"></p>]
         ```
 
-Level 4+ CSS<span class="lab badge"></span>
+Level 4+ CSS:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon}
 : 
     Level 4 CSS adds the additional pattern in the form `an+b of S` where `S` represents a selector list. `an+b` can
     also be substituted with `even` or `odd`.
@@ -1215,7 +1215,7 @@ Selects element without any siblings that matches a given type.
 !!! tip "Additional Reading"
     https://developer.mozilla.org/en-US/docs/Web/CSS/:only-of-type
 
-## `:optional`<span class="html5 badge"></span><span class="lab badge"></span> {:#:optional}
+## `:optional`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:optional}
 
 Selects any `#!html <input>`, `#!html <select>`, or `#!html <textarea>` element that does not have the `required`
 attribute set on it.
@@ -1252,7 +1252,7 @@ attribute set on it.
 !!! tip "Additional Reading"
     https://developer.mozilla.org/en-US/docs/Web/CSS/:optional
 
-## `:out-of-range`<span class="html5 badge"></span><span class="lab badge"></span> {:#:out-of-range}
+## `:out-of-range`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:out-of-range}
 
 Selects all `#!html <input>` elements whose values are out of range according to their `type`, `min`, and `max`
 attributes.
@@ -1282,7 +1282,7 @@ attributes.
 !!! tip "Additional Reading"
     https://developer.mozilla.org/en-US/docs/Web/CSS/:out-of-range
 
-## `:placeholder-shown`<span class="html5 badge"></span><span class="lab badge"></span> {:#:placeholder-shown}
+## `:placeholder-shown`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:placeholder-shown}
 
 Selects any `#!html <input>` or `#!html <textarea>` element that is currently displaying placeholder text via the
 `placeholder` attribute.
@@ -1323,7 +1323,7 @@ Selects any `#!html <input>` or `#!html <textarea>` element that is currently di
 !!! tip "Additional Reading"
     https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown
 
-## `:read-only`<span class="html5 badge"></span><span class="lab badge"></span> {:#:read-only}
+## `:read-only`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:read-only}
 
 Selects elements (such as `#!html <input>` or `#!html <textarea>`) that are *not* editable by the user. This does not
 just apply to form elements with `readonly` set, but it applies to **any** element that cannot be edited by the user.
@@ -1361,7 +1361,7 @@ just apply to form elements with `readonly` set, but it applies to **any** eleme
 !!! tip "Additional Reading"
     https://developer.mozilla.org/en-US/docs/Web/CSS/:read-only
 
-## `:read-write`<span class="html5 badge"></span><span class="lab badge"></span> {:#:read-write}
+## `:read-write`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:read-write}
 
 Selects elements (such as `#!html <input>` or `#!html <textarea>`) that are editable by the user. This does not just
 apply to form elements as it applies to **any** element that can be edited by the user, such as a `#!html <p>` element
@@ -1400,7 +1400,7 @@ with `contenteditable` set on it.
 !!! tip "Additional Reading"
     https://developer.mozilla.org/en-US/docs/Web/CSS/:read-write
 
-## `:required`<span class="html5 badge"></span><span class="lab badge"></span> {:#:required}
+## `:required`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:required}
 
 Selects any `#!html <input>`, `#!html <select>`, or `#!html <textarea>` element that has the `required` attribute set on
 it.
@@ -1474,7 +1474,7 @@ Selects the root element of a document tree.
 !!! tip "Additional Reading"
     https://developer.mozilla.org/en-US/docs/Web/CSS/:root
 
-## `:scope`<span class="lab badge"></span> {:#:scope}
+## `:scope`:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:scope}
 
 `:scope` represents the the element a `match`, `select`, or `filter` is being called on. If we were, for instance,
 using `:scope` on a div (`#!py3 sv.select(':scope > p', soup.div)`) `:scope` would represent **that** div element, and
@@ -1506,7 +1506,7 @@ no others. If called on the Beautiful Soup object which represents the entire do
 !!! tip "Additional Reading"
     https://developer.mozilla.org/en-US/docs/Web/CSS/:scope
 
-## `:where()`<span class="lab badge"></span> {:#:where}
+## `:where()`:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:where}
 
 Selects an element, but only if it matches at least one selector in the selector list. In browsers, this also has zero
 specificity, but this only has relevance in a browser environment where you have multiple CSS styles, and specificity is