#696 Add black gap in GZMTR Line 1 panel style

Author: wongchito

public/styles/share_gzmtr.css

@@ -3,6 +3,7 @@
     font-family: Arial, SimHei, STHeitiSC-Medium, 'PingFang SC', sans-serif;
     font-weight: normal;
 }
+
 .rmg-name__en {
     dominant-baseline: middle;
     font-family: Arial, sans-serif;
@@ -11,8 +12,14 @@
 rect#strip_gz {
     fill: var(--rmg-theme-colour);
     width: var(--rmg-svg-width);
-    transform: translateY(calc(var(--rmg-svg-height) - var(--height, 60px)));
-    height: var(--height, 60px);
+    transform: translateY(calc(var(--rmg-svg-height) - var(--strip-height)));
+    height: var(--strip-height);
+}
+
+.gz1-gap {
+    width: var(--rmg-svg-width);
+    transform: translateY(calc(var(--rmg-svg-height) - var(--strip-height) - 2px));
+    height: 2px;
 }
 
 .rmg-name__gzmtr--white-fg {
@@ -33,12 +40,15 @@ g#big_sec {
 .Name.Pass {
     fill: #aaa;
 }
+
 .Name.Current {
     fill: #fff;
 }
+
 .Name.CurrentGZ {
     fill: #f00;
 }
+
 .Name.Future {
     fill: #000;
 }

src/svgs/gzmtr/strip-gzmtr.tsx

@@ -60,22 +60,12 @@ const StripGZMTR = (props: Props) => {
     const stripDy = -15;
 
     return (
-        <g transform={`translate(0,${props.variant === 'gz4' ? stripDy : 0})`}>
-            <rect
-                id="strip_gz"
-                style={{
-                    ['--height' as any]: `${stripHeight}px`,
-                }}
-            />
-            {props.variant === PanelTypeGZMTR.gz1 && (
-                <rect
-                    height={2}
-                    style={{
-                        width: 'var(--rmg-svg-width)',
-                        transform: `translateY(calc(var(--rmg-svg-height) - ${stripHeight + 2}px))`,
-                    }}
-                />
-            )}
+        <g
+            transform={`translate(0,${props.variant === 'gz4' ? stripDy : 0})`}
+            style={{ ['--strip-height' as any]: `${stripHeight}px` }}
+        >
+            <rect id="strip_gz" />
+            {props.variant === PanelTypeGZMTR.gz1 && <rect className="gz1-gap" />}
             <g
                 style={{
                     transform: 'translate(calc(var(--rmg-svg-width) / 2),var(--rmg-svg-height))',