34bdf75789
Unread chats counter on mobile screens Fix scrolling top peers on touch Fix wrapping draft emojis Fix avatar transition on swipe-to-reply
138 lines
2.6 KiB
SCSS
138 lines
2.6 KiB
SCSS
/*
|
|
* https://github.com/morethanwords/tweb
|
|
* Copyright (C) 2019-2021 Eduard Kuzmenko
|
|
* https://github.com/morethanwords/tweb/blob/master/LICENSE
|
|
*/
|
|
|
|
.themes {
|
|
&-container {
|
|
display: flex;
|
|
height: 6.5rem;
|
|
position: relative;
|
|
align-items: center;
|
|
|
|
@include respond-to(not-handhelds) {
|
|
width: calc(100% + 1rem);
|
|
margin: 0 -.5rem;
|
|
padding: 0;
|
|
}
|
|
|
|
// @include respond-to(handhelds) {
|
|
// &:after {
|
|
// width: .25rem !important;
|
|
// }
|
|
// }
|
|
|
|
&:before,
|
|
&:after {
|
|
content: " ";
|
|
display: block;
|
|
width: .5rem;
|
|
height: .5rem;
|
|
flex: 0 0 auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.theme {
|
|
&-container {
|
|
height: calc(100% - .5rem);
|
|
margin: 0 .25rem;
|
|
border-radius: $border-radius-medium;
|
|
width: 4.5rem;
|
|
flex: 0 0 auto;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
// transform: scale(1);
|
|
|
|
// @include animation-level(2) {
|
|
// transition: transform var(--transition-standard-in);
|
|
// }
|
|
|
|
// &:active {
|
|
// transform: scale(.9);
|
|
// }
|
|
|
|
&:before {
|
|
position: absolute;
|
|
content: " ";
|
|
top: -4px;
|
|
right: -4px;
|
|
bottom: -4px;
|
|
left: -4px;
|
|
border-radius: #{$border-radius-medium + 4px};
|
|
border: 2px solid var(--primary-color);
|
|
opacity: 0;
|
|
transform: scale(.86);
|
|
|
|
html.is-safari & {
|
|
transform: none !important;
|
|
}
|
|
|
|
@include animation-level(2) {
|
|
transition: transform var(--transition-standard-in), opacity var(--transition-standard-in);
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
pointer-events: none;
|
|
|
|
&:before {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.background-item {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
&-emoticon {
|
|
position: absolute;
|
|
bottom: .5rem;
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
|
|
html:not(.is-safari) & {
|
|
transform-origin: center bottom;
|
|
transform: scale(1);
|
|
}
|
|
|
|
@include animation-level(2) {
|
|
transition: transform var(--transition-standard-in);
|
|
}
|
|
}
|
|
|
|
&-bubble {
|
|
width: 2.5rem;
|
|
height: 1.25rem;
|
|
border-radius: 1.75rem;
|
|
background-color: #fff;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
|
|
&.is-out {
|
|
top: .5rem;
|
|
right: .375rem;
|
|
background-color: var(--light-filled-message-out-primary-color);
|
|
}
|
|
|
|
&.is-in {
|
|
background-color: var(--message-background-color);
|
|
top: calc(1.25rem + .5rem + .25rem);
|
|
left: .375rem;
|
|
}
|
|
}
|
|
}
|