2sxc - change toolbar button color - 2sxc

How to change color of the blue toolbar buttons for editing?
I can't find the right css class to override this.
I also have problems how to "inspect" this hover buttons with chrome developer tools, is it posible to check calculated style of element when in hower state?

My solution:
.sc-menu a div{
background-color: red !important;
}
In chrome developer tools I first found:
UL with sc-menu class and then disable "display: none"
in ".sc-element .sc-menu.sc-tb-show-hover"
After this it was easy to find the right class

Related

How do I remove the component border shown onClick in react?

Whenever I click on any of the components I get a black border, although when I click away the border disappears. How do I prevent the web app from doing so?
Below there is a picture of what I get in my app.
Also, this is a link to a sandbox where I have the same issue:
https://codesandbox.io/s/es6-spread-operator-practice-drbyh?file=/src/components/App.jsx
This is caused by the &focus css selector as shown bij the inspector.
Add outline: none to the <button> to remove it;
<button style={{outline: 'none'}} onClick={onInputSubmit}>
This is because the :focus pseudo-class is adding an outline into the button. You can change that behaviour by using css like this:
button:focus {
outline: none;
}
Or by adding it as an inline style as well, even though I personally don't recommend it because having a lot of inline styles could cause to have a messy and hard to read HTML.

cant style a button in chrome extension page

I'm building a chrome extension, I have options page but seems like Chrome overriding button default style so I cant style a button on :hover nor on :focus.
Does chrome extension on options pages disable some CSS? especially options page, since my popup page isn't affected.
My CSS :
.button.is-primary {
background-color: #7957d5;
border-color: transparent;
color: white;
}
But the button looks same on options page.
1) Try adding "chrome_style":false as shown in the documentation,
2) Try using !important. –
#wOxxOm comment solve my problem.

Showing Material Checkbox Animation On Hover

Check out the effect at this link where the circular background of the checkbox is shown on hover. How can I get this same behavior while using <mat-checkbox> in Angular? I want the background to show on hover as well as the normal animation on transitions from checked to unchecked, unchecked to checked, etc. I am using #angular/material version 6.4.5. By inspecting the documentation for version 7.1.1, a persistent-ripple class is applied to a <div> inside the checkbox on hover. This does not happen in the documentation for version 6.4.7. The link for the older documentation is here.
In css file, I have added the following code,
::ng-deep .mat-checkbox-inner-container:hover .mat-checkbox-persistent-ripple { opacity: .04; background: red($color: #000000);}
::ng-deep .mat-checkbox-inner-container:hover{ opacity: 1; background: red($color: #000000);}

CSS: Style a text link in a class

This is a most basic question about formatting text links in css
I have tried to do it myself. I got the hover to work -- at least in firefox. But can't get the default color to work. Only hover.
Please look at this development page http://ogrowby.com/ in firefox.
There is a menu about the middle of the page, called "Test Menu". Please click on that. Then, in the dropdown, go to "TEST LINK".
When you hover over it, the text color changes to Gold. That is fine. But its default text color is black and I want it to be white. I may also want to change the font size, etc. But the main thing is to get the css working to set the default text color for this class to WHITE. #ffffff.
Here's my css so far. The hover is working, but the default remains needs to be changed to #ffffff Only for the .roundedblue class. And it needs to work not only in firefox but other modern browsers.
Any help will be appreciated. Thanks
Rowby
.roundedblue:link,
div#Maximenu_NEW_GRANDE ul.maximenuck2 li.roundedblue:hover span.separator {
color: white;
}
.roundedblue:hover,
div#Maximenu_NEW_GRANDE ul.maximenuck2 li.roundedblue:hover span.separator {
color: #FFB300;
}
If that is the only link you want to change, you should add an id to it and change the id's css properties. If you want multiple elements to have the same properties add a class to the element (if it doesn't already exist).
Then simply edit its properties as you would normally.
color:white;
font-size:14px;
...
I simply changed the styles in inspector and it worked for me. added "style='color:white;'" to your span.

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