From 45971b49256ffe59e00b8493114acd6b3b266ff5 Mon Sep 17 00:00:00 2001
From: hackademix <giorgio@maone.net>
Date: Fri, 11 Mar 2022 23:40:37 +0100
Subject: [PATCH] Apply preferred theme to media placeholders.

---
 src/content/content.css | 56 +++++++++++++++++++++++++++++++++--------
 1 file changed, 46 insertions(+), 10 deletions(-)

diff --git a/src/content/content.css b/src/content/content.css
index 4e4dfc3..3cdb003 100644
--- a/src/content/content.css
+++ b/src/content/content.css
@@ -5,11 +5,44 @@
  */
 
 a.__NoScript_PlaceHolder__ {
-  outline: 2px solid #d12027;
-  color: #444 !important;
-  text-decoration: none;
+  --accent-color: #d12027;
+  --fg-color1: #ccc;
+  --fg-color2: #fff;
+  --text-color: #ddd;
+  --bg-color1: #000;
+  --bg-color2: #212026;
+  --form-color1: #333;
+  --form-color2: #111;
+  --focus-color: #4007;
+  --tab-color1: #6668;
+  --tab-color2: #3348;
+  --form-check-color: var(--bg-color2);
+  --form-control-color: var(--accent-color);
+  --hilite-color: #8008;
+}
+
+@media (prefers-color-scheme: light) {
+  a.__NoScript_PlaceHolder__ {
+      --fg-color1: #555;
+      --fg-color2: #000;
+      --text-color: #333;
+      --bg-color1: #ddd;
+      --bg-color2: #fff;
+      --form-color1: #ccc;
+      --form-color2: #eee;
+      --tab-color1: #ddda;
+      --tab-color2: #8888;
+      --focus-color: #faa7;
+  }
+}
+
+
+a.__NoScript_PlaceHolder__ {
+  outline: 2px solid --var(--accent-color);
+  color: var(--text-color) !important;
+  text-decoration: none !important;
   text-align: center;
-  background: rgba(240,240,240, .7) no-repeat center;
+  background: var(--tab-color2) no-repeat center;
   background-size: contain;
   visibility: visible !important;
   cursor: pointer;
@@ -28,7 +61,7 @@ a.__NoScript_PlaceHolder__ {
 
 a.__NoScript_PlaceHolder__:hover {
   opacity: 1;
-  text-decoration: underline;
+  text-decoration: none !important;
 }
 
 a.__NoScript_PlaceHolder__.__ns__closing {
@@ -57,7 +90,7 @@ a.__NoScript_PlaceHolder__ > span {
   top: 2px;
   right: 2px;
   display: block;
-  color: #800;
+  color: var(--accent-color);
   font-size: 24px;
   font-family: sans-serif;
   font-weight: bold;
@@ -67,15 +100,15 @@ a.__NoScript_PlaceHolder__ > span {
   transition: .2s all;
 }
 .__NoScript_PlaceHolder__  button:hover {
-  color: #f00;
-  text-shadow: 0 0 4px #400;
+  color: var(--fg-color2);
+  text-shadow: 0 0 4px var(--focus-color);
   cursor: pointer;
 }
 
 .__NoScript_PlaceHolder__ > span > span {
   display: block;
   font-size: 18px;
-  background: rgba(240, 240, 240, .5);
+  background-color: var(--tab-color1);
   border-radius: 8px;
   padding: 8px;
   margin: 0;
@@ -84,7 +117,10 @@ a.__NoScript_PlaceHolder__ > span {
   word-break: break-all;
 }
 .__NoScript_PlaceHolder__:hover > span > span {
-  background: rgba(240, 240, 240, .8)
+  background-color: var(--bg-color2);
+  color: var(--accent-color);
+  box-shadow: 0 0 4px 4px var(--focus-color);
+  border: none;
 }
 a.__NoScript_PlaceHolder__.__ns__document {
   position: fixed !important;