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 }>`
height: 100%;
overflow-y: overlay !important;
overflow-y: auto;
&::-webkit-scrollbar-track {
margin-top: ${(props) =>

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

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