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.
351 lines
6.5 KiB
351 lines
6.5 KiB
/* |
|
* https://github.com/morethanwords/tweb |
|
* Copyright (C) 2019-2021 Eduard Kuzmenko |
|
* https://github.com/morethanwords/tweb/blob/master/LICENSE |
|
*/ |
|
|
|
@use "sass:math"; |
|
|
|
$row-border-radius: $border-radius-medium; |
|
|
|
.row { |
|
min-height: 3.5rem; |
|
position: relative; |
|
padding-block: .4375rem; |
|
padding-inline: 1rem; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: center; |
|
// align-items: flex-start; |
|
|
|
&.no-subtitle, |
|
&.row-small { |
|
min-height: 3rem; |
|
padding-top: .1875rem; |
|
padding-bottom: .1875rem; |
|
} |
|
|
|
@include animation-level(2) { |
|
transition: opacity var(--transition-standard-in); |
|
} |
|
|
|
&.is-disabled { |
|
pointer-events: none !important; |
|
opacity: var(--disabled-opacity); |
|
} |
|
|
|
&.no-wrap { |
|
padding-top: 0 !important; |
|
padding-bottom: 0 !important; |
|
} |
|
|
|
a { |
|
position: relative; |
|
z-index: 1; |
|
pointer-events: all; |
|
} |
|
|
|
&-title-row, |
|
& > &-title { |
|
order: 0; |
|
} |
|
|
|
&-big { |
|
min-height: 4.5rem; |
|
padding-block: .5625rem; |
|
padding-inline: 1rem .75rem; |
|
} |
|
|
|
&-row { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
|
|
.row-title, |
|
.row-subtitle { |
|
@include text-overflow(true); |
|
flex: 1 1 auto; |
|
} |
|
} |
|
|
|
&-subtitle-row, |
|
& > &-subtitle { |
|
order: 1; |
|
} |
|
|
|
// &-title, |
|
// &-title-row, |
|
// &-subtitle { |
|
// pointer-events: none; |
|
// } |
|
|
|
&-title { |
|
color: var(--primary-text-color); |
|
font-size: var(--font-size); |
|
line-height: var(--line-height); |
|
|
|
@include text-overflow(false); |
|
|
|
&-right { |
|
&-secondary { |
|
color: var(--secondary-text-color); |
|
} |
|
} |
|
|
|
&-row { |
|
&.with-delimiter { |
|
.row-title:first-child { |
|
border-right: 1px solid var(--border-color); |
|
} |
|
} |
|
} |
|
} |
|
|
|
&-title-right, |
|
&-subtitle-right { |
|
flex: 0 0 auto !important; |
|
margin-inline-start: 1rem; |
|
} |
|
|
|
&-title, |
|
&-subtitle, |
|
&-midtitle { |
|
position: relative; |
|
pointer-events: none; |
|
} |
|
|
|
&-midtitle { |
|
margin-top: .125rem; |
|
font-size: var(--font-size-14); |
|
order: 1; |
|
} |
|
|
|
&-with-padding { |
|
padding-inline-start: 4.5rem; |
|
|
|
@include respond-to(handhelds) { |
|
padding-inline-start: 4rem; |
|
} |
|
|
|
/* .row-title */&.tgico:before { |
|
position: absolute; |
|
inset-inline-start: 1rem; |
|
font-size: 1.5rem; |
|
color: var(--secondary-text-color); |
|
pointer-events: none; |
|
z-index: 1; |
|
|
|
// margin-top: -.125rem; |
|
top: 50%; |
|
transform: translateY(-50%); |
|
} |
|
|
|
&:not(.row-with-icon):before { |
|
display: none; |
|
} |
|
|
|
// .row-subtitle:not(:empty):not(.hide) + .row-title.tgico:before { |
|
// margin-top: .25rem; |
|
// } |
|
} |
|
|
|
&-clickable { |
|
cursor: pointer; |
|
overflow: hidden; |
|
|
|
@include respond-to(not-handhelds) { |
|
border-radius: $row-border-radius; |
|
} |
|
} |
|
|
|
&-sortable { |
|
.row-title, |
|
.row-subtitle { |
|
padding-inline-end: 2.5rem; |
|
} |
|
|
|
&-icon { |
|
font-size: 1.5rem; |
|
height: 1.5rem; |
|
line-height: 1; |
|
color: var(--secondary-text-color); |
|
position: absolute; |
|
top: 50%; |
|
transform: translateY(-50%); |
|
inset-inline-end: .75rem; |
|
pointer-events: none; |
|
opacity: 0; |
|
} |
|
|
|
&.cant-sort { |
|
.row-sortable-icon { |
|
display: none; |
|
} |
|
} |
|
|
|
&.is-dragging { |
|
background-color: var(--surface-color) !important; |
|
z-index: 1; |
|
// box-shadow: 0 0 3px 2px rgba(0, 0, 0, $hover-alpha); |
|
// &:after { |
|
// content: " "; |
|
// position: absolute; |
|
// top: 0; |
|
// right: 0; |
|
// bottom: 0; |
|
// left: 0; |
|
// background-color: var(--surface-color); |
|
// z-index: -1; |
|
// } |
|
|
|
@include hover() { |
|
background-color: var(--light-filled-secondary-text-color) !important; |
|
} |
|
} |
|
|
|
@include hover() { |
|
.row-sortable-icon { |
|
opacity: 1; |
|
} |
|
} |
|
|
|
.is-reordering & { |
|
@include animation-level(2) { |
|
transition: transform var(--transition-standard-in); |
|
} |
|
} |
|
} |
|
|
|
.radio-field-main, |
|
.checkbox-field { |
|
padding-inline-start: 3.375rem; |
|
margin-inline-start: -3.375rem; |
|
} |
|
|
|
.radio-field, |
|
.radio-field:not(.radio-field-right) .radio-field-main, |
|
.checkbox-field { |
|
position: unset; |
|
} |
|
|
|
.radio-field, |
|
.checkbox-field { |
|
--offset-left: 1rem; |
|
} |
|
|
|
.radio-field { |
|
margin-top: 0; |
|
margin-bottom: 0; |
|
} |
|
|
|
.checkbox-field { |
|
margin-top: 0; |
|
margin-inline-end: 0; |
|
margin-bottom: 0; |
|
height: auto; |
|
|
|
.checkbox-caption { |
|
padding-inline-start: 0; |
|
|
|
@include text-overflow(true); |
|
} |
|
|
|
&-toggle { |
|
margin-inline: .125rem .125rem; |
|
padding: 0; |
|
} |
|
|
|
&-absolute { |
|
position: absolute; |
|
margin: 0 !important; |
|
padding: 0 !important; |
|
left: 0; |
|
} |
|
|
|
&-round { |
|
.checkbox-box-border { |
|
z-index: unset; |
|
} |
|
} |
|
} |
|
|
|
&-subtitle { |
|
color: var(--secondary-text-color) !important; |
|
font-size: var(--font-size-14) !important; |
|
line-height: var(--line-height-14); |
|
margin-top: .1875rem; |
|
|
|
&:empty { |
|
display: none; |
|
} |
|
} |
|
|
|
&-media { |
|
width: 2.25rem !important; |
|
height: 2.25rem !important; |
|
position: absolute !important; |
|
margin: 0 !important; |
|
inset-inline-start: .75rem; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
pointer-events: none; |
|
|
|
&-small { |
|
width: 2rem !important; |
|
height: 2rem !important; |
|
inset-inline-start: .75rem !important; |
|
} |
|
|
|
&-abitbigger { |
|
width: 2.625rem !important; |
|
height: 2.625rem !important; |
|
inset-inline-start: .75rem !important; |
|
} |
|
|
|
&-big { |
|
width: 3rem !important; |
|
height: 3rem !important; |
|
inset-inline-start: .5rem !important; |
|
} |
|
|
|
&-bigger { |
|
width: 3.375rem !important; |
|
height: 3.375rem !important; |
|
inset-inline-start: .5625rem !important; // it's wrong but old chatlist has it |
|
} |
|
} |
|
|
|
&.menu-open { |
|
background-color: var(--light-secondary-text-color); |
|
} |
|
|
|
> .btn-primary { |
|
height: 1.875rem; |
|
padding-inline: .75rem; |
|
font-size: .9375rem; |
|
width: auto; |
|
margin: 0; |
|
position: absolute; |
|
inset-inline-end: 1rem; |
|
top: 50%; |
|
transform: translateY(-50%); |
|
border-radius: .9375rem; |
|
line-height: 1.875rem; |
|
|
|
@include animation-level(2) { |
|
transition: width 0.2s, background-color .2s, color .2s; |
|
} |
|
|
|
&.active { |
|
background-color: var(--light-primary-color) !important; |
|
color: var(--primary-color); |
|
} |
|
} |
|
|
|
&.accordion-toggler { |
|
.checkbox-field-toggle { |
|
pointer-events: all !important; |
|
} |
|
} |
|
}
|
|
|