Fix for www.PlayInterference.com #14540
Conversation
This is for www. and not *. as legacy. exists This a drawing game - the colour palette gets modified by DarkReader, and on phone interface some dots appear with also same wrong colours for "border" on colour picker, so what you see isn't what you're drawing. This CSS fixes that and the same colours applies to .p-1 brushes preview. However, to avoid doubling the CSS, the "border-width: 0px" for colour picker squares also applies to .p-1 brushes' DIVs, which makes the brushes borders invisible (already 1px), and adding a new ".p-1 div{border-width: 1px !important}" at the end doesn't override that. However, the brush preview should contrast enough with the dark bg which has been made sligthly clear (it was really dark and merged with the real BG and black brush preview).
|
For now this fix works fine for the desktop version, but still has a little big issue for mobile. 
This is the standard look of the colour picker. See how the orange colour cell has a little dot and black border.
This is how it looks when using DarkReader without any fix. It's all off.
This is how it looks after the fix (undo looks "disabled" but I didn't touch the canvas yet, it works fine). It's fine for desktop as the brush preview shows the colour, but on phone it is hidden, and as the current approach hides the dots and borders it gets harder to use.
|
Improvement over the previous commit. This is now fully fixed.
| @@ -24472,6 +24472,168 @@ body { | |||
|
|
|||
| ================================ | |||
|
|
|||
| www.playinterference.com | |||
There was a problem hiding this comment.
Please remove www. (it will work as it would have www).
There was a problem hiding this comment.
I had just moved it to the "www." section as soon as you replied that, sorry, but it is back to "pla..." without the "www.".
| .p-1 div { | ||
| border-color: rgb(185,185,185) !important; | ||
| } | ||
| .col div[style*="background-color: rgb(255, 255, 255)"], |
There was a problem hiding this comment.
I understand IGNORE INLINE STYLE didn't work for you, but if you could try it one more time:
IGNORE INLINE STYLE
.col div[style*="background-color"]
.p-1 div[style*="background-color"]
There was a problem hiding this comment.
I've tried this, but the result is the same as not applying anything:
Also the same result when trying that code without the background-color selectors
Moved URL from "pla..." to "www.pla..."
|
Sample of the last code change (some screenshots as the page requires login). Normal: DarkReader: |
Forced real black for selected-colour instead of "black" which DarkReader turned into grey on real phone but not when emulating on desktop.
Fixed the black border turning grey - it got only black when pressing "apply" on the dev window, but not when loading the page with no user intervention, so I was getting tricked by that.
|
After changes and testing, I think it's all done now. |
This is for www. and not *. as legacy. exists
This is a drawing game - the colour palette gets modified by DarkReader, and on phone interface some dots appear with also same wrong colours for "border" on colour picker, so what you see isn't what you're drawing. This CSS fixes that and the same colours applies to .p-1 brushes preview. However, to avoid doubling the CSS, the "border-width: 0px" for colour picker squares on phone layout also applies to .p-1 brushes' DIVs, which makes the brushes borders invisible (already 1px), and adding a new ".p-1 div{border-width: 1px !important}" at the end doesn't override that. However, the brush preview should contrast enough with the dark bg which has been made sligthly clear (it was really dark and merged with the real BG and black brush preview).
This goes after trying
IGNORE INLINE STYLE(no effect) and variables as--darkreader-neutral-background, etc. (still wrong palette colours)The
...would be useful, but there's no way to simply tell DR to revert to the original colours, and we use many different ones, not standard colour names.
And this unfortunately doesn't exist yet.
#4144