complete redesign: use nodejs on server instead of php - documentation to be updated

nodejs/public/stylesheets/safechat.css

@@ -0,0 +1,248 @@
+* {
+  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;
+}
+#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;
+}