pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix hidden scrollbar for electron 25

Browse source 
- Newer chromium versions do not support scrollbar overlay css
This commit is contained in:
jeffvli 2023-07-16 23:48:44 -07:00
parent be37dada13
commit 1de89071e8
2 changed files with 111 additions and 124 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/renderer/components/scroll-area/index.tsx
View file

@ -30,7 +30,7 @@ const StyledScrollArea = styled(MantineScrollArea)`
const StyledNativeScrollArea = styled.div<{ scrollBarOffset?: string; windowBarStyle?: Platform }>` const StyledNativeScrollArea = styled.div<{ scrollBarOffset?: string; windowBarStyle?: Platform }>`
height: 100%; height: 100%;
overflow-y: overlay !important; overflow-y: auto;
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
margin-top: ${(props) => margin-top: ${(props) =>

233
src/renderer/styles/global.scss
View file

@ -4,225 +4,212 @@
@use './ag-grid.scss'; @use './ag-grid.scss';
* { * {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
body, body,
html { html {
position: absolute; position: absolute;
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden; overflow-y: hidden;
color: var(--content-text-color); color: var(--content-text-color);
background: var(--content-bg); background: var(--content-bg);
font-family: var(--content-font-family); font-family: var(--content-font-family);
font-size: var(--root-font-size); font-size: var(--root-font-size);
user-select: none; user-select: none;
} }
@media only screen and (max-width: 639px) { @media only screen and (max-width: 639px) {
body, body,
html { html {
overflow-x: auto; overflow-x: auto;
} }
} }
#app { #app {
height: inherit; height: inherit;
} }
*, *,
*:before, *:before,
*:after { *:after {
box-sizing: border-box; box-sizing: border-box;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-text-size-adjust: none; -webkit-text-size-adjust: none;
outline: none; outline: none;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 12px; width: 12px;
height: 12px; height: 12px;
} }
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
background: var(--scrollbar-track-bg); background: var(--scrollbar-track-bg);
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: var(--scrollbar-track-bg); background: var(--scrollbar-track-bg);
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb-bg); background: var(--scrollbar-thumb-bg);
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: var(--scrollbar-thumb-bg-hover); background: var(--scrollbar-thumb-bg-hover);
} }
a { a {
text-decoration: none; text-decoration: none;
} }
button { button {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
}
.overlay-scrollbar {
overflow-y: overlay !important;
overflow-x: overlay !important;
} }
.hide-scrollbar { .hide-scrollbar {
scrollbar-width: thin; scrollbar-color: transparent transparent;
scrollbar-color: transparent transparent;
&::-webkit-scrollbar { &::-webkit-scrollbar-track {
width: 1px; background: transparent;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-thumb {
background: transparent; background-color: transparent;
} }
&::-webkit-scrollbar-thumb {
background-color: transparent;
}
}
.hide-scrollbar::-webkit-scrollbar {
display: none; /* Safari and Chrome */
} }
@keyframes fadeIn { @keyframes fadeIn {
from { from {
opacity: 0; opacity: 0;
} }
to { to {
opacity: 1; opacity: 1;
} }
} }
@keyframes fadeOut { @keyframes fadeOut {
from { from {
opacity: 1; opacity: 1;
} }
to { to {
opacity: 0; opacity: 0;
} }
} }
.mantine-ScrollArea-thumb[data-state='visible'] { .mantine-ScrollArea-thumb[data-state='visible'] {
animation: fadeIn 0.3s forwards; animation: fadeIn 0.3s forwards;
} }
.mantine-ScrollArea-scrollbar[data-state='hidden'] { .mantine-ScrollArea-scrollbar[data-state='hidden'] {
animation: fadeOut 0.2s forwards; animation: fadeOut 0.2s forwards;
} }
@font-face { @font-face {
font-family: 'Archivo'; font-family: 'Archivo';
src: url('../fonts/Archivo-VariableFont_wdth,wght.ttf') format('truetype-variations'); src: url('../fonts/Archivo-VariableFont_wdth,wght.ttf') format('truetype-variations');
font-weight: 100 1000; font-weight: 100 1000;
} }
@font-face { @font-face {
font-family: 'Raleway'; font-family: 'Raleway';
src: url('../fonts/Raleway-VariableFont_wght.ttf') format('truetype-variations'); src: url('../fonts/Raleway-VariableFont_wght.ttf') format('truetype-variations');
font-weight: 100 1000; font-weight: 100 1000;
} }
@font-face { @font-face {
font-family: 'Fredoka'; font-family: 'Fredoka';
src: url('../fonts/Fredoka-VariableFont_wdth,wght.ttf') format('truetype-variations'); src: url('../fonts/Fredoka-VariableFont_wdth,wght.ttf') format('truetype-variations');
font-weight: 100 1000; font-weight: 100 1000;
} }
@font-face { @font-face {
font-family: 'League Spartan'; font-family: 'League Spartan';
src: url('../fonts/LeagueSpartan-VariableFont_wght.ttf') format('truetype-variations'); src: url('../fonts/LeagueSpartan-VariableFont_wght.ttf') format('truetype-variations');
font-weight: 100 1000; font-weight: 100 1000;
} }
@font-face { @font-face {
font-family: 'Lexend'; font-family: 'Lexend';
src: url('../fonts/Lexend-VariableFont_wght.ttf') format('truetype-variations'); src: url('../fonts/Lexend-VariableFont_wght.ttf') format('truetype-variations');
font-weight: 100 1000; font-weight: 100 1000;
} }
@font-face { @font-face {
font-family: 'Sora'; font-family: 'Sora';
src: url('../fonts/Sora-VariableFont_wght.ttf') format('truetype-variations'); src: url('../fonts/Sora-VariableFont_wght.ttf') format('truetype-variations');
font-weight: 100 1000; font-weight: 100 1000;
} }
@font-face { @font-face {
font-family: 'Work Sans'; font-family: 'Work Sans';
src: url('../fonts/WorkSans-VariableFont_wght.ttf') format('truetype-variations'); src: url('../fonts/WorkSans-VariableFont_wght.ttf') format('truetype-variations');
font-weight: 100 1000; font-weight: 100 1000;
} }
@font-face { @font-face {
font-family: 'Poppins'; font-family: 'Poppins';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-display: swap; font-display: swap;
src: url('../fonts/Poppins-Regular.ttf') format('truetype'); src: url('../fonts/Poppins-Regular.ttf') format('truetype');
} }
@font-face { @font-face {
font-family: 'Poppins'; font-family: 'Poppins';
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
font-display: swap; font-display: swap;
src: url('../fonts/Poppins-SemiBold.ttf') format('truetype'); src: url('../fonts/Poppins-SemiBold.ttf') format('truetype');
} }
@font-face { @font-face {
font-family: 'Poppins'; font-family: 'Poppins';
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
font-display: swap; font-display: swap;
src: url('../fonts/Poppins-Bold.ttf') format('truetype'); src: url('../fonts/Poppins-Bold.ttf') format('truetype');
} }
@font-face { @font-face {
font-family: 'Poppins'; font-family: 'Poppins';
font-style: normal; font-style: normal;
font-weight: 800; font-weight: 800;
font-display: swap; font-display: swap;
src: url('../fonts/Poppins-ExtraBold.ttf') format('truetype'); src: url('../fonts/Poppins-ExtraBold.ttf') format('truetype');
} }
@font-face { @font-face {
font-family: 'Poppins'; font-family: 'Poppins';
font-style: normal; font-style: normal;
font-weight: 900; font-weight: 900;
font-display: swap; font-display: swap;
src: url('../fonts/Poppins-Black.ttf') format('truetype'); src: url('../fonts/Poppins-Black.ttf') format('truetype');
} }
@font-face { @font-face {
font-family: 'Raleway'; font-family: 'Raleway';
src: url('../fonts/Raleway-VariableFont_wght.ttf') format('truetype-variations'); src: url('../fonts/Raleway-VariableFont_wght.ttf') format('truetype-variations');
font-weight: 100 1000; font-weight: 100 1000;
} }
@font-face { @font-face {
font-family: 'DroidSerif'; font-family: 'DroidSerif';
src: url('https://rawgit.com/google/fonts/master/ufl/ubuntumono/UbuntuMono-Italic.ttf') src: url('https://rawgit.com/google/fonts/master/ufl/ubuntumono/UbuntuMono-Italic.ttf')
format('truetype'); format('truetype');
unicode-range: U+000-5FF; /* Latin glyphs */ unicode-range: U+000-5FF; /* Latin glyphs */
} }
@font-face { @font-face {
font-family: 'DroidSerif'; font-family: 'DroidSerif';
src: url('https://fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2') format('truetype'); src: url('https://fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2')
unicode-range: U+3000-9FFF, U+ff??; /* Japanese glyphs */ format('truetype');
unicode-range: U+3000-9FFF, U+ff??; /* Japanese glyphs */
} }