Signal/Desktop
1
0
Fork 0
mirror of https://github.com/signalapp/Signal-Desktop.git synced 2025-12-20 10:19:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix scrollbar styles across the app

Browse Source
This commit is contained in:
Jamie
2025-10-30 11:55:58 -07:00
committed by GitHub
parent 9bf7d1423f
commit ac38ab92a7
14 changed files with 23 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
stylesheets/_global.scss
View File

@@ -82,48 +82,6 @@ textarea {
}
}
::-webkit-scrollbar {
// For vertical scrollbars
width: variables.$scrollbar_width;
// For horizontal scrollbars
height: variables.$scrollbar_height;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
@include mixins.light-theme {
background: variables.$color-gray-25;
border: 2px solid variables.$color-white;
}
@include mixins.dark-theme {
background: variables.$color-gray-45;
border: 2px solid variables.$color-gray-90;
}
&:hover {
@include mixins.light-theme {
background: variables.$color-gray-45;
}
@include mixins.dark-theme {
background: variables.$color-gray-25;
}
}
}
::-webkit-scrollbar-corner {
@include mixins.light-theme {
background: variables.$color-white;
}
@include mixins.dark-theme {
background: variables.$color-black;
}
}
audio {
max-width: 100%;
}

48
stylesheets/_mixins.scss
View File

@@ -869,33 +869,6 @@ $rtl-icon-map: (
}
}
@mixin scrollbar {
&::-webkit-scrollbar-thumb {
border-radius: 4px;
visibility: hidden;
width: 6px;
@include light-theme {
background: variables.$color-black-alpha-40;
}
@include dark-theme {
background: variables.$color-white-alpha-40;
}
}
&::-webkit-scrollbar {
background: transparent;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&:hover::-webkit-scrollbar-thumb {
visibility: visible;
}
}
@mixin normal-input {
@include font-body-1;
padding-block: 8px;
@@ -1029,18 +1002,9 @@ $rtl-icon-map: (
transform: translateY(-50%);
}
@mixin NavTabs__Scroller {
padding-bottom: 8px;
@include scrollbar;
&::-webkit-scrollbar-thumb {
@include light-theme {
background: variables.$color-gray-25;
border-color: variables.$color-gray-04;
}
@include dark-theme {
background: variables.$color-gray-45;
border-color: variables.$color-gray-80;
}
@mixin scrollbar-on-hover {
&:not(:hover, :focus-within) {
scrollbar-color: transparent transparent;
}
}
@@ -1198,16 +1162,10 @@ $rtl-icon-map: (
& {
@include light-theme {
background: variables.$color-gray-02;
::-webkit-scrollbar-thumb {
border: 2px solid variables.$color-gray-02;
}
}
@include dark-theme {
background: variables.$color-gray-75;
::-webkit-scrollbar-thumb {
border: 2px solid variables.$color-gray-75;
}
}
}
}

28
stylesheets/_modules.scss
View File

@@ -3507,15 +3507,9 @@ button.module-image__border-overlay:focus {
& {
@include mixins.light-theme() {
background: variables.$color-white;
::-webkit-scrollbar-thumb {
border-color: variables.$color-white;
}
}
@include mixins.dark-theme {
background: variables.$color-gray-75;
::-webkit-scrollbar-thumb {
border-color: variables.$color-gray-75;
}
}
}
@@ -3935,12 +3929,7 @@ button.module-image__border-overlay:focus {
width: 100%;
max-height: 100%;
overflow-y: scroll;
&::-webkit-scrollbar,
&::-webkit-scrollbar-thumb {
width: 0;
background: transparent;
}
scrollbar-width: none;
}
& .module-ongoing-call__group-call-remote-participant {
@@ -4705,15 +4694,6 @@ button.module-image__border-overlay:focus {
margin: 0;
padding-block: 0;
padding-inline: 0;
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-corner,
&::-webkit-scrollbar-track {
background: transparent;
}
}
&__contact {
@@ -4876,10 +4856,11 @@ button.module-calling-participants-list__contact {
.module-conversation-list {
$normal-row-height: 72px;
@include mixins.NavTabs__Scroller;
padding-inline-start: 10px;
padding-inline-end: 1px; /* leaving room for scrollbar */
@include mixins.scrollbar-on-hover;
// list tiles in choose-group-members and compose extend to the edge
.module-left-pane--mode-choose-group-members &,
.module-left-pane--mode-compose & {
@@ -5959,9 +5940,10 @@ button.module-calling-participants-list__contact {
.module-timeline__messages__container {
flex: 1 1;
overflow-x: hidden;
overflow-y: overlay;
overflow-y: auto;
display: flex;
flex-direction: column;
scrollbar-width: auto;
// Unset this for buttons in the timeline so that it doesn't prevent the higher z-index
// ConversationHeader from being draggable

4
stylesheets/components/CallsTab.scss
View File

@@ -209,7 +209,7 @@
}
.CallsList__List {
@include mixins.NavTabs__Scroller;
@include mixins.scrollbar-on-hover;
}
.CallsList__List--disableScrolling {
@@ -342,7 +342,7 @@
}
.CallsNewCall__List {
@include mixins.NavTabs__Scroller;
@include mixins.scrollbar-on-hover;
}
.CallsNewCall__ListHeaderItem {

17
stylesheets/components/CompositionInput.scss
View File

@@ -24,14 +24,6 @@
inset-inline: 0;
font-style: normal;
}
&::-webkit-scrollbar-thumb {
@include mixins.light-theme {
border-color: variables.$color-gray-05;
}
@include mixins.dark-theme {
border-color: variables.$color-gray-75;
}
}
}
}
@@ -93,15 +85,6 @@
max-height: calc(72px - 2 * $border-size);
overflow: auto;
&::-webkit-scrollbar-thumb {
@include mixins.light-theme {
border-color: variables.$color-gray-05;
}
@include mixins.dark-theme {
border-color: variables.$color-gray-75;
}
}
&--large {
$largeHeight: calc(212px - 2 * $border-size);
$largeHeightContentBox: calc($largeHeight - 2 * $padding-top);

2
stylesheets/components/ConversationPanel.scss
View File

@@ -7,7 +7,7 @@
.ConversationPanel {
height: 100%;
inset-inline-start: 0;
overflow-y: overlay;
overflow-y: auto;
position: absolute;
top: 0;
width: 100%;

2
stylesheets/components/ConversationView.scss
View File

@@ -16,7 +16,7 @@
100% - #{variables.$header-height} - var(--title-bar-drag-area-height)
);
inset-inline-start: 0;
overflow-y: overlay;
overflow-y: auto;
position: absolute;
top: calc(#{variables.$header-height} + var(--title-bar-drag-area-height));
width: 100%;

4
stylesheets/components/CountryCodeSelect.scss
View File

@@ -70,10 +70,6 @@
max-height: 344px;
overflow-y: scroll;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
&__CountryButton {

4
stylesheets/components/Modal.scss
View File

@@ -119,10 +119,10 @@
}
&__body {
@include mixins.scrollbar;
@include mixins.scrollbar-on-hover;
@include mixins.font-body-1;
margin: 0;
overflow-y: overlay;
overflow-y: auto;
overflow-x: auto;
transition: border-color 150ms ease-in-out;
}

24
stylesheets/components/Preferences.scss
View File

@@ -54,17 +54,6 @@ $secondary-text-color: light-dark(
&__scroll-area {
overflow-y: scroll;
max-height: 100%;
&::-webkit-scrollbar-thumb {
@include mixins.light-theme {
background: variables.$color-gray-25;
border-color: variables.$color-gray-04;
}
@include mixins.dark-theme {
background: variables.$color-gray-45;
border-color: variables.$color-gray-80;
}
}
}
&__padding {
@@ -346,10 +335,6 @@ $secondary-text-color: light-dark(
padding-top: 8px;
max-width: 750px;
position: relative;
&::-webkit-scrollbar-corner {
background: transparent;
}
}
&__settings-pane-content--with-footer {
@@ -1223,10 +1208,6 @@ $secondary-text-color: light-dark(
.Preferences__EditChatFolderPage__SelectChatsDialog {
height: 60vw;
.module-conversation-list::-webkit-scrollbar-thumb {
border-color: light-dark(variables.$color-white, variables.$color-gray-80);
}
}
.Preferences__EditChatFolderPage__SelectChatsDialog__body {
@@ -1249,8 +1230,5 @@ $secondary-text-color: light-dark(
}
.TimePickerPopup {
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
scrollbar-width: 0;
}

4
stylesheets/components/ShortcutGuide.scss
View File

@@ -24,10 +24,6 @@
@include mixins.dark-theme {
color: variables.$color-gray-05;
background-color: variables.$color-gray-75;
::-webkit-scrollbar-thumb {
border: 2px solid variables.$color-gray-75;
}
}
}

5
stylesheets/components/Stories.scss
View File

@@ -101,13 +101,14 @@
}
&__list {
@include mixins.NavTabs__Scroller;
display: flex;
flex-direction: column;
flex: 1;
overflow-y: overlay;
overflow-y: auto;
padding-inline: 16px;
@include mixins.scrollbar-on-hover;
&--empty {
@include mixins.font-body-1;
align-items: center;

3
stylesheets/tailwind-config.css
View File

@@ -434,6 +434,7 @@
*/
@theme {
--default-scrollbar-width: thin;
--default-scrollbar-track: transparent;
--default-scrollbar-thumb: #b9b9b9;
--default-scrollbar-thumb: var(--color-label-placeholder);
}

4
stylesheets/tailwind-plugins/scrollbar.css
View File

@@ -8,6 +8,7 @@
*/
@theme {
--default-scrollbar-width: auto;
--default-scrollbar-track: transparent;
--default-scrollbar-thumb: currentColor;
}
@@ -72,7 +73,8 @@
}
@layer base {
:root {
* {
scrollbar-width: var(--default-scrollbar-width);
scrollbar-color: var(--default-scrollbar-thumb)
var(--default-scrollbar-track);
}