currently I am trying to "hack" my Atom-editor and I am stuck here: I want to change the color of whenever I call a function in python - just like it is in the basic setup of SublimeText3. I am using the following code in my styles.less:
atom-text-editor::shadow {
.meta.function-call.python {
color: red;
}
}
The Problem is that this code also changes the color of all instances & modules to red leaving me with this mess here: URL
atom-text-editor.editor {
.syntax--meta.syntax--function-call.syntax--generic {
color: #66D9EF;
}
}
This works for me using magicpython.
Screenshot
Try this:
atom-text-editor .syntax--function-call {
color: red;
}
Edit: Fixed as per first comment.
Related
I previously created a swiper (ngx-swiper-wrapper) and I changed the color of the arrows the following way:
::ng-deep.swiper-button-next::after, ::ng-deep.swiper-button-prev::after {
color: $primary-light;
}
Now I created another one on a different page where the color should be black. The problem is when I visit the page with the first swiper and then I navigate to the other page with the second swiper, the color stays the white.
Is there a better way to change the color or a workaround?
Thanks
I've been running into the same issue, and spent days looking for a better solution, till i found one, it works just fine, no need to change the svg image or somthing just add the code below into your css file :
::ng-deep .swiper-button-next,
::ng-deep .swiper-button-prev {
color: #207868 !important;
}
:root {
--swiper-theme-color: #207868 !important;
}
I tried it and changed a few things and it's working:
::ng-deep .swiper{
.swiper-button-next::after,
.swiper-button-next::after{
color: #207868;
or
--swiper-theme-color: #207868;
}
}
I have a couple of network storage, for example '\dev', '\qa', etc...
I am trying at Atom IDE to set a different style to the projects by the path base.
For projects that located on '\dev\www\example\' the curser will be green, and for projects that located on '\qa\www\example\' the curser will be red.
Is it possible? if so how?
You can add the following to your styles.less (File > Stylesheet…)
atom-pane[data-active-item-path*="'\dev\www\example\"] {
.cursor {
color: green;
}
}
atom-pane[data-active-item-path*="\qa\www\example\"] {
.cursor {
color: red;
}
}
Note: I'm using the contains attribute selector (*=), but you might want to look at all available options to see which fits your needs best.
According to this blog post, it should be possible to style the ToolbarSearch by customizing the UIIDs ToolbarSearch,TextFieldSearch and `TextHintSearch.
In my CSS File it looks like this:
ToolbarSearch {
color: white;
height:30mm;
width:30mm;
}
TextHintSearch {
color: white;
height:30mm;
width:30mm;
}
TextFieldSearch {
color: white;
height:30mm;
width:30mm;
}
The main thing I want to achieve is a white Search Button, Text, X-Button and Hint.
In the blog post above, it looks right, except the textfieldsearch and -hint:
But in my application it looks like this:
The buttons are in the wrong color. What am I doing wrong?
Notice:
This is how I add it
this.getToolbar().addSearchCommand(e -> {
//TODO search
});
(The algorythm is not implemented yet)
I don't use the CSS plugin so I'm not really sure how this maps there but you need to override the selected/pressed & unselected styles.
I am struggling to find a way to give CSS to all placeholders in my application,
I have tried the following:
.customField input::-webkit-input-placeholder {
color: #2e4bc5;
}
.x-text-field input::webkit-input-placeholder{
color :#2e4bc5
}
Any help would be appreciated.
Try this:
.customField .x-input-el::-webkit-input-placeholder {
color: #2e4bc5;
}
I have been trying this for a while, looking at other answers, but to no avail. Hopefully someone can help me.
I am trying to generate some dynamic variable names within a mixin.
The variables are already defined:
#horizontal-default-color: #fff;
#horizontal-inverse-color: #000;
etc..
The mixin I want would be something like this:
.horizontal-variant(#variant) {
color: #{horizontal-#{#variant}-color}
}
And the result I am expecting, when called:
.horizontal-default{
.horizontal-variant(~"default");
}
.horizontal-inverse{
.horizontal-variant(~"inverse");
}
is
.horizontal-default {color: #fff}
.horizontal-inverse {color: #000}
Unfortunately I run into errors every time.
I know this can be done, I have seen it being used in Font Awesome LESS where #{fa-css-prefix} is defined in variables. I am just having trouble transporting the same solution in my project.
You can try testing the code at http://lesstester.com/
You can use Variable Names. And I've tested the code at http://lesstester.com/, it works.
#horizontal-default-color: #fff;
#horizontal-inverse-color: #000;
.horizontal-variant(#variant) {
#color: "horizontal-#{variant}-color";
color: ##color;
}
.horizontal-default{
.horizontal-variant(default);
}
.horizontal-inverse{
.horizontal-variant(inverse);
}