base.css

/* ------------------------------------------
PURE CSS SPEECH BUBBLES
by Nicolas Gallagher
- http://nicolasgallagher.com/pure-css-speech-bubbles
- http://nicolasgallagher.com
- http://twitter.com/necolas
modified by Red Panda Apps
- https://redpandaapps.tk
- https://www.twitter.com/redpandadevs
Created: 02 March 2010
Version: 1.2 (03 March 2011)
Dual licensed under MIT and GNU GPLv2 Nicolas Gallagher
------------------------------------------ */

/* NOTE: Some declarations use longhand notation so that it can be clearly
explained what specific properties or values do and what their relationship
is to other properties or values in creating the effect */

/* ========================================================================
== GENERAL STYLES
** ======================================================================== */

:root {
  --background: #ECE5DD; 
  --color-left: #000;
  --bg-color-left: #ddd;
  --color-right: #fff;
  --bg-color-right: #FF7043;
  --max-width: 70%;
  --header-bg-color: rgba(174,213,129,1);
  --header-color: #000;
  --timestamp-color: #666;
  --link-color: #1976D2;
}

.chat {
  padding:0;
  margin:0;
  font:1em/1.4 roboto, "roboto thin", Arial, sans-serif;
  background:var(--background);
}

table {
  margin-top:1em;
  width:100%;
  word-wrap:break-word;
  white-space:pre-wrap;
}

a:link, a:visited {
  border:0;
  text-decoration:none;
  color:var(--link-color);
}

a:hover, a:focus, a:active {
  border:0;
  color:purple;
}

img, audio, video, iframe, source {
  width:100%;
  height:100%;
  border:none;
  white-space:normal;
}

/* Sets the styles that are valid for all speech bubbles */

.right, .left {
  position:relative;
  padding:10px 10px 6px;
  margin:0.5em 0 0.5em;
  max-width:var(--max-width);
  display:table-cell;
}

.left {
  float:left;
  color:var(--color-left);
  background:var(--bg-color-left);
}

.right {
  float:right;
  color:var(--color-right);
  background:var(--bg-color-right);
}

/*
 Should you want to set a background colour on a containing element
 certain types of bubble effect may require you to include these
 style declarations.
 */
.content {
  position:relative;
  width:100%;
  height:100%;
  opacity:0.7;
  color:#fff;
  z-index:-1;
}

/* ========================================================================
== ADDS CAPTION AND BYLINE (FOR NAME AND DATE/TIME)
** ======================================================================== */

.caption {
	font-size:90%;
	font-weight:bold;
}

.caption:after {
	content:'\A';
}

.byline {
	font-size:80%;
	color:var(--timestamp-color);
	/* float:right; */
	text-align:right;
	display:block;
}

.big {
	font-size:3em;
}

.header {
	position:relative;
	display:inline-block;
	padding:10px;
	color:var(--header-color);
	background:var(--header-bg-color);
	text-align:center;
	margin: 1em;
	margin-left: calc(50% - 45px);
}

.fab {
	font-size:150%;
  width:2em;
	height:2em;
	border-radius:2em;
	border:none;
	color:var(--color-right);
	background:var(--bg-color-right);
	z-index:2;
	padding:2px;
}

.fab.fixed {
	bottom:0.5em;
	right:0.5em;
  position:fixed;
}

.fab:hover {
	cursor:pointer;
}

/* ========================================================================
== ADDS A MODAL WITH CLOSE BUTTON
** ======================================================================== */

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  height: auto;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
      width: 100%;
      max-height: 90%;
  }
}