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.

242 lines
3.5 KiB

* {
margin: 0;
padding: 0;
}
@media (min-resolution: 120dpi) {
html {
font-size: 120%;
}
}
9 years ago
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;
}
9 years ago
@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;
}
9 years ago
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;
}
9 years ago
#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;
}
9 years ago
#header h1 {
font-weight: bold;
font-size: 100%;
display: inline;
9 years ago
}
#status {
9 years ago
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;
9 years ago
}
}
#status.error {
background-color: red;
color: black;
}
#status.notice {
background-color: yellow;
color: black;
}
#status.success {
background-color: lightgreen;
color: black;
}
9 years ago
#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 {
9 years ago
padding: 2em 1em 2em 1em;
clear: both;
9 years ago
}
.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%;
9 years ago
}
#msgs .me {
float: left;
background-color: lightgray;
9 years ago
}
#msgs .other {
float: right;
background-color: lightyellow;
9 years ago
}
#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;*/
9 years ago
margin-bottom: .25ex;
padding-bottom: .25ex;
position: relative;
height: 1em;
padding: .5ex 1ex .5ex 1ex;
}
#msgs .msg .header {
background-color: lightgreen;
9 years ago
}
#msgs .msg .header .date {
font-size: xx-small;
float: left;
padding: 0 1ex 0 0;
9 years ago
}
#msgs .msg .header .sender {
font-size: small;
float: right;
padding: 0 0 0 1ex;
9 years ago
}
#msgs .msg .text {
float: left;
padding: .5ex 1ex .5ex 1ex;
}
#msgs .msg img {
display: block;
width: 99%;
}
#preview img {
height: 4em;
}