add simple theme

Author: Sneezry

_locales/en/messages.json

@@ -305,6 +305,10 @@
         "message": "Dark",
         "description": "Dark theme"
     },
+    "theme_simple": {
+        "message": "Simple",
+        "description": "Simple theme"
+    },
     "theme_high_contrast": {
         "message": "High Contrast",
         "description": "High Contrast theme"

sass/_ui.scss

@@ -61,6 +61,25 @@ $themes: (
     grey-search: rgba(255, 255, 255, 0.35),
     blue-menu: #2a2d2e,
   ),
+  simple: (
+    black-1: black,
+    black-transparent: rgba(0, 0, 0, 0.5),
+    white-1: white,
+    white-transparent: rgba(255, 255, 255, 0.5),
+    grey-1: grey,
+    grey-2: #ccc,
+    grey-3: #eee,
+    grey-background: #fff,
+    blue-1: #08c,
+    yellow-1: #fff1ba,
+    yellow-2: #fff4cc,
+    red-1: #dd4b39,
+    red-2: #eea59c,
+    black-search: #2a2a2e,
+    white-search: #f9f9fa,
+    grey-search: #b1b1b3,
+    blue-menu: #f4fcff,
+  ),
 );
 
 $theme-map: null;

sass/popup.scss

@@ -1078,6 +1078,74 @@ svg {
   }
 }
 
+// Simple overrides
+.theme-simple {
+  .header {
+    border-bottom: white 1px solid !important;
+
+    &::after {
+      content: "";
+      display: block;
+      margin: 0 20px -1px 20px;
+      border-bottom: #eee 1px solid;
+    }
+  }
+
+  #search {
+    border-color: white !important;
+  }
+
+  .entry {
+    border-color: white !important;
+  }
+
+  &:not(.edit) {
+    .entry:hover {
+      background: #f8f8f8;
+    }
+  }
+
+  .control-group select {
+    border-color: white !important;
+  }
+
+  .menuList {
+    border-color: white !important;
+
+    p {
+      border-color: white !important;
+    }
+  }
+
+  ::-webkit-scrollbar {
+    background-color: white !important;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border: 2px solid white !important;
+  }
+
+  .button {
+    background: #f2f2f2 !important;
+    border: #f2f2f2 1px solid !important;
+    color: black !important;
+
+    &:hover {
+      background: #f8f8f8 !important;
+      border: #f8f8f8 1px solid !important;
+    }
+  }
+
+  #info {
+    box-shadow: none !important;
+  }
+
+  .message-box {
+    border: #ccc 1px solid;
+    box-shadow: none !important;
+  }
+}
+
 // Accessibility overrides
 .theme-accessibility {
   select {

src/components/Popup.vue

@@ -2,9 +2,11 @@
   <div
     v-cloak
     v-bind:class="{
-      'theme-normal': theme !== 'accessibility' && theme !== 'dark',
+      'theme-normal':
+        theme !== 'accessibility' && theme !== 'dark' && theme !== 'simple',
       'theme-accessibility': theme === 'accessibility',
       'theme-dark': theme === 'dark',
+      'theme-simple': theme === 'simple',
       hideoutline,
     }"
     v-on:mousedown="hideoutline = true"

src/components/Popup/PreferencesPage.vue

@@ -7,6 +7,7 @@
     >
       <option value="normal">{{ i18n.theme_light }}</option>
       <option value="dark">{{ i18n.theme_dark }}</option>
+      <option value="simple">{{ i18n.theme_simple }}</option>
       <option value="accessibility">{{ i18n.theme_high_contrast }}</option>
     </a-select-input>
     <a-select-input