safechat/html/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;
}

@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;
  text-align: center;
}
.toolbutton label img {
  height: 1.5em;
}
.toolbutton input {
  display:none;
}

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

#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;
}

#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 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;
}
#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 img {
  display: block;
  width: 99%;
}

#preview img {
  height: 4em;
}