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.
210 lines
4.0 KiB
210 lines
4.0 KiB
/* |
|
* https://github.com/morethanwords/tweb |
|
* Copyright (C) 2019-2021 Eduard Kuzmenko |
|
* https://github.com/morethanwords/tweb/blob/master/LICENSE |
|
*/ |
|
|
|
avatar-element { |
|
--size: 54px; |
|
--multiplier: 1; |
|
--color-top: var(--avatar-color-top); |
|
--color-bottom: var(--avatar-color-bottom); |
|
color: #fff; |
|
width: var(--size); |
|
height: var(--size); |
|
line-height: var(--size) !important; |
|
border-radius: 50%; |
|
background: linear-gradient(var(--color-top), var(--color-bottom)); |
|
text-align: center; |
|
font-size: calc(1.25rem / var(--multiplier)); |
|
/* overflow: hidden; */ |
|
user-select: none; |
|
text-transform: uppercase; |
|
font-weight: 700; |
|
|
|
&[data-color="red"] { |
|
--color-top: var(--peer-avatar-red-top); |
|
--color-bottom: var(--peer-avatar-red-bottom); |
|
} |
|
|
|
&[data-color="orange"] { |
|
--color-top: var(--peer-avatar-orange-top); |
|
--color-bottom: var(--peer-avatar-orange-bottom); |
|
} |
|
|
|
&[data-color="violet"] { |
|
--color-top: var(--peer-avatar-violet-top); |
|
--color-bottom: var(--peer-avatar-violet-bottom); |
|
} |
|
|
|
&[data-color="green"] { |
|
--color-top: var(--peer-avatar-green-top); |
|
--color-bottom: var(--peer-avatar-green-bottom); |
|
} |
|
|
|
&[data-color="cyan"] { |
|
--color-top: var(--peer-avatar-cyan-top); |
|
--color-bottom: var(--peer-avatar-cyan-bottom); |
|
} |
|
|
|
&[data-color="pink"] { |
|
--color-top: var(--peer-avatar-pink-top); |
|
--color-bottom: var(--peer-avatar-pink-bottom); |
|
} |
|
|
|
&[data-color="blue"] { |
|
--color-top: var(--peer-avatar-blue-top); |
|
--color-bottom: var(--peer-avatar-blue-bottom); |
|
} |
|
|
|
&.tgico:before { |
|
font-size: calc(32px / var(--multiplier)); |
|
} |
|
|
|
&.tgico-calendarfilter:before { |
|
font-size: calc(36px / var(--multiplier)); |
|
} |
|
|
|
&.tgico-saved:before { |
|
font-size: calc(21px / var(--multiplier)) !important; // ! IMPORTANT IS TEMPORARY |
|
} |
|
|
|
/* &.tgico-savedmessages:before { |
|
font-size: calc(25px / var(--multiplier)); |
|
} */ |
|
|
|
&.tgico-deletedaccount:before { |
|
font-size: calc(54px / var(--multiplier)); |
|
} |
|
|
|
&:before { |
|
line-height: inherit !important; |
|
} |
|
|
|
img { |
|
//width: 100% !important; |
|
//height: 100% !important; |
|
width: var(--size) !important; |
|
height: var(--size) !important; |
|
border-radius: inherit !important; |
|
|
|
&.fade-in { |
|
animation: fade-in-opacity .2s ease forwards; |
|
} |
|
|
|
&.emoji { |
|
width: calc(1.125rem / var(--multiplier)) !important; |
|
height: calc(1.125rem / var(--multiplier)) !important; |
|
vertical-align: middle !important; |
|
} |
|
} |
|
|
|
path { |
|
fill: white; |
|
} |
|
|
|
&.is-online { |
|
position: relative; |
|
|
|
&:after { |
|
position: absolute; |
|
content: " "; |
|
display: block; |
|
border-radius: 50%; |
|
border: 2px solid var(--surface-color); |
|
background-color: var(--avatar-online-color); |
|
width: 14px; |
|
height: 14px; |
|
left: 2.4375rem; |
|
top: 2.4375rem; |
|
} |
|
} |
|
|
|
&[clickable] { |
|
cursor: pointer; |
|
} |
|
|
|
&.avatar-relative { |
|
position: relative; |
|
} |
|
|
|
/* &.avatar-54 { |
|
width: 54px; |
|
height: 54px; |
|
line-height: 54px; |
|
font-size: 1.25rem; |
|
|
|
&.tgico-savedmessages:before { |
|
font-size: 26px; |
|
} |
|
|
|
&.tgico-avatar_deletedaccount:before { |
|
font-size: 56px; |
|
} |
|
} */ |
|
&.avatar-120 { |
|
--size: 120px; |
|
--multiplier: .45; |
|
} |
|
|
|
&.avatar-100 { |
|
--size: 100px; |
|
--multiplier: .54; |
|
} |
|
|
|
&.avatar-48 { |
|
--size: 48px; |
|
--multiplier: 1.125; |
|
} |
|
|
|
&.avatar-46 { |
|
--size: 46px; |
|
--multiplier: 1.173913; |
|
} |
|
|
|
&.avatar-44 { |
|
--size: 44px; |
|
--multiplier: 1.227272; |
|
} |
|
|
|
&.avatar-42 { |
|
--size: 42px; |
|
--multiplier: 1.285714; |
|
} |
|
|
|
&.avatar-40 { |
|
--size: 40px; |
|
--multiplier: 1.35; |
|
} |
|
|
|
&.avatar-34 { |
|
--size: 34px; |
|
--multiplier: 1.588235; |
|
} |
|
|
|
&.avatar-32 { |
|
--size: 32px; |
|
--multiplier: 1.6875; |
|
} |
|
|
|
&.avatar-30 { |
|
--size: 30px; |
|
--multiplier: 1.8; |
|
} |
|
|
|
&.avatar-18 { |
|
--size: 18px; |
|
--multiplier: 3; |
|
} |
|
|
|
&.avatar-16 { |
|
--size: 16px; |
|
--multiplier: 3.375; |
|
} |
|
} |
|
|
|
.avatar-photo { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
}
|
|
|