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 { audio {
max-width: 100%; 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 { @mixin normal-input {
@include font-body-1; @include font-body-1;
padding-block: 8px; padding-block: 8px;
@@ -1029,18 +1002,9 @@ $rtl-icon-map: (
transform: translateY(-50%); transform: translateY(-50%);
} }
@mixin NavTabs__Scroller { @mixin scrollbar-on-hover {
padding-bottom: 8px; &:not(:hover, :focus-within) {
@include scrollbar; scrollbar-color: transparent transparent;
&::-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;
}
} }
} }
@@ -1198,16 +1162,10 @@ $rtl-icon-map: (
& { & {
@include light-theme { @include light-theme {
background: variables.$color-gray-02; background: variables.$color-gray-02;
::-webkit-scrollbar-thumb {
border: 2px solid variables.$color-gray-02;
}
} }
@include dark-theme { @include dark-theme {
background: variables.$color-gray-75; 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() { @include mixins.light-theme() {
background: variables.$color-white; background: variables.$color-white;
::-webkit-scrollbar-thumb {
border-color: variables.$color-white;
}
} }
@include mixins.dark-theme { @include mixins.dark-theme {
background: variables.$color-gray-75; 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%; width: 100%;
max-height: 100%; max-height: 100%;
overflow-y: scroll; overflow-y: scroll;
scrollbar-width: none;
&::-webkit-scrollbar,
&::-webkit-scrollbar-thumb {
width: 0;
background: transparent;
}
} }
& .module-ongoing-call__group-call-remote-participant { & .module-ongoing-call__group-call-remote-participant {
@@ -4705,15 +4694,6 @@ button.module-image__border-overlay:focus {
margin: 0; margin: 0;
padding-block: 0; padding-block: 0;
padding-inline: 0; padding-inline: 0;
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-corner,
&::-webkit-scrollbar-track {
background: transparent;
}
} }
&__contact { &__contact {
@@ -4876,10 +4856,11 @@ button.module-calling-participants-list__contact {
.module-conversation-list { .module-conversation-list {
$normal-row-height: 72px; $normal-row-height: 72px;
@include mixins.NavTabs__Scroller;
padding-inline-start: 10px; padding-inline-start: 10px;
padding-inline-end: 1px; /* leaving room for scrollbar */ 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 // list tiles in choose-group-members and compose extend to the edge
.module-left-pane--mode-choose-group-members &, .module-left-pane--mode-choose-group-members &,
.module-left-pane--mode-compose & { .module-left-pane--mode-compose & {
@@ -5959,9 +5940,10 @@ button.module-calling-participants-list__contact {
.module-timeline__messages__container { .module-timeline__messages__container {
flex: 1 1; flex: 1 1;
overflow-x: hidden; overflow-x: hidden;
overflow-y: overlay; overflow-y: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
scrollbar-width: auto;
// Unset this for buttons in the timeline so that it doesn't prevent the higher z-index // Unset this for buttons in the timeline so that it doesn't prevent the higher z-index
// ConversationHeader from being draggable // ConversationHeader from being draggable

4
stylesheets/components/CallsTab.scss
View File

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

17
stylesheets/components/CompositionInput.scss
View File

@@ -24,14 +24,6 @@
inset-inline: 0; inset-inline: 0;
font-style: normal; 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); max-height: calc(72px - 2 * $border-size);
overflow: auto; 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 { &--large {
$largeHeight: calc(212px - 2 * $border-size); $largeHeight: calc(212px - 2 * $border-size);
$largeHeightContentBox: calc($largeHeight - 2 * $padding-top); $largeHeightContentBox: calc($largeHeight - 2 * $padding-top);

2
stylesheets/components/ConversationPanel.scss
View File

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

2
stylesheets/components/ConversationView.scss
View File

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

4
stylesheets/components/CountryCodeSelect.scss
View File

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

4
stylesheets/components/Modal.scss
View File

@@ -119,10 +119,10 @@
} }
&__body { &__body {
@include mixins.scrollbar; @include mixins.scrollbar-on-hover;
@include mixins.font-body-1; @include mixins.font-body-1;
margin: 0; margin: 0;
overflow-y: overlay; overflow-y: auto;
overflow-x: auto; overflow-x: auto;
transition: border-color 150ms ease-in-out; 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 { &__scroll-area {
overflow-y: scroll; overflow-y: scroll;
max-height: 100%; 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 { &__padding {
@@ -346,10 +335,6 @@ $secondary-text-color: light-dark(
padding-top: 8px; padding-top: 8px;
max-width: 750px; max-width: 750px;
position: relative; position: relative;
&::-webkit-scrollbar-corner {
background: transparent;
}
} }
&__settings-pane-content--with-footer { &__settings-pane-content--with-footer {
@@ -1223,10 +1208,6 @@ $secondary-text-color: light-dark(
.Preferences__EditChatFolderPage__SelectChatsDialog { .Preferences__EditChatFolderPage__SelectChatsDialog {
height: 60vw; height: 60vw;
.module-conversation-list::-webkit-scrollbar-thumb {
border-color: light-dark(variables.$color-white, variables.$color-gray-80);
}
} }
.Preferences__EditChatFolderPage__SelectChatsDialog__body { .Preferences__EditChatFolderPage__SelectChatsDialog__body {
@@ -1249,8 +1230,5 @@ $secondary-text-color: light-dark(
} }
.TimePickerPopup { .TimePickerPopup {
::-webkit-scrollbar { scrollbar-width: 0;
width: 0px;
background: transparent;
}
} }

4
stylesheets/components/ShortcutGuide.scss
View File

@@ -24,10 +24,6 @@
@include mixins.dark-theme { @include mixins.dark-theme {
color: variables.$color-gray-05; color: variables.$color-gray-05;
background-color: variables.$color-gray-75; 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 { &__list {
@include mixins.NavTabs__Scroller;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
overflow-y: overlay; overflow-y: auto;
padding-inline: 16px; padding-inline: 16px;
@include mixins.scrollbar-on-hover;
&--empty { &--empty {
@include mixins.font-body-1; @include mixins.font-body-1;
align-items: center; align-items: center;

3
stylesheets/tailwind-config.css
View File

@@ -434,6 +434,7 @@
*/ */
@theme { @theme {
--default-scrollbar-width: thin;
--default-scrollbar-track: transparent; --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 { @theme {
--default-scrollbar-width: auto;
--default-scrollbar-track: transparent; --default-scrollbar-track: transparent;
--default-scrollbar-thumb: currentColor; --default-scrollbar-thumb: currentColor;
} }
@@ -72,7 +73,8 @@
} }
@layer base { @layer base {
:root { * {
scrollbar-width: var(--default-scrollbar-width);
scrollbar-color: var(--default-scrollbar-thumb) scrollbar-color: var(--default-scrollbar-thumb)
var(--default-scrollbar-track); var(--default-scrollbar-track);
} }