Фильтр CSS: Википедия: Фон встроенной математики не прозрачен - PullRequest
0 голосов
/ 05 ноября 2018

На днях я с удовольствием писал расширение для Chrome для создания темного режима для Википедии. Все прошло хорошо, но потом я заметил некоторые артефакты:

Фрагмент скриншота артефактов.

Соответствующий HTML-код:

<span class="texhtml">
<i>ω</i>
<span style="position:relative; 
    margin-right:-0.75em; 
    right:0.75em; 
    bottom:0.75em;;">
        <small>→</small>
</span>

... с сайта: https://en.wikipedia.org/wiki/Vorticity

Я не могу найти ни одного параметра background css для этого диапазона или любого другого узла внутри него ... Когда я изменяю настройки фона в своем расширении, ничего не происходит.

Вот файл css, загруженный моим расширением:

:root                                                                              
{                                                                                  
    /* COLOR DEFINITONS */                                                         

    /* Color palette from hackaday.com */                                          
    --background: rgb(30,30,30);                                                   
    --text: rgb(221,221,221);                                                      
    --border: rgb(72,72,72);                                                       
    --links: rgb(23,168,250);                                                      
}                                                                                  

/* Remove top banner */                                                            
#cnotice-main                                                                      
{                                                                                  
    display: none !important;                                                      
}                                                                                  

/* Borders */                                                                      
*                                                                                  
{                                                                                  
    border-color: var(--border) !important;                                        
}                                                                                  

/* Links */                                                                        
a                                                                                  
{                                                                                  
    color: var(--links) !important;                                                
}                                                                                  

/* Invert Wikipedia Logo */                                                        
#p-logo                                                                            
{                                                                                  
    filter: invert(100%) !important;                                               
}                                                                                  

/* Change colors where appropriate */                                              
body, #content,                                                                    
*[class~='navbox'], td, #simpleSearch,                                             
*[class^='suggestions'], *[class^='special-'], input,                              
#mw-head, table, div[id='catlinks'], div[class^='thumb'],                          
table[class^='wikitable'], th, span[class='tocnumber'],                            
*[id^='p-namespaces'], *[id^='p-view'], span, li,                                  
div[class^='mw-'], *[class^='Nav'],                                                
*[id^='mwe-popup'],                                                                
*[class^='mwe-popup'],                                                             
*[id^='mp-'], div[id='toc'],                                                       
h1, h2, h3, h4, h5, h6                                                             
{                                                                                  
    background-image: none !important;                                             
    background-color: var(--background) !important;                                
    background: var(--background) !important;                                                                                                              
    color: var(--text) !important;                                                 
}                                                                                  

/* DOES NOT WORK, i.e. background is still solid grey. */                          
[class='texhtml']                                                                  
{                                                                                  
    background rgb(0,0,0,0.5) !important;                                          
}                                                                                  

/* Latex formulae */                                                               
.mwe-math-fallback-image-inline                                                    
{                                                                                  
    filter: invert(100%);                                                          
}           

Любая помощь будет оценена!

1 Ответ

0 голосов
/ 05 ноября 2018

С помощью CSS вы устанавливаете фон для каждого диапазона.

Вы должны исключить эти теги из своего селектора: вместо применения фона к каждому тегу <span>, вы должны попробовать:

span:not(.texhtml),
span:not(.texhtml) span
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...