diff options
| -rw-r--r-- | manifest.json | 2 | ||||
| -rw-r--r-- | popup/popup.css | 15 | ||||
| -rw-r--r-- | popup/popup.js | 41 |
3 files changed, 54 insertions, 4 deletions
diff --git a/manifest.json b/manifest.json index 8197932..9f94fdb 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 2, "name": "Zen Internet", - "version": "1.7.1", + "version": "1.7.2", "description": "Inject custom css from my repository in real time", "browser_specific_settings": { "gecko": { diff --git a/popup/popup.css b/popup/popup.css index 6dd3829..761b154 100644 --- a/popup/popup.css +++ b/popup/popup.css @@ -509,3 +509,18 @@ input:checked + .slider:before { .disabled-toggle input:checked + .slider {
background-color: rgba(var(--accent-color), 0.5) !important;
}
+
+/* Add these styles for the disabled toggle */
+.toggle-switch.disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+}
+
+.toggle-switch.disabled .slider {
+ background-color: var(--border-color);
+ cursor: not-allowed;
+}
+
+.toggle-switch.disabled input:checked + .slider {
+ background-color: rgba(249, 135, 100, 0.5);
+}
diff --git a/popup/popup.js b/popup/popup.js index 7b00bb5..9a13ce2 100644 --- a/popup/popup.js +++ b/popup/popup.js @@ -238,13 +238,38 @@ new (class ExtensionPopup { this.isCurrentSite(site.replace(".css", "")) ); + // Check if we have any styles at all, including example.com + const hasExampleSite = "example.com.css" in styles; + const hasNoStyles = Object.keys(styles).length === 0; + + // Disable the force styling toggle if we found a theme for this site + if (currentSiteKey && currentSiteKey !== "example.com.css") { + // We found a specific theme for this site, no need for force styling + // Disable the skip/enable toggle + this.skipForceThemingSwitch.disabled = true; + this.siteToggleLabel.innerHTML = `${ + this.whitelistModeSwitch.checked ? "Enable" : "Skip Forcing" + } for this Site <span class="overridden-label">×</span>`; + } else { + // No specific theme found, enable the toggle + this.skipForceThemingSwitch.disabled = false; + this.siteToggleLabel.innerHTML = this.whitelistModeSwitch.checked + ? "Enable for this Site" + : "Skip Forcing for this Site"; + } + if (!currentSiteKey && this.globalSettings.forceStyling) { currentSiteKey = Object.keys(styles).find( (site) => site === "example.com.css" ); } - if (!currentSiteKey || currentSiteKey === "example.com.css") { + // Only show the request theme button if we have at least the example.com style + // but no specific theme for this site + if ( + (!currentSiteKey || currentSiteKey === "example.com.css") && + hasExampleSite + ) { const requestThemeButton = document.createElement("button"); requestThemeButton.className = "action-button primary"; requestThemeButton.innerHTML = `Request Theme for ${this.currentSiteHostname}`; @@ -254,6 +279,16 @@ new (class ExtensionPopup { }); this.currentSiteFeatures.appendChild(requestThemeButton); + } else if (hasNoStyles) { + // No styles at all, suggest to fetch first + const fetchFirstMessage = document.createElement("div"); + fetchFirstMessage.className = "toggle-container"; + fetchFirstMessage.innerHTML = ` + <div class="actions secondary"> + <span class="toggle-label warning">Please fetch styles first using the "Refetch latest styles" button</span> + </div> + `; + this.currentSiteFeatures.appendChild(fetchFirstMessage); } if (!currentSiteKey) { @@ -267,12 +302,12 @@ new (class ExtensionPopup { const features = styles[currentSiteKey]; - if (!currentSiteKey || currentSiteKey === "example.com.css") { + if (currentSiteKey === "example.com.css") { const skipForceThemingToggle = document.createElement("div"); skipForceThemingToggle.className = "toggle-container"; skipForceThemingToggle.innerHTML = ` <div class="actions secondary"> - <span class="toggle-label warning">No themes found for this website ;(</span> + <span class="toggle-label warning">No specific theme found for this website. Using default styling.</span> </div> `; |