Added css styling

README.md

@@ -43,3 +43,7 @@ A manifest v3 web extension with minimal permissions that automatically redirect
 | [Twitch](https://www.twitch.tv/)                     | [SafeTwitch](https://codeberg.org/SafeTwitch/safetwitch)                                                                                                         |
 | [Instagram](https://www.instagram.com/)              | [Proxigram](https://codeberg.org/ThePenguinDev/proxigram)                                                                                                        |
 | [WolframAlpha](https://www.wolframalpha.com/)        | [Wolfree](https://codeberg.org/wolfree/wolfree-dockerfile)                                                                                                       |
+
+## Attribution
+
+Icon modified from u-turn by Creative Stall from [Noun Project](https://thenounproject.com/browse/icons/term/u-turn/) (CC BY 3.0)

firefox-src/assets/onboarding.css

@@ -0,0 +1,156 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+/*----------------------------------------------------------------------------------------------------*/
+:root {
+  --font-size: 1.25rem;
+  --line-height: 1.35;
+  --list-line-height: 2;
+  --text-color: #262626;
+  --button-text-color: #FFFFFF;
+  --background-color: #FFFFFF;
+  --primary-color: #4385BE;
+  --red-color: #AF3029;
+  --green-color: #3BB273;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+  --text-color: #D1D1D1;
+  --button-text-color: #FFF;
+  --background-color: #0E0E0F;
+}
+}
+/*----------------------------------------------------------------------------------------------------*/
+html {
+  -webkit-tap-highlight-color: transparent;
+}
+body {
+  font-weight: 400;
+  text-rendering: optimizeLegibility;
+  word-break: break-word;
+
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif;
+  color: var(--text-color);
+  font-size: var(--font-size);
+  background: var(--background-color);
+  line-height: var(--line-height);
+  -webkit-tap-highlight-color: transparent;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+  overflow-y: auto; 
+}
+/*----------------------------------------------------------------------------------------------------*/
+input:focus, select:focus, textarea:focus, button:focus {
+  outline: none;
+}
+/*----------------------------------------------------------------------------------------------------*/
+.wrapper {
+  max-width: 550px;
+  margin: 0 auto;
+  margin-top: calc(var(--font-size) * var(--line-height) * 3);
+  padding: 0 var(--font-size);
+}
+@media (pointer: none), (pointer: coarse) {
+.wrapper {
+  margin-top: calc(var(--font-size) * var(--line-height) * 2);
+}
+}
+p + p {
+  margin-bottom: calc(var(--font-size) * var(--line-height) * 1);
+}
+/*----------------------------------------------------------------------------------------------------*/
+a:link, a:visited {
+  outline: none;
+  text-decoration: none;
+  color: var(--primary-color);
+  -webkit-tap-highlight-color: transparent;
+  position: relative;
+}
+a:hover {
+  opacity: 50%;
+}
+/*----------------------------------------------------------------------------------------------------*/
+h1 {
+  font-size: 140%;
+  font-weight: 900;
+  margin-bottom: calc(var(--font-size) * var(--line-height) * 2);
+}
+/*----------------------------------------------------------------------------------------------------*/
+ul {
+  column-count: 1;
+  list-style-type: none;
+  margin: calc(var(--font-size) * var(--line-height)) 0;
+  line-height: var(--list-line-height);
+}
+ul li {
+  position: relative;
+  break-inside: avoid;
+}
+.request {
+  font-size: calc(var(--font-size) * 0.9);
+  font-size: 75%;
+  color: var(--button-text-color);
+  background-color: var(--primary-color);
+  border-radius: 4px;
+  border-width: 0;
+  margin: calc(var(--font-size) * var(--line-height) * 1) 0;
+  cursor: pointer;
+  display: inline-block;
+  list-style: none;
+  padding: 15px;
+  text-align: center;
+  transition: all 200ms;
+  vertical-align: baseline;
+  white-space: nowrap;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+}
+.request:hover {
+  opacity: 75%;
+}

firefox-src/assets/popup.css

@@ -0,0 +1,161 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+/*----------------------------------------------------------------------------------------------------*/
+:root {
+  --font-size: 1rem;
+  --line-height: 1.35;
+  --text-color: #262626;
+  --background-color: #FFFFFF;
+  --primary-color: #4385BE;
+  --input-border-color: #EEE;
+  --input-placeholder-color: #AAA;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+  --text-color: #D1D1D1;
+  --background-color: #0E0E0F;
+  --input-border-color: #222;
+  --input-placeholder-color: #444;
+}
+}
+/*----------------------------------------------------------------------------------------------------*/
+html {
+  -webkit-tap-highlight-color: transparent;
+}
+body {
+  font-weight: 400;
+  text-rendering: optimizeLegibility;
+  word-break: break-word;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif;
+  color: var(--text-color);
+  font-size: var(--font-size);
+  background: var(--background-color);
+  line-height: var(--line-height);
+  -webkit-tap-highlight-color: transparent;
+  width: 100%;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+  overflow-y: auto;
+}
+
+
+
+input:focus, select:focus, textarea:focus, button:focus {
+  outline: none;
+}
+/*----------------------------------------------------------------------------------------------------*/
+body {margin: 0.5rem;}
+/*----------------------------------------------------------------------------------------------------*/
+h2 {
+  font-size: 150%;
+  font-weight: 900;
+  margin-bottom: calc(var(--font-size) * var(--line-height) * 1);
+}
+/*----------------------------------------------------------------------------------------------------*/
+label {
+  line-height: var(--line-height);
+  display: flex;
+  align-items: center;
+  margin-bottom: calc(var(--font-size) * 0.5);
+}
+input[type="checkbox"]{
+  margin-right: calc(var(--font-size) * 0.5);
+  vertical-align: baseline;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: 3em;
+  height: 1.5em;
+  background: #ddd;
+  border-radius: 3em;
+  position: relative;
+  cursor: pointer;
+  outline: none;
+  -webkit-transition: all .2s ease-in-out;
+  transition: all .2s ease-in-out;
+  }
+
+  input[type="checkbox"]:checked{
+    background: var(--primary-color);
+  }
+
+  input[type="checkbox"]:after{
+    position: absolute;
+    content: "";
+    width: 1.5em;
+    height: 1.5em;
+    border-radius: 50%;
+    background: #fff;
+    -webkit-box-shadow: 0 0 .25em rgba(0,0,0,.3);
+            box-shadow: 0 0 .25em rgba(0,0,0,.3);
+    -webkit-transform: scale(.7);
+            transform: scale(.7);
+    left: 0;
+    -webkit-transition: all .2s ease-in-out;
+    transition: all .2s ease-in-out;
+  }
+
+  input[type="checkbox"]:checked:after{
+    left: calc(100% - 1.5em);
+  }
+/*----------------------------------------------------------------------------------------------------*/
+input[type=text] {
+  margin-left: calc(var(--font-size) * 0.5);
+  margin-bottom: calc(var(--font-size) * 0.5);
+  margin-right: 15px;
+  font-size: 100%;
+  border: 1px solid var(--input-border-color);
+  border-radius: 4px;
+  padding: 1px 3px;
+  color: var(--primary-color);
+  background-color: var(--background-color);
+}
+input[type=text]::placeholder {
+  color: var(--input-placeholder-color);
+}