background changer 2

fixed css issues to make cards dark theme compatible, removed file upload due to bad quality

README.md

@@ -61,7 +61,7 @@ Better Canvas introduces improvements to the Canvas user interface:
 - Card Styles (image size, card roundness, card spacing, width, height, theme compatible)
 
 ## Planned Features
-- custom backgrounds
+- custom backgrounds (uploaded files, theme compatible, cached?)
 - custom side logo
 - widgets (music, timer)
 - fix darkmode fixer
@@ -90,6 +90,7 @@ Better Canvas introduces improvements to the Canvas user interface:
 - revamp cards page UI
 - streaks
 - caching pages for faster loading
+- liquid glass theme?
 
 ## Dev Installation
 

html/popup.html

@@ -774,7 +774,6 @@
             <h3 class="header-small">Custom Background</h3>
             <p>Use an image url or upload an image file</p>
             <input style="width:85%;" class="card-input" id="customBackgroundLink" placeholder="https://...">
-            <input style="width:80%;" class="card-file-input" type="file" id="customBackgroundUpload" accept="image/*">
             <button id="clearCustomBackground" class="big-button" style="margin-top: 8px;">Clear Background</button>
         </div>
 

js/background.js

@@ -100,7 +100,6 @@ chrome.runtime.onInstalled.addListener(function () {
             "cardHeight": 250,
             "customCardStyles": false,
             "customBackgroundLink": "",
-            "customBackgroundUpload": "",
         }
     };
 

js/content.js

@@ -261,7 +261,10 @@ function startExtension() {
         changeFavicon();
         updateReminders();
         applyCustomBackground();
+        
         //getClassAverages();
+        
+        setTimeout(() => document.getElementById("footer").remove(), 800);
         setTimeout(() => runDarkModeFixer(false), 800);
         setTimeout(() => runDarkModeFixer(false), 4500);
     });
@@ -375,7 +378,6 @@ function applyOptionsChanges(changes) {
                 applyAestheticChanges();
                 break;
             case ("customBackgroundLink"):
-            case ("customBackgroundUpload"):
                 applyCustomBackground();
                 break;
         }
@@ -387,13 +389,21 @@ function applyCustomBackground() {
     let style = document.querySelector("#bettercanvas-background") || document.createElement('style');
     style.id = "bettercanvas-background";
     
-    if (options.customBackgroundUpload && options.customBackgroundUpload !== "") {
+    if (options.customBackgroundLink && options.customBackgroundLink !== "") {
-        style.textContent = `#not_right_side { background-image: url('${options.customBackgroundUpload}') !important; background-size: cover !important; background-attachment: fixed !important; }`;
+        style.textContent = `
-    } else if (options.customBackgroundLink && options.customBackgroundLink !== "") {
+        #not_right_side { 
-        style.textContent = `#not_right_side { background-image: url('${options.customBackgroundLink}') !important; background-size: cover !important; background-attachment: fixed !important; }
+            background-image: url('${options.customBackgroundLink}') !important;
-        .ic-Dashboard-header__layout { background: none !important; }`; // try to make this hide things underneath and add to other side
+            background-size: cover !important;
-    } else {
+            background-attachment: fixed !important; 
-        style.textContent = "";
+        }
+        .ic-Dashboard-header__layout { 
+            background: none !important;  
+            backdrop-filter: blur(10px) !important;
+            border-radius: 5px;
+        }
+        .bettercanvas-gpa-card {background: var(--bcbackground-0) !important;}
+        .bettercanvas-gpa {background: var(--bcbackground-0) !important;}
+        .ic-DashboardCard {background: var(--bcbackground-0) !important;}`; // todo: liquid glass?
     }
     
     document.documentElement.appendChild(style);

js/popup.js

@@ -118,7 +118,6 @@ const defaultOptions = {
         "cardHeight": 250,
         "customCardStyles": false,
         "customBackgroundLink": "",
-        "customBackgroundUpload": "",
     }
 };
 
@@ -274,26 +273,6 @@ function setupCustomBackgroundLink(initial) {
     })
 }
 
-function setupCustomBackgroundUpload(initial) {
-    let el = document.querySelector("#customBackgroundUpload");
-    el.addEventListener("change", handleBackgroundUpload);
-}
-function handleBackgroundUpload(e) {
-    const file = e.target.files[0];
-    if (file) {
-        const reader = new FileReader();
-        reader.onload = function(event) {
-            const base64 = event.target.result;
-            chrome.storage.sync.set({
-                "customBackgroundUpload": base64,
-                "customBackgroundLink": ""
-            });
-            document.querySelector("#customBackgroundLink").value = "Using uploaded file";
-        }
-        reader.readAsDataURL(file);
-    }
-}
-
 function setup() {
 
     const menu = {
@@ -324,7 +303,6 @@ function setup() {
             { "identifier": "cardWidth", "setup": (initial) => setupCardWidthInput(initial) },
             { "identifier": "cardHeight", "setup": (initial) => setupCardHeightInput(initial) },
             { "identifier": "customBackgroundLink", "setup": (initial) => setupCustomBackgroundLink(initial)},
-            { "identifier": "customBackgroundUpload", "setup": (initial) => setupCustomBackgroundUpload(initial)},
         ],
     }
 
@@ -764,10 +742,8 @@ function setup() {
     document.getElementById("clearCustomBackground").addEventListener("click", () => {
          chrome.storage.sync.set({ 
             "customBackgroundLink": "",
-            "customBackgroundUpload": ""
         });
         document.querySelector("#customBackgroundLink").value = "";
-        document.querySelector("#customBackgroundUpload").value = "";
     });
 }