Skip to content

Instantly share code, notes, and snippets.

@Nemra1

Nemra1/index.pug

Created March 16, 2020 23:36
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Nemra1/1bf823741ba19ff4551549378e8bfed9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Nemra1/1bf823741ba19ff4551549378e8bfed9 to your computer and use it in GitHub Desktop.
Download ZIP
Mobile chat interface (switchable users!)
Raw
index.pug
main
.change.firstView
.Avatar
img.second(src="http://davidsclassiccars.com/images/full/rare-1964-chevelle-malibu-ss-4-speed-convertible-true-supersport-7.jpg")
img.first(src="https://pbs.twimg.com/profile_images/456212657553432576/wlvb6fuq.jpeg")
.Name
span.second Vincent Vega
span.first Jules Winnfield
.btnChange Switch!
.chat.start.firstView
.Contact
.btnBack
svg(width="30px" height="60px" viewBox="0 0 30 60")
polyline(class="" points="13.9,38 6.5,30 13.9,22")
.contactInfo
.Avatar.active
img.second(src="http://davidsclassiccars.com/images/full/rare-1964-chevelle-malibu-ss-4-speed-convertible-true-supersport-7.jpg")
img.first(src="https://pbs.twimg.com/profile_images/456212657553432576/wlvb6fuq.jpeg")
.Name
span.second Vincent Vega
span.first Jules Winnfield
.Status Active now
.btnOptions
svg(width="30px" height="60px" viewBox="0 0 30 60")
path(class="" d="M13,22.6c0-1.1,0.9-2,2-2s2,0.9,2,2c0,1.1-0.9,2-2,2S13,23.8,13,22.6z M15,28c-1.1,0-2,0.9-2,2c0,1.1,0.9,2,2,2s2-0.9,2-2 C17,28.9,16.1,28,15,28z M15,35.4c-1.1,0-2,0.9-2,2c0,1.1,0.9,2,2,2s2-0.9,2-2C17,36.2,16.1,35.4,15,35.4z")
.modalAttachment
.preview
.msgSpace
div
ul.msg
li.date
span yesterday
li.first
div Okay so, tell me again about the hash bars?
time 07:12 AM
li.second
div Okay what d'you want to know?
time 07:12 AM
li.first
div Hash is legal there, right?
time 07:12 AM
li.second
div Yeah, it's legal, but is ain't a hundred percent legal 🤓
time 07:12 AM
li.second
div I mean you can't walk into a restaurant, roll a joint, and start puffin' away. I mean they want you to smoke in your home or certain designated places...
time 07:13 AM
li.first
div Those are hash bars? 😍
time 07:13 AM
li.second
div Yeah, it breaks down like this, okay: it's legal to buy it, it's legal to own it and, if you're the proprietor of a hash bar, it's legal to sell it. it's legal to carry it, but that doesn't matter 'cause...
time 07:14 AM
li.second
div ...get a load of this, alright...
time 07:14 AM
li.second
div ...if you get stopped by a cop in Amsterdam, it's illegal for them to search you. I mean that's a right that the cops in Amsterdam don't have 👮🏻🖕
time 07:14 AM
li.first
div Oh, man... I'm goin', that's all there is to it
time 07:14 AM
li.first
div I'm fuckin' goin' 🤪🤪🤪
time 07:15 AM
li.second
div You'll dig it the most. But you know what the funniest thing about Europe is?
time 07:15 AM
li.first
div What?
time 07:15 AM
li.second
div It's the little differences. I mean they got the same shit over there, we got here, but it's just there's a little difference ❤️
time 07:15 AM
li.first
div Examples?
time 07:16 AM
li.second
div Alright, well you can walk into a movie theatre in Amsterdam and buy a beer. And I don't mean in a paper cup. I'm talkin' about a glass of beer.
time 07:16 AM
li.second
div And in Paris, you can buy a beer at MacDonald's.
time 07:16 AM
li.second
div You know what they call a Quarter Pounder with Cheese in Paris?
time 07:16 AM
li.first
div They don't call it a Quarter Pounder with Cheese?
time 07:17 AM
li.second
div No, man, they got the metric system there, they wouldn't know what the fuck a Quarter Pounder is.
time 07:17 AM
li.first
div What'd they call it?
time 07:17 AM
li.second
div They call it Royale with Cheese 👑
time 07:17 AM
li.first
div 🤯
time 07:17 AM
li.first
div What'd they call a Big Mac?
time 07:17 AM
li.second
div Big Mac's a Big Mac, but they call it Le Big Mac.
time 07:17 AM
li.first
div 😂😂😂
time 07:17 AM
li.first
div What do they call a Whopper?
time 07:18 AM
li.second
div I dunno, I didn't go into a Burger King 🤔
time 07:18 AM
li.second
div You know what they put on french fries in Holland instead of ketchup?
time 07:18 AM
li.first
div What?
time 07:18 AM
li.second
div Mayonnaise! 😱
time 07:18 AM
li.first
div Goddamn! 🤢
time 07:18 AM
li.second.img
div
img(src="https://www.rtl.be/info/GED/00900000/907700/907767.jpg")
span.caption I seen 'em do it, man. They fuckin' drown 'em in this shit.
time 07:18 AM
li.first
div 🤮🤮🤮
time 07:19 AM
.input
.btnAttach
input(type="file" id="attachment" accept=".png, .jpg, .jpeg")
label(for="attachment")
svg(width="48px" height="48px" viewBox="0 0 48 48")
path(class="" d="M22,17.5v11c0,1.1,0.9,2,2,2h0c1.1,0,2-0.9,2-2v-11c0-2.2-1.8-4-4-4h0c-2.2,0-4,1.8-4,4v11c0,3.3,2.7,6,6,6h0 c3.3,0,6-2.7,6-6v-9.2")
input(type="text" id="msgInput" placeholder="Type here")
button.send(disabled="true")
svg(width="48px" height="48px" viewBox="0 0 48 48")
path(class="" d="M34.6,22.6l-16.3-8.4c-1.1-0.6-2.5,0.4-2.3,1.6l0.8,6.1c0.1,0.7,0.7,1.3,1.5,1.4l9.8,0.7l-9.8,0.7 c-0.7,0.1-1.4,0.6-1.5,1.4L16,32.1c-0.2,1.3,1.1,2.2,2.3,1.6l16.3-8.4C35.7,24.8,35.7,23.2,34.6,22.6z")
Raw
mobile-chat-interface-switchable-users.markdown

Mobile chat interface (switchable users!)

A mobile chat interface. You can write, send image and... switch user! Hope you'll enjoy :)

A Pen by Simone Giannangeli on CodePen.

License.

Raw
script.js
// change chat
$(".change").click(function(){
if ($(".chat").hasClass("firstView")) {
$(".chat").addClass("changeScreen");
$(".change").addClass("changeScreen");
setTimeout(function(){
$(".chat").removeClass("firstView");
$(".chat").addClass("secondView");
$(".change").removeClass("firstView");
$(".change").addClass("secondView");
}, 500);
setTimeout(function(){
$(".chat").removeClass("changeScreen");
$(".change").removeClass("changeScreen");
}, 1000);
} else {
$(".chat").addClass("changeScreen");
$(".change").addClass("changeScreen");
setTimeout(function(){
$(".chat").removeClass("secondView");
$(".chat").addClass("firstView");
$(".change").removeClass("secondView");
$(".change").addClass("firstView");
}, 500);
setTimeout(function(){
$(".chat").removeClass("changeScreen");
$(".change").removeClass("changeScreen");
}, 1000);
}
});
// send button
$("#msgInput").keyup(function(){
if($(this).val() != "") {
$("button.send").prop("disabled", false);
} else {
$("button.send").prop("disabled", true);
}
});
$(".send").click(function(){
if ($(".chat").hasClass("attachment")) {
sendImg();
} else {
sendMsg();
}
});
$("#attachment").change(function() {
attachment(this);
$("button.send").prop("disabled", false);
});
$("#msgInput").on('keypress',function(e) {
if($(".chat").hasClass("attachment")) {
if(e.which == 13) {
sendImg();
}
} else if($(this).val() != "" && !$(".chat").hasClass("attachment")) {
if(e.which == 13) {
sendMsg();
}
}
});
// send text
function sendMsg() {
var message = $("#msgInput").val();
if ($(".chat").hasClass("start")) {
if ($(".chat").hasClass("firstView")) {
$(".msg").append("<li class=\"date\"><span>today</span></li><li class=\"first\"><div>"+message+"</div><time>"+time(new Date)+"</time></li>");
} else if ($(".chat").hasClass("secondView")) {
$(".msg").append("<li class=\"date\"><span>today</span></li><li class=\"second\"><div>"+message+"</div><time>"+time(new Date)+"</time></li>");
}
$(".chat").removeClass("start");
} else if (!$(".chat").hasClass("start")) {
if ($(".chat").hasClass("firstView")) {
$(".msg").append("<li class=\"first\"><div>"+message+"</div><time>"+time(new Date)+"</time></li>");
} else if ($(".chat").hasClass("secondView")) {
$(".msg").append("<li class=\"second\"><div>"+message+"</div><time>"+time(new Date)+"</time></li>");
}
}
$(".msgSpace div").scrollTop($(".msg").height());
$("#msgInput").val("");
$("button.send").prop("disabled", true);
$("#msgInput").focus();
}
//attach
function attachment(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$(".chat").addClass("attachment");
var preview = e.target.result;
$(".modalAttachment").html("<div class=\"preview\"><img src=\""+preview+"\" /></div>");
}
reader.readAsDataURL(input.files[0]);
}
}
// send img + text
function sendImg() {
$(".chat").removeClass("attachment");
if ($("#msgInput").val() != "" ) {
var message = "<span class=\"caption\">" + $("#msgInput").val() + "</span>";
} else {
var message = ""
}
var attach = $(".preview").html();
if ($(".chat").hasClass("start")) {
if ($(".chat").hasClass("firstView")) {
$(".msg").append("<li class=\"date\"><span>today</span></li><li class=\"first img\"><div>"+attach + message+"</div><time>"+time(new Date)+"</time></li>");
} else if ($(".chat").hasClass("secondView")) {
$(".msg").append("<li class=\"date\"><span>today</span></li><li class=\"second img\"><div>"+attach + message+"</div><time>"+time(new Date)+"</time></li>");
}
$(".chat").removeClass("start");
} else if (!$(".chat").hasClass("start")) {
if ($(".chat").hasClass("firstView")) {
$(".msg").append("<li class=\"first img\"><div>"+attach + message+"</div><time>"+time(new Date)+"</time></li>");
} else if ($(".chat").hasClass("secondView")) {
$(".msg").append("<li class=\"second img\"><div>"+attach + message+"</div><time>"+time(new Date)+"</time></li>");
}
}
$(".msgSpace div").scrollTop($(".msg").height());
$("#msgInput").val("");
$("button.send").prop("disabled", true);
$("#msgInput").focus();
}
// time
function time(date) {
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
hours = hours < 10 ? '0'+hours : hours;
minutes = minutes < 10 ? '0'+minutes : minutes;
var strTime = hours + ':' + minutes + ' ' + ampm;
return strTime;
}
// start
$(".msgSpace div").scrollTop($(".msg").height());
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Raw
style.scss
$bkgMain: #ddd;
$bkgChat: #f1f3f6;
$textDark: #353b47;
$text: #717a90;
$greyLight: #c4c7d0;
$white: #fff;
$statusOk: #19d0c5;
$greyChange :#7b808b;
$bkgDark: #353b47;
$topColor01: #4f89c4;
$me01: #a4c4e1;
$send01: #46cc7c;
$topColor02: #333;
$me02: #e58091;
$send02: #fb963c;
*{letter-spacing: -0.02px;-webkit-font-smoothing: antialiased; width: 100% ;font-family: "Montserrat"; font-size:14px; line-height: 24px; font-weight: 500; box-sizing: border-box; color: $text;}
::-webkit-scrollbar {
display: none;
}
main {
display: block;
position:absolute;
width: calc(100% - 40px);
height: calc(100% - 40px);
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
border-radius: 20px;
background: $bkgMain;
}
.change {
display: block;
position: absolute;
bottom: 0px;
right: 0px;
width: 200px;
height: auto;
padding: 40px;
transform-origin: bottom right;
border-radius: 8px;
opacity: 0.7;
cursor: pointer;
transition: all 500ms;
&:hover {
opacity: 1;
}
&:before {
content: "You are:";
display: block;
width: auto;
height: 30px;
text-align: center;
font-size: 10px;
line-height: 28px;
font-weight: 600;
text-transform: uppercase;
color: $greyChange;
opacity: 0.5;
}
.Avatar {
display: block;
position: relative;
width: 40px;
height: 40px;
margin: 0px auto;
border-radius: 24px;
img {border-radius: 24px;}
}
.Name {
display: block;
width: auto;
height: auto;
text-align: center;
span{
display: block;
margin: 6px 0px 12px 0px;
color: $greyChange;
font-size: 12px;
line-height: 20px;
font-weight: 600;
}
}
.btnChange {
display: block;
position: relative;
width: auto;
height: 30px;
font-size: 18px;
color: $white;
font-size: 12px;
line-height: 30px;
font-weight: 600;
text-align: center;
border-radius: 8px;
background: $send01;
}
}
.change.firstView {
.Avatar {
img.second {display: none;}
}
.Name {
span.second {display: none;}
}
}
.change.secondView {
.Avatar {
img.first {display: none;}
}
.Name {
span.first {display: none;}
}
}
// basic
.chat {
display: block;
position:absolute;
top: calc(50% - 360px);
left: calc(50% - 187.5px);
width: 375px;
height: 720px;
border-radius: 30px 30px 70px 70px;
background: $topColor01;
.Contact {
display: block;
position: absolute;
top: 0px;
left: 0px;
z-index: 100;
width: 100%;
height: 100px;
padding: 20px;
.btnBack {
display: block;
float: left;
width: 30px;
height: 100%;
svg {
fill: none;
stroke: rgba($white, 0.5);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
}
.btnOptions {
display: block;
float: right;
width: 30px;
height: 100%;
svg {
fill: rgba($white, 0.5);
stroke: none;
}
}
.contactInfo {
display: block;
float: left;
width: auto;
height: 60px;
padding: 6px;
.Avatar {
display: block;
position: relative;
float: left;
width: 48px;
height: 48px;
margin: 0px 20px 0px 0px;
border-radius: 24px;
img {
border-radius: 24px;
}
&:after {
content:"";
display: block;
position: absolute;
bottom: -1px;
right: -1px;
width: 10px;
height: 10px;
border-radius: 24px;
border: 2px solid $topColor01;
background: $statusOk;
}
}
.Name {
display: block;
float: left;
width: auto;
height: 48px;
span{
display: block;
margin: 5px 0px 4px 0px;
color: $white;
font-size: 18px;
line-height: 20px;
font-weight: 600;
}
.Status{
display: block;
font-size: 12px;
line-height: 14px;
font-weight: 500;
color: rgba($white, 0.5);
}
}
}
}
.modalAttachment {
display: block;
visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
z-index: 10;
width: 100%;
height: 100%;
padding: 20px;
background: $bkgDark;
border-radius: 30px 30px 50px 50px;
opacity: 0;
.preview{
display: block;
position: absolute;
z-index: 1;
width: 100%;
height: auto;
top: 50%;
left: 0px;
padding: 40px;
transform: translate(0%, -50%);
img{
display: block;
max-width: 100%;
height: auto;
border-radius: 10px;
}
}
}
.input {
display: flex;
justify-content: space-between;
position:absolute;
bottom: 20px;
left: 20px;
z-index: 10;
width: 335px;
height: 60px;
padding: 6px;
border-radius: 30px;
box-shadow: 0px 8px 20px rgba($greyLight, 0.4);
background: $white;
button {
display: block;
width: 48px;
height: 48px;
padding: 0px;
border-radius: 30px;
border: 0px;
outline: 0px;
background: $send01;
cursor: pointer;
&:disabled{
opacity: 0.5;
cursor: default;
}
svg {
fill: $white;
stroke: none;
}
}
input {
display: block;
width: 200px;
height: 48px;
font-size: 14px;
font-weight: 500;
color: $text;
border: 0px;
background: transparent;
outline: 0px;
}
.btnAttach {
display: block;
width: 48px;
height: 48px;
input {display: none;}
label {
display: block;
width: 48px;
height: 48px;
border-radius: 30px;
border: 0px;
outline: 0px;
cursor: pointer;
background: rgba($greyLight,0.05);
svg {
fill: none;
stroke: $greyLight;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
}
}
}
&.attachment .btnAttach {
label {
display: none;
}
}
.msgSpace{
display: block;
position:absolute;
top: 100px;
z-index: 1;
width: 375px;
height: calc(100% - 100px);
overflow: hidden;
border-radius: 30px 30px 50px 50px;
background: $bkgChat;
& > div{
display: block;
width: 100%;
height: calc(100% - 90px);
overflow-y: scroll;
}
&:before{
content:"";
display: block;
position:absolute;
top: 0px;
left: 0px;
z-index: 1;
width: 375px;
height: 40px;
background: linear-gradient(180deg, rgba($bkgChat,0.6) 0%, rgba($bkgChat,0) 100%);
}
&:after{
content:"";
display: block;
position:absolute;
bottom: 90px;
left: 0px;
z-index: 1;
width: 375px;
height: 20px;
background: linear-gradient(180deg, rgba($bkgChat,0) 0%, rgba($bkgChat,1) 100%);
}
}
.msg {
display: block;
float: left;
width: 375px;
//max-height: calc(100% - 110px);
padding: 0px 30px 20px 30px;
margin: 0px;
list-style: none;
li {
display: block;
position: relative;
float: right;
width: 100%;
height: auto;
margin: 20px 0px 0px 0px;
&.date {
display: block;
position: relative;
float: left;
width: 100%;
height: 26px;
text-align: center;
margin: 40px auto 0px auto;
span {
display: inline-block;
width: auto!important;
height: 26px;
text-align: center;
margin: 0px auto;
padding: 0px 10px 0px 10px;
font-size: 10px;
line-height: 28px;
font-weight: 600;
text-transform: uppercase;
color: $bkgChat;
background: $greyLight;
border-radius: 8px;
}
}
div {
display: block;
width: auto;
max-width: 240px;
height: auto;
padding: 10px 20px 10px 20px;
overflow-wrap: break-word;
}
time {
display: block;
position: absolute;
top: calc(50% - 16px);
width: auto;
height: 32px;
font-size: 10px;
line-height: 32px;
font-weight: 600;
text-transform: uppercase;
color: $greyLight;
}
}
}
}
// first view
.chat.firstView {
background: $topColor01;
.Contact {
.contactInfo {
.Avatar {
img.first {
display: none;
}
&:after {
border: 2px solid $topColor01;
}
}
.Name {
span.first{
display: none;
}
}
}
}
.input {
box-shadow: 0px 8px 20px rgba($greyLight, 0.4);
button {
background: $send01;
}
input {
color: $text;
}
}
.msgSpace{
background: $bkgChat;
&:before{
background: linear-gradient(180deg, rgba($bkgChat,0.6) 0%, rgba($bkgChat,0) 100%);
}
&:after{
background: linear-gradient(180deg, rgba($bkgChat,0) 0%, rgba($bkgChat,1) 100%);
}
}
.msg {
li {
&.first div {
float: right;
border-radius: 22px 22px 8px 22px;
color: $white;
background: $me01;
}
&.first ~ li.first + li.first, &.first + li.first {
margin: 6px 0px 0px 0px;
}
&.first ~ li.first + li.first div, &.first + li.first div{
border-radius: 22px 8px 8px 22px;
}
&.second div {
float: left;
border-radius: 22px 22px 22px 8px;
background: $white;
}
&.second ~ li.second + li.second, &.second + li.second {
margin: 6px 0px 0px 0px;
}
&.second ~ li.second + li.second div, &.second + li.second div {
border-radius: 8px 22px 22px 8px;
}
&.img div {
padding: 6px 6px 0px 6px;
}
&.first.img .caption {
float: left;
padding: 0px 6px 10px 14px;
color: $white;
}
&.second.img .caption {
float: left;
padding: 0px 14px 10px 6px;
color: $text;
}
&.first img {
border-radius: 16px 16px 4px 16px;
}
&.first ~ li.first + li.first img, &.first + li.first img {
border-radius: 16px 4px 4px 16px;
}
&.second img {
border-radius: 16px 16px 16px 4px;
}
&.second ~ li.second + li.second img, &.second + li.second img {
border-radius: 4px 16px 16px 4px;
}
time {
color: $greyLight;
}
&.first time {
left: 0px;
}
&.second time {
right: 0px;
}
}
}
}
// second view
.chat.secondView {
background: $topColor02;
.Contact {
.contactInfo {
.Avatar {
img.second {
display: none;
}
&:after {
border: 2px solid $topColor02;
}
}
.Name {
span.second{
display: none;
}
}
}
}
.input {
box-shadow: 0px 8px 20px rgba($greyLight, 0.4);
button {
background: $send02;
}
input {
color: $text;
}
}
.msgSpace{
background: $bkgChat;
&:before{
background: linear-gradient(180deg, rgba($bkgChat,0.6) 0%, rgba($bkgChat,0) 100%);
}
&:after{
background: linear-gradient(180deg, rgba($bkgChat,0) 0%, rgba($bkgChat,1) 100%);
}
}
.msg {
li {
&.first div {
float: left;
border-radius: 22px 22px 22px 8px;
background: $white;
}
&.first ~ li.first + li.first, &.first + li.first {
margin: 6px 0px 0px 0px;
}
&.first ~ li.first + li.first div, &.first + li.first div{
border-radius: 8px 22px 22px 8px;
}
&.second div {
float: right;
border-radius: 22px 22px 8px 22px;
color: $white;
background: $me02;
}
&.second ~ li.second + li.second, &.second + li.second {
margin: 6px 0px 0px 0px;
}
&.second ~ li.second + li.second div, &.second + li.second div {
border-radius: 22px 8px 8px 22px;
}
&.img div {
padding: 6px 6px 0px 6px;
}
&.first.img .caption {
float: left;
padding: 0px 14px 10px 6px;
color: $text;
}
&.second.img .caption {
float: left;
padding: 0px 6px 10px 14px;
color: $white;
}
&.first img {
border-radius: 16px 16px 16px 4px;
}
&.first ~ li.first + li.first img, &.first + li.first img {
border-radius: 4px 16px 16px 4px;
}
&.second img {
border-radius: 16px 16px 4px 16px;
}
&.second ~ li.second + li.second img, &.second + li.second img {
border-radius: 16px 4px 4px 16px;
}
time {
color: $greyLight;
}
&.first time {
right: 0px;
}
&.second time {
left: 0px;
}
}
}
}
//attachment
.chat.attachment {
.Contact {
.btnBack {
svg {
stroke: rgba($white, 1);
}
}
.btnOptions {
opacity: 0;
}
.contactInfo {
.Avatar {
&:after {
border: 2px solid $bkgDark;
}
}
.Name {
span{
line-height: 38px;
}
.Status{
display: none;
opacity: 0;
}
}
}
}
.modalAttachment {
visibility: visible;
opacity: 1;
}
.input {
box-shadow: 0px 8px 20px #1f2127;
background: #485061;
input {
display: block;
width: 220px;
margin: 0px 0px 0px 20px;
color: $white;
}
.btnAttach {
display: none;
}
}
}
.send, .input, .modalAttachment{
transition: .5s ease-out all;
-moz-transition: .5s ease-out all;
-webkit-transition: .5s ease-out all;
}
.chat.changeScreen{
animation-name: changeScreen;
animation-duration: 1s;
animation-iteration-count: 1;
animation-delay: 0s;
}
@keyframes changeScreen {
0% {transform: scale(1); opacity: 1;}
50% {transform: scale(0.8); opacity: 0;}
100% {transform: scale(1); opacity: 1;}
}
.change.changeScreen{
animation-name: switch;
animation-duration: 1s;
animation-iteration-count: 1;
animation-delay: 0s;
}
@keyframes switch {
50% {opacity: 0;}
}
/*
@media screen and (max-height: 800px) {
.chat, .change {transform: scale(0.8)}
@keyframes changeScreen {
0% {transform: scale(0.8); opacity: 1;}
50% {transform: scale(0.6); opacity: 0;}
100% {transform: scale(0.8); opacity: 1;}
}
}
@media screen and (max-height: 650px) {
.chat, .change {transform: scale(0.6)}
@keyframes changeScreen {
0% {transform: scale(0.6); opacity: 1;}
50% {transform: scale(0.4); opacity: 0;}
100% {transform: scale(0.6); opacity: 1;}
}
}
@media screen and (max-width: 800px) {
.chat, .change {transform: scale(0.8)}
@keyframes changeScreen {
0% {transform: scale(0.8); opacity: 1;}
50% {transform: scale(0.6); opacity: 0;}
100% {transform: scale(0.8); opacity: 1;}
}
}
@media screen and (max-width: 650px) {
.chat, .change {transform: scale(0.6)}
@keyframes changeScreen {
0% {transform: scale(0.6); opacity: 1;}
50% {transform: scale(0.4); opacity: 0;}
100% {transform: scale(0.6); opacity: 1;}
}
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment