Search as a button | libVencore | Page 1

blissful anvil Apr 5, 2024, 5:11 PM

#

please post this to github :3

grand gate Apr 5, 2024, 5:14 PM

#

Love this, makes the top bar feel super cramped now! I wonder if anyone knows how to remove the help and show member list icon?

tribal monolith Apr 5, 2024, 5:14 PM

#

how do i match the icon color?

inland portal Apr 5, 2024, 5:31 PM

#

tribal monolith how do i match the icon color?

i fixed, changed --interactive to --interactive-normal

#

i did not notice that it's different

tribal monolith Apr 5, 2024, 5:32 PM

#

thanks. looks perfect

grand gate Apr 5, 2024, 5:35 PM

#

Looks fine from here too!

plain shell Apr 5, 2024, 7:05 PM

#

correct channel now

inland portal Apr 5, 2024, 7:19 PM

#

yeah, sorry 😅 i was wondering why i can't post image there

karmic timber Apr 5, 2024, 7:37 PM

#

is there a way to do the same but opens on hover instead of clicking

inland portal Apr 5, 2024, 9:57 PM

#

maybe, but you would still have to click inside the input area..

amber jasper Apr 5, 2024, 11:34 PM

#

karmic timber is there a way to do the same but opens on hover instead of clicking

use :hover

fresh cobalt Apr 6, 2024, 1:53 AM

#

inland portal maybe, but you would still have to click inside the input area..

what inspires you to create those? you make things that never come in mind. I think because i am not a frontend dev and would never be

inland portal Apr 6, 2024, 2:13 AM

#

fresh cobalt what inspires you to create those? you make things that never come in mind. I th...

making tiny windows 😁

fresh cobalt Apr 6, 2024, 2:31 AM

#

OH, that cool and amazing

#

you can't get cooler then that

thorny quail Apr 6, 2024, 2:37 AM

#

Oooooo I've been looking for a similar snippet for so long

#

Thank you

#

vennieflower

amber jasper Apr 6, 2024, 4:35 AM

#

inland portal maybe, but you would still have to click inside the input area..

You have to click it normally too
I think this is really nice

wtf my old snippet was so scuffed???
new one:

[class*=toolbar_]>*>[class*=search_]:not([class*=open_],:hover) {
  &>[class*=searchBar_] {
    width: 22px;
    background: transparent;
  }

  & svg[class*=icon_] {
    transform: scale(1.4);
    color: var(--interactive-normal);
  }
}```

#

maybe add some transitions

#

(not exactly sure how to do that for this)

#

figured it out

#

but transitions dont look very good here

amber jasper Apr 6, 2024, 4:43 AM

#

karmic timber is there a way to do the same but opens on hover instead of clicking

^

thorny quail Apr 6, 2024, 4:54 AM

#

inland portal making tiny windows 😁

The asymmetrical border radius at the top is triggering my ocd

#

https://cdn.discordapp.com/emojis/1221107574271770644.gif?size=48

amber jasper Apr 6, 2024, 4:56 AM

#

?

#

oh

#

lmao

#

amber jasper Apr 6, 2024, 4:57 AM

#

inland portal making tiny windows 😁

why do you not use fullscreen

#

well maximized

still basin Apr 6, 2024, 6:47 AM

#

i wanted to do this myself, but nice

karmic timber Apr 6, 2024, 2:53 PM

#

amber jasper ^

w

wet sentinel Apr 6, 2024, 4:46 PM

#

maybe add a hover pop up

karmic timber Apr 6, 2024, 4:51 PM

#

amber jasper You have to click it normally too I think this is really nice wtf my old snipp...

@wet sentinel

wet sentinel Apr 6, 2024, 4:52 PM

#

not what I had in mind but its better yeah thanks

inland portal Apr 6, 2024, 5:30 PM

#

wet sentinel maybe add a hover pop up

how? is it possible?

wet sentinel Apr 6, 2024, 5:32 PM

#

I actually dont know, just a suggestion

plain shell Apr 6, 2024, 7:41 PM

#

inland portal how? is it possible?

just with CSS it may be possible, but complicated

inland portal Apr 6, 2024, 7:42 PM

#

yeah i'm trying it's working but

#

it needs a little triangle too...

#

😂

#

just trying it for fun

inland portal Apr 6, 2024, 8:03 PM

#

.search_ac353c:hover::before{
    position: absolute;
    border-radius: 5px;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    box-sizing: border-box;
    word-wrap: break-word;
    z-index: 1002;
    top: calc(100% + 8px); 
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-normal);
    padding: 8px 12px; 
    background-color: var(--background-floating); 
    content: 'Search'; 
    box-shadow: var(--elevation-high);
}```

#

needs shadow and blur too

#

i could not apply backdrop-filter blur to this popup

inland portal Apr 6, 2024, 8:43 PM

#

https://issues.chromium.org/issues/40942655#c_ts1700006501 😐 it's a very old bug

spiral dust Apr 7, 2024, 9:33 AM

#

not same background color

#

i put a !important and it's fix

#

amber jasper Apr 7, 2024, 8:39 PM

#

it works for me without a !important

#

oh wait background color

#

ig it's your theme

#

bc for me, it's the same as all the others (none)

inland portal Apr 7, 2024, 11:27 PM

#

wow it's possible too to add the little triangle!

.search_ac353c:hover::after {
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-width: 5px;
    pointer-events: none;
    position: absolute;
    z-index: 1;
    top: calc(100% - 2px); 
    content: ''; 
    border-top-color: var(--background-floating);  
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-top-width: 5px;
    transform: rotate(180deg);
}```

dusky gyro Apr 25, 2024, 5:11 AM

#

i like it but there is a weird border around the icon if this can be removed it will be very awsome

#

it seems on some themes the background thing isnt complete removed on some like mine the backround border isnt removed

dusky gyro Apr 25, 2024, 5:19 AM

#

inland portal wow it's possible too to add the little triangle! ```css .search_ac353c:hover::...

it cant be seen on most themes it is not on the front of the layers after the top bar

blissful anvil Apr 25, 2024, 5:51 AM

#

dusky gyro i like it but there is a weird border around the icon if this can be removed it...

Theme issue NAH

dusky gyro Apr 25, 2024, 5:55 AM

#

blissful anvil Theme issue <:NAH:1173119970981449798>

got similar issues on other themes.

amber jasper May 24, 2024, 12:44 AM

#

what's this part for?
I don't even see a searchBarComponent class with ctrl f

#

and don't notice any difference commenting it out

#

also compacted original snippet with nesting a bit:

.searchBarComponent__8f95f{
  background: transparent;
}

.search_ac353c:not(.open_d3ab4e) {
  && > .searchBar__5a20a {
    width: 22px;
    background: transparent;
  }

  && .iconLayout__9d9a4 {
    cursor: pointer;
  }

  && .iconContainer__9f124 {
    transform: scale(1.4);
  }

  && .icon__5c8c7 {
    color: var(--interactive-normal);
  }

  &&:hover .icon__5c8c7 {
    color: var(--interactive-active);
  }
}```

keen saffron Jun 29, 2024, 8:21 PM

#

goat

mint haven Jul 1, 2024, 5:28 PM

#

keen saffron goat

updated classes

.search_a46bef:not(.open_a46bef) > .searchBar_a46bef {
    width: 22px;
    background: transparent;
}

.search_a46bef:not(.open_a46bef) .iconLayout_effbe2 {
    cursor: pointer;
}

.search_a46bef:not(.open_a46bef) .iconContainer_effbe2 {
    transform: scale(1.4);
}

.search_a46bef:not(.open_a46bef) .icon_effbe2 {
    color: var(--interactive-normal);
}

.search_a46bef:not(.open_a46bef):hover .icon_effbe2 {
    color: var(--interactive-active);
}```

blissful anvil Jul 1, 2024, 6:17 PM

#

mint haven updated classes ```css .search_a46bef:not(.open_a46bef) > .searchBar_a46bef { ...

Why not just use good selectors 😭 😭

mint haven Jul 1, 2024, 6:19 PM

#

blissful anvil Why not just use good selectors 😭 😭

like wildcards?

blissful anvil Jul 1, 2024, 6:20 PM

#

[class*="search_"]

mint haven Jul 1, 2024, 6:21 PM

#

don't they cause lag though? Once built up with more and more wildcards. It causes lag.

#

its what i heard from someone in the BD server

blissful anvil Jul 1, 2024, 6:52 PM

#

Its like 9 youll survive

#

Also for future reference dont listen to anything anyone says in the bd server ever trolley

amber jasper Jul 3, 2024, 3:36 AM

#

mint haven updated classes ```css .search_a46bef:not(.open_a46bef) > .searchBar_a46bef { ...

cleaned up and future proof version with nesting

[class*=toolbar_]>[class*=search_]>[class*=search_]:not([class*=open_]) {
  &>[class*=searchBar_] {
    width: 22px;
    background: transparent;
  }

  & [class*=icon_] {
    cursor: pointer;

    &>[class*=iconContainer_] {
      transform: scale(1.4);

      &>svg[class*=icon_] {
        color: var(--interactive-normal);
      }

      &:hover>svg[class*=icon_] {
        color: var(--interactive-active);
      }
    }
  }

  &:hover::before {
    position: absolute;
    border-radius: 5px;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    box-sizing: border-box;
    word-wrap: break-word;
    z-index: 1002;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-normal);
    padding: 8px 12px;
    background-color: var(--background-floating);
    content: 'Search';
    box-shadow: var(--elevation-high);
  }

  &:hover::after {
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-width: 5px;
    pointer-events: none;
    position: absolute;
    z-index: 1;
    top: calc(100% - 1.7px);
    content: '';
    border-top-color: var(--background-floating);
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-top-width: 5px;
    transform: rotate(180deg);
  }
}```