Refactor scrollbar CSS for portal components outside of main
This commit is contained in:
parent
af5757b53d
commit
fcd72799b7
3 changed files with 21 additions and 25 deletions
|
@ -149,7 +149,6 @@ function App(props: Props) {
|
|||
const sanitizedReferrerParam = rawReferrerParam && rawReferrerParam.replace(':', '#');
|
||||
const shouldHideNag = pathname.startsWith(`/$/${PAGES.EMBED}`) || pathname.startsWith(`/$/${PAGES.AUTH_VERIFY}`);
|
||||
const userId = user && user.id;
|
||||
const useCustomScrollbar = !IS_MAC;
|
||||
const hasMyChannels = myChannelClaimIds && myChannelClaimIds.length > 0;
|
||||
const hasNoChannels = myChannelClaimIds && myChannelClaimIds.length === 0;
|
||||
const shouldMigrateLanguage = LANGUAGE_MIGRATIONS[language];
|
||||
|
@ -496,7 +495,6 @@ function App(props: Props) {
|
|||
// @if TARGET='app'
|
||||
[`${MAIN_WRAPPER_CLASS}--mac`]: IS_MAC,
|
||||
// @endif
|
||||
[`${MAIN_WRAPPER_CLASS}--scrollbar`]: useCustomScrollbar,
|
||||
})}
|
||||
ref={appRef}
|
||||
onContextMenu={IS_WEB ? undefined : (e) => openContextMenu(e)}
|
||||
|
|
|
@ -459,26 +459,3 @@
|
|||
margin-right: auto;
|
||||
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);
|
||||
}
|
||||
|
|
|
@ -28,6 +28,27 @@ body {
|
|||
font-weight: 400;
|
||||
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
|
||||
'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 {
|
||||
|
|
Loading…
Reference in a new issue