css: Add vertical scrollbar styling for view-source textarea.

This styles the vertical scrollbar similar to the horizontal
one for <pre/> (which can be seen in narrow windows). Strictly
speaking, this change shouldn't go in rendered_markdown.scss, but
placing it there helps unify the two scrollbar stylings rather than
duplicating them.
This commit is contained in:
Sumanth V Rao 2020-08-27 09:03:56 +05:30 committed by Tim Abbott
parent ab9a011f89
commit adfe4cacc6
1 changed files with 18 additions and 14 deletions

View File

@ -563,22 +563,26 @@ pre {
white-space: inherit;
}
/* Ensure the horizontal scrollbar is visible on Mac */
pre::-webkit-scrollbar {
height: 8px;
/* Both the horizontal scrollbar in <pre/> as well as
vertical scrollbar in the <textarea/> is styled similarly. */
#message_edit_form textarea,
pre {
/* Ensure the horizontal scrollbar is visible on Mac */
&::-webkit-scrollbar {
height: 8px;
width: 10px;
background-color: hsla(0, 0%, 0%, 0.05);
}
background-color: hsla(0, 0%, 0%, 0.05);
}
&::-webkit-scrollbar-thumb {
background-color: hsla(0, 0%, 0%, 0.3);
border-radius: 20px;
transition: all 0.2s ease;
}
pre::-webkit-scrollbar-thumb {
background-color: hsla(0, 0%, 0%, 0.3);
border-radius: 20px;
transition: all 0.2s ease;
}
pre::-webkit-scrollbar-thumb:hover {
background-color: hsla(0, 0%, 0%, 0.6);
&::-webkit-scrollbar-thumb:hover {
background-color: hsla(0, 0%, 0%, 0.6);
}
}
pre code {