I am trying to get my comments to be in color. I have this inputted into styles less but this comment only works with /* */ I want it to work as well or instead via //
atom-text-editor
.syntax--comment {
color: red;
}
I get the following:
Error compiling Less stylesheet:
Atom is based upon Chromium, which is why it includes the full developer tools as you might know them from the Chrome browser. The inspector will allow you to find the selector for any element.
To differentiate between block comments and line comments, you need to use different selectors:
atom-text-editor {
.syntax--comment.syntax--line {
color: blue
}
.syntax--comment.syntax--block {
color: red
}
}
Or, if you want to be super strict, use the selector .syntax--comment.syntax--line.syntax--double-slash.
Related
The browser version is Chrome 87.0.4280.88
Here is how I accidentally detected this bug:
There are two independent divs on the page and both are position: fixed;
One of them has a hover effect with which its mix-blend-mode is changed.
The other one has glassmorphism style on it with backdrop-filter: blur(...px);
The filter works only when the other element on the page is set to mix-blend-mode: normal; otherwise it looks like as if it was not supported.
I am going to quit using that hover effect for now anyway but if there is a trick then it would be nice to let the world know about it.
Came across this bug as well (Chrome 90).
Quick Fix:
Add any backdrop-filter rule to the same element that has the mix-blend-mode rule applied.
Example:
.blend {
mix-blend-mode: difference;
backdrop-filter: opacity(1); /* fixes the chrome-bug */
}
The previous solution also worked for me (Chrome 93). Although I've had to wrap my element inside another and apply the mix-blend-mode to it to make it work like so:
.wrapper {
mix-blend-mode: multiply;
}
.blend {
backdrop-filter: opacity(1);
}
Save me a lot of hours. Thanks a bunch!
Is there any way to programmatically collapse the empty space that results when a google ad does not show? If so, I would love to see an illustrative example of the same.
Searching around has led me to this official Google resource for accomplishing exactly what I've asked. However, that pertains to Doubleclick for Publishers, which is unfortunately a separate product. I'm pining to know how to handle this for AdSense - some of my users are staring at empty spaces at the moment.
In case it matters, here's an example ad snippet provided by Google AdSense (which I've center-aligned):
<div style="text-align:center">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-0000000000000000"
data-ad-slot="0044031319"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
I know this is old, but since I've been dealing with this now. A simple enough way to do this in jQuery is to check for all elements with the class adsbygoogle that have no child inside.
This selects all the elements with that class and hides them, effectively collapsing them.
$(".adsbygoogle:empty").hide();
You can do a lot of other stuff with it too, like if it's in a div and you need to hide that too, use the $(".adsbygoogle:empty").parent().hide() to collapse it further.
I'm sure this can be done with vanilla javascript as easily. I suggest to run this line of code after the DOM has loaded and even wait like 10 seconds just to see if google populates the ads.
But now it is very simple, just insert this CSS;
<style>
ins[data-ad-status=unfilled] {display:none!important}
</style>
I noticed that the AdSense code broadcasts a MessageEvent, so when I get a resize-me type event, with 'r_nh': 0 key/value pair, I hide the AdSense container (CSS class adsense-ad) manually.
If you have multiple AdSense containers on the same page, you could try to also parse the qid key from the same message.
window.addEventListener("message", (event)=>{
try {
let message = JSON.parse(event.data);
if (message.msg_type === 'resize-me') {
let shouldCollapseAd = false;
for (let index in message.key_value) {
let key = message.key_value[index].key;
let value = message.key_value[index].value;
if (key === 'r_nh' && value === '0') {
shouldCollapseAd = true;
}
}
if (shouldCollapseAd) {
$('.adsense-ad').hide();
}
}
} catch (e) {
}
});
The link provided which refers to DFP Premium at this point redirects to documentation for Google Ad Manager, so it's possible this feature is available without DFP Premium at this point.
Aside from that...
Usually the existence of an iframe element where you expect it is enough to know whether an ad was put where you were expecting one to be put, or not, in my experience.
setTimeout(function () {
if (!document.querySelector('#adcontainer').querySelectorAll('iframe').length > 0) {
document.querySelector('#adcontainer').remove();
}
},1000*2);
As to whether something useful was loaded into that iframe—that isn't something Google is concerned with, so good luck, you'll need it.
I tried to solve it with CSS as Adsense injects various iframe,ins, and divs with various properties.
This code will collapse whitespace but when you ad is in text, it will overflow some of the text, so inline this needs modification:
<style>
iframe { height: auto !important}
ins { height: auto !important}
#google_ads_frame1 { height: auto !important}
.adsbygoogle, #aswift_0_expand, #aswift_0_anchor { height: auto!important} /* there might be more of those */
</style>
Is there currently any way I can create an extension that applies a text decorator above or below the specified range which I can use to supply any HTML/CSS visual I want?
I'm still working through the API and my guess is either no, or not directly via the extensions API.
It depends on what types of decorations you are talking about. Since you used the words "text decorator" then I'm going to assume you're talking about the decoration API described here.
As you can see, there are several css properties that they officially support, but none of them "arbitrary css".
What I've done, though, in my vscode dimmer extension, is apply an opacity style using this technique:
dimDecoration = vscode.window.createTextEditorDecorationType(<vscode.DecorationRenderOptions> {
textDecoration: `none; opacity: ${opacity / 100}`
});
When vscode sees this, it basically adds text-decoration: none; opacity: 1 to the stylesheet.This allows me to use arbitrary styling.
The above snippet creates a "Decoration" which can then be applied to ranges as shown below.
function dimEditor(editor: vscode.TextEditor) {
if (!dimDecoration) return;
let startPosition = new vscode.Position(0, 0)
let endPosition = new vscode.Position(editor.document.lineCount, Number.MAX_VALUE);
editor.setDecorations(dimDecoration, [new vscode.Range(startPosition, endPosition)]);
}
Disclaimer: Of course, this isn't officially supported and they could change the way they process the arguments to stop at the first ; and anybody using this workaround would have a broken extension.
Edit:
If you're wanting to have a "hover" behavior, there is the HoverProvider api. It can take a "marked string" which is essentially markdown, and display it. This extension uses it to display img previews on hover.
If markdown will meet your needs you can try that, otherwise you can try with arbitrary HTML and see if it accepts that.
I want to remove the injected CSSResource in GWT application.
I used the following code MyClass.INSTANCE.ensureInjected();
I want the above CSSResource for a particular page only. So the remaining pages should be work as per the actual css/theme.
Once I inject this then its applicable for the whole application. How can I overcome this?
You can inject your css bundle using directly StyleInjector utility class, instead of the ensureInjected() method
Then you will have a reference of the injected element which you can remove when you want.
// Equivalent to MyClass.INSTANCE.ensureInjected()
StyleElement e = StyleInjector.injectStylesheet(MyClass.INSTANCE.css().getText());
// Remove the injected css element
e.removeFromParent();
Theoretically you could try to remove the injected style block from the DOM, but this would be quite difficult (and maybe not very reliable).
Much better to organize your 'special' CSS style sheet in a different way:
Turn selectors like
.some {
color: green;
}
.other {
color: red;
}
into
.special .some {
color: green;
}
.special .other {
color: red;
}
and then add/remove the 'special' class e.g. to/from your body element to activate/deactivate the special styles.
If you have embedded the same GWT application in more than 1 page and you want a different behavior based on the given page, you can for example call the
MyClass.INSTANCE.ensureInjected();
if a bootstrap parameter is set.
In the host page, set the parameter, like YourGwtApp.nocahe.js?css=inject and read it as it's explained here
In the onLoadMethod, call the ensureInjected accordingly to your bootstrap parameter.
in one of my scene I have
<div id='MenuList'></div>
then I add list to it like this:
$('#MainListTitles').sfList({
data : [ 'AAA', 'BBBB', 'CCC']
});
How can I customize colors and height of each list item ?? I tried in css like this:
#MenuList.sf-ui-list {height: 333px; text-align: right; background-color:#ffffff} - works
#MenuList.sf-ui-list-item {background-color:#000000} - not working
First of all, "#MenuList.sf-ui-list-item" would never work, because you don't have the same element with id "MenuList" and class "sf-ui-list-item". This is basic css. Correct usage would be "#MenuList .sf-ui-list-item".
On the other hand, Samsung does a very lousy job with it's SmartTV SDK. It's so bad that it looks like they don't even want people to develop apps for it.
According to the API doc, you should indeed style class "sf-ui-list-item", but if you run your project with "Debug Samsung Smart TV App using Web Inspector" you can see that they use class "sf-ui-list-blured".
So, logical step would be to style:
#MenuList .sf-ui-list-blured { ... }
I would recommend that you maybe create your own styles and pass them as 3 parameters in ".sfList" command (classes: focusCssClass, blurCssClass and selectCssClass as stated in API doc).