docs: add vitepress style focus codeblock class

Author: helightdev

docs/stylesheets/extra.css

@@ -1,38 +1,66 @@
 :root {
-  --md-admonition-icon--only-flutter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.314 0 2.3 12 6 15.7 21.684.013h-7.357zm.014 11.072L7.857 17.53l6.47 6.47H21.7l-6.46-6.468 6.46-6.46h-7.37z"></path></svg>');
-  --md-admonition-icon--requires-firebase: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.89 15.672 6.255.461A.542.542 0 0 1 7.27.288l2.543 4.771zm16.794 3.692-2.25-14a.54.54 0 0 0-.919-.295L3.316 19.365l7.856 4.427a1.621 1.621 0 0 0 1.588 0zM14.3 7.147l-1.82-3.482a.542.542 0 0 0-.96 0L3.53 17.984z"></path></svg>');
+    --md-admonition-icon--only-flutter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.314 0 2.3 12 6 15.7 21.684.013h-7.357zm.014 11.072L7.857 17.53l6.47 6.47H21.7l-6.46-6.468 6.46-6.46h-7.37z"></path></svg>');
+    --md-admonition-icon--requires-firebase: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.89 15.672 6.255.461A.542.542 0 0 1 7.27.288l2.543 4.771zm16.794 3.692-2.25-14a.54.54 0 0 0-.919-.295L3.316 19.365l7.856 4.427a1.621 1.621 0 0 0 1.588 0zM14.3 7.147l-1.82-3.482a.542.542 0 0 0-.96 0L3.53 17.984z"></path></svg>');
 }
 
 :root > * {
-  /*--md-default-bg-color: #12141a*/
+    /*--md-default-bg-color: #12141a*/
 }
 
 .md-typeset .admonition.only-flutter,
 .md-typeset details.only-flutter {
-  border-color: #53b7f7;
+    border-color: #53b7f7;
 }
+
 .md-typeset .only-flutter > .admonition-title,
 .md-typeset .only-flutter > summary {
-  background-color: rgba(83, 183, 247, 0.1);
+    background-color: rgba(83, 183, 247, 0.1);
 }
+
 .md-typeset .only-flutter > .admonition-title::before,
 .md-typeset .only-flutter > summary::before {
-  background-color: #53b7f7;
-  -webkit-mask-image: var(--md-admonition-icon--only-flutter);
-          mask-image: var(--md-admonition-icon--only-flutter);
+    background-color: #53b7f7;
+    -webkit-mask-image: var(--md-admonition-icon--only-flutter);
+    mask-image: var(--md-admonition-icon--only-flutter);
 }
 
 .md-typeset .admonition.requires-firebase,
 .md-typeset details.requires-firebase {
-  border-color: #FFA000;
+    border-color: #FFA000;
 }
+
 .md-typeset .requires-firebase > .admonition-title,
 .md-typeset .requires-firebase > summary {
-  background-color: rgba(255, 160, 0, 0.1);
+    background-color: rgba(255, 160, 0, 0.1);
 }
+
 .md-typeset .requires-firebase > .admonition-title::before,
 .md-typeset .requires-firebase > summary::before {
-  background-color: #FFA000;
-  -webkit-mask-image: var(--md-admonition-icon--requires-firebase);
-          mask-image: var(--md-admonition-icon--requires-firebase);
+    background-color: #FFA000;
+    -webkit-mask-image: var(--md-admonition-icon--requires-firebase);
+    mask-image: var(--md-admonition-icon--requires-firebase);
+}
+
+
+/* Vitepress style focus effect */
+.highlight.focus code > span:not(:has(:last-child.hll)) {
+    filter: blur(2px);
+    overflow: hidden;
+    transition: filter 0.2s ease;
+    opacity: 0.8;
+}
+
+.highlight.focus:hover span {
+    filter: none !important;
+    opacity: 1 !important;
+}
+
+.highlight.focus code > span:has(:last-child.hll) {
+    filter: none;
+    opacity: 1;
+}
+
+.highlight.focus .hll {
+    box-shadow: none !important;
+    background-color: transparent !important;
 }