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.
 
 
 
 
 

1624 lines
30 KiB

$placeholder-color: #9e9e9e;
$border-radius: 8px;
$border-radius-medium: 10px;
$border-radius-big: 12px;
$button-primary-background: #4EA4F6;
$success-color: #4DCD5E;
$color-error: #E53935;
$color-gray: #707579;
$lightblue: #e6ebee;
$blue: #50a2e9;
$darkblue: #50a2e9;
$lightgreen: #eeffde;
$green: #4dcd5e;
$darkgreen: #50af4f;
$dotgreen: #0ac630;
$lightgrey: #dadce0;
$grey: #c4c9cc;
$darkgrey: #707579;
$light: rgba($darkgrey, 0.08);
$text: #000000;
$bg: #ffffff;
$text-size: 16px;
$time-size: 12px;
$large-screen: 1680px;
//$large-screen: 16800px;
@import "partials/ico";
@import "partials/chatlist";
@import "partials/chat";
@import "partials/sidebar";
@import "partials/leftSidebar";
@import "partials/rightSidebar";
@import "partials/mediaViewer";
@import "partials/ckin";
@import "partials/emojiDropdown";
html, body {
height: 100%;
width: 100%;
}
html {
font-size: $text-size;
}
a {
color: $blue;
}
button, input, optgroup, select, textarea, html {
font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.whole {
height: 100vh;
min-height: 100vh;
width: 100%;
//min-width: 100%;
margin: 0 auto;
max-width: $large-screen;
}
.disable-hover,
.disable-hover * {
pointer-events: none !important;
}
.container {
margin: 0 auto;
}
h1, h2, h3, h4, h5, h6 {
letter-spacing: -.66px;
font-weight: 500;
}
h4 {
font-size: 2rem;
margin: 1.5rem 0 1rem 0;
line-height: 110%;
}
input {
caret-color: $button-primary-background;
}
.subtitle {
/* font-weight: 500; */
color: $placeholder-color;
line-height: 1.25;
}
.page-sign .input-wrapper,
.page-authCode .input-wrapper,
.page-signUp .input-wrapper,
.page-password .input-wrapper {
/* margin-top: 3rem; */
margin-top: 50px;
}
.page-authCode {
.phone-wrapper {
display: flex;
align-items: center;
justify-content: center;
margin: 1.52rem 0 0.912rem 0;
h4 {
margin: 0;
&[contenteditable="true"] {
padding: 0 1rem;
border: none;
outline: none;
padding: 0 1rem;
border-bottom: 2px solid $button-primary-background;
}
}
.phone.error {
border-color: $color-error!important;
}
}
}
.btn-icon {
text-align: center;
font-size: 1.65rem;
line-height: 1.65rem;
border-radius: 50%;
-webkit-transition: background-color .15s ease-out;
transition: background-color .15s ease-out;
color: $color-gray;
cursor: pointer;
background: none;
border: none;
padding: .5rem;
position: relative;
/* overflow: hidden; */
/* kostil */
display: flex;
align-items: center;
justify-content: center;
&.active {
color: $blue;
}
&:hover {
background-color: rgba(112, 117, 121, 0.08);
}
}
.danger {
color: $color-error!important;
}
.btn-menu-toggle {
position: relative;
overflow: visible;
&.menu-open {
background-color: rgba(112, 117, 121, 0.08);
}
}
.btn-menu {
visibility: hidden;
position: absolute;
background: #fff;
box-shadow: 0 5px 8px 1px rgba(0,0,0,.24);
z-index: 3;
top: 100%;
margin-top: 8px;
padding: 9px 0;
border-radius: $border-radius;
opacity: 0;
transform: scale(.8);
transition-property: opacity,transform,visibility;
transition-duration: .2s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
font-size: 16px;
&.active {
visibility: visible;
opacity: 1;
transform: scale(1);
}
&.bottom-left {
right: 0;
top: 100%;
transform-origin: top right;
}
&.bottom-right {
left: 0;
top: 100%;
transform-origin: top left;
}
&.top-left {
top: initial;
right: 0;
bottom: 100%;
transform-origin: bottom right;
}
&.top-right {
top: initial;
left: 0;
bottom: 100%;
transform-origin: bottom left;
}
> div {
display: flex;
position: relative;
padding: 0 40px 0 20px;
height: 56px;
cursor: pointer;
background-position: 16px center;
background-size: 24px 24px;
background-repeat: no-repeat;
color: #000;
text-transform: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
align-items: center;
&:hover {
background-color: rgba(112, 117, 121, 0.06);
}
&:before {
color: $color-gray;
font-size: 1.5rem;
margin-right: 35px;
}
&.danger:before {
color: $color-error;
}
}
}
.user-avatar {
color: #fff;
width: 54px;
height: 54px;
line-height: 54px;
border-radius: 50%;
background-color: $button-primary-background;
text-align: center;
font-size: 1.25em;
/* overflow: hidden; */
position: relative;
user-select: none;
/* kostil */
display: flex;
align-items: center;
justify-content: center;
img {
width: 100%;
height: 100%;
border-radius: inherit;
user-select: none;
}
&[class*=" tgico-"] {
line-height: 52px;
font-size: 28px;
}
path {
fill: white;
}
&.is-online:after {
position: absolute;
content: " ";
display: block;
border-radius: 50%;
border: 2px solid white;
background-color: #4DCD5E;
left: 70%;
top: 79%;
width: 12px;
height: 12px;
}
&.tgico-avatar_deletedaccount {
font-size: 3rem;
}
}
/* .user-title, b {
color: #000;
} */
.user-title, b, .user-last-message b {
color: #000;
font-weight: normal;
}
.rp {
position: relative;
}
/**
* Utility: Ripple
* --------------------------------------------------
*/
.c-ripple {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
border-radius: inherit;
&__circle {
background-color: rgba(0,0,0,.08);
display: block;
position: absolute;
transform: scale(0);
border-radius: 50%;
animation: ripple-effect .7s forwards;
transition: .35s opacity;
overflow: hidden;
}
&__circle.hiding {
opacity: 0;
}
}
@keyframes ripple-effect {
0% {
//transform: translate(-50%, -50%) scale(0);
transform: scale(0);
}
/* 50% {
opacity: 1;
} */
to {
transform: scale(2);
//transform: translate(-50%, -50%) scale(2);
//opacity: 0;
}
}
.document {
padding-left: 4.5rem;
height: 70px;
&-ico, &-download {
font-weight: 500;
letter-spacing: 1px;
font-size: 1.1rem;
background-size: contain;
overflow: hidden;
text-overflow: ellipsis;
}
&-download {
background-color: rgb(101, 161, 227);
border-radius: 8px;
}
&:not(.photo) {
.document-ico {
padding-top: 1.5rem;
background-image: url('../assets/img/doc-in.svg');
}
}
&.photo {
.document-ico {
border-radius: $border-radius;
}
}
&-name {
white-space: nowrap;
font-weight: 500;
line-height: 1.3;
}
&-size {
white-space: nowrap;
color: $darkgrey;
font-size: 14px;
padding-right: 32px;
line-height: 1.3;
}
}
.document, .audio {
display: flex;
flex-direction: column;
justify-content: center;
cursor: pointer;
position: relative;
&-ico, &-download {
position: absolute;
left: 0;
width: 54px;
height: 54px;
color: #fff;
display: flex;
justify-content: center;
}
&-download {
z-index: 2;
align-items: center;
font-size: 24px;
cursor: pointer;
.tgico-download {
transform: scale(1);
transition: .2s scale;
}
&.downloading {
.tgico-download {
transform: scale(0);
}
}
}
.preloader-container {
width: 42px;
height: 42px;
}
}
.audio {
position: relative;
padding-left: 67px;
min-height: 58px;
max-width: 244px;
overflow: visible!important;
&-toggle, &-download {
border-radius: 50%;
background-color: $blue;
font-size: 2.3rem;
align-items: center;
}
&-download {
z-index: 2;
}
&-waveform {
height: 23px;
//overflow: visible!important;
rect {
//overflow: visible!important;
fill: #CBCBCB;
&.active {
fill: $blue;
}
}
}
&-time {
font-size: 14px;
color: $color-gray;
margin-top: 3px;
margin-left: -1px;
}
}
.page-sign {
.auth-image {
width: 160px;
height: 160px;
margin-bottom: 45px;
}
}
.page-signUp {
.auth-image {
border-radius: 50%;
cursor: pointer;
position: relative;
overflow: hidden;
canvas {
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
background-color: $button-primary-background;
}
svg {
position: absolute;
width: 36px;
height: 36px;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
z-index: 2;
}
}
}
.input-wrapper {
width: 360px;
margin: 0 auto;
}
.input-field {
position: relative;
.arrow-down {
position: absolute;
content: " ";
top: 50%;
bottom: 0;
right: 21px;
cursor: pointer;
height: 0;
width: 0;
border: solid #bdbdbd;
border-radius: 1px;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 5px;
vertical-align: middle;
z-index: 2;
margin-top: -9px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transition: .2s all;
}
label {
position: absolute;
color: $placeholder-color;
left: 1rem;
right: auto;
z-index: 2;
top: 50%;
transform: translateY(-50%);
background-color: #fff;
transition: .2s all, .1s opacity;
display: inline-block;
cursor: text;
}
input {
border: 1px solid #DADCE0;
border-radius: $border-radius-big;
padding: 0 1rem;
box-sizing: border-box;
width: 100%;
height: 54px;
transition: .2s border-color;
position: relative;
z-index: 1;
/* font-weight: 500; */
&:focus {
border-color: $button-primary-background;
border-width: 2px;
padding: 0 calc(1rem - 1px);
}
&:disabled {
background-color: #fff;
color: #000;
}
&.error {
border-color: $color-error;
transition: .2s border-width;
& + label {
color: $color-error!important;
}
}
&:focus ~ .arrow-down {
margin-top: -4px;
transform: rotate(225deg);
-webkit-transform: rotate(225deg);
border-color: $button-primary-background;
}
&:focus + label {
color: $button-primary-background;
}
&:focus + label, &:valid + label, &:disabled + label {
top: -.5rem;
transform: none;
padding: 0 5px;
left: .75rem;
font-size: 0.75rem!important;
opacity: 1;
}
}
}
.checkbox-field {
margin: 1.25rem 0;
display: block;
text-align: left;
padding: 0 19px;
/* font-weight: 500; */
position: relative;
}
[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
& + span {
position: relative;
padding-left: calc(18px + 2.25rem);
cursor: pointer;
display: inline-block;
height: 25px;
line-height: 25px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
&:before, &:after {
content: '';
left: 0;
position: absolute;
-webkit-transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
}
&:before {
border-radius: 2px;
z-index: 1;
}
&:after {
height: 18px;
width: 18px;
z-index: 0;
border: 2px solid $button-primary-background;
border-radius: 3px;
top: 50%;
transform: translateY(-50%);
}
}
&:not(:checked) + span:before {
width: 0;
height: 0;
border: 2px solid transparent;
left: 6px;
top: 10px;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
&:checked + span:before {
top: 4px;
left: -1px;
width: 8px;
height: 14px;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
&:not(:checked) + span:after {
background-color: transparent;
}
&:checked + span:after {
background-color: $button-primary-background;
}
}
.input-wrapper > * ~ * {
margin-top: 1.5rem;
}
.select-wrapper {
max-height: 300px;
/* height: auto; */
position: absolute;
width: 100%;
top: calc(100% + .5rem);
left: 0;
overflow: hidden;
background-color: #fff;
z-index: 3;
border-radius: $border-radius;
display: flex;
flex-direction: column;
flex-wrap: wrap;
ul {
margin: .5rem 0;
}
li {
/* display: flex; */
align-items: center;
padding: 0 1rem;
justify-content: space-between;
height: 3.5rem;
cursor: pointer;
font-weight: 500;
text-align: left;
display: grid;
grid-template-columns: 15% 60% 25%;
&:hover {
background-color: rgba(112, 117, 121, .08);
}
}
.emoji {
height: 24px;
width: 24px;
font-size: 24px;
line-height: 1;
}
.scrollable {
position: relative;
}
}
.phone-code {
color: $placeholder-color;
text-align: right;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: $placeholder-color;
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: $placeholder-color;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: $placeholder-color;
}
input:focus, button:focus {
outline: none;
}
.auth-image {
width: 133px;
height: 133px;
margin-left: auto;
margin-right: auto;
margin-bottom: 1rem;
}
/* .phone-wrapper {
display: flex;
align-items: ;
} */
.phone-edit {
display: inline-block;
width: 24px;
height: 24px;
margin-left: .4rem;
opacity: .5;
transition: .2s;
cursor: pointer;
font-size: 1.5rem;
&:hover {
opacity: 1;
}
}
/* button {
position: relative;
overflow: hidden;
&:hover {
&:before {
display: block;
}
}
&:before {
display: none;
content: " ";
position: absolute;
z-index: 2;
background: #000;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: .08;
}
} */
.btn-primary {
background: $button-primary-background;
color: #fff;
border-radius: $border-radius;
width: 100%;
text-align: center;
height: 54px;
border: none;
font-weight: 500;
cursor: pointer;
overflow: hidden;
position: relative;
padding: 0; // new
&:hover {
background: darken($button-primary-background, 8%);
}
svg, use {
height: calc(100% - 20px);
right: 12.5px;
left: auto;
margin: auto 0;
}
}
/* // scaling... any units
$width: 100px;
.loader {
position: relative;
margin: 0 auto;
width: $width;
&:before {
content: '';
display: block;
padding-top: 100%;
}
} */
.preloader-circular {
animation: rotate 2s linear infinite;
height: 100%;
transform-origin: center center;
/* width: 100%; */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.preloader-path {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
animation: dash 1.5s ease-in-out infinite/* , color 6s ease-in-out infinite */;
stroke-linecap: round;
stroke: white;
stroke-width: 3;
}
.preloader-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 50px;
height: 50px;
/* cursor: pointer; */
.you-spin-me-round {
width: 100%;
height: 100%;
animation: rotate 2s linear infinite;
}
.preloader-circular {
animation: none;
cursor: pointer;
background-color: rgba(0, 0, 0, .7);
border-radius: 50%;
width: 100%;
height: 100%;
}
.preloader-path-new {
stroke-dasharray: 5, 200;
stroke-dashoffset: 0;
transition: stroke-dasharray 400ms ease-in-out;
stroke-linecap: round;
stroke: white;
stroke-width: 1.5;
}
&.preloader-swing {
cursor: default;
.preloader-circular {
cursor: default;
}
.preloader-path-new {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
animation: dashNew 1.5s ease-in-out infinite/* , color 6s ease-in-out infinite */;
}
}
.preloader-close {
cursor: pointer;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
color: #fff;
stroke: #fff;
width: 34%;
height: 34%;
&:hover {
background: none;
}
}
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35px;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124px;
}
}
@keyframes dashNew {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35px;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -286%;
}
}
.emoji {
display: inline-block;
/* width: 100%;
height: 100%; */
max-width: 100%;
max-height: 100%;
vertical-align: middle;
line-height: 1em;
font-size: 1em;
font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol;
}
img.emoji {
width: 18px;
height: 18px;
}
.popup {
position: fixed!important;
left: 0;
top: 0;
height: 100%;
max-width: none;
width: 100%;
z-index: 3;
background-color: rgba(0, 0, 0, .35);
margin: 0;
padding: 0;
box-shadow: none;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
transition: opacity 0.3s 0s, visibility 0s 0.3s;
overflow: auto;
/* text-align: center; */
display: flex;
align-items: center;
justify-content: center;
}
.popup.active {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0s;
transition: opacity 0.3s 0s, visibility 0s 0s;
}
.popup-container {
position: relative;
/* max-width: 400px; */
border-radius: $border-radius;
background-color: #fff;
padding: 1rem;
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
span.popup-close {
cursor: pointer;
color: $color-gray;
z-index: 3;
text-align: center;
justify-self: center;
line-height: 1;
transition: .2s;
&:hover {
color: #000;
}
}
.popup.active .popup-container {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.btn-circle {
border-radius: 50%;
width: 44px;
height: 44px;
path {
fill: white;
}
}
.popup-header {
/* display: grid;
align-items: center;
grid-template-columns: 9.5% 86.5%;
justify-content: space-between; */
display: flex;
margin-bottom: 2rem;
align-items: center;
}
.popup-avatar {
.popup-container {
/* height: 400px; */
/* width: 400px; */
max-width: 600px;
max-height: 600px;
> button {
position: absolute;
bottom: 15px;
right: 15px;
}
}
.popup-close {
font-size: 1.5rem;
}
h6 {
font-size: 1.1rem;
text-align: left;
margin: 0;
margin-left: 1.5rem;
font-weight: 400;
}
.crop {
/* min-width: calc(100% - 8rem);
min-height: calc(100% - 8rem); */
max-width: 200%;
max-height: 200%;
padding: 0 2.75rem 2.75rem;
/* position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); */
border-radius: $border-radius;
img {
/* max-width: 100%; */
/* height: 100%; */
border-radius: $border-radius;
}
}
}
.overlay::selection {
background: transparent;
}
.crop-component::selection {
background: transparent;
}
/* .crop-blur {
-webkit-filter: blur(10px) sepia(0.2);
filter: blur(10px) sepia(0.2);
} */
.crop-image,
.overlay > img {
width: auto;
height: auto;
/* можно явно указать либо ширину, либо высоту */
/* width: 500px; */
/*либо height: 300px;*/
display: block;
object-fit: contain;
object-position: center;
}
/*add stretch*/
.crop-image {
display: block;
position: relative;
pointer-events: none;
}
.crop-component {
position: relative;
z-index: 999;
background-color: white;
margin: 0 auto;
overflow: hidden;
> img {
max-width: 100%;
}
.crop-overlay-color {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);
border-radius: $border-radius;
}
}
.overlay {
position: absolute;
left: 50%;
top: 50%;
z-index: 999;
margin-left: -100px;
margin-top: -100px;
width: 200px;
height: 200px;
/* box-shadow: 0 0 0 3px white; */
overflow: hidden;
box-sizing: content-box;
border-radius: 50%;
&:hover, &:active {
cursor: move;
}
> img {
position: absolute;
display: block;
}
}
.overlays {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed!important;
background-color: rgba(0, 0, 0, .2);
z-index: 4;
//display: none;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s;
-moz-transition: opacity 0.2s 0s, visibility 0s 0.2s;
transition: opacity 0.2s 0s, visibility 0s 0.2s;
&.active {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.2s 0s, visibility 0s 0s;
-moz-transition: opacity 0.2s 0s, visibility 0s 0s;
transition: opacity 0.2s 0s, visibility 0s 0s;
}
}
div.scrollable::-webkit-scrollbar {
width: 0;
height: 0;
}
div.scrollable::-webkit-scrollbar-thumb {
width: 0;
height: 0;
}
::-webkit-scrollbar-button {
width: 0;
height: 0;
display: none;
}
::-webkit-scrollbar-corner {
background-color: transparent;
}
.scrollable {
width: 100%;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
max-height: 100%;
//position: relative;
will-change: transform;
transform: translateZ(0);
-webkit-transform: translateZ(0);
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
display: flex;
flex-direction: column;
&.scrollable-x {
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
&.scrollable-y {
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
&.scrollable-x ~ .scrollbar-thumb {
top: auto;
right: auto;
width: auto;
height: 4px;
bottom: 0px;
}
.scroll-padding {
flex: 0 0 auto;
&:first-child + * {
flex: 1 1 auto;
}
}
}
.scrollbar-thumb {
position: absolute;
top: 0;
right: 2px;
width: 4px;
//margin-left: 2px;
background-color: #000;
//cursor: grab;
cursor: default;
opacity: 0;
transition-property: opacity;
transition-duration: .2s;
transition-timing-function: ease-in-out;
//display: none;
border-radius: $border-radius;
z-index: 2;
}
:hover > .scrollbar-thumb {
opacity: .4;
}
[contenteditable] {
-webkit-user-select: text;
user-select: text;
}
.menu-horizontal {
width: 100%;
color: $darkgrey;
margin-top: 0px;
margin-bottom: 0;
border-bottom: 1px solid $lightgrey;
display: flex;
justify-content: space-around;
align-items: center;
> li {
display: inline-block;
padding: .75rem 1rem;
cursor: pointer;
text-align: center;
flex: 1;
user-select: none;
font-size: 1rem;
&.active {
position: relative;
color: $blue;
&:after {
content: '';
position: absolute;
background: $blue;
left: 24px;
right: 24px;
bottom: -1px;
height: 4px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
}
}
}
.tabs-container {
min-width: 100%;
display: flex;
/* overflow: hidden; */
overflow-x: hidden;
&.animated {
transition: .2s margin-left;
}
> div {
width: 100%;
max-width: 100%;
overflow: hidden;
/* transition: .2s all; */
display: none;
&.active {
display: flex;
flex-direction: column;
}
> div:not(.scroll-padding) {
width: 100%;
padding: 7.5px;
max-width: 100%;
overflow: hidden;
position: relative;
}
}
}
.justify-start {
justify-content: flex-start;
}
.popup-send-photo {
.popup-container {
width: 420px;
max-width: 420px;
max-height: 425px;
overflow: hidden;
/* padding: 12px 20px 50px; */
padding: 12px 20px 32.5px;
border-radius: $border-radius-medium;
}
.popup-header {
justify-content: space-between;
align-items: center;
margin-bottom: 12.5px;
.popup-close {
font-size: 1.5rem;
margin-left: .5rem;
}
.popup-title {
flex: 1;
padding: 0 2rem;
margin: 0;
font-size: 1.35rem;
font-weight: 500;
}
.btn-primary {
width: 80px;
height: 35px;
font-size: 1rem;
padding: 0;
border-radius: $border-radius-medium;
}
}
.popup-photo {
max-width: 378px;
max-height: 256px;
display: flex;
overflow: hidden;
justify-content: center;
width: fit-content;
border-radius: $border-radius-medium;
margin: 0 auto;
/* align-items: center; */
&.is-document {
margin-left: 0;
}
.document {
max-width: 100%;
overflow: hidden;
cursor: default;
.document-name {
font-weight: normal;
width: 100%;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
/* &.photo {
.document-ico {
border-radius: $border-radius;
}
} */
}
img {
object-fit: contain;
}
}
.input-field {
margin-top: 25px;
input {
height: 55px;
font-size: 1.15rem;
padding: 0 15px;
border-radius: $border-radius-medium;
&:focus {
padding: 0 14.5px;
}
}
label {
font-size: inherit;
opacity: 0;
}
}
}
.page-chats {
/* display: grid; */
/* grid-template-columns: 25% 50%; */
display: flex;
max-height: 100vh;
min-height: 100vh;
> div {
height: 100%;
position: relative;
min-height: 100%;
max-height: 100%;
}
.chats-container {
width: 25%;
/* grid-column: 1; */
}
.chat-container {
background-color: #e6ebee;
/* grid-column: 2; */
width: 100%;
flex: 1;
}
.preloader {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
.preloader-path {
stroke: $button-primary-background;
}
}
@media (min-width: $large-screen) {
border-top-width: 0;
border-bottom-width: 0;
border-left-width: 1px;
border-right-width: 1px;
border-style: solid;
border-color: #DADCE0;
}
}
.page-password {
#password {
padding-right: 2.5rem;
&[type="password"] {
font-size: 2.25rem;
padding-left: 10px;
}
}
.toggle-visible {
position: absolute;
right: .25rem;
z-index: 2;
top: 50%;
transform: translateY(-50%);
font-size: 1.25rem;
color: $placeholder-color;
cursor: pointer;
transition: .2s;
padding: .5rem;
&:hover {
color: #000;
}
}
}