Verified Commit a6061a0c authored by Dan Allen's avatar Dan Allen
Browse files

unify scrollbars

- style the scrollbar on the document element to match the brand colors
- add styles for scrollbars on playground editor and preview
- make scrollbars look consistent across browsers
- clean up styles
parent 33fc4a52
Pipeline #3462 passed with stage
in 33 seconds
......@@ -14,6 +14,7 @@
--brand-color-1000: #033844;
--gray-color-100: #f3f4f6;
--gray-color-200: #e5e7eb;
--gray-color-300: #a9c6ce;
--gray-color-500: #6b7280;
--gray-color-600: #3e3e3e;
--gray-color-800: #202020;
......@@ -27,24 +28,63 @@ html {
scroll-behavior: smooth;
}
@media (pointer: fine) {
html {
scrollbar-color: var(--brand-color-100) var(--brand-color-700);
}
html::-webkit-scrollbar {
background-color: var(--brand-color-700);
height: 12px;
width: 12px;
}
html::-webkit-scrollbar-thumb {
background-clip: padding-box;
background-color: var(--brand-color-100);
border: 3px solid transparent;
border-radius: 12px;
}
html::-webkit-scrollbar-thumb:hover {
background-color: var(--gray-color-300);
}
}
body * {
scrollbar-width: thin;
}
body ::-webkit-scrollbar,
body ::-webkit-scrollbar-corner {
background-color: transparent;
}
body ::-webkit-scrollbar {
height: 6px;
width: 6px;
}
body ::-webkit-scrollbar-thumb {
background-clip: padding-box;
border: 1.5px solid transparent;
border-radius: 6px;
}
body {
font-family: var(--brand-font-primary);
color: var(--gray-color-800);
background: linear-gradient(#f9fafb 0%, #fff 35%);
/* fallback */
background-color: #fff;
background: #fff linear-gradient(#f9fafb 0%, #fff 35%);
}
@media screen and (min-width: 769px) {
body {
background: linear-gradient(#eaeaea 0%, #f9fafb 25%);
/* fallback */
background-color: #f9fafb;
background: #f9fafb linear-gradient(#eaeaea 0%, #f9fafb 25%);
}
}
.header {
background-color: white;
background-color: #fff;
}
.header .menu a {
......@@ -572,18 +612,23 @@ section.try .toggle {
}
#editorCode .cm-scroller {
border-radius: 5px;
font-family: var(--monospace-font);
}
#editorCode .cm-scroller::-webkit-scrollbar {
height: 8px;
width: 8px;
background: #f0f0f0;
#editorCode .cm-scroller,
#editorPreview {
overscroll-behavior: none;
scrollbar-color: var(--brand-color-500) transparent;
}
#editorCode .cm-scroller::-webkit-scrollbar-thumb,
#editorPreview::-webkit-scrollbar-thumb {
background-color: var(--brand-color-500);
}
#editorCode .cm-scroller::-webkit-scrollbar-thumb {
background: #cdcdcd;
#editorCode .cm-scroller::-webkit-scrollbar-thumb:hover,
#editorPreview::-webkit-scrollbar-thumb:hover {
background-color: var(--brand-color-600);
}
#editorPreview h1,
......@@ -593,7 +638,7 @@ section.try .toggle {
}
#editorPreview {
border-left: 5px solid #f0f0f0;
border-left: 3px solid var(--gray-color-200);
border-radius: 0 5px 5px 0;
color: var(--gray-color-800);
padding-left: 1rem;
......@@ -1660,26 +1705,8 @@ section.docs a:hover {
padding-top: 0.62em;
}
.listingblock.editor > .content::-webkit-scrollbar {
width: 3px;
background-color: #475569; /* or add it to the track */
}
.listingblock.editor > .content::-webkit-scrollbar-thumb {
background: #7dd3fc;
}
.from .listingblock.editor > .content::-webkit-scrollbar {
background-color: #a3acb8; /* or add it to the track */
}
.from .listingblock.editor > .content::-webkit-scrollbar-thumb {
background: #5a6a81;
}
.listingblock.editor > .content {
overscroll-behavior: none;
scrollbar-width: thin;
}
.to .listingblock.editor > .content {
......@@ -1690,6 +1717,14 @@ section.docs a:hover {
scrollbar-color: #5a6a81 transparent;
}
.to .listingblock.editor > .content::-webkit-scrollbar-thumb {
background-color: #7dd3fc;
}
.from .listingblock.editor > .content::-webkit-scrollbar-thumb {
background-color: #5a6a81;
}
.editor-content > .tabset {
padding: 0;
margin: 0;
......@@ -1739,22 +1774,6 @@ section.docs a:hover {
overflow: visible;
}
.editor .listingblock > .content code {
background-color: transparent;
line-height: 1.25rem;
scrollbar-color: #5a6a81 #a3acb8;
scrollbar-width: thin;
}
.editor .listingblock > .content code::-webkit-scrollbar {
height: 3px;
background: #a3acb8;
}
.editor .listingblock > .content code::-webkit-scrollbar-thumb {
background: #5a6a81;
}
.exampleblock.compare > .content {
display: flex;
gap: 1rem;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment