ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

List Item: Fix divider color on mobile devices (#2146)

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-11-18 16:04:59 +04:00
parent 678db5a3e6
commit b69f4fb2e4
3 changed files with 7 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/common/ChatOrUserPicker.scss
View File

@ -67,6 +67,11 @@
.ListItem { .ListItem {
position: absolute; position: absolute;
width: 100%; width: 100%;
body.is-ios &:not(:last-of-type)::after,
body.is-android &:not(:last-of-type)::after {
right: -0.5rem;
}
} }
.ListItem.chat-item-clickable { .ListItem.chat-item-clickable {

10
src/components/ui/ListItem.scss
View File

@ -9,7 +9,7 @@
bottom: 0; bottom: 0;
left: 4.5rem; left: 4.5rem;
right: 0; right: 0;
height: 1px; height: 0.0625rem;
/* stylelint-disable-next-line plugin/whole-pixel */ /* stylelint-disable-next-line plugin/whole-pixel */
box-shadow: inset 0 -0.03125rem 0 0 var(--color-dividers); box-shadow: inset 0 -0.03125rem 0 0 var(--color-dividers);
} }
@ -23,14 +23,6 @@
} }
} }
// Using half-pixel height is efficient on iOS but not supported on Android, so `transform` is used instead
body.is-android & {
&:not(:last-of-type)::after {
height: 0.0625rem;
transform: scaleY(0.25);
}
}
.ListItem-button { .ListItem-button {
width: 100%; width: 100%;
background-color: var(--background-color); background-color: var(--background-color);

2
src/styles/themes.json
View File

@ -22,7 +22,7 @@
"--color-text-secondary-apple": ["#8E8E92", "#AAAAAA"], "--color-text-secondary-apple": ["#8E8E92", "#AAAAAA"],
"--color-borders": ["#DADCE0", "#303030"], "--color-borders": ["#DADCE0", "#303030"],
"--color-borders-input": ["#DADCE0", "#5B5B5A"], "--color-borders-input": ["#DADCE0", "#5B5B5A"],
"--color-dividers": ["#C8C6CC", "#404040"], "--color-dividers": ["#C8C6CC", "#3B3B3D"],
"--color-links": ["#3390EC", "#8774E1"], "--color-links": ["#3390EC", "#8774E1"],
"--color-gray": ["#C4C9CC", "#717579"], "--color-gray": ["#C4C9CC", "#717579"],
"--color-pinned": ["#C4C9CC", "#707579"], "--color-pinned": ["#C4C9CC", "#707579"],