UI redesign, testing tools, removed comic sans mode, new regex

build/manifest.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 3,
     "name": "DogMoneyMode",
-    "version": "1.3",
+    "version": "2.0",
     "description": "Browser extension that makes fiat prices display in Dogecoin. Fiat Supported: USD, GBP, EUR.",
     "permissions": ["storage"],
     "action": {

build/popup.html

@@ -6,43 +6,38 @@
         * {
             font-family: 'Comic Sans MS', cursive, sans-serif;
         }
-
         body {
-            background-color: #fae0d4;
-            padding: 5px;
-            width: 250px;
+            background-color: #23292B;
+            background: url('./images/background.png');
+            background-position: center;
+            background-size: cover;
             text-align: center;
+            width: 300px;
+            height: 300px;
+            margin: 0;
+            padding: 0;
         }
-
-        h1 {
-            margin-top: 0;
-        }
-
-        h5 {
-            margin: 14px 0px;
-            font-size: 12px;
-        }
-
-
-        select {
-            padding: 10px;
-            font-size: 16px;
-            border-radius: 12px;
+        :root {
+            --switch-width: 180px;
+            --switch-height: 120px;
+            --slider-size: calc(var(--switch-height) - 0px);
+            --slider-move: calc(var(--switch-width) - var(--switch-height));
         }
-
         .switch {
+            top: 95px;
             position: relative;
             display: inline-block;
-            width: 150px; 
-            height: 68px; 
+            width: var(--switch-width);
+            height: var(--switch-height);
+            background: url('./images/sliderback.png') no-repeat;
+            background-size: 100% 100%;
+            border-radius: var(--switch-height);
         }
-
         .switch input { 
             opacity: 0;
             width: 0;
             height: 0;
         }
-
         .slider {
             position: absolute;
             cursor: pointer;
@@ -53,74 +48,85 @@
             background-color: #ccc;
             -webkit-transition: .4s;
             transition: .4s;
+            border-radius: var(--switch-height);
         }
-
         .slider:before {
             position: absolute;
             content: "";
-            height: 58px; 
-            width: 58px;
-            left: 5px;
-            bottom: 5px; 
+            height: var(--slider-size);
+            width: var(--slider-size);
+            left: 0px;
+            bottom: 0px;
             background-color: white;
             -webkit-transition: .4s;
             transition: .4s;
+            border-radius: var(--switch-height);
+            background-image: url('images/coin.png');
+            background-position: center;
+            background-size: cover;
+            z-index: 2;
         }
-
         input:checked + .slider {
-            background-color: #2196F3;
+            -webkit-transition: .4s;
+            transition: .4s;
+            border-radius: var(--switch-height);
+            background-color: transparent;
+            background: url('./images/sliderback.png');
+        }
+        .slider::after {
+            content: "";
+            position: absolute;
+            border-radius: var(--switch-height);
+            left: 0%;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            background-color: white;
+            transition: .4s;
+            z-index: 1;
+        }
+        input:checked + .slider::after {
+            left: 60px;
         }
-
         input:focus + .slider {
             box-shadow: 0 0 1px #2196F3;
         }
-
         input:checked + .slider:before {
-            -webkit-transform: translateX(75px); 
-            -ms-transform: translateX(75px); 
-            transform: translateX(75px); 
+            -webkit-transform: translateX(var(--slider-move));
+            -ms-transform: translateX(var(--slider-move));
+            transform: translateX(var(--slider-move));
         }
-
-
-        .slider.round {
-            border-radius: 68px;
-        }
-
-        .slider.round:before {
-            border-radius: 50%;
-        }
-
-        #tips {
-            display:block;
+        input:checked + .slider:before {
+            -webkit-filter: grayscale(0%);
+            -moz-filter: grayscale(0%);
+            -o-filter: grayscale(0%);
+            -ms-filter: grayscale(0%);
+            filter: grayscale(0%); 
         }
-        .tip-content {
-        display: none;
+        input + .slider:before {
+            -webkit-filter: grayscale(100%);
+            -moz-filter: grayscale(100%);
+            -o-filter: grayscale(100%);
+            -ms-filter: grayscale(100%);
+            filter: grayscale(100%); 
         }
 
-        .tip-content img {
-        width: 250px;
-        height: 250px;
-        }
     </style>
 </head>
 <body>
-    <h1>DogMoneyMode</h1>
     <label class="switch">
-        <input type="checkbox" id="dogmoneymode-toggle" name="dogmoneymode-toggle">
+        <input type="checkbox" id="dogmoneymode-toggle" checked>
         <span class="slider round"></span>
     </label>
-
+
+    <!--
     <h3 style="margin-bottom: 0px;">Comic Sans Mode:</h3>
     <label class="switch" style="scale: 0.5;">
         <input type="checkbox" id="comicsans-toggle" name="comicsans-toggle">
         <span class="slider round"></span>
     </label>
 
-    <a id="tips" href="#">Tips</a>
-    <div id="tip-content" class="tip-content">
-      <p>Dogecoin:<br>D6hbn1AugHq3WVtTVSv1fZAg6atPAMtwuV</p>
-      <img src="images/tip.png" alt="QR Code">
-    </div>
+    <a id="tips" href="#"><em>Tips:</em> D6hbn1AugHq3WVtTVSv1fZAg6atPAMtwuV</a>-->
     <script src="scripts\popup.js"></script>
 </body>
 </html>