feat(plugin-nprogress): add z-index variable

- refactor: extract css vars to a separate file

Author: meteorlxy

docs/reference/plugin/nprogress.md

@@ -16,8 +16,4 @@ Integrate [nprogress](https://github.com/rstacruz/nprogress) into VuePress, whic
 
 You can customize the style of the progress bar via CSS variables:
 
-```css
-:root {
-  --nprogress-color: #29d;
-}
-```
+@[code css](@vuepress/plugin-nprogress/src/client/styles/vars.css)

docs/zh/reference/plugin/nprogress.md

@@ -16,8 +16,4 @@ title: nprogress
 
 你可以通过 CSS 变量来自定义进度条的样式：
 
-```css
-:root {
-  --nprogress-color: #29d;
-}
-```
+@[code css](@vuepress/plugin-nprogress/src/client/styles/vars.css)

packages/@vuepress/plugin-nprogress/src/client/composables/useNprogress.ts

@@ -2,6 +2,7 @@ import * as nprogress from 'nprogress'
 import { onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 
+import '../styles/vars.css'
 import '../styles/nprogress.css'
 
 export const useNprogress = (): void => {

packages/@vuepress/plugin-nprogress/src/client/styles/nprogress.css

@@ -1,15 +1,11 @@
-:root {
-  --nprogress-color: #29d;
-}
-
 #nprogress {
   pointer-events: none;
 }
 
 #nprogress .bar {
   background: var(--nprogress-color);
   position: fixed;
-  z-index: 1031;
+  z-index: var(--nprogress-z-index);
   top: 0;
   left: 0;
   width: 100%;

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

@@ -0,0 +1,4 @@
+:root {
+  --nprogress-color: #29d;
+  --nprogress-z-index: 1031;
+}