nadachat/css/main.css

simple secure chat with end to end encyption

/* nadachat css */


/* layout rules */
body,	html {
	margin:0;
	padding:0;
	overflow:hidden;
	position:relative;
	height:100vh;
	color:#eee
}

body {
	/* background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(12, 15, 18, 0.45) 100%); */
	background-color: #000;
	box-shadow: 0 0 1em #111 inset;
}
main {
	position:relative;
	margin-top:4.25em;
	height:calc(100vh - 8.2em);
	overflow:auto;
}

footer {
	position: relative;
	margin-top: .5em;
	height: 3em;
}


/* specific control rules: */

/* "compose" multi-line message input */
#taMsg {
	width:100%;
	height:3em;
	background:#000;
	border:1px solid #555;
	color:#ddd;
	padding:.33em;
	resize:none;
	outline-color: #fff;
	transition: 200ms background;
}

#taMsg:focus{
	border-color: #000;
	background: #222;
}
/* send button */
button#btnSend {
	padding-top: 0.8em;
	width: 100%;
	min-width: 3.6em;
	margin-left: -1.4em;
	border: 0;
	background: transparent;
	float: right;
	color: #999;
}

button#btnSend:focus {
	color: #fff;
	background: #222;
}
/* hide compose and send by default */
#btnSend,	#taMsg {
	display:none;
	outline: 0;
}

/* reload buttons on error and end panels */
button.reload {
	margin: 1em auto;
	display: inherit;
}

/* exit button styles */
#btnLeave {
	position: relative;
	top: 3px;	
	opacity: 0.75;
	padding: 18px 0;
}


/* toggle message controls visibility via app.readyState aka body[data-mode] */
  body[data-mode="5"] #btnSend,	
  body[data-mode="5"] #taMsg {
	display:block
}

body[data-mode="5"] #info{
	display: none;
}

/* the offered url copy-and-paste input for invites */
#pageurl {
	background: #000;
	color: #fff;
	border: 1px solid #777;
	padding: .5em 1em;
	width: 35em;
	max-width: 97%;
	text-align: center;
}

/* jazz up "main" waiting panel */
[data-rs="1"] .panel-body {
	padding: 1em;
}


/* status panel css */

/* move message panel off-screen extra to hide it's wide self when not needed */
body[data-empty='false'] .panel.panel.setup[data-rs='5'],
body[data-empty='false'] .panel.panel.setup[data-rs='6'],
body[data-empty='false'] .panel.panel.setup[data-rs='7']   {
	left:-500vw
}

/* don't show panels until we can use them for feedback */
body.loading  .panel.setup {
	opacity:0
}

/* common status panels rules */
.panel.setup {
	opacity: 0;
	transition: 533ms opacity,	333ms height;
	position: relative;
	top: 1em;
	left: -220vw;
	width:100%;
	z-index: 999999;
	height: 0em;
	overflow: hidden;
	margin-bottom: 0em;
	margin-top: -0.5em;
	xborder-color: #222;
}

div#box {
	margin-top: 1em;
}

body .panel.setup>.panel-heading {
	padding: 0.33em;
	background: linear-gradient(to bottom, rgb(34, 34, 34) 0%,rgba(0, 0, 0, 0.5) 100%);
	color: #ddd;
	font-size: 200%;
	text-shadow: 0 0 1px #000;
	cursor: default;
  user-select: none;           
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  -webkit-touch-callout: none; /* iOS Safari */
  	border-color: #222;
}


/* trigger status panel visibility according to app.readyState:  */
body[data-mode="0"] .panel.setup[data-rs="0"],	
body[data-mode="1"] .panel.setup[data-rs="1"],	
body[data-mode="2"] .panel.setup[data-rs="2"],	
body[data-mode="3"] .panel.setup[data-rs="3"],	
body[data-mode="4"] .panel.setup[data-rs="4"],	
body[data-mode="5"] .panel.setup[data-rs="5"],	
body[data-mode="6"] .panel.setup[data-rs="6"],	
body[data-mode="7"] .panel.setup[data-rs="7"],
body[data-mode="8"] .panel.setup[data-rs="8"],
body[data-mode="9"] .panel.setup[data-rs="9"] {
	height: auto;
	opacity: 1;
	left: 0em;
}

/* center panels where the user waits */
#body .panel.setup[data-rs="0"] .panel-body ,
#body .panel.setup[data-rs="1"] .panel-body ,
#body .panel.setup[data-rs="3"] .panel-body   {
	text-align:center
}

/* push down some of the panels */
.panel.setup[data-rs='7'] ,
.panel.setup[data-rs='4'] {
	margin-top: 0.5em;
}

/* style about information panel */
div#info {
	margin-top: 2em;
	height: auto;
	opacity: 1;
	left: 0;
}

#info .panel-body {
	padding: 1em;
	display: none;
}

#info .panel-title {
	cursor: pointer;
}

div#info.shown  .glyphicon-chevron-down{
	display: inherit;
}

div#info.shown  .glyphicon-chevron-down,
div#info:not(.shown)  .glyphicon-chevron-up{
	display: none;
}

div.shown h3 {
	opacity: 0.75;
}

div#info.shown h3 {
	opacity: 1;
}
/* FAQ formatting */
#faqbox h4 {
	margin: 0.5em 0 0 0;
		font-weight: bold;	
}

#faqbox h4 + p {
  opacity: 0.75;
  font-family: tahoma, arial, helvetica;
  	text-shadow: 0 0 1px #000;
}

/* messages list (inbox) */
ul#ulList {
	padding:0;
	margin-top: 3em;
}

/* de-accentuate the time since the message text is more important */
#ulList time {
	color:#999
}

/* pull list up when not any status messages:  */
body[data-mode="5"] ul#ulList {
	margin-top: -2.5em;
}

#ulList li {
	list-style: none;
	margin-bottom: .3333em;
	background-color: #1b1b1b;
	padding: .25em 0.5em;
	white-space: pre-wrap;
	color: #fff;
	font-size: 110%;
	transition: 400ms background-color;
}

/* differentiate us-vs-them on message in list */
#ulList li.you {
	background-color:#373737;
	color:#ccc;
	opacity:.8
}

body #ulList>li.msg.new {
	background-color: #04500d;
}

/* navigation styles (top bar) */
.nav>li {
	position: relative;
	display: inline-block;
	
}

/* a splash of color */
a.navbar-brand b {
	color: rgba(221,221,221,0.75);
	font-weight: normal;
}


/* align smaller text with "big" header */
.navbar-inverse .navbar-nav>li>a {
	padding:.3em 2em;
	top:.2em;
	color:#ddd;
}

/* scoot centered control to the left */
a#lnkBeep {
	margin-left: -2.5em;
	margin-top: -0.1em;
}

/* scoot left badge to the left, to counter padding */
.col-xs-4:first-child .navbar-brand {
	margin-left: -15px;
}

/* mobile/desktop adjustments */
@media (min-width:768px) {
	.navbar-inverse .navbar-nav>li>a {
		top:.9em
	}
}

/* hover effects for buttons and links */
#btnLeave:hover,
#btnLeave:focus,
#info .panel-title:hover,
#lnkBeep:focus,
#lnkBeep:hover {
	opacity: 1;
}

#info .panel-title,
#lnkBeep {
	opacity: 0.75;
}

#spnBeep {
	font-size: 150%;
}

/* animation */
@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
  100% {-webkit-transform: rotate(359deg);transform: rotate(359deg);}
}@keyframes spin {
  0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
  100% {-webkit-transform: rotate(359deg);transform: rotate(359deg);}
}

.spin {
  -webkit-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
  display: inline-block;
}


/* bootstrap and theme one-off adjustments: */
li p { margin: 0; }
.msg .btn { margin-top: 0.1em; }
#lnkBeep b {	color: #fff;font-weight: normal; }
.progress-bar {	width:100%; }
.progress{	width: 35em; 	margin: 0 auto; max-width: 100%;}
.panel-heading { padding: 0.33em;}
[data-rs] .panel-body {	text-align: center;}
.navbar-inverse {background: linear-gradient(to bottom, rgb(44, 44, 44) 0%,rgba(0, 0, 0, 0.45) 100%); margin-top: -0.5em;}
.panel-default {	border-color: #222;}