feat(plugin-medium-zoom): add more css variables (close #174)

- refactor: extract css vars to a separate file

Author: meteorlxy

docs/reference/plugin/medium-zoom.md

@@ -45,12 +45,7 @@ Integrate [medium-zoom](https://github.com/francoischalifour/medium-zoom#readme)
 
 You can customize most of the zoom styles via [zoomOptions](#zoomoptions), while this plugin also provides some CSS variables for additional customization:
 
-```css
-:root {
-  /* z-index of the zoom overlay */
-  --medium-zoom-z-index: 100;
-}
-```
+@[code css](@vuepress/plugin-medium-zoom/src/client/styles/vars.css)
 
 ## Composition API
 

docs/zh/reference/plugin/medium-zoom.md

@@ -45,12 +45,7 @@
 
 你可以通过 [zoomOptions](#zoomoptions) 对大部分的缩放样式进行自定义，不过作为补充，该插件同样提供了一些 CSS 变量：
 
-```css
-:root {
-  /* zoom 遮罩的 z-index */
-  --medium-zoom-z-index: 100;
-}
-```
+@[code css](@vuepress/plugin-medium-zoom/src/client/styles/vars.css)
 
 ## Composition API
 

packages/@vuepress/plugin-medium-zoom/src/client/clientAppEnhance.ts

@@ -3,6 +3,7 @@ import type { ZoomOptions } from 'medium-zoom'
 import { defineClientAppEnhance } from '@vuepress/client'
 import { mediumZoomSymbol } from './composables'
 
+import './styles/vars.css'
 import './styles/medium-zoom.css'
 
 declare const __MZ_SELECTOR__: string

packages/@vuepress/plugin-medium-zoom/src/client/styles/medium-zoom.css

@@ -1,11 +1,13 @@
-:root {
-  --medium-zoom-z-index: 100;
-}
-
 .medium-zoom-overlay {
+  /* override element style set by medium-zoom script */
+  background-color: var(--medium-zoom-bg-color) !important;
   z-index: var(--medium-zoom-z-index);
 }
 
 .medium-zoom-overlay ~ img {
   z-index: calc(var(--medium-zoom-z-index) + 1);
 }
+
+.medium-zoom--opened .medium-zoom-overlay {
+  opacity: var(--medium-zoom-opacity);
+}

packages/@vuepress/plugin-medium-zoom/src/client/styles/vars.css

@@ -0,0 +1,5 @@
+:root {
+  --medium-zoom-z-index: 100;
+  --medium-zoom-bg-color: #ffffff;
+  --medium-zoom-opacity: 1;
+}

packages/@vuepress/theme-default/src/client/styles/vars.scss

@@ -73,22 +73,6 @@
   --back-to-top-color-hover: var(--c-brand-light);
 }
 
-// plugin-nprogress
-#nprogress {
-  --nprogress-color: var(--c-brand);
-}
-
-// plugin-search
-.search-box {
-  --search-bg-color: var(--c-bg);
-  --search-accent-color: var(--c-brand);
-  --search-text-color: var(--c-text);
-  --search-border-color: var(--c-border);
-
-  --search-item-text-color: var(--c-text-lighter);
-  --search-item-focus-bg-color: var(--c-bg-light);
-}
-
 // plugin-docsearch
 .DocSearch {
   --docsearch-primary-color: var(--c-brand);
@@ -107,6 +91,16 @@
   --docsearch-footer-background: var(--c-bg);
 }
 
+// plugin-medium-zoom
+.medium-zoom-overlay {
+  --medium-zoom-bg-color: var(--c-bg);
+}
+
+// plugin-nprogress
+#nprogress {
+  --nprogress-color: var(--c-brand);
+}
+
 // plugin-pwa-popup
 .pwa-popup {
   --pwa-popup-text-color: var(--c-text);
@@ -117,3 +111,14 @@
   --pwa-popup-btn-bg-color: var(--c-brand);
   --pwa-popup-btn-hover-bg-color: var(--c-brand-light);
 }
+
+// plugin-search
+.search-box {
+  --search-bg-color: var(--c-bg);
+  --search-accent-color: var(--c-brand);
+  --search-text-color: var(--c-text);
+  --search-border-color: var(--c-border);
+
+  --search-item-text-color: var(--c-text-lighter);
+  --search-item-focus-bg-color: var(--c-bg-light);
+}