safechat/nodejs/public/stylesheets/safechat.css

* {
  margin: 0;
  padding: 0;
}

@media (min-resolution: 120dpi) {
  html {
    font-size: 120%;
  }
}

p {
  padding: .5em 0 1em 0;
}

form {
  padding: .5em 0 1em 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

ul li {
  margin-left: 1em;
}

@media (max-width: 45em) {
  form {
    flex-direction: column;
    flex-wrap: wrap;
  }
}

form > * {
  flex-grow: 1;
}
form input[type="submit"] {
  flex-grow: 0;
}
form input#msg {
  flex-grow: 4;
}

.buttongroup {
  flex-grow: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.buttongroup .toolbutton {
  flex-grow: 1;
  flex-basis: 0;
  text-align: center;
  text-align: center;
  cursor: pointer;
}
.toolbutton label img {
  height: 1.5em;
}
.toolbutton input {
  display:none;
}
.toolbutton.bad:first-line,
.toolbutton.good:first-line {
  font-weight: bold;
}
.toolbutton.bad {
  background-color: #f77;
  border: 1px solid black;
}
.toolbutton.good {
  background-color: #7f7;
  border: 1px solid black;
}

table {
  width: 100%;
}
tr { 
  display: flex;
  align-items: stretch;    
}
td:last-child {
  flex:1; /* last td to fill remaining width */
}

.warning {
  padding: 1em;
  margin: 1em;
  background-color: red;
  color: yellow;
  font-size: large;
  border: 2px inset yellow;
}

#header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  margin: 0;
  padding: 0 1em 0 1em;
  background-color: green;
  color: white;
}
#header #togglemenu {
  display: inline;
  float: right;
}
#header h1 {
  font-weight: bold;
  font-size: 100%;
  display: inline;
}

#status {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0 1em 0 1em;
  text-align: right;
}
@media (max-width: 45em) {
  #username {
    display: none;
  }
}
#status.error {
  background-color: red;
  color: black;
}
#status.notice {
  background-color: yellow;
  color: black;
}
#status.success {
  background-color: lightgreen;
  color: black;
}

#connectionstatus #good {
  color: lightgreen;
}
#connectionstatus #bad {
  color: red;
}

#menuicon {
  cursor: pointer;
}

#menu {
  clear: both;
  padding: 2em 0em 1em 0em;
  margin: 0 1em 0 1em;
  float: right;
  background-color: lightblue;
  list-style-type: none;
  border: 1px solid black;
}
#menu li {
  margin-left: 0;
}
#menu a {
  text-decoration: inherit;
  color: inherit;
}
#menu li {
  padding: 0 1em 0 1em;
}
#menu li, #menu li * {
  cursor: pointer;
  text-align: left;
}
#menu li + li {
  border-top: 1px solid black;
  margin-top: 0.5em;
  padding-top: 0.5em;
}

#main {
  padding: 2em 1em 2em 1em;
  clear: both;
}

.clear {
  clear: both;
}
:disabled {
  opacity: 0.4;
  filter: alpha(opacity=40); /* MSIE */
  background-color: lightgray;
}
label[for=send] img {
  opacity: 0.4;
  filter: alpha(opacity=40); /* MSIE */
}
#msgs .msg {
  border: 1px solid black;
  margin: 1ex;
  border-radius: 2ex;
  -moz-border-radius: 2ex;
  -webkit-border-radius: 2ex;
  display: block;
  width: auto;
  height: auto;
  max-width: 60%;
}
#msgs .me {
  float: left;
  background-color: lightgray;
}
#msgs .other {
  float: right;
  background-color: lightyellow;
}
#msgs .msg .header {
  border: 1px solid black;
  border-radius: 2ex 2ex 0 0;
  -moz-border-radius: 2ex 2ex 0 0;
  -webkit-border-radius: 2ex 2ex 0 0;
  /*border-radius: 2ex;
  -moz-border-radius: 2ex;
  -webkit-border-radius: 2ex;*/
  margin-bottom: .25ex;
  padding-bottom: .25ex;
  position: relative;
  height: 1em;
  padding: .5ex 1ex .5ex 1ex;
}
#msgs .msg .header {
  background-color: lightgreen;
}
#msgs .msg .header .date {
  font-size: xx-small;
  float: left;
  padding: 0 1ex 0 0;
}
#msgs .msg .header .sender {
  font-size: small;
  float: right;
  padding: 0 0 0 1ex;
}
#msgs .msg .text {
  float: left;
  padding: .5ex 1ex .5ex 1ex;
}
#msgs .msg .text img {
  border-radius: 2ex;
  -moz-border-radius: 2ex;
  -webkit-border-radius: 2ex;
  display: block;
  width: 100%;
}

#msgs .msg .text video {
  border-radius: 2ex;
  -moz-border-radius: 2ex;
  -webkit-border-radius: 2ex;
  display: block;
  width: 100%;
}

#videorecorder {
  max-width: 100%;
  width: auto;
  height: auto;
  text-align: center;
}

#preview img, #preview video {
  height: 4em;
}