Fully end to end encrypted anonymous chat program. Server only stores public key lookup for users and the encrypted messages. No credentials are transfered to the server, but kept in local browser storage. This allows 100% safe chatting. https://safechat.ch
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

257 lines
3.8 KiB

* {
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 img {
display: block;
width: 99%;
}
#preview img {
height: 4em;
}