CSS fixes

• Videoseitennavigation angepasst • Podcast-iFrame angepasst (evtl. buggy)
Saphareas · Feb 3, 2018 · f4ae8e4 · f4ae8e4
1 parent bf66ed4
commit f4ae8e4
Show file tree

Hide file tree

Showing 8 changed files with 137 additions and 37 deletions.
diff --git a/chrome/content.js b/chrome/content.js
@@ -1,17 +1,46 @@
-const CSS_FILE = chrome.runtime.getURL("darken_ps.css"); //Voll-qualifizierter Pfad zur "dunklen" CSS-Datei
+const MAIN_CSS = chrome.runtime.getURL("darken_ps.css"); //Voll-qualifizierter Pfad zur "dunklen" CSS-Datei
+const POD_CSS = chrome.runtime.getURL("darken_podcast.css"); //Voll-qualifizierter Pfad zur "dunklen" CSS-Datei für de Podcast-Seite
+var firstLoad = true;
+
+function _podcastHelper(iFrame, element) {
+    iFrame.contentWindow.document.getElementsByTagName("head")[0].appendChild(element);
+}
 
 function onToggleMode(request, sender) {
     if (request == "toDark") { //Wenn auf dunkel gewechselt werden soll
         var element = document.createElement("link");
         element.setAttribute("id", "darkmode"); //id, um es später wieder zu finden
         element.setAttribute("rel", "stylesheet");
         element.setAttribute("type", "text/css");
-        element.setAttribute("href", CSS_FILE);
+        element.setAttribute("href", MAIN_CSS);
+
         document.getElementsByTagName("head")[0].appendChild(element); //hänge an den Head an
+
+        hasIFrame = document.getElementsByTagName("iframe")[0];
+        if (hasIFrame) {
+            var element2 = document.createElement("link");
+            element2.setAttribute("id", "darkmode"); //id, um es später wieder zu finden
+            element2.setAttribute("rel", "stylesheet");
+            element2.setAttribute("type", "text/css");
+            element2.setAttribute("href",POD_CSS);
+            hasIFrame.addEventListener("load", _podcastHelper(hasIFrame, element2));
+            if (firstLoad) {
+                firstLoad = false;
+            } else {
+                _podcastHelper(hasIFrame, element2);
+            }
+        }
+
         chrome.storage.local.set({isDark: true});
-    }
-    else { //also wenn auf normal gewechselt werden soll
+    } else { //also wenn auf normal gewechselt werden soll
+
         document.getElementById("darkmode").remove(); //entferne vorher erstelltes link-Element aus DOM
+
+        hasIFrame = document.getElementsByTagName("iframe")[0]
+        if (hasIFrame) {
+            hasIFrame.contentWindow.document.getElementById("darkmode").remove();
+        }
+
         chrome.storage.local.set({isDark: false});
     }
 }

diff --git a/chrome/darken_podcast.css b/chrome/darken_podcast.css
@@ -0,0 +1,15 @@
+html, body,
+#content, #primary
+.post,
+.entry-header,
+.entry-title a,
+.entry-meta,
+.entry-content {
+    background: #242424 !important;
+    color: #fff !important;
+}
+
+.cat-links a,
+.page-numbers:link {
+    color: #767676;
+}
diff --git a/chrome/darken_ps.css b/chrome/darken_ps.css
@@ -1,13 +1,18 @@
 /* Hintergrund und Textfarbe der Hauptseite */
-body {
-    background-color: #111111;
-    color: #fff;
+body,
+iframe {
+    background: #111111 !important;
+    color: #fff !important;
 }
 
 /* Hintergrund und Textfarbe des Video-Containers */
-.main .container {
-    background-color: #242424;
-    color: #fff;
+.main .container,
+.pagenav {
+    background: #242424 !important;
+    color: #fff !important;
+}
+a.pagenav {
+    color: #0b8043 !important;
 }
 
 /* Textfarbe für alle Überschriften */
@@ -16,7 +21,7 @@ h2,
 h3,
 h4,
 h5 {
-    color: #fff;
+    color: #fff !important;
 }
 
 /* Textfarbe für alle Überschriften-Links... */
@@ -25,7 +30,7 @@ h2 a:link,
 h3 a:link,
 h4 a:link,
 h5 a:link {
-    color: #fff;
+    color: #fff !important;
 }
 
 /* ...auch die bereits besuchten */
@@ -34,7 +39,7 @@ h2 a:visited,
 h3 a:visited,
 h4 a:visited,
 h5 a:visited {
-    color: #fff;
+    color: #fff !important;
 }
 
 /* Explizit Textfarbe für... */
@@ -47,11 +52,11 @@ h5 a:visited {
 
 /* Breadcrumbs etwas dunkler/grauer */
 .breadcrumb a {
-     color: #999;
+     color: #999 !important;
 }
 
 /* Break-Farbe von Beige auf Weiß zu Schwarz auf Grau */
 hr {
-    border-top: 1px solid #111111;
-    border-bottom: 1px solid #242424;
+    border-top: 1px solid #111111 !important;
+    border-bottom: 1px solid #242424 !important;
 }
diff --git a/chrome/manifest.json b/chrome/manifest.json
@@ -1,8 +1,9 @@
 {
   "manifest_version": 2,
   "name": "Pietsmiet.de Dark Mode",
-  "version": "17.1",
+  "version": "17.2",
   "author": "Fabian Große/Saphareas",
+  "homepage_url": "https://github.com/Saphareas/pietsmiet.de-Dark-Mode",
 
   "description": "Fügt der Pietsmiet.de-Seite ein dunkles Theme/einen Nachtmodus hinzu.",
 
@@ -38,7 +39,8 @@
   ],
 
   "web_accessible_resources": [
-      "darken_ps.css"
+      "darken_ps.css",
+      "darken_podcast.css"
   ]
 
 }
diff --git a/firefox/content.js b/firefox/content.js
@@ -1,17 +1,46 @@
-const CSS_FILE = browser.runtime.getURL("darken_ps.css"); //Voll-qualifizierter Pfad zur "dunklen" CSS-Datei
+const MAIN_CSS = browser.runtime.getURL("darken_ps.css"); //Voll-qualifizierter Pfad zur "dunklen" CSS-Datei
+const POD_CSS = browser.runtime.getURL("darken_podcast.css"); //Voll-qualifizierter Pfad zur "dunklen" CSS-Datei für de Podcast-Seite
+var firstLoad = true;
+
+function _podcastHelper(iFrame, element) {
+    iFrame.contentWindow.document.getElementsByTagName("head")[0].appendChild(element);
+}
 
 function onToggleMode(request, sender) {
     if (request == "toDark") { //Wenn auf dunkel gewechselt werden soll
         var element = document.createElement("link");
         element.setAttribute("id", "darkmode"); //id, um es später wieder zu finden
         element.setAttribute("rel", "stylesheet");
         element.setAttribute("type", "text/css");
-        element.setAttribute("href", CSS_FILE);
+        element.setAttribute("href", MAIN_CSS);
+
         document.getElementsByTagName("head")[0].appendChild(element); //hänge an den Head an
+
+        hasIFrame = document.getElementsByTagName("iframe")[0];
+        if (hasIFrame) {
+            var element2 = document.createElement("link");
+            element2.setAttribute("id", "darkmode"); //id, um es später wieder zu finden
+            element2.setAttribute("rel", "stylesheet");
+            element2.setAttribute("type", "text/css");
+            element2.setAttribute("href",POD_CSS);
+            hasIFrame.addEventListener("load", _podcastHelper(hasIFrame, element2));
+            if (firstLoad) {
+                firstLoad = false;
+            } else {
+                _podcastHelper(hasIFrame, element2);
+            }
+        }
+
         browser.storage.local.set({isDark: true});
-    }
-    else { //also wenn auf normal gewechselt werden soll
+    } else { //also wenn auf normal gewechselt werden soll
+
         document.getElementById("darkmode").remove(); //entferne vorher erstelltes link-Element aus DOM
+
+        hasIFrame = document.getElementsByTagName("iframe")[0]
+        if (hasIFrame) {
+            hasIFrame.contentWindow.document.getElementById("darkmode").remove();
+        }
+
         browser.storage.local.set({isDark: false});
     }
 }

diff --git a/firefox/darken_podcast.css b/firefox/darken_podcast.css
@@ -0,0 +1,15 @@
+html, body,
+#content, #primary
+.post,
+.entry-header,
+.entry-title a,
+.entry-meta,
+.entry-content {
+    background: #242424 !important;
+    color: #fff !important;
+}
+
+.cat-links a,
+.page-numbers:link {
+    color: #767676;
+}
diff --git a/firefox/darken_ps.css b/firefox/darken_ps.css
@@ -1,13 +1,18 @@
 /* Hintergrund und Textfarbe der Hauptseite */
-body {
-    background-color: #111111;
-    color: #fff;
+body,
+iframe {
+    background: #111111 !important;
+    color: #fff !important;
 }
 
 /* Hintergrund und Textfarbe des Video-Containers */
-.main .container {
-    background-color: #242424;
-    color: #fff;
+.main .container,
+.pagenav {
+    background: #242424 !important;
+    color: #fff !important;
+}
+a.pagenav {
+    color: #0b8043 !important;
 }
 
 /* Textfarbe für alle Überschriften */
@@ -16,7 +21,7 @@ h2,
 h3,
 h4,
 h5 {
-    color: #fff;
+    color: #fff !important;
 }
 
 /* Textfarbe für alle Überschriften-Links... */
@@ -25,7 +30,7 @@ h2 a:link,
 h3 a:link,
 h4 a:link,
 h5 a:link {
-    color: #fff;
+    color: #fff !important;
 }
 
 /* ...auch die bereits besuchten */
@@ -34,7 +39,7 @@ h2 a:visited,
 h3 a:visited,
 h4 a:visited,
 h5 a:visited {
-    color: #fff;
+    color: #fff !important;
 }
 
 /* Explizit Textfarbe für... */
@@ -47,11 +52,11 @@ h5 a:visited {
 
 /* Breadcrumbs etwas dunkler/grauer */
 .breadcrumb a {
-     color: #999;
+     color: #999 !important;
 }
 
 /* Break-Farbe von Beige auf Weiß zu Schwarz auf Grau */
 hr {
-    border-top: 1px solid #111111;
-    border-bottom: 1px solid #242424;
+    border-top: 1px solid #111111 !important;
+    border-bottom: 1px solid #242424 !important;
 }
diff --git a/firefox/manifest.json b/firefox/manifest.json
@@ -1,8 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Pietsmiet.de Dark Mode",
-  "shortname": "Dark Pietsmiet",
-  "version": "17.1",
+  "version": "17.2",
   "author": "Fabian Große/Saphareas",
   "homepage_url": "https://github.com/Saphareas/pietsmiet.de-Dark-Mode",
 
@@ -46,7 +45,8 @@
   ],
 
   "web_accessible_resources": [
-      "darken_ps.css"
+      "darken_ps.css",
+      "darken_podcast.css"
   ]
 
 }