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.

1329 lines
24 KiB

5 years ago
.chat-container {
display: flex;
5 years ago
// padding: 200px;
width: 100%;
align-items: center;
height: 100vh;
overflow: hidden;
flex-direction: column;
position: relative;
background-image: url('../../../public/assets/img/camomile.jpg');
background-size: cover;
background-position: center center;
5 years ago
#im-title {
cursor: pointer;
span.emoji {
vertical-align: inherit;
}
5 years ago
}
5 years ago
/* .chat-background, #chat-closed {
position: absolute;
/* left: 0;
top: 0;
width: 100%;
height: 100%; *
left: -1%;
top: -1%;
width: 102%;
height: 102%;
background-image: url('../../../public/assets/img/camomile.jpg');
background-size: cover;
background-position: center center;
display: none;
} */
5 years ago
#chat-background-canvas {
display: none;
}
5 years ago
/* #chat-closed {
z-index: 3;
}
5 years ago
> *:not(.chat-background) {
z-index: 2;
} */
#topbar {
width: 100%;
background-color: #fff;
box-sizing: border-box;
user-select: none;
-webkit-user-select: none;
display: flex;
align-items: center;
box-shadow: 0 1px 2px 0 rgba(16, 35, 47, 0.07);
5 years ago
padding: .5rem 1rem;
flex: 0 0 auto; /* Forces side columns to stay same width */
min-height: 60px;
max-height: 60px;
& > * {
margin: 0 2px;
}
.chat-info {
flex-grow: 1;
}
.content {
5 years ago
padding-left: 1rem;
flex: 1;
}
.person {
display: flex;
5 years ago
align-items: center;
cursor: pointer;
&:hover {
background-color: transparent;
}
.user-avatar {
width: 44px;
5 years ago
height: 44px;
line-height: 44px;
}
.bottom {
font-size: 14px;
5 years ago
line-height: 18px;
color: $placeholder-color;
.online {
color: $darkblue;
}
}
5 years ago
}
}
#bubbles {
5 years ago
/* overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none; */
width: 100%;
5 years ago
height: 100%;
max-height: 100%;
flex: 1 1 auto; /* Lets middle column shrink/grow to available width */
overflow: hidden;
position: relative;
> .scrollable {
position: unset;
}
5 years ago
&:not(.scrolled-down) {
-webkit-mask-image: -webkit-linear-gradient(bottom, transparent, #000 20px);
mask-image: linear-gradient(0deg, transparent 0, #000 20px);
#bubbles-go-down {
opacity: 1;
}
5 years ago
}
5 years ago
.preloader {
width: 100%;
height: 100%;
5 years ago
svg {
width: 50px;
height: 50px;
}
}
5 years ago
#bubbles-inner {
5 years ago
//max-width: 700px;
5 years ago
width: 100%;
display: flex;
flex-direction: column;
flex-shrink: 1;
padding-top: 9px;
5 years ago
margin: 0 auto;
box-sizing: border-box;
min-height: 100%;
justify-content: flex-end;
&.is-chat {
5 years ago
.is-in .bubble__container {
margin-left: 45px;
}
}
5 years ago
}
#bubbles-go-down {
position: absolute;
//opacity: 0;
background-color: #fff;
border-radius: 50%;
width: 3.25rem;
height: 3.25rem;
color: $placeholder-color;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
right: 17.5px;
bottom: 17.5px;
cursor: pointer;
opacity: 0;
transition: .2s opacity;
user-select: none;
-webkit-user-select: none;
&:before {
margin-left: .75px;
}
}
5 years ago
.service {
align-self: center;
5 years ago
.service-msg {
color: #fff;
background-color: rgba(#000, 0.22);
padding: 0 8px;
line-height: 24px;
font-size: 15px;
border-radius: 12px;
user-select: none;
display: flex;
align-items: center;
justify-content: center;
.name {
cursor: pointer;
margin-right: 5px;
}
5 years ago
}
}
5 years ago
.bubble {
5 years ago
padding-top: 5px;
display: grid;
grid-template-columns: 1fr 700px 1fr;
grid-row-gap: 0px;
&:before, &:after {
content: " ";
width: 100%;
}
&__container {
min-width: 60px;
max-width: 85%;
border-radius: 12px;
box-shadow: 0 1px 2px 0 rgba(16, 35, 47, 0.15);
position: relative;
display: flex;
flex-direction: column-reverse;
/* font-size: 0; */
width: max-content;
height: fit-content;
}
&.service {
display: block;
padding: 1rem 0;
}
&.forwarded {
.forward {
opacity: 0;
position: absolute;
right: -46px;
bottom: 0;
width: 38px;
height: 38px;
font-size: 1.5rem;
align-items: center;
display: flex;
justify-content: center;
color: #fff;
border-radius: 50%;
background: rgba(0, 0, 0, 0.16);
cursor: pointer;
transition: .2s opacity;
svg {
width: 20px;
height: 20px;
}
}
}
&:not(.hide-name) {
.audio {
margin: 4px 0;
}
}
&:hover {
.forward {
opacity: 1;
}
}
5 years ago
.reply {
width: auto;
.reply-content {
height: auto;
5 years ago
min-height: 32px;
5 years ago
}
}
5 years ago
&.photo, &.video {
5 years ago
.bubble__container {
width: min-content;
}
5 years ago
.box.web {
/* width: max-content; */ // commented 10.02.2020
/* width: min-content; */
max-width: 100%;
5 years ago
}
}
5 years ago
&.webpage {
.time {
float: none;
width: 0;
5 years ago
}
}
img.emoji {
5 years ago
height: 18px;
width: 18px;
margin: 0 .05rem;
}
span.emoji {
height: auto;
width: auto;
overflow: visible;
vertical-align: unset;
}
5 years ago
&.emoji-big {
font-size: 0;
5 years ago
.bubble__container {
background: none!important;
box-shadow: none;
line-height: 1;
user-select: none;
-webkit-user-select: none;
}
5 years ago
.attachment {
padding-top: .5rem;
padding-bottom: 1.5rem;
max-width: fit-content!important;
max-height: fit-content!important;
5 years ago
span.emoji {
height: auto;
width: auto;
}
}
}
5 years ago
&.emoji-1x {
font-size: 96px;
5 years ago
img.emoji {
height: 64px;
width: 64px;
/* height: 96px;
width: 96px; */
}
}
5 years ago
&.emoji-2x {
font-size: 64px;
5 years ago
img.emoji {
height: 48px;
width: 48px;
/* height: 64px;
width: 64px; */
}
}
5 years ago
&.emoji-3x {
font-size: 52px;
5 years ago
img.emoji {
height: 32px;
width: 32px;
/* height: 48px;
width: 48px; */
}
}
&.sticker, &.round {
5 years ago
.bubble__container {
cursor: pointer;
background: none!important;
box-shadow: none;
5 years ago
/* max-width: 300px;
max-height: 300px; */
5 years ago
}
img {
object-fit: contain;
}
5 years ago
.message.message-empty {
display: none;
}
5 years ago
&:hover .message.message-empty {
display: block;
}
}
5 years ago
&.sticker {
.bubble__container {
max-width: 200px;
max-height: 200px;
}
}
&.round {
.attachment {
max-width: 200px;
max-height: 200px;
}
}
.message:not(.message-empty) + .attachment,
&.is-reply .message:not(.message-empty) + .attachment {
5 years ago
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
5 years ago
&:not(.emoji-big) .attachment {
font-size: 0;
}
5 years ago
.attachment {
max-width: 100%;
border-radius: inherit;
overflow: hidden;
5 years ago
display: flex; // lol
justify-content: center;
position: relative;
5 years ago
img, video {
width: auto;
height: auto;
max-width: 100%;
cursor: pointer;
}
}
5 years ago
&:not(.sticker) {
.attachment {
max-width: 380px;
max-height: 380px;
width: max-content;
5 years ago
}
img:not(.emoji), video {
/* object-fit: contain; */
object-fit: cover;
width: 100%;
height: 100%;
}
5 years ago
}
//&.video {
//.attachment {
//max-height: fit-content;
/*img {
width: 100%;
height: 100%;
}*/
//}
//}
&.round.video {
.attachment {
max-height: 200px;
max-width: 200px;
//max-height: fit-content;
//-webkit-clip-path: ellipse(100px 100px at center);
//clip-path: ellipse(100px 100px at center);
}
}
5 years ago
.box, .reply {
5 years ago
font-size: .95rem;
// margin: .25rem;
margin: 4px 4px 4px 6px;
5 years ago
padding: .25rem;
margin-bottom: -5px;
border-radius: 4px;
//transition: anim(background-color);
5 years ago
/* &:hover {
cursor: pointer;
} */
5 years ago
&.web {
margin-top: -6px;
// margin-bottom: 5px;
5 years ago
max-width: 100%;
overflow: hidden;
5 years ago
.preview {
max-height: 300px;
max-width: 380px;
/* max-height: 100%;
max-width: 100%; */
5 years ago
border-radius: 4px;
margin-bottom: 3px;
5 years ago
overflow: hidden;
user-select: none;
-webkit-user-select: none;
5 years ago
cursor: pointer;
position: relative;
width: max-content;
5 years ago
img, video {
max-width: 100%;
/* width: 100%;
height: 100%; */
5 years ago
}
}
5 years ago
.title {
letter-spacing: -0.2px;
line-height: 1.2;
5 years ago
font-weight: 500;
}
.name {
letter-spacing: -0.3px;
5 years ago
display: block;
5 years ago
&:hover {
text-decoration: underline;
}
}
5 years ago
.text {
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
letter-spacing: -0.3px;
margin-top: 2px;
font-size: 0.965rem;
5 years ago
}
}
5 years ago
.quote {
// padding-left: .5rem;
padding-left: 0.55rem;
5 years ago
max-width: 100%;
overflow: hidden;
width: 100%;
5 years ago
}
5 years ago
.text/* , .reply-subtitle */ {
5 years ago
line-height: 1.2;
5 years ago
}
5 years ago
.name, .reply-title {
5 years ago
font-weight: 500;
display: inline!important;
5 years ago
}
5 years ago
}
.reply {
5 years ago
max-width: 300px;
5 years ago
margin-bottom: 6px;
margin-top: 0;
cursor: pointer;
5 years ago
}
&.is-reply {
&.emoji-big, &.sticker {
5 years ago
.reply {
padding: 10px;
border-radius: 12px;
border: 1px solid #ccc;
max-width: 300px;
5 years ago
height: 54px;
max-height: 54px;
white-space: nowrap;
position: absolute;
top: 0;
5 years ago
margin-bottom: 0;
5 years ago
.reply-content {
margin-top: 0;
}
}
}
5 years ago
.reply-content {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
5 years ago
.message {
font-size: 16px;
//padding: 0 .6rem .2675rem .6rem;
padding: 0 .6rem 6px .6rem;
5 years ago
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
color: #000;
line-height: 21px;
5 years ago
* {
overflow: hidden;
text-overflow: ellipsis;
}
5 years ago
&:last-child {
//padding-top: .2675rem;
padding-top: 6px;
5 years ago
}
5 years ago
&.message-empty {
position: absolute;
bottom: .1rem;
right: .1rem;
border-radius: 12px;
background-color: rgba(0, 0, 0, .4);
padding: 0 .3rem;
z-index: 2;
5 years ago
.time {
color: #fff;
}
}
5 years ago
.emoji {
font-size: 1.2rem;
}
}
5 years ago
.time {
font-size: .8rem;
user-select: none;
float: right;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
5 years ago
height: 20px;
line-height: 20px;
5 years ago
.inner {
position: absolute;
bottom: 0;
right: 0;
font-size: 12px;
display: flex;
align-items: center;
line-height: 1;
i {
font-size: 1.15rem;
margin-right: .4rem;
margin-left: .1rem;
}
i.edited {
overflow: visible;
font-size: .8rem;
}
5 years ago
}
}
&.is-edited.channel-post .time {
width: calc(5rem + 42px);
}
&.channel-post .time {
width: 5rem;
}
&.is-edited .time {
width: 90px;
}
.message.message-empty .time {
padding: 0;
display: flex;
align-items: center;
width: auto;
.inner {
margin-bottom: 0;
position: relative;
padding: 0 2.5px;
bottom: 0;
}
}
5 years ago
.user-avatar {
position: absolute;
left: -3rem;
width: 40px;
height: 40px;
line-height: 40px;
5 years ago
bottom: 0;
font-size: 1rem;
cursor: pointer;
5 years ago
}
5 years ago
&:not(.forwarded).hide-name, &.emoji-big {
.name {
display: none;
}
}
.name {
5 years ago
cursor: pointer;
}
5 years ago
&__container > .name {
/* padding: .2675rem .6rem 0 .6rem; */
padding: .32rem .6rem 0 .6rem;
5 years ago
font-weight: 500;
/* padding-bottom: 4px; */
color: $darkblue;
font-size: .9rem;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
5 years ago
//width: max-content;
//white-space: nowrap;
5 years ago
}
&:not(.webpage) {
&.photo, &.video {
.name {
//padding-bottom: .2675rem;
padding-bottom: 6px;
}
.message:not(.message-empty) {
//padding-top: .2675rem;
padding-top: 6px;
}
}
}
5 years ago
&.hide-name:not(.is-reply) .message:not(.message-empty) {
//padding-top: .2675rem;
padding-top: 6px;
}
5 years ago
&.hide-name:not(.sticker):not(.emoji-big) .reply {
margin-top: 6px;
}
5 years ago
&:not(.sticker):not(.emoji-big):not(.round).is-group-last .bubble__container:after {
5 years ago
position: absolute;
5 years ago
bottom: 0;
5 years ago
width: 11px;
height: 20px;
background-repeat: no-repeat repeat;
content: '';
background-size: 11px 20px;
5 years ago
background-position-y: 1px;
5 years ago
}
}
5 years ago
.bubble-audio.is-in .time {
width: inherit;
}
.bubble-audio.is-out .time {
width: inherit;
}
5 years ago
/* .bubble + .bubble {
5 years ago
margin-top: 5px;
5 years ago
} */
5 years ago
.in,
.out {
display: flex;
5 years ago
flex-direction: column;
padding: 5px 0;
5 years ago
}
.is-in {
5 years ago
.bubble__container {
margin-right: auto;
background-color: #ffffff;
border-radius: 6px 12px 12px 6px;
5 years ago
}
5 years ago
&.is-group-first .bubble__container {
5 years ago
border-radius: 12px 12px 12px 6px;
}
5 years ago
&.is-group-last .bubble__container {
5 years ago
border-radius: 6px 12px 12px 0px;
//border-radius: 12px 12px 12px 0px;
5 years ago
&:after {
left: -8.4px;
background-image: url('../../assets/img/msg-tail-left.svg');
}
5 years ago
}
5 years ago
&.is-group-first.is-group-last .bubble__container {
5 years ago
border-radius: 12px 12px 12px 0px;
}
&.forwarded .attachment,
&.is-reply .attachment,
&:not(.hide-name) .message-empty + .attachment/* ,
&:not(.hide-name):not(.sticker) .attachment */ {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
5 years ago
a {
color: $darkblue;
}
5 years ago
.quote:hover, .reply:hover {
5 years ago
background-color: $light;
}
&.is-reply {
&.emoji-big, &.sticker {
5 years ago
.reply {
left: calc(100% + 10px);
background-color: #fff;
}
}
}
5 years ago
.quote {
border-left: 2px $darkblue solid;
5 years ago
* {
overflow: hidden;
text-overflow: ellipsis;
}
}
5 years ago
.quote .name, .reply-title {
color: $darkblue;
}
5 years ago
.time {
color: #a3adb6;
width: 36px;
5 years ago
.inner {
padding: 0 7px 0 5px;
margin-bottom: 4px;
}
}
}
.is-out {
5 years ago
.bubble__container {
margin-left: auto;
background-color: #eeffde;
border-radius: 12px 6px 6px 12px;
5 years ago
}
5 years ago
&.is-group-first .bubble__container {
5 years ago
border-radius: 12px 12px 6px 12px;
}
5 years ago
&.is-group-last .bubble__container {
5 years ago
border-radius: 12px 6px 0px 12px;
5 years ago
5 years ago
&:after {
right: -8.4px;
background-image: url('../../assets/img/msg-tail-right.svg');
}
5 years ago
}
5 years ago
&.is-group-first.is-group-last .bubble__container {
5 years ago
border-radius: 12px 12px 0px 12px;
}
5 years ago
&.forwarded .attachment,
&.is-reply .attachment {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
5 years ago
5 years ago
.quote:hover, .reply:hover {
5 years ago
background-color: rgba($green, 0.12);
}
&.is-reply {
&.emoji-big, &.sticker {
5 years ago
.box, .reply {
background-color: #eeffde;
right: calc(100% + 10px);
border-color: rgba($green, .12);
}
}
}
5 years ago
.quote {
border-left: 2px $darkgreen solid;
5 years ago
}
.reply-border {
background-color: $darkgreen;
}
.quote .name, .reply-title {
color: $darkgreen;
}
5 years ago
.time {
color: $darkgreen;
width: 50px;
display: inline-block;
5 years ago
.inner {
padding: 0 4px 0 4px;
bottom: 1px;
5 years ago
}
.tgico:after {
font-size: 19px;
vertical-align: middle;
margin-left: 1px;
5 years ago
}
}
&.forwarded {
5 years ago
.name {
color: $darkgreen;
}
}
&.is-read {
5 years ago
.time .tgico:after {
content: $tgico-checks;
}
}
&.is-sent {
5 years ago
.time .tgico:after {
content: $tgico-check;
}
}
&.is-sending {
.time .tgico:after {
content: $tgico-sending;
}
}
&.is-reply .name {
display: none;
}
&.is-edited .time {
width: 85px;
}
5 years ago
.user-avatar {
left: auto;
right: -2.5rem;
}
.audio {
&-waveform {
rect {
fill: #B8DDA9;
&.active {
fill: #68AB5A;
}
}
}
&-time {
color: #68AB5A;
}
&-toggle, &-download {
5 years ago
background-color: #4FAE4E;
}
}
5 years ago
}
}
5 years ago
#chat-input {
display: flex;
align-items: center;
width: 100%;
max-width: 700px;
padding-top: .35rem;
padding-bottom: 1rem;
justify-content: space-between;
flex: 0 0 auto; /* Forces side columns to stay same width */
position: relative;
5 years ago
#input-message {
background: none;
border: none;
width: 100%;
padding: .5rem .5rem;
font-size: .95rem;
/* height: 100%; */
max-height: 30rem;
overflow-y: none;
5 years ago
resize: none;
border: none;
outline: none;
cursor: text;
}
5 years ago
[contenteditable=true]:empty:before {
content: attr(data-placeholder);
color: #9e9e9e;
display: block; /* For Firefox By Ariel Flesler */
}
5 years ago
.btn-circle {
flex: 0 0 auto;
font-size: 1.5rem;
line-height: 1.5rem;
height: 3.25rem;
width: 3.25rem;
color: #9e9e9e;
background-color: #fff;
align-self: flex-end;
5 years ago
&.tgico-send {
color: $blue;
}
}
5 years ago
.os-scrollbar-handle {
background: rgba(0, 0, 0, 0.2);
}
}
.input-message {
display: flex;
align-items: center;
flex-direction: column;
width: calc(100% - 3.75rem);
justify-content: center;
background-color: #fff;
border-radius: 12px;
border-bottom-right-radius: 0;
box-shadow: 0 1px 2px 0 rgba(16, 35, 47, 0.07);
margin-right: 9px;
padding: 4.5px .5rem;
/* padding: 3px .5rem 6px .5rem; */
min-height: 3.25rem;
max-height: 30rem;
caret-color: $button-primary-background;
flex: 1;
position: relative;
&:after {
position: absolute;
bottom: -1px;
width: 11px;
height: 20px;
background-repeat: no-repeat repeat;
content: '';
background-size: 11px 20px;
right: -9px;
background-image: url('../../assets/img/msg-tail-left.svg');
transform: scaleX(-1);
}
#attach-file {
&.menu-open {
color: $blue;
}
}
> div {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
//min-height: inherit;
}
.reply-wrapper {
justify-content: flex-start;
overflow: hidden;
transition: .2s all;
height: 0px;
&.active {
height: 39px;
}
.reply {
width: 100%;
margin-left: .5rem;
min-height: 35px;
}
}
.new-message-wrapper {
//padding: 4.5px 0;
//padding-bottom: 4.5px;
align-items: flex-end;
.btn-icon:before {
vertical-align: bottom;
}
}
.input-message-container {
width: 1%;
max-height: inherit;
flex: 1 1 auto;
position: relative;
overflow: hidden;
}
.btn-icon {
display: block;
color: $placeholder-color;
font-size: 1.5rem;
line-height: 1.5rem;
transition: .2s color;
flex: 0 0 auto;
&.active {
color: $blue;
}
}
.emoji {
font-size: 24px;
height: 24px;
width: 24px;
}
}
.pinned-message, .reply {
cursor: pointer;
display: flex;
flex-direction: row;
align-items: center;
overflow: hidden;
box-sizing: border-box;
width: 187px;
margin-right: 1rem;
max-height: 35px;
5 years ago
position: relative;
/* padding: .25rem; */
5 years ago
&.is-reply-media {
.pinned-message-content, .reply-content {
padding-left: 40px;
}
}
&:hover {
background-color: rgba(112, 117, 121, 0.08);
}
&-border {
height: 32px;
border-radius: 1px;
min-width: 2px;
background: $blue;
}
&-content {
margin-left: 8px;
flex-grow: 1;
flex-shrink: 1;
overflow: hidden;
pointer-events: none;
5 years ago
position: relative;
height: 32px;
display: flex;
flex-direction: column;
5 years ago
justify-content: space-between;
}
&-title {
color: $blue;
}
&-title, &-subtitle {
font-size: 14px;
5 years ago
//line-height: 18px;
5 years ago
//line-height: 1;
line-height: 15px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&-subtitle {
white-space: nowrap;
color: #111;
}
5 years ago
&-media {
height: 32px;
width: 32px;
border-radius: 8px;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
img.emoji {
height: 16px;
width: 16px;
vertical-align: top;
}
span.emoji {
font-size: 16px;
vertical-align: unset;
}
}
5 years ago
/* #chat-closed {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: inherit;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
5 years ago
flex-direction: column;
.tgico-chatsplaceholder {
font-size: 10rem;
color: #ABB0B3;
}
5 years ago
h3 {
font-size: 2rem;
color: #707579;
text-align: center;
}
5 years ago
.buttons {
display: flex;
justify-content: center;
align-items: center;
margin-top: 1rem;
5 years ago
button {
margin: 0 2.5rem;
width: 4rem;
height: 4rem;
background: #fff;
border: none;
position: relative;
font-size: 2rem;
color: #707579;
cursor: pointer;
5 years ago
box-shadow: 0 1px 2px 0 rgba(16, 35, 47, 0.07);
5 years ago
&:hover {
background: #4EA4F6;
color: #fff;
5 years ago
span {
color: #4EA4F6;
}
}
5 years ago
span {
position: absolute;
top: 100%;
left: 50%;
width: 100%;
padding-top: 1rem;
transform: translateX(-50%);
font-size: .9rem;
font-family: "Roboto";
}
}
}
} */
}
#bubble-contextmenu {
position: fixed;
right: auto;
bottom: auto;
}
5 years ago
.popup {
&.popup-delete-message {
.popup-header {
margin-bottom: 1rem;
}
}
.popup-buttons {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
button {
background: none;
outline: none;
border: none;
padding: .5rem .5rem;
text-transform: uppercase;
transition: .2s;
border-radius: $border-radius;
cursor: pointer;
color: $blue;
&:hover {
background-color: rgba(112, 117, 121, 0.08);
}
& + button {
margin-top: .5rem;
}
}
}
}