Masterwishx Posted June 4 Share Posted June 4 (edited) 5 hours ago, Mattaton said: Also @Masterwishxstarted with the styles I did and further customized. Confirm, it's took a lot of time to understand how it's work, but it's look amazing! Thanks again to @scolcipitatoand @Mattaton and @hernandito for hard work Edited June 4 by Masterwishx 1 Quote Link to comment
Mattaton Posted June 4 Share Posted June 4 (edited) 9 hours ago, Free Man said: It's not super clear to those of us who don't CSS all the time, but this works: /* Desaturate docker container icons, saturate on hover */ /* .folder-preview-wrapper img { filter: saturate(0); } */ .folder-preview-wrapper:hover img { filter: saturate(1); } The saturate(false) needs to be disabled - the docs list both, as though both need to be commented out. This is what I get for doing IT when I'm tired... Thanks again!! Hmmmm...yeah you should be able to comment out the whole block (both rules) and have it revert to default state (saturated). It may have just been your browser caching the desaturate CSS. CTRL+F5 will refresh and grab updated files and clear up stuff like that more often than not. But what you did will definitely work, it's just redundant. "Please fully saturate this fully-saturated icon." 😄 Just FYI: The 0 is not really for false, it's more of a percentage. saturate(0) is 0%, saturate(1) is 100%. Using decimals between 0 and 1, you can get granular with it. If you REALLY like color, you can super-saturate by going over 1. Like saturate(4) if you're feeling crazy. 😄 Ant any rate, I'm glad you got it sorted! Edited June 4 by Mattaton 1 Quote Link to comment
JonathanM Posted June 4 Share Posted June 4 2 hours ago, Mattaton said: If you REALLY like color, you can super-saturate by going over 1. So when you trigger it, does it precipitate? 1 Quote Link to comment
Mattaton Posted June 4 Share Posted June 4 2 minutes ago, JonathanM said: So when you trigger it, does it precipitate? Monsoon level. Get your umbrella ready. 😄 Quote Link to comment
JonathanM Posted June 4 Share Posted June 4 1 minute ago, Mattaton said: Monsoon level. Get your umbrella ready. 😄 If you aren't part of the solution, you are the precipitate. Quote Link to comment
Masterwishx Posted June 4 Share Posted June 4 5 hours ago, Mattaton said: ust FYI: The 0 is not really for false, it's more of a percentage. saturate(0) is 0%, saturate(1) is 100%. Using decimals between 0 and 1, you can get granular with it. If you REALLY like color, you can super-saturate by going over 1. Like saturate(4) if you're feeling crazy. i was using disabled (commented) this part from back then , but now enabled on hover saturate(2) , just wanted to ask from your art experience its OK 200% saturate for on hover? Quote Link to comment
Mattaton Posted June 4 Share Posted June 4 53 minutes ago, Masterwishx said: i was using disabled (commented) this part from back then , but now enabled on hover saturate(2) , just wanted to ask from your art experience its OK 200% saturate for on hover? That really is a completely subjective thing. With something like this, it's all about what YOU want to see. I think it's fine. Might even try it myself. 😄 1 Quote Link to comment
Masterwishx Posted June 4 Share Posted June 4 8 minutes ago, Mattaton said: it's all about what YOU want to see. Thanks, sure it is Quote Link to comment
Masterwishx Posted June 5 Share Posted June 5 @Mattaton also added to make larger icon on hover , its look OK but its right command or better to use something else for it ? .folder-preview-wrapper:hover img { filter: saturate(2); /* saturate 200% on hover, was (1) 100% */ --container-logo-size: 35px; /* Make larger icon on hover, normal 32px */ } Quote Link to comment
Mattaton Posted June 5 Share Posted June 5 (edited) 4 hours ago, Masterwishx said: @Mattaton also added to make larger icon on hover , its look OK but its right command or better to use something else for it ? .folder-preview-wrapper:hover img { filter: saturate(2); /* saturate 200% on hover, was (1) 100% */ --container-logo-size: 35px; /* Make larger icon on hover, normal 32px */ } I suppose this would work. Redefining the variable's value in the selector. What I would do to keep things organized is create a new variable alongside the --container-logo-size with the rest of variable definitions. Something like --container-logo-size-hover and then set the hover size you want there. Then a width/height rule should be in the selector with its value set to the new variable. I've updated the github code for the urblack-theme to add variables for icon hover size and both initial saturation and hover saturation. Added this to the 02-vars.docker.css file: --container-logo-size-hov: 38px; --container-logo-saturation: 0; /* Initial color depth for container icons - 0 is fully-desaturated (grayscale), 1 is default saturation */ --container-logo-saturation-hov: 1; /* 1 is 100% or default color depth - Values above 1 will saturate beyond default colors, Example: 4 = 400% */ Changed the saturation rules at the top of 04-table.docker.css (not just for saturation anymore): /*************************************************/ /* CONTAINER LOGO ICON HOVER EFFECTS */ /*************************************************/ .folder-preview-wrapper img { /* Desaturate docker container icons */ filter: saturate(var(--container-logo-saturation)); } .folder-preview-wrapper:hover img { /* Saturate docker container icons - Values above 1 will further saturate */ filter: saturate(var(--container-logo-saturation-hov)); /* Set the hover size for icons */ width: var(--container-logo-size-hover); height: var(--container-logo-size-hover); } With these changes, icon saturation and size should now only be altered by changing the variable definitions in 02-vars.docker.css, and not the rules in 04-table.docker.css This makes it easier for folks who don't want to or have the knowledge to dig into the CSS selectors and rules. Just change the variable values and it will take effect. I'll update the other 2 color themes soon. But the changes above can easily be copied into the files you already have in place on your system. P.S.: I don't know if it's just me, but the CSS color scheme for code here on the unRAID forums is horrible to read against the dark gray background of Dark Mode. The red comments especially are very hard to read. Edited June 5 by Mattaton 1 Quote Link to comment
Masterwishx Posted June 5 Share Posted June 5 (edited) 2 hours ago, Mattaton said: This makes it easier for folks who don't want to or have the knowledge to dig into the CSS selectors and rules. Just change the variable values and it will take effect. Size not working for me ... Edited June 5 by Masterwishx Quote Link to comment
Masterwishx Posted June 5 Share Posted June 5 --container-logo-size: var(--container-logo-size-hov); working Quote Link to comment
Mattaton Posted June 5 Share Posted June 5 12 minutes ago, Masterwishx said: Size not working for me ... Had a typo and needed to add !important to overcome higher-specificity rule later in the code. width: var(--container-logo-size-hov) !important; /* important needed to overcome higher-specificity selector rule below */ height: var(--container-logo-size-hov) !important; /* important needed to overcome higher-specificity selector rule below */ 1 Quote Link to comment
Mattaton Posted June 5 Share Posted June 5 6 minutes ago, Masterwishx said: --container-logo-size: var(--container-logo-size-hov); working I would not do it this way. It may work fine, but it also may have some unforeseen effects in changing the regular size variable to be the same value as the hover size. Better to use them separately, in my opinion. 1 Quote Link to comment
Masterwishx Posted June 5 Share Posted June 5 2 minutes ago, Mattaton said: width: var(--container-logo-size-hov) !important; /* important needed to overcome higher-specificity selector rule below */ height: var(--container-logo-size-hov) !important; /* important needed to overcome higher-specificity selector rule below */ 5 minutes ago, Mattaton said: Had a typo and needed to add !important to overcome higher-specificity rule later in the code. OK , its working i saw typo but missed !important Quote Link to comment
Mattaton Posted June 5 Share Posted June 5 Just now, Masterwishx said: OK , its working i saw typo but missed !important Yes. Shame on me for committing changes to the repo without fully testing. 🙂 1 Quote Link to comment
Masterwishx Posted June 5 Share Posted June 5 1 minute ago, Mattaton said: Yes. Shame on me for committing changes to the repo without fully testing. im here to test 1 Quote Link to comment
Mattaton Posted June 5 Share Posted June 5 2 minutes ago, Masterwishx said: im here to test Thanks! Let me know if you see anything else or think we should tweak anything. Once we get it all sorted I'll update the other themes to match. 1 Quote Link to comment
Masterwishx Posted June 5 Share Posted June 5 2 minutes ago, Mattaton said: Thanks! Let me know if you see anything else or think we should tweak anything. Once we get it all sorted I'll update the other themes to match. its Already was Fine but now x2Fine , just curios if its OK when hover and image bigger in my case from 32px to 35px also have right part from this container moving right , is it OK or not ? Quote Link to comment
Mattaton Posted June 5 Share Posted June 5 1 minute ago, Masterwishx said: its Already was Fine but now x2Fine , just curios if its OK when hover and image bigger in my case from 32px to 35px also have right part from this container moving right , is it OK or not ? Yeah, that's just a side-effect of the image growing. The image is taking more horizontal space, so everything to the right has to shift as it changes. That's the main reason I don't use the size change on hover. Just too much movement and shifting as the cursor moves around the screen. To stop that from happening would take a lot more CSS rules and possibly even changes to the html. 1 Quote Link to comment
Masterwishx Posted June 5 Share Posted June 5 37 minutes ago, Mattaton said: Yeah, that's just a side-effect of the image growing. The image is taking more horizontal space, so everything to the right has to shift as it changes. it seems this is working : folder-preview-wrapper img { /* Desaturate docker container icons */ filter: saturate(var(--container-logo-saturation)); /* Add a transition for smooth scaling */ transition: transform 0.3s ease; } .folder-preview-wrapper:hover img { /* Saturate docker container icons - Values above 1 will further saturate */ filter: saturate(var(--container-logo-saturation-hov)); /* Set the hover size for icons */ width: var(--container-logo-size-hov) !important; /* important needed to overcome higher-specificity selector rule below */ height: var(--container-logo-size-hov) !important; /* important needed to overcome higher-specificity selector rule below */ /* Scale the image on hover */ transform: scale(1.2); /* Adjust the scale factor as needed */ } 1 Quote Link to comment
Mattaton Posted June 5 Share Posted June 5 1 minute ago, Masterwishx said: it seems this is working : folder-preview-wrapper img { /* Desaturate docker container icons */ filter: saturate(var(--container-logo-saturation)); /* Add a transition for smooth scaling */ transition: transform 0.3s ease; } .folder-preview-wrapper:hover img { /* Saturate docker container icons - Values above 1 will further saturate */ filter: saturate(var(--container-logo-saturation-hov)); /* Set the hover size for icons */ width: var(--container-logo-size-hov) !important; /* important needed to overcome higher-specificity selector rule below */ height: var(--container-logo-size-hov) !important; /* important needed to overcome higher-specificity selector rule below */ /* Scale the image on hover */ transform: scale(1.2); /* Adjust the scale factor as needed */ } Cool. Yeah, with the transform/transition approach, you can probably just ditch the width/height rules. Then you can just make the value for --container-logo-size-hov be 1.2 and assign that to your scale function in the transform rule instead of setting the scale in the rule itself. Not a bad way to tackle that! Nice job! 1 Quote Link to comment
Masterwishx Posted June 5 Share Posted June 5 Just now, Mattaton said: Cool. Yeah, with the transform/transition approach, you can probably just ditch the width/height rules. Then you can just make the value for --container-logo-size-hov be 1.2 and assign that to your scale function in the transform rule instead of setting the scale in the rule itself. Not a bad way to tackle that! Nice job! Thanks to Copilot Win Quote Link to comment
Mattaton Posted June 5 Share Posted June 5 2 minutes ago, Masterwishx said: Thanks to Copilot Win HAHA! Awesome! I just changed mine to do that as well. Removed the height/width rules. Works great. I'll update the repo to use that method. Much better. Quote Link to comment
Masterwishx Posted June 5 Share Posted June 5 2 minutes ago, Mattaton said: I just changed mine to do that as well. Removed the height/width rules. Works great. I'll update the repo to use that method. Much better. yea also changed to --container-logo-scale-hov 1 Quote Link to comment
Recommended Posts
Posted by Jaycedk,
6 reactions
Go to this post
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.