pre scrollbar fixes

This commit is contained in:
liquidex 2024-02-08 13:49:22 +01:00
parent 83edc97b24
commit 5939db0cc6
2 changed files with 22 additions and 2 deletions

View file

@ -18,6 +18,10 @@
--border-1: rgba(0, 0, 0, 15%); --border-1: rgba(0, 0, 0, 15%);
--border-2: rgba(0, 0, 0, 30%); --border-2: rgba(0, 0, 0, 30%);
--hover: rgba(0, 0, 0, 15%); --hover: rgba(0, 0, 0, 15%);
/* Hack to enable theme-matching scrollbars in <pre> */
--shaded-against-background: #f2f0ea;
--shaded-against-background-twice: #e6e4de;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -33,6 +37,9 @@
--border-1: #f7e5df26; --border-1: #f7e5df26;
--border-1-and-a-half: #f7e5df3a; --border-1-and-a-half: #f7e5df3a;
--border-2: #f7e5df4d; --border-2: #f7e5df4d;
--shaded-against-background: #29313e;
--shaded-against-background-twice: #333a46;
} }
} }
@ -212,8 +219,14 @@ kbd {
pre { pre {
padding: 8px 12px; padding: 8px 12px;
margin: 12px 0; margin: 12px 0;
background-color: var(--shaded-background); background-color: var(--shaded-against-background);
border-radius: 8px; border-radius: 8px;
transition: background-color var(--transition-duration);
}
.tree summary:hover pre {
background-color: var(--shaded-against-background-twice);
} }
pre>code { pre>code {
@ -225,7 +238,9 @@ pre>code {
/* And don't let code examples fly off and overflow the window */ /* And don't let code examples fly off and overflow the window */
pre { pre {
overflow-x: auto; min-width: 0;
width: auto;
overflow: auto;
} }
/* Also don't let images get out of hand */ /* Also don't let images get out of hand */

View file

@ -216,6 +216,11 @@ th-bc {
/* Grow to fill the entire available space. This pushes out th-bb to the far right. */ /* Grow to fill the entire available space. This pushes out th-bb to the far right. */
flex-grow: 1; flex-grow: 1;
/* Bit of a hack to make <pre>s in <th-bc> have scrollbars proper. */
&:has(pre) {
overflow: auto;
}
} }
/* Display a chevron hinting that the collapsed branch has more content in its children. */ /* Display a chevron hinting that the collapsed branch has more content in its children. */