Added the ability to disable transparency globally #7

2 files changed, 44 insertions, 4 deletions

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);
       }