Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A couple minor things #1305

Closed
deathbybandaid opened this issue Jan 7, 2022 · 10 comments
Closed

A couple minor things #1305

deathbybandaid opened this issue Jan 7, 2022 · 10 comments

Comments

@deathbybandaid
Copy link

Version Number missing

In 2.18

image

In 2.19

image

Button sizes

As per the above images, both scaled the same, 2.19 buttons seem large

Scroll Bar in 2.18 is nicer looking

In 2.18

image

In 2.19

image

@jtojnar
Copy link
Member

jtojnar commented Jan 7, 2022

  • Version number missing: intentional, f78d9fd I still want to show the version somewhere but have not found the correct place yet
  • Button sizes: 1ec6618, 45px is 2.8125em so I guess I just rounded it up. Perhaps 2.5em would look better
  • Scrollbar: we no longer use custom scrollbar library because I could not find one that would not be buggy and most browsers apparently only Firefox support thin scrollbars – this is how it looks in Firefox on GNOME:
    scrollbars

@deathbybandaid
Copy link
Author

the thin scrollbar in 2.18 works in chromium-based browsers from what I've seen

@jtojnar
Copy link
Member

jtojnar commented Jan 7, 2022

Yeah, in 2.18 we used a custom JavaScript library which worked in most browsers but sometimes it bugged out. And also it was based on jQuery, which we are trying to get rid of.

Tried 2.5em for toolbar button height but it looks too thin with large button:

log in button @ 2.5em

but 2.8em looks okay

log in button @ 2.5em

will change it to that.

jtojnar added a commit that referenced this issue Jan 7, 2022
Make it closer to 2.18 style (45px).
Mentioned in #1305
jtojnar added a commit that referenced this issue Jan 7, 2022
The JavaScript based custom scrollbars are often buggy.
But the default Chromium scrollbar is ugly.
Let’s bring the look closer to 2.18 by using -webkit-scrollbar pseudoelement.

It needs to be thicker than in Firefox because Webkit does not support capturing nearby mouse events.

Mentioned in #1305
@jtojnar
Copy link
Member

jtojnar commented Jan 7, 2022

I switched it to a ::-webkit-scrollbar based approach, which looks slightly less ugly (thought not as nice as 2.18).

@deathbybandaid
Copy link
Author

looks like the checks errored at linting

@jtojnar
Copy link
Member

jtojnar commented Jan 7, 2022

Oops, I realized that a second after I pushed it and then forgot to push the fix.

@deathbybandaid
Copy link
Author

/me applauses

absolutely beautiful!

image

@deathbybandaid
Copy link
Author

deathbybandaid commented Jan 8, 2022

Only thing I'm struggling with is CSS tweaking so the bar isn't green on my plex theme.

In theory, it should just be:

.nav-ts-wrapper {

    &::-webkit-scrollbar-thumb {
        background: var(--button-color);
    }

    &::-webkit-scrollbar-thumb:hover {
        background: var(--button-color);
    }

    &::-webkit-scrollbar-thumb:active {
        background: var(--button-color-hover);
    }
}

@jtojnar
Copy link
Member

jtojnar commented Jan 8, 2022

The & is sass syntax for copying the parent selector. In plain CSS, you will need to use:

.nav-ts-wrapper::-webkit-scrollbar-thumb {
    background: var(--button-color);
}

.nav-ts-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--button-color);
}

.nav-ts-wrapper::-webkit-scrollbar-thumb:active {
    background: var(--button-color-hover);
}

@deathbybandaid
Copy link
Author

thanks, that works, I was probably just to tired staring at it yesterday!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants