How do I change the UI visual for a keyframe?

[woeful marlin]

How do I change the UI visual for a keyframe?
Like how in a bedrock anim if you make a smooth keyframe it ends up looking round while step keyframes are like an arrow thingy

[finite tendon]

you can find out what id/class they have, then change it via css

[woeful marlin]

I am a newbie when it comes to Blockbench plugin dev so I would appreciate it if you gave an example of how I could do this

Like what would the .css file look like

[finite tendon]

there should be a developer mode option under about, a window will then be pop on right side of your app.

then on the left of elements, there should be two button, one is mouse/arrow cursor in a square, another is phone and a bigger square.

click the mouse in square button.

then when you click anywhere in blockbench, let's say that keyframe icon, you will then see that selected elements in html

https://www.blockbench.net/wiki/blockbench/themes/#custom-css

for the css, you can check here but basically is just html css

[woeful marlin]

Thank you so much 🙏

[woeful marlin]

https://github.com/JannisX11/blockbench/blob/a49f6494a801c9174ca93ee45edd7781dfbd88c4/js/animations/timeline.js#L1756

[woeful marlin]

I need to be able to access keyframe data to know how it should look so I doubt just css will do
This is probably where the css class of the keyframes is set, but I have no clue how to change it

[finite tendon]

what kinda data are you trying to access?

[woeful marlin]

I am making a fork of the GeckoLib plugin
I want to change the keyframe's icon based on the easing type
https://github.com/JannisX11/blockbench-plugins/blob/master/plugins/animation_utils/src/ts/keyframe.ts

[finite tendon]

.keyframe.selected > i.icon-keyframe_bezier::before {
  content: '\1f408';
}
.keyframe:not(.selected) > i.icon-keyframe_bezier::before {
  content: '\1f41f';
}

try this, it should change selected bezier frame to custom character, else another custom

[woeful marlin]

Well this is for whether it's selected or not, is it possible to use a similar method to get the easing?

I don't just want to change the keyframe I wanna change it when the keyframe has the specific easing type I have in mind

[finite tendon]

that's for bezier.

doing selected/not selected just so to keep the behavior of highlighting the selected frame.

[woeful marlin]

Issue is keyframes with different GeckoLib easings don't have different classes for the icons, they all use icon-keyframe class

So there is no way for me to change them the same way I would a bezier keyframe

There is no distinction between the keyframes as far as CSS is aware

[finite tendon]

never use geckolib before so I wouldn't know, but if you are sure there's non then, oh well then css really isn't enough for your need