From a0eb9d0c8e8589854347e07691437b0e1042d5ad Mon Sep 17 00:00:00 2001
From: Jan Umbach <jan@umbach.dev>
Date: Sat, 22 Jun 2024 13:17:16 +0200
Subject: [PATCH] shx-3d-render

---
 snippets/shx-3d-render-input.liquid | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/snippets/shx-3d-render-input.liquid b/snippets/shx-3d-render-input.liquid
index e6b5647..8dd815e 100644
--- a/snippets/shx-3d-render-input.liquid
+++ b/snippets/shx-3d-render-input.liquid
@@ -91,6 +91,28 @@
         overflow: hidden;
     }
 
+    .shx-mat-matte {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
+        background-size: 20px 20px;
+        opacity: 0.5;
+    }
+
+    .shx-mat-silk {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
+        background-size: 20px 20px;
+        opacity: 0.5;
+    }
+
 </style>
 
 <script type="text/javascript"> 
@@ -259,11 +281,11 @@
             `;
 
             if(options[color].matte) {
-                html += `<span style="color: white; font-size: 0.8rem; position: absolute; bottom: 0; right: 0;">Matt</span>`;
+                html += `<span class="shx-mat-matte"></span>`;
             }
 
             if(options[color].silk) {
-                html += `<span style="color: white; font-size: 0.8rem; position: absolute; bottom: 0; right: 0;">Seide</span>`;
+                html += `<span class="shx-mat-silk"></span>`;
             }
 
             html += `</label>`;