CSS content hexadecimal value getting trimmed when compiled - css

I have a series of icons whose content is set from Kendo UI React, app is CRA. I'm trying to change the first icon by changing its content, as recommended.
th.k-header[role=columnheader]:nth-child(1) .k-i-more-vertical:before {
color: #ff0 !important;
content: "\e030" !important;
}
However, when I inspect the element in a local environment, the unicode escape sequence has changed and is missing the initial backslash. It only shows up as a hexadecimal. (Formatted text and image):
.jITeNU th.k-header[role=columnheader]:nth-child(1) .k-i-more-vertical:before {
color: #ff0 !important;
content: "e030" !important;
}
Chrome DevTools
When the content value is edited directly in dev tools (content: "\e030" !important), the icon appears correctly.
Has anyone encountered this behavior before? I'm at a loss as to what is happening, since nothing else in the styles for that element has changed.

Related

Viewing plaintext files in light mode in Firefox

I want to view a plaintext file in light color theme in Firefox. Firefox is showing the file in dark mode by default (I am using Firefox dark mode, and I don't want to change that). I could see the css code setting the theme, but could not edit it permanently (it changed back when I reopened the text file). Is there a solution to this?
Yes, you can use something like this in a user-stylesheet:
#-moz-document plain-text-document() {
:root {
background-color: initial !important;
color: initial !important;
}
}
Though we could add a pref for that if you file a bug for it :)

Flask - Changes made to the css file doesn't get reflected on the browser

I am using Flask to write the webpage. I have made some changes in the css file. The changes are not reflected on the browser.
I have tried changing the background-color of the body of the webpage, but still it loads the old value set to the background-color.
body {
background-color: blue;
}
The background color should have changed to blue but still it appears to be lightgray which was the initial value given to background-color.

Chrome "Save to PDF" margins background-color?

When printing to PDF in Google Chrome ("Save to PDF" virtual printer), there's an option to set margins for every page in inches // cm. However, by default they are always white. Is there a way to change color to blue, or use background-image?
What I've tried:
Ensured all background graphics are printed:
#media print and (color) {
* {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
Tried to set bg-color for #page attribute:
#page {
size: 7in 10in;
margin: 1in;
}
Tried to set bg color for every element on page: html, body, #content .
This article shows an example, how to affect margins areas with footnotes:
#page:right{
#bottom-left {
margin: 10pt 0 30pt 0;
border-top: .25pt solid #666;
content: "My book";
font-size: 9pt;
color: #333;
}
}
But it doesn't work for me.
Also I've tried to inspect chrome build-in PDF previewer and found a string:
<embed id="plugin" type="application/x-google-chrome-pdf" src="chrome://print/190/0/print.pdf" stream-url="chrome://print/190/0/print.pdf" headers="" background-color="0xFF525659" top-toolbar-height="0" top-level-url="undefined">
However, it's a bit tricky to modify background-color though it's already loaded and rendered. And I'm not sure, if it affects resulted PDF or just preview:
Any other options? This feature is rather critical for me, so I'm ready for memory hotpatching or even rebuilding Chromium from source if needed at least.
Target platform: Win 10 x64
There exist no direct way, but you can fake it:
Goto Format > Page.
Set the margin to 0cm. Ignore printer warning.
Set the background to your favorite color in tab Area.
Goto tab Borders and define a border in the same color. On that tab use the setting "Spacing to Contents" to fake the margins.

External & local CSS is not considered when rendering page to PDF using PhantomJS

Is there a way to force PhantomJS to read CSS styles?
I'm currently using Angular and UI-Grid to generate a table and when a value in the table meets a condition (e.g. if value > 1000) it will get assigned to a specific CSS class. Then I generate a PDF file using PhantomJS.
CSS
.data-records-alarm {
color: red !important;
text-align: center;
}
I have noticed that it recognizes "text-align: center;" property but it won't recognize the color "color: red !important;".
I have also tried "color: red;" or moving the CSS style and having it locally in my HTML file but it doesn't work.
Im currently using PhantomJS 2.0.0 and tested the Chrome & Firefox browsers.
the only way i got it to work is by using -webkit-text-fill-color instead of color
.data-records-alarm {
-webkit-text-fill-color: red !important;
text-align: center;}

Override user agent (Chrome) default styles inside GWT

i've a TabBar that after the last Chrome upgrade (32.0.1700.76 m) is displayed with an outline on focused tabs:
In past version there wasn't. To restore old view i tried to set some outline in CSS, like this:
.gwt-TabBar .gwt-TabBarItem:focus {
outline: lime auto 5px !important;
}
(lime is just for see if it works).
Even this edit, the computed style still remains the default (-webkit-focus-ring-color auto 5px;
):
What should i do to override this user agent style?
EDIT
I think the blue outline is not of the HTML (div):
The one i want to put away is on the TabBar Item object:
I honestly don't know why the Churro solution worked before :(
I tried the following CSS to highlight the textarea on this Stackoverflow page, and it worked:
.wmd-input:focus {
outline: lime auto 5px !important;
}
Make sure your selector in front of :focus is correct.
EDIT
I took a look at a TabPanel in my own GWT app. The element that gets a blue ring around it in a TabBarItem is the Label (div) containing the tab's text, not the gwt-TabBarItem.
Try this selector: .gwt-TabBar .gwt-TabBarItem-selected .gwt-Label:focus

Resources