mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Center chat list icons at narrow width; use rounded scrollbars

Browse source
This commit is contained in:
ayumi-signal 2024-05-14 10:01:47 -07:00 committed by GitHub
parent 559decea2c
commit 4eb5458ace
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 8 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
stylesheets/_global.scss
View file

@ -85,6 +85,8 @@ textarea {
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
border-radius: 4px;
@include light-theme { @include light-theme {
background: $color-gray-25; background: $color-gray-25;
border: 2px solid $color-white; border: 2px solid $color-white;

2
stylesheets/_mixins.scss
View file

@ -868,9 +868,11 @@ $rtl-icon-map: (
@include scrollbar; @include scrollbar;
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
@include light-theme { @include light-theme {
background: $color-gray-25;
border-color: $color-gray-04; border-color: $color-gray-04;
} }
@include dark-theme { @include dark-theme {
background: $color-gray-45;
border-color: $color-gray-80; border-color: $color-gray-80;
} }
} }

13
stylesheets/_modules.scss
View file

@ -4574,8 +4574,11 @@ button.module-image__border-overlay:focus {
padding-inline: 0; padding-inline: 0;
} }
// Center chat list icons in narrow mode by reserving scrollbar space, preventing
// scrollbar from pushing content
&--width-narrow { &--width-narrow {
padding-inline: 10px; padding-inline: 10px 1px;
scrollbar-gutter: stable;
} }
&__item { &__item {
@ -4688,10 +4691,6 @@ button.module-image__border-overlay:focus {
user-select: none; user-select: none;
width: 100%; width: 100%;
.module-conversation-list--width-narrow & {
padding-inline: 14px 0;
}
#{$unread-indicator} { #{$unread-indicator} {
$size: 18px; $size: 18px;
height: $size; height: $size;
@ -4836,10 +4835,6 @@ button.module-image__border-overlay:focus {
align-items: stretch; align-items: stretch;
overflow: hidden; overflow: hidden;
.module-conversation-list--width-narrow & {
margin-inline-start: 0;
}
&--disabled { &--disabled {
opacity: 0.5; opacity: 0.5;
} }