Fix CORS and Mixed-Content issue & Bug Fixes

This fixes the following issues:
- Text selection color was incorrect
- The 'send again' button glitched on page load

This also adds some finishing touches to the proxy code (closes #199)
and that in turn resolves #175 and resolves #2

Finally, this adds the fonts to the application assets allowing
them to be cached by the service worker.

assets/css/fonts.scss

@@ -1,2 +1,52 @@
-// Poppins (Google Fonts)
-@import url('https://fonts.googleapis.com/css?family=Material+Icons|Poppins:500,700|Roboto+Mono:400&display=swap');
+/* Material Design Icons */
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(~@/assets/fonts/material-icons-v48.woff2) format('woff2');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Roboto Mono 400 */
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto Mono'), local('RobotoMono-Regular'),
+  url('~@/assets/fonts/roboto-mono-v7-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+  url('~@/assets/fonts/roboto-mono-v7-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* Poppins 500 */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Poppins Medium'), local('Poppins-Medium'),
+  url('~@/assets/fonts/poppins-v9-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+  url('~@/assets/fonts/poppins-v9-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* poppins-700 - latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Poppins Bold'), local('Poppins-Bold'),
+  url('~@/assets/fonts/poppins-v9-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+  url('~@/assets/fonts/poppins-v9-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}

assets/css/styles.scss

@@ -1,7 +1,15 @@
 $responsiveWidth: 720px;
 
+// Make theme transition smoother.
+body.afterLoad {
+  &, & * {
+    transition: background-color 0.2s ease-in-out,
+                border 0.2s ease-in-out;
+  }
+}
+
 ::selection {
-  background-color: var(--ac-color);
+  background-color: var(--ac-sel-color);
   color: var(--act-color);
 }
 
@@ -577,3 +585,16 @@ input[type="radio"]:checked + label {
 input[type="radio"]:checked + label + div.tab {
   display: block;
 }
+
+.toasted-container .toasted {
+  justify-content: start !important;
+}
+
+.toasted.info {
+  background-color: var(--ac-color) !important;
+  color: var(--act-color) !important;
+}
+
+.toasted.bubble .action {
+  color: inherit !important;
+}

assets/css/themes.scss

@@ -8,7 +8,7 @@
  */
 
 // Dark is the default theme variant.
-:root {
+@mixin darkTheme {
   // Dark Background color
   --bg-dark-color: rgb(41, 42, 45);
   // Background color
@@ -25,11 +25,21 @@
   --err-color: rgb(41, 42, 45);
   // Acent color
   --ac-color: #50fa7b;
+  --ac-sel-color: rgb(80, 250, 123, 0.8);
   // Active text color
   --act-color: rgb(37, 38, 40);
 }
 
-:root.light {
+:root {
+  @include darkTheme;
+}
+@media(prefers-color-scheme: dark) {
+  :root.auto {
+    @include darkTheme;
+  }
+}
+
+@mixin lightTheme {
   // Dark Background color
   --bg-dark-color: #f6f6f6;
   // Background color
@@ -46,11 +56,21 @@
   --err-color: #f6f6f6;
   // Acent color
   --ac-color: #57b5f9;
+  --ac-sel-color: #57b5f9;
   // Active text color
   --act-color: #ffffff;
 }
 
-:root.black {
+:root.light {
+  @include lightTheme;
+}
+@media(prefers-color-scheme: light) {
+  :root.auto {
+    @include lightTheme;
+  }
+}
+
+@mixin blackTheme {
   // Dark Background color
   --bg-dark-color: rgb(8, 8, 8);
   // Background color
@@ -67,52 +87,10 @@
   --err-color: rgb(8, 8, 8);
   // Acent color
   --ac-color: #50fa7b;
+  --ac-sel-color: rgb(80, 250, 123, 0.8);
   // Active text color
   --act-color: #000000;
 }
-
-@media(prefers-color-scheme: light) {
-  :root.auto {
-    // Dark Background color
-    --bg-dark-color: #f6f6f6;
-    // Background color
-    --bg-color: #ffffff;
-    // Auto-complete color
-    --atc-color: #ebebeb;
-    // Text color
-    --fg-color: #525252;
-    // Light Text color
-    --fg-light-color: rgb(150, 155, 160);
-    // Border color
-    --brd-color: #eeeeed;
-    // Error color
-    --err-color: #f6f6f6;
-    // Acent color
-    --ac-color: #57b5f9;
-    // Active text color
-    --act-color: #ffffff;
-  }
-}
-
-@media(prefers-color-scheme: dark) {
-  :root.auto {
-    // Dark Background color
-    --bg-dark-color: rgb(41, 42, 45);
-    // Background color
-    --bg-color: rgb(37, 38, 40);
-    // Auto-complete color
-    --atc-color: rgb(49, 49, 55);
-    // Text color
-    --fg-color: rgb(247, 248, 248);
-    // Light Text color
-    --fg-light-color: rgb(150, 155, 160);
-    // Border color
-    --brd-color: rgb(48, 47, 55);
-    // Error color
-    --err-color: rgb(41, 42, 45);
-    // Acent color
-    --ac-color: #50fa7b;
-    // Active text color
-    --act-color: rgb(37, 38, 40);
-  }
+:root.black {
+  @include blackTheme;
 }