Better Brave Support (#102)

* Better Brave Support

* Added brave install video.

CHANGELOG.md

@@ -1,6 +1,10 @@
 Changelog
 ---
 
+# 78.0-2.1.0 [Better Brave Support]
+
+- Added themes that are better suited to the Brave Browser in the `braveThemes` directory
+
 # 78.0-2.0.1 [Non-Functional Updates]
 
 - Upgraded plugins to use React v18.

README.md

@@ -1,7 +1,7 @@
 # Doki Theme Web
-| Google Chrome                                                   | Microsoft Edge                                          | 
-|-----------------------------------------------------------------|---------------------------------------------------------|
-| ![Yotsuba Chrome](./screenshots/backgrounds/yotsuba_chrome.png) | ![Azuki Edge](./screenshots/backgrounds/azuki_edge.png) |
+| Google Chrome                                                   | Microsoft Edge                                          | Brave                                                                   |
+|-----------------------------------------------------------------|---------------------------------------------------------|-------------------------------------------------------------------------|
+| ![Yotsuba Chrome](./screenshots/backgrounds/yotsuba_chrome.png) | ![Azuki Edge](./screenshots/backgrounds/azuki_edge.png) | ![Hatsune Miku Brave](./screenshots/backgrounds/hatsune_miku_brave.png) |
 
 # Table of Contents
 
@@ -11,6 +11,7 @@
 - [Installation](#installation)
   - [Google Chrome](#google-chrome)
   - [Microsoft Edge](#microsoft-edge)
+  - [Brave](#brave)
 - [Contributions and Issues](#contributions-and-issues)
 
 
@@ -61,14 +62,28 @@ https://user-images.githubusercontent.com/15972415/157995436-98b957e0-1274-4f65-
 2. Open Edge
 3. Open the Extension Management page by navigating to edge://extensions.
     - The Extension Management page can also be opened by clicking on the Edge menu, hovering over More Tools then selecting Extensions.
-4. Enable Developer Mode by clicking the toggle switch next to Developer mode (1).
-5. Click the LOAD UNPACKED button and select the extension directory (2).
+4. Enable Developer Mode by clicking the toggle switch next to Developer mode.
+5. Click the LOAD UNPACKED button and select the extension directory.
 6. Navigate to the cloned repository
   1. To install a theme, go to `edgeThemes` and just select the theme directory you want.
   1. Then choose the `newTab` directory and `open` or confirm. Repeat this process for the `theme` extension.
 7. Enjoy!
 
+## Brave
 
+https://user-images.githubusercontent.com/15972415/163989146-c755797c-8686-43ff-9281-407074255e70.mp4
+
+### Steps
+1. Clone this repository
+2. Open Brave
+3. Open the Extension Management page by navigating to brave://extensions.
+  - The Extension Management page can also be opened by clicking on the Brave menu, then selecting Extensions.
+4. Enable Developer Mode by clicking the toggle switch next to Developer mode.
+5. Click the LOAD UNPACKED button and select the extension directory.
+6. Navigate to the cloned repository
+1. To install a theme, go to `braveThemes` and just select the theme directory you want.
+1. Then choose the `newTab` directory and `open` or confirm. Repeat this process for the `theme` extension.
+7. Enjoy!
 
 
 # Contributions and Issues

braveThemes/Aqua's Extensions/newTab/js/popup.js.LICENSE.txt

@@ -0,0 +1,29 @@
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

braveThemes/Aqua's Extensions/newTab/js/tab.js.LICENSE.txt

@@ -0,0 +1,29 @@
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

braveThemes/Aqua's Extensions/newTab/manifest.json

@@ -0,0 +1,48 @@
+{
+  "name": "Doki Theme for Brave: Aqua",
+  "short_name": "Doki Theme",
+  "version": "78.2.2",
+  "description": "A collection of themes based on girls from various anime, manga, and visual novels series.",
+  "manifest_version": 3,
+  "icons": {
+    "48": "icons/[email protected]",
+    "96": "icons/[email protected]"
+  },
+  "host_permissions": [
+    "*://*/*"
+  ],
+  "permissions": [
+    "search",
+    "tabs",
+    "activeTab",
+    "storage"
+  ],
+  "content_scripts": [
+    {
+      "matches": [
+        "*://*/*"
+      ],
+      "run_at": "document_idle",
+      "js": [
+        "js/scrollbarStyleInjection.js",
+        "js/selectionStyleInjection.js"
+      ]
+    }
+  ],
+  "background": {
+    "service_worker": "js/background.js"
+  },
+  "action": {
+    "browser_style": true,
+    "default_icon": {
+      "16": "icons/[email protected]",
+      "32": "icons/[email protected]",
+      "64": "icons/[email protected]"
+    },
+    "default_popup": "popup.html",
+    "default_title": "Doki Theme"
+  },
+  "chrome_url_overrides": {
+    "newtab": "tab.html"
+  }
+}

braveThemes/Aqua's Extensions/newTab/popup.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Doki Theme</title>
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+    <script src="js/popup.js"></script>
+    <style>
+      :root {
+        --base-background: #2f363c;
+      }
+
+      html {
+        background-color: var(--base-background);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="popup"></div>
+  </body>
+</html>

braveThemes/Aqua's Extensions/newTab/tab.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>New Tab</title>
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+    <script src="js/tab.js"></script>
+    <style>
+      :root {
+        --base-background: #2f363c;
+        --accent-color: #a73035;
+        --search-border-radius: 40px;
+      }
+
+      html,
+      #tab,
+      body {
+        background-color: var(--base-background);
+        width: 100%;
+        height: 100%;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+          Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+        font-size: 16px;
+      }
+
+      html,
+      body {
+        margin: 0;
+      }
+      main {
+        padding-top: 9.87vw;
+      }
+
+      /*Logo & WordMark*/
+      .logo-and-wordmark {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        margin-bottom: 49px;
+      }
+      .logo-and-wordmark .logo {
+        display: inline-block;
+        height: 96px;
+        width: 96px;
+      }
+      .logo-and-wordmark .wordmark {
+        display: inline-block;
+        font-size: 3rem;
+        color: var(--accent-color);
+        text-shadow: 1px 0 0 var(--base-background),
+          0 1px 0 var(--base-background), -1px 0 0 var(--base-background),
+          0 -1px 0 var(--base-background);
+        margin-inline-start: 15px;
+      }
+      /*Search Bar*/
+      .search-inner-wrapper {
+        width: 50vw;
+        cursor: default;
+        display: flex;
+        min-height: 48px;
+        margin: 0 auto;
+        position: relative;
+      }
+      input[type="search"] {
+        background-size: 24px;
+        border: solid 1px transparent;
+        border-radius: var(--search-border-radius);
+        box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2),
+          0 0 0 1px rgba(0, 0, 0, 0.15);
+        font-size: 15px;
+        padding: 0;
+        padding-inline-end: 48px;
+        padding-inline-start: 46px;
+        width: 100%;
+      }
+
+      input:hover {
+        box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2),
+          0 0 0 1px rgba(0, 0, 0, 0.25);
+      }
+      .search-inner-wrapper:active input,
+      input:focus {
+        border: 1px solid #0060df;
+        box-shadow: 0 0 0 1px #0060df, 0 0 0 4px rgba(0, 96, 223, 0.3);
+      }
+      .search-button {
+        background: url("forward.svg") no-repeat center center;
+        background-size: 16px 16px;
+        border: 0;
+        /*border-radius: 0 var(--search-border-radius) var(--search-border-radius) 0;*/
+        height: 100%;
+        inset-inline-end: 0;
+        position: absolute;
+        width: 48px;
+      }
+      .search-button:active {
+        background-color: rgba(12, 12, 13, 0.2);
+      }
+      .search-button:focus,
+      .search-button:hover {
+        background-color: rgba(12, 12, 13, 0.1);
+        cursor: pointer;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="tab"></div>
+  </body>
+</html>