Echart version update highlight the line series on hover by default, is there any workaround or a fix for this issue? To keep it more static and not highlight the lineseries data?
I don't think echarts support this yet, a good option is to set the emphasis color and the normal color to the same value:
itemStyle: {
normal: { color: '#aColor' },
emphasis: { color: '#aColor'}
}
Related
i have this css to change the text selection color which works great:
::selection {
background: #e4d2ba;
}
but how can i change the color of the selection of numbers in this time input?
these dont seem to work for me:
input::selection {
background: #e4d2ba;
}
input[type=time]::selection {
background: #e4d2ba;
}
UPDATE: (regarding possible duplicate)
this post has a lot of information on styling time inputs, but nothing on changing the selection color
this works:
input[type=time]::-webkit-datetime-edit-hour-field:focus,
input[type=time]::-webkit-datetime-edit-minute-field:focus,
input[type=time]::-webkit-datetime-edit-second-field:focus,
input[type=time]::-webkit-datetime-edit-ampm-field:focus {
background-color: #e4d2ba;
}
my confusion was based on assuming the numbers were in a selection state since it looked like the same color as default selected text to me. but actually it's the background color of each whole field when focused. which was also surprising since i had assumed the whole combined time field held the focus due to the default blue border
Is it possible to change the root color palette of a browser on a certain page?
For example.
<div style="color:blue">Blue Text</>
color: blue => color:#0000FF (browser assume)
I want to tell the browser that "blue" is #0000BB. (either through stylesheet.css or javascript modifying its default palletes )
Plus, is it possible to add more standard color to the pallete?
Like: navyblue => #3e3e80
I'm not sure if it's possible to overwrite the root colour palette itself, but what you can do is make use of custom CSS properties to achieve almost the same thing.
Simply define the colours that you want in the :root, using -- as a prefix. You can then reference these colours by using var(--variable) as the color value.
This can be seen in the following:
:root {
--blue: #0000FF;
--navyblue: #3e3e80;
}
div {
color: var(--blue);
}
span {
color: var(--navyblue);
}
<div>Blue</div>
<span>Navy Blue</span>
Using CSS variables in this way allows you to easily change a colour throughout the entire site by only changing one line of code, and also allows for additional colours to be easily mapped out.
I am trying to create a dark mode toggle button with a checkbox (I will eventually change to a toggle in CSS). So far, I was able to change the elements in my Javascript canvas to be in "dark mode" and changed their color easily but is there a way I can use this same switch/checkbox in the Javascript to also toggle the CSS portion? I do not want to create another checkbox to change the background color of the HTML. I tried the method below with no result. I want the checkbox to basically turn the background of the webpage black and go back to white if unchecked. My full code is on CodePen https://codepen.io/Fragile404/pen/VxZVxm
body {
background-color: white;
}
body.checkbox: checked;
{
background-color: black;
}
You'll need to use JavaScript for this. Change your final if to:
if(darkMode.checked) {
toggleColor = (0,0,0);
document.body.style.backgroundColor= 'black';
} else {
toggleColor = (255,255,255);
document.body.style.backgroundColor = 'white';
}
Why? CSS only parses forwards and downwards. Which means you can use a parent condition in order to style a child and you can use a condition on a previous sibling to style up a later one, but not the other way around.
There were many discussions around the subject and attempts to change the status-quo but, in reality, if CSS would also parse backwards, web would be ten fold slower, at least.
Is there a way to change the blue highlight color when hovering in a drop down menu? I'm using the drop-down list on my page. I have a drop down menu that allows you to choose the topic.
I would greatly appreciate any help or feedback on this topic.
That blue colour is called an outline, and is used for accessibility reasons.
For example, when you press the tab key to move between form elements, an outline is commonly used so the user knows what element is currently selected.
You can remove this outline with the following CSS:
select:focus {
outline: none;
}
However, It is not recommended to remove this. If you must, you should provide an alternative style by using a background colour, changing the text colour, or provide a custom outline instead of the browser default.
ex:
select:focus {
outline: 2px solid red;
}
.dropdown-item.active, .dropdown-item:active {
background-color: red;
}
These are the Bootstrap classes that need to be overwritten if you wish to change the highlighted background colour when you hover over the dropdown item (i.e. when it is "active").
The classes can be discovered by opening up the Elements section within Google Dev Tools (F12) and then highlighting the element that you wish to restyle. Finding the active states of classes can be a little more tricky and may require a little more digging into the HTML.
I have a TextButton, and I would like to disable it.
I'm using the default skin.
I have learned that:
setDisabled does nothing
setTouchable(Touchable.disabled) works but does nothing with appearance
I checked the uiskin.json file but it only defines up and down states and nothing about disabled state:
com.badlogic.gdx.scenes.scene2d.ui.TextButton$TextButtonStyle: {
default: { down: default-round-down, up: default-round, font: default-font, fontColor: white },
toggle: { down: default-round-down, up: default-round, checked: default-round-down, font: default-font, fontColor: white, downFontColor: red }
},
What should I do? Create a new style and apply it on the button when I disable it? Or is there a built-in state that I should use?
Create a new style or add to one of your existing ones. You can define a background drawable named disabled and a font color with disabledFontColor. When you omit either of these from your style, then that particular element doesn't change when the you call setDisabled.
setDisabled Does Work!
The reason why you're not noticing a sudden change in appearance is because you have not configured the state of the disabled button within the skin.JSON file or programmatically.
Cobolfoo has created a skin editor for you to use with libGDX. Last commit was 2 years ago but nothing has changed since and the skin-editor should work flawlessly.
Skin-Editor on github
I highly suggest you to take look at it, hence fiddling with skin files is just waste of time imo.