search

doki-theme / doki-theme-vscode

Cute anime character themes for VS-Code.
https://marketplace.visualstudio.com/items?itemName=unthrottled.doki-theme
MIT License
894 stars 50 forks source link

[Feature Request] Hiding sticker on hover #143

Open Dragon-0609 opened 2 years ago

Dragon-0609 commented 2 years ago

Is your feature request related to a problem? Please describe. It isn't such big problem, but it would be great if the problem will be solved. It is inconvenient when you can't see which terminal is active. I could increase height of the terminal, but that isn't point.

Problem How I solved.
vscode-terminal vscode-terminal2

Describe the solution you'd like When the user hovers the sticker, it'll be hidden till the user doesn't move the cursor away.

Unthrottled commented 2 years ago

Ah, yeah that's a good idea. I think I might add it as separate feature from the main sticker installation. You'll have to hover over the sticker for a short duration before it hides.

Unthrottled commented 2 years ago

After briefly looking into the issue, I forgot that I just put the stickers on a css psuedo element, because extensions cannot add things to the VSCode's DOM tree. https://github.com/doki-theme/doki-theme-vscode/blob/ce9522d4969030be73cc22745749b45dd3d51d3e/src/StickerService.ts#L138

So I'll probably need some more time to figure out how I want to get this to work. Adding a :hover effect to the parent doesn't work, because the parent is the entire VSCode window, so the sticker hides immediately.

Dragon-0609 commented 2 years ago

Adding a :hover effect to the parent doesn't work, because the parent is the entire VSCode window, so the sticker hides immediately.

What about transition and opacity?


.sticker {
      width: 186px;
      height: 218px;
      transition: 1.5s;
      background: url("asuna_dark.png") 0 0 no-repeat;
}

.sticker:hover {
      opacity: 0;
}

<div class="sticker"></div>

sticker_hover

Dragon-0609 commented 2 years ago

Adding a :hover effect to the parent doesn't work, because the parent is the entire VSCode window, so the sticker hides immediately.

You can use transition and opacity to hide the sticker smoothly. In the previous comment I wrote about it.

If you are able to get image properties such as height and width, it should work:

<style>
    .sticker::after {
        position:absolute;z-index:9001;width:100%;height:100%;
    }

    .sticker > div::after {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 186px;  /* WIDTH AND HEIGHT IS NECESSARY */
        height: 218px;
        transition: 1.5s;
        background-image: url("asuna_dark.png");
        content:'';

        background-repeat:no-repeat;opacity:1;
    }

    .sticker > div:hover::after {
        opacity: 0;
    }
</style>

<body>
    <div class="sticker">
        <div></div>
    </div>
</body>

sticker_hover

Unthrottled commented 2 years ago

Yeah, that'd be nice if I could get the sticker put into a box the size of it, but right now the stickers are in this parent:

image

So I'll have to see if I can put them in a smaller parent, or some how inject it in.

Apal4ah commented 4 months ago

how to remove the sticker?