Can someone help me with something a little specific?

[xarr72]

I'm relatively new to CSS and I'm having trouble figuring out why my previously working custom style stopped working as it used to.
Here's the problem, I had some pseudo classes applied to the searchbar element which incremented the width with a transition when hovering or focusing on the searchbar. But after the update it totally got messed up. Does someone realise what I'm missing here? I'll attach the code snippet and image of the issue.

#interface #sb_container #searchbar:hover{
  height: 3em;
  width: 45em;
  transition: width 0.4s ease-in-out;      
} 

#interface #sb_container #searchbar:focus{
width: 45em;
transition: width 0.6s ease-in-out;
}

#interface #sb_container #searchbar:not(focus){
width: 20em;
transition: width 0.6s ease-in-out;
}

#interface #sb_container #searchbar{
    width: 20em;
    height: 3em;
    padding: 0 7em 0 1em;
    border-radius: 8px;
    color: #F6F6F6;
    font-size: 1.4em;
    font-family: inherit;
    font-weight: 500;
    background-color: rgba(255,255,255,var searchbar-background-alpha));
    border: 1px solid rgba(255,255,255,.075);
    backdrop-filter: blur(4px);
}

[Gitoffthelawn]

The first thing I immediately see is that you are missing a colon in one selector:
#interface #sb_container #searchbar:not(focus)
should be:
#interface #sb_container #searchbar:not(:focus)

The next thing I see is that you are missing an open-paren as well as -- here:
background-color: rgba(255,255,255,var searchbar-background-alpha));
The correct syntax is:
background-color: rgba(255,255,255,var(--searchbar-background-alpha));

I hope this helps you.

[xarr72]

Thanks @Gitoffthelawn! This helps out.

[victrme]

Hello @huzaif2636 :)

I had to change the HTML/CSS of the search bar because it wasn't working well with right-to-left languages. The issue here is that your CSS copies some of the outdated styling. I essentially moved some background and border properties from #searchbar to #searchbar-wrapper.

As @Gitoffthelawn pointed out, some parts of your CSS are not valid, but it is old styling anyways. Here is a quick fix replacing your old CSS:

#interface #sb_container #searchbar:hover,
#interface #sb_container #searchbar:focus {
    width: 25em;
}

#interface #sb_container #searchbar {
    /* no need for padding now */
    width: 15em;
    height: 3em;
    color: #F6F6F6;
    font-size: 1.4em;
    font-weight: 500;
    transition: width 0.6s ease-in-out;
}

#interface #sb_container #searchbar-wrapper {
    border: 1px solid rgba(255,255,255,.075);
    backdrop-filter: blur(4px);
}

[xarr72]

Hey @victrme! This works like a charm! I wasn't aware of the changes made to the searchbar which was what left me clueless and confused. Thanks for the quick reply and all the help! My perfectionist self can finally be at peace lol. On a sidenote, I love this project of yours and will keep using and support it anyway I can. Hope you have a great rest of the day :)