From 3176cd97d89b3ae161f09956973ecb7ec01a9c3f Mon Sep 17 00:00:00 2001
From: sameerasw <sameera.whoami@gmail.com>
Date: Sat, 12 Apr 2025 15:37:43 +0530
Subject: Added the ability to disable transparency globally #7

---
 popup/popup.css | 25 +++++++++++++++++++++++++
 popup/popup.js  | 23 +++++++++++++++++++----
 2 files changed, 44 insertions(+), 4 deletions(-)

(limited to 'popup')

diff --git a/popup/popup.css b/popup/popup.css
index 3b71d1e..6dd3829 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -484,3 +484,28 @@ input:checked + .slider:before {
   color: var(--text-secondary);
   margin-left: 8px;
 }
+
+/* Add these styles at the end of the file */
+
+/* Overridden feature styles */
+.overridden-feature {
+  opacity: 0.7;
+  position: relative;
+}
+
+.overridden-label {
+  color: var(--warning-color);
+  font-size: 11px;
+  font-style: italic;
+  margin-left: 6px;
+  font-weight: normal;
+}
+
+.disabled-toggle .slider {
+  background-color: var(--border-color) !important;
+  cursor: not-allowed;
+}
+
+.disabled-toggle input:checked + .slider {
+  background-color: rgba(var(--accent-color), 0.5) !important;
+}
diff --git a/popup/popup.js b/popup/popup.js
index 8feac4d..6448194 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -278,24 +278,39 @@ new (class ExtensionPopup {
 
         this.currentSiteFeatures.appendChild(skipForceThemingToggle);
       }
+      
+      // Check if transparency is globally disabled
+      const isTransparencyDisabled = this.globalSettings.disableTransparency === true;
+      
       for (const [feature, css] of Object.entries(features)) {
         const displayFeatureName = feature.includes("-")
           ? feature.split("-")[1]
           : feature;
 
         const isChecked = this.siteSettings[feature] ?? true;
+        const isTransparencyFeature = feature.toLowerCase().includes("transparency");
+        const isOverridden = isTransparencyDisabled && isTransparencyFeature;
 
         const featureToggle = document.createElement("div");
         featureToggle.className = "feature-toggle";
-        featureToggle.innerHTML = `
-          <span class="feature-name">${displayFeatureName}</span>
-          <label class="toggle-switch">
+        
+        // Create the base toggle HTML
+        let toggleHTML = `
+          <span class="feature-name">${displayFeatureName}${isOverridden ? ' <span class="overridden-label">[overridden]</span>' : ''}</span>
+          <label class="toggle-switch ${isOverridden ? 'disabled-toggle' : ''}">
             <input type="checkbox" name="${currentSiteKey}|${feature}" ${
           isChecked ? "checked" : ""
-        }>
+        } ${isOverridden ? "disabled" : ""}>
             <span class="slider round"></span>
           </label>
         `;
+        
+        featureToggle.innerHTML = toggleHTML;
+        
+        // If this is a transparency feature and it's disabled globally, add a class
+        if (isOverridden) {
+          featureToggle.classList.add("overridden-feature");
+        }
 
         this.currentSiteFeatures.appendChild(featureToggle);
       }
-- 
cgit v1.2.3