Telegram Web K with changes to work inside I2P
https://web.telegram.i2p/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
137 lines
2.6 KiB
137 lines
2.6 KiB
/* |
|
* 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; |
|
} |
|
} |
|
}
|
|
|