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 @@ ...@@ -14,6 +14,7 @@
--brand-color-1000: #033844; --brand-color-1000: #033844;
--gray-color-100: #f3f4f6; --gray-color-100: #f3f4f6;
--gray-color-200: #e5e7eb; --gray-color-200: #e5e7eb;
--gray-color-300: #a9c6ce;
--gray-color-500: #6b7280; --gray-color-500: #6b7280;
--gray-color-600: #3e3e3e; --gray-color-600: #3e3e3e;
--gray-color-800: #202020; --gray-color-800: #202020;
...@@ -27,24 +28,63 @@ html { ...@@ -27,24 +28,63 @@ html {
scroll-behavior: smooth; 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 { body {
font-family: var(--brand-font-primary); font-family: var(--brand-font-primary);
color: var(--gray-color-800); color: var(--gray-color-800);
background: linear-gradient(#f9fafb 0%, #fff 35%); background: #fff linear-gradient(#f9fafb 0%, #fff 35%);
/* fallback */
background-color: #fff;
} }
@media screen and (min-width: 769px) { @media screen and (min-width: 769px) {
body { body {
background: linear-gradient(#eaeaea 0%, #f9fafb 25%); background: #f9fafb linear-gradient(#eaeaea 0%, #f9fafb 25%);
/* fallback */
background-color: #f9fafb;
} }
} }
.header { .header {
background-color: white; background-color: #fff;
} }
.header .menu a { .header .menu a {
...@@ -572,18 +612,23 @@ section.try .toggle { ...@@ -572,18 +612,23 @@ section.try .toggle {
} }
#editorCode .cm-scroller { #editorCode .cm-scroller {
border-radius: 5px;
font-family: var(--monospace-font); font-family: var(--monospace-font);
} }
#editorCode .cm-scroller::-webkit-scrollbar { #editorCode .cm-scroller,
height: 8px; #editorPreview {
width: 8px; overscroll-behavior: none;
background: #f0f0f0; 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 { #editorCode .cm-scroller::-webkit-scrollbar-thumb:hover,
background: #cdcdcd; #editorPreview::-webkit-scrollbar-thumb:hover {
background-color: var(--brand-color-600);
} }
#editorPreview h1, #editorPreview h1,
...@@ -593,7 +638,7 @@ section.try .toggle { ...@@ -593,7 +638,7 @@ section.try .toggle {
} }
#editorPreview { #editorPreview {
border-left: 5px solid #f0f0f0; border-left: 3px solid var(--gray-color-200);
border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0;
color: var(--gray-color-800); color: var(--gray-color-800);
padding-left: 1rem; padding-left: 1rem;
...@@ -1660,26 +1705,8 @@ section.docs a:hover { ...@@ -1660,26 +1705,8 @@ section.docs a:hover {
padding-top: 0.62em; 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 { .listingblock.editor > .content {
overscroll-behavior: none; overscroll-behavior: none;
scrollbar-width: thin;
} }
.to .listingblock.editor > .content { .to .listingblock.editor > .content {
...@@ -1690,6 +1717,14 @@ section.docs a:hover { ...@@ -1690,6 +1717,14 @@ section.docs a:hover {
scrollbar-color: #5a6a81 transparent; 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 { .editor-content > .tabset {
padding: 0; padding: 0;
margin: 0; margin: 0;
...@@ -1739,22 +1774,6 @@ section.docs a:hover { ...@@ -1739,22 +1774,6 @@ section.docs a:hover {
overflow: visible; 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 { .exampleblock.compare > .content {
display: flex; display: flex;
gap: 1rem; 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