fixed some firefox bugs

jpegzilla · jpegzilla · commit 61813fa38c99 · 2023-04-07T19:03:19.000-04:00
diff --git a/assets/img/icons/svg/rainbow-flower.svg b/assets/img/icons/svg/rainbow-flower.svg
@@ -1 +1,24 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 117.2 117.2"><defs><style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill:#fbfcff;}</style><linearGradient id="linear-gradient" y1="58.6" x2="117.2" y2="58.6" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#62d4f2"/><stop offset="0.5" stop-color="#f9ed56"/><stop offset="1" stop-color="#e933f6"/></linearGradient></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M117.2,58.6l-.26-.26A41.26,41.26,0,0,0,88.42,46.25,41.32,41.32,0,0,0,100,17.52v-.36h-.36A41.29,41.29,0,0,0,71,28.76,41.12,41.12,0,0,0,58.85.26L58.6,0l-.25.26a41.12,41.12,0,0,0-12.12,28.5,41.29,41.29,0,0,0-28.71-11.6h-.36v.36A41.28,41.28,0,0,0,28.79,46.25,41.23,41.23,0,0,0,.26,58.35L0,58.6l.26.25A41.28,41.28,0,0,0,28.79,71,41.26,41.26,0,0,0,17.16,99.68V100h.36A41.26,41.26,0,0,0,46.23,88.43,41.17,41.17,0,0,0,58.35,117l.25.25.25-.25A41.17,41.17,0,0,0,71,88.43,41.26,41.26,0,0,0,99.68,100H100v-.36A41.3,41.3,0,0,0,88.42,71a41.27,41.27,0,0,0,28.52-12.1ZM86.69,70.24A40.62,40.62,0,0,1,59.5,59,40.5,40.5,0,0,1,86.69,70.24Zm-27.19-12A40.61,40.61,0,0,1,86.69,47,40.58,40.58,0,0,1,59.5,58.22ZM59,57.69a40.45,40.45,0,0,1,11.28-27.2A40.46,40.46,0,0,1,59,57.69Zm-.76,0a40.46,40.46,0,0,1-11.28-27.2A40.45,40.45,0,0,1,58.22,57.69ZM30.51,47A40.54,40.54,0,0,1,57.69,58.22,40.58,40.58,0,0,1,30.51,47ZM57.7,59A40.6,40.6,0,0,1,30.51,70.24,40.5,40.5,0,0,1,57.7,59Zm.52.52A40.45,40.45,0,0,1,46.94,86.71,40.49,40.49,0,0,1,58.22,59.5Zm.76,0A40.49,40.49,0,0,1,70.26,86.71,40.45,40.45,0,0,1,59,59.5Z"/><path class="cls-2" d="M113.62,58.6l-.24-.24A38.78,38.78,0,0,0,86.59,47,38.73,38.73,0,0,0,97.5,20V19.7h-.33a38.8,38.8,0,0,0-27,10.89A38.57,38.57,0,0,0,58.83,3.83l-.23-.24-.23.24A38.57,38.57,0,0,0,47,30.59,38.8,38.8,0,0,0,20,19.7H19.7V20A38.73,38.73,0,0,0,30.61,47,38.72,38.72,0,0,0,3.83,58.37l-.24.23.24.23A38.71,38.71,0,0,0,30.61,70.19a38.76,38.76,0,0,0-10.91,27v.33H20A38.8,38.8,0,0,0,47,86.61a38.63,38.63,0,0,0,11.38,26.77l.23.24.23-.24A38.63,38.63,0,0,0,70.21,86.61a38.8,38.8,0,0,0,27,10.89h.33v-.33a38.76,38.76,0,0,0-10.91-27,38.73,38.73,0,0,0,26.79-11.36ZM85,69.52A38,38,0,0,1,59.45,59,38.09,38.09,0,0,1,85,69.52ZM59.45,58.25A38,38,0,0,1,85,47.68,38.14,38.14,0,0,1,59.45,58.25Zm-.5-.5A38.09,38.09,0,0,1,69.54,32.21,38,38,0,0,1,59,57.75Zm-.7,0A38,38,0,0,1,47.66,32.21,38.09,38.09,0,0,1,58.25,57.75Zm-26-10.07A38,38,0,0,1,57.75,58.25,38.14,38.14,0,0,1,32.23,47.68ZM57.75,59A38,38,0,0,1,32.23,69.52,38.09,38.09,0,0,1,57.75,59Zm.5.5A38.11,38.11,0,0,1,47.66,85,38,38,0,0,1,58.25,59.45Zm.7,0A38,38,0,0,1,69.54,85,38.11,38.11,0,0,1,59,59.45Z"/></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 117.2 117.2" height="117.2" width="117.2">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#linear-gradient);
+      }
+
+      .cls-2 {
+        fill: #fbfcff;
+      }
+    </style>
+    <linearGradient id="linear-gradient" y1="58.6" x2="117.2" y2="58.6" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#62d4f2" />
+      <stop offset="0.5" stop-color="#f9ed56" />
+      <stop offset="1" stop-color="#e933f6" />
+    </linearGradient>
+  </defs>
+  <g id="Layer_2" data-name="Layer 2">
+    <g id="Layer_1-2" data-name="Layer 1">
+      <path class="cls-1" d="M117.2,58.6l-.26-.26A41.26,41.26,0,0,0,88.42,46.25,41.32,41.32,0,0,0,100,17.52v-.36h-.36A41.29,41.29,0,0,0,71,28.76,41.12,41.12,0,0,0,58.85.26L58.6,0l-.25.26a41.12,41.12,0,0,0-12.12,28.5,41.29,41.29,0,0,0-28.71-11.6h-.36v.36A41.28,41.28,0,0,0,28.79,46.25,41.23,41.23,0,0,0,.26,58.35L0,58.6l.26.25A41.28,41.28,0,0,0,28.79,71,41.26,41.26,0,0,0,17.16,99.68V100h.36A41.26,41.26,0,0,0,46.23,88.43,41.17,41.17,0,0,0,58.35,117l.25.25.25-.25A41.17,41.17,0,0,0,71,88.43,41.26,41.26,0,0,0,99.68,100H100v-.36A41.3,41.3,0,0,0,88.42,71a41.27,41.27,0,0,0,28.52-12.1ZM86.69,70.24A40.62,40.62,0,0,1,59.5,59,40.5,40.5,0,0,1,86.69,70.24Zm-27.19-12A40.61,40.61,0,0,1,86.69,47,40.58,40.58,0,0,1,59.5,58.22ZM59,57.69a40.45,40.45,0,0,1,11.28-27.2A40.46,40.46,0,0,1,59,57.69Zm-.76,0a40.46,40.46,0,0,1-11.28-27.2A40.45,40.45,0,0,1,58.22,57.69ZM30.51,47A40.54,40.54,0,0,1,57.69,58.22,40.58,40.58,0,0,1,30.51,47ZM57.7,59A40.6,40.6,0,0,1,30.51,70.24,40.5,40.5,0,0,1,57.7,59Zm.52.52A40.45,40.45,0,0,1,46.94,86.71,40.49,40.49,0,0,1,58.22,59.5Zm.76,0A40.49,40.49,0,0,1,70.26,86.71,40.45,40.45,0,0,1,59,59.5Z" />
+      <path class="cls-2" d="M113.62,58.6l-.24-.24A38.78,38.78,0,0,0,86.59,47,38.73,38.73,0,0,0,97.5,20V19.7h-.33a38.8,38.8,0,0,0-27,10.89A38.57,38.57,0,0,0,58.83,3.83l-.23-.24-.23.24A38.57,38.57,0,0,0,47,30.59,38.8,38.8,0,0,0,20,19.7H19.7V20A38.73,38.73,0,0,0,30.61,47,38.72,38.72,0,0,0,3.83,58.37l-.24.23.24.23A38.71,38.71,0,0,0,30.61,70.19a38.76,38.76,0,0,0-10.91,27v.33H20A38.8,38.8,0,0,0,47,86.61a38.63,38.63,0,0,0,11.38,26.77l.23.24.23-.24A38.63,38.63,0,0,0,70.21,86.61a38.8,38.8,0,0,0,27,10.89h.33v-.33a38.76,38.76,0,0,0-10.91-27,38.73,38.73,0,0,0,26.79-11.36ZM85,69.52A38,38,0,0,1,59.45,59,38.09,38.09,0,0,1,85,69.52ZM59.45,58.25A38,38,0,0,1,85,47.68,38.14,38.14,0,0,1,59.45,58.25Zm-.5-.5A38.09,38.09,0,0,1,69.54,32.21,38,38,0,0,1,59,57.75Zm-.7,0A38,38,0,0,1,47.66,32.21,38.09,38.09,0,0,1,58.25,57.75Zm-26-10.07A38,38,0,0,1,57.75,58.25,38.14,38.14,0,0,1,32.23,47.68ZM57.75,59A38,38,0,0,1,32.23,69.52,38.09,38.09,0,0,1,57.75,59Zm.5.5A38.11,38.11,0,0,1,47.66,85,38,38,0,0,1,58.25,59.45Zm.7,0A38,38,0,0,1,69.54,85,38.11,38.11,0,0,1,59,59.45Z" />
+    </g>
+  </g>
+</svg>
diff --git a/css/components/_palettemodal.sass b/css/components/_palettemodal.sass
@@ -196,10 +196,24 @@
           font-display: block
           font-weight: 400
 
-        b
+        @font-face
+          font-family: "montserrat"
+          src: local("Montserrat"), url("./../assets/fonts/Montserrat-VariableFont_wght.ttf") format('truetype'), url("./../assets/fonts/Montserrat-VariableFont_wght.ttf")
+          font-style: normal
+          font-display: block
+
+        b.red-hat-loader
           font-family: 'red hat mono regular'
           visibility: hidden
           height: 0
           flex-shrink: 1
-          display: none
+          width: 0
+          position: absolute
 
+        b.montserrat-loader
+          font-family: 'montserrat'
+          visibility: hidden
+          height: 0
+          flex-shrink: 1
+          width: 0
+          position: absolute
diff --git a/css/main.min.css b/css/main.min.css
diff --git a/css/main.min.css.map b/css/main.min.css.map
diff --git a/js/components/paletteModal.mjs b/js/components/paletteModal.mjs
@@ -157,7 +157,8 @@ class PaletteModal extends Component {
         <div class="material-display">
           <div class="material material-png active">
             <div class="material-actual">
-              <b>e</b>
+              <b class="red-hat-loader">e</b>
+              <b class="montserrat-loader">e</b>
               <canvas class="image-canvas"></canvas>
             </div>
             <div class="material-url download">
diff --git a/js/utils/color/palettePainter.mjs b/js/utils/color/palettePainter.mjs
@@ -61,7 +61,7 @@ export const drawOnyxPalette = async (palette, canvas, crop = false) => {
     await loadImage(icon)
     ctx.drawImage(icon, PAD_LEFT, GAP_HOR_CENTER_TOP, ICON_SIZE, ICON_SIZE)
 
-    ctx.font = `bold 24px "montserrat"`
+    ctx.font = `bold 24px "montserrat", monospace`
     ctx.textBaseline = 'middle'
     ctx.textAlign = 'right'
     ctx.fillStyle = textColor
