Restructure code with helper modules, add search engine settings, & advanced settings collapsibles.

1 files changed, 0 insertions, 481 deletions

diff --git a/pages/styles.css b/pages/styles.css
deleted file mode 100644
index 022b96bd..00000000
--- a/pages/styles.css
+++ /dev/null
@@ -1,481 +0,0 @@
-body {
-  --text: #fff;
-  --bg-main: #3c4043;
-  --bg-secondary: #292a2d;
-  --active: #ff5b56;
-  --space: 5px;
-  --danger: #f04141;
-  --danger-light: #f9d0d5;
-  --dark-grey: #767676;
-  --light-grey: #c3c3c3;
-}
-
-body.light-theme {
-  --text: #000;
-  --bg-main: #e3e7ea;
-  --bg-secondary: #fff;
-}
-
-.light-theme.popup,
-.light-theme .popup {
-  background-color: var(--bg-secondary);
-}
-
-body {
-  margin: 0;
-  max-width: 400px;
-  margin: auto;
-  min-height: 572px;
-  font-family: Sans-Serif;
-  background-color: var(--bg-secondary);
-  color: var(--text);
-}
-
-.popup {
-  width: 300px;
-  min-height: auto;
-  overflow: hidden;
-  background-color: var(--bg-main);
-}
-
-input {
-  appearance: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-}
-
-header {
-  background-color: var(--bg-main);
-  color: var(--text);
-  display: flex;
-  padding: var(--space);
-}
-
-header .logo-container {
-  width: 100%;
-  margin: var(--space) 0 var(--space) 0;
-  display: flex;
-  align-items: center;
-}
-
-header .logo-container img {
-  height: 85px;
-  float: left;
-}
-
-header .logo-container h1 {
-  font-size: 25px;
-  float: left;
-  margin-left: 15px;
-  text-transform: uppercase;
-  font-weight: normal;
-}
-
-header .privacy {
-  letter-spacing: 0.13em;
-}
-
-header .version {
-  font-size: 8.5px;
-  font-weight: bold;
-  position: absolute;
-  top: var(--space);
-  right: var(--space);
-}
-
-h1 {
-  font-size: 14px;
-  margin: 7px auto;
-}
-
-i {
-  font-size: 12px;
-}
-
-h2 {
-  clear: both;
-  font-size: 12px;
-  font-weight: normal;
-  margin: 0;
-}
-
-h3 {
-  font-size: 16px;
-}
-
-h1,
-h2 {
-  color: var(--text);
-}
-
-footer {
-  width: 100%;
-}
-
-footer a.button {
-  margin: var(--space);
-}
-
-input[type="url"],
-input[type="text"],
-select {
-  width: 100%;
-  box-sizing: border-box;
-  margin-bottom: var(--space);
-  background-color: var(--bg-main);
-  border-style: inset;
-  color: var(--text);
-}
-
-input[type="url"] {
-  padding: 1px 2px;
-}
-
-input[type="checkbox"] {
-  opacity: 0;
-}
-
-input[type="radio"] {
-  appearance: radio;
-  -moz-appearance: radio;
-  -webkit-appearance: radio;
-}
-
-input[type="radio"]:checked + label {
-  background: transparent;
-}
-
-.checkbox-label {
-  margin-left: 5px;
-  background: grey;
-  border-radius: 25px;
-  color: var(--text);
-  cursor: pointer;
-  display: block;
-  float: right;
-  font-weight: bold;
-  height: 30px;
-  position: relative;
-  text-indent: -400px;
-  width: 50px;
-}
-
-.checkbox-label:after {
-  background: white;
-  border-radius: 90px;
-  content: "";
-  height: 20px;
-  left: var(--space);
-  position: absolute;
-  top: var(--space);
-  transition: 0.3s;
-  width: 20px;
-}
-
-input:checked + label {
-  background: var(--active);
-}
-
-input:checked + label:after {
-  left: calc(100% - var(--space));
-  transform: translateX(-100%);
-}
-
-.settings-block {
-  display: block;
-  padding: 5px 10px 5px 10px;
-}
-
-.settings-block h1 {
-  float: left;
-}
-
-.button {
-  border: var(--active) solid 1px;
-  color: var(--text);
-  stroke: var(--text);
-  display: block;
-  font-size: 12px;
-  font-weight: bold;
-  margin: var(--space) auto;
-  padding: 10px;
-  text-align: center;
-  text-decoration: none;
-  cursor: pointer;
-  -webkit-transition-duration: 0.4s;
-  transition-duration: 0.4s;
-}
-
-.button * {
-  vertical-align: middle;
-}
-
-.button:hover {
-  background-color: var(--active);
-  color: var(--text);
-  stroke: var(--text);
-}
-
-.button:active {
-  background-color: var(--active);
-  box-shadow: 0 var(--space) var(--bg-main);
-  transform: translateY(4px);
-}
-
-input:invalid {
-  color: var(--danger);
-  border-color: var(--danger);
-  background-color: var(--danger-light);
-}
-
-.margin-bottom {
-  margin-bottom: 20px;
-}
-
-.tab {
-  overflow: hidden;
-  background-color: var(--bg-secondary);
-  position: fixed;
-  top: 0;
-  width: 400px;
-  z-index: 2;
-}
-
-.tab button {
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
-  color: var(--text);
-  background-color: inherit;
-  float: left;
-  border: none;
-  outline: none;
-  cursor: pointer;
-  padding: 14px 16px;
-  transition: 0.3s;
-  border: solid 1px var(--bg-main);
-  width: 33.333%;
-  font-size: 14px;
-}
-
-.tab button:hover {
-  background-color: var(--active);
-}
-
-.tab button.active {
-  background-color: var(--bg-main);
-}
-
-.tabcontent {
-  padding-top: 50px;
-  display: none;
-  background-color: var(--bg-main);
-  min-height: 510px;
-}
-
-div.exceptions {
-  clear: left;
-}
-
-div.exceptions > input {
-  width: 240px;
-  float: left;
-}
-
-#add-to-exceptions {
-  float: right;
-  border: var(--active) solid 1px;
-  background-color: var(--active);
-  color: var(--text);
-  font-weight: bold;
-  cursor: pointer;
-  border-radius: 50%;
-  padding: 1px 1px 0px 1px;
-  margin-right: 5px;
-}
-
-#add-to-exceptions svg {
-  height: 20px;
-  width: 20px;
-}
-
-ul {
-  padding: 0;
-  list-style-type: none;
-  color: var(--text);
-  margin: 20px 20px 0 20px;
-}
-
-li {
-  border-bottom: solid 0.5px var(--bg-secondary);
-  padding: 20px 0px 20px 20px;
-}
-
-#exceptions-items button {
-  float: right;
-  margin-right: -5px;
-  border: var(--active) solid 1px;
-  background-color: var(--active);
-  color: var(--text);
-  font-weight: bold;
-  cursor: pointer;
-  border-radius: 50%;
-  padding: 2px 2px 0px 2px;
-}
-
-.button svg {
-  height: 18px;
-  width: 18px;
-}
-
-.autocomplete {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-}
-
-.autocomplete input {
-  background: url(../assets/images/chevron-down.svg) right no-repeat;
-}
-
-.autocomplete-items {
-  position: absolute;
-  border: 1px solid var(--bg-main);
-  border-bottom: none;
-  border-top: none;
-  z-index: 99;
-  top: 85%;
-  left: 0;
-  right: 0;
-  overflow-y: auto;
-  max-height: 175px;
-  color: var(--text);
-  overflow-x: hidden;
-  max-width: 380px;
-}
-
-.autocomplete-items div {
-  padding: 10px;
-  cursor: pointer;
-  background-color: var(--bg-secondary);
-  border-bottom: 1px solid var(--bg-main);
-}
-
-.autocomplete-items div:hover {
-  background-color: var(--active);
-}
-
-.autocomplete-active {
-  background-color: var(--active);
-  color: var(--text);
-}
-
-.option {
-  width: 100%;
-}
-
-.option td {
-  vertical-align: middle;
-}
-
-input[type="range"] {
-  -webkit-appearance: none;
-  margin: 18px 0;
-  width: 100%;
-}
-
-input[type="range"]:focus {
-  outline: none;
-}
-
-input[type="range"]::-webkit-slider-runnable-track {
-  width: 100%;
-  height: 8.4px;
-  cursor: pointer;
-  border-color: var(--dark-grey), var(--light-grey);
-  background: var(--bg-main);
-  border-radius: 1.3px;
-  border: 0.2px inset var(--dark-grey);
-}
-
-input[type="range"]::-webkit-slider-thumb {
-  border-color: var(--active);
-  border: 1px solid var(--dark-grey);
-  height: 36px;
-  width: 16px;
-  border-radius: 3px;
-  background: var(--active);
-  cursor: pointer;
-  -webkit-appearance: none;
-  margin-top: -14px;
-}
-
-input[type="range"]:focus::-webkit-slider-runnable-track {
-  background: var(--bg-main);
-}
-
-input[type="range"]::-moz-range-track {
-  width: 100%;
-  height: 8.4px;
-  cursor: pointer;
-  border-color: var(--dark-grey), var(--light-grey);
-  background: var(--bg-main);
-  border-radius: 1.3px;
-  border: 0.2px inset var(--dark-grey);
-}
-
-input[type="range"]::-moz-range-thumb {
-  border-color: var(--active);
-  border: 1px solid var(--dark-grey);
-  height: 36px;
-  width: 16px;
-  border-radius: 3px;
-  background: var(--active);
-  cursor: pointer;
-}
-
-::placeholder {
-  color: var(--text);
-  opacity: 0.7;
-}
-
-*:focus {
-  outline: var(--active) solid 2px;
-}
-
-@media (prefers-color-scheme: light) {
-  body {
-    --text: #000;
-    --text-secondary: #fff;
-    --bg-main: #e3e7ea;
-    --bg-secondary: #fff;
-  }
-
-  body.dark-theme {
-    --text: #fff;
-    --text-secondary: #000;
-    --bg-main: #3c4043;
-    --bg-secondary: #292a2d;
-  }
-
-  .popup {
-    background-color: var(--bg-secondary);
-  }
-}
-
-#volume-value {
-  float: right;
-}
-
-.subheading {
-  padding: 0 10px;
-}
-
-.subheading h1 {
-  color: var(--active);
-}
-
-.subheading hr {
-  height: 1px;
-  background-color: var(--active);
-  border: none;
-}