1319 lines
23 KiB
SCSS
1319 lines
23 KiB
SCSS
/*
|
||
* https://github.com/morethanwords/tweb
|
||
* Copyright (C) 2019-2021 Eduard Kuzmenko
|
||
* https://github.com/morethanwords/tweb/blob/master/LICENSE
|
||
*/
|
||
|
||
#column-left {
|
||
//display: flex;
|
||
flex-direction: column;
|
||
flex: 1 1 auto;
|
||
min-width: unquote('min(100%, 18rem)');
|
||
max-width: calc(#{$large-screen} / 4);
|
||
|
||
@include respond-to(handhelds) {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
|
||
body:not(.is-left-column-shown) & {
|
||
transform: translate3d(-25vw, 0, 0);
|
||
filter: brightness(80%);
|
||
}
|
||
}
|
||
|
||
@include respond-to(not-handhelds) {
|
||
overflow: visible;
|
||
|
||
&:after {
|
||
position: absolute;
|
||
content: " ";
|
||
display: block;
|
||
height: 100vh;
|
||
width: 1px;
|
||
background-color: var(--border-color);
|
||
inset-inline-end: -1px;
|
||
top: 0;
|
||
z-index: 2;
|
||
}
|
||
}
|
||
|
||
@include respond-to(floating-left-sidebar) {
|
||
display: flex;
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
/* height: calc(var(--vh, 1vh) * 100);
|
||
min-height: calc(var(--vh, 1vh) * 100) !important; */
|
||
width: 26.5rem;
|
||
transform: translate3d(-5rem, 0, 0);
|
||
transition: transform var(--layer-transition);
|
||
max-width: unset;
|
||
|
||
body.animation-level-0 & {
|
||
transition: none;
|
||
}
|
||
|
||
body.is-left-column-shown & {
|
||
transform: translateZ(0);
|
||
}
|
||
}
|
||
|
||
@include respond-to(no-floating-left-sidebar) {
|
||
display: flex;
|
||
}
|
||
|
||
@include respond-to(before-medium-screens) {
|
||
flex: 2;
|
||
}
|
||
|
||
// ! WARNING, ОЧЕНЬ КРУТОЙ КОСТЫЛЬ - ФИКС ЧЁРНОЙ РАМКИ У КАРТИНОК С ХВОСТИКОМ
|
||
html.is-safari & {
|
||
@include respond-to(large-screens) {
|
||
max-width: calc(#{$large-screen} / 4 - 1.25px);
|
||
}
|
||
}
|
||
|
||
// .item-main {
|
||
// --menu-size: 3.1875rem;
|
||
// }
|
||
|
||
.item-main .menu-horizontal {
|
||
&-scrollable {
|
||
// --scrollable-size: var(--menu-size);
|
||
z-index: 1;
|
||
background-color: var(--surface-color);
|
||
position: relative;
|
||
top: unset;
|
||
|
||
@include respond-to(handhelds) {
|
||
box-shadow: 0px 1px 5px -1px rgba(0, 0, 0, .16);
|
||
}
|
||
|
||
.scrollable {
|
||
position: relative;
|
||
}
|
||
|
||
.badge {
|
||
margin-inline-start: 5px;
|
||
//line-height: inherit !important;
|
||
}
|
||
|
||
&:not(.hide) + #folders-container {
|
||
height: calc(100% - var(--scrollable-size));
|
||
position: relative;
|
||
|
||
.scrollable {
|
||
padding-top: .5rem;
|
||
}
|
||
|
||
.dialogs-placeholder-canvas {
|
||
top: .5rem;
|
||
}
|
||
|
||
/* .chatlist {
|
||
top: .5rem;
|
||
} */
|
||
}
|
||
}
|
||
|
||
&-div {
|
||
position: relative !important;
|
||
justify-content: flex-start;
|
||
z-index: 0;
|
||
// padding: 0 0 5px; // 4px + 1px border // floating design
|
||
--padding-horizontal: .6875rem;
|
||
|
||
@include respond-to(handhelds) {
|
||
--padding-horizontal: .1875rem;
|
||
}
|
||
|
||
&-item {
|
||
flex: 0 0 auto;
|
||
min-width: 3rem;
|
||
}
|
||
|
||
&__stripe {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.folders-tabs-scrollable {
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
/* .folders-tabs-scrollable {
|
||
.menu-horizontal-div-item:first-child {
|
||
margin-inline-start: .6875rem;
|
||
|
||
@include respond-to(handhelds) {
|
||
margin-inline-start: .1875rem;
|
||
}
|
||
}
|
||
} */
|
||
|
||
.item-main {
|
||
--offset-top: 0;
|
||
background-color: var(--surface-color);
|
||
|
||
.input-search {
|
||
/* &-input {
|
||
--paddingLeft: 0px;
|
||
padding-inline-start: calc(42px - var(--border-width) + var(--paddingLeft));
|
||
} */
|
||
|
||
.selector-user {
|
||
height: 30px;
|
||
position: absolute !important;
|
||
inset-inline-start: 6px;
|
||
top: 6px;
|
||
z-index: 1;
|
||
margin-inline-start: 0;
|
||
line-height: 1.875rem;
|
||
}
|
||
|
||
&.is-picked {
|
||
.input-search-input {
|
||
padding-inline-start: calc(var(--paddingLeft) + 12px - var(--border-width));
|
||
}
|
||
|
||
.tgico-close {
|
||
display: block !important;
|
||
}
|
||
}
|
||
|
||
&.is-picked-twice {
|
||
.selector-user:first-of-type {
|
||
width: 30px;
|
||
}
|
||
|
||
.selector-user:last-of-type {
|
||
inset-inline-start: 38px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.search-helper {
|
||
display: flex;
|
||
margin-inline-start: 28px;
|
||
|
||
@include respond-to(handhelds) {
|
||
margin-inline-start: 20px;
|
||
}
|
||
|
||
.selector-user {
|
||
margin-top: 7px;
|
||
font-size: 14px;
|
||
|
||
@include hover() {
|
||
background-color: var(--light-primary-color);
|
||
}
|
||
|
||
&-avatar:after {
|
||
display: none !important;
|
||
}
|
||
}
|
||
|
||
&:empty {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.search-super-tabs-scrollable {
|
||
flex: 0 0 auto;
|
||
position: relative !important;
|
||
|
||
&:before {
|
||
display: none;
|
||
}
|
||
|
||
.menu-horizontal-div-item {
|
||
flex: 1 0 auto !important;
|
||
}
|
||
}
|
||
|
||
.search-super {
|
||
.preloader {
|
||
height: 100%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
}
|
||
}
|
||
|
||
#chatlist-container {
|
||
max-height: 100%;
|
||
// overflow: hidden;
|
||
position: relative;
|
||
background-color: var(--surface-color);
|
||
|
||
&.has-filters {
|
||
.connection-status-bottom {
|
||
height: calc(100% + var(--offset-top) * -1);
|
||
}
|
||
}
|
||
}
|
||
|
||
#folders-container {
|
||
flex: 1 1 auto;
|
||
|
||
.scrollable-y {
|
||
background-color: transparent;
|
||
position: absolute;
|
||
|
||
&.active { // fix safari 14.0.2 scrollHeight
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
|
||
.dialogs-placeholder-canvas {
|
||
position: absolute;
|
||
top: 0;
|
||
z-index: 2;
|
||
}
|
||
|
||
.sidebar-slider {
|
||
height: 100%;
|
||
}
|
||
|
||
.sidebar-header__btn-container {
|
||
position: relative;
|
||
width: 2.5rem;
|
||
height: 2.5rem;
|
||
flex: 0 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
> .btn-icon {
|
||
visibility: hidden;
|
||
opacity: 0;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
// z-index: 2;
|
||
z-index: 4; // over forum
|
||
margin: 0;
|
||
|
||
body.animation-level-0 &:before {
|
||
transition: none;
|
||
}
|
||
|
||
&.is-visible {
|
||
//margin-top: 1px;
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
}
|
||
|
||
@include respond-to(handhelds) {
|
||
.btn-menu {
|
||
margin-top: -.25rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
.sidebar-tools-button {
|
||
width: 100%;
|
||
|
||
.btn-menu {
|
||
min-width: 260px;
|
||
max-height: calc(100 * var(--vh) - 3.75rem);
|
||
|
||
&-item {
|
||
padding-inline-end: .375rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
.archived-count {
|
||
justify-self: flex-end;
|
||
margin-inline-start: .625rem;
|
||
|
||
html.is-mobile & {
|
||
margin-inline-end: .375rem;
|
||
}
|
||
|
||
@include respond-to(handhelds) {
|
||
font-weight: var(--font-weight-bold);
|
||
}
|
||
|
||
&:empty {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.search-group-people {
|
||
.chatlist {
|
||
display: flex;
|
||
flex-direction: row;
|
||
margin-top: -1px;
|
||
padding: 0 0 1px;
|
||
|
||
&:before,
|
||
&:after {
|
||
content: " ";
|
||
display: inline-block;
|
||
width: .3125rem;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
&-chat {
|
||
width: 4.875rem;
|
||
max-width: 4.875rem;
|
||
height: 6.125rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
flex: 0 0 auto;
|
||
padding: 0 !important;
|
||
}
|
||
}
|
||
|
||
.dialog {
|
||
&-title-details,
|
||
&-subtitle {
|
||
display: none;
|
||
}
|
||
|
||
&-title {
|
||
max-width: 65px;
|
||
padding-bottom: .75rem;
|
||
|
||
.user-title {
|
||
font-size: .75rem !important;
|
||
}
|
||
|
||
.peer-title {
|
||
font-weight: var(--font-weight-normal) !important;
|
||
}
|
||
}
|
||
|
||
&-avatar {
|
||
inset-inline-start: auto !important;
|
||
top: .75rem !important;
|
||
}
|
||
}
|
||
|
||
.search-group-scrollable {
|
||
position: relative;
|
||
|
||
@include respond-to(handhelds) {
|
||
margin-inline-start: -7px;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
> .scrollable {
|
||
position: relative;
|
||
}
|
||
}
|
||
}
|
||
|
||
.item-main .sidebar-content {
|
||
// overflow: visible;
|
||
justify-content: center;
|
||
|
||
.btn-menu {
|
||
bottom: calc(100% + 10px);
|
||
}
|
||
|
||
.btn-corner {
|
||
&:not(.menu-open) .tgico-newchat_filled,
|
||
&.menu-open .tgico-close {
|
||
visibility: visible !important;
|
||
}
|
||
|
||
@include animation-level(2) {
|
||
&:not(.menu-open) .tgico-newchat_filled,
|
||
&.menu-open .tgico-close {
|
||
animation: grow-icon .4s forwards ease-in-out !important;
|
||
}
|
||
}
|
||
|
||
@include respond-to(handhelds) {
|
||
--size: 54px;
|
||
bottom: 14px;
|
||
right: 14px;
|
||
|
||
position: fixed !important;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* html:not(.no-touch) & {
|
||
transform: translateZ(0);
|
||
} */
|
||
&:not(.is-hidden) {
|
||
transform: translateZ(0);
|
||
}
|
||
}
|
||
|
||
/* html.no-touch &:hover .btn-corner:not(.is-hidden) {
|
||
transform: translateZ(0);
|
||
} */
|
||
}
|
||
|
||
.connection-status {
|
||
width: 100%;
|
||
padding: 0 .5rem .5rem;
|
||
overflow: hidden;
|
||
flex: 0 0 auto;
|
||
|
||
&:not(.is-shown) {
|
||
.connection-status-button {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
&.is-shown {
|
||
&.animating {
|
||
.connection-status-button,
|
||
& + .connection-status-bottom {
|
||
transition: transform var(--layer-transition);
|
||
}
|
||
}
|
||
|
||
&:not(.backwards) {
|
||
.connection-status-button {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
& + .connection-status-bottom {
|
||
transform: translateY(calc(64px + var(--offset-top)));
|
||
}
|
||
}
|
||
|
||
&:not(.animating):not(.backwards) {
|
||
& + .connection-status-bottom {
|
||
height: calc(100% - 64px + var(--offset-top));
|
||
}
|
||
}
|
||
}
|
||
|
||
&-button {
|
||
color: #2e3939;
|
||
align-self: center;
|
||
cursor: default;
|
||
padding-inline-start: 4.5rem;
|
||
text-align: start;
|
||
height: 3.5rem;
|
||
|
||
.force-reconnect {
|
||
cursor: pointer;
|
||
text-decoration: underline;
|
||
color: inherit;
|
||
}
|
||
|
||
transform: translateY(-100%);
|
||
|
||
.preloader-container {
|
||
right: auto;
|
||
inset-inline-start: 1rem;
|
||
width: 1.5rem;
|
||
height: 1.5rem;
|
||
|
||
.preloader-path-new {
|
||
stroke: #2e3939;
|
||
}
|
||
}
|
||
}
|
||
|
||
&-bottom {
|
||
--offset-top: 0px;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
overflow: hidden;
|
||
background-color: var(--surface-color);
|
||
|
||
transform: translateY(var(--offset-top));
|
||
height: 100%;
|
||
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
/* transform: translateY(64px);
|
||
height: calc(100% - 64px); */
|
||
}
|
||
}
|
||
|
||
.input-wrapper {
|
||
width: 420px;
|
||
margin: 0 auto;
|
||
flex: 0 0 auto;
|
||
padding: 0 .75rem;
|
||
max-width: 100%;
|
||
margin: .75rem 0;
|
||
|
||
@include respond-to(handhelds) {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
#search-container {
|
||
display: flex;
|
||
top: var(--offset-top) !important;
|
||
|
||
.scrollable-y {
|
||
position: relative;
|
||
flex: 1 1 auto;
|
||
}
|
||
}
|
||
|
||
.new-channel-container,
|
||
.new-group-container,
|
||
.edit-profile-container {
|
||
.sidebar-content {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.chatlist-container {
|
||
flex: 1 1 auto;
|
||
}
|
||
|
||
.caption {
|
||
font-size: .875rem;
|
||
margin-top: 14px;
|
||
margin-inline-start: 23px;
|
||
color: var(--secondary-text-color);
|
||
padding-inline-end: 24px;
|
||
}
|
||
}
|
||
|
||
.language-container {
|
||
.sidebar-left-section {
|
||
padding-bottom: .5rem;
|
||
}
|
||
}
|
||
|
||
.new-group-container {
|
||
.search-group {
|
||
margin-top: .5rem;
|
||
}
|
||
}
|
||
|
||
.edit-folder-container {
|
||
.chatlist {
|
||
padding: 0;
|
||
}
|
||
|
||
.folder-categories {
|
||
.folder-category-button {
|
||
&:nth-child(n+2) {
|
||
pointer-events: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.new-group-members {
|
||
padding: 1.5rem 0 .4375rem;
|
||
|
||
.search-group__name {
|
||
text-transform: capitalize;
|
||
}
|
||
}
|
||
|
||
.settings-container {
|
||
.profile {
|
||
&-avatars-container {
|
||
padding-bottom: 0;
|
||
height: 15rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
// #folders-tabs {
|
||
// @include premium(true) {
|
||
// .menu-horizontal-div-item:nth-child(n+12) {
|
||
// pointer-events: none;
|
||
// opacity: .2;
|
||
// }
|
||
// }
|
||
// }
|
||
|
||
.edit-profile-container {
|
||
.scroll-wrapper {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.chat-folders-container,
|
||
.edit-folder-container,
|
||
.people-nearby-container {
|
||
user-select: none;
|
||
|
||
.sticker-container {
|
||
width: 86px;
|
||
height: 86px;
|
||
margin: 1px auto 29px;
|
||
flex: 0 0 auto;
|
||
position: relative;
|
||
}
|
||
|
||
.caption {
|
||
text-align: center;
|
||
color: var(--secondary-text-color);
|
||
font-size: var(--font-size-14);
|
||
line-height: var(--line-height-14);
|
||
max-width: 20rem;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
|
||
.people-nearby-container {
|
||
.sticker-container {
|
||
margin: 1rem auto;
|
||
}
|
||
|
||
.caption {
|
||
margin-bottom: 1rem;
|
||
}
|
||
}
|
||
|
||
.chat-folders-container {
|
||
.sidebar-left-section {
|
||
&:not(:last-child) {
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
&:last-child {
|
||
padding-bottom: .5rem;
|
||
}
|
||
|
||
/* &-name {
|
||
padding-top: .5rem;
|
||
padding-bottom: .5rem;
|
||
} */
|
||
}
|
||
}
|
||
|
||
.edit-folder-container {
|
||
.caption {
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
@include respond-to(handhelds) {
|
||
.input-wrapper {
|
||
width: 100%;
|
||
padding: 0 16px;
|
||
}
|
||
}
|
||
|
||
.sidebar-left-section {
|
||
padding-bottom: 0rem;
|
||
|
||
&:last-child {
|
||
padding-bottom: .5rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
.folder-categories {
|
||
.checkbox-field {
|
||
position: absolute;
|
||
right: 1.125rem !important;
|
||
}
|
||
}
|
||
|
||
.included-chatlist-container {
|
||
.sidebar-left-section {
|
||
padding-bottom: 0;
|
||
|
||
&:first-child {
|
||
padding-top: 0;
|
||
}
|
||
|
||
&:last-child {
|
||
padding-bottom: .5rem;
|
||
}
|
||
|
||
.chatlist {
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
.selector {
|
||
.chatlist {
|
||
.checkbox {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
[type="checkbox"] + span {
|
||
padding-inline-start: 26px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.search-group-recent {
|
||
.search-group__name {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.btn-icon {
|
||
//@include respond-to(handhelds) {
|
||
font-size: 22px;
|
||
//}
|
||
}
|
||
}
|
||
|
||
@include respond-to(handhelds) {
|
||
.search-group-recent.search-group.search-group-contacts ul {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.search-group.search-group-contacts ul, .search-group.search-group-messages ul {
|
||
margin-top: 7px;
|
||
}
|
||
|
||
.search-group.search-group-messages {
|
||
margin-top: -6px;
|
||
}
|
||
}
|
||
|
||
@include respond-to(not-handhelds) {
|
||
.search-group-recent.search-group.search-group-contacts {
|
||
padding: 0px 0 7px;
|
||
}
|
||
}
|
||
|
||
.sidebar-left {
|
||
&-section {
|
||
/* padding-bottom: .75rem;
|
||
|
||
@include respond-to(handhelds) {
|
||
padding-bottom: .5rem;
|
||
} */
|
||
// user-select: none;
|
||
padding: .5rem 0 1rem;
|
||
|
||
&.with-fake-delimiter {
|
||
padding-top: 0 !important;
|
||
box-shadow: none;
|
||
|
||
.gradient-delimiter {
|
||
margin-bottom: .5rem;
|
||
}
|
||
}
|
||
|
||
&.no-padding-top {
|
||
padding-top: 0 !important;
|
||
}
|
||
|
||
@include respond-to(handhelds) {
|
||
padding-bottom: .5rem;
|
||
}
|
||
|
||
&-content {
|
||
@include respond-to(not-handhelds) {
|
||
margin: 0 .5rem;
|
||
}
|
||
|
||
> .btn-primary {
|
||
margin: 0;
|
||
}
|
||
|
||
> .checkbox-field {
|
||
.checkbox-box {
|
||
inset-inline-start: auto;
|
||
}
|
||
}
|
||
|
||
@include respond-to(handhelds) {
|
||
> .checkbox-ripple,
|
||
> .btn-primary {
|
||
border-radius: 0;
|
||
}
|
||
}
|
||
|
||
&.full-width {
|
||
margin: 0 !important;
|
||
}
|
||
|
||
> .media-sticker-wrapper {
|
||
width: 86px;
|
||
height: 86px;
|
||
margin: 1px auto 29px;
|
||
flex: 0 0 auto;
|
||
position: relative;
|
||
}
|
||
}
|
||
|
||
&-name {
|
||
padding: 1rem;
|
||
|
||
@include respond-to(handhelds) {
|
||
padding: .5rem 1rem;
|
||
font-size: .875rem;
|
||
}
|
||
}
|
||
|
||
&-caption {
|
||
margin-top: 1rem;
|
||
font-size: 1rem;
|
||
color: var(--secondary-text-color);
|
||
line-height: var(--line-height);
|
||
padding: 0 1rem;
|
||
|
||
@include respond-to(handhelds) {
|
||
margin: .5rem;
|
||
font-size: .875rem;
|
||
}
|
||
}
|
||
|
||
.checkbox-field,
|
||
.radio-field {
|
||
margin: 0;
|
||
}
|
||
|
||
// * comment later
|
||
&:first-child:not(.no-delimiter) {
|
||
padding-top: 0;
|
||
}
|
||
|
||
.checkbox-field {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 3.5rem;
|
||
padding: 0 1.125rem;
|
||
}
|
||
|
||
&-disabled {
|
||
pointer-events: none !important;
|
||
opacity: .25;
|
||
}
|
||
|
||
.chatlist {
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
&-h2 {
|
||
color: var(--primary-color);
|
||
font-size: 16px;
|
||
font-weight: var(--font-weight-bold);
|
||
}
|
||
}
|
||
|
||
.general-settings-container {
|
||
user-select: none;
|
||
|
||
.sidebar-left-section {
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.sidebar-left-section:last-child {
|
||
padding-bottom: .5rem;
|
||
}
|
||
}
|
||
|
||
#chats-archived-container,
|
||
#contacts-container,
|
||
.add-members-container,
|
||
#search-private-container,
|
||
#stickers-container,
|
||
#poll-results-container,
|
||
#search-gifs-container {
|
||
background-color: var(--surface-color) !important;
|
||
}
|
||
|
||
.chat-folders-container {
|
||
.btn-control {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
}
|
||
|
||
.two-step-verification {
|
||
background-color: var(--surface-color) !important;
|
||
|
||
.sidebar-left-section { // * main tab verified with mockup
|
||
box-shadow: none !important;
|
||
|
||
&:first-child { // ! refactor is needed
|
||
padding-top: 0;
|
||
}
|
||
|
||
&-caption {
|
||
text-align: center;
|
||
max-width: 342px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
margin-bottom: 1.125rem;
|
||
}
|
||
}
|
||
|
||
&-main {
|
||
.btn-primary + .btn-primary {
|
||
margin-top: .125rem !important;
|
||
}
|
||
}
|
||
|
||
.btn-primary:not(.btn-transparent) {
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.media-sticker-wrapper {
|
||
width: 168px;
|
||
height: 168px;
|
||
margin: .625rem auto 1.1875rem;
|
||
}
|
||
|
||
.input-wrapper .btn-primary:first-child:last-child {
|
||
margin-top: .25rem;
|
||
}
|
||
|
||
&-enter-password {
|
||
.media-sticker-wrapper {
|
||
margin: 1.125rem auto 1.8125rem;
|
||
width: 157px;
|
||
height: 157px;
|
||
}
|
||
}
|
||
|
||
&-hint {
|
||
.media-sticker-wrapper {
|
||
width: 160px;
|
||
height: 160px;
|
||
margin: .5rem auto 2.25rem;
|
||
}
|
||
}
|
||
|
||
&-email {
|
||
.media-sticker-wrapper {
|
||
width: 160px;
|
||
height: 160px;
|
||
margin: .5625rem auto 2.1875rem;
|
||
}
|
||
}
|
||
|
||
&-set {
|
||
.media-sticker-wrapper {
|
||
width: 160px;
|
||
height: 160px;
|
||
margin: 1rem auto 1.3125rem;
|
||
|
||
.rlottie,
|
||
.rlottie-vector {
|
||
inset-inline-start: .625rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.dont-u-dare-block-me {
|
||
.sidebar-left-section.no-delimiter {
|
||
padding-top: .75rem;
|
||
}
|
||
|
||
.sidebar-left-section {
|
||
padding: 0 0 .5rem;
|
||
}
|
||
|
||
/* .privacy-navigation-container {
|
||
.sidebar-left-section-name + .row {
|
||
margin-top: -5px; // ! just to match mockup.
|
||
}
|
||
} */
|
||
}
|
||
|
||
.privacy-tab {
|
||
// * just to match mockup
|
||
@include respond-to(not-handhelds) {
|
||
.sidebar-left-section:first-child {
|
||
padding-bottom: 1.125rem;
|
||
}
|
||
}
|
||
|
||
form {
|
||
padding-bottom: .0625rem;
|
||
}
|
||
}
|
||
|
||
.active-sessions-container {
|
||
.row {
|
||
// margin-top: 0;
|
||
// padding-top: 1rem;
|
||
// padding-bottom: .9375rem;
|
||
|
||
&-title:first-child {
|
||
font-weight: var(--font-weight-bold);
|
||
}
|
||
|
||
&-title-right {
|
||
font-size: var(--font-size-12);
|
||
color: var(--secondary-text-color);
|
||
line-height: var(--line-height-12);
|
||
}
|
||
|
||
&-midtitle,
|
||
&-subtitle {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
|
||
.sidebar-left-section:first-child {
|
||
padding-bottom: 0;
|
||
|
||
.row-title {
|
||
font-weight: var(--font-weight-bold);
|
||
}
|
||
}
|
||
}
|
||
|
||
.blocked-users-container {
|
||
ul {
|
||
@include respond-to(not-handhelds) {
|
||
padding: 0 .6875rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
.notifications-container {
|
||
.sidebar-left-section {
|
||
padding-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.range-setting-selector {
|
||
padding: 1rem .875rem;
|
||
|
||
&-details {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
&-name {
|
||
color: var(--primary-text-color);
|
||
}
|
||
|
||
&-value {
|
||
color: var(--secondary-text-color);
|
||
}
|
||
|
||
.progress-line {
|
||
--height: 2px;
|
||
--color: var(--primary-color);
|
||
--border-radius: 4px;
|
||
--thumb-size: 12px;
|
||
background-color: #e6ecf0;
|
||
|
||
&__filled {
|
||
background-color: var(--primary-color);
|
||
}
|
||
}
|
||
}
|
||
|
||
.background-container {
|
||
.background {
|
||
&-item {
|
||
&:after {
|
||
content: " ";
|
||
display: block;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
border: 3px solid var(--primary-color);
|
||
opacity: 0;
|
||
transition: opacity .2s ease-in-out;
|
||
}
|
||
|
||
&.active {
|
||
&:after {
|
||
opacity: 1;
|
||
}
|
||
|
||
.grid-item-media {
|
||
transform: scale(.91);
|
||
}
|
||
}
|
||
|
||
&-media {
|
||
transition: transform .2s ease-in-out;
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
.preloader-container {
|
||
z-index: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.background {
|
||
&-item {
|
||
cursor: pointer;
|
||
|
||
&-media {
|
||
border-radius: inherit;
|
||
|
||
&.is-pattern {
|
||
background-color: #000;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
|
||
.media-photo {
|
||
mix-blend-mode: soft-light;
|
||
}
|
||
}
|
||
}
|
||
|
||
.media-photo {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
border-radius: inherit;
|
||
}
|
||
}
|
||
|
||
&-colors-canvas {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
-webkit-mask-position: center;
|
||
-webkit-mask-size: cover;
|
||
border-radius: inherit;
|
||
}
|
||
}
|
||
|
||
.background-image-container {
|
||
.sidebar-left-section {
|
||
padding-bottom: .5rem;
|
||
}
|
||
}
|
||
|
||
.empty-placeholder {
|
||
// left: 50%;
|
||
// transform: translate(-50%, -50%);
|
||
// position: absolute;
|
||
top: 40%;
|
||
transform: translateY(-50%);
|
||
text-align: center;
|
||
line-height: var(--line-height);
|
||
user-select: none;
|
||
width: 21rem !important;
|
||
margin: 0 auto;
|
||
padding: 0 1rem;
|
||
position: relative;
|
||
|
||
.media-sticker-wrapper {
|
||
width: 128px;
|
||
height: 128px;
|
||
margin: 0 auto 1.9375rem;
|
||
position: relative;
|
||
}
|
||
|
||
&-header {
|
||
font-size: 1.25rem;
|
||
font-weight: var(--font-weight-bold);
|
||
}
|
||
|
||
&-subtitle {
|
||
color: var(--secondary-text-color);
|
||
font-size: .875rem;
|
||
margin-top: .375rem;
|
||
}
|
||
|
||
.btn-control {
|
||
margin-top: 1.75rem;
|
||
padding: 0 1.0625rem 0 .8125rem;
|
||
|
||
&:before {
|
||
margin-inline-end: .625rem;
|
||
}
|
||
}
|
||
|
||
&-dialogs {
|
||
opacity: 0;
|
||
|
||
@include animation-level(2) {
|
||
transition: opacity .2s ease-in-out;
|
||
}
|
||
|
||
&-icon {
|
||
margin-bottom: 1.0625rem;
|
||
}
|
||
|
||
&.visible {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.is-forum-visible {
|
||
// .item-main,
|
||
.can-have-forum {
|
||
.row-row,
|
||
.input-search,
|
||
.sidebar-header__title {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
.folders-tabs-scrollable {
|
||
opacity: var(--disabled-opacity);
|
||
pointer-events: none;
|
||
}
|
||
|
||
&.backwards {
|
||
// .item-main,
|
||
.can-have-forum {
|
||
.row-row,
|
||
.input-search,
|
||
.sidebar-header__title {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.folders-tabs-scrollable {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
&.animating {
|
||
// .item-main,
|
||
.can-have-forum {
|
||
.row-row,
|
||
.input-search,
|
||
.sidebar-header__title {
|
||
transition: opacity var(--transition-standard-in);
|
||
}
|
||
}
|
||
|
||
.folders-tabs-scrollable {
|
||
transition: opacity var(--transition-standard-in);
|
||
}
|
||
|
||
&.backwards {
|
||
// .item-main,
|
||
.can-have-forum {
|
||
.row-row,
|
||
.input-search,
|
||
.sidebar-header__title {
|
||
transition: opacity var(--transition-standard-out);
|
||
}
|
||
}
|
||
|
||
.folders-tabs-scrollable {
|
||
transition: opacity var(--transition-standard-out);
|
||
}
|
||
}
|
||
}
|
||
}
|