I would like to customise my Atom Editor so that all scroll bars would fade out when their parent is not hovered with the cursor. Trying to accomplish this, I added the following lines to my styles.less stylesheet:
atom-text-editor.editor {
.horizontal-scrollbar, .vertical-scrollbar {
opacity: 0.2;
transition: opacity 250ms;
}
.scroll-view:hover .horizontal-scrollbar {
opacity: 1;
}
.scroll-view:hover .vertical-scrollbar {
opacity: 1;
}
}
This works very well for the main editor view. When two or more panes are present, the scroll bar of the hovered file is shown in full colour while the other(s) fade out. Unfortunately this applies only to files and not to the tree view. How would I adapt the code above to include the scroll bars of the tree view as well as the ones of the files? I am using the Atom Material UI theme.
This issue is solved by adding the following code to styles.less
// fading scrollbars when pane not hovered
.pane:not(:hover) {
::-webkit-scrollbar {
&-thumb {
background-color: rgba(68, 169, 249, 0.3);
}
}
}
Related
I was trying to make a 100% pure css animation, fadein and fadeout when i click on hamburguer menu to reveal the sidebar, (the backdrop should showing opacity like 500 miliseconds) (like jquery fadein) and when i click inside the sidebar to close the menu (the backdrop should hidde the opacity in 2 seconds) (like jquery fadeout)
You can see the version of jquery code here: https://cdpn.io/gilperon/fullpage/ZErBzvY
This is a very simple code, to open menu i put the event on hamburguer icon onclick=' $('#menu-backdrop').fadeIn(500);' and close to close, i put onclick=' $('#menu-backdrop').fadeout(2000);'
If it is not possible to make 100% css pure the animation, since it should be activated by onclick, maybe use just the javascript pure to onclick to add class, and the animation by done via css
I have a lot of ways using height:0 and key frames, but it was not possible to make the animation fadeout, fadein it works.
I make a code that workds to fadein, but to fadeout not working:
Another options are welcome, maybe using visibility, or other ways to show and hidden the animation, display:none usually not works with css animation
#menu-backdrop {
display: none;
animation:fadeOut 5s linear;
}
#menu-backdrop.exibir {
display: block;
animation:fadeIn 0.5s linear;
}
#keyframes fadeIn {
0% {
opacity:0
}
100% {
opacity:1;
}
}
#keyframes fadeOut {
0% {
opacity:1
}
100% {
opacity:0;
}
}
If anyone can post a work solution should be great, thank you very much guys.
Okay what you need is a transition, and you need to move away from your display property as it will break your animations and transitions since you cannot animate or transition that property in CSS.
A quick example:
const button = document.querySelector( 'button' );
const nav = document.querySelector( 'nav' );
button.addEventListener( 'click', event => {
event.preventDefault();
nav.classList.toggle( 'active' );
});
nav {
position: fixed;
right: 0;
top: 0;
width: 50%;
height: 100%;
background: red;
transition: opacity .4s;
/* This should be set to 0, but to make the point
* of pointer-events clear, I will set it to slightly
* higher so you can see there's no interaction
* with the nav. */
opacity: .1;
pointer-events: none;
}
nav:hover {
/* If you can interact with the navigation,
* you will see it change color. */
background: blue;
}
nav.active {
opacity: 1;
pointer-events: all;
}
nav + button:before {
content: 'Open ';
}
nav.active + button:before {
content: 'Close ';
}
<nav></nav>
<button>Nav</button>
The above shows you that by combining pointer-events: none with opacity you can effectively hide your menu. I added the :hover state for the <nav> to show that you cannot click the <nav> when it is open, and you should therefor consider this element invisible to the user.
I have this code
.card:not(:hover) .movePrevCarousel{ /* Used to make the button appear, when mouse hover*/
opacity: 0;
}
.card:not(:hover) .moveNextCarousel{ /* Used to make the button appear, when mouse hover*/
opacity: 0;
}
Is there a way I can merge this together, instead of wrting it two times?
I have tried
.card:not(:hover) .movePrevCarousel , .moveNextCarousel{ /* Used to make the button appear, when mouse hover*/
opacity: 0;
}
and it didn't work
You cannot merge it but you can use multiple selectors for the same change
.card:not(:hover) .movePrevCarousel,
.card:not(:hover) .moveNextCarousel {
/* Used to make the button appear, when mouse hover*/
opacity: 0;
}
If you were using a css pre-processor (like less, sass) you would be able to do
.card:not(:hover) {
.movePrevCarousel,
.moveNextCarousel {
/* Used to make the button appear, when mouse hover*/
opacity: 0;
}
}
which would produce the same result
I'm trying to do an hover effect with a svg. This is the effect I would like to achieve. When I do a mouseover on the two paths and the text, I want the other paths and texts to have a lower opacity (I did this part), but I also want the the percentage to appear. When the mouse isn't over anything, I want all the paths and texts to have an opacity of 1 and no percentage visible.
I used this code to change the opacity of the paths
.tracciati:hover > g {
opacity: 0.25;
}
.tracciati:hover > g:hover {
opacity: 1;
}
This is the code: http://jsfiddle.net/ysrzjs28/
I refactored your html to include the percentage elements next to their respective graph elements. This made it easier to select the sibling element for display using CSS. Since there is no parent selector in CSS, you would have to use jQuery or javascript to achieve the results you want using pure CSS. I added a container g element and re-assigned your classes. The CSS looks like this
.container:hover > .tracciati {
opacity: 0.25;
}
.container:hover > .tracciati:hover {
opacity: 1;
}
.percentuali {
opacity: 0;
}
.tracciati:hover + .percentuali {
opacity: 1;
}
Here is a working fiddle: http://jsfiddle.net/ysrzjs28/2/
I have a button that changes opacity with :hover, but inside there's an image that shouldn't be affected by the button's opacity change.
For example, something like this:
.expandIMG:hover{
opacity: 0.6;
}
.expandIMG:hover,div,img{
opacity: 1; // this make no opacity but for all the button an i just want
// the image that are inside of some div.
}
I think you're trying to change the opacity of the div containing the image to 0.6 while keeping the image's opacity at 1.
You can accomplish this using background: rgba(0,0,0,1) instead of opacity:
.expandIMG {
background: rgba(0,0,0,1);
}
.expandIMG:hover{
background: rgba(0,0,0,0.6);
}
This way, you're only changing the alpha (opacity) of the div's background while the images inside it aren't affected.
Example: http://jsfiddle.net/2krc5080/
You could also try to set the z-index of the image higher while hovering. And maybe this answer is also useful to you.
.expandIMG:hover img {
z-index: 9999; // more than the expandIMG
}
Come on please give me more downvotes!! Feed me!!
Is there a way to REMOVE completely the Transparency on Toastr.js?
I tried to change the various lines on the .less files
.opacity(#opacity) {
#opacityPercent: 100; // instead of #opacity * 100;
opacity: 1; // instead of #opacity;
-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=#{opacityPercent})";
filter: ~"alpha(opacity=#{opacityPercent})";
}
and every place where it stated opacity(x) where x was not 1 but it still displays opacity.
I also tried to add the following lines on my own CSS
.toast {
opacity: 1;
}
#toast-container > div {
opacity: 1;
}
but i still get the semi opacity on div message display. On mouse over, the div color becomes full (no transparency). I'm trying to always have it full color (no transparency).
Try overriding it using !important:
.toast {
opacity: 1 !important;
}
#toast-container > div {
opacity: 1 !important;
}
You can also try "inspect element" in Chrome to see which css tag is causing the opacity.
If that doesn't work, can you perhaps provide a link to your page?
It Depends on What You Mean by "Remove"
If you don't want the mixin generating any CSS at all, but also don't want to remove all the mixin calls within the code, then just do this (comment out the code):
.opacity(#opacity) {
// #opacityPercent: #opacity * 100;
// opacity: #opacity;
//-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=#{opacityPercent})";
//filter: ~"alpha(opacity=#{opacityPercent})";
}
The above will "do nothing." If you want some type of CSS generated (for some reason, I cannot think of why), but you do not actually want to have that code apply any opacity setting in the browser, then give it a bogus value that the browsers will ignore, something like this:
.opacity(#opacity) {
#opacityPercent: bogus;
opacity: bogus;
-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=#{opacityPercent})";
filter: ~"alpha(opacity=#{opacityPercent})";
}
You can check out that the above generates no opacity within a browser by looking at this fiddle and examining it with an inspection tool (like Firebug, etc.).
I really believe you seek the first option however.
The following works with v2.1.3
#toast-container > div {
opacity: 1;
}
With the !important flag, there would be no fadeIn and fadeOut.