LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Refactor scrollbar CSS for portal components outside of main

Browse source
This commit is contained in:
Rafael 2021-11-29 16:49:12 -03:00 committed by Thomas Zarebczan
parent af5757b53d
commit fcd72799b7
3 changed files with 21 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/component/app/view.jsx
View file

@ -149,7 +149,6 @@ function App(props: Props) {
const sanitizedReferrerParam = rawReferrerParam && rawReferrerParam.replace(':', '#'); const sanitizedReferrerParam = rawReferrerParam && rawReferrerParam.replace(':', '#');
const shouldHideNag = pathname.startsWith(`/$/${PAGES.EMBED}`) || pathname.startsWith(`/$/${PAGES.AUTH_VERIFY}`); const shouldHideNag = pathname.startsWith(`/$/${PAGES.EMBED}`) || pathname.startsWith(`/$/${PAGES.AUTH_VERIFY}`);
const userId = user && user.id; const userId = user && user.id;
const useCustomScrollbar = !IS_MAC;
const hasMyChannels = myChannelClaimIds && myChannelClaimIds.length > 0; const hasMyChannels = myChannelClaimIds && myChannelClaimIds.length > 0;
const hasNoChannels = myChannelClaimIds && myChannelClaimIds.length === 0; const hasNoChannels = myChannelClaimIds && myChannelClaimIds.length === 0;
const shouldMigrateLanguage = LANGUAGE_MIGRATIONS[language]; const shouldMigrateLanguage = LANGUAGE_MIGRATIONS[language];
@ -496,7 +495,6 @@ function App(props: Props) {
// @if TARGET='app' // @if TARGET='app'
[`${MAIN_WRAPPER_CLASS}--mac`]: IS_MAC, [`${MAIN_WRAPPER_CLASS}--mac`]: IS_MAC,
// @endif // @endif
[`${MAIN_WRAPPER_CLASS}--scrollbar`]: useCustomScrollbar,
})} })}
ref={appRef} ref={appRef}
onContextMenu={IS_WEB ? undefined : (e) => openContextMenu(e)} onContextMenu={IS_WEB ? undefined : (e) => openContextMenu(e)}

23
ui/scss/component/_main.scss
View file

@ -459,26 +459,3 @@
margin-right: auto; margin-right: auto;
max-width: 32rem; max-width: 32rem;
} }
.main-wrapper--scrollbar {
// The W3C future standard; currently supported by Firefox only.
// It'll hopefully auto fallback to this when 'webkit-scrollbar' below is deprecated in the future.
scrollbar-width: auto;
scrollbar-color: var(--color-scrollbar-thumb-bg) var(--color-scrollbar-track-bg);
}
.main-wrapper--scrollbar *::-webkit-scrollbar {
width: 12px;
height: 12px;
}
.main-wrapper--scrollbar *::-webkit-scrollbar-track {
background: var(--color-scrollbar-track-bg);
}
.main-wrapper--scrollbar *::-webkit-scrollbar-thumb {
// Don't set 'border-radius' because Firefox's 'scrollbar-xx'
// standard currently doesn't support it. Stick with square
// scrollbar for all browsers.
background-color: var(--color-scrollbar-thumb-bg);
}

21
ui/scss/init/_gui.scss
View file

@ -28,6 +28,27 @@ body {
font-weight: 400; font-weight: 400;
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
// The W3C future standard; currently supported by Firefox only.
// It'll hopefully auto fallback to this when 'webkit-scrollbar' below is deprecated in the future.
scrollbar-width: auto;
scrollbar-color: var(--color-scrollbar-thumb-bg) var(--color-scrollbar-track-bg);
}
body *::-webkit-scrollbar {
width: 12px;
height: 12px;
}
body *::-webkit-scrollbar-track {
background: var(--color-scrollbar-track-bg);
}
body *::-webkit-scrollbar-thumb {
// Don't set 'border-radius' because Firefox's 'scrollbar-xx'
// standard currently doesn't support it. Stick with square
// scrollbar for all browsers.
background-color: var(--color-scrollbar-thumb-bg);
} }
hr { hr {