Apply preferred theme to media placeholders.

This commit is contained in:
hackademix 2022-03-11 23:40:37 +01:00
parent da7ee2104a
commit 45971b4925
1 changed files with 46 additions and 10 deletions

View File

@ -5,11 +5,44 @@
*/ */
a.__NoScript_PlaceHolder__ { a.__NoScript_PlaceHolder__ {
outline: 2px solid #d12027; --accent-color: #d12027;
color: #444 !important; --fg-color1: #ccc;
text-decoration: none; --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; text-align: center;
background: rgba(240,240,240, .7) no-repeat center; background: var(--tab-color2) no-repeat center;
background-size: contain; background-size: contain;
visibility: visible !important; visibility: visible !important;
cursor: pointer; cursor: pointer;
@ -28,7 +61,7 @@ a.__NoScript_PlaceHolder__ {
a.__NoScript_PlaceHolder__:hover { a.__NoScript_PlaceHolder__:hover {
opacity: 1; opacity: 1;
text-decoration: underline; text-decoration: none !important;
} }
a.__NoScript_PlaceHolder__.__ns__closing { a.__NoScript_PlaceHolder__.__ns__closing {
@ -57,7 +90,7 @@ a.__NoScript_PlaceHolder__ > span {
top: 2px; top: 2px;
right: 2px; right: 2px;
display: block; display: block;
color: #800; color: var(--accent-color);
font-size: 24px; font-size: 24px;
font-family: sans-serif; font-family: sans-serif;
font-weight: bold; font-weight: bold;
@ -67,15 +100,15 @@ a.__NoScript_PlaceHolder__ > span {
transition: .2s all; transition: .2s all;
} }
.__NoScript_PlaceHolder__ button:hover { .__NoScript_PlaceHolder__ button:hover {
color: #f00; color: var(--fg-color2);
text-shadow: 0 0 4px #400; text-shadow: 0 0 4px var(--focus-color);
cursor: pointer; cursor: pointer;
} }
.__NoScript_PlaceHolder__ > span > span { .__NoScript_PlaceHolder__ > span > span {
display: block; display: block;
font-size: 18px; font-size: 18px;
background: rgba(240, 240, 240, .5); background-color: var(--tab-color1);
border-radius: 8px; border-radius: 8px;
padding: 8px; padding: 8px;
margin: 0; margin: 0;
@ -84,7 +117,10 @@ a.__NoScript_PlaceHolder__ > span {
word-break: break-all; word-break: break-all;
} }
.__NoScript_PlaceHolder__:hover > span > span { .__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 { a.__NoScript_PlaceHolder__.__ns__document {
position: fixed !important; position: fixed !important;