Skip to content

Commit

Permalink
fix(scrollbars): Resolve scrollbar styling issues due to OpenAI dynam…
Browse files Browse the repository at this point in the history
…ic code loading (#50)

- Address broken scrollbar styling caused by OpenAI's dynamic code loading
- Update styles to ensure consistency and override dynamically loaded content

Changes summary:
- Fixed the broken scrollbar styling issue caused by OpenAI's recent changes to dynamic code loading, ensuring a consistent and visually appealing design.
  • Loading branch information
itsmartashub committed Sep 14, 2024
1 parent ea5dffb commit 4ad2844
Showing 1 changed file with 16 additions and 7 deletions.
23 changes: 16 additions & 7 deletions src/sass/global/_base.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
*,
html {
// scrollbar-color: var(--main-surface-tertiary) transparent;
// scrollbar-color: var(--c-scrollbar-thumb) var(--c-scrollbar-track) !important;
// scrollbar-width: thin !important;
scrollbar-color: unset !important;
scrollbar-width: unset !important;
}

html,
body {
--text-primary: var(--c-txt) !important;
Expand Down Expand Up @@ -63,7 +72,7 @@ code.hljs {
/* __________ SCROLLBARS __________ */
/* WebKit/Blink browsers (Chrome, Edge, Safari, etc.) */
::-webkit-scrollbar {
width: var(--w-scrollbar); // desired scrollbar width
width: var(--w-scrollbar) !important; // desired scrollbar width
// height: 0 !important; // desired scrollbar height
height: var(--w-scrollbar) !important; // desired scrollbar height
cursor: grab;
Expand All @@ -72,24 +81,24 @@ code.hljs {
/* scrollbar thumb */
::-webkit-scrollbar-thumb,
scrollbar-thumb {
background-color: var(--c-scrollbar-thumb); // scrollbar thumb color
border-radius: var(--br-scrollbar); // roundness of the thumb
background-color: var(--c-scrollbar-thumb) !important; // scrollbar thumb color
border-radius: var(--br-scrollbar) !important; // roundness of the thumb
cursor: grab;
}

/* scrollbar track */
::-webkit-scrollbar-track,
scrollbar-track-piece {
background-color: var(--c-scrollbar-track); // scrollbar track color
border-radius: var(--br-scrollbar);
background-color: var(--c-scrollbar-track) !important; // scrollbar track color
border-radius: var(--br-scrollbar) !important;
}

/* scrollbar-color for For Firefox */
@-moz-document url-prefix() {

html,
* {
scrollbar-color: var(--c-scrollbar-thumb) var(--c-scrollbar-track); // second parameter (transparent) is for bg-thumb
scrollbar-width: thin;
scrollbar-color: var(--c-scrollbar-thumb) var(--c-scrollbar-track) !important; // second parameter (transparent) is for bg-thumb
scrollbar-width: thin !important;
}
}

0 comments on commit 4ad2844

Please sign in to comment.